/** File Style.css
* @author : Johntxt 
* @site   : http://kubang.mobie.in
**/
a {
color : #cc0f16;
text-decoration : none;
}
div span a img {
width: 100px;
height: 25px;
}
img {
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle; 
} 
input[type="submit"] {
    background: none repeat scroll 0% 0% #CC0F16;
    padding: 5px;
    font-weight: bold;
    color: #FFF;
    border: 1px solid #911;
    margin: 0px 1px 0px 0px;
}
input, textarea, select {
background: #fff;
padding: 5px;
margin: 1px;
border: #ddd 1px solid;
color: #555; 
}
input[type="radio"]{
padding: 1px;
}
body {
color : #333;
font-size : 12px;
background : #fff;
font-family : sans-serif;
margin : 0;
padding : 0;
margin: auto; 
}
form {
font-size : small;
margin : 0;
padding : 0;
}
h3 {
margin : 0;
padding : 0;
padding-bottom : 2px;
}
hr {
border : 0;
border-top : 1px dotted #ccc;
margin : 0; 
}
p {
margin: 1px;
}
ul {
margin : 0;
padding-left : 20px;
}

/* Header */
.header {
background: #111;
padding: 7px;
margin: 0;
color: #fafafa;
font-weight:bold;
}
.header img { max-width:760px; }
@media screen and (min-device-width:100px) and (max-device-width:130px){ .header img,. screenshot, img { max-width: 80px; } }
@media screen and (min-device-width:131px) and (max-device-width:180px){ .header img, .screenshot, img { max-width: 150px; } } 
@media screen and (min-device-width:181px) and (max-device-width:250px) { .header img, .screenshot, img { max-width:180px; }}
@media screen and (min-device-width:251px) and (max-device-width:320px){ .header img, .screenshot, img { max-width:280px; }} 
@media screen and (min-device-width:321px) and (max-device-width:480px){ .header img, .screenshot , img{ max-width: 420px; }}
@media screen and (min-device-width:481px) and (max-device-width:640px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:641px) and (max-device-width:720px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:720px) and (max-device-width:5000px){ .header img, .screenshot , img{ max-width: 480px; }}
 
.navigation {
background: #cc0f16;
color: #fff;
padding: 0;
margin:0;
}
.navigation .select {
background: #911;
padding: 7px 0;
margin: 0;
}
.navigation span a {
display: inline-block;
color: #fafafa;
padding: 7px 5px;
margin: 0;
font-weight: bold;
border-right: 1px solid #911;
}

/* Footer */
.qfooter {
background: #cc0f16;
color: #fff;
padding: 5px 7px;
margin:0;
font-weight: bold;
}
.qfooter input, .qfooter select, .qfooter .button{
padding: 3px 5px;
display: inline-block;
}
.qfooter .button{
background: #333;
border: 1px solid #111;
}
.nav-footer {
background: #ddd;
color: #333;
font-weight: bold;
padding: 7px;
}
.footer {
background: #eee;
padding: 7px;
margin: 0;
color: #555;
text-align: center;
}
.footer a{
color: #555;
text-decoration: none;
}

/* Menu */
.mainpage {
padding: 7px;
border-top: 0;
border-bottom: 0;
}
.tmenu, .tnews {
background: #eee;
padding: 7px;
color: #555;
margin: 5px 0 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.tnews {
margin: 0;
}
.menu, .container, .list, .back-menu, .news {
padding: 7px;
color: #555;
margin: 0;
border: 1px solid #ddd;
border-top: 0;
}
.container .textarea {
width: 90%;
}
.back-menu {
padding: 3px;
}
.back-menu a {
display: inline-block;
padding: 5px;
font-weight: bold;
}
.back-menu .back {
background: #cc0f16;
color: #fff;
border: 1px solid #911;
}
.back-menu .next {
background: #179023;
color: #fff;
border: 1px solid #071;
float:right;
}
.dfile {
text-align: center;
}
.dfile .dl {
background: #1279ee;
border: 1px solid #1279ee;
padding: 10px;
margin: 5px 5px 0px 5px;
color: #fff;
font-weight: bold;
text-align: center;
display: inline-block;
}
/* guestbook */
.guest-form {
padding: 7px;
margin: 0;
border: 1px solid #ddd;
border-top: 0;
}
.guest-form .textarea, .guest-form .input {
width: 90%;
}
.block-comment{
padding: 0;
margin: 5px 0 0 0;
position: relative;
}
.block-comment .thumbnail {
position:absolute;
border: 1px solid #ddd;
top:0px;
left:0px;
width:32px;
height:32px;
padding:1px;
}
.comment-author {
padding: 3px;
}
.comment-author .date {
color: #777;
}
.comment-list {
margin: 0 0 0 40px;
background: #fff;
border: 1px solid #ddd;
padding: 5px;
}
.comment-message, .comment-actions{
padding: 3px 0;
}
.comment-actions a, .comment-actions span{
background: #179023;
padding: 3px 7px;
display: inline-block;
color: #fff;
font-weight: bold;
}
.comment-actions span{
background: #cc0f16;
}
.block-reply {
margin: 0 1px 1px 15px;
padding: 5px 0 5px 5px;
}
.block-reply .block-comment {
border: 0;
}
.block-reply .thumbnail {
left: 0;
}
.block-reply .comment-list {
margin: 0 0 0 40px;
}
/* paging */
.xt_pagination, .filelist_paging{
margin: 5px 0;
text-align: center;
}
.xt_pagination a, .xt_pagination .selected, .filelist_paging a, .filelist_paging span {
padding: 5px;
display: inline-block;
margin: 1px;
font-weight: bold;
}
.xt_pagination a, .filelist_paging a {
background: #fff;
border: 1px #ddd solid;
}
.xt_pagination .selected, .filelist_paging span {
background: #cc0f16;
border: 1px solid #cc0f16;
color: #fff;
}
 
/* Error Message */
.error {
border: 1px solid #ddd;
border-top: 0;
padding: 7px;
}

/* Vote situs*/
.vote_cont {
border: 1px solid #ddd;
}
.vote_cont h3{
background: #eee;
border-bottom: 1px solid #ddd;
margin: 0;
padding: 7px;
}
.container h3{
font-size: 13px;
margin: 0;
}

.vote_cont .answer, .vote_cont .submit, .vote_cont .result{
padding: 5px 7px;
}
.vote_cont #answer1, .vote_cont #answer2, .vote_cont #answer3, .vote_cont #answer4, .vote_cont #answer5, .container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
padding: 1px;
}
.container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
display: inline-block;
}

