@charset "utf-8";
/* CSS Document */

body, html{
	margin			: 0px;
	padding			: 0px;
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 11px;
	color			: #000;
	text-align		: center;
}

body{	
	background		: url('../img/bg-body.gif') repeat-x #333;
}

#preloadCache{
	position		: absolute;
	z-index			: 10;
	left			: 0px;
	width			: 100%;
	top				: 0px;
	height			: 100%;
	background		: url('../img/bg-body.gif') repeat-x #333;
	color			: #fff;
	font-family		: Arial, Helvetica, sans-serif;
}

#global{
	position		: relative;
	width			: 940px;
	height			: 570px;
	padding			: 0px;
	margin			: auto;
	padding-top		: 70px;
	text-align		: left;
}

#top{
	position		: relative;
	width			: 940px;
	height			: 123px;
	background		: url('../img/bg-top.jpg');
	margin			: 0px;
	padding			: 0px;
}

#index a{
	position		: absolute;
	top				: 30px;
	left			: 720px;
	width			: 200px;
	height			: 40px;
}

#content{
	position		: relative;
	width			: 880px;
	background		: url('../img/bg-content.jpg') repeat-y;
	margin			: 0px;
	padding			: 0 30px 0 30px;
}

#footer{
	position		: relative;
	width			: 940px;
	height			: 54px;
	background		: url('../img/bg-bottom.jpg') no-repeat;
	margin			: 0px;	
	padding			: 23px 0 0 30px;
}

/************************ MENU **********************************/

#menu{
	position		: absolute;
	left			: 340px;
	top				: 40px;
	height			: 30px;
	font-size		: 14px;
	margin			: 0px;
	padding			: 0px;
	z-index			: 2;
}

#menu li{
	float			: left;
	padding			: 0;
	width			: 60px;
	text-align		: center;
	list-style-type	: none;
}

#menu li a{
	background		: url('../img/bg-li.jpg') no-repeat;
	display			: block;
	padding			: 10px 5px 5px 5px;
	color			: #000;
	text-decoration	: none;
}

#menu li a:hover{
	background-position	: 0px -31px;
	color			: #d62d41;
}

#menu li a.selected{
	background-position	: 0px -31px;
	color				: #d62d41;
}

/*************************** NAVIGATION *************************/

#navigation{
	position		: absolute;
	top				: 0px;
	left			: 40px;
	height			: 20px;
	width			: 860px;
	z-index			: 2;
}

#navigation a, #navigation a:hover{
	color			: #959595;
	text-decoration	: none;
	position		: relative;
}

.img-left{
	position		: absolute;
	left			: 10px;
	top				: -114px;
	z-index			: 1;
}

/************************** NEWS ********************************/

#news{
	position		: relative;
	float			: left;
	background		: url('../img/peper-news-2.jpg') no-repeat;
	width			: 225px;
	margin			: 0 0 0 20px;
	padding-top		: 32px;
}

#accordion{
	position		: relative;
	width			: 225px;
	height			: 340px;
}

h3.toggler{
	padding			: 0px;
	margin			: 0px;
	text-align		: center;
	width			: 225px;
	background		: url('../img/bg-toggler.gif') repeat-y;
}

.element{
	height			: 60px;
	padding			: 10px 20px 10px 10px;
}

.element:hover{
	cursor			: pointer;
}

.element a{
	color			: #fb0000;
	text-decoration	: none;
}

.element a:hover{
	color			: #d80000;
}

.img-right{
	float			: left;
	width			: 630px;
	text-align		: center;
}

/**************************** PORTFOLIO ****************************/

#content-portfolio{
	width			: 890px;
}

#portfolio{
	float			: right;
	font-size		: 12px;
	margin			: 0px;
	margin-top		: 0px;
	padding			: 0px;
	color			: #d02c3f;
}

#portfolio li{
	float			: left;
	list-style-type	: none;
	margin			: 0px;
	padding			: 0 10px 0 5px;
	height			: 38px;
	cursor			: pointer;
}

#portfolio li:hover{
	color			: #90be44;
	background		: url('../img/bg-piment.gif') right no-repeat;
	cursor			: pointer;
}

