/* @override 
	http://seblavoie.com/wp-content/themes/Portfolio/style.css */

/*   
Theme Name: Portfolio
Description: Thème Wordpress créé dans le cadre de mon projet personnel de mon cours de Production Multimédia VI 
Author: Sébastien Lavoie
Author URI: http://seblavoie.com/
Template: thematic
*/

/*Importations des styles de base utilisé par le thème primaire */

@import url('../thematic/library/styles/reset.css');
@import url('../thematic/library/styles/typography.css');
@import url('../thematic/library/layouts/2c-r-fixed.css');
@import url('../thematic/library/styles/images.css');
@import url('../thematic/library/styles/default.css');
@import url('../thematic/library/styles/plugins.css');

/*Styles personnels pour la création de mon child theme */

/* ----------------------------------------------------
	style.css 
	CRÉÉ par Sébastien Lavoie
	----------------------------------------------------

	Les styles généraux pour le site. Les commentaires plus haut 
	sont nécéssaire au bon fonctionnement du fichier, raison
	pourquoi ils sont anglais.
*/

/* 	----------------------------------------------------------
	Général
	---------------------------------------------------------- */
@font-face {
	font-family: 'CicleGordita';
	src: url('Cicle_Gordita.eot');
	src: local('Cicle Gordita'), local('CicleGordita'), url('Cicle_Gordita.ttf') format('truetype');
}

body, input, textarea {
	
    font-family: 		'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
    line-height:		20px;
}
body{
    font-size: 			62.8%;
	background-image: 	url("images/communs/bg_body.jpg");
}

.displayNone{
	display: 			none;
}

li{
	list-style: 		none;
}
a{
	text-decoration: 	none;
}

div.clearBoth{
	clear: 				both;
	padding: 			10px;
}
div.clearRight{
	padding: 			5px;
	clear: 				right;
}
.floatLeft{
	float: left;
}

/* 	----------------------------------------------------------
	Header
	---------------------------------------------------------- */
div#header{
	background-color: 	#00d600;
	background-image: 	url('images/communs/bg_middle_header.jpg');
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	background-position: bottom;
	height: 			263px;
}
div#branding{					/* Contient les informations : le blog-title et blog-description */
	padding: 			0px;
}
#blog-title{
	float: 				left;
	position: 			absolute;
	top: 				23px;
	z-index: 			2;
	margin: 			0px;
	padding: 			0px;
}
#blog-description{
	font-style: 		normal;
	float: 				left;
	position: 			absolute;
	top: 				55px;
	z-index: 			2;
	font-size: 			1em;
	letter-spacing: 	2.1px;
	color: 				#fefefe;
	margin: 			0px;
	padding: 			0px;
	/*text-shadow: #444 1px 1px 2px;*/
}

/* 	----------------------------------------------------------
	Visionneuse, images uniques et textes intro
	---------------------------------------------------------- */

/*_________________________________________Image unique
*/
div#imageEnteteUnique{						/* Contient le contenu de la barre verte */
	margin: 			20px 0 0 0;
	padding: 			0 0 10px 0;
}

/*_________________________________________Textes
*/
div.texte-entete{
		float: 			right;
		width: 			660px;		
		position: relative;
		z-index: 6;
}

div.texte-entete a h2{
	color: 				#f2f2f2;	
	font-size: 		2em;
	text-shadow: 	#333 1px 1px 3px;
	padding: 			10px 0 10px 0;
}

div.texte-entete p, div.texte-entete div p{
	clear: left;
	width: 				350px;
	font-size: 			1.4em;
	color: 				#f2f2f2;
	text-shadow: 		#555 1px 1px 1px;
	margin: 			0 0 0 2px;	
}
div.texte-entete div p a:link{
	font-style: italic;
	color: #fff;
}
div.texte-entente#accueil p{
	width: 				300px;
}
/*_________________________________________Barre grise
*/
#barre-grise{
	height: 			55px;
	background-color: 	#eee;	
	background-image: 	url('images/communs/bg_barreGrise.jpg');
	position: relative;
	z-index: 1;
}
#barre-grise div#contenu-barre-grise{
	width: 				940px;
	margin: 			auto;

}
#barre-grise div#contenu-barre-grise div{
	float: right;
	margin: 10px;
}

/* 	----------------------------------------------------------
	Navigation
	---------------------------------------------------------- */	
#access{
	z-index: 			1;
	height: 			89px;
	background-repeat: 	repeat-x;
		z-index: 			10;

}
div.menu{
	padding-top: 		10px;
	position: ;
}
.sf-menu{
	position: relative;
	border:				none;
	font-size: 			1em;
	text-shadow: 		#444 1px 1px 2px;
	margin: 			30px 0 0 0;
	float: 				right;
}
.sf-menu a{
	color: 				#fff!important;
	font-size: 			1.1em;
	border: 			none;
}
.sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:				#333;
}
.sf-menu li {
	background: 		none;
	border: 			none;
	position:			relative;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	text-shadow: 		rgba(0,0,0,.3) 1px 1px 2px;
	background : transparent;
}
 li.current_page_item{
 }
div#lumiere{
		width: 193px;
		height: 90px;
		background-image: url('images/communs/bg_nav.jpg');
		float: left;
		z-index: 4;
		position: relative;
		bottom:  100px;
 		left: 890px;
 		margin-top: 10px ;
 }
.sidebar-accueil{
	/*float: 				right;*/

}

/* 	----------------------------------------------------------
	Contenu
	---------------------------------------------------------- */	
div.entry-content{
	background: transparent;
}
div#main{
	padding: 			10px 0 20px 0;
}
div.ligne{
	height: 			1px;
	width: 				300px;
	border-top: 		1px solid #eee;
	border-bottom: 		1px solid #fff;
	position: 			relative;
	bottom: 			3px;
	z-index: 			1;
}

