﻿/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{display:block}
mark, rp, rt, ruby, summary, time{display:inline }
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow: hidden}
/* Global properties ======================================================== */
body{background:#000;border:0;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#696969;line-height:22px;font-style:italic}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.css3{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);position:relative}
.body1{background:url(../images/bg.jpg) bottom center repeat}
.body2{background:url(../images/bg_top2.gif) bottom repeat-x}
.body3{background:#fff}
.body4{background:url(../images/bg.jpg) top center repeat}
.body5{background:url(../images/bg_top_img.jpg) center bottom no-repeat}
/* Global Structure ============================================================= */
.main {margin:0 auto;width:1100px}
/* ============================= main layout ====================== */
a{color:#696969;text-decoration:underline;outline:none}
a:hover{text-decoration:none}
h1{float:left}
h2{font-size:40px;font-style:normal;font-weight:400;line-height:1.2em;padding:38px 0 11px 0;color:#000;letter-spacing:-1px}
h2.under{border-bottom:1px solid #e5e5e5;margin-bottom:25px}
h3{font-size:26px;color:#000;line-height:1.2em;letter-spacing:-0px;padding-bottom:16px;font-weight:400;font-style:normal}
h3 span{display:block;margin-top:-7px}
* + html h3 span{margin-top:-25px}
h3 .dropcap{float:left;width:23px;height:23px;margin-top:0px;margin-right:10px;background:url(../images/dropcap1.gif) 0 0 no-repeat;font-size:38px;color:#fff;text-align:center;font-weight:700;line-height:1.2em;padding-top:6px}
h4{font-size:26px;line-height:1.2em;color:#fff;font-weight:400;padding:43px 0 15px 0}
h5{font-size:33px;color:#000;line-height:1.7em;padding:0 0 16px 0;font-weight:400;font-style:normal}
h5 .dropcap{float:left;width:56px;height:56px;margin-top:0px;margin-right:10px;background:url(../images/dropcap1.gif) 0 0 no-repeat;color:#fff;text-align:center}
h5 .dropcap strong{font-weight:700;font-size:34px;line-height:1.2em;display:block;padding-top:3px;letter-spacing:-2px}
h5 .dropcap span{font-weight:400;font-size:14px;line-height:1.2em;display:block;margin-top:-8px}
h6{font-size:20px;line-height:1.2em;color:#000;padding:0 0 5px 0;font-style:normal;font-weight:400}
h7{font-size:14px;color:orange}
h8{font-size:26px;line-height:1.2em;color:#fff;font-weight:400;padding:24px 0 15px 0}
h9{font-size:20px;line-height:1.2em;color:#189B4E;padding:0 0 5px 0;font-style:normal;font-weight:bold}
h10{font-size:15px;line-height:1.2em;color:#189B4E;padding:0 0 5px 0;text-decoration: underline;font-weight:bold}
h11{font-size:20px;line-height:1.2em;color:#000;padding:0 0 5px 0;font-style:normal;font-weight:400}
p{padding-bottom:22px}

/* ============================= header ====================== */
header{padding-top:0px;height:148px}
#logo{display:block;background:url(../images/odile_fond.png) 0 0 no-repeat;width:320px;height:127px;text-indent:-9999px}
#menu {float:right;padding-top:15px}
#menu li {float:left;padding-left:51px}
#menu li a{display:block;font:20px "Trebuchet MS", Arial, Helvetica, sans-serif;line-height:1.2em;color:#bbb;text-transform:uppercase;text-decoration:none;text-align:center;letter-spacing:-1px;height:79px;font-style:normal;font-weight:700}
#menu li a span{font-size:13px;line-height:1.2em;color:#666666;display:block;letter-spacing:-1px;margin-top:-3px;font-weight:normal}
#menu li a:hover, #menu .active a{color:#7FFF9F}
#menu li a:hover span, #menu .active a span{color:#fff}
#menu #nav1 a{background:url(../images/menu_icon1.gif) bottom center no-repeat}
#menu #nav1 a:hover, #menu #nav1.active a{background:url(../images/menu_icon1_active.gif) bottom center no-repeat}
#menu #nav2 a{background:url(../images/menu_icon2.gif) bottom center no-repeat}
#menu #nav2 a:hover, #menu #nav2.active a{background:url(../images/menu_icon2_active.gif) bottom center no-repeat}
#menu #nav3 a{background:url(../images/menu_icon3.gif) bottom center no-repeat}
#menu #nav3 a:hover, #menu #nav3.active a{background:url(../images/menu_icon3_active.gif) bottom center no-repeat}
#menu #nav4 a{background:url(../images/menu_icon4.gif) bottom center no-repeat}
#menu #nav4 a:hover, #menu #nav4.active a{background:url(../images/menu_icon4_active.gif) bottom center no-repeat}
#menu #nav5 a{background:url(../images/menu_icon5.gif) bottom center no-repeat}
#menu #nav5 a:hover, #menu #nav5.active a{background:url(../images/menu_icon5_active.gif) bottom center no-repeat}
/* ============================= content ====================== */
#content{padding-top:50px;padding-bottom:36px}
#content2{padding-bottom:50px}
.pad_left1{padding-left:50px;}
.pad_left2{padding-left:40px}
.pad_bot1{padding-bottom:8px}
.pad_bot2{padding-bottom:40px}
.marg_right1{margin-right:20px}
.link1{color:#60b000;font-style:normal}
.testimonials{width:100%;position:relative;z-index:1;height:210px;overflow:hidden}
#testimonials div{background:url(../images/bg_testimonials.gif) 0 bottom no-repeat #f5f5f5;padding:25px 27px 53px 29px}
#testimonials span{display:block;padding:0 0 0 11px;font-style:normal}
.testimonials li{height:210px}
.up, .down{position:absolute;z-index:2;bottom:8px;right:0;width:32px;height:32px;display:block}
.up{right:33px;background:url(../images/marker_up.gif) 0 0 no-repeat}
.down{background:url(../images/marker_down.gif) 0 0 no-repeat}
.up:hover, .down:hover{background-position:bottom}
.color1{color:#000}
.color2{color:#60b000}
.list1{background:url(../images/line_hor1.png) 10px 0 no-repeat;padding-top:1px}
.list1 li{background:url(../images/line_hor1.png) 10px bottom no-repeat;line-height:29px}
.list1 a{color:#696969;text-decoration:none;font-style:normal;padding-left:14px;background:url(../images/marker_1.gif) 0 6px no-repeat}
.list1 a:hover{color:#fff}
.address{background:url(../images/line_hor1.png) 0px 0 no-repeat;padding-top:1px}
.address li{background:url(../images/line_hor1.png) 0px bottom no-repeat;line-height:29px;font-style:normal}
.address span{padding-left:4px;float:left;width:62px}
.address a{color:#fff}
#icons{background:url(../images/line_hor1.png) 23px 0 no-repeat;padding-top:1px}
#icons li{background:url(../images/line_hor1.png) 23px bottom no-repeat;line-height:29px}
#icons a{color:#696969;text-decoration:none;font-style:normal;display:inline-block}
#icons img{float:left;margin-right:9px;margin-top:5px}
#icons a:hover{color:#fff}
/*--- tabs begin ---*/
.tabs {}
.tabs ul.nav {float:left;padding-left:372px;padding-bottom:24px}
.tabs ul.nav li{padding-right:1px;float:left}
.tabs ul.nav li a{display:block;position:relative;width:32px;height:32px;font-size:19px;color:#fff;line-height:32px;background:#60b000;text-decoration:none;text-align:center}
.tabs ul.nav .selected a, .tabs ul.nav  a:hover{background:#696969}
.tabs .tab-content {display:none}
/*--- tabs end ---*/
#address span{float:left;width:80px}
/* ============================= footer ====================== */
footer {padding:34px 0 38px 0;font-style:normal;color:#696969;text-align:center}
footer a{color:#fff}
footer a:hover{}
/* ============================= forms ============================= */
#ContactForm {margin-top:-4px}
#ContactForm span{width:109px;float:left;line-height:26px}
#ContactForm .wrapper{min-height:30px}
#ContactForm .textarea_box{min-height:275px;width:100%;overflow:hidden;padding-bottom:6px}
#ContactForm {}
#ContactForm {}
#ContactForm a{margin-left:10px;float:right;width:62px;font-style:normal;font-weight:bold;color:#fff;height:32px;line-height:32px;text-decoration:none;background:#60b000;text-align:center}
#ContactForm a:hover{background:#080808}
#ContactForm .input {width:269px;height:18px;border:1px solid #e5e5e5;background:#fff;padding:3px 5px;color:#696968;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;font-style:italic;margin:0}
#ContactForm textarea {overflow:auto;width:549px;height:258px;border:1px solid #e5e5e5;background:#fff;padding:3px 5px;color:#696968;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;font-style:italic;margin:0}
#newsletter{}
#newsletter .input{background:#fff;padding:6px 18px;width:184px;height:18px;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;font-style:inherit;color:#b4b4b4;margin:0}
#newsletter .input:focus{color:#696969}
#newsletter .wrapper{min-height:40px}
#newsletter a{float:right;width:90px;height:32px;background:#fff;line-height:32px;color:#000;font-weight:bold;text-align:center;font-style:normal;text-decoration:none}
#newsletter a:hover{background:#60b000;color:#fff}

/* Menu */
ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:750px;}
ul.sdt_menu a{
	text-decoration:none;
	outline:none;}
ul.sdt_menu li{
	float:left;
	width:175px;
	height:85px;
	position:relative;
	cursor:pointer;}
ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;}
ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;}
ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;}
ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#A70111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:5px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;}
ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:22px;
	float:left;
	clear:both;}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:10px;
	letter-spacing:1px;}
ul.sdt_menu li div.sdt_box{
	display:block;
	position: relative;
	width:70px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;}
ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;}

/* slideshow */

h1, h2 {
	text-align:center;
	margin-top:0;
}
h1 {
	padding: 1em 0;
	margin-left: 1.5em;
	font-size: 2.5em;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
}
h1 span {
	display:block;
	margin: 0.75em 0 0 -2em;
	line-height: 1em;
	font-size: 0.55em;
}
h1 .cursive {
	margin: 0 0 0 -3em;
	font-size: 1.1em;
	line-height:0.5em;
	color: #bd9b83;
}
figure { 
	display: inline-block; 
}
a {
	text-decoration: none;
	border-bottom: 1px solid #bc9d88;
	color: #8f6b51;
}
a:hover,
a:focus {
	border-bottom: 1px dashed #bc9d88;
}
.sread {
	position: absolute;
	left:-9999px;
}
.cursive {
	font-family: 'Mr Dafoe', cursive;
}
.center {
	text-align: center;
}

#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* slideshow contenair */
#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
/* timeline base */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
}

@-webkit-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@-moz-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}

#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
	
	-webkit-animation: slider 32s infinite;
	-moz-animation: slider 32s infinite;
	animation: slider 32s infinite;
}
.sl_i:target ~ #slideshow .slider {
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	transition: left 1s;
}
.sl_command:target ~ #slideshow .slider {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}
#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
	background: url(img/slider_chromatotherapie.jpg) 0 0 no-repeat, url(img/slider_reflexologie.jpg) 640px 0 no-repeat, url(img/slider_fleurs.jpg) 1280px 0 no-repeat;
}
.sl_i:target ~ #slideshow .c_slider {
	-webkit-transition: background 1s;
	-moz-transition: background 1s;
	transition: background 1s;
}

#slideshow figure {
	position:relative;
	padding:0; margin:0;
}

@-webkit-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@-moz-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	
	-webkit-animation: figurer 32s infinite;
	-moz-animation: figurer 32s infinite;
	animation: figurer 32s infinite;
}

@-webkit-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@-moz-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}

#slideshow figcaption {
	position:absolute;
	padding: 20px 20px; margin:0;
	left:0; right:0; bottom: 5px;
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #000;
	background: rgba(255,255,255,0.7);
	border-top: 1px solid rgb(225,225,225);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	
	-webkit-animation: figcaptionner 32s infinite;
	-moz-animation: figcaptionner 32s infinite;
	animation: figcaptionner 32s infinite;
}

@-webkit-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}
@-moz-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 3px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	
	-webkit-animation: timeliner 32s infinite;
	-moz-animation: timeliner 32s infinite;
	animation: timeliner 32s infinite;
}

/* dots styles */
.dots_commands  {
	position: relative;
	top: 32px;
	padding:0; margin:0;
	text-align:center;
}
.dots_commands li {
	display:inline;
	padding:0; margin:0;
	list-style:none;
}
.dots_commands a {
	position: relative;
	display:inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
	border-bottom:0;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	
	z-index:25;
}
.dots_commands li + li a {
	z-index:10;
}
@-moz-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: " ";
	width: 8px; height: 8px;
	background: #bd9b83;
	z-index:20;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
.dots_commands li:first-child a:after {
	-webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
	-moz-animation: dotser 32s infinite; /* thanks moz ! :D */
	animation: dotser 32s infinite;
}
.dots_commands li:first-child a:before {
	display:none;
}




/* EXPLANATIONS */


#main .download {
	text-align: center;
	margin: 3em 0 1em;
	line-height: 1.35em;
}
#main .download a {
	position: relative;
	display:inline-block;
	padding: 8px 22px 14px;
	border: 0;
	color: #fff;
	background:#8a796d;
	text-shadow: -1px -1px 0 #60544c;
	font-weight:bold;
	overflow: hidden;
	
	-moz-box-shadow: 0 6px 0 #403c3a;
	box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;
	border-radius: 12px;
	
	-webkit-transition: color .5s;
	-moz-transition: color .5s;
	transition: color .5s;
}
#main .download .arrow {
	position: relative;
	top: 5px;
	display: inline-block;
	padding: 1px 6px;
	margin-right: 10px;
	color: #cabfb6;
	font-size: 22px;
	background: rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
@-webkit-keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
@-moz-keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
@keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
#main .download a:hover,
#main .download a:focus {
	color: #cbbfb5;
}
#main .download a:hover .arrow,
#main .download a:focus .arrow {
	-webkit-animation: downloader .4s forwards;
	-moz-animation: downloader .4s forwards;
	animation: downloader .4s forwards;
}

#main .download .file {
	display: block;
	font-weight:normal;
	font-size: 0.6em;
	margin-left: 40px;
	line-height: 0.55em;
}
#main .download .already {
	font-size: 0.7em;
	line-height: 2.4em;
}
#main .download .nb {
	font-weight:bold;
}

