body
{   
    background: #E8E8E8 url('./img/upbg.png') repeat-y;
	width: 820px;
	height: 0px;
	background-position:center;
	margin: auto;
	margin-bottom:0px;
	font-size: 11px;
	font-family: "trebuchet ms", helvetica, sans-serif;
	
}
            

sup
{
	font-size: 0.8em;
	color: #555;
}

a
{
	text-decoration: none;
}

#Out
{
	position: relative;
	width: 800px; 
	border-top:  0px;
	border-bottom: 0px;
	margin: auto;
	background: #fff;

}

#Mid
{
	position: absolute;
	top: 0px;
	left: 0px;
	margin: auto;
	background: #fff;
	width: 800px;
	height: 264px;
	z-index: 1;
}

#In
{
	position: relative;
	padding: 10px 10px 10px 0px;
	z-index: 2;
}

#Banniere
{
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height: 73px;
	color: #555;
}

#Menu
{
	margin: 10px auto 10px 0px;
	width: 800px;
	height: 60px;
}

.date
{
	position: relative; 
	top: 18px; 
	left: 20px;
}

#Intro
{
	margin: 0px auto 10px 0px;
	width: 800px;
	height: 160px;
	font-family: "trebuchet ms", helvetica, sans-serif;
	color: #555;
}

#Intro h2
{
	margin: 0px auto 20px 30px;
	font-size: 20px;
	color: #DA6B29;
}

#Intro p
{
	font-size: 12px;
	margin-top: -10px;
    text-align: justify;
    margin-left: 30px;
    margin-right: 30px;
}

#Centre
{
	margin: 40px auto 10px auto;
	width: 700px;
	height: 480px;
}

#Centre h2
{
	font-size: 16px;
	color: #333333;
}

#Droite
{
	float: right;
}

#Footer
{
	margin: 60px auto -10px auto;
	text-align: center;
	width: 800px;
	height: 80px;
	border-top: 4px solid #ccc;
	border-bottom: 4px solid #ccc;
	background: url('./img/footer.png') repeat-x;
}

#Footer img
{
  margin-top:-8px;
}

#Footer a
{
	color: #f33000;
	text-decoration: none;
	font-weight: bold;
}

#Footer a:hover
{
	color: #ff0000;
}

.bottom_menu
{
	margin-top: 15px;
	margin-bottom: 22px;
}

.copyright
{
	color: #000;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 22px;
}

#PictureBox
{
	margin: 40px auto 0px auto;
}

.pics {  
    height: 632px;  
    width: 428px;  
    padding: 0;  
    margin: 0;  
} 
 
.pics img {  
    padding: 15px;  
    border: 1px solid #ccc;  
    background-color: #eee;  
    width: 600px; 
    height: 396px; 
    top: 0; 
    left: 0;
} 

.pictureBoxBtn
{
	cursor: pointer;
}

#Postit
{
	position: absolute; 
	margin: 100px 0px 0px -150px;
	z-index: 6;
	cursor:move;
}

#PostitClose
{
	color: #f33000; 
	position: absolute; 
	margin: 20px 0px 0px 30px;
	font-size: 1.1em;
	font-weight: bold;
}

#PostitContent
{
	color: #f33000;
	cursor:move;
	position: absolute;
	margin: 50px 0px 0px 30px;
}

#PostitClose:hover
{
	cursor: pointer;
}

#Garantie
{
	position: absolute;
	right: 2px;
	left:710px;
	top:220px;
	bottom: -20px;
	z-index: 6;
}

#Buttons
{
	text-align: center;
}

#Contact
{
	background: #eee;
	border: 2px solid #ccc; 
	margin-left: 2px;
	padding: 10px;
	font-size: 14px;
	color: #555;
}

#Mail
{
	border: none;
	position: absolute;
	margin: -25px 0px 0px 5px;
}

#Phone
{
	margin: 0px 0px -15px -10px;
}

.mini
{
	font-size: 0.6em;
	color: #000;
}

#ProtecSolaire
{
	font-size: 14px; 
	color: #111;
}

#Arrow
{
	position: absolute;
	margin: -55px 0px 0px 110px;
}

