html { margin: 0; padding: 0; font: normal 12px/18px Arial, sans-serif;  }
body { background: #d4d4d4; margin: 0; padding: 0; }

#body { background: #d4d4d4 url(img/background.gif) top left repeat-x; margin: 0; padding: 0; }
#main { background: url(img/footer.gif) bottom left no-repeat; width: 868px; margin: 0 auto 60px auto; padding-bottom: 12px;  }

h2 { margin: 10px 0 18px 0; font-size: 18px; }
h3 { margin: 10px 0 18px 0; font-size: 16px; }

#logo { margin: 0; padding: 0; padding-top: 48px; background: url(img/header.gif) top left no-repeat; height: 50px; }
#logo a { display: block; width: 280px; height: 50px; margin-left: 25px; font-size: 1px; text-indent: -9000em; }

#nav { background: url(img/navigation.gif) top left repeat-y; display: block; min-height: 35px; margin: 0; padding: 0 11px; list-style: none; overflow: none; position: relative; z-index: 200; }
#nav:after { display: block; clear: both; content: ""; }

#nav li { display: block; float: left; height: 35px; margin: 0; padding: 0; position: relative; }
#nav li a,
#nav li span { display: block; height: 19px; padding: 8px; color: #231f20; text-decoration: none; font-weight: bold; float: left;}
#nav li a:hover,
#nav li.selected a { background: #686860 url(img/tab.gif) top left repeat-x; color: #fff; }
#nav li:hover a { background: #686860 url(img/tab.gif) top left repeat-x; color: #fff; }
#nav ul { position: absolute; visibility: hidden; left: 0; top: 35px; margin: 0; padding: 0; background: #686860; width: 200px; z-index: 200; }
#nav ul li { float: none; height: auto; position: relative; z-index: 200;}
#nav ul li a { float: none; text-overflow: nowrap; height: auto; color: #fff; }
#nav li:hover ul li a { background-image: none; }

#nav li:hover ul,
#nav ul:hover { visibility: visible; }

#content { background: url(img/content.gif) top left repeat-y; height: 480px; margin: 0; overflow: hidden; }
#content .scrollable { float: left; margin: 0 0 0 10px; padding: 0 5px 0 70px; width: 561px; overflow: auto; }

.portfolio #content { height: auto; }
.portfolio #content .scrollable { height: auto; width: 775px; margin-bottom: 80px; overflow: hidden; }
.carousel #content { height: 380px; }

.carousel .portfolio-item { width: 540px; }
.carousel .portfolio-item h3 { width: 130px; }
.carousel .portfolio-item .description { width: 180px; }
.carousel .portfolio-item .image { width: 210px; }

#carousel { list-style: none; margin: 0 12px 0 0; padding: 0; float: right; height: 480px; width: 210px; position: relative; z-index: 100;   }
#carousel li { display: block; margin: 0; padding: 0; background: orange; }
#carousel li img { display: block; margin: 0; padding: 0; background: black; width: 210px; }

.portfolio-item { display: block; margin: 18px 0 0; padding: 0; border-top: 1px solid #444; overflow: hidden; }
.portfolio-item h3 { font-size: 12px; margin: 0; padding: 9px 0 0 0; width: 230px; float: left; }
.portfolio-item h3 span { display: none; }
.portfolio-item h3 small { display: block; font-weight: normal; font-size: 12px; }
.portfolio-item .description { width: 310px; padding: 9px 5px 0px 5px; float: left; }
.portfolio-item .description p { margin-top: 0; margin-bottom: 9px; }
.portfolio-item .description p:last-child { margin-bottom: 0; }
.portfolio-item .image { margin: 0; width: 210px; float: right; }
.portfolio-item .image img { display: block; }


.image { text-align: center; display: block; margin: 0; padding: 5px; }
.image img { border: 1px solid #aaa; padding: 1px; background: #fff; }
.image.left { padding-left: 0; float: left; }
.image.right { padding-right: 0; float: right; }

#footer { height: 100px; margin: -80px 0 0 0; padding: 10px 80px; font-size: 10px; line-height: 14px; background: url(img/address.gif) top left repeat-y; display: block; overflow: hidden; }
#footer dt { margin: 0 0 0 -65px; padding: 0; width: 50px; text-align: right; color: #444; font-weight: bold; }
#footer dt.hide { visibility: hidden; }
#footer dd { margin: -13px 0 4px 0; padding: 0; }
#footer address { font-style: normal; }

.carousel #footer { margin-top: -120px; }