/* reinitialisation des valeurs browser */

* {
		margin:0; padding:0;
        text-decoration: none;
		/*transition: all 1000ms;*/
}

body {
	display:block;
	/* width:1200px; */
	min-width:1024px;
	background:#000 linear-gradient(to top, #aaa 50%,  #369 100%, #f5da9f 60%);
   /* background: url('/Ghost%20Nebula.jpg') #333 no-repeat;*/
	color:#888888;
	font-size:14px;
	 font-family:"trebuchet ms", helvetica, sans-serif;
	 /*	font-family:"TyponineSans Monospace Regular 4","TyponineSans Monospace Light 5"; */

}
 @font-face {
		font-family: 'BrushScriptStdMedium';src: url('brushscriptstd.eot');
		src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff') format('woff'), url('brushscriptstd.ttf') format('truetype');
} 

.classname{ font:21px  bold normal  BrushScriptStdMedium;}

#left a { 
	text-decoration:none;
	/* color:#93B300; */
	color:#636363;
	
}

#left a:hover, .hoverised {
	text-decoration:underline;
	font-style:italic;
	color:#fff;
	/*background:#D3E378 url('/images/bbg1.gif') repeat-x;*/
}

ul, ul li {
	list-style: none;
	text-transform:capitalize
}
a{color: #ddd;}
a:hover{
        text-decoration: underline;
        font-weight: bold;
        
}

#main #main_left ul {
	margin: 0px 0px 0px 35px;
	max-width: 450px;
}

#main #main_left ul li {
  list-style: disc;
  text-transform: none;
}

/* grandes structures */
#global {
	display: block;
	min-width:1048px;
	margin: 1px auto;
    overflow: visible;
}

#header {
	width:100%;
	min-width:1100px;
	min-height:75px;
    height:76px;
	position:fixed;
	top: 0px;
	left: 0px;
	/* background:#ffffff url('/images/a1.gif') repeat-x; */
	/* background: linear-gradient(to right, #000 25%, #EBF1F5 90%, #999 100%);*/
	/*background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(192, 192, 192, 0.2), rgba(235, 241, 245, 0.8) ); */
	background: linear-gradient(to bottom, rgba(0, 0, 128, 0.8), rgba(128, 0, 128, 0.2), rgba(235, 241, 245, 0.8) );
    /* background:rgba(0,0,0, 0.4); */
	color:#fff;
	z-index: 20;
	border-radius: 27px 0px 27px 0px;
	border: #ccc 2px solid;
	box-shadow: 0 0 25px #cdbe9f inset, 0 0 10px #beae8c inset;
    overflow: hidden;    
    transition: height 0.25s ease-out;
}
 #header:hover, #header:focus  {
        height: 400px;
 
        transition: height 0.15s ease-in;
        background: rgba(128,128,128, 0.8);
        
        
}


#middle {
	
	float: left;
	height: 700px;
	width: 200px;
}

#left{
	margin: 0px 10px;
}
:not(.manage)>#left {
	display:block;
	position: fixed;
	float:left;
	min-width:285px;
	min-height: 400px;
	max-height: 730px;
	width: 25%;
	top:105px;
	border-radius: 0px 20px 0px 15px;
	border: #ccc 1px dashed;
	background: rgba(250, 250, 250, 0.8);
	/* background-image: linear-gradient(to left, #ccc 5%, #EBF1F5 70%, #FFFFFF 100%); */
	overflow: hidden;
	z-index: 21;
}

