/*--------------------------------
  Theme name: js09 v.2
  Theme URI: http://jeromesagisi.com
  Author: Jerome Sagisi
  Description: Version 2 of jeromesagisi.com
---------------------------------*/

/* GLOBAL RESET
------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0; }

/* COLORS
------------------
orange: #cb753c
brown: #665d51
gray: #928f87
beige: #faf6ea
------------------*/


/* GENERAL STYLES
------------------*/
body { background: #FAF6EA; font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; color: #928f87; }
html, body { height: 100%; }

/* TYPOGRAPHY
------------------*/
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; color: #ffffff; }
h6 { font-size: 1.4em; }
p { font-size: 1.4em; }
a { color: #cb753c; text-decoration: none; }
a:hover { text-decoration: underline; }
.articleInfo p { font-size: 1.2em; }
a.readMore { font-size: 0.9em; }

h2.articleHeadline { margin: 0 0 5px 0; }
h4.subHeading { padding: 2px 0 0 20px; line-height: 1.4em; width: 140px; background: #665d51; }

/* LAYOUT
------------------*/
#wrapMain { width: 100%; min-height: 100%; margin-bottom: -361px; position: relative; }

	/* header */
	#wrapHeader { width: 980px; padding: 20px 0 20px 0; overflow: hidden; }
		#wrapHeader h1 { display: none; }
		#wrapHeader img { float: left; margin: 10px 0 0 30px; }
		
		/* navigation */
		#wrapHeader #navMain { float: right; margin: 15px 0 0 0; }
		#wrapHeader #navMain li { float: left; }
		#wrapHeader #navMain a { float: left; margin-left: 20px; display: inline; }
		
	/* content */
	#wrapContent { width: 895px; padding: 0 0 30px 85px; background: transparent url(/images/bgs/cactus_bg.png) no-repeat; background-position: 0% 100%; overflow: hidden; }
		#contentBanner { margin: 50px 50px 50px 0; }
		#contentTitle { margin: 10px 50px 10px 0; }
		#contentIntro { padding: 20px 0 0 0; }
		
			/* main content */
			#contentMain { float: left; padding: 20px 0 0 0; }
			#contentMain #home { width: 570px; }
			#contentMain #articles, #contentMain #projects { width: 640px; }
			#contentMain #about { width: 640px; }
			#contentMain #contact { width: 400px; }
				div.articleInfo { width: 160px; float: left; margin: 5px 0 0 0; }
				div.articleBody { float: right; }
					#home .articleBody { width: 390px; }
					#articles .articleBody { width: 460px; }
			#wrapContent div.subHeading { height: 25px; width: 160px; background: #665d51;}
			#wrapContent h4.subHeading { margin-top: 2px; line-height: 1.4em; width: 140px; }
			#contentMain div.subHeading { height: 25px; width: 160px; background: #665d51;}		
			#contentMain h4.subHeading { margin-top: 2px; line-height: 1.4em; width: 140px; }
			
					
					#articles div.pagination { margin: 10px 0 20px 0; padding: 10px 0 0 0; text-align: right; font-size: 1.4em; border-top: 1px solid #928f87; }
					#articles div.pagination span, #articles div.pagination a { margin: 0 2px; padding: 3px 5px; }
					#articles div.pagination span.current { background: #928f87; color: #ffffff; }
					
			#contentMain #latestArticle { padding: 20px 0 20px 20px; border-top: 1px solid #928f87; overflow: hidden; }
				#articles #latestArticle { margin: 0 0 20px 0; }
				#articles #articleList { margin: 0; }
						.articleWrap { padding: 20px 0 30px 20px; border-top: 1px solid #928f87; overflow: hidden; }
						.articleBody h6 { padding: 0; color: #665d51; font-size: 1.4em; font-weight: bold; }
						.articleBody p { margin: 5px 0 20px 0; line-height: 1.7em; }
						.articleBody div#latestArticle img { display: none; }
						.articleBody img { margin: 0 0 20px 0; border: 3px solid #e0ddd4; }
						.articleBody blockquote { margin: 0 40px 20px 30px; font-size: 1.2em; line-height: 1.6em; color: #665d51; font-weight: bold; }
						.articleBody ul, ol { margin: 0 0 20px 30px; font-size: 1.2em; color: #665d51; line-height: 1.6em; font-weight: bold; }
						.articleBody ol { list-style-type: decimal; }
						.articleBody ul { list-style-type: disc; }
						.articleInfo .articleCategory { font-weight: bold; color: #928f87; }
							.articleInfo ul { margin: 5px 0 20px 0; }
							.articleInfo li { font-size: 1.2em; }
							
			#contentMain #articleComments { padding: 20px 0 20px 20px; border-top: 1px solid #928f87; }
				#articleComments .commentWrap { margin: 0 0 20px 0; padding: 0 0 20px 0; overflow: hidden; font-size: 0.9em; border-bottom: 1px solid #928f87; }
				.commentWrap .commentInfo { float: left; width: 160px; margin: 5px 0 0 0; }
					.commentWrap .commentInfo li { font-size: 1.2em; }
					.commentWrap .commentInfo li.commentAuthor { font-size: 1.2em; font-weight: bold; }
				.commentWrap .commentBody { float: right; width: 460px; margin: 5px 0 0 0; }
				
			/* projects */
			#contentMain .projectOuter { border-top: 1px solid #928f87; overflow: hidden; }
				ul.projectWrap { float: left; padding: 0 0 20px 20px; }
				ul.projectWrap li { float: left; margin: 20px 20px 0 0; }
				ul.projectWrap div { margin: 0 0 5px 0; overflow: hidden; }
				ul.projectWrap div a { float: left; font-size: 0.8em; font-weight: bold; }
				ul.projectWrap div p a { float: none; }
				#projectShow { padding: 20px 0 20px 20px; border-top: 1px solid #928f87; }
					#projectShow ul { margin: 0 0 10px 0; line-height: 1.8em; }
					#projectShow ul li { font-size: 1.2em; }
					#projectShow span { color: #665d51; font-weight: bold; }
					
			/* about */
			#aboutIntro { width: 895px; padding: 20px; border-top: 1px solid #928f87; overflow: hidden; }
			#aboutIntro img { float: left; }
			#aboutIntro h5 { float: left; margin: 5px 0 0 40px; width: 715px; font-size: 1.6em; color: #665d51; line-height: 1.7em; }
			#aboutContent { margin: 0 0 0 180px; }
				#aboutContent h2 { font-size: 2em; font-weight: bold; color: #665d51; }
				#aboutContent p { margin: 0 0 30px 0; line-height: 1.6em; }
				
			/* contact */
			#contentIntro div.contactIntro { border-bottom: 1px solid #928f87; }
			#contact p { margin: 0 0 0 20px; font-size: 1.3em; line-height: 1.6em; }
			#contact ul { margin: 20px 0 20px 20px; font-size: 1.2em; line-height: 1.8em; }
				#contact ul span { color: #665d51; font-weight: bold; }
				form#contactForm { margin: 3px 0 30px 0; overflow: hidden; }
				form#contactForm div { margin: 0 0 5px 0; }
				form#contactForm input { width: 430px; margin: 0 0 10px 0; }
				form#contactForm textarea { width: 430px; overflow: auto; }
				form#contactForm label { font-size: 1.2em; overflow: hidden; }
				form#contactForm label.error { float: right; margin: 0 20px 0 0; padding: 0 0 0 12px; display: inline; background: transparent url(/images/icons/error_arrow.png) no-repeat; font-weight: bold; color: #cb753c;}
				form#contactForm input, form#contactForm textarea { float: left; margin: 0 0 8px 0; padding: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 1.3em; border: 1px solid #e0e0e0; }
				form#contactForm input.contactButton { width: 80px; margin: 5px 0 0 0; padding: 3px 8px; background: #665d51; font-size: 1.2em; color: #e0ddd4; border: none; }
				.sentMsg div, .loadMsg div { font-size: 1.1em; background: #e0ddd4; padding: 10px; margin: 0 15px 20px 0; }
				.loadMsg div img { vertical-align: middle; margin: 0 10px 0 0; }
				.sentMsg div span, .loadMsg div span { line-height: 1.8em; font-weight: bold; }
				
			/* sidebar */
			#contentSub { float: right; padding: 20px 0 0 0; }
			#contentSub #homeSub { width: 300px; }
			#contentSub #articlesSub, #contentSub #projectsSub, #contentSub #aboutSub { width: 230px; }
			#contentSub #contactSub { width: 460px; }
				#contentSub div.subHeading { height: 25px; width: 160px; background: #665d51;}
				#contentSub h4.subHeading { margin-top: 2px; line-height: 1.4em; width: 140px; }
				#contentSub #currentProject { padding: 20px 0 10px 20px; border-top: 1px solid #928f87; }
				#contentSub .catList { margin: 0 0 40px 0; padding: 10px 0 0 20px; border-top: 1px solid #928f87; }
					.catList ul { margin: 0 20px 0 0; font-size: 1.3em; }
					.catList ul li { padding: 10px 0; border-bottom: 1px solid #928f87; overflow: hidden; }
					.catList ul li span.cat-link { float: left; }
					.catList ul li span.cat-count { float: right; }
					.catList p { padding: 10px 5px 0 0; font-size: 1.2em; line-height: 1.6em; }
				#contentSub ul#serviceList { margin: 20px 0 0 0; font-size: 1.2em; line-height: 2em; font-weight: bold; }
					ul#serviceList li { border: none; padding: 0; }
					
	/* comments */
	div#commentDiv { border-top: 1px solid #928f87; }
	div.commentForm { padding: 20px; }
		div.commentForm form { margin: 0 0 0 160px; }
		div.commentForm form label { font-size: 1.2em; overflow: hidden; }
		div.commentForm form label.error { float: right; display: inline; padding: 0 0 0 12px; background: transparent url(/images/icons/error_arrow.png) no-repeat; font-weight: bold; color: #cb753c; }
		div.commentForm form input#comment_author , div.commentForm form textarea { width: 430px; margin: 0 0 8px 0; padding: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; border: 1px solid #e0e0e0; }
		div.commentForm form input#comment_submit { width: 80px; margin: 5px 0 0 0; padding: 3px 8px; background: #665d51; font-size: 1.2em; color: #e0ddd4; border: none; }
		div.commentForm form textarea { overflow: auto; }
			
#wrapBottom { height: 361px; position: relative; background: #928f87; }
				
	/* ticker */
	#wrapTicker { width: 100%; margin: 0 0 0; border-bottom: 2px solid #ffffff; background: #cb753c; overflow: hidden; }
		#wrapTicker h3 { float: left; line-height: 1em; margin: 0 15px 0 35px; padding: 4px 0 2px 0; }
		#wrapTicker p { color: #ffffff; padding: 8px 0; font-size: 1.3em; font-weight: normal; }
			#wrapTicker p a { color: #ffffff; text-decoration: underline; }
			
	/* sub */
	#wrapSub { background: #928f87; overflow: hidden; }
		#wrapSub p, #wrapSub a { font-size: 1.3em; }
		#wrapSub a, #wrapSub li { color: #ffffff; font-size: 1.1em; }
		#wrapSub h3.sidehead { margin: 0 0 0 0; }
		
	#wrapSub .sub1 { width: 180px; float: left; padding: 0 0 0 85px; }
		.sub1 .socials { padding: 20px 20px 30px 0; }
		.sub1 .socials ul {line-height: 1.6em; }
		.sub1 .socials li { padding: 10px 0 0 0; }
			.socials li a { width: 60px; display: block; padding: 10px 0 10px 40px; }
				.socials li.linkedin a { background: transparent url(/images/icons/linkedin.png) no-repeat; }
				.socials li.facebook a { background: transparent url(/images/icons/facebook_32bnw.png) no-repeat; }
				.socials li.twitter a { background: transparent url(/images/icons/twitter_32bnw.png) no-repeat; }
				.socials li.rss a { background: transparent url(/images/icons/rss_32bnw.png) no-repeat; }
				.socials li.linkedin a:hover { background: transparent url(/images/icons/linkedin_32.png) no-repeat; }
				.socials li.facebook a:hover { background: transparent url(/images/icons/facebook_32.png) no-repeat; }
				.socials li.twitter a:hover { background: transparent url(/images/icons/twitter_32.png) no-repeat; }
				.socials li.rss a:hover { background: transparent url(/images/icons/rss_32.png) no-repeat; }
	#wrapSub .sub2 { width: 187px; float: left; }
		.sub2 .myLinks { padding: 30px 20px 30px 0; }
		.sub2 .myLinks ul { line-height: 1.3em; }
		.sub2 .myLinks li { padding: 10px 0 0 0; }
	#wrapSub .sub3 { width: 227px; float: left; }
		.sub3 .recentArticles { padding: 30px 20px 30px 0; }
		.sub3 .recentArticles ul { line-height: 1.4em; margin: 10px 0 0 0; }
		.sub3 .recentArticles li { padding: 0 0 0 0; }
		.sub3 .recentArticles span { display: block; color: #e0ddd4; margin-bottom: 15px; font-size: 0.9em; }
	#wrapSub .sub4 { width: 301px; float: left; }
		.sub4 .search-twitter { padding: 30px 20px; }
		.sub4 ul { list-style: none; }
		.sub4 form.searchform { margin: 10px 0 30px 0; }
		.sub4 #twitter { padding: 0 0 0 0; }

	/* footer */
	.clearBottom { height: 361px; clear: both; }
	 #wrapFooter { width: 100%; background: #928f87; border-top: 1px solid #e0ddd4; }
	 #footerDetails { width: 980px; padding: 10px 20px 5px 0; overflow: hidden; }
	 #footerDetails p { margin-left: 35px; float: left; font-size: 1.2em; color: #e0ddd4; }
		#footerDetails a { color: #e0ddd4; }
	 #footerDetails #iconses { float: right; }
		#iconses a { margin: 0 0 0 10px; }
	
	form.searchform { overflow: hidden; }
	form.searchform input { width: 175px; float: left; padding: 3px 0; background-color: #ffffff; color: #928f87; border: 1px solid #e0ddd4; }
	form.searchform input.search-button { width: 80px; float: right; padding: 3px 8px; background: #665d51; font-size: 0.9em; color: #e0ddd4; border: none; }
	
	/* slider */
	.boxgridHome { width: 260px; height: 135px; float: left; background: #e0ddd4; overflow: hidden; position: relative; }
	.boxgridHome img { position: absolute; top: 0; left: 0; border: 3px solid #e0ddd4; }
	.boxcaptionHome { float: left; position: absolute; background: #faf6ea; border-top: 3px solid #e0ddd4; padding: 5px 0 10px 0; height: 45px; width: 100%; }
	.captionfull .boxcaptionHome { top: 130px; left: 0; }
	.caption .boxcaptionHome { top: 100px; left: 0; }
	
	.boxgridHome h5.overlayHeader { font-size: 1.2em; margin: 0 0 2px 0; font-weight: bold; color: #ffffff; }
	.boxgridHome p.overlayContent { font-size: 1.2em; color: #665d51; }
	
	.boxgridProjects { width: 290px; height: 145px; float: left; background: #e0ddd4; overflow: hidden; position: relative; }
	.boxgridProjects img { position: absolute; top: 0; left: 0; border: 3px solid #e0ddd4; }
	.boxcaptionProjects { float: left; position: absolute; background: #faf6ea; border-top: 3px solid #e0ddd4; padding: 5px 0 10px 0; height: 45px; width: 100%; }
	.captionfull .boxcaptionProjects { top: 142px; left: 0; }
	.caption .boxcaptionProjects { top: 100px; left: 0; }
	
	.boxgridProjects h5.overlayHeader { font-size: 1.4em; margin: 0 0 2px 0; font-weight: bold; color: #cb753c; }
	.boxgridProjects p.overlayContent { font-size: 1.2em; color: #665d51; }
	ul #projectWrap div .boxgridProjects a { color: #000; }
	form#new_comment div { margin: 5px 0; }
	form#contactForm div#brain_buster_captcha { display: block; }
	form#new_comment div div#brain_buster_captcha label { font-size: 1.2em; }
		div#brain_buster_captcha input { width: 130px; border: 1px solid #e0ddd4; font-size: 1.2em; padding: 5px; }
		
pre { margin: 0 0 20px 0; padding: 5px; font-size: 1.4em; color: #665d51; font-weight: bold; background: #e0ddd4;}

/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }

  .sIFR-dummy {
	width: 0px;
	height: 0px;
	margin-left: 42px !important;
	z-index: 0;
}
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */

  .sIFR-active h1.banner {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 30px;
	padding-bottom: 0;*/
	visibility: hidden;
	margin: 0;
	padding: 0;
}

  .sIFR-active h1.title {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 24px;*/
	visibility: hidden;
	margin: 0;
	padding: 0;
}

  .sIFR-active h2.articleHeadline {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 24px;*/
	visibility: hidden;
	margin: 0;
	padding: 0;
}

  .sIFR-active h3.ticker {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 24px;*/
	visibility: hidden;
	margin: 0;
	padding: 0;
}

  .sIFR-active h3.sidehead {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 24px;*/
	visibility: hidden;
	margin: 0;
	padding: 0;
}

  .sIFR-active h4.subHeading {
/*	visibility: hidden;
	font-family: Helvetica;
	line-height: 1em;
	font-size: 24px;*/
	visibility: hidden;
	margin: 0;
	/*padding: 0;*/
}
}

.twitted {
}

.twitted h2 {
	margin: 0;
	padding: 0.3em 0.8em;
	font-size: 1em;
	color: #fff;
	background-color: #888;
}

.twitted p.preLoader {
	margin: 0;
	padding: 1em 1em 1em 3em;
	background: transparent url("/images/icons/ajax-loader02.gif") 1em center no-repeat;
	/* generate your own loader gif: http://www.ajaxload.info */
}

.twitted ul#twitter_update_list {
	margin: 0;
	padding: 22px 0 0 0;
	list-style-type: none;
	background: transparent url(/images/bgs/twitter_bg_01.png) no-repeat top;
}

.twitted ul#twitter_update_list li {
	margin: 0;
	color: #665d51;
}

.twitted ul#twitter_update_list li span {
	/* tweet content */
	display: block;
	padding: 5px 15px 5px 15px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4em;
}

.twitted ul#twitter_update_list li a {
	/* links in tweet content */
	color: #00f;
}

.twitted ul#twitter_update_list li a {
	/* timestamp link */
	color: #cb753c;
	display: block;
	text-align: right;
	margin: 0 20px 0 0;
}

.twitted ul#twitter_update_list li span a {
	text-align: left;
	margin: 0;
	display: inline;
}

.twitted ul#twitter_update_list li.firstTweet {
	background: #e0ddd4;
}

.twitted ul#twitter_update_list li.lastTweet {
	border-bottom: none;
}

.twitted p.profileLink {
	display: block;
	margin: 0;
	padding: 15px 0 0 0;
	color: #fff;
	background: transparent url(/images/bgs/twitter_bg_03.png) no-repeat top;
	text-align: right;
}
#wrapSub .twitted p.profileLink a {
	font-size: 0.8em;
}