/* Sharer */
.share-button {
padding: 7px;
font-weight: bold;
border: 1px solid #ddd;
border-top: 0;
}
.share-button a{
display: inline-block;
}
.social-button{
padding: 3px 0px;
font-weight: bold;
}
.share-button .fb-share {
background: #3b5998;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .tw-share {
background: #4099ff;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .gp-share {
background: #c0361a;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}

/* Search */
.searchbox {
padding: 7px;
margin:0;
border: 1px solid #ddd;
border-top: 0;
}
.searchbox .input {
width: 60%;
}
.searchbox .xt_button {
width: 30%;
}
.breadcrumbs {
padding: 3px;
margin:5px 0 0 0;
border: 1px solid #ddd;
}
.breadcrumbs a {
display: inline-block;
padding: 5px;
}
.breadcrumbs .back, .breadcrumbs a {
background: #cc0f16;
padding: 5px;
font-weight: bold;
color: #fff;
border: 1px solid #911;
margin: 0 1px 0 0;
}


/* smile */
.smile {
padding: 7px;
border: 1px solid #ddd;
border-top: 0;
margin: 0;
}
.smile span {
margin: 1px;
display: inline-block;
}

/* BLOG STYLE */
/* list */
.thumbnail {
position:absolute ;
top:10px;
left:7px;
width:50px;
height:50px;
padding:4px;
border:1px solid #fff;
background:#fafafa;
} 
.post:first-child{
    margin-top: 0;
} 
.post {
margin:10px 0;
padding:10px;
background:#f7f7f7;
border:1px solid #fafafa;
position: relative;
}
.post .post-title {
margin:0 0 0 64px;
padding:0 5px 0 0;
font-size:0;
}
.post-title a,.post-title .entry-title
{
margin:0;
padding:0;
font-size: 17px;
}
.post .post-title .entry-title a
{
display:block;
text-decoration:none;
}
.post .post-short-content {
margin:0 0 0 64px;
padding:0 5px 0 0;
max-height:50%;
text-align: justify;
}
.post-comment {
margin:2px 0 0 64px;
padding:0
}
.post-comment a {
padding:0;
color:#ffd200;
font-weight:bold;
margin:0;
}

/* Posting */
/* entri Post */
.post-single {
margin: 0;
padding: 7px;
background: #f7f7f7;
border: 1px solid #fafafa;
}
.post-single h1 {
margin: 0;
font-size: 20px;
padding-bottom: 3px;
color: #1f6c03;
}
.post-single .post-subtitle {
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
.post-content {
text-align: justify;
}
.post-content img, .post-content a img { max-width: 480px; }
@media screen and (min-device-width:100px) and (max-device-width:130px){
.post-content img, .post-content a img { max-width: 90px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 70px;
} 
}
@media screen and (min-device-width:131px) and (max-device-width:177px){
.post-content img, .post-content a img { max-width: 140px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 120px;
}
}
@media screen and (min-device-width:178px) and (max-device-width:240px){
.post-content img, .post-content a img { max-width: 200px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 180px;
} 
} 
@media screen and (min-device-width:241px) and (max-device-width:320px){ 
.post-content img, .post-content a img { max-width:260px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 240px;
} 
.kontent-post {
padding: 1px 7px;
}
}
@media screen and (min-device-width:321px) and (max-device-width:360px){ 
.post-content img, .post-content a img { max-width:300px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 280px;
} 
.kontent-post {
padding: 1px 7px; 
}
} 
@media screen and (min-device-width:361px) and (max-device-width:480px){
.post-content img, .post-content a img { max-width: 420px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 400px;
} 
.kontent-post {
padding: 1px 7px;
}
}
@media screen and (min-device-width:481px) and (max-device-width:5000px){
.post-content img, .post-content a img { max-width: 500px; }
.post-content ol li img, .post-content ol li a img, .post-content ul li img, post-content ul li a img {
max-width: 480px;
} 
.kontent-post {
padding: 1px 7px; 
}
} 
.post-created {
border-top: 1px solid #fff;
margin: 7px 0;
padding-top: 7px;
text-align: right;
color: #666;
}
/* entri share */
.share-button {
padding: 7px 0px;
font-weight: bold;
}

.share-button a{
display: inline-block;
}

.social-button{
padding: 3px 0px;
font-weight: bold;
}

.share-button .fb-share {
background: #3b5998;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold; 
}
 
.share-button .tw-share {
background: #4099ff;
padding: 5px;
margin: 1px; 
color: #fff;
font-weight: bold;
} 

.share-button .gp-share {
background: #c0361a;
padding: 5px;
margin: 1px; 
color: #fff;
font-weight: bold; 
}
 

/* comments list */
.no-comment, .comment-title {
background: #f7f7f7;
padding: 7px;
margin: 10px 0;
border: 1px solid #fff;
font-weight: bold;
}
.comment-thumb{
float: left;
padding:3px;
margin-right: 3px;
border:1px solid #fafafa;
background:#f7f7f7;
}

.comment-back {
background: #f7f7f7;
padding: 10px;
font-weight: bold;
margin: 5px 0;
}
 
.comment-reply .comment-thumb{
left: 0px;
}
.comment-reply .comment-list {
margin: 0;
}
.comment-reply .comment-post {
padding: 7px 0px 7px 3px;
}
.comment-post {
padding: 7px 3px 10px 3px;
background: #f7f7f7;
margin: 7px 0;
}
.comment-date {
display: block;
color: #666;
}
.comment-list {
margin: 0;
}
.comment-reply {
border: 1px solid #ddd;
border-left: 5px solid #ddd;
margin: 1px 1px 1px 10px;
}
.comment-author {
padding: 5px 7px 1px 7px;
margin: 0;
background: #f7f7f7;
}
.comment-reply .comment-post {
margin: 0 0;
padding: 1px;
}
.comment-message {
padding: 1px 7px;
margin: 0;
background: #f7f7f7;
clear: both;
 }
.comment-actions {
padding: 1px 7px 7px 7px;
margin: 7px 0 0 0;
background: #f7f7f7;
 }
.comment-actions a{
display: inline;
border: 1px solid #fff;
padding: 3px;
margin: 5px 0 0 0;
}

/* Komentar Form */
.comment-title-form {
background: #CC0F16;
padding: 7px;
font-weight: bold;
color: #ff0;
margin: 10px 0 0 0;
text-transform: uppercase;
}
 
.comment-form {
background: #f7f7f7;
padding: 7px;
border: 1px solid #fafafa;
margin: 0 0 10px 0;
font-weight: bold;
}
.comment-form-nick {
display: block;
width: 85%;
font-weight: normal;
}
.comment-form-input, .comment-form-email {
width: 85%;
font-weight: normal;
}
.comment-form-text {
padding: 3px;
display: block;
}
#comment-form-msg {
width: 85%;
font-weight: normal;
}

/* Not Found */
.not-found {
background: #f7f7f7;
padding: 7px;
border: 1px solid #fafafa;
margin: 10px 0;
}

/*mobile*/

    #menubar {
        width: auto;
        float: none;
    }
#main {
        margin-right: 0;
    }
#main {
    padding: 10px;
    margin: 0px;
}

#sidebar {
    background-color: teal;
    color: #ffffff;
    padding: 10px;
    width: auto;
    bottom: 0;
    top: 0;
    right: 0;
    position: relative;
}
#sidebar ul, #sidebar ol{list-style-type:none;padding:0;margin:0}
#sidebar ul li, #sidebar ol li{padding:6px 2px 6px 16px;border-bottom:1px solid #eee}
#sidebar, #menuitem {
    border-radius: 4px;
    margin: 4px;
}
#top h1, #top p, #menulist {
    margin: 0;
    padding: 0;
}
.menuitem {
    background-color: #f1f1f1;
    border: 1px solid #d4d4d4;
    list-style-type: none;
    padding: 2px;
    cursor: pointer;
}

.menuitem:hover {
    background-color: #ffffff;
}

a {
    color: teal;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}