@charset "utf-8";
/* ---------------------------------------------------------------------------------------------------------------------
The global stylesheet for mesonprojekt.com v1 "Flaming June"
by Karl Francisco Fernandes
--------------------------------------------------------------------------------------------------------------------- */




/* ---------------------------------------------------------------------------------------------------------------------
			CSS RESET by ERIC MEYER (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
--------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-size: 100.01%;
	vertical-align: baseline;
	background: transparent;
}
blockquote, q {
	quotes: none;
}
textarea {
	overflow: auto;
	border: none;
	outline: none;
	margin: 0; 
	padding: 5px;
}
input, select {						/* Slightly modified */
	border: none;
	outline: none;
	margin: 0; 
	padding: 5px;
}




/* ---------------------------------------------------------------------------------------------------------------------
			LAYOUT
--------------------------------------------------------------------------------------------------------------------- */
body {
	background: url(dark_wood.jpg) top left repeat;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	position: relative;
}

#main_capsule {
	width: 980px;
	display: block;
	margin: 0 auto;
}

/* --------------------------------------------- Header --------------------------------------------- */
#header {
	height: 330px;
	background: url(logo_final.png) top left no-repeat;
	display: block;
}
#searchbar {
	display: block;
	width: 300px;
	height: 79px;
	background: url(search.png) no-repeat;
	float: right;
	margin-bottom: 25px;
}
#searchbox {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	margin-top: 33px;
	margin-left: 30px;
	background-color: transparent;
	border: 0;
}
#gobutton {
	margin: 0 0 -15px 10px;
	width: 41px;
	height: 28px;
}

/* --------------------------------------------- Capsules & main body --------------------------------------------- */
#main_encapsulated {
	width: 690px;
	float: left;
	display: block;
}

#content_capsule_header {
	width: 690px;
	height: 45px;
	display: block;
	margin: 0 auto;
	background: url(content_capsule_header.png) top left no-repeat;
}
#content_capsule {
	background: url(lacy.jpg) top left repeat-y;
	width: 690px;
	display: inline-block;
	margin-top: 0;
}
#page_content_capsule {
	min-height: 1000px;
	background: url(body_mercury.jpg) top right no-repeat;
	display: block;
	width: 650px;
	margin: 0 auto;
	line-height: 1.7;
}
#content_capsule_footer {
	width: 690px;
	height: 100px;
	display: block;
	margin: 0 auto;
	background: url(content_capsule_footer.png) top left no-repeat;
}

/* --------------------------------------------- Sidebar --------------------------------------------- */
#side_encapsulated {
	width: 280px;
	display: block;
	float: right;
}

#sidebar_top {
	min-width: 280px;
	height: 78px;
	background: url(sb3top.png) no-repeat;
	display: block;
	margin-top: -20px;
}
#sidebar {
	width: 250px;
	min-height: 560px;
	background: url(sb3.jpg) top left repeat-y;
	display: inline-block;
	font: 12px/1.6 Arial, Helvetica, sans-serif;
	padding: 0 15px 20px 15px;
}
#sidebar_bottom {
	width: 280px;
	height: 60px;
	background: url(sb3bottom.png) top left no-repeat;
	display: block;
}

#me {
	width: 270px;
	height: 293px;
	background: url(me.png) no-repeat;
	display: block;
	margin: -20px auto 10px auto;
}

/* --------------------------------------------- Footer --------------------------------------------- */
#footer_header {
	clear: both;
	width: 100%;
	height: 32px;
	background: url(pattern_footer.png) top left repeat-x;
	display: block;
}
#footer {
	width: 100%;
	background-color: #F4F2E3;
	display: block;
	font: 12px/1.6 Verdana, Arial, Helvetica, sans-serif;
	position: relative;
	margin: 0 auto;
}
#footer_footer {
	clear: both;
	width: 100%;
	height: 32px;
	background: url(pattern_footer_lower.png) top left repeat-x;
	display: block;
}
#footer_content_capsule {
	width: 970px;
	margin: 0 auto;
	position: relative;
}

#published {
	position: absolute;
	bottom: 0;
	right: 100px;
	height: 81px;
	width: 374px;
	z-index: 5;
	background: transparent url(penpage.png) no-repeat;
}

/* --------------------------------------------- Main navigation menu --------------------------------------------- */
#nav_main_capsule {
	height: 150px;
	width: 540px;
	display: block;
	background: url(nav_main_bg.png) left bottom no-repeat;
	z-index: 0;
	float: right;
	clear: right;
	padding-right: 45px;
}
#nav_main {
	float: right;
	height: 64px;
	display: block;
	margin-top: 40px;
	margin-right: 10px;
}
	
	#nav_main_home {
		display: inline;
	}
	#nav_main_home a:link, #nav_main_home a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_home.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_home a:hover, #nav_main_home a.active {
		background-position: top;
	}
	
	#nav_main_portfolio {
		display: inline;
	}
	#nav_main_portfolio a:link, #nav_main_portfolio a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_portfolio.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_portfolio a:hover, #nav_main_portfolio a.active {
		background-position: top;
	}
	
	#nav_main_blog {
		display: inline;
	}
	#nav_main_blog a:link, #nav_main_blog a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_blog.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_blog a:hover, #nav_main_blog a.active {
		background-position: top;
	}
	
	#nav_main_about {
		display: inline;
	}
	#nav_main_about a:link, #nav_main_about a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_about.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_about a:hover, #nav_main_about a.active {
		background-position: top;
	}
	
	#nav_main_contact {
		display: inline;
	}
	#nav_main_contact a:link,#nav_main_contact a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_contact.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_contact a:hover, #nav_main_contact a.active {
		background-position: top;
	}
	
	#nav_main_showcase {
		display: inline;
	}
	#nav_main_showcase a:link, #nav_main_showcase a:visited {
		float: left;
		width: 80px;
		height: 64px;
		background: url(nav_showcase.png) center bottom no-repeat;
		text-indent: 9999px;
		overflow: hidden;
		text-decoration: none;
	}
	#nav_main_showcase a:hover, #nav_main_showcase a.active {
		background-position: top;
	}




/* ---------------------------------------------------------------------------------------------------------------------
			TYPOGRAPHY
--------------------------------------------------------------------------------------------------------------------- */
.notice {
	margin: 5px;
	padding: 10px;
	border: thin solid black;
	background: #FFFFD4;
	text-align: center;
}

h6 span {
	font: bold 14px "Arial Narrow", Helvetica, sans-serif;
	color: #555555;
	margin-top: -10px;
	text-transform: uppercase;
}

span.excerpt {
	font: bold 20px Georgia, "Times New Roman", Times, serif;
	display: block;
	line-height: 1.4;
}

span.commenter {
	text-transform: uppercase;
	font-weight: bold;
}

span.imageCaption {
	font: italic 10px Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

ul.comments_error, div.comments_preview, .zemError {
	font: 14px Georgia, "Times New Roman", Times, serif;
	color: #000;
	padding: 5px;
	border: thin solid black;
	background-color: #FFFFD4;
}

noscript {
	color: gray;
	font: oblique 12px Arial, Helvetica, sans-serif;
}

#small {
	font-size: 12px;
}

#smaller {
	font-size: 10px;
}

small.caption {
	font: italic 12px Arial, Helvetica, sans-serif;
	margin-top: 5px;
}

#impreqs {
	font-weight: bold;
}

/* --------------------------------------------- Headings --------------------------------------------- */
h1 {
	width: 650px;
	font-size: 40px;
	color: #000;
	margin-bottom: 10px;
	font-family: "Arial Narrow", "Times New Roman", Times, serif;
	line-height: 1.2;
}
h1 span {
	color: #013B20;
}

h2 {
	width: 650px;
	font-size: 40px;
	color: #013B20;
	text-transform: uppercase;
	font-family: "Arial Narrow", "Times New Roman", Times, serif;
	display: block;
	margin: 35px 0 10px 0;
}

h3 {
	text-transform: uppercase;
	font-size: 18px;
}
h3.search {
	text-transform: none;
	margin-bottom: -5px;
}

