/*   epn                    */
/*   G.Drouen   -  12/2016  */


:root{
--color-main: #0077c0; /* 034b82 */
--color-second: #0077c0;	
}

a:hover{color:var(--color-main);}
.hl{color:var(--color-main);}

h1{text-transform: uppercase; color: var(--color-main); border-bottom: solid 1px #d5dee5;}


header .header-cover{display: none;}
header .header-nav{padding: 0;}
header .header-nav div.logo{text-align: center; padding: 2rem 0;}
header .header-nav div.logo .wrap{display: block;}
header .header-nav div.logo .wrap p{margin:0; padding:0; color:#0169a6; letter-spacing: 0.27rem; font-size: 0.9rem;}
header .header-nav nav{align-self: initial; border-top: solid 1px #e0e0e0; border-bottom: solid 2px #e0e0e0;}
header .header-nav nav a{font-size: 1.05rem; padding:0.2rem 0; font-weight: normal; color: #666;}
header .header-nav nav a:hover{color:var(--color-main);}
header .header-nav nav .wrap{text-transform: uppercase;}
header .header-nav nav ul.menu{flex:1; align-self: center;}
header .header-nav nav .magazine-nav{display: flex; align-self: flex-end; font-weight: bold;}
.custom.search{font-size: 1.05rem; font-weight: normal; color: #666;}

header nav.menu ul li:first-child{padding-left:0;}
header nav.menu ul{margin-left: 0;}

/* menu header */
header nav.menu ul li{float:left; margin:0; padding:0; position: relative;}
header nav.menu .wrap > ul > li >a, header nav.menu .wrap > ul > li > span{display:inline-block; text-transform: uppercase; padding:0.2rem 1rem; font-size: 1.05rem; color: #666;}
header nav.menu .wrap > ul > li >a:hover, header nav.menu .wrap > ul > li:hover > span, header nav.menu .wrap > ul > li.active > a, header nav.menu .wrap > ul > li.active > span{color: var(--color-main); cursor: pointer;}
header nav.menu ul ul{margin-top: 0px; display: none; position:absolute; left:0; top:2rem; z-index: 100; box-shadow: 2px 2px 3px rgba(0,0,0,0.2);}
header nav.menu ul li:hover ul{display: block; min-height: 0;}
header nav.menu ul ul li{position: relative; border:0; height: auto; width: 200px;}
header nav.menu ul ul li a{color: #333; display: block; padding:5px 10px; border-bottom: solid 1px #ccc; background-color: #eaeaea; text-transform: none; box-shadow: inset 0 0 1px #fff; font-size: 1rem;}
header nav.menu ul ul li a:hover{background: #f9f9f9; text-decoration: none; color:var(--color-main);}

.header-edp ul.ico-social{margin-left: 1rem; align-items: end;}
.header-edp ul.ico-social li{margin-left: 0.5rem;}
.header-edp ul.ico-social li a{width: 2rem; height: 2rem; font-size: 1rem; background: #ccc;}
.header-edp ul.ico-social li a::before{padding: 0; font-size: 1.25rem; top:0.2rem; left:-0.1rem;}
.header-edp ul.ico-social li a.alert:hover{background: #a834ac;}
.header-edp ul.ico-social li a.twitter:hover, .header-edp ul.ico-social li a.x:hover{background: #000;}
.header-edp ul.ico-social li a.rss:hover{background: #e76c04;}
.header-edp ul.ico-social li a.bluesky:hover{background: #1185fe;}
.header-edp ul.ico-social li a.mastodon:hover{background: linear-gradient(#6364FF, #563ACC); background-color: #333;}

.header-bonus .minifrontpage{border:0; padding: 0; margin-bottom: 2rem;}
.header-bonus .minifrontpage .mfp-table-row{padding: 0;}
.header-bonus .minifrontpage .actu-hl{height: 250px; display: flex;}
.header-bonus .minifrontpage .actu-hl .title{align-self: flex-end; padding: 1rem; flex:1; background: rgba(0,0,0,0.85);}
.header-bonus .minifrontpage .actu-hl .title a{color:#fff;}
.header-bonus .minifrontpage .actu-hl .title a span{text-transform: uppercase;}


#main nav.accueil{padding:0; margin:1rem 0;}


.hllist article{display: inline-block;}


.blog.forms{}
.blog.forms h2{padding-left: 2rem; position: relative;}
.blog.forms h2::before{content: ""; width: 16px; height: 16px; display: block; border-radius: 5px; position: absolute; left: 0; top:0.25rem;}
.blog.forms h3{margin-bottom: 0; font-size: 1rem;}
.blog.forms h3+p{margin-top: 0; padding-top: 0;}


.footer-journal .footer-infos > h3{display: none;}
.footer-journal .footer-infos > ul.menu{display: flex;}
.footer-journal .footer-infos > ul.menu > li {flex: 1;}
.footer-journal .footer-infos > ul.menu > li > span.separator{text-transform: uppercase; font-weight: bold; display: block; margin-bottom: 0.5rem;}


@media screen and (max-width: 700px){
	.footer-journal .footer-infos > ul.menu{flex-direction: column; text-align: center;}
	.footer-journal .footer-infos > ul.menu > li > span.separator{margin-top: 1.5rem; border-bottom: solid 1px #ccc;}
	.footer-journal .footer-infos > ul.menu > li:first-child > span.separator{margin-top: 0;}
}

.footer-sponsors{border-top: solid 1px #e0e0e0; border-bottom: solid 1px #e0e0e0;}
.footer-sponsors .wrap{display: block;}
.footer-sponsors h2{text-transform: uppercase; font-size: 1rem; padding-top: 0; margin:0;}
.footer-sponsors .minifrontpage{background: transparent; border:0;}
.footer-sponsors .minifrontpage .mfp-other-article-title{display: none;}
.footer-sponsors .minifrontpage ul{display: flex;}
.footer-sponsors .minifrontpage ul li{flex: 1; border:0; text-align: center;}
.footer-sponsors .minifrontpage .mfp-other-article{height: auto !important;}

@media screen and (max-width: 970px){
	.footer-sponsors .minifrontpage{text-align: center;}
	.footer-sponsors .minifrontpage img{margin:1rem;}
	.footer-sponsors .minifrontpage .mfp-table-cell{display: inline-block !important;}
}

.pagination ul{}
.pagination ul li{}
.pagination ul li a,.pagination ul li span{display: inline-block; border-radius: 5px; padding:0.1rem 1rem; transition: all ease 500ms;}
.pagination ul li a{color:#fff; background: var(--color-link); text-decoration: none;}
.pagination ul li a:hover{background: var(--color-main);}

main .flex-me{margin-top: 0;}

.hp #tabs{margin-top: 0;}

.hp #content h1, .hp h2.title, .newsbox h2 {text-transform: uppercase; border-bottom: solid 1px #d5dee5; color:#0077c0; padding-bottom: 0.25rem; font-size: 1rem; margin-top: 0;}
.hp h2.title{font-weight: normal;}
.hp .about{}
.hp .about figure{float: left; margin:1rem 1.5rem 1rem 0;}
.hp .about figure img{box-shadow: 2px 2px 2px #ccc;}
.hp .about ul{list-style: none; display: flex; margin:1rem 0; padding:0;}
/*.hp .about ul li{flex: 1;}*/
.hp .about ul li a{background-color: #0077c0; padding:0.5rem 1rem; border-radius: 5px; color:#fff; text-decoration: none; transition: all ease 500ms; display: inline-block; text-align: center; margin:0 0.5rem; line-height: 1.2rem;}
.hp .about ul li a:hover{background-color: var(--color-second);}
.hp .about ul li:first-child a{margin-left:0;}

.hp .annuaire{margin-bottom: 2rem;}
.hp .annuaire div a{display: block; height: 85px; background: url(../images/epn/jobs_bg.jpg) no-repeat scroll left -30px rgba(0, 0, 0, 0); text-align: center;}

.hp .list .about{display: flex; margin-bottom: 2rem; font-size: 0.9rem;}

@media screen and (max-width: 800px){
		.hp .list .about figure{flex: 1; text-align: center;}
	.hp .list .about{flex-direction: column;}
}

nav.accueil{display: none;}
.header-bonus .bannergroup{margin: 2rem 0;}


@media screen and (max-width: 1200px){
	.hp .about ul{flex-direction: column;}
	.hp .about ul li{}	
	.hp .about ul li a{display: block; margin:0.25rem 0;}
}


@media screen and (max-width: 600px){
	.hp .about figure{float: none; margin: 1rem auto; text-align: center;}
}

@media screen and (max-width: 500px){
	.header-nav .logo img {width: 200px;}
}


@media screen and (max-width: 800px){
	.header-bonus .banneritem a img{max-width: 100%;}
}

@media screen and (max-width: 340px){
	.banneritem a img{max-width: 100%;}
}


.hp #content{display: flex;}
.hp #content .list{flex: 1; margin-right: 2rem;}
.hp #content .center{width: 225px;}

.flipbook {background-color: #F1F1F1; border: 1px solid #D2D2D2; border-radius: 5px; margin-bottom: 30px; text-align: center;}
.flipbook .cover {display: inline-block; float: left; margin-left: 30px; position: relative; width: 80px;}
.flipbook .cover img {box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); display: inline-block; transform: rotate(5deg);    width: 80px;}
.flipbook .cover:after {background: url("../images/epn/flipbook.png") repeat scroll 0 0 rgba(0, 0, 0, 0); content: ""; display: block; height: 62px; left: 25px;  position: absolute; top: 66px; width: 55px;}
.flipbook a{background-color: #0077c0; border-radius: 5px; box-shadow: 0 25px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 0 #00568b; color: #FFFFFF; display: inline-block; font: bold 13px/18px Arial; margin: 20px 0 0 8px; padding: 5px; width: 115px;}
.flipbook a:hover{text-decoration: none; opacity: 0.85}

main .wrap .hp.flex-me #sidebar, main .wrap .flex-me.nothp #sidebar{margin-left: 2rem;}
#sidebar >.bannergroup:first-child, #sidebar .popup + .bannergroup{margin-top: 0;}


@media all and (max-width: 980px){
	main .wrap .hp.flex-me #sidebar{margin-left: 0;}
}

@media all and (max-width: 800px){
	.nothp.flex-me{flex-direction: column;}
	main .wrap .flex-me.nothp #sidebar{margin-left: 0; margin-top: 2rem; width: auto}
}


@media screen and (max-width: 700px){
	.hp #content{flex-direction: column;}
	.hp #content .list{margin-right: 0;}
	.hp #content .center{width: auto; flex: 1; margin:1rem 0;}

}

/* mailchimp */
.nothp #sidebar .mailchimp{display: none;}
#sidebar .mailchimp{border:solid 1px #d5dee5; padding:1rem; margin-top: 2rem;}
#sidebar .mailchimp h2{text-align: center; text-transform: uppercase; font-size: 1rem;}
#sidebar .mailchimp input{display: block; width: calc(100% - 1rem); border-radius: 5px; font-size: 1rem;}
#sidebar .mailchimp input[type=email]{border:solid 1px #d5dee5; padding:0.5rem;}
#sidebar .mailchimp input[type=email]:focus{border:solid 1px var(--color-main);}
#sidebar .mailchimp input[type=submit]{text-align: center; padding:0.5rem; width: 100%; margin-top: 1rem; color:#fff; background: var(--color-main); transition: all ease 500ms; border:0; }
#sidebar .mailchimp input[type=submit]:hover{background: var(--color-link);}


/* agenda */
ul.simple.conf{}
ul.simple.conf li{padding:1.5rem 2rem;}
ul.simple.conf li::before{display: none;}
ul.simple.conf li h3{margin-top: 0;}
ul.simple.conf li.partenariat{border-left:solid 5px var(--color-main); background: #e7e9f2;}


/* blog column */
.blog .cols-2{display: flex;}
.blog .cols-2 > .item{flex:1;}
.blog .cols-2 > .item:nth-child(1){padding-right: 1rem;}
.blog .cols-2 > .item:nth-child(2){padding-left: 1rem;}
.blog .cols-2 > .item .item-separator{display: none;}
.blog .cols-2 > .item.column-2{column-count: 1;}
.blog .cols-2{border-bottom: dashed 1px #ccc; padding: 1rem 0;}

@media screen and (max-width: 600px){
	.blog .cols-2{flex-direction: column; border-bottom: 0;}
	.blog .cols-2 > .item{border-bottom: dashed 1px #ccc; padding: 1rem 0;}
	.blog .cols-2 > .item:nth-child(1){padding-right: 0;}
	.blog .cols-2 > .item:nth-child(2){padding-left: 0;}
}

.blog figure{float: none; display: block; text-align: center;}
.blog.products article figure a img{border:solid 1px #eee; transition: all ease 500ms;}
.blog.products article figure a:hover img{border:solid 1px var(--color-link);}
.blog.products article{display: flex;}
.blog.products article .txt{flex: 1;}
.blog.products .contact{background-color: #f1f1f1; border: 1px solid #ccc; margin-bottom: 1.5rem; padding: 0 1rem; border-radius: 5px;}

@media screen and (max-width: 800px){
	.blog figure, .blog figure img{max-width: 90%;}
	.blog.products article{flex-direction: column;}
}

.medal::before{content:"\f091"; font-family: Awesome; font-size: 2rem; margin-right: 0.5rem;}
.medal-gold::before{color:#d5cb23;}
.medal-silver::before{color:grey;}
.medal-bronze::before{color:orange;}


.illus{background-color: transparent; margin-bottom: 1rem; border: 0; padding:0;} 
.item .img-intro-left{display: none;}

@media screen and (max-width: 450px){
	.illus{float: none; display: block; margin: 0 auto 1rem;}	
}

/* hp */
.mfp-cat-date{font-size: 0.8rem;}
.mfp-cat-date > span{display: inline-block; color:#666;}
.mfp-cat-date .mfp-cat{text-transform: uppercase; color:var(--color-main); padding-right: 0.5rem;}


nav.accueil{}

.topic{background:#def2e3;}



@media screen and (max-width: 1120px){
	header .header-nav nav ul.menu >li{display: none;}
}

/* prices */
#jn-price .p21{background-color: #c0e9f1; text-align: center;}
#jn-price .p22{background-color: #ecfcff;}



/* highlights */
.minifrontpage .mfp-introtitle{font-size:0.9rem; display: block; margin-bottom:1rem; line-height: 1.6rem; color:#333;}
.minifrontpage img{border: solid 1px #eee;}


.hllist{}
.hllist section h2{margin-bottom: 1rem}
.hllist section figure figcaption{text-align: center;}

/* IE >= 10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

/* --color-main commun*/
a:hover, span.link:hover, a strong:hover, a:hover span.link{color: #0077c0;}
h1{border-bottom: solid 3px #0077c0;}
ul.simple li::before{color: #0077c0;}
.ico-big{background-color: #0077c0; }
.ico-search:hover{color: #0077c0;}
#toc .details h1, #topic .details h1{color: #0077c0;}
#issues nav.years a:hover{background-color: #0077c0;}
nav.article a:hover, nav.article .nav-section.related .articles .title:hover{color: #0077c0;}
nav.article .nav-section.files ul li a:hover{border:solid 1px #0077c0;}
nav.article .nav-section.files ul li a.current_doc{color: #0077c0; border:solid 1px #0077c0;}
nav.nav-buttons a:hover{border:solid 1px #0077c0;}
nav.nav-buttons ul li a.current_doc, nav.nav-buttons ul li.current a{color: #0077c0; border:solid 1px #0077c0;}
#contenu-min #head h2{color: #0077c0;}
.btn-small:hover, .btn2 span:hover{background-color: #0077c0;}
nav.user ul li a.selected{background: #0077c0;}
.ui-widget-content a:hover{color:#0077c0;}
.ui-tabs .ui-tabs-nav li a:hover{ background-color: #fff; color:#0077c0;}
.ui-tabs .ui-tabs-nav li.ui-state-active a{border-bottom:solid 4px #0077c0;}

@media screen and (max-width: 500px){
#tabs.ui-tabs .ui-tabs-nav li.ui-state-active a{border:solid 1px #0077c0; color: #0077c0;}
#tabs.ui-tabs .ui-tabs-nav li a{border:solid 1px #0077c0; color: #0077c0;}
}
#metrics-tabs nav button:hover,#metrics-tabs nav button.active{color: #0077c0; border:solid 1px #0077c0;}
.auth-box >h2{background-color: #0077c0;}
.article-authors .author[data-url]:hover{color:#0077c0; }


/* --color-main template1*/
#menu-mobile.mm-menu li a:hover, .mm-navbar a:hover, #menu-mobile.mm-menu li.parent:hover > span{background-color: #0077c0;}
#menu-mobile.mm-menu li.active a, #menu-mobile.mm-menu li.active span{border-left: 10px solid #0077c0;}
div#search button[type="submit"]:hover {background-color: #0077c0;}
nav.accueil .front-cover-links a{background-color: #0077c0;}
.most_dl_choice li a:hover{border:solid 1px #0077c0;}
.most_dl_choice li.active a{border:solid 1px #0077c0; color: #0077c0;}
.menu.hpside li a::before{color: #0077c0;}
header a:hover{color: #0077c0;}
#menu-mobile.mm-menu li a:hover, .mm-navbar a:hover, #menu-mobile.mm-menu li.parent:hover > span{background-color: #0077c0;}
div#search button[type="submit"]:hover {background-color: #0077c0;}


/* --color-link template*/
div#search button[type="submit"] {background-color: #0077c0;}
.most_dl_choice li a{border:solid 1px #0077c0;}

/* --color-link commun*/
a, .ui-widget-content a, span.link, a strong{color: #0077c0; }
#issues nav.years a, #issues nav.years a:hover{color: #0077c0; }
nav.article a, nav.article span.link, nav.article .nav-section.related .articles .title{color: #0077c0;}
nav.article .nav-section.files ul li a{border:solid 1px #0077c0;}
nav.nav-buttons a{border:solid 1px #0077c0;}
.btn-small, .btn2 span{background-color: #0077c0;}
.btn-big{background-color: #0077c0; }
ul.nav li a, nav.pres ul li a{ background-color: #0077c0;}
.ui-multiselect-header{background:#0077c0;}
#metrics-tabs nav button{border: solid 1px #0077c0; color: #0077c0;}
}




/* EDGE */
@supports (-ms-ime-align:auto) {

/* --color-main commun*/
a:hover, span.link:hover, a strong:hover, a:hover span.link{color: #0077c0;}
h1{border-bottom: solid 3px #0077c0;}
ul.simple li::before{color: #0077c0;}
.ico-big{background-color: #0077c0; }
.ico-search:hover{color: #0077c0;}
#toc .details h1, #topic .details h1{color: #0077c0;}
#issues nav.years a:hover{background-color: #0077c0;}
nav.article a:hover, nav.article .nav-section.related .articles .title:hover{color: #0077c0;}
nav.article .nav-section.files ul li a:hover{border:solid 1px #0077c0;}
nav.article .nav-section.files ul li a.current_doc{color: #0077c0; border:solid 1px #0077c0;}
nav.nav-buttons a:hover{border:solid 1px #0077c0;}
nav.nav-buttons ul li a.current_doc, nav.nav-buttons ul li.current a{color: #0077c0; border:solid 1px #0077c0;}
#contenu-min #head h2{color: #0077c0;}
.btn-small:hover, .btn2 span:hover{background-color: #0077c0;}
nav.user ul li a.selected{background: #0077c0;}
.ui-widget-content a:hover{color:#0077c0;}
.ui-tabs .ui-tabs-nav li a:hover{ background-color: #fff; color:#0077c0;}
.ui-tabs .ui-tabs-nav li.ui-state-active a{border-bottom:solid 4px #0077c0;}

@media screen and (max-width: 500px){
#tabs.ui-tabs .ui-tabs-nav li.ui-state-active a{border:solid 1px #0077c0; color: #0077c0;}
#tabs.ui-tabs .ui-tabs-nav li a{border:solid 1px #0077c0; color: #0077c0;}
}
#metrics-tabs nav button:hover,#metrics-tabs nav button.active{color: #0077c0; border:solid 1px #0077c0;}
.auth-box >h2{background-color: #0077c0;}
.article-authors .author[data-url]:hover{color:#0077c0; }


/* --color-main template1*/
#menu-mobile.mm-menu li a:hover, .mm-navbar a:hover, #menu-mobile.mm-menu li.parent:hover > span{background-color: #0077c0;}
#menu-mobile.mm-menu li.active a, #menu-mobile.mm-menu li.active span{border-left: 10px solid #0077c0;}
div#search button[type="submit"]:hover {background-color: #0077c0;}
nav.accueil .front-cover-links a{background-color: #0077c0;}
.most_dl_choice li a:hover{border:solid 1px #0077c0;}
.most_dl_choice li.active a{border:solid 1px #0077c0; color: #0077c0;}
.menu.hpside li a::before{color: #0077c0;}
header a:hover{color: #0077c0;}
#menu-mobile.mm-menu li a:hover, .mm-navbar a:hover, #menu-mobile.mm-menu li.parent:hover > span{background-color: #0077c0;}
div#search button[type="submit"]:hover {background-color: #0077c0;}


/* --color-link template*/
div#search button[type="submit"] {background-color: #0077c0;}
.most_dl_choice li a{border:solid 1px #0077c0;}

/* --color-link commun*/
a, .ui-widget-content a, span.link, a strong{color: #0077c0; }
#issues nav.years a, #issues nav.years a:hover{color: #0077c0; }
nav.article a, nav.article span.link, nav.article .nav-section.related .articles .title{color: #0077c0;}
nav.article .nav-section.files ul li a{border:solid 1px #0077c0;}
nav.nav-buttons a{border:solid 1px #0077c0;}
.btn-small, .btn2 span{background-color: #0077c0;}
.btn-big{background-color: #0077c0; }
ul.nav li a, nav.pres ul li a{ background-color: #0077c0;}
.ui-multiselect-header{background:#0077c0;}
#metrics-tabs nav button{border: solid 1px #0077c0; color: #0077c0;}
}