/*
BASE COLOR
-------------
width 980px (210 / 600 / 170 px)

blue #6996c2

*/

@import url('normalize.css') all;
@import url('colorbox.css') all;
@import url('typo.css') all;


html,body
	{
	color:#404040;
        font-family:open_sans,helvetica,arial,sans-serif;
        font-size:13.5px;
        line-height: 150%;
        background-color: white;
  	height:100%;
  	}
body{
    overflow-y: scroll;
}
nav,
header,
footer,
section,
article
	{position:relative;}
address
	{font-style:normal;}

.print{display: none;}

/* MAIN BLOCK */
#container
{
    position:relative;
    width:100%;
    margin:0 auto;
    z-index: 1;
}

#preheader
{
    position:relative;
    clear: both;
    margin:0 auto;
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
}
#header
{
    position:relative;
    clear: both;
    width:980px;
    margin:0 auto;
    padding: 30px 0;
    padding-top: 60px;
}
#main
{
    position:relative;
    clear: both;
    width:980px;
    margin:0 auto;
    background-color:#fff;
}
#content{
    position: relative;
}
#content .padder{
    padding: 0;
    padding-left: 20px;
}
#content-content{float:left; width: 570px;}
#content-side{float:right; width: 195px;}
#nav-main{

}

#footer
	{
	position:fixed;
        bottom: 0;
        left:0;
        width:100%;
	background-color:#fff;
        background-color:rgba(255, 255, 255, .95);
        border-top: 1px solid #f0f0f0;
	}

.zophes{text-align: center; font-size: 1.5em; font-weight: bold; padding: 14px 0;color:#6996c2;}
.wrapper
	{position:relative;width:980px;margin:auto;padding:0;}
.padder
	{padding: 30px 20px;}
.clearfix
	{
	display:block;visibility:hidden;clear:both;margin:0;padding:0;
	font-size:0;height:0;
	}
img.responsive
	{
  	max-width:100%;
  	width:auto\9;height:auto;
  	vertical-align:middle;
  	border:0;
  	-ms-interpolation-mode: bicubic;
	}
.msgerr
{
    color: #f00;
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #f00;
    background-color: white;
}
.alert-info
{
    color: #6996c2;
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #6996c2;
    box-sizing: border-box;
}

.cadre{
    border: 3px solid #ec636a;
    margin: 14px;
    text-align: center;
    padding: 7px 14px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

table.center-top{min-width: 100%; text-align: center;}
table.center-top td{padding: 7px; border: 1px solid #333; vertical-align: top;}
/* NEWS */
#news-box{
    position: fixed;
    top: 35px; right: 0;
    width:40px;
    z-index: 900;
}

#news-box h3{
    color: #6996c2 !important;
}
#news-box .icon{
    position:absolute;
    height:25px;
    z-index: 500;
    bottom: -25px;
    right: 15px;
    white-space: nowrap;
    padding: 0 7px;
    background-color: #cc6666;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    color: white;
    font-weight: bold;
    font-size: 12px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer;
}
#news-box .icon.close{display: none;}
#news-box .wrapper{
    position: absolute;
    z-index: 501;
    right:0;bottom:0;
    width:295px;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    display:none;
}

#news-box .wrapper .all{
    position: absolute;
    bottom: 0;
    right: 0;
    left:0;
}
#news-box .wrapper .all a{
    display: block;
    background-color: #6996c2;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 25px 2px 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
#news-box.active{

}
#news-box.active .wrapper
    {display:block;}

#news-box.active .icon.menu{
    display:none
}
#news-box.active .icon.close{
    display:block
}

#news-box .items{}
#news-box .items .item{padding: 15px 20px; margin: 0 -20px;cursor: pointer;}

#news-box .items .item:hover{background-color: #ebf5ff;}
#news-box .items .item .date{font-size: 10px;}
#news-box .items .item img{margin: 7px auto;}
#news-box .items .item img.responsive{width: 40%; margin: 0 0 4px 7px; float:right;}
#news-box .items .item .plus{font-size: 10px; white-space: nowrap;}
#news-box .items .item .resume{font-style: italic;}



/* NEWS CONTENT */
#news-content{}
#news-content .items{margin: 0;}
#news-content .items .item{padding: 10px 0 15px 0; border-bottom: 1px solid #6996c2;}

#news-content .items .item .date{font-weight: normal;font-size: 11px;}
#news-content .items .item img{margin: 7px auto;}
#news-content .items .item .text{margin: 7px auto;}
#news-content .items .item img.small{
	float: left; width: 220px;
	/*cursor: pointer;*/
	margin: 7px 14px 4px 0;
}


/* NAV */
nav ul{display: block; list-style-type: none;}
nav li{display: block; list-style-type: none;}

#preheader nav{float:left;text-transform: uppercase;padding: 6px 0 4px 0;}
#preheader nav ul{
    text-align: left;
    padding: 0;
}
#preheader nav ul li{
    display: block;
    float:left;
    color: white;
    font-size: 11px;
    padding: 0;
}
#preheader nav ul li:after{content: 'i'; display:inline-block; padding: 0 7px;text-transform: uppercase;}
#preheader nav ul li:last-child:after{display:none;}
#preheader nav ul li a{font-weight: bold;}
#preheader .user-info{
    float:right;
    text-transform: none;
}


#nav-main,
#content-side{}

#nav-main{color:#6996c2;}
#nav-main .padder{padding:0 25px 0 0;}
#nav-main h1{margin:0;margin-bottom: 7px;font-size: 16px;text-transform: none;}

#nav-main ul li{
    padding: 7px 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
    border-top: 3px solid #6996c2;
    position: relative;
}


#nav-main ul li.active
{
    z-index:100;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -3px;
    padding-left: 5px;
    padding-right: 5px;
    border-top:0 none;
    padding-top:8px;
    padding-bottom:8px;

    background-color: #6996c2;
    color: white !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
#nav-main ul li a{display:block;line-height: normal}


#nav-footer ul{font-size: 11px; color:#00568d;}
#nav-footer ul li{display: inline-block;}
#nav-footer ul li:after{content: ' l'}
#nav-footer ul li:last-child:after{content: ''}

#header img{width:100%;}
#header img.menu{width:92px;margin-top: 15px;}
#header img.titre{width:460px;margin-left: 20px;}

#header .chanson{
	display: inline-block;
	padding: 10px 20px 10px 55px;
	margin-left: 45px;
	margin-top: 20px;
	border-radius: 15px;
	vertical-align: top;
	border: 3px solid #6996c2;
	color:#6996c2;
	font-weight: bold;
	background-image: url(../img/note.svg);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	background-size: 30px 41px;
	line-height: normal;
	font-weight: 500;
}

#header .chanson .icon.more{
	background-image: url(../img/icon-more.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px 18px;
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: bottom;
	margin-left: 7px;
	margin-bottom: 2px;
}

.col{float:left;}
.col.col-left{width: 200px;}
.col.col-content{width: 780px;}


/* MENU CONTENT - block */
.menu-block{display:none;}
.menu-block.active{display:block;}

.menu-block>h2{margin-top: 0;}

/* STANDARD DEFINITION */
hr{border: 0 none; border-top:1px solid #00568d;}
a {color:inherit; text-decoration: none;}
a.sign{text-decoration: underline;}
a.lnk_out{text-decoration: underline;}
a.lnk_in{text-decoration: underline;}

small,
p.small{font-size: .9em;}
h1{font-size: 16px; text-transform: uppercase;margin-bottom: 14px; color:#00568d;}
h2, .h2{font-size: 16px; margin: 16px 0 4px 0; color:#00568d;}
h3, .h3{font-size: 14px; margin: 8px 0 4px 0; color:inherit;}
h4{font-size: 13.5px; font-weight: 500;margin-bottom: 14px;}
h5{font-size: 13.5px; font-weight: bold;margin: 14px 0 4px 0; color:#00568d;}

.note{font-size:.85em; margin: 15px 0 5px 0;}

#content p{text-align: justify;}

#content p,
#content li{margin-bottom: 7px;}
#content ul,
#content ol
    {padding-left:20px;}

#content li>ul>li{list-style-type: none; text-indent: -10px;}
#content li>ul>li:before{content: '- '}

/* LAYOUT DETAILS */
#footer .logo{position: absolute; top: 10px; left:20px;z-index:100;}
#footer .logo img{height:30px;}
#footer nav{padding-left: 210px;padding-top: 10px; padding-bottom: 20px;}

#content-side .padder{padding:0 0 0 20px;}
#content-side p{text-align: left;font-size: 12px;line-height: 150%;}

#content-side img{width:100%;}

#content-side ul{
    list-style-type: none;
    padding: 0;
    font-size: 11px;
}
#content-side li{margin:7px 0; font-weight: bold;}
#content-side li a{}

#content .image{margin-top:20px;position: relative;}
#content .image img{width:100%;}
#content .image .zoom{
    position:absolute; top: 4px; left:4px;
    line-height: 14px;text-align: center;
    width: 20px; height: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: black;
    border: 2px solid white;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 16px;
    vertical-align: top;
    color:white;
    opacity: .5;
}
#content .image:hover .zoom{
    opacity: 1;
}


#content .image.cadre{
    padding: 22px; border: 1px solid #dee5e9; margin-left:-20px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    margin-top: 0;
    margin-bottom: 20px;
}
#content .image.cadre .zoom{
    left:auto;
    right: 10px;
    top:10px;
}

