/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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-role reset for older browsers */
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;
}

body{
width:1280px;
margin:0 auto;

background-color:black;
}

/*****************************************************
				Texte
****************************************************/
a{
text-decoration:none;
color:red;
}
a:hover{
	color:white;
}

h1{
text-transform:uppercase;
font-size:1.2em;
font-weight:bold;
color:white;
float:left;
}

h2{
display:block;
margin-top:5px;
font-size:1em;
font-weight:bold;
margin-bottom: 20px;
color:white;
}

h3{
display:block;
color:#d74343;
font-size:1em;
font-weight:bold;
}

.titre{
font-size:2em;
text-align:center;
}

p{
color:white;
}


/*****************************************************
				HEADER
****************************************************/

.header{
width:1280px;
min-height:200px;
background:url(./img/grommash.jpg) no-repeat  -70px -40px;
/*padding-left:320px;*/
}

.baniere{
width:216px;
height:226px;
overflow:hidden;
/*float:left;*/
float:right;
margin-top: -10px;
margin-bottom:-26px;
}

.droite{
margin-left:240px;
background:url(./img/Tabard.png) no-repeat;
}

.gauche{
background:url(./img/Tabard2.png) no-repeat;

}

.logo{
background:url(./img/Titre.png) no-repeat;
width:403px;
height:207px;
float:left;
margin-top:-30px;
/*margin-left:200px;*/
margin-left:30px;
opacity:0.7
}

.serv{
display:block;
overflow:hidden;
position:absolute;
margin-top:172px;
margin-left:42px;
color:#cc1e1e;
font-weight:bold;
font-size:1.2em;
}

.link{
color:#cc1e1e;
float:right;
}
.link:hover{
color:white;
}
/*****************************************************
				Menu 
****************************************************/

#nav{
margin:0 335px;
width:700px;
}


ul#nav li{
height:100%;
padding-right:30px;
float:left;

}

ul#nav li a{
background:url(./img/borderDeco.png) no-repeat center left ;
padding-left:30px;
}

ul#nav li:first-child a{
background:none;
}


ul#nav li a:hover ,
ul#nav li a.actif ,
ul#nav li:hover   {
/*background:url(./img/flamme.png);*/
transition:font-size 0.2s, color 0.2s; 
color:#cc1e1e;
font-size:1.2em;
}

ul#nav li a{
display: block;
float:left;
height: 100%;
line-height:60px;
color:white;


}




/*****************************************************
			Main	Contain
****************************************************/
.globalContainer{

position:relative;
}

.mainContainer{
width:1280px;
height:auto;
background:url(./img/Fond.png)-320px 0 repeat-y;
overflow:hidden;
clear:both;
}


.container{
width:1000px;
margin-left:px;
padding:0 15px 0 15px; 
float:left;
}


/*****************************************************
				Menu gauche
****************************************************/
.leftSide{
float:left;
width:250px;
clear:both;
}

.containerLeft{
background:url(./img/fontNews.png) repeat;
border:1px solid #5f5f5f;
border-radius:10px;
margin-bottom:10px;
padding:5px;
position:relative

}

.containerLeft > p{
margin-left:10px;
}

.sousClass{
height:0px;
transform: scaleY(0);
transition:transform 1.5s;
transform-origin: 50% 0;
background:url(./img/fontNews.png) repeat;
border:1px solid #5f5f5f;
border-radius:10px;
padding: 5px 5px 5px 0;
position:absolute;
right:0px;
top:10%;

}

.sousClass li{
height:20px;

}

.class li{
margin-left:5px;
}

ul.class li:hover .sousClass{
display:block;
transform: scaleY(1);
height:auto;
}

/*****************************************************
				Bouton droite recrutement
****************************************************/

.recrut{
height: 20px;
width: 16px;
float: right;
margin-left: 5px;
}

.Ok{
background:url(./img/ok-icon.png) no-repeat;
color:green;
}
.non{
background:url(./img/cancel.png) no-repeat;
color:red;
}

/*****************************************************
				Classe et icone
****************************************************/

.spé{
height:20px;
width:20px;
float:left;
margin-right:5px;
}

.warFury{background:url(./img/Specs-20.png) no-repeat -20px -60px;}
.warArm{background:url(./img/Specs-20.png) no-repeat 0px -60px;}
.warGlad{background:url(./img/Specs-20.png) no-repeat -60px -60px;}
.warProt{background:url(./img/Specs-20.png) no-repeat -40px -60px;}

.palProt{background:url(./img/Specs-20.png) no-repeat -20px -160px;}
.palSacr{background:url(./img/Specs-20.png) no-repeat 0px -160px;}
.palVind{background:url(./img/Specs-20.png) no-repeat -40px -160px;}

.pretDisc{background:url(./img/Specs-20.png) no-repeat 0px -120px;}
.pretSacr{background:url(./img/Specs-20.png) no-repeat -20px -120px;}
.pretOmb{background:url(./img/Specs-20.png) no-repeat -40px -120px;}

.mageFeu{background:url(./img/Specs-20.png) no-repeat -20px -40px;}
.mageFrost{background:url(./img/Specs-20.png) no-repeat 0px -40px;}
.mageArc{background:url(./img/Specs-20.png) no-repeat -40px -40px;}

.démoDest{background:url(./img/Specs-20.png) no-repeat -40px -140px;}
.démoAff{background:url(./img/Specs-20.png) no-repeat 0px -140px;}
.démoDémo{background:url(./img/Specs-20.png) no-repeat -20px -140px;}

.fufuAss{background:url(./img/Specs-20.png) no-repeat -20px -20px;}
.fufuFi{background:url(./img/Specs-20.png) no-repeat -40px -20px;}
.fufuCom{background:url(./img/Specs-20.png) no-repeat 0px -20px;}

