/* -- globals -- { */
@font-face {
	font-family: "HoboStd";
	src: url("fonts/HoboStd.eot");
	src: url("fonts/HoboStd.woff") format("woff"), url("fonts/HoboStd.woff2") format("woff2"), url("fonts/HoboStd.svg#filename") format("svg");
}
@font-face {
	font-family: "EuroStile";
	src: url("fonts/EuroStile.woff") format("woff"), url("fonts/EuroStile.woff2") format("woff2");
}
body {
	background:			black url(img/bg.jpg) fixed;
	margin:				0px; /* t r b l */
	color:				#2b4f9d;
	font-family:		EuroStile, Lucida, serif;
	font-size:			14px;
}
ul {
	list-style-position:	outside;
	-webkit-padding-start:	0px;
}
a {
	color:				cyan;
	text-decoration:	underline;
}
/* -- globals -- } */

/* -- header -- { */
div#page-header {
	margin-top:			0px;
	margin-bottom:		40px;
	width:				100%;
}
/* -- header -- } */
/* -- header logo -- { */
div#page-header > div#logo {
	float:				left;
	position:			absolute;
}
div#page-header > div#logo > img {
	width:				180px;
	height:				150px;
}
/* -- header logo -- } */
/* -- header caption -- { */
div#page-header > div#caption {
	color:				#0000AF;
	font-size:			28px;
	padding-top:		24px;
}
div#page-header > div#caption p {
	text-align:			center;
}
div#page-header > div#caption p:first-line {
	color:				#890050;
	text-shadow:		2px 2px 8px;
	font-family:		HoboStd, serif;
	font-size:			120%;
	font-weight:		bold;
	letter-spacing:		10px;
}
/* -- header caption -- } */
/* -- header infos -- { */
div#page-header > div#infos {
	float:				right;
	position:			absolute;
	right:				5px;
	top:				5px;
}
div#page-header > div#infos > span#contacts {
	float:				right;
	clear:				right;
	right:				0px;
	top:				0px;
	font-size:			16px;
}
div#page-header > div#infos > span#contacts p:first-child {
	color:				#0000AF;
}
div#page-header > div#infos > span#contacts p {
	color:				#890050;
	font-weight:		bold;
}
div#page-header > div#infos > span#contacts p#phone {
	font-size:			120%;
}
div#page-header > div#infos > span#contacts p img {
	width:				16px;
	height:				20px;
	vertical-align:		middle;
}
div#page-header > div#infos > span#contacts p#phone img {
	width:				10px;
}
div#page-header > div#infos > span#contacts a {
	color:				#890050;
}
div#page-header > div#infos > span#langs {
	float:				right;
	padding-right:		15px;
	top:				-3px;
}
div#page-header > div#infos > span#langs a {
	font-size:			12px;
	font-weight:		bold;
	text-decoration:	none;
	color:				#890050;
}
div#page-header > div#infos > span#langs a:hover,
div#page-header > div#infos > span#langs a.selected {
	text-decoration:	underline;
}
/* -- header infos -- } */

/* -- toolbar -- { */
div#toolbar {
	font-size:			20px;
	width:				100%;
}
div#toolbar > div {
	border-bottom:		1px dotted black;
	height:				46px; /* 44 + 1 + 1px border */
	margin-left:		10px;
	color:				black;
}
div#toolbar > span {
	position:			absolute;
	float:				right;
	clear:				right;
	width:				223px; /* width of meteo widget */
	font-size:			16px;
}
div#toolbar > div > ul {
	padding-left:		185px; /* width of logo */
}
div#toolbar > div > ul > li {
	float:				left;
	width:				140px;
	cursor:				pointer;
	text-align:			center;
	padding:			0px 0px 1px 1px; /* t r b l */
	border-right:		1px dotted black;
	border-top:			1px dotted black;
	border-radius:			10px 10px 0px 0px; /* (lt) (rt) (rb) (lb) */
	-moz-border-radius:		10px 10px 0px 0px;
	-webkit-border-radius:	10px 10px 0px 0px;
	color:				#890050;
	font-weight:		bold;
}
div#toolbar > div > ul > li:first-child {
	padding:			0px 0px 1px 0px; /* t r b l */
	border-left:		1px dotted black;
	width:				70px;
}
div#toolbar > div > ul > li:hover,
div#toolbar > div > ul > li.selected {
	color:				#FFFFFF;
	background:			#890050;
}
div#toolbar > div > ul > li > img {
	width:				44px; /* 46 - 1 - 1 */
	height:				44px;
	vertical-align:		middle;
}
/* -- toolbar -- } */

/* -- panes -- { */
div.panes {
	display:			none; /* initially invisible */
	margin:				10px 10px 10px 10px; /* t r b l */
	font-size:			22px;
/*	overflow:scroll;
	height:500px;*/
	width:				80%;
	max-width:			1100px;
	margin:				auto;
}
div.panes p {
	text-indent:		20px;
	text-align:			justify;
}
div.panes p img {
	margin:				10px 10px 10px 10px; /* t r b l */
}
div.panes ul {
	list-style-type:	square;
	margin-left:		50px;
}
/* -- panes -- } */

/* -- pane MAIN -- { */
div#pane_main {
}
/* -- pane MAIN -- } */

