/* c o l o r s

background.........#F9FBF7
body text..........#636660
border-dark........#C9D1BE
border-light.......#E9EFE1
h2.................#454841
h2 span............#868B7E
h3.................#9FA596
h4.................#555850
img link green.....#9bc254  */




/* r e s e t */

body,div,p,h1,h2,h3,h4,h5,h6,ul,li,form,fieldset,input,textarea{
margin:0;
padding:0;
}



/* s e t u p */

body {
background-color: #F9FBF7;
color: #636660;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1em;
}

p {
background-color: transparent;
font-size: .8em;
line-height: 1.43em;
margin-bottom: 10px;
}

ul {
list-style: none;
}

a,
a:link,
a:visited{
color: #9bc254;
font-weight: bold;
text-decoration: none;
}
a:hover{
color: #fff;
background-color: #9bc254;
font-weight: bold;
}
a:active{
color: #fff;
font-weight: bold;
background-color: #9bc254;
outline: 0;
}
a:focus{
color: #fff;
background-color: #9bc254;
font-weight: bold;
outline: 0;
}

acronym{
border-bottom: 1px dotted #A7A7A7;
cursor: crosshair;
}
acronym:hover{
border-bottom: 1px dashed #A7A7A7;
}

h1{}
h2{
color: #454841;
font-family: "Lucida Grande", Arial, Sans-Serif;
font-size: 1.3em;
font-weight: bold;
margin-left: -1px;
padding-bottom: 2px;
}
h2 span{
color:#868B7E;
}
h3{
border-bottom: 8px solid #C9D1BE;
color:#9FA596;
font-family: "lucida grande", arial, sans-serif;
font-size: .9em;
font-weight: bold;
margin-bottom: 16px;
padding-bottom: 8px;
}
h4{
color: #555850;
font-family: "lucida grande", arial, sans-serif;
font-size: .9em;
font-weight: bold;
margin-bottom: 1px;
}

h5{
border-bottom: 0px solid #E9EFE2;
color: #636660;
font-family: "Helvetica Neue", arial, sans-serif;
font-size: .6em;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 2px;
margin-bottom: 0px;
margin-top: 20px;
}


#wrapper{
margin: 65px auto 0 auto;
position: relative;
width: 700px;
}
br.clear{
clear: both;
}




/* b a n n e r */

#branding{
background: transparent url(./i/page_banner_back.jpg) repeat-x 0 0;
height: 139px;
position: relative;
width: 100%;
}
#branding h1 span{
display: none;
}
#imprint{
background: transparent url(./i/page_logo3.gif) no-repeat left bottom;
height:79px;
left: 12px;
margin: 0 auto;
position: relative;
width: 700px;
}



/* n a v */

#mainNav{
left: 20px;
margin: 0 auto;
position: relative;
top: -49px;
width: 700px;
}
#mainNav li{
float: left;
}
#mainNav li a,
#mainNav li a:link,
#mainNav li a:visited{
background: transparent url(./i/nav_bevel.jpg) no-repeat 0 0;
color: #5A6351;
display: block;
font-family: "lucida grande","trebuchet MS", arial, sans-serif;
font-size: .6em;
font-weight: bold;
height: 38px;
padding: 13px 0 0 0;
text-transform: capitalize;
text-align: center;
width: 133px;
}
#mainNav li a:hover{
background: transparent url(./i/nav_over.jpg) no-repeat 0 0;
color: #659F35;
}
#mainNav li a:active{
color: #fff;
outline: 0;
}
#mainNav li a:focus{
background: transparent url(./i/nav_over.jpg) no-repeat 0 0;
color: #659F35;
outline:0;
}
#mainNav li #navEnd{
background: transparent url(./i/nav_bevel.jpg) no-repeat 0 0;
display: block;
height: 38px;
width: 2px;
}
body#home a#navHome,
body#video a#navVideo,
body#web a#navWeb,
body#about a#navAbout,
body#contact a#navContact{
background: transparent url(./i/nav_over.jpg) no-repeat 0 0;
color: #659F35;
font-weight: bold;
}




/* c o n t e n t */

#bodyContent{
display: inline;
float: left;
margin-left: 23px;
width: 350px;
}
#bodyProjects{
border: 3px solid #E9EFE1;
border-bottom-width: 10px;
border-top: none;
display: inline;
float: left;
margin: 0 0 0 60px;
padding: 0;
width: 250px;
}
#bodyProjects h2{
background: #E9EFE1;
border-bottom: 3px solid #E9EFE1;
font-size: 1em;
margin: 0;
padding: 20px 0px 3px 15px;
text-align: left;
width: 238px;
}
#bodyProjects .folio{
border-bottom: 3px solid #E4E7E0;
font-size: .65em;
line-height: 1.3em;
padding: 15px;
margin:0;
}
#bodyProjects .folio span{
display: block;
font-weight: bold;
}
#bodyProjects .folio a img{
border: 10px solid #E4E7E0;
float: left;
margin: 0 0 10px 0;
}
#bodyProjects .folio a:hover img{
border: 10px solid #9bc254;
}