h4 {
	font-size: 24px;
	color: #333;
	font-family: "Arial Narrow", "Times New Roman", Times, serif;
	display: block;
	text-transform: uppercase;
	margin: 25px 0 5px 0;
}
h4.fp {
	margin-bottom: 10px;
	text-transform: none;
}
div#slider h4.fp {
	margin-bottom: 10px;
	text-transform: none;
	margin-top: 10px;
}

h5 {
	font: bold 14px "Arial Narrow", Helvetica, sans-serif;
	color: #333;
	text-transform: uppercase;
	margin-bottom: 5px;
}

h6 {
	font: 14px "Arial Narrow", Helvetica, sans-serif;
	color: black;
	margin-top: -10px;
}
h6.fp {
	margin-bottom: 20px;
}

/* --------------------------------------------- Hyperlinks --------------------------------------------- */
a:link, a:visited, a:active, a.delicious-link:link {
	color: #013B20;		/* Old value: Jinga 660000*/
	text-decoration: underline;
}
a:hover, a.delicious-link:hover {
	color: #666;
	text-decoration: underline;
}

a.para:link, a.para:visited, a.para:active,
span.cattag a:link, span.cattag a:visited, span.cattag a:active {
	color: #013B20;		/* Old value: Jinga 660000*/
	text-decoration: underline !important;
}
a.para:hover, span.cattag a:hover {
	color: #888 !important;
	text-decoration: underline !important;
}

h1 a:link, h1 a:visited, h1 a:active, h2 a:link, h2 a:visited, h2 a:active {
	color: #013B20;
	text-decoration: none;
}
h1 a:hover, h2 a:hover {
	color: #666;
	text-decoration: none;
}
h4 a:link, h4 a:visited, h4 a:active {
	text-decoration: none;
}
h4 a:hover {
	text-decoration: underline;
}

#footer a:link, #footer a:visited, #footer a:active,
#sidebar a:link, #sidebar a:visited, #sidebar a:active,
#archives_list a:link, #archives_list a:visited, #archives_list a:active,
#rssCatList a:link, #rssCatList a:visited, #rssCatList a:active {
	color: #013B20;
	text-decoration: none;
}
#footer a:hover, #sidebar a:hover, #archives_list a:hover, #rssCatList a:hover {
	color: #000;
}




/* ---------------------------------------------------------------------------------------------------------------------
			ENHANCEMENTS
--------------------------------------------------------------------------------------------------------------------- */
img.starred {
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #AAA;
}
img.leftpad {
	margin-left: 20px;
	margin-bottom: 5px;
}
img.rightpad {
	margin-right: 20px;
	margin-bottom: 5px;
}

a img {
	vertical-align: baseline;
}

ul, li {
	list-style-position: inside;
	vertical-align: baseline;
}

.linklist, .related_articles, #rssCatList ul {
	list-style-type: none;
}

#sidebar #rssCatArchive li, #sidebar .linklist li {
	border-bottom: 1px dotted #000;
	padding: 2px 0;
}

#oneofus {
	border-bottom: 1px dotted #000;
	padding: 2px 0;
	display: block;
}

.feedlist {
	list-style-image: url(rss_bullet.png);
}

dt {
	display: list-item;
	list-style: disc inside;
	font-weight: bold;
}

dd {
	margin-left: 15px;
}

#up, #Message {
	vertical-align: top;
}

#frontpage {
	padding-right: 15px;
	padding-bottom: 10px;
}

#inline {
	display: inline;
}

div.panel {
	padding-bottom: 10px;
	border-bottom: thin dashed black;
}

div.bracketed {
	text-align: right;
	margin-right: 25px;
}

div.a_comment div {
	display: block;
	border-top: thin dotted black;
	min-height: 70px;
	margin-bottom: 10px;
	font-size: 11px !important;
}

div.a_comment div div.comm_info {
	width: 125px;
	float: left;
	border: none;
	padding: 10px;
	margin-bottom: 0 !important;
}

div.a_comment div div.comm_body {
	width: 475px;
	margin: 0 auto;
	border: none;
	padding: 10px;
	margin-bottom: 0 !important;
}

