/*-------------------- Reset --------------------*/
/* Adapted from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

body {
	line-height: 1.1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/*-------------------- General --------------------*/

body {
	background-color : #ccd8ba;
	background-image : url(img/bg_page.jpg);
	font-size : 10pt;
	font-family : verdana;
	font-size : 11pt;
	font-size-adjust: 0.55;
}

h1, h2, p {
	margin : 0;
	padding : 0;
}

em {
	font-style : italic;
}

#conteneur {
	width : 900px;
	margin : 0 auto;
}

.clear  {
	clear : both;
}

.separateur {
	clear : both;
	width : 850px;
	height : 48px;
	background-image : url(img/separateur.png);
	background-repeat : no-repeat;
	background-position : center;
	/* height et bg-position pour régler les problèmes de margin avec les floats */
}

.pad {
	padding : 20px;
}

.DVbold {
	font-family : DejaVuSansCondensedBold;
}

.bold {
	font-weight : bold;
}

.arrondis {
	-moz-border-radius:    25px;
	-webkit-border-radius: 25px;
}

a {
	text-decoration : none;
	color : #de564b;
	font-weight : bold;
}

a:hover {
	text-decoration : underline;
}

.corail {
	color : #de564b;
}

.mev {
	color : #de564b;
	font-weight : bold;
}

.little {
	font-size : 0.8em;
	font-style : italic;
}

/*-------------------- Fonts --------------------*/

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

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

/*-------------------- Header --------------------*/

#header {
	width : 350px;
	margin : 0 auto;
	text-align : center;
	line-height: 0.6;
}

#header h1 {
	font-family : LeagueGothic, impact;
	font-size : 60px;
	letter-spacing : 15px;
	line-height : 0.8;
	color : #de564b;
}

#header h2, #header h2 a {
	font-family : Prociono, Times;
	font-size : 35px;
	letter-spacing : 5px;
	line-height : 0.9;
	text-transform : uppercase;
	color : #fff;
}

#header span {
	display : block;
	font-size : 25px;
	color : #de564b;
	line-height: 0.5;
	-webkit-transform: rotate(-25deg) scale(1, 1);
	-moz-transform:    rotate(-25deg) scale(1, 1);
	transform:         rotate(-25deg) scale(1, 1);
}

#header a:hover {
	text-decoration : none;
}

/*-------------------- Menu --------------------*/

#menu {
	width : 650px;
	margin : 0 auto;
	text-align : center;	
	font-family : LeagueGothic, impact;
	font-size : 25px;
	text-transform : uppercase;
	letter-spacing : 3px;
}

/*-------------------- Back to top --------------------*/

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #de564b;
}

/* arrow icon (span tag) */
#back-top span {
	width: 50px;
	height: 50px;
	display: block;
	margin-bottom: 7px;
	background: url(img/arrow_top.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

/*-------------------- About Index --------------------*/

#about h3 {
	width : 850px;
	margin : 0 0 10px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
}

#aboutIndex img {
	width : 150px;
	margin-right : 30px;
	margin-bottom : 10px;
	float : left;
}

#aboutIndex #bonjour {
	width : 480px;
	font-size : 15px;
	line-height : 25px;
	margin-top : 25px;
	margin-right : 25px;
	float : left;
}

#stage {
	float : left;
	width : 175px;
}

#stageLabel {
	height : 50px;
	margin-top : 50px;
	padding-top : 15px;
	text-align : center;
	background-color : #de564b;
	
	-moz-border-radius:    15px;
	-webkit-border-radius: 15px;
	
	-webkit-transform: rotate(15deg) scale(1, 1);
	-moz-transform:    rotate(15deg) scale(1, 1);
	transform:         rotate(15deg) scale(1, 1);

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#stageLabel:hover {
	-webkit-transform: rotate(0deg) scale(1, 1);
	-moz-transform:    rotate(0deg) scale(1, 1);
	transform:         rotate(0deg) scale(1, 1);	
}

#stagePlus {
	margin-top : 25px;
	-webkit-transform: rotate(0deg) scale(1, 1);
	-moz-transform:    rotate(0deg) scale(1, 1);
	transform:         rotate(0deg) scale(1, 1);
}

/*-------------------- Commentaires --------------------*/

.commentBox h4 {	
	margin : 0 0 5px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
	clear : both;
}

.commentBox h5 {	
	margin : 0 0 5px 0;
	font-size : 16px;
	color  : #de564b;
	clear : both;
}

