﻿html, body {
 margin: 0;
 padding: 0;
}

body {
 font-size: 62.5%;
 background-color: #C9CAC9;
 text-align: center;
 font-family: Georgia, serif;
}

a {
 color: #000;
 text-decoration: underline;
}

a:hover {
 text-decoration: none;
}

#container {
 width: 604px;
 margin: 0 auto;
}


/* Navigation */

#navframe {
 width: 604px;
 margin: 0;
 padding: 0 2px 2px;
 border-top: 0;
 border-left: 1px solid #e4e5e4;
 border-right: 1px solid #e4e5e4;
 border-bottom: 1px solid #e4e5e4;
 background-color: #c9c9c9;
}

#navigation {
 background: #fff url(images/nav_background.png) repeat-x;
 width: 600px;
 margin: 0 2px 2px;
 text-align: center;
}

ul#nav {
 margin: 0 auto;
 padding: 0;
 height: 62px;
 width: 600px;
 list-style: none;
}

ul#nav li {
 font-family: Georgia, serif;
 font-size: 24px;
 display: block;
 float: left;
}

#nav li a {
 display: block;
 text-indent: -9999px;
 overflow: hidden;
 outline: none;
 height: 62px;
 width: 150px;
}

#home a { background: url(images/nav_home.png); }
#jobs a { background: url(images/nav_jobs.png); }
#showcase a { background: url(images/nav_showcase.png); }
#contact a { background: url(images/nav_contact.png); }

#home a:hover { background: url(images/nav_home_hover.png); }
#jobs a:hover { background: url(images/nav_jobs_hover.png); }
#showcase a:hover { background: url(images/nav_showcase_hover.png); }
#contact a:hover { background: url(images/nav_contact_hover.png); }

#xhome #home a { background: url(images/nav_home_active.png); }
#xjobs #jobs a { background: url(images/nav_jobs_active.png); }
#xshowcase #showcase a { background: url(images/nav_showcase_active.png); }
#xcontact #contact a { background: url(images/nav_contact_active.png); }

/* Content */

.boxframe {
 width: 604px;
 margin-top: 30px;
 padding: 2px;
 border: 1px solid #e4e5e4;
 background-color: #c9c9c9;

-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-webkit-border-bottom-right-radius:3px;

-khtml-border-radius-topleft:3px;
-khtml-border-radius-topright:3px;
-khtml-border-radius-bottomleft:3px;
-khtml-border-radius-bottomright:3px;

-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
}

#searchbox {
 display: none;
 text-align:right;
 margin: 0;
 padding: 0;
 font-family: Georgia, Times, serif;
 font-size: 1.2em;
 background-color: #fff;
}

#searchbox fieldset {
 border: 0;
 margin: 0;
 padding: 5px;
}

#content {
 background-color: #fff;
 margin: 2px;
 padding: 0;
 text-align: left;
}

#splash {
 background: url(images/splash_img.jpg) no-repeat;
 position: relative;
 height: 320px;
}

#splash h1 {
 margin: 0;
 padding: 0;
 font-size: 1.5em;
}

 /* Changing the top image for all the pages except the front page */

#xjobs #splash, #xshowcase #splash, #xcontact #splash { height: 140px; background-repeat: no-repeat; }

#xjobs #splash { background: url(images/jobs_splash.jpg); }
#xshowcase #splash { background: url(images/showcase_splash.jpg); }
#xcontact #splash { background: url(images/contact_splash.jpg); }

.logo {
 font-size: 1.8em;
 line-height: 1em;
 font-family: arial, helvetica, sans-serif;
 text-transform: uppercase;
 font-weight: bold;
 color: #fff;
 text-decoration: none;
 position: absolute;
 top: 15px;
 left: 15px;
}

.logo .top { color: #000; display: block; }

.logo .bottom { color: #fff; display: block; }

#hiring {
 text-align: right;
 width: 600px;
 height: 40px;
 background: url(images/hire_bar.png) repeat-x;
}

#hiring a {
 height: 40px;
 padding: 10px 30px 0 0;
 font-size: 2em;
 color: #fff;
 font-family: Georgia, serif;
 text-decoration: underline;
 display: block;
}

#hiring a:hover {
 text-decoration: none;
 background: url(images/arrow.png) no-repeat 575px 17px;
}

#description {
 background: #fff url(images/content_bar.png) no-repeat top;
 margin: 0 auto;
 padding: 0 10px 0;
}

#description .ingress {
 width: 250px;
 margin: 0 10px 10px 10px;
 padding: 10px;
 display: inline;
 float: left;
}

#description .ingress h2 {
 margin: 0;
 padding: 0;
 font-size: 1.8em;
 line-height: 2em;
}

#description .ingress p {
 font-size: 1.2em;
 line-height: 1.5em;
 margin: 0;
 padding: 0;
}

#description .ingress p.join {
 margin-top: 1.4em;
}

.clear {
 width: 100%;
 clear: both;
}

#maincontent {
 background: #fff url(images/content_bar.png) no-repeat top;
 padding: 5px;
 line-height: 2em;
 font-size: 1.2em;
}

#maincontent .articleimage {
 margin: 5px 10px 5px 5px;
 float: left;
}

#maincontent img {
 border: 1px solid #000;
}

#showcaselist {
 margin: 15px 0 0;
 padding: 0;
 line-height: 2em;
 font-size: 1.2em;
}

li.boxframe {
 list-style: none;
}

.showcasebox {
 text-align: left;
 background: #fff;
 margin: 0;
 padding: 0;
}

.showcasebox a {
 text-decoration: underline;
}

.showcasebox a:hover {
 text-decoration: none;
}

.showcasebox img {
 width: 100px;
 height: 100px;
 float: left;
 border: 0;
}

.showcasebox h2 {
 float: left;
 margin-left: 10px;
 font-size: 2em;
}

.showcasebox .content {
 float: left;
 margin-left: 10px;
 width: 480px;
}

.showcasebox span.footnote {
 font-size: 0.9em;
 float: none;
 display: block;
}

#footer {
 clear: both;
 width: 604px;
 text-align: right;
 font-family: verdana, arial, sans-serif;
 font-size: 1em;
 margin: 2px 0 5px;
}

/* Structure */

.center {
 text-align: center;
}

.right {
 text-align: right;
}