#header_container
{
    position: relative;
	width: 100%;
	/*border: 1px solid black;*/
}

#head_sub_container
{
	height: 15%;
	background: #306;
}

#logo_container 
{
	position: relative;
	left: 1.5%;
	top:5%;
	height: 8%;
	width: 90%; 
	background: #306;
	/*border: 1px solid black*/
}

#logo_layer /*just a container for each later*/
{ 
	position: relative;
	height: 100%; /*120px*/
}
#logo_element /*A container for each 'box', sized so that they sit the correct distance apart. */
{
	float: left;
	width: 8.115vh;/*box_width + (gap between boxes = tan(15) * box_width  = 0.268 x 6.4vh = 1.715vh) = 8.115VH*/
    height: 80%;  /*80% of 100% of the container which is 8% of the body*/
}

#logo_box  /*The rounded parallelogram shape*/
{ 
    
	position: relative;
	/*top: 20px*/
	/*left: 0%; /*20px*/
	height: 6.4vh; /*100% (of 80% of 8%) = 8%*/
	width: 6.5vh; /*80% of 8% of the viewport height*/
    background: white; 
		/*-moz-border-radius: 10%; */
		-webkit-border-radius: 10%; 
			border-radius: 10%; 
   -webkit-transform: skew(-15deg); 
        -moz-transform: skew(-15deg); 
            -o-transform: skew(-15deg);

} 

#logo_box2
{
	position: relative;
	height: 6.4vh; /*100% (of 80% of 8%) = 8%*/
	width: 24vh; 
    background: white; 
   -webkit-transform: skew(-15deg); 
        -moz-transform: skew(-15deg); 
            -o-transform: skew(-15deg);
}

#logo_text
{
    position: relative;
	font-family: 'washington';
	color: #306;
	/*using vh for the font size doesn't work in chrome. It scales around as you zoom*/
	font-size: 8.45vh; /*font height is about 75% of the box height = 0.75 x 80% x 8% = 1.333 x 6.4 = 8.5*/
	/*positioning the characters inside the box - fine tuned!*/
	text-align: left;
	top: -24.5%;
	left: -0.8%;
}

#logo_disco /*The bit that says : Discography... */
{
    position: relative;
   font-family: 'washington';
   color: white;
   font-size: 8.45vh;
   top: -24.5%;
}


#header2
{
	clear: left; /*Force it to align left as the element above seem to push it out */
	position:relative; 
	top: 5vh;
	left: 1%;
	width:99%;
	height: 7%;	
	font-size: 5.25vh; /*font height is about 75% of the box height = 75% x 7% = 5.25*/
	background:#306;
}

#best_title
{
	float: left;
	width: 80%;
	height: 100%
}

#page_title
{
	float: left;
	right: 2%;
	height: 100%
}

/*Used in header.php for the best of...*/
title3
{
	font-family: 'washington';
	color:white;
}
/*Used in header.php for page title*/
title4
{
	font-family: 'washington';
	color:white;
}