/* styles css severn la voix de nos enfants // anybodesign.com */

/*
/*
/*
/* fonts ******************* */

@font-face {
	font-family: 'swiss';
	src: url('../severn_fonts/swiss-cond-webfont.eot');
	src: local('☺'), url('../severn_fonts/swiss-cond-webfont.woff') format('woff'), url('../severn_fonts/swiss-cond-webfont.ttf') format('truetype'), url('../severn_fonts/swiss-cond-webfont.svg#webfont0FzIgiyN') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* 
/*
/* global ******************* */

* {
padding: 0; margin: 0; border: 0;
font-family: swiss, helvetica, geneva, arial, sans-serif;
color: #fff;
}

html {
width: 100%; height: 100%;
font-size: 100%;
}

body {
width: 100%; height: 100%;
font-size: 1em;
background-color: #fff;
}

#global {
position: relative;
width: 100%;
min-height: 100%;
}

#fondpage {
position: absolute; 
width: 100%; height: 100%;
min-width: 960px;
top: 0; left: 0;
background: transparent url(../severn_imports/fondpage-severn.jpg) 50% 0 no-repeat;
z-index: 1;
}

#fondpage-home {
position: absolute; 
width: 100%; height: 100%;
min-width: 960px;
top: 0; left: 0;
background: transparent url(../severn_imports/fondpage-home.jpg) 50% 0 no-repeat;
z-index: 1;
}

#conteneur {
position: relative;
width: 960px;
margin: 0 auto;
background-color: transparent;
z-index: 15;
}

a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

hr {
visibility: hidden;
width: 1px; height: 1px;
clear: both;
}

.shadow {
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,0.4);
-o-box-shadow: 0 1px 6px rgba(0,0,0,0.4);
box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.floatl {float: left;padding: 0 10px 10px 0;}

/*
/*
/* header ********************* */

#header {
position: relative;
height: 175px; width: 960px;
margin: 0 auto;
}

#header h1, #header h2, #header h3 {display: none;}

a.bt-home {
display: block;
height: 175px; width: 300px;
margin: 0 auto;
background-color: transparent;
}
a.bt-home span {display: none;}

#sortie {
position: absolute;
top: 60px; right: 80px;
}
#sortie h4 {
text-align: center;
text-transform: uppercase;
color: #c00;
font-size: 1.4em;
}

#festival {
position: absolute;
width: 320px; height: 100px;
top: 30px; left: 10px;
background: transparent url(../severn_imports/festival.png) 0 0 no-repeat;
}
#festival span {
display: none;
}

/*
/*
/* menu ********************* */


#menu {
position: relative;
width: 960px; height: 80px;
margin: 0 auto;
}

#nav {
position: absolute;
list-style-type: none;
width: 880px; 
margin: 0 auto;
margin-left: 40px;
z-index: 100;
}

#nav li {
float: left;
font-size: 1.3em;
text-align: center;
text-transform: uppercase;
}

#nav li#film {width: 180px;padding-bottom: 5px;}
#nav li#proj {width: 180px;padding-bottom: 5px;}
#nav li#loin {width: 280px;padding-bottom: 5px;}
#nav li#presse {width: 240px;padding-bottom: 5px;}

#nav li:hover {
color: #333;
cursor: pointer;
}

#nav li a {
display: block;
padding: 5px;
text-decoration: none;
background-color: #fff;
}

#nav li a:hover {
color: #333;
}

.ssmenu, .ssmenu-large {
position: relative;
margin: 0 auto;
padding-top: 5px;
list-style: none;
display: none;
}

#nav .ssmenu li {
width: 180px;
font-size: 0.65em;
text-transform: none;
}

#nav .ssmenu-large li {
width: 260px;
font-size: 0.7em;
text-transform: none;
}

