/* ****************************************************

	@file		  screen.css
	@description  Feuille de styles globale
	@author       remi (ixmedia.com)
	@version	  20090325

***************************************************** */

@import url("reset.css");

/*
 * @section Basic
 ******************************************************************************/

html {
	font-size: 62.5%;
}

html, body {
	height: 100%;
}

body {
	font-family: Arial, Verdana, sans-serif;
	font-size: 120%;
	line-height: 1.5;
	color: #000;
	background: #fff;
	position: relative;
}

p,ul,ol,table { margin-bottom: 1em; }
ul { margin-left: 20px; }
a { text-decoration: none; cursor: pointer; color: #7dd1e1; }
a:focus { outline: 1px dotted; }
a:visited {  }
a:hover, a:focus { color: #6cc0d0; text-decoration: none; }
a *, button * { cursor: pointer; }
hr { display: none; }
small { font-size: 90%; }
input, select, button, textarea, option { font-family: Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;}
/* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
sup { font-size: 80%; line-height: 1; vertical-align: super; }
code { font-size: 10pt; font-family: monospace; }

/*
 * @section Layout
 ******************************************************************************/

#wrap {
	width: 940px;
	margin: 0 auto;
	background: url("../img/bg-grid.gif") repeat-y;
	background: none;
}

/*
 * @section Entête
 ******************************************************************************/

#entete {
	padding: 50px 0 0 0;
	width: 940px;
	height: 280px;
	position: relative;
}

#entete #logo {
	margin: 0;
}

#entete #logo a {
	color: #ddd;
	display: block;
	width: 700px;
	height: 240px;
	background: url("../img/img-logo.jpg") no-repeat;
	text-indent: -9999px;
	outline: none;
}

/*
 * @section Navigation
 ******************************************************************************/

#nav {
	position: absolute;
	bottom: 38px;
	left: 705px;
}

#nav ul {
	font-size: 180%;
	font-weight: bold;
	letter-spacing: -0.02em;
	margin: 0;
}

#nav ul li {
	float: left;
	margin: 0 0 0 0;
}

#nav ul li a {
	display: block;
	padding: 0 0 0.4em;
}

#nav ul li.active a {
	color: #000;
	background: url("../img/bg-nav-active.jpg") no-repeat;
	padding: 0 0.6em 0 30px;
}


/*
 * @section Contenu
 ******************************************************************************/

#contenu {
	width: 700px;
	float: left;
	padding: 0 0 40px;
}

#contenu .page-title {
	padding-left: 60px;
	padding-bottom: 25px;
	font-size: 180%;
	letter-spacing: -0.02em;
	line-height: 1;
}

#contenu .nothing {
	padding: 1em 0;
	padding-left: 60px;
	padding-right: 60px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #fafafa;
	color: #999;
}

#contenu .nothing a {
	color: #666;
	font-weight: bold;
}

#contenu .nothing p {
	margin: 0;
}

#contenu .nothing .quoi {
	font-size: 350%;
	margin: 0 0 0.3em;
	letter-spacing: -0.05em;
	line-height: 1;
}

#contenu .no-comments,
#contenu .comments-closed {
	padding-left: 120px;
}

#contenu .comments-closed {
	margin-top: 1.7em;
}

#contenu .no-comments .quoi {
	font-size: 180%;
	letter-spacing: -0.02em;
}

#contenu .comments-closed .quoi {
	font-size: 150%;
	letter-spacing: -0.02em;

}
 
/*
 * @section Billets
 ******************************************************************************/

.billet {
	position: relative;
	padding: 0 0 45px 120px;
	background: url("../img/bg-separateur-billet.gif") no-repeat bottom left;
	margin: 0 0 2em;
	height: 1%;
}

.billet .vcard {
	font-size: 90%;
	color: #6f6f6f;
}

.billet .billet-inner {
	padding-right: 60px;
}

.billet .wp-caption p {
	margin: 0;
	padding: 3px 0 0 0;
}

.billet .alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.billet .alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.billet p.edit {
	position: absolute;
	top: 50px;
	left: 0;
	width: 100px;
	text-align: right;
	font-size: 90%;
}

.president p.edit {
	top: 74px;
}

.billet p.edit a {
	color: #ddd;
}

.billet:hover p.edit a {
	color: #aaa;
}

.billet:hover p.edit a:hover {
	color: #777;
}

.billet h2 {
	font-size: 145%;
	border-bottom: 1px solid #ccc;
	color: #333;
	margin: 2em 0 1em;
}

