/*-------------------------------------------*/
/* CSS Document - angelobeltran.com          */
/* Authored By: Angelo Beltran               */
/*              design@angelobeltran.com     */
/*-------------------------------------------*/

/* INITIALIZE ////////////////////////////////////////////////////////////////////*/
* { 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;
}
	
blockquote p { font-size: 1.3em; }

	
h1, h2, h3, h4 { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Sans-Serif;
	font-size: 3em;
	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; }

small {	
	font-size: 1.3em;
	display:block;
	margin-bottom:15px;
	color: #FFF;
}

/* TOOLBOX ////////////////////////////////////////////////////////////////////////*/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.quickOrange { color: #F36E21; }
.quickBold { font-weight: bold; }
.quickItalic { font-style: italic; }
.quickCaps { font-variant: small-caps; text-transform: uppercase; }
.quickList { list-style: none; margin-bottom: 10px; }
.divider { 
	height: 1px; 
	width: 560px; 
	margin: 40px 0 40px 0;
	border-top: 1px 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 /////////////////////////////////////////////////////////////////*/
/* padding-left: 23px instead of 22px to workaround shifting bug with webkit       */
	
#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;
}

#photos { 
	position: relative; 
	width: 916px;
	height: 300px;
	overflow: hidden;
	text-indent: -9999px;
	}
	#photos img {
		position: absolute;
		top: 0px;
		left: 0px;		
	}

#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; }

.photobox {
	margin: 15px 0 15px 0;
}

/* 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 ///////////////////////////////////////////////////////////////////*/
#latest_news_top {
	width: 583px;
	height: 31px;
	padding: 6px 0 0 15px;
	background: #444 url(../img/content_top.jpg) no-repeat left top;
	color: #F36E21;
}

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

.video { margin: 0 0 20px 0; }

/* SIDEBAR & SOCIAL MEDIA/////////////////////////////////////////////////////////*/
#sidebar, #sidebar_social {
	width: 275px;
	float: left;	
	margin: 0 0 20px 10px;	
	background: #444 url(../img/sidebar_bottom.gif) no-repeat left bottom;
	}
	#sidebar_social div.sidebar_inside { border: none; margin-bottom: 10px; }
	#sidebar_social div.sidebar_inside a { margin: 0 10px 0 0; }

#sidebar_header, #sidebar_social_header {
	width: 275px;
	height: 32px;
	background: url(../img/sidebar_top.jpg) no-repeat left top;
	padding: 6px 0 0 15px; 
	color: #F36E21;
}

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

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

#email_login {
	border: 1px solid #BFBFBF;
	-moz-border-radius: 12px;
	margin: 10px 0 20px 0;
	padding: 10px;
}
	#email_login label { font-weight: bold; }
	#email_login input {
		border: 1px solid #BFBFBF;
		color: #292929;
		height: 20px;
		line-height: 25px;
		padding: 3px 0 0 2px;
	}
		#email_login input.submit { border: none; width: 80px; height: 30px; }

/* 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;
}

/* PORTFOLIO ////////////////////////////////////////////////////////////////////*/
#h1_portfolio {
	background: url(../img/h1_portfolio.png) no-repeat;
	width: 173px;
	height: 25px;
	text-indent: -9999px;
	margin: 0 0 10px 0;
}

#web-design {
	background: url(../img/h2_web_design.png) no-repeat;
	width: 164px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

#logo-design {
	background: url(../img/h2_logo_design.png) no-repeat;
	width: 186px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

#print-design {
	background: url(../img/h2_print_design.png) no-repeat;
	width: 174px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

.fancy_border {
	border: 1px solid #2A2A2A;
	background-color: #222;
}

.featured_work, .thumbnail, .email_feature { padding: 4px; }

.featured_work {
	width: 873px;
	height: 260px;	
	margin-top: 10px;
	margin-bottom: 14px;
	margin-left: 16px;
}

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

.thumbnail, .email_feature {
	width: 273px;
	height: 162px;
	margin-top: 10px;
	margin-bottom: 14px;
	margin-left: 16px;
	float: left;	
	}
	.thumbnail:hover, .email_feature:hover { background-color: #F36E21; }		

.feedburner {
	margin: 0 auto;
	width: 468px;
}

/* ABOUT ME ////////////////////////////////////////////////////////////////////*/
#h1_about {
	background: url(../img/header_about.jpg) no-repeat;
	width: 916px;
	height: 300px;
	text-indent: -9999px;
	margin: 0 0 10px 0;
	}
	#h1_about a {
		display: block;
		width: 916px;
		height: 300px;
	}

#h2_testimonial {
	background: url(../img/h2_testimonial.png) no-repeat;
	width: 185px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

#about_portrait {	
	width: 352px;
	margin: 20px 20px 20px 0;
	float: left;
}

#about_info {
	width: 536px;
	float: left;
}

.testimonial { 
	padding: 8px;
	margin-top: 20px;
	background: #171717;
	border-right: 1px solid #5B5454;
	border-bottom: 1px solid #5B5454;
	float: left;
	}
	.testimonial:hover { background: #262626; }
	
.credit { float: right; }

/* CONTACT FORM ////////////////////////////////////////////////////////////////*/
#h1_contact {
	background: url(../img/h1_contact_us.png) no-repeat;
	width: 185px;
	height: 25px;
	text-indent: -9999px;
	margin: 0 0 10px 0;
}

#h2_web_brief {
	background: url(../img/h2_web_brief.png) no-repeat;
	width: 257px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

#h2_logo_brief {
	background: url(../img/h2_logo_brief.png) no-repeat;
	width: 279px;
	height: 21px;
	text-indent: -9999px;
	margin: 20px 0 10px 0;
}

#contact_form {
	margin-right: 20px;
	padding: 10px;
	width: 420px;
	float: left;
}

#contact_intro { 
	margin: 10px 0 20px 20px; 
}

#contact_info {
	width: 450px;
	float: left;	
}

#contact_email {
	padding: 4px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;	
}
	#contact_email:hover { 
		cursor: pointer;
		background-color: #F36E21; 
	}

.download_btn {
	margin: 5px 0 20px 0;
}

/* EMAIL ////////////////////////////////////////////////////////////////////////*/
#h1_email_marketing {
	background: url(../img/h1_email_marketing.png) no-repeat;
	width: 277px;
	height: 25px;
	text-indent: -9999px;
	margin: 0 0 10px 0;
}

.email_info { 
	margin: 10px 0 20px 20px; 
}

.email_feature {
	margin: 0 10px 10px 0;	
}