html, body {
	height:100%;
}
body {
	background-color: #5f9bd7;
	background: url(img/islandGood.jpg) 80% 30px no-repeat fixed, url(img/boat.jpg) 95% 80% no-repeat fixed, url(img/upBg.jpg) 0 30px repeat-x fixed, url(img/bg.jpg) fixed, #5f9bd7;
	margin: 0;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
	color: #4F90D3;
}
body, img, div, table, td, tr, th, h1, ul, li, h1, h2, h3, p {
	margin:0;
	padding:0;
	border:none;
}
a, a:visited { color:#38b4b5; }
a:hover, a:visited:hover { color:#a8b538; }
p { margin: 15px 20px; }
em { color: #aa8b77; }
mark {
	padding: 0px 5px 1px 5px;
	border-radius: 5px;
	font-variant: small-caps;
	background-color: #69a8e8;
	color: #e5eef8;
}
blockquote {
	margin: 10px 30px;
	padding: 5px 20px;
	background-color: #ECE1D2;
	border: 2px solid #F6F1EB;
	box-shadow: 1px 2px 2px #E0D1BF;
	border-radius: 10px;
}

/* Structure */

#WrapJolBarre {
	position: fixed;
	width: 100%;
	box-shadow: 0px 0px 2px #000;
}
#site {
    margin: 0px auto 30px;
	max-width: 1000px;
}
#header {
    width: 100%;
	height: 270px;
}
#corps {
    background-color: rgba(255,255,255,0.3);
	box-shadow: 223px 0px 0px rgba(255, 255, 255, 0.1) inset, 2px 2px 2px #2d72b8;
}
#headerBar {
	width: 100%;
	min-height: 40px;
	padding: 4px 0 5px 0;
	border-radius: 10px 10px 0 0;
	background-color: #D2E2F3;
	background-color: rgba(210, 226, 243, 0.9);
	border-top: 2px solid #EFF3FB;
	border-bottom: 1px solid #EFF3FB;
	box-shadow: inset 0px -12px 10px #EFF4FB, 3px 0px 3px #2d72b8;
	text-align: center;
	overflow: hidden;
	
	font-variant: small-caps;
	font-family: "Arial";
}

#headerBar a, #headerBar span {
	display: inline-block;
	margin: 0 2px;
	padding: 9px 10px;
	font-size : 19px;
	font-weight: bold;
	text-decoration: none;
	color: #689fd7;
	text-shadow: 1px 1px 1px #fcfcfb;
}
#headerBar a:hover, #headerBar span {
	color: #a8b538;
}


/* Zone du menu */

#menu {
	display: inline-block;
	width: 190px;
	min-height: 300px;
	margin : 30px 0 8px 30px;
	font-family: "Arial";
	font-size: 16px;
}
.menuBlock {
	width: 100%;
	min-height: 10px;
	margin-bottom: 29px;
	padding: 10px 0;
	background-color: #d2e2f3;
	border-top: 1px solid #eff4fb;
	border-radius: 2px;
	box-shadow: inset 0px 12px 10px #b7d1ed, inset 0px -12px 10px #eff4fb, 0px 1px 1px #4f90d3;
}
.menuTitle {
	width: 170px;
	min-height: 20px;
	margin-top: 0;
	margin-bottom: 6px;
	background-color: #d2e2f3;
	border-top: 1px solid #eff4fb;
	border-bottom: 1px solid #4f90d3;
	border-radius: 2px;
	box-shadow: inset 0px -12px 10px #eff4fb, 0px 0px 1px #4f90d3;
	overflow: hidden;
	
	text-shadow: 1px 1px 1px #f5f1ec;
	font-size : 19px; 
	font-family: "Arial";
	font-variant: small-caps;
	padding: 5px 10px 5px 10px;
	color: #689fd7;
	font-weight: bold;
	text-align: center;
}
#menu ul {
    list-style:none;
	margin: 0px;
	padding: 0px;
}
#menu ul li {
    margin: 0 0 10px 20px;
}
#menu h2 {
   	font-variant: small-caps;
	margin: 15px 0px 10px 0px;
	padding: 5px 20px;
	background-color: #B9D2ED;
	border-top: 1px solid #8cb6e1;
	border-bottom: 1px solid #ECF3FA;
	color: #689fd7;
	font-size: 17px;
	font-weight: normal;
}
#menu ul li.lien_1 {  margin-left:0px; }
#menu ul li.lien_2 {
	margin-left: 30px;
	border-left: 1px solid #80D0D1;
	padding-left: 10px;
}
#menu #contenu_pub { padding-bottom: 0; }
#menu #contenu_pub #bandeauPub {
	margin: -11px 0 0 18px;
	padding: 4px 15px 8px 15px;
	width: 121px;
	border: 1px solid #eff4fb;
	background-color: #cedff1;
	box-shadow: inset 2px 2px 5px #b5cfea, inset 0px -6px 17px #b5cfea;
}



