@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300);
/* Stylesheet: Ottersthal : Fonts Modified On 2022-01-28 11:01:39 */
 /*****************************************************************/
/********  COMMONS  **********************************************/
/*****************************************************************/


body {
    height: 100%;
    background-color: #E1E0D6;
    margin: 0px;
    padding: 0px;
    font-family: "Open sans","Tahoma";
    font-size: 13px;
    background-image: linear-gradient(bottom, rgb(238,242,248) 22%, rgb(204,217,233) 61%);
    background-image: -o-linear-gradient(bottom, rgb(238,242,248) 22%, rgb(204,217,233) 61%);
    background-image: -moz-linear-gradient(bottom, rgb(238,242,248) 22%, rgb(204,217,233) 61%);
    background-image: -webkit-linear-gradient(bottom, rgb(238,242,248) 22%, rgb(204,217,233) 61%);
    background-image: -ms-linear-gradient(bottom, rgb(238,242,248) 22%, rgb(204,217,233) 61%);

    background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.22, rgb(238,242,248)),
	color-stop(0.61, rgb(204,217,233))
    );
}

a {
    color: #6E6E6E;
}

#page {
   
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    padding: 0px;
    /*box-shadow: 1px 1px 15px #555;*/
}

#large_header{
    height: 136px;
    width:100%;
    background-color:silver;
    position: absolute;
    top:0px;
    z-index:-1;
background-image: linear-gradient(left , rgb(0,135,184) 22%, rgb(99,175,207) 61%);
background-image: -o-linear-gradient(left , rgb(0,135,184) 22%, rgb(99,175,207) 61%);
background-image: -moz-linear-gradient(left , rgb(0,135,184) 22%, rgb(99,175,207) 61%);
background-image: -webkit-linear-gradient(left , rgb(0,135,184) 22%, rgb(99,175,207) 61%);
background-image: -ms-linear-gradient(left , rgb(0,135,184) 22%, rgb(99,175,207) 61%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	right bottom,
	color-stop(0.22, rgb(0,135,184)),
	color-stop(0.61, rgb(99,175,207))
);
}

#content {
    position: relative;
    height: 420px;
}

#logotop{
    /*-moz-box-shadow:  0 6px 6px rgba(120, 120, 120, 0.4);
    -webkit-box-shadow: 0 6px 6px rgba(120, 120, 120, 0.4);
    box-shadow: 0 6px 6px rgba(120, 120, 120, 0.4);*/


}
#main {
    background-color: white;
    padding: 0px;
}

/* FORMS */

#cntnt01searchinput {
    width: 100px;
    border-radius: 2px;
    border: 0px;
    margin-left: 20px;
    padding: 4px;
}


/*****************************************************************/
/********  HEADER   **********************************************/
/*****************************************************************/

#headerWrapper {
    height: 136px;
    position: relative;
    padding: 0px;
}

#headerLeft {
    float: left;
    position: relative;
    width: 320px;
    height: 140px;
    left: 0px;
    z-index: 1000;
}

#headerRight {
    position: relative;
    float: right;
    right: 0px;
    top: 0px;
    width: 240px;
    height: 100px;
    z-index: 10000;
}

/*****************************************************************/
/********  MENU  *************************************************/
/*****************************************************************/

#menu {
    z-index: 1500;
    padding: 4px 6px 4px 18px;
    letter-spacing: 0.02em;
    width:940px;
    color:white;
    background-color: #B93100;
    position: relative;
 
float:left;
    z-index: 1000;
}


#contact_bloc {
    padding: 20px;
}


img {
    border: 0;
}

.clear {
    clear: both;
}




/*****************************************************************/
/********  FooTER **********************************************/
/*****************************************************************/
#footer_line {
    position: relative;
    height: 3px;
    margin: 0px;
    bottom:15px;
    z-index: 1000;
    background-color: #6799FB;
}
#footer {
    position: relative;
    height: 15px;
    margin: 0px;
    bottom:10px;
    padding: 10px;
    z-index: 1000;
    font-size: 10px;
    color: white;
    background-color: #404040;
}

#footer a {
    color: white;
    font-size: 11px;
    font-family: "Trebuchet MS";
    text-decoration: none;
}

#footer_right{
top: -25px;
float:right;position:relative;
}


