/***********************************************************************************************************************************/
/***********************************************************************************************************************************
..######...#######..##....##..######...#######..##.......########
.##....##.##.....##.###...##.##....##.##.....##.##.......##......
.##.......##.....##.####..##.##.......##.....##.##.......##......
.##.......##.....##.##.##.##..######..##.....##.##.......######..
.##.......##.....##.##..####.......##.##.....##.##.......##......
.##....##.##.....##.##...###.##....##.##.....##.##.......##......
..######...#######..##....##..######...#######..########.########
/***********************************************************************************************************************************
/***********************************************************************************************************************************
						http://dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow#Console_du_cheval
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/

.content:not(.content--hasjumbotron) #console{
	padding-top: 7px; /* horse position */
}

/***********************************************************************************************************************************/
/* CONSOLE : SABLE *****************************************************************************************************************/
/***********************************************************************************************************************************/

/* si previsualisation no-pub */
body.sable #content {height:550px;}


/***********************************************************************************************************************************/
/* CONSOLE : POMME DIAMANT *********************************************************************************************************/
/***********************************************************************************************************************************/

.diamond-apple .body-background {
	background-image:url(/media/equideo/image/chevaux/console/pomme-diamant/404-console.jpg);
}
body.diamond-apple{
	background-color: #E3DFB0;
}

/***********************************************************************************************************************************/
/* CONSOLE : SANS PUB **************************************************************************************************************/
/***********************************************************************************************************************************/

/* sur la console sans pub, on ne remonte pas le background afin d'afficher l'intégralité de l'arrière-plan... */
body.nopub div.body-background,
body.nopub div.body-background-left,
body.nopub div.body-background-right {
	top: 0;
}

/* console paysage sans pub */
body.nopub #col-left.bottom,
body.nopub #col-right.bottom{
	padding-top:463px;
}

/* lorsque la console est en paysage/vente, on recale la position de la colonne centrale pour conserver la bonne position du cheval */
body.nopub.status-bottom #col-center {
	padding-top: 106px;
}

/* paysage-wrapper : aperçu de la zone de customisation de la position du cheval*/
body.nopub:not(.console-preview) #paysage-wrapper{
	top:106px;
}

/* prévisualisation Rayon Helios (toujours sans pub) */
body.nopub.console-preview #col-left.bottom,
body.nopub.console-preview #col-right.bottom,
/* sans pub et en vente */
body.nopub.console-vente #col-left.bottom,
body.nopub.console-vente #col-right.bottom,
/* valeur par défaut */
#col-left.bottom,
#col-right.bottom{
	padding-top:357px;
}


/***********************************************************************************************************************************/
/* CONSOLE : ANCIENS RAYON D'HELIOS ************************************************************************************************/
/***********************************************************************************************************************************/

/* anciens rayons d'helios redimensionnés via script */
body.background-old #body-background,
body.background-old #body-background-left,
body.background-old #body-background-right{
	top: -120px;
}
/* anciens rayons d'helios qui ont été re-actualisés */
body.background-old-replaced #body-background,
body.background-old-replaced #body-background-left,
body.background-old-replaced #body-background-right{
	/* correction à définir si nécessaire */
}


/***********************************************************************************************************************************/
/* CONSOLE : PUBLIQUE **************************************************************************************************************/
/***********************************************************************************************************************************/

/* si fiche publique sans pub avec utilisateur déconnecté */
body.console-public.nopub.disconnected #col-left.bottom,
body.console-public.nopub.disconnected #col-right.bottom {
	padding-top:350px;
}
body.console-public.immersive.no-animation #imageCheval{
	position:relative;
}

/***********************************************************************************************************************************/
/* CONSOLE : PREFERENCES (VIP : page de customisation des blocs) *******************************************************************/
/***********************************************************************************************************************************/

body.nopub.console-preferences .action-grid{
	margin: inherit;
}
body.nopub.console-preferences #image-body-content{
	padding: inherit;
	margin: -80px 0 0;
}
body.nopub.console-preferences #personnalisation-controle{
	height: 300px;
}
body.nopub.console-preferences .module-style-17 h3{
	font-size: 17px;
}


/***********************************************************************************************************************************/
/* CONSOLE - GENERIC ***************************************************************************************************************/
/***********************************************************************************************************************************/

#console .module {
	margin-bottom:12px;
	z-index:102;
	position:relative;	
}
#console .module-content td {
	padding-top:3px;
	padding-bottom:3px;
}
#console .fullwidth{
	margin:0 -10px;
}
#console .fullwidth td.first,
#console .fullwidth .grid-cell.first{padding-left:10px;}
#console .fullwidth td.last,
#console .fullwidth .grid-cell.last{padding-right:10px;}
#console .fullwidth .grid-cell{
	padding-top:3px;
	padding-bottom:3px;
}
#console div.gauge{
	margin:0 auto;
}
#console div.dashed{
	border-bottom:1px solid #C9C765;
}
#console .module-style-6 .fullwidth tr.dashed td,
#console .module-style-6 .fullwidth .grid-row.dashed > .grid-cell{
	border-bottom:1px solid #C9C765;
}
#console.vadrouille .bloc-status-menu .options{
	display:none;
}
#console #status-body td{
	font-size:13px;
	text-shadow:0 1px 0 rgba(255,255,255,0.75);
}
#console table.message-style-0{margin-top:5px;}
#console.cheval-archimede #col-center {padding-top:0;}
#console.cheval-archimede .bloc-status-special {margin-top:12px;}
.module-item tr.dahshed{
	margin:4px;
}
#cheval-inscription{padding:5px 0 0;}
#banner {
	margin-bottom: 12px;
}
#console .message-style-1{
	font-weight:bold;
}


/***********************************************************************************************************************************/
/* CONTAINER-VIEW ******************************************************************************************************************/
/***********************************************************************************************************************************/

#container-view {
	width:300px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
}
#container-view.image-frame {
	width:auto;
	height:auto;
}
#container-view.image-frame #view div.img {
	width:382px;
	height:auto;
}

#container-view.image-frame #view div.img {
	background-color:#E1E18B;
	border:7px solid #fff;
	box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}
#container-view.image-frame #view div.img::before {
	display:block;
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	box-shadow:0 0 5px rgba(0, 0, 0, 0.3) inset;
	z-index:1;
}


/***********************************************************************************************************************************/
/* COLS : COLONNES DE LA CONSOLE ***************************************************************************************************/
/***********************************************************************************************************************************/

/* generic *************************************************************************************************************************/
#col-left{padding-right:32px;}
#col-left, 
#col-right{width:266px; z-index:102;}
#col-right{padding-left:32px;}

#col-right table.message-style-1{
	margin-top:5px;
	margin-bottom:-5px;
}

/* col-center **********************************************************************************************************************/
#col-center table tr.dashed th,
#col-center table tr.dashed td,
#col-center table th.dashed,
#col-center table td.dashed{
	border-bottom:1px solid #FFFFE0;
}
#col-center .module-style-7 div.content td.first{
	padding-left:10px;
}
#col-center .module-style-7 div.content td.last{
	padding-right:10px;
}
h1.horse-name {
	color: #552F0A;
	font-size: 14px;
	font-weight: bold;
	margin: 4px 0 3px;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 190px;
}
#affix-body-content{
	font-size:12px;
}
div.horse-coat-effect {
	position:absolute;
	top:0;
	z-index:5000;
	cursor:pointer;
	display:none;
}
#horse-coat-resize {
	top:-10px;
	right:-10px;
	display:none !important; /* override the hover made by jQuery UI */
}
#horse-coat-resize.enabled {
	display:block !important; /* override the hover made by jQuery UI */
}
h4.console-titre {
	font-weight:bold;
	margin:0 10px 2px;
	text-shadow:0 1px 0 rgba(255,255,255,0.75);
}
#content .console-grid{
	margin-top:-9px;
}
#content .console-grid-cell{	
	border-style:solid;
	vertical-align:top;
}
#content .console-grid-cell:first-child{
	padding-top:9px;
	border-color:#DAD97E;
	border-width:0 1px 0 0;
}
#content .console-grid-cell:last-child{
	padding-top:9px;
	border-color:#FFFFE2 ;
	border-width:0 0 0 1px;
}
#status table td {padding:1px;}
#status table td div.gauge {margin-top:2px;}
#characteristics table.message td.content {background-image:none;}
#characteristics table.message div.content {position:relative;margin:-4px 0;padding:0;}
#moderationBlock {position:relative;margin-bottom:10px;z-index:102;}


/***********************************************************************************************************************************/
/* MODULES *************************************************************************************************************************/
/***********************************************************************************************************************************/

/* generic *************************************************************************************************************************/
.module-style-7-content,
.module-style-10-content,
.module-style-33-content,
.module-style-legendary-content,
.module-style-nomade-content{
	margin:6px 0;
}
.module-style-6 .widget-action.config {
	position:absolute;
	top:5px;
	right:5px;
}

