/*  
Theme Name: FrancoisFaubert.com
Theme URI: http://www.francoisfaubert.com/
Description: Custom theme.
Version: 1
Author: Francois Faubert
Author URI: http://www.francoisfaubert.com/
	
*/


/* @group Default high-level tags  */
	
	body {
		background:#1a2642 url(img/bg-body.jpg) no-repeat center -104px; /* Apart from the homepage, crop the bg */
		font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
		min-width:900px;
		color:#fff;
		font-size: 62.5%; / * Resets 1em to 10px * /
		
	}
	
	body > div {
		font-size:13px;
	}
	
	img {
		border:none;	
	}
	
	a,
	a:link,
	a:active,
	a:visited {
		text-decoration:none;
		color:#92AFF8;	
	}
	
	a:hover {
		color:#caeaff;	
	}
	
	h1, h2, h3, h4 {
		opacity:0.85;
		-moz-opacity:0.85;
		text-shadow:0 0 5px #000000;
	}
	
	p, div, span {
		text-shadow:0 0 2px #000000;
	}
	
	p {
		opacity:0.85;
		-moz-opacity:0.85;
		text-align:justify;
	}
	
	h2 a,
	h2 a:link,
	h2 a:active,
	h2 a:visited {
		color:#92AFF8;	
	}
	
	h2 a:hover {
		color:#caeaff;	
	}
	
	

/* @end Default high-level tags  */

/* @group Tools */

	a.btn {
		background:transparent url(img/bg-button-left.png) no-repeat top left;
		min-width:61px;
		height:23px;
		display:block;
		padding-left:7px;
		overflow:hidden;
		font-family:Arial, Sans-Serif;
	}
	
	a.btn span {
		background:transparent url(img/bg-button-right.png) no-repeat top right;
		height:23px;
		display:block;
		font-size:13px;
		color:#fff;
		padding:4px 11px 0 7px;
	}
	
	a.btn:hover {
		background-position:left -23px
	}
	
	a.btn:hover span {
		background-position:right -23px;
		color:#a8c4fc;
	}

	.clear-fix {
		display:block;
		clear:both;
	}
	
/* @end Tools */


/* @group Design areas */
	
	
	#content {
		background:transparent url(img/bg-shade.png) repeat top center;
	}
	
	
	#footer {
		overflow:hidden;
		height:120px;
		background:transparent url(img/bg-h-sep.png) repeat-x top left;
	}
	
	.wrap {
		position:relative;
		margin:0 auto;
		overflow:hidden;
		width:880px;
	}
	
	.h-separator {
		background:transparent url(img/bg-h-sep.png) repeat-x top left;
		height:2px;
		clear:both;
	}

/* @end Design areas */

/* @group Navigation */

	/* Hidden on the main page through php switches */
	#navigation {
		font-size:16px;
		line-height:50px;
		background:transparent url(img/bg-h-sep.png) repeat-x scroll top center;
		vertical-align:middle;
		overflow:hidden;
		text-align:center;
	}
	
	#navigation li {
		display:inline-block;
		margin:0 1em;
	}
	
	#navigation li a:link,
	#navigation li :active,
	#navigation li :visited {
	 	color:#e7efff;
	}

/* @end Navigation */


/* @group Mugshot */

	#mugshot {
		width:660px;
		height:170px;
	}
	
	#mugshot .avatar {
		background:transparent url(img/bg-avatar-pic.png) no-repeat top left;
		height:125px;
		width:120px;
		position:absolute;
		top:20px;
	}
	
	#mugshot .avatar img {
		position:absolute;
		top:26px;
		left:22px;
		height:73x;
		width:73px;	
	}
	
	#mugshot .introduction {
		background:transparent url(img/bg-mugshot-intro.png) no-repeat top left;
		width:490px;
		height:120px;
		position:absolute;
		left:122px;
		color:#92aff8;
		font-size:18px;
		padding:32px 0 0 24px;
		top:23px;
	}
	
	#mugshot .introduction h1 {
		font-size:24px;
		margin-bottom:14px;
		letter-spacing:0.02em;
	}	
	
	#mugshot .introduction em {
		color:#fff;
		font-style:normal;
	}
	
	#mugshot .more {
		position:absolute;
		top:50px;
		right:7px;
	}

/* @end Mugshot */

/* @group Footer */
	
	#footer .wrap {
		height:120px;
	}
	
	#footer .copyrights {
		text-align:center;
		font-size:12px;	
		margin-top:55px;
	}
	

