/*
-----------------------------------------------------------------------------
Taproot Creative STYLESHEET
	
		
-----------------------------------------------------------------------------*/


/*
-----------------------------------------------------------------------------
STRUCTURAL ELEMENTS
-----------------------------------------------------------------------------*/

body, html { margin: 0; padding: 0; height: 100%;  }
body {
	font: normal 74.5%/1.6em "Trebuchet MS", Helvetica, Arial, sans-serif;
	
		background: #171109 url(../_images/bg.gif) repeat-x 0 0;
	color: #d9d4cd;
		}	

a:link, a:visited { color: #171109; text-decoration: underline; }

a:hover, a:focus { color: #171109; text-decoration: none; }

h1 { font-size: 75%; line-height:.96em; color: #5d5545; padding: 0; margin: 0; text-transform: uppercase; }
h2 { font-size: 150%; line-height:1em; color: #fff; }

#header { width: 100%; height: 159px; margin: 0 auto; padding: 0; margin: 0; }

#nav { float: right; list-style: none; margin: 0; padding: 0 10px 0 0; }
	#nav li { display: block; margin: 0; padding: 0; float: left; }
	#nav li a { height: 84px; display: block; margin: 0; padding: 0; }

.activeNav a { background-position: 0 -84px !important; }
#nav a span { display: none; }

.invis { display: none; }

#footer { 
	color: #fff; 
	margin: auto; 
	padding: 40px 0 7px 0;
	text-align: center;
	filter: alpha(opacity = 15);
	-moz-opacity:0.15;
	opacity: 0.15;
	}
#hiring {
	color: #fff; 
	margin: auto; 
	padding: 40px 0 7px 0;
	text-align: center;
	}

textarea { font: normal 1em/1.6em "Trebuchet MS", Helvetica, Arial, sans-serif; }

/*
-----------------------------------------------------------------------------
NAV & BODY: DAY
-----------------------------------------------------------------------------*/

		#nav_whoweare, #nav_whoweare a { width: 113px; display: block; background: transparent url(../_images/b_whoweare.gif) no-repeat 0 0; } 
	#nav_whatwedo, #nav_whatwedo a { width: 115px; display: block; background: transparent url(../_images/b_whatwedo.gif) no-repeat 0 0; } 
	#nav_whatwevedone, #nav_whatwevedone a { width: 151px; display: block; background: transparent url(../_images/b_whatwevedone.gif) no-repeat 0 0; } 
	#nav_wheretofind, #nav_wheretofind a { width: 152px; display: block; background: transparent url(../_images/b_wheretofind.gif) no-repeat 0 0; } 
	#nav_whatwesay, #nav_whatwesay a { width: 119px; display: block; background: transparent url(../_images/b_whatwesay.gif) no-repeat 0 0; }
	
	#nav li a:hover { background-position: 0 -84px; }
	
	#logo { width: 202px; height: 75px; display: block; top: 84px; left: 23px; position: absolute; padding: 0; background: transparent url(../_images/logo.gif) no-repeat 0 0; }
	#logo a {width: 202px; height: 75px; display: block; }
	#logo span { display: none; }

	#container { width: 100%; margin: 11px 0 0 0; padding: 180px 0 0 0; background: #171109 url(../_images/content_tile.jpg) repeat-x 0 0; }	


/*
-----------------------------------------------------------------------------
NAV & BODY: NIGHT
-----------------------------------------------------------------------------*/
	
	

/*
-----------------------------------------------------------------------------
TEXT IMAGES
-----------------------------------------------------------------------------*/

#page-content { margin: 0 auto; padding: 0; }
#page-content p { display: none; }
.txt_home, .txt_whoweare, .txt_whatwedo, .txt_whatwevedone, .txt_wheretofind { text-align: center; position: relative; }


	.txt_home { width: 525px; height: 201px; display: block; background: transparent url(../_images/txt_home.gif) no-repeat 0 0;  }
	.txt_whoweare { width: 945px; height: 354px; display: block; background: transparent url(../_images/txt_whoweare.gif) no-repeat 0 0;  }
	.txt_whatwedo { width: 642px; height: 148px; display: block; background: transparent url(../_images/txt_whatwedo.gif) no-repeat 0 0;  }
	.txt_whatwevedone { width: 311px; height: 62px; display: block; background: transparent url(../_images/txt_whatwevedone.gif) no-repeat 0 0;  }
	.txt_wheretofind { width: 416px; height: 173px; display: block; background: transparent url(../_images/txt_wheretofind.gif) no-repeat 0 0;  }
	.txt_whatwesay { width: 458px; height: 78px; display: block; background: transparent url(../_images/txt_whatwesay.gif) no-repeat 0 0;  }


#letsDigIn { width: 525px; height: 75px; position: absolute; display: block; bottom: 2px; }

/*
-----------------------------------------------------------------------------
PORTFOLIO SAMPLES: OVERVIEW
-----------------------------------------------------------------------------*/

#portfolio_preview {
	position: absolute;
	left: -500px;
	top: 0;
	z-index: 200;
	}

#portfolio_preview img { border: 4px #312618 solid; background: #312618; float: left; }

#work-samples { width: 710px; margin: 25px auto 0 auto; padding: 0 0 0 20px; }

#work { float: left; list-style: none; margin: 0; padding: 0; }

img { border: 0 none; }

div.tooltip { background: #333; padding: 5px; color: #fff; text-align: center; }

#work li { display: block; margin: 10px 0 0 20px; padding: 14px; float: left; background: transparent url(../_images/sample_bg.gif) no-repeat 0 0; }



/*
-----------------------------------------------------------------------------
PORTFOLIO SAMPLES: INDIVIDUAL SAMPLES
-----------------------------------------------------------------------------*/

#work-samples-detail { width: 764px; margin: 25px auto 0 auto; padding: 0; }

#samples-thumbs { float: left; width: 508px; list-style: none; padding: 0 10px 10px 0; margin: 0; background: #000; border: 1px solid #666; color: #fff; }

	#samples-thumbs li {float: left; padding: 0; margin: 10px 0 0 10px; display: block; border: 1px solid #666; }
	
	#samples-thumbs li img { float: left; }

#samples-details { float: left; width: 180px; margin: 0 0 0 16px; /* background: #000; padding: 10px; border: 1px solid #666; */ color: #fff; }

	#samples-details h2 { font-weight: bold; font-size: 135%; color: #c8d5a6; padding: 0 0 5px 0; margin: 0; }
	#samples-details h3 { font-weight: bold; font-size: 110%; line-height: 1.6em; color: #fff; padding: 4px 0 0 0; margin: 0; text-transform: uppercase; border-top: 1px dotted #fff; }
	#samples-details p { display: block; margin: 0 0 5px 0; padding: 3px 0 0 0; }
	
	#samples-details ul { list-style-type: square; margin: 0 0 0 12px; padding: 0 0 4px 0; }
	#samples-details ul li { margin: 0; padding: 0; }
	
	#samples-details a:link { text-decoration: none; color: #fff; margin: 0; padding: 0; }
	#samples-details a:visited { text-decoration: none; color: #fff; margin: 0; padding: 0; }



#thumb-wrapper { display: inline; float: left; width: 212px; margin: 0 0 0 10px; overflow: hidden; }

#thumbnails { list-style: none; margin: 0; padding: 0; }

#thumbnails li { float: left; display: block; margin: 10px 10px 0 0; padding: 0;  border: 1px solid #666; }

#thumbnails li img {float: left; width: 58px; height: 58px; }

/*
-----------------------------------------------------------------------------
CONTACT FORM
-----------------------------------------------------------------------------*/
#contact-wrapper { width: 772px; margin: 45px auto 0 auto; }
#contact-wrapper fieldset, #contact-wrapper form { border: 0 none; margin: 0; padding: 0; }

#contact-stats { float: left; width: 432px; background: transparent url(../_images/bg_house.gif) no-repeat 0 0; }
    #contact-stats img { padding: 10px 0 10px 10px; }
 
    #contact-stats h2 { font-weight: bold; font-size: 200%; line-height: 1.6em; color: #c8d5a6; padding: 0 0 5px 10px; margin: 0; }
    #contact-stats h3 { font-weight: bold; font-size: 125%; padding: 4px 0 4px 10px; margin: 0; text-transform: uppercase; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; }
    #contact-stats p { font-weight: bold; font-size: 105%; display: block; margin: 0 0 5px 10px; padding: 3px 0 0 0; }
		#contactForm { float: left; width: 320px; margin: 0 0 0 20px;  padding: 0;}
    #message { height: 250px; }
 
    #contactForm label { color: #d9d4cd; font-size: 110%;  }
    .textfield { border: 0 none; width: 240px; font-size: 140%; background: #251c11; color: #d9d4cd; }
    .rndform { width: 260px; background-color: #251c11; text-align: center; border: 1px #312618 solid; margin: 20px 0; position: relative; }

#thanks { font-size: 200%; line-height: 1.6em; }

/*
-----------------------------------------------------------------------------
BLOG
-----------------------------------------------------------------------------*/

#blog-container { 
	width: 760px; 
	margin: 0 auto; 
	 color: #d9d4cd; 	font-size: 110%; 
	line-height: 1.8em; 
	}
#blog-content { width: 530px; float: left; border-right: 1px #666 solid; padding-right: 30px; }
#wordpressCopy, #menu { color: #fff; }

#blog-content h2 { margin: 0; }
.theDate { color: #fff; font-size: 55%; text-transform: uppercase; }

.post { border-bottom: 1px #666 solid; padding-bottom: 20px; margin: 0 0 10px 0; }

#menu {
	 color: #d9d4cd; 	margin-left: 20px;
	width: 150px;
	float: left;
	padding: 10px;
	display: inline;
	}
	
#s { border: 1px #666 solid; padding: 2px; position: relative; top: 1px; }
#searchButton { width: 50px; }
#noResults { color: #333; }

#menu ul { margin: 0; padding: 0; list-style: none; }

#menu ul li { margin: 0 0 20px 0; }
#menu ul li ul li { margin: 0; }

#menu select { border: 1px #666 solid; padding: 2px; }
#menu input, #menu select { font-size: 1em; }
#menu fieldset, #menu form { border: 0 none; padding: 0; margin: 0; }

.storytitle a { font-weight: normal; text-decoration: none; }

#blog-content a, a.wpLink, #menu a { color: #726759; text-decoration: none; }
#blog-content a:hover, #menu a:hover { border-bottom: 1px #726759 dotted; }

abbr { border: 0 none; }

.feedback {
	padding: 5px 0;
	line-height: 1em; 
	}
.feedback a { text-decoration: none; }
.feedback span { font-size: 160%; position: relative; top: 2px; }

#comment { width: 500px; padding: 4px; }

#submitButton, .btn { 
	border: 1px #666 solid;
		background: #281f16; 
	color: #d9d4cd;
		font-size: 9px !important;
	text-transform: uppercase;
	padding: 2px; 
	}
	
ul.children { font-size: .9em; margin-left: 10px !important; }

/*
-----------------------------------------------------------------------------
CLEAR FLOATS
-----------------------------------------------------------------------------*/

.clear { clear: both; height: 1%; margin: 0; padding: 0; }

/*
-----------------------------------------------------------------------------
CLEAR "FIX" for ACCOUNTABILITY
-----------------------------------------------------------------------------*/

.clear-fix:after {
    content: ".";                /* the period is placed on the page as the last thing before the div closes */
	display: block;             /* inline elements don't respond to the clear property */ 
    height: 0;                 /* ensure the period is not visible */
    clear: both;              /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

* html .clear-fix {   
	height: 1%;      /* fix for Guillotine bug in IE6 */
}

.clear-fix {
	display: block;
}

.wp_syntax { 
	color: #100;
	background-color: #f9f9f9;
	border: 1px solid silver;
	margin: 0 0 1.5em 0;
	overflow: auto;
	line-height: 1em;
	}
	

/* IE FIX */
.wp_syntax { 
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
	width: 100%;
	}

.wp_syntax table {
	border-collapse: collapse;
	}

.wp_syntax div, .wp_syntax td { 
	vertical-align: top;
	padding: 2px 4px;
	}

.wp_syntax .line_numbers {
	text-align: right;
	background-color: #e5e5e5;
	color: #333;
	overflow: visible;
  
	}

/* potential overrides for other styles */
.wp_syntax pre {
	margin: 0;
	width: auto;
	float: none;
	clear: none;
	overflow: visible;
	}