/*==================================================
	M A I N   S T Y L E S
	
	* Last Updated	: 2009/03/21
	* Author 		: Alban Creton
	* Color Key     :
		 * Color #1		#aac896
		 * Color #2		#eaf1e5
		 * Color #3		#af96c8
		 * Color #4		#cccccc
==================================================*/
@import 'lib/reset.css';
@import 'lib/utilities.css'; 
@import 'replaced.css'; 

/*==================================================
	L A Y O U T 
	Basic page layout
==================================================*/

body { background: #ffffff; font: 10px/160% Helvetica, Arial, sans-serif; color: #333333; position: relative;}
	#page { background: #ffffff url(/images/layoutguid.jpg) no-repeat; text-align: left; width:960px; margin:0 auto; position: relative;}
		#header { width:960px; }
		#contents { position: relative; }
		#footer { border-top: 3px solid #333333; }


/*==================================================
	C O M M O N  E L E M E N T S 
	Main HTML elements 
==================================================*/
h1 { }
h2 { border-bottom: 1px solid #333333; line-height: 1em; font-size:3.0em; padding-left: 5px; margin-bottom: 40px; padding: 0 0 5px 5px;}
h3 {}
li, p, td, th, dd, dt, label, legend { }
p  { }
a {color: #333333;}
a.twitter-user-link {text-decoration: none; font-weight: bold;}
a:link { }
a:visited { }
a:hover { }
a:active { }
.alignright {text-align:right;}



/*==================================================
	Header elements
==================================================*/

/* logo */
#header {margin: 0 0 20px 0; padding: 20px 0 0 0; border-top: 3px solid #333333;}
#header h1 {}
#header h1 a { 
  display: block; color: #333333; font-size: 3.6em; text-decoration: none;  font-weight: bold; 
  float: left; padding: 36px 0 0 65px; background: url(/images/main/frog.gif) no-repeat 5px 15px; height: 40px; }
#header p#tagline { font-size: 2.4em; margin: 0 0 40px 305px; height: 20px; padding: 40px 0 0 0;}

#breadcrumb {padding: 0 0 0 5px; font-size: 1.4em; margin: 0 0 40px 0;}

#menu { border-top: 1px solid #333333; border-bottom: 3px solid #333333; margin: 0 0; display: block; clear: both;}
#menu li {display: block; float: left; width: 120px;}
#menu li a {font-size: 1.8em; color: #111111; text-decoration: none; padding: 0 0 0 5px; display: block; width: 115px; padding: 15px 0 10px 5px;}
#menu li a:hover { background: #cccccc;}
 
.nav-home        #menu li#menuHome a, 
.nav-portfolio   #menu li#menuPortfolio a,
.nav-experiment  #menu li#menuExperiment a, 
.nav-inspiration #menu li#menuInspiration a,
.nav-blog        #menu li#menuBlog a,
.nav-contact     #menu li#menuContact a {background: #e4f9ae;}

/*==================================================
	Contents elements
==================================================*/


/*div#leftCol { height: 400px; background: #d4e3ca;}*/
div#leftCol { width:  720px; float:left; position: relative;}
div#leftCol h2 { font-size: 2.4em; margin: 10px 0 20px 5px; }

/*div#rightCol { height: 400px; background: #d7cae3;}*/
div#rightCol { width:  240px; float:right;}
div#rightCol h2 { font-size: 2.4em; margin: 10px 0 20px 5px; }

div#notfound {width: 960px; padding: 0 0 5px 0; margin: 0 0 10px 0; }
div#notfound h2 {font-size: 3.6em; line-height:1.0em; font-weight: normal; padding: 5px 0 0 5px; margin: 0 0 20px 0;}
div#notfound p { float: left; width: 470px; font-size: 1.6em; padding: 0 5px 0 5px; margin: 20px 0; line-height:1.4em;}
div#notfound p strong { font-size: 1.4em; font-weight: 800;}
/* home */

div#introduction {width: 960px; padding: 0 0 5px 0; margin: 0 0 10px 0;}
div#introduction h2 {font-size: 3.6em; line-height:1.0em; font-weight: normal; padding: 5px 0 0 5px; border-bottom: none;}
div#introduction p.forinfo {width: 955px; text-align: right; font-size: 1.2em; margin: 20px 0 10px 0; border-bottom: 3px solid #333333;}
div#introduction div.column { float: left; width: 340px; font-size: 1.6em; padding: 0 15px 0 5px; margin: 20px 0; line-height:1.4em;}
div#introduction div.column-small { float: left; width: 230px; font-size: 1.6em; padding: 0 5px; margin: 20px 0; line-height:1.4em;}
div#introduction div.column-small p.signature { text-align: right; padding: 0 5px 0 0; font-size: 1.1em; line-height:1.4em;}

div#rightCol p.small-tweet {font-size: 2.4em; margin: 10px 5px; line-height:1em;}
div#rightCol p.small-tweet-more {font-size: 1.4em; margin: 0px 5px 40px 5px;}
div#rightCol p.small-tweet-more a {}

div#rightCol ul#socialLinks li { display: block; float:left; margin: 0 5px !important; margin: 0 4px; }
div#rightCol ul#socialLinks a {  display: block; text-indent:-999em; width: 50px; height:50px; background: #111;}
div#rightCol ul#socialLinks li.facebook a {background: #ffffff url(/images/icons/facebook.jpg) no-repeat}
div#rightCol ul#socialLinks li.linkedin a {background: #ffffff url(/images/icons/linkedin.jpg) no-repeat}
div#rightCol ul#socialLinks li.flickr a {background: #ffffff url(/images/icons/flickr.jpg) no-repeat}
div#rightCol ul#socialLinks li.twitter a {background: #ffffff url(/images/icons/twitter.jpg) no-repeat}

div.home-item-container {width:705px; height: 137px; padding:0px 5px 10px 5px; position: relative; margin: 0 5px 20px 0; border-bottom: 1px solid #333333;}
div.home-item-container.noborder {border-bottom: none;}
div.home-item-container h3 {font-size:2.4em; font-weight: bold;line-height:1.0em; margin: 0 0 5px 0;}
div.home-item-container img {}
div.home-item-container p { float: left; width: 465px; font-size: 1.8em;}
div.home-item-container p.more { position: absolute; bottom: 10px; right: 5px; text-align: right; font-size: 1.2em;}
div.home-item-container div.image-container { width: 230px; height: 136px; overflow: hidden; float: left; margin: 0 10px 0 0;}

/* contact */
div#contact {width: 960px; padding: 0 0 5px 0; margin: 0 0 10px 0; }
div#contact h2 {font-size: 3.6em; line-height:1.0em; font-weight: normal; padding: 5px 0 0 5px; margin: 0 0 20px 0;}
div#contact div.col { float: left; width: 475px; }
div#contact p { font-size: 1.6em; padding: 0 0px 0 10px; margin: 20px 0; line-height:1.4em; text-align: justify;}
div#contact p strong { font-size: 1.0em; font-weight: 800;}
div#contact p small { font-size: 0.8em;}

/*form*/
div#contact form {padding: 20px 0 5px 0px;}
div#contact label {display: block; font-size: 1.4em; font-weight: bold; margin: 0 0 5px 0;}
div#contact div.formInputText {float: left; padding: 0 5px 0 5px; width: 220px; margin: 0 0 20px 0; }
div#contact div.formInputText.mail {padding: 0 5px 0 15px;}
div#contact div.formInputText input { width: 210px;}
div#contact div.formTextarea { padding: 0 5px; }
div#contact div.formTextarea textarea { width: 455px; height: 150px;  margin: 0 0 20px 0; }
div#contact div.formCaptcha { padding: 0 5px; }
div#contact div.formSubmit { margin: 20px 0 0 0 ; padding: 5px 5px; }


/* portfolio */
/* list */

div#portfolio div.list-item-big {padding: 0 5px 20px 5px; margin: 0 0 20px 0; border-bottom: 1px solid #333333;}
div#portfolio div.list-item-big img {float: left; margin: 0 10px 0 0;}
div#portfolio div.list-item-big h3 {font-size: 3.0em; line-height: 1em; margin: 0 0 20px 0; }
div#portfolio div.list-item-big h3 a {color: #333; text-decoration: none;}
div#portfolio div.list-item-big p { font-size: 1.8em; line-height: 1.2em;}

div#portfolio div.list-item-small {padding: 0 5px; margin: 0 0 20px 0; width: 470px; float: left;}
div#portfolio div.list-item-small img {float: left; margin: 0 10px 0 0;}
div#portfolio div.list-item-small h3 {font-size: 1.8em; line-height: 1em; margin: 0 0 10px 0; }
div#portfolio div.list-item-small h3 a {color: #333; text-decoration: none;}
div#portfolio div.list-item-small p { font-size: 1.4em; line-height: 1.2em;}


/* entry */
div#portfolioEntry h2 { margin: 0 0 40px 0px; line-height: 1em; font-size:3.0em; padding-left: 5px;}
/*div#portfolioEntry img {margin: 0 0 20px 5px;float: left;}*/
div#portfolioEntry div#mediaContainer {margin: 0 0 20px 5px !important; margin-left: 2px ; float: left; width:710px; height: 420px; position: relative;}
div#portfolioEntry div#mediaContainer img#bigImage   {position: absolute; top: 0px; left: 0px; z-index: 999;}
div#portfolioEntry div#mediaContainer img#ajaxloader {position: absolute; top: 200px; left: 245px; z-index: 0;}

div#portfolioEntry div#meta {float:left; padding: 0 5px 0 10px; width: 230px;}
div#portfolioEntry div#meta {font-size: 1.8em;}
div#portfolioEntry div#meta h3 { margin: 0 0 5px 0;}
div#portfolioEntry div#meta p, div#portfolioEntry div#meta ul { margin: 0 0 40px 0;}
div#portfolioEntry div#meta p, div#portfolioEntry div#meta p a, 
div#portfolioEntry div#meta ul, div#portfolioEntry div#meta ul a {color: #b0d948; font-weight: bold;}
div#portfolioEntry div#meta ul.medias li {float: left; width: 20px; margin: 0 10px 0 0;}
div#portfolioEntry div#meta ul.medias li a {display: block; text-indent:-999em; width: 20px; height:20px; background: #e4f9ae;}
div#portfolioEntry div#meta ul.medias li a.selected {background: #b0d948;}


div#portfolioEntry div#columnDescription {display:block; clear: both; margin: 0 0 20px 0; }
div#portfolioEntry div#columnDescription p.column-text {width: 230px; padding: 0 5px 0 5px; float: left; font-size: 1.4em; line-height:1.3em; text-align: justify;}




/* inpiration */
div#inspiration {position: relative;}
div#inspiration div.square-picture-box {width: 230px; height:230px; overflow: hidden; margin: 5px !important; margin: 4px; float:left; position: relative;}

div#inspiration div.square-picture-box div.img-link {width: 230px; height:230px; position: absolute; top: 0px; left: 0px;}
div#inspiration div.square-picture-box div.img-link a {display: block; width: 230px; height:230px; background: url(/images/main/blank.gif); text-indent: -999px;}

div#inspiration div.square-picture-box div.imageinfo {display:none; width: 230px; height:150px; position: absolute; bottom: 0px; left: 0px; background: #333333; color: #ffffff;}
div#inspiration div.square-picture-box div.imageinfo p.description {font-size: 1.8em; padding: 5px; text-align: center; margin: 20px 0;}
div#inspiration div.square-picture-box p.viainfo {display:none; width: 230px; height:50px; position: absolute; top: 0px; left: 0px; background: #333333; color: #ffffff; text-align: center; font-size: 1.8em;padding:30px 0 0 0;}
div#inspiration div.square-picture-box p.viainfo.tumblr {background: #ffffff /*#2c4762*/; color: #000000; }
div#inspiration div.square-picture-box p.viainfo.ffffound {background: #ffffff /*#f536ab*/;color: #000000 }

/*ul#pagination {border-bottom: 1px solid #333; border-top: 1px solid #333; margin: 0 0; display: block; clear: both;}
ul#pagination li {display: block; float: left; width:50px;}
ul#pagination li a, ul#pagination li span {font-size: 1.8em; color: #111111; text-decoration: none; padding: 0 0 0 5px; display: block; width: 50px; padding: 10px 0 5px 5px;}
ul#pagination li a {font-size: 2.4em;}*/

#pagination { border-top: 3px solid #333333; margin: 0 0; display: block; clear: both; height: 31px;}
#pagination li {display: block; float: left; width: 60px;}
#pagination li.align-right {display: block; float: right; width: 60px;}
#pagination li a, #pagination li span {font-size: 1.8em; color: #333333; text-decoration: none; padding: 0 0 0 5px; display: block; width: 55px; padding: 10px 0 5px 5px; text-align: center;}
#pagination li a:hover { background: #cccccc;}
#pagination li span {color: #666666; }
#pagination li span.centered{ width: 710px;}

/* blog */
div#leftCol p.big-tweet { font-size: 1.6em; padding: 20px 5px 20px 15px; margin-right: 5px; line-height:1.0em; position: relative;}
div#leftCol p.big-tweet {border-bottom: 1px solid #000;}
div#leftCol p.big-tweet span.tweet-meta{ display: block; font-size: 10px; margin: 0 0 0 0px; color: #666666;}
div#leftCol p.big-tweet span.fquote{ position: absolute; left: 0px;}
div#leftCol p.tweet-n1 { font-size: 3.6em;  padding: 0 5px 20px 15px;}
div#leftCol p.tweet-n2 { font-size: 3.0em;  padding: 20px 5px 10px 15px;}
div#leftCol p.tweet-n3 { font-size: 2.6em;}
div#leftCol p.tweet-n4 { font-size: 2.0em;}
div#leftCol p.tweet-n5 { font-size: 1.6em;}

div#rightCol p.right-col-simple-text {font-size: 1.4em; margin: 10px 5px; padding: 0 0 0 0px; line-height: 1.4em;}


/* FOOTER */

#footer { font-size: 1.2em; margin: 0px 0px 20px 0; padding: 20px 5px 0 5px; }