body {
            margin: 0;
            font-family: sans-serif;
        }
		
      h1, h2, h3 {
            font-weight: 600;
        }

        h1 {
            color: #00476B; /* Blue heading */
            margin-bottom: 8px;
        }
        h2 {
            color: #00476B; /* Blue heading */
            margin-bottom: 6px;
        }
        h3 {
            color: #00476B; /* Blue heading */
            margin-bottom: 6px;
		}
		
a:link {
	color: #017ECD;
	text-decoration: none;
}
a:visited {
	color: #017ECD;
	text-decoration: none;
}
a:hover {
	color: #017ECD;
	text-decoration: none;
}
a:active {
	color: #017ECD;
	text-decoration: none;
}		
		
		.container {
            max-width: 95%;
            margin: 10px auto;
            padding: 10px;
        }

	    .container-2 {
            max-width: 90%;
			background-color: #e9ecef; /* Light gray highlight */
            padding-top: 10px;
            padding-left: 20px;			   
			padding-bottom: 25px;   
            margin: 0px auto;
            margin-top: 0px;
            border-radius: 8px;
        }	


         .container3 {
            max-width: 94%;
            margin: 0px auto;
            padding: 0px;
        }

        .highlight {
            background-color: #00476B; /* Light gray highlight */
            padding: 20px;
            padding-top: 5px;			
            padding-bottom: 30px;
            border-radius: 10px;
        }	

        .highlight3 {
            background-color: #DEE9EF; /* Light gray highlight */
            padding: 5px;
            padding-top: 10px;			
            padding-bottom: 10px;
            border-radius: 10px;
        }
		
        .top-menu {
            background-color: #fff; /* Example background color */
            padding: 5px;
            margin-left: 15px;
            margin-top: 10px;
            margin-bottom: 5px;			
            display: flex;
            justify-content: space-between; /* Distribute items evenly */
            align-items: center; /* Vertically align items */
            width: 95%;
            z-index: 100; /* Ensure it's above other content */
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }

        .logo {
            /* Style your logo */
            max-height: 30px; /* Adjust as needed */
            margin-left: 10px;
        }

        .center-icons {
            display: flex;
            gap: 10px; /* Space between icons */
        }

        .center-icons img {
            height: 40px; /* Example icon size */
            width: 40px;
            cursor: pointer; /* Make icons clickable */			
        }

        .dropdown {
            position: relative;
            margin-right: 5px; /* Space from right edge */
        }

        .dropdown-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0; /* Remove default button padding */
        }
        .dropdown-button img {
            height: 40px;
            width: 40px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            right: 0; /* Position on the right */
            top: 100%; /* Drop below the button */
            border-radius: 5px; /* Rounded corners */
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Optional: Style the body content to prevent it from being hidden under the menu */
        .content {
            padding-top: 60px; /* Adjust based on menu height */
        }
		 
	        .top-button {
            background-color:#8CB0C8; /* Example color */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }			 
		 
		
        .bottom-button {
            background-color: #FF6633; /* Example color */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }			 
		 

         .container2 {
            max-width: 75%;
            margin: 10px auto;
            padding: 5px;
        }


       .destinations {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
            gap: 20px;
        }

        .destination {
            border-radius: 8px;
            overflow: hidden; /* Image clipping */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .destination img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .destination-info {
            padding: 20px;
            background-color: #ffffff;
        }			
		
		
        .link-list {
            display: flex; /* Use flexbox for vertical alignment */
            flex-direction: column; /* Stack links vertically */
            align-items: flex-start; /* Align links to the left */
            margin-top: 30px; /* Add some space above the links */
            margin-bottom: 35px; /* Add some space bellow the links */
        }

        .link-list a {
            display: block; /* Each link takes full width */
            padding: 8px 0; /* Add some vertical padding */
            text-decoration: none;
            color: #447291; /* Example color */
        }		
		
#pagewidth{ 
margin-left:auto; 
margin-right:auto; 
width:100%; } 

/*mise en forme du header vous pouvez changer l'image du header ici----------------------------------------------------*/ 

#headeradm {
 background-color:#ffffff; 
 width:100%;
 height:40px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 text-align:none;
 vertical-align:none;
 padding-bottom: 0px;
} 

#headertop {
 background-color:#ffffff; 
 width:100%;
 height:40px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 text-align:none;
 vertical-align:none;
 padding-bottom: 0px;
} 

#headerpro {
 background-color:#017ECE; 
 width:100%;
 height:40px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 text-align:none;
 vertical-align:none;
 padding-bottom: 0px;
} 

#header {
 background-color:#ffffff; 
 width:58%;
 height:40px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 text-align:none;
 vertical-align:none;
 padding-bottom: 0px;
} 

/*cadres gauche, droit et central ----------------------------------------------------*/ 

#table_centrale{
 position:relative; 
 width:100%;
border-collapse:collapse; } 

#leftcol{
 vertical-align:top;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 border-top: 0px #9B9FBC; }
 
#rightcol{
 vertical-align:top;
 padding-top: 0px;
 padding-left: 0px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid; }
 
#maincol{
 vertical-align:top;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 width:100%; }

/*pied de page du site ----------------------------------------------------*/ 

#footer{
 width: 90%;
 height:60px;
/* background-color: #98A4B9;*/
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 background-repeat: no-repeat;} 

