﻿
body
{
    background-color: #000000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

#container
{
  
    margin-top: 0;
    margin-bottom: 0;
    width: 1000px;
    background-image: url(images/background.png);
    background-repeat: no-repeat;
}


#navigation
{
    float: left;
    margin-top: 350px;
    margin-left:200px;
    width: 600px;
   
}

#portfolio
{
    margin-top:60px;
    margin-left:30px;
    float: left;
    width: 880px;
}
#pdf
{
    position:absolute;
    top:355px;
    left:650px;
    line-height:30px;
    text-align:center;
}

#pdf a
{
    text-decoration:underline;
}

 
.kwicks
{
    list-style: none;
    position: relative;
    padding: 0;
}

.kwicks li
{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    float: left;
    width: 150px;
    height: 75px;
    margin-right: 5px;
}

.kwicks li a
{
    text-decoration: none;
    display: block;
    padding:0 0 0 100px;
     padding:28px 0 0 100px;
}

#pdf
{
    width:150px;
}

#phone
{
    background: url(images/li_kwicks_phone.png) no-repeat 12px 0;
}
#phone a 
{
    display:none;
   
}
#phone.active
{
     
}
#email a 
{
    display:none; 
}
#cv a
{ 
    display:none;
}
#phone.active a, #email.active a, #cv.active a
{
    display:block;
}

#email
{
    background: url(images/li_kwicks_email.png) no-repeat 12px 0;
}
#email.active
{
    
}

#cv
{
    background: url(images/li_kwicks_cv.png) no-repeat 12px 0;
}
#cv.active
{
    
}

 
 
h1
{
    margin: 0;
    padding: 83px 0 0 29px;
}

h1 a
{
    background: url(images/h1_logo.png) no-repeat 0 0;
    display: block;
    height: 170px;
    width: 330px;
    text-indent: -9000px;
    overflow: hidden;
}

p.hide
{
    text-indent: -9000px;
    overflow: hidden;
}


/*
LINKS
______________________________________________________________*/

a
{
    color: #fff;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

a.visit_site
{
    background: url(images/visit_site_btn.png) no-repeat 0 0;
    font-weight: bold;
    margin: 10px 0 0 0;
    display: block;
    width: 82px;
    height: 25px;
    text-indent: -9000px;
    overflow: hidden;
}

a.visit_site:hover
{
    background: url(images/visit_site_btn.png) no-repeat 0 -25px;
}

a.visit_site:active
{
    background: url(images/visit_site_btn.png) no-repeat 0 -50px;
}

a.backtotop
{
    background: url(images/back_to_top.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
    display: block;
    float: right;
    margin: 12px 30px 0 0;
}

a.backtotop:hover
{
    background: url(images/back_to_top.png) no-repeat 0 -20px;
}




/*
PROJECTS
______________________________________________________________*/

.project
{
    background: url(images/project_frame.gif) no-repeat 30px 0;
    width:880px;
    height: 480px;
    position: relative;
    margin: 40px 0 0 0;
}
 

.static, #slider, #slider2, #slider3, #slider4, #slider5, #slider6, #slider7, #slider8, #slider9, #slider10, #slider11, #slider12, #slider13, #slider14, #slider15, #slider16, #slider17, #slider18, #slider19, #slider20, #slider21, #slider22
{
    position: absolute;
    top: 15px;
    left: 45px;
}

ul, li
{
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider li, #slider2 li, #slider3 li, #slider4 li, #slider5 li, #slider6 li, #slider7 li, #slider8 li, #slider9 li, #slider10 li, #slider11 li, #slider12 li, #slider13 li, #slider14 li, #slider15 li, #slider16 li, #slider17 li, #slider18 li, #slider19 li, #slider20 li, #slider21 li, #slider22 li
{
    width: 820px;
    height: 500px;
    overflow: hidden;
}

p#controls, p#controls2, p#controls3, p#controls4, p#controls5, p#controls6, p#controls7, p#controls8, p#controls9, p#controls10, p#controls11, p#controls12, p#controls13, p#controls14, p#controls15, p#controls16, p#controls17, p#controls18, p#controls19, p#controls20, p#controls21, p#controls22
{
    margin: 0;
    position: relative;
}

#prevBtn, #prevBtn2, #prevBtn3, #prevBtn4, #prevBtn5, #prevBtn6, #prevBtn7, #prevBtn8, #prevBtn9, #prevBtn10, #prevBtn11, #prevBtn12, #prevBtn13, #prevBtn14, #prevBtn15, #prevBtn16, #prevBtn17, #prevBtn18, #prevBtn19, #prevBtn20, #prevBtn21, #prevBtn22, #nextBtn, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6, #nextBtn7, #nextBtn8, #nextBtn9, #nextBtn10, #nextBtn11, #nextBtn12, #nextBtn13, #nextBtn14, #nextBtn15, #nextBtn16, #nextBtn17, #nextBtn18, #nextBtn19, #nextBtn20, #nextBtn21, #nextBtn22
{
    display: block;
    margin: 0;
    overflow: hidden;
    text-indent: -8000px;
    width: 31px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 220px;
}

#nextBtn, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6, #nextBtn7, #nextBtn8, #nextBtn9, #nextBtn10, #nextBtn11, #nextBtn12, #nextBtn13, #nextBtn14, #nextBtn15, #nextBtn16, #nextBtn17, #nextBtn18, #nextBtn19, #nextBtn20, #nextBtn21, #nextBtn22
{
    left: 879px;
}

#prevBtn a, #prevBtn2 a, #prevBtn3 a, #prevBtn4 a, #prevBtn5 a, #prevBtn6 a, #prevBtn7 a, #prevBtn8 a, #prevBtn9 a, #prevBtn10 a, #prevBtn11 a, #prevBtn12 a, #prevBtn13 a, #prevBtn14 a, #prevBtn15 a, #prevBtn16 a, #prevBtn17 a, #prevBtn18 a, #prevBtn19 a, #prevBtn20 a, #prevBtn21 a, #prevBtn22 a, #nextBtn a, #nextBtn2 a, #nextBtn3 a, #nextBtn4 a, #nextBtn5 a, #nextBtn6 a, #nextBtn7 a, #nextBtn8 a, #nextBtn9 a, #nextBtn10 a, #nextBtn11 a, #nextBtn12 a, #nextBtn13 a, #nextBtn14 a, #nextBtn15 a, #nextBtn16 a, #nextBtn17 a, #nextBtn18 a, #nextBtn19 a, #nextBtn20 a, #nextBtn21 a, #nextBtn22 a
{
    display: block;
    width: 31px;
    height: 70px;
}

#prevBtn a, #prevBtn2 a, #prevBtn3 a, #prevBtn4 a, #prevBtn5 a, #prevBtn6 a, #prevBtn7 a, #prevBtn8 a, #prevBtn9 a, #prevBtn10 a, #prevBtn11 a, #prevBtn12 a, #prevBtn13 a, #prevBtn14 a, #prevBtn15 a, #prevBtn16 a, #prevBtn17 a, #prevBtn18 a, #prevBtn19 a, #prevBtn20 a, #prevBtn21 a, #prevBtn22 a
{
    background: url(images/nav_previous_btn.gif) no-repeat 0 0;
}

#prevBtn a:hover, #prevBtn2 a:hover, #prevBtn3 a:hover, #prevBtn4 a:hover, #prevBtn5 a:hover, #prevBtn6 a:hover, #prevBtn7 a:hover, #prevBtn8 a:hover, #prevBtn9 a:hover, #prevBtn10 a:hover, #prevBtn11 a:hover, #prevBtn12 a:hover, #prevBtn13 a:hover, #prevBtn14 a:hover, #prevBtn15 a:hover, #prevBtn16 a:hover, #prevBtn17 a:hover, #prevBtn18 a:hover, #prevBtn19 a:hover, #prevBtn20 a:hover, #prevBtn21 a:hover, #prevBtn22 a:hover
{
    background: url(images/nav_previous_btn.gif) no-repeat 0 -70px;
}

#nextBtn a, #nextBtn2 a, #nextBtn3 a, #nextBtn4 a, #nextBtn5 a, #nextBtn6 a, #nextBtn7 a, #nextBtn8 a, #nextBtn9 a, #nextBtn10 a, #nextBtn11 a, #nextBtn12 a, #nextBtn13 a, #nextBtn14 a, #nextBtn15 a, #nextBtn16 a, #nextBtn17 a, #nextBtn18 a, #nextBtn19 a, #nextBtn20 a, #nextBtn21 a, #nextBtn22 a
{
    background: url(images/nav_next_btn.gif) no-repeat 0 0;
}

#nextBtn a:hover, #nextBtn2 a:hover, #nextBtn3 a:hover, #nextBtn4 a:hover, #nextBtn5 a:hover, #nextBtn6 a:hover, #nextBtn7 a:hover, #nextBtn8 a:hover, #nextBtn9 a:hover, #nextBtn10 a:hover, #nextBtn11 a:hover, #nextBtn12 a:hover, #nextBtn13 a:hover, #nextBtn14 a:hover, #nextBtn15 a:hover, #nextBtn16 a:hover, #nextBtn17 a:hover, #nextBtn18 a:hover, #nextBtn19 a:hover, #nextBtn20 a:hover, #nextBtn21 a:hover, #nextBtn22 a:hover
{
    background: url(images/nav_next_btn.gif) no-repeat 0 -70px;
}


/*
PROJECTS (SMALL)
______________________________________________________________*/

#project_sm_container
{
    height: 450px;
}

.project_sm_left, .project_sm_right
{
    background: url(images/project_frame_small.gif) no-repeat 30px 0;
    width: 365px;
    height: 450px;
    margin: 30px 0 0 0;
    position: relative;
}

.project_sm_left
{
    float: left;
}
.project_sm_right
{
    float: right;
}

 
 
#slider50, #slider51, #slider55
{
    position: absolute;
    top: 15px;
    left: 45px;
}

#slider50 li, #slider51 li, #slider55 li
{
    width: 300px;
    height: 400px;
    overflow: hidden;
}

p#controls50, p#controls51, p#controls55
{
    margin: 0;
    position: relative;
}

#prevBtn50, #prevBtn51,#prevBtn55, #nextBtn50, #nextBtn51, #nextBtn55
{
    display: block;
    margin: 0;
    overflow: hidden;
    text-indent: -8000px;
    width: 31px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 200px;
}

#nextBtn50, #nextBtn51, #nextBtn55
{
    left: 364px;
}

#prevBtn50 a, #prevBtn51 a, #prevBtn55 a, #nextBtn50 a, #nextBtn51 a, #nextBtn55 a
{
    display: block;
    width: 31px;
    height: 70px;
}

#prevBtn50 a, #prevBtn51 a, #prevBtn55 a
{
    background: url(images/nav_previous_btn.gif) no-repeat 0 0;
}

#prevBtn50 a:hover, #prevBtn51 a:hover, #prevBtn55 a:hover
{
    background: url(images/nav_previous_btn.gif) no-repeat 0 -70px;
}

#nextBtn50 a, #nextBtn51 a, #nextBtn55 a
{
    background: url(images/nav_next_btn.gif) no-repeat 0 0;
}

#nextBtn50 a:hover, #nextBtn51 a:hover, #nextBtn55 a:hover
{
    background: url(images/nav_next_btn.gif) no-repeat 0 -70px;
}





#project_mini_container
{
    margin-left:270px;
}