#main {
	min-width:70%;
	max-width: 750px;
	min-height: 730px;
	 
	
	margin: 103px auto 0px auto;
	 background-image: linear-gradient(to top, #CFC7C9 0%, rgba(196, 224, 255, 0.8) 86%);
	 background: rgba(250, 250, 250, 0.8);
	border: #ccc 1px dashed;
	border-radius:  20px 20px 54px 36px;
	z-index: 22;
}
#main_content{
    margin:20px 0px 2px 20px ;
    color: #000;
}
#footer {
		display:block;
		 /* float:right;*/
		 color: #aaa;
		clear: both;
		width: 750px;
		/* background:url('/images/x1.gif') repeat-x; */
		margin:25px auto 25px auto;
		
		padding-top:10px;
		text-align:center;
		text-transform:lowercase;
		word-wrap: break-word;
		
}
/* header */
 

 
#header h1 {
	background:none;
	position:absolute;
	top:2px;
	left:21px;
	text-transform: capitalize;
	font-size: 28px;
	
	font-weight: normal;
	letter-spacing: -2px;
	font-style: oblique;
	
}
#header h1 a {
	color: #fff;
	/* text-shadow:  0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;*/
	text-shadow:  0 0 0.2em #85ac1e, 0 0 0.2em #87F, 0 0 0.2em #85ac1e;
	text-decoration: none;
}
#header em {
		/*display:block;*/
	background:none;
	position: relative;
	left:25px;
	top:35px;
	color: #fff;
	font-size: 13px;
	font-style:normal;
	/* text-shadow:  0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F; */
	text-shadow:  0 0 0.8em #963, 0 0 0.2em #87F, 0 0 0.8em #333;
	font-style: oblique;
}
#header #header_right {
	display:block;
	width: 220px;
    
	position: absolute;
	top:  10px;
	right: 25px;

}
#header #header_right>div{
        display: none;
        position: relative;
        top:15px;
        padding: 20px;
        background: rgba(128,128,128,0.8);
        height: 250px;
}
#header:hover #header_right>div{
        display: block;
}
#header #btn_information{
        margin: 20px 5px;
        height: 16px;
        width: 16px;
        background: url(/images/btn_information_orange.png);
        background-size:16px;
        background-repeat: no-repeat;
}
/* moteur de recherche en haut a droite */

#header #header_right input[type="text"]{
	box-shadow: 2px 2px 3px #666;
	outline: 0;
	border-radius: 10px;
	content: close-quote;
	padding:2px;
	/* background: url('/images/x1.gif') #eee 92% no-repeat;*/
}

#header #header_right input[type="text"]:focus {
	background: #fff;
	box-shadow: 2px 2px 3px #666;
	outline: 0;
	border-radius: 10px;
}
/* ************** #header_category ********* */

#header_category
{
        display:block;
        
        position: absolute;
        top: 35px;
        left: 155px;
        min-width: 550px;
        max-width: 1150px;
        width: 1000px;
        margin: 1px auto;
        padding: 20px;
        z-index: 22;
}
#header_category:hover{
        background: rgba(192,192,192,0.8);
}
#header_category>div>ul{
        display: block;
        width: 135px;
        /*min-height: 120px;*/
        float: left;
        color:#333;
        overflow: hidden;
       
        
}
#header_category>div>ul>li>a:first-child{
        border-left: #fff 2px solid;
        border-right: #fff 2px solid;
         padding: 0px 5px 5px 5px;
}

#header_category>div>ul>li>ul{
        display: none;
        background: rgba(0,0,0,0.8);
        
        margin: 5px 0px 10px 10px;        
 
        
          width: 450px; 
         
}
#header_category>div>ul:hover>li>ul{
        display: block;
         
}
#header_category>div>ul:hover{
        overflow: visible;
}
#header_category>div>ul:hover>li{
              
}


#header_category>div>ul ul>li{
        display: block;
        background: rgba(102, 102, 255, 0.8);
        color: #fff;
        margin: 5px 0px 10px 10px;        
}


#header_category>div a{
        display: block;
        font-weight: bold; 
}

#header_category>div a:hover{
        background: rgba(96,96,96,0.8);
}


#header_category>div>ul>li>a{
        display: block;
        background: rgba(0,0,0,0.8);
        color: #fff;
        
}
#header_category>div>ul>li>ul>li
{
        background:  rgba(128, 0, 255, 0.8);
}
/*#header_category>div>ul>li>ul>li:nth-child(2n)
{
        background:  #fff;
}*/
/* ************** #header_info ********* */
#header #header_info
{
        display: none;
        top: 85px;
        left: 5px;
        max-height: 0;
        position: absolute;
        color:#fff;
        transition: max-height 0.15s ease-in;
        z-index: 25; 
        
}

#header:hover #header_info
{
        display: block;
        background: rgba(0,0,0,0.6);
        max-height: 400px;
        transition: max-height 2000ms ease-out;
        
}

#header #header_info>ul:hover
{
        display: block;
        background: rgba(179, 179, 179, 0.6);
       
        border-radius: 0px 20px 20px 0;
        transition: background-color 0.25s linear;
         
}
#header #header_info>ul>li
{
        display: block;
        min-width: 200px;
        height: 35px;
        overflow: visible;
        padding: 5px;
        
}

#header #header_info>ul>li h3{
        padding-left: 24px;
}

#header #header_info>ul>li:hover h3{
        padding-left: 24px;
         background: url(/images/btn_information_orange.png);
        background-size:16px;
        background-repeat: no-repeat;
}