div.a_comment div div.comm_gravatar {
	width: 50px;
	float: right;
	border: none;
	padding: 10px;
	margin-bottom: 0 !important;
}
div.a_comment div div.comm_gravatar img {
	vertical-align: top;
	border: thin solid black;
}

#gals {
	width: 30%;
	float: left;
}

#mentions {
	width: 60%;
	float: right;
}

#toplink {
	margin-top: 10px;
	text-align: right;
}

#older_articles {
	width: 50%;
	float: right;
	text-align: right;
	display: inline;
}

#newer_articles {
	width: 50%;
	float: left;
	text-align: left;
	display: inline;
}

#folio_details {
	border-top: thin dashed black;
}

td.folio_info {
	width: 60%;
	border-right: thin dashed black;
}

/*
#folio_thumb_display {
	font-size: 10px;
}

#folio_thumb_display li {
	display: inline-block;
	padding: 5px 5px 1.5em 5px;
	width: 112px;
	vertical-align: top !important;
	line-height: 1.3 !important;
}
#folio_thumb_display li img:hover {
	border-color: #AAA;
}
#folio_thumb_display li a:link, #folio_thumb_display li a:active, #folio_thumb_display li a:visited, #folio_thumb_display li a:hover {
	text-decoration: none !important;
    overflow: hidden;
    position: relative;

}
*/

#folio_on_home {
	display: block;
	width: 615px;
	margin: 0 auto -20px auto;
}

#folio_on_home_details {
	margin-top: -55px;
	float: right;
}


	


/* ---------------------------------------------------------------------------------------------------------------------
			EXTRAS
--------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------- Twitter --------------------------------------------- */
#twitter_update_list {
	list-style: none;
}
#twitter_div a:link {
	text-decoration: none;
}
#twitter_div a:hover {
	text-decoration: underline;
}
#twitter_div ul {
	margin-bottom: 10px;
}

/* --------------------------------------------- Flickr --------------------------------------------- */
#flickr_badge_wrapper {
	margin-bottom: 5px;
}
.flickr_badge_image {
	display: inline;
	margin: 2px;
}
.flickr_badge_image img {
	border: 2px solid #AAA;
	text-align: center;
}
.flickr_badge_image img:hover {
	border: 2px solid #000;
}

/* --------------------------------------------- Delicious ---------------------------------------------*/
#delicious_container {
	display: block;
}
.delicious-post {
	font-size: 14.4px !important;
}
.delicious-post a {
	font-size: 12px !important;
}
a.delicious-link:link, a.delicious-link:visited, a.delicious-link:active, a.delicious-link:hover {
	margin-bottom: 0 !important;
	color: blue;
}

/* -------------------------------------- Frontpage Folio Slider ---------------------------------------*/
div#slider_wrapper {
	position: relative;
}

div#slider {
	width: 650px;
	margin: 0 auto;
	display: block;
}

#slider ul, #slider li{
	margin: 0 auto;
	width: 612px;
	padding:0;
	list-style: none;
}
#slider li{ 
	width:612px;
	height:415px;
	overflow:hidden; 
}	
#prevBtn, #nextBtn{ 
	display:block;
	width:19px;
	height:49px;
	position:absolute;
	left:-9px;
	top:140px;
	overflow:hidden;
	text-indent:-8000px;
}	
#nextBtn{ 
	left:638px;
}														
										
#prevBtn a, #nextBtn a{  
	display:block;
	width:19px;
	height:49px;
	background: url("btn_prev.png") no-repeat 0 0;	
}	
#nextBtn a{ 
	background: url("btn_next.png") no-repeat 0 0;	
}

/* --------------------------------------------- Portfolio Image Overlay ---------------------------------------------*/
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay a
{
    float: left;
	display: inline-block;
	width: 110px !important;
	height: 110px !important;
	margin: 0 10px 20px 10px;
    overflow: hidden;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
	padding: 5px;
	background-color: #EEE;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
	margin: 5px;
    width: 100px;
	cursor: pointer;
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .90;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.image-overlay p
{
	text-indent: 0;
	margin: 5px 5px 13px 5px;
	font-size: 11px;
	line-height: 1.3;
	color: #000;
}