/*
----------------------------------------------------------------------------------------

CONTENTS - GLOBAL.CSS
-----------------------------------------
1. RESET
2. ROOT
3. CORE TYPOGRAPHY
4. LINKS
5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
6. DETAILS
7. BROWSER AND NON-SEMANTIC STYLING
*/



/* 1. RESET
----------------------------------------------------------------------------------------*/
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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size:100%;
	font: inherit;
	vertical-align: baseline;
	}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	}
	
/*COULEURS
un 		#FFFFFF;
deux 	#6CB388;
trois	#74B2B2;
quatre	#D581A0;
cinq	#84927D;
six		#D9E9EC;	
*/
	
/* 2. ROOT
----------------------------------------------------------------------------------------*/
html {
	overflow-y: scroll;
	height: 100%;
	}
	
body{
	width: 100%;
	height: 100%;
	padding-bottom:4em;   /* Height of the footer */
	background: url("http://v1.olympes.ch/images/template/rubans-longs-2014.png") 53% 2em fixed no-repeat #E7E0DF;
	
}	

#container {
	position: relative;
	min-height: 100%;
	background-color: rgb(238, 238, 238);
	box-shadow: 0 0 10px #444;
	width: 26em;
	margin: 0 auto;
	padding: 2em 2em 0 2em;
}

footer{
	width: 30em;
	height: 10em;
	background-color: rgb(95, 87, 82);
	position: absolute ;
	bottom: -2em;
	margin-left: -2em;
}


/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
/*img, embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }*/


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
	font-family: BrandonGrotesque-Regular, sans-serif;
	font-weight:  normal;
	font-style: normal;
	font-size: 1.25em;
	color: black;
	}

h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
	}

p, ul, ol, dl, blockquote {
	font-size: 1em;
	line-height: 1.618em;
	margin-bottom: 1.618em; 
	max-width: 30em; /* Optimal width for long-form text */
	}
	
ul { list-style-type: disc; margin-left: 1em; }
ol { list-style-type: decimal; margin-left: 1em; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0;}

b, strong {font-family:BrandonGrotesque-Bold;}
i, em {font-family:BrandonGrotesque-Bold;}
small { font-size: 80%; }
sup{vertical-align: super;font-size: .8em;
}
sup a{
	font-size: .8em;
}

/* 4. LINKS
----------------------------------------------------------------------------------------*/
a, a:visited {
	outline: none;
	color: black;
	text-decoration: none;
}
	
a:active, a:focus {
	outline: none;
}

/*COULEURS
un 		#FFFFFF;
deux 	#6CB388;
trois	#74B2B2;
quatre	#D581A0;
cinq	#84927D;
six		#D9E9EC;	
*/


#main.un a{
	border-bottom: 1px solid #522566; /*FFFFFF*/
}

#main.deux a{
	border-bottom: 1px solid #6CB388; /*6CB388*/
}

#main.trois a{
	border-bottom: 1px solid #74B2B2; /*74B2B2*/
}

#main.quatre a{
	border-bottom: 1px solid #D581A0; /*D581A0*/
}

#main.cinq a{
	border-bottom: 1px solid #84927D; /*84927D*/
}

#main.six a{
	border-bottom: 1px solid #522566; /*D9E9EC*/
}


#main a:hover{
	outline: none;
	text-decoration:none;
	padding:0 .25em;
	color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 0px 2px #444;
}

#main.un a:hover{
	background-color: #522566;
	color: #fff;
}

#main.deux a:hover{
	background-color: #6CB388;
}

#main.trois a:hover{
	background-color: #74B2B2;
}

#main.quatre a:hover{
	background-color: #D581A0;
}

#main.cinq a:hover{
	background-color: #84927D;
}

#main.six a:hover{
	background-color: #D9E9EC;
	color: #522566;
}


/*COULEURS
un 		#FFFFFF;
deux 	#6CB388;
trois	#74B2B2;
quatre	#D581A0;
cinq	#84927D;
six		#D9E9EC;	
*/


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/
#header h1{
	letter-spacing:0.05em ;
	text-transform: uppercase;
	border-top: 8px solid #522566;
	border-bottom: 8px solid #522566;
	text-align: center;
	font-size: 3em;
	font-family: BrandonGrotesque-Black;
	margin-bottom: .4em;
	line-height: 1.25em;
}

#header h1 a{
	display: block;
	text-decoration: none;
	color: #522566;
	}

#header h1 a:hover{
	text-decoration: none;
}

