/*
Theme Name: WP-Spikly
Theme URI: http://spikly.com
Description: Blog spikly
Version: 0.1
Author: Keyrus
Author URI: http://keyrus.com/
Tags: blue, custom header, fixed width, two columns
Text Domain: Keyrus

	WP-Spikly 0.1
	http://keyrus.com/

	This theme was designed and built by Keyrus Octobre 2009
	
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/


/** RESET DES STYLES CSS
--------------------------------------------------------------------------**/
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {  margin:1em 0; padding:0; }

form, fieldset, legend { 
	margin:0; padding:0;
	border:0 
}

ul { padding:0 0 0 2em; margin:1em 0 }

p { margin:1em 0 }

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

body {
	font: 77%/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	color:#6F6F6F;
	margin:0; padding:0;
	background:#FCFCFC url(images/body_bg.gif) repeat-x top
}

a img { border:0; }

.clear { clear:both }

a { 
	font-weight:bold;
	color:#8A2210; 
}

a:hover { text-decoration:none; }

a:focus { outline:none }


/** Déclarations génériques
--------------------------------------------------------------------------**/
#conteneur:after, .interne-billet:after, .liste-archives:after, .contenu-billet:after {
	content:""; 
	display:block; 
	clear:both 
}

.btn-submit {
	border:0;
	padding:0;
	width:88px !important; height:22px !important;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	cursor:pointer;
}



/** Mise en place des différents backgrounds
--------------------------------------------------------------------------**/
#global {
	background:url(images/global_bg.gif) repeat-x bottom;
	margin-top:6px;
	position:relative;
	min-width:988px;
	min-height:1600px
}

#global2 { 
	background:url(images/global2_bg.jpg) no-repeat center top; 
	padding-bottom:18px
}



/** Header
--------------------------------------------------------------------------**/
#header {
	height:383px;
	width:988px;
	margin:auto;
	position:relative;
}

#header h1 { margin:0 }

#header h1 a {
	position:absolute;
	width:250px; height:100px;
	right:40px; top:45px;
	text-indent:-9999px;
}



/** Conteneur
--------------------------------------------------------------------------**/
#conteneur { background:url(images/mad.png) no-repeat 15px bottom; }



/** Contenu
--------------------------------------------------------------------------**/
#contenu {
	padding-bottom:431px;
	width:696px; 
	float:left;
	border-right:1px solid #FFFFFF;
}


/** Style des billets
--------------------------------**/
.billet { padding-right:20px; margin:0 0 75px 50px; }

.interne-billet {
	padding-bottom:18px;
	background:url(images/billet_bg.png) repeat-x bottom;
}

.contenu-billet {
	padding:44px 15px 0 0;
	position:relative;
}

.contenu-billet h2 {
	float:left; /* contexte de formatage */
	position:relative;
	margin:0; padding:0;
	text-transform:uppercase; 
	font-size:1.5em;
}

.contenu-billet h2 a { text-decoration:none }

.contenu-billet h2 .mad {
	position:absolute;
	left:-50px;
}

.contenu-billet h2 .c-mad { top:-41px }
.contenu-billet h2 .pas-mad { top:-5px }


/** Gestion du titre
--------------------------------**/
.contenu-billet h2 span { 
	display:-moz-inline-box;
	display:inline-block;
	background:#000;
	color:#fff;
	padding:0 15px;
	border:1px solid #979797;
	margin:0 0 4px 0;
	cursor:pointer;
}

.contenu-billet h2 span.petit-titre { font-size:1.25em; }

.contenu-billet h2 span.grand-titre { font-size:2.5em; }


/** Le texte des billets
--------------------------------**/
.texte {
	clear:both;
	font-size:1.1em;
	padding-top:15px;
	text-align:justify;
}

.texte p.intro {
	font-weight:bold;
	margin:0 0 1.2em;
}

p.suite { margin:1.3em 0 0; }

p.suite a, .lien-noir { 
	background:#000;
	text-decoration:none;
	color:#fff;
	font-weight:bold; font-size:.9em;
	padding:0 9px;
}	

