/* *************************** 
   Eric Meyer reset 
   ***************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* *************************** 
   hide rule 
   ***************************/

.hide { text-indent: -9999px; }
#res a span { text-indent: -9999px; }

.invisible { visibility: hidden; }

/* *************************** 
   Page Settings
   ***************************/
	
html, body {
    height: 100%;
}


body { 
       font-family: "Trebuchet MS", "ITC Avant Garde Gothic", Verdana, Helvetica,  sans-serif;
       font-size: x-small; /* for IE5/Win */
       voice-family: "\"}\"";
       voice-family: inherit;
	   font-size: small; /* for compliant browsers */ 
	   color: #391F21;
	   
	   
	 }

html>body { font-size: small; /* be nice to Opera */ }
  
/* *************************** 
   Page Structure
   ***************************/
   


#content { float: left;
           width: 600px;
		 
		   }

#sidebar { float: right;
           width: 300px;
		   background: #fff;
		   border-left: 1px dotted #391F21;
		  
		   
		   }
	   
#topwrap , #wrap, #footerwrap { margin: 0 auto;
           padding: 0;
           width: 930px;
		   text-align: left;
		   
		   }

#footer { clear: both;
          float: left;
          background: #391F21 url(../images/testjpg.jpg) top left repeat-x;
		  color: #fff; 
		  width: 100%;
		  margin-top: 25px;
		  min-height: 150px;
                                  padding-bottom: 25px;
		  
		 		  
	   }
	   
/* *************************** 
   Top wrap
   ***************************/

#topwrap {margin-bottom: 5px}
#topwrap ul {text-align: right;
             list-style: none;
			 color: #fff;}	

#topwrap ul li { position: relative;
                 display: inline;}   



/* *************************** 
   content
   ***************************/
   
/* all */

a {

	cursor: url(../images/icons/hand.cur), auto;

}

#content a { color: #EF027E;
                   text-decoration: none;
			  }

#content a:hover,  #content a:focus
{ background: #E4F3F8;
 
 }


                
#logo { float:left;
       margin-bottom: 25px; }
	   
h1 { float: right; 
     width: 300px;
     font-size: 150%;
	 font-family: Georgia,"Times New Roman",serif;
	 }

h2 { margin: 15px 0 5px 0;
     height: 18px;
	 font-size: 132%;
	 font-weight: bold;
	  border-bottom: 1px dotted #583003;
	
	}

h3 { font-family: "Trebuchet MS", "ITC Avant Garde Gothic", Verdana, Helvetica,  sans-serif;
              font-size: 150%;
             
}

h4 { font-family: "Trebuchet MS", "ITC Avant Garde Gothic", Verdana, Helvetica,  sans-serif;
      font-size: 130%;
      margin: 15px 0 5px 0;
             
}


#pres{ width: 600px;
       padding-bottom: 35px;
	   padding-top: 10px;
     background: transparent url(../images/border.gif) bottom right no-repeat;
 
	 font-family: Georgia,"Times New Roman",serif;
      font-size: 136%;
	 font-weight: normal;
	 line-height: 1.5em;
	 letter-spacing:1px;
	 word-spacing:1px;
	 margin: 30px 0 20px 0;
	 padding-right: 10px;
	 }

strong { font-weight: bold;
               color: #583003;
               background: #F5FBFF;
			   }

#content p { font-size: 110%;
             line-height: 110%;
             
			}
			
/* navigation */
#bg  { background:  url(../images/branding.png) top left no-repeat;}

#navlayer { clear: both;
            
			 width: 600px ;
             }
			 
 #nav a { 
 		   color: #fff;
		   text-decoration: none;
		   font-family: "ITC Lubalin Graph LT Book", "Times New Roman";
		   padding-right: 50px;
		   border-bottom: none;
                   background: none;
		   
		   }

 #nav a:hover,  #nav a:focus { 

                   background: none;
		   
		   }
		   
#who { margin-left: -40px;
		width: 150px;
		background: #391F21;
		}

 #who a { margin-left: 40px;
		   } 
		   
#what { margin-left: -20px;
		width: 160px;
		background: #391F21;
		} 
		
#what a { margin-left: 20px;
		   } 
		   		
#why { margin-left: -12px;
		width: 160px;
		background: #391F21;
		}

#why a { margin-left: 12px;
		   } 

#work{ margin-left: -50px;
		width: 180px;
		background: #391F21;
		}

#work a { margin-left: 50px;
		   } 

#blog{ margin-left: -7px;   
		width: 140px;
		background: #391F21;
		}

#blog a { margin-left: 7px;
		   } 			
#nav li {padding: 2px 0;
         margin-bottom: 4px;}
		 
#nav li:hover, #nav li:focus, #nav li.home  { background: #EF027E;}

/* home page */
#touch {  background: url(../images/getintouch.png) top left no-repeat; }

/* home form */
#form-leftcol { float: left; width: 240px; }
#form-rightcol { float: right; width: 360px; }

#form { margin-top: 20px;}

#form label, #form input  {
width: 200px;
display: block;
}

#form label { font-weight: bold; }



#form input#name, #form input#email, #form input#message  {

margin-bottom: 15px;
margin-top: 3px;
width: 200px;
padding: 2px;
font-size: 100%;
color: #583003;
background: #E4F3F8;
border: 1px solid #BEECFF;

}

#form input.submit {
font-size: 90%;
border-top: 1px solid #5c5d5f;
border-right: 1px solid #121212;
border-bottom: 1px solid #121212;
border-left: 1px solid #5c5d5f;
padding: 2px;
width: 100px;
background-color: #391F21;
color: #F5FBFF;
}

#form textarea {

width: 350px;
margin-bottom: 10px;
margin-top: 3px;
padding: 2px;
font-size: 100%;
color: #583003;
font-family: inherit;
background: #E4F3F8;
border: 1px solid #BEECFF;
}


#form  a {margin-left: 8px;}



.validation-advice {
font-style: italic;
background: #fff url(../images/lock.gif) no-repeat left center;
padding-left: 22px;
margin: 10px 0;
} 

/* who page */
#webelieve{  background: url(../images/who.png) top left no-repeat; }

#wholist li  { 
font-size: 115%;
margin-bottom: 15px;
margin-top: 15px;
}
/* what page */
#lovetodo {  background: url(../images/what.png) top left no-repeat; }



#ltdlist dt { 
font-size: 125%;
font-weight: bold;
margin-bottom: 4px;
margin-top: 20px;
}


/* why page */
#benefits {  background: url(../images/why.png) top left no-repeat; }

/* work page */
#portfolio {  background: url(../images/portfolio.png) top left no-repeat; }



.projet:hover, .projet:focus{  width: 600px;
           background: #F5FBFF;
		   float: left;
		   clear: left;
		   }

.projet img { margin: 10px 0;
              border: 1px solid #BEECFF; }

.l-col { float: left;
         width: 300px;
         
		 }

.r-col { float: right;
          margin-left: 20px;
         width: 270px;
		 
		 }




.r-col dt { float: left;	
	        clear: left;
			font-weight: bold;
			color: #391F21;
			padding: 5px 10px 5px 0;  }

.r-col dd { 
			padding: 5px 0 5px 0;  }

 #workit li
 {
 float: left;
 margin:  5px;

 }
 
.one {
 margin-right: 20px;
 }

#content .return a,  #content .return a:hover,  #content .return a:focus { font-size: 60%;
               font-family: verdana, tahoma, serif;
               
              float: right;
              margin-right: 15px;
              position: relative;
              bottom: 15px;
padding: 1px;
}

/* blog page */
#wblog {  background: url(../images/ourblog.png) top left no-repeat; }

/* *************************** 
   sidebar
   ***************************/

#sidebar  dt { padding-top: 5px; }

#sidebar dl, #sidebar  dd, #sidebar  dt, #sidebar  ul, #sidebar li {padding-left: 7px;
                                padding-bottom: 4px; } /* set padding on inner elements from sidebar, to avoid box model hacks */

#side-top {   background: transparent url(../images/border.gif) bottom right no-repeat;
                 font-family: "Trebuchet MS", "ITC Avant Garde Gothic", Verdana, Helvetica,  sans-serif;
                 color: #583003;
                 font-size: 110%;
                 font-style: italic;
                 line-height: 115%;
		margin: 0 0 20px 14px;
		padding: 5px 20px 30px 5px;
                

			}
                        

#side-top h2 {  
                      font-size: 120%;
			   width: 280px;
			   border: none;
			   }
#side-top span { font-style: normal;
font-weight: bold;}

#sidebar dt a { 
									color: #281604 ;
									text-decoration: none;
									
									padding-left: 8px;
									letter-spacing: 2px;
			                       }



#sidebar dt a:hover, #sidebar dt a:focus  { 
											color: #281604;
											background: #F5FBFF;			
										  }


#sidebar a[rel*="external"], #r-col a[rel*="external"] {
padding-left: 20px;
background: transparent url(../images/icons/fi_external.gif) no-repeat center left;
color: #1D377A;
text-decoration: none;
border-bottom: none;

}
									
#sidebar dd {   color: #583003;
			text-decoration: none;
			line-height: 16px;
			font-family: georgia, sans-serif;
			margin-bottom: 11px;
			padding-top: 5px;
			background: url(../images/grad.png) top left repeat-x;			
			}
			
#sidebar p {margin-top: 5px;}

#sidebar dd a { 
            color: #1D377A;
			text-decoration: none;
			}

#sidebar dd a:hover, #sidebar dd a:focus { text-decoration: underline; }

 img { 
	       vertical-align: middle;
	       }
		   
#projects { background: url(../images/work.png) top left no-repeat;
		  }

#resources { clear: both;
             background: url(../images/resources.png) top left no-repeat;
		   }

#rss  {  background: url(../images/rss.png) top left no-repeat; }
#bookmark {  background: url(../images/bookmark.png) top left no-repeat; }
#clients {  background: url(../images/clients.png) top left no-repeat; }
						 
/* *************************** 
   footer wrap
   ***************************/
 
#footerwrap { padding-top: 70px;
              color: #666;
			
			  font-size: 85%;
			  line-height: 16px;}



#footerwrap li  { display: inline;
                  padding-right: 10px;}
				  
#footerwrap a { text-decoration: none;
                border-bottom: 1px dotted #666;
				color: #D4D4D4;
				}


/* *************************** 
   sifr
   ***************************/
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
}