body {
	margin:0;
	padding:0;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;

	
}

#templatemo_container {
	width: 800px;
	margin: auto;
	background: #9cc7fc;
	background:url(images/pattern3.png) repeat;
	border-radius: 10px 10px 10px 10px;
	
	
}






/*------------ Header --------------- */

#templatemo_header {
	height: 250px;
	background: #ffffff url(images/banner.gif) no-repeat right bottom;
	
	
}

#templatemo_header:hover {
	height: 250px;
	background: #ffffff url(images/banner2.png) no-repeat right bottom;
}

#templatemo_site_title {
	padding-top: 130px;
	padding-left: 10px;
	font-size: 50px;
	color:#187df8;
}

#templatemo_site_title span{
	font-weight: 200;
	color:#313030;
}

#templatemo_site_slogan {
	padding-top: 10px;
	padding-left: 90px;
	font-size: 12px;
	color:#313030;
}
/* ---------------------------------- */

/*------------- Menu ------------------*/
.templatemo_menu{
	margin: 0px;
	padding: 0px;
	padding-top : 9px;
	float: left;
	width: 800px;
	background: #313030;
	background:url(images/pattern.png) repeat;
	border-bottom: solid 3px white;
	
	
	

	

}

.templatemo_menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
	
	
	
}


.templatemo_menu li{
	display: inline;
	
}

 
.templatemo_menu li a{
	padding-bottom: 10px;
	float: left;
	font: 16px arial;
	text-align: center;
	text-decoration: none;
	color: #fff;
	width: 160px;
	

}


 
.templatemo_menu li a:visited{
	color: #fff;
}


.templatemo_menu li a:hover{
	color: white;
  text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
  text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
  
  
  transition:All 0.2s ease;
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
-o-transition:All 0.2s ease;
transform: rotate(4deg) scale(1) skew(1deg) translate(5px);
-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(5px);
-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(5px);
-o-transform: rotate(4deg) scale(1) skew(1deg) translate(5px);
-ms-transform: rotate(4deg) scale(1) skew(1deg) translate(5px);
}
.classname:hover{
transform: rotate(0deg) scale(1) skew(1deg) translate(4px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(4px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(4px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(4px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(4px);
  
  
  
}



/* ----------------- end of menu----------------*/

/* ----------------- Content ----------------------- */



.slideshow {  
   width: 350px;  
   height: 270px;  
   overflow: hidden;  
  border-radius: 5px 5px 5px 5px; 
  box-shadow:5px 5px 20px black;
 
}  
.slideshow ul {  
    /* 4 images donc 4 x 100% */  
   width: 400%;  
   height: 200px;  
   padding:0; margin:0;  
   list-style: none;  
   
   
}  
.slideshow li {  
   float: left;  
}  





#templatemo_content {
	width: 800px;
	background:  #fec631;
	
	
	
	
	
	
}

#templatemo_content a :hover {
color: #B59F30;
}

	
#templatemo_left_column {
	float: left;
	width: 510px;
	padding: 20px;
	min-height: 220px;
	background: #9cc7fc;
	background:url(images/pattern3.png) repeat;
	border-radius: 10px 10px 10px 10px;
	
	
	
}

#templatemo_right_column {
	float: left;
	width: 210px;
	padding: 20px;
	min-height: 220px;
	background: #9cc7fc;
	background:url(images/pattern3.png) repeat;
	border-radius: 10px 10px 10px 10px;
	
}



/* ---------------- section box --------------- */


.section_box {
	width: 510px;
	background: #ffc;
	color: #000000;
	box-shadow:8px 8px 10px black;
	
	

	
	
}

.section_box .subtitle{
	padding: 0px 0px 0px 15px;
	font-size: 1.4em;
	color: #187df8;	
	
}

.section_box .text{
	padding: 0px 15px 5px 15px;
	font-size: 1em;
	color: #000000;	
	
}


.sectionbox_roundtop { 
	height: 9px;
	width : 0px;
	
	
	
}

.sectionbox_roundbottom { 
	height: 9px;
	width : 0px;

	
}





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



/* ------- Left Column Section Box2 ------------- */


.section_box2 {
	position : fixed;
	margin-top: 0px;
	margin-left : 27px;
	padding: 10px 15px 5px 15px;
	background: #212121;
	color: #cccc99;
	box-shadow:0px 0px 4px 4px gray inset;
	box-shadow:8px 8px 10px black;
	border : solid;
	border-radius : 15px;
	
	-webkit-animation: cssAnimation 2s 1 ease;
-moz-animation: cssAnimation 2s 1 ease;
-o-animation: cssAnimation 2s 1 ease;

-webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 -ms-animation-fill-mode: forwards;
 -o-animation-fill-mode: forwards;
 animation-fill-mode: forwards;

 

}




@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px,109px); }


}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px,109px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px,109px); }
}




.section_box2 a{
	position : fixed;
	background: url(images/linkindicator.gif) no-repeat center left;
	text-decoration: none;
	padding-left: 20px;
	color: #cccc99;
}

.section_box2_subtitle {
	padding-bottom: 16px;
	margin-bottom: 5px;
	font-size: 1.3em;
	color:#ffffff;
	background: url(images/section2_title_bg.gif) no-repeat bottom left;
}


/*--------------- end of left column section box ------------ */


.text_area {
	margin: 10px;
	
}

.title {
	height: 37px;
	width: 430px;
	color:#9cc7fc;
	padding-top: 18px;
	padding-left: 70px;
	font-size: 1.5em;	
	background: url(images/titlebackground.gif) left bottom no-repeat;
}

.text_area a, .section_box a{
	color: #4a98fa;
	text-decoration: none;
}

img.corner {
   width: 0px;
   height: 9px;
   border: none;
 
}




/* -------- Footer --------- */

#templatemo_footer {
	clear: left;
	width: 800px;
	background: #212121;
	color: #ffffff;
	background:url(images/pattern.png) repeat;
	border-radius: 0px 0px 10px 10px;
	border-top: solid 3px white;
}
#templatemo_footer a {
	color: #b6a169;
}

#templatemo_footer .roundbottom {
	height: 9px;
	background: url(images/br.gif) no-repeat bottom right; 
}

#copyright {
	padding-top: 10px;
	text-align:center;
}

/* --------- end of footer --------------*/


		
.noiretblanc img:hover
{
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
	
	
	
	
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	

border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px; 
-o-border-radius: 10px 10px 10px 10px; 
}


.avatar {
background-image : url(images/avatar.png);
margin-left : auto;
margin-right: auto;
width : 150px;
height : 150px;
background-repeat : no-repeat;

transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);

}

.avatar:hover {
background-image : url(images/avatar.png);
margin-left : auto;
margin-right: auto;
width : 150px;
height : 150px;
background-repeat : no-repeat;

transform: rotate(0deg) scale(1) skew(0deg) translate(41px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(41px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(41px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(41px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(41px);
}