.billet h3 {
	font-size: 125%;
	color: #333;
	margin: 1.4em 0 0.6em;
}

.billet blockquote {
	background: #eee;
	color: #333;
	font-family: Georgia, serif;
	font-style: italic;
	padding: 15px 15px 10px;
	margin: 0 0 1em;
	margin-left: -15px;
}

.billet ul {
	margin-left: 9px;
}

.billet ul li {
	list-style: none;
	margin: 0 0 0.6em;
	background: url("../img/ico-bullet.gif") no-repeat 0 4px;
	padding-left: 15px;
}

.billet ol li {
	list-style: decimal;
	margin: 0 0 0.3em 20px;
}

.billet pre {
	margin: 0 0 1em;
	font-size: 8pt;
	background: #222;
	color: #fff;
	padding: 10px;
	overflow: auto;
}

.billet p.permalien {
	margin: 2em 0 0 0;
	font-size: 90%;
	font-weight: bold;
}

.billet p.categorie {
	margin: 0 0 0.4em;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 150%;
	line-height: 8pt;
	color: #bbb;
}

.billet p.categorie a {
	color: #6f6f6f;
	font-size: 60%;
}

.billet .entry-title {
	font-size: 330%;
	letter-spacing: -0.07em;
	line-height: 1;
	margin: 0 0 0.2em;
}

.billet .vcard img {
	position: absolute;
	left: 60px;
	top: 0;
	display: block;
}

.president {
	padding-bottom: 55px;
	padding-left: 0;
}

.president .billet-inner {
	padding-top: 21px;
	padding-left: 120px;
	padding-bottom: 5px;
	border: 1px solid #e1e1e1;
}

.president .vcard img {
	top: 24px;
}

.president a,
.commentaire-president a {
	color: #f7941d;
}

.president a:hover,
.commentaire-president a:hover {
	color: #e18618;
}

.president-footer .trente {
	text-align: center;
}

.president-footer strong {
	display: block;
	width: 210px;
	height: 20px;
	background: url("../img/signature-cfd.gif") no-repeat;
	text-indent: -9999px;
	margin-top: 3px;
}


/*
 * @section Billets Twitter
 ******************************************************************************/

.billet-twitter {
	margin-top: -22px;
	padding-bottom: 25px;
}

.billet-twitter .billet-inner {
	background: url("../img/twitter.gif") no-repeat 5px 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 123px;
	height: auto !important;
	height: 30px;
	min-height: 30px;
	position: relative;
}

.billet-twitter .billet-inner p.oiseau {
}

.billet-twitter .billet-inner p.oiseau a {
	width: 123px;
	height: 60px;
	position: absolute;
	top: 10px;
	left: 0;
	text-indent: -9999px;
	overflow: hidden;
}

.billet-twitter .billet-inner p.titre {
	margin: 0;
}

.billet-twitter .billet-inner p.titre a {
	display: block;
	background: url("../img/ixmedia.gif") no-repeat top left;
	width: 71px;
	height: 21px;
	text-indent: -9999px;
	margin: 0;
	overflow: hidden;
}

.billet-twitter .billet-inner .entry-content p {
	display: inline;
}
.billet-twitter .billet-inner .entry-content {
	padding-left: 8px;
}

/*
 * @section Sidebar
 ******************************************************************************/

#sidebar {
	float: right;
	width: 220px;
	padding: 20px 0 0 0;
}

#sidebar .ecrire {
	padding: 0 0 20px 0;
	height: 1%;
	font-size: 120%;
}

#sidebar .ecrire p {
	margin: 0;
	padding: 0 0 0 18px;
}

#sidebar .ecrire p a {
	background: #7ED1E1;
	float: left;
	color: #fff;
	padding: 0px 7px;
}

#sidebar .ecrire p a:hover {
	background: #6cc0d0;
}

#sidebar .categories {
	background: url("../img/bg-separateur-sidebar.gif") no-repeat top left;
	padding: 30px 0 20px 0;
	height: 1%;
}

#sidebar .categories ul {
	margin: 0 0 0 18px;
}

#sidebar .categories ul li {

}

#sidebar .categories ul li a {
	font-weight: bold;
	color: #000;
}

#sidebar .flickr {
	background: url("../img/bg-separateur-sidebar.gif") no-repeat top left;
	padding: 30px 0 30px 0;
	height: 1%;

}

#sidebar .flickr h2 {
	font-size: 120%;
	margin: 0 0 1em 18px;
	color: #555;
}

