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

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,img,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,header,footer,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;}body{line-height:1;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul,li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-size:100%;margin:0;padding:0;}legend{color:#000;}a,img,input,textarea,select{outline:none;}textarea{overflow:auto;}input[type=submit],input[type=checkbox]{cursor:pointer;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}



/* -------- FONTS -------- */

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

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

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

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

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

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

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

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



/* COULEUR */
/*
blanc : #ffffff;
noir : #000000;
bleu : #30b2ba;
gris : #5c5c5c;
*/



/* -------- MISE EN FORME -------- */

body { width:975px; height:100%; min-height:811px; background:url(../images/bgs/body.jpg) top center no-repeat #1b1b1b; margin:auto; font:normal 13px/18px 'droid_sansregular'; -webkit-font-smoothing:antialiased; color:#353535; }
a { text-decoration:none; }



/* -------- HEADER -------- */

header { width:100%; }
header .langue { font-family:'klavika_mdbold'; position:fixed; top:18px; right:15px; }
header .langue a { color:#5c5c5c; margin:0 3px; }
header .langue a:hover { text-decoration:underline; color:#FFF; }
header .langue a.actif { color:#30b2ba; }
header .logo { width:179px; height:57px; margin:0 auto; padding-top:59px; position:relative; }
header .logo h1 { position:absolute; top:-800px; left:0; }
header .logo_fr { background:url(../images/logos/nobel_sport_fr.png) bottom left no-repeat; }
header .logo_en { background:url(../images/logos/nobel_sport_en.png) bottom left no-repeat; }



/* -------- FOOTER -------- */

footer { width:100%; font-size:12px; line-height:17px; color:#5c5c5c; text-align:center; padding-bottom:15px; }
footer.fixed { position:fixed; bottom:0px; left:0px;}
footer a { color:#5c5c5c; }
footer a:hover { text-decoration:underline; }





/*******************************/
/* -------- VIGNETTES -------- */
/*******************************/

#vignettes { width:100%; height:262px; margin-top:40px; padding-bottom:6px; background:url(../images/bgs/ombre_vignettes.png) bottom center no-repeat; position:relative; z-index:10; }
#vignettes .fermer { width:31px; height:31px; background:url(../images/boutons/fermer.png) top left no-repeat; position:absolute; top:0; right:0; }
#vignettes .vignette { width:325px; height:262px; display:block; float:left; position:relative; }
#vignettes .vignette img { position:absolute; top:0; left:0; }
#vignettes .vignette img.nb { display:none; }
#vignettes .vignette .contour { width:319px; height:256px; border:3px #30b2ba solid; position:absolute; top:0; left:0; display:none; }
#vignettes .vignette .ombre { width:6px; height:262px; background:url(../images/bgs/ombre_vignette.png) top left no-repeat; position:absolute; top:0; left:0; }
#vignettes .vignette h3 { width:195px; font:normal 13px/22px 'klavika_mdbold_italic'; color:#FFF; text-align:center; text-transform:uppercase; background-color:#30b2ba; position:absolute; top:0; left:65px; }
#vignettes .vignette .boutons { position:absolute; top:196px; left:0px; display:none; }
#vignettes .vignette .boutons .tunet { width:129px; height:46px; display:block; float:left; background:url(../images/boutons/tunet.png) top left no-repeat; margin-left:22px; }
#vignettes .vignette .boutons .fob { width:130px; height:46px; display:block; float:left; background:url(../images/boutons/fob.png) top left no-repeat; margin-left:20px; }




/*****************************/
/* -------- CONTENU -------- */
/*****************************/

#contenus { width:100%; height:362px; position:relative; top:-6px; overflow:hidden; }

#accueil { width:617px; margin:auto; padding-top:12px; }
#accueil .texte p { border-bottom:1px #313131 solid; color:#FFF; padding:23px 0; text-align:justify; }
#accueil .texte p.entete { font:normal 20px/23px 'klavika_bdbold_italic'; color:#30b2ba; text-align:center; }

.contenu { width:100%; min-height:240px; background-color:#e8e6da; position:absolute; bottom:362px; left:0; }
.contenu article { width:620px; padding:22px 0 35px 20px; }
.contenu article h2 { font:normal 19px/22px 'klavika_bdbold'; color:#30b2ba; text-transform:uppercase; }
.contenu article h3 { font:normal 19px/22px 'klavika_ltitalic'; }
.contenu article p { margin-top:20px; }

.contenu aside { width:298px; height:100%; float:left; background-color:#30b2ba; position:absolute; top:0; right:20px; }
.contenu aside .bande { height:20px; background-color:#e8e6da; }
.contenu aside .texte { width:278px; padding:0 10px; margin-top:18px; }
.contenu aside .texte:first-child { margin-top:6px; }
.contenu aside .texte h4 { font:normal 11px/18px 'droid_sansbold'; color:#000; text-transform:uppercase; }
.contenu aside .texte a { font-family:'droid_serifitalic'; color:#FFF; }
.contenu aside .texte a:hover { text-decoration:underline; }

#distributionTunet article { background:url(../images/logos/tunet.png) 516px 20px no-repeat; }
#distributionFOB article { background:url(../images/logos/fob.png) 558px 20px no-repeat; }



/***************************/
/* -------- Popup -------- */
/***************************/

#popup{
	display: none;
	position:fixed;
	top: 100px;
	left: 50%;
	margin-left: -280px;
	width: 560px;
	height: 543px;
	background: #fff;
	z-index: 30;
}

#popup .close{
	position: absolute;
	background: url('../images/boutons/close.png');
	width: 31px;
	height: 31px;
	margin-top: 20px;
	margin-left: 512px;
}

#popup form{
	padding: 20px;
	color: #000;
}

form label {
	display: block; 
	margin-bottom: 3px;
}

form input, textarea{
	display: block;
	border: 1px solid #dddddd;
	padding: 0 8px;
	margin-bottom: 14px;
}

form input {
	height: 30px;
	width: 335px;
}

form textarea {
	padding: 8px;
	width: 504px;
	height: 219px;
}

form input[type="submit"] {
	float: right;
	width: 98px;
	background: #30b2ba;
	color: #fff;
	font-weight: bold;
	border: none;
	text-transform: uppercase;
	font-family: 'droid_sansbold';
}

#popup #result .ok{
	display: none;
	position: absolute;
	font-weight: bold;
	color: #30b2ba;
}

#popup #result .error{
	position: absolute;
	font-weight: bold;
	color: #BA642F;
}

.asterix{
	color: #30b2ba;
	font-weight: bold;
}