/*  
	Hail to the king, baby
	
	workbenchmusic v5.0
	iPhone-specific stylesheet
	http://workbenchmusic.com
	1998

--------------------- */

@import url("/wp-content/themes/wbmusic/layout.css");

/* 0 - theme settings 
--------------------- */

/* default 'blue' */
	body { background: #000 url("/images/background-980x1200.jpg") no-repeat center top; }
	#masthead h1 a { background: transparent url("/images/logo_serif.png") no-repeat center top; }
	#content_background { background: transparent url("/images/background-sheet-pattern.jpg") repeat-y center top; }

/* 'zoo' 
	body { background: #000 url("/images/background-1600x1200-zoo.jpg") no-repeat center top; }
	#phonograph { background: transparent url("/images/floating_phonograph-zoo.png") no-repeat center top; }
	#masthead h1 a { background: transparent url("/images/logo_serif-zoo.png") no-repeat center top; }
	#content_background { background: transparent url("/images/background-sheet-pattern-zoo.jpg") repeat-y center top; } */


/* 1 - universal 
--------------------- */

body { 
	font-size: 62.5%; /* Resets 1em to 10px - will stick to pixels for type for now */
	font-family: Georgia, Serif;
	color: #3a4351;
	text-align: center;
	}

body, h1, h2, h3, ul, li, a, hr, div, img, table, form, fieldset { 
	margin: 0; padding: 0;
	}
hr { 
	clear: both;
	height: 1px;
	visibility: hidden;
	}
	
.hide { position: absolute; left: -9999px; }


/* 2 - structure/layout
--------------------- */
#phonograph {
	margin-left: -238px;
	display: block;
	position: absolute;
	top: 160px; left: 50%;
	width: 154px; height: 209px;
	z-index: 0;
	}
	#phonograph img {
		width: 154px; height: 209px;
		}
#page {
	margin: 80px auto 0 auto; padding: 0;
	width: 450px;
	}

#page #masthead {
	margin: 0 auto; padding: 0;
	width: 353px; height: 50px;
	}
	#masthead h1 {
		margin: 0; padding: 0;
		}
	#masthead h1 a {
		margin: 0; padding: 0;
		width: 353px; height: 30px;
		display: block;
		}
	#masthead h1 a span {
		display: none;
		}
	#masthead .description {
		display: none;
		}

#content_background {
	margin: 0 auto; padding: 0;
	width: 352px;
	}
	#content {
		margin: 0 auto; padding: 0;
		width: 240px;
		text-align: left;
		position: relative;
		}
			
#sidebar {
	margin: 30px auto 0 auto; padding: 15px 0 0 0;
	width: 240px;
	text-align: left;
	border-top: 2px solid #3a4351;
	clear: both;
	}
	.Splash #sidebar { visibility: hidden; }

#footer {
	margin: 0 auto; padding: 15px 0 0 0;
	width: 240px; height: 51px;
	background: transparent;
	border-top: 1px dotted #3a4351;
	}
	#footer p {
		margin: 0; padding: 0;
		text-align: center;
		}


/* 2B - sidebar widgits
--------------------- */
#sidebar form {
	margin: 0; padding: 0;
	clear: both;
	width: auto;
	}
	#sidebar div#post_block {
		margin-top: 5px; padding: 15px 0 0 0;
		border-top: 1px dotted #3a4351; 
		}
	#sidebar div#sb_archives {
		width: 130px;
		float: left;
		}
	#sidebar div#sb_categories {
		width: 100px;
		float: right;
		}


/* 3 - main navigation
--------------------- */
#nav_block { height: 170px; z-index: 100; position: relative; }

#account {
	margin: 0 0 0 122px; padding: 5px;
	position: absolute; 
	top: 0px; left: 50%;
	background: transparent;
	display: none; /* hiding this for now */
	clear: both;
	border: 1px dotted #36404f;
	border-top: none; 
	border-bottom: none;
	}

