/*   
Theme Name: WP Orange
Description: WordPress Theme for angelobeltran.com
Author: Angelo Beltran
Author URI: http://www.angelobeltran.com
Version: 1.0
*/

* { margin: 0; padding: 0; }

html { background-color: #333; }

body { 
	font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Verdana, Sans-Serif;	
	background: #444; 
	height: 100%;		
	background: url(img/mid_content_bg.png) repeat-y center;
}

p { 
	font-size: 1.5em; 
	line-height: 1.2em; 
	margin-bottom: 1em; 
	color: #FFF;
}

code { 
	font-family: "Courier New", Courier, monospace;
	color: #006000; font-size: 13px; 
}

pre {
	font-size: 13px;
	color: #006000;
	background-color: #F2F2F2;
	border: 1px solid #D8DFEA;
	margin: 18px 0;
	padding: 7px 0 7px 10px;
}
	
h1, h2, h3, h4 { 
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 2em;
	color: #F36E21;		
}		
	h2 { font-size: 1.8em; margin-bottom: 5px; }		
	h3, h4 { font-size: 1.5em; }		
	
ul { list-style: none inside; font-size: 1.5em; color: #FFF; }

a { outline:none; text-decoration: none; color: #F36E21; }
a img {border:none;}	
a:hover { text-decoration: underline; color: #f0b898; }

form small { font-size: 1em; } 
form p label { margin: 0 0 0 10px; }

/* TOOLBOX ////////////////////////////////////////////////////////////////////////*/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.quickOrange { color: #F36E21; }
.quickBold { font-weight: bold; }
.quickItalic { font-style: italic; }
.quickList { list-style: none; margin-bottom: 10px; }
.divider { 
	width: 568px; 
	margin: 40px 0 40px 0;
	border-top: 5px solid #CCC;
}
.sup { position: relative; bottom: 0.5em; font-size: 70%; }
.sub { position: relative; bottom: -0.5em; font-size: 70%; }
.amp {
   font-family: "Palatino", "Book Antiqua", serif;
   font-size: 110%;
   font-style: italic;
}
/*-- The Alsett Clearing Method --*/
.clearfix:after {       
    content: ".";       
    display: block;        
    height: 0;        
    clear: both;        
    visibility: hidden;
}
	
.clearfix {display: inline-block;}        
* html .clearfix {height: 1%;}        
.clearfix {display: block;}        
/*-- end Alsett Clearing Method --*/

/* PAGE STRUCTURE /////////////////////////////////////////////////////////////////*/
	
#page-wrap { 
	background: url(img/top_content_bg.png) no-repeat center top;
	width: 916px;
	margin: 0 auto;
	padding-top: 30px;
	padding-left: 23px;
	padding-right: 22px;
	position: relative;
	top: -55px;
}

#gallery-wrap {
	width: 916px;	
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

#content-wrap {
	width: 916px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#main-content {
	width: 610px;
	float: left;
	padding-left: 10px;
}

#im_angelo {
	width: 530px;
	height: 56px;
	margin: 10px 0 0 5px;
	background: url(img/im_angelo.png) no-repeat;
	text-indent: -9999px;
	float: left;
}

#i_love {
	width: 384px;
	height: 137px;
	background: url(img/i_love.png) no-repeat;
	text-indent: -9999px;
	float: left;
}

#hire_me {
	background: url(img/hire_me.png) no-repeat bottom;
	height: 137px;
	width: 146px;
	text-indent: -9999px;
	float: left;
}
	#hire_me:hover { background-position: top; }

