/*
Theme Name: youpiemonday - 2012
Theme URI:
Description: Clean and elegant theme to showcase my work.
Version:2012
Author: Julien Schleiffer
Author URI:http://www.youpiemonday.com
Tags:Elegant, clean, responsive, 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.1;}

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 {contentProject:''; contentProject: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;}



/*General--------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------*/
	html, body{ height:100%; height:100%;}
	body{width:100%; margin:0; padding:0; background-color:#ffffff; font-family:"Helvetica Neue",helvetica,arial,sans; }
	::-moz-selection { background-color: #cc3366; color: #fff;}
	::selection { background-color: #cc3366; color: #fff;}
	
	#container{ margin:0 auto; padding:0; width:100%; overflow:hidden; }
	
	article{ -webkit-columns: 3; -moz-columns: 3; columns: 3; }
		.ArticleHead,.ArticleHead img{width:100%; -webkit-column-span:all; -moz-column-span:all; column-span:all;}

	.clearer{clear:both;}
	.SpacerBorder{border-top:1px dotted #8f8e8e; clear:both; margin:10px 0 10px 0; width:100%;}
	
	a{ color:#727373; text-decoration:none; outline: 0;}
	
	aside{width:100%; margin:0 0 10px 0; padding:0;}
	
	/* Diviseur Colonnes */
	
	.Forth{ width:190px; float:left; color:#ffffff; margin:0; padding:0 10px 20px 0; text-align:left;}
	.ForthLast{width:190px; float:left; }
	
	.fifty{width:47%; float:left; margin:0 10px 25px 10px; }
	
	.button{ min-width:70px; background-color:#000; padding:10px 20px; margin:10px 20px 15px 0; float:right; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
		.button:hover{background-color:#8f8f8e; color:#ffffff;}
		
/*typo-----------------------------------------------------------------------------------*/
	h1,h1 a{ color:#28292a; margin:0; padding:0; text-decoration:none; font-size: 2.3em; text-align:left; float:left;}
	h2{color:#fff; text-decoration:none; margin:0; padding:0; font-size:3em; line-height:0.5em;  }
	h3{color:#28292a; text-decoration:none; text-transform :uppercase; font: 1.5em "Helvetica", Arial, sans-serif ;  margin:5px 10px 0 0; padding: 0;}
	h4{color:#8F8E8E;font-size:1.3em;}
	
	p{ width:100%; font-family: 'PT Sans Narrow',sans-serif; color:#8f8e8e; padding:0 0 10px 0; margin:0; float:left;}	
		.descrip{margin:25px 0 25px 0;}
	 
	.titleProject{margin:0 0 0 0; width:100%; z-index:2000; }
	.PassItOn{width:125px;  float:right; }

	.clair{color:#8f8f8e;}
	.sombre{color:#28292a;}
	
	/*ul & li--------------------------------*/
	
	.Skills{float:left; margin:0 20px 0 0;}
		.Skillset li,article li{ display:list-item; margin:0; line-height:1.1em;}
	
	li {font-family: 'PT Sans Narrow',sans-serif; list-style-type:none; color:#8f8e8e;}
	

/*Header--------------------------------------------------------------------------------*/
	header {width:100%; max-width:800px; height:auto; margin:0 auto; }

	.HeadContent{ width:100%; max-width:800px; height:50px; background-color:white; overflow:hidden;}
		nav{  margin:0 auto; width:100%; height:50px; list-style:none; float:left; }
			nav ul{margin:15px auto; text-align: center;}
				nav li{display:inline; }
				nav li a{ margin:0 20px 0 0; background:transparent; color:#727373; font: 1em 'PT Sans Narrow',sans-serif; text-decoration: none; text-transform:uppercase;}
				nav li a:hover, nav li a:focus, nav li a:active { background:transparent; color: #aaaaaa;  border-bottom:2px solid #727373; text-decoration:none;}
				li.current_page_item a { border-bottom:2px solid #5ab2e9; } 
			
			.TelephoneMaison{ margin:10px -50px 0 0; float:left;}
				.TelephoneMaison img{ width:50px; height:37px;}
								
	.Social ul{ float:right; width:120px; height:50px; margin:-37px 0 0 0;}
		.Social li{display:inline; margin:0 15px 0 0; display:inline; float:left;width:20px; height:20px;}
			.Twitter,.LinkedIn,.Vimeo{ display:block; width:20px; height:20px; background:#727373; background-position:center top; background-repeat: no-repeat; }
				.Twitter{ background:url(img_site/twitter_link.png);}
					.Twitter:hover{ background:url(img_site/twitter_link_h.png); border:0; }
				.Vimeo{ background:url(img_site/vimeo_link.png); margin-top:1px;}
					.Vimeo:hover{ background:url(img_site/vimeo_link_h.png); border:0;}
				.LinkedIn{ background:url(img_site/in_link.png);}
					.LinkedIn:hover{ background:url(img_site/in_link_h.png); border:0;}
	
	.WelcomeBox { overflow:hidden; width:100%; margin:0;}
		.WlcContent{width:100%; max-width:750px; margin:0 auto;}
			a .logo {width:186px; height:136px; float:left; margin:0 20px 0 0;}
			.WelcTxtBox{margin:50px 0 0 0;}
	
/*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:100%; margin:0 auto; padding:0; background-color:#ffffff; float:left; }
	article img{width:100%; height:auto; margin:10px 0 0 0;}
		
	.VimeoWrap{ position:relative; padding-bottom: 54.85%; padding-top:0px; height:0; overflow:hidden; clear:both;}
		.VimeoWrap iframe,.VimeoWrap object,.VimeoWrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}
	
	.VimeoWrap{margin:0 0 15px 0;}
	
	.Skillset{float:right; }
	
	/*Tumblr------------------------------------*/
		#TumblrContainer{max-width:500px; margin: 0 auto;}
		.tumblr_post {margin: 0 auto 30px auto; padding:0 0 10px 0;}
		.tumblr_photo_post{max-width:500px; height:auto;}
		.tumblr_caption{margin: 10px 0 0 5px;}
	
/*Project Thumbnails---------------------------------------------------------------------------------------------------------------------*/
	#FolioContainer{margin:0 auto; background-color:#ffffff; width:100%; clear:both; overflow: hidden;}
		#TagSelectah{float:right; width:290px; margin:10px 10px 0 0; padding:0; height:30px;}
		#TagSelectah li{display: inline; margin:0 0 0 10px;}
		#TagSelectah a{margin:0; background:transparent; padding:2px 3px; text-decoration:none; -moz-border-radius: 3px; border-radius: 3px; }
		#TagSelectah .current a{background-color: #ededed;} #TagSelectah a:hover{ border:0; color:#727373; background-color:#ededed;}
	
	#FolioContainer{background-color:#efefef;}
	#FolioContainer>div>div:not(#DrawerContainer){float:left; position:relative; width:20%; height:0; padding-bottom:20%; background-color:#28292A; }
	/*remplace #FolioContainer li. Doit donc cibler toutes les divs du container. 
	sauf DrawerContainer... safari n'aime pas le selecteur précédent*/
		#portfolio-list div{ overflow:hidden; }
	
	.ProjectWrap{ overflow:hidden; width:100%; height:100%; }
			.ProjectWrap img{width:100%; height:100%; display:block; position:absolute; }		
		.mosaic-overlay{display:none; z-index:5; position:absolute; width:100%; height:100%; background:#ffffff; }
		.mosaic-backdrop{display:none; position:absolute; top:5px; left:5px; height:100%; width:100%; }
		.contentProject{width:95%; margin:0 auto; }
		.ProjectTitle{width:100%; text-align:center; margin:75px auto 0 auto;}
		
	/*AjaxDrawer=========================*/
		
	#DrawerContainer{background-color:#fff; float:none; clear:both; display:block; width:100%; height:100%; padding:0; margin:0; position:relative; overflow:hidden;}
		#DrawerContent{margin:0 auto; padding:20px; width:90%; overflow:hidden; clear:both;}
	.current { background-color: #dfd;}
	.loadin{ width:40px; margin:40px; background: url(img_site/loadin.gif) top left  no-repeat; }
	.CloseDrawer{width:50px; height:50px; background:url(img_site/cross.png)center center  no-repeat; background-color:#000; display:block; position:absolute; top:0; right:0; z-index:1000;}

/*Footer-------------------------------------------------------------------------------*/
	footer{width:100%; height:auto; margin:0; padding:0 0 40px 0; background-color:#28292A; overflow:hidden; clear:both;}
		footer a, footer p{margin:0; color:#8f8f8e;}

	.footerCont{width:800px; margin:0 auto; overflow:hidden;}
		.footerCont a:hover{color:#5ab2e9;}
		.signature{float:left; margin:0; margin:10px 0 5px 0;}
		a.signature img{background-position:bottom right; background-repeat:no-repeat; height:37px; width:50px;}

	.BackToTop{display:none; height:45px; width:45px; position:fixed; z-index:2000; bottom:15px; right:15px;
				background: #000 url(img_site/UpButton.png) center  no-repeat;
				-moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
		.BackToTop:hover{background-color:#8f8f8e;	}

		.mail{background: url(img_site/mail.png) top left  no-repeat; background-size:25px 25px; height:30px; padding:3px 0 0 40px;}
		.phone{background: url(img_site/phone.png) top left  no-repeat; background-size:20px 20px; height:30px; padding:0 0 0 35px; margin-left:5px;}
		
	/*ContactForm----------------*/
		.ContactForm{width:350px; color:#8F8F8E;}
			label {display:block; margin:0 0 -15px 0;}
			input, textarea {width:100%; height:18px;  margin:0 0 10px 0; background:#efefef; border:1px solid #dedede; padding:10px; margin-top:3px; color:#3a3a3a; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
			textarea{height:180px; font-family: Arial;}
				input:focus, textarea:focus{border:1px solid #cc3366; outline: 0;}
			#submit{width:127px; height:38px;  border:none; margin:0 -22px 20px 0; cursor:pointer; color:#8F8F8E; background:#000; float:right;}
				#submit:hover{background-color:#8f8f8e; color:#fff;}
			
	/*TwitterFeed----------------*/	
			#twitter_update_list {   list-style: none; min-width:900px;}
				#twitter_update_list span,#twitter_update_list span a{ color: #8F8F8E; text-decoration: none;	}
				#twitter_update_list a { color: #5ab2e9; font-size: 1em !important; }
				
/*Media Queries-----------------------------------------------------------------------------------*/
	
	/*Tablet >> 6 Pics---------------*/
	@media screen and (min-width: 1300px) {
		#portfolio-list{width:100%;}
		#FolioContainer>div>div:not(#DrawerContainer){ width:16.6666%; height:0; padding-bottom:16.6666%;}
	}
	
	/*Tablet >> 4 Pics---------------*/
	@media screen and (min-width: 701px) and (max-width: 1000px){
		header { max-width:600px; margin:0 auto;}
			nav{ margin:0 auto; width:600px; float:left;}		
			.WelcomeBox { overflow:hidden; width:100%;  margin:0; }
			.WlcContent{width:100%; max-width:600px; margin:0 auto;}
			.WelcTxtBox{margin:50px 0 0 0;}	
			a .logo {width:130px; height:100px;}
		#FullWrapper{width:100%; max-width:600px; }
		h2{ margin:0; padding: 0; font-size:2.2em; }
		.Skillset{ float:left; }
		.footerCont{max-width:400px;}
		#FolioContainer>div>div:not(#DrawerContainer){ width:25%; height:0; padding-bottom:25%;}
		.fifty{width:100%; margin:0 10px;}
			article{ -webkit-columns: 2; -moz-columns: 2; columns: 2; }
	}

	/*Tablet >> 3 Pics---------------*/
	@media screen and (min-width: 491px) and (max-width: 700px){
		.WelcomeBox { overflow:hidden; width:100%;  margin:0; }
		.WlcContent{width:100%; max-width:600px; margin:0 auto;}
		a .logo {width:130px; height:100px;}		
		h2{ margin:0; padding: 0; font-size:2.2em; }
		#FolioContainer>div>div:not(#DrawerContainer){ width:33.333%; height:0; padding-bottom:33.333%; }
		.fifty{width:100%; margin:0 10px;}
		#portfolio-list{width:100%;}
		#DrawerContent{margin:0 auto; padding:20px; width:90%; overflow:hidden; clear:both;}
		.footerCont{max-width:400px;}
			article{ -webkit-columns: 1; -moz-columns: 1; columns: 1; }
	}

	/*Phone >> 2 Pics---------------*/
	@media screen and (min-width: 321px) and (max-width: 490px){ 
		header {max-width:400px; margin:0 auto;}
			nav{  margin:0 auto; width:400px; float:left;}
				.WelcomeBox{width:100%; margin:0 auto; }
					.WlcContent{width:100%; max-width:400px; margin:0 auto;}
					.WelcTxtBox{margin:50px 0 0 0;}
					a .logo{width:80px; height:60px;}
		.HeadContent{ position:relative; margin:0 auto;}
		.Social { display:none;}
		#FullWrapper{width:100%; max-width:400px;}
		h2{margin:0; padding: 0; font-size:1.3em;}
		.showreel{ position:relative; padding-bottom: 54.85%; padding-top:0px; height:0; overflow:hidden;}
			.showreel iframe,.showreel object,.showreel embed {position:absolute; top:0; left:0; width:100%; height:100%;}
		a.logo {width:100px; height:80px;}
		#TagSelectah{ float:left; width:400px;}
			#TagSelectah li{ display: inline; margin:0 0 0 20px;}
		.Skillset{ margin:0; float:left;}
			.Skills{ width:100%; margin:0;}
		.footerCont{max-width:400px; }
			.Forth{float:left; width:200px; margin:0 auto 15px auto; }
		.PassItOn{float:left;}
		#FolioContainer>div>div:not(#DrawerContainer){ width:50%; height:0; padding-bottom:50%; }
		.fifty{width:95%; margin:0 10px;}
		#portfolio-list{width:100%;}
		#DrawerContent{margin:0 auto; padding:20px; width:90%; overflow:hidden; clear:both;}
			article{ -webkit-columns: 1; -moz-columns: 1; columns: 1; }
	}

	/*Phone >> 1 Pic---------------*/
	@media screen and (min-width: 0px) and (max-width: 320px){
		header { max-width:400px; margin:0 auto; }
			nav{  margin:0 auto; width:400px; float:left;}
			.WelcomeBox{width:100%; margin:0 auto; }
					.WlcContent{width:100%; max-width:400px; margin:0 auto;}
					.WelcTxtBox{margin:50px 0 0 0;}
					a .logo {width:80px; height:60px; }
		.HeadContent{ width:100%; position:relative;  }
			.Social { display:none;}		
		h2{ margin:0; padding: 0; font-size:1.3em; }
		p.descrip{max-width:360px; margin-right:15px;}
		#FolioContainer{ margin:0 auto; padding:0; background-color:#ffffff; clear:both; overflow:hidden;}
			#TagSelectah{ float:left;  margin:0 0 15px 15px;}
				#TagSelectah li{ display: inline; margin:0 20px 0 0;}
		.Skillset{ margin:0; float:left;}
			.Skills{ width:100%; margin:0;}
		.footerCont{max-width:100%; }
			.ContactForm{display:none;}
		.fifty{width:95%; margin:0 10px;}
		.PassItOn{float:left;}
		#FolioContainer>div>div:not(#DrawerContainer){ width:100%; height:0; padding-bottom:100%; }
		#portfolio-list{width:100%;}
		#DrawerContent{margin:0 auto; padding:10px; width:93%; overflow:hidden; clear:both;}
		article{ -webkit-columns: 1; -moz-columns: 1; columns: 1; }
	}