#portfolio li.selected{
	color			: #90be44;
	background		: url('../img/bg-piment.gif') right no-repeat;
	cursor			: pointer;
}

#next{
	width			: 15px;
	height			: 15px;
	background		: url('../img/rightAlt3.jpg') no-repeat;
	float			: right;
}

#next:hover{
	background-position	: 0px -16px;
}

#previous{
	width			: 15px;
	height			: 15px;
	background		: url('../img/leftAlt3.jpg') no-repeat;
	float			: right;
}

#previous:hover{
	background-position	: 0px -16px;
}

.img-portfolio{
	margin-right	: -10px;
	background		: url('../img/piment-portfolio.jpg') right bottom no-repeat;
	min-height		: 236px;
	width			: 890px;
}

.realisation{
	width			: 730px;
	background		: url('../img/bg-rea.png');
	padding-left	: 20px;
	padding-right	: 10px;
	color			: #535353;
}

.pane{
	background		: url('../img/top-portfolio.png') no-repeat;
	padding-top		: 20px;
}

.realisation a{
	color			: #535353;
	text-decoration	: underline;
}

.realisation a:hover{
	color			: #000;
}

a.selectedli{
	color			: #90be44;
	background		: url('../img/bg-piment.jpg') right no-repeat;
}

.image{
	float			: left;
	margin			: 0px 10px 10px 10px;
	text-align		: left;
}

.image img{
	border			: 3px solid #eeeeee;
}

.font-red{
	color			: #d52d41;
}

#video ul li
{
	float : left;
	list-style : none;
	margin : 0 0 15px 15px;
}

/**************************** TITRE ********************************/

h1{
	margin			: 0px 0 10px 0;
	font-size		: 14px;
	color			: #d5031c;
}

h2{
	margin			: 0px 0 0 15px;
	font-size		: 14px;
	color			: #000;
}

/**************************** HR ***********************************/

hr{
	color			: #eeeeee;
	height			: 1px;
	border			: 0px;
	background-color: #eeeeee;
	width			: 747px;
	margin-left		: -11px;
}

/**************************** TEAM **********************************/

.team{
	margin			: 0;
	width			: 470px;
	background		: url('../img/bg-team.png');
	padding-left	: 20px;
	padding-right	: 20px;
	color			: #535353;
	text-align		: justify;
}

/**************************** VIDEO **********************************/

.video{
	width			: 791px;
	background		: url('../img/bg-video.png') repeat-y;
	margin-left		: 8px;
	padding-left 	: 20px; 
	color			: #535353;
	text-align		: justify;
}

/**************************** BONUS **********************************/

.img-bonus{
	margin-right	: -10px;
	background		: url('../images/test-peper-news.jpg') left bottom no-repeat;
	min-height		: 376px;
	text-align		: right;
	margin-right	: 10px;
}

.img-bonus a{
	color			: #d52d41;
}

/*************************** FTP *************************************/

#ftp a{
	position		: absolute;
	left			: 150px;
	top				: 27px;
	width			: 50px;
	height			: 15px;
}

/************************** CONTACT ***********************************/

.contact th, .contact td{
	font-weight		: normal;
	padding-left	: 10px;
}

.champ{
	font-size		: 11px;
	border			: 1px solid #e8e8e8;
	padding			: 3px;
	width			: 200px;
	background		: url('../img/bg-input.jpg');
	font-family		: Verdana, Arial, Helvetica, sans-serif;
	color			: #535353;
}

.champ-txt{
	font-size		: 11px;
	border			: 1px solid #e8e8e8;
	padding			: 3px;
	width			: 420px;
	height			: 150px;
	background		: url('../img/bg-input.jpg');
	font-family		: Verdana, Arial, Helvetica, sans-serif;
	color			: #535353;
}

.envoyer{
	font-size		: 11px;
	border			: 1px solid #e8e8e8;
	padding			: 3px;
	cursor			: pointer;
	color			: #d02c3f;
	background		: #f7f7f7;
}

.font-9{
	font-size		: 9px;
	font-style		: italic;
}