/* -----------------------------------------------------------------------

Okapi Creative Barcelona: Main Site Basic CSS

version: 4.0
date: April 2009
autjor: Tarquin Rees
email: tarquin@okapicreative.com
web: www.okapicreative.com

----------------------------------------------------------------------- */	

body {
	
margin: 0;
padding: 0;
background-color: #fff;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; 
font-weight: 300;
color: #516064;
}
	
/* =Main Layout Divs
----------------------------------------------------------------------- */	
	
#wrapper {

margin: 60px auto 20px auto;
padding: 0;
width: 900px;
}

#content_main, #content_side {

margin: 0px 0px 0px 0px;
padding: 0;
width: 630px;
height: 425px;
float: right;
border-right: 20px solid #fff;
border-bottom: 20px solid #fff;
}

#content_side {

margin: 0px 0px 0px 0px;
width: 250px;
background: url(http://www.okapicreative.com/images_okapi/logo.gif) top left no-repeat;
border: none;
}


/* =Typography
----------------------------------------------------------------------- */		

h1 {

margin: 40px 0px 20px 0px;
font-size: 17px; 
font-weight: 600; 
color: #336699;
}

p {

margin: 10px 30px 15px 0px;
font-size: 14px; 
line-height: 19px;
}

p a {

text-decoration: none;
color: #336699;
font-weight: 700;
}

p a:hover {

color: #f5467a;
}	

p.contact {

margin: 0px 0px 8px 0px;
color: #f5467a;
font-size: 15px; 
}
	
p.contact span {

color: #f5467a;
font-weight: 700;
}	

p.sitelink a, p.contact a {

color: #f5467a;
}

p.sitelink a:hover, p.contact a:hover {

color: #336699;
}

/* =Images
----------------------------------------------------------------------- */		
	
img.pic {
	
background-color: #fff;
border-color: #f1f1f1;
border-top: solid #eee 1px;
border-left: solid #eee 1px;
border-style: solid;
border-width: 1px;
padding: 5px;
}

img.hello {

border: none;
}


/* =jQuery Specific
----------------------------------------------------------------------- */		

#homepic { height: 420px; width: 600px; }

#portfolio { height: 100px; width: 600px; }

#slider {

width: 600px;
margin: 0 auto;
position: relative;
}

.scroll {

height: 450px;
width: 620px;
overflow: hidden;
overflow-x: hidden;
position: relative;
clear: left;
}

.scrollContainer div.panel {

padding-right: 20px;
padding-bottom: 10px;
width: 600px;
}

.scrollButtons {

position: absolute;
top: 440px;
cursor: pointer;
display: none;
}

.scrollButtons.left {

left: 1px;
}

.scrollButtons.right {
right: 570px;
}

.hide {

display: none;
}

#portnav { 

margin: 250px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
}

#portnav a { 

border: 1px solid #ccc; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; 
font-size: 12px; 
background: #fff; 
color: #ccc;
text-decoration: none; 
margin: 0px 5px 0px 0px; 
padding: 3px 5px 3px 5px;  
}

#portnav a:hover { 
color: #333;
background: #fff;
border: 1px solid #999; 
}

#portnav a.activeSlide { 

color: #333;
background: #fff;
border: 1px solid #999; 
}

#portnav a:focus { 
outline: none; 
}


/* Lists
----------------------------------------------------------------------- */		

ul {

margin: 0px 0px 0px 0px;
font-size: 13px; 
}

ul li {

padding: 1px;
}


/* =Main Menu
----------------------------------------------------------------------- */		

#menucont {

margin-top: 38px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; 
font-weight: 100;
color: #c7c4bf;
}

#menu {

margin: -3px 0px 0px 3px;
padding: 0;
clear: left;
list-style-type: none;
}

#menu li {

margin: 0px -2px 0px 0px;
display: inline;
font-size: 20px;
}

#menu li a {

text-decoration: none;
color: #c7c4bf;
font-weight: 100;
font-size: 20px;
}

#menu li a:hover {

color: #333;
}