/*
Created by BOUDGHENE Mohamed
*/


/*////////////////////////////////////////////////// GENERAL /////////////////////////////////////////////////////////*/


body
{ 
	background: #fff; 
	margin:auto;
	font-family: Arial, Verdana, Times, serif; 
}



li {
	list-style-type: none;
}

#site
{
	background: #fff;
	width: 100%;
	margin: auto;  
	height: 100%;
}

#bande_h
{
	background: #f3f3f3;
	width: 100%;
	margin: auto;  
	height: 100%;
	padding-bottom: 50px;
	padding-top: 1px;
	
	color:#525252; 
	font-size: 13px; 
	line-height: 19px; 
	
	text-align: left; 
	
}

#cadre
{
	width: 850px;
	margin: auto;
	height: auto;
}

#styleswitcher
{
    padding: 0;
	margin: 0;
	float: right;
	padding: 0;
	margin: 0;
	padding: 5px 5px 0 0;
	text-decoration: none;
}

#styleswitcher a
{
    
	text-decoration: none;
}


#styleswitcher ul li
{
	display: inline;
	text-align: right;
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-family: Arial, Tahoma, Verdana, Times;
	font-size: 9px;
	color: #7F7F7F;
}

#styleswitcher ul li a
{
    padding: 0;
	text-align: right;
    text-decoration: none;
	display: inline;
	margin: 0;
	text-decoration: none;
}

#styleswitcher img
{
    padding: 0;
	text-align: right;
	margin: 0;
	text-decoration: none;
}


.couleur_menu 
{
     color : #4f00e0; 
}


hr {
height: 1px;
margin: -1px 0;
padding: 0;
color: #c6c6c6;
background-color: #c6c6c6;
border: 0;
width: 75%;
text-align: center;
margin: auto;
}



/*////////////////////////////////////////////////// ENTÊTE /////////////////////////////////////////////////////////*/


#en_tete
{
   width: 850px;
   height: 130px;
   background: url("../../../images/banniere.png") no-repeat center center;
   text-align: center;
   margin: auto;
}





#navbar 
{
   width: 500px;
   margin-top:0px;
   padding: 0 0 0 0;
   height:33px;

   text-align:center; 
   
   margin:auto;
   }




#navbar ul li 
{
    width:130px;
    height:20px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
	margin:auto;
	list-style: none;
	
}


#navbar ul 
{
   
   margin-top:0px;
  margin: auto;
   padding-top:0px; }



#navbar ul li a 
{
   font-family: Tahoma, Verdana, Arial, Times, Sans-Serif;
   font-size: 14px;
   color: #2c2f32;
   padding: 0 15px 0 15px;
   margin: auto;
   text-align: center;
   text-decoration: none;}




/*////////////////////////////////////////////////// CORPS /////////////////////////////////////////////////////////*/




#corps                   /* ----- Corps principal ----- */
{
	width: 100%;
	margin-bottom: 70px;
	margin-top: 70px;
	margin: auto;
}

#portfolio
{
	width: 410px;
	padding-right: 30px;
	border-right: 1px solid #c6c6c6;
	margin-right: 30px;
	float: left;
	height: 239px;
}




#corps h1
{
   color: white;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps p
{
   color: #7f7f7f;
   font-family: Arial, Verdana, "Times New Roman", Times, serif;
   text-align: left;
   font-size: 13px;
   margin-left: 0px;
   line-height: 19px;
   margin-left: 110px; 
   
}

#corps h2
{
   
   
   color: #525252;
   font-size: 13px;
   text-align: left;
   font-weight: bold;
 margin-left: 110px; 
	margin-bottom: 15px;
}


#corps a
{
    color : #4f00e0;
	text-decoration: none;
}



#corps a:hover
{
    text-decoration: underline;
}

.image_potfolio
{
   float: right;

    
  
}


/*////////////////////////////////////////////////// TOUTES LES IMAGES /////////////////////////////////////////////////////////*/

img
{
   border: none;
}


.image_sans_bordure
{
    border : none;
    margin: 0px;
}

.image_gauche
{
   margin: 5px 5px 0 0;
   border : #560000 2px solid;
}


.image_droite
{
   margin: 5px 0 0 5px;
   border : #560000 2px solid;
}








/*////////////////////////////////////////////////// PIED DE PAGE /////////////////////////////////////////////////////////*/

 

* {margin:0;padding:0;} 

#main {
	

}  