/* home */

#home #bodyProjects{
padding-bottom: 15px;
}
#home #bodyProjects img{
border: 10px solid #E4E7E0;
float: left;
margin: 15px 0px 0 15px;
}
#home #bodyProjects a:hover img{
border: 10px solid #9bc254;
}
#home #bodyProjects a .preview{
display:none;
left: -5px;
position: absolute;
top: -15px;
z-index: 1000;
}
#home #bodyProjects a:hover .preview{
background-color: #fff;
border: 10px solid #C9D1BE;
display:block;
height: 216px;
width: 387px;
}
#home #bodyProjects a:hover .preview.summary{
border: 10px solid #C9D1BE;
border-top: none;
background-color: #E9EFE1;
color: #636660;
display:block;
font-size: .7em;
font-weight: bold;
height: auto;
line-height: 1.4em;
left: 10px;
padding: 18px 20px 18px 20px;
position: absolute;
text-align: justify;
top: 236px;
width: 347px;
}
#home #bodyProjects a:hover .preview.summary .ingredients{
background-color: #fff;
border: 1px solid #C9D1BE;
display: block;
margin-top: 14px;
padding: 4px 4px 4px 4px;
text-align: center;
}
#home #bodyProjects a:hover .preview.summary .ingredients em{
font-weight: normal;
}

#services{
display:none;
margin: 12px 0 7px 0;
}
.service{
margin-bottom: 9px;
}


/* web */

#web #bodyProjects a .preview{
display:none;
left: 10px;
position: absolute;
top: 0px;
z-index: 1000;
}
#web #bodyProjects a:hover .preview{
background: #fff;
border: 10px solid #C9D1BE;
display:block;
height: 326px;
width: 387px;
}

#web .inline{
bottom: 4px;
left: -11px;
position: relative;
margin: 10px 0;
}


/* video */

#video #bodyProjects #reel{
float: left;
height: 240px;
margin-bottom: 0px;
width:250px;
}
.clients{
margin-bottom: 4px;
}


/* about */

#about #bodyContent{
display: block;
float: none;
margin: 0 auto;
text-align: left;
width: 440px;
}
#about #bodyContent img{
border: 10px solid #E9EFE1;
}
#about #bodyContent #dive{
display: inline;
float: left;
height: 157px;
margin: 4px 15px 0px 0;
width: 100px;
}
#about #bodyContent #bike{
display: inline;
float: right;
height: 170px;
margin: 4px 3px 0 15px;
width: 125px;
}

#about #bodyContent ul{
background-color: transparent;
font-size: .7em;
line-height: 1.4em;
margin-bottom: 10px;
}

/* contact */

#contactForm{
margin: 0 auto 0 auto;
padding-top: 0px;
width: 400px;
}
form{
background-color: #F4F7F0;
border: 3px solid #E9EFE1;
margin-top: 10px;
padding: 30px 30px 10px 24px;
}
#contactForm p{
margin:0;
}
input{
background-color: #fff;
border: 2px solid #E9EFE1;
color: #818181;
font-size: 1em;
font-weight: bold;
height: 16px;
margin-bottom: 10px;
padding: 5px;
width: 340px;
}
textarea{
background-color: #fff;
border: 2px solid #E9EFE1;
color: #818181;
font-family: "lucida grande", arial, sans-serif;
font-size: 1.2em;
height: 185px;
padding: 5px;
width: 340px;
}
.formLabel{
font-size: .7em;
text-transform: capitalize;
}
#contactFormButton{
background-color: #c9d1be;
border: 1px solid #A9AF9F;
color: #454841;
font-size: 1.0em;
font-weight: bold;
height: 50px;
margin-top: 10px;
width: 352px;
cursor: pointer;
}
#contactFormButton:hover{
background-color: #9bc254;
border: 1px solid #A9AF9F;
color: #fff;
cursor: pointer;
}
input:focus,
textarea:focus,
#contactFormButton:focus{
border: 2px solid #C9D1BE;
}



/* f o o t e r */

#copyright{
background: transparent url(./i/footer2.jpg) repeat-x left bottom; 
clear: both;
color: #505959;
float: none;
font-size: .7em;
margin-top: 150px;
padding: 50px 0 20px 0;
text-align: center;
width: 100%;
}