/*****************************************************************/
/* Style Contenus*/
/*****************************************************************/
h1 {
color: #B93100;
font-family: "open sans";
font-size: 32px;
text-transform: uppercase;
text-align: left;
line-height: 30px;
}

.smalltextmenu {
    font-size: 80%;
    color: silver;
    line-height: 10px;
}

#header_right a {
    color: white;
    text-decoration: none;
}

.cms_textfield {
    margin-top: 8px;
    margin-left: -1px;
    margin-bottom: 5px;
    width: 200px;
}


/*****************************************************************/
/************ MENU LATERAL ***************************************/
/*****************************************************************/

#menuLateral {
    position: relative;
    top: -8px;
    float: left;
    left: 10px;
    margin: 0px 0 0 5px;
    width: 232px;
}

#menuLateralBody {
    min-height: 200px;
    margin: 0px;
    padding-top: 20px;
}

#menuLateralBody ul {
    margin: 0px;
    padding-left: 10px;
    list-style-type: none;
}

#meuLateralBody li {
    color: white;
   
}

#menuLateralBody a {
    color: white;
    padding-left: 14px;
    font-family: "ubuntu","Tahoma";
    font-size: 12px;
    text-decoration: none;
    border-left: 1px solid #EEE;
}

#menuLateralBody a:hover {
    padding-left: 5px;
    font-weight: bold;
    color: #FFF;
    color: black;
    border-left: 10px solid black;
}

#menuLateralBody .pageSelected {
    color: black;
}

/*****************************************************************/
/******************  BREADCRUMB  *********************************/
/*****************************************************************/

.breadcrumb {
margin-top: 20px;
font-size: 10px;
background-color: rgb(250, 250, 250);
padding: 5px;
border-radius: 5px;
}

.breadcrumb a {
    font-size: 12px;
    color: #444;
    font-family: "ubuntu","Tahoma";
    text-decoration: none;
}


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

.shadow-boxy{
margin:20px;
-moz-box-shadow: 10px 10px 5px #656565;
-webkit-box-shadow: 10px 10px 5px #656565;
-o-box-shadow: 10px 10px 5px #656565;
box-shadow: 10px 10px 5px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#6565', Direction=135, Strength=5);
}

.hidden {
    display: none;
}

.imageItem {
    width: 80px;
    height: 80px;
    margin: 20px;
}

.roundedImg {
    border-radius: 5px;
}





.span4{
float:left;
width:240px;

margin:10px;
padding:20px;
}

#manifestations{
margin-left: 10px;
background-color: #FFFDFC;
border: 1px solid silver;
}
}
#activites{
background-color:#F5F1F2;
}
#horaires{
background-color:#FFFFFF;
height:300px;
border:1px dotted silver;
}

.logo_text1{
font-size: 18px;
font-style: italic;
color: white;
font-family: georgia;
}
.logo_text2{
font-size: 36px;
color: white;
line-height: 46px;
font-family: arial;
}


#news_left_panel h1{
background-color: #0087B8;
color: white;
padding: 5px;
font-size: 14px;
font-family: verdana;
font-style: normal;
font-weight: normal;
letter-spacing: 1px;
}


#sitemap ul{
margin-left:20px;
padding-left:20px;
}
/* Stylesheet: Ottersthal : Layout Modified On 2020-06-05 15:06:37 */
/* 
 NEWSBAR

*/
.ruban{
position:relative;
left:-20px;
top:10px;
height:40px;
width:55px;
background:url(http://i.imgur.com/9pLFIKW.png) no-repeat;
} 

.ruban-actualites{
position:relative;
left:-20px;
top:0px;
height:70px;
width:55px;
background:url(http://www.cc-saverne.fr/communes/eckartswiller2013/_templates/eckartswiller/images/actualites_municipales_ruban.png) no-repeat;
}   

#newsBar>ul {
    padding: 0px;
    margin: 10px;
}

#newsBar li {
    list-style-type: none;
    padding: 5px;
}

#newsBar ul>li>a>span {
    display: block;
    padding: 5px;
    border-left: 2px solid #E4EDDC;
}

#newsBar ul>li>a {
    color: white;
    text-decoration: none;
}

#newsBar ul>li>a:hover>span {
    border-left: 4px solid #333;
    color: #333;
    background-color: #FFF;
}
/* Stylesheet: Ottersthal : News Modified On 2013-04-29 14:51:34 */
 /* jQuery Dropdown Menu */

