@import url('reset.css');

div.clear { clear:both; }

.content a, .fakelink {
    color:#777;
    text-decoration:none;
    border-bottom:1px solid #3b8eee;
    }

.content a:hover {
    color:#3b8eee;
    background:#a7cefb;
    border-bottom:1px solid #a7cefb;
    }

body {
    background:#e6e6e6 url(../images/layout/bg-body.gif) left top repeat-x;
    font-family:helvetica, arial, sans-serif;
    color:#999;
    }

#page {
    width:800px;
    margin:60px auto 0 auto;
    }

#logo {
    width:800px;
    height:45px;
    margin-bottom:30px;
    background:transparent url(../images/layout/logo.gif) left top no-repeat;
    }

#logo h1, #logo p { display:none; }

#nav_container {
    width:800px;
    height:30px;
    }

#nav_container span { display:none; }

#nav li {
    float:left;
    }

#nav li a {
    display:block;
    width:200px;
    height:30px;
    background-image:url(../images/layout/nav.gif);
    }

#nav-web a { background-position:0 0; }
#nav-identity a { background-position:-200px 0; }
#nav-illustration a { background-position:-400px 0; }
#nav-about a { background-position:-600px 0; }

#nav-web a:hover { background-position:0 -30px; }
#nav-identity a:hover { background-position:-200px -30px; }
#nav-illustration a:hover { background-position:-400px -30px; }
#nav-about a:hover { background-position:-600px -30px; }

#nav-web a.activeSlide { background-position:0 -60px; }
#nav-identity a.activeSlide { background-position:-200px -60px; }
#nav-illustration a.activeSlide { background-position:-400px -60px; }
#nav-about a.activeSlide { background-position:-600px -60px; }

.content {
    width:800px;
    height:420px;
    background:#fff url(../images/layout/bg-content.gif) left bottom no-repeat;
    text-align:left;
    }

#blank_logo {
    width:800px;
    height:420px;
    background:url(../images/layout/bg-blank.jpg) center center no-repeat;
    }

.thumbs {
    width:800px;
    height:60px;
    margin-bottom:20px;
    background:#ccc url(../images/layout/bg-thumbs.png) left top no-repeat;
    }

.thumbs ul {
    /*width:320px;*/
    margin:0 auto;
    padding-top:4px;
    }

/* slides * 64px */
.thumbs ul#thumbs_web { width:640px; }
.thumbs ul#thumbs_identity { width:512px; }
.thumbs ul#thumbs_illustration { width:768px; }

.thumbs li {
    float:left;
    margin:0 2px;
    background:transparent;
    }

.thumbs a {
    display:block;
    width:58px;
    height:50px;
    border:1px solid #aaa;
    }

.thumbs a.activeSlide {
    opacity:.33;
    }

.slide { width:800px; }

.work {
    float:left;
    width:350px;
    height:320px;
    margin:0 20px 0 20px;
    padding:10px;
    background:url(../images/layout/bg-work.png) left top no-repeat;
    }

.description {
    margin:10px 30px 0 30px;
    }

.content h1 {
    padding-top:10px;
    font-size:22px;
    font-family:'century gothic', helvetica, arial, sans-serif;
    font-weight:normal;
    color:#3b8eee;
    letter-spacing:3px;
    text-transform:uppercase;
    }

.content h2 { display:none;
    padding-top:2px;
    font-size:12px;
    font-weight:normal;
    color:#999;
    }

.content p {
    padding-top:10px;
    font-size:13px;
    line-height:18px;
    color:#777;
    }

#content_about .description {
    margin:100px 30px 0 410px;
    }

#footer {
    margin-top:40px;
    font-size:11px;
    text-align:center;
    }

#content_error {
    width:600px;
    height:200px;
    margin:250px 100px 0 100px;
    background:#e6e6e6;
    }

#x {
    float:left;
    width:200px;
    height:200px;
    background:url(../images/layout/error.png) left top no-repeat;
    }

#errortext {
    width:500px;
    height:200px;
    margin-left:200px;
    padding-top:25px;
    }

#errortext h1 {
    font-family:helvetica, arial, sans-serif;
    font-size:48px;
    letter-spacing:-4px;
    color:#ccc;
    text-shadow:1px 1px 0 #eee;
    }

#errortext a:link {
    margin-left:4px;
    border:0;
    font-size:14px;
    color:#3b8eee;
    }