#nav {
	margin: 0 auto; padding: 0;
	width: 322px; height: 60px;
	background: transparent;
	display: block;
	clear: both; 
	} 
	#nav ul {
		margin: 0; padding: 0;
		display: block;
		list-style-type: none;
		text-align: center;
		}
		#nav ul li {
			margin: 0; padding: 0 11px 0 11px;
			width: 30px;
			display: block;
			float: left;
			text-align: center;
			height: 50px;
			
			}
			#nav ul li:hover {
				/*border-left: 1px dotted #3a4351;
				border-right: 1px dotted #3a4351; */
				}
				
				#page #nav ul li a {
					margin: 0; padding: 20px 0 20px 0;
					font-size: 10px;
					font-weight: normal;
					text-transform: lowercase;
					font-family: georgia, serif;
					}
	
	/* styling for current page */
	
	#nav ul li.current_page_item,
	#nav ul li.current_page_parent {
		padding: 0 10px 0 10px;
		border-left: 1px dotted #3a4351;
		border-right: 1px dotted #3a4351;
		}

		#page #nav_block #nav li.current_page_item a {
			color: #E25322;
			}
			#page #nav_block #nav li.current_page_item ul li a {
				color: #3a4351;
				}
				#page #nav_block #nav li.current_page_item ul li a:hover {
					color: #E25322;
					}
			


/* 3B - child navigation
--------------------- */

#child_nav {
	margin: 0 auto; padding: 0;
	width: 265px; height: 80px;
	background: transparent;
	display: block;
	}
	#child_nav h3 {
		display: none;
		}
	#child_nav ul {
		margin: 5px 0 0 0; padding: 0;
		display: block;
		list-style-type: none;
		float: right;
		border-right: 1px dotted #c8c9cb;
		visibility: visible;
		text-align: right;
		}
		#child_nav ul li {
			margin: 0; padding: 0 10px 0 10px;
			width: auto;
			display: block;
			text-align: right;
			height: 15px;
			}
		#child_nav ul li a {
			padding-left: 30px;
			}
			#child_nav ul li ul {
				display: none;
				}

#nav_block:hover ul {
	visibility: visible;
	}
#nav_block #child_nav ul li.current_page_item a {
	color: #E25322; /* e7aa95 */
	background: transparent url("/images/single_arrow_grey.png") no-repeat 0 1px;
	}


/* 3C - drop-down sub-menu
--------------------- */

#nav ul li ul,
#nav ul li ul li ul { display: none; }

#page div#nav ul li { display: block; position: relative; }
#page div#nav ul li a { display: block; }

#page div#nav ul li ul,
#page div#nav ul li ul li ul {
	padding: 5px 0;
	border: none;
	background: #fff;
	width: 102px;
	border-left: 1px dotted #3a4351;
	border-right: 1px dotted #3a4351;
	border-top: 2px solid #3a4351;
	border-bottom: 1px dotted #3a4351;
	}
	
#page div#nav ul li ul li,
#page div#nav ul li ul li ul li {
	margin: 0; padding: 0;
	width: 102px; 
	float: left;
	height: auto;
	background: transparent;
	border: none;
	text-align: left;
	}

#page div#nav ul li ul li a,
#page div#nav ul li ul li ul li a {
	margin: 0; padding: 4px 12px;
	width: 60px;
	display: block; 
	position: relative; 
	float: left;
	text-align: left;
	}
	#page div#nav ul li ul li a:hover,
	#page div#nav ul li ul li ul li a:hover { 
		border-bottom: none; 
		background: transparent /* url("/wp-content/themes/wbmusic/images/double_arrow_grey.png") no-repeat 0px 6px */; 
		}
	#page div#nav ul li ul li span,
	#page div#nav ul li ul li ul li span {
		width: auto; 
		background: none;
		}

#page div#nav ul ul, 
#page div#nav ul ul ul, 
#page div#nav ul ul ul ul {
	position: relative;
	z-index: 6000;
	}

#page div#nav ul li:hover ul ul, 
#page div#nav ul ul li:hover ul ul , 
#page div#nav ul ul ul li:hover ul ul { display: none; }

#page div#nav ul li:hover ul {
	display: block;
	position: absolute !important;	
	width: auto;
	top: 50px;
	left: -1px;
	z-index: 6000 !important;
	}
	#page div#nav ul ul li:hover ul {
		display: block;
		position: absolute;
		width: auto;
		top: -7px;
		left: 102px;
		z-index: 6000;
		}
		#page div#nav ul ul ul li:hover ul {
			display: block;
			position: absolute;	
			width: auto;
			top: 0;
			left: 102px;
			z-index: 6000;
			}


