/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 
**************************************************************************
Copyright 2010 POINT WEB
type : screen
categorie : structure site
Auteur : SERCO POINTWEB
site : JARDIN SUBLIME
**************************************************************************/

/*fix bug navigateur*/
.myhr{ clear:both; height:0; overflow:hidden; visibility:hidden; }

/************* DETECTION JS **************/
#jserror{ background:#FFFFCC; border:#FF0000; color:#FF0000; padding: 10px; margin: 0 0 10px 0; float:left; }
#jserror dt{ font-weight:bold; }

*{margin:0; padding:0}
body{ background:#4e4e4e url(../images/bg_site.gif) repeat-x top left ; font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{ display:none}
a{ text-decoration:none; outline:none;}
a:hover{ text-decoration:underline}
#accessibilite { display:none}
img{ border:0}


/*----------------------------------------------------< STRUCTURE >---------------------------------------------------*/

#global{width:994px; margin:0 auto;}
#header{width:551px; height:712px; float:left}

#menu{ width:162px; height:149px; padding:100px 0 0 40px;}
#menu ul{  list-style-type:none;}
#menu li{ color:#fff; height:23px; background:url(../images/puce.png) no-repeat left 8px; font-size:13px; border-bottom:#fff dotted 1px; width:185px; padding:0 0 3px 0}
#menu li a{ color:#fff; height:23px; display:block; padding:3px 0 0 20px}
#menu li a:hover{ text-decoration:none; width:161px; height:23px;}


#headerTop{ height:249px; background:url(../images/bg_headerTop.gif) no-repeat top left; width:551px; position:relative}
#headerBottom{ height:412px; width:551px; background:url(../images/bg_headerBottom.gif) no-repeat top left}

#animVent{ width:351px; height:345px; position:absolute; top:0; left:201px; z-index:5}
#diapoSwf{ width:435px; height:412px; float:right; background: url(../images/bg_diapo.gif) no-repeat top left; overflow:hidden}

#copyright{ height:51px; width:551px; background: url(../images/bg_copyright.gif) no-repeat}
#copyright p{ color:#666; font-size:11px; padding:7px 0 0 33px;}
#copyright a{color:#666}

#wrapper{ float:left; width:443px}
#content{ background:url(../images/bg_content.gif) no-repeat top left; width:443px; height:504px; padding:50px 0 0 0}
#content p{ font-size:11px; color:#999; line-height:16px}
h2{  color:#b1c100; font-size:14px; margin-bottom:5px}

#coordonnees{ width:443px; height:158px; background:url(../images/bg_coordonnees.gif) no-repeat top left}
#coordonnees p{ font-size:12px; color:#000; padding:55px 0 0 110px}
#coordonnees a{color:#000}

/*----------------------------------------------------< Accueil - presentation >---------------------------------------------------*/

.pasdeslider{ margin:20px 0 20px 0}
.blocList{ float:left; margin:0 10px 30px 0; width:200px}
span{ color:#ccc}

/*----------------------------------------------------< AVANT APRES >--------------------------------------------*/

.blocAvantApres{ border:#666 solid 1px; padding:10px; width:380px; margin:20px 0 10px 0; float:left; background:#2a2a2a}
.blocAvantApres dt{ color:#ccc; font-size:12px; margin-bottom:10px}
.blocAvantApres dd.visuel{ float:left; width:150px; margin-right:15px; position:relative}
.blocAvantApres dd.description{ float:left;color:#999; font-size:11px; width:210px; overflow:hidden; height:118px; margin-top:5px}

.zoom{ position:absolute; top:0; left:0; z-index:5; width:45px; height:15px}


/*---------------------------------------------------------- pagination ---------------------------------------------------------*/

.pagination{ text-align:left; clear:both}
.pagination ul{ list-style-type:none}
.pagination ul li{ display:inline; color:#999; font-size:11px}
.pagination ul li a{color:#999; font-size:11px}
.pagination ul li a.activ{color:#999; font-size:11px; font-weight:bold; text-decoration:underline}

/*----------------------------------------------------< Info >--------------------------------------------*/

.blocInfos{ border:#666 solid 1px; padding:10px; width:380px; margin:20px 0 15px 0; float:left; background:#2a2a2a}
.blocInfos dt{ color:#ccc; font-size:12px; margin-bottom:10px}
.blocInfos dd.description{ float:left;color:#999; font-size:11px; overflow:hidden; height:150px; margin-bottom:10px; width:370px}
.blocInfos dd.descriptionOff{ float:left;color:#999; font-size:11px;margin-bottom:10px; width:370px}
a.vert{ color:#9caa00;}


P.titreMdm{ color:#9caa00; font-size:16px; margin:20px 0 5px 0}
p.decriptionMdm{ color:#fff; font-size:12px; line-height:18px; margin-bottom:10px}

.img1{ border:#666 solid 1px;}

/*-------------------------------< Contact >---------------------------------------*/
.left{float:left;}
.right{float:right}
.clear{clear:both}
#formContact{ font-size:11px; color:#fff; text-align:left; width:400px}
#formContact div{margin:5px 0}
#formContact legend{display:none}
#formContact fieldset{border:none}
#formContact label{ 
	text-align:left;
	display:block
}
#formContact input{
	border:#666 1px solid;
	color:#333;
	font-size:95%;
	width:190px
}
#formContact select{
	border:#666 1px solid;
	color:#333;
	font-size:95%;
	width:190px
}
#formContact textarea{	
	border:#666 1px solid;
	color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width:190px;
	font-size:1.1em;
}
#formContact input:focus, textarea:focus{background:#f1f1f1}
#formContact input.monSubmit{background:#9caa00;cursor:pointer; height:22px; border:none; font-weight:bold; color:#fff; font-size:14px; width:190px}
#formContact input.monSubmit:hover{background:#666; cursor:pointer}
.marge{padding-left:15px; float:left; width:250px}