/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20 août 2014, 09:50:04
    Author     : Jonathan
*/

html
{
    margin: 0;
    height: 100%;
}

body
{
    margin: 0;
    background-color: black;
    height: 100%;
}

header
{
    width: 100%;
    height: 72px;
    background-image: url('images/top.jpg');
    border: 0;
    margin: 0;
}

#logo
{
    width: 173px;
    height: 68px;
    border: 0;
    display: inline-block;
}

#header_text
{
    text-align: center;
    display: inline-block;
    width: 50%;
}

#first_line_header
{
    font-family: "Arial";
    font-size: 24px;
    color: white;
}

marquee
{
    marquee-loop: alternate;
}

#second_line_header
{
    font-style: italic;
    font-family: "Arial";
    color: white;
    font-size: 16px;
}

nav
{
    background-color: black;
}

nav a
{
    font-family: "Verdana";
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    margin-left: 15px;
    margin-right: 15px;
}

.pipe
{
    color: red;
    font-weight: bold;
}

#left
{
    width: 173px;
    height: 90%;
    background-image: url('img/piano2.gif');
    display: inline-block;
}

#right
{
    width: 55%;
    height: 90%;
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
}

#main_block
{
    padding-left: 80px;
    padding-top: 80px;
}

#title img
{
    display: inline-block;
}

#title h1
{
    display: inline-block;
}

h1
{
    font-size: 24px;
    color: #ff7171;
    font-weight: normal;
}

#text p
{
    color: white;
    width: 575px;
}

#img_piano
{
    width: 550px;
    height: 90px;
}

.img_piano_1
{
    width: 450px;
    height: 90px;
}

#english a
{
    vertical-align: middle;
    display: inline-block;
    color: #ff7171;
}

#english img
{
    vertical-align: middle;
    display: inline-block;
}

#imgs img
{
    display: inline-block;
}

#img_piano_2
{
    height: 90px;
}

#img_poppy
{
    height: 90px;
}

h2
{
    color: #ff7171;
    font-family: "Arial";
    font-size: 16px;
}

li
{
    color: white;
}

.title_2 img
{
    display: inline-block;
    height: 42px;
}

.title_2 h2
{
    display: inline-block;
}

.logis_list
{
    width: 575px;
}

#list_infopratique
{
    margin-bottom: 30px;
    margin-top: 30px;
}

#list_infopratique img
{
    display: inline-block;
    height: 16px;
}

#list_infopratique a
{
    display: inline-block;
    color: white;
    font-size: 20px;
}

table
{
    width: 550px;
    margin-bottom: 30px;
    margin-top: 30px;
}

table tr td
{
    color: white;
}

table tr th
{
    color: white;
    text-align: left;
    padding-bottom: 5px;
}

p
{
    color: white;
    width: 575px;
}

#price
{
    text-align: right;
}

#return
{
    color: #ff7171;
}

#reservation
{
    margin-top: 50px;
}

h3
{
    margin-bottom: 15px;
    margin-top: 30px;
    color: white;
    font-size: 16px;
}

#access
{
    margin-top: 50px;
}

#address
{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ff7171;
}

#plan
{
    height: 416px;
    width: 373px;
}

ol li
{
    width: 575px;
}

#img_studio
{
    height: 90px;
}

.title_3
{
    margin-top: 50px;
}

.title_3 img
{
    display: inline-block;
    vertical-align: middle;
}

.title_3 h2
{
    display: inline-block;
    margin-left: 150px;
}

.color
{
    color: #ff7171;
}

#title_4
{
    color: #ff7171;
    text-decoration: underline;
    font-style: italic;
}

#img_yves
{
    height: 130px;
}

#contact_yves
{
    width: 575px;
}

#contact_yves img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#contact_yves h2
{
    text-align: center;
}

.regie_list th
{
    color: #ff7171;
}

.regie_list td
{
    width: 100px;
}

.regie_list td a
{
    color: white;
}

.author_name
{
    display: inline-block;
    text-align: center;
    width: 400px;
    vertical-align: middle;
}

.img_artistes
{
    display: inline-block;
    vertical-align: middle;
}

#img_artistes_yves
{
    height: 154px;
    width: 105px;
}

.references_link
{
    color: #ff7171;
}

#img_artistes_georges
{
    height: 120px;
    width: 120px;
}

.author_bloc
{
    margin-bottom: 50px;
}

#img_artistes_claude
{
    width: 121px;
    height: 146px;
}

#img_artistes_philippe
{
    width: 133px;
    height: 158px;
}

#img_artistes_herve
{
    width: 65px;
    height: 96px;
}

#img_artistes_sarah
{
    width: 66px;
    height: 97px;
}

#img_artistes_genevieve
{
    width: 99px;
    height: 127px;
}

.author_citation
{
    font-style: italic;
}

#img_artistes_michel
{
    width: 108px;
    height: 120px;
}

#img_artistes_matttieu
{
    width: 139px;
    height: 130px;
}

#img_artistes_philippe_gyan
{
    width: 127px;
    height: 167px;
}

#img_artistes_choeur_gospel
{
    width: 256px;
    height: 256px;
}

#s3slider {
    width: 450px; /* important to be same as image width */
    height: 338px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
 
#s3sliderContent {
    width: 450px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
}
 
.s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
}
 
.s3sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 374px;
    background-color: #000;
    filter: alpha(opacity=70); /* here you can set the opacity of box with text */
    -moz-opacity: 0.7; /* here you can set the opacity of box with text */
    -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
    opacity: 0.7; /* here you can set the opacity of box with text */
    color: #fff;
    display: none; /* important */
    bottom: 0; /*
        if you put top: 0;  -> the box with text will be shown
                                at the top of the image
        if you put bottom: 0;  -> the box with text will be shown
                                at the bottom of the image
    */
}
 
.clear {
    clear: both;
}

#s3slider ul{
    margin: 0;
    padding: 0;
}

#s3slider ul li{
    margin: 0;
    padding: 0;
}

.title_2 h2 a
{
    color: #ff7171;
}

#slider_cadre
{
    margin-left: 0;
    margin-right: 0;
}

footer
{
    text-align: center;
    bottom: 0;
    font-size: small;
    position: absolute;
}

#inherit_position
{
    position: initial;
}

footer p a
{
    color: white;
}