/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

body {
	background: url('../img/background/subtle_dots.png');
	font-size: 12px;
	text-align: justify;
}

h3 {
	font-family: 'geosanslightregular';
	font-size: 24px;
}


/* ------- #Header ------- */

div#header {
	position:relative;
	height: 160px;
	padding-top:15px;
}

div#header h1#logo {
	position:absolute;
	margin: 30px auto 0 auto;
	text-indent: -5000px;
	line-height:108px;
	width:100%;
	text-align: center;
	height:108px;
	z-index: 2;
}

div#header h1#logo a {
	display: block;
	margin:0 auto;
	width:121px;
	height:108px;
	background:url('../img/logo_alt.png') no-repeat top center;
}

div#header h1#logo a:hover {
	height:108px;
}

div#header ul#nav {
	position: absolute;
	top:15px;
	text-align: center;
	z-index: 10;
	font-family: 'geosanslightregular';
	font-size: 17px;
	color: black;
	width:100%;
}

div#header ul#nav li {
	display:block;
	position:absolute;
	width: 100px;
	height:40px;
	top: 55px;
}

div#header ul#nav li a {
	text-decoration: none;
	display:block;
	height:30px;
	padding:10px 0 0 0;
	background: url('../img/menu-item-bg-active.png') no-repeat top center;
}

div#header ul#nav li a:hover, div#header ul#nav li a:active {
	background: url('../img/menu-item-bg-active6.png') no-repeat top center;
}

div#header ul#nav li.first { left:120px; }
div#header ul#nav li.second { right:120px; }

div#header ul#nav li.second ul {
	position: relative;
	top:-44px; left: -30px;
	font-size: 17px;
	display:none;
}

div#header ul#nav li.second:hover ul {
	display:block;
}

div#header hr {
	width: 150px;
	margin: 160px auto 20px auto;
	border:0;
	border-top:1px solid black;
}


/* ------- Galerie ------- */

.over.galerie {
	margin-left:-10px;
	padding:0;
	padding:0;
}

.galerie li.thumb {
	float:left;
	margin:20px 0 0 20px;
	padding:0;
	border:0;
	width:100px;
	height:100px;
	background:url('../img/100x100.png') no-repeat top left;
}

.galerie li.thumb img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.galerie li.album.title {
	position:relative;
	float:left;
	margin:20px 0 0 20px;
	padding:0;
	border:0;
	width:220px;
	height:100px;
	background:url('../img/220x100.png') no-repeat top right;
	text-align: center;
	font-family: 'geosanslightregular';
	font-size: 23px;
	color: black;
	line-height:100px;
}

.galerie li.album.title a {
	display: block;
	margin:auto;
	width:100%;
	height: 100%;
	text-decoration: none;
}


/* ------- Footer ------- */

.footer {
	margin-top: 30px;
	position: relative;
}

.footer .social a {
	display:block;
	text-indent: -5000px;
	width:32px;
	height:32px;
	margin: 0 5px;
	float: left;
	background:url('../img/social-sprite.png') no-repeat 0 0;
}

.footer .linkedin a { background-position: -32px 0px; }
.footer .linkedin a:hover { background-position: -32px -32px; }
.footer .ccpx a { margin-left: 0; background-position: 0px 0px; }
.footer .ccpx a:hover { background-position: 0px -32px; }
.footer .ggp a { background-position: -64px 0px; }
.footer .ggp a:hover { background-position: -64px -32px; }
.footer .twitter a { background-position: -96px 0px; }
.footer .twitter a:hover { background-position: -96px -32px; }
.footer .rss a { background-position: -128px 0px; }
.footer .rss a:hover { background-position: -128px -32px; }

.copyright {
	clear: both;
	margin: 10px 0 3px 0;
	font-family: 'geosanslightregular';
	font-size: 14px;
	color: black;
	text-align: center;
}



/* #Page Styles
================================================== */

.citation {
	display:block;
	font-family: 'geosanslightregular';
	font-size: 14px;
	font-style: italic;
	color: black;
}

.citation-source {
	font-size: 11px;
	text-align: right;
}

li.title { 
	float: left;
	margin: 20px 0 0 20px;
	display:block;
	width: 340px;
	text-align: center;
	height: 100px;
	line-height: 100px;
}

li.title h3 { 
	width: 100%;
	line-height: 100px;
}

li.intro { 
	display: block;
	float: left;
	width: 460px;
	height: 100px; 
	margin: 20px 0 0 20px;
}

li.intro p.citation-source {
	margin-top: -20px;
}