p.suite a:hover, .lien-noir:hover { color:#c0c0c0 }


/** Le texte des billets
--------------------------------**/
.video {
	width:610px; height:382px;
	background:url(images/video.png) no-repeat;
	margin:20px auto;
	overflow:hidden;
}

.video object {  
	display:block;
	width:596px; height:362px;
	margin:9px auto 0;
}

/** Image des billets
--------------------------------**/
.image-billet { float:right; }


/** Bloc partage
--------------------------------**/
.vote-partage {
	overflow:hidden;
	padding-top:6px
}

.share { float:right; }

.sharethis_button{
	float: right;
	}
.sharethis_wid {
	background: transparent url(images/sharethis/bg_share.png) repeat-x 0 0; /*IE*/
	height: 22px;
	float: right;
	width: 245px;
	}
	.sharethis_wid ul {
		float: left;
		list-style: none;
		padding:0 0 0 10px;
		margin:0;
		}
    	.sharethis_wid ul li{
    		float: left;
    		list-style: none;
    		padding: 0 3px;
    		margin:0;
    		}
.sharethisbloc{
	float:right;
	width: 400px;
}

/** Navigation articles
--------------------------------**/
.alignleft {
	width:40%;
	float:left;
	text-align:left;
}

.alignright { 
	width:40%;
	float:right;
	text-align:right;
}

.navigation {
	margin:0 19px 0 50px;
	overflow:hidden
}

.navigation a { 
	background:#000;
	text-decoration:none;
	color:#fff;
	font-weight:bold; font-size:1em;
	padding:1px 9px;
	display:-moz-inline-box;
	display:inline-block;
	width:125px;
	text-align:center;
}	

.navigation a:hover { color:#c0c0c0 }



/** Zone droite
--------------------------------------------------------------------------**/
#right {
	background:url(images/global3_bg.gif) repeat-x bottom;
	overflow:hidden;
} 

#nav {
	width:290px;
	padding:26px 0 0 8px;
}

.png { display:block; }

.blocs-nav {
	padding:15px 0;
	background:url(images/billet_bg.png) repeat-x bottom;	
}

.blocs-nav h3 { margin:0; }

.liste-archives {
	margin-top:40px;
	background:url(images/archives_bg2.png) repeat-y right;	
}
	
.liste-archives ul {
	list-style:none;
	margin:0; padding:0;
	width:145px;
	position:relative;
}

.liste-archives ul li { display:inline; }

.liste-archives ul li a {
	display:block;
	overflow:hidden;
	width:139px; height:110px;
	margin:auto;
	background:url(images/archives_bg.png) no-repeat center;	
}	

.liste-archives ul li a img {
	display:block;
	margin:7px auto 0;
}

.liste-archives ul.col-mad { float:left; }

.liste-archives ul.col-pasmad { float:right; }

.mad2 { 	
	position:absolute; 
	top:-35px;
	z-index:11;
}

.c-mad2 { left:0; }
.pas-mad2 { right:0; top:-15px }

#accordionArchives { width:149px; }

.date-archives {
	display:block;
	color:#8A2210;
	background:#D5D5D5; 
	font-size:1.4em; font-weight:normal;
	padding:2px 4px;
	margin-bottom:1px;
	text-transform:uppercase;
	text-decoration:none;
}

/*.date-archives:focus { outline:none }*/

#accordionArchives ul {
	margin:0; padding:3px 0;
	list-style:none;
	min-height:95px;
}

#accordionArchives ul li {
	background:url(images/list-archives_bg.png) no-repeat 12px 5px;
	padding:0 5px 0 22px; margin-top:3px;
	font-size:.9em;
}

#accordionArchives ul li a { 
	color:#6F6F6F; 
	font-weight:normal; 
	text-decoration:none;
}

#accordionArchives ul li a:hover { text-decoration:underline }

.reseaux { padding:24px 0 }

.reseaux img {
	width:254px;
	margin:auto
}

.twitter { margin-bottom:12px !important; }

.join-us { 
	width:288px;
	margin:auto;
}

.www-like { margin-top:90px }

.www-like strong {
	color:#fff;
	background:#D90202; 
	font-size:1.2em;
	padding:2px 12px 2px 4px;
	text-transform:uppercase
}

.www-like ul {
	margin:4px 0 0 2px; padding:0;
	list-style:none;
}

