/* Général */

* {border: none;outline:none}

body {
	margin:0;
	padding:0;
	background:#FFFFFF url(./sky_background2.png) repeat left top;
}

a:link, a:visited {
	color: #666666;
	cursor:pointer;
	font-family:Arial;	
	padding:3px;	
	text-decoration:none;
}
a:hover, a:focus, a:active {
	color: red;
	cursor:pointer;
	text-decoration:none;
}


input[type="submit"]
{
	border: white 1px solid;
	background-color:red;
	color:#FFFFFF;
	cursor:pointer;
}
input, textarea, select{
	border:1px solid grey;
}
ul li {
	list-style-type:none;
	font-family:Arial;
	font-size:0.8em;
	line-height:1.5;
	font-weight:bold;
	padding-top:5px;
	margin-left:-30px;
}
ul {	margin-top:-20px;}


h3{
	line-height: 1;
	font-size: 1.2em;
	font-weight:bold;
	text-align:justify;
	font-family:Arial;
	color:black;
	margin-top:-4px;
}

h1,h2,h3,h4,ul, li,p{	font-family:"Comic Sans Ms","Trebuchet MS",Arial, Verdana,sans-serif;
	color:#17560E;}
p, li{
	font-size: 0.8em;
	font-weight:normal;
	text-align:justify;
	/*font-family:Arial;
	color:black;*/

}



/* --- POSITIONNEMENT --- */

/* Page */
#global0 {
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg0.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}
#global {
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg1.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}
#global2 {
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg2.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}
#global3 {
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg3.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}
#global-parties{
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg1-parties.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}
#global-treasures{
	width:1000px;
	height:800px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
	background:#FFFFFF url(./bg1-treasures.jpg) no-repeat left top;
	border-left:1px solid black;
	border-right:1px solid black;
}


/* Header */
#header {
	position:absolute;
	width:1000px;
	height:200px;
	padding: 0;
	margin: 0;
}


/* Menu de navigation */
#menuH{
	position:absolute;
	width:450px;
	height:115px;
	top:100px;/*120 sans  */
	left:200px;
	padding: 0;
	border:0px solid red;
}
.item {	
	position:absolute;
	width:110px;
	height:30px;
}
.item a:link, .item a:visited {	
	font-size:1em;
	font-weight:bold;
	color:red;
	text-decoration:none;
}
.item a:focus, .item a:active {	
	font-size:1em;
	font-weight:bold;
	color:#1ECF00;
	text-decoration:none;
	background-color:transparent;
}

#item1 {
	margin:0;
	padding: 0;
	position:absolute;
	top:2px;
	left:130px;
	border:0px solid yellow;
}
#item2 {
	margin:2px;
	padding: 0;
	position:absolute;
	top:0;
	left:335px;
	border:0px solid yellow;
}
#item3 {
	margin:0;
	padding: 0;
	position:absolute;
	top:35px;
	left:220px;
	border:0px solid yellow;
}
#item4 {
	margin:0;
	padding: 0;
	position:absolute;
	top:60px;
	left:90px;
	border:0px solid yellow;
}
#item5 {
	margin:0;
	padding: 0;
	position:absolute;
	top:60px;
	left:330px;
	border:0px solid yellow;
}



#members a {
	position:absolute;
	top:0;
	left:680px;
	padding: 100px 130px 100px 130px;
	margin-top:0;
	border:0px solid yellow;
}


/* content */

#content-left {
	position:relative;
	float:left;
	width:170px;
	height:110px;
	padding: 0;
	margin:0;
	top:375px;
	left:100px;
	border:0px solid red;
}
#content-left a {
	position:relative;
	float:left;
	top:0;
	left:0;
	margin:0;
	padding: 16px 20px 16px 20px;
	border:0px solid yellow;
}
#home a {
	position:relative;
	float:left;
	width:40px;
	top:10px;/*0*/
	left:45px;
	clear:both;
}
#who a {
	position:relative;
	float:left;
	width:120px;
	top:10px;/*0*/
	left:5px;
	clear:both;
}
#contact a {
	position:relative;
	float:left;
	width:62px;
	top:10px;/*0*/
	left:33px;
	clear:both;
}