#header #header_info>ul>li>div
{
        display: none;
        min-height: 200px;
        width: 650px;
        background: rgba(0,0,0,0.4);
        z-index: 42;
}

/* ************ */
#header #header_info>ul>li:hover{
      background:  rgba(255, 204, 102, 0.8) ;
      transition: background-color 0.25s linear;
      border-radius: 0px 20px 20px 0;
      overflow: visible;
}

#header #header_info>ul>li:hover>div
{
        display: block;
        position: absolute;
        top: 15px;
        left: 195px;
        border-radius: 20px;
        padding: 10px;
}



/* *********** menu top  ************ */

#menu_top a {
        
        font-weight: bold;
        font-size: 16px;
}

 
#menu_top a:hover {
        color: #000;
}
        
#menu_top{
        display:  none;
        position:fixed;
        top: 0px;
        left:  330px;
        height: 45px;
        min-width: 640px;
        list-style: none;
        z-index: 25;
        color:#fff;
        border-radius: 20px;
        background: rgba(192,192,192, 0.8);

}
#menu_top:hover{
        background: rgba(0,0,0,0.8);    
}

#menu_top .menu_section  {
        display: block;
        min-width: 70px;
        max-width: 160px;
       
        position: relative;
        float: left;
		overflow: visible;
        margin: 5px;
		
}
#menu_top .menu_section>div{
        
        transition: text-align 0.15s linear;
}
#menu_top .menu_section:hover a{
        color: #fff;
        font-weight: bold;
        /*text-align: center;*/
        transition:  text-align 3.15s linear;
}
#menu_top .menu_section ul>ul{
        background: linear-gradient(to bottom, rgba(255, 128, 0, 0.8), rgba(0, 0, 128, 0.6), rgba(128, 0, 128, 0.8) );
}
#menu_top .menu_section ul{
        display:block;
        margin-top:15px;
        margin-left:15px;
        min-width: 90px;
        max-width: 450px;
        max-height: 0;
        transform: scaleY(0);   
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        background: linear-gradient(to bottom, rgba(127, 127, 127, 0.8), rgba(0, 0, 128, 0.6), rgba(0, 0, 0, 0.8) );
        border-radius: 0px 20px 20px 0;
        overflow: hidden;
   
}
#menu_top .menu_section:hover ul {
        max-height: 650px;
        width: 650px;
        transform: scaleY(1);   
        transition: max-height 0.25s ease-in;
        
         
}

#menu_top .menu_section ul>li>ul{
        background: rgba(192,192,192, 0.4);
}
#menu_top .menu_section li.menu_section>div{
        background: rgba(0, 255, 0, 0.4);
        clear: both;
}
        
#menu_top .menu_section ul>li{
        
        min-width: 240px;       
        transition: background-color 0.25s linear;
        padding: 5px;
        overflow: visible;

}
#menu_top .menu_section:hover ul>li:hover>div {
	background-color:  rgba(255, 204, 102, 0.8)  ;
	transition: background-color 0.25s linear;
    border-radius: 0px 20px 20px 0;
    overflow: visible;
}
 
#menu_top .menu_section li>ul{
        width: 450px;
}
 #menu_top li>div>div
 {
        display: none;
        margin: 20px;
 }
 #menu_top li:hover>div>div
 {
        display: block;
 }
 #menu_top li>div>div img{
        height: 34px;
 }
 #menu_top li>div>div{
        
        
        
}
*[message]:hover:after  {
        color: #f00;
        content: attr(message);
        padding: 4px 8px;
        color: #333;
        position: relative;
        left :25px;
        top:15px;
        white-space: nowrap; 
        z-index: 40;
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px;  
        border-radius: 5px;  
        -moz-box-shadow: 0px 0px 4px #222;  
        -webkit-box-shadow: 0px 0px 4px #222;  
        box-shadow: 0px 0px 4px #222;  
        background: #fff; 
}

#menu_top_info{
        
        
}
 

 
/* contenu */

