@import url("softTabs.css");

body {
    position: relative;
    margin: 0;
    background-color: #444; color: #FFF;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size:.8em;
    /*-webkit-text-stroke: .2px;*/ /* cf http://stackoverflow.com/questions/11487427/font-smoothing/11489353 */
}

b, strong, th {
    font-weight: 600;
}


div {margin: 0; padding: 0;}
ul {margin: 0; padding: 0; list-style-type: none;}
img {-ms-interpolation-mode: bicubic;}

input {
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}


a:link, a:visited {
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

h1 {
    color: #FFF4D9;
    margin: 0;
    font-size: 28px; font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -.025em;
}

#type-film h1 {
    color: #FFF4D9; color: #CCA466;
}

#type-corpus h1 {
    color: #99F;
}


h2 {
    font-size: 1.25em; font-weight: 600;
    margin:1em 0 2em 0; padding: 0;
}

h3 {
    font-size: 1em; font-weight: 600;
    margin:2em 0 1em 0; padding: 0;
}

.full-width {width:960px; margin:0 auto;}

.sprite {
  background-image: url("images/sprite.png"); background-repeat: no-repeat;
  display: block; overflow: hidden;
  text-indent: -10000px;
}

#logocf {
    display: block; position: absolute; outline: none;
    top: 12px; left: 0;
    width: 74px; height: 48px;
    background-position: 0 0;
    text-indent: -10000px;
}

#logocf:hover {
    background-position: -74px 0;
}


#langfr, #langen {
  position: absolute; top: 2px; width: 28px; height: 28px;
}

#langfr {
  right:28px;
  background-position: -242px 0;
}

#langfr:hover {
  background-position: -242px -28px;
}

#langen {
  right:0px;
  background-position: -270px 0;
}

#langen:hover {
  background-position: -270px -28px;
}

.search-box {
  position: absolute; right: 0; top: 6px; /* top: 12px; */width: 220px;
  background-color:#FFF;
  border: solid 1px #AAA; border-width: 1px 0 0 1px;
  border: solid 1px #222; padding: 1px;
}

.search-box-input {
  float: left;
  width: 196px; height: 18px;
  margin: 0 4px 0 0; border: 0; padding: 2px 0;
  color: #000; font-size: .85em; font-family: Verdana, sans-serif;
}

.search-box-input.dummy {
    color: #999;
}

.search-box-submit {
    width:14px; height:14px; margin-top: 4px; border:0;
}

#maintitle {
    width: 100%; height: 200px;
    background-color: #AAA;
    background-color: #6c6c80;
}


#maintitlei {
  position: relative; 
}

#title {
    display: block; position: absolute; outline: none;
    left: 90px; top: 12px;
    width: 221px; height: 98px;
    background-image: url("images/titre3.png");
    background-position: 0 0;
    text-indent: -1000px;
}


#title:hover {
    opacity:.75;
}

#wrapper {
    margin-top: -78px;
}

#content {
    float: left; position: relative;
    width: 960px;
}

#content p {
  margin-top: 0;
  line-height:1.65em;
}

#content-top {
    overflow: hidden; clear: both;
    border-bottom: solid 5px #FFF4D9;
    padding: 10px 10px 0 10px;
    min-height: 128px;
    background-color: #444; color: #EEE;
    background-image: url("images/bg1.png"); background-position: 0 0; background-repeat: no-repeat;
}

#content-top a {
    color: #EEE;
}

#type-film #content-top {
    border-color: #CCA566;
}

#type-corpus #content-top {
    border-color: #99F;
}

#content-bottom {
    min-height: 600px;
    padding: 24px;
    background-color: #EEE; color: #444;
}

/*
#social-container {
    text-align: right; height: 20px;
}

.social {
    display: inline-block; position: relative;
    width: 105px; margin-right: 8px;
}

.social > .fb_iframe_widget, .social > .twitter-share-button {
    vertical-align: bottom;
}
*/

#social-container {
    position: relative; height: 24px;
}

.social {
    display:inline-block; float: right; height: 24px; margin-left: 4px;
}




#footer {
    clear: both;
    margin: 8px auto 36px auto; padding-top: 6px; padding-left: 1em; 
    color: #CCC;
    font-size: 1em;
}

#footer a {
    color: #FFF;
}

ul#tabs {
    overflow: hidden;
    list-style-type: none;
    margin: 0; border-bottom: solid 1px #999; padding: 0 0 1px 0;
    width: 100%;
    background-color: #EEE;
}

ul#tabs > li {
    float: left;
    background-color: #CCC;
    margin: 4px 0 0 1px; border: solid 1px #999; border-bottom: 0; padding: 0;
    cursor: pointer;
}