/* style-7 **************************************************************************************************************************/
.module-style-7 .bloc-status-top{background:linear-gradient(to bottom,  #e7e696 0%,#e7e696 45%,#e6e797 51%,#ebeba3 70%,#ebeba1 72%,#edeeaa 81%,#f2f2b2 100%);}
.module-style-7 .bloc-status-top{background:-moz-linear-gradient(top,  #e7e696 0%, #e7e696 45%, #e6e797 51%, #ebeba3 70%, #ebeba1 72%, #edeeaa 81%, #f2f2b2 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e696), color-stop(45%,#e7e696), color-stop(51%,#e6e797), color-stop(70%,#ebeba3), color-stop(72%,#ebeba1), color-stop(81%,#edeeaa), color-stop(100%,#f2f2b2));background:-webkit-linear-gradient(top,  #e7e696 0%,#e7e696 45%,#e6e797 51%,#ebeba3 70%,#ebeba1 72%,#edeeaa 81%,#f2f2b2 100%);background:-o-linear-gradient(top,  #e7e696 0%,#e7e696 45%,#e6e797 51%,#ebeba3 70%,#ebeba1 72%,#edeeaa 81%,#f2f2b2 100%);background:-ms-linear-gradient(top,  #e7e696 0%,#e7e696 45%,#e6e797 51%,#ebeba3 70%,#ebeba1 72%,#edeeaa 81%,#f2f2b2 100%);}
.module-style-7 .bloc-status-bottom{background:linear-gradient(to bottom,  #f1f3b4 0%,#f2f2b2 42%,#edeeaa 69%,#e9eba0 81%,#e5e698 100%);}
.module-style-7 .bloc-status-bottom{background:-moz-linear-gradient(top,  #f1f3b4 0%, #f2f2b2 42%, #edeeaa 69%, #e9eba0 81%, #e5e698 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f3b4), color-stop(42%,#f2f2b2), color-stop(69%,#edeeaa), color-stop(81%,#e9eba0), color-stop(100%,#e5e698));background:-webkit-linear-gradient(top,  #f1f3b4 0%,#f2f2b2 42%,#edeeaa 69%,#e9eba0 81%,#e5e698 100%);background:-o-linear-gradient(top,  #f1f3b4 0%,#f2f2b2 42%,#edeeaa 69%,#e9eba0 81%,#e5e698 100%);background:-ms-linear-gradient(top,  #f1f3b4 0%,#f2f2b2 42%,#edeeaa 69%,#e9eba0 81%,#e5e698 100%);}

/* style-10 *************************************************************************************************************************/
.module-style-10 .bloc-status-top,
.module-style-10.empty-top .bloc-status-bottom{background:linear-gradient(to bottom,  #e2d85c 0%,#e3d960 10%,#e5dd70 20%,#e9e383 40%,#ece793 52%,#ece99a 58%,#eeeb9e 64%,#f2edab 94%,#f1eeab 100%);}
.module-style-10 .bloc-status-top,
.module-style-10.empty-top .bloc-status-bottom{background:-moz-linear-gradient(top,  #e2d85c 0%, #e3d960 10%, #e5dd70 20%, #e9e383 40%, #ece793 52%, #ece99a 58%, #eeeb9e 64%, #f2edab 94%, #f1eeab 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2d85c), color-stop(10%,#e3d960), color-stop(20%,#e5dd70), color-stop(40%,#e9e383), color-stop(52%,#ece793), color-stop(58%,#ece99a), color-stop(64%,#eeeb9e), color-stop(94%,#f2edab), color-stop(100%,#f1eeab));background:-webkit-linear-gradient(top,  #e2d85c 0%,#e3d960 10%,#e5dd70 20%,#e9e383 40%,#ece793 52%,#ece99a 58%,#eeeb9e 64%,#f2edab 94%,#f1eeab 100%);background:-o-linear-gradient(top,  #e2d85c 0%,#e3d960 10%,#e5dd70 20%,#e9e383 40%,#ece793 52%,#ece99a 58%,#eeeb9e 64%,#f2edab 94%,#f1eeab 100%);background:-ms-linear-gradient(top,  #e2d85c 0%,#e3d960 10%,#e5dd70 20%,#e9e383 40%,#ece793 52%,#ece99a 58%,#eeeb9e 64%,#f2edab 94%,#f1eeab 100%);}
.module-style-10 .bloc-status-bottom{background:#f1eeac;}
.module-style-10 .bloc-status-bottom .inner{border-color:#f1eeab #fafac6 #fafac6;}

/* style-33 **************************************************************************************************************************/
.module-style-33 .bloc-status-top,
.module-style-33.empty-top .bloc-status-bottom{background:linear-gradient(to bottom,  #cfb582 0%,#d2bb87 2%,#d3bd8c 9%,#d9c392 13%,#e3d5a8 31%,#ece5b9 60%,#eee5ba 67%,#eeeabd 73%,#f1eac0 76%,#f4f1c6 96%,#f6f3ca 98%,#f5f3ca 100%);}
.module-style-33 .bloc-status-top,
.module-style-33.empty-top .bloc-status-bottom{background:-moz-linear-gradient(top,  #cfb582 0%, #d2bb87 2%, #d3bd8c 9%, #d9c392 13%, #e3d5a8 31%, #ece5b9 60%, #eee5ba 67%, #eeeabd 73%, #f1eac0 76%, #f4f1c6 96%, #f6f3ca 98%, #f5f3ca 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfb582), color-stop(2%,#d2bb87), color-stop(9%,#d3bd8c), color-stop(13%,#d9c392), color-stop(31%,#e3d5a8), color-stop(60%,#ece5b9), color-stop(67%,#eee5ba), color-stop(73%,#eeeabd), color-stop(76%,#f1eac0), color-stop(96%,#f4f1c6), color-stop(98%,#f6f3ca), color-stop(100%,#f5f3ca));background:-webkit-linear-gradient(top,  #cfb582 0%,#d2bb87 2%,#d3bd8c 9%,#d9c392 13%,#e3d5a8 31%,#ece5b9 60%,#eee5ba 67%,#eeeabd 73%,#f1eac0 76%,#f4f1c6 96%,#f6f3ca 98%,#f5f3ca 100%);background:-o-linear-gradient(top,  #cfb582 0%,#d2bb87 2%,#d3bd8c 9%,#d9c392 13%,#e3d5a8 31%,#ece5b9 60%,#eee5ba 67%,#eeeabd 73%,#f1eac0 76%,#f4f1c6 96%,#f6f3ca 98%,#f5f3ca 100%);background:-ms-linear-gradient(top,  #cfb582 0%,#d2bb87 2%,#d3bd8c 9%,#d9c392 13%,#e3d5a8 31%,#ece5b9 60%,#eee5ba 67%,#eeeabd 73%,#f1eac0 76%,#f4f1c6 96%,#f6f3ca 98%,#f5f3ca 100%);}
.module-style-33 .bloc-status-bottom{background:#F6F4CA;}
.module-style-33 .bloc-status-bottom .inner{border-color:#F6F4CA #fafac6 #fafac6;}

/* style-legendary **************************************************************************************************************************/
.module-style-legendary .bloc-status-top,
.module-style-legendary.empty-top .bloc-status-bottom{background:linear-gradient(to bottom, rgba(217,201,113,1) 0%,rgba(230,220,151,1) 26%);}
.module-style-legendary .bloc-status-top,
.module-style-legendary.empty-top .bloc-status-bottom {
	background:-moz-linear-gradient(top, rgba(217,201,113,1) 0%, rgba(230,220,151,1) 26%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(217,201,113,1)), color-stop(26%,rgba(230,220,151,1))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(217,201,113,1) 0%,rgba(230,220,151,1) 26%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(217,201,113,1) 0%,rgba(230,220,151,1) 26%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(217,201,113,1) 0%,rgba(230,220,151,1) 26%); /* IE10+ */
}
.module-style-legendary .bloc-status-bottom{background:rgba(217,201,113,1);}
.module-style-legendary .bloc-status-bottom .inner {
	background:linear-gradient(to bottom, rgba(217,201,113,1) 0%,rgba(230,220,151,1) 26%);
	border : solid 2px rgba(241,233,160,1);
}

/* module-3 *************************************************************************************************************************/
#module-3 td.content table th,
#module-3 td.content table td {padding:1px;}

/* module-9 *************************************************************************************************************************/
#module-9 div.scrollbar {right:0;top:7px;}
#module-9 div.content {padding:7px 0;overflow:hidden;}
#module-9 .col-2,
#module-9 .col-4,
#module-9 .col-6,
#module-9 .col-8 {padding:0 0 0 4px;border-left:1px solid #cbc86b;}
#module-9 div.content tr {height:70px;}

/* module-compagnon ******************************************************************************************************************/
.module-style-compagnon{
	display: inline-block;
	width:231px;
	height:163px;
	overflow:hidden;
}

/***********************************************************************************************************************************/
/* TABLE-ACTION ********************************************************************************************************************/
/***********************************************************************************************************************************/

#console .table-action-large td,
#console .table-action-large .grid-cell{
	padding:inherit;
	vertical-align:top;
	text-align:center;
}
#col-left .table-action-large,
#col-right .table-action-large{
	position:relative;
	width:264px;
	border-collapse:separate;
	border-spacing:0;
	margin:-5px -10px;
}
#col-left .table-action-large.first,
#col-right .table-action-large.first{
	margin-top:0;
}
#col-right .table-action-large td{
	padding-bottom: 0;
	padding-top: 0;
}
#col-left .table-action-large.inner,
#col-right .table-action-large.inner{
	margin-bottom:-15px;
}
.table-action-large td.first,
.table-action-large .width-33.first{
	border-left:1px solid #C6C465;
	border-right:1px solid #B7B54D;
}
.table-action-large td.middle,
.table-action-large .width-33.middle {
	border-left:1px solid #F5F4C1;
	border-right:1px solid #B7B54D;
}
.table-action-large td.last,
.table-action-large .width-33.last{
	border-left:1px solid #F5F4C1;
}
.table-action-large td.top,
.table-action-large .width-33.top{
	border-bottom:1px solid #B7B54D;
}
.table-action-large td.bottom,
.table-action-large .width-33.bottom{
	border-top:1px solid #F5F4C1;
}
.table-action-large td.top.bottom,
.table-action-large .width-33.bottom{
	border-top:1px solid #F5F4C1;
	border-bottom:none;
}
.table-action-large.last td.first,
.table-action-large.last .width-33.first{
	border-radius:0 0 0 7px;
}
.table-action-large.last td.last,
.table-action-large.last .width-33.first{
	border-radius:0 7px 0 0;
}
.table-action-large.endOfWidget .width-33.first,
.table-action-large.endOfWidget .width-33.first .action-style-4{
	border-bottom-left-radius:6px;
}

.table-action-large.endOfWidget .width-33.last,
.table-action-large.endOfWidget .width-33.last .action-style-4{
	border-bottom-right-radius:6px;
}
.table-action-large.bottomWidget{
	border-top:1px solid #F5F4C1
}
.table-action-large.bottomWidget .width-33{
	border-top: 1px solid #B7B54D;
}

/***********************************************************************************************************************************/
/* SORTABLE (modifier l'agencement des blocs) **************************************************************************************/
/***********************************************************************************************************************************/

#sortable .widget {
	float:none;
	margin:0;
}
#sortable .widget .module-title a.move {
	display:none;
}
#sortable .widget.sortable .module-title:hover a.move {
	background-image:url(/media/equideo/image/library/icon/button/pictos-on.png);
}
#sortable .widget.sortable .module-title a.move {
	background-image:url(/media/equideo/image/library/icon/button/pictos-off.png);
	display:inline-block;
	height:16px;
	width:16px;
	right:5px;
	position:absolute;
	background-position:48px 0;
}
#imageCheval{
	padding-top: 16px;
	padding-bottom:41px;
}
#training td.content table.message-style-1{
	margin-top:10px;
	margin-bottom:10px;
}


/***********************************************************************************************************************************/
/* ANIMATION ***********************************************************************************************************************/
/***********************************************************************************************************************************/

#blocks-couleurs {
	margin:0 0 10px 0;
}
span.animation-couleur {
	cursor:pointer;
	display:inline-block;
	height:16px;
	width:16px;
	margin:0 2px 0 2px;
	border:1px solid #7F7C2F;
}
span.animation-couleur.selected {
	border:1px solid #fff;
}
#content-couleurs span.animation-couleur {
	border:1px solid #fff;
}
#content-couleurs span.animation-couleur.selected {
	border:1px solid #000;
}
#paysage-givre {
	position:absolute;
	top:-80px;
	left:0;
	z-index:0; 
	height :1032px;
	width:1700px;
	opacity:0;
}
#paysage-wrapper {
	position:absolute;
	top:0;
	left:0;
	width:988px;
	height:356px;
	z-index:101;
}


/***********************************************************************************************************************************/
/* PODIUM **************************************************************************************************************************/
/***********************************************************************************************************************************/

#podium {
	width:100%;
	height:300px;
	position:absolute;
	top:0;
}
.bandeau {
	background:url(/media/equideo/image/competition/animation/bandeau.png);
	height:300px;
	position:absolute;
	text-align:center;
}
.bandeau-gauche {
	width:100px;
	left:-10px;
}
.bandeau-centre {
	width:126px;
	background-position:233px center;
}
.bandeau-droit {
	left:206px;
	width:100px;
	background-position:108px center;
}
.bandeau-small {
	font-size:11px;
	padding-left:4px;
}
.coupe {
	width:95px;
	height:93px;
	margin:auto;
	margin-bottom:10px;
	background:url(/media/equideo/image/competition/animation/coupes.png);
}
.coupe-small {
	width:80px;
	height:78px;
	margin:auto;
	margin-bottom:10px;
	background:url(/media/equideo/image/competition/animation/coupes-small.png);
}
.classique-1 {
	background-position:0 0;
}
.classique-2 {
	background-position:0 -93px;
}
.classique-3 {
	background-position:0 -186px;
}
.classique-small-2 {
	background-position:0 -78px;
}
.classique-small-3 {
	background-position:0 -156px;
}
.western-1 {
	background-position:0 -279px;
}
.western-2 {
	background-position:0 -372px;
}
.western-3 {
	background-position:0 -465px;
}
.western-small-2 {
	background-position:0 -312px;
}
.western-small-3 {
	background-position:0 -392px;
}


/***********************************************************************************************************************************/
/* HOUR ****************************************************************************************************************************/
/***********************************************************************************************************************************/

#hour {
	width:231px;
	height:27px;
	font-size:18px;
	font-weight:bold;
	color:#3B5419;
	z-index:200;
	position:relative;
}
#hour td {
	background-image:url(/media/equideo/image/background/content/heure-cheval.png);
}
#hour td.col-0 {
	background-repeat:no-repeat;
}
#hour div {
	height:24px;
	margin:2px 0 1px 0;
}
#hour td.col-1 div {
	padding-right:12px;
	border-right:1px solid #D7D793;
}
#hour td.col-1,
#hour td.col-2 {
	background-position:left bottom;
	background-repeat:repeat-x;
}
#hour td.col-2 div {
	border-left:1px solid #9B9934;
}
#hour td.col-3 {
	background-position:right top;
	background-repeat:no-repeat;
}
.title-content span.hour{
	background:url(/media/equideo/image/interface/icon/hour.png) no-repeat right center;
	position:absolute;
	right:5px;
	padding:1px 20px;
	color:#747227;
	font-size:14px;
	text-shadow:0 1px 0 #EDEDC1;
	z-index:2;
}
#hour-body-content {
	position:relative;
	display:inline-block;
	width:66px;
	height:66px;
}
#countDownWakeUp:before{
	content:'';
	display:block;
	margin: 4px -10px 0;
	padding-top: 10px;
	border-top: 1px solid #C9C765;
}
.countDownContainer{
	color: #771100;
}


