/*************************************>
 *  < Format >
 *************/

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.just {text-align: justify;}

.none {text-decoration: none;}
.u {text-decoration: underline;}
.i {font-style: italic;}
.b {font-weight: bold;}


/*************************************>
 *  < Titles >
 *************/

.titlebox a {}

.title {
	}

.title1 {
    font-family: MirkwoodChronicle;
	font-weight: bold;
    font-size: 30px;
	}

.title2 {
	font-weight: bold;
	}

.caption {
    width: 500px;
    text-align: center;
    }

.titlebox {
    border-radius: 15px;
    text-shadow: 1px 1px 2px white;
    margin: auto;
    text-align: center;
    width: 250px;
    border: 2px solid black;
    background-image: url("pics/tiles/light_honeycomb.png")
    }
.titlebox .title {font-weight: bold;}


/*************************************>
 *  < Liens >
 *************/
a, a:active, a:link {color:inherit; text-decoration:none;}

a:active {
    }
a:hover {
    color: goldenrod;
    text-shadow: 1px 2px 2px black;
    font-weight: bold;
    }
.a:hover {
    color: goldenrod;
    text-shadow: 1px 2px 2px black;
    font-weight: bold;
    }


/* ********************************* *>
 *  < MASTER DIV >
 *************/
.masterdiv {
    margin: 0 auto;
    width: 1000px;
    }

/* ********************************* *>
 *  < BODY >
 *************/
body {
    background-image: url("pics/tiles/irongrip.png");
    color: black; text-shadow: 1px 2px 1px gray;
    font-family: comfortaaregular;
    font-size: 20px;
	line-height: 28px;
    text-align: center;
    word-wrap: break-word !important;
	}

/* ********************************* *>
 *  < BACKGOUNDS >
 *************/

/* .bg_ {background-image: url("pics/tiles");} */
.bg_grey {background-image: url("pics/tiles/always_grey.png");}
.bg_randgrey {background-image: url("pics/tiles/random_grey_variations.png");}

.bg_scales {background-image: url("pics/tiles/black_scales.png");}
.bg_thread {background-image: url("pics/tiles/black_thread.png");}

.bg_connect {background-image: url("pics/tiles/connect.png");}

.bg_darkwood {background-image: url("pics/tiles/dark_wood.png");}
.bg_darkwoodx {background-image: url("pics/tiles/dark_wood_@2X.png");}
.bg_purtywood {background-image: url("pics/tiles/purty_wood.png");}

.bg_graphy {background-image: url("pics/tiles/graphy.png");}

.bg_honey {background-image: url("pics/tiles/light_honeycomb.png");}
.bg_pinstriped {background-image: url("pics/tiles/pinstriped_suit.png");}
.bg_nami {background-image: url("pics/tiles/nami.png");}
.bg_gre3g {background-image: url("pics/tiles/px_by_Gre3g.png");}
.bg_robots {background-image: url("pics/tiles/robots.png");}


/* ********************************* *>
 *  < HEADER LOGO >
 *************/
header {
    border: 0px solid orangered;
    font-family: "egdragoncaps";
    font-size: 2.5em;
    letter-spacing: -0.10em;
    margin: 0em 0 0.5em 0;
    /* text-transform: uppercase; */
    text-shadow: 0px 1px 1px white;
    }


    /*
    */


/*************************************>
 *  < P >
 *************/
.p {
    background-color: black;
    background-image: url("pics/tiles/escheresque.png");
    border: 3px solid black;
    border-radius: 40px;
    color: black; text-shadow:1px 1px 2px;
    /* For IE8 and earlier *//* opacity: 0.5; filter: alpha(opacity=90); */
    padding: 12px;
	text-align: justify;
	margin-top: 10px;
	margin-bottom: 10px;
    }
p {
    background-color: black;
    background-image: url("pics/tiles/escheresque.png");
    border: 3px solid black;
    border-radius: 40px;
    color: black; text-shadow:1px 1px 2px;
    margin: auto;
    margin-top: 15px;
    /* For IE8 and earlier *//* opacity: 0.5; filter: alpha(opacity=90); */
    padding: 20px;
    text-align: justify;
    }