.commentBox h5 span {	
	font-weight : bold;
}

.commentBox .comment {
	margin-bottom : 10px;
}



/*-------------------- About --------------------*/

#about h3 {
	width : 850px;
	margin : 0 0 10px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
}

#about h4 {
	width : 330px;
	line-height : 26px;
	margin : 10px 0;
	font-size : 16px;
	color  : #de564b;
	font-weight : bold;
	background : url('img/arrow_bottom.png') no-repeat right center;
}

#about h4.active {
	background : url('img/arrow_top.png') no-repeat right center;
}

#about .name {
	font-weight : bold;
	color : #de564b;
	display : inline-block;
	width : 150px;
	margin-right : 10px;
}

#about .date { 
	display : inline-block;
	width : 130px;
	margin-right : 10px;
	font-size : 15px;
	font-style : italic;
}

#about li span.details {
	/*display : block;
	position : relative;
	top : -210px;
	left : 50px;
	width : 300px;
	height : 200px;
	border : 1px solid green;*/
}

/*-------------------- Galerie --------------------*/

#galerie {
	position : relative;
}

#galerie .img {
	position : relative;
	overflow : hidden;
	background-color : #de564b;
	margin : 6px;
	float : left;
	width : 200px;
	height : 200px;
	border : 1px solid #de564b;
}

#galerie .img span {
	display : none;
	position : absolute;	
	top : 160px;
	left : 0;
	height : 20px;
	padding : 0 5px;
	background-image : url(img/bg_span_galerie.png);
	background-repeat : repeat;
	border : 1px solid #de564b;
	border-left : none;
}

#galerie .img span a, #galerie .img span a:hover {
	text-decoration : none;
	color : #000;
}

#galerie .img:hover span {
	display : block;
}

/*
#galerie span {
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
}

#galerie img {
	position : absolute;
	top : 0;
	left : 0;
	z-index : 2;
}
*/

/*-------------------- Galerie Single --------------------*/
#single {
	width : 850px;
}

#single h3, #single h4 {	
	margin : 0 0 5px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
	clear : both;
}

#single h3{
	font-size : 35px;
}

#single .post-infos {
	margin : 0 0 10px 0;
	text-align : center;
	font-size : 14px;
	font-style : italic;
}

#single .post-content {
	text-align : center;
}

#single .post-content p {
	text-align : left;
}

#single .post-content img {
	text-align : left;
	border : 1px solid #de564b;
	margin : 0 0 15px 0;
}

.comment-box h5 {
	font-weight : bold;
	color  : #de564b;
	margin : 10px 0;
}

.comment-box input, .comment-box textarea {
	margin-bottom : 10px;
	border : 1px solid #de564b;
}

.comment-box input:hover, .comment-box textarea:hover {
	border : 1px solid #a9bbc7;
}

.comment-box #submit {
	margin-top : 10px;
}

#leftArrow, #rightArrow {
	width : 425px;
	float : left;
}

#leftArrow img {
	width : 30px;	
	float : left;
	margin-right : 10px;
}

#rightArrow img {
	width : 30px;	
	float : right;
	margin-left : 10px;
}

#leftArrow a, #rightArrow a {
	font-size : 12px;
	color : #000;
	float : left;
	padding : 5px;
	background-image : url(img/bg_alpha.png);
	background-repeat : both;
	border : 2px solid #de564b;
}

#rightArrow a {	
	float : right;
}

/*-------------------- Blog --------------------*/

#blog .billet {
	margin-bottom : 70px;
}

#blogSingle .billet {
	margin-top : 40px;
}

#blog h2, #blogSingle h2 {
	clear : both;	
	margin : 0 0 5px 0;
	font-size : 25px;
	color  : #de564b;
}

#blog .post-infos, #blogSingle .post-infos {
	margin-bottom : 15px;
	margin-left: 2px;
	font-weight: 400;
	background: url(img/dots.png) left no-repeat;
	padding-left: 17px;
	color: #5a5a5a;
	font-size: 1.03em;
	float: left;
}

#blog .post-relatives a, #blogSingle .post-relatives a {
	text-align: right;
	font-size: 1em;
	background: url(img/comments.png) left no-repeat;
	float: right;
	padding-left: 32px;
	margin-top: -3px;
	margin-bottom : 15px;
	height: 23px;
	line-height: 150%;
	color: #5a5a5a;
	border: none;
	font-weight : normal;
}

#blog p, #blogSingle p {
	margin : 10px 0;
}

#blog .aligncenter, #blogSingle .aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

