html { padding: 0; margin: 0 }

body {
	background: black url(/design/BG-hauteur.jpg) 0px 103px repeat-x;
	color: black;
	padding: 0;
	margin: 0;
}

h1,h2 { clear: both; text-align:center }

h4 { margin: 0 }
a { color: #095 }
a:visited { color: #074 }
.center { text-align: center; text-indent:0 }
table.center td { text-align: center }
.small { font-size: small }
hr, .spacer {
	border: none;
	display:block;
	clear: both;
	width: 1px; height: 1px;
}
img { border: none }
img.border { border: 1px solid }

.left  { float: left; margin-right: 0.2em }
.right { float: right; margin-left: 0.2em }

p.l { margin: 0 }

img.team-ico { width:85px; height: 85px; border-radius: 50%; vertical-align: middle; margin: 0.1em 0 }

/************** design ************/

#content {
	position: absolute; top:0; left:0; right: 0;
	margin: 120px 5px 5px 230px;
	z-index:99;
}

#designbg {
	position: absolute; top:0; left:0; width: 100%;
	min-height: 1234px;
	background: url(/design/BG-etoiles.jpg) top right repeat-x;
	z-index: 4; overflow:hidden;
}
#designbg h1 {
	position: absolute; top:0; left:214px; width: 583px; height: 103px;
	background: transparent url(/design/h1-titre.png) center center no-repeat;
	font-size: 0;
}
#designbg img { position: absolute; }

#leftbar {
	position: absolute;
	top: 0; left: 0; width: 214px;
	z-index: 50;
}
#leftbar>span { display:block; width: 214px; height: 294px; background: url(/design/Leftbar2.jpg) }
#leftbar>a { display:block; width: 214px; text-decoration: none; color: black; font: bold 1.2em sans-serif; }
#leftbar>a span { display:none }
#leftbar>a.need_to_see_alt span:first-child { height: 100% }
#leftbar>a.need_to_see_alt span { display: inline-block; vertical-align:middle }

#langues { position:absolute; top: 5px; right:5px; z-index: 999; text-align:right; }
#langues div { background: white; border: 2px solid black; display:none; padding: 4px; }
#langues:hover div { display:block; }

.copyright { text-align:center; font: 0.7em sans-serif }

@media (min-width: 901px) {
	#leftbar a.icoclick {
		display:block;
		width:190px;height:110px;
		text-align:center; text-decoration: none;
		font: bold 1em sans-serif; color: black;
		margin: 5px; border: 1px solid black;
		box-shadow: 10px 10px rgba(0,0,0,0.5);
	}
	#leftbar a.icoclick.ico1 { background:url(/design/tournoi3.jpg); }
	#leftbar a.icoclick.ico2 { background:url(/design/universes3.jpg); color: white }
}

@media (max-width: 900px) {
	#designbg h1 {
		background: transparent; width: 100%; left: 0; color: #c93620;
		font: normal 60px/50px Impact, Charcoal, sans-serif;
		-webkit-text-stroke: 2px black;
		text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
	}
	#designbg h1 span { color: #fff53e }
	#contentfg { position: absolute; z-index:5 } /* obligé pour que le contenu soit au-dessus de designbg */
	#leftbar { margin: 10px; width: auto }
	#leftbar>span {
		background: url(/design/mob-menu-icon.png);
		cursor: pointer;
		width: 60px; height: 50px;
	}
	#leftbar>a { display: none; float: left; vertical-align: middle;
		border: 1px solid #850; background: #fc5 !important;
		width: 11em; height:1.2em !important; margin: 0; padding: 0.3em; }
	#leftbar:hover>a { display: block; }
	#leftbar>a span { display:inline }
	#leftbar>a span:first-child { display:none }
	#content { position:static; margin: 5px; margin-top:100px; }
}

@media (max-width: 768px) {
	#designbg img { display:none }

	#langues div br { display: none }
}

@media (max-width: 415px) {
	#designbg h1 { font-size: 40px }
	#leftbar>a { font-size: 90% }
}

