/*
CSS MOBILE MWB “MAS SUGENG TEMPLATE”
Desain Oleh : Eko Sukma Saputra
Tanggal Pembuatan : 22/02/2015
Kunjungi : www.blog-eko27.com
*/

body {
background :#B9D5F7;
color :#222;
font-family :"Arial", sans-serif;
font-size :13px;
margin :6px;
word-wrap :break-word;
padding :0;
position :relative;
}

body img, .post-single .post-content img {
max-width :90%;
max-height :90%;
}

a {
color :#005ad4;
text-decoration :none;
}

a:hover {
text-decoration :none;
}

a.no-link, a.no-link:hover {
color :#222;
text-decoration :none;
}

#header {
background :#fff;
margin :0;
padding :6px;
text-align :left;
overflow :hidden;
position :relative;
}

#header .heading {
margin :0;
padding :0;
text-decoration :none;
overflow :hidden;
font-weight :bold;
font-size :25px;
}

#header .heading a {
font-size :20px;
}

#header img {
max-width :90%;
max-height :90%;
}

#header .description {
color :#888;
margin :0;
font-size :11px;
font-weight :normal;
overflow :hidden;
padding :6px 0;
}

#navigation {
overflow :hidden;
background :#005ad4;
text-align :center;
margin :6px 0 0;
padding :0;
border-bottom :4px solid #e5e5e5;
}

#navigation span {
margin :0;
text-align :center;
padding :0;
display :inline-block;
font-weight :bold;
}

#navigation span a {
color :#fff;
padding :8px 6px;
margin :0;
display :inline-block;
text-decoration :none;
font-weight :bold;
}

#navigation span + span a {
content : "Admin";
}
#navigation span + span + span a {
content : "Menu";
}

#top-content {
background :#fff;
margin :0;
padding :0 0 3px;
text-align :center;
}

#search-form:after {
margin :0;
padding :0;
display :block;
content :"";
clear :both;
}

#search-form {
border :1px solid #ededed;
margin :0 6px;
padding :0;
}

#search-form [type="text"] {
background :none;
border :none;
display :inline;
font-size :13px;
width :78%;
margin :0;
padding :6px;
color :#222;
float :left;
}

#search-form [type="submit"] {
background :#ffcc00;
border :none;
display :inline;
font-size :13px;
width :22%;
margin :0 0 0 -22%;
padding :6px;
color :#fff;
font-weight :bold;
float :right;
}

#content {
background :#fff;
display :block;
margin :0;
padding :3px 6px 3px;
}

.post {
margin :0 0 6px;
padding :6px;
font-size :13px;
border :1px solid #ededed;
position :relative;
}

.post:last-child {
margin-bottom :0;
}

.post-single {
margin :0 0 6px;
padding :6px;
font-size :13px;
border :1px solid #ededed;
position :relative;
width :auto;
}

.thumbnail {
border :0 !important;
margin :6px !important;
width :45px !important;
height :45px !important;
padding :0 !important;
position :absolute;
top :0;
left :0;
right :0;
}

.post:before {
position :absolute;
top :0;
left :0;
right :0;
width :45px;
height :45px;
margin :6px;
padding :0;
content :"";
background :url(http://blog-eko27.mywapblog.com/files/no-image.png) center no-repeat;
border :0;
background-size :100% 100%;
}

.post-meta {
color :#888;
margin :0;
padding :0;
}

.post .post-meta {
font-size :11px;
overflow :hidden;
padding :0 0 6px 51px;
position :relative;
text-align :left;
}

.post-single .post-meta {
margin-bottom :6px;
text-align :left;
}

.post-meta .title {
color :#222;
font-weight :bold;
font-size :15px;
margin :0;
padding :0;
}

.post-meta .title a {
display :block;
font-weight :bold;
font-size :13px;
}

.post-meta .title a:before {
content :'';
display :block;
float :left;
margin :0 0 0 -51px;
padding :0;
position :relative;
width :45px;
height :45px;
z-index :3;
}

.post-meta .categories {
background :#f5f5f5;
color :#222;
font-size :12px;
font-weight :normal;
margin :4px 0 0;
padding :6px;
}

.post .post-content {
overflow :hidden;
margin :auto;
padding :0px;
font-size :0;
height :0;
}

.post-single .post-content {
overflow-wrap :break-word;
margin :6px 0;
text-align :justify;
}

.post-meta2 {
margin :0;
padding :0 0 0 51px;
text-align :left;
}

.post-meta2 a {
color :#ffcc00;
font-weight :bold;
margin :0;
padding :0;
}

.post-meta2 span {
content : " Tanggapan";
}

#share-buttons:before {
content : "Bagikan Secara Gratis : ";
}