/***********************************************************************************************************************************/
/* ALERT ***************************************************************************************************************************/
/***********************************************************************************************************************************/
#alerts-body div.content {
	width:197px;
	overflow:hidden;
}
#alerts-body td {
	font-size:12px;
	color:#3B5419;
}
#alerts-body div.scrollbar {
	right:0;
	top:0;
}


/***********************************************************************************************************************************/
/* HISTORY *************************************************************************************************************************/
/***********************************************************************************************************************************/

#history-content{margin-top:-5px;font-size:12px;}
#history-body td {
	color:#2D4313;
	vertical-align:top;
	font-size:12px;
}
#history-body .thead td {
	font-size:12px;
	color:#663300;
}
#history div.scrollbar {
	right:0;
	top:0;
}
#history-head-title{
	height:15px;
}
#history-content .icon {
	max-width: 20px;
}


/***********************************************************************************************************************************/
/* VIEW ****************************************************************************************************************************/
/***********************************************************************************************************************************/

#view {
	width:100%;
	height:100%;
	text-align:center;
	position: relative;
	z-index: 0;
}
#view div.img {
	background-position:center center;
	background-repeat:no-repeat;
	height:300px;
	width:300px;
	position:relative;
	text-align:center;
	z-index:100;
	margin:auto;	
}
#view div.img.appareil-photo {
	top:10px;
}
#view div.img iframe{
	pointer-events: none;
}
#nav-next,
#nav-previous,
.nav .left,
.nav .right {position:absolute;}
#nav-next,
.nav .right {right:15px;}
#nav-previous,
.nav .left{left:15px;}
#view .tools {
	position:relative;
	width:100%;
	top:3px;
	z-index:200;
}
#view .tools table {
	position:relative;
	margin:0 auto;
}
#view .tools a {
	margin:0 2px;
}
#view.ambiance {
	width:360px;
	height:330px;
}


/***********************************************************************************************************************************/
/* PERSONALISATION *****************************************************************************************************************/
/***********************************************************************************************************************************/

#personnalisation,
#personnalisation-controle{height:341px;} /* hauteur de l'image + hauteur des btn de personnalisations divisées par deux */
#personnalisation-controle{margin-bottom:16px;}
#personnalisation:hover {
	opacity:1;
}
#personnalisation {
	opacity:0;
	position:absolute;
	left:0;
	top:0;	
	width:100%;
	z-index:101; /* #cheval-image-xxxx z-index + 1 pour l'animation fade */
	transition:opacity .5s;}
#personnalisation {
	-o-transition:opacity .5s;
	-ms-transition:opacity .5s;
	-moz-transition:opacity .5s;
	-webkit-transition:opacity .5s;
}
#image-personnalisation,
#cheval-personnalisation{position:absolute;width:100%;}
#cheval-personnalisation{
	height:50px;
	width:100%;
	bottom:0;
	z-index:101;
	text-align:center;
}
#image-personnalisation{
	top:0;
	height:32px;
	z-index:101;
	text-align:center;
}
#image-personnalisation .position-block,
#cheval-personnalisation .position-block{display:inline-block;margin:0 15px;}
#image-body-content{
	position:relative;
	padding:16px 0 25px 0; /* marges des boutons de personnalisation */
}


/***********************************************************************************************************************************/
/* ACTION **************************************************************************************************************************/
/***********************************************************************************************************************************/

