body {
	background-image:  url(../images/ecriture.jpg);
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
TH {
	color: white;
	font-size : 15px;
	font-weight : bold;
	text-align : center;
	background-color: #DC143C;
	font-family: Arial;

}
.haut{
	background-image:  url(../images/frise.jpg);
}
.titre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: 30px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	vertical-align: middle;
}
.titbis {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: 30px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	vertical-align: middle;
}
.defil{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: lightgrey;
	font-size: 15px;     
        font-weight: bold;
	color: #000000;
	vertical-align: middle;
}
.menu{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #DC143C;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold; 
	border: 1px solid #245099; 
	border-radius: 5px 5px 5px 5px;
	vertical-align: middle;
}
.poucet{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: gold;
	font-size: 12px;
	height: 23px;
	margin-top: 25px;
	color: #000000;
	text-align: center;
	vertical-align: middle;
}
.logad{
	font-family: Comic Sans MS, Verdana, Arial;
	background-color: gold;
	font-size: 16px;
	font-weight:bold;  
	font-style:italic;      
	height: 23px;
	margin-top: 2px;
	color: #DC143C;
	text-align: left;
	vertical-align: middle;
}
.titr1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: white;
	font-size: 32px;
	font-weight: bold;
	height: 35px;
	margin-top: 2px;
	color: #DC143C;
	text-align: center;
	vertical-align: top;
	
}
.titr2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: white;
	font-size: 14px;
	font-weight: bold;
	height: 25px;
	margin-top: 2px;
	color: #DC143C;
	text-align: center;
	vertical-align: top;
	
}
.titr3{
	font-family: Old English Text MT, Arial, Helvetica, sans-serif;
	background-color: #DC143C;
	font-size: 26px;
	color: #FFFFFF;
	font-weight: bold; 
	border: 1px solid #245099; 
	border-radius: 5px 5px 5px 5px;
	text-align: center;
	vertical-align: middle;
}
.corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: 12px;
	color: #000000;
	height: 700px;
	border: solid 2px black;
	vertical-align: middle;
}
.pied{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #800000;
	font-size: 12px;
	height: 10px;
	margin-top: 0px;
	color: #FFFFFF;
	vertical-align: middle;
	
}
.btn{    background-color: #DC143C;
         border: solid 1px white; 
         padding: 2px; 
         height: 30px;
         text-decoration: none;    
         font-weight: bolder;    
         border-radius: 5px 5px 5px 5px;    
         color: white;
}
.btn:hover{  background-color: orange;    
	border: 1px solid #142860;   
	padding: 2px;    
	text-decoration: none;    
	font-weight:bolder;    
	border-radius: 5px 5px 5px 5px;    
	color:#142860;   
	cursor:pointer;
}
.btn a:link{   
	text-decoration: none;       
	color: white;   
}
.btn2{   background-color: #DC143C;
         border: solid 1px white; 
         padding: 2px; 
         height: 40px;
         width: 120px;
         text-decoration: none;    
         font-weight: bolder;    
         font-size: 16px;
         font-family: Arial;
         border-radius: 5px 5px 5px 5px;    
         color: white;
}
.btn2:hover{  background-color: orange;    
	border: 1px solid #142860;   
	padding: 2px;    
	text-decoration: none;    
	font-weight:bolder;    
	border-radius: 5px 5px 5px 5px;    
	color: black;   
	cursor:pointer;
}
.btn2 a:link{   
	text-decoration: none;       
	color: white;   
}
.btnj{   background-color: gold;
         border: solid 1px  #336699; 
         padding: 2px; 
         height: 40px;
         width: 120px;
         text-decoration: none;    
         font-weight: bolder;    
         font-size: 16px;
         font-family: Arial;
         border-radius: 5px 5px 5px 5px;    
         color:  #336699;
}
.btnj:hover{  background-color: red;    
	border: 1px solid #142860;   
	padding: 2px;    
	text-decoration: none;    
	font-weight:bolder;    
	border-radius: 5px 5px 5px 5px;    
	color: white;   
	cursor:pointer;
}
.btnj a:link{   
	text-decoration: none;       
	color: white;   
}
.area:hover{  background-color: red;    
}
.lien a:link{   
	text-decoration: none;         
}
.cadre{border: 3px solid red; 
       padding:2px 3px;
       border-radius: 5px 5px 5px 5px;
       box-shadow:2px 2px 10px gray; 
       height: 260px;
       width: 310px;
}
.bord{ border: 1px solid #DC143C;
       border-collapse: collapse;
       margin: 0;
}             
.born{ border: 1px solid #000000;
       border-collapse: collapse;
       margin: 0;
} 
.borg{ border: 1px solid lightgrey;
       border-collapse: collapse;
       margin: 0;
} 
.tour{ border: 2px solid #DC143C; 
       padding:2px 3px;
       border-radius: 5px 5px 5px 5px;
       box-shadow:2px 2px 10px gray; 
} 
.inputF{ border: 1px solid #336699; 
       padding-left: 5px;
       border-radius: 5px;
       height: 22px; 
} 

