/* ===================================================================

	Copyright James Gray 2010.

======================================================================
	CORE
======================================================================*/	

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, div {margin:0; padding:0;}
ul,li {list-style-type:none;}
img, table {border:0;}

#skipToContent {position:absolute; padding:0; margin:0; height:0; text-indent:-9999px; display:block;}

.imageTitle, .imageLink a, a.imageLink {display:block; text-indent:-9999px; outline:0;}
a, a:visited, a:hover {color:#1d1d1d;}  


/*====================================================================
	MAIN
======================================================================*/
body {width:100%; text-align:center; margin:0; padding:0; background-color:#fff; color:#252522; font-size:65%; font-family:Georgia, "Times New Roman", Times, serif; background:url(../images/bg_body.png) repeat; overflow-x:hidden;}

#styleSwitcher {display:none;}
.skipLink {display:none;}

#sectionAlpha {position:relative; margin:30px auto 60px auto; width:980px; min-height:1120px; padding:0; text-align:left; background: url(../images/bg_paper-gamma.png) no-repeat;}

#response { display:none;}

#sectionAlpha.plain { background: none; }
#sectionAlpha.plain #contentAlpha { position: absolute; top: 80px; left: -20px; }

#demosContainer { position: absolute; left:460px; top:40px; }

/*====================================================================
	NAVIGATION
======================================================================*/

h4#navTitle {display:none;}

ul#navigation {z-index:9998; position:absolute; top:446px; left:126px; width:310px; height:35px; margin:0; padding:0 0 0 20px; /*background:url(../images/bg_navigation-decoration.png) left 9px no-repeat;*/}
	ul#navigation li {height:35px; float:left; padding:0 10px 0 0; margin:0 10px -3px 0; list-style-type:none;/* background:url(../images/bg_navigation-decoration.png) right 9px no-repeat; */}
	ul#navigation a {text-indent:-9999px; display:block; height:35px; overflow:hidden; background: url(../images/sprite_navigation.png) no-repeat;}

		li#navAbout a			{ width:64px; background-position:0px 0px;}
		li#navAbout a:hover 	{ width:64px; background-position:0px -59px;} 
		li#navAbout.selected a	{ width:64px; background-position:0px -59px;}

		li#navLatest a			{ width:62px; background-position:-83px 0px;}
		li#navLatest a:hover 	{ width:62px; background-position:-83px -59px;} 
		li#navLatest.selected a	{ width:62px; background-position:-83px -59px;}
			
		li#navDownloads a		  { width:123px; background-position:-165px 0px;}
		li#navDownloads a:hover   { background-position:-165px -59px;} 
		li#navDownloads.selected a{ width:123px; background-position:-165px -59px;}
		
		li#navMailing a			{ width:128px; background-position:-304px 0px;}
		li#navMailing a:hover 	{ width:128px; background-position:-304px -59px;} 
		li#navMailing.selected a{ width:128px; background-position:-304px -59px;}
		
		li#navContact a			{ width:85px; background-position:-526px 0px;}
		li#navContact a:hover 	{ background-position:-526px -59px;} 
		li#navContact.selected a{ width:85px; background-position:-526px -59px;}


/*====================================================================
	CONTENT
======================================================================*/

#musicPlayer { position:absolute; top:228px; right:30px; outline:0;}

.plain #musicPlayer { position: static; left: auto; top: auto; background: #fafaf8; width: 370px; padding: 30px 0; margin: 20px; border-radius: 5px; box-shadow: 1px 1px 20px rgba(0,0,0,0.15);/* position:absolute; top:228px; right:30px; outline:0;*/}
.plain #musicPlayer h2 { font-weight: normal; color:#d03203; margin: 0 0 10px 20px; font-size: 24px; }
.plain #jquery_jplayer_2 {  }
.plain #jquery_jplayer_3 {  }
.plain #jquery_jplayer_4 {  }

#contentAlpha {position:absolute; top:100px; left:81px;}
	#titleJamesGray {  width:404px; height:269px; background:url(../images/logo_james-gray.png) no-repeat;}

#contentContainer {position:absolute; top:460px; left:94px; width:800px; font-size:1.5em; }

	#contentContainer p {padding:20px 0 0 12px; }
		#contentContainer p strong { color:#d13100; }

	#contentContainer #initialSection img { position:absolute; top:280px; left:750px;  }
		* html #contentContainer #initialSection img { display:none; }

		#contentContainer p.copyAlpha { width:328px; font-weight: normal; padding:20px 0 0 51px; }
		
		#photo1 { position:absolute; left:409px; top:-87px; width:506px; height:626px; margin:0; background:url(../images/img_james-gray-1.png) no-repeat;  }
		#photo2 { position:absolute; left:409px; top:-87px; width:506px; height:626px; margin:0; background:url(../images/img_james-gray-2.png) no-repeat;  }
		#photo3 { position:absolute; left:409px; top:-87px; width:506px; height:626px; margin:0; background:url(../images/img_james-gray-3.png) no-repeat;  }
		#photo4, #photo5 { position:absolute; left:409px; top:-87px; width:506px; height:626px; margin:0; background:url(../images/img_james-gray-4.png) no-repeat;  }

	
	#contentContainer li { margin:0 0 0 12px; padding:20px 0 20px 0; border-bottom:1px dotted #333; }

	#contentContainer div.tab { display:none;  padding-top:56px}
	#contentContainer div.current { display: block; } 

	#contentContainer #twitter, #contentContainer #contentDownloads, #contentContainer #contentMailing, #contentContainer #contentContact { width:340px; padding:56px 25px 25px 38px;}
		#contentContainer #twitter { padding-top:0; }

	#guitarMan { position:absolute; top:466px; left:400px; width:385px; height:151px; background:url(../images/img_winged-guitar-man.png) no-repeat;  }

	#contentContact img {  position:absolute; top:90px; left:270px; }

#photoAlpha {position:absolute; top:40px; left:450px; width:469px; height:358px; background:url(../images/img_photo-alpha.png) no-repeat;}
	* html #photoAlpha { display:none; }



/*////////////////////////////////////////////
/////  TWITTER  //////////////////////////////
////////////////////////////////////////////*/

	#contentContainer #twitter a { color:#d13100; }

	#contentContainer  #contentLatest {
		width: 320px;
		padding: 70px 0 0 50px;
		height: 480px;
		overflow: hidden;
	}


/*////////////////////////////////////////////
/////  FORM  /////////////////////////////////
////////////////////////////////////////////*/

fieldset {border:0;}
legend {display:none;} 

	input.hightlight { border:2px solid #d13100;}

	.formWaiting { width:48px; height:48px; margin:70px 0 0 110px; background:url(../images/icon_loading.gif) no-repeat;  }

/*====================================================================
	SOCIAL NAV
======================================================================*/
ul.socialLinks {z-index:9998; position:absolute; width:303px; height:28px; margin:0;}
	ul.socialLinks#socialTop {top:-15px; /*left :358px; mit youtube */ left :440px;}
	ul.socialLinks#socialBottom {bottom:60px; left :375px; bottom:-7px; /*left :400px; mit youtube */ left:445px;}

	
	ul.socialLinks li {height:21px; float:left; padding:0; margin:0 15px 0 0; list-style-type:none; }
	ul.socialLinks a {text-indent:-9999px; display:block; height:21px; overflow:hidden; background:url(../images/sprite_social.png) no-repeat;}

		li.socialYT a			{ width:50px; background-position:0px 0;}
		li.socialYT a:hover 	{ width:50px; background-position:0px -21px;} 

		li.socialMS a			{ width:80px; background-position:-56px 0px;}
		li.socialMS a:hover 	{ width:80px; background-position:-56px -21px;}

		li.socialTwitter a		{ width:72px; background-position:-226px 0px;}
		li.socialTwitter a:hover{ width:72px; background-position:-226px -21px;} 

		li.socialSC a		{ height:24px; width:43px; background-position:-314px 0px;}
		li.socialSC a:hover{ width:43px; background-position:-366px 0px;} 


/*====================================================================
	FOOTER
======================================================================*/

ul#footer {position:absolute; bottom:-30px; left:345px; }
	ul#footer li {float:left; margin:0 10px 0 0; color: #666;}
	ul#footer li a {text-decoration:none;}
		ul#footer li a:hover { text-decoration:underline;}

	
.utilitiesContent { padding:20px; overflow-x:hidden; text-align:left; }
	.utilitiesContent h1 { margin:0 0 20px 0; }
	.utilitiesContent p, body.utilitiesContent ul { font-size:1.2em; width:360px; margin:0 0 12px 0; }


/*==========================================
	UTILITIES OVERLAY and CONTENT
============================================*/
#overlayContainer { display:none; z-index:9998; position:absolute; top:0; left:0;  width:100%; height:100%; background:#000; 
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}	
		#overlaySection {display:none; z-index:9999; position:absolute; top:50%; left:50%; margin:-148px 0 0 -277px;}
		#overlayContent {  position:relative; width:532px; min-height:400px; padding:20px 0 0 22px; text-align:left; color:#fff; background: url(../images/bg_overlay.jpg) no-repeat; }
		
			#overlayContent p { width:450px; font-size:1.1em; margin:0 0 12px 0;  }
			
			.overlaySpinner { margin:175px 0 0 200px; }
				
				p#overlayClose a { position:absolute; top:4px; right:20px; padding:0 15px 0 0; font-weight:bold; color:#fff; }