/* NAVIGATION /////////////////////////////////////////////////////////////////////*/
#nav ul {	
	width: 405px;
	height: 113px;
	float: right;	
	}
	#nav ul li {
		display: inline;
		}
		#nav ul li a { 
			display: block;
			height: 113px;
			text-indent: -9999px;		
			float: left;
		}
		#nav ul li.blog a  {
			width: 97px;
			background: url(img/blog_btn.jpg) bottom no-repeat;				
		}		
		#nav ul li.portfolio a  {
			width: 115px;
			background: url(img/portfolio_btn.jpg) bottom no-repeat;				
		}
		#nav ul li.about a  {
			width: 96px;
			background: url(img/about_btn.jpg) bottom no-repeat;				
		}
		#nav ul li.contact a  {
			width: 97px;
			background: url(img/contact_btn.jpg) bottom no-repeat;				
		}
		#nav ul li a:hover {
			background-position: top;
		}

body#blog #nav ul li.blog a, 
body#portfolio #nav ul li.portfolio a,
body#about #nav ul li.about a,  
body#contact #nav ul li.contact a { background-position: top; }

/* HEADER /////////////////////////////////////////////////////////////////////////*/
#header {
	background: #202020 url(img/header_bg.jpg) repeat-x;
	height: 179px;
	width: 100%;
}

#header-content {
	margin: 0 auto;
	width: 960px;
}

#header-logo a {
	background: url(img/header_logo_btn.jpg) bottom no-repeat;
	height: 113px;
	width: 446px;
	text-indent: -9999px;
	float: left;
}
	#header-logo a:hover { background-position: top; }		

/* LATEST NEWS & BLOG /////////////////////////////////////////////////////////////*/
#featured_posts_wrap {	
	border: 1px solid #ccc;
	padding: 10px;
	margin: 0 0 20px 0;	
}

#featured_posts { 
	position: relative; 
	width: 548px;
	height: 308px;
	}
	#featured_posts img {
		position: absolute;
		top: 0px;
		left: 0px;
		overflow: hidden;
	}

.panel-overlay { padding: 10px; }

#latest_news_top, #blog_top {
	width: 583px;
	height: 31px;
	padding: 6px 0 0 15px;
	background: #444 url(img/content_top.jpg) no-repeat left top;
	color: #F36E21;
}
#blog_top { 
	background: #FFF url(img/content_blog_top.png) no-repeat left top;
	text-indent: -9999px;
}

#latest_news, #blog_content {
	width: 568px;
	background: #444 url(img/content_bottom.gif) no-repeat left bottom;
	margin-bottom: 20px;
	padding: 5px 15px 20px 15px;
	float: left;
}

#blog_content { background: #FFF url(img/content_blog_bottom2.png) no-repeat left bottom; }
#blog_content h1 { font-family: Verdana, Arial, sans-serif; font-size: 2em; margin: 0 0 5px 0; }
#blog_content h1 a { color: #000; }
#blog_content h1 a:hover { color: #F36E21; text-decoration: none; }
#blog_content p { color: #000; }	
#blog_content .panel-overlay p { color: #fff; }	

.metadata { 
	margin: 0 0 15px 0;
	font-size: 14px;	
}

.adbox { padding: 20px 50px; float: left; }

.photobox { 
	border: 1px solid #CCC;
	padding: 10px;
	margin-bottom: 20px;
	float: left;
}

.amazonbox iframe { margin: 0 10px 20px 10px; float: left; }
.amazonone { float: left; margin: 30px; }

#submit, .more-link {
	background: #F36E21 url(img/button-shine.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;	
	color: #fff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	line-height: 1;
	-moz-border-radius: .5em;		
	-webkit-border-radius: .5em;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0,0.25);
	position: relative;
	cursor: pointer;
	}
	#submit:hover, .more-link:hover { 
		background-color: #111;
		color: #fff; 
		text-decoration: none;
	}
	
input#submit {
	border: none;
	margin: 0 0 20px 0;
	height: 2em;
}

ul.related_post li { 
	border: 1px solid #CCC;
	padding: 10px;
	margin-bottom: 20px;
	float: left;
}

input {
	background: #E5E5E5;
	border: 1px solid #BFBFBF;
	color: #292929;
	height: 21px;
	line-height: 25px;
	padding: 3px 0 0 2px;
	float: left;
}