fieldset {
	border : 1px solid #DC143C; 
	border-bottom-width : 3px;
	border-left-width : 3px;
	border-radius : 1em;
	margin-top: 2em;
	margin-bottom: 2em;
	padding : 1em 0 1em 0 ;
}
label {
	width : 12em ;
	display : inline-block ;
	text-align : right ;
}
legend {
	color : #DC143C; 
	font-weight : 900 ;
	padding : 0 0.5em 0 0.5em ;
	margin-left : 2em ;
}

.fiAcces{margin-top: 50px;
	 border: 1px solid #245099; 
	 border-radius: 5px 5px 5px 5px;
}      
.panier {
	background-image:  url(../images/panier.gif);
	background-repeat: no-repeat ;
	height : 34px ;
	width : 34px ;
	border ; none ;
        text-align : center ;
        color : #FEC3AC;
        cursor: pointer;
}                
.bdtn{ border-top: 1px solid black;}    
.bdbc{ border-bottom : 1px solid #DC143C;}  

#faccueil {background-image: url(../images/caen03.jpg) ;
           background-color: lightblue ;
           background-repeat: no-repeat ;
           background-size: 100% 100%;
           animation: fondu 50s ease-in-out infinite both;
}
#nofonds {background : white ;
           background-size: 100% 100%;
}
#photoCadre{position:absolute; top:-5px; z-index:40; left:15px}
#photo{position:static;border:0px }
#diaImageVisuWrap{position:relative;z-index:98; margin:0px auto; }
#diaImageVisu{z-index:98; margin:0 auto;width:1000px;}

.div_waittranslucide { Z-INDEX: 100;BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75; LEFT: 0px; BORDER-LEFT: white 1px solid; WIDTH:100%; BORDER-BOTTOM: white 1px solid; POSITION: fixed; TOP: 0px; HEIGHT: 99%; BACKGROUND-COLOR: #ffffff }
.div_waitopaque { Z-INDEX: 109; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: transparent }
.imgWAIT{cursor:pointer;}

div#nav {float: left; margin: -1px 0 0 1em; background: #DC143C; width: 100%;}  
div#nav ul {margin: 0; padding: 0; background: #DC143C; border: 1px solid #FBFCFA; border-width: 0 6px;}
div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 10.5em; line-height: 1em; border: 0.5px solid #FBFCFA; border-width: 0 0px; z-index:20;}
div#nav li:hover {background: #BBD2E1;}
div#nav li a {display: block; padding: 0.1em 0 0.1em 0.5em; text-decoration: none; width: 11.9em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 11.9em; display: none;}
div#nav ul ul li {border-bottom: 1px solid #CCC;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block; z-index: 40;}
div#nav ul.level2 {top: 2em; left: -7px; width: 10.5em; z-index: 40;}
div#nav ul.level2:hover {width: 5.9em; background-color: #BBD2E1;; z-index: 40;}
div#nav ul.level3 {top: -1px; left: 10.5em; border-top: 1px solid #CCC;}

div#nvg {float: left; margin: -1px 0 0 1em; background: gold; width: 100%;}  
div#nvg ul {margin: 0; padding: 0; background: gold; border: 1px solid #FBFCFA; border-width: 0 6px;}
div#nvg li {position: relative; list-style: none; margin: 0; float: left; width: 10.5em; line-height: 1em; border: 0.5px solid #FBFCFA; border-width: 0 0px; z-index:20;}
div#nvg li:hover {background: #BBD2E1;}
div#nvg li a {display: block; padding: 0.1em 0 0.1em 0.5em; text-decoration: none; width: 11.9em;}
div#nvg>ul a {width: auto;}
div#nvg ul ul {position: absolute; width: 11.9em; display: none;}
div#nvg ul ul li {border-bottom: 1px solid #CCC;}
div#nvg ul.level1 li.submenu:hover ul.level2,
div#nvg ul.level2 li.submenu:hover ul.level3 {display:block; z-index: 40;}
div#nvg ul.level2 {top: 2em; left: -7px; width: 11.9em; z-index: 40;}
div#nvg ul.level2:hover {width: 5.9em; background-color: #BBD2E1;; z-index: 40;}
div#nvg ul.level3 {top: -1px; left: 10.5em; border-top: 1px solid #CCC;}

.hmenu {
	position: absolute;
	margin: 0;
	top: 60px;
	width: 100%;
	background-color: #DC143C;
}
.bmenu {
	position: absolute;
	margin: 0;
	top: 60px;
	width: 100%;
	background-color: gold;
}
a.:link {
    color: #1a21ad;
    text-decoration: none;
    }
a.:visited {
	text-decoration: none;
	color: #1a21ad;
	}
a.:hover {
	background-color: #9fbaef;
	color: red;
	}
a.:active {
	background-color: #9fbaef;
	color: red;
}

a.boxmenu {                  
    background-color: #DC143C;
    display: block;
    padding-top: 3px;
    padding-bottom: 1px;
    width: 10.5em;
    height:2em;
    line-height: 2em;
    text-align: center;
    font-family: Trebuchet MS;
    text-decoration:none;
    font-size: 1em;
    font-weight: bold;
}
a.boxmenu:link {
    color: #FFFFFF;
    text-decoration: none;
    }
a.boxmenu:visited {
	text-decoration: none;
	color: #FFFFFF;
	}
a.boxmenu:hover {
	background-color: #FFFFFF;
	color: red;
	}
a.boxmenu:active {
	color: black;
	}
a.boxmenu1 {                  
    background-color: gold;
    display: block;
    padding-top: 3px;
    padding-bottom: 1px;
    width: 10.5em;
    height:2em;
    line-height: 2em;
    text-align: center;
    font-family: Trebuchet MS;
    text-decoration:none;
    font-size: 1em;
    font-weight: bold;
}
a.boxmenu1:link {
    color: #FFFFFF;
    text-decoration: none;
    }
a.boxmenu1:visited {
	text-decoration: none;
	color: #FFFFFF;
	}
a.boxmenu1:hover {
	background-color: #FFFFFF;
	color: black;
	}
a.boxmenu1:active {
	color: black;
	}	

a.boxmenu2 {           		
    background-color: lightgrey;      
    color: black;         
    display: block;
    padding-top: 3px;
    padding-bottom: 1px;
    height:2em;
    line-height: 2em;
    text-align: center;
    font-family: Trebuchet MS;
    text-decoration:none;
    font-size: 0.8em;
    font-weight: bold;
}
a.boxmenu2:link {
    color: black;
    text-decoration: none;
    }
a.boxmenu2:visited {
	text-decoration: none;
	color: black;
	}
a.boxmenu2:hover {
	background-color: white;
	color: red;
	}
a.boxmenu2:active {
	color: red;
	}
a.boxmenu3 {           		
    background-color: mistyrose;      
    color: black;         
    display: block;
    padding-top: 3px;
    padding-bottom: 1px;
    height:2em;
    line-height: 2em;
    text-align: center;
    font-family: Trebuchet MS;
    text-decoration:none;
    font-size: 0.8em;
    font-weight: bold;
}
a.boxmenu3:link {
    color: black;
    text-decoration: none;
    }
a.boxmenu3:visited {
	text-decoration: none;
	color: black;
	}
a.boxmenu3:hover {
	background-color: #DC143C;
	color: white;
	}
a.boxmenu3:active {
	color: white;
	}
a.boxmenu4 {           		
    background-color: white;      
    color: red;         
    display: block;
    padding-top: 3px;
    padding-bottom: 1px;
    height:2em;
    line-height: 2em;
    text-align: center;
    font-family: Trebuchet MS;
    text-decoration:none;
    font-size: 0.8em;
    font-weight: bold;
}
a.boxmenu4:link {
    color: black;
    text-decoration: none;
    }
a.boxmenu4:visited {
	text-decoration: none;
	color: black;
	}
a.boxmenu4:hover {
	background-color: lightgrey;
	color: red;
	}
a.boxmenu4:active {
	color: red;
	}
.stopleft {
	clear:left;
}
@keyframes fondu{
    0%{background-image: url("http://www.cegecal.org/images/vues/caen03.jpg");}
    12%{background-image: url("http://www.cegecal.org/images/vues/caen04.jpg");}
    24%{background-image: url("http://www.cegecal.org/images/vues/memorial.jpg");}
    36%{background-image: url("http://www.cegecal.org/images/vues/caen05.jpg");}
    48%{background-image: url("http://www.cegecal.org/images/vues/bayeux01.jpg");}
    60%{background-image: url("http://www.cegecal.org/images/vues/bayeux03.jpg");}
    72%{background-image: url("http://www.cegecal.org/images/vues/honfleur02.jpg");}
    85%{background-image: url("http://www.cegecal.org/images/vues/lisieux01.jpg");}
    100%{background-image: url("http://www.cegecal.org/images/vues/falais01.jpg");}
}                                                    
/* navigation */
nav1{
	width:100%;
	background-color:#DC143C;
	height:40px;
	color: #fff;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	border-top:1px solid #DC143C;
        text-decoration:none; 
}

nav2{
	width:100%;
	background-color:gold;
	height:35px;
	color: #fff;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	border-top:1px solid gold;
        text-decoration:none; 
}

.deroulant{
	letter-spacing:1px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
	align-items:stretch;
	margin-left:18px;
	margin-right:18px;
}
.deroulant:last-child{
	margin-right:20px;
}
.fil_haut
{
	height:40px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
        text-transform: uppercase;
        text-decoration:none; 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight:bold;
	border-bottom:1px solid #DC143C;
}

.deroulant .fil_haut > a{
        color: #fff;
        text-decoration:none; 
}
.deroulant:hover {
	background-color:#fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
        text-decoration:none; 
}
.deroulant:hover .fil_haut a{
	color:#DC143C;
	font-weight:bold;
	padding-left:10px;
	padding-right:10px;
        text-decoration:none; 
}
.branche_selection{
	background-color:#fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.deroulant > .branche_selection > a{
       color:#DC143C;
       text-decoration:none;
       padding-left:10px;
       padding-right:10px;
}
/* nav sousmenu */
.sous{
	display:none;
	max-width:250px;
	background-color:#ffffff;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.16);
	padding-top:5px;
	text-shadow:1px 1px 1px #eee;
        text-decoration:none;  
}
nav1 > .deroulant:hover .sous{
        display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:stretch;
	z-index:10;	
}
nav2 > .deroulant:hover .sous{
        display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:stretch;
	z-index:10;	
}

.sous p{	
	background-color:#ffffff;
	border-bottom: 1px solid #cccccc;
        text-decoration:none;
	text-align:left;
	margin:5px;
	padding:5px;
}
.sous p:hover{
        background-color:#eee;
}
.sous a{
        color: #DC143C;
        text-decoration:none;
}

/*fin nav sousmenu*/

/* fin nav */