/*
Vericode
Stuart Sillitoe 2005 - 2013
*/


/*
ACC300 lime
0C6BB7 blue
C33500 red
4F6F07 green
C4DC00 limer
*/





*
{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
list-style:none;
font-weight:400;
}

html
{
height:100%;
}

body
{
background:#996653;
color:#485759;
font-family:'Francois One', 'Gill Sans', sans-serif;
font-weight:100;
font-size:16px;
line-height:1.3;
margin:0;
padding:0;
height:100%;
width:auto;
overflow:auto;
}




/* oldskool styles overrides */
#oldskoolToggle
{
position:fixed;
top:0;
left:410px;
padding:5px 10px 5px 10px;
cursor:pointer;
color:rgba(0, 0, 0, 0.5);
background:rgba(255, 255, 255, 0.5);
}
#oldskoolToggle:hover
{
background:rgba(255, 255, 255, 0.75);
}
.oldskool #oldskoolToggle
{
color:rgba(255, 255, 255, 0.5);
}
.oldskool
{
color:rgba(0, 0, 0, 0.5);
}
.oldskool #header
{
background:#1fa2cf;
border-right:10px solid #e1ab00;
box-shadow: inset -10px 0 0 0 #00b002, 
			inset -40px 0 0 0 #236984;
}
	.oldskool #header h1
	{
	color:rgba(255, 255, 255, 0.5);
	font-family:'Press Start 2P';
	text-transform:uppercase;
	}

	.oldskool nav ul li a.active
	{
	color:darkmagenta;
	}
	
.oldskool section 
{
background:#d24200 !important;
}
	
	.oldskool section h1
	{
	color:rgba(255, 255, 255, 0.7);
	font-family:'Press Start 2P';
	}


/* end oldskoolness */








.colourLow, 
.colourLow a
{
color:#8C9394;
}
.colourHigh, 
.colourHigh a
{
color:#18272A;
}



a
{
text-decoration:none;
color:#18272A;
}



.description
{
opacity:0.6;
}

a .year
{
margin-right:5px;
opacity:0.35;
color:rgba(255, 255, 255, 0.5);
}
a .trackNumber
{
margin-right:5px;
opacity:0.5;
font-size:13px;
line-height:1.3;
transition:all 0.25s;
-webkit-transition:all 0.25s;
}
a:hover .trackNumber
{
font-size:20px;
line-height:0.85;
}




.button
{
opacity:0.5;
font-size:13px;
padding:10px 20px;
border-radius:3px;
margin:0 20px 0px -20px;
display:inline-block;
}
.button:hover
{
opacity:0.9;
background:rgba(0, 0, 0, 0.1);
}






a.open
{
position:absolute;
top:40px;
right:40px;
width:80px;
height:80px;
line-height:58px;
background:rgba(0, 0, 0, 0.1);
color:rgba(255, 255, 255, 0.5);
border:10px solid rgba(0, 0, 0, 0.05);
border-radius:40px;
text-align:center;
}
a.open:hover
{
background:rgba(0, 0, 0, 0.2);
color:rgba(255, 255, 255, 0.6);
border:10px solid rgba(0, 0, 0, 0.1);
}
























header#header, 
section
{
float:left;
height:100%;
width:auto;
padding:80px;
}

header#header
{
background:#78878A;
width:660px;
border-right:10px solid #9C875C;
box-shadow: inset -10px 0 0 0 #62845F, 
			inset -40px 0 0 0 #636D6F;
}
	#header h1
	{
	font-weight:100;
	margin:0 0 30px 0;
	font-family:'Bevan';
	color:#606F71;
	font-size:32px;
	}
	
	nav
	{
	}
	nav:after
	{
	content:' ';
	display:table;
	clear:both;
	}
		nav ul
		{
		}
			nav ul li
			{
			display:inline;
			float:left;
			width:49%;
			margin:0 0 0 -20px;
			}
			
				nav ul li a
				{
				text-decoration:none;
				font-size:18px;
				padding:10px 20px;
				border-radius:3px;
				white-space:nowrap;
				color:#C7D0DA;
				transition:all 0.25s;
				-webkit-transition:all 0.25s;
				}
				nav ul li a:hover, 
				nav ul li a.active:hover
				{
				color:#fff;
				color:#18272A;
				background:rgba(255, 255, 255, 0.1);
				}
				nav ul li a.active
				{
				color:#833;
				}
				nav a .year
				{
				font-size:13px;
				transition:all 0.25s;
				-webkit-transition:all 0.25s;
				}
				nav a:hover .year
				{
				font-size:20px;
				line-height:0.85;
				}

	#header p
	{
	clear:both;
	margin:60px 0 0 0;
	opacity:0.5;
	}
	#header p:hover
	{
	opacity:0.85;
	}
















#sections
{
float:left;
height:100%;
background:#996653;
}






section
{
width:440px;
position:relative;
overflow:auto;
border-right:1px solid rgba(255, 255, 255, 0.05);
}

	section header h1
	{
	font-family:'Bevan';
	font-size:32px;
	opacity:0.5;
	}
	section header p
	{
	overflow:hidden;
	}
	section ul
	{
	clear:both;
	margin:30px 0 30px -20px;
	list-style-position:inside;
	}
	
	section ul a
	{
	padding:10px 20px;
	border-radius:3px;
	opacity:0.75;
	white-space:nowrap;
	transition:all 0.25s;
	-webkit-transition:all 0.25s;
	}
	section ul a:hover
	{
	color:#fff;
	background:rgba(255, 255, 255, 0.1);
	}
	
		


		.tunebox
		{
		margin:12px 0;
		padding:20px;
		background:rgba(255, 255, 255, 0.1);
		border-radius:3px;
		}

		.tunebox
		{
			
		}
















/* mobile versions */

/* iphone 5 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) /*
and (orientation : portrait) */
{

	body
	{
	width:auto !important;
	}
	#header, 
	#sections, 
	section
	{
	clear:both !important;
	float:none !important;
	width:100% !important;
	height:auto !important;
	overflow:visible !important;
	}
	
	header#header, 
	section
	{
	padding:25px;
	}
	
	#header h1
	{
	font-size:28px;
	margin:0 0 25px 0;
	}
	#header p
	{
	margin:25px 0 0 0;
	font-size:13px;
	width:65%;
	}
	
	nav ul li
	{
	display:block;
	float:none;
	width:auto;
	}
		nav ul li a
		{
		font-size:16px;
		}

	section
	{
	border-right:10px solid #9C875C;
	box-shadow: inset -10px 0 0 0 #62845F, 
				inset -40px 0 0 0 rgba(0, 0, 0, 0.1); /*#636D6F;*/
	}
		section header h1
		{
		font-size:28px;
		}
	
}