.moineBra{background:url(./img/Specs-20.png) no-repeat 0px -200px;}
.moineVent{background:url(./img/Specs-20.png) no-repeat -40px -200px;}
.moineBrum{background:url(./img/Specs-20.png) no-repeat -20px -200px;}

.chamAm{background:url(./img/Specs-20.png) no-repeat -20px -100px;}
.chamEle{background:url(./img/Specs-20.png) no-repeat 0px -100px;}
.chamRest{background:url(./img/Specs-20.png) no-repeat -40px -100px;}

.druidRest{background:url(./img/Specs-20.png) no-repeat -60px 0px;}
.druidEqui{background:url(./img/Specs-20.png) no-repeat 0px 0px;}
.druidFa{background:url(./img/Specs-20.png) no-repeat -20px 0px;}
.druidGard{background:url(./img/Specs-20.png) no-repeat -40px 0px;}

.huntBete{background:url(./img/Specs-20.png) no-repeat 0px -80px;}
.huntPre{background:url(./img/Specs-20.png) no-repeat -20px -80px;}
.huntSurv{background:url(./img/Specs-20.png) no-repeat -40px -80px;}

.dkSang{background:url(./img/Specs-20.png) no-repeat 0px -180px;}
.dkFrost{background:url(./img/Specs-20.png) no-repeat -20px -180px;}
.dkImpie{background:url(./img/Specs-20.png) no-repeat -40px -180px;}

/*****************************************************
			Avancée
****************************************************/

.avance{
position:relative;
}

.avance li{
margin-left:10px;
color:white;
overflow: hidden;
}
.avanceGauche{
height:0px;
transform: scaleY(0);
transition:transform 1.5s;
transform-origin: 50% 0;
}


.avance li:hover .avanceGauche{
transform: scaleY(1);
height:auto;
}

.avance li ul .vert{
color:green;
}
.avance li ul .rouge{
color:#cc1e1e;
}


/*****************************************************
			Rank
****************************************************/
.rank{
margin-bottom:10px;
margin-left:40.5px;
float:left;
}


/*****************************************************
			News
****************************************************/

div.actu:first-child{
margin-top:15px;
}
.news{
background:url(./img/fontNews.png) repeat;
border:1px solid #5f5f5f;
border-radius:10px;
display:block;
overflow:hidden;
margin:10px 20px 0 20px;
}

.actu{
clear:both;
overflow:hidden;
padding-top:20px;
}

.photoNews{
display:block;
width:110px;
float:left;
}


.contenue{
max-width:250px;
float:left;
margin-left:10px;
margin-right:20px;
}

.contenue p{
display:block;
}

.news.contenue p{
float:left;

}



/*****************************************************
						separation
*****************************************************/
.separate{
height:1px;
border-bottom:solid 2px #cc1e1e;
margin-bottom:3px;
margin-top:2px;
clear:both;
}

/*****************************************************
						Article
*****************************************************/
.firstPhoto{
height:400px;
width:500px;
}

.secondPhoto{
height:150px;
width:150px;
display:block;
float:left;
}

.firstArticle{
float:left;
max-width:500px;
}

.secondArticle{
min-width:420px;
max-width:100%;
float:left;
display:block;
margin-left:50px;
margin-bottom:20px;
}


.firstArticle,.secondArticle{
border:1px solid #5f5f5f;
background:url(./img/fontNews.png) repeat;
border-radius:10px;
overflow:hidden;
margin-top:10px;
}

/*****************************************************
						page avancées
*****************************************************/
.avancee{
min-width:800px;
padding:15px;
}
.iconraid{
display:block;
float:left;
height:63px;
width:215px;
}

.grull{background:url(./img/spriteRaid.png) no-repeat 0px 0px ;}
.mangeroc{background:url(./img/spriteRaid.png) no-repeat 0px -67px ;}
.fourneau{background:url(./img/spriteRaid.png) no-repeat 0px -134px ;}
.franzok{background:url(./img/spriteRaid.png) no-repeat 0px -201px ;}
.kagraz{background:url(./img/spriteRaid.png) no-repeat 0px -268px ;}
.kromog{background:url(./img/spriteRaid.png) no-repeat 0px -335px ;}
.darmac{background:url(./img/spriteRaid.png) no-repeat 0px -402px ;}
.thogar{background:url(./img/spriteRaid.png) no-repeat 0px -469px ;}
.twins{background:url(./img/spriteRaid.png) no-repeat 0px -536px ;}
.mainnoire{background:url(./img/spriteRaid.png) no-repeat 0px -603px ;}

.kargath{background:url(./img/spriteRaid.png) no-repeat -218px 0px ;}
.boucher{background:url(./img/spriteRaid.png) no-repeat -218px -67px ;}
.fougerme{background:url(./img/spriteRaid.png) no-repeat -218px -134px ;}
.tectus{background:url(./img/spriteRaid.png) no-repeat -218px -201px ;}
.ogron{background:url(./img/spriteRaid.png) no-repeat -218px -268px ;}
.koragh{background:url(./img/spriteRaid.png) no-repeat -218px -335px ;}
.margok{background:url(./img/spriteRaid.png) no-repeat -218px -402px ;}

.nokill{
opacity:0.4;
}

/*****************************************************
				News Full
****************************************************/

.photoFull{
	max-width:900px;
	display:block;
}

.full{
	max-width:100%;

}

.titreFull{
display:block;
font-size:3em;
float:left;

}

.dateFull{
display:block;
float:right;
}

.auteur{
	display:block;
	clear:both;
	float:left;
	margin-top:5px;
}

.contenuefull{
max-width: 880px;
float:left;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}

.retour{
display:block;
float:right;
margin-top:10px;
}
.article{
	color:white;
}