/*
Theme Name: youpiemonday 1st wordpress
Theme URI:
Description: Clean and elegant theme to show your production without 
Version:1.1
Author: Julien Schleiffer
Author URI:http://www.youpiemonday.com
Tags:simple, clean, single column, grid, fluid, portfolio, #ffffff

*/

/*Reset Stylesheet-------------------------------------------*/
/* v1.6.1 Author: Richard Clark - http://richclarkdesign.com */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

body {line-height:1.2;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; text-decoration:none;background:transparent;}

/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none;}

/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}

del {text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}

/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}

input, select { vertical-align:middle;}

/*Lets go!---------------------------------------------------------------------------------------------*/


/*Page--------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------*/
	body{width: 100%; width:100%; margin: 0 auto; background-color:transparent; background-image:url(img_site/fond.jpg); padding: 0;}
	#container,#boxccontent{ width:870px; height:100%; margin:0 auto;}


	#left{width:650px; height:100%; margin:0 auto; float:left; }
	.right{width:190px; margin:0 10px 0 0; float:right;}
	
	.contenu_article{width:632px; height:100%; background:white; padding:10px; margin:0;border:1px solid #d8d8d8;}

	.clearer{clear:both;}
	
/*typo---------------------------------
--------------------------------------*/

	h1{color:#727272; text-decoration:none; margin:0; padding: 0; text-align: right;}
	h2{color:#727272; text-shadow: #cccccc 1px 1px 0px; text-decoration:none; text-transform : uppercase; font: 1.5em "Helvetica", Arial, sans-serif ;  text-align: right; margin:5px 10px 0 0; padding: 0;}
	h3,h3 a{color:#727272; text-decoration:none; text-transform : uppercase; font: 1.2em "Helvetica", Arial, sans-serif ;  text-align: left; margin:0; padding: 0;}	
	h4 { color:#727272;  text-decoration:none; text-transform : uppercase; font: 1em "Helvetica", Arial, sans-serif ;  margin:0; padding: 0;text-align: right;}

	p{	color: #000000; font-size: 0.7em; font-family: "Verdana", Arial, Helvetica, sans-serif; padding:0; margin:0 0 5px 0;}	

	.cat{ font:0.7em "Helvetica", Arial, sans-serif ; float:right; margin: 0;}
		.cat a{color: #b3b2b2; margin:0; background:transparent; padding:2px 3px; text-decoration:none; -moz-border-radius: 3px; border-radius: 3px;}
		.cat a:hover{color: #ffffff; background:#b3b2b2; }

	.titrePost a{text-decoration:none;}
	
	
	
/*Header---------------------------------
----------------------------------------*/

	header {width:960px; height:140px; margin: 0 auto; clear: both;}
	.logo {width:100px; height:100px;float: left; margin:15px 0 0 250px;}

	nav{ float:right; margin:100px 108px 0 0;list-style: none; }
	li{display: inline;}
	nav li a{ background: transparent; color: #000000 ; font: 1.2em "Helvetica", Arial,sans-serif; text-decoration: none; text-transform:uppercase;}
	li a:hover, li a:focus, li a:active { background:transparent; color: #ffb400; text-decoration:none;}
	li.current_page_item a {color: #ffffff; background:#5ab2e9; padding:5px; -moz-border-radius: 5px; border-radius: 5px;} 



/*Sidebar---------------------------------
------------------------------------------*/
	.full{margin:0 0 10px 0;}
	.full h3{border-bottom:1px solid #b3b2b2; margin-bottom:5px; }
	.full li a{color: #000; background:#transparent; text-decoration: none; display: block;}
		.full li a:hover{color: #ffffff; background:#5ab2e9; }
	
	.recherche input{ height:25px; *height:23px; width:185px; padding-left:5px; *padding-top:7px; border:none; background-image:url(img_site/loupe.png); background-repeat:no-repeat; background-position:170px 6px;}
	.recherche input:focus{ background-image:url(img_site/loupeF.png); border:none;}
	
	
	
/*Alignements-----------------------------
----------------------------------------*/
	.alignleft{	float:left;	clear:left;}
		img.alignleft, .alignleft img{margin:5px 10px 5px 0;}
	
	.alignright{float:right;clear:right;}
		img.alignright, .alignright img{	margin:5px 0 5px 10px;}
	
	.aligncenter{margin:auto; clear:both; text-align:center;}
	.alignnone{	float:none;	clear:both;	display:block;}



/*Page Home---------------------------------
------------------------------------------*/
	.article{width:640px; background:white; margin:0 auto 10px auto;}
		.article img{border:1px solid #ededed; margin:10px 0 0 0;}

	.superbox{overflow:hidden; width:445px; height:149px;}
	.boxthumbnails{overflow:hidden; width:535px; margin-left:-29px;}
	.contenu_post{ width:165px; height:250px; margin:-35px 0 0 0; float:left;-moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); border-left:2px solid white; overflow:hidden;}
	.imagePost{ width:200px; height:250px; background:black; margin:40px 0 0 -25px;  -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg);}
	
	.showreel{width:729px; margin:auto; padding:5px 9px 0px 0;border-top:1px solid #b3b2b2; border-bottom:1px solid #b3b2b2;}
	
	#Subshowreelpart{width:730px; margin:10px auto;}

	.boxleft{background:transparent; width:270px;  float:left; margin:0;}
	.left-content{ height:100%; padding:0 10px 5px 0;}

	.boxright{width:455px; Height:199px; float:right; margin:0; padding:0 5px 0 0;}
	.right-content{ padding:0 0 0 10px;}
	
	.contentPost{ background:#ffffff; width:810px; height:100%; padding: 0 10px 20px 10px;}

	.titre{ margin-bottom:5px; padding-top:5px; border-bottom: 1px solid #b3b2b2;}
	.titrePost{ width:100%; }


	
/*Page Work---------------------------------
------------------------------------------*/
	.workblock{background:#ffffff; width:260px; /*height: 226px;*/ padding:5px 5px 7px 5px; float:left; position:relative; margin: 0 5px 5px 0; border:1px solid #d8d8d8;}	
		.workblock img{width:260px; height: 160px;}
			.worktitle a{color:#727272; text-decoration:none; text-transform : uppercase; font: 1.2em "Helvetica", Arial, sans-serif; text-align: right;}	

	a.linkBT{color:#ffffff; margin:0; background:#5ab2e9; padding:8px; text-decoration:none; -moz-border-radius: 3px; border-radius: 3px;}
	a.linkBT:hover{color:#ffffff; background:#b3b2b2;}
	
/*social links part------------------------- 
------------------------------------------*/
	ul,li{margin:0;padding:0;list-style:none;}
	.social-links li{display:inline;width:25px;}
	.social-links a {display:inline;float:left;width:25px;height:25px;margin:0 5px 0 0;text-indent:-9999px;overflow:hidden;}
	.social-links{width:180px;height:25px;}
	/* CSS Sprites : positionnement de l'image de fond sur chacun des liens */
	.social-links .twitter-link:link,
	.social-links .twitter-link:visited{background:transparent url(img_site/soc_med/twitter_25nb.png) 0 0 no-repeat;}
	.social-links .twitter-link:hover,
	.social-links .twitter-link:active{background:transparent url(img_site/soc_med/twitter_25.png) 0 0 no-repeat;}

	.social-links .facebook-link:link,
	.social-links .facebook-link:visited{background:transparent url(img_site/soc_med/facebook_25nb.png) 0 0 no-repeat;}
	.social-links .facebook-link:hover,
	.social-links .facebook-link:active{background:transparent url(img_site/soc_med/facebook_25.png) 0 0 no-repeat;}

	.social-links .linkedin-link:link,
	.social-links .linkedin-link:visited{background:transparent url(img_site/soc_med/linkedin_25nb.png) 0 0 no-repeat;}
	.social-links .linkedin-link:hover,
	.social-links .linkedin-link:active{background:transparent url(img_site/soc_med/linkedin_25.png) 0 0 no-repeat;}

	.social-links .vimeo-link:link,
	.social-links .vimeo-link:visited{background:transparent url(img_site/soc_med/vimeo_25nb.png) 0 0 no-repeat;}
	.social-links .vimeo-link:hover,
	.social-links .vimeo-link:active{background:transparent url(img_site/soc_med/vimeo_25.png) 0 0 no-repeat;}


	
/*Footer------------------------------------
-------------------------------------------*/
	footer{width:740px; height:120px; margin:0 auto;
			border-top: 1px solid #b3b2b2;
			clear:both;
			}
			
	footer a{margin:0; color:#000000;}
		footer a:hover{color:#66ccff;}

	.lefty{float:left; margin:16px 0 0 5px; text-align:left;}

	.legals{float:right; height:61px; padding:13px 0 0 0; margin:13px 80px; text-align:right;}
	.signature{float:right; margin:-22px -40px 0 0;}
	a.signature img{	background-position:bottom right; 
				background-repeat:no-repeat; 
				height:60px;
				width:60px; 
				border-left:1px solid #b3b2b2; 
				padding-left:8px;
				}