#About
{
	position: absolute;
	margin: -13px 0px 0px 6px;
}

.red
{
	color: #f33000;
}

.blue
{
	background: #eee;
	border: 2px solid #ccc; 
	margin-left: 2px;
	padding: 10px;
	font-size: 14px;
	color: #555;
}

.grey
{
	background: #E6E6E6;
	border: 2px solid #ccc; 
	margin-left: 2px;
	padding: 10px;
	font-size: 14px;
	color: #555;
}

.brown
{
	color: #E17100;
}

#Disconnect
{
	position: absolute;
	color: #f33000;
	margin-top: -10px;
	right: 40px;
}

.profil label 
{
	display:block;
	width:150px;
	float:left;
}

.profil select
{
	width: 150px;
}

.profil input
{
	margin-bottom: 3px;
}

#monProfil
{
	height: 370px;
}

.info
{
	font-size: 1.2em;
	margin-left: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	cursor: default;
}

input.normal
{
	/* reinitialise le style classique de l'input */
}

input.error /* classe appliquée aux champs, indiquant une erreur de saisie (couleur de fond rouge) */
{
	background-color: #ed8674;
}

#pic_legal
{
	float:right; 
	margin: -140px -10px 0px 0px;
}

#btnDevis
{
	float:right;
	margin: -20px 20px 0px 0px;
}

#cartmin
{
	display:block;
	float: right;
	margin: -25px 0px 0px 10px;
}

.arrowback
{
	display:block;
	margin: -38px 0px 0px 60px;
	width:20px;
	cursor:pointer;
}

#stepbar
{
	margin-left: 15px;
}

.step
{
	width:148px;
	padding: 0px 10px 0px 10px;
	float:left;
	background: #FF9900;
	border: 2px solid #888; 
	margin-left: 2px;
	font-size: 14px;
	color: #fff;
	opacity: 0.5;
}

.stepActive
{
	width:148px;
	padding: 0px 10px 0px 10px;
	float:left;
	margin-left: 2px;
	background:#00CC33;
	border: 2px solid #888; 
	font-size: 14px;
	color: #fff;
}

.btmModif
{
	float: right; 
	font-size: 13px; 
	margin-top:-18px;
}

#btnCommande
{
	float: right;
	margin: 10px 0px 0px 0px;
}

#codedby
{
	float: right;
	margin: -15px 15px 0px 0px;
}

/* ////////////////////////////////////////////////// mike menu scroll bar ///////////////////////////////////////////////////// */

#mbar h2
{
	color: #DA6B29;
}
/* ////////////////////////////////////////////////// Preview ///////////////////////////////////////////////////// */
.preview
{
	border: 0;
	cursor: default;
	margin-left: 10px;
}

#imgPreviewWithStyles1 {
    z-index: 999;
}

#imgPreviewWithStyles2 {
    background: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 10px;
    z-index: 999;
    border: 1px solid #ccc;
}

/* ////////////////////////////////////////////////// Preview style3 pergola (Denis) ///////////////////////////////////////////////// */
#imgPreviewWithStyles3 {
    background: #e1e1e1;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	padding: 10px;
    z-index: 999;
	border: 1px solid #000;
}

/* ////////////////////////////////////////////////// Tableaux ///////////////////////////////////////////////////// */

