/** **************************************************************************************************
 *  Document   : Classical Cradle
 *	Created on : May 6, 2011, 11:29:28 AM
 *	Author     : Andrew Nash
 *	Description: Classical Cradle stylesheet
 *
 * Site Colors:
 * ------------------------------
 *	gold:						e2b736
 *	night sky purple:			140e57
 *	powder purple shadow:		9a84c7
 * 	**************************************************************************************************/

/** **************************************************************************************************
 *  TODO customize style
 * 	**************************************************************************************************/

/** **************************************************************************************************
 *  Eric Meyer Reset
 *	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 {
		page: '';
		page: 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;
	}

/** **************************************************************************************************
 *  Classical Cradle Styles
 * 	**************************************************************************************************/
	root { 
		display: block;
	}
	a,
	a:link,
	a:visited,
	a:hover,
	a:active{
		color: #1604e0;
		text-decoration:none;
		cursor:pointer;
	}
	a:hover{
		text-decoration: underline;
	}
	a img {
		border: none; /* because windows sucks */
		text-decoration:none;
	}
	body {
		font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
		font-size: 10px;
		color: #333;
		background-color:#fff; /*#140e57;*/
		
		
		
		background-attachment: fixed;
		background-image: url("../images/background.jpg");
		background-position: center center;
		background-repeat: repeat-y;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
	}
	/*
	*	Wrapper
	*/
	div#wrapper {
		font-size:1.2em;
		width:100%;
		
	}
		/*
		*	Page
		*/
		div#wrapper div#page {
			width: 980px;
			margin: 20px auto 75px;
			position: relative;
		}
			div#wrapper div#page p {
				margin: 0 auto 10px;
				width: 740px;
			}
		/*
		*	Header
		*/
		div#wrapper div#page div#header {
			/*background: transparent url('/images/header.png') no-repeat scroll 0 0;*/
			position:absolute;
			top:0;
			width:980px;;
			height:327px;
			z-index:100;
		}
		/*
		*	Footer
		*/
		div#wrapper div#page div#footer{
			text-align: center;
			color: #666;
			position:absolute;
			background-color:#ccc;
			z-index:200;
			bottom:0;
			width:980px;
			height:20px;
		}
			/*
			*	Content
			*/
			div#wrapper div#page div#content {
				padding:0px 0px 75px;
			}

				/*
				*	Testimonials
				*/
				div#wrapper div#page #testimonials {
					/*border: 1px solid #333;*/
					padding: 0px;
					clear:both;
					/*background-color:#e3d8f1;*/
					background: transparent url('../images/testimonialBG.png') no-repeat scroll 0 0;
					width:740px;
					height:40px;
					margin:20px auto 0;
					font-size: 11px; /*fixed size*/
					line-height:40px;
				}
					div#wrapper div#page #testimonials #quotes {
						width: 740px;
						font-size: 11px;/*fixed size*/
						text-align: center;
					}
						div#wrapper div#page #testimonials #quotes li {
							width: 720px; /* #quotes width minus #testimonials padding, 10px *2 */
						}


	
	/*
	*	Fixed Masthead  and footer for pages
	*/
	body{
	  margin:0;
	  padding:300px 0 25px 0;
	 }

	@media screen{
		body>div#wrapper div#page div#header{
			position: fixed;
		}
		body>div#wrapper div#page div#footer{
			position:fixed;
			line-height:2em;
		}

	 }
	* html body{
		  overflow:hidden;
	}
	* html div#wrapper div#page div#content{
		height:100%;
		overflow:auto;
	}


/** **************************************************************************************************
 *  Navigation
 * 	**************************************************************************************************/
	/*
	*	Setup
	*/
	ul.nav {
		list-style: none;
		padding: 0px;
		z-index:200;
		}

	.displace {
		position: absolute;
		top: 75px;
		left: 30px;
		text-align: center;
		}

	ul.nav li {
		float: left;
		}

	ul.nav li a {
		display: block;
		width: 94px;
		height: 94px;
		background: url('../images/buttonSprite.png');
		}

	/*
	*	Normal Links
	*/
	ul.nav li a {
		text-decoration: none;
		font-weight:normal;
		color:#333;
		}
	ul.nav li.home a {
		background-position: -94px 0px;
		position:absolute;
		top:175px;
		left:101px;
		}
	ul.nav li.artist a {
		background-position: -182px 0px;
		position:absolute;
		top:176px;
		left:189px;
		}
	ul.nav li.cd a {
		background-position: -282px 0px;
		position:absolute;
		top:176px;
		left:293px;
		}
	ul.nav li.research a {
		background-position: -372px 0px;
		position:absolute;
		top:164px;
		left:382px;
		}
	ul.nav li.buy a {
		background-position: -471px 0px;
		position:absolute;
		top:146px;
		left:476px;
		}
	ul.nav li.news a {
		background-position: -565px 0px;
		position:absolute;
		top:128px;
		left:570px;
		}
	ul.nav li.events a {
		background-position: -659px 0px;
		position:absolute;
		top:116px;
		left:664px;
		}
	ul.nav li.contact a {
		background-position: -751px 0px;
		position:absolute;
		top:113px;
		left:758px;
		}
	/*
	*	Hover Links
	*/
	ul.nav li a:hover {
		
		color:#000;
		}
	ul.nav li.home a:hover {
		background-position: -94px -94px;
		}
	ul.nav li.artist a:hover {
		background-position: -182px -94px;
		}
	ul.nav li.cd a:hover {
		background-position: -282px -94px;
		}
	ul.nav li.research a:hover {
		background-position: -372px -94px;
		}
	ul.nav li.buy a:hover {
		background-position: -471px -94px;
		}
	ul.nav li.news a:hover {
		background-position: -565px -94px;
		}
	ul.nav li.events a:hover {
		background-position: -659px -94px;
		}
	ul.nav li.contact a:hover {
		background-position: -751px -94px;
		}
	/*
	*	Clicked Links
	*/
	ul.nav li a:active {
		font-weight:bold;
		color:#000;
		}
	ul.nav li.home a:active {
		background-position: -93px -281px;/*188 for white note */
		}
	ul.nav li.artist a:active {
		background-position: -182px -281px;
		}
	ul.nav li.cd a:active {
		background-position: -282px -281px;
		}
	ul.nav li.research a:active {
		background-position: -372px -281px;
		}
	ul.nav li.buy a:active {
		background-position: -471px -281px;
		}
	ul.nav li.news a:active {
		background-position: -565px -281px;
		}
	ul.nav li.events a:active {
		background-position: -659px -281px;
		}
	ul.nav li.contact a:active {
		background-position: -751px -281px;
		}
	/*
	*	Selected/Active Links
	*/
	ul.nav li a.selected {
		font-weight:bold;
		color:#000;
		}
	ul.nav li.home a.selected {
		background-position: -93px -281px;
		}
	ul.nav li.artist a.selected {
		background-position: -182px -281px;
		}
	ul.nav li.cd a.selected {
		background-position: -282px -281px;
		}
	ul.nav li.research a.selected {
		background-position: -372px -281px;
		}
	ul.nav li.buy a.selected {
		background-position: -471px -281px;
		}
	ul.nav li.news a.selected {
		background-position: -565px -281px;
		}
	ul.nav li.events a.selected {
		background-position: -659px -281px;
		}
	ul.nav li.contact a.selected {
		background-position: -751px -281px;
		}
/** **************************************************************************************************
 *  Home
 * 	**************************************************************************************************/
	div#wrapper div#page span#home div#content {
		width:735px;
		margin: 0 auto;
	}
	div#content #nppaCover {
		float:left;
		width:300px;
		margin-right:10px;
	}
	
/** **************************************************************************************************
 *  Artist
 * 	**************************************************************************************************/
	div#wrapper div#page span#artist div#content {
		width:735px;
		margin: 0 auto;
	}
	div #headshot {
		display:inline;
		float: left;
		margin:0 20px 20px 0;
	}
	div #poem {
		display:inline;
		float: right;
	}
/** **************************************************************************************************
 *  CD
 * 	**************************************************************************************************/
	div#wrapper div#page span#cd div#content {
		width:735px;
		margin: 0 auto;
	}
	div#wrapper div#page span#cd div#content img {
		/*padding-left:10px;*/
}

	div#wrapper div#page span#cd div#content div#letters {
		width:200px;
		float:right;
		background-color:#fcf8d7;
		margin-left:20px;
		border:1px solid #333;
	}
		div#wrapper div#page span#cd div#content div#letters ul  {
			margin:0px;
			padding:0 5px;
			list-style-type:none;
		}
			div#wrapper div#page span#cd div#content div#letters ul li{
				margin:0 0 1em 0;

			}
		div#wrapper div#page span#cd div#content div#letters h2 {
			background-color: #f7ec00;
			font-weight: bold;
			line-height: 2em;
			margin: 0 0 5px;
			text-align: center;
			border-bottom: 1px solid #ceb800;
		}
	div.letterImageWrapper {
		padding:10px; background:#fff;
	}
	div.letterImageWrapper .letterImage {
		width:400px;
	}
