/*  
Theme Name: monochromatic blue
Theme URI: http://surfingtonio.com/
Description: Monochromatic blue theme with some shades of yellow. 
Version: 1.0
Author: Marc Anthony M. Danting
Author URI: http://surfingtonio.com/

	Monochromatic Blue v1.0
	http://surfingtonio.com/

	This theme was designed and built by Marc Anthony M. Danting,
	whose blog you will find at http://surfingtonio.com/blog/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* universtal reset */
html * { margin:0; padding:0; }

/* general styling */
body {
	font-family:verdana, arial;
	color:#fff;
	background:#2d73a8;
}

#container {}

a { color:#ffd85c; text-decoration:none; }
a:hover { text-decoration:underline; }
/*a:visited { color:#ffe490; }*/

h1, h2, h3, h4 { color:#fff; font-weight:bold;}
h1 {} /* site logo */
h2 { font-size:21px; height:21px;}
h3 { font-size:11pt; font-family:'century gothic', verdana, arial; }
h4 { font-size:10pt; } /* used as commenter names */

p {	font-size:10pt; line-height:1.3em; }

img { border:none;}


/* head and navbar styling */
#container_head {
	background:url(images/bg_header.jpg) repeat-x;
	padding-top:66px;
	height:71px; /* 137px - 66px (top padding) */
}

#branding { position:relative; margin:0 auto; width:819px; height:71px; }

#logo {
	font-size:0;
	text-indent:-9999px;
	background:url(images/logo.gif);
	position:relative;
	width:225px;
	height:33px;
}

#tagline { color:#8fc3e9; font:11pt verdana; margin-top:5px; }

/* navbar.. */
#navbar { position:relative; margin:0 auto; width:819px; }

#navbar ul { float:right; position:relative; margin-top:-38px; }

#navbar li {
	float:left;
	text-indent:-9999px;
	list-style-type:none;
	width:130px;
	height:38px;
}

#navbar li a { display:block; height:38px; }

#tab_aboutme {background:url(images/tab_aboutme.gif);}
#tab_active_aboutme {background:url(images/tab_active_aboutme.gif);}
#tab_aboutme a:hover {background:url(images/tab_hover_aboutme.gif);}

#tab_blog {background:url(images/tab_blog.gif);}
#tab_active_blog {background:url(images/tab_active_blog.gif);}
#tab_blog a:hover {background:url(images/tab_hover_blog.gif);}

#tab_portfolio {background:url(images/tab_portfolio.gif);}
#tab_active_portfolio {background:url(images/tab_active_portfolio.gif);}
#tab_portfolio a:hover {background:url(images/tab_hover_portfolio.gif);}

#tab_contactme {background:url(images/tab_contactme.gif);}
#tab_active_contactme {background:url(images/tab_active_contactme.gif);}
#tab_contactme a:hover {background:url(images/tab_hover_contactme.gif);}



/* content styling */
#content {
	margin:30px auto 30px auto;
	padding:23px 28px; 
	width:763px; /* 819px - padding */
	min-height:219px;
}

#content h2 { margin-bottom:1.5em; }
#content h3 { margin-bottom:.5em; }

#h2_accessdenied { background:url(images/heading_accessdenied.gif) no-repeat; text-indent:-9999px; }
#h2_aboutme { background:url(images/heading_aboutme.gif) no-repeat; text-indent:-9999px; }
#h2_blog { background:url(images/heading_blog.gif) no-repeat; text-indent:-9999px; }
#h2_portfolio { background:url(images/heading_portfolio.gif) no-repeat; text-indent:-9999px; }
#h2_contactme { background:url(images/heading_contactme.gif) no-repeat; text-indent:-9999px; }

#content p { margin-bottom:15px; }



/* footer styling */
#container_bottom {
	color:#8fc3e9;
	line-height:14pt;
	background:url(images/bg_footer.jpg) repeat-x;
	position:relative;
	bottom:0;
	padding:47px 0 0 0;
	width:100%;
	height:100px; /* 147px - 47px padding */
}

#container_bottom p { font-size:8pt; }

