/*
Theme Name: Asteroid
Theme URI: http://ronangelo.com/asteroid/
Description: Asteroid is a simple, clean and responsive theme. It incorporates various widget areas that make management of banners and ads a lot easier, especially for ad-supported sites.
Author: ronangelo
Author URI: http://ronangelo.com/
Version: 1.0.1
Tags: black, white, gray, two-columns, right-sidebar, fixed-width, custom-header, custom-background, featured-images, custom-menu, custom-colors, theme-options, threaded-comments, sticky-post, editor-style, full-width-template, threaded-comments

License: GNU General Public License, Version 3 or later
License URI: http://www.gnu.org/licenses/gpl.html
--------------------------------------------- */

/* RESET */
html,body,h1,h2,h3,h4,h5,h6,p,img,ul,ol,li,form,fieldset {
	border: 0 none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

body {
	color: #333;
	font: normal 13px/20px arial, sans-serif;
	position: relative;
	background-attachment: fixed;
}

h1 {font-size:28px;}
h2 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:18px;}
h5 {font-size:14px;}
h6 {font-size:12px;}
h1,h2,h3,h4,h5,h6{clear: both;}

p {font: normal 13px/20px arial, sans-serif;}

a {
	color: #0E4D7A;
	text-decoration: none;
}
a:hover {color: #f00;}

a, textarea, input, button {
	-moz-transition: all 0.14s ease-out; 
	-webkit-transition: all 0.14s ease-out; 
	-o-transition: all 0.14s ease-out;
	transition: all 0.14s ease-out;
}


/* Containers */

#container {
	width:960px;
	background: #FFF; 
	border: 8px solid #000;
	margin: 20px auto 30px;
	max-width: 96%;
	box-shadow: 0 0 10px #000;
}

#header {
	height: 120px;
	overflow: hidden;
}

#header-info-wrap {
    float: left;
	position: absolute;
	margin-bottom: 10px;
}

#header-info-wrap hgroup {
	margin-top: 14px;
	margin-left: 10px
}

#site-title {
	font-size:44px;  
	text-shadow: 0 2px 2px #000;
}
#site-title a {color: #FFA900; line-height: 1;}
#site-title a:hover {color: #F00;}

#site-description {
    font-size: 16px;
    font-weight: bold;
	margin-top: 6px;
}


/* The Navigation */

#nav {
	background: #333;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	float: left;
	width: 100%;
	z-index: 20;
}

/* menu items */
#nav .menu li {
	float:left;
	position: relative;
	border-right: 1px solid #000;
}
/* menu root items text */	
#nav .menu > li > a {
	min-width: 70px; 
	text-align: center;
}
#nav .menu  li  a {
	display: block;
	padding: 9px 14px;
	font: bold 16px arial, sans-serif;
	color: #FFF;
	text-shadow: 0 2px 2px #000;
}
#nav .menu  li  a:hover {
	background: #FFF;
	color: #000;
	text-shadow:  none;
}

#nav .sub-menu {
	width: 160px;
	background: #333;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	position: absolute;
	z-index: 30;
	display: none;	/* hide sub-menu initially */
}
#nav .sub-menu li a {
	width: 140px;
	float: left;
	padding: 9px 10px;
	border-top: 1px solid #000;
	text-shadow: 0 1px 1px #000;
	line-height: 26px;
	font: 13px arial, sans-serif;
}
#nav .sub-menu li a:hover {
	background: #FFF;
	color: #000;
	text-shadow:  none;
}

/* submenu border allowance */
#nav .menu > li:hover > ul, #nav .menu > ul > li:hover > ul {left: -1px;} 

/* Display Sub-Menus */
#nav li:hover > ul { display: inline;}	

/* Highlight Selected Items */
#nav .current-menu-item > a,
#nav .current-menu-ancestor > a,
#nav .current_page_ancestor > a,
#nav .current_page_item  > a {
	background: #FF1818;
    color: #FFF;
    text-shadow: 0 2px 2px #000;	
}