/* @end Footer */


/* @group Landing page */
	
	#francoisfaubert {
		background:#1a2642 url(img/bg-body.jpg) no-repeat top center;
	}
	
	#francoisfaubert #header {
		height:375px;
	}
	
	/* Full size mugshot on main screen */
	#francoisfaubert #mugshot {
		height:323px;
	}
	
	#francoisfaubert #mugshot .avatar {
		top:131px;
	}
	
	#francoisfaubert #mugshot .introduction {
		top:130px;
	}
	
	
	#francoisfaubert #content .wrap {
		height:423px;
	}
	
	#francoisfaubert #content-sub {
		padding-top:2px; /* leave room for the borders */
	}
	
	
	#francoisfaubert #content h2 {	
		float:left;
		position:absolute;
		top:18px;
		left:21px;
		font-size:20px;
	}
	
	#francoisfaubert #content .blog-spotlight {
		width:880px;
		position:relative;
		margin:0 auto;
		height:450px;
	}
	
	#francoisfaubert #content .blog-spotlight .latest-post {
		width:66%;
		background:transparent url(img/bg-blog-spotlight.png) no-repeat top left;
		width:580px;
		height:329px;
		position:absolute;
		top:51px;
		left:4px;
	}	
	
	#francoisfaubert #content .blog-spotlight .latest-post .header {
		border-bottom:1px solid #355198;
		margin-right:2px;
	}
	
	#francoisfaubert #content .blog-spotlight .latest-post h3 {
		margin:0 0 0 2px;
		font-size:20px;
		border-bottom:1px solid #081226;
		overflow:hidden;
		padding:0 0 7px 15px;
	}
	
	#francoisfaubert #content .blog-spotlight .latest-post h3 a {
		color:#fff;
	}
		
	#francoisfaubert #content .blog-spotlight .latest-post p {
		margin:15px;
		line-height:1.5em;
		letter-spacing:0.02em;
	}
	
	#francoisfaubert #content .blog-spotlight .latest-post .date {
		padding-left:15px;
		color:#b6cdf8;
		font-size:13px;
		overflow:hidden;
		white-space:nowrap;
		margin:10px 2px;
	}
	
	
	#francoisfaubert #content .blog-spotlight .latest-post .more {
		position:absolute;
		right:10px;
		bottom:10px;	
	}
		
	#francoisfaubert #content .blog-spotlight ul.past-posts {
		position:absolute;
		right:0;
		top:73px;	
		width:28%;
		color:#b6cdf8;
		list-style-type:none;
	}	
	
	
	#francoisfaubert #content .blog-spotlight .past-posts .title {
		font-size:15px;	
		color:#fff;
	}
	
	#francoisfaubert #content .blog-spotlight .past-posts li {
		background:transparent url(img/bg-h-sep.png) repeat-x bottom left;
		line-height:40px;
	}
		
	#francoisfaubert #google-search {
		width:28%;
		position:absolute;
		top:271px;
		right:0;
	}
	
	#francoisfaubert #google-search p {
		font-size:15px;	
		color:#fff;
	}
	
	#francoisfaubert #google-search form input[type=text] {
		width:164px;
	}
	
	#francoisfaubert #google-search form div {
		margin-top:10px;	
	}
		
	#francoisfaubert #content-sub .wrap {
		width:900px;
		background:transparent url(img/bg-content-dark-split.png) repeat-y top left;
		height:auto;
	}
	
	/*
	#content-sub .col {
		color:#fff;
		font-size:12px;	
		background:transparent url(img/bg-content-dark-split.png) repeat-y top right;
		height:466px;
		width:33%;
		float:left;
		position:relative;
	}
	
	#twitter .header {
		font-size:1.1em;
		font-weight:normal;
		margin:0 1px 0 2px;
		background:transparent url(img/bg-h-sep.png) repeat-x bottom left;
		padding:10px 0;
		position:relative;
		height:31px;
	}
	
	#twitter .header h2 {
		overflow:hidden;
		text-indent:-9999px;
		margin:0;
		text-align:left;
	}	
		
	#twitter .header img {
		position:absolute;
		top:9px; 
		left:12px;	
	}
	
	#twitter ul {
		margin-top:25px;
	}
	
	#twitter li {
		margin:0 1px 2em 2px;
		line-height:1.2em;
		letter-spacing:0.02em;
		list-style-type:none;
		background:transparent url(img/bg-h-sep.png) repeat-x bottom left;
	}
	
	#twitter li > a {
		display:block;
		text-align:right;
		color:#779dce;
		padding:1em 1em 1em 0;
	}
	
	#twitter li span {
		display:block;
		padding:0 15px;	
	}
	
	#twitter li span img {
		margin:0 auto 1em auto;
	}
	
	#twitter div {
		text-align:right;
		font-size:0.85em;	
	}
	
	#twitter .follow {
		position:absolute;
		top:13px; 
		right:10px;
	}
	
	#links {
		text-align:center;	
	}
	
	#links ul {
		padding:0;	
		margin:0 2px;
		background:transparent url(img/bg-links.png) no-repeat top center;
	}
	
	#links li {
		list-style-type:none;	
		margin:0 0 43px 0;
		font-size:11px;
		color:#caeaff;
		padding:0 56px;
		letter-spacing:0.05em;
		line-height:1.2em;
	}
	
	#links li.tmt {
		padding-top:54px;
	}
	
	#links a {
		display:block;
		margin:0.5em 0;
	}
	
	#reader .f {
		display:none;
	}
	
	#reader .s {
		margin-top:6px;
		font-size:11px;
	}
	
	#reader h2 {
		background:transparent url(img/bg-h-sep.png) repeat-x scroll left bottom;
		font-size:14px;
		font-weight:normal;
		margin:0;
		padding:18px 0 3px 35px;
		position:relative;
		height:31px;
		overflow:hidden;
	}
	
	#reader a.reader-rss {
		position:absolute;
		top:13px; 
		left:7px;
	}
	
	#reader li {
		margin:0 1px 1em 1px;
		line-height:1.2em;
		letter-spacing:0.02em;
		padding:1em;	
		color:#a8c4fc;
		list-style-type:none;
		background:transparent url(img/bg-h-sep.png) repeat-x bottom left;
	}
	
	#reader li a.i:link,
	#reader li a.i:active,
	#reader li a.i:visited {
	 	color:#e7efff;
	}
	
	#reader li a.i:hover {
	 	color:#b6cdf8;
	}
	
	#reader ul {
		padding:0;
		margin:0 1px 0 0;
	}
	
	#reader .more {
		position:absolute;
		right:10px;
		top:13px;
	}*/
	
	
	#homepage-stream .more {
		position:absolute;
		right:10px;
		top:13px;
	}

