/* ============ Reset ============ */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
    margin:0;
    padding:0;
}

img,body,html {
    border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}

ol,ul{
    list-style:none;
}

a {
    cursor:pointer;
    color:#1B6194;
    text-decoration:none;
}

    a:hover {
        color:#CF8300;
    }

html, body {
    background:#f4f8f2;
    color:#51574D;
    font-family:"Trebuchet MS", Verdana,Arial,Helvetica,sans-serif;
    font-size:1.0em;
    height:100%;
    width:100%;
}




/* ============ Base Frame ============ */

#wrapper {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-550px;
    margin-top:-250px;
    height:500px;
    width:1100px;
}

#left {
    float:left;
    border-right:1px dotted #ccc;
    padding-right:10px;
    height:500px;
}

    #left h1 {
        background:url(./images/logo.gif);
        width:350px;
        height:161px;
    }
    
    #left h1 span,
    #left li a span {
        visibility:hidden;
    }
    
    #left a {
        text-decoration:none;
    }
    
    #menue {
        margin-left:200px;
        margin-top:35px;
    }

        #menue li a {
            display:block;
            width:118px;
            height:41px;
            background-repeat:no-repeat;
        }
        
        #menue li.photography a {
            background-image:url(./images/menue-photography.gif);
        }
        
        #menue li.photography a:hover {
            background-image:url(./images/menue-photography-hover.gif);
        }
        
        #menue li.photography a.active {
            background-image:url(./images/menue-photography-active.gif);
        }
        
        #menue li.projects a {
            background-image:url(./images/menue-projects.gif);
        }
        
            #menue li.projects a:hover{
                background-image:url(./images/menue-projects-hover.gif);
            }
            
            #menue li.projects a.active{
                background-image:url(./images/menue-projects-active.gif);
            }
        
        #menue li.aboutme a {
            background-image:url(./images/menue-aboutme.gif);
        }
        
            #menue li.aboutme a:hover {
                background-image:url(./images/menue-aboutme-hover.gif);
            }
            
            #menue li.aboutme a.active {
                background-image:url(./images/menue-aboutme-active.gif);
            }
        
        #menue li.contact a {
            background-image:url(./images/menue-contact.gif);
        }
        
            #menue li.contact a:hover {
                background-image:url(./images/menue-contact-hover.gif);
            }
            
            #menue li.contact a.active {
                background-image:url(./images/menue-contact-active.gif);
            }
            
        #menue li.navigation {
            font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
            color:#889085;
            font-size:1.8em;
            font-weight:bold;
            margin-top:30px;
        }
        
        #menue li .next,
        #menue li .prev {
            cursor:pointer;
        }
        
            #menue li .next:hover,
            #menue li .prev:hover {
                color:#557799;
            }
            
            #menue li .prev {
                margin-left:40px;
            }

            
/* ============ Content Area ============ */

#content {
    position:relative;
    width:697px;
    height:500px;
    overflow:hidden;
    padding-left:30px;
    padding-top:10px;
}

    #content  h2 {
        font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
        color:#889085;
        font-size:1em;
        margin-top:15px;
    }
    
#fade-right {
    height:500px;
    width:54px;
    background:url(./images/fade-right.png) repeat-y;
    position:absolute;
    top:0;
    left:680px;
    z-index:100;
}

#carousel li {
    display:block;
    width:700px;
    height:500px;
}
  
#aboutme {
    margin-top:20px;
}

    #aboutme img {
        float:left;
        margin-right:10px;
        margin-bottom:10px;
    }

    #aboutme p,
    #aboutme ul {
        margin-bottom:10px;
    }

    #aboutme li {
        list-style:disc;
        margin-left:300px;
    }
    
.projects {
    margin-top:10px;
}

    .projects p {
        margin-top:15px;
        width:550px;
    }
    
#contact {
    margin-top:20px;
}    

    #contact .name {
        font-weight:bold;
    }    
    
    #contact label {
        display:block;
        width:110px;
        float:left;
    }
    
    
/* ============ Small version ============ */

body.small #left h1 {
    background:url(./images/logo_small.gif) no-repeat right center;
    width:320px;
}

body.small #wrapper {
    width:1000px;
    overflow:hidden;
}

body.small #content {
    width:620px;
}
 
body.small #menue {
    margin-left:190px;
    margin-top:20px;
}

body.small  #content  h2 {
    margin:0;
}

body.small .projects p {
    margin:0;
    font-size:0.8em;
}

body.smallheight #wrapper {
    top:0;
    margin-top:0;
}