/* Default WP Menu - Pages */
#nav li > ul > li:hover .children {top: -1px;}
#nav .menu > ul > .page_item {
	border-top: 1px solid #222;
	border-bottom: 1px solid #000;
}
#nav .children {
	width: 160px;
	background: #333;
	position: absolute;
	z-index: 30;
	display: none;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
#nav .children li {border-top: 1px solid #000;}
#nav .children li a {
	float: left;
	width: 140px;
	padding: 9px 10px;
}

/* menu search form */
#nav-search {
	display: inline-block;
	float: right;
	margin-top: 6px;
	margin-right: 30px;
	overflow: hidden;
}
#nav-search #searchinput{
	display: inline-block;
    float: left;
    margin-top: 2px;
	margin-right: 2px;
	color: #666;
}
#nav-search #searchsubmit {
	display: inline-block;
	float: left;
    background: url("images/find.png") no-repeat transparent;
    border: none;   
    height: 26px;
	width: 26px;
	cursor: pointer;	
}


/* -------- CONTENT -------- */
#content {
	background: #FFF; 
	overflow: hidden;
	width: 100%;
}

#main {
	display: table-cell; 
	vertical-align: top;
	width: 620px;
	padding: 0 10px 20px;
	border-right: 1px solid #555;
}

#main-nosidebar {
	padding: 0 10px 20px;
}

#sidebar {
	display: table-cell; 
	vertical-align: top;
    width: 310px;
    padding: 0 5px 20px;
}

#bottom-navi {
    border-top: 1px solid #AAA;
    padding-top: 16px;
	padding-bottom: 6px;
	margin-top: 16px;
}

#footer {
	background: url("images/bg-footer.png") #333;
	border-top: 1px solid #000;
}

#footer-area {
	overflow: hidden;
	min-height: 20px; 
	box-shadow: 0 1px 2px #000 inset;
}

#footer-bottom {
	background: #000; 
	min-height: 18px; 
	padding: 8px; 
}
#footer-links {
	float: left; 
	color: #CCC;
}
#theme-credit {
    color: #BBBBBB;
    float: right;
    font: bold 10px verdana,sans-serif;
    margin-top: 4px;
    text-transform: uppercase;
}


/* Widgets */

#widgets-wrap-sidebar  a {color: #0E4D7A;}
#widgets-wrap-sidebar  a:hover {color: #FF0000;}
.widget-sidebar {margin-top: 20px; margin-bottom: 20px; position: relative;}
.widget-sidebar ul {padding: 0 14px; list-style: none;}
.widget-sidebar li {border-bottom: 1px solid #CFCFCF;padding: 4px 0 2px;}
.widget-sidebar h4 {background:#CCC; padding: 3px 0 3px 8px; margin-bottom: 4px; font-size: 16px; border:1px solid #999;}
.widget-sidebar img {
    display: block;
    margin: 10px auto !important;
}
#widgets-wrap-footer {
	overflow: hidden;
	padding-bottom: 10px;
	color: #FFF;
}
.widget-footer {	
    float: left;
    margin-top: 10px;
	margin-left: 8px;
	margin-bottom: 6px;
	width: 230px;
}
.widget-footer h4 {	
	background: #222;
    border: 1px solid #000;
    border-radius: 6px;
    color: #FFF;
    font-size: 16px;
    padding: 3px 6px 3px 8px;
    text-shadow: 2px 2px 2px #000;
}
.widget-footer ul {padding: 4px 8px 6px;}
.widget-footer li {padding: 2px 0 2px;}
.widget-footer a {color: #FC9A08; text-shadow: 2px 2px 2px #000;}


/* Custom Widgets */

#widgets-wrap-header {
	float: right; 
	margin-top: 10px; 
	margin-right: 10px;
}

#widgets-wrap-below-menu {
	background: url("images/bg-footer.png");
	padding: 4px 4px 0;
	clear: both;
	box-shadow: 0 -1px 2px #000 inset;
	overflow: hidden;
}
.widget-below-menu {display: inline-block;}

#widgets-wrap-before-post, #widgets-wrap-before-page {
	overflow: hidden;
	border-top: 1px solid #999;
	margin: 10px auto 0;
    padding-top: 10px;
}
#widgets-wrap-before-post-content, #widgets-wrap-before-page-content {
	overflow: hidden;
	margin: 0 6px 6px;
}
#widgets-wrap-after-post-content, #widgets-wrap-after-page-content {
	overflow: hidden;
	margin: 6px;
}
#widgets-wrap-after-post, #widgets-wrap-after-page {
	overflow: hidden;
	border-top: 1px solid #999;
    padding-top: 10px;
}


/* Specific Widget Stylings */

#wp-calendar {
    border-collapse: collapse;
	text-align: center;
	width: 90%;
	margin: 0 auto;
}
#wp-calendar caption {padding: 6px;}
#wp-calendar th {
	background: #DDD;
    border: 1px solid #666;
    padding: 4px;
}
#wp-calendar tr {background: #FFF;}
#wp-calendar td {
	border: 1px solid #666;
    padding: 4px;
}
#footer #wp-calendar a {
	color: #0E4D7A;
	text-shadow: none;
}
#footer #wp-calendar caption {
	color: #fff;
}

.tagcloud {padding: 0 14px;}

.widget_search {margin-left: 10px;}

.widget_pages .children li {border-bottom: none;}


/* ------ Looped ------ */

.loop-post-wrap {
	background: #DDDDDD;
    border: 1px solid #666;
    margin-top: 20px;
    padding: 8px;
}

.sticky .loop-post-wrap {
	background: #FCFF82;
    border-color: #052B70 #333 #333;
    border-style: solid;
    border-width: 6px 1px 1px;
}

.loop-title {margin-bottom: 2px; line-height: 1; display: inline;}
.loop-title a {color: #222; text-shadow: 0 1px 1px #666; font: bold 24px arial, sans-serif;}
.loop-title a:hover {color: #F00;}

.loop-date {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid #999;
    float: right;
    margin-top: 2px;
    padding: 0 8px;
}

.loop-categories {margin: 6px auto;}
.loop-categories a {
	background: rgba(0, 0, 0, 0.15);
	border: 1px solid #999;
	padding: 1px 4px;
	border-radius: 4px;
	color: #444;
}
.loop-categories a:hover {color: #F00;}

.loop-entry {
	overflow: hidden; 
	margin-top: 6px; 
}

.post-thumbnail { 
	overflow: hidden; 
	float: left; 
	border: 1px solid #666; 
	margin-right: 8px;
	width: 120px;
	height: 120px;
}
.post-thumbnail img { float: left; }

.read-more {overflow: hidden;}
.read-more-button {	
	background: #444;
    border: 1px solid #111;
    border-radius: 4px;
    box-shadow: 0 0 2px #000;
    color: #FFF;
    float: right;
    font-weight: bold;
    padding: 2px 12px;
	margin: 0 4px 4px 0;
}
.read-more-button:hover {
	background: #2572ED; 
	color: #FFF; 
	box-shadow: 0px 0px 3px #000; 
	text-shadow: 0 1px 1px #333;
}

.loop-tags {margin: 4px 0;}


/* ------ Single ------ */

.post-edit-link {   
    background: #F9F972;
    border: 1px solid #111;
    border-radius: 4px;
    color: #222;
    float: right;
    padding: 2px 6px;
}

.single-wrap {
	margin-top: 10px; 
	padding: 6px 0; 
	border-bottom: 1px solid #999;
}

.single-title {display: inline; font-weight: normal;}
.single-title a {text-shadow: 0 1px 1px #000; color: #333; line-height: 1.2;}
.single-title a:hover {color: #F00;}

.single-top-meta {
	overflow: hidden; 
	font-size: 13px; 
	margin-bottom: 10px;
}
.single-date {
	background: #DDD;
    border: 1px solid #999;
    float: right;
	padding: 0 6px;
	margin-left: 6px;
}
.single-author {    
	background: #DDD;
    border: 1px solid #999;
    float: right;
    padding: 0 6px;
	margin-left: 6px;
}

.single-entry {
	margin: 6px 0 10px; 
	padding-left: 6px; 
	padding-top:8px; 
	border-top: 1px solid #999;
	overflow: hidden; 
}

.page-links {text-align: center; font-weight: bold; padding: 2px;}
.page-links  > div > * {
	border: 1px solid #666; 
	padding: 2px 6px; 
	margin-left: 2px;
	background: #FFF;
}
.single-wrap .updated {color: #666; font-size: 11px;}

.next-previous-post {
	overflow: hidden;
	margin: 14px 0;
	padding: 0 10px;
}

.single-tags {margin: 4px 0;}

.sitemap-template {padding-left: 30px; padding-bottom: 30px;}


/* -------- Post, Page & Comment Elements -------- */

.loop-entry p, .single-entry p, .comment-body p { 
	margin-top: 4px; 
	margin-bottom: 14px; 
}

.loop-entry h1, .loop-entry h2, .loop-entry h3, 
.loop-entry h4, .loop-entry h5, .loop-entry h6, 
.single-wrap h1, .single-wrap h2, .single-wrap h3, 
.single-wrap h4, .single-wrap h5, .single-wrap h6, 
.comment-body h1, .comment-body h2, .comment-body h3, 
.comment-body h4, .comment-body h5, .comment-body h6 {
	line-height: 1.2; 
	color: #333;
	text-shadow: 0 1px 1px #999;
	font-weight: normal;
	margin-bottom: 4px;
    margin-top: 16px;
}

.single-entry, .single-entry p {
	font-family: arial, sans-serif;
	font-size: 14px;
	line-height: 21px;
}

blockquote {
	background: #A0C8FF;
    border: 1px solid #999;
    border-radius: 4px;
    clear: both;
    margin: 10px;
    padding: 8px 18px 8px 10px;
	overflow: hidden;
}
blockquote p {
	font-style: italic;
	margin: 0 !important;
}
blockquote cite {float: right; margin: 6px auto 2px;}

blockquote cite:before {
    content: "- ";
}

.single-wrap table, .comment-body table {
    border: 1px solid #333;
    border-collapse: collapse;
	margin: 10px;
}
.single-wrap table th, .comment-body table th {border: 1px solid #666; padding: 4px; background: #DDD;}
.single-wrap table td, .comment-body table td {border: 1px solid #666; padding: 4px;}

.single-wrap p img { margin: 8px; }

.alignleft {display:inline; float:left; margin: 4px 10px 12px 0 !important;}
.alignright {display:inline; float:right; margin: 4px 0 12px 10px !important;}
.aligncenter {display:block; margin:8px auto !important;}
.alignnone {margin-top: 8px; margin-bottom: 8px;}

.single-entry dl, .comment-body dl {margin-left: 20px;}
.single-entry dt, .comment-body dt {margin-top: 10px; font-weight: bold;} 
.single-entry dd, .comment-body dd {margin-top: 2px; margin-bottom: 6px;}

.wp-caption {
	text-align:center; 
	padding: 4px 0; 
	background: #EEE;
	border: 1px solid #CCC;
}

.wp-caption-text, .gallery-caption {
	font-size: 12px !important; 
	margin: 0 !important;
	color: #555;
}

.gallery .gallery-item {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}
.gallery img {
    border: 1px solid #CCC !important;
    padding: 4px;
}
.gallery img:hover {
	border: 1px solid #AAA !important;
	background: #DDD;
}

.single-wrap ul, .comment-body ul {margin:8px 0px 8px 28px;}
.single-wrap ul li, .comment-body ul li {list-style-type: disc; list-style-position: inside; margin: 4px 0;}

.single-wrap ol, .comment-body ol {margin:8px 0px 8px 28px;}
.single-wrap ol li, .comment-body ol li {list-style-type: decimal; list-style-position: inside;}
.single-wrap ol li ol li, .comment-body ol li ol li {list-style-type: lower-alpha;}
.single-wrap ol li ol li ol li, .comment-body ol li ol li ol li{list-style-type: lower-roman;}

.wp-smiley {border: none !important; margin: 0 !important;}



#comments-wrap {margin-top: 20px; margin-bottom:20px; padding-top: 10px;}

#comments-wrap .bypostauthor .comment-body, #comments-wrap .comment-author-admin .comment-body {
	border-color: #034196 #666 #666;
    border-style: solid;
    border-width: 6px 1px 1px;
}
#comments-wrap .comment-body {
	background: #FFFE98;
	margin: 8px 0;
	padding: 8px; 
	border-top: 4px solid #666;
	box-shadow: 0 1px 3px #333;
}
#comments-wrap .comment-body .says {margin-left: 8px;}
#comments-wrap .comment-body p {clear: both;}

#comments-wrap .avatar {vertical-align:middle; margin-right:2px; padding:2px; border:1px solid #ddd;}
#comments-wrap .comment-author {margin-bottom: 10px; float: left;}
#comments-wrap .comment-author cite {font-size: 14px; font-weight:bold; font-style:normal;}
#comments-wrap .comment-meta {margin-bottom:6px; float: right;}
#comments-wrap .reply {margin: 12px auto 0; overflow: hidden;}
#comments-wrap .reply a {
	background: #F9FF34;
    border: 1px solid;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
	padding: 0 10px;
	float: right;
}
#comments-wrap .children {margin: 8px 0 0 30px;}

#comments-wrap .pagination {text-align: center; margin: 20px auto;}
#comments-wrap .pagination > * {padding: 3px 8px; border: 1px solid #AAA;}

#respond {
	background: #C5C5C5;
    border: 1px solid #333;
    margin: 4px 0;
    padding: 16px 20px 14px;
}
#respond h3 {
	margin-bottom:10px;
	font-size: 14px;
	text-transform: uppercase;
}
#respond label {display:block;}
#respond .required {display:none;}
#respond #closed {font-style:italic;}

#cancel-comment-reply-link {
	margin-left: 20px;
	background: #DDD;
	padding: 2px 6px;
	box-shadow: 0 0 2px #000;
	float: right;
	font: normal 11px arial, sans-serif !important;
	text-transform: uppercase;
}
#cancel-comment-reply-link:hover {box-shadow: 0 0 3px #000;}
#commentform textarea {
    padding: 10px;
    width: 96%;
}
#commentform #submit {
	font-size: 14px;
	padding: 6px 10px;
	margin-top: 6px;
}


/* 404 Page */
#not-found-wrap {
	background: #FFFE74;
	margin: 40px auto; 
	width: 420px;
	height: 200px;
	border: 1px solid #222;
	box-shadow: 0 0 2px #000;
	text-align: center;
}
#not-found-wrap h2 {
    background: #222;
    color: #FFF;
    padding: 16px;  
}
#not-found-wrap p {
	margin: 20px auto 24px;
	color: #333;
	font-size: 14px;
}
#error-search{
	background: #D0C776;
    margin: 20px auto;
    padding: 10px;
    width: 220px;
	box-shadow: 0 0 2px #000;
	overflow: hidden;
}
#error-search #searchinput, 
#error-search #searchsubmit {
	display: inline-block;
	float: left;
}

/* Responsive Properties */
@media screen and (max-width:900px){	
	.menu > li {border-bottom: 1px solid #000 !important;}
}

@media screen and (max-width:800px){
	#main { border-right: none !important; width: 84% !important; }	
	#sidebar { float: left !important; width: 98% !important; }
	.single-entry img {max-width: 80%; height: auto;}
}

@media screen and (max-width:768px){
	#nav-search { float: none !important; margin: 6px 0 0 6px !important; }
}

@media screen and (max-width:480px){
	#header { height: auto !important; }
	#header-info-wrap {
		float: none !important;
		position: relative !important;
		margin-left: auto !important; 
		margin-right: auto!important;
		text-align: center !important;
	}
	.menu {float: none !important;} /* Make menu width 100% */
	.menu li {float: none !important; border-right: none !important;}
	.menu > li {border-top: 1px solid #222 !important;}
	#nav-search {width: 100% !important;}
	#searchinput {width: 80% !important;}
	.loop-date {float: none !important;}
	#comments-wrap {max-width: 98% !important;}
}

@media screen and (max-width:320px){
	.post-thumbnail {display: none !important;}
}