/*****************

Bienvenue dans le fichier
CSS des polypodes !

Couleurs utilisées :
- Gris fond : rgb(82,91,95)
- actualité (Homepage) : R 216, V 216, B 0
- agence : R 143, V 18, B 126
- compétences : R 232, V, 89, B 44
- contact : R 97, V 190, B 188
- Portfolio : R 118, V 134, B 141
-BG References : 184,191,194
Bleu hover : 42,232,255



Les polypodes
www.lespolypodes.com
Nov 2008

******************/

/* == Libs-------------------------- */

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

/* == Base-------------------------- */
	html{background:rgb(82,91,95) url(../img/bg.png);}
	body {color: #333;}
	strong, b {font-weight: bold;}
	a {text-decoration: none;}

/* == Layout-------------------------- */
	#page {
		margin: 0 auto;
		position: relative;
		width: 960px;
	}
	#main {
		height: 510px;
		width: 960px;
		background-color: #fff;
		z-index: 900;
		}
	#content {
		float: right;
		width: 690px;
		height: 510px;
		position: relative;
		background: url('../img/bg_portfolio.png') repeat-x;
		}
	#logo {
		float: left; position: relative;
		width: 270px;
		height: 510px;
		text-indent: -1000em;
		background-image: url('../img/logo_bertaud.png');
		background-repeat: no-repeat;
		}
		
	#footer {font-size: 85%; text-align: right;}

/* == Lettre d’infos-------------------------- */

	#NL {
		background-color: #fff;
		position: absolute; top: 100px; right: 0;
		z-index: 10;
		width: 300px;
		border-left: 1px #ddd solid;
		}
	#NL form {padding: 10px;}
	#NL h2 {
		font-weight: bold;
		margin: 0 0 5px 0;
	}
	#NL .inptBtn {
		border: 1px #ddd solid;
		color: #555;
		background-color: #fff;
	}
	#NL .inptTxt {
		color: #aaa;
	}
	#NL .inptTxt:focus {
		color: #333;
	}
	#NL .close {
		display: block;
		background-color: #aaa;
		color: #333;
		font-size: 85%;
		padding: 2px 2px 2px 5px;
	}

/* == Menu-------------------------- */
	#menu {
		height: 100px; width: 960px;
		position: relative;
		overflow: hidden;
		z-index: 5;
		}
	#menu ul {
		position: absolute;
		bottom: 5px; left: 270px;
		width: 695px;
		}
	#menu li {
		display: inline;
		}
	#menu a {
		display: block;
		height: 20px;
		padding-right: 20px;
		text-indent: -1000em;
		background: url('../img/bg_nav.png') no-repeat;
		float: left;
		overflow: hidden;
	}
	#menu #it1 a{background-position:0 0;width:65px;}
	#menu #it2 a{background-position:0 -20px;width:95px;}
	#menu #it3 a{background-position:0 -40px;width:66px;}
	#menu #it4 a{background-position:0 -60px;width:67px;}
	#menu #it5 a{background-position:0 -80px;width:49px;}
	#menu #it6 a{
		background-position:13px -100px;
		border-left:1px solid #FFFFFF;
		padding-left:20px;
		width:98px;
		position: absolute; top: 0; right: 0;
		}
	
	#menu .sNav {
		text-align: center;
		position: absolute; bottom: 25px; left: 202px;
		width: 70px;
	}
	#menu .sNav li a {
		background: none;
		text-indent: 0;
		text-decoration: none;
		color: #fff;
		font-weight: bold;
		color: #8A8A8D;
	}
	#menu .sNav a:hover {color: #fff;}

/* == Navigation portfolio-------------------------- */

	#navigation {
		position: absolute;
		top: 115px; right: 720px;
		z-index: 5;
		font-size: 93%;
	}
	#navigation a {
		color: #fff!important;
		font-weight: bold;
	}
	#navigation li {
		text-align: right;
		margin-bottom: 4px;
		}
	#navigation .current a {color: rgb(42,232,255)!important;}
	#navigation a:hover {color: rgb(136,242,255)!important;}
	
	#refs {
		background-color: rgb(184,191,194);
		width: 100px; height: 510px;
	}
	#refsSlider {
		position: absolute; top: 50px;
		overflow: hidden;
	}
	#refsContainer {
		position: relative;
		width: 100px; height: 400px;
		overflow: hidden;
	}
	#refsContainer a {
		display: block;
		padding: 10px 20px 10px 20px;
	}
	#refsContainer a.current {
		border-right: 5px rgb(118,134,141) solid;
	}
	#refsSlider a.up, #refsSlider a.down {
		display: block;
		background: url('../img/fleche_nav.png') no-repeat;
		width: 100px; height: 12px;
		text-indent: -1000em;
		overflow: hidden;
	}
	#refsSlider a.up {background-position: center top;}
	#refsSlider a.down {background-position: center bottom;}

/* == Contenu-------------------------- */



