/* ==========================
Les polypodes pour la SAMOA
www.lespolypodes.com
Oct 2008

Couleurs utilisées
-----------------------------
Rose : #DD0057
Jaune : #FBD506
============================= */


@import "http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts/reset-fonts.css";
@import "960.css";



/* ---------------------------------------------------------
== RAZ
------------------------------------------------------------ */
	html {
		height: 100%;
		background: #fff url('../img/bgPage.png') repeat-y 50% 0;
		}
	body {
		color: #333;
		height: 100%; width: 100%;
	}
	strong {font-weight: bold;}

/* ---------------------------------------------------------
== Page
------------------------------------------------------------ */
	
	#page {
		width: 960px;
		margin: 0 auto;
		}
	#htm {background-color: #fff;}

/* ---------------------------------------------------------
== redaeH
------------------------------------------------------------ */
	#header {
		padding-top: 15px;
		padding-bottom: 15px;
		position: relative;
		}
	#header #version {
		position: absolute;
		top: 0; right: 0;
	}
	#logo {
		font-size: 480%;
		font-weight: bold;
		line-height: 1em;
		letter-spacing: -4px;
		color: #DD0057;
	}
	#signature {font-size: 120%;}

	#navigation {
		position: absolute; top: 65px; right: 15px;
/* 		clear: both; */
		}
	#navigation li {
		display: inline;
		font-size: 140%;
		/* margin: 0 1.2em 2em 0; padding: 0 0 .4em 38px; */
		}
	#navigation li#it0 a {background-position: 0px 6px;}
	#navigation li#it1 a {background-position: 0px -28px;}
	#navigation li#it2 a {background-position: 0px -65px;}
	#navigation li#it3 a {background-position: 0px -102px;}
	#navigation li#it4 a {background-position: 0px -102px;}
	#navigation li a {
		text-decoration: none;
		color: #333;
		background: url(../img/chevrons.png) no-repeat 0 6px;
		margin: 0 1.2em 2em 0; padding: 0 0 .4em 38px;
	}
	#navigation li a:hover,#navigation li a:focus {
		color: #042024;
	}
	#navigation li#it0 a:hover {color: #E2862E}
	#navigation li#it1 a:hover {color: #3995AA}
	#navigation li#it2 a:hover {color: #849E29}
	
	#navigation li.current {
		color: #042024;
	}
	#sous-navigation {
		padding: .5em 0 .5em 10px;
		border-bottom: 1px #ddd solid;
		font-weight: bold;
	}
	#sous-navigation li {
		display: inline;
	}
	#sous-navigation a {
		color: #6B6B6B;
		text-decoration: none;
		padding: 0 5px 0 5px;
		border-right:  1px #ccc solid;
	}
	#sous-navigation a:hover, #sous-navigation a:focus {
		color: #333;
	}
	#sous-navigation .current a {font-weight: normal; color: #333;}
		