/* THEMES */
#themes{ text-align: center;}

#themes .item{
    box-sizing: border-box;
    display: inline-block;
    width: 205px;
    height: 100px;
    background-color: red;
    margin: 10px;
    padding: 15px;
    text-align: left;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    vertical-align: top;
    cursor: pointer;
}

#themes.small{margin-bottom: 30px;}
#themes.small .item{
    width: 103px;
    height: 50px;
    margin: 5px;
    padding: 8px;
    font-size: 12px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    line-height: 120%;
}


/* THEME */
.navig-themes{
    display:table;
    width:100%;
    background-color: #c7b6ff;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    margin-bottom: 40px;
}
.navig-themes>span{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    height: 120px;
    color: white;
    font-weight: 400;
    font-size: 36px;
    line-height: 42px;
}
.navig-themes .arrow_prev,
.navig-themes .arrow_next{
    vertical-align: middle;
    position: absolute;
    top:35px;
    line-height: normal;
}

.navig-themes .arrow_prev{left:20px;}
.navig-themes .arrow_next{right: 0;padding-right: 20px;}

#content-content h1{margin-top: 20px;}
#content-content h1:first-child{margin-top: 0;}

#content-content h1,
#content-content h2
    {text-transform: uppercase;}

#content-content ol>li{list-style-type: lower-latin;}
#content-content ol.latin>li{list-style-type: lower-latin;}
#content-content ol.number>li{list-style-type: decimal;}


/* ACCORDION */
dl.accordion{}
dl.accordion dt{
    clear: both;
    background: transparent url(img/traditions/orgs/puce_close.png) 0 4px no-repeat;
    background-size: 7px 7px;
    padding: 0 4px 7px 14px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    color:#00568d;
    display: none;
}
dl.accordion dt.selected{background-image: url(img/traditions/orgs/puce_open.png);}
dl.accordion dd{/*margin: -4px 0 7px 0; padding-left: 14px;*/}

.ressources .item{margin: 2px 0 0 0;position: relative;}
.ressources .item:after{clear: both; content: ' '; display: block;}
.ressources h4{font-weight: bold; margin-bottom: 0;line-height: normal;}