#content-right {
	position:relative;
	float:left;
	width:500px;
	height:250px;
	padding:5px;
	margin:0;
	top:220px;/*250px sans   */
	left:100px; 
	border:0px solid purple;
	overflow:visible;
	overflow-y: scroll;
	
}


#tabs{
	position:relative;
	float:left;
	width:460px;
	height:120px;
	top:240px;/*260px sans   */
	left:290px;
	padding: 0;
	border:0px solid green;
}
.tab a {
	color:#000000;
	font-size:0.8em;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	padding: 35px 5px 0 5px;
	border:0px solid red;
}
#tab1 a{
	position:relative;
	float:left;
	width:80px;
	height:50px;
	top:35px;
	left:2px;

}
#tab2 a{
	position:relative;
	float:left;
	width:80px;
	height:60px;
	top:25px;
	left:15px;
	padding: 35px 8px 0 8px;
}
#tab3 a{
	position:relative;
	float:left;
	width:90px;
	height:70px;
	top:20px;
	left:35px;
	padding: 38px 5px 0 5px;
}
#loco-board a{
	position:relative;
	float:right;
	width:90px;
	height:35px;
	top:0;
	right:0;
	padding: 0 5px 0 5px;
}


/* Footer */
#footer {
	position:relative;
	float:left;
	width:1000px;
	height:30px;
	margin:0;
	padding:0;
	top:400px;
	left:-1px;
	padding:0;
	background-color:#00a410;
	border-left:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
}
#footer p {
	margin:0;
	padding:2px 2px;
	text-align:center;
	font-size: 0.7em;
	font-family:Arial;
	color:#FFFFFF;
}

.error, .errors{color:red;font-family:"Comic Sans MS";}



/* --- NOTES ---

1.	Le conteneur a une largeur fixe (750px), une marge à gauche de 20px pour
	créer un retrait esthétique, et un margin-right qui a pour valeur "auto".
	Ce dernier point n'est pas nécessaire pour placer le conteneur à gauche
	de la page; ce sera en effet le comportement «normal» de tout bloc.
	Si on souhaite placer ce conteneur à droite, par contre, on pourra utiliser
	un margin-left avec la valeur "auto", et un margin-right à 20px (ou zéro,
	ou autre valeur autre que "auto").

2.	On utilise ici la déclaration "overflow: hidden" pour empêcher le
	dépassement des éléments flottants. On utilise aussi un "width: 100%" pour
	corriger le même problème... dans Internet Explorer 6, qui n'appliquera
	pas correctement le "overflow: hidden".
	En savoir plus sur ce sujet:
	http://web.covertprestige.info/test/
		03-elements-flottants-et-element-parent-1.html

3.	Dans le gabarit 01, nous utilisions "display: inline" pour placer les
	différents items du menu à l'horizontale. Ici, on va utiliser une autre
	possibilité: la propriété CSS "float".
	Quels sont les avantages de la propriété "float"? Eh bien, on va pouvoir
	placer une partie des items du menu à gauche, et une autre partie à droite,
	ce qui est utile quand on veut réaliser un menu avec des éléments
	d'importance diverse (on mettra alors les éléments les plus importants à
	gauche, et les éléments secondaires à droite).
	Contrairement à des éléments en "display: inline", nous pouvons donner une
	largeur fixe à nos LI. Nous pouvons aussi jouer plus facilement sur la
	hauteur des LI, que ce soit via la propriété "padding" ou la propriété
	"height".
	Par contre, on ne pourra pas centrer horizontalement des éléments
	flottants. Si on doit centrer les éléments d'un menu, on utilisera
	plutôt "display: inline".

*/