/* CSS Document */
/* CSS conçus grace aux tutoriels et aux coneils des 
sites www.alsacreations.com et http://openweb.eu.org 
qu'ils en soient remerciés.

Cette feuille de style défini la mise en page du site secourisme-pratique.com
Cette mise en page originale est la propriété de MIKLC (www.mikaweb.org)

Les BLOCS de menu sont au niveau de la ligne 208
Les autres BLOCS sont au niveau de la ligne 324
Les CLASS sont à la ligne 448


***********************************
  GENRALITES : Balises modifiées
 classées par ordre alphabétique
***********************************/

A {color:#0000CC}
A:hover {color: black; text-decoration:none}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10pt;
	font-style: normal;
	background:#FFFFFF;
	text-align:justify;
	color: #000000
	}
	
form {margin:0; padding: 0}
input {vertical-align:middle}
textarea {vertical-align:middle}
	
H1 {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-style: normal;
	font-weight: bolder;
	color: #FF9900;
	display: inline;
	}
	
H2 {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #003399;
	display: inline;
	}
	
H3 	{
	font-size:10pt;
	display:inline;
	border-bottom: dotted 1px  #FF9900;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#003399;
	font-weight:bold
	}

ACRONYM {
	border-bottom: dotted 1px #999;
	cursor:help;
	}

/***********************************
			   IMAGES
 **********************************/

img {border:0;}
.img_gauche {float:left; padding-right:10px; padding-top:3px;}
.img_droite {float:right; padding-left:12px; padding-top:3px;}
.img_centre {text-align:center}

/**********************************
   TEMPLATE : Les BLOCS principaux
    Classé par ordre d'affichage
***********************************/

#principal {
	margin: 0px auto;
	width: 750px;
	position: relative;
	left: -4px;
	}

#logohead{
	float:left;
	padding-right:27px;
	height:84px;
	}

#pub{
	float:left;
	padding-top:12px;
	width:468px;
	height: 60px;
	margin-bottom:12px;
}

.spacer {
	CLEAR: both; VISIBILITY: hidden
}	
	
#menubarrehaut {
	display: block;
	position:relative;
	width:746px;
	padding-top:2px;
	border:2px solid black;
	background-image: url(http://secourisme-pratique.com/images/gif/menu/bande_haut.gif);
	text-align:right;
	height:18px;
	}

#menubarrebas {
	height:18px;
	margin-bottom:25px;
	}
	
#menu {
	float:left;
	padding-right:30px;
	width:150px;
	font-size:08pt;
	font-weight: bold;
	color:#000000;
	text-decoration:none;
	}
	
#google {
	float:left;
	padding:12px;
	}
	
.blanctitre {
	font-size: 8pt;
	font-weight: bold;
	text-align:center;
	background-color: #A6A6A6;
	color: #FFFFFF
	}
	
#body {
	float:left;
	width:570px;
	}

#xiti {
	float:left;
	width:50px;
	text-align:center;
	padding-top:40px;
	}

#footer {
	float:left;
	width:700px;
	text-align:center;
	border-top:1px dotted #666666;
	margin-top:15px;
	padding-top:5px;
	font-size:08pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#003399;
	text-decoration:none;
	margin-bottom:10px
	}
	
#footer A{
	color: #003399; 
	text-decoration:none 
	}
	
#footer A:hover {
	color: red; 
	text-decoration:underline
	}
	
/* les blocs alternatifs */

#centre {
	text-align:center}
	
/**********************************
    Mise en forme du MENU GAUCHE
***********************************/

#menu ul{
	border-width:1px 1px 0 1px;
	border-style:solid;
	border-color:#666;
	padding:0;
	margin:0;
}

#menu li{
	border-bottom:1px solid #666;
	list-style:none;
	margin:0;
}

#menu a{
	display:block;
	text-decoration:none;
	color:black;
	background-color:white;
	padding-left:1em;
}

#menu a:hover{
	background-color:#FFFFCC;
	color:red;
}

/**********************************
     BLOCS de la page d'accueil
***********************************/

/* Bloc Central */

#blocactu {
	/* float:left; */
	}

/* Blocs dynamiques */

#actuaccueil { 
	width:390px;
	float:left;
	/* padding-right:30px; */
	}

#actuaccueil a { 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	}
	
#actuaccueil h1 {
	font-size: 14pt;
	font-weight: bolder;
	color: red;
	display:inline;
	}

#actuaccueil h2 {	
	font-size:10pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#003399;
	font-weight:bold;
	display:inline;
	}

#actuaccueil .gauche {float:left; padding-right:10px; padding-top:3px;}	
#actuaccueil .droite {float:right; padding-left:12px; padding-top:3px;}
#actuaccueil .centre {float:left; vertical-align:middle; text-align:center;}	

/* Blmocs centraux */

#accueil {}

#beige {
	width:390px;
	float:left;
	background-color:#FFCC99;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	}

#beige img.img_droite  {
	float:right;
	padding-left:12px; 
	padding-top:3px;
	}

#intro  { 
	width:390px;
	float:left;
	margin-top:10px;
	padding:5px;
	vertical-align:top;
	font-family: verdana, sans-serif;
	font-size:11px;
	border:1px solid #cc0000;
	text-align:justify;
	}

/* colonne orange */

#colonneorange {
	float:right;
	width:140px;
	background-color: #FF6600;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:08pt;
	padding:0 5px 0 5px;
	}
		
#colonneorange img {
	padding-bottom:10px;
	}

