@import "reset.css";

.clear
{
	clear: both;	
}

/* ========================================================================= */
/* UNIVERSAL STYLES                                                          */
/* ========================================================================= */

.clear{clear:both;} 
.clearer { clear: both;  display: block;  overflow: hidden;  visibility:hidden;  width: 0;  height: 0; } 
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }   
* html .clearfix {height: 1%;} 
img {border:none;}
hr {height:5px; border:0; border-bottom:2px solid #efefef; margin: 0 0 20px 0; clear:both;}
a,a:visited, a:focus {color:#0d729b; text-decoration:none; outline:none;}
a:hover, a:active {color:#333;}
h1, h2, h3, h4{ color: #0d729b; margin: 0 0 1em 0;}
h1{font-size:16px; margin: 0 0 1em 0;}
h2{ font-size:14px; }
h3{ font-size:12px; }
p{color:#666; margin-bottom:15px; line-height: 1.5em; font-size:11px;}
ul, ol{margin:1em 0;}
li{margin:0 0 0 2em; line-height: 1.5em;}
ul li{ list-style-type:none;}

/* ========================================================================= */
/* MAIN STYLES                                                               */
/* ========================================================================= */

* { font-family: Lucida Grande, Helvetica, Arial, sans-serif; font-size: 12px; }
html, body { line-height: 150%;  color: #777777; font-size:12px; margin:0; padding:0;
}
#home{background: #fff url(../images/design/headerBg.jpg) repeat-x;}
#header{width:980px;margin:0 auto;height: 93px;}
#logo {background: url(../images/design/logo.png) no-repeat;height: 60px;width: 300px; display: block; margin: 3px 0 0 50px;float:left;}

/* ========================================================================= */
/* NAV STYLES                                                                */
/* ========================================================================= */

#menu { width: 980px; margin: 0 auto;}
/*#navClearer{ clear:right;display: block;  overflow: hidden;  visibility:hidden;  width: 0;  height: 0; }*/
#nav {list-style: none; float: right; margin: 0; clear: both; margin-bottom: 15px; margin-top: 4px}
#nav ul {margin: 0;}
#nav li {margin: 0 0 0 10px;float: left; list-style:none;}
#nav #mainNavActive a,#nav a:hover{background: #0d729b;color:#fff;}
#nav a {height:24px;line-height: 24px; font-size: 10px;font-weight: bold;display: block;text-transform: uppercase;text-decoration: none;padding: 0 10px;}


.link_portfolio a:hover,
.current_portfolio a 
{
	background-color: #0D729B;
	color: #FFF;
}

.link_portfolio a:hover,
.current_presentation a 
{
	background-color: #0D729B;
	color: #FFF;
}

.link_portfolio a:hover,
.current_partenaires a 
{
	background-color: #0D729B;
	color: #FFF;
}

.link_portfolio a:hover,
.current_templates a 
{
	background-color: #0D729B;
	color: #FFF;
}

.link_portfolio a:hover,
.current_contact a 
{
	background-color: #0D729B;
	color: #FFF;
}

/* ========================================================================= */
/* HOMEPAGE STYLES                                                           */
/* ========================================================================= */

#tagline{background: url(tagline.jpg) no-repeat;width:980px;height:96px;display:block;text-indent:-9999px;margin: 0 auto 20px;}
#homeCopy{width:980px;margin:0 auto;}
#homeContentWrapper{background: url(taglineBg.jpg) repeat-x;margin: 20px 0;text-align: justify;}
#homepageAbout{float:left;width: 500px;}
#services,#hireMe{float:left;width:200px;margin: 0 0 0 30px;}
#services li{list-style:none;margin: 0 0 0 0;}

.content 
{
	width: 950px; 
	clear: both; 
	min-height: 400px; 
	margin: auto;
	padding-left: 30px;
	padding-top: 30px;
	position:relative; 
}

/* ========================================================================= */
/* SLIDER STYLES                                                             */
/* ========================================================================= */

.coda-slider-wrapper { width: 980px; clear: both; margin:20px auto 0; }
.coda-slider { width: 606px; height:700px; margin: 0 0 0 10px; position:relative; float:left;} 
.panel{width: 606px; height:700px; }
.coda-nav ul{ clear: both; display: block; margin:0;padding:0;width:360px;}
#topProject, #topProject a{height:85px;}
.coda-nav {width:360px; height:700px; float: left; } /*overflow: auto;*/
.coda-nav ul li {width:344px; height:87px; list-style:none; margin:0; padding:0; display:block; line-height:1!important; border-top:1px solid #ccc;}
.coda-nav ul li a {display:block; width:344px; height:87px; text-decoration: none} 
.coda-nav img{ height: 66px; float: left;margin: 8px 0 0 8px; border:1px solid #666;}
.projectTitle{float: left;font-size: 12px;margin: 10px 0 0 10px;font-weight: bold;  }
.projectDesc{float: left;font-size: 10px;margin: 2px 0 10px 10px;color:#666;width: 200px;line-height: 14px; text-transform:lowercase;}
.coda-nav ul li a:active, .coda-nav ul li a:focus { outline:0; }  
.coda-nav ul li a.current, .coda-nav ul li a:hover { background: #efefef; color:#666; }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left; height:700px; position:relative;}

.coda-slider .panel-container { position: relative; }

#desc_title {
	display: block;
	margin-top: 20px; 
	font-weight: bold;
	color: #0D729B;
	font-size: 14px;
}

#desc_detail {
	display: block;
	margin-top: 10px; 
}

#desc_url
{
	display: block;
	margin-top: 20px; 
	color: #0D729B;
}

#details { width: 564px; height:320px; float:left; margin: 0 0 0 0px; padding: 10px; position: absolute; top: 350px; left: 0px; color:#000;} 
#detail h1 {font-size:16px; margin: 0;}
#detail p {color:#666; margin-bottom:5px; font-size:12px;}

div.scrollholder
{
    position: relative;
    width: 362px; height: 700px;
    overflow: auto;
    z-index: 1;
}

div.scroll
{
    position: absolute;
    left: 0; top: 0;
    width: 98%;
    z-index: 2;
}

/* <Scroll> */

div.track
{
    position: relative;
    float:right;
    top: 0; 
    width: 8px; height: 700px;
    font-size: 0;
    z-index: 3;
    background: #333335;
}

div.drag_bar
{
    position: absolute;
    width: 8px; height: 100px;
    cursor: auto;
    z-index: 4;
    background: #63CFDE;
}  

#arrow
{
	position: relative;
	width: 2px;
	height: 720px;	
	float: left;
}

#arrow_top
{
	position: absolute;
	top: -10px;
	left: -8px;
}

#arrow_bottom
{
	position: absolute;
	bottom: 10px;
	left: -8px;
}

/* ========================================================================= */
/* FOOTER STYLES                                                             */
/* ========================================================================= */
.content-page
{
	width: 980px;
	min-height: 500px;
	margin: 0 auto;	
	margin-bottom: 15px;
	margin-top: 15px;
}

#footer
{
	width: 980px;
	height: 40px;
	margin: 0 auto;
	/*background-color: #E8E8E8;*/
	background: #fff url(../images/design/footerBg.jpg) repeat-x;
	position: relative;
	padding-top: 5px;
	margin-top: 18px; 
	opacity:0.8;
}

#footer p 
{
	padding-top: 5px;
	color:#FFF;
	text-align:center;
	font-size: 11px;
}

#footer span 
{
	margin-right: 15px;
}

#footer a 
{
	color:#FFF;
	text-decoration:none;
}

#footer a:hover
{
	color:#178ef0;
	text-decoration:none;
}
/* ========================================================================= */
/* INTERIOR STYLES                                                           */
/* ========================================================================= */

#contentWrapper{width:980px;margin: 0 auto; background: url(contentWrapper.png) repeat-y;}
#content{width: 630px; padding:20px 0 0 40px; float:left;}
#content p{text-align: justify; font-size:12px; }
#bio{margin: 0 0 10px 20px; padding: 10px; background:#efefef; border:1px solid #ccc;}
#sideBar{float:right; width: 230px; margin: 20px 40px 20px 0; padding: 0 0 0 20px; border-left:1px solid #ccc; }
#sideBar h2{border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; background:#efefef; padding: 4px 10px; margin: 10px 0 10px 0;}
#sideBar p span{font-size:12px; font-weight:bold; color:#0d729b;}
#sideBar p a{color:#666;}
#sideBar p{margin: 0 0 5px 10px;}
#sideBar #h2Top{margin: 0 0 10px 0}
#contentWrapper h1{float:left; margin:20px 0 0 40px;}
#contentWrapper h3{font-size:12px; float:right; color:#666; margin:20px 40px 0 0;}
#contentWrapper hr{margin: 0 40px 0 40px;}

/* ========================================================================= */
/* PORTFOLIO STYLES                                                          */
/* ========================================================================= */

.portfolio #content{width: 920px; float:none; }
.portfolio #content h1{float:left; margin:0}
.portfolio #content h3{font-size:12px; float:right; color:#666; margin:0 18px 0 0;}
.portfolio #content hr{margin: 0 18px 0 0;}
.clientContainer{width:193px; height: 180px; float:left; background:#efefef; border:1px solid #ccc; padding: 10px; margin: 0 14px 14px 0; list-style:none;}
.clientContainer h2 a{font-size:12px; font-weight:bold; color:#0d729b;  }
.clientContainer h2{margin: 0 0 2px 0; }
.clientContainer a{font-size: 10px; color:#666; }
.clientContainer p{ line-height: 14px; text-align:left!important;}
.clientContainer:hover{background:#dfdfdf;}
#portItemContent{float:left; width: 640px; margin: 20px 20px 0 0;}
.clientDescription{margin: 10px 0 10px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding: 10px 0;}
#recentClients{float:right; width: 215px; margin: 20px 20px 0 0;}
#recentClients .clientContainer{margin: 0 0 10px 0; height: 105px;}
.clientInfoTitle{font-weight:bold; color:#0d729b;}
#clientInfo p{font-size: 12px; margin: 0 0 5px 0;}
#clientInfo a{color: #666;}
#portReturn{color:#666; margin: 0 0 0 5px; font-size:11px;}
#portReturn:hover{color:#0d729b}
#addItemControl{clear:both; margin: 20px 0;}
  #addItemControl a{color:#ffffff;  background:#1582b0; width:120px; display:block; padding: 5px 0; text-align:center; }
.divEditControls{margin: 10px 0;}