@charset "utf-8";
/* CSS Document */
    /* importing CSS */

@import url("reset.css");

/* Code Hexa & RGB for colors
    @colordef   #3d3c41;    Gris
    @colordef   #EE98B3;    Rose 
    
/*........................Font face.............................. */
    
@font-face {
    font-family: 'Rockwell';
    src: url('../font/Rockwell.eot');
    src: url('../font/Rockwell.eot?#iefix') format('embedded-opentype'),
         url('../font/Rockwell.woff') format('woff'),
         url('../font/Rockwell.ttf') format('truetype'),
         url('../font/Rockwell.svg#chopinscriptmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bernard';
    src: url('../font/bernhc-webfont.eot');
    src: url('../font/bernhc-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/bernhc-webfont.woff') format('woff'),
         url('../font/bernhc-webfont.ttf') format('truetype'),
         url('../font/bernhc-webfont.svg#chopinscriptmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Chopin';
    src: url('../font/chopinscript-webfont.eot');
    src: url('../font/chopinscript-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/chopinscript-webfont.woff') format('woff'),
         url('../font/chopinscript-webfont.ttf') format('truetype'),
         url('../font/chopinscript-webfont.svg#chopinscriptmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Forte';
    src: url('../font/FORTE.eot');
    src: url('../font/FORTE.eot?#iefix') format('embedded-opentype'), 
         url('../font/FORTE.woff') format('woff'),
         url('../font/FORTE.TTF') format('truetype');
}
/*........................Common.............................. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

header, section, nav, article, aside, footer {
    display: block;
}

html {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    height: 100%;
}
    
body {
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: #efefef;
    color: #555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    margin: 0;
    background-image: url(../img/Fond.jpg);
}

a {
    color: #fff;
}

a:hover{
    color: #EE98B3;
}

p {  
    word-wrap: break-word;
}

/*........................Global.............................. */
#container {
    margin: 0 auto;
    max-width: 960px;
    padding: 0px 25px;
    min-width: 900px;
}

#wrapper {
    clear: both;
    margin: 20px auto 20px auto;
    padding: 0 20px 20px 20px;
    position: relative;
}

/*........................Header.............................. */ 
.header-container{
    top: 0px;
    margin-top: 0;
    text-align: center;
    width: 100%;
}

header {
    background-color: #3d3c41;
    margin: 0;
}

header img  {
    height:auto;
    width:auto;
    margin: auto;
}

/* =Header Menu (Primary)-------------------------------------------------------------- */
.menu {
    background-image: url("../img/lauetdam-nav_02.png");
    background-repeat: repeat-x;
    margin-top: -36px;
    width: 100%;
}

nav{
    height: 44px;
    z-index: 9999;
    background-color: #3d3c41;
}

nav a, nav a:hover{
    color: transparent;
}

nav li{
    float: left;
    width: auto;
}

nav li a{
    display: block;
    text-align: center;
    color: transparent;
    height: 85px;
}

nav li:first-child a{
    background: url("../img/lauetdam-nav-annonce.png") left top no-repeat ;
}

nav li:nth-child(2) a{
    background: url("../img/lauetdam-nav-details.png") left top no-repeat ;
}

nav li:nth-child(3) a{
    background: url("../img/lauetdam-nav-wedding.png") left top no-repeat ;
}

nav li:nth-child(4) a{
    background: url("../img/lauetdam-nav-contact.png") left top no-repeat ;
}

nav li:nth-child(5) a{
    background: url("../img/lauetdam-nav-map.png") left top no-repeat ;
}

nav li:nth-child(6) a{
    background: url("../img/lauetdam-nav-giftshop.png") left top no-repeat ;
}

nav li:last-child a{
    background: url("../img/lauetdam-nav-photos.png") left top no-repeat ;
}

nav li:first-child a:hover, nav li:first-child a:focus, nav li:first-child a:active {
    background: url("../img/lauetdam-nav-annonce.png") right top no-repeat ;
}

nav li:nth-child(2) a:hover, nav li:nth-child(2) a:focus, nav li:nth-child(2) a:active {
    background: url("../img/lauetdam-nav-details.png") right top no-repeat ;
}

nav li:nth-child(3) a:hover, nav li:nth-child(3) a:focus, nav li:nth-child(3) a:active {
    background: url("../img/lauetdam-nav-wedding.png") right top no-repeat ;
}

nav li:nth-child(4) a:hover, nav li:nth-child(4) a:focus, nav li:nth-child(4) a:active {
    background: url("../img/lauetdam-nav-contact.png") right top no-repeat ;
}

nav li:nth-child(5) a:hover, nav li:nth-child(5) a:focus, nav li:nth-child(5) a:active {
    background: url("../img/lauetdam-nav-map.png") right top no-repeat ;
}

nav li:nth-child(6) a:hover, nav li:nth-child(6) a:focus, nav li:nth-child(6) a:active {
    background: url("../img/lauetdam-nav-giftshop.png") right top no-repeat ;
}

nav li:last-child a:hover, nav li:last-child a:focus, nav li:last-child a:active {
    background: url("../img/lauetdam-nav-photos.png") right top no-repeat ;
}

nav li:first-child{
    width: 181px;
}

nav li:nth-child(2){
    width: 115px;
}

nav li:nth-child(3){
    width: 204px;
}

nav li:nth-child(4){
    width: 123px;
}

nav li:nth-child(5){
    width: 83px;
}

nav li:nth-child(6){
    width: 131px;
}

nav li:last-child{
    width: 163px;
}
.menu .container{
    width: 1000px;
}
/* Slideshow --------------------------------------------------------------------------- */

.rs-slideshow {
    border: 12px solid #444;
    height: 240px;
    margin: 24px auto;
    overflow: hidden;
    position: relative;
    width: 620px;
}
 
.rs-slideshow .slide-container {
    background-color: #444;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
 
/*    Hide the slide data container    */
.rs-slideshow .slides {
    display: none;
}

/* Commentaires sur slideshow
.slide-container .slide-caption {
    background-color: #000;
    bottom: 0;
    color: #fff;
    display: block;
    left: 0;
    padding: 6px 12px;
    position: absolute;
    text-align: center;
    right: 0;
    filter: alpha(opacity=70);
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
}*/

/* --------------------- annonce -------------------------------------------*/
.date{
    background-image: url(../img/LauetDam_annonce_12.png);
    background-repeat: no-repeat;
    width: 560px;
    height: 95px;
    margin: 0 auto;
    padding-top: 13px;
}

.souligne{
    color: #ffffff;
    font-family: Bernard, Arial, sans-serif;
    text-decoration:underline;
    font-size: 1.3em;
    margin-left: -6px;
}

.BernBlack{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 2.4em;
    text-align: left;
    padding: 13px 0 0 77px;
    margin-top: -3px;
}

.rose, .demande, .married{
    color: #EE98B3;
    text-shadow:
#414042 1px 1px 1px,
#414042 1px 1px 1px,
#414042 1px 1px 1px,
#414042 1px 1px 1px; 
}
/*couleur de l'ombre, décalage de l'ombre vers la droite, décalage de l'ombre vers le bas , définis le nombre de pixels sur lequel va être appliqué le dégradé*/

.demande, .married{
    font-family: Rockwell, Arial, sans-serif;
    font-size: 1.8em;
}

.yes{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 5em;
}

.married{
    font-size: 2.6em;
}

.date2{
    background-image: url(../img/LauetDam_annonce_16.png);
    background-repeat: no-repeat;
    width: 560px;
    height: 105px;
    margin: 0 auto;
    text-align: center;
}

.date2 p{
    text-align: center;
    font-size: 4.2em;
    padding: 29px 0 0 0;
    text-shadow:
        #ffffff -3px -3px 3px,
        #ffffff -3px -3px 3px,
        #ffffff -3px -3px 3px,
        #ffffff -3px -3px 3px;
}

.souligne2{
    color: #ffffff;
    font-family: Bernard, Arial, sans-serif;
    text-decoration:underline;
    font-size: 1.3em;
    margin: -43px auto 0 auto;
}

.lieu{
    font-family: Chopin, sans-serif;
    font-size: 4em;
    color: #414042;
    text-shadow:
        #EE98B3 1px 1px 1px,
        #EE98B3 1px 1px 1px,
        #EE98B3 1px 1px 1px,
        #EE98B3 1px 1px 1px;
    margin-top: 52px;
}
/* --------------------- Détails -------------------------------------------*/

.marie{
    background-image: url(../img/marie-mariee_02.png);
    background-repeat: no-repeat;
    height: 72px;
}

.moi, .lau {
    color: #FAC9D3;
    font-family: Bernard, Arial, sans-serif;
    font-size: 1.6em;
    padding-top: 19px;
}
.lau{
    color: #414042;
}

.nom{
    color: #EE98B3;
    text-shadow:
#414042 1px 1px 1px,
#414042 1px 1px 1px,
#414042 1px 1px 1px,
#414042 1px 1px 1px; 
    font-family: Rockwell, Arial, sans-serif;
    font-size: 2em;
    line-height: 35px;
}

.fils{
    font-family: Chopin, Arial, sans-serif;
    font-size: 1.6em;
    color: #414042;
    text-shadow:none;
}

.lauetdam{
    text-align: inherit;
}

.tem1{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 1.8em;
    text-shadow:
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px; 
}

#tooltip {
   position:absolute;
   visibility:hidden;
}

.tem2{
    color: #EE98B3;
    font-family: Chopin, Arial, sans-serif;
    font-size: 1.8em;
    line-height: 40px;
    text-align: center;
}

/* --------------------- Wedding -------------------------------------------*/
.fanion img{
    height: 105px;
}

.fanion p{
    color: #ffffff;
    font-family: Forte, Arial, sans-serif;
    font-size: 3em;
    text-shadow:
#414042 3px 3px 3px,
#414042 3px 3px 3px,
#414042 3px 3px 3px,
#414042 3px 3px 3px; 
    margin-top: -81px;
    z-index: 99999;
}

.hauteur80{
    line-height: 80px;
}

.jourj{
    font-family: Chopin, Arial, sans-serif;
    font-size: 3em;
    color: #414042;
    text-shadow:none;
}

.heures{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 3em;
    text-shadow:
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px,
#EE98B3 1px 1px 1px; 
}

.separation{
    border-right: 3px solid #414042;
}

/* --------------------- Contact -------------------------------------------*/
#contact .nom{
    margin-top: 20px;
}

#contact2{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 1.4em;
}

input, textarea{
    background: #EE98B3;
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 1em;
}

/* --------------------- Map -------------------------------------------*/

.map {
    border: 10px solid #414042;
    margin: 10px auto;
}

small a{
    color: #414042;
    font-family: Bernard, Arial, sans-serif;
    font-size: 1em;
}

.lien{
    color: #414042;
}

/* --------------------- Footer -------------------------------------------*/
.bottom26{
    margin-bottom: 26px;
}

.center {
    text-align: center;
}

.footer-container{
    bottom: 0;
    height: 30px;
    margin-top: 30px;
    text-align: center;
    width: 100%;
    background-color: #414042;
    position: fixed;
    font-family: Forte, Arial, sans-serif;
    font-size: 1em;
}