/* 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.3 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:16px;} h6 {font-size:14px;} 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; } /*------------------------------------- Main Containers --------------------------------------*/ #container { width:960px; background: #FFF; border: 8px solid #000; margin: 20px auto 30px; max-width: 96%; box-shadow: 0 0 10px #000; } #header { min-height: 120px; overflow: hidden; } #header-info-wrap { float: left; margin-bottom: 8px; } #header-info-wrap hgroup { margin-top: 18px; margin-left: 18px } #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; } #main { background: #FFF; overflow: hidden; width: 100%; } #content { display: table-cell; vertical-align: top; width: 620px; padding: 0 10px 20px; border-right: 1px solid #555; } #bottom-navi { border-top: 1px solid #AAA; padding-top: 16px; padding-bottom: 6px; margin-top: 16px; } #content-nosidebar { padding: 0 10px 20px; } #sidebar { display: table-cell; vertical-align: top; width: 310px; padding: 0 5px 20px; } #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 { overflow: auto; background: #000; min-height: 10px; padding: 6px; } #footer-links { float: left; color: #CCC; } #theme-credit { color: #BBB; float: right; font: bold 12px verdana,sans-serif; margin-top: 4px; } /*------------------------------------- The Main Menu --------------------------------------*/ #nav { background-color: #333; border-top: 1px solid #000; border-bottom: 1px solid #000; float: left; width: 100%; z-index: 20; } #nav .menu { float: left; border-right: 1px solid #555; } #nav .menu > li:first-child { border-left: none; } #nav .menu li { float:left; position: relative; } #nav .menu > li { border-right: 1px solid #000; border-left: 1px solid #555; } #nav .menu > li > a { min-width: 70px; text-align: center; } #nav .menu li a { display: block; padding: 8px 14px; font: bold 16px arial, sans-serif; color: #FFF; text-shadow: 0 2px 2px #000; } #nav .menu li a:hover { background-color: #FFF; color: #000; text-shadow: none; } #nav .menu > .parent-menu-item > a:after { content: url("images/arrow-down-w.png"); padding-left: 6px; } #nav .menu > .parent-menu-item > a:hover:after { content: url("images/arrow-down-b.png"); } #nav .sub-menu { width: 170px; background-color: #292929; border: 1px solid #000; position: absolute; z-index: 30; display: none; /* initial hide */ box-shadow: 0 1px 4px #000; } #nav .sub-menu li { border-top: 1px solid #3C3C3C; border-bottom: 1px solid #000; } #nav .sub-menu li:first-child {border-top: none;} #nav .sub-menu li:last-child {border-bottom: none;} #nav .sub-menu li a { float: left; width: 142px; padding: 10px 14px; font: 13px arial, sans-serif; text-shadow: 0 1px 1px #000; color: #FFF; } #nav .sub-menu li a:hover { background-color: #FFF; color: #000; text-shadow: none; } #nav .sub-menu li .sub-menu {margin-top: -1px;} #nav .sub-menu > .parent-menu-item > a { background-image: url("images/arrow-right-w.png"); background-repeat: no-repeat; background-position: 98% center; } #nav .sub-menu > .parent-menu-item > a:hover { background-image: url("images/arrow-right-b.png"); } /* 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; border-right: 1px solid #000; border-left: 1px solid #555; } #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: 6px 20px 4px 10px; } #nav .ast-search{ background: none; margin: 0; padding: 0; width: auto; box-shadow: none; overflow: hidden; } #nav .ast-search-input{ color: #666; border: 1px solid #222; width: 150px; padding: 2px; margin-top: 1px; } #nav .ast-search-submit { background: url("images/find.png") no-repeat transparent; height: 22px; width: 22px; border: none; cursor: pointer; margin: 0 2px; color: transparent; } /*------------------------------------- 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; 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; overflow: hidden; } .widget-footer h4 { background: #222; border: 1px solid #000; border-radius: 6px; color: #FFF; 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 --------------------------------------*/ .widget-title {font-size: 16px;} #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 { float: left; color: #FFF; margin: 6px; } .widget-below-menu .widget-title { background: none repeat scroll 0 0 #222; border: 1px solid #000; border-radius: 6px 6px 6px 6px; color: #FFF; padding: 3px 6px 3px 8px; text-shadow: 2px 2px 2px #000; } .widget-below-menu a {color: #FC9A08; text-shadow: 2px 2px 2px #000;} .widget-below-menu ul {padding: 4px 8px 6px;} .widget-below-menu .textwidget {padding: 6px;} #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_pages .children li {border-bottom: none;} /*------------------------------------- Looped --------------------------------------*/ .loop-post-wrap { background: #DDD; border: 1px solid #666; box-shadow: 0 0 3px #333; margin-top: 20px; padding: 8px; } .sticky .loop-post-wrap { background: #FCFF82; border: 1px solid #101010; } .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; } .excerpt-text p { margin-bottom: 0 !important; margin-top: 0 !important; } .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; 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 { margin-top: 6px; 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;} .type-attachment .single-entry .attachment { text-align: center; } .next-previous-attachment { overflow: hidden; } .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 and 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: #E0E0E0; border-left: 6px solid #666; clear: both; margin: 10px; padding: 8px 12px; 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 --------------------------------------*/ #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: #FEFDAD; margin: 8px 0; padding: 8px; border-top: 6px solid #555; box-shadow: 0 1px 3px #111; } #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: #FFF; border: 1px solid #333; font-size: 12px; font-weight: bold; padding: 0 10px; float: right; margin-bottom: 2px; margin-right: 2px; box-shadow: 1px 1px 2px #333; } #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; } /*------------------------------------- Searchform --------------------------------------*/ .ast-search{ background: #D0C776; padding: 10px; width: 220px; margin: auto auto; box-shadow: 0 0 2px #000; overflow: hidden; } .ast-search-input { display: inline-block; float: left; width: 148px; } .ast-search-submit { display: inline-block; float: left; width: 60px; margin-left: 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; } .not-found-wrap .ast-search {margin: 20px auto;} /*------------------------------------- Responsive Properties --------------------------------------*/ @media screen and (max-width:900px){ #nav-search { float: left !important;} .menu > li {border-bottom: 1px solid #222 !important;} } @media screen and (max-width:800px){ #content { border-right: none !important; width: 84% !important; } #sidebar { float: left !important; width: 98% !important; } } @media screen and (max-width:768px){ #header-info-wrap img {max-width: 96% !important; height: auto !important;} .single-entry img {max-width: 96% !important; height: auto !important;} .wp-caption {max-width: 96% !important; width: auto !important;} .aligncenter {display: table !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; } /* Make menu width 100% */ .menu {float: none !important; border: none !important;} .menu > li { float: none !important; border-top: 1px solid #222 !important; border-bottom: 1px solid #000 !important; border-left: none !important; border-right: none !important; } #nav-search {width: 96% !important;} #nav .ast-search-input {width: 84% !important;} #nav .ast-search-submit {float: left !important;} .loop-date {float: none !important;} #comments-wrap {max-width: 98% !important;} .not-found-wrap {width: auto !important; max-width: 96% !important;} } @media screen and (max-width:320px){ .post-thumbnail {display: none !important;} }