/* Version styles */

html, body { height:100%; }
body { 
	padding:0; margin:0px;
	background-color:#666;
	background: #000;
}
a { background-color:#f3c; color:#fff; text-decoration: none; }
a:hover { background-color: #000; color:#fff; }
a.nohighlight:hover { background-color:transparent; color:#000; }
.nobg { background:transparent; }
.nobg:hover { background-color:transparent; }
div, h3, h5, h6, h8, input, textarea { font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#000; }
h3, div.h3, h5 { font-weight:lighter; }
div.h5 { font-weight:bold; }
h6 { font-size:18px; }
h8 { font-size:14px; }
ul { margin-left:20px; }

/************** sub-page styles ***************/

/** for static pages ... **/
#static_bulletin { position:absolute; left:200px; top:210px; }
#bulletin_header, .bulletin, #bulletin_footer {  }
#bulletin_header, #bulletin_footer { width:650px; height:83px; }
#bulletin_header {
	top:210px;
	background: transparent url(../images/news_top.png) scroll top left no-repeat;
}
#typewriter {
    width:117px; height:145px;
	top:-50px;
	left:30px;
	position:absolute;
	background: transparent url(../images/typewriter.png) scroll top left no-repeat;
    z-index:7;
}
.bulletin {
   width:590px;
   padding:30px;
   background:#fff url(../images/news_middle.gif) scroll top left repeat-y;
   font-size:12px;
   text-align: justify;
}

.bulletin_td { padding:0px 20px 0px 0px; }

#bulletin_footer {
	margin-bottom:200px;
	background: transparent url(../images/news_bottom.png) scroll top left no-repeat;
}
#newsbulletin { /* newsbulletin has higher padding than standard static pages */
   width:478px;
   padding:90px;
}
#bulletin p { margin:7px 0 15px 0; }
#bulletin h3{ font-size:13px; color:#666; margin:0; }
#bulletin h1 { font-size:14px; font-weight:lighter; }

.mainheading { font-size:60px; height:1.25em; text-align:left; }
.subheading { font-size:24px; font-weight:lighter; margin-top:-17px; margin-left:80px; }
.subsubheading { position:absolute; font-size:24px; margin-top:0px; margin-left:0px; }
.center_table { margin-top:20px; } /* this helps space out static pages */

/** for lightboxed pages (including static page overrides) **/
.lightbox .center_table, .normal_center_table {
	width:100%;
	height:100%;
	margin:0;
}
.lightbox .center_table td, .normal_center_table td { 
	text-align:center;
	margin:0 30px 0 30px;
}
.lightbox, .lightbox a, .lightbox div, .lightbox h3 { color:#fff; }
.lightbox .bulletin p { line-height:0.8em; }
.lightbox .mainheading { position:absolute; width:100%; overflow:hidden; font-size:130px; font-weight:lighter; margin-top:-52px; margin-left:-18px; }
.lightbox .subheading { position:absolute; font-size:36px; font-weight:lighter; margin-top:59px; margin-left:142px; }
.lightbox .subsubheading { position:absolute; font-size:24px; margin-top:0px; margin-left:0px; }
.lightbox h3 { font-size:18px; }
.lightbox h1 { font-size:14px; font-weight:lighter;}




/************** major individual styles ***************/
#content { /* this is where everything mostly is - it's what hides when you click 'reveal'. */ }
#company_name, #mission_statement, #no_css_warning { display:none; }
#bg_image, #bg_image_anim {
	position:fixed;
	top:0; left:0;
	height:100%;
	width:100%;
}
#bg_overlay { /* image is currently in the html itself. */ }



/******* logo layers at the top *******/
#logo_left {
    left: 0px; top: 0px; 
    height: 272px;
	width: 1373px;
	position:absolute; 
	background: transparent url(../images/logo_topbanner2.png) scroll top left no-repeat;
}
#logo_left_scroll {
	left: 0px; top: 0px; 
    height: 149px;
	width: 1000px;
	left: 0px;
	position:absolute; 
	background: transparent url(../images/logo_topbanner2_news.png) scroll top left no-repeat;
}


/******* reveal background button ********/
#reveal {
	display:block;
	background-color:transparent;
	position:absolute;
	right:5px;
	top:5px;
	color:#f3c;
	font-size:11px;
	z-index:10;
}
#reveal:hover{
	background-color:#f3c;
	color:#fff;
}


/******** player ***********/
#player {
	position:absolute;
	left:650px;
	top:0px;
	z-index:7;
}
/******** scrapbook flash nest ********/
#scrap_flash_nest {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	z-index:5;
}

