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

	@file         screen.css
	@description  Feuille de styles globale
	vim: set noet ts=4 fdm=marker fenc=utf-8:

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

@import url("./reset.css");

/* @section Basic {{{
******************************************************************************/

html { font-size: 62.5%; }
html, body { height: 100%; }

body {
	font-family: Arial, Verdana, sans-serif;
	font-size: 135%;
	line-height: 1.48;
	color: #fff;
	background: #fff;
	position: relative;
	behavior: url("/js/ie6/csshover.htc");
	padding-top:150px;
}

p,ul,ol,table { margin-bottom: 10px; }
ul { margin-left: 20px; }
a { text-decoration: none; cursor: pointer; color: #f6c04e; font-weight: bold; }
a:focus { outline: 1px dotted; }
a:visited { color: #f6c04e; }
a:hover, a:focus { color: #f6c04e; text-decoration: underline; }
a *, button * { cursor: pointer; }
hr { display: none; }
small { font-size: 90%; }
input, select, button, textarea, option { font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.groupe:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .groupe {display: inline-block;}
/* Hides from IE-mac \*/ * html .groupe {height: 1%;} .groupe {display: block;} /* End hide from IE-mac */
sup { font-size: 80%; line-height: 1; vertical-align: super; }
button::-moz-focus-inner { border: 0; padding: 1px; }
span.amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-weight: normal; font-style: italic; font-size: 1.2em; line-height: 0.8; }
h1,h2,h3,h4,h5,h6 { line-height: 1.1; }

/*}}}*/

/* @section Layout {{{
******************************************************************************/

#wrap {
	height: auto !important;
	height: 100%; /* Pour IE6*/
	min-height: 100%;
}

#viewport {
	padding: 0 0 0;
	position: relative;
	z-index: 1000;
}

#carte {
	position: fixed !important;
	position: absolute;
	width: 100%;
	height: 100%; /* Pour IE6*/
	left: 0;
	top: 150px;
	z-index: 500;
}

#carte #carte-inner {
	position: relative;
	width: 100%;
	height: 100%; /* Pour IE6*/
	left: 0;
	top: 0;
	z-index: 500;
}

#overlay {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 520;
}

/* Merci à http://www.howtocreate.co.uk/fixedPosition.html :D

* html #overlay, * html #carte {
	left: expression( ( 0 + ( ignoreMeLeft = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}*/

* html #entete {
  left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
} 

* html #overlay, * html #carte {
	left: 0;
	top: 150px;
}

/** html #entete {
	left: 0;
	top: 0;
}*/

 #contenu {
	margin: 0 auto;
	width: 480px;
}

 #contenu #contenu-inner {
	padding: 60px 0;
}

#contenu h1 {
	font-family: 'TitilliumText14L600wt', 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-size: 230%;
	margin: 0 0 1em;
	text-shadow: 2px 2px 1px rgba( 0, 0, 0, 0.3 );
}

#logo-print {
	margin: 0;
	position: absolute;
	left: -99999px;
	text-shadow: none;
}

::-moz-selection { color: #fff;  background: #62615D; }
::selection      { color: #fff;  background: #62615D; }

/*}}}*/

/* @section Entête {{{
******************************************************************************/

#entete {
	height: 150px;
	/*margin: -174px 0 0 0;
	width: 100%;*/
	background: url("../img/interface/bg-entete.png") repeat-x bottom left;
	clear: both;
	top: 0;
	left: 0;
	width:100%;
	position: fixed !important;
	position: absolute;
	z-index: 2000;
}

#entete .entete-inner {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#entete #logo {
	margin: 0 165px 0 0;
	border-bottom: 1px solid #d5d2cd;
	position: relative;
	padding: 0 0 7px 165px;
}

#entete #logo a {
	display: block;
	width: 295px;
	height: 91px;
	margin: 0 auto;
	left: 50%;
	text-indent: -9999px;
	background: url("../img/logos/img-cliptarue.jpg") no-repeat top left;
	overflow: hidden;
	color: #c8c6bf;
}

#entete #nav {
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
	font-size: 115%;
	text-align: center;
	padding: 15px 0 0 0;
	margin: 0;
}

#entete #nav li {
	display: inline;
	padding: 0 15px 0 0;
}