/* 	----------------------------------------------------------
	Réglages de la grilles en fonction de la page en cours
	----------------------------------------------------------*/
div#content{
	width: 				640px;
}
#primary{
	width: 270px;
}
#primary.accueil{
	margin: 0 0 0 0;
	width: 				395px;
}    
#primary.accueil ul{
	padding: 0px;
	margin: 0 0 0 30px;
}
   	
div#twitter_status ul{
	margin: 0px!important;
}	
	
	
/* 	----------------------------------------------------------
	Affichage du loop
	----------------------------------------------------------*/	
h2.entry-title {										/*Le titre d'un blog post accueil + blog */
	clear: 				none;
	float: 				left;
	font-size: 			1.4em;
}
div#loop{
	margin: 0 0 0 10px;
}
div#loop h2{											/*Le titre d'un blog post blog */
	padding: 			5px 30px 0 0;
	margin: 0px;
	font-style: 		normal;
	font-weight: 		normal;
	color :  			#222;
	font-size: 			1.6em;
	position: 			relative;
	z-index: 			2;
	width: 				50%;
	background-image: 	url("images/communs/bg_ligne.png");
	background-repeat: 	repeat-x;
	background-position:bottom;
	text-shadow: 		#fff 0px 1px 2px;
	
}
h3.sous-titre, div#loop h3{								/*Le titre d'une section principale ou d'une page ex: "Récemment sur le blogue" */
	font-style: 		normal;
	color :  			#494949;
	font-size: 			2em;
	padding: 			24px 0 0 0;
	position: 			relative;
	z-index: 			2;
}
div#loop p{
	line-height: 		1.5em;
}
div.paragraphe-article p{									/*Le texte dans l'excerpt */
	font-size: 			1.25em;
	color: 				#222;
}
div.paragraphe-article a{
	text-decoration: 	underline;
	color: 				#222;
}
div.paragraphe-article a:hover, a h2.entry-title:hover{
	color: 				#666;
	text-decoration: none;
}
a h2.entry-title{/* Titre des articles */
	color: 				#222;
	font-size: 			1.3em;
	text-decoration: 	none!important;
}


/* 	----------------------------------------------------------
	Affichage des images
	---------------------------------------------------------- */
div.thumbnail, div.thumbnail-large, div.thumbnail-entete{
	float: 					left;
	display: 				block;
	overflow: 			hidden;
}
div.thumbnail{
	margin: 			5px 5px 0 0;
}
div.thumbnail-large{
	padding:	 		0 50px 0 0;
}
div.thumbnail-entete {
	border: 			1px solid #ddd;
}
div.thumbnail-entete img{
	border: 			6px solid #fff;
	moz-box-shadow: 	#000 3px 3px 0px;
	}
div.thumbnail-large{
	padding: 			3px;
	border: 			1px solid #ddd;	
}

div.thumbnail-wrap-image{
	background-color: #000;
}
div.thumbnail-large img{
	height: 			150px;
	width: 				227px;
	margin: 0px;
}

div.thumbnail{
	padding: 			3px;
	border: 			1px solid #ddd;
}
div.thumbnail img{
	height: 			100px;
	width: 				150px;	
}
div.thumbnail img:hover{
}

/* 	----------------------------------------------------------
	Colonne de droite
	---------------------------------------------------------- */
#primary{
	border: 			none;
	margin: 			45px 0 0 0;
}
#primary ul{
	margin: 			0px;
}
li.widget h3{
	padding: 			40px 0 0 0;
}	

div.contenu-widget{
	margin: 			10px 0 0 0;
}
li.widget div.thumbnail img{
	margin: 0px;
	height: 70px;
	width: 105px;
	border: 1px solid #ddd;
	overflow: hidden;
}
li.widget div.thumbnail img:hover{
}
li.widget h3, h3.widgettitle{
	font-style: 		normal;
	color: 				#222;
	font-size: 			1.4em;
	position: 			relative;
	z-index: 			2;
	margin: 			0;
	padding: 			30px 0 0 0;
} 
#search h3, #search div.ligne{
	display: none;
}
#search{
	position: relative;
	bottom: 100px;
	z-index: 5;
}
/* 	----------------------------------------------------------
	Footer
	---------------------------------------------------------- */
	#footer{
	background-color:						#f2f2f2;
	height: 										200px;	
	}
	div.ligne-footer{
	height: 										0px;
	width: 											205px;
	border-bottom: 							1px solid #f7f7f7;
	border-top: 								1px solid #e2e2e2;
	position: 									relative;
	bottom: 										3px;
	z-index: 										1;
}	
	div.colonne-footer{
	float: 				left;
	width: 				235px;	
}
div.colonne-footer
	div.colonne-footer li{
	list-style:  		circle;
}
	div.colonne-footer li img{
	position: relative;
	top: 5px;
	margin: 0 8px 0 0;
	width: 17px;
	height: 17px;
}
	div.colonne-footer li a{
	text-decoration: 	none;
	font-size: 			1.1em;
	color: 				#222!important;
}
	div.colonne-footer li a:hover{
		color: 			#666!important;
}
	div.colonne-footer h4{ /* Titre de colonnes ex: Sébastien Lavoie, Pages, etc. */
		font-size: 		1.4em;
		color: 			#222;
		z-index: 		2;
		position: 		relative;
}	
	
/* 	----------------------------------------------------------
	Commentaires
	---------------------------------------------------------- */	
	
	#comments{
		background: 	transparent;
	}
	#respond{
		background: 	transparent;
	}