/** **************************************************************************************************
 *  Research
 * 	**************************************************************************************************/
	div#wrapper div#page span#research {
		width:735px;
		margin: 0 auto;
	}
	div#wrapper div#page span#research div#content b {
		font-weight:bold;
	}

	div#wrapper div#page span#research div#content ul.listStyleNone {
		padding-left:15px;
	}
	div#wrapper div#page span#research div#content ul.listStyleNone {
		list-style-type: none;
	}
	div#wrapper div#page span#research ul {
		line-height: 1.2em;
		margin: 0 auto 10px 100px;
		width: 740px;
	}
	div#wrapper div#page span#research h1 {
		margin: 0 auto 10px;
		width: 740px;
	}
	div#wrapper div#page span#research>ul {
		width:685px;
	}
	div#wrapper div#page span#research span#whatCanYouDo ul.listStyleNone{
		margin: 0 auto 10px 20px;
		width:660px;
	}
/** **************************************************************************************************
 *  Buy
 * 	**************************************************************************************************/

/** **************************************************************************************************
 *  News
 * 	**************************************************************************************************/
	div#wrapper div#page span#news div#content {
		width:740px;
		margin: 0 auto;
	}
	#press {
		list-style-type: none;
		line-height:2em;
		padding-left:5px;
	}
	#article {
		color: #333333;
			font-family: serif;
			font-size: 16px;/*fixed size*/
	}
	#article h1 {
		font-weight:bold;
		font-family:serif;
		font-size:1.5em;
	}
	#article #byLine {
		font-weight:bold;
		font-family:san-serif;
	}
	#article p {
		line-height: 1.5em;
		text-indent: 1.5em;
	}
	div.newsWrapper {
		padding:10px; background:#fff;
	}
	div.newsWrapper .masthead {
		width:400px;
	}
	img.imgNewspaper {
		float:right;
		margin-left:10px;
		margin-top:50px;
		width: 200px;
		height:127px;
	}
/** **************************************************************************************************
 *  Events
 * 	**************************************************************************************************/
	div#wrapper div#page span#event div#content {
		width:740px;
		margin: 0 auto;
	}	
	img.imgBarnesAndNoble {
		float:right;
		margin-left:10px;
		width:200px;
		height:317px;
}
/** **************************************************************************************************
 *  Contact
 * 	**************************************************************************************************/
	div#wrapper div#page span#contact div#content {
		width:740px;
		margin: 0 auto;
	}
	#contactOptions {
		width: 450px;
		background-color: #fde6fd;
		border: 1px dotted #333;
		padding: 20px; /* top gets an additional 10px padding from #contactOptions div.row for total of 20px */
		margin: 20px auto 20px;
	}
	#contactOptions table {
	  }

	#contactOptions td.label {
	  text-align: right;
	  vertical-align:top;
	  width: 125px;
	  padding-right:5px;
	  }

	#contactOptions td.contactInfo {
	  text-align: left;
	  vertical-align:top;
	  width: 300px;
	  }
/** **************************************************************************************************
 *  Classical Cradle Player
 * 	**************************************************************************************************/
	#player {
		background-color: #FFFFFF;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0;
		position: relative;
		top: 0;
		width: 800px;
		height: 100%;
		min-height: 100%;
		clear:both;
		margin-bottom:300px;
	}
	#player b {font-weight: bolder;}
	#player i {font-style: italic;}
	#leftContent {
		float: left;
		/*margin-left: 15px;*/
		margin-right: 15px;
		padding-right: 15px;
		position: relative;
		top: 45px;
		width: 200px;
	}
	#rightContent {
		clear: right;
		float: left;
		position: relative;
		top: 45px;
		width: 540px;
	}
	#footer {
		bottom: -40px;
		clear: both;
		float: left;
		font-size: 10px;/*fixed size*/
		position: relative;
		text-align: center;
		width: 800px;
		z-index: 10;
	}

	#topContent {
		background-image: url("../js/jQuery.jPlayer/skin/classicalCradle/player_top.jpg");
		background-repeat: no-repeat;
		height: 64px;
		/*margin-left: 30px;*/
		position: relative;
		top: 45px;
		width: 736px;
	}
	body #leftContent {
		border: 1px solid #999;
		border-top-width: 0;
		float: left;
		height: 245px;
		/*margin-left: 30px;*/
		margin-right: 0;
		padding-right: 0;
		position: relative;
		top: 45px;
		width: 200px;
	}
	body #rightContent {
		border: 1px solid #999;
		border-top-width: 0;
		clear: right;
		float: left;
		height: 245px;
		position: relative;
		top: 45px;
		width: 532px;
	}
	#leftAudio {
		background-color: #D4E0F4;
		height: 225px;
		line-height: 18px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		width: 180px;
	}
	#leftAudio h3 {
		font-size: 12px;/*fixed size*/
		font-weight: bold;
		text-transform: uppercase;
	}
	#leftAudio blockquote {
		margin-left: 15px;
		margin-top: 5px;
	}
	body #jp_playlist_1 {
		font-size:12px;/*fixed size*/
		height: 224px;
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: auto;
	}