/* 
STYLE SHEET
Créé par [Auteur]

	1. Reset CSS
	2. Base
	3. structure
	4. Liens et navigation
	5. fonts
	6. images
	7. MediaQueries

Notes:
/* -------- Par exemple: guide des couleurs ou autres choses ----------
#ffde00 : Jaune
#bc0000 : Rouge
etc..
*/


/* --------- 1. Reset CSS - Eric Meyer  --------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display en block pour les anciens fureteurs */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* --------- 2. Base (général) --------- */
@font-face {
    font-family: 'haettenschweiler';
    src: url('../Fonts/hatten-webfont.eot');
    src: url('../Fonts/hatten-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/hatten-webfont.woff') format('woff'),
         url('../Fonts/hatten-webfont.ttf') format('truetype'),
         url('../Fonts/hatten-webfont.svg#haettenschweilerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*  --------- 3. structure (layout) --------- */

body {
	font-size: 62.5%;/*<!--Avec un pourcentage de 62.5 % dans le body, cela donne une base de 10
		ce qui veut dire que 1em = 10 px, 1.2em = 12 px, 2em = 20px etc.-->*/
		}
#wrapper {width:100%; min-width:320px;
}
header { width:100%; padding-top:215px; background: url("../images/LogoSegwayMobile.png")no-repeat 50% 5%, url("../images/BgHeaderMobile.gif")repeat-x top #ffde00; 
}
nav {width:100%;
}
nav ul {width:100%;}
nav ul li {width:100%; margin:10px 0px; text-align:center;}
nav ul li a { width:100%; background-color:#bc0000; display:block; font:720% 'haettenschweiler'; color:#ffde00; text-decoration:none; letter-spacing:5px;}

section {width:100%; background-color:#fff;
}
section h1{ margin-bottom:10px; font:600% 'haettenschweiler'; text-align:center; color:#bc0000; letter-spacing:3px;}

article {width:100%;}
article:nth-of-type(1) {border-bottom:2px solid #be0000; margin-bottom:10px; padding-bottom:10px;}
article p { width:93.75%; margin:auto; font:180% Arial, Helvetica, sans-serif; text-align:justify;}
article figure {width:100%; display:block;}
article figcaption.Echeancier { width:100%; color:#454545; font-size:90%;}
article figcaption.Echeancier p {width:100%; text-align:center;}
article img {width:100%; margin-top:20px; height:auto;}

aside {display:none; float:none;
}
footer {width:100%; padding-bottom:15px; margin-top:10px; background-color:#bc0000;
}
footer div.RSociaux {width:100%;}
footer div.RSociaux h2 {margin-bottom:15px; font:600% 'haettenschweiler'; color:#ffde00; letter-spacing:3px; text-align:center; }
footer div.RSociaux div.LiensFooterMobile {border-bottom:2px solid #fff;}
footer div.RSociaux div.LiensFooterMobile a img {width:100%; margin-bottom:10px; height:auto;}
footer div.RSociaux div.LiensFooterWeb {display:none;}
footer p.MenuFooterWeb {display:none;}
footer div.Adresse {width:100%; margin-top:10px;}
footer div.Adresse h3 {font:360% 'haettenschweiler'; color:#fff; text-align:center; letter-spacing:4px;}
footer div.Adresse p {color:#fff; font:160% Arial, Helvetica, sans-serif; text-align:center;}
footer p.CopyRights { margin-top:30px; font:160% Arial, Helvetica, sans-serif; color:#fff; text-align:center;}
/* 3.B Différentes règles pour gérer les flottants(float) */
.separateur {
	clear: both;
}
.separateurInvisible {
	clear: both;
	height: 1px;
}
/*AutoClearing pour IE8, 9, 10*/
.clearFix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/*AutoClearing pour IE7*/			
* :first-child+html .clearFix {
	min-height: 1px;
}
/*AutoClearing pour IE6*/
* html .clearFix {
	height: 1%;
}

html {
	font-size: 100%;
}
body {
	font-size: 62.5%;/*<!--Avec un pourcentage de 62.5 % dans le body, cela donne une base de 10
		ce qui veut dire que 1em = 10 px, 1.2em = 12 px, 2em = 20px etc.-->*/
		}
/* ---------- 7. mediaQueries ---------- */

@media screen and (min-width:550px) and (max-width: 800px) {
	#wrapper {width:100%;}
	header {height:106px; width:100%; padding-top:155px; background:url("../images/LogoSegwayiPad.png")no-repeat 50% 5%, url("../images/BgHeaderipad.gif")repeat-x; }
	nav {padding:0px 1.025641025641026%;}
	nav ul li {width:32.051282051282051%; margin:0px 0.448717948717949%; font-size:47.5%; float:left; }
	nav ul li:first-child {margin-left:0px;}
	nav ul li:nth-child(3) {margin-right:0px;}
	nav ul li:nth-child(4) {margin-left:15.641025641025641%; margin-top:10px;}
	nav ul li:nth-child(5) {margin-top:10px;}
	/*15.641025641025641%*/
	
	section {padding:0px 1.923076923076923%; width:96.153846153846154%;}
	section h1 {text-align:left; font-size:600%;}
	
	article p{width:45.641025641025641%; margin:0px; text-align:left; font-size:160%; float:left;}
	article figure {width:49.358974358974359%; margin-bottom:20px; margin-left:10px; float:left;}
	article img {width:100%; margin-top:0px; height:auto;}
	article:nth-of-type(1) {border-bottom:none; margin-bottom:0px; padding-bottom:0px;}
	
	footer {width:100%; float:none; clear:both; max-width:800px;}
	
	footer div#ContentFooter {max-width:800px; width:100%;margin:auto;}
	
	footer div.RSociaux {width:49%; height:170px; float:left; border-right:2px solid #fff; }
	footer div.RSociaux h2 {font-size:400%;}
	footer div.RSociaux div.LiensFooterMobile{display:none;}
	footer div.RSociaux div.LiensFooterWeb{width:232px; margin:auto; display:block; }
	footer div.RSociaux div.LiensFooterWeb a img{width:100%; max-width:100px;  height:auto;}
	footer div.RSociaux div.LiensFooterWeb a img.Twit{margin-left:12.5%;}
	footer div.Adresse{width:49.5%; height:170px; float:left; border:none; display:block;}
	footer p.CopyRights{clear:both;}
}
@media screen and (min-width: 801px){
	body {background:url("../images/BgHeaderWeb.gif")top repeat-x;}
	#wrapper {max-width:960px; width:100%; margin:auto;}
	header { height:70px; padding-top:206px; background:url("../images/LogoSegwayWeb.png")no-repeat 1.041666666666667% 5%;}
	nav {padding:0px 1.041666666666667%;}
	nav ul li {width:19.166666666666667%; margin:0px 0.260416666666667%; float:left; font-size:47.5%;}
	nav ul li a:hover {color:#fff;}
	nav ul li a:active {color:#bc0000; background-color:#fff;}
	
	section {width:64.583333333333333%; padding:0px 1.041666666666667%; float:left; display:block;}
	section h1 {text-align:left; font-size:450%;}
	
	article p {width:53.90625%; margin:0px; text-align:left; font-size:140%; float:left;}
	article figure {width:42.1875%; margin-bottom:20px; float:left;}
	article img {width:100%; height:auto; margin-top:0px;}
	article:nth-of-type(1) {border-bottom:none; margin-bottom:0px; padding-bottom:0px;}
	
	aside {width:33.333333333333333%; padding-bottom:40px; background-color:#bc0000; display:inline-block; float:left;}
	
	aside h2 {margin-top:20px; font:450% Haettenschweiler; color:#ffde00; text-align:center; letter-spacing:3px;}
	
	aside p {width:76.5625%; margin:auto; font:140% Arial, Helvetica, sans-serif; color:#fff; text-align:justify;}
	
	footer {width:100%; float:none; clear:both;}
	
	footer div#ContentFooter {max-width:960px; width:100%;margin:auto;}
	
	footer div.RSociaux {width:49%; height:170px; float:left; border-right:2px solid #fff; }
	footer div.RSociaux h2 {font-size:400%;}
	footer div.RSociaux div.LiensFooterMobile{display:none;}
	footer div.RSociaux div.LiensFooterWeb{width:175px; margin:auto; display:block; }
	footer div.RSociaux div.LiensFooterWeb a img{width:100%; max-width:75px;  height:auto;}
	footer div.RSociaux div.LiensFooterWeb a img.Twit{margin-left:12.5%;}
	
	footer p.MenuFooterWeb{width:100%; padding-bottom:10px; display:block; float:left; text-align:center; font:150% Arial, Helvetica, sans-serif; color:#ffde00;}
	
	footer p.MenuFooterWeb a{color:#ffde00;}
	footer p.MenuFooterWeb a:hover{color:#fff;}
	
	footer div.Adresse{width:49.5%; height:170px; float:left; border:none; display:block;}
	footer p.CopyRights{clear:both;}
}