.www-like a { color:#6F6F6F; text-decoration:none; }

.www-like a:hover { text-decoration:underline }




/** Page article
--------------------------------------------------------------------------**/
.article .image-billet { margin-top:200px; }

.info-billet {
	margin:19px 0 -18px;
	padding:8px 0;
	background:transparent url(images/billet_bg.png) repeat-x top;
	overflow:hidden;
	font-weight:bold; font-style:italic;
	color:#494E4E;
}

.tag { 
	float:right; 
	margin-top:20px;
}

.auteur { overflow:hidden }

.avatar {
	border:2px solid #FEFFFF;
	width:35px; height:35px;
	float:left;
}	

.auteur ul { 
	list-style:none;
	margin:3px 0 0 47px; padding:0;
}

.auteur ul li span { color:#D90202; }

.auteur ul li { margin-bottom:2px }

.auteur ul li.date { font-size:.9em }


/** Commentaires
--------------------------------**/
.commentaires {
	margin-top:45px;
	color:#414141
}

.commentaires h3 {
	margin:0 18px 0 0; padding:0;
	font-size:2.2em; font-style:italic; font-weight:normal;
	color:#000;
	display:-moz-inline-box; 
	display:inline-block; 
	vertical-align:middle;
}

.commentaires h3 span { font-size:1.4em; }

.commentaires .lien-noir {
	font-size:1em;
	vertical-align:middle;
	display:-moz-inline-box; 
	display:inline-block; 
	margin-top:12px; padding-top:2px; padding-bottom:2px; 
}

.commentaires ul {
	list-style:none;
	margin:14px 0 0; padding:0;
}

.commentaires ul li {
	padding-top:4px; margin-bottom:10px;
	background:url(images/comments-top_bg.png) no-repeat top;
}

.commentaires ul li .interne {
	padding-bottom:4px;
	background:url(images/comments-bottom_bg.png) no-repeat bottom;	
}

.commentaires ul li .interne2 {
	background:url(images/comments-center_bg.png) repeat-y;	
	padding:8px 20px;
	font-weight:bold;
}

.titre-commentaire {
	background:url(images/comments-bg.png) no-repeat right top;	
	height:44px;
	overflow:hidden;
	padding-bottom:5px;
}

.titre-commentaire p {
	margin:0 0 0 47px;
	font-size:.9em; 
}

.titre-commentaire p strong {
	text-transform:uppercase;
	display:block;
	color:#D90202;
	font-size:1.35em;
	margin-bottom:2px
}

.corps-commentaires {
	background:url(images/billet_bg.png) repeat-x top;
	padding:6px 0 8px;
}


/** Formulaires commentaires
--------------------------------**/
.commentaires form { margin:23px 0 0 2px; text-align:left; }

.commentaires form fieldset { overflow:hidden; }

.commentaires form fieldset legend {
	font-size:2em; 
	font-style:italic; 
	font-weight:normal;
	color:#000;
}

.commentaires form fieldset legend span { font-size:.6em; font-weight:bold; }

.commentaires form .champ {  
	width:200px;
	float:left;
	margin:4px 12px 14px 0;
}

.commentaires form .champ label { 
	display:block;
	font-weight:bold; font-size:.8em;
	margin-bottom:4px;
}

.commentaires form .champ input {
	border:1px solid #A4AAAF;
	padding:0;
	width:100%; 
	height:19px;
	font-size:1em;
}

.commentaires form .last { margin-right:0; }

.commentaires form textarea {  
	font:.9em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	width:624px; height:99px;
	border:1px solid #A4AAAF;
}

.submit {
	text-align:right;
}

/** Page recrutement
--------------------------------------------------------------------------**/
.recrutement  { color:#222; }

.recrutement .contenu-billet { display:block }

#accordionEmplois { padding-top:17px }

.titre-offre { 
	display:block;
	padding:10px 0;
	cursor:pointer;
	background:transparent url(images/billet_bg.png) repeat-x bottom;
	font-weight:bold; font-style:italic;
	color:#222;
	text-decoration:none;
}

.titre-offre:focus { outline:none }

.titre-offre .tag { margin-top:25px }

.titre-offre .titre { 
	overflow:hidden; 
	display:block;
}

.titre-offre .titre strong { 
	display:block;
	margin:-1px 0 0 47px;
	font-size:1.2em;
	line-height:1.15;
}

.titre-offre .titre strong span {
	font-size:1.4em;
	display:block;
}

.contenu-offre {
	font-weight:bold;
	text-align:justify;
	background:transparent url(images/billet_bg.png) repeat-x bottom;
	padding-bottom:1em
}

#accordionEmplois form .contenu-form { 
	width:570px;
	padding-top:33px;
}

#accordionEmplois form label {
	display:-moz-inline-box;
	display:inline-block;
	width:190px;
	font-weight:bold;
	margin-bottom:15px;
}

#accordionEmplois form input, #accordionEmplois form textarea { 
	width:370px; height:17px;
	font-size:1em;
	border:1px solid #A4AAAF;
	padding:0; margin-bottom:15px;
}

#accordionEmplois form textarea { height:84px }

.textArea { vertical-align:top }

.recrutement .vote-partage { 
	background:url(images/billet_bg.png) repeat-x bottom ;
	padding-bottom:11px;
}

.recrutement .vote-partage input { 
	margin-bottom:0 !important;
	float:left;
}
 

/** footer
--------------------------------------------------------------------------**/
#footer {
	position:absolute;
	width:750px; height:17px;
	left:50%; bottom:0;
	margin-left:-375px;
	text-align:right;
}

#footer a { 
	color:#fff;
	text-transform:uppercase;
	padding-left:46px;
	font-size:.9em;
	text-decoration:none;
}

.contentoffre {
    display:none;
}

#accordionEmplois .first {
    display:block;
}
.lien-accueil {
    font-size:1.7em;
    margin-bottom:10px;
    float:right;
}

.joinus_success {
    color:green;
}
.joinus_failed {
    color:red;
    font-size:18px;
}