#main {
	padding: 10px;
	color: #8a796d;
	font-family: Helvetica, Arial, sans-serif;
	text-align:left;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
}
#main h2, #main h3 {
	margin-top: 45px;
	font-size: 2em;
	font-family: "Amaranth", cursive;
	text-align:left;
}
#main h3 { 
	margin-top: 25px;
	font-size: 1.4em;
}
#main p {
	line-height: 1.85em;
	margin-top: 2em;
}
#main  .col2,
#main .col2 {
	position: relative;
	margin-top: 1em;
	-webkit-column-count: 2;
	-webkit-column-gap: 3em;
	-moz-column-count: 2;
	-moz-column-gap: 3em;
	column-count: 2;
	column-gap: 3em;
}
#main .col2 + .col2 {
	margin-top: 3em;
}
#main p + p:before {
	position: absolute;
	content: "*";
	width: 100%;
	text-align: center;
	top: -1.2em;
	font-size: 2em;
	color: #e1d7cf;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
footer {
	padding: 25px;
	margin-bottom: 38px;
	border: 1px solid rgba(0,0,0,0.1);
	background: rgba(0,0,0,0.1);
	color: #777;
	text-align: center;
}
footer p {
	margin:0.5em 0;
}
footer .sep {
	display: inline-block;
	margin: 0 1em;
}

