/* custom fonts */
@font-face {
	font-family: 'eurof55-webfont';
	src: url('.fonts/eurof55-webfont.eot');
	src: local('?'), url('fonts/eurof55-webfont.woff') format('woff'), url('fonts/eurof55-webfont.ttf') format('truetype'), url('fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'eurof35-webfont';
	src: url('fonts/eurof35-webfont.eot');
	src: local('?'), url('fonts/eurof35-webfont.woff') format('woff'), url('fonts/eurof35-webfont.ttf') format('truetype'), url('fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'graublauweb-webfont';
	src: url('fonts/graublauweb-webfont.eot');
	src: local('?'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}


html, body{ height: 100%; }

body {
  font-family: graublauweb-webfont,Helvetica,Arial,sans-serif;
	background: #222222;
	font-size: 18px;
	color: #DDDDDD;
	padding: 0;
	margin: 0;
}

a {
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}
a:hover { text-decoration: none; color: #cd9126; }

a img { border: none; }

p { margin: 15px 0; }

.cleaner { clear: both; font-size: 0px; float: none; }

h1 {
  font-family: eurof55-webfont,Helvetica,Arial,sans-serif;
  font-size: 30px; 
  color: #EEEEEE;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

ul, li, form {margin:0;padding:0;}


/* BG */
#container {
 margin-top: -40px;
  height: 100%;
}

#contenu  { height: 100%; margin: 0 auto; width: 70%; padding: 15px 25px 6px 25px; }
#contenuh { height:  90%; margin: 0 auto; width: 1000px; padding: 0px; }
/*#serie { height: 95%; } */

/***** HEADER *****/
#fake_header {
  background-color: #202024;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}
#header {
  color: #B5B5B5;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 auto;
  width: 1000px;
}
#header a { color: #FFFFFF; }


#fake_bg { position:fixed; top:0; bottom:0; left:0; right:0; }
#fake_bg img { width:100%; height:100%; }


ul#menu { position: relative; z-index: 200; height: 40px; }
ul#menu.active, ul#menu.active li ul { background-color: #202024; height: unset; overflow: unset;}
ul#menu li { float: left; line-height: 40px; height: 40px; list-style-type: none; position: relative; }
ul#menu li.langue { float: right; }
ul#menu li a { padding: 0px 25px; }
ul#menu li a.fancypop { padding: 0px; }
ul#menu li a:hover { text-decoration: none; }

ul#menu li:not(#phonemenu):hover, ul#menu li.menu_item_selected { background-color: #FFFFFF; }
ul#menu li:hover a, ul#menu li.menu_item_selected a { color: #cd9126; }

ul#menu li ul {
    background-color: #FFFFFF;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    min-width: 183px;
    position: absolute;
    top: -999em;
}
ul#menu li ul li {
  float: none;
}
ul#menu li ul li.li_line {
  height: 1px;
  margin: 0 15px;
}
#header ul#menu li ul li a {
  color: #787878;
  white-space: nowrap;
  /*display: block;*/
  padding: 0 15px;
  line-height: 46px;
}
#header ul#menu li ul li a.fancypop { padding: 0px; }
ul#menu li ul li a span {
    color: #cd9126;
}
ul#menu li ul li:hover { background-color: #EBEBEB; }
#header ul#menu li ul li a:hover, #header ul#menu a.fancypop:hover { color: #cd9126; }
ul#menu li:hover ul, ul#menu li.sfHover ul { top: 40px; }
#phonemenu { display: none; }