ul#tabs a {
    display: block; float: left;
    width: 120px; height: 18px; line-height: 18px;
    padding: 4px; outline: 0;
    font-weight: normal; text-align: center; text-decoration: none;
    color: #444;
}

ul#tabs a:hover {
    color: #F33;
}


ul#tabs a.current {
    color: #333; background-color: #EEE;
    cursor: default;
    font-weight: 600;
}


div.panes {
    clear: both;
}

div.panes > div {
    margin: 48px 20px 20px 20px;
}


/*
.loader {
  display:block; position: absolute;
  background-image:url("images/loader32x32.png"); background-position: center center; background-repeat: no-repeat;
}
*/


.dummy-video {
  width:300px; height:225px;
  background-color:#222; color:#FFF;
  line-height:225px; text-align:center;
}
.dummy-video:after {content:"Click to play video";}


#carrousel-win {
    position: relative; float: left; overflow: hidden;
    width: 533px; height: 400px;
}

ul#carrousel {
    display: block; overflow: hidden;
    height: 400px;
}

ul#carrousel > li {
    display: block; float: left; overflow: hidden; 
    width: 533px; padding-right: 10px;
}

ul#carrousel > li > img {
    display: block;
}

ul#carrousel-tabs {
    display: none;
}

#carrousel-ctrl-container {
    position: absolute;
    width: 533px; height: 400px; top: 0; left: 0;
    
}

.carrousel-ctrl.prev {
    position: absolute;
    top: 185px; left:10px;
    width: 30px; height: 30px;
    background-position: -361px 0;
}

.carrousel-ctrl.prev:hover {
    background-position: -391px 0; cursor: pointer;
}

.carrousel-ctrl.prev:active {
    background-position: -421px 0; cursor: pointer;
}

.carrousel-ctrl.prev.disabled {
    /*background-position: -451px 0; cursor: default;*/
    visibility: hidden;
}

.carrousel-ctrl.next {
    position: absolute;
    top: 185px; right:10px;
    width: 30px; height: 30px;
    background-position: -361px -30px;
}

.carrousel-ctrl.next:hover {
    background-position: -391px -30px; cursor: pointer;
}

.carrousel-ctrl.next:active {
    background-position: -421px -30px; cursor: pointer;
}

.carrousel-ctrl.next.disabled {
    /*background-position: -451px -30px; cursor: default;*/
    visibility: hidden;
}

/*
.carrousel-ctrl.caption {
    position: absolute;
    bottom:0; left:0;
    width:100%; height: 48px; padding: 2px;
    line-height: 48px; text-indent: 1em;
    color: #222; background-color: #FFF; opacity: .9;
    font-size: .75em; font-family: Verdana; 
}
*/

.carrousel-ctrl.fullscreen {
    position: absolute;
    top: 10px; right:10px;
    width: 30px; height: 30px;
    background-position: -361px -60px;
}

.carrousel-ctrl.fullscreen:hover {
    background-position: -391px -60px; cursor: pointer;
}

.carrousel-ctrl.fullscreen:active {
    background-position: -421px -60px; cursor: pointer;
}

/* Homepage Tiles */
#tiles-win {
    width: 940px; height: 282px;
    margin-bottom: 10px;
}

.tile {
    display: block; float: left; outline: none;
    width: 188px; height: 282px;
    background-position: center center;
    box-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.4) inset;
}





/* Nav (navigation entre les corpus) avec SoftTabs (TODO : clarification entre LI/A + propriétés display) */
div#nav-container {
    position: relative; display: block; overflow: hidden; float: right;
    padding: 0; width: 387px; height: 400px;
    font-size: .9em;
}

#index {
    padding: 24px 48px; margin: 0;
    background-color: #DDD; color: #333;
    font-size: .75em;
}

#index a {
    color: #333;
}

#index > ul {
    -moz-column-count: 4; -moz-column-gap: 1em;
    -webkit-column-count: 4; -webkit-column-gap: 1em;
}


.section {
    padding: 1em 0;
}

.section p {
    margin:.5em 0;
}

.section.texte {
    padding: 0 25% 0 0; text-align: justify;
}

.section.texte ul {
    list-style-type: disc; list-style-position:inside; margin: 2em 0 2em 2em;
}

.section.texte ul > li {
    margin: 1em 0;
}


/*.texte a {
    color: #000;
    text-decoration: underline;
}*/

.texte hr {
    clear:both;
    margin: 24px 0;
    width: 25%;
    border: none; border-top: dotted 1px #666;
}


/* Corpus : liste des films (et Index : liste de corpus) */

ul#corpus-films {
    overflow: hidden;
}

ul#corpus-films > li {
    float: left;
    width:50%;
    margin:8px 0;
    padding-top: 8px;
    border-top: solid 1px #CCC;
} 

ul#corpus-films > li.highlight {
    color: #000;
}

