/*--------------------------------
style markkus76.css
---------------------------------
*/
body{
	margin:0;
	padding:0;
	background-image: url("images/fond.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #804000;}

#bloc_page{
	width: 1100px;
	margin: auto;}

aside{
    position: fixed;
    right: 20px;
    bottom: 20px;
	}

.box{
	width: 100%;
	margin-left: auto;
    margin-right: auto;
	border: 1px solid black;

	/*box-shadow: 6px 6px 6px black;*/
	background: black
}

h1{
	width: 70%;
	margin-left: auto;
    margin-right: auto;
	border: 1px solid black;
	border-radius:10px 10px 10px 10px;
	box-shadow: 6px 6px 6px black;
	background: linear-gradient(to right,rgba(27, 5, 92, 0.6), rgba(73, 64, 101, 0.6));
	padding: 25px;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	color: yellow;}

h2{
	padding: 25px;
	font-size: 25px;
	text-align: center;
	font-weight: bold;
	color: #FFCC99;}

p{
	text-align: justify;
	padding: 20px;
	font-weight: bold;
	color: #FFCC99;
	font-style: normal;
	font-size: 15px;
	font-family: 'Comic Sans MS', arial, sans-serif;}

tr{
	text-align: center;
	font-weight: bold;
	color: #FFCC99;
	font-style: normal;
	font-size: 15px;
	font-family: 'Comic Sans MS', arial, sans-serif;}

.liste{
	width: 80%;
	margin-left: auto;
    margin-right: auto;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	border-radius:10px 10px 10px 10px;
	background-color: rgba(73, 64, 101, 0.5);
	padding: 25px;}

strong{
	font-weight: bold;
	font-size:17px;
	color: #FF9966;}

/*Navigation */
nav{
	width: 100%;
	height: 40px;
	background-color: rgba(73, 64, 101, 0.8);
	/*position: fixed;*/
	right: 0px;
	top: 68px;
	font-weight: bold;
	font-style: normal;	
	font-size: 11px;}

nav ul{list-style-type: none;}

header{
	width: 100%;
	background-color: black;
	/*background-color: rgba(73, 64, 101, 0.5);*/
	/*position: fixed;*/
	right: 0px;
	top: 0px;
	overflow: visible;}

section{
	padding-top: 1em;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	background-color: rgba(73, 64, 101, 0.7);
	overflow: hidden;}

article{
	padding-top: 1em;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	background-color: rgba(73, 64, 101, 0.7);
	overflow: hidden;}

footer{
	width: 100%;
	text-align: center;	
	margin-top: 20px;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	background-color: rgba(73, 64, 101, 0.7);
	line-height : 10px;
	bottom: 0px;
	left: 0px;}
	
.ombre{
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;}

/*TABLEAU*/
table{
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}


a:hover{
    color: #FF9933;
	font-weight: bold;}

img{border: none;}

form{
	width: 50%;
	margin-left: auto;
    margin-right: auto;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	border-radius:10px 10px 10px 10px;
	background-color: rgba(73, 64, 101, 0.5);
	padding: 25px;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
	color: #FFCC99;}

.centre{text-align: center;}

.TailleP{font-size: 14px;}

.CoulBlanc{
	font-weight: bold;
	color: white;
	font-family: 'Comic Sans MS', arial, sans-serif;	
}

.Coulbleu{
	color: #99CCFF;
	text-align: center;
	font-size: 10px;
	font-family: 'Comic Sans MS', arial, sans-serif;}

.CoulOrangeG{
	color: #FFCC99;
	font-style: normal;
	font-weight: bold;
	font-size: 9px;
	font-family: 'Comic Sans MS', arial, sans-serif;}

/*Position centré d'une image*/
.displayed{
	display: block;
	margin-left: auto;
	margin-right: auto;}	

.blocktext{
	text-align: center;
    margin-left: auto;
    margin-right: auto;}
	
/*Pour enlever les attribut hypertexte*/
.cache{
	text-decoration: none;
	color: white;}

.FormPlan{
	text-decoration: none;
	color: white;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	font-family: 'Comic Sans MS', arial, sans-serif;}

.margeG{margin-left: 50px;}

#rezo, #stats{
	display: inline-block;
    vertical-align: top;
	height: auto;}

#rezo{
	width: 49%;
	padding-left: 15px;
	text-align: center;}

#stats{
	width: 49%;
	text-align: center;}

#ordi{display:inline-block;}

#mobil{display:none;}

#Hordi{display:inline-block;}

#Hmobil{display:none;}

/****************************************************
     MENU NAVIGATION - STYLE horizental déroulant
	 http://www.frogweb.fr/menu-deroulant-horizontal/
****************************************************/
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
top:-38px;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
/*background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);*/
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(4){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(5){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(6){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(7){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(8){
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu-demo2 li:nth-child(9){
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:nth-child(10){
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:nth-child(11){
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(5):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(6):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(7):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(8):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#CFFF6A;
}
#menu-demo2 li:nth-child(9):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:nth-child(10):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:nth-child(11):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#F6AD1A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:10px 15px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:10px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

/*Pour le saut au contenu principal
http://blog.silktide.com/2013/04/skip-to-content-accessibility-links*/

#skiptocontent {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;}

/*Faire apparaître bouton retour haut avec fade
Origine : http://etienner.fr/billet.php?id=12 */

a.go_top{
    background: url('images/top.png');
	display: none;
    position: fixed;
    width: 50px;         /* A régler selon votre image */
    height: 50px;         /* A régler selon votre image */
    bottom: 350px;         /* A régler selon votre image */
    right: 70px;          /* A régler selon votre image */
    text-indent: -9999px;}

a.go_top:hover{
    background: url('images/top2.png');
	display: none;
    position: fixed;
    width: 50px;         /* A régler selon votre image */
    height: 50px;         /* A régler selon votre image */
    bottom: 350px;         /* A régler selon votre image */
	right: 70px;          /* A régler selon votre image */
    text-indent: -9999px;}

/*Mise en page adaptative MediaQueries
http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries
http://www.alsacreations.com/article/lire/930-css3-media-queries.html*/

@media all and (max-width: 1024px)
{
	body {background: black;}
	
	footer {
	position: relative;
	font-size: 25px;}
	
	.TailleP {font-size: 20px;}
	
	#LaLigne{
	height: 600px;}
	
	aside{display: none;}
		
	nav, #ordi {display: none;}
	
	nav, #mobil{
	display: inline;
	top: 130px;
	width: 100%;
	margin-left: auto;
    margin-right: auto;
	padding-bottom: 5px;
	font-size: 20px;
	height: auto;
	position: absolute;
	text-align: center;
	border: 1px solid black;
	box-shadow: 6px 6px 6px black;
	background-color: rgba(73, 64, 101, 0.7);
	color: white;}

	form {display: none;}
	
    #bloc_page {width: auto;}
	
	p {font-size: 20px;}
	
	#rezo, #stats{
	display: block;
    vertical-align: top;
	height: 370px;
	}
	
	#rezo {width: 100%;}
	
	#stats {width:100%;}
	
	#Hordi{display:none;}

	#Hmobil	{
	width: 100%;
	display:block;
	font-size: 50px;
	text-align: center;
	font-weight: bold;
	color: blue;
	position: absolute;
	background-color: black;
	height: auto;
	}
	
	.Coulbleu{
		color: #99CCFF;
		text-align: center;
		font-size: 20px;
		font-family: 'Comic Sans MS', arial, sans-serif;
	}
	
	.container{
	margin-left: auto;
	margin-right: auto;
	}
	
	/* BEGIN Horizontal Navbar 
	http://alt-web.com/DEMOS/Solid-color-list-menu.shtml*/

	#navcontainer{
	margin: 0 auto;
	padding: 0 0 0 0;
	width:auto;
	font-family: georgia, serif;
	text-transform: lowercase;
	background-color: rgba(73, 64, 101, 0.7);
	overflow: hidden; /**float containment, remove this for vertical list**/
	}

	#navlist ul{
	list-style: none;
	padding: 0;
	margin: 0;
	width: auto;
	font-size: 0.8em;
	}

	#navlist li{
	display: block;
	float: left; /*remove this for vertical list*/
	width: 8em; /*use auto or adjust as req'd*/
	height: 3em; /*remove or adjust as req'd*/
	margin: 0;
	padding: 0;
	text-align: center;
	}

	#navlist li a{
	display: block;
	padding: 0.5em;
	border-width: 1px;
	border-color: #ffe #aaab9c #ccc #fff;
	border-style: solid;
	color: white;
	text-decoration: none;
	background: #E19242;
	}

	#navlist li a:hover,
	#navlist li a:active,
	#navlist li a:focus {
	color: #800000;
	background: #FFCC99;
	border-color: #aaab9c #fff #fff #ccc;
	text-decoration:none;
	}
	/* END Horizontal Navbar */

	.liste{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		border: none;
		box-shadow: none;
		border-radius:0px 0px 0px 0px;
		background: transparent;
		padding: 0px;
	}
	
	.displayed{
	/*margin-left: auto;
	margin-right: auto;*/
	width: 80%;
	height: 80%;
	border: none;}
	
	/*Les tableaux*/
	table {width:100%;}
		
	td, th {
    width:33.33%;
    padding:0;
    margin:0;
	}
	
	#thumbs p {
	float: none;
	margin-left: auto;
	margin-right: auto;
	}
}

@media print {
  #menu, footer, aside, header, nav, article {
    display:none;
  }
  
  body {
	background-image: none;
    font-size:120%;
    color:black;
  }
}