/*menu principal*/
#main-nav{
	width: 9em;
	position: absolute;
	top: 2em;
	left: -9em;
}

#main-nav li{
	display: block;
	height: 3em;
	
	}

#main-nav li a{
	display: block;
	height: 100%;
	-webkit-border-top-left-radius: 2em;
	-webkit-border-bottom-left-radius: 2em;
	-moz-border-radius-topleft: 2em;
	-moz-border-radius-bottomleft: 2em;
	border-top-left-radius: 2em;
	border-bottom-left-radius: 2em;
	color: #522566;
	text-decoration: none;
	text-transform: uppercase;
	padding-left: 2em;
	text-indent: -9000px;
	margin-left: 7em;
	-webkit-transition: margin-left 0.2s ease-out;
	-moz-transition: margin-left 0.2s ease-out;
	-o-transition: margin-left 0.2s ease-out;
	transition: margin-left 0.2s ease-out;
	font: 15px/60px BrandonGrotesque-Bold;
	overflow: hidden;
}

#main-nav li a:hover, #main-nav li a.actif{
	text-indent: 0;
	margin-left: 0;
}

#main-nav li a:visited{
	color: #522566;
}

#main-nav li.un a{
	background-color: #FFFFFF;
}

#main-nav li.deux a{
	background-color: #6CB388;
}

#main-nav li.trois a{
	background-color: #74B2B2;
}

#main-nav li.quatre a{
	background-color: #D581A0;
}

#main-nav li.cinq a{
	background-color: #84927D;
}

#main-nav li.six a{
	background-color: #D9E9EC;
}

/*COULEURS
un 		#FFFFFF;
deux 	#6CB388;
trois	#74B2B2;
quatre	#D581A0;
cinq	#84927D;
six		#D9E9EC;	
*/


/*menu secondaire*/
#sub-nav{
	margin-bottom: 1.5em;
}
#sub-nav h1{
	display:inline;
	letter-spacing:0.05em ;
	text-transform: uppercase;
	font-size: 1em;
	font-family: BrandonGrotesque-Bold;
	padding-bottom: .1em;
}

#sub-nav h1.un{
	color: #522566;
	border-bottom: 4px solid #522566;
}

#sub-nav h1.deux{
	color: #6CB388;
	border-bottom: 4px solid #6CB388;
}

#sub-nav h1.trois{
	color: #74B2B2;
	border-bottom: 4px solid #74B2B2;
}

#sub-nav h1.trois a{
	color: rgb(95, 87, 82);;
}

#sub-nav h1.trois a:hover{
	color: #74B2B2;
}

#sub-nav h1.quatre{
	color: #D581A0;
	border-bottom: 4px solid #D581A0;
}

#sub-nav h1.cinq{
	color: #84927D;
	border-bottom: 4px solid #84927D;
}

#sub-nav h1.six{
	color: #522566;
	border-bottom: 4px solid #522566;
}

#sub-nav h2{
	letter-spacing:0.05em ;
	text-transform: uppercase;
	font-size: 1em;
	font-family: BrandonGrotesque-Bold;
	text-decoration: none;
	color: rgb(95, 87, 82);
	margin-bottom: 1.3em;
	margin-top:1.3em;
}

#sub-nav nav{
	width: 100%;
	margin-top: 1.3em;
	margin-bottom: 1.3em;
	}

#sub-nav nav li{
	display: inline;
	float: left;
}

#sub-nav nav li a{
	letter-spacing:0.05em ;
	text-transform: uppercase;
	font-size: 1em;
	font-family: BrandonGrotesque-Bold;
	text-decoration: none;
	color: rgb(95, 87, 82);
	padding-bottom: .1em;
	margin-right: 1.3em;
	border-bottom: 4px solid rgb(95, 87, 82);
	}
	
#sub-nav.trois nav li a:hover{
	padding-bottom: .1em;
	border-color: #74B2B2;
	}
	
#sub-nav.trois nav li a.actif{
	color: #74B2B2;
	border-color: #74B2B2;
	}
	

#sub-nav.cinq nav li a:hover{
	padding-bottom: .1em;
	border-color: #84927D;
	}


#main{
	padding-bottom: 10em;
}	

#main h2{
	letter-spacing:0.05em ;
	text-transform: uppercase;
	font-size: 1em;
	font-family: BrandonGrotesque-Bold;
	text-decoration: none;
	color: rgb(95, 87, 82);
	padding-bottom: .3em;
	border-bottom: 1px solid rgb(95, 87, 82);
	margin-bottom: 1.3em;
}