#entete #nav li span,
#entete #nav li a {
	color: #ff7713;
	/*color: #658fb7;*/
	font-weight: normal;
	background: url("../img/interface/bg-entete-separateur.jpg") no-repeat 100% 50%;
	padding: 14px 30px 14px 0px;
	text-decoration: none;
}

#entete #nav li span {
	color: #60615C;
}

#entete #nav li em {
	font-style: normal;
	text-decoration: line-through;
	line-height: 1;
}

#entete #nav li span {
	cursor: default;
}

#entete #nav li.active a {
	color: #b8b6b1;
}

#entete #nav li.dernier a {
	padding: 14px 0;
	background: none;
}

#entete p.entete {
	position: absolute;
	top: 79px;
	right: 0;
	margin: 0;
}

#entete p.ixmedia {
	position: absolute;
	top: 39px;
	right: 0;
	margin: 0;
	color: #918f8c;
	font-size: 90%;
	width: 150px;
	text-align: center;
}

#entete p.ixmedia a {
	color: #918f8c;
	text-decoration: underline;
	font-weight: bold;
}

/*}}}*/

/* @section Accueil {{{
******************************************************************************/

body.template-accueil {
	background: rgb( 101, 143, 183 );
}

body.template-accueil #overlay {
	background: rgba( 101, 143, 183, 0.9 ) !important;
	background: url("../img/interface/bg-overlay-bleu.png") repeat;
}

body.template-accueil #contenu .modele {
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
	padding: 5px 0 10px 0;
	position: relative;
}

body.template-accueil #contenu .modele p.lien {
	text-align: center;
}

body.template-accueil #contenu .modele strong {
	font-weight: normal;
	font-size: 160%;
	margin: 0 0 0.6em;
	text-shadow: 1px 1px 1px rgba( 49, 82, 111, 0.6 );
}

body.template-accueil #contenu .modele strong a {
	outline: none;
}

body.template-accueil #contenu .modele strong img {
	margin-bottom: -4px;
}

body.template-accueil #contenu .bouton {
	margin: 0;
}

body.template-accueil #contenu .bouton a {
	width: 264px;
	height: 45px;
	display: block;
	font-weight: normal;
	text-decoration: none;
	font-size: 130%;
	margin: 0 auto;
	background: url("../img/interface/btn-accueil.png") no-repeat top left;
	color: #fff;
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
	text-shadow: 1px 1px 1px rgba( 166, 124, 36, 0.6 );
}

body.template-accueil #contenu .bouton a:hover {
	background-position: bottom left;
}

body.template-accueil #contenu .bouton a span {
	display: block;
	padding: 10px 14px 0;
}

body.template-accueil .popup {
	position: absolute;
	top: -360px;
	left: -9999px;
	width: 481px;
	background: url("../img/interface/bg-bulle-ombre.png") no-repeat bottom right;
	padding: 0 0 0px 0;
}

body.template-accueil .bulle {
	width: 350px;
	color: #000;
	color: #666666;
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
	position: relative;
}

body.template-accueil .bulle .bulle-fermer {
	position: absolute;
	top: 21px;
	right: 11px;
	width: 20px;
	height: 20px;
	background: url("../img/interface/btn-bulle-fermer.gif");
	overflow: hidden;
	text-indent: -9999px;
}

body.template-accueil .bulle .bulle-top {
	background: url("../img/interface/bg-bulle-top.png") no-repeat top left;
	height: 1%;
}

body.template-accueil .bulle .bulle-top h2 {
	font-weight: normal;
	font-size: 140%;
	padding: 20px 10px 14px 15px;
}

body.template-accueil .bulle .bulle-bottom {
	background: url("../img/interface/bg-bulle-bottom.png") no-repeat bottom left;
	padding: 0 0 90px 15px;
}

body.template-accueil .bulle .bulle-bottom a {
	font-weight: normal;
	color: #666;
	text-transform: uppercase;
	text-decoration: underline;
}

body.template-accueil .bulle .bulle-bottom .plus {
	padding: 12px 0 0 0;
	margin: 0;
	font-size: 90%;
}

/*}}}*/

/* @section Participation {{{
******************************************************************************/

body.template-participation {
	background: rgb( 143, 189, 103 );
}

body.template-participation #overlay {
	background: rgba( 143, 189, 103, 0.9 ) !important;
	background: url("../img/interface/bg-overlay-vert.png") repeat;
}

body.template-participation #contenu {
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
}