/*************************************>
 *  < Lettrine >
 *************/
.pfirst {
    color: black; text-shadow: 3px 1px 2px goldenrod;
    font-family: egdragoncaps;
    font-size: 2em;
    font-weight: normal;
    padding-right: 5px;
    }

/*************************************>
 *  < Images >
 *************/
img.imgbox {
    }

img.float_l {margin-right: 20px;}
img.float_r {margin-left: 20px;}

.imgbox_w, .imgbox_b {
    border: 3px solid;
    border-radius: 30px;
    }

.imgbox_b {border-color: black;}
.imgbox_w {border-color: white;}

/*************************************>
 *  < H >
 *************/
h3 a {color: #FFF;}
h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
	margin-top: 100px;
    }	
h3 {
	color: #FFF;
	text-align: center;
	font-size: 30px;
    }


/*************************************>
 *  < TABLE >
 *************/
table {
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    border: 3px solid goldenrod;
    background: black;
    border-radius: 20px;
    }

td {
    border: 1px solid white;
    padding: 10px;
    border-radius: 0;
    padding: 15px;
    background-image: url("pics/tiles/escheresque.png");
    color: black; text-shadow: 1px 1px 3px gray;
    }

tr:first-child td:first-child {border-top-left-radius: 15px;}
tr:first-child td:last-child {border-top-right-radius: 15px;}
tr:first-child td {
    background-image: url("pics/tiles/escheresque_ste.png" );
    background-color: black !important;
    font-weight: bold;
    color: white; text-shadow: 2px 2px 1px black;
    margin: 0px;
	}

tr:last-child > td:last-child {
    }

tr:last-child > td:first-child {border-bottom-left-radius: 15px;}
tr:last-child > td:last-child {border-bottom-right-radius: 15px;}

/*************************************>
 *  < FOOTER >
 *************/
footer
    {
    color: darkgray;
    text-shadow: 1px 2px 1px black;
    text-align: center;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 15px;
    }



/*************************************>
 *  < NAV >
 ***************/

#container {margin:0 auto; max-width:1000px;}
#relatedContent {max-width: 200px; margin: 200px auto;}

/* Item relatif de la liste */
#relatedContent .item {
    float: left;
    max-width: 44%; padding: 3%;
    text-align: center;
    }
#relatedContent .item a img {max-width: 100%;}
nav {margin:0px 0 20px 0;}
nav ul {padding:0;	margin:0; list-style:none; position:relative;}
nav ul li {display:inline-block; background-color: none;}

/* Lien normal de la liste */
nav a {
    background-image: url("pics/tiles/escheresque.png");
    border-radius:15px; border:1px solid black;
    color: black !important; text-shadow: 1px 1px 3px;
    display:block; line-height:60px;
    font-weight: lighter;
    font-size:20px; font-family: UnZialish;
	padding: 0 10px;	
    z-index: 999;
    }
 
/* Souris par dessus un lien */
nav a:hover { 
    color:gold !important; text-shadow:1px 2px 1px !impotant;
    border: 1px solid black;
    background-image: url("pics/tiles/escheresque_ste.png");
    font-weight: normal;
    z-index: 999;
    }

/* Cacher les sous-menus par d&eacute;faut. */
nav ul ul {display:none; position:absolute; top:60px;}
/* Afficher les sous-menus sur :hover */
nav ul li:hover > ul {display:inherit; z-index: 1000;}
/* Niveau 1, 3 et + */
nav ul ul li {width:170px; float:none; display:list-item; position:relative; z-index: 1234;}
/* Niveau 2, 3 et infini */
nav ul ul ul li {position:relative; top:-60px; left:170px;}

/* Symbole à afficher lorsqu'un item contient un autre pallier */
li > a:after { content:  ' >'; }
li > a:only-child:after { content: ''; }




/*************************************>
 *  < HOVER ICON EFFET #8 >
 *************/
 .hovicon.effect-8 {
    background: rgba(255, 255, 255, 0.0);
    background-position: center;
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
    }