/******* web and news png layers ***/
#webbing, #latestnews_png, #news_png, #news, #contact_png, #objective_png, #reviews_png, #playground_png, #clothing_png { position:absolute; }
#news_png, #latestnews_png, #news, #contact_png, #objective_png, #reviews_png, #playground_png { left:27px; top:340px; }

#webbing{
	width: 636px; height: 625px;
	right: 0px; bottom: 0px;
	background: transparent url(../images/webbing2.png) scroll bottom right no-repeat;
}
#objective_png {
	width:125px; height:39px;
	background: transparent url(../images/obj.png) scroll top left no-repeat;
}
#reviews_png {
	width:119px; height:53px;
	background: transparent url(../images/reviews.png) scroll top left no-repeat;
}
#playground_png {
	width:167px; height:61px;
	background: transparent url(../images/playground.png) scroll top left no-repeat;
}
#latestnews_png {
	width:160px; height:68px;
	background: transparent url(../images/latest_news.png) scroll top left no-repeat;
}
#news_png {
	width:97px; height:68px;
	background: transparent url(../images/news.png) scroll top left no-repeat;
}
#contact_png {
	width:130px; height:68px;
	background: transparent url(../images/contact.png) scroll top left no-repeat;
}
#news {
   left:32px; top:385px;
   width:150px; height:25px;
}
.news_date { font-size:18px; margin-bottom:10px; }
.news h3{
	font-size:17px;
	color:#fff;
	font-weight:lighter;
	margin:2px;
}

.news a {
	font-size: 11px; 
	color:#000;
	}

.news_link {
    display:block;
    left:40px;
	top:450px;
	font-size: 11px; 
	color:#fff;
	width:100%;
	margin:10px;
	}

.news a:hover { 
	background: transparent url(../images/splatter2b.gif) scroll center left no-repeat;
	color:#fff;
	
}

.latest_news{
	font-size:11px;
	line-height:1em;
	font-weight:lighter;
	text-align:justify;
	color:#fff;
    	background:#FF33CC;
}
.latest_news a { background-color:transparent; }


/***** legal sections *****/
.legal_copy h4 { margin:20px 0 5px 0; font-weight:bold; font-size:100%; font-style:italic; }
ul.legal { margin-left:0; margin-right:0; padding-left:20px; list-style-type:none; }
table.addresses { margin-left:20px; }
table.addresses td { vertical-align:top; padding-right:40px; }
table.addresses em { display:block; padding-bottom:5px; }


/***** (v) clothing section ******/
#clothing_png{
	width:389px; height:68px;
	right:15px; top:215px;
	background: transparent url(../images/clothing.png) scroll top left no-repeat;
	}	
#content-hold {
	width: 970px;
	position:absolute;
	top:270px; right:0px;
	}
.item-hold{
	width: 300px;
	padding:10px 10px 10px 10px;
	float:left;
	}	
#item-name {
	margin-top: 3px;
	margin-bottom: 6px;
	color:#fff
	}
.item-descrip{
	text-align:left;
	line-height: 12px;
	margin-top:5px;
	color:#fff;
    background:#FF33CC;
	} 
.item-buy-price {
	width: 43px;
	height: 47px;
	margin-right: 10px; margin-top:0px;
	background: transparent url(../images/clothing_price.png) no-repeat;
	float:left;
	}
.item-buy-price-padding {
	padding-top: 15px; padding-left: 7px;
	}
.item-buy-dropdown {
	width: 120px; height: 23px;
	padding-top:15px;
	float: left;
	}
.item-buy-button {
	float: left;
	margin-top: 2px;
	padding-top: 2px;
	}


/*** contact section, bottom right ***/
.contact { 
	color:#fff;
	z-index:9;
	margin-right:0px;
}
.contact { font-size: 10px; }
.contactcorner {
	background:transparent url(../images/contact_corner.gif) scroll top left no-repeat; 
	float:left;
	width:20px;
}
.contacttitle {
	font-size:11px;
	font-weight:lighter;
	color:#fff;
	margin:0 0 0 20px;
	background-color:#f3c; 
}
.contact .items { background-color:#f3c; font-size:10px; }

/*** contact section, newsletter form ***/
#mailing_form input, #mailing_form p{
	margin-left: 5px;
}

#mailing_form button{
	border: 0;
	background: transparent;
	font: normal 11px Georgia, "Times New Roman", Times, serif;
	margin: 5px 0;
	color: #000;
	display: block;
	margin: 10px;
	width: 100%;
	text-align: left;
}

#mailing_form button:hover{
	background: url(../images/splatter2b.gif) no-repeat scroll left center;
	color: #fff;
}

.clear{
	clear: both;
	height: 1px;
	display: block;
}

