/*---colors
Fond du site PC (autour de la page): bgc du body: #67c5d0

Pages:
fond: #edfbfd
Color: #1f5462
liens: 0097b2

Trigram: #1f5462

Top:
bgc: #c6fffd
Color: #1f5462

Bot:
bgc: #c6fffd
Color: #1f5462

Menu
bgc: #57acb3
color:fffff

flex : 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/

/* Body & Content */
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}

body {margin:0;background-color: #67c5d0;font-size:13px;font-family: arial, Helvetica, sans-serif;margin-left:auto !important;margin-right:auto !important;max-width:815px}
#sp_body div, #sp_body p, header div{color : #1f5462}

#sp_content {
	display: flex;
	flex-direction: column;
	background-color:#67c5d0;
	min-height:100%
}

/* Header */
header{background-color:#c6fffd;
	display:flex
}
header .ruban {
	height:inherit;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex:1;  /* Extend to max. Otherwise : width:100% + remove width in logo */
}
header .site {width:100%}
header .menu-toggle {width:3em;}
header .menu2 ul {line-height:normal}
header .headerText1{font-family:arial;font-size:1.9em;font-weight:bold}
header .headerText2{font-family:arial;font-size:1.4em;font-weight:normal}		


/* Content/body */
#sp_body {width:100%;display: flex;flex-wrap: nowrap;flex:1 auto}

nav {
	width:0;  
	text-align:left;
	padding:0 1em;
	margin:0;
	font-size:0.9em;
	display:flex;
	flex:1;		/* Extend to max */
	
/*	border-right: 1px solid #A0A0A0;	 */
}

nav *{line-height:normal;
	background-color:#67c5d0;

}

#sp_main {
	background-color:#edfbfd;
	padding:0.2em 14px;
}
#sp_body aside{display:none}