/* Zone des articles */
#articles {
	display: inline-block;
	vertical-align: top;
	margin : 30px 30px 30px;
	width: 100%;
	max-width: 710px;
	min-height: 100px;
	color: #7e4d2d;
}
.actu { color: #7E4D2D; }
.actu, .littleBlock, .actu .bottom {
	display: inline-block;
	vertical-align: top;
	margin: 0 0 29px 0;
	max-width: 700px;
	width: 100%;
}
.littleBlock, .actu .bottom {
	border: 5px solid #E3EDF8;
	background-color: #D2E2F3;
	border-right-color: #ECF2FA;
	box-shadow: inset -30px 0 40px #E7EFF9, inset 1px 0 5px #BAD3EE, 0px 1px 1px #4f90d3;
    color: #4F90D3;
}
.littleBlock { text-align: center; }
.actu .bottom { margin: 5px 0 0 0; }
.jol_actus_tags { padding: 0 5px; }

.actu .top {
	margin: -5px -122px 0px -10px;
	float: left;
}
.actu .top img {
    margin:0;
}
.actu .contenu {
	width: 100%;
	min-height: 50px;
	background-color: #EFE6DB;
	border: 5px solid #fbf8f4;
	border-right-color: #fdfcfa;
	border-radius: 2px;
	box-shadow: inset -30px 0 40px #f9f4ee, inset 1px 0 5px #ddc4a4, 0px 1px 1px #4f90d3;
	overflow: hidden;
}
.actu .contenu h1, .actu .contenu h2, .actu .contenu h3, .actu .contenu h4, .actu .contenu h5, .actu .contenu h6 {
	margin: 8px 8px 20px 8px;
	background-color: #f9f4ec;
	box-shadow: inset -10px 0 20px #F5EEE6, 0px 1px 2px #CBB89B;
	padding: 5px 10px;
	color: #a8b538;
	text-shadow: 1px 1px 1px #f5f1ec;
	font-weight: normal;
	font-family: "Arial";
	text-align: center;
}

.actu .contenu h1 { font-size : 19px; min-height: 23px; }
.actu .contenu h2 { font-size : 17px; }
.actu .contenu h3 { font-size : 16px; }
.actu .contenu h4 { font-size : 15px; }
.actu .contenu h5 { font-size : 14px; }
.actu .contenu h6 { font-size : 13px; }
.actu .contenu .texte h1, .actu .contenu .texte h2, .actu .contenu .texte h3, .actu .contenu .texte h4, .actu .contenu .texte h5, .actu .contenu .texte h6 { margin: 8px 0px 20px 0px; }

.actu .contenu h1 a, .actu .contenu h2 a, .actu .contenu h3 a, .actu .contenu h4 a, .actu .contenu h5 a, .actu .contenu h6 a {
	text-decoration: none;
	color: #a8b538;
	text-shadow: 1px 1px 0px #F9F4EC, -1px -1px 0px #F9F4EC, 1px -1px 0px #F9F4EC, -1px 1px 0px #F9F4EC, 1px 1px 1px #fff;
}
.actu .contenu h1:hover a, .actu .contenu h2:hover a, .actu .contenu h3:hover a, .actu .contenu h4:hover a, .actu .contenu h5:hover a, .actu .contenu h6:hover a {
	text-decoration: none;
	color: #38b4b5;
}

.actu .contenu .texte {
	margin-bottom: 30px;
	padding: 0 30px;
}
.actu .contenu .texte p {
	margin: 15px 0px;
}
.actu .contenu .texte .imgCenter {
	text-align: center;
}
.actu .contenu .texte img {
	border: 1px solid #F6F1EB;
	box-shadow: 1px 2px 2px #E0D1BF;
	border-radius: 2px;
}
.actu .contenu .texte .imgNoCadre {
	border: none;
	box-shadow: none;
	border-radius: 0px;
}
.actu .contenu .texte .imgLegend {
	display: inline-block;
	margin-top: 2px;
	border-radius: 2px;
	padding: 0px 20px 1px;
	background-color: #ECE1D2;
	border: 1px solid #F6F1EB;
	box-shadow: 1px 2px 2px #E0D1BF;
	color: #AA8B77;
	font-style: italic;
	text-align: center;
}

.actu .contenu .lireSuite_freshnews {
    text-align: center;
	margin: -10px 0 20px 0px;
	padding: 2px 20px 3px;
	font-variant: small-caps;
	background-color: #E6D6C5;
	border: 1px solid #F6F1EB;
	border-left-width: 0px;
	border-right-width: 0px;
	box-shadow: 0px 4px 4px #e0d1bf;
}
.actu .contenu .lireSuite_freshnews a {
	color: #B38663;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 1px #fff;
}
.actu .contenu .lireSuite_freshnews:hover { background-color: #e0ebf7; }
.actu .contenu .lireSuite_freshnews a:hover { color: #38b4b5; }
.actu .contenu .lireSuite_freshnews:hover a { color: #38b4b5; }
.actu .contenu .accroche {
	font-style: italic;
	padding: 0 20px;
}
.actu .contenu .accrocheUp {
	font-style: italic;
	color: #8c6952;
	padding: 0 20px 10px 20px;
	margin: 0 -30px 25px -30px;
	border-bottom: 4px solid #FDFCFA;
	box-shadow: 0px 12px 15px #EDDFCE;
}
.actu .contenu .texte .accroche p { margin: 15px 0px; }
.actu .contenu .texte .accrocheUp p { margin: 15px 0px; }
.actu .contenu .moreInfos {
	margin: 0;
	padding: 11px 18px 12px 18px;
	background-color: #ece1d2;
	border-top: 1px solid #f6f1eb;
	box-shadow: 3px 0px 1px #e3ceb4 inset;
	color: #AA8B77;
}
.actu .contenu .auteur {
	height: 32px;
	padding: 15px;
	border-top: 1px solid #FDFCFA;
	background-color: #ede6de;
	color: #a89f95;
	overflow: hidden;
}
.actu .contenu .auteur .auteurLeft {
	float: left;
	margin: -15px 15px 0 -15px;
	width: 468px;
	height: 32px;
	padding: 15px;
	border-right: 1px solid #FDFCFA;
	background-color: #f2ede7;
	color: #aa8b77;
	border-radius: 0 7px 7px 0;
	box-shadow: 4px 0px 10px #e7ddd7;
}
.actu .contenu .auteur .auteurLeft a, .actu .contenu .accroche a { color: #aa8165; }
.actu .contenu .auteur .auteurLeft a:hover, .actu .contenu .accroche a:hover { color: #a8b538; }
.actu .contenu .auteur a { color: #a89f95; }
.actu .contenu .auteur a:hover { color: #a8b538; }
.actu .contenu .source-article ul, ul.jol_article_sources {
    list-style:none;
	margin: 0px;
	padding: 0px;
}
.actu .contenu .texte ul li {
    margin-left:60px;
	margin-bottom:10px;
}
ul.jol_article_sources {
	display: inline;
}
ul.jol_article_sources li {
	display: inline;
	margin: 0px 4px;
}



/* Footer */
#footer {
	min-height: 50px;
	background-color: #D2E2F3;
	border-top: 1px solid #EFF3FB;
	border-bottom: 2px solid #EFF3FB;
	box-shadow: inset 0px 43px 0px #dce9f6, inset 0px 44px 0px #EFF4FB, inset 0px -12px 10px #EFF4FB, 3px 3px 3px #2d72b8;
	border-radius: 0 0 10px 10px;
 
    margin:auto;
	padding: 5px;
	color: #689fd7;
	text-align: center;
	font-family: "Arial";
}
#footer p { margin-bottom: 1px; font-variant: small-caps; }




/* Autres */
div.jol_actus_reagir {
	background-color: #dce9f6;
	border-style: ridge;
	border-width: 1px;
	border-color: #679fd7;
}
div.jol_actus_tags {
    display:inline;
}
div.jol_actus_tags ul.jol_actus_tags_liste {
    list-style-type:    none;
    margin:				0;
    padding:            0;
    display:inline;
}
div.jol_actus_tags li.jol_actus_tags_tag {
    display:            inline;
    padding-right:      5px;
	margin-left:		0px;
}
div.jol_actus_tags li.jol_actus_tags_tag:after {
    content:    ',';
}
div.jol_actus_tags li.jol_actus_tags_tag_dernier:after {
    content:    '';
}
/* Pages - Container */
div.jol_actus_pages {
    color:  #d5e5f4;
	background-color: #9ac3eb;
	box-shadow: inset 0 0px 1px #8fb9e3;
    margin: 10px 0;
	text-align:center;
}

/* Pages - Liste des pages */
div.jol_actus_pages ul.jol_actus_pages_liste {
    margin:     0;
    padding:    0;
}

/* Pages - Page */
div.jol_actus_pages li.jol_actus_page {
    list-style-type:    none;
    display:            inline;
    padding-bottom:     1px;
    margin-right:       7px;
}

/* Pages - Séparateur */
div.jol_actus_pages li.jol_actus_page_separateur { }

/* Pages - Lien vers une page */
div.jol_actus_pages a.jol_actus_page_lien {
	background-color:	#b7d2ed;
	color:              #5796d5;
    padding:            2px 5px;
    text-decoration:    none;
}

/* Pages - Lien vers une page (survolé ou actif) */
div.jol_actus_pages a.jol_actus_page_lien:hover,
div.jol_actus_pages a.jol_actus_page_lien:active {
    background-color: #e7f1fa;
    color: #81b6e8;
    cursor: pointer;
}

/* Pages - Lien vers la page courante */
div.jol_actus_pages a.jol_actus_page_lien_actif,
div.jol_actus_pages a.jol_actus_page_lien_actif:hover {
    background-color:   #5982a8;
    color:              #d2d7db;
    cursor:             default;
}

/* Pages - Lien vers la page précédente ou suivante */
div.jol_actus_pages a.jol_actus_page_lien_suivprec {
	background-color:	#E4CBCF;
	color:              #5C75AE;
    padding:            2px 5px;
    text-decoration:    none;
}
div.jol_actus_pages a.jol_actus_page_lien_suivprec:hover {
    background-color:   #F0E0E3;
    color:              #5C75AE;
    font-weight:        bold;
    cursor:             default;
}

/* Pages - Liens désactivés */
div.jol_actus_pages a.jol_actus_page_lien_desactive,
div.jol_actus_pages a.jol_actus_page_lien_desactive:hover {
    color:              #5796d5;
    cursor:             default;
    font-weight:        normal;
}


/* Smartphones */
@media screen and (max-width: 1000px) {
	#body { background: url(island.jpg) 80% 0 no-repeat, url(upBg.jpg) repeat-x, url(bg.jpg), #5f9bd7; }
	#site { overflow: hidden; }
	#corps { padding-top: 18px; background-color: #93BBE4; }
	#headerBar { padding: 2px 0px; border-bottom: 2px solid #5F9AD7; }
	#headerBar a, #headerBar span { margin: 2px 0px; }
	#menu, #menu h2, #articles { max-width: 100%; width: 100%; margin : auto; text-align: center; }
	#menu { border-top: 1px dashed #5F9AD7; border-bottom: 1px dashed #5F9AD7; margin-bottom: 30px; padding-top: 18px; }
	.menuTitle, .menuBlock, .littleBlock, .articleBlock, .bottom { width: 100%; margin : 0 0 20px 0; text-align: left; }
	.actu { max-width: 100%; border-left-width: 0; border-right-width: 0; }
	.actu .bottom { max-width: 1000px; }
	.actu .contenu .auteur { height: 100%; overflow: auto; }
	.actu .contenu .auteur .auteurLeft { float: none; width: 99%; margin: -15px 0px 15px -15px; }
}
@media handheld {
	
}