/*action-customize *****************************************************************************************************************/
a.action-customize {
	height:48px;
	width:48px;
	display:block;
	border-radius:48px;
	border:1px solid #e4e4a5;
	background:linear-gradient(to bottom, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.5) 51%,rgba(247,248,187,0.9) 100%); /* W3C */
	position:relative;
	box-shadow:inset 0 0 1px 0px rgba(250,250,232,.7);
}
a.action-customize {
	background:-moz-linear-gradient(top, rgba(247,248,187,0.3) 0%, rgba(247,248,187,0.5) 51%, rgba(247,248,187,0.9) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,248,187,0.3)), color-stop(51%,rgba(247,248,187,0.5)), color-stop(100%,rgba(247,248,187,0.9))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.5) 51%,rgba(247,248,187,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.5) 51%,rgba(247,248,187,0.9) 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.5) 51%,rgba(247,248,187,0.9) 100%); /* IE10+ */
}
a.action-customize span.img {
	display:inline-block;
	background-image:url(/media/equideo/image/components/action/icone/customize.png);
	width:50px;
	height:50px;
}
a.action-customize.animation span.img, 
a.action-customize.animation:hover span.img{
	background-position:left top;
}
a.action-customize.animation.disabled span.img,
a.action-customize.animation.disabled:hover span.img,
a.action-customize.animation.disabled span.img:hover {
	background-position:left bottom;
}
a.action-customize.coat span.img,
a.action-customize.coat:hover span.img{
	background-position:-50px top;
}
a.action-customize.coat.disabled span.img,
a.action-customize.coat.disabled:hover span.img,
a.action-customize.coat.disabled span.img:hover {
	background-position:-50px bottom;
}
a.action-customize.landscape span.img,
a.action-customize.landscape:hover span.img{
	background-position:-100px top;
}
a.action-customize.landscape.disabled span.img,
a.action-customize.landscape.disabled:hover span.img,
a.action-customize.landscape.disabled span.img:hover {
	background-position:-100px bottom;
}
a.action-customize.name span.img,
a.action-customize.name:hover span.img{
	background-position:-150px top;
}
a.action-customize.name.disabled span.img,
a.action-customize.name.disabled:hover span.img,
a.action-customize.name.disabled span.img:hover {
	background-position:-150px bottom;
}
a.action-customize.unlimited-landscape span.img,
a.action-customize.unlimited-landscape:hover span.img{
	background-position:-200px top;
}
a.action-customize.unlimited-landscape.disabled span.img,
a.action-customize.unlimited-landscape.disabled:hover span.img,
a.action-customize.unlimited-landscape.disabled span.img:hover {
	background-position:-200px bottom;
}
a.action-customize.disabled,
a.action-customize.disabled:hover{
	background:linear-gradient(to bottom, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.3) 51%,rgba(247,248,187,0.65) 100%); /* W3C */
}
a.action-customize.disabled,
a.action-customize.disabled:hover{
	background:-moz-linear-gradient(top, rgba(247,248,187,0.3) 0%, rgba(247,248,187,0.3) 51%, rgba(247,248,187,0.65) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,248,187,0.3)), color-stop(51%,rgba(247,248,187,0.3)), color-stop(100%,rgba(247,248,187,0.65))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.3) 51%,rgba(247,248,187,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.3) 51%,rgba(247,248,187,0.65) 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(247,248,187,0.3) 0%,rgba(247,248,187,0.3) 51%,rgba(247,248,187,0.65) 100%); /* IE10+ */
}
a.action-customize:hover{
	background:#FFFFFF;
}
a.action-customize:hover span.text span {
	text-decoration:underline;
}
a.action-customize.disabled:hover span.text span {
	text-decoration:none;
}
a.action-customize span.text {
	display:block;
}
a.action-customize span.text span {
	font-size:11px;
	font-weight:bold;
}

/*action-configuration *************************************************************************************************************/
a.action-configuration{
	width:28px;
	height:28px;
	display:block;
	border-radius:30px;
	border:1px solid #e4e4a5;
	background:linear-gradient(to bottom, rgba(250,251,195,0.2) 0%,rgba(250,251,195,0.55) 55%,rgba(250,251,195,0.85) 100%); /* W3C */
	position:relative;
	box-shadow:inset 0 0 1px 0px rgba(250,250,232,.7);
}
a.action-configuration{
	background:-moz-linear-gradient(top, rgba(250,251,195,0.2) 0%, rgba(250,251,195,0.55) 55%, rgba(250,251,195,0.85) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,251,195,0.2)), color-stop(55%,rgba(250,251,195,0.55)), color-stop(100%,rgba(250,251,195,0.85))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(250,251,195,0.2) 0%,rgba(250,251,195,0.55) 55%,rgba(250,251,195,0.85) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(250,251,195,0.2) 0%,rgba(250,251,195,0.55) 55%,rgba(250,251,195,0.85) 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(250,251,195,0.2) 0%,rgba(250,251,195,0.55) 55%,rgba(250,251,195,0.85) 100%); /* IE10+ */
}
a.action-configuration:hover{
	background:#FFFFFF;
}
a.action-configuration.disabled{
	background:-moz-linear-gradient(top, rgba(250,251,195,0.3) 0%, rgba(250,251,195,0.3) 51%, rgba(250,251,195,0.65) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,251,195,0.3)), color-stop(51%,rgba(250,251,195,0.3)), color-stop(100%,rgba(250,251,195,0.65))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(250,251,195,0.3) 0%,rgba(250,251,195,0.3) 51%,rgba(250,251,195,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(250,251,195,0.3) 0%,rgba(250,251,195,0.3) 51%,rgba(250,251,195,0.65) 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(250,251,195,0.3) 0%,rgba(250,251,195,0.3) 51%,rgba(250,251,195,0.65) 100%); /* IE10+ */
	background:linear-gradient(to bottom, rgba(250,251,195,0.3) 0%,rgba(250,251,195,0.3) 51%,rgba(250,251,195,0.65) 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfafbc3', endColorstr='#a6fafbc3',GradientType=0 ); /* IE6-9 */
}
a.action-configuration span.img{
	background-image:url(/media/equideo/image/components/action/icone/configuration.png);
	background-repeat:no-repeat;
	display:inline-block;
	width:32px;
	height:32px;
}
a.action-configuration.mirror span.img{
	background-position:-2px -2px;
}
a.action-configuration.mirror:hover span.img{
	background-position:-2px -34px;
}
a.action-configuration.mirror.disabled span.img,
a.action-configuration.mirror.disabled:hover span.img{
	background-position:-2px -64px;
}
a.action-configuration.resize span.img{
	background-position:-34px -2px;
}
a.action-configuration.resize:hover span.img{
	background-position:-34px -34px;
}
a.action-configuration.resize.disabled span.img,
a.action-configuration.resize.disabled:hover span.img{
	background-position:-34px -66px;
}
a.action-configuration.console-up span.img{
	background-position:-66px -2px;
}
a.action-configuration.console-up:hover span.img{
	background-position:-66px -34px;
}
a.action-configuration.console-uo.disabled span.img,
a.action-configuration.console-up.disabled:hover span.img{
	background-position:-66px -66px;
}
a.action-configuration.console-down span.img{
	background-position:-98px -2px;
}
a.action-configuration.console-down:hover span.img{
	background-position:-98px -34px;
}
a.action-configuration.console-down.disabled span.img,
a.action-configuration.console-down.disabled:hover span.img{
	background-position:-96px -64px;
}
a.action-configuration.pix--2xs,
a.action-configuration.pix--2xs::after{
	transition: none;
}
a.action-configuration.pix--2xs .svg{
	padding: 4px;
}
a.action-configuration.pix--2xs{
	fill: #fff;
}
a.action-configuration.pix--2xs:hover{
	fill: #3d251b;
}
a.action-configuration.pix--2xs::after{
	background: #37659A;
}
a.action-configuration.pix--2xs:hover::after{
	background: #f2efcf;
}
#player td.content td {
	color:#552F0A;
}
#player td.content td b {
	color:#003300;
}


/***********************************************************************************************************************************/
/* TRAINING ************************************************************************************************************************/
/***********************************************************************************************************************************/

#training .module-content{
	padding-top:0;
	padding-bottom:0;
}
#training td.content table.training-table-summary {
	padding:0;
}
#training td.content td table.training-table-summary {
	font-size:12px;
}
#training div.gauge {
	width:140px;
}
#training table.message-style-0{
	margin-top:8px;
	margin-bottom:10px;
}
#training #messageBoxInline{
	margin-top:10px;
	margin-bottom:10px;
}
#console .training-table-summary tr.dashed td{
	background-image:url(/media/equideo/image/components/module/6-training.png);
	background-repeat:no-repeat;
	border-top:1px solid #F5F4C1;
	border-bottom:1px solid #B7B54D;
	height:24px;
	color:#4a5c1e;
}
#console .training-table-summary tr.first td{
	border-top:none;
}
#console .training-table-summary tr.last td,
#console .training-table-summary tr.dashed.last td{
	border-bottom:none;
}
#console .training-table-summary tr.dashed td.first{
	background-position:left top;
	padding: 3px 0 3px 10px;
}
#console .training-table-summary tr.dashed.first td.first{
	background-position:left -1px;
}
#console .training-table-summary tr.dashed td.first.cursor{
	background-position:-250px top;
}
#console .training-table-summary tr.dashed.first td.first.cursor{
	background-position:-250px -1px;
}
#console .training-table-summary tr.dashed td.center{
	background-position:-10px top;
	padding-left: 10px;
	width:130px;
}
#console .training-table-summary tr.dashed.first td.center{
	background-position:-10px -1px;
}
#console .training-table-summary tr.dashed td.last{
	width:28px;
	padding-right:0;
	background-position:right 0;
}
#console .training-table-summary tr.dashed.first td.last{
	background-position:right -1px;
}
#console .training-table-summary .last img{
	right:1px;
}
#console .training-table-summary.resize{
	margin-top:-10px;
	margin-bottom:0;
}
td.add-competence {
	margin-left:10px;
}
/* EQUIPMENTS ******************************************************/
#equipements td.content td {
	line-height:12px;
	color:#3B5419;
}

/* REPRODUCTION ****************************************************/
#reproduction td.content td b {
	color:#003300;
}
#saillies-proposees {
	margin-top:15px;
	padding-bottom:3px; 
}
#saillies-proposees .bold {
	font-weight:bold;
}
#saillies-proposees .italic {
	font-style:italic;
}
#saillies-proposees p {
	padding-bottom:3px;
}
#saillies-proposees table {
	width:100%;
}
/* SKILLS **********************************************************/
#skills-body-content td.complete {
	font-weight:bold;
}


/* RANKING *********************************************************/
#ranking td.content td {
	color:#552F0A;
}
#ranking td.content td b {
	color:#003300;
}

/* BONUS ***********************************************************/
#bonus td.content td {
	color:#552F0A;
}


/* MODULE INSTEAD OF ADVERTISEMENT **************************************************************/