.hovicon.effect-8:after {
    background-position: center;
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    opacity: 0;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    }
.hovicon.effect-8:hover {
    background: rgba(255, 255, 255, 0.50);
    background-position: center;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    color: #fff;
    border: 2px solid black;
    }
.hovicon.effect-8:hover i {color: #fff; }
.hovicon.effect-8:hover:after {
    -webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
    }
.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    border-radius: 50px;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
    }


/*************************************>
 *  < Séparateur >
 *************/
.seps {
    text-align: center !important;
    margin: auto !important;
    }

/*************************************>
 *  < FLOAT  >
 *************/
.float_r {float: right;}
.float_l {float: left;}

/*************************************>
 *  < VIDEO  >
 *************/
video {
    border-radius: 10px;
    }

/*************************************>
 *  < POLICES >
 ***************/

/*
@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif); */

/* AncientWeapons */
@font-face {
    font-family: 'AncientWeapons';
    src: url('fonts/ancientweapons/AncientWeapons.eot');
    src: url('fonts/ancientweapons/AncientWeapons.eot') format('embedded-opentype'),
         url('fonts/ancientweapons/AncientWeapons.woff2') format('woff2'),
         url('fonts/ancientweapons/AncientWeapons.woff') format('woff'),
         url('fonts/ancientweapons/AncientWeapons.ttf') format('truetype'),
         url('fonts/ancientweapons/AncientWeapons.svg#AncientWeapons') format('svg');
}
.font_ancientweapons {font-family: AncientWeapons;}

/* UnZialish */
@font-face {
    font-family: 'UnZialish';
    src: url('fonts/unzialish/unzialish.eot');
    src: url('fonts/unzialish/unzialish.eot') format('embedded-opentype'),
         url('fonts/unzialish/unzialish.woff2') format('woff2'),
         url('fonts/unzialish/unzialish.woff') format('woff'),
         url('fonts/unzialish/unzialish.ttf') format('truetype'),
         url('fonts/unzialish/unzialish.svg#UnZialish') format('svg');
    }
.font_unzialish {font-family: UnZialish;}

/* EGDragonCaps */
@font-face {
    font-family: 'EGDragonCaps';
    src: url('fonts/dragoncaps/EGDragonCaps.eot');
    src: url('fonts/dragoncaps/EGDragonCaps.eot') format('embedded-opentype'),
         url('fonts/dragoncaps/EGDragonCaps.woff2') format('woff2'),
         url('fonts/dragoncaps/EGDragonCaps.woff') format('woff'),
         url('fonts/dragoncaps/EGDragonCaps.ttf') format('truetype'),
         url('fonts/dragoncaps/EGDragonCaps.svg#EGDragonCaps') format('svg');
}
.font_egdragoncaps {font-family: EGDragonCaps;}

/* Neverwinter */
@font-face {
    font-family: 'Neverwinter';
    src: url('fonts/neverwinter/neverwinter.eot');
    src: url('fonts/neverwinter/neverwinter.eot') format('embedded-opentype'),
         url('fonts/neverwinter/neverwinter.woff2') format('woff2'),
         url('fonts/neverwinter/neverwinter.woff') format('woff'),
         url('fonts/neverwinter/neverwinter.ttf') format('truetype'),
         url('fonts/neverwinter/neverwinter.svg#neverwinter') format('svg');
	}
.font_neverwinter {font-family: Neverwinter;}

/* ComfortaaRegular */
@font-face {
    font-family: 'ComfortaaRegular';
    src: url('fonts/comfortaa/ComfortaaRegular.eot');
    src: url('fonts/comfortaa/ComfortaaRegular.eot') format('embedded-opentype'),
         url('fonts/comfortaa/ComfortaaRegular.woff2') format('woff2'),
         url('fonts/comfortaa/ComfortaaRegular.woff') format('woff'),
         url('fonts/comfortaa/ComfortaaRegular.ttf') format('truetype'),
         url('fonts/comfortaa/ComfortaaRegular.svg#ComfortaaRegular') format('svg');
    }
.font_comfortaaregular {font-family: ComfortaaRegular;}

