@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 */
/* tutsplus */

#btn_menu {background:#51bbdd; text-align:center}
#btn_menu a {
	background:#4e4e4e;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	height:22px;
	letter-spacing:0.1em;
	line-height:22px;
	padding:0 10px;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
#btn_menu a:hover, #btn_menu a:focus {
	color:#1c1c1c;
	background:#ccc;
}
/* menu */
#menu {display:none}
/* affiche le menu au clic sur le bouton btn_menu */
#menu:target {display:block}
/* menu principal Découvrir Laon | Mairie | Cadre de vie | Culture et Loisirs | Services aux Laonnois */
ul#principal {
	background:#51bbdd;
	list-style:none;
	margin:0;
	padding:4px 0 7px 0;
}
#principal li:hover > .sousmenu {display:block}
/*
#principal li:last-child a {border-bottom:none}
*/
#principal li a {
	background:#fff;
	border-radius:5px;
	color:#000;
	display:block;
	font-weight:bold;
	height:2em;
	letter-spacing:0.03em;
	line-height:2em;
	margin:0 0.4vw;
	padding:0 15px;
	text-decoration:none;
	text-transform:uppercase;
}
#principal li a:hover, #menu li a:focus {
	color:#1c1c1c;
	background:#ccc;
}
.rouge 		{border-bottom:5px solid #cd0072}
.jaune 		{border-bottom:5px solid #f6cb00}
.bleu 		{border-bottom:5px solid #007db5}
.vert 		{border-bottom:5px solid #00b34e}
.bleufonce 	{border-bottom:5px solid #26315e}
.violet 	{border-bottom:5px solid #682c9b}

#principal li ul.sousmenu {
	border-radius:5px;
	border-top:0;
	border-right:0;
	border-left:0;
	display:none;
	font-size:1em;
	list-style-type:none;
	margin:0 0.4vw;
	padding:0;
	position:absolute;
	width:95%;
	z-index:1000;
}
#principal ul.sousmenu li {
	border:0;
	display:block;
	float:none;
	margin:0;
	padding:0;
	white-space:nowrap;
	z-index:1000;
}
#principal ul.sousmenu li a {
	background:#fff;
	border-top:0;
	border-right:0;
	border-bottom:1px solid #e1e1e1;
	border-left:0;
	color:#000;
	display:block;
	font-weight:normal;
	height:2em;
	letter-spacing:0;
	line-height:2em;
	margin:0;
	padding:0 1em;
	text-align:left;
	text-decoration:none;
	text-transform:none;
}
#principal ul.sousmenu li a:link, #principal ul.sousmenu li a:visited {}
#principal ul.sousmenu li a:hover {background:#e7e7e7}
#principal ul.sousmenu li:hover > .soussousmenu {/*display:block;*/}
#principal li .sousmenu .soussousmenu {
	background:#f3f3f3;
	display:none;
	font-size:0.8em;
	margin:0;
	padding:0;
}
#principal li .sousmenu .soussousmenu li a {margin:0 0 0 15px}
/* menu direct Toutes des démarches | Annuaire des services | Plan interactif | Travaux | Lettre d'information | Emploi*/
ul#direct {
	background:#51bbdd;
	list-style:none;
	margin:0;
	padding:5px 0 2px 0;
	text-align:center;
}
ul#direct img {
	background-color:#585858;
	border:1px solid #585858;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	height:42px;
	width:42px;
}
ul#direct .prems  img{
	background-color:#0057bd;
	border:1px solid #0057bd;
}
ul#direct .der  img{
	background-color:#990077;
	border:1px solid #990077;
}
#direct li {
	display:inline;
	list-style:none;
}
#direct li a {
	display:inline-block;
	margin:0 0.7%;
}
#direct .prems {color:#0057bd}
#direct .der {color:#990077}
#direct li a span {display:none}

.alaune {
	background:#58585A;
	border-radius:20px;
	color:#fff;
	margin:0;
	padding:0 0 1px 0;
	text-align:left;
}
.alaune .uneImg {
	display:block;
	height:auto;
	margin:0 auto;
	max-height:360px;
	max-width:540px;
	position:relative;
	width:100%;
}
.alaune .uneImg img {height:auto; width:100%}
.alaune h1 {
	background:none;
	display:block;
	font-size:1.13em;
	margin:0.3em 0.7em;
}
.alaune p {
	color:#fff;
	display:block;
	font-size:0.83em;
	margin:0.3em 1.3em 1.1em 1.1em;
	word-wrap: break-word;
}
.alaune p a i {
	background:url(images/plus_24.png) left no-repeat;
	color:#fff;
	font-size:0.9em;
	font-style:italic;
	min-height:27px;
	padding:20px 0 14px 31px;
	text-decoration:underline}
.alaune a {color:#fff; text-decoration:none}
.alaune:after {
	display:block;
	content:"";
	clear:both;
}
#agenda, #actu, #media {
	font-family:Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", sans-serif;
}
#agenda div, #actu div, #media div {margin:0;padding:0}
#agenda h1, #actu h1 {
	background:none;
	font-size:1.3em;
	font-weight:bold;
	margin:0.7em 0.7em 0.1em 0.7em;
	text-align:left;
}
#media h1 {
	background:none;
	font-size:1.3em;
	font-weight:bold;
	margin:0.1em 0.7em 0.1em 0.7em;
	text-align:left;
}
#agenda p, #actu p, #media p {
	margin:0;
	padding:0.5em 0 0.2em 0;
	text-align:right;
}
#agenda a, #actu a, #media p a {
	background:url(images/plus_24.png) left no-repeat;
	color:#000;
	font-size:1em;
	font-style:italic;
	min-height:24px;
	padding:15px 0 18px 27px;
	margin:0.3em 0.5em 0.3em 0;
}
#agenda_manif, #media_medium {display:block}
#actu_even1, #actu_even4, #actu_even7 {display:block; border-bottom:14px solid #F3F3F7}
#agenda_manif div, #actu_even1 div ,#actu_even4 div ,#actu_even7 div, #media_medium div {
	background:#ffffff;
	padding:0.7em 1em;
	border-right:7px solid #F3F3F7; border-left:7px solid #F3F3F7; 
}
#media_medium div.photos, #media_medium div.videos, #media_medium div.kiosque  {
	padding:0.5em;
	margin:1em 0 0 0;
}
#media_medium div.photos, #media_medium div.kiosque {background:#ffffff}
#media_medium div.videos {background:#e7e7e7}
#actu_even1 h2, #actu_even1 h3, #actu_even4 h2, #actu_even4 h3, #actu_even7 h2, #actu_even7 h3 {
	font-weight:bold;
	text-align:left;
	line-height:1.4em;
}
#agenda_manif h2, #actu_even1 h2, #actu_even4 h2, #actu_even7 h2, #media_medium h2 {
	font-size:1.2em;
	font-weight:bold;
	margin:0.3em 0.2em 0 0.2em;
	padding:0.3em 0 0.2em 0;
}
#agenda_manif h3, #actu_even1 h3, #actu_even4 h3, #actu_even7 h3, #media_medium h3 {
	font-size:1.1em;
	font-weight:bold;
	margin:0.3em 0.2em 0 0.2em;
	padding:0.1em 0 0 0;
}
#agenda_manif p {
	margin:0.5em 0.3em;
	padding:0 0 0.3em 0;
	text-align:left;
}
#actu_even1 p, #actu_even4 p, #actu_even7 p {
	margin:0.5em 0.3em;
	padding:0 0 0.3em 0;
	text-align:left;
	font-size:0.95em;
	line-height:1.20em;
}
#media_medium p {
	margin:0.5em 0.3em;
	padding:0 0 0.3em 0;
	text-align:left;
	vertical-align:bottom;
}
#agenda_manif a, #actu_even1 a, #actu_even4 a, #actu_even7 a, #media_medium p a {
	background:url(images/plus_16.png) left no-repeat;
	color:#000;
	font-size:0.93em;
	font-style:italic;
	min-height:20px;
	padding:14px 0 11px 20px;
	line-height:1.24em;
}
#agenda_manif div, #actu_even1 div, #actu_even4 div, #actu_even7 div, #media_medium div {border-radius:31px}
.un {}
.dx {display:none}
.ts {display:none}
#agenda_manif div img {
	border-radius: 13px;
	display:block;
	margin:0 auto;
	height:auto;
	width:100%;
	max-height:300px;
	max-width:200px;
}
#actu_even1 div img, #actu_even4 div img, #actu_even7 div img {
	border-radius: 13px;
	display:block;
	margin:0 auto;
	height:auto;
	width:100%;
	max-height:240px;
	max-width:360px;
}
#media_medium div.photos img {
	border-radius: 13px;
	display:block;
	margin:0 auto;
	height:auto;
	width:100%;
	max-height:240px;
	max-width:360px;
}
#media_medium div.kiosque img, #media_medium div.videos img {
	border-radius: 13px;
	display:block;
	margin:0 auto;
	height:auto;
	width:100%;
	max-height:360px;
	max-width:240px;
}

/** 
 *  sliderkit-demos.css
 *	> CSS code for demos
 *  
 *  This file is part of Slider Kit jQuery plugin.
 *  http://www.kyrielles.net/sliderkit/
 *  
 *  Copyright (c) 2010-2012 Alan Frog
 *  Licensed under the GNU General Public License
 *  See <license.txt> or <http://www.gnu.org/licenses/>
 */

/* PLUGIN BASICS display:none */
.sliderkit{display:block;position:relative;overflow:hidden;text-align:left;margin:0;padding:0}
.sliderkit a{text-decoration:none}
.sliderkit a:hover{color:#fff; text-decoration:underline}
.sliderkit a:focus{outline:#fff none 0px;/*optional*/}
.sliderkit img{border:0}

/* Navigation */
.sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0}
.sliderkit .sliderkit-nav-clip ul li{float:left}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden}

/* Buttons */
.sliderkit .sliderkit-btn{z-index:10}

/* Play button */
.sliderkit-play-btn span{display:none}
.sliderkit-play-btn a{position:relative;display:block;width:20px;height:23px;margin:0 auto;background:url("images/slideshow-btns.png") no-repeat 0 0}
.sliderkit-play-btn a{background-position:-50px 0}
.sliderkit-play-btn a:hover,
.sliderkit-play-btn a:focus{background-position:-50px -23px}
.sliderkit-pause-btn a{background-position:-75px 0}
.sliderkit-pause-btn a:hover,
.sliderkit-pause-btn a:focus{background-position:-75px -23px}

/* Panels */
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden}
.sliderkit .sliderkit-panel-active{z-index:5}
.sliderkit .sliderkit-panel-old{z-index:4}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0}

