/* CSS Stylesheet for Dyna Contracting */

body {
	margin: 0;
	background-color: #46200A;
}

/* default fonts and sizes */
body,td,th {
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,Sans-Serif;
	font-size: 12px;
	/* text-align: center; */
}

/* center all page content */
#PageContainer {
	text-align: left;
	margin: 0 auto;
}

td.moss {
	text-align: left;
}

/* page headers are wrapped in H2 tags */
h2 {
	color: #D17354;
	font-size: 18px;
	font-weight: normal;
	margin-top: 20px;
	padding-top: 0px;
}

/* page subheads are styled a bit... letters drawn out horizontally a touch */
h3 {
	color: #D17354;
	font-size: 16px;
	/* letter-spacing: .1em;  this wasn't working out well */
	font-weight: normal;
	margin-bottom: 0px;
}

/* plain links do not have any treatment except hover-underline */
a.plain {
	text-decoration: none;
}

a.plain:hover {
	text-decoration: underline;
}

a.plainwhite {
	text-decoration: none;
	color: white;
}

a.plainwhite:visited {
	text-decoration: none;
	color: white;
}

a.plainwhite:hover {
	text-decoration: underline;
}

a.plainmoss {
	text-decoration: none;
	color: #757630 !important;
}

a.plainmoss:visited {
	text-decoration: none;
	color: #757630 !important;
}

a.plainmoss:hover {
	text-decoration: underline !important;
}

/* items marked "printonly" should only appear upon print - see
	dyna-print.css for the second part to this selector */
.printonly {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

/* links in the main content area */
#MainContent a,
#MainContent a:visited {
	color: #D17354;
}

#MainContent a:hover {
	text-decoration: none;
}

/* a nice burnt orange color */
.burntorange {
	color: #D17354;
}

/* a nice cool green color */
.moss {
	color: #757630;
}

/* black */
.black {
	color: black;
}

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

/* constrains the entire page content -- all of it. *
 * use this to adjust the overall positioning       *
 * of the website                                   */
#PageContainer {
	width: 907px;
	/* width: 800px; */
	position: relative;
	background-color: white;
}

#splash #PageContainer {
	width: 899px;
	background-color: #46200A;
}

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

/* the topmost wide div contains the corner cube, topmost fireblend *
 * and navigation elements. its bottom border changes depending     *
 * upon the section you are in                                      */
#BannerHeader {
	position: relative;
	width: 907px;
	/* width: 800px; */
	height: 141px;
}

/* the corner cube div hugs the top, left corner of the  *
 * page                                                  */
#CornerCube {
	width: 154px;
	height: 141px;
	border-right: 1px #D17354 solid;
	position: absolute;
	top: 0px; left: 0px;
}

/* on the top of the page, there is a graphical firebrand whose  *
 * color changes depending on the section you are in             */
#TopFirebrand {
	width: 752px;
	/* width: 645px; */
	height: 117px;
	background-color: #863C23; /* will be overridden locally */
	background-image: url(../images/firebrands/work.jpg); /* will be overridden locally */
	background-position: top left;
	background-repeat: no-repeat;
	position: absolute;
	top: 0px; left: 155px;
}

/* the site navigation stretches across the top, contains section *
 * nav options                                                    */
#SiteNavigation {
	width: 752px;
	/* width: 645px; */
	height: 24px;
	position: absolute;
	top: 117px; left: 155px;
	background-color: #B2B47C;
	border-top: 1px solid #D17354;
}

/* this is the nav table located inside the SiteNavigation div */
#SiteNavigation table {
	margin-left: 20px;
}

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

/* constrains the main page content area -- including *
 * left nav and the main content area                 */
#LeftNavAndContentContainer {
	position: relative;
	border-top: 4px #757630 solid; /* color will be overridden locally */
	width: 100%;
}

/* left nav is the greenish left column that contains *
	"section" navigation choices                       */
#LeftNav {
	border-right: 1px #D17354 solid;
	background-color: #B4B87B;
	background-image: url(../images/leftnav-bg.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 154px;
	float: left;
}