div.description-course {
	float:right;
}
div.description-course table {
	width:300px;
}
div.description-course table thead th,
div.description-course table thead td, 
div.description-course table tfoot th,
div.description-course table tfoot td,
div.description-course table th,
div.description-course table td.content
{
	border-bottom:0 !important;
}

/* Tooltips Entraînement simplifié */
.tooltip .training-tooltip span.label {
	float:left;
	margin-right:5px;
}
.tooltip .training-tooltip b {
	width:50px;
	text-align:right;
}


/***********************************************************************************************************************************/
/* GIROUETTE ***********************************************************************************************************************/
/***********************************************************************************************************************************/

.module-style-girouette {
	margin-left:auto;
	margin-right:auto;
	width:227px;
	text-align: center;
}
#rose-des-vents {
	position:relative;
}
#aiguille {
	position:absolute;
	width:100%;
    height:100%;
}
.nord {
	transform:rotate(180deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(180deg); /* IE 9 */
	-ms-transform-origin:50% 47.34%; /* IE 9 */
	-webkit-transform:rotate(180deg); /* Safari and Chrome */
	-webkit-transform-origin:50% 47.34%; /* Safari and Chrome */
	-moz-transform:rotate(180deg); /* Firefox */
	-moz-transform-origin:50% 47.34%; /* Firefox */
	-o-transform:rotate(180deg); /* Opera */
	-o-transform-origin:50% 47.34%; /* Opera */
}
.nord-nord-est {
	transform:rotate(202.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(202.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(202.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(202.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(202.5deg);
	-o-transform-origin:50% 47.34%;
}
.nord-est {
	transform:rotate(225deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(225deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(225deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(225deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(225deg);
	-o-transform-origin:50% 47.34%;
}
.est-nord-est {
	transform:rotate(247.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(247.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(247.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(247.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(247.5deg);
	-o-transform-origin:50% 47.34%;
}
.est {
	transform:rotate(270deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(270deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(270deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(270deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(270deg);
	-o-transform-origin:50% 47.34%;
}
.est-sud-est {
	transform:rotate(292.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(292.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(292.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(292.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(292.5deg);
	-o-transform-origin:50% 47.34%;
}
.sud-est {
	transform:rotate(315deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(315deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(315deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(315deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(315deg);
	-o-transform-origin:50% 47.34%;
}
.sud-sud-est {
	transform:rotate(337.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(337.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(337.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(337.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(337.5deg);
	-o-transform-origin:50% 47.34%;
}
.sud {
	transform:rotate(0deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(0deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(0deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(0deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(0deg);
	-o-transform-origin:50% 47.34%;
}
.sud-sud-ouest {
	transform:rotate(22.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(22.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(22.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(22.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(22.5deg);
	-o-transform-origin:50% 47.34%;	
}
.sud-ouest {
	transform:rotate(45deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(45deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(45deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(45deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(45deg);
	-o-transform-origin:50% 47.34%;
}
.ouest-sud-ouest {
	transform:rotate(67.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(67.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(67.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(67.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(67.5deg);
	-o-transform-origin:50% 47.34%;
}
.ouest {
	transform:rotate(90deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(90deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(90deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(90deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(90deg);
	-o-transform-origin:50% 47.34%;
}
.ouest-nord-ouest {
	transform:rotate(112.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(112.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(112.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(112.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(112.5deg);
	-o-transform-origin:50% 47.34%;
}
.nord-ouest {
	transform:rotate(135deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(135deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(135deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(135deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(135deg);
	-o-transform-origin:50% 47.34%;
}
.nord-nord-ouest {
	transform:rotate(157.5deg);
	transform-origin:50% 47.34%;
	-ms-transform:rotate(157.5deg);
	-ms-transform-origin:50% 47.34%;
	-webkit-transform:rotate(157.5deg);
	-webkit-transform-origin:50% 47.34%;
	-moz-transform:rotate(157.5deg);
	-moz-transform-origin:50% 47.34%;
	-o-transform:rotate(157.5deg);
	-o-transform-origin:50% 47.34%;
}

/***********************************************************************************************************************************/
/* BLOC-STATUS *********************************************************************************************************************/
/***********************************************************************************************************************************/

.bloc-status{position:relative;z-index:102;margin-bottom:12px;background:inherit;border:none !important;}
.bloc-status:hover{z-index:101;}
.bloc-status .options{width:32px;height:32px;}
.bloc-status .inner{position:relative;}
/*top*/
.bloc-status-top{
	position:relative;
	z-index:2;
	min-height:24px;
	margin:0 60px -2px;
	border-width:2px 2px 0 2px;
	border-style:solid;
	border-color:#dad97e;
	border-radius:10px 10px 0 0;
}
.bloc-status-top .inner{
	padding:3px 5px 0;
	border-width:1px 1px 0 1px;
	border-style:solid;
	border-color:#fafac6;
	border-radius:8px 8px 0 0;
}
/*bottom*/
.bloc-status-bottom{
	position:relative;
	z-index:1;
	border:2px solid #dad97e;
	border-radius:10px;
}
.bloc-status-bottom .inner{
	padding:6px 10px;
	border-width:1px;
	border-style:solid;
	border-color:#f2f2b6 #fafac6 #fafac6;
	border-radius:8px;
}
/*bloc-status*/
.bloc-status div.nav{position:absolute;width:394px;left:-63px;top:-3px;}
.bloc-status .elevage{position:relative;font-size:11px;font-weight:bold;}
.bloc-status-top .elevage,
.bloc-status-special .elevage,
.bloc-status-special-bottom .elevage{font-size:11px;}
.bloc-status-menu,
.bloc-status-icone{position:relative; width:32px;}
/*bloc-status-gauges*/
.bloc-status-gauges .grid-cell{padding:3px 0;font-weight:bold;}
.bloc-status-gauges .grid-cell.first{width:70px;}
.bloc-status-gauges .grid-cell.last{text-align:right;}
/*bloc-status-special*/
.bloc-status-special{
	position:relative;
	padding:0 59px;
	z-index:102;
}
.bloc-status-special-bottom {
	position:relative;
	padding:0 60px;
	z-index:103;
}
.bloc-status-special .bloc-status-menu,
.bloc-status-special .bloc-status-icone,
.bloc-status-special-bottom .bloc-status-menu,
.bloc-status-special-bottom .bloc-status-icone{top:-8px;}
.bloc-status-special .bloc-status-icone,
.bloc-status-special-bottom .bloc-status-icone {left:-8px;}
.bloc-status-special .bloc-status-menu,
.bloc-status-special-bottom .bloc-status-menu {right:-5px;}
.bloc-status-nom {width:190px;}
.bloc-status-special{height:106px;}
.bloc-status-special-bottom{height:86px;}
.bloc-status-special .nav,
.bloc-status-special-bottom .nav{width:274px;}
.bloc-status-special .ico,
.bloc-status-special-bottom .ico{top:10px;}
#console .bloc-status-special .module,
#console .bloc-status-special-bottom .module{width:274px;margin:0;}
.bloc-vente{
	position:relative;
	z-index:103; /* 103 =  (#col-right z-index) + 1 */
	font-size: 13px;
}
.cheval-mirroir {
	transform:scaleX(-1);
}
.cheval-mirroir {
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
}
/*description-saison*/
.description-saison .separator-pattern{border-top:1px solid #fff;}
.description-saison strong{color:#552F0A;}


/***********************************************************************************************************************************/
/* EQUIPEMENT **********************************************************************************************************************/
/***********************************************************************************************************************************/

/* TYPE ****************************************************************************************************************************/
.equipement-pop .choix-type {
	width:138px;
	float:left;
	border-top:1px solid #B0AE48;
}
.equipement-pop .choix-type > div {
	border-right:1px solid #B0AE48;
	border-bottom:1px solid #B0AE48;
	text-align:center;
}
.equipement-pop .choix-type .categorie {
	font-size:14px;
	color:#552F0A;
	font-weight:bold;
	background-color:#DAD97E;
	height:23px;
	line-height:23px;
}
.equipement-pop .choix-type .type {
	height:59px;
	position:relative;
	color:#8f982d;
}
.equipement-pop .choix-type .type.selected { 
	background-color:#EAE99F;
	border-right:1px solid #EAE99F;
	color:#5a630c;
}
.equipement-pop .choix-type .type:hover {
	cursor:pointer;
}
.equipement-pop .choix-type .type .ok {
	position:absolute;
	right:5px;
	margin-top:-10px;
	top:50%;
}
.equipement-pop > .choix-type > .type > .icone-equipement {
	padding:4px 0px;
}
.equipement-pop > .choix-type > .type > .icone-equipement > div {
	margin :auto;
}

/* CHOIX-MODELE ********************************************************************************************************************/
.equipement-pop .choix-modele {
	position:relative;
	float:left;
	border-top:1px solid #B0AE48;
	border-right:1px solid #B0AE48;
	border-bottom:1px solid #B0AE48;
	height:329px;
	width:440px;
	background-color:#EAE99F;
	padding:12px 12px 6px 24px;	
}
.equipement-pop .choix-modele p:first-child,
.equipement-pop .choix-couleur p:first-child {
	font-size:13px;
	color:#552F0A;
}
.equipement-pop .annuler-choix {
	position:absolute;
	right:24px;
	top:12px;
	display:none;
}

/* MODELE **************************************************************************************************************************/
.equipement-pop .choix-modele .modele {
	position:relative;
	width:76px;
	margin:15px;
	text-align:center;
}
.equipement-pop .choix-modele .modele::before{
	content:'';
	display:block;
	position:absolute;
	background:#C9C86C;
	top:0;
	width:76px;
	height:77px;
	border:1px solid #A6A916;
	border-radius:5px;
}
.equipement-pop .choix-modele .modele.selected::before {
	box-shadow:0 0 0 2px #fff;
}
.equipement-pop .choix-modele .modele.clickable:hover {
	cursor:pointer;
}
.equipement-pop .choix-modele .modele img {
	position:relative;
	margin-top:8px;
	margin-bottom:15px;
	opacity:0.7;
}
.equipement-pop .choix-modele .button img.caddie{
	margin: -1px -5px;
}
.equipement-pop .choix-modele .modele:not(.selected) div {
	color: #586d23;
}
.equipement-pop .choix-modele .modele.selected img {
	opacity:1;
}
.equipement-pop .choix-modele .modele .pastille-nombre,
.equipement-pop .choix-couleur .couleur .pastille-nombre,
.liste-couleur .pastille-nombre {
	background:#ffde00;
	position:absolute;
	right:-13px;
	top:-10px;
	height:18px;
	padding:0 6px;
	border:2px solid #fff;
	border-radius:10px;
	box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
	text-align:center;
	line-height:19px;
	font-weight:bold;
	color:#996600;
	font-size:13px;
}

/* COULEUR *************************************************************************************************************************/
.equipement-pop .choix-couleur:not(.display) {
	display:none;
}
.equipement-pop .choix-couleur .couleur,
.liste-couleur .couleur {
	width:26px;
	height:26px;
	border:1px solid #a6a916;
	border-radius:2px;
	margin:8px 16px 8px 0;
	box-shadow:0 0 4px -1px #000 inset;
	position:relative;
}
.equipement-pop .choix-couleur .couleur.selected {
	box-shadow:0 0 0 2px #fff, 0 0 4px -1px #000 inset;
}
.equipement-pop .choix-couleur .couleur:hover {
	cursor:pointer;
}
.equipement-pop .cheval-preview {
	float:left;
	margin:24px;
	position :relative;
}
.equipement-pop .cheval-preview img {
	position :absolute;
	top :0px;
	left :0px;
}
.couleur.col1 {
	background-color:white;
}
.couleur.col2 {
	background-color:black;
}
.couleur.col4 {
	background-color:blue;
}
.couleur.col8 {
	background-color:pink;
}
.couleur.col16 {
	background-color:green;
}
.couleur.col32 {
	background-color:red;
}
.couleur.col64 {
	background-color:orange;
}
.couleur.col128 {
	background-color:yellow;
}
.couleur.col256 {
	background-color:brown;
}
.couleur.col512 {
	background-color:purple;
}

/* ICONE-EQUIPEMENT ****************************************************************************************************************/
#equipement-body-content .icone-equipement {
	width:32px;
	height:32px;
	display:inline-block;
	position:relative;
}
#equipement-body-content a.icone-equipement {
	background:url(/media/equideo/image/interface/equipement/bouton-equipements.png);
	margin:0px 7px;
}
#equipement-body-content a.icone-equipement:hover {
	background-position:center;
}
.icone-equipement > div {
	background-image:url(/media/equideo/image/interface/equipement/icones-equipements-small.png);
	width:32px;
	height:32px;
}
.icone-equipement.big > div {
	background-image:url(/media/equideo/image/interface/equipement/icones-equipements-big.png);
}
a.icone-equipement > img {
	width:24px;
	height:24px;
	margin:4px;
	vertical-align:baseline;
}
.icone-equipement .selle,
.type.selected .icone-equipement.big .selle {	background-position:-32px bottom;	}
a.icone-equipement:hover .selle,
.icone-equipement.big .selle {	background-position:-32px top;	}
.icone-equipement .selle.western,
.type.selected .icone-equipement.big .selle.western {	background-position:-192px bottom;	}
a.icone-equipement:hover .selle.western,
.icone-equipement.big .selle.western {	background-position:-192px top;	}
.icone-equipement .bride,
.type.selected .icone-equipement.big .bride {	background-position:-64px bottom;	}
a.icone-equipement:hover .bride ,
.icone-equipement.big .bride {	background-position:-64px top;	}
.icone-equipement .bride.western,
.type.selected .icone-equipement.big .bride.western {	background-position:-224px bottom;	}
a.icone-equipement:hover .bride.western ,
.icone-equipement.big .bride.western {	background-position:-224px top;	}
.icone-equipement .tapis,
.type.selected .icone-equipement.big .tapis {	background-position:0 bottom;	}
a.icone-equipement:hover .tapis ,
.icone-equipement.big .tapis {	background-position:0 top;	}
.icone-equipement .tapis.western,
.type.selected .icone-equipement.big .tapis.western {	background-position:-160px bottom;	}
a.icone-equipement:hover .tapis.western ,
.icone-equipement.big .tapis.western {	background-position:-160px top;	}
.icone-equipement .bande,
.type.selected .icone-equipement.big .bande {	background-position:-128px bottom;	}
a.icone-equipement:hover .bande ,
.icone-equipement.big .bande {	background-position:-128px top;	}
.icone-equipement .bonnet,
.type.selected .icone-equipement.big .bonnet {	background-position:-96px bottom;	}
a.icone-equipement:hover .bonnet ,
.icone-equipement.big .bonnet {	background-position:-96px top;	}


/***********************************************************************************************************************************/
/* PREVISUALISATION DU PAYSAGE *****************************************************************************************************/
/***********************************************************************************************************************************/

.ribbon-wrapper{
	width: 100%;
	background-color: #ee5f5b;
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	top: 43px;
	left: -743px;
	position: absolute;
	z-index: 1;
	padding: 5px 0;
	border: 1px dashed #FFF;
}
.ribbon-content {
	width: 150px;
	display: block;
	text-align: center;
	margin: 0 auto;
	color: #FFF;
}

/***********************************************************************************************************************************/
/* BLACK MARKET POPUPS *************************************************************************************************************/
/***********************************************************************************************************************************/

.bonuslist{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.js-bonuslist__productname{
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

.companionslist{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.js-companionslist__productname{
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

/***********************************************************************************************************************************/
/* ANIMATION-CONSOLE ***************************************************************************************************************/
/***********************************************************************************************************************************/

/***********************************************************************************************************************************/
/* APPAREIL PHOTO ******************************************************************************************************************/
/***********************************************************************************************************************************/
.swiper-container.photos {
	max-width: 245px;
	height: 190px;
}
.swiper-container.photos .swiper-slide{
	width: 140px;
}
.polaroid {
	position: relative;
	width: 124px;
	height: 124px;
	background-position: center;
	background-size: cover;
	border: 7px solid white;
	border-bottom-width: 30px;
	margin: auto;
}
.polaroid .legend-photo {
	position: absolute;
	bottom: -25px;
	right: 0;
	color: #663300;
	font-weight: bold;
}
.classement-ancestral .selected {
	background-color: #eae99e;
}

.popup-style-photo .picture {
	background-image: url(/media/equideo/image/components/popups/3/bordure-photo.jpg);
	position: relative;
	padding: 8px;
	pointer-events: none;
}


/***********************************************************************************************************************************/
/* RECEIVE-HISTORY *****************************************************************************************************************/
/***********************************************************************************************************************************/
/*ANIMATION CADEAU DIVINS NORDIQUE*/
.receive-history {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 110;
	animation: receiveAnim 3.4s 1 forwards;
}
@keyframes receiveAnim{
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.receive-history .ui-effects-wrapper {
	display: inline-block;
}
.receive-history img {
	width: 200px;
	height: 200px;
	display: none;
	margin: 0;
	top: 30px;
	z-index: 202;
	position: relative;
}
.receive-history-wheel{
	width: 300px;
	height: 300px;
	position: absolute;
	opacity: 0.7;
	z-index: 201;
	left: 0;
	top: 0;
	background:url(/media/equideo/image/dossiers/nordique/rayon.png) no-repeat left top;
	-webkit-animation: wheel 6s linear 1;
	animation: wheel 6s linear 1;
}
.receive-history-light{
	width: 348px;
	height: 336px;
	position: absolute;
	z-index: 203;
	left: -37px;
	top: 0;
	background:url(/media/equideo/image/dossiers/nordique/light.png) no-repeat left top;
	animation-duration: 1.7s;
    animation-iteration-count: 1;
    animation-name: light;
    animation-timing-function: steps(30);

    -webkit-animation-duration: 1.7s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-name: light;
    -webkit-animation-timing-function: steps(30);
}

@-moz-keyframes wheel{
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes wheel{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes light {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -10440px top;
	}
}
@-webkit-keyframes light {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -10440px top;
	}
}


/*ANIM PLUME HIPPO*/
.anim-plume--hippogriffe{
	background: rgba(0, 0, 0, 0) url(/media/equideo/image/dossiers/mythologique/plume-hippogriffe.png) no-repeat scroll left top;
}
.anim-plume--hippalectryon{
	background: rgba(0, 0, 0, 0) url(/media/equideo/image/dossiers/mythologique/plume-hippalectryon.png) no-repeat scroll left top;
}
.anim-plume--celeris{
	background: rgba(0, 0, 0, 0) url(/media/equideo/image/dossiers/mythologique/plume-celeris.png) no-repeat scroll left top;
}
.anim-plume{
    bottom: 0;
    height: 192px;
    left: 126px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -200px;
    transform-origin: 0 80% 0;
    width: 108px;
    z-index: 100;
    animation: 5s ease-in-out 0s alternate forwards 1 running feather;
}

@keyframes feather {
  0% {
    transform: rotate(50deg) translate(0px, 50px);
  }
  25% {
    transform: rotate(90deg) translate(50px, 100px);
  }
  50% {
    transform: rotate(50deg) translate(100px, 50px);
  }
  75% {
    transform: rotate(90deg) translate(150px, 100px);
  }
  100% {
    transform: rotate(70deg) translate(200px, 75px);
    opacity: 0;
  }
}
.anim-item--uchchaihshravas{
	width: 328px;
	height: 492px;
	position: absolute;
	z-index: 100;
	left: 0;
	bottom: -40px;
	background:url(/media/equideo/image/dossiers/mythologique/anim-pigment.png) no-repeat left top;
	animation-duration: 1s;
    animation-iteration-count: 1;
    animation-name: anim-item--uchchaihshravas;
    animation-timing-function: steps(25);
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: anim-item--uchchaihshravas;
    -webkit-animation-timing-function: steps(25);
    background-position: right top;
}
@keyframes anim-item--uchchaihshravas {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8200px top;
	}
}
@-webkit-keyframes anim-item--uchchaihshravas {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8200px top;
	}
}

.anim-item--rakhsh{
	bottom: 0;
    height: 128px;
    width: 128px;
    left: 126px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -200px;
    transform-origin: 0 80% 0;
    z-index: 100;
    animation: 5s ease-in-out 0s alternate forwards 1 running feather;
    background: rgba(0, 0, 0, 0) url(/media/equideo/image/dossiers/mythologique/fleur-rakhsh.png) no-repeat scroll left top;
}

.anim-item--hippocampus{
	bottom: 0;
    height: 128px;
    width: 128px;
    left: 126px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -200px;
    transform-origin: 0 80% 0;
    z-index: 100;
    animation: 5s ease-in-out 0s alternate forwards 1 running feather;
    background: rgba(0, 0, 0, 0) url(/media/equideo/image/produits/120/scale-hippocampus.png) no-repeat scroll left top;
}


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

.########..########.....###.....######....#######..##....##
.##.....##.##.....##...##.##...##....##..##.....##.###...##
.##.....##.##.....##..##...##..##........##.....##.####..##
.##.....##.########..##.....##.##...####.##.....##.##.##.##
.##.....##.##...##...#########.##....##..##.....##.##..####
.##.....##.##....##..##.....##.##....##..##.....##.##...###
.########..##.....##.##.....##..######....#######..##....##

>>> 14.18.0 - Animation Specs : https://dev.owlient.eu/bugs/view.php?id=67395
>>> 15.7.0  - Update : https://dev.owlient.eu/bugs/view.php?id=69824

** HOW IT WORKS ********************************************************************************************************************

****** Animation timeline ******

	1. At the same time : 
		- fightanim__dragon ( fightanim__dragon--left & fightanim__dragon--right)
			=> these are dragons arrival
		- fightanim__action ( fightanim__action--left & fightanim__action--right)
			=> these are fight actions chosen by players
			=> include action arrival and merging actions

	2. "fightanim__owner" (fightanim__owner--breeder & fightanim__owner--opponent)
			=> these are player names

	3. "fightanimClaw"
			=> this is a sprite when fight began

	4. "js-fightanim--animate"
			=> trigger class that launch sprite aura animation when actions merge together

	5. At the same time :
		- "fightanim__results__gain"
		- "fightanim__results__loss"
			=> display amount of XP and health points for each dragons

	6. "js-fightanim__dragon--looser"
			=> flickers in red and rumbles dragon who looses

	7. "js-fightanim__dragon--out"
			=> put out of the screen dragon who looses

******  CHEVAL.JS set time out for these classes : ******
	
	.js-fightanim--animate
	.js-fightanim__dragon--looser
	.js-fightanim__dragon--out


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

.fightanim{
	left: 50%;
	height: 500px;
	position: absolute;
	width: 990px;
	z-index: 1000;
}
.fightanim::after,
.fightanim::before{
	content: "";
	display: block;
	position: absolute;
}

/**********************************************************************************************************************************/
/** fightanim : dragons ***********************************************************************************************************/
/**********************************************************************************************************************************/
/*** description :each dragon comes in with slide effect **************************************************************************/
/**********************************************************************************************************************************/

.fightanim__dragon{
	position: absolute;
	top: 40px;
	animation-duration: .5s;
}

/** fightanim : dragon left **************************************************************************************************/
/*****************************************************************************************************************************/

.fightanim__dragon--left{
	left: 50px;
}
.js-fightanim--animate .fightanim__dragon--left{
	animation-name: fightanimDragonLeft;
}
@keyframes fightanimDragonLeft {
   0% { 	transform: 	translate3d(-500px,0,0); }
   85% { 	transform: translate3d(50px,0,0); }
   100% { 	transform: translate3d(0,0,0); }
}

/** fightanim : dragon right *************************************************************************************************/
/*****************************************************************************************************************************/

.fightanim__dragon--right{
	right: 50px;
	transform: scaleX(-1);
}
.js-fightanim--animate .fightanim__dragon--right{
	animation-name: fightanimDragonRight;
}
@keyframes fightanimDragonRight {
   0% { 	transform: translate3d(500px,0,0) scaleX(-1); 	}
   85% { 	transform: translate3d(-50px,0,0) scaleX(-1); 	}
   100% { 	transform: translate3d(0,0,0) scaleX(-1); 		}
}

.fightanim__dragon--right.fightanim__dragon--rightclassic {
    transform: none;
}


/**********************************************************************************************************************************/
/** fightanim : owner name ********************************************************************************************************/
/**********************************************************************************************************************************/
/*** description : owners appears with a blur effect ******************************************************************************/
/**********************************************************************************************************************************/

.fightanim__owner{
	animation: fightanimOpponent 6s 1;
	color: #fff;
	position: absolute;
	text-align: center;
	top: -20px;
	width: 300px;
}
.fightanim__owner--breeder{
	left: 50px;
}
.fightanim__owner--opponent{
	right: 50px;
}
@keyframes fightanimOpponent {
	0%, 3%	{ opacity: 0; filter: blur(5px);}
	10% 	{ opacity: 1; filter: blur(0);	}
	70% 	{ opacity: 1; filter: blur(0);	}
	100%	{ opacity: 0; filter: blur(5px);}
}

/**********************************************************************************************************************************/
/** fightanim : aura **************************************************************************************************************/
/**********************************************************************************************************************************/
/*** description : "Merge" sprite animation with dragons'action round up **********************************************************/
/**********************************************************************************************************************************/

.fightanim::after{
	background-image: url(/media/equideo/image/chevaux/special/animation/dragon/sprite-aura.png);
	background-repeat: no-repeat;
	height: 520px;
	left: 235px;
	width: 520px;
	top: 16px;
}
.js-fightanim--animate::after{
    -webkit-animation: fightanimAura 1.5s steps(6) forwards;
       -moz-animation: fightanimAura 1.5s steps(7) infinite;
        -ms-animation: fightanimAura 1.5s steps(7) infinite;
         -o-animation: fightanimAura 1.5s steps(7) infinite;
            animation: fightanimAura 1.5s steps(6) forwards;
}
@-webkit-keyframes fightanimAura {
	0%, 86% { background-position:    0; 	opacity: 0;}
	87% 	{ background-position:    0; 	opacity: 1;}
	94% 	{ background-position: -3120px; opacity: 1;}
	100% 	{ opacity: 0; }
}
@-moz-keyframes fightanimAura {
	0%, 86% { background-position:    0; 	opacity: 0;}
	87% 	{ background-position:    0; 	opacity: 1;}
	94% 	{ background-position: -3120px; opacity: 1;}
	100% 	{ opacity: 0; }
}
@-ms-keyframes fightanimAura {
	0%, 86% { background-position:    0; 	opacity: 0;}
	89% 	{ background-position:    0; 	opacity: 1;}
	95% 	{ background-position: -3120px; opacity: 1;}
	100% 	{ opacity: 0; }
}
@-o-keyframes fightanimAura {
	0%, 86% { background-position:    0; 	opacity: 0;}
	87% 	{ background-position:    0; 	opacity: 1;}
	94% 	{ background-position: -3120px; opacity: 1;}
	100% 	{ opacity: 0; }
}
@keyframes fightanimAura {
	0%, 86% { background-position:    0; 	opacity: 0;}
	87% 	{ background-position:    0; 	opacity: 1;}
	94% 	{ background-position: -3120px; opacity: 1;}
	100% 	{ opacity: 0; }
}

/**********************************************************************************************************************************/
/** fightanim : claw **************************************************************************************************************/
/**********************************************************************************************************************************/
/*** description : When dragons arrive, sprite animation of claw meaning fight has begun ******************************************/
/**********************************************************************************************************************************/

.fightanim::before{
	background-image: url(/media/equideo/image/chevaux/special/animation/dragon/sprite-claw.png);
	background-repeat: no-repeat;
	height: 400px;
	left: 420px;
	width: 150px;
}
.js-fightanim--animate::before{
    -webkit-animation: fightanimClaw .6s steps(4) forwards;
       -moz-animation: fightanimClaw .6s steps(5) infinite;
        -ms-animation: fightanimClaw .6s steps(5) infinite;
         -o-animation: fightanimClaw .6s steps(5) infinite;
            animation: fightanimClaw .6s steps(4) forwards;
}
@-webkit-keyframes fightanimClaw {
	0%, 65% {background-position:    0px; 	opacity: 0;}
	66% { 	background-position:    0px; 	opacity: 1;}
	100% { 	background-position: -600px; }
}
@-moz-keyframes fightanimClaw {
	0%, 65%  {background-position:    0px; 	opacity: 0;}
	66% { background-position:    0px; 		opacity: 1;}
	100% { background-position: -750px; }
}
@-ms-keyframes fightanimClaw {
	0%, 65%  {background-position:    0px; 	opacity: 0;}
	33% { background-position:    0px; 		opacity: 1;}
	100% { background-position: -750px; }
}
@-o-keyframes fightanimClaw {
	0%, 65%  {background-position:    0px; 	opacity: 0;}
	66% { background-position:    0px; 		opacity: 1;}
	100% { background-position: -750px; }
}
@keyframes fightanimClaw {
	0%, 65%  {background-position:    0px; 	opacity: 0;}
	66% { background-position:    0px; 		opacity: 1;}
	100% { background-position: -600px; }
}

/**********************************************************************************************************************************/
/** fightanim : action ************************************************************************************************************/
/**********************************************************************************************************************************/
/*** description : dragons'actions came in with slide effect **********************************************************************/
/**********************************************************************************************************************************/
/*** /!\/!\ warning : see cheval.js to set time out /!\/!\ ************************************************************************/
/**********************************************************************************************************************************/

.fightanim__action{
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	height: 128px;
	position: absolute;
	top: 212px;
	width: 128px;
	z-index: 1;
}

/** fightanim : action (halo) ************************************************************************************************/

.fightanim__action::after{
	border-radius: 100%;
	bottom: 40px;
	box-shadow: 0 0 30px 10px #fff, 0 0 50px 30px #fff, 0 0 70px 45px #fff;
	content: "";
	display: block;
	left: 40px;
	position: absolute;
	right: 40px;
	top: 40px;
	z-index: -1;
}

/** fightanim : action left **************************************************************************************************/
/*****************************************************************************************************************************/

.fightanim__action--left{
	left: 136px;
}
.js-fightanim--animate .fightanim__action--left{
	animation-name: fightanimActionLeft;
}
@keyframes fightanimActionLeft {
   0%, 20% { 	transform: translate3d(0, 500px, 0); opacity: 0;}
   21%, 70% { 		transform: translate3d(0, 0, 0); 	opacity: 1; }
   100% { 		transform: translate3d(300px, 0, 0); opacity: 0}
}

/** fightanim : action right *************************************************************************************************/
/*****************************************************************************************************************************/

.fightanim__action--right{
	right: 136px;
}
.js-fightanim--animate .fightanim__action--right{
	animation-name: fightanimActionRight;
}
@keyframes fightanimActionRight {
   0%, 20% { 	transform: translate3d(0, 500px, 0); opacity: 0;}
   21%, 70% { 		transform: translate3d(0, 0, 0); 	opacity: 1; }
   100% { 		transform: translate3d(-300px, 0, 0); opacity: 0}
}

/** fightanim : looser (works for left or right) ****************************************************************************/
/****************************************************************************************************************************/

.js-fightanim__dragon--looser img{
	animation: fightanimDragonLooser .5s 2 forwards;
}
@keyframes fightanimDragonLooser {
	0% {	transform: translate3d(0,0,0);		filter: none; }
	25% {	transform: translate3d(-10px,0,0);	filter : grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8); }
	50% {	transform: translate3d(0,0,0);		filter: none; }
	75% {	transform: translate3d(-10px,0,0);	filter : grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8); }
	100% {	transform: translate3d(0,0,0);		filter: none; }
}

/** fightanim : out *********************************************************************************************************/
/****************************************************************************************************************************/

.js-fightanim__dragon--out img{
	animation: fightanimDragonOut .6s 1 forwards;
}
@keyframes fightanimDragonOut {
	0% {	transform: translate3d(0,0,0); opacity: 1; }
	100% {	transform: translate3d(0,200px,0); opacity: 0;}
}

/** fightanim : results *****************************************************************************************************/
/****************************************************************************************************************************/

.fightanim__results{
	position: absolute;
	text-align: center;
	top: 100px;
	width: 300px;
	z-index: 4;
}
.fightanim__results--left{
	left: 50px;
}
.fightanim__results--right{
	right: 50px;
}
.fightanim__results__gain,
.fightanim__results__loss{
	animation-duration: 2.25s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	opacity: 0;
	text-shadow: 0 0 20px #000, 0 0 20px #000;
}

/** fightanim : results (animate) *******************************************************************************************/
/****************************************************************************************************************************/

.js-fightanim--animate .fightanim__results__gain{
	animation-name: fightanimResultGain;
}
@keyframes fightanimResultGain {
	0% {	transform: scale3d(0,0,0); 			opacity: 0;	}
	5% {	transform: scale3d(1,1,1); 			opacity: 1;	}
	80% {	transform: translate3d(0,0,0); 		opacity: 1;	}
	100% {	transform: translate3d(0,-200px,0);	opacity: 0; }
}
.js-fightanim--animate .fightanim__results__loss{
	animation-name: fightanimResultLoss;
}
@keyframes fightanimResultLoss {
	0% {	transform: scale3d(0,0,0); 			opacity: 0;	}
	5% {	transform: scale3d(1,1,1); 			opacity: 1;	}
	80% {	transform: translate3d(0,0,0);		opacity: 1; }
	100% {	transform: translate3d(0,200px,0);	opacity: 0; }
}

/** fightanim : button ******************************************************************************************************/
/****************************************************************************************************************************/

.js-fightanim__button__skip {
	z-index: 200;
	position: relative;
	bottom: -470px;
	width: 220px;
	color: white;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin: auto;
}

.js-fightanim__button__skip:hover {
	text-decoration:underline;
	cursor: pointer;
}

/** Console's block *********************************************************************************************************/
/****************************************************************************************************************************/

.life-dragon{
	width: 48px;
	height: 48px;
	display: inline-block;
	background-image: url(/media/equideo/image/components/action/4/sprite.png);
	background-position: -4656px top;
}
.balance-of-power__title{
	font-size: 15px;
	font-weight: bold;
	color: #663300;
}


/***
.########..########.##.......##..........###.....######...#######..########..##....##.########
.##.....##.##.......##.......##.........##.##...##....##.##.....##.##.....##.###...##.##......
.##.....##.##.......##.......##........##...##..##.......##.....##.##.....##.####..##.##......
.########..######...##.......##.......##.....##.##.......##.....##.########..##.##.##.######..
.##.....##.##.......##.......##.......#########.##.......##.....##.##...##...##..####.##......
.##.....##.##.......##.......##.......##.....##.##....##.##.....##.##....##..##...###.##......
.########..########.########.########.##.....##..######...#######..##.....##.##....##.########
 */

body.animation .js-eggroll {
	animation: eggRoll 1s 2 .5s linear;
	transform-origin: center bottom;
}
@keyframes eggRoll{
	0%{		transform: rotateX(0) rotateY(0) rotateZ(0); }
	33%{	transform: rotateX(1deg) rotateY(0) rotateZ(6deg); }
	66%{	transform: rotateX(1deg) rotateY(0) rotateZ(-6deg); }
	100%{	transform: rotateX(0) rotateY(0) rotateZ(0); }
}



/*
..######...########.....###....####.##......
.##....##..##.....##...##.##....##..##......
.##........##.....##..##...##...##..##......
.##...####.########..##.....##..##..##......
.##....##..##...##...#########..##..##......
.##....##..##....##..##.....##..##..##......
..######...##.....##.##.....##.####.########
*/

#grailQuests-body-content{
	padding: 0;
}
.js-grailquest--locked,
.js-grailquest--released{
	background: linear-gradient(180deg, #C8C867 0%, #DCDA81 100%);
	opacity: 0.5;
}
.js-grailquest__button,
.js-grailquest__title{
	cursor: pointer;
}
.grailquest{	
	border-bottom: 1px solid #C9C765;
}
.grailquest div,
.grailquest__subtitle{
	padding: 7px;
	vertical-align: middle;
	margin-bottom: 0;
}
.body--rtl .grailquest__pix{
	padding-top: 2px;
	transform: rotate(180deg);
}
.grailquest__pix svg{
	width: 10px;
	height: 10px;
}
.grailquest__text,
.musketeer__text{
	padding: 7px;
	margin: 0;
}
.grailquest__text strong,
.musketeer__text strong{
	position: relative;
}
.grailquest__text__strike{
	display: block;
	left: 0;
	opacity: .8;
	position: absolute;
	top: -15px;
	white-space: nowrap;
}
.grailquest__text__icon--right{
	display: inline-block;
	vertical-align: top;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: 2px;
    background-image: url(/media/equideo/image/interface/icon/console.png);
    background-position: -34px 0;
}

.grailquest__text__icon--left{
	display: inline-block;
	vertical-align: top;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: 2px;
    background-image: url(/media/equideo/image/interface/icon/console.png);
    background-position: -17px 0;
}
.body--rtl .grailquest__text__icon{
	margin-left: 5px;
	margin-right: 0;
	background-position: -17px 0;
}
.grailquest__alert{
	border: 2px solid #ffc90e;
	background: #efe4b0;
	color: #3d251b;
	padding: 10px;
	border-radius: 8px;
	margin: 10px;
	font-weight: bold;
}
.grailquest__alert a{
	text-decoration: underline;
}

/*
....###....##....##.##....##.####.##.....##.########.########.....###....########..##....##
...##.##...###...##.###...##..##..##.....##.##.......##.....##...##.##...##.....##..##..##.
..##...##..####..##.####..##..##..##.....##.##.......##.....##..##...##..##.....##...####..
.##.....##.##.##.##.##.##.##..##..##.....##.######...########..##.....##.########.....##...
.#########.##..####.##..####..##...##...##..##.......##...##...#########.##...##......##...
.##.....##.##...###.##...###..##....##.##...##.......##....##..##.....##.##....##.....##...
.##.....##.##....##.##....##.####....###....########.##.....##.##.....##.##.....##....##...*/

#console #anniversaryPass .message-style-1{
	font-weight: normal;
}
.anniversaryitems__countdown{
	text-transform: uppercase;
}
.anniversaryitems__countdown .countDownContainer{
	color: #003300;
	font-size: 13px;
	font-weight: bold;
}
.anniversaryitems__countdown .message-style-1 {
    min-height: inherit;
    padding: 4px 10px;
    display: inline-block;
}
#console .anniversaryitems__countdownpass .message-style-1{
	color: #552F0A;
	font-size: 17px;
	letter-spacing: 2px;
}
.anniversaryitems__multi{
	height: 28px;
	width: 28px;
	color: #fff;
	font-size: 14px;
	line-height: 27px;
	border-radius: 50%;
	background: linear-gradient(180deg, #F6BA3B 0%, #FFE35B 100%);
	box-shadow: 0 2px 3px 0 rgba(255,178,49,0.53);
	text-shadow: 0 0 3px rgba(230,169,32,0.49);
}