.vert {color: #95c61e;}
.bleu {color: #09c;}
.orange {color: #ec7f3e;}
.violet {color: #b36fc1;}

#nav li#film.active {color: #95c61e;background: transparent url(../severn_imports/border-film.png) 50% bottom no-repeat;}
#nav li#proj.active {color: #09c;background: transparent url(../severn_imports/border-proj.png) 50% bottom no-repeat;}
#nav li#loin.active {color: #ec7f3e;background: transparent url(../severn_imports/border-loin.png) 50% bottom no-repeat;}
#nav li#presse.active {color: #b36fc1;background: transparent url(../severn_imports/border-presse.png) 50% bottom no-repeat;}


/* rubriques contenus ******************* */

#rubriques {
list-style-type: none;
padding-bottom: 60px; padding-right: 10px;
border-right: #666 1px solid;
}

#rubriques li {
text-align: right;
padding: 4px 0;
}

#rubriques li a {
font-size: 0.9em;
color: #666;
text-decoration: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

#rubriques.vert li a:hover, #rubriques.vert li a.active {color: #95c61e;}
#rubriques.bleu li a:hover, #rubriques.bleu li a.active {color: #09c;}
#rubriques.orange li a:hover, #rubriques.orange li a.active {color: #ec7f3e;}
#rubriques.violet li a:hover, #rubriques.violet li a.active  {color: #b36fc1;}


/* 
/*
/* contenus ******************* */


#conteneur {
z-index: 50;
}

#col-gauche {
float: left;
width: 170px;
margin-right: 30px;
}

#col-centre {
float: left;
width: 470px;
margin-right: 30px;
}

#col-centre h1, #col-large h1 {
font-size: 1.8em;
margin-bottom: 5px;
font-weight: normal;
text-transform: uppercase;
}

#col-centre h2, #col-large h2 {
font-size: 1.2em;
line-height: 1.1em;
font-weight: normal;
margin-bottom: 15px;
}

#col-centre h3, #col-large h3 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 10px 0 5px 0;
color: #666;
clear: both;
}

#col-centre h3 img, #col-large h3 img {
margin-left: 8px;
}

#col-centre p, #col-large p {
font-size: 0.9em;
line-height: 1.3em;
color: #333;
text-align: left;
margin-bottom: 15px;
}

#col-centre em, #col-large em {
color: #369;
}
#col-centre strong,#col-large strong {
color: #555;
}
#col-centre a, #col-large a {
color: #369;
text-decoration: underline;
}
#col-centre a:hover, #col-large a:hover {
text-decoration: none;
}

#tabs-container ul li a {text-decoration:none;}

#col-droite {
float: left;
width: 235px;
}

#col-droite img {
margin-bottom: 15px;
-webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-moz-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-o-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

#col-large {
float: left;
width: 700px;
}

#menu-interv {height: 40px;}

#menu-interv ul {list-style-type: none;}

#menu-interv ul li {
float: left;
margin-right: 5px;
}

#menu-interv ul li a:hover, #menu-interv ul li a.inter-on {opacity: 0.6;}


/*
/*
/* galeries photos / intervenants ************* */


a.photo {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

a.photo img {
width: 120px; height: 80px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

a.photo:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0.5;
}

#col-large div.bloc-partner {clear:both; margin-bottom: 30px;}

#col-large #les-intervenants {
margin-top: 15px;
}

#col-large div.intervenant {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}

#col-large a.portrait {
display: block;
width: 120px; height: 80px;
color: #fff;
text-decoration: none;
}
#col-large a.portrait:hover {color: #fff;}

#col-large a.portrait img {
position: absolute;
height: 80px; width: auto;
}

#col-large a.portrait div.overlay {
display: none;
}

#col-large a.portrait:hover div.overlay {
position: absolute;
display: block;
width: 126px; height: 80px;
background-color: rgba(0, 0, 0, 0.5);
}

#col-large div.overlay p {
position: absolute;
bottom: 2px; left: 5px;
margin: 0;
padding-right: 10px;
font-size: 1.4em;
line-height: 0.9em;
color: #fff;
}