/*** company sections, top left ***/
.company { position:absolute; width:100%; z-index:6; }
#company{	top:119px;	}
#company2{	top:235px;	}
.company a {
	background-color:transparent;
	font-size: 11px; 
	color:#fff;
	width:940px;
	display:block;
}
#company a, #company h5 { padding-left:25px; }
#company2 a { padding-left:65px; }
.company a:hover { 
	background: transparent url(../images/splatter2b.gif) scroll center left no-repeat;
}
.company h5{
	color:#f3c;
	margin:0px;
}



/***** generic work & contact section styles ******/
#section_holder{
    position:absolute;
    width:650px;
	height:400px;
	right:0px;
	bottom:0px;
	z-index:7;
}
#more_section_holder { /* more section holder is what the 'more work' stuff goes into. */
	position:absolute;
    width:200px;
	bottom:30px;
	left:250px;
	z-index:7;
	display:none;
}
.more { display:none; }
#more_section_holder a, #more_section_holder div { color:#fff; }
#more_section_holder a:hover { background-color:#000; }
/** category divs hold the components of the 'more work' bits and pieces. **/
.category_name { font-weight:bold; margin-bottom:10px; }
.category_links { background-color:#f3c; }
.category_links a { display:block; }
.category_back { display:inline; }
/** section divs hold each work summary on the index page **/
.section { 
	padding:0px; 
	background: transparent;
	border:0px solid #f0f;
}
.section_links { /* section_links is the one that resizes via javascript. do not mess... */
	border:0px solid #0ff; 
	height:7em;
	line-height:1.4em;
	overflow:hidden;
	/* clear:both; / to clear after the h5 heading */
}
.section div.h5 {
	color:#000;
	margin:0px;
	font-size:10px;
	float:left;
}
.section a {
	background-color:transparent;
	display:block;
	font-size:11px; 
	font-weight:lighter; 
	color:#fff;
}
.section a:hover { background-color:#000000; }
a.sectionmore { width:25px; display:inline; }
.contact, .section { position:absolute; }

/*** individual work section positionings ***/
#printwork a, #motion_graphics a, #websites a { text-align:left; }
#branding a, #coming_soon a, #coming_soon, #contact1, #contact2 { text-align:left; }
#websites { 		left:85px; 	top:147px;		}
#printwork { 		left:205px;	top:217px;		}
#branding { 		left:275px;	top:57px;		}
#motion_graphics { 	left:360px;	top:227px;		}
#coming_soon { 		left:475px;	top:100px;		}
#contact1 { 		right:0px;	bottom:80px;	}
#contact2 { 		right:0px;	bottom:10px;	}


/*** info section styles ***/
#version {
    top:550px;
	left:400px;
	position:fixed;
	margin:0;
	height:100px;
	width:100px;
	display:block;
	float:left;
}
.rd a {
    font-size:10px;  
	color:#000000;
}
.rd a:hover { 
background-color:#CCCCCC;
}
#credits {
   top:85px;
   left:350px;
}

/*** playground styles ***/
.pgnest { /* pgnest is the div containing the info and also the flash div */
	position:absolute;
	top: 180px;
	left: 200px;
	z-index:15;
	color:#fff;
}
.pgnest div { color:#fff; }
.pgnest a { color:#ccc; }
.pglisting {
	position:absolute;
	top: 360px;
	left: 40px;
}
.cphead { color:#f3c; font-size:11px; }
.cpline a { color:#fff; }
#pg_nest_div { /* this will actually contain the flash movie */
	border:5px dotted #999;
	padding:0;
	height:300px;
	width:550px;
}
#pg_details { padding-right:50px; }
#pg_item_name { font-weight:bold; }
#pg_item_info {  }

/** contact page styles **/
.contact_table { padding-left:10px; margin-bottom:10px; }
.contact_table td { padding-right:10px; }
.contact_text { width:250px; }
.contact_query { width:100%; height:150px; }

.fs_images {}
.fs_image { padding-top:30px; text-align:center; }
.fs_image img { border:1px solid #ccc; }
.fs_image .caption { }

/** photographs browser **/
.photo_nav { visibility:hidden; position:absolute; background-color:#000; color:#fff; font-size:14px; padding: 2px; }
#nav1 { width:auto; }
#nav2 { width:auto; }
.photo_browser_image { margin:0px; padding:0px; border:8px solid #000; }
#photo_browser_background { 
	padding:0; width:720px; height:500px; margin:0 auto;
}
.loading { background:#000 url("/images/loading.gif") scroll center center no-repeat; }
.fading { background:#000; }

/*** misc styles ***/
.rb { border:1px solid #f00; }
.gb { border:3px solid #0f0; }
.padded_90 { padding:90px; }
.warn { border:2px solid #f3c; padding:10px; }