body.template-participation #contenu ul {
	margin: 0;
	position: relative;
}

body.template-participation #contenu li.etape {
	background: url("../img/interface/bg-etape.png") no-repeat top left;
	position: relative;
	margin: 0 0 5px -83px;
	padding: 20px 0 20px 83px;
	/*overflow: hidden;*/
	zoom: 1;
}

body.template-participation #contenu form {
	position: relative;
}

body.template-participation #contenu .message {
	position: relative;
	margin: 0 0 15px -83px;
	padding: 20px 0 20px 83px;
	/*overflow: hidden;*/
	zoom: 1;
	height: 1%;
}

body.template-participation #contenu .message-erreurs {
	background: url("../img/interface/bg-etape-e.png") no-repeat top left;
}

body.template-participation #contenu .message-succes {
	background: url("../img/interface/bg-etape-s.png") no-repeat top left;
}

body.template-participation #contenu li.etape a {
	color: #fff;
	font-weight: normal;
	text-decoration: underline;
}

body.template-participation #contenu li.etape span.numero {
	position: absolute;
	top: 9px;
	left: 23px;
	font-size: 220%;
	text-shadow: 1px 1px 1px #618442;
	line-height: 1.5;
}

body.template-participation #contenu li.etape-1 .etape-contenu {
	font-size: 140%;
}

body.template-participation #contenu li.etape-2 {
	padding-top: 10px;
}

body.template-participation #contenu li.etape-2 .bouton {
	margin: 0 0 15px;
}

body.template-participation #contenu li.etape-2 .bouton a {
	float: left;
	background: url("../img/interface/btn-bouton-youtube-droit.png") no-repeat top right;
	padding: 0 10px 0 0;
	height: 60px;
	text-decoration: none;
	font-size: 150%;
	font-weight: normal;
	text-shadow: 1px 1px 1px rgba( 43, 81, 118, 0.6 );
}

body.template-participation #contenu li.etape-2 .bouton a span {
	display: block;
	height: 60px;
	float: left;
	background: url("../img/logos/img-youtube.png") no-repeat 100% 50%;
	padding: 0 87px 0 15px;
}

body.template-participation #contenu li.etape-2 .bouton a strong {
	font-weight: normal;
	display: block;
	height: 60px;
	float: left;
	background: url("../img/interface/btn-bouton-youtube.png") no-repeat top left;
	line-height: 60px;
}

body.template-participation #contenu li.etape-2 .champ {
	font-size: 115%;
}

body.template-participation #contenu li.etape-2 .champ label {
	display: block;
	padding: 0 0 0 15px;
	margin: 0 0 8px;
}

body.template-participation #contenu li.etape-2 .champ span {
	display: block;
	width: 486px;
	position: relative;
	margin: 0 0 0 -3px;
	height: 36px;
	background: url("../img/interface/bg-champ-long.png") no-repeat;
}

body.template-participation #contenu li.etape-2 .champ-erreur span {
	background-image: url("../img/interface/bg-champ-long-e.png");
}

body.template-participation #contenu li.etape-2 .champ input {
	border: none;
	background: transparent;
	padding: 0 12px;
	width: 460px;
	margin: 8px 0 0 3px;
	color: #60615C;
}

body.template-participation #contenu li.etape-3 {
	margin-bottom: 0;
	padding-bottom: 0;
}

body.template-participation #contenu li.etape-3 p.question {
	margin: 0 0 15px;
	font-size: 140%;
}

body.template-participation #contenu li.etape-3 fieldset {
	margin: 0 0 5px;
}

body.template-participation #contenu li.etape-3 fieldset legend {
	text-transform: uppercase;
	font-size: 115%;
	margin: 0 0 0.5em 0;
	padding: 0;
}

body.template-participation #contenu li.etape-3 ul {
	margin-bottom: 5px;
}

body.template-participation #contenu li.etape-3 ul li {
	float: left;
	width: 240px;
	margin: 0 0 15px;
	height: 1%;
	position: relative;
}

body.template-participation #contenu li.etape-3 ul li.pair {
	width: 225px;
	padding: 0 0 0 15px;
}

body.template-participation #contenu li.etape-3 .jeunes ul {
	margin: 0 0 15px;
}

body.template-participation #contenu li.etape-3 .jeunes ul li {
	margin-bottom: 0;
}