table /* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   border: 4px outset #FF6600; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}

th /* Les cellules d'en-tête */
{
   background-color: #FF9933;
   color: white;
   font-size: 16px;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

.res
{
	background-color: #FF9933;
	color: white;
	font-size: 16px;
	border: 1px solid black;
}

td /* Les cellules normales */
{
   font-family: "trebuchet ms", helvetica, sans-serif;
   font-size: 13px;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}


/*////////////////////////////////////////////// Gallerie de produits ////////////////////////////////////////////// */

.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */

#main_image img{ border: 4px solid #fff; }

.gallery{width:450px;margin:0 auto;}
.gallery li{width:90px;height:60px;margin: 10px 5px 0px 0px; border:4px solid #fff;}

/*////////////////////////////////////////////// ToolTip ////////////////////////////////////////////// */

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #FFFFCC;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }


/*////////////////////////////////////////////// POPUP ////////////////////////////////////////////// */


#backgroundPopup{
	display:none;
	position:fixed;
	/*_position:absolute; /* internet explorer 5 & 6 */
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000;
	border:1px solid #cecece;
	z-index:1000;
}

.popup{
	display:none;
	position:fixed;
	/*_position:absolute; /* internet explorer 5 & 6 */
	width:400px;
	height:120px;
	background:#fff;
	border:6px solid #cecece;
	z-index:1001;
	padding:12px;
	font-size:13px;
}

.popup h1{
	text-align:left;
	color:#FF7800;
	font-size:22px;
	font-weight:bold;
	border-bottom:1px dotted #D3D3D3;
	padding-bottom:2px;
	margin: -2px 0px 20px 0px;
}

.popupClose{
	position:absolute;
	font-size:15px;
	line-height:14px;
	top:4px;
	right:6px;
	color:#FF7800;
	font-weight:bold;
	display:block;
}

.popupClose:hover /* quand l'élément est survolé par le curseur */
{
	font-size: 16px;
	color: #FF3000;
	text-decoration: none;
	cursor: pointer;
}

.popup label 
{
	display:block;
	width:150px;
	float:left;
}

.popup select
{
	width:150px;
}

.popup input
{
	margin-bottom: 3px;
}

/* ///////////////////// quand l'élément est survolé par le curseur (Denis) ////////////////////////////////////////////// */

a.viewpic {
  position:relative;
 
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: #e1e1e1;
}
a.viewpic span {display: none;}
  
a:hover.viewpic span {
  display: inline; 
  position: absolute;
  top: -48px;
  left: 260px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic1 {
  position:relative;
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic1 {
  text-decoration: none;
  background: none;
}
a.viewpic1 span {display: none;}

a:hover.viewpic1 span {
 display: inline; 
  position: absolute;
  top: -48px;
  left: 177px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic2 {
  position:relative;
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic2 {
  text-decoration: none;
  background: none;
}
a.viewpic2 span {display: none;}

a:hover.viewpic2 span {
 display: inline; 
  position: absolute;
  top: -48px;
  left: 88px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic3 {
  position:relative;
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic3 {
  text-decoration: none;
  background: none;
}
a.viewpic3 span {display: none;}

a:hover.viewpic3 span {
  display: inline; 
  position: absolute;
  top: -32px;
  left: 160px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic4 {
  position:relative;
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic4 {
  text-decoration: none;
  background: none;
}
a.viewpic4 span {display: none;}

a:hover.viewpic4 span {
  display: inline; 
  position: absolute;
  top: -64px;
  left: 160px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic5 {
  position:relative;
  border-bottom:1px dashed #FF3000;
  text-decoration: none;
}
a:hover.viewpic5 {
  text-decoration: none;
  background: none;
}
a.viewpic5 span {display: none;}

a:hover.viewpic5 span {
 display: inline; 
  position: absolute;
  top: -96px;
  left: 160px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

a.viewpic6 {
  position:relative;
  border-bottom:1px dashed #FF3000;
 }
a:hover.viewpic6 {
  background: none;
}
a.viewpic6 span {display: none;}

a:hover.viewpic6 span {
 display: inline; 
  position: absolute;
  top: -25px;
  left: 200px;
  z-index: 20;
  width:auto;
  padding:10px;
  background: #e1e1e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
   border: 1px solid #000;
}

/* //////////////////////////////////////// CSS DU MENU ///////////////////////////////////////////// */

.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(./img/btn/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left; 
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
/*zoom:1;*/
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none;
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}


#nav-container a{	
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(./img/btn/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(./img/btn/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}


#nav-container div, #nav-container ul{	
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(./img/btn/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}


#nav-container div a, #nav-container ul a{	
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(./img/btn/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

	
#nav-container div a:hover, #nav-container ul a:hover{	
background-color: #FFFFFF;
background: url(./img/btn/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}


#nav-container .item-secondary-title{	
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, "Trebuchet MS", Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(./img/btn/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}


#nav-container .divider-horiz{	
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}


#nav-container .divider-vert{	
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */