/* @override http://robinandmaynard.net/_css/main.css */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*********** END RESET **********************/
body {background-image: url(../_images/tile.png); background-repeat: repeat;}
header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-image: url(../_images/header-bg.jpg); background-repeat: repeat;
}
.social {margin-bottom: 10px; text-align: center; }
.social a {padding: 5px; }
.social a:hover {opacity: 0.7;}
footer {
	clear: both;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.85em;
	color: white;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	bottom: 0;
	position: relative;
	margin: 0 auto;
	width: 1160px;
}
footer a {
	color: white;
	text-decoration: none;
}
footer a:hover {color: #ccc; font-style: italic;}

.logo {
	background-image: url(../_images/logo.png); background-repeat: no-repeat;
	background-position: center top;
	height: 121px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-bottom-width: 2px;
	width: 100%;
}
.goldberg {
	background-image: url(../_images/Goldberg-Jones.jpg); background-repeat: no-repeat;
	background-position: center center;
	height: 75px;
}
	
.tag {
	background-image: url(../_images/disgusted.png); background-repeat: no-repeat;
	background-position: center 80px;
	background-color: white;
	height: 100px;
	padding: 0px 0 10px 0;
	margin-bottom: 20px;
	
	width: 100%;
}

/*
.tag2 {
	background-image: url(../_images/disgusted.png); background-repeat: no-repeat;
	background-position: center 80px;
	background-color: white;
	height: 100px;
	padding: 0px 0 10px 0;
	margin-bottom: 20px;
	
	width: 100%;
}
*/	

.holder {
	width: 1160px;
	margin: 0 auto;
	margin-bottom: 40px;
}
.holder2 {
	width: 1160px;
	margin: 0 auto;
	margin-bottom: 40px;
}
.player {
	display: block;
	width: 576px;
	height: 256px;
	float: left;
	margin-bottom: 24px;
	
}
.thumb img {
	display: block;
	width: 256px;
	height: 256px;
	float: left;
	padding-right: 28px;
}
.desc {
	background-color: white;
	height: 100px;
	width: 95%;
	font-family: "Courier New", Courier, monospace;
	font-size: 1.2em;
	padding-top: 32px;
}
.control-bg {
	background-image: url(../_images/header-bg.jpg); background-repeat: repeat;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	border-top-width: 2px;
	display: block;
	width: 95%;
	height: 122px;
}
.controls2 {
	display: block;
	
	width: 256px;
	height: 48px;
	margin-top: 5px;
	margin-left: 275px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.track-dur {
	margin-top: 16px;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
}



/* -- MAIL CHIMP --*/
#mc_embed_signup	{
	clear:left; 
	width: 50%;
	float: left;
	font-style: normal;
}
.footer-right {
	width: 50%;
	float: right;
}
/*------  iPad LANDSCAPE ------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

		.holder {width: 97%;}
		
		footer {width: 97%;}
		
		.player {
			width: 450px;
			height: 200px;
			float: left;
			padding-left: 2%;
		}	
		
		.thumb img {
			display: block;
			width: 200px;
			height: 200px;	
		}
		
		.desc {
			background-color: white;
			height: 80px;
			width: 450px;
			font-family: "Courier New", Courier, monospace;
			font-size: 1em;
			padding-top: 16px;
			text-align: left;
		}
		
		.desc p {
			width: 100%;
			text-align: left;	
		}
		
		.control-bg {
			background-image: url(../_images/header-bg.jpg); background-repeat: repeat;
			border-top-style: solid;
			border-top-color: #CCCCCC;
			border-top-width: 2px;
			display: block;
			width: 450px;
			height: 102px;
		}
		
		.controls2 {
			display: block;
			width: 100%;
			height: 48px;
			margin-top: 5px;
			margin-left: 0px;
		}

		
		.track-dur {
			margin-top: 5px;
			font-size: 16px;
		}
		
		ul.playlist li {
		 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
				 
		 font-size:0.5em;
		 color:#670c00;
		 
			margin-left: 50%;
			width: 200px;
			
		}
				ul.playlist li .timing {
			 position:absolute;
			 display:none;
			 text-align:right;
			 right:0.5em;
			 top:.5em;
			 width:auto;
			 height:0.8em;
			 background-color:#650d01;
			 border:1px solid #ccc;
			 border-radius:4px;
			 letter-spacing:0px;
			 font:44% monaco,"VT-100","lucida console",courier,system;
			 line-height:.5em;
			 vertical-align:middle;
		}


}


/*------  iPad PORTRAIT ------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

		.holder {
			width: 70%;
			margin: 0 auto;
		}
		
		footer {width: 80%;}
		
		.player {
			display: block;
			width: 700px;
			height: 256px;
			float: left;
			margin-bottom: 24px;
		}
.thumb img {
	display: block;
	width: 256px;
	height: 256px;
	float: left;
	padding-right: 28px;
}
.desc {
	background-color: white;
	height: 100px;
	width: 95%;
	font-family: "Courier New", Courier, monospace;
	font-size: 1.2em;
	padding-top: 32px;
}
.control-bg {
	background-image: url(../_images/header-bg.jpg); background-repeat: repeat;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	border-top-width: 2px;
	display: block;
	width: 95%;
	height: 122px;
}
.controls2 {
	display: block;
	
	width: 256px;
	height: 48px;
	margin-top: 5px;
	margin-left: 275px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.track-dur {
	margin-top: 16px;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
}

}


/*------  MOBILE ------*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
		.social {height: 120px;}
		.social img {width: 8em; padding: 8px;}
		.tag {
			background-image: url(../_images/disgusted.png); background-repeat: no-repeat;
			background-position: center 80px;
			background-color: white;
			height: 100px;
			padding: 0px 0 10px 0;
			margin-bottom: 20px;
		}
		.goldberg {margin-top: -20px;}
		.holder {
			width: 100%;
			margin: 0 auto;
			margin-bottom: 40px;
		}
		
		footer {width: 100%; margin: 0 auto;}
		footer p {font-size: 2em; line-height: 1.5em;}
		
		#mc_embed_signup {width: 70%;}
		.email {font-size: 2.5em; padding-left: 3px;}
		input#mc-embedded-subscribe.button {font-size: 3.0em; height: 100px; margin-top: 20px;}
		.social {float: right; margin-top: -250px; margin-right: 10px;}	
		.footer-right {float: left; width: 100%; padding-bottom: 2em;}
		.cp {padding-top: 50px;}
		
		.holder2 {
			width: 100%;
			margin: 0 auto;
			margin-bottom: 40px;
		}
		
		.player {
			display: block;
			width: 100%;
			height: 400px;
			float: none;
			margin-bottom: 24px;
			
		}
		
		.thumb img {
			display: block;
			width: 400px;
			height: 400px;
			float: left;
		}
		
		.desc {
			background-color: white;
			height: 200px;
			width: 100%;
			font-family: "Courier New", Courier, monospace;
			font-size: 2.5em;
			padding-top: 32px;
		}
		
		.desc p {
			margin-left: 45%;
			}
			
		.control-bg {
			background-image: url(../_images/header-bg.jpg); background-repeat: repeat;
			border-top-style: solid;
			border-top-color: #CCCCCC;
			border-top-width: 2px;
			display: block;
			width: 100%;
			height: 165px;
		}
		.play-button {
			height: 110px;
			width: 110px;
		}
		
		.controls2 {
			display: block;
			
			width: 98%;
			height: 110px;
			margin-top: 5px;
			margin-left: 5px;
		}
		ul.playlist li {
		 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
				 
		 font-size:4em;
		 font-weight: bold;
		 color:#670c00;
		 
			background-image: URL(../../_images/player-button-play-mobile.png);
			margin-left: 45%;
			width: 530px;
			height: 110px;
		}
		
		ul.playlist li.sm2_playing a {
		 border-radius:3px;
			background-image: URL(../../_images/player-button-pause-mobile.png);
			background-repeat: no-repeat;
			background-position: 10px 7px;
			height: 110px;
			width: 530px;
		}

		ul.playlist li.sm2_paused {
		 background-color:#999;
		 background-image: URL(../../_images/player-button-paused-mobile.png);
			background-repeat: no-repeat;
			background-position: 10px 7px;
			height: 110px;
			width: 530px;
		}
		
		
		ul.playlist li .controls .statusbar .position,
		ul.playlist li .controls .statusbar .loading,
		ul.playlist li .controls .statusbar .annotation {
			 position:absolute;
			 left:0px;
			 top:0px;
		display: none;
		}
		
		ul.playlist li .controls {
		 position:relative;
		 margin-top:-10em;
		 margin-bottom:0.25em;
		 width: 1%;
		 background-color: transparent;
		 border: none;
		 
		}
		.controls {
			left: 30%;
			
		}
		.dragging {
			
		}
		.statusbar {
			
		 height:1px; 
		}
		
		.loading {
			
		}
		
		.track-dur {
			padding-left: 45%;
			font-size: 2.5em;
			margin-top: 0px;
		}
		ul.playlist li .timing {
			 position:absolute;
			 display:none;
			 text-align:right;
			 right:0.5em;
			 top:1.5em;
			 width:auto;
			 height:auto;
			 padding:3px 5px;
			 background-color:#650d01;
			 border:1px solid #ccc;
			 border-radius:4px;
			 letter-spacing:0px;
			 font:44% monaco,"VT-100","lucida console",courier,system;
			 line-height:1em;
			 vertical-align:middle;
		}
}