#colonneorange li {
	list-style:none;
	margin:0;
	}
	
/**********************************
		Les autres BLOCS
***********************************/

/* Blocs spéciaux */

#center {text-align:center}
#center2 {text-align:center}
#center3 {text-align:center}

/* actu violet */

#actu {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	width:75%;
	background-color:#FFCCFF;
	padding:9px;
	margin-top:30px;
	margin-bottom:10px;
	}
	#actu img { vertical-align:middle;}
	
/* tableau de base avec cadre bleu */

#data TD{
	border-width:1px 0 1px 0;
	border:1px solid #006699;
	}

/* encadré bleu simple */

.cadrebleu { 
	width:85%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:10px;
	border:1px solid #006699;
	padding:5px;
	}
	
/*  bloc Associations  */

#assoc {
	text-align:center;
	margin-left:10px;
	margin-right:35px;
	}
	
#assoc h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bolder;
	color: #000099
	}

#assoc p {
	text-align:justify;
	}

#logoassoc {
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
	}
	
#logoassoc img {
	vertical-align:middle;
	padding-right:15px;
	} 

/* file de logos */

#logo img {
	vertical-align:middle;
	padding-right:10px;
	padding-top:3px;
	} 

/* Bloc rouge et gris contact */	
	
#tabrouge { 
	width:60%;
	text-align:center;
	background-color:#EFEFEF;
	border:1px solid #CC0000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#003399;
	padding:20px;
	margin-left:20%;
	}
#tabrouge img { padding-bottom:5px}

/* Bloc rouge et gris encart */

#encartgrisrouge { 
	width:80%;
	background-color:#EFEFEF;
	border:1px solid #CC0000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	padding:10px;
	margin-left:10%;
	}
	
/* Bloc LIBRAIRIE */

#librairie {
	width:85%;
	}
#librairie .img_gauche {float:left; padding-right:10px; padding-top:3px}

#librairiemenu {
	float:left;
	width:300px;
	padding:5px;
	}

#librairiemenu img {padding-right:10px; padding-bottom:3px; padding-top:3px; vertical-align:middle;}

#librairiezoom {
	float:left;
	text-align:left;
	background-color:#E6E5DE;
	margin-left:10px;
	width:240px;
	padding:5px 0px 5px 5px;
	}
	
#google2{
	border-top:1px dotted #3399cc;
	float:left;
	width:468px;
	height: 70px;
	padding-top:10px;
	margin-top:15px;
	margin-right:20px;
}
	
/**********************************
     la MISE en Page - les class
***********************************/

.blanc{
	color:#FFFFFF;
	text-decoration:none
	} 
A.blanc:hover {color: #000000; text-decoration:underline}

A.blancg{
	color:#FFFFFF;
	font-size:12px;
	text-decoration:none;
	font-weight: bold;
	} 
A.blancg:hover {color: #FF9900; text-decoration:underline}

.cadremarron {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:8pt;
	border:1px solid #cc3300;
	padding:3px;
	}

.centre{ text-align:center}

.chiffres {
	font-size:11pt;
	font-weight: bold;
	color:#0033CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

.fin {
	font-size:08pt
	}

.gras{
	font-weight: bold;
	}
	
.grisverda{
	color:#666666; 
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}	
	
.italique{
	font-style: italic;
	}
	
A.linkblack {color:black; text-decoration:none} 
A.linkblack:hover {color:#000099;text-decoration:underline } 

.marine {
	color:#000066
	}

.marinegras {
	font-weight: bold;
	color: #000099;
	font-size:10pt;
	}

.marinegraslarge {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bolder;
	color: #000099
	}
	
.prixtext { 
	font-size:12px;
	color:#CC3300;
	font-weight:bold;
		}
		
.rougefin {color:#FF0000;
	font-size:07pt;
	font-family: verdana, sans-serif;
	}
	
.rougefingras {
	color:#FF0000;
	font-size:07pt;
	font-weight: bold;
	font-family: verdana, sans-serif;
	}

.rougegros {
	font-family: Verdana, sans-serif;
	font-weight: bolder;
	font-size: 10pt;
	color: #FF0000
	}
	
.rougetresgros {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: bolder;
	color: #FF0000
	}

.toutpetit {font-size:4px}

.verdableu {
	font-size:10pt;
	font-family: verdana, sans-serif;
	color:#003399;
	text-decoration:none;
	}
	A.verdableu:hover {color: red; text-decoration:underline }
	
.verdableugras {
	font-size:10pt;
	font-family: verdana, sans-serif;
	color:#003399;
	text-decoration:none;
	font-weight:bold
	}
	A.verdableugras:hover {color: red; text-decoration:underline }
	
.verdafin {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:08pt;
	}
	
.verdafingris {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	font-size:08pt;
	}
	
.verdagras {
	font-size:08pt;
	font-weight: bolder;
	font-family: verdana, sans-serif;
	}

.verdagrascentre {
	text-align:center;
	font-size:08pt;
	font-weight: bolder;
	font-family: verdana, sans-serif;
	}

/* Formulaire du menu */

input#champ {
	color:#003399;
	font-size:07pt;
	font-weight: bolder;
	font-family: verdana, sans-serif;
	}
	
input#champ2 {
	color:#003399;
	font-size:07pt;
	font-weight: bolder;
	font-family: verdana, sans-serif;
	}


/*************************
	 Lightbox
**************************/
	
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.secourisme-pratique.com/images/gif/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.secourisme-pratique.com/images/gif/next.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }