/*============================================================
 
 www.drewbarontini.com

 Online Blog & Portfolio of Drew Barontini -- Version 0.2
 @author  -- Drew Barontini
 @version -- 0.2

============================================================*/

/*
 Import Reset & IE Stylesheet(s)
*/
@import url(reset.css);
/*
 PNG Fix for IE
*/
img, div { behavior: url(../js/iepngfix.htc) }

/*============================================================
 Base
============================================================*/
body {
	background: #FFF url(../images/bg.gif) repeat-x top center;
	font: 14px/22px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Helvetica, Arial, sans-serif;
	color: #666;
}

/* Headings
============================================================*/
h1, h2, h3 { 
	padding: 20px 0; 
	color: #5C9BC2; 
}

h1 {
	font: normal 40px/40px Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
}

h2 {
	font: normal 30px/30px Arial, Helvetica, sans-serif;
}

h3 {
	font: normal 25px/25px Arial, Helvetica, sans-serif;
}

h4 {
	font: 15px/20px Helvetica, Arial, sans-serif;
	color: #666;
	letter-spacing: 4px;
	text-transform: uppercase;
	padding-top: 20px;
}

/* Paragraphs
============================================================*/
p {
	text-align: justify;
	padding: 10px 0;
}


/* Links
============================================================*/
a {
	color: #5C9BC2;
	text-decoration: none;
	outline: none; /* For Firefox */
}

a:hover { 
	color: #999; 
}

.slide_link {
	padding-left: 5px;
}

/* Forms
============================================================*/
form {
	width: 400px;
}

form p {
	padding: 5px 0;
}

form label {
	float: left;
}

form input {
	width: 350px;
	padding: 5px;
	border: 1px solid #CCC;
	color: #666;
	font-size: 14px;
}

form textarea {
	width: 350px;
	padding: 5px;
	border: 1px solid #CCC;
	color: #666;
}

form .submit {
	width: auto;
	margin-right: 38px;
	float: right;
	display: inline;
	background: #5C9BC2;
	border: 1px solid #5C9BC2;
	color: #FFF;
}

form .submit:hover {
	background: #CCC;
	border: 1px solid #CCC;
	color: #666;
}

#required {
	color: #ff6a65;
}

#sub_message {
	padding-left: 5px;
	font-size: 10px;
}

/* Error & Success Messages
============================================================*/
.error, .success {
	padding: 5px 0 5px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.error {
	margin-bottom: 5px; 
	background: #FBE3E4;
	color: #8a1f11;
}

.success {
	background: #E6EFC2;
	color: #264409;
	list-style: none;
}

/* Emphasis
============================================================*/
strong {
	font-weight: bold;
}

em {
	border-bottom: 1px solid #DDD;
}

small {
	font-size: 75%;
}

/*============================================================
 Structure (Layout) & Globals Library
============================================================*/
#wrapper {
	width: 1000px;
	margin: 0 auto;
	text-align: left; /* For Older Browsers */
}

/* Global Library
============================================================*/
.clear 	{ clear: both; }

.push 	{ padding: 10px 0; }

/*============================================================
 Header
============================================================*/
#header {
	width: 1000px;
	height: 429px;
	background: url(../images/header.png) no-repeat top center;
	text-indent: -9999px;
	overflow: hidden;
}

/*============================================================
 Nav
============================================================*/
#nav {
	float: right;
}

#nav li {
	display: inline;
}

#nav li a {
	width: 107px;
	height: 51px;
	margin-right: 5px;
	padding: 0;
	float: left;
	text-indent: -9999px;
}

/* Standard
============================================================*/
#nav li #nav_home{
	background: url(../images/nav_home.gif) 0 0;
}

#nav li #nav_about {
	background: url(../images/nav_about.gif) 0 0;
}

#nav li #nav_work {
	background: url(../images/nav_work.gif) 0 0;
}

#nav li #nav_blog{
	background: url(../images/nav_blog.gif) 0 0;
}

#nav li #nav_contact {
	background: url(../images/nav_contact.gif) 0 0;
}

/* Hover
============================================================*/
#nav li #nav_home:hover {
	background: url(../images/nav_home.gif) 0 -51px;
}

