/* @file main.css
 * General styles for Fradec
 */


/* ****************************************************************************
 * General page structure
 * ************************************************************************* */
  
html, body  {
	font-family:	'Tahoma', 'Verdana', sans-serif;
  font-size: small;
  color: black;  		
	background-color :#008A00;
	background-image : url(../img/fond.png);
	background-repeat : repeat-x;
	padding: 0px;
	margin: 0px;

}

#container {
	position: relative;
	max-width: 800px; 
	margin: auto;
	background: white;
	border-top: 0px;
	padding: 1px 5px 30px 5px;
	border-left: 2px solid white;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
 
	margin-bottom: 5px;
	overflow: hidden; /*needed to avoid horizontal scrollbars that appear in mozilla with margin: auto at 800x600*/
	
}

h1{ 
  font-size : medium;
  font-weight: bold;
  text-align : left;
  color :green; 
  text-transform: uppercase;
  padding : 10px 0;  
}
h2{ 
  font-size : small;
  font-weight: bold;
  text-align : left;
  color :green; 
  text-transform: uppercase;  
}
p{
  margin : 10px 0;
} 
img{
  margin : 5px 0;
  max-width:100%; 
  height:auto;
}

div.main {
	background-color:	transparent ;
  padding-left : 30px;
  padding-right : 30px;
  padding-top : 10px;
  margin : auto;
}

a.lien_ds_flux {
 text-decoration : none;
 color : black;
}
/* ****************************************************************************
 * Header area
 * ************************************************************************* */
 
 div.top {
	background-color:	white;
	background-repeat : no-repeat;
	background-position : left center;
	height: 120px;  
	text-align: center;
	color: #525655; 
	padding : 20px;
	width:90%;
}

div.top img{
 float : left;
 border : 0;
}

div.top span{
 font-size : x-large;
 font-weight: bold;

}

/* ****************************************************************************
 * Header navigation and tabs
 * ************************************************************************* */

.menu {
  background-color:	#DFF0DF;
  height: 30px;
	padding: 5px 0;	
} 

.menu_hori {
	margin : 0;
  padding:	5px 0;
  list-style-type: none;
  background-color:	#DFF0DF;
} 

.menu_hori li {
  float: left;
  margin-left: 20px;
  background-color:	#DFF0DF; 
}
.menu_hori li:hover {
  background-color:	#DFF0DF; 
}

.menu_hori li a  {
  /*border: 1px solid #DFF0DF; */
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;  
  color: #009400;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 20px;
  text-align: center;
  text-transform: uppercase;
  text-decoration : none;
  border-left: 1px solid #DFF0DF;
}

.menu_hori li a:visited{
  color: #009400;
}
  
 .menu_hori li a:hover {
  background: transparent;
  border: 1px solid #009400;
  color: green;
  
}

 .menu_hori li a.lienActif  {
  background: #009400;
  border: 1px solid #009400;
  color: white;
}

 /* ****************************************************************************
 * Pages  accueil
 * ************************************************************************* */
#accueil {
  text-align : justify;
  }
  
#applications {
 float : left; 
  width : 55%;
 }

#applications h2{
 text-align : left;
 } 
 
 #images-accueil {
  text-align : justify;
  margin-top : 100px;
 } 
 
 #postit {
  float : right;
  background-image: url(../img/post-it-2.png);
  background-repeat : no-repeat;
  width : 179px;
  height : 179px; 
   margin-left: 10px; 
   padding-left: 10px; 
   padding-right: 10px; 
  padding-top: 10px;
  font-family : 'comic sans ms','arial';
   font-weight: bold;
  text-align : center;
 }
   
/* ****************************************************************************
 * Pages 
 * ************************************************************************* */
 
.contact  {
 background : transparent;
 margin-left : 50px;
 text-align : left;
 font-weight: bold;
 float :left;  
  }
  
.contact td{
  padding : 5px;
  } 
  
.contact a{
  text-decoration : none;
  color : black;
} 
 /* ****************************************************************************
 * Page Produits 
 * ************************************************************************* */

#zone-produits{
  /*background-image: url(../img/produits-transp2.png);
  background-repeat : repeat;*/
  width : 100%;
  margin: auto;
  
}
  
#liste-produits {
  margin : auto; 
  text-align : left;
  background : transparent;
  /*color : #1E4525; */
 }
 
#liste-produits td {
  width : 50%;
  padding-bottom : 8px;    
  padding-right : 5px;    
 }
 

#liste-produits a {
  text-decoration : none;
  color : black;    
 }
 
.titre-tableau-produits {
  font-weight: bold;
  padding-bottom : 15px;
}


 /* ****************************************************************************
 * Page Marques
 * ************************************************************************* */

ul.liste-marques {
  float : left;
  width: 200px;
  font-family : arial; 
  font-size : small;
  font-weight : bold;
  padding-bottom: 20px;
  padding-left: 10px;
}

ul.liste-marques li{
 list-style:none;
}
 
ul.liste-marques a{
 text-decoration : none;
 color : black;
}

#image-marques {
 margin-left : 50px;
}
/* ****************************************************************************
 * Page Mentions
 * ************************************************************************* */

#mentions p,h2{
 margin : 10px 5px 20px 5px;
 text-align : justify;
 font-family : times, 'Trebuchet MS',arial;
 font-size : small;
 }
 
/* ****************************************************************************
 * footer
 * ************************************************************************* */

#footer {
	background: transparent;
	text-align : center;
	font-family : times, 'Trebuchet MS',arial;
  font-size : small;
}

#footer a{
  text-decoration : none;
  color : black;
} 

/*******************************************************************************
 ** responsive
 ******************************************************************************/ 

/* large smartphones ----------- */
@media  (max-width: 768px) {

div.top span {
 font-size : medium;
 font-weight: bold;
}

#applications {
  width : 100%;
 }

.top a img{
  max-width:50%; 
}

#postit{
 background-image: url("../img/post-it-3.png");
  max-width:40%;
  font-size : x-small;
  height : 150px;
}

.carre-flottant{
 max-width:48%;
}

}