/*fonction impression ----------------------------------------------------*/ 
 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocolls, #maincol{width:100%; float:none;}
}


/*Blocs ----------------------------------------------------------------------*/

.block_content {
font: 10px verdana, helvetica, sans-serif;
border-bottom:0px solid #98A4B9; 
border-left: 0px solid#98A4B9;
border-right: 0px solid #98A4B9;
border-top: 0px solid #98A4B9;
-moz-border-radius: 0px;
padding-left:0px; 
padding-right:0px; 
width: 100%;}
/*  aspect des blocs colonne gauche ---------------------------------------------*/	

.block_title-colonne-gauche {
text-align:center; 
font: bold 10px verdana, helvetica, sans-serif;
color: #ffffff;
background-color: #08596d;
background-repeat: no-repeat;
}

.block_content-colonne-gauche {
width: 155px;}

.boxContent {
padding-left:0px; 
padding-right:0px; 
width: 100%;}


.block_title-right-bloc {
font: bold 10px verdana, helvetica, sans-serif;
color: #9DA5BA;
width: 155px;
height:30px;
padding-left:0px; 
padding-right:0px;
border-bottom:0px solid #98A4B9; 
border-left: 0px solid #98A4B9;
border-right: 0px solid #98A4B9;
border-top: 0px solid #98A4B9;
background-repeat: no-repeat;
text-indent:0pt;}


.boxContent-right {
padding-left:0px; 
padding-right:0px; 
width: 155px;}

/*  aspect des blocs cadre central aspect uni bleu clair ---------------------------------------------*/	

.block_title-center {
font: 10px verdana, helvetica, sans-serif;
font-style:bold;
color:#ffffff;
background-color:#9DA5BA;
background-repeat: no-repeat;
width: 100%;
text-indent:0pt;
}

.block_content-center {
font: 10px verdana, helvetica, sans-serif;
color:#08596d;
border-bottom:0px solid #9cbcc4; 
border-left: 0px solid #9cbcc4;
border-right: 0px solid #9cbcc4;
border-top: 0px solid #9cbcc4;
-moz-border-radius: 0px;
width: 100%;

}

/*  aspect des articles ---------------------------------------------*/

.block_title {

font: bold 10px verdana, helvetica, sans-serif;
color: #08596d;
background-image:url(../images/fleche-orange.png);
background-repeat: no-repeat;
text-indent:13pt;

}

.postedby {
font: 9px verdana, helvetica, sans-serif;
color: #9cbcc4;
text-align:left; 
}
/*------------------- couleurs des liens posteby*/

.postedby a  {
font: 9px verdana, helvetica, sans-serif;
color:#9cbcc4;}

.postedby a:hover {	
text-decoration: none;	
color: #000000;}

.block_content-texte-article {
font: 10px verdana, helvetica, sans-serif;
padding-top:1px;
padding-bottom:2px;}

.morelink {
font: 9px verdana, helvetica, sans-serif;
text-align:left; 
border-top:1px dashed #08596d; 
padding-top:2px}	

.block_title-post {
font: bold 10px verdana, helvetica, sans-serif;
color: #08596d;}

/* ------------------------------------aspect des preferences administration*/

.checkbox {
	background: #E3E8F0;  /*gris pale */
	border: 1px solid #08596d;
	font-size: x-small;}

.select {
	background: #E3E8F0;  /*gris pale */
	border: 1px solid #08596d;
	font-size: small;}
 

/* ------------------------------------aspect module sections */

.title {
    color: #08596d;
	font-size: 18px;
    font-style:bold;}

.sections_css .bg1 {
background-color:#ffffff  /* fond cellule */
}

.sections_css .bg2 {
background-color:#E3E8F0 /* fond cellule nom - lecture*/
} 

.sections_css .bg3 { 
background-color:#ffffff   /* fond cellule  article- date  */
}

.sections_css .bg4 { /* entete degrade bleu  */
background-color:#9cbcc4;
}

.sections_css .bg5 { /* ligne bleu  */
background-color:#027ECD;
}

.newbb_plus_css .bg1 {
background-color:#ffffff  /* fond cellule */
}

.newbb_plus_css .bg2 {
background-color:#98A4B9 /* couleur bordure*/
} 

.newbb_plus_css .bg3 { 
background-color:#ffffff   /* fond cellule 2  */
}

.newbb_plus_css .bg4 { /* entete degrade bleu  */
background-color:#A3D0ED;
background-repeat: repeat-x;
height:20px;
}

/* ------------------------------------aspect general */

.bg1		{background-color:#ffffff} /* fond cellule bloc centre, bloc froit, admin*/

.bg2		{/* couleur bordure*/
background-color:#BEC8DA;
border-bottom:1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-collapse:collapse;} 

.bg3		{background-color:#E3E8F0} /* en tete des cadres admin*/

.bg4		{background-color:#ffffff} /* pied de page bloc forum*/

.bg4		{background-color:#027ECD} /* pied de page bloc forum*/



/* ------------------------------------mylinks */

.mylinks_bg1		{background-color:#ffffff;border-collapse:collapse;} /* fond cellule bloc centre, bloc froit, admin*/
.mylinks_bg3		{background-color:#8cc8d7;border-collapse:collapse;} /* en tete des cadres admin*/