input#search_submit {
	height: 26px;
	background: url(img/read_more_OFF.png) repeat-x;
	padding: 0 15px 5px 15px;	
	margin: 0 0 20px 0;
	color: #FFF;
	}
	input#search_submit:hover { 
		background: url(img/read_more_ON.png) repeat-x; 
		text-decoration: none; 
		cursor: pointer;
	}

input#subscribe { margin: 0 10px 0 0; }

#author_bio {
	float: left;
	width: 548px;
	margin: 0 0 20px 0;
	padding: 10px;
	border: 1px solid #CCC;
	background-color: #262626;
}
	#author_bio h3 { margin: 5px 0 5px 0; }
	#author_bio p { color: #FFF; }
	
a#download {
	width: 568px;
	height: 104px;
	background: url(img/download_tutorial_files.png) no-repeat;
	text-indent: -9999px;
	float: left;
	margin: 0 0 20px 0;
}
	
/* COMMENTS ////////////////////////////////////////////////////////////////*/
#comments_template { clear: both;	}
#comments_template li { padding: 10px; clear: both; }

.comments { list-style-type: none; }
.the_comment {
	border: 1px solid #CCC;	
	-moz-border-radius: 12px;
	float: left;
	width: 440px;
	padding: 20px;
}
.the_author {
	-moz-border-radius: 5px;
	background-color: #262626;
	padding: 5px 0 5px 10px;
	margin: 0 0 20px 0;
}
.the_author ul li small { margin: 0; }

.comment_metadata { color: #FFF; }

.avatar { 
	float: left;
	margin: 0 10px 0 0;
	padding: 5px;
}
.avatar:hover { background-color: #F36E21; } 

/* SIDEBAR ///////////////////////////////////////////////////////////////////////*/
#sidebar {
	width: 275px;
	float: left;	
	margin: 0 0 0 10px;	
	background: #444 url(img/sidebar_bottom.gif) no-repeat left bottom;
}
	
#sidebar_header {
	width: 275px;
	height: 32px;
	background: url(img/sidebar_top.jpg) no-repeat left top;
	padding: 6px 0 0 15px; 
	color: #F36E21;
}

#welcome {
	margin: 0 0 20px 0;
	}
	#welcome p { font-size: 1.2em; }
	#welcome img { 
		background-color: #F36E21;
	 	float: left;
		padding: 4px;
		margin: 0 5px 0 0;
	}


.sidebar_inside { 
	width: 245px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border-bottom: 1px solid #5A5A5A;
}

#sidebar_logo, #sidebar_website {	
	width: 242px;
	height: 87px;
	background: url(img/sidebar_logo.jpg) no-repeat bottom;
	text-indent: -9999px;
	margin: 5px 0 10px 0;
	float: left;	
}

#sidebar_website { background: url(img/sidebar_website.jpg) no-repeat bottom; }
#sidebar_logo:hover, #sidebar_website:hover { background-position: top; }

/* BLOG SIDEBAR, ICONS///////////////////////////////////////////////////////////*/
#blog_sidebar {
	width: 270px;
	float: right;
	padding: 10px 0 10px 20px;
}	
	#blog_sidebar ul li { font-size: 14px; }
	#blog_sidebar ul h3.whatsnew_header, #blog_sidebar ul h3.archives_header, #blog_sidebar ul h3.categories_header,
	#recent_posts_widget h3, #archives_widget h3, #categories_widget h3 {
		width: 	270px;
		height: 55px;
		background: #F36E21 url(img/whatsnew.jpg) no-repeat;
		text-indent: -9999px;
		margin: 20px 0 10px 0;
	}
		#blog_sidebar ul h3.archives_header, #archives_widget h3 { background: #F36E21 url(img/archives.jpg) no-repeat; }
		#blog_sidebar ul h3.categories_header, #categories_widget h3 { background: #F36E21 url(img/categories.jpg) no-repeat; }		
		