/* HOME */
.items { text-align: center; height: 100%; }
.item { position: relative; width: 24%; float: left; margin: 0.7% 1% 0 0; border-bottom-width: 1px; border-bottom-color: rgba(255, 255, 255, 0.3); border-bottom-style: solid;	height: 50%; cursor: pointer; }
.bigitem { width: 49%; } 
.catpic { background-color: #202024; display: block; position: absolute; width: 100%; height: 100%; overflow: hidden; }
.catpic img { position: absolute; left: 0; top: -20px; max-width: 100%; min-height: 100%; }
.catinfo { background-color: #202024; display: block; padding: 4px 0; font-size: 20px; text-transform: uppercase; position: absolute; width: 100%; bottom: 0; }
.item span { display: none; font-size: 14px; text-transform: none; }
.hseqedit { bottom: 7px; position: absolute; right: 7px; }

.item:hover { border-bottom-color: #cd9126; }
.item:hover * { color: #cd9126; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); }



/* SERIES */
#bg { position: fixed; left: 285px; height: calc(100% - 40px); text-align: center; width: calc(100% - 285px); }
#bg a, #bg form.formadd { position: absolute; overflow: hidden; }
#bg form.formadd { background-color: #2f2f2f; text-align: left; border-radius: 20px 0; }
#bg form.formadd div { background-color: #cd9126; text-align: center; color: #2f2f2f; margin: 0 -10px; border-top-left-radius: 20px; }
#bg img { width:100%; height:100%; }
.seriebg { height: 100%; }
.serieimg {  bottom: 0; left: 0; position: absolute; right: 0; top: 0; } 
.laserie { height: 90%; top: 5%; left: 10%; position: relative; width: 80%; color: #cd9126; }
/*#bg .laserie img { width:100%; height:100%; }*/
#bg .laserietierce img { max-width:100%; max-height:100%; width:unset; height:unset; }
.laserie input, .laserie button { border: 1px solid #cd9126; color: #cd9126; background-color: #FFFFFF; }
.laserie button { cursor: pointer; }
.quartet a { max-width: 25%; }

#outer_container { position:fixed; height:100%; width:285px; z-index:2; top: 40px; bottom: 0; background:rgba(0, 0, 0, 0) url("img/sw_bg.png") repeat scroll 0 0; }
#customScrollBox { height:88%; }
#customScrollBox .cleaner { height: 50px; }

#customScrollBox h1 { padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:30px; }
#customScrollBox h2 { padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px; }
#customScrollBox p { padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px; }
* a.strike0 { text-decoration: line-through; }

.bgpicker { position: absolute; right: 20px; top: 10px; background-color: #FFFFFF; border: 1px solid #000; padding: 10px; color: #000000; text-align: left; border-radius: 20px 0; min-width: 135px; }
.bgpicker i { cursor: pointer; }
.bgpicker i:hover { color: #cd9126; }
#bg .bgpicker img { border: 2px solid #000000; height: 40px; width: 60px; cursor: pointer; margin-top: 2px; }
.bgpicker img.selected { border-color: #00FF00; }
.bgpicker img.active, .bgpicker img:hover { border-color: #cd9126; }
.bgpicker .lebgfa { cursor: pointer; }
.bgpicker .lesbgs, .bgpicker .lesbgs { height: 400px; overflow: auto; }
.bgpicker .lesbgs, .bgpicker .lesbgs i { display: none; cursor: pointer; }
.bgpicker .lesbgs i.fa-trash { display: inline-block; }
.bgpicker .lesbgs button { border: 1px solid #cd9126; color: #cd9126; background-color: #FFFFFF; cursor: pointer; }
.bgpicker .lesbgs i.fa-upload { display: inline-block; }
.bgpicker .lesbgs .filebg { max-width: 60px; }




/***** FOOTER *****/
#footer { margin: 0; padding: 22px 28px 27px 28px; background-color: #EFECE6; font-size: 12px; }
#footer div.links, #footer div.text { float:left; width: 192px; padding-right: 90px; }
#footer div.text { border: none; width: 321px; padding-right: 0px; }
#f_links { display: none; padding: 0px 25px 10px 25px; color: #FFFFFF; position: absolute; bottom: 0; z-index: 999; background-color: #060604; width: 200px; }
#f_links, #f_links a { color: #cd9126; font-size: 10px; text-transform: uppercase; }
#f_links div.credits { }
#f_links div.social_network { float: right; }
#f_links div.social_network a { background: transparent url(img/facebook.jpg) no-repeat 0 0; float: left; height: 29px; width: 29px; display: block; margin-left: 3px; text-indent: -9999px; }
#f_links div.social_network a#sn_twitter { background-image: url(img/twitter.jpg); }
#f_links div.social_network a#sn_in { background-image: url(img/in.jpg); }
#f_links div.social_network a#sn_google { background-image: url(img/google.jpg); }
#f_links div.social_network a:hover { background-position: left bottom; }




/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 2px;
	width: 16px;
	height: 100%;
	/*background: red;*/
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 18px;
	/*background: red;*/
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	/*background: #dde;*/
	position: relative;
}

.jspDrag
{
	/*background: #bbd;*/
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	color: #FFF;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
  
  /*display: inline-block;*/
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jspArrowLeft:before {
  content: "\f0a8";
}
.jspArrowRight:before {
  content: "\f0a9";
}
.jspArrowUp:before {
  content: "\f0aa";
}
.jspArrowDown:before {
  content: "\f0ab";
}

.jspArrow.jspDisabled
{
	cursor: default;
	/*background: #80808d;*/
  opacity:0 ;
}

.jspVerticalBar .jspArrow
{
	height: 17px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}




@media screen and (max-width: 980px) {
  #header {
    width: 100%;
    font-size: 52px;
    height: 200px;
    line-height: 62px;
  }
  #container.homepage #header {
    height: 80px;
  }
  #fake_header {
    height: 200px;
  }
  #fake_header.homepage {
    height: 80px;
  }
  #container {
    margin-top: -200px;
  }
  #container.homepage {
    margin-top: -80px;
  }
  ul#menu {
    overflow: hidden;
    height: 70px;
  }
  ul#menu li {
    float: none;
    height: unset;
    line-height: 70px;
  }
  ul#menu li a {
    display: block;
  }
  ul#menu.active li ul {
    position: unset;
    top: unset;
    position: unset;
  }
  #header ul#menu li ul li a {
    color: #fff;
    line-height: unset;
    padding: 0 15px 0 50px;
  }
  #phonemenu {
    color: #fff;
    cursor: pointer;
    display: block;
    margin-left: 15px;
  }
  #phonemenu .fa-chevron-up {
    color: #cd9126;
  }
  a.serielink {
    font-size: 0px;
  }
  p a.serielink img {
    height: 120px !important;
  }
  #outer_container {
    height: 200px;
    position: absolute;
    top: 0;
    width: 100%;
  }
  #outer_container h1 {
    display: none;
  }
  #outer_container h1 br {
    display: none;
  }
  #outer_container p {
    float: left;
    margin: 65px 10px 0;
  }
  #customScrollBox {
    width: 99%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  #customScrollBox .cleaner {
    height: 0;
  }
  #bg {
    height: calc(100% - 200px);
    left: 0;
    padding-top: 30px;
    width: 100%;
    position: relative;
  }
  .laserie {
    height: 98%;
    left: 2%;
    top: 1%;
    width: 96%;
  }
  .laserie a {
    height: unset !important;
    left: unset !important;
    top: unset !important;
    width: unset !important;
    position: relative !important;
    padding-bottom: 30px;
    display: block;
  }
  #f_links {
    position: relative;
    width: 98%;
    padding: 1%;
  }
  #f_links, #f_links a {
    font-size: 21px;
  }
  
  #contenuh {
    height: 100%;
    width: unset;
  }
  #contenuh ~ #f_links{
    display: none;
  }
  .item {
    float: unset;
    margin: 7px;
    overflow: hidden;
    width: unset;
  }
  .catinfo {
    font-size: 42px;
  }
  .catpic img {
    width: 100%;
  }
  .quartet a {
    max-width: unset;
  }
}