#nav li #nav_about:hover {
	background: url(../images/nav_about.gif) 0 -51px;
}

#nav li #nav_work:hover {
	background: url(../images/nav_work.gif) 0 -51px;
}

#nav li #nav_blog:hover {
	background: url(../images/nav_blog.gif) 0 -51px;
}

#nav li #nav_contact:hover {
	background: url(../images/nav_contact.gif) 0 -51px;
}

/* Active
============================================================*/
#nav li.home_active #nav_home {
	background: url(../images/nav_home.gif) 0 -102px;
}

#nav li.about_active #nav_about {
	background: url(../images/nav_about.gif) 0 -102px;
}

#nav li.work_active #nav_work {
	background: url(../images/nav_work.gif) 0 -102px;
}

#nav li.blog_active #nav_blog {
	background: url(../images/nav_blog.gif) 0 -102px;
}

#nav li.contact_active #nav_contact {
	background: url(../images/nav_contact.gif) 0 -102px;
}

/*============================================================
 Main Content
============================================================*/
#main_content {
	width: 1000px;
	margin: 70px auto;
}

/* Tagline
============================================================*/
.tagline_group {
	width: 1000px;
	height: 87px;
	padding-bottom: 30px;
	text-indent: -9999px;
	overflow: hidden;
}

#home_tagline {
	background: url(../images/home_tagline.gif) no-repeat top center;
}

#recent_tagline {
	background: url(../images/recent_tagline.gif) no-repeat top center;
}

#about_tagline {
	background: url(../images/about_tagline.gif) no-repeat top center;
}

#work_tagline {
	background: url(../images/work_tagline.gif) no-repeat top center;
}

#blog_tagline {
	background: url(../images/blog_tagline.gif) no-repeat top center;
}

#archive_tagline {
	background: url(../images/archive_tagline.gif) no-repeat top center;
}

#contact_tagline {
	background: url(../images/contact_tagline.gif) no-repeat top center;
}

#error_tagline {
	background: url(../images/404_tagline.gif) no-repeat top center;
}

/*============================================================
 Home
============================================================*/
#home #main_content h4 {
	margin-bottom: 20px;
}

.social_module {
	padding-bottom: 30px;
}

/* Flickr
============================================================*/
#flickr {
	width: 540px;
	margin: 0 auto;
	overflow: hidden;
}

#flickr a {
	padding: 0;
	border none;
}

#flickr a:hover {
	padding: 0;
	border none;
}

#flickr img {
	margin: 20px 20px 0 0;
	float: left;
	border: 6px solid #CCC;
}

#flickr img:hover {
	border: 6px solid #5C9BC2;
}

/* Twitter
============================================================*/
#twitter_update_list li {
	margin-bottom: 10px;
	padding: 10px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#twitter_update_list li a {
	background: none;
	color: #5C9BC2;
}

#twitter_update_list li a:hover {
	color: #666;
}

/* Recent Posts
============================================================*/
#recent_posts li {
	height: 20px;
	margin-bottom: 10px;
	padding: 10px;
	line-height: 20px;
	background: #5C9BC2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#recent_posts li a {
	padding: 10px 10px 10px 5px;
	background: none;
	font-size: 18px;
	color: #FFF;
}

#recent_posts li a:hover {
	color: #f2f2f2;
}

/*============================================================
 About
============================================================*/
#about #main_content h2 {
	padding: 30px 0 10px;
}

#about #main_content p {
	padding-top: 0;
}

#services {
	width: 330px;
	text-indent: 10px;
}

#services li {
	height: 15px;
	margin-bottom: 5px;
	padding: 10px;
	line-height: 15px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-weight: bold;
}

#tools {
	width: 230px;
	text-indent: 10px;
}

#tools li {
	height: 15px;
	margin-bottom: 5px;
	padding: 10px;
	line-height: 15px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#extra_tools {
	width: 430px;
	text-indent: 10px;
}

#extra_tools li {
	height: 15px;
	margin-bottom: 5px;
	padding: 10px;
	line-height: 15px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/*============================================================
 Work
============================================================*/
.work_category {
	margin-bottom: 20px;
	padding: 30px 0 5px;
	border-bottom: 1px solid #CCC;
}

.project_container {
	margin: 5px auto;
	text-align: center;
}