/* == Elements communs par domaines -------------------------- */

	/*  Logo */
	body#actus #logo {background-color: rgb(216,216,0);background-image: url('../img/logo_bertaud_actus.png'); } 
	body#agence #logo {background-color: rgb(143,18,126);} 
	body#competences #logo {background-color: rgb(232,89,44);} 
	body#contact #logo {background-color: rgb(157,3,13);}
	body#portfolio #logo {background-color: rgb(118,134,141);}
	body#mentions #logo {background-color: rgb(76,51,145);}

	/* Navigation */
	body#agence #menu #it1 a {background-position:-120px 0;}
	body#competences #menu #it2 a {background-position:-120px -20px;}
	body#portfolio #menu #it3 a {background-position:-120px -40px;}
	body#actus #menu #it4 a {background-position:-120px -60px;}
	body#contact #menu #it5 a {background-position:-120px -80px;}
/* 	#menu #it1 a{background-position:0 0;width:65px;}
	#menu #it2 a{background-position:0 -20px;width:95px;}
	#menu #it3 a{background-position:0 -40px;width:66px;}
	#menu #it4 a{background-position:0 -60px;width:67px;}
	#menu #it5 a{background-position:0 -80px;width:49px;}
 */	

	/* Boutons prec-suiv */
	body#actus .prev, body#actus .next {background-color: rgb(216,216,0);}
	body#actus .prev:hover, body#actus .next:hover {background-color: rgb(150,150,0) ;}
	body#portfolio .prev, body#portfolio .next {background-color: rgb(42,232,255);}
	body#portfolio .prev:hover, body#portfolio .next:hover {background-color: rgb(28,161,176) ;}

	/* Titres */
	body#actus h2 {color: rgb(216,216,0);}
	body#agence h2 {color: rgb(143,18,126);}
	body#competences h2 {color: rgb(232,89,44);} 
	body#contact h2 {color: rgb(157,3,13);}
	body#portfolio h2 {color: rgb(97,190,188);}
	body#mentions h2 {color: rgb(76,51,145);}

	/* Liens */
	body#actus a {color: rgb(166,166,0);}
	body#agence a {color: rgb(143,18,126);}
	body#competences a {color: rgb(232,89,44);} 
	body#contact a {color: rgb(157,3,13);}
	body#portfolio a {color: rgb(97,190,188);}
	body#mentions a {color: rgb(76,51,145);}

	/* Contenu principal */
	body#actus #slide {
		position: absolute;
		top: 80px; left: 30px;
		width: 630px; height: 350px;
		overflow: hidden;
		}
	body#actus #slideContent {
		position: relative;
		height:  510px; width: 50000px;
	}
	body#actus .texte {
		float: left;
		width: 240px;
		margin-right: 20px;
		text-align: right;
		}
	body#actus .article {
			position: relative;
			float: left;
			width: 620px;
			padding: 5px;
		}
	body#actus .illustration {float: left;}
	body#actus .illustration img {
		border: 1px black solid;
		}




 	body#agence #slide, body#contact #slide,body#competences #slide, body#mentions #slide  {
		position: absolute;
		top: 40px; left: 30px;
		width: 510px;
		overflow: hidden;
		}
 	body#agence #slide h2, body#contact #slide  h2,body#competences #slide  h2,body#mentions #slide  h2 {margin-bottom: 20px;}

/* 	body#portfolio #content {
		background: url('../img/bg_portfolio.png') repeat-x;
	} */
	body#portfolio #slide {
		position: absolute;
		top: 60px; left: 130px;
		width: 530px; height: 510px;
		overflow: hidden;
		}
	body#portfolio #slideContent {
		position: relative;
		height:  510px; width: 50000px;
	}

	body#portfolio .article {
		position: relative;
		float: left;
		width: 530px;
		padding: 5px;
		}
	body#portfolio .texte {position: absolute; top: 395px; width: 98%;}
	body#portfolio .prev {
			left: 100px;
			background-position: 8px 50%;
		}


	#accesActus {
		position: absolute; right: 0; top: 220px;
		width: 110px; height: 85px;
		}
	#accesActus .mask {
		position: absolute; top: 0; left: 0;
		width: 110px; height: 85px;
		}

	body#agence #accesActus .mask {
		background: url('../img/bg-acces-actus.png') no-repeat;
	} 
	
	.illustration {
/* 		background: url('../img/loader.gif') no-repeat 50% 50%; */
/* 		width: 50px; height: 50px; */
		}
	
/* == Elements ajoutés par JS -------------------------- */
	#track {
		position: absolute;
		top: 102px; left: 270px;
		width: 690px; height: 20px;
		overflow: hidden;
		z-index: 5;
	}
	.cur {
		background: url('../img/fleche_nav.png') no-repeat top center;
		width: 15px; height: 12px;
		position: absolute; top: 0; left: 0;
	}


/* == Elements communs-------------------------- */
/* Bouton suivant - précédent */
	.next, .prev {
		position: absolute;
		top: 253px;
		display: block;
		width: 30px; height: 30px;
		background: #333 url('../img/fleche_pages.png') no-repeat;
		text-indent: -1000em;
		overflow: hidden;
	}
	.next {
		right: 0;
		background-position: -38px 50%;
		}
	.prev {
		left: 0;
		background-position: 8px 50%;
		}

/* Typo */
	.article h2 {
		text-transform: uppercase;
		font-weight: bold;
		font-size: 120%;
		margin-bottom: 30px;
	}
	.texte p {
		line-height: 1.4em;
		font-size: 93%;
		margin: 0 0 .8em 0;
	}

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

.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}