/* ---------------------------------------------------------
== Contenu principal
------------------------------------------------------------ */
	#main {
		margin: 0 0 15px 0; height: 100%;
		}
	#nom_rubrique {
		font-size: 150%;
		margin-top:  5px;
		padding: .1em 0 .1em 15px;
		color: #fff;
		clear: both;
	}
	/*Projets*/
	#projets {margin-top: 5px; margin-bottom: 15px;}
	#projets h2 {
		font-size: 120%; font-weight: bold;
		padding: 8px 10px 0 10px;
	}
	#projets .proj {
		border: 1px #ccc solid;
		position: relative;
		}
	#projets .proj ul {
		margin: 10px; height: 400px;
		overflow: auto;
	}
	#projets .proj li {
		padding: 5px 0 5px 0;
		border-bottom: 1px #eee solid;
	}
	#projets .proj a {text-decoration: none;}
	.tl,.tr,.bl,.br {
		position: absolute;
		width: 10px; height: 10px; overflow: hidden;
		background: url('../img/round.png') no-repeat;
		}
	.tl, .tr {top: -1px;}
	.bl, .br {bottom: -1px;}
	.tl, .bl {left: -1px;}
	.tr, .br {right: -1px;}
	.tl {background-position: top left;}
	.tr {background-position: top right;}
	.bl {background-position: bottom left;}
	.br {background-position: bottom right;}

	#projets #tri {padding: 10px 10px 0 10px;}
	#projets #tri h3 {font-size: 85%;margin-bottom: 5px;}
	#projets select {width: 100%; font-size: 85%;}
	#tri .field_valid {text-align: right;}
	#tri p {margin-bottom: 3px;}

	/*Mise en forme du contenu principal*/
	#content {margin-top: 15px;}
	#content h2, #content h3, #content h4,
	#content h5, #content h6 {color: #565656;}
	#content h1 {font-size: 220%;}
	#content h2 {font-size: 200%;}
	#content h3 {font-size: 180%;}
	#content h4 {font-size: 150%;}
	#content h5 {font-size: 110%;}
	#content h6 {font-size: 100%;}
	#content h1 a{text-decoration: none;}
	#content h2 a{text-decoration: none;}
	#content h3 a{text-decoration: none;}
	#content h4 a{text-decoration: none;}
	#content h5 a{text-decoration: none;}
	#content h6 a{text-decoration: none;}

	#content {}
	#content p, #content ul {margin: 1em 0;}
	#content p, #content ul {
		margin-left: 80px;
		}
	#content ul {
		padding-left: 2em;
	}
	#content ul li {
		list-style: disc;
	}
	
	#content .article {
		margin: 0 0 1em 0;
		font-size: 93%;
		clear: both;
		border-bottom: 1px #ccc solid;
		}
	#content .article p, #content .article ul {margin-left: 0!important;}
	#content .resume {
		line-height: 1.4em;
		margin: .8em 0;
		}
	#content .resume img {
		float: right;
		margin: 0 10px 10px 0;
		}


	.medias {
		margin: 2em 0 0 0;
		padding: 1em 0 0 0;
		border-top: 1px #efefef solid;
		}
	.medias h2 {
		font-size: 110%!important;
		margin-bottom: .5em;
		font-weight: bold;
		}
	.medias ul {
		margin: 0 0 !important;
		padding-left: 0!important;
		font-size: 93%;
		}
	.medias li {list-style: none!important;}

	.medias .inside {
		width: 33%;
		float: left;
	}
	
	/*Bloc d’actu de droite*/

	#side {margin-top: 15px;}
	#side h2 {
		font-size: 130%;
		margin: 5px 0 5px 0;
		}
	#side .article {
		margin: 0 0 1em 0;
		font-size: 93%;
		}
	#side h3 {
		font-size: 110%;
		font-weight: bold;
		margin: 0 0 10px 0;
		}
	#side hr {border: 0; border-top: 1px #ccc solid;}
	#side .inside {
		position: relative;
		padding: 10px; margin: 0 0 15px 0;
		border: 1px #ccc solid;
		}

	/* Diaporama */
	#side dl {
		height: 350px;
		overflow: auto;
		}
	#side dt {
		padding-top: 10px;
	}
	#side dd {
		padding-bottom: 10px;
		}
	#side dl a img {
		border: 1px #555 solid;
	}
	#side dl a:hover img {
		border-color: #000;
	}
	/*Pagination*/
	.pagination {
		padding: 2em 0;
		text-align: center;
	}
	.pagination li {display: inline; padding: 0 .3em 0 .3em;}
	.pagination a {
		border: 1px #DB9DB7 solid;
		padding: .4em;
		text-decoration: none;
	}
	.pagination a:hover, .pagination a:hover {
		background-color: #DD0057;
		color: #fff;
	}

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

	#footer {
		border-top: 1px #ddd solid;
		padding: 1em; margin-top: 15px;
		clear: both;
	}
	#footer ul {
		margin: 15px 0 0 0;
		text-align: right;
		}
	#footer li {
		display: inline;
		font-size: 93%;
		padding: 0 .8em 0 0;

		}
	#footer li a {
		text-decoration: none;
		color: #333;
		background: url('../img/chevrons_footer.png') no-repeat 0 5px;
		padding: 0 0 0 20px;
	}
	#footer li a:hover {
		background: url('../img/chevrons_footer.png') no-repeat 0 -38px;
	}

/* == Notification-------------------------- */
	.notification {
		padding: 10px;
		background-color: #DA0057;
		border-bottom: 1px #B2B297 solid;
		padding-left: 20px;
		color: #fff;
		font-size: 85%;
	}
	.notification li {
		list-style: disc;
	}
	.notification a {color: yellow;}
	.notification a:hover {color: yellow!important;}


/* ---------------------------------------------------------
== Liens
------------------------------------------------------------ */
	
	a {color: #333;}
	a:hover, a:focus {color: #B20047;}

/* ---------------------------------------------------------
== Elements d’habillage
------------------------------------------------------------ */
	.habillage {
		height: 40px;
		position: relative;
		}
	.haut {
		background: #ffd400 url('../img/bgHabillageHaut.png') repeat-x bottom;
	}
	.bas {
		background: #ffd400 url('../img/bgHabillageBas.png') repeat-x top;
	}
	.habillage .br, .habillage .bl {
		position: absolute; top: 0;
		width: 300px; height: 60px;
		background: url('../img/trame.png') no-repeat;
		}
	.habillage .br {right: 0;background-position: right top;}
	.habillage .bl {left: 0;background-position: left top;}

/* == Fiches projet-------------------------- */
	#fiche_projets #content img {margin-top: 10px;}

/* == Themes-------------------------- */

	body#decouvrir #nom_rubrique {background-color: #EE7D0E;}
	body#comprendre #nom_rubrique {background-color: #1195A9;}
	body#participer #nom_rubrique {background-color: #7BA21A;}
	body#actualites #nom_rubrique {background-color: #FED50B; color: #333;}
	body#fiche_projets #nom_rubrique {background-color: #FED50B; color: #333;}
	body#contact #nom_rubrique {background-color: #FED50B; color: #333;}
	body#base #nom_rubrique {background-color: #FED50B; color: #333;}
	
	body#decouvrir #content h1,body#decouvrir #content h2,body#decouvrir #content h3,
	body#decouvrir #content h4,body#decouvrir #content h5,body#decouvrir #content h6 {color: #EE7D0E;}


/* ---------------------------------------------------------
	== Accessibilité
	------------------------------------------------------------ */
		.hc {position: absolute; top: -1000em;}