/* Footer and trailer */
footer {background-color:#edfbfd}

footer.trailer{height:55px}
footer > div {margin:auto}

.art-content{padding:0;margin:0}

.marginTop{margin-top:1em}
.marginTopIndex{margin-top:2em}


/* menu */
/* trigram: use ≡ instead of &#9776 which does not work under android chrome or this : */
.trigram {
    content: "";
    /*position: absolute;*/
    left: 0;
   display: block; 
   float:right;
    width: 25px; /* 1oct23 : 35 */
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 1px 10px 0px 1px #1f5462,1px 20px 0px 1px #1f5462,1px 30px 0px 1px #1f5462;
	/* margin:30px 15px; */
}

label {
  display:block;
  z-index:3000;
/*  position:absolute; */
  top:0;
  right:0;
  width:100%;  
  line-height:50px;
  padding:0;
  cursor: pointer;
  font-size: 1.5em;
  transition: all .15s ease;
  border-radius: 6px;
  font-size:60px !important;
  color:#white !important;   
}

label:hover {
  color: #ff7b29;
}

/* Scroll to top button */
.fa-arrow-up:before{content:'\00005E'}
.scrollup {
	width: 32px;
	height: 32px;
	line-height:38px;
	position: fixed;
	bottom : 100px;
	right:0;
	display: none;
	color: #000;
	font-size:16px;
	font-weight:bold;
	text-align: center;
	transition: all .6s ease-in-out;
	z-index:3000;
	border-radius:5px 0 0 5px;
	background:rgba(0,0,0,0.4)
}
a.scrollup:link,a.scrollup:visited,a.scrollup:active{color:#fff;background:rgba(65,65,84,0.5);text-decoration:none}
a.scrollup:hover{color:#fff;background:rgba(43,43,229,0.5);text-decoration:none}

/* Define images defaults */
#sp_main img {max-width:100%;}
figure {
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
	margin:0;
}

p,li {line-height:1.6}
h1 {color:#0097b2;font-weight:bold}
h2 {font-weight:bold}

/* #sp_body nav {display: none} */
input.menu1 {display:none}

header .menu {z-index:3000}
header .menu ul {
  border: 1px solid #ffffff;
  border:left:0;
}

.menu2 {
  max-height: 0;
  overflow: hidden;
  transition: all .15s ease;
/*  position:absolute; */
  right:0px;
  top:87px;
/*  width:100%; */
}

.menu input:checked ~ .menu2 {    /*input:checked ~ menu {*/
  max-height:500px;
}

.ruban .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ruban .menu li {
  list-style: none;
  border-bottom: 1px solid #ffffff;
  margin:0;
  padding:0 1em;
  background-color:#57acb3;
}

.ruban .menu li:last-child {
  border-bottom: 0;
}

.ruban .menu a {
  display: block;
  padding: 1em 0.3em;
  text-decoration: none;
  color:#ffffff !important;
}
.ruban .menu a:hover {
color:#1f5462 !important;
display:block;
}

/* Mobile */
@media screen and (max-width:650px) {
body { 
  -webkit-animation: bugfix infinite 1s; 
  font-size:15px;
}

#sp_content {width:100%;min-height:100vh /*;max-height:100%*/}
#sp_body{margin-top:82px;/*min-height:100%*/}  /* header fixed */
#sp_main {width:100%}
header > div {font-size:.8em}
header .logo {width:74px;height:89px;float:left;top:0}  /* ttt width:68px height:82px */
header .logo img{width:100%}
header{position:fixed;top:0} /* header fixed */
header, header .ruban {min-height:82px;width:100%}    
header .site {width:100%;height:inherit;line-height:2em;padding-top:0;text-align:left;padding-left:.7em}
/*header .site {width:100%;height:30px;padding-top:5px;background-color:#FFEFD6;} */
header,header.site{background-color:#c6fffd}

header .headerText1{font-family:arial;font-size:1.2em;font-weight:bold;margin-top:.1em}
header .headerText2{width:100%;font-family:arial;font-size:1.1em;font-weight:normal;line-height:1.5}		
/* .bandeau > div {font-size:.8em} */
label {position:absolute}
.menu2 {position:absolute;width:100%}
label {height:89px}
.trigram {margin:50px 10px}   /* 1oct23 30px 15 px */

#sp_body nav {display: none}

footer{	width:100%}

 
.hide {display:none;}
.hide-mobile {display:none !important;}
 
footer.trailer{/*min-height:80px;*/width:100%;background-color:#c6fffd;color:#1f5462 !important;font-size:.6em}
.trailer-top a{color:#fff;text-decoration:none}
.trailer-top{margin-top:5px;color:#fff;min-width:100%}
.trailer-bottom{min-width:100%;text-align:center}

.bandeau{color:#1f5462;text-align:center;border;padding:.3em}   /*  Bottom of the screen : ADELI, mentions legales */

h1 {font-size:1.5em;margin-top:2em}
h2 {font-size:1.2em}

.frame{width:100%}
.frame2{width:91%;margin:auto}
.frame2 > div, .frame2 img{width:100%}
.frame2 > div {padding:2%}


.divR img{width:100%}
.divR{margin:auto;float:none;margin-bottom:.5em}
.sz1 {width:100%}
p.bouton{text-align:center}
}

@media screen and (max-width:320px) {
header .headerText2{width:100%;font-family:arial;font-size:1em;font-weight:normal;line-height:1.5}
.hideSmallMob{display:none}
}

/* PC */
@media screen and (min-width:651px) {
body {font-size:13px} 
.bigger{font-size:1.2em}
header{width:815px;height:222px}
header .logo img{padding:10px}
header .site {margin:auto;padding:1em}
/* header .site {background-color:#c6fffd} */
header .headerText1,header .headerText2{line-height:1.9}
label {height:46px}
.trigram{margin:-5px 20px}

.divR {float:right;margin-left:1em;margin-bottom:.5em}
.divR img{width:100%}
.sz1 {width:50%}

#sp_content {width:815px;margin-top:15px;min-height:100vh}

#sp_body {
	width:100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}


#sp_main {
	width:815px;
	padding:0.2em 3em 2em 3em;
	text-align: justify;
	border-top: 1px solid #67c5d0;	
}

/*
.menu-toggle {display:none;}
header #toggle, header label {display:none;}
 */
header .ruban .site .headerText1 {font-size:1.9em;}
/*header .ruban .menu {display:none} */
footer{width:815px}

/*
.menuLeft{}
a.menuLeft, a.menuLeft:link, a.menuLeft:visited {color: #F9EED2;text-decoration: none;font-weight: bold}
a.menuLeft:hover {color: #EB9292;text-decoration: none;text-decoration: none;font-weight: bold}
a.menuLeft, a:link, a:visited {color: #F9EED2;text-decoration: none;font-weight: bold}
a.menuLeft {width:100%;border:1px solid #EB9292}

.menuLeft li {
	padding: 1em .4em;margin:0;
	width : 100%;
	border-bottom:1px solid #EB9292;
	font-size:1em
}
*/

/* Footer and trailer */
footer.trailer{background-color:#c6fffd;width:815px;color:#1f5462}
.trailer-bottom{text-align:center;padding:.3em}
.trailer-last{height:100%}

.bandeau{text-align:center;border;padding:.3em;border-top:1px solid #1f5462}   /*  Bottom of the screen : ADELI, mentions legales */

.frame{float:left}
.frame2{width:95%;margin:1em 2.5%}
.frame2 > div{width:29%;margin:2%;float:left}
.frame2 > img{width:150px}

}

/*---Body */
h1 {font-size:1.4em;margin-top:1em}
h2 {font-size:1.2em}

.site_name {
	font-size: 1.4em;
	font-weight: bolder;
	color: #1f5462;
}

p, div {
  font-family : arial, Helvetica, sans-serif;
  font-size : 1em;
}

.highlight{color:#0097b2;font-weight:bold}

a.generic:link, a.generic:visited, a.generic:hover, a.generic:active {
  font-family : arial, Helvetica, sans-serif;
  font-size : 1em;
  font-weight: normal;
}

a.mail:link, a.mail:visited, a.mail:hover, a.mail:active {
	color: #0097b2 ;	
	text-decoration: none;
	font-weight: bold;	
}

a.itin:link, a.itin:visited, a.itin:hover, a.itin:active {
	color: #0097b2 ;	
	text-decoration: underline;	
	font-weight: bold;	
}


a.menu, a.menu:link, a.menu:visited {
	color: #0097b2;
	text-decoration: none;
	font-weight: bold;	
}

a.menu:hover {
	color: #1f5462;	text-decoration: none;	
	text-decoration: none;
	font-weight: bold;	
}



a.menu, a:link, a:visited {
	color: #0097b2;
	text-decoration: none;
	font-weight: bold;	
}

a:hover {
	color: #1f5462;	text-decoration: none;	
	text-decoration: none;
	font-weight: bold;	
}

a.link, a.link:link, a.link:visited {
	color: #0097b2;
	text-decoration: none;
	font-weight: bold;	
}

a.link:hover {
	color: #1f5462;	
	text-decoration: underline;	
}

a.bouton, a.bouton:link, a.bouton:visited {
	color: #edfbfd;
	background-color: #0097b2;
	text-decoration: none;
	font-weight: bold;
	border-radius: 1.5em;
	padding:.8em 2em;
}

a.bouton:hover {
	color: #1f5462;	
	text-decoration: none;	
}

.mg2v{margin:2em 0}


hr, hr.separator {
	height : 1px;
	width : 100%;
	border: 1px solid #1f5462;
}

HR.menu {
	height : 0px;
	width : 100%;
	border:1px solid #1f5462;;
}

hr.header {
	height : 1px;
	width : 100%;
	border: 1px solid #1f5462; 
}


ul, li {
  margin: 10;
  padding: 0;
  list-style-type: disc;
  }


ul.point, li.point {list-style-image: url(/picture/point.jpg);
  margin: 10;
  padding: 0;
}

/*
.highlightBlue {
  background: #0000FF;
  color:#FFFFFF;
  font-weight:bold;
}
*/

/* Mambo Menu Styling
 * ------------*/

/* menu -nav */
#mainlevel-nav li
{
	float: right;
}
#mainlevel-nav li a:link, #mainlevel-nav li a:visited{
	color: #1f5462;
	width: auto;
	background-repeat: no-repeat;
	font-size: 11px;
font-family: Arial;
	font-weight: bold;
	height: 22px;
	text-align: center;
	padding-right: 4px;
	padding-left: 4px;
	background-image: url(../images/button_08.png);
	background-position: center 7px;
	padding-top: 22px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CD6161;
	margin-right: 8px;
	margin-left: 8px;
}
#mainlevel-nav li a:hover{
	color: #FF0000;
	background-position: center -26px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
}


/* menu mainlevel */
a.mainlevel:link, a.mainlevel:visited {
	display: block;
font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #0097b2;
	text-align: left;
	width: 100%;
	text-decoration: none;
	line-height: 16px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1f5462;
	background-image: url(../images/button_09.png);
	background-repeat: no-repeat;
	background-position: -2px 3px;
	padding-left: 18px;
	padding-top: 4px;
	padding-bottom: 2px;
}

a.mainlevel:hover {
	background-position: -3px -29px;
	color: #1f5462;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1f5462;
}

/* menu sublevel */
a.sublevel:link, a.sublevel:visited {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #0097b2;
	text-align: left;
	width: 100%;
	text-decoration: none;
	line-height: 16px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1f5462;
	padding-left: 18px;
}

a.sublevel:hover {
	color: #1f5462;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1f5462;
}



/* mambo core stuff */
table.moduletable {
	width: 100%;

}
table.moduletable th {
	color: #1f5462;
	line-height: 19px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1f5462;
	}
table.moduletable td {}

.pathway {
	color: #FFFBEF;
}
a.pathway, a.pathway:visited {
	color: #0097b2;
}
a.pathway:hover {
	color: #1f5462;
}


/*** General Mambo Styles*/
.back_button{
	text-align: center;
}
.pagenavbar {
	color: #B15F9B;
} 
.pagenav, a.pagenav, a.pagenav:visited{
	color: #B15F9B;
	height: 20px;
	padding-right: 2px;
	padding-left: 2px;
	text-align: center;
	padding-top: 2px;
	border: 1px solid #F78964;
	background-color: #FFFFFF;
}
a.pagenav:hover{
	color: #FF0000;
}

	
	
.small {
	font-size: 10px;
	font-weight: bold;
	color: #D98866;
}


/**
 * Mambo Form Styles
 * -----------------
 * Here are 2 styles that Mambo uses to let users control
 * how their forms and buttons may look.
 */
 
.button {
	background-color: #FFFBEF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F78964;
	border-right-color: #D98866;
	border-bottom-color: #D98866;
	border-left-color: #F78964;
	font-size: 10px;
	font-weight: bold;
	color: #D98866;
	margin-top: 2px;
	margin-bottom: 2px;
}
.inputbox {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D98866;
	border-right-color: #F78964;
	border-bottom-color: #F78964;
	border-left-color: #D98866;
	font-size: 10px;
	font-weight: normal;
	color: #D98866;
	background-color: #FFFBEF;
	}

/**
 * Mambo Tabbed Frontend Admin Interface
 * -------------------------------------
 * The CSS styles here defines how the frontend admin interface
 * will look like when editing and adding news through frontend.
 */
 
.ontab {}
.offtab {}
.tabpadding {} 
.tabheading {}
.pagetext {}


/**
 * Mambo General styling for Sections/Categories/Contents
 * ------------------------------------------------------
 * These stylings are either sometimes or often used across
 * Sections, categories and contents. They, therefore, deserves
 * to be mentioned and separated from others.
 */
 
.createdate {
	font-size: 10px;
	color: #EB9292;
} 
.modifydate {} 
.readon, a.readon:link, a.readon:visited{
	color: #B15F9B;
	float: right;
	background-image: url(../images/button_11.png);
	background-repeat: no-repeat;
	background-position: 0px -3px;
	padding-left: 16px;
}
a.readon:hover{
	color: #CD6161;
	background-position: 0px -35px;
}


/** 
 * Mambo Styling for Contents
 * --------------------------
 * All the styling for contents are listed
 * below.
 */

.contentpane {}
.contentpaneopen {}


.contentdescription {}
table.contenttoc {}
table.contenttoc td {}
.content_rating {}
.content_vote {}


/**
 * Mambo Styles for Categories
 * ---------------------------
 * The following are the styling for "Category" items
 * generated from the Sections area
 */
 /* For content item titles that are hyperlink instead of Read On */
.contentheading, .componentheading{
	color: #CA7B88; /** #CE8EA7; vert 5D7C46  */
	font-weight: bold;
	font-size: 20px;
	}
.contentpagetitle, .category {
	color: #CE8EA7;
	font-weight: bold;
}
a.contentpagetitle:link, a.contentpagetitle:visited, a.category:link, a.category:visited {
	font-size: 12px;
	font-weight: bold;
	color: #CD6161;
	}

a.contentpagetitle:hover, a.category:hover {
	color: #D98866;
	}




/**
 * Mambo Blog styling
 * ------------------
 * Not too sure where this is used yet. I tried the blog section
 * but it doesn't seem to use it. If you have info on this,
 * email me. I'll update this part.
 */
 
.blogsection{}



/**
 * Mambo's Built-in Component's Syling
 * -----------------------------------
 * These stylings are used for Mambo's built-in components
 * such as newsfeeds, weblinks, contact, search and polls.
 * A commented subtitle will guide you which is for which
 */
 
 
 /*  Polls  */
 


.poll {
	font-size: 11px;
	color: #CD6161;
}
table.pollstableborder {
	border: 1px solid #D98866;
	color: #1f5462;
}

/**
 * Mambo Sections Styles
 * ---------------------
 * Styling of sections tables 
 */

.sectiontableheader {
	background-color : #F78964;
	color            : #1f5462;
	font-weight      : bold;
	border-top: 1px solid #D98866;
	border-right: #D98866;
	border-bottom: 1px solid #D98866;
	border-left: #D98866;
	line-height: 16px;
}

.sectiontableentry1 {
}

.sectiontableentry2 {
  background-color : #FFFFFF;
}



/*  Weblinks */
.weblinks{} 


/*  Newsfeeds */
.newsfeedheading {} 
.newsfeeddate {} 
.fase4rdf {} 


/* Search page */
table.searchintro {} 


/*  Contact's table settings  */
table.contact {} 
table.contact td.icons {} 
table.contact td.details {}