/* 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;
	font-family: calibri;
	background: url("./images/background.jpg") no-repeat center center fixed;
	background-size: cover;
}

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;
}

/********************************************************************

	flipbooks

***********************************************************************/

.flipbook .p1{
	
	background: #000000;
	border-radius: 15px;
	box-shadow: 0 0 5px black, inset 0 0 3px white;
	
}

.flipbook .even{
	border-bottom-right-radius: 90px 20px;
	border-top-right-radius: 90px 20px;
	background-image: -webkit-linear-gradient(
		left, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -ms-linear-gradient(
		left, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -moz-linear-gradient(
		left, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -o-linear-gradient(
		left, #EBCF8F, #F0DFB3 90%, #a08050
	);
}
.flipbook .odd{
	border-bottom-left-radius: 90px 20px;
	border-top-left-radius: 90px 20px;
	background-image: -webkit-linear-gradient(
		right, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -ms-linear-gradient(
		right, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -moz-linear-gradient(
		right, #EBCF8F, #F0DFB3 90%, #a08050
	);
	background-image: -o-linear-gradient(
		right, #EBCF8F, #F0DFB3 90%, #a08050
	);
}


body{
	overflow:scroll;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

p{
	margin: 30px;
}

.flipbook-viewport .container{
	position:absolute;
	top:32%;
	left:10%;
	margin-left:auto;
	margin-right:auto;
}

.flipbook-viewport .flipbook{
	width:1400px;
	height:900px;
	margin-left:auto;
	margin-right:auto;
	top:-200px;
}

.flipbook-viewport .flipbook.changed::before{
	content: " ";
	position: absolute;
	left: 15px;
	right: 15px;
	top: 30px;
	bottom: 10px;
	border-radius: 15px;
}

.flipbook-viewport .page{
	width:680px;
	height:890px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook-viewport .shadow::before{
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	border: 15px solid transparent;
	border-top-width: 40px;
	left: 0px;
	border-right-color: #BDA674;
}

.flipbook-viewport .shadow::after{
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	border: 15px solid transparent;
	border-top-width: 40px;
	right: 0px;
	border-left-color: #BDA674;
}

/****************************************************

			Tabs 
			
*****************************************************/

/* Small tabs */

.flipbook .tabs{
	width:1490px;
	height:22px;
	top:-22px;
	position:relative;
	z-index:2;
}

.flipbook .tabs > div{
	width:600px;
	height:22px;
	float:left;
}

.flipbook .tabs .left{
	text-align: left;
	margin-left: 30px;
	float: left;
}

.flipbook .tabs .leftupped{
	text-align: left;
	margin-left: 30px;
	margin-top: -44px;
	float: left;
}

.flipbook .tabs .right{
	text-align: right;
	margin-right: 30px;
	float: right;
}

.flipbook .tabs .rightupped{
	text-align: right;
	margin-right: 30px;
	margin-top: -44px;
	float: right;
}

.flipbook .tabs span{
	border-style: solid;
	border-width: 5px 20px 5px 20px;
	border-image: url(./turnjs4/samples/docs/pics/tab-off.png) 5 20 5 20 fill;
	display:inline-block;
	font:bold 11px arial;
	text-shadow:1px 1px 0 #ddd;
	line-height:12px;
	text-decoration:none;
}

.flipbook .tabs .on,
.flipbook .tabs .on:hover{
	border-image: url(./turnjs4/samples/docs/pics/tab-on.png) 5 20 5 20 fill;
	cursor:default;
}

.flipbook .tabs span:hover{
	text-decoration: none;
	cursor:pointer;
	border-image: url(./turnjs4/samples/docs/pics/tab-hover.png) 5 20 5 20 fill;

}

/* Big tabs */

.flipbook .bigtabs{
	width:1490px;
	height:40px;
	top:-72px;
	position:relative;
	z-index:1;
}

.flipbook .bigtabs > div{
	width:250px;
}

.flipbook .bigtabs .bigleft{
	text-align:left;
	margin-left:40px;
	float:left;
}


.flipbook .bigtabs .bigright{
	text-align:right;
	margin-right: 40px;
	float:right;
	position: relative;
	left: 250px;
	top : 80px;
}

.flipbook .bigtabs span{
	color:black;
	border-style: solid;
	border-width: thick;
	border-image: url(./turnjs4/samples/docs/pics/bigtab-off.png) 20 60 35 60 fill;
	display: block;
	font:bold 16px arial;
	text-shadow:1px 1px 0 #ddd;
	color:#333;
	line-height:12px;
	text-decoration:none;
	vertical-align:top;
	margin-top: 20px;
	padding: 10px;
}

.flipbook .bigtabs .on,
.flipbook .bigtabs .on:hover{
	border-image: url(./turnjs4/samples/docs/pics/bigtab-on.png) 20 60 35 60 fill;
	cursor:default;
}

.flipbook .bigtabs span:hover{
	color:black;
	text-decoration: none;
	cursor:pointer;
	border-image: url(./turnjs4/samples/docs/pics/bigtab-hover.png) 20 60 35 60 fill;

}

/*********************************************************************

		Superadministration

*********************************************************************/

#nouvelavantage
{
	margin-left: auto;
	margin-right: auto;
}

#nouvelavantage th
{
	vertical-align: middle;
}

#nouveaumodule
{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#nouveaumodule th
{
	vertical-align: middle;
}


#nouveausort
{
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#nouveausort th
{
	vertical-align: middle;
}

#biglayout
{
	margin-bottom : 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 400px;
	width: 300px;
}

.smalllayout
{
	margin: 5px;
	height: 80px;
	width: 60px;
}

.smalllayout:hover
{
	border: 3px solid purple;
	cursor: pointer;
	height: 74px;
	width: 54px;
}

.smalllayouton
{
	margin: 5px;
	height: 74px;
	width: 54px;
	border: 3px solid green;
}

input[disabled]
{
	background-color: #555555;
	color: white;
}

input[type=file]
{
	width: 180px;
}

textarea[disabled]
{
	background-color: #555555;
	color: white;
}

#nouvelarticle
{
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#nouvelarticle th
{
	vertical-align: middle;
}

/*********************************************************************

		Accueil

*********************************************************************/
h1{
	
	margin-top:30px;
	margin-bottom:30px;
	font-size: 38px;
	color: #CCCCCC;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	text-shadow:2px 2px 2px Black;
}

h2{
	padding-top : 20px;
	margin-bottom : 20px;
	font-size: 24px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	text-shadow:1px 1px 0 GoldenRod;
}

h3{
	padding-top : 200px;
	margin-bottom : 20px;
	font-size: 24px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	text-shadow:1px 1px 0 GoldenRod;
}

input[type=button]
{
	border-radius: 16px;
	border: solid black 1px;
	background-color: #333333; 
	color: #F59B42;
	padding: 3px;
	margin: 3px;
	font-weight: bold;
	width: 200px;
}


input[type=submit]
{
	border-radius: 16px;
	border: solid black 1px;
	background-color: #333333; 
	color: #F59B42;
	padding: 3px;
	margin: 3px;
	font-weight: bold;
	width: 200px;
	
}

#connexion
{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}

#inscription
{
	margin-left: auto;
	margin-right: auto;
}

.err
{
	color: red;
	margin-left: 140px;
	font-weight: bold;
	text-align: center;
	font-size: 21px;
	text-shadow:2px 2px 2px Black;
}

.err2
{
	padding-top: 10px;
	color: red;
	margin-left: 100px;
	font-weight: bold;
	font-size: 21px;
}

.persos{
	margin-left: auto;
	margin-right: auto;
	width : 620px;
	
}
.scrolltable{
	overflow-y: scroll;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top : 40px;
	margin-bottom: 30px;
	width : 660px;
}

.invitations{
	margin-left: auto;
	margin-right: auto;
	margin-top : 30px;
	margin-bottom: 30px;
	width : 660px;
}

.nouveaugroupe{
	margin-left: auto;
	margin-right: auto;
	margin-top : 30px;
	width : 660px;
}

.inviter{
	margin-left: auto;
	margin-right: auto;
	margin-top : 30px;
	width : 660px;
}

.deconnexion{
	margin-left: auto;
	margin-right: auto;
	margin-top : 20px;
	width : 660px;
}
		
/*********************************************************************

		Fiche perso
	
**********************************************************************/

 th, td {
	border: solid GoldenRod 2px;
	padding: 3px;
	font-size: 14px;
	font-family: Georgia;
	text-align: center;
}

 th{
	font-size: 15px;
	font-weight: bold;
	text-shadow: 1px 1px 0 GoldenRod;
}

/* Résumé */

.avatar{
	float: left;
	margin-left : 40px;
	margin-top : 30px;
	height: 200px;
	width : 150px;
	box-shadow:0 0 10px 5px GoldenRod;
	
}

.avatarMJ{
	float: left;
	margin-left : 40px;
	margin-top : 30px;
	height: 180px;
	width : 150px;
	box-shadow:0 0 10px 5px GoldenRod;
	
}

.modifiedavatar{
	float: left;
	margin-left : 40px;
	margin-top : 30px;
	height: 220px;
	width : 150px;
	box-shadow:0 0 10px 5px GoldenRod;
}

.avatar img{
	width: 150px;
	height: 180px;
}

.avatarMJ img{
	width: 150px;
	height: 180px;
}

.modifiedavatar img{
	width: 150px;
	height: 180px;
}

.avatar label{
	width: 148px;
}

.id {
	float: right;
	margin-top: 30px; 
	margin-right: 50px;
	margin-bottom : 20px;
	width : 400px;
}

.id td {
	font-size : 18px;
	font-weight: bold;
	text-shadow:1px 1px 0 GoldenRod;
}

.carac{
	clear: both;
	float: left;
	margin-left : 30px;
	margin-top : 30px;
	width : 260px;
}

.carac td{text-align:left;}

.combat {
	margin-top : 0px;
	float: right;
	margin-right: 50px; 
	width : 360px;
}

.combat td{text-align:left;}

.pa{
	clear: both;
	float: left;
	margin-top : 30px;
	margin-left: 30px;
	width : 260px;
	margin-bottom: 30px;
}

.gv{
	margin-top: 10px;
	float: right;
	width : 360px;
	margin-right: 50px;
}


.pf{
	margin-top : 20px;
	float: right;
	width : 360px;
	margin-right: 50px;
	margin-bottom: 20px;
}

.modif{
	margin-top: 10px;
	clear: both;
	margin-left: auto;
	margin-right: auto;
}

.savestate{
	float: left;
	margin-left: 30px;
}

.buttonm{
	position: relative;
}

.buttonm:hover{
	cursor: pointer;
	bottom: -2px;
}
	
.redX{
	font-weight: bold;
	color: red;
}

.redX:hover{
	cursor: pointer;
}

.firstline:not(:hover) div{
	max-height : 18px;
	overflow: hidden;
}

.modules{
	margin-left: auto;
	margin-right: auto;
	margin-top : 10px;
	width : 660px;
}	

.modules td{text-align:left;}

.avantages{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.avantages td{text-align:left;}

.desavantages{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.desavantages td{text-align:left;}

.totalPAV{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

/* Compétences */
.comp1{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.comp2{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.compm{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.coutcomp{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 660px;
}

.coutcomp td{
	width: 150px;
}


/* Armes, arumure et artefacts */
.armes{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.armes  th, 
.armes  td {
	vertical-align: center;
}

.armures{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.armures  th, 
.armures  td {
	vertical-align: center;
}

.artefacts{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.artefacts td{text-align:left;}

.artetr:not(:hover) div{
	max-height : 36px;
	overflow: hidden;
}

.rappelscombat{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

/* Etat */
.pv{
	float: left;
	margin-left: 30px;
	margin-top: 10px;
	width : 220px;
}


.stenos{
	float: right;
	margin-right: 20px;
	margin-top: 10px;
	width : 230px;
}


.mana{
	margin-top: 10px;
	width : 220px;
}

.d10{
	clear:both;
	margin-top : 40px;
	width : 300px;
	margin-left: auto;
	margin-right: auto;
}

#rollresult{
	font-size: 28px;
}

#rollresult19{
	font-size: 28px;
	background-image: url("./images/d10.png");
	background-color: transparent;
	padding-left: 19px;
	padding-right: 21px;
	padding-top: 12px;
	padding-bottom: 19px;
}

#rollresult10{
	font-size: 22px;
	background-image: url("./images/d10.png");
	background-color: transparent;
	padding-left: 15px;
	padding-right: 21px;
	padding-top: 18px;
	padding-bottom: 19px;
}

/* Inventaire et descriptions */
.inventaire{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.inventaire td{text-align:left;}

#inv:not(:hover) div{
	max-height : 120px;
	overflow: hidden;
}

.richesses{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.description{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.description td{text-align:left;}

#desphys:not(:hover) div{
	max-height : 120px;
	overflow: hidden;
}

.personnalite{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.personnalite td{text-align:left;}

#persmor:not(:hover) div{
	max-height : 120px;
	overflow: hidden;
}

.recapxp{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.notes1{
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.notes1 td{text-align:left;}

#not1 div{
	max-height : 550px;
	overflow: scroll;
}

.notes2{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.notes2 td{text-align:left;}

#not2 div{
	max-height : 740px;
	overflow: scroll;
}

/**********************************************************************

		Grimoire
		
**********************************************************************/

/* Résumé */

.idmagie{
	float: left;
	margin-left : 40px;
	margin-top : 30px;
	width : 300px;
}

.magies{
	float: right;
	margin-right: 50px; 
	margin-top : 30px;
	width : 300px;
}

.liens {
	clear: both;
	float: left;
	margin-left : 40px;
	margin-top : 10px;
	width : 300px;
	margin-bottom: 10px;
}

.stats {
	margin-top : 10px;
	float: right;
	margin-right: 50px; 
	width : 300px;
	margin-bottom: 10px;
}

.spemagie {
	clear: both;
	float: left;
	margin-left : 40px;
	width : 300px;
	margin-top: -15px;
	margin-bottom: 5px;
}

/* Sorts SA */
.sortSA  th, 
.sortSA  td {
	border: solid #1E90FF 2px;
	padding : 3px;
	font-size : 14px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	background-color: #E0FFFF;
	
}
.sortSA th{
	font-size: 14px;
	font-weight: bold;
	text-shadow: none;
	color: #1E90FF;
}

.sortSA{
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	width : 660px;
}

.sortSA .emph{
	color: #1E90FF;
	font-weight: bold;
}

/* Sorts appris */
.sortappris  th, 
.sortappris  td {
	border: solid #009010 2px;
	padding : 3px;
	font-size : 14px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	background-color: LightGreen;
	
}
.sortappris th{
	font-size: 15px;
	font-weight: bold;
	text-shadow: none;
	color: #009010;
}

.sortappris{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.sortappris .emph{
	color: #009010;
	font-weight: bold;
}

/* Sorts en cours d'apprentissage */
.sortencours  th, 
.sortencours  td {
	border: solid GoldenRod 2px;
	padding : 3px;
	font-size : 14px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	background-color: #FFE788;
}
.sortencours th{
	font-size: 15px;
	font-weight: bold;
	text-shadow:none;
	color: GoldenRod;
}

.sortencours{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.sortencours .emph{
	color: GoldenRod;
	font-weight: bold;
}

/* Sorts non appris */
.sortnonappris  th, 
.sortnonappris  td {
	border: solid #A3A3A3 2px;
	padding : 3px;
	font-size : 14px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	background-color: #F8F8F8;
}
.sortnonappris th{
	font-size: 15px;
	font-weight: bold;
	text-shadow:none;
	color: #A3A3A3
}

.sortnonappris{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}

.sortnonappris .emph{
	color: #A3A3A3;
	font-weight: bold;
}

/* Sorts non achetés */
.sortnonachete  th, 
.sortnonachete  td {
	border: solid #404040 2px;
	padding : 3px;
	font-size : 14px;
	font-family: Georgia;
	text-align: center;
	vertical-align: center;
	background-color: #909090;
}
.sortnonachete th{
	font-size: 15px;
	font-weight: bold;
	text-shadow: none;
	color: #404040;
}

.sortnonachete{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width : 660px;
}



/**********************************************************************

		Manuels
		
***********************************************************************/
p{
	font-size: 16px;
	font-family: Georgia;
	line-height: 1.4;
	padding-left: 5px;
	padding-right: 5px;
}

.imgmanuel{
	margin-left: auto;
	margin-right: auto;
}

.lleft{
	width: 360px;
	float: left;
}

.lright{
	width: 360px;
	float: right;
}

.lvbig{
	height: 700px;
	line-height:700px;
}

.lbig{
	height: 300px;
	line-height:300px;
}

.lbigl{
	height: 700px;
	line-height:700px;
}

.lbigr{
	height: 700px;
	line-height:700px;
}

.lsmallru{
	height: 300px;
	line-height:300px;
}

.lsmalllu{
	height: 300px;
	line-height:300px;
}

.lsmallrb{
	height: 300px;
	line-height:300px;
}

.lsmalllb{
	height: 300px;
	line-height:300px;
}

.lbottom{
	clear: both;
}

.lcenter{
	clear: both;
}

.ltop{
	clear: both;
}

.lvbigimg{
	height: 700px;
	margin-left: auto;
	margin-right: auto;
}

.lvbigimg td{
	border: 0px solid black;
}

.lbigimg{
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.lbigimg td{
	border: 0px solid black;
}

.lbiglimg{
	height: 700px;
	margin-left: auto;
	margin-right: auto;
}

.lbiglimg td{
	border: 0px solid black;
}

.lbigrimg{
	height: 700px;
	margin-left: auto;
	margin-right: auto;
}

.lbigrimg td{
	border: 0px solid black;
}

.lsmallruimg{
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.lsmallruimg td{
	border: 0px solid black;
}

.lsmallluimg{
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.lsmallluimg td{
	border: 0px solid black;
}

.lsmallrbimg{
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.lsmallrbimg td{
	border: 0px solid black;
}

.lsmalllbimg{
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.lsmalllbimg td{
	border: 0px solid black;
}

/**********************************************************************

		Autres

***********************************************************************/
.titles{
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	width: 660px;
}

.titles th{
	font-size: 24px;
}

.subtitles{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width: 660px;
}

.subtitles th{
	font-size: 24px;
}

.label-file {
	display: inline-block;
	text-align:center; 
    cursor: pointer;
    border: solid black 1px;
	background-color: #333333; 
	color: #F59B42;
    font-weight: bold;
	width: 148px;
	margin-left: auto;
	margin-right: auto;
}

.modifiedavatar input[type=button]{
	cursor: pointer;
	border-radius: 0px;
	padding: 0px;
	margin: 0px;
    border: solid black 1px;
	background-color: #333333; 
	color: #F59B42;
    font-weight: bold;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
}



input[type=button]:hover
{
	cursor: pointer;
}

.infos
{
	display: none;
}