.project_container img {
	border: 10px solid #f2f2f2;
}

.project_responsibilities {
	text-indent: 10px;
	font-weight: bold;
}

.project_responsibilities li {
	height: 15px;
	margin: 5px 0;
	padding: 10px;
	line-height: 15px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/*============================================================
 Blog
============================================================*/

/* RSS
============================================================*/
#rss a img {
	position: relative;
	top: -93px;
	margin-left: 100px;
	z-index: 0;
	float: left;
	display: inline;
}

#rss a img:hover {
	width: 40px;
	height: 40px;
	background: url(../images/rss.png) no-repeat;
}

/* Post
============================================================*/
.post {
	margin-bottom: 100px;
	padding-bottom: 10px;
	border-bottom: 1px solid #DDD;
}

.post h1 {
	padding-bottom: 5px;
}

.post h1 a {
	margin: 0;
	color: #5C9BC2;
	text-decoration: none;
}

.post h1 a:hover {
	color: #666;
}

.post_details {
	padding: 0;
	margin-bottom: 20px;
	font-size: 12px;
	font-style: italic;
}

.post h2 {
	padding-bottom: 5px;
	border-bottom: 1px solid #DDD;
	color: #666;
}

.post h4 {
	color: #5C9BC2;
}

.post p img {
	border: 10px solid #f2f2f2;
}

.post p a:hover img {
	border-color: #5C9BC2;
}

pre {
	width: 500px;
	padding: 10px;
	display: block;
	background: #f2f2f2;
	font-family: Monaco, monospace;
}

#archive_link {
	margin-left: 10px;
	font-size: 14px;
}

/* Single Post
============================================================*/
#single_post {
	margin-bottom: 5px;
}

#return {
	float: left;
}

#edit {
	float: right;
}

/* Comments
============================================================*/
#num_comments {
	margin: 50px 0 10px;
}

#comment_header {
	margin-top: 70px;
	padding-bottom: 5px;
}

#comment_subheader {
	padding: 0 0 5px;
}

.comment {
	width: 1000px;
	margin-bottom: 20px;
}

#gravatar {
	width: 100px;
	margin-right: 20px;
	float: left;
}

#comment_bubble {
	position: absolute;
	left: -25px;
}

#comment_body {
	width: 840px;
	margin-bottom: 20px;
	padding: 5px;
	position: relative;
	float: right;
	background: #f2f2f2;
}

#comment_body h2 {
	padding: 5px 0 0 5px;
}

#comment_body h2 a {
	color: #5C9BC2;
}

#comment_body h2 a:hover {
	color: #666;
}

#comment_date {
	padding: 0;
	color: #666;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
}

#comment_body p {
	padding: 5px 10px;
	font-size: 12px;
}

/* Comment Form
============================================================*/
#comment_form_container {
	padding: 10px 15px;
	background: #f2f2f2;
}

#comment_form p {
	padding: 5px 0;
}

#comment_form label {
	width: 80px;
	padding: 3px 0;
}

#comment_form input {
	width: 270px;
}

#comment_form .submit {
	width: auto;
}

/*============================================================
 Archive
============================================================*/
#archive_list {
	padding: 10px 0;
}

#archive_list a {
	background: none;
}

#archive_list li {
	padding: 15px;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 20px;
}

#archive_list li a {
	padding: 20px 20px 20px 5px;
	color: #666;
}

#archive_list li a:hover {
	color: #5C9BC2;
}

/*============================================================
 Contact
============================================================*/
#contact_form {
	margin-top: 30px;
}

/*============================================================
 Footer
============================================================*/
#footer {
	margin-top: 100px;
	padding: 40px 20px;
}

#footer_container {
	width: 1000px;
	margin: 0 auto;
	border-top: 1px solid #CCC;
}

#footer p {
	float: left;
	font-size: 12px;
}

#footer_nav {
	margin-top: 10px;
	float: right;
}

#footer_nav li {
	margin-right: 10px;
	display: inline;
}

#footer_nav li a {
	color: #666;
	font-size: 12px;
}

#footer_nav li a:hover {
	border-bottom: 1px solid #CCC;
}

/*============================================================
 End CSS Document
============================================================*/