/* -- pane APPART + THINGS -- { */
div#pane_appart,
div#pane_things {
	width:				1080px; /* (10+250+10)*4 of li elements */
	padding:			5px 5px 5px 5px; /* t r b l */
}
div#pane_appart div,
div#pane_things div {
	clear:				both;
}
div#pane_appart ul,
div#pane_things ul {
	margin-left:		0px;
}
div#pane_appart ul li,
div#pane_things ul li {			/* client area for image is : 180 x 180 */
	float:				left;
	padding:			10px 10px 10px 10px; /* t r b l */
	margin-bottom:		15px;
	width:				250px;		/* actual item width  is 270 = 250 + 10 + 10 */
	height:				310px;		/* actual item height is 330 = 310 + 10 + 10 */
}
div#pane_appart ul li:hover,
div#pane_things ul li:hover {	/* width is the same : 270 = 250 + 9 + 1 + 9 + 1 */
	padding:			9px 9px 9px 9px; /* t r b l */
	-moz-border-radius:		15px; /* (lt) (rt) (rb) (lb) */
	-webkit-border-radius:	15px;
	border-radius:			15px;
	border:				1px dotted black;
}
div#pane_appart ul li > div,
div#pane_things ul li > div {
	width:				250px;		/* same as li element */
	font-size:			24px;
	text-align:			center;
}
div#pane_appart ul li > div a,
div#pane_things ul li > div a {	/* reset style for link text */
	color:				#0000AF;
	text-decoration:	initial;
}
div#pane_appart ul li > div img,
div#pane_things ul li > div img {
	vertical-align:		middle;
	width:				250px;		/* same as li element */
	height:				260px;		/* 310 - 2*24 */
}
/* -- pane APPART + THINGS -- } */

/* -- pane THINGS DETAIL + APPART DETAIL -- { */
div#pane_photos_detail > span { /* "RETOUR" link */
	color:				#F0F0F0;
	background:			#890050;
	cursor:				pointer;
}
div#pane_photos_detail > div#content > p {
	text-indent:		0px;
}
div#pane_photos_detail > div#content > p a {	/* links in detailed pane */
	color:				#2b4f9d;	/* as the text itself (specified in body tag) */
}
div#pane_photos_detail > div#content > img {	/* images in detailed pane */
	width:				300px; /* size of embedded images on metier detail pane */
	height:				350px;
	border-radius:		5px;
	cursor:				pointer;
	transition:			0.3s;
}
div#pane_photos_detail > div#content > img:hover {
	opacity:			0.7;
}
div#pane_photos_detail > div#content_modal {
	display:			none;	/* hidden by default */
	position:			fixed;	/* stay in place */
	z-index:			1;		/* sit on top */
	left:				0;		/* location of the box */
	top:				0;
	width:				100%;	/* full width */
	height:				100%;	/* full height */
	overflow:			auto;	/* enable scroll if needed */
	background-color:	rgb(0,0,0);			/* fallback color */
	background-color:	rgba(0,0,0,0.9);	/* black with opacity */
}
div#pane_photos_detail > div#content_modal > img {
	margin:				auto;
	display:			block;
	width:				80%;
	max-width:			700px;
	max-height:			90%;
}
div#pane_photos_detail > div#content_modal > div {
	margin:				auto;
	display:			block;
	width:				80%;
	max-width:			700px;
	text-align:			center;
	color:				#ccc;
	padding:			10px 0px 10px 0px; /* t r b l */
}
div#pane_photos_detail > div#content_modal > img,
div#pane_photos_detail > div#content_modal > div {
	-webkit-animation-name:		zoom;
	-webkit-animation-duration:	0.6s;
	animation-name:		zoom;
	animation-duration:	0.6s;
}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)}
	to {-webkit-transform:scale(1)}
}
@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}
div#pane_photos_detail > div#content_modal > span {
	float:				right;
	clear:				right;
	position:			absolute;
	top:				15px;
	right:				25px;
	color:				#f1f1f1;
	font-size:			40px;
	font-weight:		bold;
	transition:			0.3s;
}
div#pane_photos_detail > div#content_modal > span:hover,
div#pane_photos_detail > div#content_modal > span:focus {
	color:				#bbb;
	text-decoration:	none;
	cursor:				pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
	.modal-content {
		width:			100%;
	}
}
/* Next & previous buttons in modal image view */
div#pane_photos_detail > div#content_modal > a#prev,
div#pane_photos_detail > div#content_modal > a#next {
	cursor:				pointer;
	position:			absolute;
	top:				50%;
	width:				auto;
	margin-top:			-22px;
	padding:			16px;
	color:				white;
	font-weight:		bold;
	font-size:			18px;
	transition:			0.6s ease;
	border-radius:		0 3px 3px 0;
	text-decoration:	none;
}
/* Position the "next button" to the right */
div#pane_photos_detail > div#content_modal > a#next {
	right:				0;
	border-radius:		3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
div#pane_photos_detail > div#content_modal > a#prev:hover,
div#pane_photos_detail > div#content_modal > a#next:hover {
	background-color:	rgba(0,0,0,0.8);
}
/* -- pane THINGS DETAIL + APPART DETAIL -- } */

/* -- pane SITUATION -- { */
div#pane_situation div#contacts span {
	text-align:			center;
	float:				left;
	padding:			10px 5px 10px 5px; /* t r b l */
}
div#pane_situation > div {
	float:				left;
	clear:				both;
	width:				800px;
}
div#pane_situation > div a {
	color:				#2b4f9d;
}
div#pane_situation > div > h2 {
	font-family:		HoboStd, serif;
	font-size:			120%;
	font-weight:		bold;
}
/* -- pane SITUATION -- } */

/* -- pane VISITS -- { */
div#pane_visits {
}
/* -- pane VISITS -- } */

/* -- pane INFO -- { */
div#pane_info ul li a {
	color:				#2b4f9d;
}
/* -- pane INFO -- } */

/* -- pane TARIFS -- { */
div#pane_tarifs p {
	text-indent:		0px;
}
/* -- pane TARIFS -- } */

/* -- footer -- { */
div#footer {
	clear:				both;
}
div#footer > span {
	float:				right;
}
/* -- footer -- } */