#site_info {
	margin:0 auto;
	padding:0px 28px; 
	width:763px; /* 819px - padding */
}

#site_info a { font-weight:bold; }

#site_validations { float:left; }

#site_creator { float:right; }

#site_copyright { clear:both; float:right; }



/* content specific styling */
#thumbnail_site { float:right; margin:0 0 28px 28px; }

.portfolio_item { list-style-type:none; padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #74a2d6; border:0px solid red;}
.portfolio_preview { float:right; margin:0 50px 0 30px; height:220px; }
.entry_type { font-weight:bold; }
#contact_list {
	float:right;
	padding-left:24px;
	width:264px; /* 288px - 24px padding */
	border-left:1px solid #74a2d6;
}

.contact_icon { float:left; margin-right:10px; }



#sidebar {
	float:right;
	background:url(images/bg_sidebar.jpg) no-repeat;
	padding:25px 20px;
	width:207px; /* 247px - 40px padding */
	height:348px;
}


#search_box {
	margin-right:4px;
	position:relative;
	top:-12px;
	width:125px;
	height:16px;
	border:1px solid #216aa1;
}

#search_button { width:70px; height:32px; }

.post { position:relative; margin-bottom:2.5em; width:484px; }

.entry_title {}

.entry_date, .comment_date { color:#8fc3e9; font-size:8pt; }

.entry_comments { 
	float:right; 
	color:#216aa1;
	font-weight:bold;
	text-align:center;
	background:url(images/comment_cloud.gif) no-repeat; 
	position:absolute;
	top:0;
	right:0;
	padding-top:5px;
	width:41px; 
	height:38px; /* 43px - 5px padding */
}

.entry_comments a { color:#216aa1; }

#sidebar ul, #search_form { margin-bottom:23px; }
#sidebar li { list-style-type:none; font-size:9pt; margin-bottom:.3em; }
#feed_entries { 
	background: url(images/icon_rss_entries.gif) no-repeat 0 50%;
	padding: 0 0 0 19px;
}
#feed_comments { 
	background: url(images/icon_rss_comments.gif) no-repeat 0 50%;
	padding: 0 0 0 19px;
}


#comments { 
	background:#216aa1; 
	padding:28px 28px 60px 28px; /* 60px => 28px padding + 32px high submit */
	width:428px; /* 484px - (28px * 2) padding */
}

#comments h3 { color:#8fc3e9; text-transform:uppercase; }
#comments_remark { font-size:9pt; font-style:italic;/* padding-bottom:1em; border-bottom:1px solid #8fc3e9;*/ }
#comments ul {}
#comments li { list-style:none; }
.comment_user {} /* same as h4 tags */
.comment_date {} /* same as .entry_date */
.comment { overflow:hidden; margin-bottom:1em; padding-bottom:1em; border-bottom:1px solid #8fc3e9; }

.comment p { color:#8fc3e9; font-size:8pt;}
.comment_admin p { color:#fff;} /* special style for admin comments */

#comment_form {} /* no special styling */
#comment_form label { display:block; /*float:left; */clear:left; font-size:10pt; display:block; margin-bottom:.6em; width:5em; }
#comment_form input { /*float:left;*/ clear:right; margin-bottom:.6em; width:200px; }
#comment_form textarea { clear:both; margin-bottom:.6em; width:428px; height:120px; }
#comment_form #comment_legend { float:left; color:#8fc3e9; font-size:8pt; }
#comment_form .button { float:right; width:70px; height:32px; }




#adsense {color:#5a86a8; position:absolute; right:0; margin-top:-60px; padding:10px; border:1px solid #5a86a8;}

#adsense legend {font:10pt 'trebuchet ms'; padding:0 5px;}
#adsense:hover {color:#ffd85c; border-color:#ffd85c;}

#adsense #sbi {float:left; margin:8px; width:250px; height:16px; border:1px solid #72abd6;}

#adsense #sbi {}



/* 
css hack originally from: 
http://www.positioniseverything.net/easyclearing.html 
*/
#content:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#content {display: inline-block;}

/* Hides from IE-mac \*/
* html #content {height: 1%;}
#content {display: block;}
/* End hide from IE-mac */