#jsddm
{	
	margin: 0;
	padding: 0; 

	z-index:3000;
	}
        #jsddm ul
	{	
		
	}
	#jsddm li
	{	
		float: left;
		list-style: none;
		line-height:14px;
		font: 13px  "Open sans";

	}

	#jsddm li a
	{	
		display: block;
		padding: 5px 12px;
		line-height:16px;
		text-decoration: none;
		text-align:center;
		/*width: 120px;*/
		color: white;
		white-space: nowrap;
		margin-right:5px;
		z-index:2000;
		font-size:16px;
		font-family:"Open sans";

	}

	#jsddm li a.current{
		background:#1F668D;
		background-color: rgb(30, 61, 81);
		}

	#jsddm li a:hover
	{	
		background: #FFF;
		z-index:2000;
		background:#1F668D;
		background-color: #3A7EAE;
		}
		
		#jsddm li ul
		{	
			margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			/*border-top: 1px solid #24313C;*/
			z-index:2000;}
		
			#jsddm li ul li
			{	
				float: none;z-index:4000;
				display: inline;}
			
			#jsddm li ul li a
			{	
				width: auto;
				background: #000;
				background-color: white;		
				text-align:left;
				z-index:2600;
				color: black;
				border-radius:0px;
				border:0px;
				font-size:13px;
				line-height:24px;
				font-family:"Ubuntu";
				font-family:"Helvetica Neue";
				font-size:12px;
				font-family:"Ubuntu";}
			
			#jsddm li ul li a:hover
			{	
				background: #24313C;
				border-radius:0px;
				z-index:2500;
				}

			#jsddm li ul li.currentpage a
			{	
				color:red;
				}


/* Stylesheet: Ottersthal : Menu Modified On 2016-01-28 10:41:20 */
 
a {
 color: #111;
}
/* used for demo page, wrapping content inside 960px */
#wrapper {
 width: 960px;
 margin: auto;
}
/* you might not need this if you use reset */
ul, li {
 margin: 0;
 padding: 0;
}
/* border of thumbnail */
#menu a img {
 border: 1px solid #aaa;
}
/* style of 1st level ul */
ul#menu {
 /*background: #7d7e7d; */ /* fallback for not so smart browser */
 /* gradient as background */
 /*background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
  background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
 background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
 background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
 background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
*/
 display: block;
 margin: auto;
 border-radius: 4px; /* rounded border */
}
/* 1st level list is floating for horizontal menu */
#menu li {
 float: left;
 position: relative;
 list-style: none;
 margin: 0 0 0 5px;
 padding: 0;
 /* transition effect for background */
 transition: background .2s ease-in-out;
 -webkit-transition: background .2s ease-in-out;
 -moz-transition: background .2s ease-in-out;
 -o-transition: background .2s ease-in-out;
}
/* links and sectionheaders style */
#menu li a, #menu li span.sectionheader {
 display: block;
 color: #111;
 line-height: 35px;
 padding: 0 16px;
 text-decoration: none;
}
/* 1st level links style */
#menu li a.menuitem,
#menu li span.menuitem.sectionheader {
 text-transform: uppercase;
 color: #FFF;
font-size:13px;

}
/* hover or current style */
#menu li:hover, #menu li.current {
 /*background: #CCC;*/

}
/* description is wrapped in info span */
#menu span.info {
 display: block;
 line-height: 1;
 display: block;
 font-size: 11px;
 padding-bottom: 10px;
 text-transform: none;
 text-shadow: none;
 color: #aaa;
 font-weight: normal;
}
/* 2nd level */
#menu .submenu {
 position: absolute;
 z-index: 100;
 width: auto;
 top: -9999em; /* hide first */
 left: -9999em;
 opacity: 0; /* set opactiy to 0 for transtion effect */
 width: 240px; /* flyout will depend on this, if you change it dont forget about #menu .submenu li.flyout ul */
 /* animate dropdown */
 transition: width .4s ease-in-out;
 -webkit-transition: width .4s ease-in-out;
 -moz-transition: width .4s ease-in-out;
 -o-transition: width .4s ease-in-out;