#main h3{
	letter-spacing:0.05em ;
	text-transform: uppercase;
	font-size: 1em;
	text-decoration: none;
	color: rgb(95, 87, 82);
	padding-bottom: .3em;
}

#main h3 sup{
	text-transform: none;
}

#main li{
	list-style-image: url(http://www.olympes.ch/images/template/bullet.gif);
	list-style-type: disc;
}


#main.un p.strong, #main.un ul.strong{
	border-top: 1px dashed #d5b538;
	border-bottom: 1px dashed #d5b538;
}

#main.deux p.strong, #main.deux ul.strong{
	border-top: 1px dashed #6CB388;
	border-bottom: 1px dashed #6CB388;
}

#main.trois p.strong, #main.trois ul.strong{
	border-top: 1px dashed #74B2B2;
	border-bottom: 1px dashed #74B2B2;
}


#main ul li ul{
	margin-bottom: 0;
}

#main ul li ul li{
	list-style-image: url(http://www.olympes.ch/images/template/bullet-2.gif);
}


span.date.quatre{color:#D581A0;}


#main ul.classes li:before {
	content: "\1F4DD";
	font-family: "SSStandard";
	padding-right:  1em;
    vertical-align: middle;
    color: #D581A0;
}

#main ul.classes li {
	list-style-type: none;
	list-style-image: none;
}

/*Notes*/
div.notes{
	padding-top:1.618em;
	border-top: 1px dashed black;
	font-size: 80%;
}

#main div.notes ul{
	list-style-image: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
	}

#main div.notes li{
	list-style-image: none;
	list-style-type: none;
	margin-left: 2em;
	}
	
a.note{
	width: 1em;
	margin-left: -2em;
	margin-right: 1em;
}


/*galerie*/
#main ul.galerie, #main ul.galerie li, #main ul.galerie li img{
	list-style-image: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

#main ul.galerie{
	margin-bottom: 1em;
}

#main ul.galerie li{
	display: block;
	float:  left;
}

#main a.fancybox{
	display: block;
	width: 110px;
	height: 110px;
	border: 1px solid #D581A0;
	margin: 0 10px 10px 0;
	padding: 0;
	float: left;

}

#main ul.galerie li a:hover{
	outline: none;
	text-decoration:none;
	padding:0 none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	box-shadow: 0px 0px 2px #444;
	border: 4px solid #D581A0;
	width: 104px;
	height: 104px;
	overflow: hidden;
}

/*Footer*/

footer p{
	color:  white;
	font-size: 80%;
	margin-left:3em;
	margin-top: 1em;
	margin-bottom: 0;
}



footer a{
	color:  white;
	border-bottom:  1px solid white;
	}

footer a:hover{
	border-bottom:  2px solid white;
}

footer a:visited{
	color:  white;
}


/*COULEURS
un 		#FFFFFF;
deux 	#6CB388;
trois	#74B2B2;
quatre	#D581A0;
cinq	#84927D;
six		#D9E9EC;	
*/


footer.un{
	border-top:8px solid #FFFFFF;
}

footer.deux{
	border-top:8px solid #6CB388;
}

footer.trois{
	border-top:8px solid #74B2B2;
}

footer.quatre{
	border-top:8px solid #D581A0;
}

footer.cinq{
	border-top:8px solid #84927D;
}

footer.six{
	border-top:8px solid #D9E9EC;
}

/* 6. DETAILS
----------------------------------------------------------------------------------------*/

/*TOP SCROLL*/
#top{display:none;}

#top_scroll{
	position:fixed;
	bottom:10%;
	right:10%;
	display:none;
}

#top_scroll a{
	color: rgb(95, 87, 82);
	text-align: center;
	font-size: 1.5em;
	display:block;
	width:1.5em;
	height:1.5em;
	background-color: rgb(238, 238, 238);
	-webkit-border-radius: .75em;
	-moz-border-radius: .75em;
	border-radius: .75em;
	box-shadow: 0px 0px 5px #444;
}

#top_scroll a:hover{
	color:  black;
	box-shadow: 0px 0px 2px #444;
	}
	
/*login*/
a.login, a.logout{
	position: absolute;
	top: 1em;
	right: 0;
	padding: 2em;
	color: #D581A0;
}

a.login:hover, a.logout:hover{
	color: white;
}

iframe{
	margin-bottom: 2em;
}

/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }