@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,700italic,400italic);

/* 
Attention à la fonction background !
Il FAUT impérativement, pour passer la validation CSS du W3C, assigner ses propriétés dans l'ordre donné sur leur site
http://www.w3.org/TR/CSS2/colors.html#propdef-background
En l'éspèce : [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit 
*/

/*  ----fonctions généralistes----  */
body{
margin:0px;
text-align:center;
/*background-color:#e8e8e8;*/}
*{font-size:15px;
font-family:'Ubuntu',verdana,geneva,sans-serif;
background-color:transparent;}

/* Mise en page par grille, adaptation fluide.
Approche "smartphone first" : le design est conçut pour les téléphones et tablettes d'abors et s'adapte aux écrans plus larges.
- #main sert de cocon global
- #content permet une mise en page global plus précise (centrage ...)
- on utilise des div au premier niveau -> de base display:block et width:100%
- si on veut plusieurs blocks sur une ligne sur écrans larges on les encadre avec un DIV de class .row
- les block en ligne (encadré par .row donc) doivent avoir une class spécifique comme .bl50 => 50% de largeur*/
.bl50,.bl33,.bl25,.bl20,.bl15,.bl10,.bl66,.bl75,.bl80,.bl90{}
.row{position:relative;width:100%;height:100%;}
.row>div{height:100%;margin-bottom:2px;/*position:absolute;*/top:0;bottom:0;}
.hidHd,.hidSn{}

@media only handheld, (min-width: 200px) and (max-width: 640px),(min-device-width: 200px) and (max-device-width: 640px){
	.bl50,.bl66,.bl75,.bl80,.bl90,.floatL,.floatR{float:none;width:auto;}
	.bl33{width:64.95%;margin:0 0.2%;}
	.bl25{width:48.95%;margin:0 0.2%;}
	.bl20{width:38.95%;margin:0 0.2%;}
	.bl15{width:28.95%;margin:0 0.2%;}
	.bl10{width:18.95%;margin:0 0.2%;}
	.bl33,.bl25,.bl20,.bl15,.bl10{float:left;}
	.hidSn{display:none;}
	.hidHd{display:block;}
}
/* adaptation aux écrans larges. Ici seulement ceux de plus de 640px
le width global est limité a 1000px et l'ensemble se centre automatiquement sur des écrans plus larges */
@media only screen and (min-width: 641px), only screen and (min-device-width: 641px){
	/*#content{width:100%;}
	#content{max-width:1000px;}*/
  .bl50{width:48.85%;margin:0 0.2%;}
	/*tout ceux dessous sont à ajuster !!!*/
  .bl33{width:31.85%;margin:0 0.2%;}
  .bl25{width:23.85%;margin:0 0.2%;}
  .bl20{width:18.85%;margin:0 0.2%;}
  .bl15{width:13.85%;margin:0 0.2%;}
  .bl10{width:8.85%;margin:0 0.2%;}
  .bl66{width:64.85%;margin:0 0.2%;}
  .bl75{width:73.85%;margin:0 0.2%;}
  .bl80{width:78.85%;margin:0 0.2%;}
  .bl90{width:88.85%;margin:0 0.2%;}
	.bl50,.bl33,.bl25,.bl20,.bl15,.bl10,.bl66,.bl75,.bl80,.bl90{float:left;}
	.bl50:first-of-type{}
	.hidSn{display:block;}
	.hidHd{display:none;}
}

/*.text p:first-letter,.text li:first-letter,.text dd:first-letter{margin-left:15px;font-weight:700;font-size:120%;}*/
/*simple marge à gauche*/
.marge5,.marge10,.marge30{text-decoration:none;}
.marge5{margin-left:5px!important;}
.marge10{margin-left:10px!important;}
.marge30{margin-left:30px!important;}
/*marges tout autour de l'objet*/
.marg0{margin:0px!important;}
.marg5{margin:5px!important;}
.marg10{margin:10px!important;}
.marg15{margin:15px!important;}
.marg20{margin:20px!important;}
/*marges intérieur, tout autour du contenu*/
.pad5{padding:5px!important;}
.pad10{padding:10px!important;}
.pad15{padding:15px!important;}
.pad20{padding:20px!important;}
.t1{font-size:55%;}
.t2{font-size:70%;}
.t3{font-size:85%;}
.t4{font-size:100%;}
.t5{font-size:115%;}
.t6{font-size:130%;}
.t7{font-size:145%;}
/*modifiés en taille fixe pour plus de facilité dans le formatage des pages*/
/*.t0{font-size:6px;}
.t1{font-size:8px;}
.t2{font-size:10px;}
.t3{font-size:12px;}
.t4{font-size:14px;}
.t5{font-size:16px;}
.t6{font-size:18px;}
.t7{font-size:20px;}*/

/* les regles suivantes peuvent s'écrire différemment : .text.left{text-align:left;} + .elem.left{float:left;}
On utiliserait deux class .text et .elem qui n'auraient pas forcement de style mais serviraient surtout comme déclencheur. 
On peut ainsi "écrire" son style, litéralement */
.floatL{float:left;}
.floatR{float:right;}
.clearB{clear:both;}
.center{text-align:center;}
.left,.right{padding:2px 10px;white-space:nowrap;width:auto;margin:2px 7px;}
.left{float:left;}/* transforme en block collé à gauche */
.right{float:right;}/* transforme en block collé à droite */
.tleft,.tright,.tcenter{display:block;}
.tleft{text-align:left;}/* texte collé à gauche */
.tright{text-align:right;}/* texte collé à droite */
.tcenter{text-align:center;}/* texte centré */
.just{text-align:justify;}/* texte justifié */
.hide{display:none;}
.il{display:inline;}/* permet l'insertion en ligne d'un élément ayant un attribut block */
.u{text-decoration:underline;}
.b{font-weight:700;}
.n{font-weight:400;}/*n = normal*/
.flatbottom{margin-bottom:0;padding-bottom:0;}/*utile par exemple sur une structure de type P>DIV.right>(texte) ou le texte qui suit le DIV devrait normalement faire partie du P mais où il faut couper cette structure pour pouvoir correctement placer le DIV. Le probleme étant qu'un P dans ce design précis a un margin-bottom et un padding-bottom non nul*/

.dotted{border:2px dotted lightgrey;}
.rounded{
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.blueBg{background-color:#003366;color:white;}

hr {
    display: block;
    clear: both;
		width:80%;
    height: 3px;
    /*margin: 40px 0 80px;
    padding: 0;
    border-style: dotted;
    border-width: 3px;
		border-color: lightgrey;*/
		border:none;
  	background-color: lightgrey;
    font-family: arial;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}
hr:after {
    /*content: "\273D \273D \273D";
    height: 0;			
    letter-spacing: 1em;
    color: #aaa;*/
}