#share-buttons {
background :#f5f5f5;
text-align :right;
padding :6px;
margin :6px 0 12px;
}

#share-buttons a {
margin :0;
}

#next_previous {
display :block;
margin :0;
padding :6px 0 0;
font-size :13px;
}

#next_previous a {
color :#fff;
padding :5px 6px;
}

#next_previous .previous {
background :#07acec;
content :"Sebelumnya";
display :inline-block;
float :left;
}

#next_previous .next {
background :#07acec;
content :"Selanjutnya";
display :inline-block;
float :right;
}

#next_previous .clear {
display :block;
clear :both;
}

#comments {
margin :0;
padding :0;
text-align :left;
}

#comments h4, #comments h5 {
border :1px solid #ededed;
color :#222;
margin :0 0 6px;
padding :6px;
text-align :center;
}

.comment {
margin :0 0 8px 5px;
padding :6px;
border :1px solid #ededed;
border-left :5px solid #ededed;
position :relative;
}

.comment:before {
background :none;
position :absolute;
left :-15px;
top :20px;
content :'';
height :0;
width :0;
display :block;
margin :0 auto;
padding :0;
border-width :7px 5px;
border-style :solid;
border-color :transparent #ededed transparent transparent;
z-index :3;
}

.comment-content {
margin :auto;
padding :0;
overflow-wrap :break-word;
}

#comments .comment .comment-header {
font-size :12px;
color :#888;
padding :0;
}

#comments .comment .comment-header .title {
background : none !important;
border : none !important;
color :#222;
font-size :13px;
font-weight :normal;
margin : 0 !important;
padding : 0 !important;
text-align :left !important;
}

#comments .comment .comment-header .title a {
font-size :13px;
padding :0;
text-decoration :none;
font-weight :bold;
}

#comments .comment .comment-left-content .date {
color :#888;
margin :0;
padding :0;
text-align :right;
}

#comment_form {
border :#ededed solid 1px;
margin :0;
padding :6px;
text-align :left;
}

#comments form textarea {
background :none;
border :1px solid #f0f0f0;
color :#222;
width :80%;
margin :3px 0;
padding :2px;
height :85px;
font-size :13px;
}

#comments form [type="text"] {
background :none;
border :1px solid #f0f0f0;
color :#222;
width :70%;
margin :3px 0;
padding :2px;
font-size :13px;
}

#comments form [type="submit"] {
background :#07ACEC;
border :none;
color :#fff;
padding :6px;
margin-top :4px;
width :70%;
font-size :13px;
}

#pagination-links:after {
margin :0;
padding :0;
display :block;
content :"";
clear :both;
}

#pagination-links {
background :#fff;
margin :0;
padding :3px 6px;
text-align :center;
font-size :0;
}

#pagination-links a {
background :#f0f0f0;
color :#222;
font-size :13px;
display :inline-block;
margin :1px;
padding :5px;
}

#pagination-links span {
font-size :13px;
display :inline-block;
background :#383838;
color :#fff;
margin :1px;
padding :5px;
}

#pagination-links a:first-child {
background :#07acec;
color :#fff;
content :"Back";
}

#pagination-links a:last-child {
background :#07acec;
color :#fff;
content :"Next";
}

#bottom-content {
background :#fff;
display :block;
font-size :13px;
padding :3px 6px 0;
}

ol, ul {
margin :0;
padding :6px 0;
}

li {
margin :0;
padding :5px 0;
border-bottom :1px solid #ededed;
list-style :none;
}

li ul {
margin :-5px 0;
padding :0;
}

li:last-child {
border-bottom :0;
}

#bottom-content h3 {
font-size :14px;
font-weight :bold;
margin :0;
background :#f0f0f0;
border-bottom :4px solid #e5e5e5;
color :#222;
padding :8px;
text-align :left;
text-transform :uppercase;
}

h3 a, h4 a {
color :#222;
}

#navigation-menu, #category-bottom, #blogroll {
display :block;
margin :0;
padding :0;
}

#navigation-menu ul {
margin :0;
padding :0 0 6px 0;
}

#category-bottom ul:after, #blogroll ul:after {
margin :0;
padding :0;
display :block;
content :"";
clear :both;
}

#category-bottom li {
background :#222;
border-bottom :0;
color :#FFF;
display :inline-block;
float :left;
margin :0 2px 2px 0;
padding :5px;
}

#category-bottom li a {
background :#07acec;
color :#fff;
margin :0 0 0 -5px;
padding :5px;
}

#blogroll li {
background :#068abd;
border-bottom :0;
display :inline-block;
float :left;
margin :0 2px 2px 0;
padding :5px;
}

#blogroll li a {
color :#fff;
margin :0;
}

#comments h3, #navigation-menu h3 {
background :none;
border :none;
font-size :0;
padding :0;
margin :0;
}

#navigation-menu ul li h3 {
font-size :14px;
font-weight :bold;
margin :-7px 0;
background :#f0f0f0;
border-bottom :4px solid #e5e5e5;
color :#222;
padding :8px;
text-align :left;
text-transform :uppercase;
}

#recent-posts-list h4 {
background :none;
color :#222;
font-size :14px;
font-weight :bold;
margin :0;
padding :0;
text-transform :uppercase;
}

#following-list h4 {
font-size :14px;
font-weight :bold;
margin :0;
background :#f0f0f0;
border-bottom :4px solid #e5e5e5;
color :#222;
padding :8px;
text-align :left;
text-transform :uppercase;
}

#recent-posts-list ol, #following-list ol, #blogroll_list ol {
border :none;
margin :6px 0 0;
padding :0;
}

#recent-posts-list li {
margin :0;
}

#footer {
background :#383838;
border-top :4px solid #e5e5e5;
text-align :center;
font-size :13px;
color :#ddd;
padding :6px;
position :relative;
}

#footer a {
color :#fff;
font-weight :normal;
}

#footer #powered-by {
padding :0;
margin : 0;
line-height :13px;
}

#powered-by a {
content :"Mywapblog";
}

#footer h6:after {
color :#fff;
content :"Designed By Blog Eko27";
display :block;
padding :2px 0 0 0;
}

#footer h6 {
font-weight :normal;
padding :3px 0 0 0;
font-size :13px;
}

#footer span {
border :none !important;
color :#fff !important;
background :transparent !important;
font-weight :normal;
}

#footer img {
content :none !important;
}

.highlight, .messages {
background :#fff;
font-size :13px;
font-weight :bold;
text-align :center;
margin :0;
padding :6px;
color :#222;
}

.comment sub {
color :green;
vertical-align :baseline;
}

.comment sup {
color :blue;
vertical-align :baseline;
}

.post-content h2 {
font-size :22px;
}

.post-content h3 {
font-size :19px;
}

.post-content h4 {
font-size :15px;
}

.post-content h5 {
font-size :13px;
}

.post-content h6 {
font-size :11px;
}

.post-content ol, .post-content ul {
margin :6px 0 6px 6px;
padding :0;
}

.post-content ol li {
margin :0;
padding :3px 0;
border-bottom :none;
list-style :inside decimal;
}

.post-content ul li {
margin :0;
padding :3px 0;
border-bottom :none;
list-style :inside disc;
}

.post-content textarea {
border :1px solid #068ABD;
}

.post-content form textarea {
width :85%;
margin :2px 0;
padding :2px;
height :150px;
}

.post-content form [type="text"] {
width :70%;
margin :2px 0;
padding :2px;
}

.post-content form [type="submit"] {
padding :2px;
margin-top :4px;
width :70%;
}