/* the actual selections for the left nav section navigation */
#LeftNavOptions {
	/* margin-left: 20px; margin-top: 50px; */
	margin: 50px 6px 0 12px;
	/* margin-left: 12px; margin-right: 6px; */
	font-family: Verdana; font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	color: #eeeeee; /* default color is bright */
	line-height: 12px;
}

#LeftNavOptions a,
#LeftNavOptions a:visited {
	color: black; /* but links are black */
	text-decoration: none;
}

#LeftNavOptions a:hover {
	text-decoration: underline;
}

/* the logo's positioning context is the LeftNavAndContentContainer, *
 * not the LeftNav div                                               */
#LeftNavLogo {
	position: absolute;
	top: 340px;
	left: 30px;
}

/* main content holds the actual page content, isn't *
	that refreshing                                   */
#MainContent {
	float: right;
	width: 747px;
	/* width: 640px; */
	/* min height fix:  http: //www.dustindiaz.com/min-height-fast-hack */
	min-height: 420px;
	height: auto !important;
	height: 420px;
}

/* on Project pages, pull right edge back in so that thumbnails are close to main image */
body.project #MainContent {
	width: 640px;
	padding-right: 107px;
	/* float: left; */
}

/* the textual content appears in a div inside MainContent */
#Content {
	/* border: 1px dotted red; */
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 3px;
	line-height: 22px; /* open up the line spacing a bit */
}

/*******************************************************************/
/*******************************************************************/
/*** MAIN PROJECTS PAGE ***/

body.projects #TextContent {
	/* border: 1px dotted blue; */
}

/* Only Safari will read this style */
body.projects:first-of-type #TextContent {
	/* border: 1px solid purple; */
	width: 407px;
	/* width: 300px; */
}

body.projects #WorkIndexFeaturedProjects {
	/* border: 1px dotted red; */
	position: absolute;
	right: 30px;
	width: 265px;
	margin: 0 0 15px 15px;
}

body.projects #WorkIndexFeaturedProjects a img {
	border: 1px #863C23 solid;
}

body.projects #WorkIndexFeaturedProjects a:hover {
	text-decoration: underline;
}

body.projects #WorkIndexFeaturedProjects a:hover img {
	border: 1px #B2B47C solid;
}

body.projects #TextContent p {
	/* border: 1px dotted green; */
}


/*******************************************************************/
/*******************************************************************/
/*** INDIVIDUAL PROJECTS PAGES ***/

/* on the project pages, there is a special div holding all the *
	little thumbnails                                            */
#ProjectImageChooser {
	/* border:  1px dotted red; */
	width: 160px;
	float: right;
	padding-left: 24px;
	/* padding-left: 18px; */
}

/* these are the little thumbnails                              */
#ProjectImageChooser img {
	border: 1px #863C23 solid;
	margin-right: 10px;
	margin-bottom: 7px;
	width: 63px;
	height: 44px;
}

#ProjectCredits dl {
	/* border: 1px solid red; */
	margin-top: 0;
	width: 145px;
}

#ProjectCredits dt {
	margin: 0;
	font-size: 11px; line-height: 16px;
	/* font: normal 11px/1.3 "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, Sans-Serif; */
	text-transform: uppercase;
}

#ProjectCredits dd {
	margin: 0 0 8px 0;
	font-size: 11px; line-height: 16px;
	color: #777;
	/* font: normal 11px/1.3 "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, Sans-Serif; */
}

/* this is the "main" big photo */
#FeaturedImage {
	border: 1px #863C23 solid;
	margin-bottom: 14px;
	margin-left: 10px;
}

/* this is the prev - next "more projects" arrows options */
#MoreProjectsPrevNext {
	position: absolute;
	left: 622px;
	top: 22px;
	width: 140px;
	z-index: 10; /* keeps this div on top of the project title */
}

/* this is the title of the project feature */
#ProjectTitle {
	margin-top: 20px;
	position: relative;
	left: 0px;
}

/* goes under main image */
#ProjectDescription {
	margin: 0 0px 12px 12px;
	/* padding-right: 48px; */
	/* width: 385px; */
	/* padding-bottom: 12px; */
}

/* the numeral in the title gets a little nudge */
#ProjectTitle img {
	position: relative;
	top: 6px;
}

/* Custom declarations added by CPD, 2-19-09 */

#custom #Content {
	position:  relative;
	/* border:  1px dotted red; */
}