/* DarksSkyrim */
@font-face {
    font-family: 'DarksSkyrim';
    src: url('fonts/darksskyrim/DarksSkyrim.eot');
    src: url('fonts/darksskyrim/DarksSkyrim.eot') format('embedded-opentype'),
         url('fonts/darksskyrim/DarksSkyrim.woff2') format('woff2'),
         url('fonts/darksskyrim/DarksSkyrim.woff') format('woff'),
         url('fonts/darksskyrim/DarksSkyrim.ttf') format('truetype'),
         url('fonts/darksskyrim/DarksSkyrim.svg#DarksSkyrim') format('svg');
}
.font_darksskyrim {font-family: DarksSkyrim;}

/* MirkwoodChronicle */
@font-face {
    font-family: 'MirkwoodChronicle';
    src: url('fonts/mirkwoodchronicle/MirkwoodChronicle.eot');
    src: url('fonts/mirkwoodchronicle/MirkwoodChronicle.eot') format('embedded-opentype'),
         url('fonts/mirkwoodchronicle/MirkwoodChronicle.woff2') format('woff2'),
         url('fonts/mirkwoodchronicle/MirkwoodChronicle.woff') format('woff'),
         url('fonts/mirkwoodchronicle/MirkwoodChronicle.ttf') format('truetype'),
         url('fonts/mirkwoodchronicle/MirkwoodChronicle.svg#MirkwoodChronicle') format('svg');
}
.font_mirkwoodchronicle {font-family: MirkwoodChronicle;}

/* Mevno1: Medieval #1*/
@font-face {
    font-family: 'mevno1';
    src: url('fonts/mevno1/mevno1.eot');
    src: url('fonts/mevno1/mevno1.eot') format('embedded-opentype'),
         url('fonts/mevno1/mevno1.woff2') format('woff2'),
         url('fonts/mevno1/mevno1.woff') format('woff'),
         url('fonts/mevno1/mevno1.ttf') format('truetype'),
         url('fonts/mevno1/mevno1.svg#mevno1') format('svg');
} /* */
.font_mevno1 {font-family: mevno1;}

/* Quest */
@font-face {
    font-family: 'Quest';
    src: url('fonts/quest/Quest.eot');
    src: url('fonts/quest/Quest.eot') format('embedded-opentype'),
         url('fonts/quest/Quest.woff2') format('woff2'),
         url('fonts/quest/Quest.woff') format('woff'),
         url('fonts/quest/Quest.ttf') format('truetype'),
         url('fonts/quest/Quest.svg#QuestKnight') format('svg');
    }
.font_quest {font-family: Quest;}

/* QuestKnight */
@font-face {
    font-family: 'QuestKnight';
    src: url('fonts/questknight/QuestKnight.eot');
    src: url('fonts/questknight/QuestKnight.eot') format('embedded-opentype'),
         url('fonts/questknight/QuestKnight.woff2') format('woff2'),
         url('fonts/questknight/QuestKnight.woff') format('woff'),
         url('fonts/questknight/QuestKnight.ttf') format('truetype'),
         url('fonts/questknight/QuestKnight.svg#QuestKnight') format('svg');
}
.font_questknight {font-family: QuestKnight;}

/* JandaQuickNote */
@font-face {
    font-family: 'JandaQuickNote';
    src: url('fonts/jandaquicknote/JandaQuickNote.eot');
    src: url('fonts/jandaquicknote/JandaQuickNote.eot') format('embedded-opentype'),
         url('fonts/jandaquicknote/JandaQuickNote.woff2') format('woff2'),
         url('fonts/jandaquicknote/JandaQuickNote.woff') format('woff'),
         url('fonts/jandaquicknote/JandaQuickNote.ttf') format('truetype'),
         url('fonts/jandaquicknote/JandaQuickNote.svg#JandaQuickNote') format('svg');
}
.font_jandaquicknote {font-family: JandaQuickNote;}