#sidebar .flickr h2 a {
	color: #555;
}

#sidebar .flickr h2 strong {
	color: #888;
}

#sidebar .flickr ul {
	margin: 0 0 0 10px;
}

#sidebar .flickr ul li {
	float: left;
	padding-left: 10px;
	margin-bottom: 10px;
}

#sidebar .flickr ul li img {
	display: block;
	-ms-interpolation-mode:bicubic;
}

#sidebar .recherche {
	background: url("../img/bg-separateur-sidebar.gif") no-repeat top left;
	padding: 40px 0 25px 0;
	height: 1%;
}

#sidebar .recherche p {
	margin: 0;
	background: url("../img/bg-recherche.gif") no-repeat 0 50%;
	padding: 0;
	height: 36px;
	position: relative;
}

#sidebar .recherche p input#s {
	border: none;
	margin: 0 0 0 16px;
	width: 160px;
	font-size: 90%;
	background: #fff;
	position: absolute;
	top: 9px;
	left: 0;
}

#sidebar .recherche p input#s-submit {
	position: absolute;
	left: 195px;
	top: 2px;
}

#sidebar .mois {
	font-size: 90%;
	background: url("../img/bg-separateur-sidebar.gif") no-repeat top left;
	padding: 40px 0 30px 0;
	height: 1%;
}

#sidebar .mois ul {
	margin-left: 18px;
}

#sidebar .mois ul li {
	margin: 0 0 0.5em;
}

/*
 * @section Footer
 ******************************************************************************/

#pied {
	width: 940px;
	margin: 0 auto;
	color: #555;
	font-size: 90%;
	padding: 0 0 2em;
}

#pied div {
	background: #fafafa;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 0.8em  0;
	padding-left: 120px;
	position: relative;
}

#pied p {
	margin: 0;
}

#pied a {
	color: #333;
}

#pied a:hover {
	color: #111;
}

#pied img {
	float: left;
	margin: 0 4px 0 0;
}

#pied div .login a {
	position: absolute;
	top: 0.8em;
	right: 0.8em;
	color: #bbb;
}

#pied div .login a:hover {
	color: #888;
}

/*
 * @section Navigation
 ******************************************************************************/

.navigation {
	position: relative;
	margin-left: 120px;
	margin-right: 60px;
	margin-top: 2em;
}

.navigation .alignleft {
	float: left;
}

.navigation .alignright {
	float: right;
}

.navigation .aligncenter {
	position: absolute;
	width: 200px;
	left: 50%;
	margin-left: -100px;
	text-align: center;
	color: #777;
}

.navigation a {
	color: #aaa;
}

.navigation a:hover {
	color: #666;
}

/*
 * @section Commentaires
 ******************************************************************************/

#comments h2 {
	margin-left: 120px;
	font-size: 180%;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 0;
	margin-top: 1em;
}

#comments .commentaire {
	padding-left: 120px;
	position: relative;
	height: 1%;
	padding-top: 15px;
	margin: 0 0 0;
}

#comments .commentaire-president {
	border: 1px solid #ddd;
	margin-top: -1px;
}

#comments .commentaire .commentaire-inner {
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.5em;
	padding-right: 60px;
}


#comments .commentaire-president .commentaire-inner {
	border: none;
	padding-bottom: 0;
}

#comments .commentaire .commentaire-contenu ul li {
	list-style: circle;
}

#comments .commentaire cite {
	font-weight: bold;
	font-style: normal;
	color: #333;
}

#comments .commentaire cite a {
	color: #528c98;
}

#comments .commentaire cite a.permalink {
	color: #aaa;
}

#comments .commentaire .gravatar {
	position: absolute;
	left: 60px;
	top: 18px;
}
#comments .commentaire-president .gravatar {
	
}

#respond h2 {
	margin-bottom: 0.7em;
}

#commentform {
	padding-left: 120px;
	position: relative;
	height: 1%;
}

#commentform .gravatar {
	position: absolute;
	left: 60px;
	top: 0;
}

#commentform .commentaires {
	margin: 0;
}

#commentform p textarea {
	width: 500px;
}

#commentform .notes {
	font-size: 90%;
	color: #777;
	margin: 0 0 1.4em;
	background: #ccc;
	width: 510px;
}

#commentform .notes span {
	display: block;
	padding: 3px 6px;
}

#commentform p textarea,
#commentform p input {
	display: block;
	border: 1px solid #ccc;
	padding: 4px;
	margin-top: 3px;
	margin-bottom: 0;
}