#pied_de_page {
	margin: auto;
	height: 50px;
	color: #fff;
	margin-bottom: 0px;

    width: 850px;
   
	padding-top: 15px;
	background: url(../../images/ombre_footer.png) no-repeat center top;
} 
 
   
.auteur
 {
   float: right;
   width: 500px;
   font-family: Arial, Tahoma, Verdana, Arial;
   font-size: 9px;
   margin-top: 5px;
   color: #525252;
   text-align: right;
   }
   
   
   
   
   /*////////////////////////////////////////////////// Diaporama /////////////////////////////////////////////////////////*/
   
   
   	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
	
		}
		
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:850px;
		height:238px;
		overflow:hidden; 
		
		}
		
		span#prevBtn{
		display: inline;
		}
		
		
		
		span#prevBtn a  /* Bouton précédant*/ 
		{
	background: url("http://www.mbs-creation.com/images/precedent.png") no-repeat;
	display:block;
    
	width:90px;
	height:105px;
	float: left;
	margin:auto;
	margin-top: -150px;
	
			
}

	span#prevBtn a:hover  /* Bouton précédant*/ 
		{
	background: url("http://www.mbs-creation.com/images/precedent-hover.png") no-repeat;
		
}

	    span#nextBtn a  /* Bouton suivant*/ 
		{
		
   	background: url("http://www.mbs-creation.com/images/suivant.png") no-repeat;
    float: right;
	display:block;
	width:90px;
	height:105px;
	margin:auto;
	margin-top: -150px;

	
	}	

	    span#nextBtn a:hover  /* Bouton suivant*/ 
		{
		
   	background: url("http://www.mbs-creation.com/images/suivant-hover.png") no-repeat;
   

	
	}	

 	
	
   /*////////////////////////////////////////////////// Menu déroulant slide /////////////////////////////////////////////////////////*/
	
	
#cv 
{
        margin-top: 55px;
		margin-bottom: 30px;
		color: white;
		text-align: center;
		text-transform: uppercase;
}

	
#cv sup
{
        text-transform: none;
}
	
	
	
#cv ul li
{
        display:inline;
		
		
}
	
#cv ul li a
{

    font-family: Arial, Tahoma, Verdana, Arial;
    font-size: 10px;
	text-decoration: none;
	color: #525252;
	padding-right: 10px;
	padding-left: 10px;

}

#cv ul li a:hover
{
	color: #4F00E0;

}

.titres {
	color: #4F00E0;
}


#sous-menu 
{
        margin-top: 55px;
		margin-bottom: 30px;
		color: white;
		text-align: center;
		text-transform: uppercase;
}
	
	
#sous-menu  ul li
{
        display:inline;
		
		
}
	
#sous-menu  ul li a
{
    font-family: Arial, Tahoma, Verdana, Arial;
    font-size: 10px;
	text-decoration: none;
	color: #525252;
	padding-right: 10px;
	padding-left: 10px;
}

#sous-menu  ul li a:hover
{
	text-decoration: underline;
	color: #4F00E0;
}




#menu
{ 
	width: 850px;
	text-transform: uppercase;
	margin:auto;
	margin-top: -25px;
	text-align: right;
	color: #7f7f7f;
	padding-right: 0px;
	background: url(../../images/ombre_footer_haut.png) no-repeat center bottom;
	padding-bottom: 10px;
}
 
.button
{
	
	text-align: center;
	 
	
	display:inline;
    font-family: Arial, Tahoma, Verdana, Arial;
    font-size: 14px;
	
	cursor: pointer;
	width: 100px;
	
}

