body { font-family: Helvetica, Arial, Verdana, San-serif; padding: 0; margin: 0; background: #000 url(../img/bg.jpg) top left; }
a { outline: none; }

header { margin: 0 4%; }

h1 { float: left; 
	height: auto; }
	
h1 a { margin: 0; 
	height: auto;
	display: block; }

h1 a img { width: 100%;  }


nav { height: 50px; 
	float: left; }
	
nav a img { width: 100%; }	

nav a { display: block;
	float: left; }
	

nav a.blog { }



@media screen and (min-width:200px) {
h1 { margin: 10px 5% 0 0; 
	width: 80%;  }
nav { margin: 1.5% 0 0.5% 0;
	width: 100%; }
	
nav a.pod { width: 33%; margin-left: 5%;}
nav a.blog { width: 19.5%; }
nav a.contact { width:32%; margin-left: 5%; }
}

@media screen and (min-width:800px) {
h1 { margin: 20px 5% 26px 0; 
	width: 33%;  }
nav { margin: 6% 0 0 0;
	width: 62%; }
	
nav a.pod { width: 25%; margin-left: 5%;}
nav a.blog { width: 14.5%; }
nav a.contact { width:23%; margin-left: 5%; }
}	

@media screen and (min-width:1200px) {
h1 { margin: 20px 5% 26px 0; 
	width: 30%;  }
nav { margin: 4.5% 0 0 0;
	width: 60%; }

nav a.pod { width: 25%; margin-left: 5%;}
nav a.blog { width: 14.5%; }
nav a.contact { width: 23%; margin-left: 5%; }
}	








.list { background: url(../img/trans-bg-2.png);	
	padding: 1em 1em 5px 1em; 
	display: inline-block;
	margin: 0 2% 20px 2%;
	width: 18%;
	text-align: left;
	position: relative;
}
	
@media screen and (max-width:1200px) {
.list { width: 25%; }
}	

@media screen and (max-width:800px) {
.list { width: 40%; }
}	

@media screen and (max-width:600px) {
.list { width: 90%; }
}	

li { color: #fff; }

h2 { color: #fff; 
	float: left;
	margin: 0;
	font-size: 100%;
	font-weight: normal;
	letter-spacing: 1px;
	font-family:'LazyLine'; }
	
h3,
a,
a:visited,
a:active,
a:link { color: #fff;
	text-decoration: underline; }
	
a:hover { text-decoration: none; }

div.title span { display: block;
	float: right; 
	clear: right;
	width: 35%;
	color: #999;
	text-align: right; }
	
	
div.title span,
div.title a { letter-spacing: 1px;
	font-family:'LazyLine'; }
	
h3 { float: right;
	margin: 0;
	text-align: right;
	font-size: 100%; }

h4 { float: right; color: #fff; }

div.tracks,
div#tracks { display: none;
	margin-top:53px;
	position: absolute;
	left: 0;
	width: 100%;
	z-index:10;
	background: url(../img/trans-bg-3.png);
	clear: left; }

div.tracks ul,
div#tracks ul { margin: 0 1.05em; }

.list img { width: 100%; }

#main { text-align: center;
	margin: 0 auto; }
body { text-align: center; }


.tracks { display: block; 
	position: static; 
	 }
	 
a.hide { float: right;
	margin: 0 1em 1em 0;
	letter-spacing: 1px;
	font-family:'LazyLine';
	color: #fff;
	font-size: 110%;
	text-decoration: none; }