/*
Theme Name: appolo
Theme URI: http://www.thematology.com/
Description: 3 columns, with 2 RHS widget sidebars
Version: 1.2
Author: Thematology
Author URI: http://www.thematology.com/
*/


body {margin: 0; padding: 0; color: #333; text-align:center; font-size: 100.1%; font-family: Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }
#header{   padding: 0 0 0 10px;}
a, a:hover{ color: #3B5998; }

ul#commentlist li div.commenttext{ padding-left: 20px; }
#wrapper{ margin: 0px auto; padding: 0px; text-align:left; font-size: 84%; line-height:20px; }
#header{ height: autopx; margin: 0; }
#main{ padding: 10px 0 0 0; }
p, h1, h2, h3, h4 { margin: 10px 0; padding: 0; }
h1{ font-size: 190%; }
h2{ font-size: 150%; }
h3{ font-size: 110%; }
h4{ font-size: 105%; }
a{ font-weight:800; text-decoration:none; }
a:hover{ text-decoration:underline; }
a img{ border:0px; }
hr{ height: 2px; margin: 5px 0; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
#wrapper{ width: 980px; }
#secondary{ float:right; width:175px; }

h1 a, h2 a, h3 a {font-weight:400;}

#main{ float:left; width:630px; margin-right:10px;}
#main img{max-width:100%;height:auto;}
#main .right, #main .fbright {float:right; margin:0 5px 0 0;}
#main .right img{margin:0;padding:0;}
#main a img{margin-top:10px; border: 1px solid #ccc; padding: 5px 0 5px 0;}
#main a:hover img {border: 1px solid #3B5998; padding: 5px 0 5px 0;}


#tabs { font-size:90%; line-height:18px; border-bottom: 1px solid #aaa; background:#3B5998;}
#tabs ul { margin: 0; padding: 4px 15px; list-style: none; }
#tabs li { display:inline; margin:0; padding:0 10px; border-right: 1px solid #aaa; }
#tabs a { margin:0; padding:0; text-decoration:none; color: #fff; }
#tabs a:hover { color: #000; }

h2#sectiontitle{ font-size:140%; font-weight:100; padding:6px 6px 10px 10px; margin:8px 20px; background: #f8f8f8; border: 1px solid #eee; color: #444; }

.post{ margin: 0; padding: 0 5px; }
.post h2 { color: #3B5998; font-size: 140%; border-bottom: 1px solid #ddd; padding: 2px 0 2px 20px; margin: 0 0 15px 0;  background: url("images/postheaderbg.gif") no-repeat 0 4px;font-weight:normal;}
.post h2 a{ color: #3b5998; text-decoration:none; }
.post h2 a:hover{ text-decoration:none; color: black; }

.postmetadata{ font-size:90%; border-top: 1px solid #ddd; background:#f2f2f2; padding: 1px 10px 1px 5px; text-align:right; margin:10px 0 0 0; }
.postmetadata p{ line-height: 14px; padding: 0; margin: 1px 0; }


fieldset#commentset{ background: #f2f2f2; border-top: 1px solid #ccc; }
h3#comments, h3#postcomment{ font-size: 100%; }
ol#commentlist{ padding: 0 0 0 0px; font-size: 90%; list-style-type:none; }
ol#commentlist li{ padding: 0px 4px; margin: 0 0 0 15px; }
ol#commentlist li p.commentheader{ margin: 0; }
ul#commentlist{ padding: 0; margin:0; list-style-type:none; }
ul#commentlist li{ display: block; padding: 4px 0px; margin: 0 15px; font-size:90%; border: 4px solid white; }
ul#commentlist li p.commentheader{ font-size:100%; font-weight: 800; color: #666; }
ul#commentlist li div.commenttext{ background: #F5F5F5; margin:0; padding: 8px 15px 8px 0; border-top: 1px solid #ccc; }
ul#commentlist li div.commenttext p{ margin: 2px 0 5px 0; }


#sidebar{ float:right; width:340px; font-size:14px;font-weight:normal;margin:10px 0 0 0;}
#topsidebar {padding:5px;background:#eee;border:1px solid #ddd;}
.leftsidebar{float:left;width:165px;}
.rightsidebar {float:right; width:165px;}
#sidebar h3{ font-size: 130%; padding: 2px 0 2px 2px; margin-bottom: 5px; color: #fff; font-variant: small-caps; background: #3b5998; }
#sidebar ul{ margin:0; padding:0; }
#sidebar ul li{ border-bottom:1px solid #ddd; padding:0; margin:0; list-style-type:none;}
#sidebar ul li a{ padding:2px 2px 2px 5px; display:block; background: #FAFAFA; font-weight:400;}
#sidebar ul li a:hover{ display:block; background: #ddd; }

.sidebarsearch {background:#eee;padding:0;border:1px solid #ddd;}

#sidebar h3.heading1 {background:#3B5998;}
#sidebar h3.heading2 {background:#54B2A6;}
#sidebar h3.heading3 {background:#ED5453;}
#sidebar h3.heading4 {background:#ED5453;}

#footer { clear: both; margin: 0; padding: 10px 0 0 0; text-align: center; font-size: 85%;  }
#footer-inner{ background: #3B5998;padding:10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color:#fff;}
#footer-inner a {color:#fff;}
#footer-inner p{ padding:15px 0 20px 0; margin:0; }

#content a img.WP-EmailIcon{margin:0;padding:0;}
.post-ratings-loading {display: none;height: 16px;text-align: left;}


.wp-email p { text-align: left; margin:0; padding:0; }
.wp-email-loading { display: none; text-align: center; height: 16px; }
.wp-email-image, .WP-EmailIcon { border: 0; padding: 0; margin:0; }


.wp-pagenavi {margin:10px 0 0 0;}
.wp-pagenavi a, .wp-pagenavi a:link { padding: 2px 4px 2px 4px;  margin: 2px; text-decoration: none; border: 1px solid #555; color: #000; background-color: #F4F3E8; }
.wp-pagenavi a:visited { padding: 2px 4px 2px 4px;  margin: 2px; text-decoration: none; border: 1px solid #555; color: #000; background-color: #EBEADF; }
.wp-pagenavi a:hover { border: 1px solid #000; color: #EBEADF; background-color: #3B5998; }
.wp-pagenavi a:active { padding: 2px 4px 2px 4px;  margin: 2px; text-decoration: none; border: 1px solid #555; color: #333; background-color: #EBEADF; }
.wp-pagenavi span.pages { padding: 2px 4px 2px 4px;  margin: 2px; color: #000; border: 1px solid #000; background-color: #EBEADF; }
.wp-pagenavi span.current { padding: 2px 4px 2px 4px;  margin: 2px; font-weight: bold; border: 1px solid #555; color: #EBEADF; background-color: #3B5998; }
.wp-pagenavi span.extend { padding: 2px 4px 2px 4px;  margin: 2px; border: 1px solid #555; color: #000; background-color: #EBEADF; }

.clear{clear:both;}


.subcats {background:#f2f2f2;padding:10px;border:1px dashed #aaa;margin: 0 0 20px 0;}
.subcats ul{padding: 10px 0 20px 10px; margin:0;}
#content .subcats ul li{list-style-type:circle;float:left;margin:0 25px 0 10px;}

#bottom {background:#eee;clear:both;padding:20px 0;}
.bbox {width:20%;float:left;margin:2%;}
.bbox h3 {background:#CCE3B0;color:#333333;padding:4px;}
.bbox ul {margin:0;padding:0;}
.bbox ul li {margin:0 5% 5px 0;list-style-type:none;border-bottom:1px solid #ddd;padding:0 0 2px 0;}


.sposts{clear:both; margin:10px 0;}
.sposts ul {margin:0;padding:0;}
.sposts ul li {float:left; list-style-type:none;margin:0 10px;}
.sposts ul li {width:auto;height:200px;}
.sposts ul li img {width:auto;height:130px!important;}
.sposts ul li span  {width:150px;display:block;font-size:12px;}
.sposts ul li span a {font-weight:400;}

#himg img {height:160px!important;}

@media screen and (max-width:980px){
body {min-width:350px;}
#wrapper{ width: 98%; border:none;padding:1%;}
#main{ width:100%;float:none;}
#sidebar {float:none;margin:20px 0;clear:both;}
textarea {max-width:90%;display:block;}
img {max-width:95%;height:auto;}
.bbox {float:none;width:96%;padding:2%;margin:0 0 20px 0;}
}


@media screen and (max-width: 400px) {
#wrapper .mainh div {float:none!important; margin:20px auto!important;width:90%!important;display:block;}
#wrapper .mainh div img {width:90%;height:auto;}
}
@media screen and (min-width: 980px) {
#wrapper{ width: 980px; }
#main{ width:630px; }
}

@media screen and (min-width: 1200px) {
#wrapper{ width: 1100px; }
#main{ width:740px; }
}

@media screen and (min-width: 1300px) {
#wrapper{ width: 1260px; }
#main{width:900px; }
}









@media screen and (max-width:600px) {
#topnav {clear:both;float:none;display:none;padding:0;color:#ccc;background:#3B5998;margin:0;}
#topnav a{color:#eee;}
#navtoggle {color:#fff; background:#152B4F url(http://www.graphics99.com/wp-content/uploads/2016/09/menuwhite.png) 5px 8px no-repeat;  padding: 8px 0 5px 45px;font-size:20px;cursor:pointer;display:block;}
#topnav ul  {margin:0;}
#topnav ul li {float:none;border:none;border-bottom:1px solid #aaa;display:block;padding:0 0 3px 0;margin:5px 0 5px 0;}
#topnav ul li a {display:block;border:none;color:#fff;}
#topnav ul li a:hover {color:#ccc;}
}

@media screen and (min-width:600px) {
#navtoggle {display:none;}
}

@media screen and (max-width:480px) {

.sposts{clear:both; margin:10px 0;}
.sposts ul {margin:0;padding:0;}
.sposts ul li {float:left; list-style-type:none;margin:0 10px;}
.sposts ul li {width:auto;height:160px;}
.sposts ul li img {width:auto;height:80px!important;}
.sposts ul li span  {width:120px;display:block;}


}
