* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: helvetica, arial, sans-serif;
background: #3E778C url(images/bg.gif) center top no-repeat;
}

#container {
position: relative;
margin: 0 auto;
width: 960px;
}



/* =============== Header =============== */

#branding {
position: relative;
margin: 0 auto;
width: 960px;
height: 150px;
}

#logo {
position: absolute;
top: 0px;
left: 20px;
display: block;
width: 140px;
height: 126px;
text-indent: -9999px;
background: url(images/logo.gif) no-repeat;
}


/* =============== Navigation =============== */


#nav {
position: absolute;
top: 5.7em;
right: 0px;
list-style: none;
width: 220px;
}

#nav li {
display: inline;}

#nav li a {
padding: 9px 0 9px 14px;
font-size: 1.2em;
display: block;
color: #FFF;
text-decoration: none;
}

#nav li a:link, #nav li a:visited {
border-bottom: 1px solid #3C7B92;
}

#nav li a:hover, #nav li a:active, #nav li a#youarehere {
border-bottom: 1px solid #3C7B92;
background: url(images/nav-bg.gif) top left repeat-y;
}



/* =============== Content =============== */

#content-wrap {
float: left;
width: 740px;
background: url(images/content-wrap-bg.gif) repeat;
padding: 0 0 10px 0;
position: relative;
}

.intro-column {
float: left;
display: inline;
width: 215px;
margin-left: 20px;
}

.main-column {
float: left;
display: inline;
width: 450px;
margin-left: 20px;
}

.side-content {
float: right;
display: inline;
width: 240px;
margin-right: 20px;
background: #3E778C;
}



/* =============== Typography =============== */

h1 {
font-size: 2em;
color: #FFF;
font-weight: normal;
margin: 1em 0 0.3em 20px;
width: 700px;
}

.intro-column h2, .main-column h2 {
font-weight: normal;
font-size: 1.6em;
color: #FFF;
padding-bottom: 6px;
border-bottom: 2px solid #00AEEF;
margin: 12px 0;
}

.side-content h2 {
font-weight: normal;
font-size: 1.6em;
color: #FFF;
padding-bottom: 6px;
border-bottom: 2px solid #FF6C3B;
margin: 12px 0 12px 10px;
}

.main-column h3 {
font-weight: normal;
font-size: 1.4em;
color: #FFF;
padding-top: 6px;
margin-bottom: 6px;
}

p {
color: #D1D0D0;
line-height: 160%;
font-size: 1.2em;
margin-bottom: 12px;
}

.main-column ul {
list-style: square;
margin: 0 12px 12px 26px;
}

.main-column ul li {
font-size: 1.2em;
line-height: 160%;
color: #D1D0D0;
}

.side-content ul {
list-style: none;
margin: 0 12px 12px 12px;
}

.side-content ul.no-link {
list-style: square;
font-style: italic;
margin: 0 12px 12px 26px;
}

.side-content ul li {
font-size: 1.2em;
line-height: 160%;
color: #D1D0D0;
}

#content-wrap .side-content ul li a:link, #content-wrap .side-content ul li a:visited {
padding-right: 10px;
border-bottom: none;
background: url(images/arrow-orange.gif) center right no-repeat;
}

#content-wrap .side-content ul li a:hover, #content-wrap .side-content ul li a:active {
padding-right: 10px;
border-bottom: none;
background: url(images/arrow-orange.gif) center right no-repeat;
}

#content-wrap a:link, #content-wrap a:visited {
color: #FFF;
text-decoration: none;
border-bottom: 1px solid #FFF;
}

#content-wrap a:hover, #content-wrap a:active {
color: #FFF;
text-decoration: none;
border-bottom: 1px solid #FFF;
}

#content-wrap p a.more-link:link, #content-wrap p a.more-link:visited {
padding-right: 10px;
border-bottom: none;
background: url(images/arrow-blue.gif) center right no-repeat;
}

#content-wrap p a.more-link:hover, #content-wrap p a.more-link:active {
padding-right: 10px;
border-bottom: none;
background: url(images/arrow-blue.gif) center right no-repeat;
}


/* =============== Hero Section =============== */

#hero {
margin: 0 10px;
background: url(images/hero-bg-trans.png);
padding: 11px;
}


/* =============== Gallery =============== */

#gallery {
list-style: none;
margin: 10px 0 20px 20px;
}

#gallery li {
float: left;
display: inline;
margin: 0 20px 20px 0;
}

#content-wrap #gallery li a {
display: block;
width: 220px;
height: 142px;
border: none;
}

#gallery li a:link img, #gallery li a:visited img {
border: 1px solid #CCC;
}

#gallery li a:hover img, #gallery li a:active img {
border: 1px solid #FFF;
}

#gallery-tip {
position: absolute;
top: 25px;
right: 20px;
text-align: right;
margin: 0;
font-style: italic;
}


/* =============== Project Details =============== */

table {
font-size: 1.2em;
line-height: 160%;
}

th {
width: 120px;
color: #FFF;
text-align: left;
vertical-align: top;
}

td {
color: #D1D0D0;
padding-bottom: 20px;
}


/* =============== Footer =============== */

#footer {
position: relative;
margin: 30px auto 50px auto;
width: 960px;
}

#footer p {
color: #94ABB4;
font-size: 1.1em;
line-height: 140%;
margin: 0 0 0 20px;
}

#footer #site-by {
position: absolute;
right: 240px;
bottom: 0px;
text-align: right;
margin: 0;
color: #94ABB4;
}

#footer p a {
color: #94ABB4;
text-decoration: none;
}



/* =============== Bits & Pieces =============== */

a {
outline: none;
}

/* Clearing */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

a.noline:link {
text-decoration:none;
}

a.noline:visited {
text-decoration:none;
}

a.noline:hover {
text-decoration:none;
}