table {
border-collapse: collapse;
border: 1px solid #111;
font-size: 13px;
}

table caption {
background: #FFF;
padding: 5px;
}

table th {
background: #000;
color: #FFF;
padding: 10px 8px;
text-align: center;
text-transform: uppercase;
}

table th a {
color: #FFCC00;
}

table th a:hover {
color: #E2B810;
}

table tr {
border-bottom: 1px solid #fffffe;
}

table tr:nth-child(odd) {
background: #f9f9f9;
}

table tr:nth-child(even) {
background: #f6f6f6;
}

table td {
padding: 6px;
}

table tr:last-child {
border-bottom: 1px solid #111;
}

blockquote {
background: #f5f5f5;
border-left: 4px solid #e5e5e5;
font-style: italic;
margin: 6px 20px;
padding: 8px;
}


/* RESPONSIVE TEMPLATE */


/* WIDTH 240PX */

@media only screen and (max-width: 240px) {
#search-form [type="text"] {
width :70%;
}

#search-form [type="submit"] {
width :30%;
margin :0 0 0 -30%;
}

.thumbnail {
width :30px !important;
height :30px !important;
}

.post:before {
width :30px;
height :30px;
}

.post .post-meta {
overflow :hidden;
padding :0 0 0 36px;
position :relative;
}

.post .post-meta .title a:before {
content :'';
display :block;
float :left;
margin :0 0 0 -36px;
padding :0;
position :relative;
width :30px;
height :30px;
z-index :3;
}

.post-meta2 {
margin :0;
padding :0 0 0 36px;
text-align :left;
}
}


/* WIDTH 320PX */

@media only screen and (max-width: 320px) {
#search-form [type="text"] {
width :76%;
}

#search-form [type="submit"] {
width :24%;
margin :0 0 0 -24%;
}

.thumbnail {
width :40px !important;
height :40px !important;
}

.post:before {
width :40px;
height :40px;
}

.post .post-meta {
overflow :hidden;
padding :0 0 0 46px;
position :relative;
}

.post .post-meta .title a:before {
content :'';
display :block;
float :left;
margin :0 0 0 -46px;
padding :0;
position :relative;
width :40px;
height :40px;
z-index :3;
}

.post-meta2 {
margin :0;
padding :0 0 0 46px;
text-align :left;
}
}


/* WIDTH 640PX */

@media only screen and (min-width: 630px) {
body {
max-width: 630px;
margin :10px auto;
}

#top-content {
margin :0;
padding :0;
}

#top-content:after {
margin :0;
padding :0;
display :block;
content :"";
clear :both;
}

#search-form {
border :1px solid #ededed;
margin :0 6px;
padding :0;
position :absolute;
top :6px;
right :0;
width :220px;
float :right;
}

#search-form [type="text"] {
background :none;
border :none;
display :inline;
font-size :13px;
width :72%;
margin :0;
padding :6px;
color :#222;
float :left;
}

#search-form [type="submit"] {
background :#ffcc00;
border :none;
display :inline;
font-size :13px;
width :26%;
margin :0 0 0 -26%;
padding :6px;
color :#fff;
font-weight :bold;
float :right;
}

#content {
position :relative;
}

#content:after {
margin :0;
padding :0;
display :block;
content :"";
clear :both;
}

.post {
margin: 0 0 6px;
position: relative;
height: 115px;
width: 292px;
display: inline-table;
}

.post:nth-child(odd) {
float: left;
}

.post:nth-child(even) {
float: right;
margin-right: 0;
}

.thumbnail {
width :60px !important;
height :50px !important;
}

.post:before {
width :60px;
height :50px;
}

.post .post-meta {
overflow :hidden;
padding :0 0 0 66px;
position :relative;
}

.post .post-meta .title a:before {
content :'';
display :block;
float :left;
margin :0 0 0 -66px;
padding :0;
width :60px;
height :50px;
position :relative;
z-index :4;
}

.post-meta2 {
padding :0 0 0 66px;
}

#footer {
text-align :left;
position :relative;
}

#footer h6 {
float :right;
font-weight :normal;
margin :0;
padding :0;
position :absolute;
top :6px;
right :6px;
}
}