.button a
{
text-decoration: none;
	color: #000;
	 
   font-family: Arial, Tahoma, Verdana, Arial;
   font-size: 11px;
   padding-top: 5px;
   
   padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
}
 .button a:hover
{
	text-decoration: underline;
	color: #4F00E0;
}


 
 .button:hover
{
	color:  white;
	
	
}
 
 
.button_infos
{
	position: absolute;
	text-align: left;
    font-family: Arial, Tahoma, Verdana, Times;
	margin-top: 10px;
	font-size: 40px;
	color: #525252;
	letter-spacing: 3px;
	margin-left:10%; 
	/margin-left : -300px ; 
	/margin-top : 25px ; 
}





#tableau table
{
  margin: auto;
  border-spacing: 0px;
  border-collapse: collapse;
  line-height: 0; 

}

#tableau img
{
 margin: 0;
 padding: 0;
 border: 0;

}

#tableau table tr
{
  margin: none;
   border-spacing: 0px;
  
   padding: 0;
}


#tableau table tr td
{
  margin: none;
   border-spacing: 0px;
   padding: none;
  
}

#tableau ul
{
margin: none;

  padding: none;
 
}

#tableau ul li
{
   margin: none;
   border-spacing: 0px;
   list-style: none;
   padding: none;
}

#5b
{
     display: block;  
	 background: url("http://www.mbs-creation.com/images/tableau/5b.jpg") no-repeat;
	 width: 123px;
	 height: 53px;
}

#5b img:hover
{
     display: block;  
     background: url("http://www.mbs-creation.com/images/tableau/5c.jpg") no-repeat;
}




#contact-overlay {background-color:#000; cursor:wait;}

/* Container */
#contact-container {width:450px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left;}
#contact-container .contact-content {background-color:#333; color:#ddd; height:40px;}
#contact-container h1 {color:#d76300; margin:0; padding:0 0 6px 12px; font-size:1.2em; text-align:left;}
#contact-container .contact-loading {position:absolute; background:url(../img/contact/loading.gif) no-repeat; z-index:8000; height:55px; width:54px; margin:-14px 0 0 170px; padding:0;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-error {width:92%; font-size:.8em; background:#000; border:2px solid #ccc; font-size:0.8em; font-weight:bold; margin:0 auto; padding:2px;}
#contact-container br {clear:both;}
#contact-container form {padding:0; margin:0;}
#contact-container label {clear:left; display:block; width:100px; float:left; text-align:right; padding-right:4px; font-weight:bold;}
#contact-container .contact-input {font-family:'Trebuchet MS', Verdana, Arial; float:left; padding:2px; margin:2px; background:#eee; border:1px solid #fff; width:300px;}
#contact-container textarea {height:114px; font-size:.9em;}
#contact-container .contact-cc {font-size:.9em; cursor:default;}
#contact-container .contact-top {height:13px; background:url(../img/contact/form_top.gif) no-repeat; padding:0; margin:0;}
#contact-container .contact-bottom {height:13px; background:url(../img/contact/form_bottom.gif) no-repeat; font-size:.7em; text-align:center;}
#contact-container .contact-bottom a,
#contact-container .contact-bottom a:link,
#contact-container .contact-bottom a:active,
#contact-container .contact-bottom a:visited {position:relative; top:-4px; text-decoration:none; color:#666;}
#contact-container .contact-bottom a:hover {color:#888;}
#contact-container .contact-button {margin:4px 0 0 4px; cursor:pointer; height:24px; border:0; font-size:1em; font-weight:bold; color:#fff; text-align:center; vertical-align:middle;}
#contact-container .contact-send {width:50px; background:url(../img/contact/send.png) no-repeat;}
#contact-container .contact-cancel {width:65px; background:url(../img/contact/cancel.png) no-repeat;}
#contact-container a.modalCloseX,
#contact-container a.modalCloseX:link,
#contact-container a.modalCloseX:active,
#contact-container a.modalCloseX:visited {text-decoration:none; font-weight:bold; font-size:1.2em; position:absolute; top:-4px; right:6px; color:#999;}
#contact-container a.modalCloseX:hover {color:#9bb3b3;}