/*************************************************************************
 * screen.css TOC
 * 
 * Reset
 * Typography
 * Core Stucture
 * Header
 * Navigation
 * Footer
 * Column Logic
 * Common Elements and Classes
 * 
 *************************************************************************/

/*************************************************************************
 * Reset
 *************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*************************************************************************
 * Typography
 *************************************************************************/
body {
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 0.81em; /* reset to 13px */
	line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 { clear: both; font-family: Georgia, Times, serif; }
h1 { color: #000; font-size: 2.15em; font-weight: normal; margin: 0.75em 0 0.5em; padding-bottom: 3px; } /* 28px */
h2 { color: #000; font-size: 1.92em; font-weight: normal; margin: 1em 0 0; } /* 25px */
h3 { color: #000; font-size: 1.62em; font-weight: normal; margin: 1em 0 0; } /* 21px */
h4 { color: #000; font-size: 1.38em; font-weight: bold; margin: 1em 0 0; } /* 18px */
h5 { color: #000; font-size: 1.15em; font-weight: bold; margin: 1em 0 0; } /* 15px */
h6 { color: #000; font-size: 1.00em; font-weight: bold; margin: 1em 0 0; } /* 12px */
a:link { color: #8f1717; text-decoration: underline; }
a:visited { color: #666; text-decoration: underline; }
a:hover { color: #336; text-decoration: underline; }
a:active { color: #336; text-decoration: underline; }
a img { border: 0; }
p, address { margin: 0 0 1em; }
ul, ol, dl { margin: 0.5em 0 1.5em 3em; }
dd, li { margin: 0.25em 0; }
dt { color: #00477f; margin: 1em 0 0; }
dd { margin: 0 0 1em; }
ul { list-style-type: disc; } /* default */
	ul.disc { list-style-type: disc; }
	ul.circle { list-style-type: circle; }
	ul.square { list-style-type: square; }
	ul.none { list-style-type: none; }
ol { list-style-type: decimal; } /* default */
	ol.decimal { list-style-type: decimal; }
	ol.decimal-leading-zero { list-style-type: decimal-leading-zero; }
	ol.lroman { list-style-type: lower-roman; }
	ol.uroman { list-style-type: upper-roman; }
	ol.lalpha { list-style-type: lower-alpha; }
	ol.ualpha { list-style-type: upper-alpha; }
	ol.none { list-style-type: none; }
blockquote { background: #f4f4f4; border: 1px dotted #dedede; padding: 1em; }
hr { border: none; border-bottom: 1px solid #fff; background: #ddd; height: 2px; }
strong, b, dt, th { font-weight: bold; }
em, i, cite, dfn { font-style: italic; }
address { font-style: normal; }
abbr, acronym { border-bottom-style: dotted; border-bottom-width: 1px; cursor: help; }
sup { font-size: 0.80em; vertical-align: text-top; }
sub { font-size: 0.80em; vertical-align: bottom; }
tt, code, samp, kbd { font-family: Courier, monospace; }


/*************************************************************************
 * Core Structure
 *************************************************************************/
body { background: #F5F2ED url(../images/bg_body.jpg) no-repeat scroll center 7px; border-top: 6px solid #eae0b9; margin: 0; }
#header { height: 77px; margin: 0 auto; width: 750px; position: relative; }
#header .logo { border: 0; margin-top: 14px; }
#header .title { display: none; }
#header .tag { background: url(../images/bg_tag.png) top left no-repeat; height: 27px; width: 285px; position: absolute; top: 30px; right: 0; }
#homeFeatures { margin: 0 0 25px; position: relative; }
#homeFeatures .videoWrap, 
#homeFeatures .featuredWork { border: 1px solid #FFF; }
#homeFeatures .videoWrap { height: 390px; margin-right: 4px; width: 500px; text-align:center; }
#homeFeatures .featuredWork { position: absolute; top: 0; right: 0; }
#contentWrap { border-bottom: 1px solid #eae0b9; }
#content { margin: 0 auto; padding: 0 15px 2em; width: 720px; }
#content.home { margin: 0 auto; padding: 25px 0 0; width: 750px; }
#footerWrap {
	/* background: #f3eee2; */
	border-top: 1px solid #eae0b9;
	clear: both;
	float: left;
	margin-top: 2px;
	width: 100%;
}
#footer {
	color: #383737;
	font-family: Georgia, Verdana, serif;
	font-size: 0.92em; /* 12px~13px */
	margin: 0 auto;
	padding: 0.5em 15px 3em;
	width: 720px;
}
#footer a:link { border-bottom: 1px dotted #5b3e10; color: #5b3e10; text-decoration: none; }
#footer a:visited { border-bottom: 1px dotted #666; color: #666; text-decoration: none; }
#footer a:hover { border-bottom: 1px dotted #336; color: #336; text-decoration: none; }
#footer a:active { border-bottom: 1px dotted #336; color: #336; text-decoration: none; }
#footer .addressWrap { position: relative; }
#footer address.street { width: 220px; }
#footer address.street .map { font-family: Verdana, Arial, sans-serif; font-size: 0.83em; }
#footer address.phone { width: 220px; position: absolute; top: 0; left: 255px; }
#footer address.phone .number,
#footer address.phone a { font-family: Verdana, Arial, sans-serif; }
#footer address.legal { color: #ae9f83; font-family: Verdana, Arial, sans-serif; font-size: 0.83em; width: 220px; position: absolute; top: 0; left: 505px; }
#footer address strong { color: #465731; }

/*************************************************************************
 * Navigation
 *************************************************************************/
#primaryNav { background: transparent url(../images/bg_primaryNav.png) repeat-x scroll top left; color: #f5f1eb; list-style-type: none; height: 39px; margin: 0 auto 5px; padding: 3px 0; width: 750px; }
#primaryNav li { float: left; background: #000; }
#primaryNav a { display: block; font: normal 1.08em Georgia, Times, serif; line-height: 2.35em; padding: 0 15px; }
#primaryNav a.multiline { line-height: 1; padding: 0.20em 15px; }
#primaryNav a:link { color: #FFF; text-decoration: none; }
#primaryNav a:visited { color: #FFF; text-decoration: none; }
#primaryNav a:hover { color: #FFF; text-decoration: underline; }
#primaryNav a:active { color: #8f1717; text-decoration: none; }
 
/*************************************************************************
 * Common Elements and Classes
 *************************************************************************/
.home .threecol { color: #5b3e10; font-family: Georgia, Times, serif; }
.home .columnHdr {
	background: url(../images/bg_columnTerm.png) top left repeat-x;
	border-right: 1px solid #F5F2ED;
	font-size: 1.38em;
	font-weight: normal;
	height: 33px;
	line-height: 2em;
	margin: 0 -15px 0.75em;
	padding: 3px 15px;
}
/* images */
.imageCaptionLeft, 
.imageCaptionRight { font-size: 0.85em; font-style: italic; margin: 1em 2em; }
.imageLeft, 
.imageRight, 
.imageCaptionLeft img, 
.imageCaptionRight img { display: block; }
.imageLeft, 
.imageCaptionLeft { border: 1px solid #FFF; float: left; margin: 30px 30px 30px 0; }
.imageRight, 
.imageCaptionRight { border: 1px solid #FFF; float: right; margin: 30px 0 30px 30px; }
.imageReplace {
	text-indent: -9999px;
	overflow: hidden;
	text-align: left;
	white-space: nowrap;
	word-spacing: -2ex;
	letter-spacing: -2ex;
}

/* misc */
.clearfix {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
/*************************************************************************
 * Column Logic
 *************************************************************************/
.colmask {
	position: relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear: both;
/*	float: left;	*/
	width: 100%;			/* width of whole page */
	overflow: hidden;		/* This chops off any overhanging divs */
}
/* 3 column settings */
.threecol {
	background: #F5F2ED;    	/* Right column background colour */
}
.threecol .colmid {
	float: left;
	width: 200%;
	margin-left: -249px; 	/* Width of right column */
	position: relative;
	right: 100%;
	background: #F5F2ED;    	/* Centre column background colour */
	border-right: 1px solid #eae0b9;
}
.threecol .colleft {
	border-right: 1px solid #eae0b9;
	float: left;
	width: 100%;
	margin-left: -249px; 	/* Width of centre column */
	background: #F5F2ED;    	/* Left column background colour */
}
.threecol .col1wrap {
	float: left;
	width: 50%;
	padding-bottom: 1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.threecol .col1 {
	margin: 0 15px 0 515px;	/* Centre column side padding:
						Left padding = left column width + centre column left padding width
						Right padding = right column width + centre column right padding width */
	position: relative;
	left: 100%;
/*	overflow: hidden; */
	padding-bottom: 1em;
}
.threecol .col2 {
	float: right;
	width: 220px;        	/* Width of left column content (left column width minus left and right padding) */
	position: relative;
	left: 236px;         	/* Width of the left-hand side padding on the left column */
	padding-bottom: 1em;
}
.threecol .col3 {
	float: right;
	width: 220px;        	/* Width of right column content (right column width minus left and right padding) */
	position: relative;
	left: 706px;
	padding-bottom: 1em;
}