a#menupartenaire { display:block; text-decoration: none; margin: 10px 60px 30px 10px; padding: 6px; border: 1px solid black; text-align:center; background: #fd9; color: black; font: 1.2em sans-serif }

iframe.jaimefb {
border:none; overflow:hidden;
width:214px; height:50px; position: absolute; left:-225px; top: 1070px;
}
p.partenaires { text-align: center; margin: 0.5em }

p.youtube { text-align:center; margin: 1em auto; width: 560px; height: 350px; position: relative; }
p.youtube div { position: absolute; right: -15em; top: 50px; width: 10em; font: 0.8em sans-serif }
p.youtube iframe { width: 560px; height: 349px; border: none }

/* flex avec les prefix: une ligne simple, de block justifiés */
.myflex {
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;

	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}


/************** Cadre de lecture **************/

.cadrelect {
	border: 1px solid black; background: url(/design/semiwhitebg.png);
	padding: 10px; margin: 5px auto;
	text-align: justify;
}
.cadrelect h1, h1.horscadrelect {
	border: 2px solid black; background: #2143a3;
	margin: 0 2em; color: #ddf;
	-moz-border-radius: 0.3em; border-radius: 0.3em;
}
.cadrelect h2 {
	border: 1px solid; background: #6e89d5;
	margin: 1em 2em;
}

.cadrelect h3 {
	background: #8AF; text-align:center;
	margin: 0;
	padding: 0.1em;
}


.cadrelect a { color: #074; font-weight: bold; }
.cadrelect a:visited { color: #032 }

/* images de promo trop grandes */
.cadrelect img { max-width:100% }

/* image cadrée de noir avec label */
.cimg {
width: 152px;
background: #000;
color: #FFF;
text-align: center;
font: 0.8em sans-serif;
padding: 1px;
}
.cimg img { margin: 1px }

@media (max-width: 768px) {
	.cadrelect h1, h1.horscadrelect {
		border-width: 1px;
		margin: 0;
	}
}

/********* reading page **************/

div.dapage { margin: 0 auto; padding: 3px 0; text-align:center }
div.dapage #balloonsimg {
	display:inline-block;
	border: 1px solid black;
	-webkit-box-shadow: 15px 15px 8px rgba(0,0,0,0.5);
	-moz-box-shadow: 15px 15px 8px rgba(0,0,0,0.5);
	box-shadow: 15px 15px 8px rgba(0,0,0,0.5);
	position:relative;
	background: top left no-repeat;
}
div.dapage #balloonsimg div { position:absolute; text-align:center; color:black; }
div.dapage #balloonsimg img { border: none }

div.dapage a { text-decoration: none; color: black }

div.dapage div.textstrip { display: none }
div.despages { width: auto; height: auto }
div.despages img { position: static; margin: 0.5em; }

p.superrapidenews {
	margin: 0 0 0.5em 0;
}
p.superrapidenews a {
	font: 0.9em Arial,sans-serif;
}
p.superrapidenews a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	div.dapage #balloonsimg {
		box-shadow: none;
	}
	div.dapage #balloonsimg.img {
		width: auto !important;
		height: auto !important;
	}
	div.dapage #balloonsimg img {
		width: 100%; height: auto;
	}

	p.partenaires { display: none }
}