#main_head {
	 
 
	margin:0 auto 15px auto;
	border:1px solid #ccc;
	border-top:0;
	border-left:0;
 
 
	 
}
#main_left {
		  	/* min-width:690px; */
			min-width:30%;
			max-width: 900px;
			margin: 0px auto;
			padding:6px 10px 6px 10px ;
			/* margin:  0px 0px 0px 4px;*/
			/*border: #999 1px dashed;*/
			/* float:left;*/
			min-height: 400px;
			color:#369;
			/* box-shadow: 0 0 25px #cdbe9f inset, 0 0 10px #beae8c inset;*/ 
				
}
#main_left {
                 color:#eee;
                 font-size: medium;
                 font-weight: bold;
                 text-shadow:  0 0 0.2em #ff8000, 0 0 0.2em #000000, 0 0 0.2em #800080;
                 background:rgba(128,128,128, 0.4);
}
#main_left>div{
                text-align: center;
                color:#ddd;
                text-shadow:  0 0 0.2em #000000, 0 0 0.2em #aaa, 0 0 0.2em #ff8000;
                background:rgba(0,0,0, 0.4);
                padding: 10px 0px;
}

#main_left>p
{
		display:block;
		margin: 5px;
}
 
 
/* ************************************************ **************** */
#main_head>div
{
		 
		 position: relative; 
		 top: 5px;
		 left: auto;
		min-width: 740px;
		height: 90px;
		 
		
		clear:both;
		text-align: right;
		padding:5px;
		background: rgba(230, 230, 230, 0.6);
}

.manage #main_head>div
{
		 
		 position: fixed;
		 top: 0px;
		 left: auto;
		width: 740px;
		height: 90px;
		
	
}



#main_head>div:first-child a
{
		display: block;
		float: right;
        height: 40px;
		width: 40px;
		margin: 5px 10px;
		border-top:#ccc 3px solid;
		border-left:#ccc 3px solid;
		border-bottom:#333 3px solid;
		border-right:#333 3px solid; 
        background: #ddd;
}
#main_head>div:first-child a img
{
		display: block;
		margin: 5px auto auto auto;
		height: 32px;
}
#main_head>div:first-child a:hover
{
       
        
		background: #aaa;
		border-top:#333 3px solid;
		border-left:#333 3px solid;
		border-bottom:#ccc 3px solid;
		border-right:#ccc 3px solid;
}
 
/* ********************************* */
#intro_summary
{
        
        font-size: 18px;
        color: rgba(0, 0, 128, 0.8);
        text-align: right;
        margin: 5px 10px;
}

/* ********************************* */
#manage_link
{
        position: absolute;
        top: 5px;
        right: 300px; 

}
#manage_link img {
        height: 32px;
}
#manage_link a {
        display: inline-block;
        margin: 5px 10px;
}
#manage_link a:hover {
        
        border: #aaa 2px solid;
}

/* **************************** ******************** */
.pageName
{
        margin: 10px 30px;
        font-size: medium;
        font-weight: bold;
        text-align: justify;
        text-transform: capitalize;
        color: rgba(0,0,0,0.8);
}
.pageAriane{
        font-size: small;
        font-weight: bold;
        text-align: justify;
        color: rgba(0, 0, 128, 0.8);
}

/* ********************************* */

div[id*="lst_contener_"]
{
        display:block;
        max-width: 1040px;
        height: 260px;
        clear: both;
        background: rgba(255,255,255,0.8);
        margin: 5px auto;
}

div[id*="lst_contener_"] img
{
        display:block;
        width: 180px;
        margin: 5px auto;
}
div[id*="lst_contener_"]>div[id*="lst_illustration_"]
{
        display:block;
        background: rgba(192,192,192,0.8);
        width: 280px;
        height:260px;
        float: left;
        padding:5px;
}

div[id*="lst_contener_"]>div[id*="lst_content_"]
{
        display:block;
        /*background: rgba(192,192,192,0.8);*/
        max-width: 720px; 
        min-height: 260px;
        float: left;
        padding: 5px;
}
div[id*="lst_contener_"]>div[id*="lst_content_"]>div:first-child
{
        display: block;
        width: 720px;
        color: #fff;
        clear: both;
        
        background: rgba(127, 127, 127, 0.4);
        
}

.nav_vignette
{
        text-align: center;
        color:#ddd;
        text-shadow:  0 0 0.2em #000000, 0 0 0.2em #aaa, 0 0 0.2em #ff8000;
        background:rgba(0,0,0, 0.4);
        padding: 10px 0px;
        margin:5px 0px 20px 0px;
}
.nav_vignette a
{
        display:inline-block;
      
        margin: 6px;
        width: 220px;
        height: 160px;
        
}
.nav_vignette a img
{
        
        max-width: 220px;
}
 #menu_additionnel{
        display: none;
        background: rgba(192,192,192,0.4);
        height: 260px;
        width: 260px;
        position: fixed;
        top: 105px; 
        left: 15px;
        z-index: 19;
 }