/*===================================================================*/
/*============================ CLEAR ================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend/*,
table, caption, tbody, tfoot, thead, tr, th, td*/ {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul { list-style: none; }
ol, ul, li { border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/*table { border-collapse: collapse; border-spacing: 0; }*/
ul { list-style: disc; }
ol {list-style: decimal; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear { clear: both; }
.hidden { display: none; }
.error_message, .info_message, .indicator_message { padding: 15px 10px; margin: 20px; }
.error_message { background: #F4CACA; border: 2px solid #CC0000; color: #CC0000; }
.info_message { background: #CAF4CA; border: 2px solid #090; color: #090; }
.indicator_message { background: #F4F4F4; border: 2px solid #999; color: #999; }
.error_message ul, .info_message ul, .indicator_message ul { list-style: none; }
#divgmap {
	height: 400px;
}
/*===================================================================*/
/*============================ GLOBAL ===============================*/
body, table { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #666; }
body { text-align: center; background: url('../images/design/body_bg.gif') repeat-x; }
/*===================================================================*/
/*=========================== CONTAINER =============================*/
.container { width: 911px; text-align: left; margin: 0 auto; }
/*===================================================================*/
/*============================ HEADER ===============================*/
.header { background: url('../images/design/header_bg.png') no-repeat; height: 71px; position: relative; }
.header h1 a { display: block; height: 71px; width: 330px; }
.header h1 a span { display: none; }
.menu_top {
	position: absolute;
	top: 5px;
	right: 0;
}
.menu_top ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu_top li {
	float: left;
}
.menu_top li a {
	display: block;
	height: 40px;
	line-height: 40px;
	padding-left: 23px;
	margin-left: 17px;
	color: #FFF;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: 0 center;
}
.menu_top li.home a 	{ background-image: url("../images/design/menu_top_home.png"); }
.menu_top li.carte a 	{ background-image: url("../images/design/menu_top_carte.png"); }
.menu_top li.photos a 	{ background-image: url("../images/design/menu_top_photos.png"); }
.menu_top li.downloads a { background-image: url("../images/design/menu_top_downloads.png"); }
.menu_top li.sitemap a 	{ background-image: url("../images/design/menu_top_sitemap.png"); }
.menu_top li.contact a 	{ background-image: url("../images/design/menu_top_contact.png"); }
.menu_top li a:hover {
	text-decoration: underline;
}
/*===================================================================*/
/*========================= CONTAINER BIS ===========================*/
.container_bis { margin-top: -26px; background: url('../images/design/container_bis_bg.gif') repeat-y right 0; min-height: 200px; }
.left {
	width: 625px;
	float: left;
	margin: 15px 20px 0 26px !important;
	margin: 15px 20px 0 12px;
}
.right { width: 240px; float: left; position: relative; left: 0 !important; left: 2px; }
/*===================================================================*/
/*=============================== LEFT ==============================*/

/******** LANGS ********/
.langs {
	height: 11px;
	line-height: 11px;
	font-size: 11px;
	text-align: right;
	font-weight: bold;
	color: #999;
	margin-bottom: 14px;
}
.langs a { color: #999; text-decoration: none; }
.langs a:hover { color: #666; text-decoration: underline; }

/******** MENU PRINCIPAL ********/
.menu_principal { margin-bottom: 25px; }
.menu_principal ul { padding: 0; list-style: none; margin: 0; }
.menu_principal li {
	float: left;
	height: 65px;
	width: 65px;
	margin: 0 5px 0 0;
}
.menu_principal li.service_citoyens { margin:0; }
.menu_principal span { display: none; }
.menu_principal li a {
	height: 100%;
	width: 100%;
	display: block;
	background: red;
	background: url('../images/design/menu_principal_bg.png') no-repeat 0 0;
}

.menu_principal li.haus_hellef a 		{ background-position: -65px 0; }
.menu_principal li.am_gartchen a 		{ background-position: -130px 0; }
.menu_principal li.service_citoyens a 	{ background-position: -195px 0; }
.menu_principal li.klammschoul a 		{ background-position: -260px 0; }
.menu_principal li.holzfrenn a 			{ background-position: -325px 0; }
.menu_principal li.internet_stuff a 	{ background-position: -390px 0; }
.menu_principal li.centre_formation a 	{ background-position: -455px 0; }
.menu_principal li.bummelbus a 			{ background-position: -520px 0; }

.menu_principal li.fpe a:hover, .menu_principal li.fpe a.active 							{ background-position: 0 -65px; }
.menu_principal li.haus_hellef a:hover, .menu_principal li.haus_hellef a.active 			{ background-position: -65px -65px; }
.menu_principal li.am_gartchen a:hover, .menu_principal li.am_gartchen a.active 			{ background-position: -130px -65px; }
.menu_principal li.service_citoyens a:hover, .menu_principal li.service_citoyens a.active 	{ background-position: -195px -65px; }
.menu_principal li.klammschoul a:hover, .menu_principal li.klammschoul a.active 			{ background-position: -260px -65px; }
.menu_principal li.holzfrenn a:hover, .menu_principal li.holzfrenn a.active 				{ background-position: -325px -65px; }
.menu_principal li.internet_stuff a:hover, .menu_principal li.internet_stuff a.active 		{ background-position: -390px -65px; }
.menu_principal li.centre_formation a:hover, .menu_principal li.centre_formation a.active 	{ background-position: -455px -65px; }
.menu_principal li.bummelbus a:hover, .menu_principal li.bummelbus a.active 				{ background-position: -520px -65px; }

/******** PHOTOSLIDE ********/
.photoslide {
	height: 240px;
	border-top: 5px solid #002d59;
	border-bottom: 5px solid #f5a42a;
	position: relative;
}
.photoslide .slideshow {
	position: absolute;
	top: 0;
	left: 0;
	height: 240px;
	width: 385px;
	overflow: hidden;
}
.photoslide .logo {
	position: absolute;
	top: 0;
	right: 0;
	width: 240px;
	height: 240px;
	background: url('../images/design/logos.jpg') no-repeat 0 0;
}
.fpe .photoslide .logo 				{ background-position: 0 0; }
.haus_hellef .photoslide .logo 		{ background-position: -240px 0; }
.am_gartchen .photoslide .logo 		{ background-position: -480px 0; }
.service_citoyens .photoslide .logo { background-position: -720px 0; }
.klammschoul .photoslide .logo 		{ background-position: -960px 0; }
.holzfrenn .photoslide .logo 		{ background-position: -1200px 0; }
.internet_stuff .photoslide .logo 	{ background-position: -1440px 0; }
.centre_formation .photoslide .logo { background-position: -1680px 0; }
.bummelbus .photoslide .logo 		{ background-position: -1920px 0; }

/******** MENU ********/
.menu { height: 30px; background: #002d59; margin-top: 2px; }

/******** CONTENU ********/
.contenu { margin-top: 40px; }
.contenu p { margin-bottom: 10px; }
.contenu p, .contenu ul, .contenu ol { line-height: 20px; }
.contenu a { color: #002d59; }
.contenu a:hover { color: #f5a42a; }
.contenu h1, .contenu h2, .contenu h3, .contenu h4, .contenu h5, .contenu h6 { color: #333; margin: 15px 0 10px; font-size: 14px; }
.contenu h1, .contenu h2 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: normal;
	border-bottom: 2px solid #f5a42a;
	padding-bottom: 10px;
	margin: 0 0 13px;
}
.contenu h3 { font-size: 16px; }
.contenu h5 { font-style: italic; }
.contenu h6 { font-style: italic; font-weight: normal; }
.contenu #divgmap h1 { font-size: 12px; font-weight: bold; text-align: center; }
.contenu #divgmap { font-size: 11px; }
.contenu #divgmap .gmnoprint .gmnoprint { min-height: 200px !important; }
/******** TOOLS & COPYRIGHT ********/
#tools {
	text-align: right;
	clear: both;
	font-size: 12px;
	padding: 20px 0;
	color: #999;
}
#tools a, .copyright a { color: #999; text-decoration: none; }
#tools a:hover, .copyright a:hover { color: #333; text-decoration: underline; }
.copyright {
	font-size: 12px;
	color: #999;
	text-align: center;
	padding: 30px 0 25px;
}
/*===================================================================*/
/*=============================== RIGHT =============================*/

/******** SEARCH ********/
.searchcontainer {
	background: url('../images/design/search_bg.png') no-repeat 0 0;
	position: relative; height: 40px;
	margin: 16px 0;
}
.search .keywords {
	padding-left: 8px;
	border: none;
	width: 188px;
	display: block;
	position: absolute;
	padding-top: 8px;
	top: 4px;
	left: 5px;
	color: #7b7c7e;
	background: none;
}
.search .submit {
	background: url('../images/design/search_button.png') no-repeat 0 0;
	cursor: pointer;
	border: none;
	width: 31px;
	height: 28px;
	padding: 0;
	position: absolute;
	top: 5px;
	right: 5px;
}

/******** BOX ********/
.right .box { margin-bottom: 25px; }
.right .box h2 {
	background-color: #002d59;
	border-top: 5px solid #f5a42a;
	color: #FFF;
	height: 35px;
	line-height: 35px;
	padding: 0 20px 0 40px;
	margin-bottom: 21px;
}
.right .content_box { padding: 0 19px; font-size: 12px; }

/******** NEWS ********/
.rightnews h2 { background: url('../images/design/news_icon.png') no-repeat 18px center; }
.rightnews .new { margin-bottom: 26px; }
.rightnews .date {
	font-style: italic;
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 3px;
}
.rightnews h3 a { color: #333; text-decoration: none; }
.rightnews h3 a:hover { text-decoration: underline; }
.rightnews p { line-height: 18px; }
.rightnews a { color: #666; }
.rightnews a:hover { color: #333; }

/******** NEWSLETTER ********/
.rightnewsletter label { display: block; margin-bottom: 8px; }
.rightnewsletter input {
	width: 190px;
	margin-bottom: 8px;
	padding: 6px 4px;
	border: 1px solid #666;
}
.rightnewsletter a { color: #333; }
.rightnewsletter h2 { background: url('../images/design/newsletter_icon.png') no-repeat 18px center; }
/*===================================================================*/
/*========================== FORMULAIRE =============================*/
form .field { margin-bottom: 15px; }
form .field label {
	display: block;
	width: 180px;
	text-align: right;
	float: left;
	margin-right: 10px;
	padding-top: 3px;
	//padding-top: 4px;
}
form .field input { width: 200px; }
form .field textarea { width: 280px; }
form .field .info {
	margin: 2px 0 0 190px;
	color: #999;
	font-style: italic;
	font-size: 11px;
	clear: both;
}
form .field .error, form .error .info { color: #C00; }
form .error input, form .error textarea { border: 1px solid #C00; }
form .submit  { padding: 10px 0 0 190px; border-top: 1px solid #F5A42A; }
form .field .code {
	display: block;
	clear: both;
	margin-left: 190px; 
	padding-top: 3px;
}
/*===================================================================*/
/*=========================== DOCUMENTS =============================*/
.doc_liste ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
}
.doc_liste ul .document {
	padding: 0 10px;
	line-height: 20px;
	position: relative;
	padding: 4px 10px;
}
.doc_liste ul .desc { cursor: pointer; }
.doc_liste ul .separated { border-bottom: 1px solid #CCC; }
.doc_liste ul .document span a { text-decoration: none; font-weight: bold; }
.doc_liste ul .document span img { margin-right: 5px; }
.doc_liste ul .document .type { font-size: 11px; margin-left: 5px; }
.doc_liste ul .document .poid {
	font-size: 11px;
	position: absolute;
	right: 10px;
}
.doc_liste ul .document .poid img { margin: 0 0 0 5px; }
.doc_liste ul .document .description {
	display: block;
	padding: 0 5px;
	font-style: italic;
}
/*===================================================================*/
/*=========================== PAGINATION ============================*/
div.pagination, div#sequence { margin-bottom: 40px; padding: 1px; }
div.pagination a, div#sequence a, div.pagination span, div#sequence span {
	color: #FFF;
	dislay: block;
	float: left;
	text-align: center;
	height: 20px;
	line-height: 20px;
	padding: 0 7px;
	text-decoration: none;
	margin-right: 1px;
	background-color: #BBB;
}
div.pagination a:hover, div#sequence a:hover { color: #FFFFFF; text-decoration: none; background-color: #F5A42A; }
div#sequence a img { position: relative; top: 6px; }
div.pagination span, div#sequence span { background-color: #374D99; color: #fff; }
/*===================================================================*/
/*====================== GALLERY & REFERENCES =======================*/
.gallery_liste, .gallery_photos, .gallery .infos {
	padding: 10px;
	border-bottom: 1px solid #CCC;
	margin-bottom: 20px;
}
.gallery_liste .photo, .references_liste .photo { float: left; margin-right: 10px; }
.gallery_liste .photo a, .gallery_photos .photo a {
	display: block;
	width: 100px;
	height: 100px;
	padding: 10px;
	text-align: center;
	overflow: hidden;
}
.gallery_liste .infos { float: left; width: 322px; }
.gallery_liste .infos h3 { font-size: 18px; margin-bottom: 10px; }
.gallery_liste .infos a { text-decoration: none; }
.gallery_liste .infos a:hover { text-decoration: underline; }
.gallery_liste .infos p { margin-bottom: 0; text-align: justify; }
.gallery_photos .photo { float: left; margin: 7px 15px; }
.gallery .infos p strong { color: #FFB000; }
.gallery .nav_gallery { position: relative; margin-bottom: 20px; text-align: center; }
.gallery .nav_gallery .separe { display: none; }
.gallery .nav_gallery a {
	text-decoration: none;
	background: #DDD;
	border: 1px solid #AAA;
	padding: 4px 10px;
	color: #333;
	margin: 0 4px;
}
.gallery .nav_gallery a:hover { color: #000; border: 1px solid #000;}
/*===================================================================*/
/*============================== CATALOGUE ==========================*/
div.contenu div.catalogue div.catalogue_liste {
	background-image: url('../images/design/catalogue_liste_item_bg.jpg');
	background-position: bottom left;
	background-repeat: no-repeat;
	width: 176px;
	height: 200px;
	overflow: hidden;
	float: left;
	text-align: center;
	position: relative;
	cursor: pointer;
}
div.contenu div.catalogue div.catalogue_liste img { margin-top: 10px; }
div.contenu div.catalogue div.catalogue_liste p, div.contenu div.catalogue div.catalogue_liste h3 {
	font-size: 11px;
	margin: 0px;
	line-height: 14px;
	height: 14px;
	overflow: hidden;
}
div.contenu div.catalogue div.catalogue_liste h3 {
	color: #FFB000;
	font-weight: bold;
	text-transform: uppercase;
	position: absolute;
	bottom: 48px;
	width: 140px;
	left: 21px;
}
div.contenu div.catalogue div.catalogue_liste h3 a { text-decoration: none; }
div.contenu div.catalogue div.catalogue_liste h3 a:hover { color: #000; text-decoration: underline; }
div.contenu div.catalogue div.catalogue_liste p.shortdescription {
	color: #000;
	position: absolute;
	bottom: 34px;
	width: 140px;
	left: 21px;
}
div.contenu div.catalogue div.catalogue_liste p.price {
	color: #FFB000;
	font-weight: bold;
	position: absolute;
	bottom: 20px;
	width: 140px;
	left: 21px;
}
div.contenu div.catalogue div.catalogue_liste a.add_to_cart { display: none; }
div.contenu div.catalogue_fiche div.fiche { background-image: url('../images/design/catalogue_fiche_bg.jpg'); background-position: bottom center; background-repeat: no-repeat; padding-bottom: 20px; height: auto !important; height: 257px; min-height: 257px; }
div.contenu div.catalogue_fiche div.photos { width: 200px; float: left; margin-right: 20px; margin-left: 30px; }
div.contenu div.catalogue_fiche div.detail {
	width: 330px;
	margin-left: 10px;
	float: left;
	margin-bottom: 30px;
}
div.contenu div.catalogue_fiche p.link { font-size: 11px; text-align: right; clear: both; }
div.contenu div.catalogue_fiche div.detail h3, div.contenu div.catalogue_fiche div.detail p.price, div.contenu div.catalogue_fiche div.detail p.description { margin: 0; margin-bottom: 10px; }
div.contenu div.catalogue_fiche div.detail h3 {
	font-size: 13px;
	color: #FFB000;
	font-weight: bold;
	text-transform: uppercase;
}
div.contenu div.catalogue_fiche div.detail p.price { font-size: 16px; color: #FFB000; font-weight: bold; }
div.contenu div.catalogue_fiche div.detail a.add_to_cart {
	color: #FFFFFF;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	text-align: right;
	padding-right: 10px;
	background: url('../images/design/catalogue_fiche_addtocart.jpg') no-repeat;
	display: block;
	width: 185px;
	line-height: 29px;
	height: 29px;
}
div.contenu div.catalogue_fiche div.detail a.add_to_cart:hover { text-decoration: underline; }
div.contenu div.catalogue_fiche p.link { padding: 20px 0 20px 90px; }
div.contenu div.catalogue_fiche p.link a {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: right;
	padding-right: 10px;
	background: url('../images/design/catalogue_fiche_link.jpg') no-repeat;
	display: block;
	width: 150px;
	line-height: 23px;
	height: 23px;
	float: left;
	margin-right: 25px;
}
div.contenu div.catalogue_fiche p.link a:hover { text-decoration: underline; }