#blogSingle  .extraitOnly {
	display : none;
}

#blog .toto, #blog .toto img {
	text-align : left;
	margin : 0;
	display : inline;
}

/*-------------------- Now --------------------*/

#nowBlog {
position : relative;
}

#nowBlog h3 {
	margin : 0 0 5px 0;
	font-size : 26px;
	color  : #de564b;
	width : 750px;
	margin-left : 325px;
}

#nowBlog a span {
	position : absolute;
	top : 0;
	left : 0;
	font-weight : normal;
	color: #bbb;
	width : 50px;
	line-height : 30px;
	padding-left : 25px;
	background : url('img/arrow_bottom.png') no-repeat left center;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#nowBlog a span:hover {
	color: #de564b;
}

#nowBlog a span.active {
	background : url('img/arrow_top.png') no-repeat left center;
}

#nowBlog a:hover span {
	visibility : visible;
}

#now {
	position : relative;
	display : none;
}

#now h3, #nowIndex h3 {
	width : 850px;
	margin : 0 0 10px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
}

#now a {
	border : none;
}

#now p {
	margin-bottom : 5px;
}

#now .left {
	float : left;
	width : 390px;
	margin-right : 10px;
}

#now .right {
	float : right;
	width : 450px;
	margin-top : 21px;
}

/*-------------------- Liens --------------------*/

#liens h3 {
	font-weight : bold;
	color  : #de564b;
	margin : 10px 0;
}

/*-------------------- Liens --------------------*/

#planSite h3 {
	font-weight : bold;
	color  : #de564b;
}

#planSite ul {
	margin-left : 10px;
}

#planSite li a {
	font-weight : normal;
	color : #000;
}

/*-------------------- Contact --------------------*/

#contact form {
	width : 550px;
	float : left;
}

#contact label {
	display : block;
	width : 100px;
	float : left;
	color : #de564b;
	font-weight : bold;
}

#contact input, #contact textarea {
	margin-bottom : 10px;
	border : 1px solid #de564b;
}

#contact input:hover, #contact textarea:hover {
	border : 1px solid #a9bbc7;
}

#contact #submit {
	display : block;
	margin-left : 150px;
}

#contact #infos {
	float : left;
	width : 300px;
}

#contact #infos p {
	margin-bottom : 10px;
}

#contact #sensCritique {
	padding-left : 15px;
	background : url('img/senscritique.png') no-repeat left center;
}

#contact #tweet {
	padding-left : 15px;
	background : url('img/twitterLogo.png') no-repeat left center;
}

/*-------------------- Admin --------------------*/

#admin h3 {	
	margin : 5px 0;
	text-align : center;
	font-size : 26px;
	color  : #de564b;
}

#admin h4 {	
	margin : 0 0 5px 0;
	font-size : 20px;
	color  : #de564b;
}

#admin a {
	color  : #000;
	font-weight : normal;
}

#admin ul {
	margin-bottom : 10px;
}

#admin .left {
	float : left;
	width : 590px;
}

#admin .right {
	float : right;
	width : 250px;
	padding : 5px;
	background-image : url(img/bg_alpha.png);
	background-repeat : both;
	border : 2px solid #de564b;
}

#admin label, #admin input {
	font-size : 15px;
}

#admin input, #admin textarea {
	margin-bottom : 10px;
	border : 1px solid #de564b;
	-moz-border-radius:    5px;
	-webkit-border-radius: 5px;
	font-family: verdana;
}

#admin input:hover, #admin textarea:hover {
	border : 1px solid #a9bbc7;
}

#admin #inputTitre {
	margin-top : 10px;
	font-size : 20px;
	width : 550px;
}

#admin #inputImage, #admin #inputMiniature {
	width : 550px;
}

label {
	font-weight : bold;
	color : #de564b;
}

input + label { /*tous les labels qui suivent directemet un input */
	color: black;
	font-weight : normal;
}

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

#footer {
	margin-top : 50px;
	line-height: 1.3;
	clear : both;
}

#twitter {
	width : 475px;
	height : 142px;
	float : left;
	font-size : 15px;
	background-image : url('img/twitter.png');
	background-repeat : no-repeat;
}

#twitter h3 {
	font-size : 26px;
	float : left;
	color : #de564b;
}

#twitter span {
	display : block;
	font-weight : bold;
}

#footerContent {
	width : 375px;
	float : left;
}

@-moz-document url-prefix()
{
    #twitter {
		font-size : 10pt;
    }
}