/* CSS Document */

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:#d3d3d3;
	clear:both;
	display: flex;
    align-items: center;
	height:auto;
	margin:0 auto;
	min-height:28px;
	overflow:hidden;
	padding:0 1em;
}
#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.7em 0 0 0; width:100%}
#ariane a img {display:none}
#ariane span {display:block; font-size:0.77em; line-height:1.5em; margin:0; padding:0}
#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.5em;margin:0.35em 0.45em;overflow:hidden;min-height:13em;width:100%}

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}

.lieu {
	cursor:pointer;
	display:block;
	color:#000;
	font-size:0.81em;
	text-decoration:none;
	margin:0;
	padding:0;
}
.lieu:hover {background:#aad4ff; color:#000}
.lieu p {margin:0; padding:0 0 0 26px; vertical-align:middle}
.lieu p span {display:block; margin:0; padding:1px 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}

/* media queries pour les affichages sur une fenetre de plus de 768px de large*/
@media only screen and (min-width: 769px) {
#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:20px}
#ariane a img {border:0; display:block; float:left; margin:0; padding:0 0.5em 0 0; vertical-align:middle}
#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}
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) {
.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%}
.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;
}
}