a.corpus-film-thumb {
    display: block; float:left; overflow: hidden;
    width: 133px; height: 100px;
    margin-right: 8px; margin-bottom: 48px;
    background-color: #CCC;
    /*box-shadow: 2px 2px 4px #666;*/
} 

ul#corpus-films div {
    padding-right: 12px;    
}


/* A REVOIR : LIENS VERS LES CORPUS / FILMS (sur les pages INDEX / CORPUS) */ 
/*
a.corpus-film-title {
    color: #222;
    outline: none;
    font-size:1em; font-weight: 600; text-transform: uppercase;
}

a.corpus-film-title:hover, a.corpus-film-title:active {
    text-decoration: underline;
}

a.corpus-film-title.red:hover, a.corpus-film-title.red:active {
    color: #E33;
}

a.corpus-film-title.purple2:hover, a.corpus-film-title.purple2:active {
    color: #66F;
}
*/
a.corpus-film-title {
    color: #222;
    font-size: 1em; font-weight: 600;
    text-transform: uppercase; /*text-decoration: underline;*/
}

a.corpus-film-title.purple2 {
    color: #99F; color: #7A7ACC;
}

a.corpus-film-title.red {
    color: #CCA466; color: #B38F59; color: #997A4C;
}




#admin {
    display:block; position: fixed;
    top: 0; left: 0; height: 18px; line-height: 18px;
    padding: 4px 24px 24px 4px; 
    font-size: .75em;
    color: #EEE;
}

#admin > a {
    display:block; /*float: left;*/
    padding: 0 2px; margin:0 2px 1px 0; outline: none;
    background-color: #888; color: #EEE; text-decoration: none;
}

#admin > a:hover {
    background-color: #69F;
}


table {
    width: 100%;
}

th {
    border: solid 1px #CCC; border-collapse: collapse;
}

td {
    border: solid 1px #CCC; border-collapse: collapse; padding: 0 2px;
    text-align: center;
}

.w10 {width: 10%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w40 {width: 40%;}

ul.ressources > li {
    list-style-type: square;
    margin: 4px 0 0 96px;
}

ul.ressources p {
    margin-top: 0; margin-bottom: 0;
}


#page-title {
    clear: both; position: relative; display: block;
    padding-top: 12px;
}

#film-corpus {
    position: absolute; right: 0; bottom: 0;
}

a.lugtag {
    display: inline-block; outline: none;
    margin:0 4px .25em 0; padding: 2px 6px 2px 2px;
    min-width: 60px;
    border-radius: 2px;
    color: #333 !important;
    text-align: center; text-decoration: none;
    font-weight: 600; font-size:.9em;
}

a.lugtag:hover {
    background-color: #FFF;
}

a.lugtag:before { content: "\2022\a0";}

.purple {
    color: #333;
    background-color: #99F;
    box-shadow: 1px 1px 2px #333;
}


.log {
    margin: 12px; border: solid 2px red; padding: 8px;
}
.log > h1 {
    color: red !important; font-weight: bold; font-size: 2em;
}

.accroche {
    background-color: #DDD;
    margin: 0 0 24px 0; border: 1px solid #CCC; padding: 12px 12px 36px 12px;
    border-radius: 4px 4px 4px 4px;
}

.accroche2 {
    margin: 36px 0;
}



.x1 {
    color: #333333;
    font-size: 1.2em;
    font-weight: normal;
    margin: 24px;
}

.x2:after { content: none !important; }
.x2 > a { font-style: italic; }


.epigraphe {
    width: 90%;
    margin: 48px 0;
    text-align: left;
}

.nav-current-film {
    font-weight: 600;
}



em > em {font-style: normal;}


/* Overlay (mode plein écran) */
#overlay {
    position: fixed; display: none; overflow: hidden;
    top: 0; left: 0;
    background-color: #444; color: #FFF;
}

#overlay > .overlay-close {
    position: fixed; z-index: 1000;
    top: 4px; right: 4px; width: 48px; height: 48px;
    font-size: 28px; text-align: center; line-height: 32px;
    cursor: pointer;
    background-position: -481px 0px;
}

#overlay > .overlay-close:hover {
    background-position: -529px 0px;
}

#overlay > .overlay-close:active {
    background-position: -577px 0px;
}


#overlay > .overlay-view {
    z-index: 999;
}

#overlay > .overlay-caption {
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 28px;
    color: #CCC;
    line-height: 28px; padding-bottom: 8px;
    text-align: center;
}



/* Ajouts pour page Index (22/11/12) */
/*
#type-index #title {
    display: none;
}

#type-index #wrapper {
    margin-top: -166px;
}

#type-index #content-top {
    margin-bottom: 10px;
}

#tiles-win-title {
    position: absolute;
    width: 940px; height: 400px;
    background-image: url("images/titre940x400.png");
}
*/