/* @end Landing page */

/* @group Post formatting */
	
	.post {
		position:relative;
	}
	
	.post h2 { 
		font-size:22px;
		margin:12px 0 12px 17px;
	}
	
	.post .post-details {
		background:transparent url(img/bg-shade.png) repeat scroll center top;
	}	
		
	.post .post-details .wrap {
		color:#B6CDF8;
		font-size:12px;
		letter-spacing:.08em;
		padding-left:35px;
		margin:0 auto;
		line-height:30px;
		vertical-align:middle;
	}
	
	.post .entry {	
		font-size:1.15em;
		color:#bad2f2;
		min-height:300px;
	}
	
	.post p {
		line-height:1.5em;
		margin:1em 18px 1.5em;
	}
	
	.post .post-details span {
		margin-right:18px;
		padding-right:30px;
		background:transparent url(img/bg-post-details-sep.png) no-repeat scroll center right;
		font-weight:lighter;
	}
	
	.post .post-details span:last-child {
		background:transparent;
	}
	
	.post .navigation {
		margin-left:20%;
		clear:both;
	}

	.post .entry blockquote, 
	.post .entry pre {
		margin-left:40px;
	} 
	
	.post .entry code {
		font-family:Courier New;
	}
		
/* @end Post formatting */


/* @group comments */

		
	.comments {
		position:relative;
	}
	
	.comments .header {
		padding:12px 34px;
	} 
	
	.comments h3 { 
		font-size:22px;
		margin:0 0 5px 18px;
	}
	
	.comments h4 { 
		font-size:18px;
		margin:0 0 5px 18px;
		color:#bad2f2;
	}
	
	.comments p {
		line-height:1.5em;
		margin:1.5em 18px 1.5em;
		text-align:justify;
	}
	
	.comments .comment-form {
		padding:12px 34px;
	}
	
	.comments form input[type=text] {
		width:300px;
	}
	
	.comments .comment-list {
		background:transparent url(img/bg-shade.png) repeat scroll center top;
		padding:1em;
	}
	
	.comments .comment {
		margin:0 30px 5px;
		background:transparent url(img/bg-content-dark-split.png) repeat-y scroll left top;
		border-left:1px solid transparent;
	}
	
	.comments .comment.alt {
		background:transparent url(img/bg-shade.png) repeat scroll center top;
		border-left:1px solid #233860;
	}
	
	.comments .comment .thumb {
		display:block;
		float:left;
		width:70px;
		padding:15px;
		height:100%;
	}
	.comments .comment .msg {
		background:transparent url(img/bg-content-dark-split.png) repeat-y scroll right top;
		display:block;
		float:left;
		min-height:100px;
		width:718px;
	}
	
	.comments .comment .cred {
		margin:10px 0 0 17px;
		font-size:12px;
	}

