@charset "utf-8";
/* CSS Document */
* {padding:0; margin:0;}
html {text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:100%; color: #000;}
body {width: 1193px; margin:0 auto; background-color:#fff;}
#masthead, #content, #main-navigation, #site-info {margin-left: 100px;}
#masthead {position:relative; width:999px; height:110px;}
h1 {text-indent:-9000px; height:0; width: 0;}
#content p, #content ul, #content ol, small {margin-bottom: 1em;}
#masthead #logo {position:absolute; top: 0; left:-100px;}
#masthead #logo a img {border:none;}
#newsletter-signup input {width: 190px; border:#e6e6e8 1px solid; border-right-width:4px; border-left-width:4px; position:absolute; right: 0; top: 25px;}
#newsletter-signup input:hover, #newsletter-signup input:active,
#newsletter-signup input:focus {outline:none; border-color: #ccc;}
#newsletter-signup label {display:block; text-align:right; padding-top:3px; font-size: 90%;}
#portfolio-header {font-style:italic;}
#portfolio-list h3 {margin-bottom: 10px; }
#portfolio-list h3 a {font-size: 12px; color:#999; text-decoration:none;}
#portfolio-list h3 a:hover, #portfolio-list h3 a.active, #personnel a:hover {color: #ffb27f; background-color:transparent !important;}
a:link, a:visited {color:#000; text-decoration:none;}
a:hover {text-decoration:underline;}

/*
Containers
-----------------------------------------------------------------------*/
#content {width: 999px; min-height: 550px; height:auto; height:550px; padding: 100px 0 20px 0;}
#home #content {padding:0;}
#portfolio #content {background: url(../images/portfolio-back.png) top right no-repeat; float:left; width:999px;}
#primary-content {float: left; width:550px; margin: 0; text-align:left;}
#secondary-content {float:left; width:396px; margin: 20px 0 0 0; }
#info #primary-content .gutter {padding:0 0 0 43px;}
#info #primary-content p span {font-size:14px; margin:0 5px;}
#info #secondary-content {background:url(../images/info-back.jpg) top right no-repeat;}
#info #secondary-content h2 {font-size:25px; font-style:italic; color:#000; text-align:left; margin-bottom:10px;}
#personnel {list-style:none; float:left;}
#personnel li {float:left; width:100px; text-align:center;}
#personnel li p {margin-bottom:0; font-style:italic;}
#contact #content {background:url(../images/contact-background.jpg) no-repeat top left;}
h2 {font-size:300%; font-style:italic; color: #717171;}
.bg-light {background:url(../images/sub-mast-light.jpg) top left no-repeat;}
.bg-heavy {background:url(../images/sub-mast-heavy.jpg) top left no-repeat;}
#site-info {padding: 10px 0; border-top: #e6e6e8 1px solid; font-size:80%; width: 999px;}
/*
Typography
-----------------------------------------------------------------------*/
#portfolio-list {float:left; width:100%; list-style:none; margin: 28px 0 0 0;}
#portfolio-list li {width: 127px; float:left; padding:0; margin:0 0 10px 0;}
#portfolio-description {list-style:none;}
/*
Main Navigation
-----------------------------------------------------------------------*/
#main-navigation ul {width: 999px; height:138px; background:url(../images/main-navigation-sprite.jpg) top left; position:relative; margin-left: 0;}
#main-navigation ul li {list-style: none; position:absolute; top: 0;}
#main-navigation ul li, #main-navigation ul li a {height: 138px; display:block;}
#main-navigation #home {left: 0; width: 198px;}
#main-navigation #portfolio {left: 198px; width: 156px;}
#main-navigation #websites {left: 354px; width: 151px;}
#main-navigation #info-page {left: 505px; width: 179px;}
#main-navigation #contact-page {left: 684px; width: 146px;}
#main-navigation #etc-page {left: 830px; width: 169px;}
#main-navigation a {color: transparent;}
#main-navigation a {text-indent: -9000px;}
#main-navigation #home a:hover, #home a.active  {background: transparent url(../images/main-navigation-sprite.jpg) bottom left no-repeat;}
#main-navigation #portfolio a:hover, #portfolio a.active  {background: transparent url(../images/main-navigation-sprite.jpg) -198px bottom no-repeat;}
#websites a:hover, #websites a.active  {background: transparent url(../images/main-navigation-sprite.jpg) -354px bottom no-repeat;}
#info-page a:hover, #info-page a.active  {background: transparent url(../images/main-navigation-sprite.jpg) -505px bottom no-repeat;}
#contact-page a:hover, #contact-page a.active  {background: transparent url(../images/main-navigation-sprite.jpg) -684px bottom  no-repeat;}
#etc-page a:hover, #etc-page a.active  {background: transparent url(../images/main-navigation-sprite.jpg) -830px bottom no-repeat;}
a.active {cursor: default;}
/*
Images
-----------------------------------------------------------------------*/
.img-left {float:left; margin:0 1em 0 0;}
.img-right {float:right; margin:0 0 0 1em;}
a img {border:none;}
.back-arrow {height: 15px;}
a.back-arrow {background:url(../images/navigation-arrows.png) bottom left;}
a:hover.back-arrow {background:url(../images/navigation-arrows.png) top left;}
#main-image {margin-bottom: 10px;}