/*********** accueil *******/
div.colon { height: 230px; background: #99e; text-align:center; float:right; }
div#senslecture { width: 130px; background: #9aa; margin-right: 4px; font: normal 11px sans-serif }
div#whatisdbm { background: #99e; text-align:center; margin: 0 298px 0 154px; padding: 4px }
div#readdbm { background: #8e8; text-align:center; margin: 1em 298px 0 154px; padding: 15px; font: bold 2em sans-serif }
div#lastpage { float:left; width: 150px; }
div#whatsnew { width: 160px; }


@media (max-width: 900px) {
	div#senslecture { display: none }
	div#whatisdbm, div#readdbm { margin-right: 168px }
}
@media (max-width: 500px) {
	div#lastpage {}
	div#whatsnew { float:left; margin-left: 5px }
	div#whatisdbm, div#readdbm, div.colon { margin: 0.5em auto; float: none }
	div#whatisdbm { clear: both }
}

.news { margin-bottom: 3em; clear: both }
.news h3 { margin: 0; border-bottom: 1px solid black }
.news div.date { color: #032; float:right; }
html[dir=rtl] .news div.date { float: left }
.news img { margin: 0.2em 0.5em 0.2em 0; float: left; max-width: 100% }
.news img.right  { margin: 0.2em 0 0.2em 0.5em; float: right }
.news img.center { margin: 0.2em; float: none }
/* all news got now 2 images. No class and class right. What is after is old version */
@media (max-width: 640px) {
	.news img { width: 49%; margin: 0 }
	.news img.right { margin: 0 }
	.news iframe { width: 95%; margin: auto }
}

/* because FF doesn't handle max-width:100% */
@-moz-document url-prefix() {
	@media (max-width: 1100px) {
		.news img { max-width: 600px }
		#rapidenews .news img { max-width: 400px }
	}
}
/* same pb exactly, with opera */
@media (max-width: 1100px) {
	noindex:-o-prefocus, .news img { max-width: 600px }
}


#rapidenews { padding: 2px; min-height:230px; }
#rapidenews .news { clear:none; margin:0 165px 0 0}
@media (max-width: 600px) {
	#rapidenews div.colon { margin: 0.5em auto; float: none }
	#rapidenews .news { margin: 0 }
}


.newsimgs img { vertical-align:middle; float: none; }
@media (max-width: 1100px) {
	.newsimgs img { max-width: 400px; width: 100% }
}

div.navigation {
	text-align: center;
	font: bold 25px 'Comic Sans Ms',Verdana,sans-serif;
	color: #fff;
}
div.navigation a { display:inline-block; width: 120px; height: 100px; border: none; vertical-align: middle; background:#ff0; background: rgba(255,255,0,0.5); font-size:0; text-decoration:none }
div.navigation a[rel=first] { background: url(nav/first.png) }
div.navigation a[rel=prev] { background: url(nav/prev.png) }
div.navigation a[rel=next] { background: url(nav/next.png) }
div.navigation a[rel=last] { background: url(nav/last.png) }
div.navigation a[rel=chprev] { background: url(nav/ch-prev.png) }
div.navigation a[rel=chnext] { background: url(nav/ch-next.png) }
html[dir=rtl] div.navigation a[rel=first] { background: url(nav/last.png) }
html[dir=rtl] div.navigation a[rel=prev] { background: url(nav/next.png) }
html[dir=rtl] div.navigation a[rel=next] { background: url(nav/prev.png) }
html[dir=rtl] div.navigation a[rel=last] { background: url(nav/first.png) }
html[dir=rtl] div.navigation a[rel=chprev] { background: url(nav/ch-next.png) }
html[dir=rtl] div.navigation a[rel=chnext] { background: url(nav/ch-prev.png) }
div.navigation .page {}
@media (max-width: 900px) {
	div.navigation { font-size: 20px }
	div.navigation a {
		background: transparent !important;
		display: inline;
		font-size: 1em;
		color: #fff;
		vertical-align: top;
	}
	div.navigation .page {}
}

p.error { position: fixed; left: 3em; width: 10em; bottom: 10%;
	border: 2px solid; color: red; background: #fdd; z-index: 99;
	text-align:center; font: bold 0.8em sans-serif }
p.error a,p.error a:visited { color: #c00 }

p.error2 { color: red; font: bold 1em sans-serif; }

#notraderror {
	width: 600px; margin: 1em auto; padding: 5px;
	border: 5px solid #f70; text-align: center;
	background: #ffa; color: #a40;
}

/************** Commentaires **************/

h2.comments { color: white }

div.reader_comment {
	text-align: left;
	border: 1px #620 solid;
	border-bottom: none;
	background: #FD5;
	width: 100%;
	overflow: hidden;
}
div.reader_comment#RClast { border-bottom: 1px #620 solid; }
div.reader_comment h2,div.reader_comment div { padding: 0.2em; text-align: left }
div.reader_comment h2 {
	background: #D90;
	color: white;
	font-size: 1em;
	margin: 0;
	padding: 0 0 0.2em 0.5em;
	clear: none;
}
div.reader_comment form { margin: 0 }
div.reader_comment form h2 input { background: #FE9; font-size: 0.8em; margin: 0.1em }
div.reader_comment form textarea { background: #FE9; width: 90%; margin: 0.5em auto }
div.reader_comment span.date { color: #500; float:right }
div.reader_comment img.gravatar { float: left; margin: 3px }
div.reader_comment form div.special { margin:0;padding:0;font:x-small sans-serif }

html[dir=rtl] div.reader_comment { text-align: inherit }
html[dir=rtl] div.reader_comment h2, html[dir=rtl] div.reader_comment div { text-align: inherit }
html[dir=rtl] div.reader_comment img.gravatar { float: right }


div.reader_comment a { color: #05b }
div.reader_comment a:visited { color: #025 }

div.reader_comment span.quote { color: #1C5538 }

div.author_comment { background: #FF8 }
div.author_comment h2 { background: #BB4 }

div#RClast a { font: 0.8em sans-serif; color: #A00; }
div#RClast a.rss { line-height: 2em; float: right; padding-right: 0.5em;
padding-left: 25px; background: url(/imgs/rss-22.png) left center no-repeat; }

html[dir=rtl] div.reader_comment h2 { text-align:right }
html[dir=rtl] div.reader_comment span.date { float: left }

.commenthelp {
	font: 1em sans-serif;
	border: 1px dotted;
	background: #FE9;
	margin: 0.5em 1em;
	padding: 1em!important;
}
.commenthelp a { cursor: pointer }
.comment_help_pop {
	display:none; background: #ffb; border: 3px solid #660; margin: 4em; padding: 1em!important;
	font: 1em sans-serif; color: black; cursor: pointer;
	position: relative; top: -20em;
}
.comment_help_pop span { color: red }
.comment_help_pop h4 { color: maroon }

a.edit {
	display: block;
	text-align: center; text-decoration: none;
	font: 0.8em sans-serif;
	border: 1px solid;
	-Moz-Border-Radius: 0.4em; Border-Radius: 0.4em;
	background: #7FB;
	width: 18ex;
	margin: 0.2em;
	margin-left: 1em;
	float: right;
}

a.colorbox {
	display: block; float: right;
	border: 1px solid black; margin: 0.5em; width: 15em;
	color: white; font: 0.7em sans-serif;
}

.auto_translation { border: 1px solid; background: #FFA; margin: 0.5em 1em 0 1em }
.auto_translation h5 { font: bold 0.8em sans-serif; margin: 0 0 0.2em 0 }

.reader_comment img { max-width: 400px; max-height: 200px }

div.reader_comment span.vote {
	font: bold 12px sans-serif; padding: 0; text-align:center;
	height: 18px; width: 70px; margin: 1px 2px;
	float:right; border: 2px solid #800;
}

div.reader_comment span.vote button {
	float:right; font: bold 10px sans-serif; line-height:2px; padding: 0; text-align:center;
	height: 16px; width: 16px; margin: 1px 2px; color: #800;
	background: #ff8; border: 1px solid #800;
}
div.reader_comment span.vote button+button {
float: left;
}

button.commentshide { margin: 0.5em auto; border-color: #f90; color: #500 }

/** promote.html **/
div.promos table { text-align:center }
div.promos tr.space td, div.promos table.space td { padding-bottom: 2em; }
div.promos table.space div.htmlcode { font: 1em monospace; border: 1px dotted; padding: 0.4em; overflow: auto; }
div.promos table.space div.credit { font: x-small sans-serif; text-align:right }
div.promos table.space a { color: black }

/** donations **/
#portrait {
	display:none;
	width: 780px;
	position: fixed; left: 50%; top:50%; margin: -250px 0 0 -400px;
	z-index: 888;
	cursor: pointer;
}
#portrait img { float: right; margin-left: -150px }
#portrait div {
	width: 180px; padding: 5px;
	margin-top: 120px;
	text-align: center;
	background: white;
	border: 2px solid #555;
	float:left;
}

div.ventepreview {
	display:none; position: fixed; text-align:center; cursor:pointer;
	top:5%; left: 7%; width: 80%; min-height: 400px; margin: 0; padding: 10px 2%; z-index:2000;
	border: 2px solid #520;
	-moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em;
background: #f25800;
background: -moz-linear-gradient(-45deg, #f25800 0%, #edf72e 58%, #f4c311 59%, #ffff21 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f25800), color-stop(58%,#edf72e), color-stop(59%,#f4c311), color-stop(100%,#ffff21));
background: -webkit-linear-gradient(-45deg, #f25800 0%,#edf72e 58%,#f4c311 59%,#ffff21 100%);
background: -o-linear-gradient(-45deg, #f25800 0%,#edf72e 58%,#f4c311 59%,#ffff21 100%);
background: -ms-linear-gradient(-45deg, #f25800 0%,#edf72e 58%,#f4c311 59%,#ffff21 100%);
background: linear-gradient(-45deg, #f25800 0%,#edf72e 58%,#f4c311 59%,#ffff21 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25800', endColorstr='#ffff21',GradientType=1 );
}
div.ventepreview hr {
	border: none; clear: both;
}
div.ventepreview>ul {
	margin: 0.5em 20%;
	text-align:left;
}
div.ventepreview .killspaces img {
	margin-left: -20px;
}
@media (max-width: 1100px) {
	div.ventepreview { top: 1%; left: 3%; width: 91%; padding: 10px 1% }
}
@media (max-width: 600px) {
	div.ventepreview { top: 0; left: 0; width: 96%;
	border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	div.ventepreview img.tome_ico { width: 80px; height: 100px; }
	div.ventepreview>ul { margin: 0.5em }
}

/* bonuses.html */
.bonus { max-width: 700px }
.bonus img {
	margin: 4px;
	border: 1px solid black;
	vertical-align:middle;
}
ul.bonuslist li { margin-bottom: 1em }

ul.bonuslist2 li { list-item: none; width: 47%; float: left; margin: 0; padding: 1%; font-size: big; text-align:center }

/* chapters.html */
div.chapters { padding: 5px; width: 300px; max-width:none!important; height: 200px; float: left; font-size: 13px; margin: 0 4px 4px 0 }
div.chapters img { float: left; border:none; display:block; margin-right: 5px; }
div.chapters p a { border: 1px solid; margin: 2px; display:block; text-decoration: none;
	width: 24px; height: 20px; text-align:center; float:left }
div.chapters p a.lastpage { color: #a60; background: #ff8 }
div.chapters p a.double { width: 54px }
html[dir=rtl] div.chapters p a { float:right }

div.chapters.after1000 p a { width: 30px }
div.chapters[ch="46"] { width: 330px }

table.samecols2 td { width: 50% }
table.samecols3 td { width: 33.3% }
table.samecols4 td { width: 25% }
table.samecols5 td { width: 20% }
table.samecols6 td { width: 16.7% }
table.samecols7 td { width: 14.3% }
table.samecols8 td { width: 12.5% }
table.samecols9 td { width: 11.1% }

.pageslist { text-align:center }
.pageslist a img { padding: 1px 5px 5px 1px; margin: 5px; background: url(/design/pagelist.png) top left no-repeat; }
.pageslist a.double img { background-image: url(/design/pagelist-double.png) }

div.chapters h2 { margin: 0; width: 100% }
div.chapters h3 { margin: 0; width: 100%; clear:both; background: transparent; font-size: 15px }

.chfanfic { width:142px !important; height:200px !important; overflow:visible }
.chfanfic h2 { font-size: 15px }

div.chaptersspeciaux { width:24em;height:200px;overflow:visible; text-align: left }
div.chaptersspeciaux h2 { margin-left: 150px; margin-bottom: 5px; clear: none; width:auto }
div.chaptersspeciaux>div { height: 160px; overflow: auto }
div.chaptersspeciaux>div>div { margin: 7px 0 }
div.chaptersspeciaux[ch="0"] { width:35em }
div.chaptersspeciaux[ch="3"] { width:30em }
div.chaptersspeciaux[ch="8"] { width:30em }
div.chaptersspeciaux[ch="1"],
div.chaptersspeciaux[ch="4"],
div.chaptersspeciaux[ch="17"] { width:20em }

table.chaptersSeparate { border-collapse: separate; border-spacing: 5px; display:table }
table.chaptersSeparate td, table.chaptersSeparate th { padding: 0; display: table-cell }
table.chaptersSeparate th { background: #6e89d5; border: 1px solid black; font: 1.3em inherit; padding-bottom: -5px }


table.chaptersmode { width: 65%; margin: 0.5em auto }
table.chaptersmode td { width: 33% }
table.chaptersmode td a { display:block; border: 1px solid black; background: #ccf;
	border-radius: 5px; -moz-border-radius: 5px;
	text-decoration: none; color: black; font-weight: bold; margin: 0 10%; text-align:center;
}
table.chaptersmode td a.sel { background: #ffc }

@media (max-width: 440px) {
	table.chaptersSeparate { display: inline; }
	table.chaptersSeparate td { display: inline-block }
	table.chaptersSeparate th { display: block }
	table.chaptersmode { width: 95% }
}

/* table a bordure nette */
table.bords {
	text-align: center;
	border-collapse: collapse;
	empty-cells: show;
	margin:auto;
}
table.bords td, table.bords th {
	border: 1px solid black;
	text-indent: 0;
}
table.bords th { background: #b0b0b0 }

/* tables servant de separation en colonnes */
table.cols { width: 100%; border-collapse: collapse; margin: 0 -6px }
table.cols td, table.cols th { padding: 6px; vertical-align:top }

/* cadres a images pr dl (old page bonus only) */
div.im {
	text-align: left;
	height: 120px;
	clear: both;
}
div.im img {
	float: left;
	margin: 0.2em;
}
div.im div {
	height: 94px; overflow: auto;
	border: 1px solid; font: small sans-serif;
	margin: 0.2em; padding: 3px;
}

@media (min-width: 601px) {
	div.im {
		padding-top: 0.5em;
		margin: 0 10%;
	}
}

/******** fanarts.html *********/

div.fanarts-navigation>a {
	display:block;
	padding: 0.1em 0.3em;
	border:1px solid; background:#ddf;
	text-align:center; text-decoration: none;
}


iframe.fanart-video { display:block; margin: auto; width: 800px; height: 600px; max-width: 95% }
@media(max-width:700px) {
	iframe.fanart-video { width: 400px; height: 300px }
}

/* Page présentation des fanarts */

	div.fanarts h1 {
		margin-bottom: 0.5em;
	}
	div.fanarts h2 {
		margin-top: 0.1em;
	}
	div.fanarts>div.cadrelect {
		width:49%;
		box-sizing: border-box;
		margin: 5px 0; /* vire margin:auto pour que flex gere a la place */
		margin-bottom: 1em;
	}
	div.fanarts>div.cadrelect div.fanartimages img {
		margin: 0;
	}
	.fanart_image {
		display:block;
		background: #000 center no-repeat; background-size: contain;
	}
	@media(max-width:1100px) {
		div.fanarts>div.cadrelect { width: 100% }
	}

	a.fanart-author {
		text-decoration: none;
		align-items: center;
		color: black;
	}
	.fanart-author>img {
		width: 45%; height: auto;
		background: black;
	}
	.fanart-author>div {
		flex: 1 1 55%;
		text-align:left;
		padding: 0 1em;
		box-sizing: border-box;
	}
	.fanart-author>div>h4 {
		margin: 0.2em 0;
		font-size: 140%;
	}
	.fanart-author:nth-child(even) {
		flex-direction: row-reverse;
	}
	.fanart-author:nth-child(even)>div {
		text-align:right;
	}
	@media(max-width:700px) {
		.fanart-author>div {
			font-weight: normal;
		}
		.fanart-author>div>h4 {
			font-size: 120%;
		}
	}

	/* My Ratio system
	   Soit image svg avec ratio ecrit dedans.
	   Soit image de 1x1 avec width = hauteur/largeur %
	 */
	.myratio { position: relative }
	.myratio>img:first-child{ display:block; width: 100%; height:auto }
	.myratio>*:last-child {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		min-width: 0; max-width: none;
		min-height: 0; max-height: none;
	}

/* Page liste de fanarts */
div.fanart-list {
	max-width:none; /* cancel .bonus */
}
div.fanart-list>h1 { overflow: auto }
div.fanart-list>h1>img {
	height: 150px;
	margin: 0 1em;
}
div.fanart-list>h1>div {
	display:inline-block;
}

div.fanart-line {
	text-align: left;
	clear: both;
}
div.fanart-line>div {
	flex: 1; /* "take the rest" */
	min-width: 10em;
	height: 94px; overflow: auto;
	border: 1px solid;
	font: small sans-serif;
	margin: 0.2em; padding: 3px;
}

.fanart-line>iframe.fanart-video { width: 150px; height: 100px }


/* Page d'un seul fanart */
div.fanart-page-desc>img {
	float: left;
	height: 100px;
	margin-right: 0.5em;
}
div.fanart-images {
	text-align:center;
}
div.fanart-images img {
	background: #fff;
	border: 1px solid #000;
	-moz-box-shadow: 10px 10px 5px #aaa;
	-moz-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 10px 10px 5px #aaa;
	-webkit-box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	margin: 0.6em;
	max-width:95%;
}


/* For upload */
div.fanarts-examples div {
	border: 1px solid; padding: 5px; width:140px; height: 140px; float: left; margin: 4px; font: bold 1em sans-serif;
	position: relative; text-align:left;
}
div.fanarts-examples div span { background: #9bf; display:block; padding: 0.4em; opacity:0.2 }
div.fanarts-examples div:hover span { opacity:1 }


/******** fanfic.html *********/
.fanfic { width: 35em; min-width: 550px; margin: 5px auto; padding: 1.5em }
.fanfic p { margin: 0; text-indent: 1.5em; text-align:justify }
.fanfic h1 { margin: 2em 0 0 0; text-transform: uppercase }
.fanfic h2 { margin-top: 2em }
.fanfic img { border: 1px solid #000; padding: 2px; background: #fff; margin: 0.8em }
.fanfic p.center { text-indent: 0; text-align: center }
.fanfic p.center img { margin: 0 }
.fanfic img.left { float:left; margin-left: 0 }
.fanfic img.right{ float:right; margin-right: 0 }
.fanfic img.nocss { border: none; background: transparent }

.fanfic p.fanficspace { font-size: 0.6em }
.fanfic h2+p.fanficspace { display:none }

.fanfic_u14 p, .fanfic_u14b p, .fanfic_u19 p
	{ margin: 0.7em }

.cadrelect.parties.fanfic_dbm {
	max-width: 17em;
}

div.parties { padding: 5px; max-width: 30em; font-size: 14px; height: auto; overflow:auto }
div.parties b.parttitle { display:block; width: 6em; height: 20px; text-align:left; float:left; clear:left }
div.parties a { border: 1px solid; margin: 2px; display:block; text-decoration: none; width: 24px; height: 20px; text-align:center; float:left }
div.parties a.lastpage { color: #a60; background: #ff8 }
div.parties a.double { width: 54px }

@media (min-width: 1140px) {
	/* pour le roman, on mets les chapitres à gauche en grande def */
	div.cadrelect.parties.fanfic_dbm {
		width: 17em;
		float: left;
	}
	div.fanfic_all_chapter.fanfic_dbm {
		margin-left: 17em;
	}
}

@media (max-width: 600px) {
	.fanfic { width: auto; min-width: 0; margin: 0.2em; padding: 0.5em }
}

.warning {
	color:#b00;
	margin-top:1em;
	font: bold 1.3em sans-serif;
}
.warning input {
	-ms-transform: scale(2);
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

.fanfic #hanasia_cast img {
	/* Que des images à droite en 150x150. On annule le .fanfic img et on mets nos trucs */
	padding: 0; margin: 0 0 0 0.8em;
	border-radius: 30px;
	float:right;
}
.fanfic #hanasia_cast img.left {
	float: left; margin: 0 0.8em 0 0;
}
#hanasia_cast h3, #hanasia_cast h4 { clear: both }
@media (max-width: 600px) {
	.fanfic #hanasia_cast img {
		width: 80px; height: 80px;
		border-radius: 20px;
	}
}

/********* faq.html ***********/
.faq  { max-width: 50em; padding: 1.5em }
.faq h4 { margin : 1em 0 0 0 }
.faq h4::before, .faq h4::after { content: " ★ "; color: #347 }
.faq p { margin : 0; text-indent: 2em }

/******** listing universes ********/

.cadrelect { position: relative }

.cadrelect div#arena { position: relative; height: 520px; width: 735px; margin:5px auto; }
.cadrelect div#arena div { position: absolute; border: 1px solid; width: 90px; height: 60px; cursor:pointer }
.cadrelect div#arena div img { position: absolute; width: 90px; height:60px }
.cadrelect div#arena div h2 { margin: 0; padding: 0; border: none; text-align:center; background: transparent;
	position: absolute; z-index:5; color:red; top: 15px; left: 25px; font: bold 23px sans-serif }
.cadrelect div#arena div h2+h2 { z-index:4; color: black; top: 17px; left: 27px; opacity:0.7 }
.cadrelect div#arena div div { display:none }

.cadrelect div#udescs { }
.cadrelect div#udescs>div { display: none; margin: 0 auto; width: 390px; height: 261px;
	position: absolute; left: 50%; top: 110px; margin-left:-207px;
	border: 2px solid red; background: #ff5; padding: 10px; z-index:30; font: 13px sans-serif; line-height: 16px }
.cadrelect div#udescs>div#hello { display:block; width: 280px; height: 160px; top: 180px; margin-left:-161px; text-align:center; font-weight:bold;  border-radius: 150px/90px; -moz-border-radius: 150px/90px }
.cadrelect div#udescs>div#hello b { color: red }
.cadrelect div#udescs>div img { position: absolute; opacity: 0.2; -moz-opacity: 0.2; width: 410px; height:281px; margin: -10px 0 0 -10px; z-index:35 }
.cadrelect div#udescs>div div, .cadrelect div#udescs>div h4 { position: relative; z-index:40 }
.cadrelect div#udescs>div ul { margin-top: 0; text-align:left; font-weight: bold }
.cadrelect div#udescs>div h4 { text-align:center; font-size: 16px; color: red; margin: 0 }
/* desc uni*/
.cadrelect div#udescs>div h4+div { margin: 0.5em 0 }
/* list chars 1 and 2 */
.cadrelect div#udescs>div h4+div+div { width: 50%; float: left; }
.cadrelect div#udescs>div h4+div+div+div { width: 50%; float: left; }
.cadrelect div#udescs>div h4+div+div+div+div { clear: both }
.cadrelect div#udescs>div h5 { margin: 0; font-size:1em }
/*specials*/
.cadrelect div#udescs>div#u21 { height: 330px }
.cadrelect div#udescs>div#u21>img { display: none }

/*********** rss.html social networks ********/
.social-network {
	max-width:50em;
}
.social-network>table {
	width:70%;
	margin:auto;
}
.social-network>table td { width: 50% }

iframe#twitter-widget-0 {
	width:70% !important;
	margin: 0 auto 1em auto;
	display: block;
}

@media (max-width: 600px) {
	iframe#twitter-widget-0, .social-network>table { width: 100% !important }
}

/*********** the authors **********/

#sites_sala2 {
	display:none;
}

.the-authors {
	overflow: auto;
}

.the-authors p {
	margin: 0.5em 0;
}

div.col, div.col-big {
	margin: 0.2em 1%;
	padding: 0;
	border: none;
}
div.col:nth-child(odd) { clear: left }

@media (min-width: 600px) and (max-width: 900px) {
	div.col {
		width: 48%;
		float: left;
	}
}
@media (min-width: 1050px) {
	div.col {
		width: 48%;
		float: left;
	}
}
@media (min-width: 500px) {
	div.col-big {
		width: 48%;
		float: left;
	}
}