/* @end comments */


/* @group Archives */

	#archives #content h1 {
		font-size:28px;
		margin:12px 0 12px 17px;
	}

	#archives #google-search {
		background:transparent url(img/bg-shade.png) repeat scroll center top;
		font-size:1.2em;
	}
	
	#archives #google-search .wrap {
		padding:1em;
		height:60px;
	}
	
	#archives #cse-search-box {
		position:absolute;
		top:30px;
		left:30px;
	}

	#archives #google-search .navigation {
		position:absolute;
		top:37px;
		right:30px;
	}
	
	#archives #google-search .navigation li {
		display:inline;
	}
	
	#archives .post .entry {
		min-height:200px;
		margin-bottom:17px;
	}
	
	#archives .post .more {
		float:right;
		margin-right:17px;
	}
		
/* @end Archives */


/* @group Topic grid */

	#topic-list .topic-list li {
		display:block;
		float:left;
		background:transparent url(img/bg-content-dark-split.png) repeat-y scroll right top;
		padding:2px 1px 2px 0;
		width:258px;
	}
	
	#topic-list .topic-list a {
		display:block;
		padding:0.5em;
		margin:0 2px;
	}
	
	#topic-list .topic-list a:hover {
		background:transparent url(img/bg-shade.png) repeat top center;
	}
	
	
	#topic-list .topics-header {
		background:transparent url(img/bg-shade.png) repeat top center;
	}
	
	#topic-list .topic-list {	
		font-size:1.15em;
		color:#bad2f2;
		min-height:300px;		
	}
	
	#topic-list .topic-list .list {
		background:transparent url(img/bg-content-dark-split.png) repeat-y scroll left top;
		width:777px;
		overflow:hidden;
	}
	
	#topic-list .topic-list .list div {
		background:transparent url(img/bg-content-dark-split.png) repeat-y scroll right top;
	}
	
	#topic-list .topics-header p {
		line-height:1.5em;
		margin:1em 18px 1.5em;
		text-align:justify;
	}
	
	#topic-list h3 {
		font-size:22px;
		margin:0.5em 18px;
	}
	
	#topic-list #cse-search-box {
		margin:0 0 20px 20px;
	}
	
/* @end Topic grid */

/* @group Lifestream grid */

	#lifestream .entry {
		min-height:30px;
		background:transparent url(img/bg-shade.png) repeat top center;
	}

	#lifestream .entry .date {
		display:block;
		font-size:0.85em;
	 	color:#e7efff;
	}
		
	#lifestream-wrapper {
		background:transparent;
		min-height:485px;
	}
	
	#lifestream-wrapper p {
		font-size:0.9em;
	}
	
	#lifestream-wrapper p.loading {
		text-align:center;
		margin-right:auto;
	}
	
	
	#lifestream-wrapper p {
		background:#;
		background:#000 url(img/bg-black-box.png) repeat-x 0 -28px;
		color:#fff;
		float:left;
		padding:10px;
		clear:both;
		-webkit-border-radius:10px; 
    	-moz-border-radius:10px;
		border-radius:10px;
		-moz-box-shadow:0px 0px 5px #000;
		box-shadow:0px 0px 5px #000;	
		margin-left:40px;		
	}
	
	.timeline-date {
		clear:both;
		margin:1em 0 2em 20px;		
	}
	
	.timeline-date div {
		float:left;
		font-size:12px;
		text-shadow:none;
		padding:0.5em;	
	}
	
	.timeline-details.year {
		color:#000;
		background:#ced5e9;
	}
	
	.timeline-details.month {
		background:#a8b9e3;
		color:#333;
	}
	
	.timeline-details.day {
		color:#000;
		background:#839fe6;
	}
	
	
	
/* @end Lifestream grid */