/* CSS Reset */
* { margin:0; padding:0; }
body {
  background:#0084b4 url(img/body_bg.jpg) repeat-x 0 0;
}
#container {
  width:1024px;
  margin:0 auto;
}
#header {
  height:125px;
  width:960px;
  margin:60px auto 0 auto; /* 90 a l'origine */
}

#content {
  width:960px;
  margin:0px auto 0 auto;
}


#slidercontainer {
  width:940px;
  margin:0px auto 20px auto;
}

#header h1 {
  display:block;
  float:left;
  width:320px;
  height:125px;
  background:url(img/logo.jpg) no-repeat 0 0;
  text-indent:-10000px;
}
#header h1 a {
  display:block;
  width:100%;
  height:100%;
}
#header h1 a:hover {
  background:url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover {
  display: block;
  width: 100%;
  height:100%;
  background:#ccc url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover a {
  display: block;
  width: 100%;
  height:100%;
}
#header ul {
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
}
#header ul li {
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
}
#home {
  width:166px;
}
#about {
  width:147px;
}
#work {
  width:159px;
}
#contact {
  width:168px;
}
#header ul li a {
  display:block;
  width:100%;
  height:100%;
}
#home a:hover {
  background:url(img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
  background:url(img/menu.jpg) no-repeat -166px -125px;
}
#work a:hover {
  background:url(img/menu.jpg) no-repeat -313px -125px;
}
#contact a:hover {
  background:url(img/menu.jpg) no-repeat -472px -125px;
}

.contenttop{
	background:url(img/main_top.jpg) no-repeat 1px 0;
	  width:960px;
  height:20px;
  
}

.maincontent{
	background:url(img/main_repeat.jpg) repeat-y 1px 0;
	  width:960px;
 
  
}


.contentbottom{
	background:url(img/main_bottom.jpg) no-repeat 1px 0;
	  width:960px;
	height:23px;
 
}

.writable{
margin:0px 0 0 40px;
padding:20px 0 0 0px;

}


p#featuredText {
  display:block;
  position:relative;
  float:left;
  width:100%;
  height:400px;
  text-indent:-10000px;
  background: white;
}
a#learnMoreButton {
  display:block;
  width:280px;
  height:60px;
  background:url(img/learnmore.jpg) no-repeat 0 0;
  margin:200px 0 0 132px;
}
a:hover#learnMoreButton {
  background-position:0 -60px;
}
#monitor {
  position:absolute;
  top:0;
  right:0;
}
.box {
  width:320px;
  height:185px;
  float:left;
}
.box h2 {
  font:bold 20px Verdana, Geneva, sans-serif;
  color:#0f83bc;
  text-transform:uppercase;
  margin:35px 0 0 140px;
}

.book h2 {
  font:bold 17px Verdana, Geneva, sans-serif;
  color:#0f83bc;
  text-transform:uppercase;
  margin:35px 0 0 140px;
}

.box p {
  font:normal 12px/18px Verdana, Geneva, sans-serif;
  color:#0c3b4a;
  margin:0 30px 0 140px;
}
.client {
	background:url(img/box1.jpg) no-repeat 0 0;
}
.work {
	background:url(img/box2.jpg) no-repeat 0 0;
}
.book {
	background:url(img/box3.jpg) no-repeat 0 0;
}
#leftCol {
  width:630px;
  float:left;
  margin:20px 0 0 10px;
}
#leftCol h2 {
  font:bold 20px/24px Verdana, Geneva, sans-serif;
  color:#094e64;
}



#leftCol p {
  font:normal 14px/20px Arial, Helvetica, sans-serif;
  color:#094e64;
  margin-top:10px;
}
#newsletter {
  position:relative;
  width:320px;
  height:110px;
  float:left;
  background:url(img/newsletter_bg.jpg) no-repeat 0 0;
  margin:20px 0 50px 0;
}
#newsletter label {
  font:bold 16px Verdana, Geneva, sans-serif;
  letter-spacing:-1px;
  margin-top:26px;
  width:100%;
  display:block;
  color:#fff;
  text-align:center;
}
#emailInput {
  position:absolute;
  top:51px;
  left:5px;
  width:200px;
  margin:0px 0 0 30px;
  font:bold 20px Verdana, Geneva, sans-serif;
  color:#999;
  border:0;
  background-color:transparent;
  border:none;
}
#submitButton {
  position:absolute;
  top:43px;
  right:27px;
  width:50px;
  height:40px;
  margin-top:5px;
  padding:0;
}
#footer {
  clear:both;
  width:938px;
  border-top:1px dashed #094e64;
  margin:20px auto 0 auto;
}
#footer p {
  margin:15px 0;
  text-align:center;
  font:bold 12px Arial, Helvetica, sans-serif;
  color:#094e64;
}

#main p {
 font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        margin-top: .5em; color: #666;
		word-spacing: 3px;
		line-height:20px;
		text-align: justify;

}

h1 {
  font:bold 20px Verdana, Geneva, sans-serif;
  color:#0f83bc;
  text-transform:uppercase;
  margin:15 0 0 0px;

}

h2 {
  font:bold 14px/18px Verdana, Geneva, sans-serif;
  color:#094e64;
  margin:10 0 0 0px;
}
#main h1{
   font-family:Verdana, Geneva, sans-serif;
	color:#0f83bc;
	font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 5px;
}

#main h2{
   font-family:Verdana, Geneva, sans-serif;
	color:#0f83bc;
	font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 2px; margin-top: 4px; letter-spacing:2px; font-size: 1em;
}

#main h3{
   font-family:Verdana, Geneva, sans-serif;
	color:#0f83bc;
	text-transform: uppercase; font-weight: 100; margin-bottom: 2px; margin-top: 2px; letter-spacing:1px; font-size: 0.9em;
}


.pstart{
 font-family:Verdana, Geneva, sans-serif;
	font-size: .8em;
        font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px; 
	}

A:link {text-decoration: none; color:#004291; font-family:Verdana, Geneva, sans-serif; font-size: 0.8em;}
A:visited {text-decoration: none; color:#004291; font-family:Verdana, Geneva, sans-serif; font-size: 0.8em;}
A:active {text-decoration: none; font-family:Verdana, Geneva, sans-serif; font-size: 0.8em;}
A:hover {text-decoration: underline; color:#78CD39; font-family:Verdana, Geneva, sans-serif; font-size: 0.8em;}

#main li {
 font-family: Arial, sans-serif;
 font-size: 100%;
 color: black;
 list-style-type: none;
 background: url(img/puce.png) no-repeat 0 0.32em;
 padding-left: 15px;
} 


/* COLONNE CONTENT */

 /* A simple Browser Reset */
            
            *{
              margin:0;
              padding:0;
            }
            
             /* General Layout
            ________________________________*/
            
            #page{
              width:960px;
              position:relative;
              margin:0 auto;
            }
            
            /* Layout is inspired by the holy Grail, 
            except that the contentcol is wrapped around
            a floating div that pull the sidebars.
            */
            
            #contentcol {
              float:left;
              width:100%;
              margin-right:-100%;
            }
            .column {
              padding:20px;
            	float:left;
            }
            /* -- compensating the padding on sidebars --
            multiply the padding of columns by 2, and remove
            it from the width of each sidebar.
            */
            
            #right{width:680px;}   /* 150 - (15x2) */
            
            /* You can easily change the layout proportions
            by just changing the matching values. For example,
            to have a 100px left sidebar, I just have to change
            all the 220 to 100 (and the -220 to -100).
            */
            
            #contentcol-inner {
              float:none;
              margin-right: 720px;
height:100%;			  /* RIGHT Sidebar width */
			  
            }                       
            .right{                 
            	float:right;          
              width: 720px;         /* RIGHT Sidebar width */
			  
			  
            }
            #headercol{
              clear:both;
              height: 20px;
            }
			#footercol{
              clear:both;
              height: 23px;
            }
            
            /* Equal Height Columns 
            ________________________________*/
            
            /* The columns are created using empty DIV that have to be 
            inside the main wrapper (#page) and should be positionned 
            relative. Each DIV have the same width as its corresponding 
            columns (done by using class), and by postionning them 
            absolutelly (bottom) and giving them a height of 100%, the 
            DIVs fill the entire space that the columns should fill.
            As the actual contentcol is not positionned absolutelly, the 
            footercol still behave normally and is pushed down by it. Last 
            but not least, we have to set the z-index of the real 
            contentcol to 2 to bring it back on top of the columns.
            */
            
            .bg{
              position:absolute;
              bottom:0;
              height:100%;
            }
            #bgright{right:0;}
            #bgcenter{
              right:0;
              width:100%;
            }
            #contentcol, #right, #headercol, #footercol{
              position:relative;
              z-index:2;
            }
            
            /* COLORS */
            #headercol {background:url(img/main_top.jpg) no-repeat 1px 0;}
			#footercol {background:url(img/main_bottom.jpg) no-repeat 1px 0;}
            #bgright{background:url(img/rightcol.jpg) repeat-y 1px 0;}
            #bgcenter{background:url(img/leftcol.jpg) repeat-y 1px 0;}
			
			/*colonne content end */