@charset "utf-8";

/* CSS Document */
*, html, body {margin:0;padding:0;position:relative;}

/*html Tags*/
body{background:#9c4522 url('images/bg.jpg') top center repeat-x; font:14px/18px Verdana, Geneva, sans-serif;  color:#e1c793;}
p{ margin-bottom:16px;}
a{text-decoration:none;/*color:#df8453*/}
a:hover{color:#e1c793;}
h1, h2, h3, h4, h5, h6 {font-family: Trajan Pro;}
h1,h2{font-size:24px; line-height:28px; margin-bottom:10px;}
h3{font-size:14px;}
h6, h6 a{font-size:14px; color:#b2643b;}
ul{list-style-type:none;}
li{color:#e1c793;}
address {margin-bottom:16px; font-style:normal;}

/*non-specific Classes*/
.tinyText{font-size:11px; line-height:20px; display:inline;}
.center{width:960px; margin:0 auto;}
.clear{clear:both;}
.space{width:100%; height:25px;}
.inline{display:inline;}
.inlineblock{display:inline-block;}
.hide{display:none;}


/*Wrapper and Body Container*/
html, body, #wrapper {height: 100%;}
body > #wrapper {height: auto; min-height: 100%;}
#wrapper{width:960px; top:105px; min-height: 100%; margin: 0 auto -50px;}

/*Hero Banner*/
#hero{width:960px; height:320px; background:transparent url(images/herobg.jpg) top left no-repeat;}
	#imageScroller{width:700px; float:left; top:10px; left:10px;}
	#gallery{width:700px; float:left; top:10px; left:10px;}
	#sideNav{width:230px; height:320px; float:left; left:20px;}
	
/*Side Navigation*/
#navUL{left:11px; top:11px;}
#navUL li{display:block;}
#navUL li a{height:70px; display:block; background:url(images/sidenav.jpg) top left no-repeat;}
	#navUL .johnc {width:213px;height:101px;background-position:0px 0px;}
	#navUL .boxstudio{width:213px;height:101px;background-position:0px -101px;}
	#navUL .hartfel{width:213px;height:101px;background-position:0px -202px;}

	#navUL a .hover {width: 100%;height: 100%;display:block;opacity: 0;	background: transparent  url(images/sidenav.jpg) no-repeat;}
	#navUL .johnc .hover {background-position: -219px 0px;}
	#navUL .boxstudio .hover{background-position: -219px -101px;}
	#navUL .hartfel .hover {background-position: -219px -202px;}

/*GalleryHero*/
#galleryHero{width:960px; height:520px; background:transparent url(images/herobg-tall.jpg) top left no-repeat;}
	#galleria{width:700px; height:500px; float:left; top:10px; left:10px; overflow:hidden; text-align:center;}
	.galleria{list-style:none;width:715px;}
	.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 22px 22px 0;}
	.galleria li a{display:none;}
	.galleria li div{margin:0 auto;}
	.galleria li div img{cursor:pointer; margin: 0 auto;}
	.galleria li.active div img,.galleria li.active div{display:block;}
	.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto;}
	.galleria li .caption{display:block;padding-top:.5em}
	* html .galleria li div span{width:400px}/* MSIE bug */

/*Gallery View (Standard Hero)*/
#imageScroller {visibility:hidden;}
.loader {background:url(loader.gif) center center no-repeat #ddd;}
.panel .panel-overlay, .panel .overlay-background {padding:10px; height:60px;}
.panel .panel-overlay a{color: white; text-decoration: underline; font-weight: bold;}

.filmstrip {margin:5px;}
.frame .img_wrap {border:1px solid #aaa;}
.frame.current .img_wrap {border-color:#000;}
.frame img {border:none;}
.frame .caption {font-size:11px; text-align:center; color:#888;}
.frame.current .caption {color:#000;}
.pointer {border-color:#000;}
*html .pointer {filter:chroma(color=pink);}


/*Content*/
#contentContainer{top:20px;}
	#content{width:700px; float:left;}
	
	/*Company Section*/ 
	ul.bodyCopyList {font: 14px/18px Verdana, Geneva, sans-serif; color:#e1c793; list-style: disc; margin: 0 0 16px 15px;} 
	ul.bodyCopyList ul {margin:0 0 0 20px;}
	div.member {margin-bottom: 20px; padding: 10px 0;}

/*Sidebar*/
#sideBar{width:230px; float:right;}
	#sideBar ul {margin-bottom:15px;}
	#sideBar ul li a{font:14px/18px Verdana, Geneva, sans-serif;}
	#sideBar ul li a:hover{color:#e1c793;}

/*Footer*/
#footer, .push {height:200px; clear: both;}
#footer{background: #681111 url(images/footerbg.jpg) top center repeat-x;}
	.footerColumn{width:220px; margin:15px 20px 5px 0; float:left;margin-bottom:5px;}
	.footerColumn ul li{ font:11px/18px Verdana, Geneva, sans-serif; color:#e1c793;}
	.footerColumn ul li a, #footerContact a, #footerCopyright a{color:#e1c793;}
	#footerContact, #footerCopyright{float:left;}
	#footerContact{width:960px;}
	#footerCopyright{width:240px; text-align: right;} 
	#twitter{width:240px; height:150px; margin:15px 0 5px; background:url(images/twitterbg.png) top left no-repeat;}
	#twitterText{width:230px; height:110px; margin:0 auto; overflow:hidden;}
	#twitterBird{width:91px; height:61px; position:absolute; right:-40px; bottom:-15px; background:url(images/twitterBird.png) top left no-repeat;}
            #twitterBird a{width:91px; height:61px; display:block; background: transparent url(x.gif) top left repeat;}
            #twitterBird a span{display:none;}
        #icons{width:240px; height:24px; position:relative; top:17px; left:0px;}

/*Navigation*/
#navigation{width:960px; position:absolute; top:10px; left:50%; margin-left:-480px; overflow:hidden;}
	#navigation ul {width:755px; height:40px ;float:right; top:40px;}
	#navigation li {float:right; margin-right:5px;font:15px/25px Trajan Pro; font-weight:bold;} 
	#navigation li a:hover{color:#e1c793;}
	.active a{color:#e1c793 !important; font-weight:normal !important;}
	#logo {width:190px; height:95px; display:block; float:left; background: transparent url(images/johnCLogo.png) top center no-repeat;}