@charset "UTF-8";
@font-face {
    font-family: 'dinbold';
    src: url('../font/dinbold-webfont.eot');
    src: url('../font/dinbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/dinbold-webfont.woff') format('woff'),
         url('../font/dinbold-webfont.ttf') format('truetype'),
         url('../font/dinbold-webfont.svg#dinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dinreg';
    src: url('../font/din-regular-webfont.eot');
    src: url('../font/din-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/din-regular-webfont.woff') format('woff'),
         url('../font/din-regular-webfont.ttf') format('truetype'),
         url('../font/din-regular-webfont.svg#dinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    background-color:#436076;
    background: -moz-linear-gradient(top,#A3C5D6 0%,#436076 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#A3C5D6),color-stop(100%,#436076)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,#A3C5D6 0%,#436076 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,#A3C5D6 0%,#436076 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,#A3C5D6 0%,#436076 100%); /* IE10+ */
    background: linear-gradient(#A3C5D6 0%,#436076 100%); /* W3C */    
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A3C5D6', endColorstr='#436076',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-attachment: fixed;
}

/* CSS Document */

body {
    margin:0px;
    padding:0px;
    font-family: dinbold, arial, sans-serif;
    font-size:16px;
}

.fond_ecran {
    position:absolute;
    top:0px;
    overflow:hidden;
    overflow-x:hidden;
    padding:0px;
    margin:0px;
    width:100%;
    z-index:0;
}

.fond_ecran .wide_background {
    display:block;
    width:2515px;
    height:420px;
    position:relative;
    left:50%;
    margin:0px 0px 0px -1257px;
}

.fond_ecran .darkblue_background {
    display:block;
    width:2515px;
    height:50px;
    position:relative;
    left:50%;
    margin:0px 0px 0px -1257px;
}

.container {
    width:1000px;
    padding:0px;
    margin:0px 0px 0px -500px;
    position:absolute;
    left:50%;
    top:0px;
    z-index:10;
}

/* ***************************************************************** FIL ARIANE */

.fil_ariane {
    margin:20px 0px 0px 0px;
    padding:0px;
}

.fil_ariane a {
    text-decoration:none;
    color:#A3C5D6;
    font-size:14px;
    font-style:italic;
    
}

/* *********************************************************************** HAUT */
.haut {
    height:240px;
}

.logo {
    position:relative;
    top:12px;
    left:0px;
    display:block;
    height:150px;
    width:200px;
}

.menu_haut {
    position:relative;
    top:25px;
    left:262px;
    width:739px;
    z-index:20;
}

.mh_li_bateau {width:104px;}
.mh_li_port {width:85px;}
.mh_li_agenda {width:86px;}
.mh_li_journal {width:113px;}
.mh_li_asso {width:133px;}
.mh_li_naviguer {width:157px;}

.mh_li_ul_bateau {position:relative;top:0px;right:96px;width:200px;}
.mh_li_ul_port {position:relative;top:0px;right:115px;width:200px;}
.mh_li_ul_agenda {position:relative;top:0px;right:114px;width:200px;}
.mh_li_ul_journal {position:relative;top:0px;right:87px;width:200px;}
.mh_li_ul_asso {position:relative;top:0px;right:67px;width:200px;}
.mh_li_ul_naviguer {position:relative;top:0px;right:96px;width:200px;}

.mh_li a {
    text-decoration:none;
    color:#000000;
    display:block;
    font-size:16px;
    margin:0px;
    padding:10px;
}
.mh_li > span {
    text-align: center;
}
.mh_ul span {
    color:#000000;
    display:block;
    font-size:16px;
    margin:0px;
    padding:10px;
}
.mh_ul {
    margin:0px;
    padding:0px
}
.mh_li {
    float:left;
    list-style-type:none;
    height:37px;
    background-color:#FFFFFF;
    margin:0px 0px 0px 10px;
    padding:0px;
}
.mh_li_ul {
    visibility:hidden;
    background-color:#FFFFFF;
    margin:0px;
    padding:0px;
}
.mh_li_ul a {
    font-size:16px;
}
.mh_li:hover .mh_li_ul {
    visibility:visible;
}
.mh_li_ul li {
    list-style-type:none;
    margin:0px 0px 0px 0px;
    padding:0px;
    text-align:right;
}
.menu_haut a:hover {
    color:#0f3f53;
}

.fb_icon{
	
	position:absolute;
	right:0px;
	top:130px;
}
.fb_icon img{
	width:40px;
	height:40px;
}

/* ********************************************************************* MILIEU */

.milieu {
    width:960px;
    margin:0px 0px 30px 0px;
    padding:20px;
    background-color:#FFFFFF;
}

.corps {
    width:100%;
    margin:20px 0px 20px 0px;
    padding:0px;
}

.diaporama {
    width:960px;
    margin:0px;
    padding:0px;
    
}
.diaporama img {margin:0px;padding:0px;}

.diaporama_msg{
	z-index:18;
	position:absolute;
	top:170px;
	left:50px;	
    text-decoration:none;
    color:#FFFFFF;
    font-size:28px;
    font-weight:normal;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	width:800px;
}

.corps_accueil {
    width:100%;
    height:580px;
    margin:20px 0px 20px 0px;
    padding:0px;
    overflow:hidden;
}

.corps_accueil a {
    text-decoration:none;
    color:#FFFFFF;
    font-size:34px;
    font-weight:normal;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.corps_accueil a:hover img {
    filter: alpha(opacity=50)
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    opacity:0.5;
}

.corps_accueil .agenda {
    position:relative; margin:0px; padding:0px;
    width:313px; height:280px;
    top:0px;
    left:0px;
    overflow:hidden;
}
.corps_accueil .agenda span {
    position:relative; margin:0px; padding:0px;
    top:-260px;
    left:30px;
}

.corps_accueil .journaldebord {
    position:relative; margin:0px; padding:0px;
    width:627px; height:280px;
    top:-280px;
    left:333px;
    overflow:hidden;
	text-align:justify;
}
.corps_accueil .journaldebord span {
    position:relative; margin:0px; padding:0px;
    top:-260px;
    left:30px;
}

.corps_accueil .bateau {
    position:relative; margin:0px; padding:0px;
    width:470px; height:280px;
    top:-260px;
    left:0px;
    overflow:hidden;
}
.corps_accueil .bateau span {
    position:relative; margin:0px; padding:0px;
    top:-260px;
    left:30px;
}

.corps_accueil .association {
    position:relative; margin:0px; padding:0px;
    width:225px; height:280px;
    top:-540px;
    left:490px;
    overflow:hidden;
}
.corps_accueil .association span {
    position:relative; margin:0px; padding:0px;
    top:-260px;
    left:30px;
}

.corps_accueil .boutique {
    position:relative; margin:0px; padding:0px;
    width:225px; height:280px;
    top:-820px;
    left:735px;
    overflow:hidden;
}
.corps_accueil .boutique span {
    position:relative; margin:0px; padding:0px;
    top:-260px;
    left:30px;
}


/* ************************************************************************ BAS */

.bas {
    width:960px;
    margin:0px 0px 50px 0px;
    padding:20px;
    background-color:#FFFFFF;
}

.menu_bas {
    width:960px;
    margin:0px;
    padding:0px;
    text-align:center;
}

.menu_bas a {
    display:inline-block;
    text-decoration:none;
    color:#000000;
    margin:0px 10px 0px 10px;
    padding:0px;
}

.menu_bas a:hover {
    color:#0f3f53;
}

/* ********************************************************************** OTHER */

/* for message */

.affiche_msg {
    width:100%;
    text-align:center;
	padding:0px 0px 35px 0px;
}

.affiche_msg p {
    margin:30px 0px 30px 0px;
}

.affiche_msg img {
    max-width:100px;
}

/* for number page */

.jeu_affiche_page {
    width:960px;
    text-align:right;
    margin:10px 0px 10px 0px;
    padding:0px;
}

.jeu_affiche_page a {
    display:inline-block;
    background-color:#0f3f53;
    color:#FFFFFF;
    margin:2px;
    padding:3px;
    min-width:22px;
    text-align:center;
    vertical-align:middle;
    text-decoration:none;
}
.jeu_affiche_page a:hover {
    color:#A1A1A1;
}

.title2 {
    color:#0f3f53;
    font-size:20px;
    text-transform:uppercase;	
}

.rouge{
	color:red;	
}
.center{
	text-align:center;
}