@charset "UTF-8";
@import url("reset.css");

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Large area styling*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*Set page wide consitency*/
body
{
	font-size: 11px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	background: url(../images/bg_stripe.gif) top left repeat;
}

/*h1 and h2 will always be visible via image*/
h1, h2
{
	visibility: hidden;
	display: none;
}

h6
{
	font-size: 12px;
	font-weight: bold;
}

/*center align the page*/
#wrapper
{
	width: 993px;
	height: auto;
	position: relative;
	padding-bottom: 45px;
	float: none;
	clear: both;
	margin: 0px auto;
}

/*global link information*/
a
{
	color: #B4B4B4;
	text-decoration: none;
}

/*global link mouse styling*/
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Masthead/Banner information*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*show the main top image*/
#masthead
{
	width: 993px;
	height: 140px;
	position: relative;
	float: left;
	clear: both;
	text-align: center;
	background: url(../images/masthead.png) top left no-repeat;
}

/*make a link cover the masthead*/
#masthead a
{
	position: relative;
	float: left;
	padding: 122px 993px 0px 0px;
}

/*position the titles inside the masthead*/
#masthead #title
{
	width: 588px;
	height: 80px;
	position: absolute;
	top: 0px;
	left: 80px;
	background: url(../images/title.png) top left no-repeat;
}

/*position the tagline inside the masthead*/
#masthead #tagline
{
	width: 406px;
	height: 66px;
	position: absolute;
	bottom: 2px;
	left: 130px;
	background: url(../images/tagline.png) top left no-repeat;
}

/*position the logo inside the masthead*/
#masthead #logo
{
	width: 171px;
	height: 136px;
	position: absolute;
	bottom: 1px;
	right: 120px;
	background: url(../images/logo.png) top left no-repeat;
}

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Navigation link styling information goes here*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*define area for navigaiton buttons*/
#nav
{
	width: 993px;
	height: 70px;
	position: relative;
	float: left;
}

/*define lack of styling on list to control positoining*/
#nav ul
{
	width: 993px;
	height: 70px;
	position: relative;
	float: left;
	list-style: none;
}

/*define the cross button style info*/
#nav li
{
	width: 198px;
	height: 70px;
	position: relative;
	float: left;
	list-style: none;
	background: no-repeat 0px 7px;
}

/*deal with the button specific stuff*/
#nav li.btn1 { background-image: url(../images/btn/btn-bg1.png); }
#nav li.btn2 { background-image: url(../images/btn/btn-bg2.png); }
#nav li.btn3 { background-image: url(../images/btn/btn-bg3.png); }
#nav li.btn4 { background-image: url(../images/btn/btn-bg4.png); }
#nav li.btn5 { background-image: url(../images/btn/btn-bg5.png); }

/*pad the links up to the right size and style the containing text*/
#nav a
{
	position: relative;
	float: left;
	padding: 26px 135px 27px 0px;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	color: #B4B4B4;
	background: url(../images/null.gif)) top left no-repeat;
}

/*pad the links up to the right size and style the containing text*/
#nav li.btn5 a { padding: 26px 0px 27px 0px; }

/*properly position the text inside the link*/
#nav a p
{
	position: relative;
	float: left;
	padding-left: 28px;
}

/*handle the different mouse states on the links*/
#nav a:link { background: url(../images/null.gif) top left no-repeat; }
#nav a:visited { background: url(../images/null.gif) top left no-repeat; }
#nav a:hover { background: url(../images/btn/btn-over.png) top left no-repeat; }
#nav a:active { background: url(../images/null.gif) top left no-repeat; }

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Main area and content styling information goes here*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*pad paragrpahs\*/
#content p { padding: 4px; }

/*define the content area*/
#content
{
	width: 993px;
	height: auto;
	position: relative;
	float: left;
}

/*define the content area*/
.holder
{
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	margin-top: 22px;
	padding-top: 36px;
}

.holder img
{
	margin: 0px 8px;
}

.holder p, .holder img, .holder h6
{
	position: relative;
}

/*deal with more links that nest low*/
#content a.more
{
	position: relative;
	float: left;
	padding: 11px 6px 6px 6px;
}

/*define shared h5 proeperties*/
#content h5
{
	width: 334px;
	height: 57px;
	position: absolute;
	top: -16px;
	left: -16px;
	padding-top: 22px;
	text-indent: 24px;
	font-size: 14px;
	font-weight: bold;
	background: top left no-repeat;
}

