/*  Standup-guide.fr : responsive css
* Bleu : #2040B0  - Rouge: #B02140 - Gris-background: #e2e4eb ou #f9f9fc- GrisBorder: #999 - GrisText: #333333 GrisMenu: #333
*
*/

body, div, li, form {margin:0; padding:0;}
body { 	font-family: 'Lucida grande', Helvetica, sans-serif; font-size: 14px; color:#555; 	
	background-color: #F9F9F9;	background-size: cover; }

div, p , h1 , h2 , h3 , h4, hr , table , ul , ol  { margin: 0 0 10px 0; padding: 0; }
li {margin-bottom:8px}

a img { border: none; }
a { color: #2040B0; text-decoration: none ; }
a:hover { color: #B02140; text-decoration: underline; }
 
h1, .h1_like {font-size:32px; letter-spacing:-1px; font-weight:normal; color:#2040B0;}
h2, h2_like {font-size:20px; letter-spacing:-1px; font-weight:normal; color:#333333;}
h3, h3_like {font-size:17px; font-weight:normal; color:#333333;}
h1 a , .h1_like a ,  h2 a {text-decoration: none;}


ul {list-style: none ;}
ol li {margin-left:15px !important;}

table {border:0; border-collapse:collapse;}
tr {vertical-align:top;}
td {padding:5px;}
td.nopadleft {padding-left:0 ;}
caption {font-weight:bold}

hr.clear {clear:both; visibility: hidden; margin:0}
hr.clear4mobile {display:none}
.imglink {cursor: pointer; }

.only_mobile_inline , .only_mobile , .print {display:none;}

.message , .erreur { font-weight: bold; background-color:yellow; border: 1px solid #2040B0; border-left:16px solid #B02140; 
	padding:5px 5px 5px 10px; margin-bottom:10px;}
.message {font-size:18px;}
.erreur {font-size:24px;}
.bouton_mail {padding: 5px 4% ; margin:5px 0; background-color:white ; border-radius:10px ; font-weight: bold;}
a.bouton { padding: 2% 4% ; margin:2%; background-color:#eee ; border-radius:20px ;}
a.bouton:hover {background-color:#999; }


.em {font-style: italic;}
.titreliste {margin-bottom:0;}
.enavant {font-size:16px;  background-color:yellow; padding:2%}
.strong {font-size:16px;  font-weight: bold; }
.strong2 {font-size:16px;  color:#2040B0; }
.big2 {font-size:30px;  font-weight: normal; letter-spacing:-1px; color:#ccc }
.small {font-size:11px}
.legende {font-style: italic ; color: #999}
p.citation { background-color:#eee ; color:#333 ; font-size:16px ; font-style: italic; 
	padding: 10px 5% ; }

.bandeau {background-color:#333; color:white;  }
.bandeau a {color:white; text-decoration:none; }
.bandeau a:hover {background-color:#999;  }
h2.bandeau {padding-left:5px; margin:0;}

p.itw {font-size:14px; color:#2040B0; margin-top:10px;}
p.itw-r {padding-left:10px; }

ul.pour li , li.pour {list-style: inside url('/pub/css/emo1.gif');}
ul.contre li , li.contre {list-style: inside url('/pub/css/emo3.gif');}
ul.withspace li {margin-bottom:15px ; }
ul.listeencolonne {width:100% ; list-style-type: none;}
ul.listeencolonne li {display: block; float:left; width:120px;}

img.max20 {float:left; max-width:20% ; height:auto ;}	


/* Formulaires */
fieldset {padding:10px 10px 0 5px; border: 1px solid #999; margin:0 5px 10px 0;}
legend {color:#2040B0; background-color:yellow;}
fieldset.groscadre legend {font-size:18px; padding:5px; }
input[type=submit], .submit {background-color:#2040B0; padding:1px 5px 2px 5px; color:#fff;  font-size:13px; margin:0; border: 1px solid #999;}
input[type=submit]:hover , .submit:hover {color: #B02140; background-color:#999;}

form.big input[type=text] , form.big input[type=password] , form.big label , form.big select , .big {font-size:16px;}
form.compact input {margin:0 ; padding:2px 6px; }

/* Tableaux */
.td1 {text-align:right; color:#999; font-weight: bold; }
table.tableau {  width:100%; background-color:#EFEFEF;}
table.tableau tr:hover {  background-color:#DDDDDD;}
table.tableau td , table.tableau th { padding: 10px ; border: 1px solid #999; text-align: center;}

/* Ombre : voir styleIE pour IE */
.ombre , div#menu { background-color:white;
			-webkit-box-shadow: 0 0 4px #aaa; 
			-moz-box-shadow:  0 0 4px #aaa; 
			box-shadow:  0 0 4px #aaa; }

.left {float: left; padding:5px; margin-right:5px;  }
.right {float: right; padding:5px;}
.cadre {padding:10px 2%; border: 1px solid #999; margin-bottom:10px;}
.groscadre {border: 5px solid #999; padding:10px; margin-bottom:10px;}
.selection2 {background-color:#EEE ; padding:10px ; margin-bottom:10px ; }
.leftpad {padding-left:2% ; }

/*float*/
img.floatRight { float: right; border: 1px solid #999; padding:4px; margin:4px; }
div.illustration { float: right; width:250px;background-color: #2040B0; margin-left:4px;color:white;}
div.illustration p {padding:4px; margin:0;}
div.marque, div.marque1, div.marque2 {text-align:center; word-wrap: break-word; width:80px; height:120px; margin:5px 1% ; padding:5px 1%; background-color:#ddd; }
div.marque img, div.marque1 img, div.marque2 img {margin-bottom:5px}
div.marque1 {width:28%; min-width:80px; height:135px;}
div.marque1 img {width:98% ; max-width:100px; height:auto}
div.marque2 {width:10%; min-width:40px; height:135px;font-size:8px;}
div.marque2 img {width:98% ; max-width:80px; height:auto}


/* GABARIT PAGE : 980px */
div#header,  div#content , div#footer {	
	margin:auto; width:980px; padding-top:10px; background-color: transparent ;
	border-right: 1px solid #2040B0; }
div#content {padding-bottom:20px; }

/* HEADER */
div#headerBG { position: relative;margin-top:-18px; margin-bottom:18px; z-index:1; width: 100%; border-top: 1px solid #eee;}
div#header	{ position:relative;  z-index:2; color:#2040B0; font-weight: bold; }
#logo	{  float:left; background-color:transparent; padding:0 10px 0 10px ; margin-bottom:10px !important;}
#logo:hover {background-color:white; }
#logo, div#logo h1 {position:relative; z-index:3 ; font-size:28px; font-weight: bold; margin:0; letter-spacing: 2px; }
#baseline {font-size:15px; font-weight: normal; margin:0 0 10px 0;letter-spacing: 4px; }
#logo a  {text-decoration: none;}

div.pubbh {position:absolute; top:5px; right:50px; width:468px; height:60px; z-index:1; background-color:white; border: 0;}
div.pubbh img {width:100% ; height:auto}

div#version_local {position:absolute; top:5px; right:0; width:50px; height:60px; z-index:3; background-color:yellow; }

/* FOOTER */
div#footer{background-color: transparent ; color:#2040B0; border-top: 1px solid #2040B0;}
div#footer_info {background-color:#F9F9F9 ; padding: 5px 2%}
div#pub_bas {position:relative; height:90px ; width:100%;  margin-bottom:20px ; border-bottom:1px solid #2040B0; }
div#pub_bas_google {position:absolute; top:0; left:0; height:90px ; width:728px; }
div#pub_shop { position:absolute; top:0; right:0; height:90px ; width:220px; background-color:#eee ; text-align:center }


/* MENU */
div#menu {position:relative; background-color:#333; color:white; height:26px;  line-height:26px;  font-size:15px; font-weight:normal ; margin-bottom:0}
div#menu a {color:white; text-decoration:none;  }
div#menu a:hover {background-color:#999; }
ul#nav1 { margin:0; }
ul#nav1 li {display:inline; margin-left: 10px; }
ul#nav1 a { padding:4px 8px; }

nav input , nav label , nav ul { display: none; }

/* Menu content2 - barre horizontale*/ 
ul.nav-c2 {background-color:#666; color:white; height:26px;  line-height:26px;  font-size:14px; font-weight:thin}
ul.nav-c2 a {color:white; text-decoration:none;  padding:7px 8px; }
ul.nav-c2 a:hover {background-color:#999; }
ul.nav-c2 li {display:inline;  margin-left: 10px; }
ul.nav-c2 li.selected {border-bottom:1px solid red ;}

/* Menu content2 - liste de ressource*/ 
ul.ressources {margin-left:5px ; font-size:16px}
ul.ressources li {margin-bottom:0}
ul.ressources a {display:block; color:#777; text-decoration:none; padding:10px 0 12px 0;}
ul.ressources a:hover {background-color:#eee}

ul.choix li {display:inline ;}
ul.choix a {display:block ; float: left ; padding: 2% ; margin:2%; background-color:#eee ; border-radius:20px ;}
ul.choix a:hover {background-color:#999; }

ul.menu2 {text-align: center; }
ul.menu2 li {display:inline ;}
ul.menu2 a {display:block ; float: left ; padding: 1% ; margin:1%; background-color:#eee ; border-radius:10px ;}
ul.menu2 a:hover {background-color:#999; }
ul.menu2 a.selected {background-color:#999; color:#B02140; }

ul.menu_test {margin:0;}
ul.menu_test li {display:inline ; font-size:11px}
ul.menu_test a {display:block ; float: left ; padding: 2px ; margin:0 2% 10px 0 ; background-color:#eee ; border-radius:10px ; text-align:center ; width:60px}
ul.menu_test a:hover {background-color:#999; }

/* Login */
div#loginLink {float:right; margin:5px 10px 0 0 }
#login2 { display:block ; position: absolute ; top:0; right: 10px ;  height:26px ; padding:0 5px ; background-color:#333;}
#login2 img#medaille {width:28px ; height:28px ; border-radius:10% ; margin:0 ; vertical-align: middle;}


/* GUIDELINE*/
#guideline { margin:-8px 0 12px 0; font-size:12px; 
	background-color:white ; opacity: 0.8 ; border-radius:5px ; padding: 5px 2% ;  }
#guideline a{text-decoration: none;}


/* CONTENT  */
div#content1, div#content2 , div#content3 {float:left; margin:0; }
div#content1 {width:122px;}
div#content2 {width:68% ;  background-color:white;}
div#content2.centrer {margin:auto !important; width:auto !important;  max-width:654px; float:none !important; text-align:left; background-color:#eee}
div#content3 {width:29%; margin:0 1% 0 2%; font-size:11px; background-color:transparent;}
div#content3 table {font-size:11px;} /*pour prise en compte par FF*/


/*Style particulier à des div*/
/*TITRES*/
#content1 h2, #content3 h2, #content3 h1 {margin:0; padding:2px; border:1px solid #999; border-bottom-width: 0 ; text-align:center; background-color:#eee;}
#content2 .soustitre {color:#2040B0; letter-spacing:2px; text-align:right; margin-right:10px; background-color:yellow; font-weight: bold;}

/*LISTES*/
#content1 ul {border: 1px solid #999; border-top-color: #2040B0; border-bottom:2px solid #999; padding-bottom:5px;}
#content1 li {margin-top:5px; margin-left:5px; }
#content1 a {text-decoration:none;}
#content2 ul , #content3 ul {list-style: square outside; overflow:hidden}
#content2 li {margin-top:4px; margin-left:15px; }
#content3 li {margin-top:4px; margin-left:15px; }


/*** HOME ***/
body#home div#content1 ul  {font-size:9px; letter-spacing:0; font-weight: normal; font-variant: small-caps;}
body#home div#content1 ul.topmarque {border: 1px solid #999; border-top-color: #2040B0; border-bottom:0; padding-bottom:10px; margin-bottom:0; 
	font-size:12px; letter-spacing:-1px;}

div.selection {background-color:#eee; margin-bottom:20px; padding:2%}
div#quiver {margin-bottom:20px;}
.selection100  { background-color:#ddd ;  }
.selection50  {width:49% ; border:none !important; background-color:#ddd ; margin:0 0 10px 0; }
.selection50 img {width:50% ; height:auto}

/* Moteur de recherche */
.overimg {background-color: rgba(255,255,255,0.7); padding:2%; margin:0 ; float:right; }
.overimg:hover, .overimg:focus { background-color: rgba(255,255,255,1) }
.h1overimg {font-size:50px !important; color:white;  border:none !important; 
	background-color: transparent !important; font-weight: normal !important; }

form#recherche , div#recherche ,
form#recherche_occaz { position:relative; 
						background-size: cover ; background-color:#eee; 
						padding:4px; margin-bottom:10px; }

#home form#recherche ul.nav-c2, 
#info form#recherche ul.nav-c2
	{position:absolute; top:0 ; right:0 ; }

#home form#recherche {padding-top:30px ;  }

#test form#recherche h2 {display:inline;}


/* LOGIN - moncompte */
body#login form.login { float: left; width:40%; margin: 10px 3% ; background-color:#ddd; 
						border-bottom:2px solid #999 ; padding:2%; text-align:right; font-size:16px; }
form#nouveaucompte { float: right !important;}
form.login input {max-width:100%}

body#login em {text-align:left;font-size:11px;}

body#moncompte div#content2 form {text-align:center;}
body#moncompte div#content2 form legend {text-align:right;}
body#moncompte form#form_updategabarit {border: 1px solid #999; padding:10px; }

body#moncompte_profil textarea {width:90%;}
body#moncompte_profil .pseudo {vertical-align:top; }

body#super div#riderprofil {margin-left:2%}
div#riderprofil p.itw {color:#666}
	
/*** TEST ***/
/* Personalisation des blocs de contenu:*/
div#outline {float:left; margin:0 10px 40px 0; width:160px ; text-align:center; overflow: hidden; font-size:10px}
div#outline img {height:420px ; width:auto;}

div.videodescription {margin-left:120px}

.bloc, div#bloc_action, div#bloc_trouver, div#bloc_marque, div#bloc_choisir, div#bloc_c3info {
	border: 1px solid #999; background-color:#f9f9fc; padding:2px;margin-bottom:10px;}
div#bloc_action ul , div#bloc_marque ul {list-style:none;}
div#bloc_action2 li{white-space: nowrap; margin-left:0;}
div#bloc_action label{font-size: 11px;}
div#bloc_trouver h5 {margin:0; font-size: 12px; font-weight:normal; color:#999; text-align:center; border-bottom:1px solid #999;}

span.pro {background-color:#2040B0; padding:1px 5px 2px 5px; color:#fff;  font-size:12px; font-variant: small-caps;  border: 1px solid #FFF;}

ul.shapedetail {margin-bottom:0; font-size:0.8em ; }
ul.shapedetail li {margin-bottom:0;  }

.shop_visi , .pubshop2  {padding:5px; font-size:12px; text-align:center; height: 80px;  display: table-cell;  vertical-align: top ; }
.pubshop2 {font-size:15px}
.pubshop2_tarif {color:red}

/* LISTE DE SUP : 1 SUP par ligne avec image */
table#supliste {border: 1px solid #999; width:100%; }
table#supliste td { padding:0 5px 0 5px; vertical-align: top; text-align:left; border-bottom:1px solid #999;}
table#supliste td.imginliste {padding:0; text-align:center;}
table#supliste img {height:100px;}
table#supliste img.picto {height:40px !important;}
table#supliste ul {float:left; margin-right:10px; padding-right:10px; border-right:1px dotted #999;}
table#supliste li {margin-top:0; }

/* LISTE DE SUP2 : A gauche liste de sup - à droite l'image de la planche survolée */
table#supliste2 {border:0;}
table#supliste2 td { vertical-align: top; text-align:left; }

/* LISTE DE SUP 3 (autres planches) */
div.supliste3 {float: left; width:200px; height:200px;	border: 1px solid #999; padding:2px 1%; margin:0 1% 10px 0}

/* Liste de SUP 4 */
div.supliste4 {float: left; width:31%; height:150px; text-align:center; background-color:white; margin:1%; overflow: hidden;}

/* LISTE DE PADDLE : 1 Pagaie par ligne  */
table#paddleliste {border-top: 1px solid #999; width:100%; }
table#paddleliste td { padding:0 5px 0 5px; margin:0; vertical-align: middle; text-align:left; border-bottom:1px solid #999;  }
table#paddleliste ul { font-size:11px; }
table#paddleliste img.logo {min-width:30px ; max-width:60px ; height:auto}

/* AVIS utilsateur */
table#avis_donner {border: 1px solid #999; width:100%; }
table#avis_donner td { padding:5px; vertical-align: top; text-align:left;}

table#avis { border: 1px solid #999; padding:0; border-collapse:collapse;  }
table#avis td { border: 1px solid #999; padding:5px; vertical-align: middle;}
table#avis td.tdusr {width:100px; background-color:#e2e4eb; border-bottom:2px solid #2040B0;}
table#avis td.commentaire {font-style: italic; border-bottom:2px solid #2040B0;}
table#avis td.date {font-size:10px ; }

div.avis {background-color:#e2e4eb; padding:5px ; margin-bottom:15px; border-radius:15px; }
div.avis-tduser { padding:1px ; float: left ; width:100px ; }
div.avis-tduser img {width:90px ; height:90px ; border-radius:50px; }
div.avis-date { margin-left:120px ; margin-bottom: 10px; font-size:10px ;  }
div.avis-usage { margin-left:120px ; margin-bottom: 10px; font-size:12px ;}
div.avis-commentaire { margin: 0 10px 10px 120px ; font-style: italic;  background-color:white ; padding:20px; font-size:16px}

div.avis-tdmodele { padding:1px ; float: left ; width:100px ;  }
div.avis-tdmodele img {width:auto ; height:200px ;  }

img.outlineavis {width:10%}
body#lesavis div.avis {float:right; width:85%}

/*** RECHERCHE ***/

/*** WHAT WE RIDE ***/
td.tduser img {width:70px ; height:70px ; border-radius:50px; }


/*** COMPARE ***/
table#comparatif tr {background-color:white}
table#comparatif tr:hover {background-color:#ddd}
table#comparatif th {text-align:right}
table#comparatif td {text-align:center}

/*** ANNUAIRE ***/
body#annuaireL div#recherche {border:none;  background-color: #eee}

body#annuaireA div#content2 {margin-left:10px; padding:5px; width:800px; background-color:#F3F3FA}
body#annuaireV div#content2 p {font-size:16px;}
.annuaire_site , .annuaire_site_valide {border-bottom: 1px dotted #2040B0; margin:5px 0; padding:1%;}
.annuaire_site_valide {background-color:#e2e4eb;}

/*** NEWSUP ***/
body#newsup div#content2 form { background-color:#F3F3FA; padding:10px; font-size:16px;}
body#newsup div#content2 select , body#newsup div#content2 input {font-size:16px;}

/*** OCCAZ ***/
div#contact {float:right; width:140px;  margin:0 0 0 2%; border: 1px solid #2040B0;
				background-color:#e2e4eb; text-align:center ;}
div#contact h3 {text-align:center; background-color:yellow; border-bottom: 1px solid #2040B0; font-size:14px ; padding:1%}
div#contact ul#contact_info {margin-bottom:0}
div#contact ul#contact_info li {margin-bottom:30px}
div#contact li	{list-style-type: none; margin-left:5px;}
div#occaz_outline {width:10% ; text-align:center ; font-size:11px}
div#occaz_outline img {height:120px ; width:auto;}

table.mesannonces {border:0 ; width:100%}
table.mesannonces td {padding:5px;}
table.mesannonces tr {border-bottom:1px dotted #ccc;}
table.mesannonces td.action {background-color:yellow; text-align:center}

table.t_tarif tr {height:40px; vertical-align : middle;}
table.t_tarif td {text-align:center}

body#occasionA form#form_updateinfo {visibility:visible; position:relative; background-color:yellow ; text-align:right ; font-size:16px}

/*** PADDLE ***/
body#paddle form#form_upload {padding:15px 5px; font-size:14px; }

table#occaz td {padding:5px;}


/*** TV video ***/
div.tv {float:left; width:49% ; margin:0 1% 10px 0; min-height:250px; background-size:cover;}
ul.tv {background-color: white ; opacity:0.8 ; padding:5px; margin:0 !important; float:right; }
ul.tv:hover {background-color: white ; opacity:1 ; }

div.tvc3 {background-size:cover;}

a.tvhome {position:absolute ; left:5px ; bottom:5px ; background-color:red ; color:white ; padding:3px 6px ; text-decoration:none;}

div.videovignette {position:relative; }
div.videoduration {position:absolute ; left:8px ; bottom:8px ; background-color:black ; color:white; }

iframe.videoframe {border: none }

/*** RDV ***/
body#rdv div#contact { width:100px ; min-height:300px ; margin:0 0 10px 10px ; text-align: center ; }
body#rdv div#contact h3 {font-size:12px}
body#rdv div#contact li.url	{word-wrap: break-word ; font-size:10px}

div.couv {float:left; width:30%; height:300px ; margin:0 10px 10px 0; background-size:cover; }

/*** TOPO ***/
body#topo h1 {font-size:20px; letter-spacing:-1px; font-weight:bold; background-color:rgb(224,65,88); color:white; padding:0 5px ; border-style: none; margin:0}
body#topo h1 a {letter-spacing:0; font-weight:bold; color:blue ; background-color:yellow}
body#topo div.couv {float:left; width:30%; height:250px ; margin:0 10px 10px 0; background-size:cover; }

body#topo div#contact { width:100px ; min-height:250px ; margin:0 0 10px 2% ; border:0; text-align: center ; }

div.couv2 {height:400px ; margin:0 0 10px 0; padding-left:20%; background-size:cover; }
div.couv2 ul {padding:2%; background-color: rgba(255,255,255,0.4);}
div.couv2 ul li {color:black; background-color:rgba(255,255,255,0.9);}

body#topo div#content, body#topo div#content3 {background-color: transparent;}
body#topo div#header {background-color: transparent;}
body#topo h4#guideline {background-color:white ; opacity: 0.8 ; border-radius:5px ; padding: 5px 2% ; float:left}


/*** TRIP ***/
body#trip h1 {font-size:20px; letter-spacing:-1px; font-weight:bold; background-color:rgb(224,65,88); color:white; padding:0 5px ; margin:0;}
body#trip div#content, body#trip div#content3 {background-color: transparent;}
body#trip div#header {background-color: transparent;}
div#trip_texte p , div#trip_texte h2 , div#trip_texte h3 , div#trip_texte h4 , 
	div#trip_texte ul	{padding-left:2% ; padding-right:2%}
body#trip h4#guideline {background-color:white ; opacity: 0.8 ; border-radius:5px ; padding: 5px 2% ; float:left}
img.illustration {width:100% ; height: auto ; margin-bottom:10px} 

/*** FORUM ***/
div#msgform {border:1px solid #2040B0 ; background-color:#e2e4eb; padding:10px 50px 5px 10px}
div.msg {background-color:#f9f9f9; padding:10px; margin:0 0 20px 20px; border-radius:15px; }
div.msg img.avatar {width:50px ; height:50px ;}
p.msg_par {margin-left:80px ; border-bottom:1px solid white; color:#aaa ;}
p.msg_txt {margin-left: 90px ;}


/*** pages ***/
div#page {margin-bottom:10px;}
div#page .bloc {margin:5px; padding:10px ; display: block; float:left}
div#page .select {background-color:#333; color:white;}

/*TEST_ADMIN*/
/* Content = 940 */
body#test_admin div#content3 {font-size:11px; background-color:#e2e4eb; }
body#test_admin form { padding:5px 5%; text-align: right;  background-color: #DDD;}

/* INFO Pratique CMS */
div.selectionphoto {}
div.selectionphoto h2, div.selectionphoto h3 {margin:0; padding:1% 1% 1% 2%; background-color:#eee}
div.selectionphoto div.legende {background-color:#eee; color:#555; padding: 20px 1% ; margin-bottom:20px;}
div.selectionphoto img.illustration {margin-bottom:0;}
	
p#resume {font-style: italic;}

/* Menu info pratique */
div.info {margin:0 ; padding:0 ; background-color: #eee ; margin-top:-50px; margin-bottom:60px}
div.info h2, div.info h1 {font-size:36px ; color:white ;  text-shadow: 0px 0px 1px #333; margin:0 0 20px 1%}
div.info ul , div.info p, div.info h3  {background-color: #eee ; margin: 0 ; padding:1% 2% ; font-size:16px}
div.info li {margin-bottom: 15px}
div.info h3 {font-weight: bold;}
	
div#album_photo img#imageprincipale {max-width:100% ; height:auto}

/*** PHOTO ***/
div#album_photo {text-align:center ; padding:2% 5% ; margin-bottom:10px ; background-color:#eee}
div#album_photo img#imageprincipale {max-width:100% ; height:auto}
div#album_videos {padding:2% 5% ; margin-bottom:10px ; background-color:#eee}

div.photozoom {border: 1px solid black; background-color:black ; color:white; text-align:center; position:relative; overflow: hidden;}
img#zoom { width:100%; height:auto ;}
div.photonav { position:absolute; top:0; width:100%; }
div.photonav a { border:1px solid #eee ; border-radius:2px ; background-color:white; opacity:0.5 ; padding:2px ; margin:5px }

body#photo form#form_upload {width:624px; border: 1px solid #999;  border-left:16px solid #B02140;
	padding:16px; margin-bottom:10px; font-size:14px; font-weight: bold;}

div.photomanager { float:left; position:relative; width:300px; height:250px ; margin:5px; padding:5px;  background-size:cover ; }
div.photomanager ul {display: none; background-color:white; opacity:0.9 ; padding:5px}
div.photomanager li {margin-bottom:10px}
div.photomanager:hover ul{display:block}
div.photomanager .action {border:1px solid #eee ; border-radius:2px ; background-color:white; opacity:0.8 ; padding:2px ; margin:0 10px 0 0}
div.photomanager:hover .action {background-color:black; color:white}
div.photomanager div.legend {background-color:white; opacity:0.8 ; position:absolute ; top:220px ; left:0 ; width:100%; font-size:9px}


/* boardfinder 300*/
div#boardfinder300 {padding:5px; text-align:center; background-color:#f9f9fc; border: 1px solid #999; margin-bottom:10px;}
div#boardfinder300 a {text-decoration: none; }
div#boardfinder300  a.submit {font-size:12px }
div#boardfinder300 table {font-size:16px; font-weight: normal; margin:0 auto 5px auto;}
div#boardfinder300 td { padding:5px 10px ; vertical-align: middle; text-align:center; border:1px solid #999;}
div#boardfinder300 td.bfc1 { background-color:#2040B0; color:white; }
div#boardfinder300 td.bfc2 { text-align:left;}
div#boardfinder300 p.message {font-size:13px; font-weight: normal; background-color:white; border:none; padding:0;}

div#networks {padding:5px; padding-bottom:0; text-align:center; background-color:#f9f9fc; border: 1px solid #999; margin-bottom:10px;}
div#networks div { 
			-webkit-box-shadow: 0px 0px 0px #aaa; 
			-moz-box-shadow:  0px 0px 0px #aaa; 
			box-shadow:  0px 0px 0px #aaa; } /* supprimer l'ombre */

/* PUB */
div.pubc1 {text-align:center; background-color:#eee; border: 1px solid #999; margin-bottom:10px;}
div.pubc1 h5 {margin:0; font-size: 12px; font-weight:normal; color:#999; }
div.pubc1 {overflow:hidden}
div.pubc1 img {max-width:100% ; height:auto}
div.pubcontent2 img {width:100% ; height:auto}

/* Vignette - quel sup choisir */
div.vignette {float: left; width:48%; margin:0.5% ; text-align:center; background-color:#2040B0; border: 1px solid #2040B0;}
div.vignette h2 , div.vignette h2 a {color:white; margin-top:10px; 	}
div.vignette img {width:100% ; height:auto;}

/*cookie*/
div#cookie {position:fixed; bottom: 0; padding: 5px; margin: 0; z-index:10; color:white; background-color: #333; }
div#cookie a { float:right; padding: 5px ; margin:5px; background-color:#eee ; border-radius:5px ;}


/* RESPONSIVE DESIGN  */
@media (min-width: 1024px)  { }

@media (max-width: 1024px)  { 
  
 	.hide_smallscreen {    display: none !important;  } 
	
	div#header,  div#content , div#footer { width:100% !important; padding-top:10px; }
 	div.pubbh {right:0;}

	
}

/* tablette 100% = 70+30 */
@media (min-width: 451px) and (max-width: 1024px)  { 
	
	div#content2 {width:66% ; padding-left:2%;}
	ul#nav1 li { margin-left: 5px; font-size: 12px }
	iframe.videoframe {width:100% !important; }
	
	div#outline {margin:0 10px 30px 0; width:20% ; overflow: hidden; }
	div#outline img {height:400px ; width:auto;}
	.trip_soustitre {font-size:10px}

}

/* Mobile */
@media (max-width: 450px) { 
  	.hide_mobile, ul#nav1 { display: none !important;  } 
	.only_mobile_inline { display: inline;}
	.only_mobile { display: block;}
	hr.clear4mobile { display: block; clear:both; visibility: hidden; margin:0}
	
	
	textarea {width:90% !important;}
 
	#logo	{  margin-top:60px ; float: none;}
	#logo, div#logo h1 { font-size:26px; text-align:center}
	#baseline {font-size:14px; letter-spacing: 3px; }
	div.pubbh {top:0 ; width:100% ; overflow: hidden; }
	div.pubbh img {width:100% ; height:auto}
	iframe.videoframe {width:100% !important; }
			
	div#content1, div#content3 {float: none; width:100% !important; margin:0; } 
	div#content2, div#footer, div.likecontent2 { float: none; width:94% !important; padding:0 2% 0 4%; margin:0; }
	h1, .h1_like {font-size:26px; letter-spacing:0; }
	
	/*Encarts contact*/
	div#contact {float: none; width:95% !important; margin:0 auto 20px auto !important; min-height:0 !important;  }
	div#contact img#avatar {float:left}
	div#contact ul#contact_info li {display: inline ; padding:10px 2%  ; }
	div#contact ul#contact_info2 li {display: inline ; padding:10px 2% ; }
	
	/*Encart pub*/
	div.pubc1 {max-width:300px; margin:auto; }
	div#pub_bas_google {display:none}
	div#pub_shop  {float:none; width:100%;}
	
	/*HOME*/
	.selection50 img {width:100% ; height:auto}
	#home .selection50 ul {display:none;}
	
	/*LOGIN*/
	body#login form.login,
	body#login form#nouveaucompte , 
	body#moncompte .selection50 { float: none !important; width:90% !important; margin:0 auto !important; }
	
	/* TEST */
	#test form#recherche h2 {display:block;}

	div#outline {margin:0 10px 10px 0; width:160px ; }
	div#outline img {height:210px ; width:auto;}
	div.avis-tduser { padding:1px ; float: none ; width:100% !important ; }
	div.avis-date { margin-left:0 ;  }
	div.avis-usage { margin-left:0 ;  }
	div.avis-commentaire { margin: 0 0 10px 0;  padding:2%; font-size:16px}
	
	body#lesavis div.avis {float: none ; width:100% !important ; }
	
	/* OCCAZ */
	body#occasionV div#contact {width:56% ; margin:0; border:0 ; padding:0 ; }
	div#occaz_outline {width:36% ; text-align:center ; font-size:12px; margin:0 ; border:0 ; padding:0 2%}
	div#occaz_outline img {height:120px ; width:auto;}
	
	/*TV*/
	div.tv {float:none; width:100% ; margin:0 0 10px 0; }
	
	/*** FORUM ***/
	div.msg img.avatar {width:40px ; height:40px ;}
	p.msg_par {margin-left:60px ; font-size:12px}
	p.msg_txt {margin-left: 20px ;}
	
	/*** TRIP ***/
	.trip_soustitre {font-size:10px}
	
		
	/* MENU RESPONSIVE - ouverture du menu */
	nav ul {
		/* translate with hardware acceleration */
		-webkit-transform: translateZ(0); 
		-ms-transform: translateZ(0);
		        transform: translateZ(0);
		-webkit-transition: max-height .4s;
		        transition: max-height .4s;
		will-change: max-height;
		
		display:block; background-color:white;
		margin:0 ; padding: 0 0 20px 0;
	}
	nav a {
		display: block;
		padding: 1.2rem;
		color: #fff;
		background: #333;
		text-decoration: none;
		margin-bottom: 2px;
	}
	nav a:hover, 
	nav a:focus,
	nav a:active
	{
		background: #eee;
	}
	
	/* handling clic with CSS3 checked */
		
	/* Theming closed nav */	
	nav > input:not(:checked) ~ ul {
		max-height: 0 ; display: none;
		overflow: hidden;
	}
	/* Theming opened nav */
	nav > input:checked ~ ul {
		max-height: 800px; display:block; margin-top:10px; 
	}
	

	/* Global styling nav button */	
	nav > label {
		display: block ;
		position: absolute; top:-10px; left:5px ; z-index:3;
		height: 45px; width: 45px;
		background: #333;
		border: 0;
		border-radius: 50%;
		text-align: center;
		font-size: 10px;
		line-height: 1.5;
		color: #fff;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s webkit-transform cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s transform cubic-bezier(0, 1.8, 1, 1.2);
		box-shadow:  0 0 4px #aaa;
	}
	nav > label:before {
		content: "";
		display: block;	
		z-index: 3;
		height: 15px ; width: 20px;
		background-color: transparent;
		background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
		background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
		background-image: linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		-webkit-background-size: 25px 2px;
		        background-size: 25px 2px;
		margin: .8em auto 0;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		transition-property: background;
	}
	
	/* Theming opened nav button */	
	nav > input:checked + label {
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
	nav > input:checked + label::before { 
		background-position: center, center, center;
	}
}