html,body {width:100%; height:100%; }
body {background:#23221F url(../_img/bg-body.png) no-repeat 50% 0; margin:0; padding:0; font-family:Tahoma, Verdana, sans-serif}
h1 {font-size:1.4em; font-weight:normal; margin:1em 0 0.3em 0}
h2,h3,h4,h5,h6 {font-size:1.4em; font-weight:normal; margin:1em 0 0.3em 0}
p {margin:0 0 1em 0}
.clear {font-size:0; margin:0; padding:0; clear:both; width:0; height:0}
a {text-decoration:underline; font-weight:bold; color:#23221F}
a:hover {text-decoration:none}
.fl {float:left}
.fr {float:right !important}
/* GLOBAL LAYOUT */
header {display:block; width:100%; height:150px; text-align:center; float:left}
a.logo {display:block; float:left; margin:58px 0 0 10px}
a.logo img {display:block; float:left; border:none}
div.content {width:100%; min-height:70%; float:left; text-align:center; background:#777166; color:#23221F; line-height:1.5em; font-size:0.8em; padding:10px 0 30px 0}
footer {display:block; width:100%; min-height:70px; float:left; text-align:center}
div.centered {width:960px; margin:0 auto; text-align:left}
footer div.centered {text-align:center; }
div.centered h1, div.centered h2, div.centered h3, div.centered h4, div.centered h5 {margin:0 10px 5px 10px}
div.centered p {margin:0 10px 20px 10px}
footer div.centered p, footer div.centered a {color:#fff; font-weight:normal; margin:20px 0}
div.top-shadow {float:left; width:100%; height:10px; font-size:0; background:#777166 url(../_img/bg-topshadow.png) repeat-x top left}
div.bottom-shadow {float:left; width:100%; height:10px; font-size:0; background:#777166 url(../_img/bg-bottomshadow.png) repeat-x top left}
ul.navigation {margin:90px 10px 0 0; padding:0; float:right;}
ul.navigation li {float:left; margin:0; padding:0 15px 0 10px; list-style:none; background:transparent url(../_img/bg-navigationli.png) no-repeat 100% 50%}
ul.navigation li:last-child {padding:0 0 0 10px; background:none}
ul.navigation li a {display:block; color:#fff; text-decoration:none; text-transform:uppercase; font-weight:normal; font-size:0.9em}
ul.navigation li a.active {text-decoration:underline}
ul.navigation li a:hover {text-decoration:underline}
ul.navigation.mobile {display:none; position:absolute; top:150px; width:100%; margin:0; padding-bottom:30px; float:none; background-color:#23221F}
ul.navigation.mobile li, ul.navigation.mobile li:last-child {float:none; background:none; text-align:right; border-bottom:solid 1px #5d5d5c; padding:0 10px 0 0}
ul.navigation.mobile li a {padding:6px 10px}
a.menutoggle {display:none; position:absolute; right:20px; top:80px; background:transparent url(../_img/bg-menu.png) no-repeat 50% 50%; width:30px; height:30px; text-indent:-99em}
/* homepage */
div.panel {float:left; width:460px; box-shadow:0 0 2px 2px #544F48; margin:30px 10px 0 10px; background-color:#23221F; color:#ddd}
div.panel h2, div.panel h3, div.panel h4, div.panel h5 {margin:20px 10px 10px 10px; }
div.panel h2 a, div.panel h3 a, div.panel h4 a, div.panel h5 a {color:#ddd; font-weight:normal }
div.panel p {margin:0 10px 30px 10px; min-height:90px}
.carousel {width:460px; height:345px; position:relative; z-index:1; }
.carousel img {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; cursor:pointer}
ul.carousel-nav {position:absolute; bottom:0; right:0; z-index:1000; margin:0; padding:10px}
ul.carousel-nav li {float:left; margin:0; padding:2px; list-style:none}
ul.carousel-nav li a {display:block; float:left; text-indent:-999em; width:15px; height:15px; background:transparent url(../_img/bg-carousel.png) no-repeat top left}
ul.carousel-nav li a.active {background:transparent url(../_img/bg-carousel-active.png) no-repeat top left}
div.project {width:940px; margin:30px 10px 0 10px; height:225px; overflow:hidden; box-shadow:0 0 2px 2px #544F48; color:#ddd; background-color:#55514A}
div.project .carousel {height:225px; width:300px; float:left}
div.project h2, div.project h3, div.project h4, div.project h5 {margin:10px 10px 5px 0; color:#ddd; font-weight:normal}
div.project div.fl {margin:0 0 15px 20px; width:600px}
div.project p {margin:0 10px 30px 0}
div.right div.carousel {float:right}
div.right div.fr {margin:0 20px 15px 0; width:600px}
/* gallery */
div#gallery-container {display:none; position:absolute; top:0; left:0; z-index:300; height:1px; width:100%; text-align:center}
div#gallery {position:relative; margin:0 auto; z-index:400; min-height:20px; min-width:20px; text-align:center; background:#fff url(../_img/ajax-loader.gif) no-repeat 50% 50%; padding:0; box-shadow:0 0 3px 2px #222}
div#gallery img {position:absolute; top:10px; left:10px; display:block; cursor:pointer}
div#gallery p {display:none; font-family:Eurostile-Reg; background-color:#eee; box-shadow:0 0 2px 1px #ccc; border:solid 1px #bbb; opacity:0.9; position:absolute; right:5px; top:5px; text-align:right; padding:10px 20px; margin:0 5px}
a#next {display:none; position:absolute; top:0; right:0; z-index:400; height:100px; width:45px; text-decoration:none; text-indent:-999em; background:transparent url(../_img/bg-arrow-next.png) no-repeat 0 50%}
a#prev {display:none; position:absolute; top:0; left:0; z-index:400; height:100px; width:45px; text-decoration:none; text-indent:-999em; background:transparent url(../_img/bg-arrow-previous.png) no-repeat 100% 50%}
a#next.disabled {background:transparent url(../_img/bg-arrow-next-disabled.png) no-repeat 0 50%; cursor:default}
a#prev.disabled {background:transparent url(../_img/bg-arrow-previous-disabled.png) no-repeat 100% 50%; cursor:default}
div#overlay {position:absolute; top:0; left:0; z-index:200; opacity:0.6; background-color:#000}
@media all and (max-width: 980px) and (min-width: 600px) {
div.centered {width:100%}
div.project {width:100%; margin:30px 0; height:auto}
div.project .carousel {height:auto; width:50%; }
div.panel {width:46%; box-shadow:0 0 2px 2px #544F48; margin:30px 10px 0 10px; background-color:#23221F; color:#ddd}
.carousel {width:auto; position:relative; z-index:1; }
div.project div.fl {width:40%}
div.right div.fr {width:40%}
}
@media all and (max-width: 599px) {
div.centered {width:100%}
div.project {width:100%; margin:30px 0; height:auto}
div.project .carousel {height:auto; width:100%; float:none}
div.panel {width:auto; box-shadow:0 0 2px 2px #544F48; margin:30px 10px 0 10px; background-color:#23221F; color:#ddd}
.carousel {width:auto; position:relative; z-index:1; }
div.project div.fl {width:auto; float:none; margin:10px}
div.right div.fr {width:auto; float:none; margin:10px}
div.panel {float:none !important}
div.panel h3, div.panel h2 {text-align: center; padding-bottom:10px}
}