#custom #ImageContainer {
	height:  330px; width:  300px;
	padding:  0;
	/* border:  1px dotted green; */
}

/* IE6 and earlier will *not* read this style */
html>body#custom #ImageContainer { height:  335px; }

#custom #FeaturedImage {
	margin:  0;
}

#custom #ProjectImageChooser {
	position: absolute;
	bottom: 20px;
	float: none; clear: both;
	left: 200px; width: 450px;
	/* border:  1px dotted red; */
}

/* IE6 and earlier will *not* read this style */
html>body#custom #ProjectImageChooser { left: 230px; bottom: 0; width: 400px; }

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

/* the bottom of the page is a thin strip containing *
	copyright and contractor information              */
#PageFooter {
	clear: both;
	height: 24px;
	background-color: #863C23; /* you will override this in each section */
	background-image: url(../images/footer/work.jpg); /* to be overridden in each section */
	background-repeat: no-repeat;
	background-position: top left;
	color: white;
	font-size: 11px;
	font-weight: bold;
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,Sans-Serif;
	text-align: right;
	border-top: 4px #757630 solid; /* color will be overridden locally */
	/* http: //phrogz.net/CSS/vertical-align/index.html */
	line-height: 20px;
	padding-right: 137px;
	/* padding-right: 30px; */
}


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

/* the about us - team pages are pop-ups and they get special *
 * treatments.                                                 */
.TeamShot {
	position: absolute;
	top: 20px; left: 220px;
	width: 504px;
	text-align: left;
	/* min height fix:  http: //www.dustindiaz.com/min-height-fast-hack */
	max-height: 390px;
	height: auto !important;
	height: 390px;
	overflow: auto;
	background-color: #BFC390;
	background-position: top right;
	background-repeat: no-repeat;
	background-attachment: scroll;
	border: 3px #863C23 solid;
	display: none; /* starts out invisible */
}

.TeamShotContent {
	padding: 10px;
	padding-right: 90px; /* accommodates the TeamBoxes */
}

.TeamBoxes {
	position: absolute;  /* these are positioned three-color boxes */
	right: 0px; bottom: 12px;
}

.TeamShot h2,
.TeamShot h3 {          /* tighten up the header for these team features */
	margin: 0;
}

.TeamShotCloseButton {
	position: absolute;
	right: 20px; /* increase this to accommodate optional vertical scrollbars */
	top: 5px;
}


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

/* the testimonial pages are pop-ups and they get special *
 * treatments.                                                 */
.TestimonialPopup {
	position: absolute;
	top: 20px;left: 220px;
	width: 504px;
	background-color: white;
	background-image: url(../testimonials/images/popup-gradient.jpg);
	background-position: bottom left;
	background-repeat: repeat-x;
	text-align: left;
	border: 3px #25606B solid;
	display: none; /* starts out invisible */
}

.TestimonialPopupContent {
	padding: 10px;
	padding-right: 90px; /* accommodates the TestimonialPopupBoxes */
}

.TestimonialPopupBoxes {
	position: absolute;  /* these are positioned three-color boxes */
	right: 2px; bottom: 12px;
}

.TestimonialPopupCloseButton {
	position: absolute;
	right: 5px;
	top: 5px;
}

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

/* Portfolio page has a preview image that is located in a fixed spot */
#PortfolioPreview {
	position: absolute;
	top: 55px;
	left: 400px;
}

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

/* Splash page */
#UpperRedLine, #LowerRedLine {
	position: absolute; z-index: 100;
	top: 163px;
	left: 0px;
}

#LowerRedLine {
	/* border: 1px solid yellow; */
	top: 460px;
}

/* IE6 and earlier will *not* read these styles */
html>body div#UpperRedLine { top: 152px; }
html>body div#LowerRedLine { top: 449px; /* border: 1px solid green  */}

/* Ugly Safari-only hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {

	body:first-of-type #UpperRedLine { top: 163px}
	body:first-of-type #LowerRedLine { top: 460px; /* border: 1px solid blue */ }

}

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

	head~body #UpperRedLine { top: 173px; margin-top: 11px;}
	head~body #LowerRedLine { top: 579px; margin-top: 11px; /* border: 1px solid green */ }

}