/*****************************************************************************
 *	Screen.css
 *	Feuille de style pour la mise en forme générale du site à l'écran
 *
 *	Lunaweb(c)2008
 *****************************************************************************/

/* CSS Blueprint */
@import url(blueprint/screen.css);
/* Plug-ins Blueprint */
@import url(blueprint/plugins/sprites/sprite.css);
@import url(blueprint/plugins/buttons/buttons.css);
@import url(blueprint/plugins/css-classes/css-classes.css);

/* CSS Common */
@import url(common.css);

body {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	background: #453634;
}

/* alert boxes */
.notice, .error, .success { border-width: 1px 0;}

/**********************************************************
	TYPO
**********************************************************/
h1 { font-size: 2.5em; margin-bottom: 10px;}
body { font: 11px/18px 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; }

#overall-bg {
	width: 100%;
	background: white url('../media/img/design/pages/background.png') top left repeat-x;
}

/**********************************************************
	HEADER
**********************************************************/
#header {
	height: 100px;
	background: #092E4A;
	padding: 0;
	position: relative;
}

li#home-link a { display: block; position: absolute; background: transparent url('../media/img/design/pages/logo.png') top left no-repeat; width: 327px; height: 100px; top: 0px; left: 0px; text-indent: -9999px; }

#accessibility {
	float: right;
	font-size: 0.8em;
	padding: 0;
	margin: 5px 5px 0 0;
}
	#accessibility li {
		display: inline;
		margin-right: 7px;
	}
	#accessibility li a {
		color: #A3B2CD;
		text-decoration: none;
	}
	#accessibility li a:hover {
		border-bottom: 1px dotted #A3B2CD;
	}

#header ul#navlinks {
	list-style: none;
	position: absolute; padding: 0; margin: 0; top: 45px; left: 327px;
	width: 619px; height: 29px; background: transparent url('../media/img/design/pages/navlinks.png');
}
	#header #navlinks li { float: left; list-style: none; margin: 0; padding: 0; }
	#header #navlinks li a { display: block; height: 29px; margin:  0; background: transparent url('../media/img/design/pages/navlinks.png') top left no-repeat; }
	#header #navlinks li a span { position: absolute; left: -9999px; }
	#header #navlinks li#ta a 			{ width: 113px; background-position: 0px 0px;}
	#header #navlinks li#ta.active a,
	#header #navlinks li#ta a:hover		{ background-position: 0px -29px; }
	#header #navlinks li#tb a 			{ width: 222px; background-position: -113px 0px; }
	#header #navlinks li#tb.active a,
	#header #navlinks li#tb a:hover 	{ background-position: -113px -29px;  }
	#header #navlinks li#tc a 			{ width: 93px; background-position: -335px 0px; }
	#header #navlinks li#tc.active a,
	#header #navlinks li#tc a:hover 	{ background-position: -335px -29px;  }
	#header #navlinks li#td a 			{ width: 103px; background-position: -428px 0px; }
	#header #navlinks li#td.active a,
	#header #navlinks li#td a:hover 	{ background-position: -428px -29px;  }
	#header #navlinks li#te a 			{ width: 88px; background-position: -531px 0px; }
	#header #navlinks li#te.active a,
	#header #navlinks li#te a:hover 	{ background-position: -531px -29px;  }

#sidebar #navlinks li,
#user-menu li {
	list-style-type: none;
}

#sidebar #navlinks li a {
	color: #fff;
	text-decoration: none;
}
#sidebar #navlinks li a:hover {
	text-decoration: underline;
}

/**********************************************************
	WRAPPER & CONTAINER
**********************************************************/
.container {
	width: 958px;
}
#wrapper {
	border-right: 4px solid white;
	border-left: 4px solid white;
	border-bottom: 4px solid white;
	margin: 0;
	background: white url('../media/img/design/pages/wrapper-background.png') 0 0 repeat-y;
	padding: 0;
}
#banner {
	width: 950px;
	border: 4px solid white;
	margin: 0;
	height: 217px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-color: white;
	background-position: top left;
}
/**********************************************************
	CONTENT
**********************************************************/
#content {
	width: 674px;
	float: left;
	margin-right: 4px;
	font-size: 12px;
}
#content-header {
	height: 80px; /* = 100px */
	padding-top: 20px;
	width: 590px; /* = 674px */
	padding-left: 84px;
	background: transparent url('../media/img/design/pages/content-header.jpg') top left no-repeat;
	margin-bottom: 5px;
	position: relative;
}
	#content-header h2 {
		font-size: 1.8em;
		margin-bottom: 0.2em;
		color: #9F5B51;
	}
	#content-header p,
	#content-header a {
		color: #808487;
	}
	#content-header a:hover {
		text-decoration: none;
	}
	#content-header p.related {
		color: #26333F;
		position: absolute;
		bottom: 0.5em;
		right: 10px;
	}
	#content-header p.related a {
		color: #4E6619
	}
#content-content {
	padding: 0 10px;
}
/* links */
#content-content a {
	color: #4E6619;
}
#content-content a:hover {
	text-decoration: none;
}
/* pagination */
ul.pagination {
	text-align: right;
	margin-bottom: 5px;
	clear: both;
}
ul.pagination li {
	display: inline;
}
#content h3 {
	clear: both;
	color: #3B5998;
	border-bottom: 1px dotted #3B5998;
	position: relative;
}
span.date {
	display: block;
	position: absolute;
	right: 0;
	bottom: 2px;
	font-size: 0.6em;
	color: #666;
}


a.fancybox img {
	margin-top: 0;
	background: white;
	padding: 4px;
	border: 1px solid #ccc;
}
	.fancybox:hover img {
		border-color: #999;
	}

/**********************************************************
	SIDEBAR
**********************************************************/
#sidebar {
	padding: 15px 22px;
	width: 228px; /* = 272px */
	float: left;
	margin: 0;
	color: white;
}

#sidebar dl dt .ss_sprite {
	display: none;
}
#sidebar h3,
#sidebar h4 {
	color: white;
	margin-bottom: 0.5em;
}
#sidebar dl {
	margin-bottom: 0;
}
#sidebar dt a {
	color: #B8C4DF;
	text-decoration: none;
	background: transparent url('../media/img/design/ico/calendar_view_day.png') 2px 0 no-repeat;
	padding-left: 22px;
}
#sidebar dd a {
	color: white;
	text-decoration: none;
}
#sidebar p.knowmore {
	text-align: right;
	margin-top: 5px;
}
#sidebar p.knowmore a {
	color: #B8C4DF;
}
#sidebar p.knowmore a span.ss_sprite {
	padding-left: 16px;
}
#sidebar p.knowmore a:hover {
	text-decoration: none;
}

	#sidebar .slideshow {
		position: relative;
		width: 170px;
		height: 130px;
		margin: auto;
		margin-bottom: 0;
		overflow: hidden;
	}
	#sidebar .slideshow a {
		position: absolute;
		top: 0;
		left: 0;
		background: white;

		display: block;
		width: 170px;
		height: 130px;
	}
		#sidebar .slideshow a img {
			padding: 4px;
			border: 1px solid #999;
		}
		#sidebar .slideshow a:hover img {
			border-color: #ccc;
		}

/**********************************************************
	FOOTER
**********************************************************/
#footer {
	clear: both;
	width: 100%;
	background: #453634 url('../media/img/design/pages/footer-background.png') top left repeat-x;
	height: 117px;
	position: relative;
	padding: 0;
	text-align: center;
	margin: 0;
	font-size: 0.9em;
}
	#footer ul {
		height: 77px; /* = 117px */
		padding: 40px 0 0 150px;
		margin: 0 auto;
		background: transparent url('../media/img/design/pages/footer-bateau.png') 50px 0px no-repeat;
		width: 600px;
		text-align: left;
		position: relative;
	}
	#footer ul li {
		display: inline;
		margin-right: 10px;
		color: #BC7267;
	}
	#footer ul li a {
		text-decoration: none;
		color: #BC7267;
	}
	#footer ul li a:hover {
		border-bottom: 1px dotted #BC7267;
	}

/**********************************************************
	Iframe upload
**********************************************************/
#iframe_galerie iframe {
	display: block;
	width: 95%;
	margin: auto;
	height: 200px;
	overflow: hidden;
}

#frame-content {
	padding-top: 15px;
	background-color: #fff;
	border-top: 1px solid #ccc;
}

ul.admin-gallerie-upload {
	list-style-type: none;
}

ul.admin-gallerie-upload li {
	float: left;
	margin: 15px 5px 15px 26px;
	position: relative;
	width: 160px;
	height: 120px;
	border: 1px solid #4C4C4C;
}

ul.admin-gallerie-upload li.none {
	float: left;
	margin: 15px 5px 15px 26px;
	position: relative;
	width: auto;
	height: auto;
	border: 0;
}

ul.admin-gallerie-upload li.upload {
	background: #000000;
	opacity: 0.75;
	position: relative;
}

ul.admin-gallerie-upload li.upload img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

ul.admin-gallerie-upload ul.order_float {
	position: absolute;
	top: -1px;
	left: -26px;
}

ul.admin-gallerie-upload ul.order_float li {
	float: none;
	display: block;
	padding: 2px 0;
	margin: 0;
	border-bottom: 0;
	width: 25px;
	height: auto;
	text-align: center;
	border: 0;
	background: #4C4C4C;
}

ul.admin-gallerie-upload li.vignette {
	border-color: #092E4A;
}

ul.admin-gallerie-upload li.vignette ul.order_float li {
	background: #092E4A;
}

ul.admin-gallerie-upload ul.order_float li a {
	display: inline;
}

/**********************************************************
	Galerie photos
**********************************************************/
ul.galerie {
	list-style-type: none;
}

ul.galerie li {
	display: inline;
	float: left;
	margin: 20px;
	position: relative;
	width: 160px;
	height: 120px;
}

ul.galerie li span.legend {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	background: #d5ebf8;
	opacity: 0.8;
}

ul.galerie li span.legend span {
	display: block;
	text-align: center;
	font-size: 0.9em;
	width: 150px;
	padding: 0.5em 5px;
}

/**********************************************************
	Calendrier
**********************************************************/
table.calendar th {
	text-align: center;
}

table.calendar td.week {
	text-align: center;
	vertical-align: middle;
	background-color: #d5ebf8;
	color: #50309b;
}

table.calendar td {
	border: 1px solid #ccc;
}

table.calendar td.day {
	height: 100px;
	padding: 0;
	width: 14%;
	background: #fff;
}

table.calendar td.day.out-of-month {
	background: #eee;
}

table.calendar h3 {
	text-align: center;
	font-size: 1em;
	background-color: #d5ebf8;
	margin: 0;
	padding: 2px 0;
}

table.calendar h3.with-event {
	font-weight: bold;
}

table.calendar td.out-of-month h3 {
	background: #ccc;
	color: #222;
}

table.calendar td.today h3 {
	background: #83b8e4;
}

table.calendar ul.event-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

table.calendar ul.event-list li {
	margin: 0;
	padding: 3px 2px;
	border-bottom: 1px solid #ccc;
	background: #ccc;
}

table.calendar ul.event-list li ul.order_float li {
	display: block;
	padding: 2px 0;
	margin: 0;
	border-bottom: 0;
}

table.calendar a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}

table.calendar ul.event-list li ul.order_float li a {
	display: inline;
}

td.apercu {
	position: relative;
}

span.thumb {
	display: none;
}

#thumb-view {
	position: absolute;
	display: block;
	padding: 5px;
	background: #FFF6BF;
}

/**********************************************************
	Formulaire de Contact
**********************************************************/
#contact input,
#contact select,
#contact textarea,
#contact li.field-error input,
li.field-error select,
li.field-error textarea {
	border-width: 1px;
}

#contact label {
	padding-top: 7px;
}

#contact span.error-details {
	display: block;
	text-align: right;
	padding: 0 88px;
	color: #8a1f11;
	font-size: 0.9em;
	line-height: 1;
}
#contact span.error-details:before {content:"↓ ";}

#contact textarea {
	height: 200px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}

#contact span.obligatoire {
	float: none;
	display: inline;
	background: none;
	color: #8a1f11;
}