/* border-radius: 0 0 6px 6px;*/
 transition: opacity .4s ease-in-out;
 -webkit-transition: opacity .4s ease-in-out;
 -moz-transition: opacity .4s ease-in-out;
 -o-transition: opacity .4s ease-in-out;
}
/* position wrapping div on hover */
#menu li:hover .submenu {
 top: 35px;
 opacity: .98;
 left: 0;
}
/* if parent has class right, position it to right */
#menu li:hover.right .submenu {
 left: auto;
 right: 0;
}
/* width of mega dropdown, you can add more classes like this, depending on your site structure */
#menu li.two_col:hover .submenu {
 width: 400px;
}
/* reset transition animations */
#menu li li {
 transition: none;
 -webkit-transition: none;
 -moz-transition: none;
 -o-transition: none;
}
/* style of 2nd level unordered list */
#menu .submenu > ul {
 background: #FFF;
 border-radius: 0 6px 6px 6px;
 padding: 10px 0;
 box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.3);
color:#000;
width: 500px;
}

#menu .submenu ul li {
 display: block;
 float: left;
}
/* if 2nd level item has no children or has class flyout */
#menu .submenu ul li.no-sub,
#menu .submenu ul li.flyout,
#menu .submenu ul li.flyout li {
 float: none;
}
/* position 3rd level flyout */
#menu .submenu li.flyout ul {
 position: absolute;
 width: 240px;
 top: -9999em;
 left: -9999em;
}
#menu .submenu li.flyout:hover ul {
 position: absolute;
 left: 230px;
 top: 0;
}
/* style of second level links */
#menu li ul li a.menuitem,
#menu li ul li span.menuitem.sectionheader,
#menu li ul li a, #menu li ul li span.sectionheader {
 display: block;
 padding: 0 10px;
 line-height: 24px;
 text-shadow: none;
 transition: color .4s ease-in-out;
 -webkit-transition: color .4s ease-in-out;
 -moz-transition: color .4s ease-in-out;
 -o-transition: color .4s ease-in-out;
}
/* uppercase for mega dropdown parent items */
#menu li ul li a,
#menu li ul li.sectionheader span {
 text-transform: uppercase;
 display: block;
}
/* remove uppercase if it's not mega dropdown */
#menu li ul li.no-sub a,
#menu li ul li.flyout a,
#menu li ul li.no-sub span.sectionheader,
#menu li ul li.flyout span.sectionheader {
 text-transform: none;
}
/* link color of sublevels */
#menu li ul li a:hover,
#menu li ul li a.current {
 color: #B93100;
}
#menu .submenu li ul {
 position: static;
 display: block;
 box-shadow: none;
 border-radius: 0 0 6px 6px;
}
#menu .submenu li ul li {
 float: none;
}
/* width of mega dropdown columns, should fit inside #menu li.two_col:hover .submenu width  */
#menu .two_col .submenu ul li {
 width: 210px;
}
/* clearfix - clearing floats */
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html .clearfix { zoom: 1;}/* IE6 */
*:first-child+html .clearfix { zoom: 1;}/* IE7 */



li.submenu_label> a > span {
color: #0087B8;
background-color: #F8F7F7;
font-size: 13px;
padding: 3px 10px;
margin-bottom: 15px;
display: block;
}

li.submenu_label > ul.clearfix > li.no-sub > a{
border-left: 2px solid silver;
margin-left: 6px;
margin-bottom: 10px;
}
/* Stylesheet: Ottersthal : MegaMenu Modified On 2016-02-09 12:39:53 */
/* VOS SERVICE */

#vosservicesPanel{

width: 580px;
padding-left: 400px;
height: 360px;
background-color: rgb(242, 243, 243);
float: right;
position: absolute;

display: block;
padding: 20px;
font-size: 11px;
padding-left: 39px;
border-left: 322px solid silver;

z-index: 99;

}

#vosservicesPanel ul{
 list-style:none;
}

#vosservicesPanel a{
 text-decoration:none;
display:block;
padding:3px;
}

#vosservicesPanel a:hover{
 border-left:3px solid #B93100;
background-color:white;
}

#linkVosServices{
float: right;
background-color: rgba(255, 255, 255, 0.6);
color: rgb(245, 239, 239);
width: 133px;
padding: 10px;
font-style: italic;
text-align: center;
}
#linkVosServices a{
color: rgb(245, 239, 239);
}
/* Stylesheet: Ottersthal : VosServices Modified On 2013-10-23 14:43:51 */