html, body {height: 100%; }
body {padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; color:#1e1f21; background:#fff url(/charte-piscines/bg-body.jpg) repeat-x left top; }
body.body-accueil{background:#fff url(/charte-piscines/bg-body-accueil.jpg) repeat-x left top;}
* html body{text-align:center;}
#conteneur{ float:left; width:100%;  background: url(/charte-piscines/bg-haut-conteneur2.jpg) no-repeat center top;}
#ombre-page{float:left; width:100%;  background:url(/charte-piscines/ombre-page.png) no-repeat center top; }
.page{margin:0 auto; width:960px; clear:both}
#page{ text-align:left; float:left; width:100%;}
.page-int #header{height:146px; position:relative;}
#frise{ background: url(/charte-piscines/frise.jpg) repeat-x center top; height:77px; clear:both}
#bg-footer{ clear:both; float:left; width:100%; background:#90C5DE url(/charte-piscines/bg-footer.jpg) repeat-x left top; padding:10px 0;}

a, p, td, li{font-size:12px; color:#1e1f21}
img{border:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
h1{ color:#063b73; font-size:17px; font-weight:bold; border-bottom:1px solid #B7B7B7; padding-bottom:7px; margin:0;}
h2{ color:#0369a6; font-size:15px; font-weight:bold; }
h3{ color:#0369a6; font-size:13px; font-weight:bold; }
h4{ font-size:13px; font-weight:bold; }
#z_contenu a{color:#0369a6; text-decoration:underline;}
#z_contenu a:hover{text-decoration:none}
#z_contenu ul{display:table; margin-top:0}
hr{height:1px; border:none; border-bottom:1px solid #BFCCE5;}
.lien_yahoo, .lien_yahoo a, #div_lien_yahoo, #vous-etes-ici{font-size:11px; color:#8A8E79;}
.legende{ font-size:10px; color:#4e4e4e; margin-top:2px; text-align:center;}
.image_ombree{width:auto;text-align:center;}
.image_ombree table{display:inline-table}
.img-image-ombree img{padding:3px;}
.width100pc{width:100%; float:left}
.invisible{display:none;}
ul.enligne, #nuagedetags ul{ margin:0; padding:0; list-style-type:none; }
ul.enligne li{ list-style-type:none; margin:0; padding:0; display:inline; }
.lien_menu{clear:both; float:left; margin-left:5px; }
#pagination{margin:5px 0; text-align:center; font-size:14px; color:#333; font-weight:bold; }
#pagination a{ padding:2px; font-size:13px; color:#8F8F8F; margin-left:3px; }
#pagination a:hover{text-decoration:underline; color:#333; }
.bouton{background:url(/charte-piscines/sprite-jpg.jpg) no-repeat -7px -107px; height:48px; width:208px; float:left; clear:both; margin-bottom:10px;}
.bouton a{ font-weight:bold; color:#392F2B; font-size:14px; display:table-cell; vertical-align:middle; height:48px; width:208px; text-align:center; text-transform:uppercase;}

/*ACCUEIL*/
#conteneur.conteneur-accueil{ /*background: url(/charte-piscines/bg-haut-conteneur-acceuil.jpg) no-repeat center top;*/}
#header-accueil{height:345px; position:relative;  background: url(/charte-piscines/bg-haut-conteneur-acceuil2.png) left top repeat-x;}

#diaporama{float:left; width:577px; height:269px; position:absolute; left:33px; bottom:4px; overflow:hidden;}
#masque-diaporama{background: url(/charte-piscines/masque-diapo2.png) no-repeat left bottom; position:absolute; top:0; left:0; width:577px; height:269px;  z-index:10;}
#bis_image{position:absolute; top:0; left:0; z-index:10; }
.bis_image{width:577px; height:269px; position:absolute; left:0px; top:0;}

.deco-header{height:53px; width:50px; position:absolute; top:-1px; left:370px; background:url(/charte-piscines/deco-piscine.png) left top no-repeat; z-index:21;}
.deco-header2{height:16px; width:358px;  position:absolute; top:10px; right:72px; background:url(/charte-piscines/deco-piscine2.png) left top no-repeat; z-index:1;}

/* header */
#malvoyant{ height:49px; width:46px; background:url(/charte-piscines/pictos-menulat.png) -474px -72px no-repeat; float:right;}
#logo-ccmm{position:absolute; left:40px; top:0px; z-index:20; }
#logo{position:absolute; left:359px; top:25px; z-index:20;}
#pictos{ /*background:url(/charte-piscines/pictos-menulat.png) no-repeat -214px top;*/ padding:6px 0 0 0; height:21px; width:300px; position:absolute; top:0; right:26px; text-align:center;}
#barreH{ background:url(/charte-piscines/bg-rpt-x.png) repeat-x left top; width:960px; margin:0 auto; height:42px; padding:8px 0 0px 0;}
#menuH{ float:left; width:780px; }

#moteur{ float:left; width:170px; background:url(/charte-piscines/pictos-menulat.png) -360px -128px no-repeat; height:26px;}
#affiche-moteur{position:relative; top:-8px; left:5px;}
input.moteur{ font-size:10px; border:none #fff; width:128px;}
input.ok{ position:relative; left:0; top:8px;}

#pictos{  padding:6px 0 0 0; height:28px; width:305px; position:absolute; top:0; right:26px; text-align:center;
background:url(/charte-ram/fd-pictos.png) left bottom no-repeat; no-repeat; z-index:2;}
#pictos ul{float:right; margin-right:15px;}
#pictos a, #pictos2 a{ float:left; display:block; height:22px;width:21px; background-image:url(/charte-piscines/pictos-menulat.png); background-repeat:no-repeat; margin:0 8px;}
#pictos a#imprimer{background-position: -420px -45px; }
#pictos #plan-site{background-position: -390px -45px;}
#pictos #accueil{background-position: -330px -45px;}
#pictos #pdf{background-position: -360px -45px;}
#pictos a#augmenter{background-position: -302px -45px; width:25px}
#pictos #diminuer{background-position: -270px -45px;}
#pictos a#contact{ background-position:-239px -45px; }

/* Cold Header */
#cold-header{float:left; width:289px; height:297px;  background:url(/charte-piscines/cold-header.png) left top no-repeat; 
position:absolute; right:33px; top:43px;}
#cold-header #info-piscines{text-align:center; font-weight:bold; 
position:absolute; top:86px; left:0px; width:92%;  margin:0 4%;}
#ouvertures-piscines{position:absolute; top:148px; left:0; width:96%;  margin:0 2% !important; float:left; }
#ouvertures-piscines, #ouvertures-piscines *{font-size:11px; margin:0; }
#info-piscine-mutzig, #info-piscine-molsheim, #info-piscine-duppigheim{width:32%; margin:0; 
float:left; text-align:center; font-size:11px; height:102px; position:relative; }
#info-piscine-duppigheim{ margin:0 2%;}
#affiche-horaire-mutzig, #affiche-horaire-duppigheim, #affiche-horaire-molsheim{display:table-cell; vertical-align:middle; height:80px; text-align:center; width:90px; padding:0 2px}
a.acces-piscines{display:block; height:15px; width:100%; position:absolute; bottom:0}

#cold-header #meteo{width:75%; margin:30px 0 0 40px; height:60px !important; position:relative;}
#cold-header .vignette{/*margin-top:-25px;*/ float:left; position:relative; height:70px;}
#cold-header .condition{/*margin-left:50px;*/ float:left; position:absolute; top:30px; right:-30px;}
#cold-header .temperatureactuelle{/*margin-left:-10px*/; position:absolute; top:15px; right:60px;}
#cold-header .temperatureactuelle .vignette, #cold-header .temperatureactuelle .jour{display:none}
#cold-header .ville h1, .ville h2{font-size:11px; color:#4E4E4E; margin:0;}
#cold-header .degre{top:-20px; right:-10px; }

/* zone centrale zc*/
#zc{float:left; width:960px; background-color:#fff; min-height:460px;}
#fil-ariane{clear:both; padding:5px 0px; margin:0 10px;}
#div_lien_yahoo{}
#colG{float:left; width:225px; margin-left:7px; }
#menuLat{}
#z_contenu{width:460px; float:left; margin-left:15px;}
#z_contenu.z_contenu_large{width:710px;}
#colD{ float:right; clear:right; width:210px; margin-right:7px }

#InfoBulle, #InfoBulleHoraires{ width:180px; padding:5px 15px; font-size:11px !important; z-index:200;}
#InfoBulleHoraires{top:324px; padding:5px 10px; }
#InfoBulleHoraires th{ padding:5px 10px 5px 5px; font-size:12px;}

#footer{text-align:center; padding:7px 0;}
#footer *{font-weight:bold; color:#fff}

/*meteo*/
#meteo{float:left; width:100%;}
#meteo #previsions, .infos-compl{display:none}
#meteo h3{ margin:2px 0 5px 0; padding:0;}
#meteo h3 a{color:#007EB8; font-size:15px;}
#meteo .ville{display:none}
.ville h1, .ville h2{font-size:11px; color:#4E4E4E; margin:0;}
.degre{ position:absolute; top:28px; right:5px; width:auto; font-size:22px; text-align:center;font-weight:600;color:#6197B2;}
.vignette{width:40px; float:left; margin:3px 20px 0 0;}
.infos-compl{float:left; width:auto; color:#555; font-size:11px; margin-top:5px; }
.condition{clear:both; color:#000; font-size:12px; float:left; width:80%; margin:2px 0 5px 0;}
.temperatureactuelle{float:left; color:#555; font-size:11px; }
.tempsactuel{font-size:11px;}
.TitrePrevision{float:left;width:100%;font-size:12px; color:#1177B9; font-weight:bold; margin:3px 0 3px 0px; border-top:1px dotted #ccc; padding-top:3px;}
.prevision{float:left; width:75px;}
.prevision .jour{ font-size:12px; font-weight:bold; color:#666; text-transform:uppercase; text-align:center; }
.prevision .vignette, .prevision .temp{width:100%; text-align:center;margin:0 0 2px 0; color:#7C73B1; font-size:11px;}


#colG-accueil{float:left; width:390px; margin:0 15px }
#colG-accueil #z_contenu{width:390px; margin:0;}
#colG-accueil #acces-directs{ background:url(/charte-piscines/acces-directs.jpg) no-repeat left top; width:290px; height:85px; padding:18px 10px; clear:both}
#colG-accueil #acces-directs a, #colG-accueil #acces-directs img{display:block; height:30px; width:287px}

#col2-accueil{width:310px; float:left}
.bloc-col2{ width:301px; padding:10px 2px 30px 4px;}
.fond-bloc-col2{background:url(/charte-piscines/sprite-jpg.jpg) 0 -176px no-repeat; min-height:200px;}
#actu .affiche-actu{width:300px; height:200px;}
.page-accueil #colD{width:210px; margin-right:7px}

.titre-onglet, .titre-onglet-big{ background:#9FD7E8 url(/charte-piscines/bg-rpt-x.png) repeat-x left -60px;  font-family:"Helvetica Narrow", Helvetica, Arial,sans-serif; color:#392F2B; padding:1px 0 1px 5px; text-transform:uppercase; font-weight:bold; font-size:12px; margin:2px 0px; line-height:26px;}
.bloc-cold{background:url(/charte-piscines/sprite-jpg.jpg) left -116px no-repeat; width:220px; padding:10px 4px 30px 4px;}
.puce-fleche{background:url(/charte-piscines/pictos-menulat.png) no-repeat left top; display:block; padding-left:28px;}
.accordion{margin-bottom:30px;}
.accordion .titre-onglet:hover{cursor:pointer; text-decoration:underline;}
.contenu_onglet{padding:4px 5px; font-size:11px;}
.contenu_onglet p, .contenu_onglet td, .contenu_onglet li, .contenu_onglet a{font-size:11px;}

#col2-accueil .titre-onglet a{font-size:15px;}

#InfoBulle, #InfoBulleHoraires{}
#InfoBullePartenaires{text-align:center; padding:15px 0; }


/* MENU HAUT */
#menu dl, #menu dt, #menu dd, #menu ul, #menu li{margin: 0; padding: 0; list-style-type: none; float:left;}
#menu li, .menuLat ul{clear:both; width:100%;}
#menu dl {position:relative;float:left;}
#menu a:hover{text-decoration:underline;}
#menu dl dt{border-right:1px solid #336F80; }
#menu dl:last-child dt {border-right:none;}
a.menu0_, a.menu0active_{padding:5px 10px 5px; font-weight:bold; font-family:"Helvetica Narrow", Helvetica, Arial,sans-serif; line-height:25px; text-transform:uppercase; color:#fff; font-size:14px; margin:0 10px}

a.menu0active_, #menu dl:hover dt a{background-color:#41b1d5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}

/* MENU JAVA */
#menu dd, #menu .Sous_menu_dyn {display:none;}
#menu dd{ position:absolute; top:35px; left:10px; background-color:#41b1d5; width:150px; padding:10px 3px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
.Sous_menu_dyn_contenu a{background:url(/charte-piscines/pictos-menulat.png) -65px -105px no-repeat;font-weight:bold; color:#fff; font-size:11px; display:block; padding:0px 0px 2px 17px; margin:2px 0; }
.Sous_menu_dyn_contenu a:hover{background: url(/charte-piscines/pictos-menulat.png) -306px -166px no-repeat; }

/* MENU LATERAL */
#titre_rub{ font-family:"Helvetica Narrow", Helvetica, Arial,sans-serif; font-weight:bold; font-size:14px; text-transform:uppercase; color:#fff; background:url(/charte-piscines/sprite-jpg.jpg) left top no-repeat; padding:7px 3px 0 10px;}
.haut_menuLat{float:left; width:100%; height:10px; background:url(/charte-piscines/sprite-jpg.jpg) left -62px no-repeat;}
.menuLat{clear:both; background:url(/charte-piscines/bg-menulat.jpg) left top repeat-y; padding:0 3px 0 2px; }
.bas_menuLat{float:left; width:100%; height:13px; background:url(/charte-piscines/sprite-jpg.jpg) left -88px no-repeat;}
.menuLat a{text-decoration:none; display:block;}
.menuLat a:hover{text-decoration:underline;}
.menuLat ul, .menuLat li{margin:0; padding:0; clear:both; list-style-type:none; }
.menuLat li{clear:both;}

a.menuG-2, a.menuGactive-2{color:#374436; text-transform:uppercase; font-weight:bold; padding:2px 0 3px 22px; display:block; font-size:12px; background:#A7DBF4 url(/charte-piscines/pictos-menulat.png) -60px -166px no-repeat; margin-top:4px; }
a.menuGactive-2{background:#61CCED url(/charte-piscines/pictos-menulat.png) -300px -166px no-repeat; color:#04102D; }
.menuLat ul li ul{background-color:#C4E7F2 ; margin:2px 0; }

a.menuG-3, a.menuGactive-3{font-weight:bold; font-size:12px; padding:4px 2px 4px 27px; color:#374436; background:#C4E7F2  url(/charte-piscines/pictos-menulat.png) -290px -230px no-repeat; border-top:1px solid #9BAA47;}
a.menuGactive-3{ background:#C4E7F2 url(/charte-piscines/pictos-menulat.png) -50px -230px no-repeat; color:#04102D; }
.menuLat ul li ul li ul{margin:0 0px 0px 3px; padding:2px 0 4px 0; width:214px; background-color:#C5E50D;}

a.menuG-4, a.menuGactive-4{ font-size:11px; padding:1px 2px 2px 32px; color:#374436; background: url(/charte-piscines/pictos-menulat.png) -285px -232px no-repeat; margin:2px 0 0 0;}
a.menuGactive-4{ background:url(/charte-piscines/pictos-menulat.png) -45px -232px; font-weight:bold; color:#1A202F; }
.menuLat ul li ul li ul li ul{margin:0 0px 5px 13px; width:204px;}

/* PLAN DU SITE */
#z_contenu .PLAN0{float:left; width:98%; clear:both;padding:3px 5px; margin:20px 0 10px 0;}
#z_contenu .PLAN0 a{font-size:14px; color:#4183AF;	font-weight:bold; }
#z_contenu .PLAN0 a:hover, #z_contenu .PLAN1 a:hover, #z_contenu .PLAN2 a:hover, #z_contenu .PLAN3 a:hover{	color:#000000;}
#z_contenu .PLAN0 a, #z_contenu .PLAN1 a, #z_contenu .PLAN2 a, #z_contenu .PLAN3 a{text-decoration:none;}
#z_contenu .PLAN1{position:relative; left:-35px; list-style:none; margin:5px 0 2px 0; padding:2px 0;}
#z_contenu .PLAN1 a{ font-size:13px; color:#333; font-weight:bold;}
#z_contenu .PLAN2{list-style-type:disc; color:#333; position:relative;left:-25px; margin:4px 0;	}
#z_contenu .PLAN2 a{font-size:11px; color:#333;}
#z_contenu .PLAN3{font-size:10px; color:#666; margin:2px 0; position:relative; left:-25px;}
#z_contenu .PLAN3 a{font-size: 10px; color:#333;}

/* GED */
.documentGED{float:left; margin:5px 0; width:100%;}
.economie, .viemunicipale, .actualites, .principal, .decouvrir, .demarches, .marchespublics, .economie, .viesociale, .sportetloisirs, .culture, .cadredevie{background:url(/charte-piscines/drapeau.gif) no-repeat left top; height:25px;line-height:25px; padding-left:40px;}
.scolarite-enfance-jeunesse{background:url(/charte-piscines/ourson.gif) no-repeat left top; height:25px;line-height:20px; padding-left:30px;}
.documentGEDI{float:left; width:147px; margin:0 2px 10px 2px;}
.documentGEDI_Image{min-height:140px; text-align:center;}
.documentGEDI_Info{text-align:center; font-size:10px; }
.documentGEDI_Info a{font-size:11px;}
.nombre-docs{ font-size:12px; margin-bottom:20px;}
.page-docs{ font-size:12px; color:#333; margin-top:20px; }
.theme-docs{ font-size:14px; font-weight:bold; color:#E7301F; }
.visualiser-doc a{ font-size:10px; color:#6F6868; background:url(/images/picto-illicomag.png) no-repeat left top; padding-left:18px; margin-left:5px;}
.gedfichier{float:left; margin:5px 7px 5px 0; width:40px;}
.gedfichier img{ height:25px;}
.gedtitre{ text-decoration:none; font-weight:bold; font-size:12px; color:#333; float:left; width:85%; }
div.visualiser-doc{ width:auto; display:inline-table; }
.geddate{ font-size:10px; color:#8F8F8F; margin-left:47px; float:left; clear:both; }
.documentsGEDIllustre .documentGEDI_Image img{border:1px solid #A4B6EF;}
.documentsGEDIllustre .documentGEDI{padding:4px 2px 0 2px;}
.documentsGEDIllustre .documentGEDI:hover{ background-color:#E0E4EF; -moz-border-radius: 7px; -webkit-border-radius: 7px;}

/*calendrier manifestation*/
.Manifestation_ligne{float:left;width:100%;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #BBBBBB;}
.Manifestation_image{float:left; width:70px; margin-right:10px;}
.Manifestation_image img{max-width:70px;}
.Manifestation_desc{width:350px; margin-left:80px;}
.Manifestation_titre{font-weight:bold;}
.Manifestation_categorie{font-style:italic;}
.Manifestation_retour{margin:10px 0;}
.Manifestation_retour a{padding:2px 5px; background-color:#eee; border:1px solid #E2EBF1; -moz-border-radius:2px; color:#333 !important; text-transform:uppercase; text-decoration:none !important;}
.Manifestation_retour a:hover{background-color:#ddd;}
.Manif_detail_titre{margin-bottom:7px;}
.Manif_detail_image{float:right;width:150px;}
.Manif_detail_image img{max-width:150px;}
.Manif_detail_horaires{font-weight:bold;}
.Manif_detail_categorie{font-style:italic;}
.Manif_detail_desc{float:left; width:300px;}
.Manif_detail_contact{float:left; width:100%;}
.Manif_detail_info{float:left; width:100%;}
.Manif_detail_info_titre{float:left; margin-right:3px; }

/* illicomag */
.illicomag{float:left; width:100%; margin-bottom:10px;}
.illicomag_vignette{float:left;text-align:center;}
.illicomag_vignette img{border:1px solid #ccc;}
.illicomag_info{float:left;width:210px;}
.illicomag_titre {font-weight:bold;}
.illicomag_flip{background:url(/images/librairie/feuilleter1_sm.jpg) no-repeat #FFFFFF; padding-left:30px;height:30px;}
.illicomag_pdf{background:url(/images/librairie/pdf1_sm.jpg) no-repeat #FFFFFF; padding-left:30px;height:30px;}
.illicomag_flip a, .illicomag_pdf a{font-size:11px; line-height:27px;}

/*album photo*/
#miniature_fleches{float:left; height:90px; width:452px; position:relative; margin:10px 0 10px 0px;}
#miniature_fleches img#gauche{position:absolute; left:0; top:28px; height:32px; width:32px; min-height:1px; background:#fff none;}
#miniature_fleches img#droite{position:absolute; right:0; top:28px; z-index:2; height:32px; width:32px; min-height:1px; background:#fff none}
#bloc_miniatures{height:90px; overflow:hidden; position:relative; margin-left:35px;}
#bloc_miniatures{float:left; height:90px; overflow:hidden; position:relative; width:380px;}
#liste_miniatures{position:absolute; top:0; left:0; height:80px; width:3000px}
#liste_miniatures img{height:80px; margin:2px; border:2px solid #e7e7e7;}
.light{opacity:0.5; }
.origin{opacity:1; }

/**cold**/
#info-piscines{font-weight:bold; text-align:center;}
#colD #ouvertures-piscines, #colD #info-piscines, #colD #meteo{display:none;}

/*calendrier manifestation*/
.manifestation-ligne{float:left;width:100%;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #BBBBBB;}
.manifestation-image{float:left; width:70px; margin-right:10px;}
.manifestation-image img{max-width:70px;}
.manifestation-desc{width:350px; margin-left:80px;}
.manifestation-titre{font-weight:bold;}
.manifestation-categorie{font-style:italic;}
.manifestation-retour{margin:10px 0;}
.manifestation-retour a{padding:2px 5px; background-color:#eee; border:1px solid #E2EBF1; -moz-border-radius:2px; color:#333 !important; text-transform:uppercase; text-decoration:none !important;}
.manifestation-retour a:hover{background-color:#ddd;}
.manif-detail-titre{margin-bottom:7px;}
.manif-detail-image{float:right;width:150px;}
.manif-detail-image img{max-width:150px;}
.manif-detail-horaires{font-weight:bold;}
.manif-detail-categorie{font-style:italic;}
.manif-detail-desc{float:left; width:300px;}
.manif-detail-contact{float:left; width:100%;}
.manif-detail-info{float:left; width:100%;}
.manif-detail-info-titre{float:left; margin-right:3px; }

a.facebook{ width:96%; float:left; text-align:center; color:#063b73; font-weight:bold;
margin:15px 2%; border:1px solid #dddddd;  padding-top:4px; font-style:italic; background:#F5F5F5;
border-radius: 12px; -moz-border-radius: 12px; webkit-border-radius: 12px;}

.newsletter{ width:96%; float:left; background:#A8DAF3; margin:2px 0 8px 2px; box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5); 
border-radius: 10px ; -moz-border-radius: 10px; webkit-border-radius: 10px;}
.newsletter .titre-onglet{  background:none;}
.ok-newsletter{color:#666}

.bloc-news{ width:100%; float:left}