@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Oleo+Script);

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	background-color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
padding: 0;
margin: 0;
}

#logo {
z-index: 10;
position: fixed;
top: 60%;
right: 0;
width: 60px;
height: 118px;
}



/* ____________________________________ accordion */
.accordionWrapper{display:inline-block; background-color:#fff; overflow:hidden; padding-bottom: 30px;}
.accordionWrapper img{vertical-align:top; border:0; margin:0; padding:0}
.accordionWrapper div{display:inline; float:left; margin:auto;}
.accordionWrapper div.title{cursor:pointer;}
.accordionWrapper div.title:hover {color:#F00;}

.accordionWrapper div.content{display:none;}

#accordion {width: 100%; margin: 0 auto;}
.set{}
.set1{ }
.set2{}
.set3{}
.title {
font-family: 'Oleo Script', cursive;
font-size: 2.2em;
line-height: 1.5em;
margin:  0;
padding: 0;
}

.moodTitle {
padding: 50px 0 0 120px;
}
.portfolioTitle {
padding: 0 0 0 120px;
}

.contactTitle {
padding:  0 0 0 120px;
}
.moodContent {
	height: 440px;
	width: 100%;
	text-align: left;
	padding: 30px 0 0 120px;
	background-color: #f3f3f3;
	
	background-repeat: no-repeat;
}
.moodContent a {

color:#F00;
}

.portfolioContent {
	min-width: 900px;
	text-align: left;
	padding: 10px 0 30px 120px;
	background-color: #99CCCC;
}

.contactContent {
	height: 440px;
	width: 100%;
	text-align: left;
	padding: 20px 0 0 170px;
	background-color: #99CC66
}

/* ____________________________________ mood */
.legend , .technic  {
	margin: 0;
	padding: 3px 5px;
	line-height: 2em;
}
.legend {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FFF;
}
.technic {
		color: #FFF;
}
/* ____________________________________ portfolio */

.sousTitre {
	font-family: 'Oleo Script', cursive;
	font-size: 1.7em;
	color: #555;
}


#blocClients {
float: left;
width: 180px;
margin: 0 0 auto 0;
padding: 0 20px 0 0;
text-align: right;
}

#clients  li{
list-style: none;
display: inline;
color: #666;
}

#clients li a{
	text-decoration:none;
	color: #000;
	padding: 1px 3px;
	margin: 0;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#clients li a:hover{
	background-color: #FFEC00;
}

#clients li .on{
background-color: #FFEC00;
color: #000;
}

#tags {
	float: left;
	width: 600px;
	margin: 10px 0 auto 0;
	padding: 0 20px 0 0;
	color: #777;
	font-weight: bold;
}


#tags li{
list-style: none;
display: inline;
font-weight: normal;
}
#tags li:after{
content: " ";
}


#tags li a{
	text-decoration:none;
	color: #fff;
	padding: 1px 3px;
	margin: 0;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#tags li a:hover{
	background-color: #FFEC00;
	color: #444;
}

#tags li .on{
background-color: #FFEC00;
color: #000;
}

#blocProjets {
float: left;
width: 75%;
margin: 0 0 auto 0;
padding: 0 0 0 20px;
}

#projets {
list-style-type:none;
margin: 20px 0 0 0;
padding: 0;
}
#projets  li {
display:inline ;
margin: 0 10px 20px 0;
padding: 0;
}

#projets li h1 {  /* nom projet */
display: inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.1em;
line-height : 1.1em;
color: #000;
margin: 0;
padding: 1px 2px 3px 3px; 
background-color: #FFEC00;
}

#projets li h2 { /* nom client */
display: inline;
line-height : 1.5em;
font-weight: normal;
color: #666;
margin: 0 ;
padding: 0 3px 2px 3px; 
background-color: #FFEC00;
}

#projets li h3 { /* description projet */
	font-weight: normal;
	color: #000;
	margin: 1px 0 0 0;
	padding: 2px 0 0 3px;
	background-color: #fff;
}

#projets li h4 { /* date projet */
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666;
margin: 0;
padding: 0 0 3px 3px; 
background-color: #fff;
}

#projets  li a  {
text-decoration: none;
cursor:pointer;
}

.cleaner { /* cleaner */
padding: 0;
margin: 0;
height: 0;
clear: both;
}

/* __________ RollOver projects */
.boxgrid {  
    width: 200px;  
    height: 100px;  
    float:left;  
    overflow: hidden;  
    position: relative;
}  

.boxgrid img{  
    position: absolute;  
    top: 0;  
    left: 0;
}  
.boxcaption{  
    float: left;  
    position: absolute;
	top: 72px;  /* start position */
	padding: 0;  
    height: 100px;  
    width: 100%;  
    opacity: 0.95;  
    /* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; 
    }  

/* __________ contact form */

.contactContent .sousTitre {
	color: #FFF;
	}

form {margin:0;padding:0;}
	
form fieldset { margin:0;
				position:relative;
				display:block;
				padding: 0 0 0 50px;
				border: 0; }
fieldset p	{
	padding: 0;
	margin: 0;
	  }
label { 
width : 60px;
text-align: right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
		float:left;
		margin: 0 15px 0 0;
		padding: 7px 0 0 0; }
		
		
.erreur { 
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-weight: bold;
display: none;

}

input.text-input , textarea {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	margin: 4px 4px 10px 4px;
	padding:2px 3px;
	color:#000;
	border: 0;
	border-bottom: #fff solid 1px;
	background-color: #99CC66;
	}
	
textarea {
width: 400px;
height: 150px;
overflow: auto; /* hack pour retirer scrollbar sous IE */
}	
	
input:focus, textarea:focus {
background-color: #fff;
}				 

.focus {	/* + javascript = hack pour couleur de fond sous IE */
background-color: #fff; 
}
.normal { 	/* + javascript = hack pour couleur de fond sous IE */
background-color: #99CC66;
}	 

input.text-input {
width: 200px;
}

#antispam {
width: 30px;
}	



input.button			{
						width: 62px;
						height: 42px;
						padding: 0;
                        margin:0 0 0 410px;
						background-color: transparent;
						background-image: url(../img/send.png);
						border: #FFFFFF solid 1px;}


input.button:hover		{ background-color:#FFF;cursor:pointer; }