#recent_posts, #archives, #categories { margin: 0 0 50px 0; }		
	
#nav_icons ul {
	height: 56px;	
	margin: 0 0 20px 0;
}
	#nav_icons ul li {
		display: inline;	
		float: left;
		margin: 0 15px 0 0;
	}
		#nav_icons ul li a {
			display: block;
			width: 56px;
			height: 56px;
			text-indent: -9999px;									
		}
		#nav_icons ul li.twitter a {
			background: url(img/twitter.png) no-repeat;				
		}
		#nav_icons ul li.rss a {
			background: url(img/rss.png) no-repeat;	
		}
		#nav_icons ul li.facebook a {
			background: url(img/facebook.png) no-repeat;	
		}

#search { 
	width: 271px;
	height: 47px;
	background: url(img/search_bg.png) no-repeat;
	margin: 0 0 20px 0; 
	float: left;
}
	
	
#searchform { 
	float: right; 
	margin: 10px 20px 0 0;
	}
	#searchform input#s { 
		border: 0;
		background: #333; 
		font-size: 1.2em;
		color: #fff;
		width: 200px; 		
	}

a.ad_big { 
	border: 1px solid #CCC;
	display: block;
	width: 184px;
	height: 138px;
	background-color: #333;
	margin-bottom: 20px;
	float: left;
	padding-top: 120px;
	padding-left: 74px;
	font-size: 1.5em;

}
a.ad_big:hover { background-color: #262626; }


#ad_block a, iframe {
	display: block;
	margin: 0 10px 10px 0;
	float: left;
}
.ads_small {
	border: 1px solid #CCC;	
	width: 107px;
	height: 67px;
	background-color: #333;	
	padding-top: 56px;
	padding-left: 16px; 	
	font-size: 1.3em;
}
a.ads_small:hover { background-color: #262626; }

#recent_posts_widget ul li, #categories_widget ul li, #archives_widget ul li {
	background: #171717;
	border-right: 1px solid #5b5454;
	border-bottom: 1px solid #5b5454;
	padding: 8px 5px;
	margin: 0 0 5px 0;
	}
	#recent_posts_widget ul li:hover, #categories_widget ul li:hover, #archives_widget ul li:hover  { 
		background: #262626;
		color: #FFF;
	}

	
/* FOOTER ///////////////////////////////////////////////////////////////////////*/
#footer {
	background: #202020 url(img/footer_bg.png) repeat-x left top;
	height: 400px;
	width: 100%;
	padding: 40px 15px 60px 15px;
}
	#footer	ul { margin-left: 20px; }

#footer_content {
	margin: 0 auto;
	width: 960px;
}

#footer_twitter {	
	width: 443px;
	height: 318px;
	border: 0px dashed #FFF;
	margin-right: 60px;
	float: left;
	background: url(img/twitter_balloon.png) no-repeat top;
}

ul#twitter_update_list { 
	list-style: none; 
	font-size: 1.5em;	
	margin-bottom: 30px;
}
ul#twitter_update_list li { 
	margin-bottom: 10px;
	padding: 10px;
	color: #f0b898;
}

#footer_nav {
	width: 140px;	
	margin-right: 40px;
	float: left;
	}
	#footer_nav ul {
		list-style-type: none;
		margin: 10px 0 20px 0;
		}
		#footer_nav ul li {
			
			}
			#footer_nav ul li a {
				padding: 5px;
				border-bottom: 1px dotted #ccc;
				font-size: .8em;
				display: block;	
				}
				#footer_nav ul li a:hover {
					text-decoration: none;
					background: #F36E21;
					color: #fff;
				}

#footer_ab_logo {
	width: 275px;
	float: left;
	margin: 0 auto;
}

.copyright { 
	font-size: 1.1em; 
	text-align: center;
	margin: 20px 0 0 0;
}