/* OdinRoundedBold */
@font-face {
    font-family: 'OdinRoundedBold';
    src: url('fonts/odinroundedbold/OdinRoundedBold.eot');
    src: url('fonts/odinroundedbold/OdinRoundedBold.eot') format('embedded-opentype'),
         url('fonts/odinroundedbold/OdinRoundedBold.woff2') format('woff2'),
         url('fonts/odinroundedbold/OdinRoundedBold.woff') format('woff'),
         url('fonts/odinroundedbold/OdinRoundedBold.ttf') format('truetype'),
         url('fonts/odinroundedbold/OdinRoundedBold.svg#OdinRoundedBold') format('svg');
    }
.font_odinroundedbold {font-family: OdinRoundedBold;}

/* Drugs */
@font-face {
    font-family: 'Drugs';
    src: url('fonts/drugs/Drugs.eot');
    src: url('fonts/drugs/Drugs.eot') format('embedded-opentype'),
         url('fonts/drugs/Drugs.woff2') format('woff2'),
         url('fonts/drugs/Drugs.woff') format('woff'),
         url('fonts/drugs/Drugs.ttf') format('truetype'),
         url('fonts/drugs/Drugs.svg#Drugs') format('svg');
}
.font_drugs {font-family: Drugs;}

/* QueenofCamelotRegular -&eacute; */
@font-face {
    font-family: 'QueenofCamelotRegular';
    src: url('fonts/queenofcamelotregular/QueenofCamelotRegular.eot');
    src: url('fonts/queenofcamelotregular/QueenofCamelotRegular.eot') format('embedded-opentype'),
         url('fonts/queenofcamelotregular/QueenofCamelotRegular.woff2') format('woff2'),
         url('fonts/queenofcamelotregular/QueenofCamelotRegular.woff') format('woff'),
         url('fonts/queenofcamelotregular/QueenofCamelotRegular.ttf') format('truetype'),
         url('fonts/queenofcamelotregular/QueenofCamelotRegular.svg#QueenofCamelotRegular') format('svg');
}
.font_queenofcamelotregular {font-family: QueenofCamelotRegular;}

/* DelightfulLilDragons -A -&eacute; -0 */
@font-face {
    font-family: 'DelightfulLilDragons';
    src: url('fonts/delightfullildragons/DelightfulLilDragons.eot');
    src: url('fonts/delightfullildragons/DelightfulLilDragons.eot') format('embedded-opentype'),
         url('fonts/delightfullildragons/DelightfulLilDragons.woff2') format('woff2'),
         url('fonts/delightfullildragons/DelightfulLilDragons.woff') format('woff'),
         url('fonts/delightfullildragons/DelightfulLilDragons.ttf') format('truetype'),
         url('fonts/delightfullildragons/DelightfulLilDragons.svg#DelightfulLilDragons') format('svg');
}
.font_delightfullildragons {font-family: DelightfulLilDragons;}

/* UnquietSpirits -&eacute; */
@font-face {
    font-family: 'UnquietSpirits';
    src: url('fonts/unquietspirits/UnquietSpirits.eot');
    src: url('fonts/unquietspirits/UnquietSpirits.eot') format('embedded-opentype'),
         url('fonts/unquietspirits/UnquietSpirits.woff2') format('woff2'),
         url('fonts/unquietspirits/UnquietSpirits.woff') format('woff'),
         url('fonts/unquietspirits/UnquietSpirits.ttf') format('truetype'),
         url('fonts/unquietspirits/UnquietSpirits.svg#UnquietSpirits') format('svg');
}
.font_unequietspirits {font-family: unquietspirits;}

/* PaganiniLight */
@font-face {
    font-family: 'QueenofCamelotRegular';
    src: url('fonts/paganinilight/PaganiniLight.eot');
    src: url('fonts/paganinilight/PaganiniLight.eot') format('embedded-opentype'),
         url('fonts/paganinilight/PaganiniLight.woff2') format('woff2'),
         url('fonts/paganinilight/PaganiniLight.woff') format('woff'),
         url('fonts/paganinilight/PaganiniLight.ttf') format('truetype'),
         url('fonts/paganinilight/PaganiniLight.svg#PaganiniLight') format('svg');
    }
.font_paganinilight {font-family: PaganiniLight;}