header, nav, section, article, aside, foter { display: block; }

html, body { background: #8C0059 url(images/pageBG.jpg); font: 10pt Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { margin-bottom: 20px; font: 18pt Arial, sans-serif; color: #3a280b; }
h2 { margin-bottom: 10px; font: 16pt Arial, sans-serif; color: #3a280b; }
h3 { margin-bottom: 5px; font: 14pt Arial, sans-serif; color: #3a280b; }
p { margin-bottom: 15px; line-height: 14pt; text-align: justify; }
p.purple { padding: 10px 20px; background: #8C0059; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: left; color: #FFF; }
a { color: #8C0059; }

ul { margin: 0 0 10px 10px; line-height: 20px; }
ul li {  }
ul li img.thumbnail { float: left; width: 100px; height: 100px; margin: 0 10px 10px 0; }
ul li div.listContent { margin-left: 120px; }


#top { position: relative; margin: 0 auto 30px auto; width: 810px; height: 90px; }
#logo { position: absolute; top: 10px; left: 0; }
#topMenu { display: none; }

#wrapper { position: relative; margin: 0 auto 10px auto; width: 810px; height: 610px;
	-moz-box-shadow: 0px 0px 30px 0px #3a280b;
	-webkit-box-shadow: 0px 0px 30px 0px #3a280b;
	-o-box-shadow: 0px 0px 30px 0px #3a280b;
	box-shadow: 0px 0px 30px 0px #3a280b;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#3a280b, Direction=NaN, Strength=10);
}

#mainMenu { z-index: 100; position: absolute; top: 0; left: 0; height: 30px; }
#mainMenu ul { display: block; margin: 0; width: 100%; height: 30px; line-height: 30px; list-style: none; }
#mainMenu ul li { display: block; float: left; height: 30px; }
#mainMenu ul li a { display: block; padding: 0 15px; height: 30px; text-decoration: none; color: #FFF; }
#mainMenu ul li.active a { z-index: 9999; color: #000; }

.linkActive { z-index: 0; position: absolute; top: 0; left: 0; width: auto; height: 30px; }
.linkActiveLeft { float: left; width: 20px; height: 30px; background: url(images/mainMenuButtonBG.png) top left no-repeat; }
.linkActiveMiddle { float: left; width: 40px; height: 30px; background: url(images/mainMenuButtonBG.png) center left repeat-x; }
.linkActiveRight { float: right; width: 20px; height: 30px; background: url(images/mainMenuButtonBG.png) bottom right no-repeat; }

.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 5px 10px;
	background: -moz-linear-gradient(
		top,
		#c70081 0%,
		#8c0059);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#c70081),
		to(#8c0059));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #660042;
	-moz-box-shadow:
		0px 3px 0px rgba(77,1,50,1),
		inset 0px -1px 1px rgba(199,0,129,1);
	-webkit-box-shadow:
		0px 3px 0px rgba(77,1,50,1),
		inset 0px -1px 1px rgba(199,0,129,1);
	box-shadow:
		0px 3px 0px rgba(77,1,50,1),
		inset 0px -1px 1px rgba(199,0,129,1);
	text-shadow:
		0px -1px 0px rgba(102,0,66,1),
		0px 1px 0px rgba(255,255,255,0.2);
}

#container { z-index: 200; overflow: hidden; position: relative;  width: auto; height: 600px; border: 5px solid #eae5df; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
#pages { overflow: hidden; position: relative; top: 0; left: 0; width: 100%; height: 600px; }

#pages .page { position: absolute; top: 0; left: 0; width: 100%; background: #FFF; }
#pages .dynpage { overflow: hidden; }
#pages .dynpage .content { overflow: auto; padding: 20px; height: 560px; }
#pages .smallpage .content { padding: 20px; }
#pages .homepage { height: 600px; }

#footer { padding: 5px 0; margin: 0 auto; width: 810px; font: italic 9pt Georgia, georgia, sans-serif; text-shadow: #000 1px 1px 1px; color: #FFF; }
#footer a { border-bottom: 1px dotted #FFF; text-decoration: none; color: #FFF; }

#copyright { float: left; }
#powered { float: right; }

.clear { clear: both; }

.accordion h2 { padding-bottom: 5px; border-bottom: 1px dotted #EEE; cursor: pointer; }
.accordion ul li { padding-left: 15px; background: url(images/list-tick.gif) 0 5px no-repeat; }

.photo-block, .link-block { float:left; height: 150px; }
.photo-block ul { position: relative; display: block; margin: 0; width: 100%; height: 150px; list-style: none; }
.photo-block ul li { position: absolute; top: 0; left: 0; width: 100%; height: 150px; }


.link-block { background: #650040; }
.link-block a { display: block; padding: 20px 0; width: 100%; height: 110px; text-shadow: #000 1px 1px 1px; text-decoration: none; color: #FFF; }
.link-block a:hover { background: #9f116b; }
.link-block a span { display: block; padding: 0 20px; text-align: right; }
.link-block a span.big { display: block; padding: 0 20px; font-size: 13pt; }


.block-20 { width: 20%; }
.block-50 { width: 50%; }
.block-60 { width: 60%; }


/**************/
/* Responsive */
/**************/

/* 768 - Tablette */
@media screen and (max-device-width: 768px) {
	
	body {  }
   
   #top { width: 750px; }
	#topMenu { display: none; }
	#wrapper { width: 750px; height: 556px }
	#container { height: 556px; }
	#pages { height: 556px; }
	#footer { width: 750px; }
   
   .block-20, .block-50, .block-60 { height: 138px; }
    
   .block-20 { width: 20%; }
	.block-50 { width: 50%; }
	.block-60 { width: 60%; }
    
   .block-20 ul li img { width: 100%; height: auto; }
	.block-50 ul li img { width: 100%; height: auto; }
	.block-60 ul li img { width: 100%; height: auto; }
}

/* 480 - Tablette */

@media screen and (max-device-width: 480px) {
	
	#top { width: 470px; height: 40px; }
	#logo { width: 300px; }
	#logo img { width: 300px; height: auto; }
	
	#topMenu { z-index: 9999; display: block; position: absolute; top: 0px; right: 0; border: 1px solid #FFF; background: #a62677; -moz-box-shadow: 0px 0px 10px 0px #000000; -webkit-box-shadow: 0px 0px 10px 0px #000000; -o-box-shadow: 0px 0px 10px 0px #000000; box-shadow: 0px 0px 10px 0px #000000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10); }
	#topMenu h3 a { display: block; padding: 10px; background: #650040; text-align: center; text-decoration: none; color: #FFF; }
	#topMenu ul { display: none; padding: 0; margin: 0; }
	#topMenu ul li { background: #eae5df; font-size: 22pt; }
	#topMenu ul li a { display: block; padding: 25px 20px; width: 400px; text-decoration: none; color: #000; }
	
	#wrapper { width: 470px; height: auto; }
	#container { height: auto; }
	#pages { width: 460px; height: auto; }
	#pages .page { position: relative; width: 470px; }
	#footer { width: 470px; text-align: center; }
	#copyright { float: none; margin-bottom: 10px; }
	#powered { float: none; }
}


/* 320 - Smartphone portrait */
@media screen and (max-device-width: 320px) {
	
	.homepage { display: none; }
	
	#top { width: 300px; height: 50px; }
	#logo { width: 200px; }
	#logo img { width: 200px; height: auto; }
	#mainMenu, .linkActive { display: none; }
	
	#wrapper { position: relative; top: auto; left: auto; margin: 0 auto; width: auto; height: auto; }
	#container { height: auto; border: none; }
	#pages { width: 100%; height: auto; }
	#pages .page { position: relative; width: 100%; }
	
	#footer { width: 300px; text-align: center; }
	#copyright { float: none; margin-bottom: 10px; }
	#powered { float: none; }
}

/* 320 - Smartphone portrait RETINA */
@media screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
	body { font-size: 18pt; }
	h1 { font-size: 36pt; }
	h2 { font-size: 28pt; }
	p { text-align: left; line-height: 28pt; }
	ul { line-height: 28pt; }
	
	#mainMenu, .linkActive, .homepage { display: none; }
	
	#top { position: relative; margin: 0 auto; width: 95%; height: 110px; }
	#logo { position: absolute; top: 20px; left: 0; width: 455px; height: auto; }
	#logo img { width: 455px; height: auto; }
	
	#topMenu { z-index: 9999; display: block; position: absolute; top: 20px; right: 0; border: 1px solid #FFF; background: #a62677; -moz-box-shadow: 0px 0px 20px 0px #000000; -webkit-box-shadow: 0px 0px 20px 0px #000000; -o-box-shadow: 0px 0px 20px 0px #000000; box-shadow: 0px 0px 20px 0px #000000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=20); }
	#topMenu h3 a { display: block; padding: 15px; background: #650040; text-align: center; text-decoration: none; color: #FFF; }
	#topMenu ul { display: none; padding: 0; margin: 0; }
	#topMenu ul li { background: #eae5df; font-size: 22pt; }
	#topMenu ul li a { display: block; padding: 25px 20px; width: 400px; text-decoration: none; color: #000; }
	
	#wrapper { width: 100%; height: auto; }
	#container { position: relative; width: 100%; height: auto; background: #FFF; }
	#pages { width: 100%; height: auto; }
	#pages .page { position: relative; }
	
	#pages .dynpage { left: 0; }
	#pages .dynpage .content { height: auto; }
	
	#footer { width: 100%;font-size: 14pt; }
	#copyright { float: none; margin-bottom: 10px; width: 100%; }
	#powered { float: none; width: 100%; }
}