/* 3C - post navigation
--------------------- */
#page div.navigation {
	margin: 10px 0; padding: 5px 0;
	width: auto; height: 12px;
	border-top: 1px dotted #c8c9cb;
	border-bottom: 1px dotted #c8c9cb;
	}
	#page div.navigation div.alignleft {
		float: left;
		}
	#page div.navigation div.alignright {
		float: right;
		}


/* 4 - anchors
--------------------- */

#page #masthead a:link {color: #3a4351; text-decoration: none; border: none; }
#page #masthead a:visited {color: #3a4351; text-decoration: none; border: none; }
#page #masthead a:hover {color: #E25322; text-decoration: none; border: none; }
#page #masthead a:active {color: #3a4351; text-decoration: none; border: none; }

#page #nav a:link {color: #3a4351; text-decoration: none; border: none; }
#page #nav a:visited {color: #3a4351; text-decoration: none; border: none; }
#page #nav a:hover {color: #E25322; text-decoration: none; border: none; }
#page #nav a:active {color: #3a4351; text-decoration: none; border: none; }

#page #child_nav a:link {color: #3a4351; text-decoration: none; border: none; }
#page #child_nav a:visited {color: #3a4351; text-decoration: none; border: none; }
#page #child_nav a:hover {color: #E25322; text-decoration: none; border: none; }
#page #child_nav a:active {color: #3a4351; text-decoration: none; border: none; }

#account a:link {color: #36404f; text-decoration: none; border: none; }
#account a:visited {color: #36404f; text-decoration: none; border: none; }
#account a:hover {color: #E25322; text-decoration: none; border: none; }
#account a:active {color: #36404f; text-decoration: none; border: none; }

#page a:link, .header a:link {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }
#page a:visited, .header a:visited {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }
#page a:hover, .header a:hover {color: #E25322; text-decoration: none; border-bottom: 1px dotted #3a4351; }
#page a:active, .header a:active {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }

#sidebar a:link {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }
#sidebar a:visited {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }
#sidebar a:hover {color: #E25322; text-decoration: none; border-bottom: 1px dotted #E25322; }
#sidebar a:active {color: #3a4351; text-decoration: none; border-bottom: 1px dotted #3a4351; }

#page div.navigation a:link {color: #3a4351; text-decoration: none; border: none; }
#page div.navigation a:visited {color: #3a4351; text-decoration: none; border: none; }
#page div.navigation a:hover {color: #E25322; text-decoration: none; border: none; }
#page div.navigation a:active {color: #3a4351; text-decoration: none; border: none; }

#footer img { border: none; }
#page a.no_border { border: none; }


/* 5 - typography
--------------------- */

h1 {}
		#page h1 {
		margin: 0;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		text-align: center;
		color: #3a4351;
		letter-spacing: .5em;
		line-height: 115%;
		}
		
h2 {}
	#content h2 {
		margin: 0 0 10px 0;
		font-size: 12px;
		font-weight: lighter;
		font-family: Georgia, serif;
		text-transform: capitalize;
		color: #3a4351;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		line-height: 130%;
		}
		#content h2:first-letter {
			/*color: #E25322;*/
			}
		.Splash #page h2 { display: none; }
					
	#sidebar h2 {
		width: auto; margin: 0 auto 10px auto;
		font-size: 12px;
		font-weight: lighter;
		font-family: Garamond, Georgia, serif;
		text-transform: capitalize;
		color: #3a4351;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		line-height: 130%;
		}

h3 {}
	#sidebar h3,
	h3 {
		width: auto; margin: 0 0 5px 0;
		font-size: 12px;
		font-weight: normal;
		text-transform: none;
		color: #111;
		text-transform: uppercase;
		font-size: 10px;
		letter-spacing: .05em;
		}

