body {background-color: #333;}
body .colored {background-color:#999;}
.container {width: 461px}
a {color: #000; font-weight: bold; text-decoration: none;}
a:hover {color: black; text-decoration: underline; }

#top_bar {background-color: #333; padding: 10px 0 0 0; color: white;}
ul#nav {margin: 0 -20px 0 0; padding: 0 2px 0 0; list-style-type: none; float:right;}
body#works ul#nav {margin-right: 0;}
ul#nav li {float: left; margin: 0; padding: 0; }
ul#nav li a {display: block; font-size: 1.6em; padding: 2px 20px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius:5px;}
ul#nav li a:hover {background-color: #555;}
ul#nav li a:active {background-color: #999;}
#works ul#nav li a#nav_works, #about ul#nav li a#nav_about {background-color: white; color: #333;}
#top_bar a, #footer a {color: #ccc;}

.hero {background: #fff url(images/hero_bg.jpg) top left repeat;padding-top: 20px; }
.hero .container {position: relative;height: 100px;}
.hero h2 {text-transform: uppercase;  font-size: 48px; margin: 0; font-size: 27px; line-height: 23px; position: absolute; bottom: 1px; left: 500px;}
.hero .next {background:transparent; float: right; padding-top: 65px;}

h1.logo {position: absolute; bottom: -80px; left: 0px; }
h1.logo a {	 width: 461px; height: 134px; background: url(images/logo.png) no-repeat; text-indent: -9999px; display: block; }

.content { padding: 95px 0 20px 0; font-size: 16px; font-family: georgia; line-height: 24px; color: #444;background-color: #c2d8b9; text-align: justify;}
.content h4 {text-align: center; font-size: 1.6em; border-bottom: 2px solid #333; margin-top: -.7em;}
.content h4 span {display: block;  padding: 0 20px; margin: 0 auto -.7em auto; width: 180px; background-color: #c2d8b9;}
.content a {font-style: italic;}
#works .content {background-color: #b9c1d8;}
#works h1.logo a  {background: url(images/logo_works.png) no-repeat;}

#flowpanes{width:461px;height:700px;}
#flowpanes{position:relative;overflow:hidden;clear:both;}
#flowpanes .pane{display:none;float:left;display:block;width:461px;cursor:pointer;}
#flowpanes .items{width:20000em;position:absolute;clear:both;margin:0;padding:0;}

ul#flowtabs{list-style-type:none;margin:0 0 0 0;padding:0 0 0px 0; text-align: center;}
ul#flowtabs li{float:left;margin:0;padding:0;}
ul#flowtabs li a{display:block;padding:4px 10px;margin:0px;text-decoration: none; color: #333;}
ul#flowtabs li a:hover {background-color: #fff;}
ul#flowtabs li a.current {color: white;}
ul#flowtabs li button.next, ul#flowtabs li button.prev  {text-decoration: none; border-width: 0; color: white; font-size: 12px; text-transform: uppercase; width: 114px;padding: 0 12px 0 0; height: 29px; background: url(images/next_page_button.png) no-repeat;}
ul#flowtabs li button.next:hover {background: url(images/next_page_button_hover.png) no-repeat;}
ul#flowtabs li button.prev {background: url(images/prev_page_button.png) no-repeat; padding: 0 0 0 12px;}
ul#flowtabs li button.prev:hover {background: url(images/prev_page_button_hover.png) no-repeat;}

.photos {margin: 20px 0 0 0; }
.photos img {background: url(images/photo_shadow.png) top left no-repeat; padding: 1px 3px 5px 2px;}
.description h3 {font-weight: bold; margin: 1em 0 .5em 0; text-align: center;}

#footer {clear: left; background: #333; border-top: 2px solid #666; padding: 10px 0; color: white; text-align:right;}
#footer ul {margin: 0; padding: 0 2px 0 0; list-style-type: none; float:left;}
#footer li {float: left;}
#footer li a {display: block; padding: 2px 40px 0 0px;}
#footer li.right {float: right;}
#footer li.right a {padding: 2px 0 0 10px;}
#footer p {margin: 0;}