/* Slider kit */
.sliderkit .sliderkit-nav-clip a:active{color:#fff}
.sliderkit .sliderkit-nav-clip a:hover{text-decoration:none}
.tabs-standard .sliderkit-nav-clip li.sliderkit-selected a:active,
.tabs-noheight .sliderkit-nav-clip li.sliderkit-selected a:active{color:#000}
.tabs-standard .sliderkit-nav-clip a:hover,
.tabs-noheight .sliderkit-nav-clip a:hover{color:#fff}

/* CONTENT SLIDERS */

/* Content slider > Standard */
.contentslider-std{height:auto;min-height:550px;padding:10px 0}

/* Nav */
.contentslider-std .sliderkit-nav{position:relative;height:24px;text-align:left}
.contentslider-std .sliderkit-nav-clip{margin:5px 0px 0px 20px}
.contentslider-std .sliderkit-nav-clip li{float:left;height:24px;padding:0;margin:0 5px 0 0}
.contentslider-std .sliderkit-nav-clip li a{float:left;background:#424242;border-radius:51px;height:18px;margin:0;padding:1px 10px 2px 10px;color:#fff;text-decoration:none}
.contentslider-std .sliderkit-nav-clip li a:hover{background:#666}
.contentslider-std .sliderkit-nav-clip li.sliderkit-selected{}
.contentslider-std .sliderkit-nav-clip li.sliderkit-selected a{color:#000;background:#ddd}

/* Panel */
.contentslider-std .sliderkit-panels{height:auto;min-height:550px;overflow:hidden;padding:0;width:100%;min-width:324px}
.contentslider-std .sliderkit-panel{height:auto;min-height:550px;overflow:hidden;padding:0;width:100%;min-width:324px}

/* Panels buttons */
.contentslider-std .sliderkit-go-btn{display:none}

body {text-align:center}
#tinymce {font-size:0.77em}
h1 {font-weight:normal; font-size:2em; margin:0.36em 0.2em 0.57em 0; padding:0.1em 0.3em; text-align:left}
h2 {color:#000; font-weight:bold; font-size:1.45em; margin:0.9em 0 0.3em 7px; text-align:left}
h3 {color:#000; font-weight:normal; font-size:1.24em; margin:0.7em 0 0.1em 10px; text-align:left}
h3 i, h3 em {color:#575757; font-size:0.77em; margin:0 0 0 30px}
h4 {color:#1356a7; font-weight:normal; font-size:1.15em; margin:0.7em 0 0.1em 10px; text-align:left}
h5 {color:#1356a7; font-weight:normal; font-size:1.11em; margin:0.7em 0 0.1em 10px; text-align:left}
p {color:#111; font-size:1.09em; margin:0.36em 0 0.36em 10px; text-align:left}

a {color:#08438a; text-decoration:underline}
a:hover {color:#003}
abbr, acronym {border-bottom:1px dotted #666; cursor:help}
ul {margin:0.7em 0 0.3em 10px; padding:0 0.3em 0 3em}
ol {margin:0.7em 0 0.3em 10px; padding:0 0.3em 0 3em}
li {color:#012c5f; padding:0 0.3em 0 0.2em; text-align:left}

dl {border-bottom:1px solid #CCC; color:#1356a7; float:left; font-size:1em; margin:1.5em 0 0.7em 10px; padding:0; width:57%}
dt {border-top:1px solid #CCC; float:left; font-weight:bold; margin:0 0 0 0; padding:.5em; width:47%}
/* hack de commentaire avec un antislash pour ie5 mac \*/
dt {clear:both}
/* end hack */
dd {border-top:1px solid #CCC; float:left; margin:0 0 0 0; padding:.5em; width:47%}

address {text-align:left; color:#012c5f}
pre {text-align:left; color:#012c5f}
b, strong, .important {color:#0e4689; font-weight:bold}
sup {font-size:.7em; line-height:.8em}

.mois p a {
    background-color: #EFEFEF;
    border-radius: 99px;
    margin: 1em;
	padding: 0.57em 0.77em;
    text-decoration: none
}
.mois p {padding:5px}
.cadre {border:1px solid #70a0dd; padding:0 0.7em; overflow:hidden; margin:7px 0; width:47%}
.legende {font-weight:normal; color:#1356a7; font-size:0.9em; font-style:italic}

article table.tableaubleu {background:#e3efff; margin:0.3em 7px; padding:0.5em}
article table.tableaubleu th{background:#b1cbff; border-width:1px; border-style:solid; border-color:#577799; padding:0.3em; text-align:center}
article table.tableaubleu td{border-width:1px; border-style:solid; border-color:#577799; padding:0 0.3em; text-align:center}
articles table.tableaubleu td.select{background:#d0e0ff}
table#assemblage { padding:0; margin:0}
table#assemblage td {border:1px solid blue; padding:0; margin:0}

#contenu {margin:0.5em 0 0 0; padding:0}
#contenu article {
	background:#fff;
	border-bottom:1px dotted #d8d8d8;
	clear:both;
	margin:0;
	overflow:hidden;
	padding:0;
}
#contenu article:last-child {border-bottom:none}
#lagenda, #affichage_agenda {margin:0}
#contenu #colonne1, #contenu #colonne2 {padding:0; margin:0}
#listeLieu {margin:0}

#contenu article h1, #contenu article h2, #contenu article h3, #contenu article h4, #contenu article h5, #contenu article h6 {margin:0; padding:0.5em 0.5em 0.3em 0.5em}
#contenu article h1 {font-size:1.9em; font-weight:bold}
#contenu article h2 {font-size:1.5em; font-weight:bold}
#contenu article h3 {font-size:1.3em; font-weight:bold}
#contenu article h4 {font-size:1.2em; font-weight:bold}
#contenu article h5 {font-size:1.15em; font-weight:bold}
#contenu article h6 {font-size:1.1em; font-weight:bold}
#contenu article p, #contenu article ul {
	font-size:1em;
	margin:10px;
	word-wrap:break-word
}
#contenu article img {
	border-radius: 13px;
	max-height:200px;
	max-width:300px
}
#contenu #colonne1 img, #contenu #colonne2 img {
	height:200px;
	margin:0.5em 0.5em 0 0;
	width:300px
}
#contenu a.haut {
	background-color: #f1f1f1;
	border:1px solid #ffffff;
    border-radius: 99px;
    color: #4F4F4F;
    display: block;
    font-size: 0.77em;
    margin: 0 0 0.5em auto;
    padding: 1em;
    text-align: right;
    text-decoration: none;
    width: max-content;
	transition: background-color 1s, border 1s, color 0.5s, text-decoration 0.5s
}
#contenu a.haut:hover {
	background-color: #515151;
	border:1px solid #515151;
	color:#FFFFFF;
	text-decoration:underline
}

#manif {overflow:hidden; width:100%}
#manif img {margin:1em auto}
#manif p {text-align:left}

.info img {float:none;margin:10px}
.info h2 {margin:0.2em 0 0.15em 0; padding:0 0 0 120px;font-size: 1.4em !important;}
#agenda .info h2, #actu .info h2 {font-size: 1.2em}
.info h3 {font-size:1.2em !important;}
.info p {margin:0 0 0.3em 0; padding:0; font-size: 0.95em !important;}
#agenda .info p, #actu .info p {text-align:left}
.info p a i {display: block; font-size: 0.9em; text-align: right}

#contenu .marge {font-size:0.7em; padding:0}
#contenu .marge ul {font-size:1em; padding:0; margin:0 0 0.9em 3em; width:100%}
#contenu .marge li {margin:0; padding:0.1em 0}
#contenu p img {margin:0 0.5em 0 0; border:0}
div.recherche p {color:#111; font-size:1.1em; margin:0 0 1.3em 0.5em; padding:0}
div.recherche h2, div.recherche h3, div.recherche h4, div.recherche h5 {color:#012c5f; font-size:1.1em}
div.recherche h2.titre_recherche {font-weight:bold; font-size:1.3em; margin:0.6em 0 0.3em 0; padding:0}
div.recherche hr, #contenu .cantine hr {color:#c5c8d9; background-color:#c5c8d9; border:0; height:2px}
#laRecherche {margin:1em 0.5em 0.5em 1em}

#contenu .marge #agenda h1, #contenu .marge #actualite h1 {margin:0.4em 0.2em 0.4em 0}
#contenu .marge #agenda h2, #contenu .marge #actualite h2 {color:#555; font-size:1.51em; margin:0}
#contenu .marge #agenda p, #contenu .marge #actualite p {margin:0.3em 0.3em 1.2em 0.3em}
#contenu .marge #agenda p a, #contenu .marge #actualite p a {float:right}
#contenu .marge #agenda img, #contenu .marge #actualite img {float:left; margin:2px 5px 2px 0}
#contenu article div.type1 h2, div.type2 h2 {margin:0.55em 0.25em 0.35em 0; padding:0}

#contenu .cantine h3 {padding:0.3em 0.9em 0.2em 0.7em; background:#def; margin:0.3em 0 0 0; width:56%}
#contenu .cantine p img {float:none; vertical-align:middle; padding:0.15em 0.3em}
#contenu .cantine p.MenuDuJour {font-size:1.2em; padding:0.1em 0.5em 0.3em 1.5em; background:#f3f9ff; margin:0; width:56%}

#colLieu  {margin:0}
.listeLieu div.geo > img {width:37%}
div.geo > img {max-width: 360px !important}
div.annuaire {float:left}
h3.annuaire {color:#595959; line-height:1.77em; text-decoration: underline solid #595959 0.24em; text-underline-offset: 0.36em; margin: 0.5em 0 1em 0 !important; padding:0 !important}
p.annuaire {line-height:24px !important; margin: 5px 0 !important}
img.annuaire {
	background-color:#595959; border:1px solid #595959 !important; border-radius:50% !important;
	height:24px; width:24px; margin: 0 9px 0 0 !important;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
/* remember to highlight inserts somehow! */
ins {text-decoration:none}
del {text-decoration:line-through}
table {
	border-collapse:collapse;
	border-spacing:0;
} 
body {
	line-height:1;
	background:#fff;
	font:16px/1.4em 'PT Sans', sans-serif;
	color:#1c1c1c;
}
p, ul {margin:0 0 1.5em 0}
ul {
	list-style:disc;
	padding:0 0 0 20px;
}
a {color:#08438a}
h1 {line-height:1.3}
/*header*/
header {background:#F3F3F7; margin:0; padding:0}
/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
header:before, header:after {
	content:"";
	display:table;
}
header:after {clear:both}
/* For IE 6/7 (trigger hasLayout) */
header {zoom:1}
#site {
	background:#dfdfdf;
	clear:both;
	display: flex;
    align-items: center;
	height:auto;
	margin:0 auto;
	min-height:28px;
	overflow:hidden;
	padding:0 0.057em;
}
#site div {
	color:#373737;
	font-size:0.8em;
	margin:3px;
	padding:0;
}
#site div#officiel {
	display:none;
	float:left;
	text-align:left;
}
#site div#liensite {
	padding:0;
	text-align:right;
	display: flex;
    align-items: center;
    margin-left: auto;
}
#site div#liensite form {
	display:inline;
	margin:0 0.5em;
	padding:0;
}
#site div#liensite ul.liensite {
	display:inline;
	height:24px;
	list-style:none;
	list-style-type:none;
	margin:0 0.5em;
	padding:0;
}
#site div#liensite ul.liensite li  {
	display:inline;
	margin:0;
	padding:0;
}
#logo {
	background:url(../FR/images/Laon.png) top no-repeat;
	background-size:309px 103px;
	margin:7px 0 0 0;
	padding:0;
	min-height:134px;
	text-align:left;
}
.wrapper {
	background:#F3F3F7;
	text-align:center;
}
article div {margin: 1px 10px}
/* supprimer les liens bleus sur les n° de tel */
footer a[href^="tel:"] {
	/* css */
	color:#fff;
}	

/* pied de page */
footer {
	background:#005b9f;
	color:#fff;
	margin:0;
	padding:0;
}
footer #carte {
	display:none;
}
footer #coor {
	margin:0;
	padding:0;
}
footer #coor_ville {
	background:#232d5e url(../FR/images/carte_fond.gif) no-repeat bottom left;
}
footer #coor_ville h1 {
	background:none;
	font-size:1.7em;
	margin:0;
	padding:0.7em 0.6em;
	text-align:left;
}
footer #coor_ville p {
	color:#fff;
	margin:0;
	padding:0 1.3em 1em 1em;
	text-align:left;
}
#baspage {
	background:#11194a;
	display:block;
	margin:0;
	padding:0;
}
#liens {
	background:#0f1329;
	color:#fff;
	display:block;
	margin:0 auto;
	padding:1em 0;
	text-align:center;
	width:100%;
}
#liens ul {
	list-style:none;
	list-style-type:none;
}
#liens a {
	color:#fff;
}
#logo img.logo {height:103px;width:309px}
#page {display:none}

form:first-child {display:none}
.formulaire_inscription form, .formulaire_identification form, .formulaire_perdu form, .formulaire_detail form {display:block}
form#paiement:first-child {display:block}

#ariane {margin:0; min-height:17px; padding:0; width:100%}
#ariane a img {display:none}
#ariane span {display:block; font-size:0.77em; line-height:1.5em; margin:0; padding:7px}
#ariane span a {color:#1e1e1e; margin:0; padding:0; text-decoration:none; white-space:nowrap}
#ariane span span {color:#575757; display:inline; font-size:1em; margin:0; padding:0; text-decoration:none; white-space:nowrap}
#ariane a:hover {color:#000; text-decoration:underline}
#ariane b {color:#FFAA00; font-weight:bold}

a img{border:none}
#LIBHTM_MAPAGE{text-align:center}
#outer_wrapper{background-color:#fff; margin:0; padding:0; text-align:center}

.marge {margin:0; padding:0.77em 0.77em 0 0.77em}

#plan_site, #le_kiosque {font-size:1.4em}
#plan_site a, #le_kiosque a {text-decoration:underline}
#plan_site a:hover, #le_kiosque a:hover {text-decoration:underline}
#plan_site ul, #le_kiosque ul {margin:0 0 0.5em 0}
#plan_site li, #le_kiosque li {font-size:1.1em; margin:0 0 0.2em 0.3em}
#plan_site li li, #le_kiosque li li {font-size:0.93em; margin:0 0 0.2em 0.3em}
#plan_site li li li, #le_kiosque li li li {font-size:0.87em; margin:0 0 0.1em 0.3em}

/*div.formulaire_inscription, div.formulaire_identification, div.formulaire_detail, div.formulaire_perdu {
	background:#93b8e9; border:1px solid #336699; padding:0.5em; margin:0.5em}*/
div.paiement b, div#association b, div#fiche_association b, div#professionnels b, div#fiche_professionnels b {margin:0; padding:0.5em; background:#fff; color:#FF3300; display:block}
div.lettre p, div.paiement p, div.formulaire_inscription p, div.formulaire_identification p , div.formulaire_perdu p
 {border-bottom:1px solid #d3d3d3; display:block; margin:0.5em 0 0.3em 0; padding:0.37em 0; line-height:1.5}
div.lettre p:last-child, div.paiement p:last-child, div.formulaire_inscription p:last-child, div.formulaire_identification p:last-child , div.formulaire_perdu p:last-child
 {border:none}
div.lettre form, div.paiement form, .formulaire_inscription form, .formulaire_identification form, .formulaire_detail form, .formulaire_perdu form {background:#fcfcfc; border:1px solid #d3d3d3; padding:0; margin:0}
div.paiement label, div.lettre label, div.formulaire_inscription label, div.formulaire_identification label, div.formulaire_perdu  label, div.formulaire_detail  label {
	font-size:0.9em; margin:0; padding:0;
}
div.paiement input, div.lettre input, div.formulaire_detail input, div.formulaire_detail select, div.formulaire_inscription select, div.formulaire_identification select, div.formulaire_perdu select {
	border:1px solid #d3d3d3; padding:1px; margin:0; width:270px; height:2em}
div.lettre textarea, div.paiement textarea, div.formulaire_detail textarea, div.formulaire_inscription textarea, div.formulaire_identification textarea, div.formulaire_perdu textarea {
	border:1px solid #d3d3d3; padding:1px; margin:0; width:270px; height:10em}
div.formulaire_inscription input, div.formulaire_identification input, div.formulaire_perdu input, div.formulaire_detail input {margin:5px; width:40%}
div.formulaire_detail label {display:block; width:33%; float:left; text-align:right; font-size:1.2em; margin:5px}
.large {width:30em}
textarea.large {width:33em}
div.lettre input, div.lettre textarea {}

div.message {background:#F3F9FF; border:1px solid #def; padding:0.7em 1em; margin:0.7em 1em}
div.message p {text-align:right}
div.message p.lemessage {color:#0c386d; font-size:1.3em; font-style:italic; text-align:left}
div.formulaire_inscription h3, div.formulaire_identification h3, div.formulaire_detail h3, div.formulaire_perdu  h3 {margin:0; padding:0; color:#000033}
div.formulaire_identification span {display:block; text-align:center}
div.reglette {text-align:center; margin:1em; font-size:1.2em}
div.reglette b {font-size:1.1em}

#association div.formulaire_detail form label ul li, #fiche_association div.formulaire_detail form label ul li {font-size:0.8em}
#professionnels div.formulaire_detail form label ul li, #fiche_professionnels div.formulaire_detail form label ul li {font-size:0.8em}

div#colSMA {clear:both; float:left; margin:1em 0.3em; padding:1em 0.3em; width:57%}
div#colSMA li {margin:0.3em 0}

div#colSM {font-size:0.77em; height:100%; margin:0; overflow:auto; padding:0; width:55%}
div#colSM1 {float:left; height:100%; margin:0; padding:0; width:50%}
div#colSM2 {float:left;height:100%; margin:0; padding:0; width:50%}

div#colDroite {height:100%; margin:0; overflow:auto; padding:0}
#listeLieu {height:100%; margin:0; overflow:auto; padding:0}
#actus {height:100%; margin:0; overflow:auto; padding:0}

#association {height:100%; margin:0; overflow:auto; padding:0 0.7em; width:100%}
#comarquage, #professionnels {height:100%; margin:0; overflow:auto; padding:0; width:59%}
#fiche_association, #fiche_professionnels {height:100%; margin:0; overflow:auto; padding:0; width:100%}
.alerte, #association p.alerte, #fiche_association p.alerte, #fiche_professionnels p.alerte  {color:#FF3333; font-size:1.5em; font-weight:bold}

div.type1 {border-bottom:1px dotted #CCC; min-height:13em; padding:0.1em 0 0.3em 0}
div.type2 {border-bottom:1px dotted #CCC; min-height:9em; margin:0 0.5em 1em 0.5em; padding:0.1em 0 0.3em 0}
div.type1 img {float:left; margin:0 0 1em 0.3em}
div.type1 p, div.type2 p {line-height:1.1em; padding:0.25em 0 0 0}
div.type1 p a {font-size:0.9em; font-style:italic}

div.deliberation ul {margin:0; padding:0 0 0 2em}
div.deliberation h4 {margin:0 0 1.3em 1em; padding:0}

div.groupe {margin:0.1em 0 0.7em 0; min-height:12em; padding:0 0 0 0; width:auto}
div.groupeCulture, div.groupeSports, div.groupeSocial, div.groupeVieLaonnoise, div.groupeService
{background:#FFF; margin:0.7em 0.3em 0.7em 0.3em; min-height:12em; padding:0}
/*
div.groupe				{background:#FFF; border:1px solid #E2C3FF; border-top:none}
div.groupeCulture		{background:#FFF; border:1px solid #FFDFDC; border-top:none}
div.groupeSports		{background:#FFF; border:1px solid #B8D7FF; border-top:none}
div.groupeSocial		{background:#FFF; border:1px solid #BBFFBB; border-top:none}
div.groupeVieLaonnoise	{background:#FFF; border:1px solid #E2C3FF; border-top:none}
div.groupeService		{background:#FFF; border:1px solid #EDDC3C; border-top:none}
*/
div.groupe h2, div.groupeCulture h2, div.groupeSports h2, div.groupeSocial h2, div.groupeVieLaonnoise h2, div.groupeService h2
{margin:0 0 0.5em 0; padding:0}
div#colonne1 div.groupe h2, div#colonne2 div.groupe h2 {height:24px}
div.groupeCulture h2		{background:#A12828; height:24px}
div.groupeSports h2		{background:#0054A9; height:24px}
div.groupeSocial h2		{background:#006400; height:24px}
div.groupeVieLaonnoise h2	{background:#783697; height:24px}
div.groupeService h2		{background:#783697; height:24px}
div#colonne1 div.groupe h2:hover, div#colonne2 div.groupe h2:hover {}
div.groupe h2 a, div.groupe h2 span {}
div.groupeCulture h2 a, div.groupeSports h2 a, div.groupeSocial h2 a, div.groupeVieLaonnoise h2 a , div.groupeService h2 a ,
div.groupeCulture h2 span, div.groupeSports h2 span, div.groupeSocial h2 span, div.groupeVieLaonnoise h2 span, div.groupeService h2 span
{background:none; color:#FFF; display:block; font-size:0.83em; font-weight:normal; height:22px; margin:0 0 0 7px; padding:0 0 0 0.3em}
div.groupe h2 a:hover {color:#000}
div.groupeCulture h2 a:hover, div.groupeSports h2 a:hover, div.groupeSocial h2 a:hover, div.groupeVieLaonnoise h2 a:hover, div.groupeService h2 a:hover {background:none; color:#FFF; text-decoration:none}

.groupe a, .groupeCulture a, .groupeSports a, .groupeSocial a, .groupeVieLaonnoise a, .groupeService a {height:22px; text-decoration:none}
.groupe a:hover, .groupeCulture a:hover, .groupeSports a:hover, .groupeSocial a:hover, .groupeVieLaonnoise a:hover, .groupeService a:hover {text-decoration:underline}
 .groupe a				{color:#0054A9}
 .groupeCulture a		{color:#A12828}
 .groupeSports a			{color:#0054A9}
 .groupeSocial a			{color:#006400}
 .groupeVieLaonnoise a	{color:#783697}
 .groupeService a		{color:#E0C5E2}

.groupe img, .groupeCulture img, .groupeSports img, .groupeSocial img, .groupeVieLaonnoise img, .groupeService img {margin:0 0.3em 0 0; vertical-align:middle}

div.groupe h3, div.groupeCulture h3, div.groupeSports h3, div.groupeSocial h3, div.groupeVieLaonnoise h3, div.groupeService h3
{margin:0 0.5em 0.1em 2.1em; padding:0 0 0 0; text-align:left; font-size:1.3em; font-weight:bold}
div.groupe h3, div.groupe h4						 {color:#783697}
div.groupeCulture h3, div.groupeCulture h4			 {color:#A12828}
div.groupeSports h3, div.groupeSports h4			 {color:#0054A9}
div.groupeSocial h3, div.groupeSocial h4			 {color:#006400}
div.groupeVieLaonnoise h3, div.groupeVieLaonnoise h4 {color:#783697}
div.groupeService h3, div.groupeService h4 			{color:#E0C5E2}

 div.groupe ul, .groupeCulture ul, .groupeSports ul, .groupeSocial ul, .groupeVieLaonnoise ul, .groupeService ul
{font-size:1.2em; list-style:square; padding:0 0 0 2em}
 div.groupe li			{color:#783697}
 .groupeCulture li		{color:#A12828}
 .groupeSports li		{color:#0054A9}
 .groupeSocial li		{color:#006400}
 .groupeVieLaonnoise li	{color:#783697}
 .groupeService li	{color:#E0C5E2}
 div.groupe li a, .groupeCulture li a, .groupeSports li a, .groupeSocial li a, .groupeVieLaonnoise li a, .groupeService li a {color:#333; font-weight:bold}
 div.groupe a:hover				{color:#783697; text-decoration:underline}
 .groupeCulture a:hover			{color:#A12828; text-decoration:underline}
 .groupeSports a:hover			{color:#0054A9; text-decoration:underline}
 .groupeSocial a:hover			{color:#006400; text-decoration:underline}
 .groupeVieLaonnoise a:hover		{color:#783697; text-decoration:underline}
 .groupeService a:hover			{color:#E0C5E2; text-decoration:underline}

.element h3 {margin:1em; padding:0}
#association p, #fiche_association p, #fiche_professionnels p {color:#111; margin:0.5em 1em 0.5em 2em}

#comarquage div.groupe {padding:0 0 0 0; margin:0.4em 0 0.7em 0; border:1px solid #70a0dd; background:#eefaff}

div.groupe .element, div.groupeCulture .element, div.groupeSports .element, div.groupeSocial .element, div.groupeVieLaonnoise .element, div.groupeService .element
{padding:0 0.7em; margin:0 0.31em 0.7em 0.31em}
div.groupe .element				{background:#FCF3FF; border:1px solid #E2C3FF}
div.groupeCulture .element		{background:#FFF8F5; border:1px solid #FFDFDC}
div.groupeSports .element		{background:#F1FBFF; border:1px solid #B8D7FF}
div.groupeSocial .element		{background:#EEFFEE; border:1px solid #BBFFBB}
div.groupeVieLaonnoise .element	{background:#FCF3FF; border:1px solid #E2C3FF}
div.groupeService .element		{background:#FFFFF3; border:1px solid #E0C5E2}

#comarquage #aGauche {float:left; margin:0; padding:0; width:63%}
#comarquage #aDroite {float:right; width:35%}
div#comarquage b {margin:0; padding:0}

.fluxRSS {background:#f3f3f3; border:1px solid #bbb; margin:0.3em 0 0.3em 0; padding:0.5em 1em 0.3em 1em}
.fluxRSS h3 {margin:0; padding:0}
.fluxRSS h4 {margin:0.5em; padding:0}
.fluxRSS h3 a {color:#335; font-size:0.83em; font-weight:bold; text-decoration:none}
.fluxRSS h4 a {color:#335; font-size:0.83em; font-weight:bold; text-decoration:none}
.fluxRSS p {color:#335; margin:0.5em; padding:0}
.fluxRSS a {color:#335}
.fluxRSS a:hover {text-decoration:underline}
.fluxRSS a.suite {font-style:italic; text-decoration:underline; font-size:0.95em}

div.groupe h2 {margin:0; padding:0.3em; text-align:center}
div.groupe h2:hover {background:#d0e0ff; text-align:center}
div.groupe h2 a {text-decoration:none}
div.groupe h2 a:hover {text-decoration:none}

div.groupe h3 {margin:0 1px 1px 0; padding:0 0 0 0; text-align:center; font-size:1.3em; font-weight:bold}

#comarquage div.groupe h2 {margin:0; padding:0.3em; text-align:center; background:#ddeeff}
#comarquage div.groupe h2:hover {text-align:center; background:#d0e0ff}
#comarquage div.groupe h2 a {text-decoration:none}

#comarquage div.groupe h3 {margin:0.3em; padding:0.3em; text-align:center; background:#ddeeff}
#comarquage div.groupe h3:hover {background:#d0e0ff; text-decoration:none}
#comarquage div.groupe h3 a {text-decoration:none}

#comarquage ul.Liste_comarquage {background:#eefaff; border:1px solid #70a0dd; font-size:1.17em; list-style:none; margin:0.3em 0 0.3em 0; padding:0.5em 1em 0.3em 1em}
#comarquage ul.Liste_comarquage li {border-bottom:1px solid #70a0dd; padding:0.3em 0 0.2em 0.3em}
#comarquage ul.Liste_comarquage li a {font-weight:bold; text-decoration:none}
#comarquage ul.Liste_comarquage li a:hover {text-decoration:underline}
#comarquage ul.Liste_comarquage ul {list-style:none}
#comarquage ul.Liste_comarquage li li {border:none; font-size:0.87em; padding:0 0 0.2em 0}
#comarquage ul.Liste_comarquage li li a {font-weight:normal; text-decoration:none}
#comarquage ul.Liste_comarquage a.suite {font-style:italic; text-decoration:underline; font-size:1em}

#QuestionReponse, #CommentFaireSi, #SousThemePere {border:1px solid #70a0dd; font-size:0.9em; overflow:hidden; margin:0.3em 0 0.3em 0; padding:0 0.3em 0 0.7em}
#QuestionReponse ul li a, #CommentFaireSi ul li a, #SousThemePere ul li a {font-size:1.13em}
#Reference, #LienWeb, #Dossier, #PourEnSavoirPlus, #VoirAussi, #ServiceEnLigne, #CentreDeContact, #OuSAdresser, #SiteInternetPublic, #InformationComplementaire, #Partenaire {border:1px solid #70a0dd; font-size:0.9em; overflow:hidden; margin:0.3em 0 0.3em 0; padding:0}

#CentreDeContact .Contact, #OuSAdresser .Contact {border-bottom:1px solid #70a0dd; margin:0.1em 0.3em 0.5em 0.3em; padding:0 0 0.2em 0}

#LienWeb h3, #PourEnSavoirPlus h3, #VoirAussi h3, #ServiceEnLigne h3, #CentreDeContact h3, #OuSAdresser h3, #SiteInternetPublic h3, #Reference h3, #InformationComplementaire h3, #Partenaire h3 {background:#EEF; font-weight:bold; font-size:1.2em; margin:0; padding:0.3em 0.7em}
#OuSAdresser .Contact h3 {background:none; font-size:1.1em; padding:0 0 0 0.2em}

#CentreDeContact h4, #Reference h4, #InformationComplementaire h4, #Partenaire h4 {font-size:1.1em; font-weight:normal; margin:0.1em 0.3em 0.5em 0.5em; padding:0}
#LienWeb h4, #OuSAdresser h4 {font-size:1.1em; font-weight:normal; margin:0 0.1em 0.3em 0.3em; padding:0}
#SiteInternetPublic h4 {margin:0.1em 0.3em 0.2em 0.5em; padding:0}

#LienWeb p, #OuSAdresser p {font-size:1.1em; margin:0 0.1em 0 0.3em; padding:0}
#CentreDeContact p, #SiteInternetPublic p {font-size:1.1em; margin:0.1em 0.3em 0.5em 0.5em; padding:0}
#PourEnSavoirPlus p, #ServiceEnLigne p {border-bottom:1px dotted grey;font-size:1.1em; margin:0.1em 0.2em 0.4em 0.2em; padding:0 0.1em 0.4em 0.3em} 

#aDroite #InformationComplementaire ul li {margin:0; padding:0}
#comarquage #VoirAussi ul {list-style:none; margin:0; padding:0}
#comarquage #VoirAussi li {margin:0 0 0.5em 0; padding:0}

#colSM h3 a#actif, #colSM1 h3 a#actif, #colSM2 h3 a#actif {
	background:#F90 url(images/menu/fond_menu_principal_ov.gif) repeat-x top;
	color:#000;
}
#colSM h3 a#actif2, #colSM1 h3 a#actif2, #colSM2 h3 a#actif2 {
	background:#F90 url(images/menu/fond_menu_principal_ov.gif) repeat-x top;
	color:#000;
}
 #colSM h3 a, #colSM1 h3 a, #colSM2 h3 a, #colSM h3 span, #colSM1 h3 span, #colSM2 h3 span {background:#1B57A9 url(images/menu/fond_menu_principal.gif) repeat-x top;
	display:block; margin:0;
  padding:0.31em 0.77em;
	text-decoration:none;
	color:#FFF;	
}
#colSM h3 a:hover ,#colSM1 h3 a:hover, #colSM2 h3 a:hover {
	background:#F90 url(images/menu/fond_menu_principal_ov.gif) repeat-x top;
	color:#000;
}

#colDroite h3 a#actif, #colDroite h3 a#actif2 {background:#DEF; border:1px solid #CDE}
#listeLieu h3 a#actif, #listeLieu h3 a#actif2 {background:#DEF; border:1px solid #CDE}

#colDroite h3 a, #colDroite h3 span {
	background:#FFF; border:1px solid #DEF; padding:0.3em; margin:0; overflow:hidden; width:98%; display:block}
#listeLieu h3 a, #listeLieu h3 span {
	background:#FFF; border:1px solid #DEF; padding:0.3em; margin:0; overflow:hidden; width:98%; display:block}
#colDroite h3 a:hover {background:#def; border:1px solid #CDE}
#listeLieu h3 a:hover {background:#def; border:1px solid #CDE}

.info {background:#F5F5F7;border-radius: 13px;display:inline-block;padding:0.25em;margin:0.35em 0;overflow:hidden;min-height:13em;}

h3.agenda, h3.actualite {clear:both; font-style:italic; font-weight:bold}
p.agenda, p.actualite  {text-align:center}
p.menu_semaine {text-align:center; width:56%}

.clearfix:after {
  content:"."; display:block; 
  height:0; clear:both; visibility:hidden;
}
.clearfix {display:inline-block}

/* Hides from IE-mac \*/
* html .clearfix {height:1%}
.clearfix {display:block}
/* End hide from IE-mac */
/*border:1px solid #70a0dd; */
#alaunes_cadre {margin:4px 0 0 0; padding:1px; overflow:hidden; font-size:1.2em}
#alaunes {margin:0; padding:0; overflow:hidden}
#vignettes {float:right; background:#c9e1ff; width:31%; margin:0}
.vignete {margin:0; }
div.lesactus {background:#dd008c; color:#fff; margin:0 0 15px 0}
.vignette:hover, div.lesactus:hover {}
.vignette:hover h3, div.lesactus:hover h3 {}
.vignette:hover p, div.lesactus:hover p, div.vignette:hover a, div.lesactus:hover a {}
.vignette img {padding:2px; margin:0}
div.lesactus img {padding:0; margin:0 0.3em 0 0}
div.lesactus img.moyenne {padding:0; margin:0}
.vignette h3, div.lesactus h3 {color:#fff; padding:0; margin:0.3em; font-size:1em; font-weight:bold}
.vignette p, div.lesactus p {color:#fff; font-size:0.83em; padding:0; margin:0.3em 0.5em; }
.vignette a {color:#fff; text-decoration:none}
div.lesactus a {color:#fff; font-size:0.9em; text-decoration:none}
div.lesactus a i {text-decoration:underline}
.vignette a:hover, div.lesactus a:hover {color:#fff}

/*.vignette div {float:right; width:62%}*/

#unes {float:left; width:100%; background:#FFF}
div.une {color:#FFF; height:240px; margin:0; min-height:240px; overflow:hidden; position:relative}
div.une div {float:right; font-size:0.9em; height:100%; margin:0; padding:0 0.3em; width:39%}
div.une h3 {color:#FFF; font-size:1.24em; font-weight:bold; margin:0; padding:0.3em}
div.une p {color:#FFF; font-size:1m; margin:0; padding:0.3em}
div.une a {bottom:31px; color:#FFF; font-size:0.97em; margin:0; padding:0; position:absolute; text-decoration:underline; width:37%}
div.une a:hover {color:#c9e1ff}
div.une img.alaune_h {}
div.une img.alaune_b {bottom:0; position:absolute}

#v1_sel div, #v2_sel div, #v3_sel div, #v4_sel div, #v5_sel div, #v6_sel div {background:url(images/translucide_0a2e5b_degrade.png) repeat; }
article table {border:1px solid #589cc5; margin:0 1em}
article table tr td{padding:0.1em 0.3em}
#articles {margin:0.36em 0em 0.57em 0; padding:0.3em}
#articles td p {width:100%}
#articles li {font-size:1em}
.geo {background:#F1F1F1; border-radius:13px; color:#000; font-size:0.88em; margin: 1em 0; overflow:hidden; padding:0.7em} /* clear:left */
#colDroite .geo {border-radius:13px 0 0 13px}
.lesliens {background:#E7E7E7;  border-radius:13px 0 0 13px; color:#000; font-size:0.88em; margin:1em 0 1em 1em; overflow:hidden; padding:0.7em} /* clear:left */
#kiosques {background:#EAEAEA; border-radius: 13px 0 0 13px; color:#000; font-size:0.88em; margin:1em 0 1em 1em; overflow:hidden; padding:0.7em} /* clear:left */

#kiosques h3 {color:#000; font-size:1.1em; font-weight:bold; margin:0; padding:0}
.lesliens h3 {color:#000; font-size:1.1em; font-weight:bold; margin:0; padding:0}
.geo h4 {color:#000; font-size:1.1em; font-weight:bold; margin:0; padding:0}
.geo h5 {color:#000; margin:0.2em 0 0 0; padding:0.2em 0 0 0}
#colDroite div.geo p {color:#000; line-height:1.2em; margin:0.3em 0; padding:0 0.3em; width:95%}
div#kiosques p, div.lesliens p {color:#000; line-height:1.2em; margin:0.3em 0; padding:0; width:100%}
#colDroite div.geo a, div#kiosques a, div.lesliens a {color:#000}

ul#elan {padding:0; margin:0; list-style:none}
ul#elan li {padding:0; margin:0.3em 0 0 0}
ul#elan li a {padding:0; margin:0; font-size:1.1em; min-height:24px; text-decoration:none}
ul#elan li a:hover {text-decoration:underline}
ul#elan li a span {padding:0.4em 0 0 0; margin:0; display:block; min-height:24px}
ul#elan li a:hover span {background:#a3c5f0}
ul#elan li a img {padding:0 0.31em 0 0; float:left; border:0}

.cat {color:#000; cursor:pointer; display:block; font-size:1em; margin:0; padding:0; text-decoration:none}
.cat:hover {color:#000; background:#aad4ff}
.subMenu {margin:0;padding:0}

.arretes div {border-bottom:1px dotted #CCC; margin:0 0 1em 0; min-height:3em}
.arretes img {float:left; margin:0.5em 0.3em 0 0; padding:0 0 0 0}
.arretes h3 {margin:0.1em 0 0 1.2em; padding:0 0 0 1em}
.arretes p, .arretes form{margin:0 0 0.7em 1.3em; padding:0 0 0 1.3em}
.heure {font-size: 0.9em}

/* plan interactif */
.plan_interactif {}
#menu_carte {float:left; margin:0; min-height:500px; padding:0}
#panTo {margin:0; padding:0; min-width:13em; max-width:16em; width:16em; list-style:none}
ul#panTo ul p {font-size:1em; background-size: 31px; background-position: left; background-repeat: no-repeat; margin:0; padding:0 0 0 31px; vertical-align:middle}
ul#panTo ul p span {display: block; margin: 0px; padding: 8px 0}

.lieu {
	cursor:pointer;
	display:block;
	color:#000;
	font-size:0.81em;
	text-decoration:none;
	margin:0;
	padding:0;
}
.lieu:hover {background:#aad4ff; color:#000}

#contenu .marge #menu_carte ul {padding:0; margin:0}
#contenu .marge #menu_carte ul {font-size:1em; padding:0; margin:0}
#contenu .marge #menu_carte li {padding:0}
#contenu .marge #menu_carte h2 {padding:0; margin:0}

#menu_carte ul {margin:0; padding:0}
#menu_carte li {margin:0; padding:0}
#menu_carte ul li ul {margin:0; padding:0}
#menu_carte ul li ul li {margin:0; padding:0}

#ctrl, #test1 {margin:5px 15px; text-align:center; font-size:0.97em}
.gmap3 {border:1px solid #C0C0C0; float:right; height:500px; margin:10px; max-height:500px; max-width:1000px; width:65%}
/*#gmap {border:1px solid #C0C0C0; height:650px; margin:10px 0 10px 0; width:99%}*/
.plan_interactif:after {
	display: block;
	content: "";
	clear: both;
}
/* fin plan interactif */

/* media queries pour les affichages sur une fenetre de plus de 768px de large */
@media only screen and (min-width:769px) {
	#btn_menu {display:none;}
	#menu {display:block}
	ul#principal {
		background:#51bbdd url(../FR/images/F3F3F7.png) repeat-x bottom;
		margin:0;
		padding:7px 0 0 0;
		text-align:center;
	}
	#principal li {
		display:inline;
		font-size:0;
		list-style:none;
		position:relative;
	}
	#principal li a {
		display:inline-block;
		font-size:12px;
		font-size:0.8rem;
		margin:0 0.4vw;
		padding:0 0.5vw;
	}
	#principal li ul.sousmenu {
		margin:0 0.2%;
		padding:0;
		width:auto;
		min-width:230px;
	}
	#principal li:hover .sousmenu {
		display:block;
		position:absolute;
		left:0;
	}
	#principal ul.sousmenu li {
		border:0;
		display:block;
		float:none;
		margin:0;
		padding:0;
		white-space:nowrap;
	}
	#principal ul.sousmenu li a {
		background:#fff;
		border:0;
		color:#000;
		display:block;
		font-weight:normal;
		height:2em;
		letter-spacing:0;
		line-height:2em;
		margin:0;
		padding:0 1em;
		text-align:left;
		text-decoration:none;
		text-transform:none;
	}
	#principal ul.sousmenu li a:link, #principal ul.sousmenu li a:visited {}
	#principal ul.sousmenu li a:hover {background:#e7e7e7}
	#principal li .sousmenu .soussousmenu {
		display:none;
		margin:0 0 0 300px;
		padding:0;
	}
	.rouge 		{border-bottom:7px solid #cd0072}
	.jaune 		{border-bottom:7px solid #f6cb00}
	.bleu 		{border-bottom:7px solid #007db5}
	.vert 		{border-bottom:7px solid #00b34e}
	.bleufonce 	{border-bottom:7px solid #26315e}
	.violet 	{border-bottom:7px solid #682c9b}
	#principal li .sousmenu .soussousmenu {display:none; position:absolute}
	/* menu direct Toutes des démarches | Annuaire des services | Plan interactif | Travaux | Lettre d'information */

	ul#direct {
		background:none;
		height:121px;
		list-style:none;
		margin:0 1px 0 0;
		padding:32px 1.7% 0 0;
		text-align:right;
	}
	ul#direct img {height:45px; width:45px}
	#direct li a {
		color:#373737;
		display:inline-block;
		margin:0;
		text-align:center;
		text-decoration:none;
		vertical-align:top;
	}
	#direct li a:hover {text-decoration:underline}
	#direct li a span {
		display:block;
		line-height:1.2;
		font-size:0.73em;
		width:5.1em;
	}
	.info img {float:left}
	.info p {margin:0 0 0.3em 0; padding:0 7px 0 142px}
	.alaune .uneImg {
		float:left;
		margin:0 0.5em 0 0;
		max-height:340px;
		max-width:510px;
		width:510px;
	}
	#agenda_manif, #actu_even1, #actu_even4, #actu_even7, #media_medium {
		display:table;
		table-layout:fixed;
		width:100%;
	}
	#agenda_manif div, #actu_even1 div, #actu_even4 div, #actu_even7 div, #media_medium div {
		display:table-cell;
		text-align:center;
		vertical-align:top;
		width:33.33%;
	}
	#agenda_manif div.dx, #actu_even1 div.dx, #actu_even7 div.dx, #media_medium div.dx {
		border-left:10px solid #F3F3F7;
		border-right:10px solid #F3F3F7;
	}
	#agenda h1, #actu h1, #media h1 {font-size:1.7em}
	#agenda h2, #actu h2 {font-size:1.5em}
	#agenda_manif h2, #actu_even1 h2, #actu_even4 h2, #actu_even7 h2, #media_medium h2 {font-size:1.5em}
	#agenda h3 {font-size:1.2em}
	#agenda_manif h3, #actu_even1 h3, #actu_even4 h3, #actu_even7 h3, #media_medium h3 {font-size:1.2em}
	#agenda_manif div img {
		max-height:400px;
		max-width:267px;
	}
	#actu_even1 div img {}
	#agenda_manif:after, #actu_even1:after, #actu_even4:after, #actu_even7:after {
		display:block;
		content:"";
		clear:both;
	}

	/* Content slider > Standard */
	.contentslider-std{min-height:340px;padding:10px 21px}

	/* Panel */
	.contentslider-std .sliderkit-panels{max-height:340px;min-height:340px;min-width:710px}
	.contentslider-std .sliderkit-panel{max-height:340px;min-height:340px;min-width:710px}

	/* Panels buttons */
	.contentslider-std .sliderkit-go-btn{display:block;position:absolute;top:40%;z-index:10}
	.contentslider-std .sliderkit-go-prev{left:3px}
	.contentslider-std .sliderkit-go-next{right:3px}
	.contentslider-std .sliderkit-go-btn a{display:block;width:15px;height:40px;cursor:pointer;background:transparent url("images/arrows-h-big.png") no-repeat 0 0}
	.contentslider-std .sliderkit-go-prev a{background-position:-30px 0}
	.contentslider-std .sliderkit-go-next a{background-position:-15px 0}
	.contentslider-std .sliderkit-go-prev a:hover{background-position:-90px 0}
	.contentslider-std .sliderkit-go-next a:hover{background-position:-75px 0}
	.contentslider-std .sliderkit-go-btn span{display:none}

	#contenu article .UneImage {float:right;margin:14px}
	#contenu article .UneImage img {max-height:480px;max-width:720px}
	#contenu article .UneImage p {
		font-size:0.9em;
		font-style:italic;
		text-align:center}
	#contenu article table img {float:none}
	#contenu article #plan_site img {float:left; margin:0 0.5em}
	#contenu #colonne1 {float:left}
	#contenu #colonne2 {float:right}
	#contenu #colonne1, #contenu #colonne2 {padding:0; width:49%}
	#contenu #colonne1 img, #contenu #colonne2 img {
		float:left;
		height:100px;
		width:150px;
	}
	#manif p {padding: 0 0 0 154px}
	#listeLieu img {float: left; margin: 5px 15px 5px 5px}

	#logo {
		background:url(../FR/images/Laon.png) 7px 18px no-repeat;
		background-size:300px 100px;
		margin:8px 0 0 0;
		min-height:153px;
	}
	#logo img.logo {float:left; height:100px; width:300px}
	#site div#officiel {display:block}

	footer {display:table; table-layout:fixed; width:100%}
	footer #carte {
		background:url(../FR/images/carte_828.gif) no-repeat bottom right;
		display:table-cell;
		text-align:center;
		vertical-align:top;
		width:50%;
		max-width:512px;
	}
	footer #coor {
		display:table-cell;
		vertical-align:top;
		width:50%;
		max-width:512px;
	}
	#baspage {clear:both; text-align:center}
	#liens {max-width:1024px}
	#liens ul li {
		display:inline;
		font-size:1.1em;
		margin:0 0.5em;
	}
	#ariane {min-height:36px}
	/* #ariane a img {border:0; display:block; float:left; margin:0; padding:0 0.5em 0 0; vertical-align:middle} */
	#ariane a img {border:0; display:block; float:left; margin:0 7px; padding:0; vertical-align:middle; background-color:#565656; border-radius:50%}
	#ariane span {font-size:0.93em}

	.mois p {font-weight:bold; text-align:center}
	#affichage_agenda {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#agenda1, #agenda2 {
		display: table-cell;
		vertical-align: top;
		width: 50%;
	}
	#agenda1 div.info, #agenda2 div.info {margin:3px; width:100%; padding:0.5em;}
	article div {text-align:center}
	div#colDroite {float:right; width:25%}
	div.groupeCulture, div.groupeSports, div.groupeSocial, div.groupeVieLaonnoise, div.groupeService
	{float:left; margin:0.7em 0.3em 0.7em 0.3em; min-height:12em; width:23.7%}
	#listeLieu {display: table; table-layout: fixed; width: 100%}
	#listeLieu div.listeLieu1, #listeLieu div.listeLieu2 {
		display: table-cell;
		margin:0 1em;
		padding:0 1em;
		vertical-align: top;
	}
	#actus {float:right; width:25%}
	div.lesactus {text-align:center}
	div.lesactus img.moyenne {height:160px; margin:0.7em 0; width:240px}

	#manif img {float:left; margin: 20px 20px 20px 10px}
	div.lettre form, div.paiement form, .formulaire_inscription form, .formulaire_identification form, .formulaire_perdu form {margin:0.5em 1em; padding:0.2em}
	div.lettre p, div.paiement p, .formulaire_inscription p, .formulaire_identification p, .formulaire_perdu p {margin:0; padding:0.1em 0.2em 0.3em 0.2em; line-height:1.5}
	div.paiement input, div.lettre input, div.formulaire_detail input, div.formulaire_detail select, .formulaire_inscription select, .formulaire_identification select, div.formulaire_perdu select {
		padding:1px; margin:0; width:350px; height:2.5em}
	div.lettre textarea, div.paiement textarea, div.formulaire_detail textarea, .formulaire_inscription textarea, .formulaire_identification textarea, div.formulaire_perdu textarea {
		padding:1px; margin:0; width:500px}
	div.paiement label, div.lettre label, div.formulaire_inscription label, div.formulaire_identification label, div.formulaire_perdu  label, div.formulaire_detail  label {font-size:1.1em}
}

/* media queries pour les affichages sur une fenetre de plus de 1024px de large*/
@media only screen and (min-width:1025px) {

	#menu {margin:auto}
	#principal li a {
		font-size:15px;
		font-size:0.95rem;
		margin:0 1%;
	}
	#principal li ul.sousmenu  {border-radius: 5px; background-color:#FFF; margin:0 1%}
	.rouge 		{border-bottom:9px solid #cd0072}
	.jaune 		{border-bottom:9px solid #f6cb00}
	.bleu 		{border-bottom:9px solid #007db5}
	.vert 		{border-bottom:9px solid #00b34e}
	.bleufonce 	{border-bottom:9px solid #26315e}
	.violet 	{border-bottom:9px solid #682c9b}
	ul#direct {height:105px; padding:24px}
	ul#direct img {height:48px; width:48px}
	#direct li a {margin:0 0.05%}
	#direct li a span {font-size:0.83em; width:6.7em}

	#agenda, #actu, #media {margin:0 auto; width:95%; min-width:1000px; max-width:1400px}
	#media {margin:1.5em auto 1.5em auto}
	#agenda h1, #actu h1, #media h1 {font-size:1.7em}
	.alaune{
		margin:0 auto;
		min-width:950px;
		max-width:1150px;
		width:90%;
	}
	.alaune .uneImg {
		margin:0 0.77em 0 0;
		height:400px;
		width:600px;
		max-height:400px;
		max-width:600px;
	}
	.alaune h1 {font-size:1.36em}
	.alaune p {font-size:1em}
	/*
	#agenda_manif div img {
		height:auto;
		width:85%;
		max-height:450px;
		max-width:300px;
	}

	.contentslider-std .sliderkit-panels{width:1154px;height:500px;overflow:hidden;padding:0}
	.contentslider-std .sliderkit-panel{width:1134px;height:500px;overflow:hidden;padding:0}
	*/

	/* Content slider > Standard */
	.contentslider-std{
		min-height:400px;padding:10px 40px;
		margin:0 auto;
		width:90%;
		min-width:920px;
		max-width:1400px}

	/* Panel */
	.contentslider-std .sliderkit-panels{min-height:400px;min-width:920px}
	.contentslider-std .sliderkit-panel{min-height:400px;min-width:920px}

	/* Panels buttons */
	.contentslider-std .sliderkit-go-prev{left:5px}
	.contentslider-std .sliderkit-go-next{right:5px}
	.contentslider-std .sliderkit-go-btn a{width:30px}
	.contentslider-std .sliderkit-go-next a{background-position:0 0}
	.contentslider-std .sliderkit-go-next a:hover{background-position:-60px 0}

	#contenu article {
		margin: auto;
		width: 95%;
		min-width: 1024px;
		max-width: 1400px;
	}
	#contenu article img {max-height:500px; max-width:750px}
	#contenu #colonne1 img, #contenu #colonne2 img {
		float:left;
		height:120px;
		width:180px;
	}
	#contenu article #agenda #affichage_agenda div.info img {height:240px; width:160px}
	#contenu article #agenda #affichage_agenda div.info p {text-align:left; font-size: 1em;}
	#manif p {padding: 0 0 0 261px}
	
	.wrapper, liens {
		position:relative;
		width:100%;
		min-width:1000px;
	}
	header {
		margin:0 auto;
		width:95%;
		min-width:1000px;
		max-width:1900px;
	}
	#logo {
		background:url(../FR/images/Laon.png) 15px 9px no-repeat;
		background-size:330px 110px;
		margin:0;
		min-height:186px;
	}
	#logo img.logo {height:120px;width:360px}

	.info {width:47%;margin:3px; padding:0.5em;}
	.info p {padding:0 10px 0 370px}
	#affichage_agenda .info p {padding:0 10px 0 250px}
	footer #carte, footer #coor {
		margin:0;
		width:50%;
		min-width:512px;
		max-width:630px;
	}
}

/* media queries pour les affichages sur une fenetre de plus de 1280px de large*/
@media only screen and (min-width:1281px) {
	.wrapper, #liens {
		margin:auto;
		width:1900px;
		min-width:1260px;
		max-width:100%;
	}
	#logo {background-size:427px 152px; min-height:186px}
	#logo img.logo {height:150px;width:450px}
	footer #carte, footer #coor {margin:0}
	footer #coor #coor_ville {margin:0}

	.alaune .uneImg {
		height:auto;
		width:75%;
		max-height:500px;
		max-width:750px;
	}
	/* Content slider > Standard */
	.contentslider-std{min-height:500px;padding:13px 57px}

	/* Panel */
	.contentslider-std .sliderkit-panels{width:100%;height:500px;max-height:500px;min-height:500px;min-width:1140px; max-width:1400px}
	.contentslider-std .sliderkit-panel{width:100%;height:500px;max-height:500px;min-height:500px;min-width:1140px; max-width:1400px}

	/* Panels buttons */
	.contentslider-std .sliderkit-go-prev{left:15px}
	.contentslider-std .sliderkit-go-next{right:15px}
	.contentslider-std .sliderkit-go-btn a{width:30px}
}