/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) {
		div#header ul#nav li.second ul li { position: absolute; }
		div#header ul#nav li.second ul li.first { left:-20px; top:-50px; padding:0 20px 10px 20px; }
		div#header ul#nav li.second ul li.second { left:120px; top:-50px; }
		div#header ul#nav li.second ul li.third { left:100px; top:-10px; padding:10px 0 10px 20px; }
		div#header ul#nav li.second ul li.fourth { left:120px; top:50px; }
		div#header ul#nav li.second ul li.fifth { left:-20px; top:40px; padding:10px 20px 0 20px; }
		div#header ul#nav li.second ul li.sixth { left:-120px; top:50px; }
		div#header ul#nav li.second ul li.seventh { left:-120px; top:-10px; padding:10px 20px 10px 0; }
		div#header ul#nav li.second ul li.eighth { left:-120px; top:-50px; }

		li.macro { display: none; }
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		div#header ul#nav li.first { left:144px; }
		div#header ul#nav li.second { right:144px; }
		
		div#header ul#nav li.second ul li.third { left:-20px; top:-50px; padding:0 20px 10px 20px; }
		div#header ul#nav li.second ul li.fourth { left:120px; top:-50px; }
		div#header ul#nav li.second ul li.fifth { left:100px; top:-10px; padding:10px 0 10px 20px; }
		div#header ul#nav li.second ul li.sixth { left:120px; top:50px; }
		div#header ul#nav li.second ul li.seventh { left:-20px; top:40px; padding:10px 20px 0 20px; }
		div#header ul#nav li.second ul li.eighth { left:-120px; top:50px; }
		div#header ul#nav li.second ul li.first { left:-120px; top:-10px; padding:10px 20px 10px 0; }
		div#header ul#nav li.second ul li.second { left:-120px; top:-50px; }
		
		/* .over.galerie { margin-top: 40px; } */
		
		li.mini { display: none; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		div#header ul#nav li.first { left:10px; }
		div#header ul#nav li.second { right:10px; }
		
		div#header ul#nav li.second ul {
			position: absolute;
			top:-44px; left: -30px;
			font-size: 17px;
			background:red;
		}
		div#header ul#nav li.second ul li { position: absolute; left: 0; padding: 10px; }
		
		div#header ul#nav li.second ul li.third { top: -70px; left: -10px; }
		div#header ul#nav li.second ul li.fourth { top: -20px; left: -10px; }
		div#header ul#nav li.second ul li.fifth { top: 80px; left: -10px; }
		div#header ul#nav li.second ul li.sixth { top: 80px; left: -130px; }
		div#header ul#nav li.second ul li.seventh { top: 80px; left: -250px; }
		
		.over.galerie { margin-top: 70px; margin-bottom: 70px; }
		
		li.title { margin-top: 40px; }
		li.intro { width: 340px; height: 150px; }
		li.micro { display: none; }
		.galerie.accueil { margin-top: 0; margin-bottom: 0; }
		p.copyright { padding-top: 10px; }
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		div#header ul#nav li.first { left:40px; top: 145px; }
		div#header ul#nav li.second { right:40px; top: 145px; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		div#header ul#nav li.second ul li {
			display:none;
		}

		.over.galerie { margin-top: 40px; margin-bottom: 40px; }

		li.title { width: 220px; margin-top: 60px; } .erreur li.title h3, .accueil li.title h3 { line-height: 50px; }
		li.intro { width: 220px; height: 200px; }
		li.nano { display: none; }
		.galerie.accueil, .galerie.erreur, .galerie.construction { margin-top: 0; margin-bottom: 0; }
		p.copyright { padding-top: 10px; }
	}
	
	@media all and (-webkit-min-device-pixel-ratio : 1.5) {
		body {
			background: url('../img/background/subtle_dots@2x.png') repeat;
			background-size: 27px 15px;
		}
		
		div#header h1#logo a {
			background-image: url('../img/logo_alt@2x.png');
			background-size: 121px 108px;
		}
		
		div#header ul#nav li a {
			background-image: url('../img/menu-item-bg-active@2x.png');
			background-size: 100px 40px;
		}
		
		div#header ul#nav li a:hover, div#header ul#nav li a:active {
			background-image: url('../img/menu-item-bg-active6@2x.png');
			background-size: 100px 40px;
		}
		
		.galerie li.thumb {
			background-image: url('../img/100x100@2x.png');
			background-size: 100px 100px;
		}
	
		.galerie li.album.title {
			background-image: url('../img/220x100@2x.png');
			background-size: 220px 100px;
		}
		
		.footer .social a {
			background-image: url('../img/social-sprite@2x.png');
			background-size: 160px 64px;
		}
	}



/* #Font-Face
================================================== */

@font-face {
    font-family: 'geosanslightregular';
    src: url('../font-face/geosanslight/geosanslight-webfont.eot');
    src: url('../font-face/geosanslight/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font-face/geosanslight/geosanslight-webfont.woff') format('woff'),
         url('../font-face/geosanslight/geosanslight-webfont.ttf') format('truetype'),
         url('../font-face/geosanslight/geosanslight-webfont.svg#geosanslightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}