/*define shared h5 proeperties*/
#content h5.sub-g 
{
	width: 334px;
	height: 57px;
	position: relative;
	margin: 0px 0px 4px 0px;
	padding-top: 22px;
	text-indent: 24px;
	font-size: 14px;
	font-weight: bold;
	background: top left no-repeat;
}

/*deal with green/brwon variants*/
#content h5.g, #content h5.sub-g { background-image: url(../images/head-sml_g.png); }
#content h5.b, #content h5.sub-b { background-image: url(../images/head-sml_b.png); }

/*define shared h5 proeperties*/
#side h5
{
	width: 334px;
	height: 57px;
	position: absolute;
	top: -16px;
	left: -16px;
	padding-top: 20px;
	text-indent: 23px;
	font-size: 16px;
	font-weight: bold;
	background: top left no-repeat;
}

/*full page area*/
.g-960x, .b-960x, .g-660x, .b-660x, .g-330x, .b-330x, .g-660x440, .b-660x440, .g-330x220, .b-330x220
{
	position: relative;
	float: left;
	margin: 15px;
	padding-top: 38px;
}

/*full page area*/
.g-960x, .b-960x
{
	width: 960px;
	height: auto;
}

/*full page area*/
.g-660x, .b-660x
{
	width: 630px;
	height: auto;
}

/*full page area*/
.g-330x, .b-330x
{
	width: 300px;
	height: auto;
}

/*genericly handle content area for areas 660x440 size*/
.g-660x440, .b-660x440
{
	width: 630px;
	height: 372px;
}

/*genericly handle content area for areas 330x220 size*/
.g-330x220, .b-330x220
{
	width: 300px;
	height: 152px;
}

/*handle difference between green and brown versions*/
.g-660x440, .g-330x220, .g-960x, .g-660x, .g-330x { background: #3F4838; }
.b-660x440, .b-330x220, .b-960x, .b-660x, .b-330x { background: #483C34; }

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Main page specfific styles*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*define a main panels size and position*/
#main
{
	width: 660px;
	height: 440px;
	position: relative;
	float: left;
}

/*define a big panels size and position*/
#large
{
	width: 660px;
	height: auto;
	position: relative;
	float: left;
}

/*define a full panels size and position*/
#full
{
	width: 960px;
	height: auto;
	position: relative;
	float: left;
}

/*title in top left of main*/
#main h3, #full h3, #large h3
{
	width: 462px;
	height: 40px;
	position: absolute;
	padding-top: 20px;
	text-indent: 23px;
	font-size: 16px;
	font-weight: bold;
	background: url(../images/head-big_g.png) top left no-repeat;
}

/*title in top left of main*/
#main h3
{
	top: -4px; 
	left: -6px;
}

/*title in top left of main*/
#full h3, #large h3
{
	top: -16px; 
	left: -16px;
}

/*tag title in bottom right*/
#main h4, #full h4
{
	width: 342px;
	height: 34px;
	position: absolute;
	padding-top: 24px;
	text-indent: 24px;
	font-size: 14px;
	font-weight: bold;
	background: url(../images/head-med_b.png) top left no-repeat;
}

/*tag title in bottom right*/
#main h4
{
	bottom: -4px;
	right: -8px;
}

/*define the info me panel*/
#infome
{
	width: 330px;
	height: 220px;
	position: relative;
	float: left;
}

/*define the info image panel*/
#infoimg
{
	width: 330px;
	height: 220px;
	position: relative;
	float: left;
}

/*define the side panel*/
#side
{
	width: 330px;
	height: auto;
	position: relative;
	float: left;
}

/*define the window to showcase work*/
#showcase
{
	width: 600px;
	height: 360px;
	position: absolute;
	top: 25px;
	left: 15px;
	background: url(../images/work/med/bounce_release12_002.jpg) center center no-repeat;
}

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Footer styling information goes here*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*create a wrapper to center the footer*/
#footcenter
{
	width: 993px;
	height: 56px;
	margin: 0px auto;
}

/*style and position the real footer*/
#footer
{
	width: 993px;
	height: 56px;
	position: relative;
	float: left;
	clear: both;
	margin: 0px auto;
	background: url(../images/footer.png) top left no-repeat;
}

/*deal with the footer legal text area*/
#footer #legal
{
	width: 910px;
	height: auto;
	position: relative;
	float: none;
	clear: both;
	margin: 36px auto 0px auto;
	font-size: 9px;
	font-style: italic;
	text-align: center;
	border-top: #000000 solid 1px;
}

/*tie the footer to the bottom fo the page*/
#wrapbot
{
	width: 100%;
	height: 56px;
	position: fixed;
	bottom: 0px;
	left: 0px;
}

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*Trim styling information goes here*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*universally apply all the informaiton to outer corners, no corners inside*/
.tl-edge_g, .tl-edge_b, .tr-edge_g, .tr-edge_b, .bl-edge_g, .bl-edge_b, .br-edge_g, .br-edge_b
{
	width: 15px;
	height: 15px;
	position: absolute;
	background: top left no-repeat;
}

/*set appropriate backgrounds for corner graphics*/
.tl-edge_g { background-image: url(../images/trim/tl-edge_g.png); }
.tl-edge_b { background-image: url(../images/trim/tl-edge_b.png); }
.tr-edge_g { background-image: url(../images/trim/tr-edge_g.png); }
.tr-edge_b { background-image: url(../images/trim/tr-edge_b.png); }
.bl-edge_g { background-image: url(../images/trim/bl-edge_g.png); }
.bl-edge_b { background-image: url(../images/trim/bl-edge_b.png); }
.br-edge_g { background-image: url(../images/trim/br-edge_g.png); }
.br-edge_b { background-image: url(../images/trim/br-edge_b.png); }

/*top: set consistent informaiton for edges in green and brown for both inner and outer rims*/
.t-edge_g, .t-edge_b, .t-in_g, .t-in_b
{
	width: 100%;
	height: 15px;
	position: absolute;
	left: 0px;
	background: top left repeat-x;
}

/*top: deal with differnce in position between inner/outer*/
.t-edge_g, .t-edge_b, .tl-edge_g, .tl-edge_b, .tr-edge_g, .tr-edge_b { top: -15px; }

.t-in_g, .t-in_b { bottom: -3px; }

/*top: deal with difference between green and brown variant*/
.t-edge_g, .t-in_g { background-image: url(../images/trim/t-edge_g.png); }

.t-edge_b, .t-in_b { background-image: url(../images/trim/t-edge_b.png); }

/*bottom: set consistent informaiton for edges in green and brown for both inner and outer rims*/
.b-edge_g, .b-edge_b, .b-in_g, .b-in_b
{
	width: 100%;
	height: 15px;
	position: absolute;
	left: 0px;
	background: top left repeat-x;
}

/*bottom: deal with differnce in position between inner/outer*/
.b-edge_g, .b-edge_b, .bl-edge_g, .bl-edge_b, .br-edge_g, .br-edge_b { bottom: -15px; }

.b-in_g, .b-in_b { top: -3px; }

/*bottom: deal with difference between green and brown variant*/
.b-edge_g, .b-in_g { background-image: url(../images/trim/b-edge_g.png); }

.b-edge_b, .b-in_b { background-image: url(../images/trim/b-edge_b.png); }

/*left: set consistent informaiton for edges in green and brown for both inner and outer rims*/
.l-edge_g, .l-edge_b, .l-in_g, .l-in_b
{
	width: 15px;
	height: 100%;
	position: absolute;
	top: 0px;
	background: top left repeat-y;
}

/*left: deal with differnce in position between inner/outer*/
.l-edge_g, .l-edge_b, .tl-edge_g, .tl-edge_b, .bl-edge_g, .bl-edge_b { left: -15px; }

.l-in_g, .l-in_b { right: -3px; }

/*left: deal with difference between green and brown variant*/
.l-edge_g, .l-in_g { background-image: url(../images/trim/l-edge_g.png); }

.l-edge_b, .l-in_b { background-image: url(../images/trim/l-edge_b.png); }

/*right: set consistent informaiton for edges in green and brown for both inner and outer rims*/
.r-edge_g, .r-edge_b, .r-in_g, .r-in_b
{
	width: 15px;
	height: 100%;
	position: absolute;
	top: 0px;
	background: top left repeat-y;
}

/*right: deal with differnce in position between inner/outer*/
.r-edge_g, .r-edge_b, .tr-edge_g, .tr-edge_b, .br-edge_g, .br-edge_b { right: -15px; }

.r-in_g, .r-in_b { left: -3px; }

/*right: deal with difference between green and brown variant*/
.r-edge_g, .r-in_g { background-image: url(../images/trim/r-edge_g.png); }

.r-edge_b, .r-in_b { background-image: url(../images/trim/r-edge_b.png); }