p {}									
	#content p,
	p {
		margin-bottom: 15px;
		display: block;
		font-size: 10px;
		color: #3a4351;
		line-height: 150%;
		font-weight: lighter;
		}	
		#sidebar p {
			margin: 0 0 15px 0;
			font-size: 10px;
			color: #3a4351;
			display: block;
			line-height: 150%;
			}
		#footer p {
			margin-bottom: 10px;
			font-size: 10px;
			color: #3a4351;
			line-height: 140%;
			}
		#page p.postmetadata {
			padding-top: 15px;
			border-top: 2px solid #3a4351;
			}
			#page p.postmetadata small {
				color: #3a4351;
				}
	
	#page small {
		margin-bottom: 10px;
		font-size: 10px;
		color: #3a4351;
		font-style: italic;
		line-height: 140%;
		}
	#page p em {
		}

	/* for tables */
	
		

/* 6 - lists
--------------------- */
ul.no_subs ul { display: none; }

#content ul {
	margin: 15px 0 25px 0; padding: 0;
	font-size: 10px;
	color: #3a4351;
	list-style-image: url('/images/single_arrow_grey.png');
	border-top: 1px dotted #c8c9cb;
	}
	#content ul li {
		margin-left: 0; padding: 5px 0;
		margin-bottom: 0;
		line-height: 150%;
		border-bottom: 1px dotted #c8c9cb;
		}

#sidebar ul {
	width: 85%; margin: 0 auto 15px auto;
	font-size: 10px;
	color: #3a4351;
	}
	#sidebar ul li {
		margin-left: 15px;
		margin-bottom: 5px;
		}

#content ol {
	margin: 15px 50px 25px 20px; padding: 0;
	font-size: 10px;
	color: #3a4351;
	}
	#content ol li {
		margin-left: 15px; padding: 0;
		margin-bottom: 8px;
		line-height: 150%;
		}

#sidebar ol {
	width: 85%; margin: 0 auto 15px auto;
	font-size: 10px;
	color: #3a4351;
	}
	#sidebar ol li {
		margin-left: 15px;
		}


/* 7 - images
--------------------- */
#content img {
	padding: 6px;
	border: 1px dotted #3a4351;
	}
	#content img:hover {
		background: #fff;
		}
#content .flash {
	padding: 6px;
	border: 1px dotted #3a4351;
	background: transparent url('/images/zoo_cta.jpg') no-repeat center center;
	display: block;
	width: 226px; height: 221px;
	}
	#content .flash:hover {
		background: #fff;
		}
#content img.in_list {
	margin: 0; padding: 0;
	float: right;
	border: none;
	}

/* 8A - forms - universal
--------------------- */
form {
	width: auto;
	margin: 15px auto; padding: 0;
	background: transparent;
	border: none;
	}
#page form fieldset {
	margin: 0; padding: 0 10px 10px 10px;
	background: transparent;
	border: 1px dotted #3a4351;
	}
	#page form fieldset p {
		margin: 0; padding: 0;
		display: block;
		width: auto;
		line-height: 100%;
		}
	#page form fieldset p.form_p_margin {
		margin: 10px 0 0 0;
		}
	
		#page form fieldset legend {				/* legend styling */
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: .05em;
			color: #c8c9cb;
			}
		#page form label {						/* default labels styling */
			margin: 10px 0 0 0; padding: 0;
			width: 220px; height: 15px;
			font-size: 10px;
			color: #3a4351;
			line-height: 100%;
			font-family: Georgia, serif;
			display: block;
			float: left;
			}
		form fieldset input {
			width: 210px;
			}
		form fieldset textarea {
			width: 210px;
			height: 200px;
			}
	/* default styling of all fields */

	form input,
	form select,
	form textarea {
		font-size: 10px;
		color: #3a4351;
		line-height: 120%;
		font-family: Georgia, serif;
		}							
	form input,
	form select,
	form textarea {
		border: 1px dotted #3a4351;
		padding: 3px;
		background: #fff;
		}
	form input:hover,
	form select:hover,
	form textarea:hover {
		border: 1px dotted #000;
		background: #f1f1f1;
		}
	form input:focus,
	form select:focus,
	form textarea:focus {
		border: 1px dotted #3a4351;
		background: #E25322;
		color: #fff;
		}

	
	/* search form */
		form#searchform input {
			margin: 0 5px 12px 0;
			}
		
		
/* 8C - margins
--------------------- */
form fieldset input,
form fieldset select,
form fieldset textarea {
	margin: 0;
	}
	
form input { /* for submit buttons only */
	margin: 10px 5px 0 0;
	}