body.template-participation #contenu li.etape-3 ul li label {
	display: block;
	margin: 0 0 5px;
	text-transform: uppercase;
	font-size: 85%;
}

body.template-participation #contenu li.etape-3 ul li span {
	display: block;
	width: 236px;
	height: 36px;
	position: relative;
	margin: 0 0 0 -3px;
	background: url("../img/interface/bg-champ-court.png") no-repeat;
	_background: url("../img/interface/bg-champ-court-ie6.png") no-repeat;
}

* html body.template-participation #contenu li.etape-3 ul li span {
	width: 225px;
}

body.template-participation #contenu li.etape-3 ul li.champ-erreur span {
	background-image: url("../img/interface/bg-champ-court-e.png");
}

body.template-participation #contenu li.etape-3 ul li input {
	border: none;
	background: none;
	padding: 0 12px;
	margin: 8px 0 0 3px;
	font-size: 115%;
	color: #60615C;
	width: 201px;
}

body.template-participation #contenu li.etape-3 ul li em {
	font-style: normal;
	display: block;
	padding: 20px 0 0 0;
	line-height: 1.4;
	font-size: 85%;
}

body.template-participation #contenu li.etape-3 .ajouter {
	font-size: 115%;
}

body.template-participation #contenu li.etape-3 .ajouter a {
	float: right;
}

body.template-participation #contenu li.etape-4 {
}

body.template-participation #contenu li.etape-4 p.question {
	margin: 0 0 15px;
	font-size: 140%;
}

body.template-participation #contenu li.etape-4 .conditions {
	font-family: Arial, Verdana, sans-serif;
}

body.template-participation #contenu .soumettre {
	margin: 0;
}

body.template-participation #contenu .soumettre button {
	width: 132px;
	height: 60px;
	background: url("../img/interface/btn-envoyer.png") no-repeat top left;
	color: #fff;
	padding: 0;
	border: none;
	font-family: 'TitilliumText14L600wt', 'Trebuchet MS', sans-serif;
	line-height: 60px;
	font-size: 220%;
	text-shadow: 1px 1px 1px rgba( 43, 81, 118, 0.6 );
	margin: 0 auto;
	display: block;
}

/*}}}*/

/* @section Marche à suivre {{{
******************************************************************************/
/*
body.template-marche-a-suivre {
	background: rgb( 246, 192, 78 );
}

body.template-marche-a-suivre #overlay {
	background: rgba( 246, 192, 78, 0.9 ) !important;
	background: url("../img/interface/bg-overlay-jaune.png") repeat;
}
*/
body.template-marche-a-suivre {
	background: rgb( 101, 143, 183 );
}

body.template-marche-a-suivre #overlay {
	background: rgba( 101, 143, 183, 0.9 ) !important;
	background: url("../img/interface/bg-overlay-bleu.png") repeat;
}
body.template-marche-a-suivre #contenu a {
	/*color: #8fbd67;*/
	color:#F6C04E;
}

body.template-marche-a-suivre #contenu .bouton {
	padding: 15px 0 0 0;
	margin: 0;
}

body.template-marche-a-suivre #contenu .bouton a {
	width: 332px;
	height: 45px;
	display: block;
	font-weight: normal;
	font-size: 130%;
	text-decoration: none;
	margin: 0 auto;
	background: url("../img/interface/btn-marche.png") no-repeat top left;
	color: #fff;
	font-family: 'TitilliumText14L800wt', 'Trebuchet MS', sans-serif;
	text-shadow: 1px 1px 1px rgba( 166, 124, 36, 0.6 );
}

body.template-marche-a-suivre #contenu .bouton a:hover {
	background-position: bottom left;
}

body.template-marche-a-suivre #contenu .bouton a span {
	display: block;
	padding: 10px 14px 0;
}

/*}}}*/

/* @section Marche à suivre {{{
******************************************************************************/

body.template-404 {
	background: rgb( 122, 118, 113 );
}

body.template-404 #overlay {
	background: rgba( 122, 118, 113, 0.9 ) !important;
	background: url("../img/interface/bg-overlay-gris.png") repeat;
}

/*}}}*/

/* @section Tooltip {{{
******************************************************************************/

.tip {
	cursor: help;
	border-bottom: 1px dotted;
}

#tooltip {
	position: absolute;
	z-index: 20000;
}

#tooltip h3, #tooltip div { margin: 0; }

/* }}} */