/*
Theme Name: Howard Simple
Version: 1.4
Theme URI: http://codesipper.com/portfolio/#howard-simple
Author: CodeSipper
Author URI: http://codesipper.com/
Description: Howard Simple is a fluid two column theme with a full width image header, page menu, and widget support.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, blue, two-columns, right-sidebar, flexible-width, flexible-header, full-width-template

Howard Simple WordPress theme, Copyright (C) 2013 codesipper.com 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Default Header Image taken by: CodeSipper;
Licensed under Creative Commons CC0 http://creativecommons.org/publicdomain/zero/1.0/
*/

@import url(reset.css);
@import url(post.css);

/* Base page styles
----------------------------------------------- */

body {
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: 16px;
	line-height: 160%;
	color: #888;
	background-color: #fff;
}

/* Link colors and hover styles */

a {
	text-decoration: none;
	color: #009DC4;
}

a:hover {
	text-decoration: underline;
}


/* Page Container DIV 
----------------------------------------------- */

#page { 
	max-width: 1460px;
	min-width: 650px;
}


/* Page Header DIV
----------------------------------------------- */

#header {
	position: relative;
	margin-bottom: 15px;
}

#header img {
	width: 100%;	
}

#logo {
	position: absolute;
	bottom: 35px;
	left: 5%;
}

#header #logo h1 {
	font-size: 40px;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 10px;
}

#header #logo p {
	font-size: 14px;
	font-weight: lighter;
	color: #fff;
	line-height: 115%;	
}

#header #logo h1 a {
	color: #fff;
	text-decoration: none;
}

/* Main Content DIV
----------------------------------------------- */

#content {
	width: 90%;
	margin: 0 5%;
}

#main {
	float: left;
	width: 70%;
}

.post {
	margin: 0 0 25px 0;
}

h2.post-title {
	font-size: 28px;
	color: #fff;
	margin: 10px 0 15px;
	background-color: #F3F3F3;
	border-left: 4px solid #C2C2C2;
	border-right: 4px solid #C2C2C2;
	padding: 5px 2px;
	line-height: 115%;
}

h2.post-title a, h4.post-title a {
	color: #6B6B6B;
	padding-left: 1%;
	border: 5px 0;
}

h2.post-title a:hover, h4.post-title a:hover {
	color: #B3B3B3;
	text-decoration: none;
}

h4.post-title {
	padding-right: 20%;
	font-size: 26px;
	margin-bottom: 15px;
	border-left: .15em solid #C2C2C2;
	border-right: .15em solid #C2C2C2;
}

.post-meta, #respond,
#respond a {
	font-size: 12px;
	color: #6B6B6B;
	margin-bottom: 5px;
}


.comment-number a:hover,
#respond a:hover, .post-meta a:hover {
	text-decoration: underline;
}

.page-titles {
	width: 50%;
	margin: 15px 0 40px;
	font-size: 20px;
	color: #009DC4;
	background-color: #F3F3F3;
	border-left: 4px solid #009DC4;
	border-right: 4px solid #009DC4;
	padding: 5px 10px;
}

#post-nav {
	overflow: hidden;
	margin-bottom: 35px;
}

.nav-next {
	float: right;
}

.nav-previous {
	float: left;
}

.nav-next a, .nav-previous a {
	font-size: 14px;
	padding: 2px 12px 2px 12px;
	display: block;
	background-color: #F3F3F3;
	border: 1px solid #C2C2C2;
	border-radius: 5px;
	text-decoration: none;
}

.nav-next a:hover, .nav-previous a:hover {
	color: #6B6B6B;
} 

/* Gallery override */
#gallery-1 .gallery-item {
	width: 20% !important;
}


/* Page Sidebar DIV
----------------------------------------------- */

#sidebar {
	float: right;
	width: 26%;
	margin-top: 70px;
	font-size: 12px;
	line-height: 150%;
}

/* General widget styles */
.widget {
	margin: 0 0 25px 0;
	clear: both;
}

.widget li {
	list-style: square;
	margin-left: 15px;
}

ul.children {
	padding-left: 20px;
}

li.page_item {
	border: none;
}

.widget h3 {
	font-size: 18px;
	color: #6B6B6B;
	background-color: #F3F3F3;
	padding: 7px 5px;
	margin-bottom: 15px;
	box-sizing: border-box;
}

.widget img {
	max-width: 100%;
	height: auto;
}

.widget select {
	max-width: 100%;
}

/* Nav widget */
#site-nav li {
	width: 100%;
	background-color: #C2C2C2;
	border-bottom: 1px solid #F3F3F3;
	list-style: none;
	margin-left: 0;
}

#site-nav li .children li {
	border: none;
}

#site-nav a {
	font-size: 13px;
	color: #000;
	padding: 10px 30px 10px 20px;
	display: block;
}

#site-nav a:hover {
	color: #fff;
	text-decoration: none;
}

/* Search widget */
#search-box {
	width: 100%;
 	border: 1px solid #CFCFCF;
 	padding: 8px 3px;
 	border-radius: 3px;
 	box-sizing: border-box;
}

#screen-reader-text {
	font-size: 14px;
}

#s {
	width: 95%;
	height: 18px;
	margin-top: 5px;
}

#searchsubmit {
	width: 30%;
	font-size: 16px;
	margin-top: 15px;
}

/* 404
----------------------------------------------- */

.entry-content a:hover {
	text-decoration: underline;
}

/* comment section
----------------------------------------------*/

.comments {
	margin-bottom: 25px;
}

.comment {
	margin-bottom: 20px;
}

.comments p {
	font-size: 15px;
	line-height: 1.8;
	margin-top: 10px;
}

.comment-body {
	margin-bottom: 25px;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 15px;
	border-radius: 10px;
}

.comment-author, .comment-meta {
	line-height: 1;
}

.comment-author img {
	float: left;
	width: 40px;
	height: 40px;
	margin-left: 5px;
	vertical-align: middle;
}

.children .children {
	margin-left: 20px;
}

.children .comment-body {
	background-color: rgba(128,128,128,0.1);
	margin-bottom: 25px;
	padding: 10px;
	border-radius: 10px;
}

.comment-meta {
	margin-bottom: 20px;
}

.comment-meta a {
	font-size: 11px;
	margin-left: 10px;
}

#respond, .reply, .comment-number {
	font-size: 14px;
}

#comments, #respond h3 {
	margin: 20px 0 15px 0;
	text-align: left;
	font-size: 18px;
	color: #009DC4;
}

.fn {
	margin-left: 10px;
	
}

#respond {
	margin-top: 30px;
	border-top: 1px solid #ccc;
}

#respond label {
	display: block;
}

#respond input[type=text], #respond textarea {
	padding: 3px;
	font-size: 16px;
}
	

/* Page Footer DIV
----------------------------------------------- */

#footer {
	background-color: #F3F3F3;
	padding: 20px 0;
	margin-right: .5%;
	margin-left: .5%;
	border-top: 1px solid #C2C2C2;
	clear: both;
}

#footer div {
	margin: 0 2%;
	position: relative;
}

#footer a {
	color: #6B6B6B;
	font-size: 13px;
	text-decoration: underline;
}

#footer img {
	position: absolute;
	top: -8px;
	padding-left: 5%;
}

#footer div p {
	position: absolute;
}

#footer a:hover {
	 color: #009DC4;
}

#footer span {
	float: right;
}

#footer #theme {
	text-align: center;
	font-size: 13px;
	color: #6B6B6B;
	margin-top: 20px;
}