.ressources h4 a{display: block; margin-left: -7px; padding: 2px 7px 3px 7px;}
.ressources h4 a:hover{color:white; background-color:#00568d;}
.ressources h4 small{font-size: 11px; font-weight: normal;}

.ressources .description{font-style: italic; margin: -2px 0 4px 0;}
#content .ressources .description p{text-align: left;}
.ressources .source{font-style: italic; margin-bottom: 4px; font-size: .85em; line-height: 130%;}
.ressources .utilisation{margin: -2px 0 4px 0;}

.ressources .item .cont_content {float:left;width:385px;}
.ressources .item .more,
.ressources .item .less
	{
        display: block;
        text-align: right;
        }
.ressources .item .more button,
.ressources .item .less button
	{
		border: 0 none;
		background-color: #009ce1;
		background-size: 100% 100%;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		padding: 2px 15px;
		font-weight: bold;
		color: white;
		text-transform: uppercase;
		font-size: 12px;
		margin: 14px 0 0 0;
	}

.ressources .item.IMAGEZOOM{float:left; margin: 5px 10px 5px 0; width: 125px;}
.ressources .item.IMAGEZOOM img{width:100%;}

.ressources .item.BIBLIO{clear: both;}
.ressources .item.BIBLIO h4{font-weight: normal;margin-bottom: 7px;}
.ressources .description{font-style: normal;}
.ressources .item.BIBLIO img.liste{float: left; margin-right: 10px;margin-bottom: 10px;}


.ressources .item.RESSOURCES_COMP{margin-bottom: 15px;padding-bottom: 15px; border-bottom: 1px solid #333;}
.ressources .item.RESSOURCES_COMP:last-child{margin-bottom: 0;border-bottom: 0 none;}
.ressources .item.RESSOURCES_COMP h4{margin-bottom: 7px;}
/*.ressources .item.RESSOURCES_COMP img.liste{float: right; margin-top: 15px;margin-left: 10px;margin-bottom: 10px; width: 220px;}*/

.ressources .item.RESSOURCES_COMP img.liste{float: left; margin-top: 4px; margin-right: 10px;margin-bottom: 4px; width: 160px; border: 1px solid #ccc; border-top-color: #eee; border-left-color: #eee;}

.ressources .item.RESSOURCES_COMP .liens a:before,
.ressources .item.RESSOURCES_COMP a.lnk_out:before{content:'» ';}
.ressources .item.RESSOURCES_COMP a.lnk_out{text-decoration: none;}

/*.ressources .item.RESSOURCES_COMP .liens,*/
.ressources .item.RESSOURCES_COMP .utilisation/*,
.ressources .item.RESSOURCES_COMP .source*/
	{display:none;}
.ressources .item.RESSOURCES_COMP.active .liens,
.ressources .item.RESSOURCES_COMP.active .utilisation,
.ressources .item.RESSOURCES_COMP.active .source
	{display:block;}


.ressources .intro,
.ressources .intro p{font-size: 11px;}



/*
.ressources .item.RESSOURCES_COMP .source{display: none;}
.ressources .item.RESSOURCES_COMP img.liste{display: none;}
*/

.ressources .types{}
.ressources .types:after{display: block; content:' '; clear: both;}
.ressources .types label{font-weight: bold; display: inline-block; padding: 24px 0 0 14px; text-transform: uppercase;font-size: 1.25em;color:#6996c2;}

.ressources .types .type{
  width:64px; height:64px;
  overflow: hidden;
  background: transparent url(img/types/orgs/image.png) left top no-repeat;
  background-size: 100% 100%;
  float: left;
}

.ressources .types .type .label{display: none;}
.ressources .types .type.album{background-image: url(img/types/orgs/album.png); width: 45px;}
.ressources .types .type.video{background-image: url(img/types/orgs/video.png); width: 49px;}
.ressources .types .type.ouvrage{background-image: url(img/types/orgs/ouvrage.png); width: 35px;}
.ressources .types .type.article{background-image: url(img/types/orgs/article.png); width: 37px;}
.ressources .types .type.web{background-image: url(img/types/orgs/web.png); width: 43px;}

.back{font-size: 10px; position: absolute; top:7px; left:20px;}

.img_zoom .description{padding: 20px; color:white; font-weight: bold;}
.img_zoom .copy{margin-top:15px;}
.img_zoom .img{line-height: 0; width:100%; overflow: hidden}
.img_zoom .img img{width:100%;}
.img_zoom  button
    {
    float:right;border: 0 none; background-color: white; font-weight: bold;padding: 3px 20px; text-transform: uppercase;font-size: 11px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
.img_zoom  button:hover{opacity: .9;}

.img_menu{margin: 20px 0;}
.img_menu .item{width: 87px;float:left; margin: 3px; opacity: .5;}
.img_menu .item.active,
.img_menu .item:hover{opacity: 1;}
.img_menu .item img{width: 100%;}

/* COULEURS */

/* COULEURS - text */
.color.amitie,
body.amitie h1,
body.amitie h2,
body.amitie h3,
body.amitie h5,
body.amitie #content-side,
body.amitie #nav-main ul li,
body.amitie .ressources .types label
    {color: #ac95e5;}
.color.colere,
body.colere h1,
body.colere h2,
body.colere h3,
body.colere h5,
body.colere #content-side,
body.colere #nav-main ul li,
body.colere .ressources .types label
    {color: #969fc0;}
.color.differences,
body.differences h1,
body.differences h2,
body.differences h3,
body.differences h5,
body.differences #content-side,
body.differences #nav-main ul li,
body.differences .ressources .types label
    {color: #b05e00;}
.color.joie,
body.joie h1,
body.joie h2,
body.joie h3,
body.joie h5,
body.joie #content-side,
body.joie #nav-main ul li,
body.joie .ressources .types label
    {color: #e28a64;}
.color.mechants,
body.mechants h1,
body.mechants h2,
body.mechants h3,
body.mechants h5,
body.mechants #content-side,
body.mechants #nav-main ul li,
body.mechants .ressources .types label
    {color: #4d6bff;}
.color.mort,
body.mort h1,
body.mort h2,
body.mort h3,
body.mort h5,
body.mort #content-side,
body.mort #nav-main ul li,
body.mort .ressources .types label
    {color: #9abf00;}
.color.permis,
body.permis h1,
body.permis h2,
body.permis h3,
body.permis h5,
body.permis #content-side,
body.permis #nav-main ul li,
body.permis .ressources .types label
    {color: #d973ff;}
.color.peur,
body.peur h1,
body.peur h2,
body.peur h3,
body.peur h5,
body.peur #content-side,
body.peur #nav-main ul li,
body.peur .ressources .types label
    {color: #c93b7f;}
.color.secret,
body.secret h1,
body.secret h2,
body.secret h3,
body.secret h5,
body.secret #content-side,
body.secret #nav-main ul li,
body.secret .ressources .types label
    {color: #2dd1ff;}
.color.verite,
body.verite h1,
body.verite h2,
body.verite h3,
body.verite h5,
body.verite #content-side,
body.verite #nav-main ul li,
body.verite .ressources .types label
    {color: #888bff;}

/* COULEURS - text/foncé */
/*
body.amitie .navig-themes .arrow
    {color: #9e74e3;}
body.colere .navig-themes .arrow
    {color: #4d4d4d;}
body.differences .navig-themes .arrow
    {color: #603813;}
body.joie .navig-themes .arrow
    {color: #c87e00;}
body.mechants .navig-themes .arrow
    {color: #2e3192;}
body.mort .navig-themes .arrow
    {color: #89b600;}
body.permis .navig-themes .arrow
    {color: #f500f2;}
body.peur .navig-themes .arrow
    {color: #a43b7f;}
body.secret .navig-themes .arrow
    {color: #6d9fff;}
body.verite .navig-themes .arrow
    {color: #0010ec;}
 */

/* COULEURS - background */

#themes .item.amitie,
body.amitie .navig-themes,
body.amitie #content .image .zoom,
body.amitie #nav-main ul li.active,
body.amitie .ressources .item .more button,
body.amitie .ressources .item .less button
    {background-color: #c3a3ff;}
#themes .item.colere,
body.colere .navig-themes,
body.colere #content .image .zoom,
body.colere #nav-main ul li.active,
body.colere .ressources .item .more button,
body.colere .ressources .item .less button
    {background-color: #969fc0;}
#themes .item.differences,
body.differences .navig-themes,
body.differences #content .image .zoom,
body.differences #nav-main ul li.active,
body.differences .ressources .item .more button,
body.differences .ressources .item .less button
    {background-color: #b7691c;}
#themes .item.joie,
body.joie .navig-themes,
body.joie #content .image .zoom,
body.joie #nav-main ul li.active,
body.joie .ressources .item .more button,
body.joie .ressources .item .less button
    {background-color: #ff9240;}
#themes .item.mechants,
body.mechants .navig-themes,
body.mechants #content .image .zoom,
body.mechants #nav-main ul li.active,
body.mechants .ressources .item .more button,
body.mechants .ressources .item .less button
    {background-color: #4d6bff;}
#themes .item.mort,
body.mort .navig-themes,
body.mort #content .image .zoom,
body.mort #nav-main ul li.active,
body.mort .ressources .item .more button,
body.mort .ressources .item .less button
    {background-color: #a4d100;}
#themes .item.permis,
body.permis .navig-themes,
body.permis #content .image .zoom,
body.permis #nav-main ul li.active,
body.permis .ressources .item .more button,
body.permis .ressources .item .less button
    {background-color: #f873ff;}
#themes .item.peur,
body.peur .navig-themes,
body.peur #content .image .zoom,
body.peur #nav-main ul li.active,
body.peur .ressources .item .more button,
body.peur .ressources .item .less button
    {background-color: #c93b7f;}
#themes .item.secret,
body.secret .navig-themes,
body.secret #content .image .zoom,
body.secret #nav-main ul li.active,
body.secret .ressources .item .more button,
body.secret .ressources .item .less button
    {background-color: #2dd1ff;}
#themes .item.verite,
body.verite .navig-themes,
body.verite #content .image .zoom,
body.verite #nav-main ul li.active,
body.verite .ressources .item .more button,
body.verite .ressources .item .less button
    {background-color: #888bff;}

#themes .item.ppe,
body.ppe .navig-themes,
body.ppe #content .image .zoom,
body.ppe #nav-main ul li.active,
body.ppe .ressources .item .more button,
body.ppe .ressources .item .less button
    {background-color: #6996c2;}

/* COULEURS - background/foncé */
#themes .item.amitie:hover
    {background-color: #9e74e3;}
#themes .item.colere:hover
    {background-color: #4d4d4d;}
#themes .item.differences:hover
    {background-color: #603813;}
#themes .item.joie:hover
    {background-color: #CC6315;}
#themes .item.mechants:hover
    {background-color: #2e3192;}
#themes .item.mort:hover
    {background-color: #89b600;}
#themes .item.permis:hover
    {background-color: #f500f2;}
#themes .item.peur:hover
    {background-color: #a43b7f;}
#themes .item.secret:hover
    {background-color: #6d9fff;}
#themes .item.verite:hover
    {background-color: #0010ec;}

/* COULEURS - border/light */
body.amitie #nav-main ul li,
body.amitie #content .image.cadre
    {border-color: #e1d1fd;}
body.colere #nav-main ul li,
body.colere #content .image.cadre
    {border-color: #dee5e9;}
body.differences #nav-main ul li,
body.differences #content .image.cadre
    {border-color: #e3be7f;}
body.joie #nav-main ul li,
body.joie #content .image.cadre
    {border-color: #ffe9bf;}
body.mechants #nav-main ul li,
body.mechants #content .image.cadre
    {border-color: #daeeff;}
body.mort #nav-main ul li,
body.mort #content .image.cadre
    {border-color: #e7ff96;}
body.permis #nav-main ul li,
body.permis #content .image.cadre
    {border-color: #fddcff;}
body.peur #nav-main ul li,
body.peur #content .image.cadre
    {border-color: #f2acbb;}
body.secret #nav-main ul li,
body.secret #content .image.cadre
    {border-color: #dff9ff;}
body.verite #nav-main ul li,
body.verite #content .image.cadre
    {border-color: #d1dcff;}

body.amitie .ressources .types .type.album{background-image: url(img/types/amitie-album.png);}
body.amitie .ressources .types .type.video{background-image: url(img/types/amitie-video.png);}
body.amitie .ressources .types .type.ouvrage{background-image: url(img/types/amitie-ouvrage.png);}
body.amitie .ressources .types .type.article{background-image: url(img/types/amitie-article.png);}
body.amitie .ressources .types .type.web{background-image: url(img/types/amitie-web.png);}

body.colere .ressources .types .type.album{background-image: url(img/types/colere-album.png);}
body.colere .ressources .types .type.video{background-image: url(img/types/colere-video.png);}
body.colere .ressources .types .type.ouvrage{background-image: url(img/types/colere-ouvrage.png);}
body.colere .ressources .types .type.article{background-image: url(img/types/colere-article.png);}
body.colere .ressources .types .type.web{background-image: url(img/types/colere-web.png);}

body.differences .ressources .types .type.album{background-image: url(img/types/differences-album.png);}
body.differences .ressources .types .type.video{background-image: url(img/types/differences-video.png);}
body.differences .ressources .types .type.ouvrage{background-image: url(img/types/differences-ouvrage.png);}
body.differences .ressources .types .type.article{background-image: url(img/types/differences-article.png);}
body.differences .ressources .types .type.web{background-image: url(img/types/differences-web.png);}

body.joie .ressources .types .type.album{background-image: url(img/types/joie-album.png);}
body.joie .ressources .types .type.video{background-image: url(img/types/joie-video.png);}
body.joie .ressources .types .type.ouvrage{background-image: url(img/types/joie-ouvrage.png);}
body.joie .ressources .types .type.article{background-image: url(img/types/joie-article.png);}
body.joie .ressources .types .type.web{background-image: url(img/types/joie-web.png);}

body.mechants .ressources .types .type.album{background-image: url(img/types/mechants-album.png);}
body.mechants .ressources .types .type.video{background-image: url(img/types/mechants-video.png);}
body.mechants .ressources .types .type.ouvrage{background-image: url(img/types/mechants-ouvrage.png);}
body.mechants .ressources .types .type.article{background-image: url(img/types/mechants-article.png);}
body.mechants .ressources .types .type.web{background-image: url(img/types/mechants-web.png);}

body.mort .ressources .types .type.album{background-image: url(img/types/mort-album.png);}
body.mort .ressources .types .type.video{background-image: url(img/types/mort-video.png);}
body.mort .ressources .types .type.ouvrage{background-image: url(img/types/mort-ouvrage.png);}
body.mort .ressources .types .type.article{background-image: url(img/types/mort-article.png);}
body.mort .ressources .types .type.web{background-image: url(img/types/mort-web.png);}

body.permis .ressources .types .type.album{background-image: url(img/types/permis-album.png);}
body.permis .ressources .types .type.video{background-image: url(img/types/permis-video.png);}
body.permis .ressources .types .type.ouvrage{background-image: url(img/types/permis-ouvrage.png);}
body.permis .ressources .types .type.article{background-image: url(img/types/permis-article.png);}
body.permis .ressources .types .type.web{background-image: url(img/types/permis-web.png);}

body.peur .ressources .types .type.album{background-image: url(img/types/peur-album.png);}
body.peur .ressources .types .type.video{background-image: url(img/types/peur-video.png);}
body.peur .ressources .types .type.ouvrage{background-image: url(img/types/peur-ouvrage.png);}
body.peur .ressources .types .type.article{background-image: url(img/types/peur-article.png);}
body.peur .ressources .types .type.web{background-image: url(img/types/peur-web.png);}

body.secret .ressources .types .type.album{background-image: url(img/types/secret-album.png);}
body.secret .ressources .types .type.video{background-image: url(img/types/secret-video.png);}
body.secret .ressources .types .type.ouvrage{background-image: url(img/types/secret-ouvrage.png);}
body.secret .ressources .types .type.article{background-image: url(img/types/secret-article.png);}
body.secret .ressources .types .type.web{background-image: url(img/types/secret-web.png);}

body.verite .ressources .types .type.album{background-image: url(img/types/verite-album.png);}
body.verite .ressources .types .type.video{background-image: url(img/types/verite-video.png);}
body.verite .ressources .types .type.ouvrage{background-image: url(img/types/verite-ouvrage.png);}
body.verite .ressources .types .type.article{background-image: url(img/types/verite-article.png);}
body.verite .ressources .types .type.web{background-image: url(img/types/verite-web.png);}

body.ppe .ressources .types .type.album{background-image: url(img/types/ppe-album.png);}
body.ppe .ressources .types .type.video{background-image: url(img/types/ppe-video.png);}
body.ppe .ressources .types .type.ouvrage{background-image: url(img/types/ppe-ouvrage.png);}
body.ppe .ressources .types .type.article{background-image: url(img/types/ppe-article.png);}
body.ppe .ressources .types .type.web{background-image: url(img/types/ppe-web.png);}

/* CONTENT - intentions pedagogiques */
body.intentions_pedagogiques #content .picto{float:left; padding: 0 7px 7px 0;width: 40px;}

body.intentions_pedagogiques #content ul{margin: 15px 0;}
body.intentions_pedagogiques #content li{clear:both; padding-bottom: 15px; list-style-type: none;}






/* PUBLIC PAGE */
body.public{height: auto;}
body.public #main{
	margin-top: 70px;
	}
body.public #content{width: 100%;}
body.public .item_fiche{float:left; width: 390px; margin-bottom: 20px;}
body.public .item_fiche section{padding:0 20px;}
body.public .item_fiche:first-child {width: 560px;}
body.public .item_fiche:first-child section{width: 500px;}
body.public .item_fiche:first-child section{padding-left: 0;padding-right: 20px;}

body.public .first-visit section{
    background-color: #ffd9d1; color: white; padding:20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color:#6996c2;
}
body.public section h2{margin-top: 0; text-transform: uppercase}



body.public .connect section,
.box.pink{
    background-color: #ffd9d1;
    padding:20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: #6996c2;
}
.box.pink.form{float:left;width:520px;}


body.public input{
	border: 0 none;
	padding: 2px 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}

body.public input[type="submit"]{
	border: 0 none;
	padding: 3px 14px;
	color: white;
	background-color: #ff5189;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


body.public .form table{width: 100%;}
body.public .form td{padding: 5px 2px;}
body.public .form td.label{font-weight: bold;}

body.public #footer{position: relative;background: 0 none;border:0 none;}


body.compte .tbl_form{width:100%;}
body.compte .tbl_form td{vertical-align: top;padding: 2px 0;}
body.compte .tbl_form .label{width:35%;}
body.compte .info{font-size: 10px;}

body.compte input{
	border: 1px solid #6996c2;
	padding: 2px 1px;
}
body.compte input[type="submit"]{
	border: 0 none;
	padding: 7px 14px;
	color: white;
	background-color: #6996c2;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* AUDIO PLAYER */
.audio-player{
  background-color: #ddd;
	border-radius: 15px;
	position: relative;
	padding: 5px 10px;
	margin: 15px 0;
	line-height: 0;
}

.audio-player.iframe{padding: 15px;}
.audio-player .icon{width: 45px; height:45px; background-size: 100% 100%; background-repeat: no-repeat;display: inline-block;}
.audio-player .icon.icon-play{background-image: url(./img/audio/play.svg);}
.audio-player .icon.icon-stop{background-image: url(./img/audio/stop.svg);}
.audio-player .icon.icon-pause{background-image: url(./img/audio/pause.svg);}

.audio-player.active{}
.audio-player .icon.icon-stop,
.audio-player.active .icon.icon-play,
.audio-player .icon.icon-pause,
.audio-player .time
  {display: none;}

.audio-player .icon.icon-play,
.audio-player.active .icon.icon-stop
  {display: inline-block;}

.audio-player.active.stop .icon.icon-play
	{display: inline-block;}
.audio-player.active.stop .icon.icon-stop
  {display: none;}

.audio-player .icon{}

.audio-player .time{
  position: relative;
  display: block;
  position: absolute;
	top: 11px;
  right: 15px;
  left: 50px;
  color: white;
  font-size: .9em;
  font-weight: 500;
}
.audio-player .time .clock{
  position: absolute;
  top:15px;
  right: 0;
  width: 100px;
	font-size: .85em;
	color:#6996c2;
}
.audio-player .time .seek{
  position: absolute;
  top:4px;
  left: 40px;
  right: 110px;
  height: 24px;
  border: 1px solid white;
  background-color: transparent;
  background-image: linear-gradient(#6996c2, #6996c2);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 0% 100%;
  cursor: grab;
}
.audio-player .time .buffer{
  position: absolute;
  top:4px;
  left: 40px;
  right: 110px;
  height: 24px;
  border: 1px solid white;
  background-color: white;
  background-image: linear-gradient(#ffffff, #f0f0f0);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 0% 100%;
  cursor: grab;
}

.audio-player .time .icon-pause{
  position: absolute;
  display: block;
  top:0; left:0;
  width: 32px; height: 32px;
  margin:0;
}
.audio-player .time .icon-pause.active{
  background-image: url(./img/audio/play.svg);
}

/* COLORS */
.cl{color:#6996c2;}
.cl_back{background-color:#6996c2;}
h1, h2, h3,
#content-side
    {color:#6996c2;}
#preheader
    {background-color:#6996c2;}



@media screen and (min-width:1300px){
    html,body
	{
	font-size:16px;
  	}

    #content-content{width: 700px;}
    #content-side{width: 260px;}

    #header img.menu{width:120px;}
    #header img.titre{width:650px;}

    #footer nav{padding-left: 310px;}
    .col.col-left{width: 290px;}
    .col.col-content{width: 990px;}

    #header,
    #main,
    .wrapper
	{width:1280px;}

    #themes .item{
        width: 255px;
        height: 120px;
        margin: 16px;
        padding: 20px;
        font-size: 24px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
    }

    #themes.small .item{
        width: 128px;
        height: 60px;
        margin: 8px;
        padding: 10px;
        font-size: 14px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
    #nav-main .padder{padding:0 40px 0 0;}
    #preheader nav ul li{font-size: 13px;}
    #nav-main h1{font-size: 18px;}
    #nav-main ul li{font-size: 14px;padding: 9px 0;}
    #nav-main ul li.active
    {
        padding-top:11px;
        padding-bottom:11px;
    }
    #content-side ul {font-size: 13px;}
    #content-side p {font-size: 13px;}

    h1{font-size: 18px;}
    h2, .h2{font-size: 18px;}
    h3, .h3{font-size: 17px;}
    h4{font-size: 16px;}
    h5{font-size: 16px;}

    body.public .item_fiche{width: 460px;}
    body.public .item_fiche:first-child {width: 640px;}
    body.public .item_fiche:first-child section{width: 580px;}
    .box.pink.form{float:left;width:640px;}

    .ressources .item .cont_content {width:495px;}
}