/* 

Author: Richard Fitzjohn (http://www.richardfitzjohn.co.uk)

*/



/********************************************************************/

/*                             Reset CSS                            */

/********************************************************************/



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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}

ol, ul {list-style-type: none;}



/********************************************************************/

/*                            Generic tags                          */

/********************************************************************/



html { font-size:13px;}

body {font-family:Arial, Helvetica, sans-serif; font-size:85%; color:#383838; width:100%; background:url(../_images/bg/bg.gif) top left repeat-x #131313; }

img {border:0px;}

strong {font-weight:bold;}

em { font-style:italic;}



.fl { float:left;}

.fr { float:right;}

.clear { clear:both; font-size:0px; line-height:0px; height:0px; overflow:hidden;}

.skiptocontent {position:absolute; margin-left: -9999px;}



p { padding-bottom:15px;}

a { font-weight:bold; text-decoration:none; color:#31312c; }

	a:hover {text-decoration:underline;}



#content ul, #content ol { padding:0 0 7px 0;}

	#content ol { margin-left:20px;}

	#content ul li, #content ul.news li li, #content ul.faqList li li { list-style:inside disc; padding:0 0 8px 15px; }

	#content ol li { list-style:decimal inside; padding:0 0 10px 0;}

	#content ul.faqList li li { background:none; margin:0; float:none;}

	

#content a { text-decoration:underline;}

	#content a:hover { text-decoration:underline; color:#0097d9;}

	

.hr { background:url(../_images/bg/hr.gif) center right no-repeat; height:10px; margin:0 0 15px 0;}

	.hr hr { display:none;}

	

/********************************************************************/

/*                              H Tags                              */

/********************************************************************/



h1 { font-weight:normal; font-size:1.6em; padding:0px 0px 20px 0px;}



h2 { font-weight:normal; font-size:1.4em; padding:0px 0px 15px 0px;}



h3 { font-weight:normal; font-size:1.2em; padding:0px 0px 15px 0px;}



/********************************************************************/

/*                            Structure                         */

/********************************************************************/

	

#wrapper { width:800px; margin-left:auto; margin-right:auto; }



#mainContent { float:left; width:500px;}

#sideCol { float:right; width:226px;}



.intro { font-size:1.2em; line-height:1.5em;}



#header { float:left; width:800px; background:url(../_images/bg/header.jpg) top left no-repeat; padding-bottom:17px; position:relative;}

	#header #logo { float:left; margin:25px 0 0 16px; width:159px; height:66px; background:url(../_images/logos/grahamwaller.jpg) top left no-repeat; text-indent:-9999px;}

	#header #mixerNav { position:absolute; top:14px; right:0; height:68px; width:227px; background:url(/_images/mixernav/bg.png) top left no-repeat; padding:11px 0 0 27px; }

	#header #mixerNav li { float:left; width:59px; height:59px; padding:0 0 0 6px;}

	#header #mixerNav li a { float:left; width:59px; height:59px; background-position:0 0; background-repeat:no-repeat; text-indent:-9999px;}

		#header #mixerNav li a:hover, #header #mixerNav li a:active, #header #mixerNav li a:focus { background-position:0 -118px;}

		#header #mixerNav li.selected a { background-position:0 -59px;}

	#header #mixerNav li .navMixing { background-image:url(/_images/mixernav/buttons/mixing-service.png);}

	#header #mixerNav li .navForum { background-image:url(/_images/mixernav/buttons/forums.png);}		

	#header #mixerNav li .navStudio { background-image:url(/_images/mixernav/buttons/book-a-studio.png);}		

	

#navContainer { float:left; width:166px; height:197px; background:url(../_images/bg/navbg.jpg) 0px 0px no-repeat; position:relative;}

	#wrapper .selectedAbout{ background-position:0px -197px;}

	#wrapper .selectedListen { background-position:0px -394px;}

	#wrapper .selectedClients { background-position:0px -591px;}

	#wrapper .selectedNews { background-position:0px -788px;}

	#wrapper .selectedContact { background-position:0px -985px;}



	#navContainer #nav { width:50px; float:right; padding:35px 22px 0 0;}

	#navContainer #nav li { line-height:1em; float:left; width:50px; height:30px;}

	#navContainer #nav li a { display:block; width:50px; height:30px; background-position:0px 0px; background-repeat:no-repeat; background-image:url(../_images/nav/navitems.gif); text-indent:-9999px;}

	#navContainer #nav li a span { position:absolute; left:-9999px; width:22px; height:146px; background-position:0px 0px; background-repeat:no-repeat; background-image:url(../_images/nav/mixer.jpg);}

	#navContainer #nav li a:hover span { left:36px; top:31px;}

	

		#navContainer #nav li.about a { background-position:0px 0px;}

			#navContainer #nav li.about a:hover { background-position:-50px 0px;}

			#navContainer #nav li.about a:hover span { background-position:0px 0px;}

			

		#navContainer #nav li.listen a { background-position:0px -41px;}

			#navContainer #nav li.listen a:hover { background-position:-50px -41px;}

			#navContainer #nav li.listen a:hover span { background-position:-22px 0px;}

			

		#navContainer #nav li.clients a { background-position:0px -82px;}

			#navContainer #nav li.clients a:hover { background-position:-50px -82px;}

			#navContainer #nav li.clients a:hover span { background-position:-44px 0px;}

			

		#navContainer #nav li.news a { background-position:0px -123px;}

			#navContainer #nav li.news a:hover { background-position:-50px -123px;}

			#navContainer #nav li.news a:hover span { background-position:-66px 0px; }

			

		#navContainer #nav li.contact a { background-position:0px -164px;}

			#navContainer #nav li.contact a:hover{ background-position:-50px -164px;}

			#navContainer #nav li.contact a:hover span{ background-position:-88px 0px;}



#banner { float:right; width:630px;}

	#banner h2 { position:absolute; left:-9999px;}

	#banner img { float:left; }	

	

#content { float:left; width:754px; background:url(../_images/bg/contentbg.gif) top left repeat-x #FFFFFF; padding:23px;}	

	.homeContent, .listenPod { margin:4px 0px 0px 0px;}

	.pod { float:right; margin:5px 0 0 0;}

		.pod img { float:right;}

	.homeContent { float:left; width:364px;}

		.homeContent h1 { height:16px; width:149px; text-indent:-9999px; background:url(../_images/titles/hello-im-graham.gif) top left no-repeat; padding:0px 0px 15px 0px;}

	.listenPod { float:right; width:364px; height:153px; background:url(../_images/pods/listen.jpg) top left no-repeat; position:relative;}

	#sideCol .listenPod { width:226px; background:url(../_images/pods/listen-sidecol.jpg) top left no-repeat; margin:0 0 15px 0; }

		.listenPod h2 { height:16px; width:50px; float:left; margin:20px 0px 0px 20px; padding:0px 0px 11px 0px; color:#FFFFFF; background:url(../_images/titles/listen.gif) top left no-repeat; text-indent:-9999px;}

		.listenPod p { float:left; padding:0px 0px 0px 20px; color:#fff; width:110px; clear:left;}

		.listenPod a { position:absolute; bottom:20px; left:20px;}

		

#footer { color:#dedede; min-height:135px; height:auto !important; height:135px; width:715px; float:left; background:url(../_images/bg/footer.jpg) top left repeat-y; padding:19px 38px 0px 47px; }

	#footer a { font-weight:normal; color:#d9d89d;}

	#footer div { float:left; display:inline; }

	

	#footer .footerContact { width:235px;}

		#footer .footerContact p { padding:0 30px 10px 0; margin:-2px 0 0 0;}

		#footer .footerContact ul { float:left; width:100%;}

		#footer .footerContact ul li { float:left; padding:0; margin:0 8px 0 0; list-style:none outside;}

		#footer .footerContact ul li a { float:left; height:32px; width:32px; overflow:hidden; text-indent:-9999px; background-position:0 0; background-repeat:no-repeat;}

			#footer .footerContact ul li a:hover, #footer .footerContact ul li a:active, #footer .footerContact ul li a:focus { background-position:0 -32px;}



		#footer .footerContact ul li.followMeFacebook a { background-image:url(/_images/buttons/social/facebook.png);}

		#footer .footerContact ul li.followMeTwitter a { background-image:url(/_images/buttons/social/twitter.png);}

		#footer .footerContact ul li.followMeMySpace a { background-image:url(/_images/buttons/social/myspace.png);}

		#footer .footerContact ul li.followMeLinkedIn a { background-image:url(/_images/buttons/social/linkedin.png);}

		#footer .footerContact ul li.followMeSkype a { background-image:url(/_images/buttons/social/skype.png);}



/* Contact Me

	#footer .footerContact { width:337px;}

	#footer .footerContact p { width:140px; float:left; background:url(../_images/bg/contact-divider.gif) top right repeat-y; padding:0; margin:0 9px 0 0; padding:4px 12px 9px 0;}

	#footer .footerContact ul { float:left; width:139px;}

		#footer .footerContact ul li { float:left; width:130px; padding:0 0 9px 0;}

		#footer .footerContact ul li a { display:block; height:30px; width:139px; background-position:0px 0px; background-repeat:no-repeat; text-indent:-9999px; outline:none;}

			#footer .footerContact ul li a:hover, #footer .footerContact ul li a:focus { background-position:0px -30px;}

			#footer .footerContact ul li.footerContactMe a { background-image:url(../_images/buttons/footer-contact-me.gif);}

			#footer .footerContact ul li.footerDownloadCV a { background-image:url(../_images/buttons/footer-download-cv.gif);}

	*/		



	#footer .recentClients { width:196px; margin:0px 27px 0px 0px;}

	#footer .recentClients blockquote { float:left; width:174px; min-height:76px; height:auto !important; height:76px; background:url(../_images/bg/bubble.gif) top left no-repeat; padding:7px 10px 0px 10px;}

	#footer .recentClients blockquote p { float:none; font-weight:normal; color:#FFFFFF;}

	#footer .recentClients p { padding:0 0 0 0; float:right; font-weight:bold; color:#d9d89d;}

	#footer .recentClients p cite { font-style:normal;}

	

	#footer .latestNews { width:250px;}

	#footer .latestNews span { font-size:0.9em; color:#dedede; }

	#footer .latestNews h3 { padding:0 0 5px 0; }

	#footer .latestNews h3 a { font-weight:bold; color:#fffeb8; }

	#footer .latestNews p { color:#dedede; }



#siteCredits { color:#aeaeae; margin:10px 0 0 25px; float:left; width:750px; display:inline; padding:0 0 15px 0;}

	#siteCredits li { float:left; display:inline;}

	#siteCredits li.last { float:right;}

	#siteCredits li.last a { color:#aeaeae;}



.slideContent { float:right; width:226px; margin:0 0 0 15px;}

	.slideContent img { float:left; padding:0 0 10px 0;}

	.slideContent img.last { float:left; padding:0 0 0 0;}

	

/********************************************************************/

/* 		                         Social                           	*/

/********************************************************************/



#social { float:left; width:576px; height:31px; background:url(/_images/bg/social-rack.jpg) 0 0 no-repeat; margin:1px 0; padding:12px 0 0 224px;}

	#social h2 { position:absolute; left:-9999px;}

	

/********************************************************************/

/* 		                         Alerts                           	*/

/********************************************************************/



.alert { padding:12px 0 0 0; margin:0 0 20px 0; border:1px solid #d8e7f0; border-bottom-width:2px; background:#F3F8FB; color:#212121; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }

	.error { border-color:#e7acac; background:#FFEEEE;}

	.success { border-color:#c2dfaf; background:#ecffdf;}

	.alert p { padding:0 12px 12px 12px;}

	

.checkoutAlert { margin:0 0 5px 0;}



/********************************************************************/

/*                           Page Options                           */

/********************************************************************/



#content .pageOptions { float:left; width:100%; margin:0; padding:0 0 15px 0;}

	#content .pageOptions li { list-style:none outside; float:left; padding:0 10px 0 0;}

	#content .pageOptions li.fr { float:right; padding:0 0 0 10px;}

	

/********************************************************************/

/*                              About                               */

/********************************************************************/



.aboutImg { float:right; margin:0 0 0 15px;}



/********************************************************************/

/*                              Listen                              */

/********************************************************************/



.listenPlayer { float:left; width:754px; height:370px; background:url(../_images/general/listenPlayer.jpg) top left no-repeat; margin:0 0 20px 0; }

	.listenPlayer h2 { position:absolute; left:-9999px; }

	.playerInfo { float:left; width:186px; color:#FFFFFF; margin:54px 0 0 22px; display:inline;}

		.playerInfo a { color:#fff;}

	.player { float:right; width:440px; height:160px; margin:13px 20px 0 0; display:inline;}



.testimonals { float:left; width:754px; }

	.testimonals h2 { padding:0 0 5px 0;}

	.testimonals h3 { padding:0 0 0 2px;}

	

	#content .testimonals ul { float:left; width:754px; margin:0 0 0 0; display:inline; padding:20px 0 0 0; }

		#content .testimonals ul li { float:left; width:754px; margin:0 0 0 0;  padding:0 0 20px 0; list-style:none; }

		.testimonals ul li .testimonalBy { float:left; width:206px; margin:0 0 0 0;  padding:0 0 0 0; background:url(../_images/bg/speechtail.gif) 193px 15px no-repeat;}

			.testimonals ul li .testimonalBy p { padding:5px 10px 0 5px; }

			.testimonals ul li .testimonalBy  cite { font-style:normal; font-size:1.2em; font-weight:bold; color:#3a3a3a;}

			.testimonals ul li .testimonalBy  span { color:#717171; display:block; }

		.testimonals ul li blockquote { line-height:1.3em; float:right; width:548px; background:url(../_images/bg/testtop.gif) top left no-repeat #3a3a3a; color:#FFFFFF; padding:15px 0 0 0; }

			.testimonals ul li blockquote p { padding:0 15px 10px 15px; }

			.testimonals ul li blockquote div.testimonalFoot { width:548px; height:5px; line-height:0px; font-size:0px; overflow:hidden; background:url(../_images/bg/testfoot.gif) top left no-repeat; }

			

		.testimonals ul li.even .testimonalBy { float:right; background:url(../_images/bg/speechtail-even.gif) 0px 15px no-repeat;}

			.testimonals ul li.even .testimonalBy p { padding:5px 0 0 25px; }

		.testimonals ul li.even blockquote { float:left; background:url(../_images/bg/testtop-even.gif) top left no-repeat #616161; }

			.testimonals ul li.even blockquote div.testimonalFoot { background:url(../_images/bg/testfoot-even.gif) top left no-repeat; }

	

/********************************************************************/

/*                              News                                */

/********************************************************************/



#content ul.news, #content ul.clientsList { padding:0 0 0 0; margin:0 0 0 0; float:left; width:754px; }

	#content ul.news li, #content ul.clientsList li { list-style:none; padding:0 0 40px 0; margin:0 0 0 0; width:754px; float:left; }

		#content ul.news li .headline, .headline { padding:0 0 10px 0; margin:0 0 10px 0; float:left; width:754px; border-bottom:1px solid #c5c4c4; }

		#content ul.news li h2 { padding:0 0 0 0; margin:0 0 0 0; float:left; width:660px; font-size:1.5em; }

		#content ul.news li span, .headline span { float:right; font-size:1.5em; color:#848484;  }

		#content ul.news li .readmore { text-align:right; padding:0 0 0 0;}

	

.headline span { font-size:1.6em;}

		.headline h1 { padding:0 0 0 0; margin:0 0 0 0; float:left; width:660px; }



#content ul.news li li { float:none;}



/********************************************************************/

/*                              Clients                             */

/********************************************************************/



h2.clientGenre { background:url(../_images/bg/hr.gif) bottom center no-repeat; padding:0 0 10px 0; margin:0 0 10px 0; }



#content ul.clientsList { padding:0 0 20px 0; margin:0; float:left; width:250px;}

#content ul.clientsList li { padding:0 0 6px 0; font-weight:bold; font-size:1.1em; /*background:url(../_images/bg/client-list.gif) 0px 8px repeat-x;*/ }

	#content ul.clientsList span { float:left; background:#fff; padding:0 10px 0 0;}

	#content ul.clientsList a { font-weight:normal;color:#717171; text-decoration:none; padding:0 0 0 10px; float:right; background:#fff; }

		#content ul.clientsList a:hover, #content ul.clientsList a:focus { text-decoration:underline; color:#0097d9; }



/********************************************************************/

/*                          Mixing Service                          */

/********************************************************************/



#content .mixingList { width:500px; float:left; padding:30px 0 0 0; margin:0; background:url(../_images/bg/hr.gif) top right no-repeat;}

	#content .mixingList li { float:left; width:500px; list-style:none outside; padding:0 0 25px 0; margin:0;}

	#content .mixingList li .details { float:left; width:498px; border:1px solid #dbdbdb;}

	#content .mixingList li .details .hd { background:url(/_images/bg/shop-hd.gif) top left repeat-x #dbdbdb; border-bottom:1px solid #c4c4c4; border-top:1px solid #eeeded; float:left; width:100%; padding:0; height:35px;}

		#content .mixingList li .details .hd h2 { float:left; padding:0 10px 0 15px; font-weight:bold; line-height:35px;}

		#content .mixingList li .details .hd .price { float:right; font-size:13px; line-height:35px; padding:0 15px 0 15px; background:url(/_images/bg/price.gif) top left #c4c4c4;}

	#content .mixingList li .details .bd { float:left; width:468px; padding:15px; font-size:1.1em; line-height:1.5em;}

		#content .mixingList li .details .bd p { padding-bottom:10px;}

		#content .mixingList li .details .bd .button { float:right;}

	#content .mixingList li .details .ft { float:left; width:468px; padding:5px 15px 0 15px; border-top:1px solid #e7e7e7;}

	#content .mixingList li .details .ft p { padding-bottom:5px; font-size:0.9em; color:#717171;}



	.footNote { float:left; width:100%; padding:5px 0 0 0;}

	.footNote p { font-size:0.9em; color:#717171; padding:15px 0 0 0;}

	

	.otherServices { padding-bottom:20px;}

	.otherServices h2 { font-weight: bold;}

	.otherServices p { font-size:1.1em; line-height:1.5em;}

	

#sideCol .info { border:1px solid #e5e5e5; border-radius:5px; margin:0 0 15px 0;}

#sideCol .info h2 { font-weight:bold; background:url(/_images/bg/shop-hd.gif) top left repeat-x #dbdbdb; border-bottom:1px solid #c4c4c4; padding:10px;}

#sideCol .info .bd { padding:10px 10px 0; font-size:1.1em; line-height:1.5em;}

#sideCol .info .bd p { padding-bottom:10px;}

.banner { margin:0 0 25px 0;}

.banner img { border:2px solid #e5e5e5;}



/********************************************************************/

/*               	           FAQs                  			    */

/********************************************************************/



#content .faqList { width:100%; float:left; padding:25px 0 0 0; margin:0; background:url(../_images/bg/hr.gif) top center no-repeat;}

	#content .faqList li { float:left; width:100%; list-style:none outside; padding:0 0 25px 0; margin:0 0 20px 0; background:url(../_images/bg/hr.gif) bottom center no-repeat;}

	#content .faqList li h2 { font-weight:bold;}



/********************************************************************/

/*                              Contact                             */

/********************************************************************/



.contactDetails { float:left; width:500px;}

	.contactDetails dd, .contactDetails dt { float:left;  padding:0 0 8px 0; }

	.contactDetails dt { width:80px; font-weight:bold; }

	.contactDetails dd { width:420px; }

		.contactDetails dd a { font-weight:normal; text-decoration:underline; }

		.contactDetails dd a:hover { color:#aaa;  }



.contactDetailsContainer { float:left; width:500px; }



.downloadCV { float:right; width:226px; margin:33px 0 0 0;}



.contactSide { float:right; width:226px; margin:33px 0 0 0;}

	.contactSide .downloadCV { float:left; width:226px; margin:0 0 10px 0;}

	.contactSide .downloadCV img, .social li a img { display:block;}

	#content .social { float:left; width:226px; padding:0 0 10px 0;}

	#content .social li { float:left; width:226px; padding:0; margin:0; list-style:none outside;}