#formu {margin-top: 10px;}
#formu label {color: #666; vertical-align: middle;}
#formu input {
padding: 4px; 
border: 1px solid #ccc; 
color: #666; 
font-size: 1em; 
width: 40px;
vertical-align: middle;
font-family: helvetica, arial, sans-serif;
}
#formu input.valide {
vertical-align: middle;
font-size: 0.9em; 
background-color: transparent;
color: #666;
border: 0;
cursor: pointer;
}

#tableau {
margin-top: 15px;
}

#tableau table td {
padding: 10px;
font-size: 0.8em;
line-height: 1.2em;
color: #666;
}

#tableau table td {border-bottom: #09c 1px solid;}

#tableau table tr.fondbleu td {
background-color: #09c;
text-transform: uppercase;
color: #fff;
}

/* 
/*
/* footer ******************* */


#rocher {
position: relative; 
width: 100%; height: 250px;
min-width: 960px;
background: transparent url(../severn_imports/footer-rocher.jpg) 50% 0 no-repeat;
z-index: 1;
}

#footer {
position: relative;
width: 960px;
margin: 0 auto;
padding: 15px 0;
z-index: 200;
}

#footer p {
font-size: 0.8em;
color: #333;
text-align: center;
}

#footer p a {
color: #000;
text-decoration: underline;
}

#footer p a:hover {
color: #09c;
}

#footer p a.twitter, #footer p a.facebook {
margin-left: 5px; margin-top: 5px;
}
#footer a span {display: none;}

#logos {
margin-bottom: 15px;
}

#footer a, #logos a img {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

#logos a:hover img {
opacity: 0.5;
}


/*
/*
/* home page **************** */

#col-home {
float: left;
width: 960px; height: 610px;
}

#col-home #quote {
width: 370px;
margin-left: 80px;
margin-bottom: 20px;
}
#col-home #quote p {
color: #333;
font-size: 1.2em;
line-height: 1.4em;
font-weight: normal;
}

#col-home #quote span.blue {
color: #369;
}

#col-home h2 {
color: #09c;
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 5px;
}

#DVD {
position: absolute; top: 365px; right: 0;
}

#BA, #DVD {
width: 186px; padding: 10px;
margin-left: 80px;
margin-bottom: 35px;
background-color: #fff;
-webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-moz-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-o-box-shadow: 0 2px 12px rgba(0,0,0,0.4);
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

#BA a img, #DVD a img {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#BA a:hover img, #DVD a:hover img {opacity: 0.8;}

#news {
width: 250px;
margin-left: 80px;
}

#news input {
padding: 5px;
color: #333;
margin: 6px 0;
font-size: 0.9em;
}

#news input.valide {
vertical-align: middle;
font-size: 1em; 
background-color: transparent;
color: #fff;
cursor: pointer;
}

#news a.twitter, #news a.facebook  {
display: block;
width: 21px; height: 21px;
float: left; margin-right: 5px;
}

#news a.twitter {background: transparent url(../severn_imports/bt-twitter.png) 0 0 no-repeat;}
#news a.twitter:hover {background: transparent url(../severn_imports/bt-twitter.png) -21px 0 no-repeat;}

#news a.facebook {background: transparent url(../severn_imports/bt-facebook.png) 0 0 no-repeat;}
#news a.facebook:hover {background: transparent url(../severn_imports/bt-facebook.png) -21px 0 no-repeat;}

#news span {display: none;}


/* 
/*
/* pré-home ******************* */

#intro {
position: relative;
width: 880px; 
margin: 20px auto;
text-align: center;
}

#intro p {
margin: 20px auto;
}

#intro p a.skip {
text-transform: uppercase;
text-decoration: none;
font-size: 1.2em;
color: #09c;
}

#intro p a.skip:hover {color: #000;}

#critique {
position: relative;
width: 480px; 
margin: 20px auto;
text-align: center;
}

#critique p {
padding: 13px;
color: #333;
font-size: 1.2em;
line-height: 1.2em;
background: transparent url(../severn_imports/critique.png) 0 0 no-repeat;
}
#critique p.sign {
padding: 0;
font-size: 1.4em;
font-weight: bold;
color: #09c;
background-image: none;
}