@import url("typography.css");
@import url("bootstrap.css");

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,700,800);

body {
  font: 13px "Open Sans", Arial, Helvetica;
}

#wrapper {
    width: 1024px;
    margin: 0px auto;
    box-shadow: 0px 0px 20px #ccc;
}

#top-bar {
  width: 100%;
}

#top-nav{
  float: right;
}

#top-nav li{
  float: left;
  list-style: none;
  font: 12px "Open Sans", Arial;
}

#top-nav li:last-child {
  margin-right: 0;
}

#top-nav li a{ display: block;
padding: 7px 8px;
font-size: 12px;
color: #fff;
text-decoration: none;
}

#top-nav li a:hover {
  color: #036;
}

#clock{ position: absolute;
left: 0;
top: 6px;
font-size: 10px;
color: #fff;
}
#clock strong { padding: 2px 8px;
margin-right: 3px;
background: #ddd;
border-radius: 10px;
color: #444;
}

#editor {
  background: url(../img/theme/edit.png) no-repeat 0 7px;
  text-indent: 10px;
}

#fixed-wrapper {
  position: relative; 
  margin: 0;
  z-index: 999;
}

#primary-header .header{
  position: relative;
  width: 960px;
  height: 120px;
  margin: 10px auto;
  padding: 0;
}

.header .logo {
   width: 55%;
   float: left;
}

.header .logo img {
  padding-top:12px;
  max-width: 100%;
}

.header .social {
   width: 300px;
   float: right;
}

.header .social a { 
   margin: 0;
}

.header .social .icon {
   height:40px;
   color: #fff;
   text-align: right;
}

.icon .fa {
   height:28px;
   width: 28px;
   line-height: 28px;
   text-align: center;
   margin: 6px 0 0;
   font-size: 16px;
   color: #aaa;
   border-radius: 50%;
   transition: all .5s ease .1s;
}

.icon .fa-facebook {
   background: #3B5991;
   color: #fff;
}

.icon .fa-twitter {
   background: #3bf;
   color: #fff;
}

.icon .fa-google-plus , .icon .fa-youtube {
   background: #DB3330;
   color: #fff;
}

.header .schinfo { margin: 10px 0; height: 15px; color: #aaa;}

.header .schinfo .inleft { text-align: right; font: italic 13px Georgia;}
.header .schinfo .incenter { text-align: right; font-size: 23px; font-weight: bold; margin-top: 10px; height:23px; line-height: 23px;}
.incenter .fa { height: 18px; width: 18px; line-height: 18px; font-weight: normal; background: #aaa; border-radius: 50%; 
color: #fff; font-size: 13px; text-align: center; margin-right: 0px;}
.header .schinfo .inright { text-align: right;}

#sub-bar {
  padding: 15px 0;
  margin: 30px 0;
}

#sekolahku {
  background: #f3f3f4;
  width: 960px;
  margin: 0 0 30px; 
  padding :0;
  color: #fff;
  height: 190px;
  overflow: hidden;
}
#sekolahku .kepsek {
  height: 190px; 
  background: #f3f3f4; 
  overflow: hidden;
  width: 600px;
  border-right: 1px dashed #aaa;
  float: left;
}
.kepsek img { width: 160px; float:left; margin:0 20px 20px 0;}
.kepsek h4 { font: bold 18px/18px 'Open Sans'; margin: 15px 15px 10px 0; color: #777;}
.kepsek .fa { margin-right: 15px;}
.kepsek p { color: #888; margin: 0 15px 24px 0;}
.kepsek .kep-more { 
    background: #333;
    width: 130px;
    margin-left: 180px;
    height: 30px;
    line-height: 30px;
    padding: 0px 0px 0px 15px;
}
.kepsek .kep-more a { color: #fff;}
.kepsek .kep-more .fa { margin: 0; height:30px; line-height: 30px; width: 30px; float: right; font-size: 25px; text-align:center; background: #3bf; color: #fff;}

#sekolahku .poll { width: 320px; padding: 0 18px; float: right; color: #888;}
.poll h4 { font: bold 18px/18px 'Open Sans'; margin: 15px 15px 10px 0; color: #777;}
.poll .fa { margin-right: 5px;}
.poll p { margin-bottom: 5px;}
.botpoll { margin-top:10px; overflow: hidden;}
.botpoll button {
    height: 32px;
	font: bold 13px 'Open Sans';
    border: none;
    background: #333;
	color: #fff;
    border-radius: none;
    line-height: 32px;
    padding: 0px 15px;
    margin-right: 3px;
}
.botpoll .jawaban {
    height: 30px;
	font: bold 13px 'Open Sans';
    border: none;
    background: #3bf;
	color: #fff ! important;
    border-radius: none;
    line-height: 30px;
    padding: 8px 15px;
    margin-right: 10px;
	text-transform: uppercase;
}

.information{ margin-bottom: 30px;}
#sekilas_info { float: left; width:32.5%; margin-right: 0.8%;}
#pengumuman { float: left; width:32.5%; margin: 0 0.4%;}
#prestasi { float: left; width:32.5%; margin-left: 0.8%;}
.info-block h4 a { font: bold 13px/1.2 'Open Sans'; color: #727070;
text-shadow: 0 1px 1px #eee;}
.info-block h4 a:hover { text-decoration: underline;}
.info-block p { color: #777;}
.info-block p a { color:#777;}
.info-block p a:hover { color:#444; text-decoration: underline;}

h3.info { 
padding: 10px 15px;
font: bold 16px/20px 'Open Sans';
}
h3.info .fa { float: right; font-size: 20px; line-height: 20px;}

.infose {padding:15px 20px; color: #777;}
.infose .isiinfo { height: 180px;}
.infose h4 {padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dashed #fff;}
.infose p {}

.list-peng {padding:15px; color: #fff;}
.list-peng .peng { height: 180px;}
.list-peng h4{
min-height: 53px;
margin-left: 90px;
margin-bottom: 8px;
}
.list-peng p {padding-bottom: 10px; margin-bottom:10px;}
.list-peng img{
float: left;
width:72px;
height: 54px;
margin: 0 15px 7px 0;
}

#pengumuman .list-peng  h4 { border-bottom: 1px dashed #fff;}
#pengumuman .list-peng p { border-bottom: 1px dashed #fff;}
#prestasi .list-peng  h4 { border-bottom: 1px dashed #fff;}
#prestasi .list-peng p { border-bottom: 1px dashed #fff;}
 
.galeria { margin-bottom: 35px;}
.galeria h4 { padding: 15px 0 0; margin: 15px 2px; color: #3bf;
font: bold 18px/28px "Open Sans"; border-bottom: 2px solid #3bf;}
.galeria h4 a { float:right; padding: 5px 12px; line-height: 18px; background: #3bf; color:#fff; font-size: 14px;}
.galeria .head {margin-right: 8px;}

#galeria-img li {
  list-style: none;
  float: left;
  margin: 2px;
  }
#galeria-img li img {
  display: block;
  width: 116px;
  height: 88px;
}

#gallery-photo li {
  list-style: none;
  float: left;
  margin: 2px;
  }
#gallery-photo li img {
  display: block;
  width: 210px;
  height: 158px;
}

#primary-navigator {
  position: relative;
  width: 100%;
  z-index: 999;
}

#primary-navigator-list {
  width: 960px;
}

.tree-menu,
.tree-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-menu li {
  position: relative;
}

.tree-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.tree-menu > li {
  float: left;
  padding: 8px 10px;
  margin-right: 1px;
}

.tree-menu li:hover > ul,
.tree-menu li.sfHover > ul {
  display: block;
}

.tree-menu a {
  display: block;
  position: relative;
}
.tree-menu ul ul {
  top: 0;
  left: 100%;
}

.tree-menu {
  float: left;
}

.tree-menu ul {
  min-width: 16em;
  *width: 16em;
}

.tree-menu a{ padding: 6px 4px;
text-decoration: none;
zoom: 1;
}
.tree-menu a {
  font: bold 13px/14px 'Open Sans', 'Patua One';
  color: #fff;
}

.tree-menu li {
  white-space: nowrap;
  *white-space: normal;
}
.tree-menu ul li a,
.tree-menu ul ul li a {
  padding: 10px 10px;
  font: bold 13px/14px 'Open Sans', 'Patua One', sans-serif;
}

.tree-menu li:hover {
  -webkit-transition: none;
  transition: none;
}
.tree-menu li:hover a {color: #F9EA68;}
.tree-menu li ul li:hover  a {color: #F9EA68;}
.tree-menu ul ul li:hover {color: #F9EA68;}

.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em;
}
.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #dFeEFF;
  border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: white;
}
.sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF;
  border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: white;
}
.mobimenu {display: none;}
#dd-menu {
  display: none;
}
.widget .livevideo {width: 645px; height: 482px;}

#sub-bar .label-info, #sub-bar .label-warning, #sub-bar .label-success
{ float: left;
padding: 2px 8px;
margin: 1px 10px;
font-weight: normal;
font-size: 10px;
background: #29a9fc;
border-radius: 10px;
text-shadow: none;
}
#news-ticker {width: 800px;
margin: 0 auto;}
#breadcrumb{ float: left }
#news-ticker li{ list-style: none;
color: #5DB2F9;
text-align: center;
width: 800px;
padding: 0;
font: italic 300 22px/28px 'Georgia';
}
#news-ticker li span{
   color: #f90; 
}
#breadcrumb{ padding: 2px 10px;
margin: 25px 0 2px 0;
background: #fafafa;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 0 5px #ccc;
-moz-box-shadow: inset 0 0 5px #ccc;
box-shadow: inset 0 0 5px #ccc;
border: 1px #ddd solid;
}
#breadcrumb li{ float: left;
list-style: none;
margin-right: 8px;
color: #666;
text-transform: uppercase;
font-size: 9px;
}
#breadcrumb li:first-child            { margin: 0 10px 0 0;
padding: 9px;
background: url('../img/theme/qcHomeIcon.png') no-repeat;
}
#breadcrumb li a                      { color: #666;
text-decoration: none;
}
#breadcrumb span.arrow                { float: right;
color: #aaa;
margin-left: 8px;
}
#breadcrumb.single                    { margin-top: 25px }
#search-box{ position: absolute;
right: 0;
top: 0;
}
#search-box input                      { width: 180px;
padding: 11px;
margin: 0;
color: #aaa;
background: #444 url('../img/theme/search.png') top right no-repeat;
border: 0;
}
#search-box input:focus                { outline: none }

#content-wrapper {
  display: -webkit-flex;
  display: flex;
  margin-top: 30px;
}
#main-content {
  float: left;
  width: 673px;
}
#main-content.homepage {
width: 100%;
}

#main-content .widget-title h4 {
  font: 18px/18px 'Open Sans', sans-serif;
  text-align: left;
  margin: 5px 30px 5px 0;
  color: #333333;
  border-bottom: 1px solid #d0d1d5;
}

#main-content .ul-list li {
  list-style: none;
  border-bottom: none;
}

#main-content .widget.more li {padding: 5px 0;}
#main-content .widget.more a {display: inline-block; font-size: 13px; text-decoration: underline;}

.widget .post-list li a {
  color: #171717;
}

.widget .post-list li h4 {
  color: #171717;
}

.widget .post-list li a:hover{
  color: #22a0e0;
}

.widget .post-list li {
  border-bottom: none;
}

.widget .post-list li p{
  color: #333333;
}

.widget .post-list li span {
  color: #171717;
}

.post-list li h4 a{
  color: #ffed8b;
}

.post-list li {
  margin-bottom: 0;
  margin-top: 0;
}
.post-list li p {
  margin: 0 0 8px 0;
  color: #333333;
  font-size: 13px;
  font-family: 'Open Sans', 'lucida grande', Georgia, arial,sans-serif;
}

.post-list li .metadata {
font: 13px 'Open Sans';
color: #1ac;
margin-top:8px;
margin-bottom:8px;
}
.metadata .fa {margin: 0 10px;}

.post-list li h4, .post-list li h4 a {
  font-weight: bold;
}
.post-list li h4 a {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fff;
}

.post-list li h4 a:hover {
  color: #22a0e0;
}

.widget-title h4 {
  font-weight: bold;
}

.widget-title { position: relative }
.widget-title .views-all{ margin: 3px 10px 0 0 }


/* ASIDE SECONDARY */

#aside-secondary {
  color: #555;
  font-size: 13px;
}
#aside-secondary .widget-title h4 {
font: bold 18px/18px 'Open Sans', sans-serif;
text-align: left;
margin: 0;
padding: 10px 15px;
color: #333333;
border-bottom: 1px solid #d0d1d5;
}
#aside-secondary .widget-title h4 .fa { float: right; }
#aside-secondary .widget {
  margin: 0 0 20px 0; padding: 15px;
}
#aside-secondary .widget form p { margin-top: 8px; margin-bottom: 15px;}
#aside-secondary .widget input[type=radio] {
padding: 0;
margin: 5px 10px 5px 0;
vertical-align: middle;
}
#aside-secondary .widget .post-list li p { font: italic 13px 'Lucida Grande'; }
#aside-secondary .widget .post-list li img {
    margin-top: 0px;
    width: 85px;
    height: auto;
	}
#aside-secondary .widget .post-list li .sambut { width: 85px; padding: 6px 15px 26px 0; float:left;}
#aside-secondary a {
  color: #1e6b9c;
}
#aside-secondary a.samkep{
background: #1fa6ea;
margin-left: 95px;
padding: 0 0 0 10px;
height: 30px;
width: 115px;
line-height: 30px;
color: #fff; 
}
#aside-secondary a.samkep:hover {color: #fff; background: #333;}
.samkep .fa {background: #333; color: #fff; width: 30px; height:30px; line-height: 30px; float:right; font-size: 20px; text-align: center;}
#aside-secondary a:hover {
  color: #888;
}

#aside-secondary .ul-list li {
  list-style: none;
  border-bottom: none;
  border-bottom: 1px dashed #bbb;
}

#aside-secondary {
  margin-left: 3px;
  float: left;
  width: 281px;
}

#aside-secondary .post-list li {
  color: #555;
}

#aside-secondary.single{ width: 30.09%;
background: #fafafa;
box-shadow: inset 0 0 10px #ddd;
}


/* ASIDE SECONDARY ENDE */

.qcFeaturedLable{ position: absolute;
width: 106px;
height: 41px;
margin: 35px 0 0 -10px;
background: url('http://smkmadafjombang.sch.id/views/themes/default/assets/img/theme/qcfeatured.png') no-repeat;
z-index: 99;
}
#sub-footer {
padding: 0; margin: 0;
}
#footcont { padding: 20px 35px; color: #fff;}
.footer-title h4 { color: #fff; font: bold 16px 'Open Sans';
letter-spacing: -1px;
padding-bottom: 10px;}
.infooter { width: 25%; padding:0; margin:0; float: left;}
.infooter .list { margin-right: 25px; padding-top: 10px; border-top: 1px dashed #fff;}
.infooter .list h4 { font: bold 14px 'Open Sans'; margin-bottom:10px;}

#footer {
  width: 959px;
  padding: 4px 0 6px 0;
  text-align: center;
  font-size: 12px;
  color: #fff;
  margin: 5px auto 0 auto;
  }

#scrool-top{ position: absolute;
top: 0;
right: 10px;
padding: 3px 10px;
margin-top: -2px;
color: #fff;
font: 600 10px/18px "Open Sans", Arial,  Helvetica;
text-decoration: none;
background: #000;
border-radius: 3px;
border: 0;
}
#scrool-top:hover                      { background: #444 }

.copyright{ width: 50%;
float: left;
color: #fff;
line-height: 20px;
}
.copyright a{ color: #fff;
text-decoration: none;
}
.dev {
width: 50%;
float: right;
text-align: right;
}
.dev .eloper { 
color: #fff;
line-height: 20px;
height: 30px;
padding: 5px 18px;
}
.dev .eloper a { color: #eee; font-weight: bold;}

#copyright-wrapper {
  clear: both;
  padding: 20px 35px;
}

.pagination ul li a                     { border: 0;
color: #666;
border-right: 1px #ddd dotted;
}
.pagination ul li a:hover{
  color: #333333;
}
.pagination ul li:last-child a          { border-right: 0 }
.pagination ul li.active a,
.pagination ul li.active a:hover        { background: transparent;
color: orange;
}
.qcFullwidth{ margin: 15px }
.qcOneColumn{ margin: 10px 0;
width: 100%;
}
.two-column{ float: left;
margin: 10px 20px 10px 0;
width: 455px;
}
.left-columns {
  float: left;
  margin: 10px 20px 10px 0;
  width: 20%;
  min-height:250px;
}

.right-columns {
  margin: 10px 0 10px 0;
  width: 100%;
}
.tree-column                         { float: left;
margin: 10px 20px 10px 0;
width: 296px;
}
.four-column{ float: left;
margin: 10px 20px 10px 0;
width: 217px;
}
.five-column{ float: left;
margin: 10px 20px 10px 0;
width: 170px;
}
.two-column.last,
.tree-column.last,
.four-column.last,
.five-column.last                     { margin-right: 0 }
hr{ border-bottom: 1px dotted #ccc;
height: 1px;
margin: 25px 0;
width: 100%;
}
.the-icons{ list-style: none }
#qcContactMap{ height: 260px;
border-top: 3px #ddd solid;
border-bottom: 3px #ddd solid;
}
#form-wrapper{ margin: 18px 15px 15px 15px }

input[type="submit"]

.form{ margin-top: 20px }
.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form input[type="password"],
.form textarea {
  padding: 9px 10px;
}

.form select{padding: 9px;}
.form .btn-success                    { position: relative;
top: 5px;
padding: 7px;
}
#qcWorldMap img                         { display: block;
width: 100%;
height: auto;
border-bottom: 1px #ddd solid;
}

article.qcBlogEntry                     { margin: 15px }
article.qcBlogEntry .paper-box          {   }
.qcBlogEntry img                        { display: block }
.hover-post-format                      { float: left;
width: 100px;
height: 50px;
border-right: 1px #666 solid;
}
.hover-post-format span                 { position: relative;
top: -5px;
font-family: "Open Sans", Arial, Helvetica;
font-size: 9px;
text-shadow: none;
color: #fff;
}
.hover-post-format-text                 { font-family: "Open Sans", Arial, Helvetica;
font-size: 10px;
text-shadow: none;
color: #fff;
width: 100px;
border-right: 1px #ccc solid;
text-align: center;
padding-top: 5px;
float: left;
margin-top: -4px;
text-transform: uppercase;
}
.hover-post-meta                        { padding: 5px 0;
text-shadow: none;
}
.hover-post-metas                       { float: left;
font-family: "Open Sans", Arial, Helvetica;
font-size: 10px;
padding-right: 4px;
border-right: 1px #ccc solid;
}
.hover-post-meta-like                   { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 22px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -54px no-repeat;
}
.hover-post-meta-like:hover             { color: #ff0000;
background: url('../img/theme/sprite.png') 0px -72px no-repeat;
border: 0;
}
.hover-post-meta-comment                { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 24px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -90px no-repeat;
}
.hover-post-meta-comment:hover          { color: #fff;
border: 0;
background: url('../img/theme/sprite.png') 0px -108px no-repeat;
}
.hover-post-meta-date                   { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 24px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -126px no-repeat;
}
.hover-post-meta-date:hover             { color: #fff;
border: 0;
background: url('../img/theme/sprite.png') 0px -144px no-repeat;
}
.hover-post-format-icon                 { position: relative;
left: 42px;
top: 19px;
float: left;
width: 18px;
height: 18px;
}
.hover-post-title                       { float: left;
padding-left: 15px;
}
.hover-post-head                        { position: relative;
background: #222;
padding: 10px 0 0 0;
overflow: hidden;
}
.hover-post-metas.last                  { border: 0 }
.text-gradient-blog                     { position: absolute;
width: 40px;
height: 60px;
right: 0px;
background: url('http://smkmadafjombang.sch.id/views/themes/default/assets/img/theme/gradient-blog.png');
z-index: 99;
}
.blog-meta{ position: relative;
background-color: #239e5d;
}
.blog-meta .pf-heading                  { position: absolute;
width: 100%;
color: #FFFFFF;
overflow: hidden;
font: 15px/42px 'Patua One',sans-serif;
text-transform: uppercase;
}
.blog-meta .pf-heading a                { position: relative;
color: #FFFFFF;
}
.blog-meta .pf-heading a:hover          { color: #ddd;
border: 0;
}
.post-preview{ position: relative }
.post-preview .centered-btns_tabs      { bottom: 20px }
.post-preview .rslides_container       { padding: 0;
border: 0;
}
.post-preview .centered-btns_nav       { z-index: 999 }
.post-preview blockquote               { padding: 20px;
border-left: 5px #ccc solid;
border-right: 1px #ddd solid;
margin: 0;
background: #fff;
-webkit-box-shadow: inset 0 0 20px #ddd;
-moz-box-shadow: inset 0 0 20px #ddd;
box-shadow: inset 0 0 20px #ddd;
}
.post-preview blockquote small         { margin-top: 10px }
.post-preview img                      { width: 100%;
position: relative;
z-index: 9;
}
.exerpt,
.post-content{ padding: 20px 0 }
.post-content img                      { width: auto;
margin: 0 10px 10px 10px;
}
.blog-pf-link{ width: 100%;
border: 0;
}
.clinkable{ height: 40px;
background: #000;
text-shadow: none;
padding: 0px 8px;
font-family: Courier;
font-size: 12px;
}
.clinkable a{ padding-left: 15px;
text-decoration: none;
color: #fff;
}
.absolute-text{ height: 40px;
overflow: hidden;
font-family: Courier;
font-size: 12px;
line-height: 40px;
padding: 0 0 0 15px;
background: #fff;
border-right: 1px #ddd solid;
-webkit-box-shadow: inset 0 0 15px #ddd;
-moz-box-shadow: inset 0 0 15px #ddd;
box-shadow: inset 0 0 15px #ddd;
}

p.readmore{ padding-top: 20px;
margin-top: 15px;
border-top: 1px #eee solid;
}
.read-more{ color: #666;
position: relative;
top: 1px;
}
p.readmore i{ opacity: 0.6 }

#image-slider {
  position: relative;
  height: 400px;
}
.slides li{ position: relative;
width: 100%;
}
#image-slider li img {
  width: 600px;
  height: 400px;
}
.slides .slide-time {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(10,110,165,0.5);
  padding: 8px 12px;
  color: #fff;
  font-weight: bold;
}
.slides .content {
  position: absolute;
  bottom: 0;
  top: 0;
  right:0;
  width: 280px;
  padding: 50px 40px;
}
#main-content .slides .content h4 a {color: #fff;}
#main-content .slides .content h4 a:hover {color: #036}
.slides span{ padding: 3px 5px;
font: 600 10px/10px "Open Sans", Arial, Helvetica;
background: #cccccc;
border-radius: 1;
}
.slides h4{ font: 18px/22px 'Open Sans', 'Patua One', sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 25px;
padding: 10px 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.slides h4 a{ color: red;
text-decoration: none;
}
.slides h4 a:hover {
  color: #fff;
}

.slides p{ color: #fff;
margin: 0 25px 10px 0;
font-size: 12px;
}

.carousel{ border: 10px #eee solid;
margin-top: 15px;
min-height: 144px;
}
.carousel li{ cursor: pointer;
margin: 0;
}

.widget{ position: relative;
margin: 15px 15px 25px 15px;
}

.widget-title h4  { 
padding: 5px 0;
font: 13px/18px 'Patua One', sans-serif;
color: #000;
text-align: left;
}
.widget-title h4  { 
padding: 7px 0;
text-align: left;
}
.widget p{ margin-top: 8px ; margin-bottom: 8px ;}
#aside-primary .widget h4 { 
padding: 8px 0;
font: 12px/18px 'Patua One', sans-serif;
}
#aside-secondary .widget h4 { 
padding: 8px 0;
font: 12px/18px 'Patua One', sans-serif;
}
#main-content .widget  { 
margin: 20px 30px 30px 0 }
#main-content .widget h4 { 
text-align: left;
text-indent: 10px;
}
#main-content .widget-title h4{
  font-weight: bold;
  margin-bottom: 0px;
}
#main-content .widget-title h4 .fa { float: right;}
#sub-footer .widget > .social  { 
float: left;
width: 310px;
padding: 20px 0 20px 20px;
margin: 0;
border-right: 1px #ddd solid;
}
#sub-footer .widget:last-child  { 
border: 0 }

.ul-list{ margin: 10px 0 }
.ul-list li{ list-style: none;
border-bottom: 1px #ddd dotted;
}
.ul-list li:last-child  { 
border: 0 
}
.ul-list li a{ display: block;
padding: 5px 0;
color: #fff;
text-decoration: none;
font-size: 13px;
}
.ul-list li a:hover { color: #fff; text-decoration: underline;}
.ul-list li a span  { 
float: right;
padding: 0 6px;
border-radius: 10px;
}
.ul-list li:hover span { 
background: #fff; color: #3bf; }

.tag-list{ list-style: none;
margin: 15px 0;
}
.tag-list li{ float: left }
.tag-list li a { 
display: block;
padding: 0 8px;
margin: 2px;
font-size: 9px;
color: #fff;
background: #666;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
}
.tag-list li a:hover{ background: #239e5d }

.last-post{ text-align: justify; }
.last-post img                      { position: relative;
margin: 10px 0 0 0;
width: 100%;
border: 1px #ddd solid;
}
.last-post a.btn                    { margin-top: 7px;
text-decoration: none;
}

.post-list{ list-style: none;
padding: 0 0;
}
.post-list li ul, .post-list li ol {
  padding-left: 15px;
}
.post-list li {
  color: #555;
  padding: 15px 0;
}
.post-list li:last-child               { border: 0 }
.post-list li a {
  display: block;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
}
.post-list li h4                       { border: 0 }
.post-list img                         { float: left;
margin: 10px 20px 10px 0; width: 200px;
height: 150px;
}
.kepala .post-list img { height: auto ! important;}
.post-list .left-columns img {
    height: auto ! important;
    width: 100% ! important;
}
.post-list video {
  float: left;
  margin: 5px 10px 10px 0;
  border: 1px #ddd solid;
}

.post-list li img:hover                { opacity: 0.8 }
.post-list .comment-init a           { font-size: 10px;
color: #666;
}
#main-content .post-list li h4        { text-indent: 0;
  font-size: 18px;
  font-weight: bold;
margin-top: 3px;
}
.views-all{ position: absolute;
right: 50px;
top: 8px;
font-size: 10px;
text-transform: uppercase;
text-indent: 23px;
}
.views-all a{ color: #333333;
text-decoration: none;
}
.views-all a:hover                      { color: #000000 }
.views-all a .badge                     { margin-left: 2px;
padding: 2px 8px;
}

.post-single-list                       { list-style: none;
padding-top: 8px;
}
.post-single-list li                    { border-bottom: 1px #ddd solid;
padding: 20px 10px;
}
.post-single-list li:first-child        { padding-top: 0 }
.post-single-list li a img              { float: left;
width: 190px;
height: 190px;
padding: 5px;
-webkit-box-shadow: 0 0 5px #eee;
-moz-box-shadow: 0 0 5px #eee;
box-shadow: 0 0 5px #eee;
margin-right: 15px;
border: 1px #ddd solid;
}
#main-content .widget .post-single-list h4
{ border : 0;
text-indent: 0;
padding: 0 0 12px 0;
line-height: 24px;
}
.post-single-list h4 a                  { color: #000 }
.post-single-list .comment-init       { float: left;
margin-left: 15px;
}
.post-single-list .exerpt{ margin-top: 30px }
.post-single-list .exerpt .btn          { margin-top: 15px }
.post-single-list .comment-init a     { color: #666 }

.post-col{ list-style: none }
.post-col li{ float: left;
width: 49.8%;
border-right: 1px #ddd dotted;

}
.post-col li:nth-child(even)           { border: 0 }
.post-col li div{ padding: 10px }
.post-col li img{ display: block;
width: 100%;
margin: 0 0 5px 0;
}
.post-col li img:hover                 { opacity: 0.9 }
.post-col li a{ display: block;
font-size: 14px;
color: #000;
border: 0;
text-align: left;
text-decoration: none;
}
#main-content .widget .post-col li h4 { padding-left: 0;
border: 0;
text-indent: 0;
}
.post-col li p{ padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px #ddd solid;
}
.post-col li .comment-init a         { padding-bottom: 5px;
font-size: 10px;
color: #666;
}           

#main-content .widget .tabs {
  margin: 15px 0 0 0;
}

#main-content .widget .tabs li a {
  font: 12px/34px 'Patua One', sans-serif;
  font-weight: bold;
}

.widget .banner{ margin: 0 }

ul.address{ margin-top: -10px }
ul.address li                         { list-style: none;
padding: 8px 0;
font-size: 11px;
border-bottom: 1px #ddd dotted;
}
ul.address li:first-child             { margin-top: 15px }
ul.address li:last-child              { border: 0 }
ul.address li p                       { margin: -16px 0 3px 20px }
ul.address li i                       { position: relative;
overflow: hidden;
margin: 3px 7px 0 0;
}

a {
  text-decoration: none;
}
.ul-list li:hover a,
.post-list li a:hover,
.slides h4 a:hover,
.post-col li a:hover,
#copyright a:hover,
#footerNav ul li a:hover,
#copyright-wrapper li a:hover,
#breadcrumb li a:hover,
.post-single-list h4 a:hover,
.post-single-list .comment-init a:hover,
.pagination ul li a:hover               { color: #ffed8b }
h1,
h2,
h3,
h4,
h5{ font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h1{ font-size: 24px }
h2{ font-size: 18px }
h3{ font-size: 14px }
h4{ font-size: 12px }
h5{ font-size: 10px }
h6{ font-size: 8px }
.dropcap{ font-size: 30px;
margin: 0 3px 5px 0;
text-transform: uppercase;
}
.post-content ul li{ margin-left: 12px }
.post-content p{ margin: 20px 0 }

#sub-footer .widget.last{
  border: 0;
  width: 320px;
}   
#aside-secondary.border{ border-right: 1px #ddd solid; }
#aside-primary.no-border                    { border: 0; }
.qcPara         { padding: 20px; }
img.about         { width: 100%; }
img.left        { float: left; }
img.right         { float: right; }

.widget form label, .widget form p {
  font-weight: normal;
  font-size: 13px;
}

.login input{
  width: 92%;
  padding: 8px;
  background: #f8f8f8;
  border: 1px #ddd solid;
  font-size: 11px;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, .15);
}
.well-lg {
  padding: 24px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}

@media screen and (max-width:1024px) {
#wrapper {
    width: 1024px; margin:0 auto;
}
#image-slider {
  width: 1024px;
  height: 410px; 
}
#image-slider li img {
    width: 690px;
    height: 410px;
}
.slides .content {
    width: 274px;
    height: 350px;
}
.slides h4 {
    font-size: 20px;
    padding: 0 0 10px;
    margin: 30px 0 10px;
}
.more .fb_iframe_widget span, .more .fb_iframe_widget iframe {
    width: 655px !important;
}
#aside-secondary .fb_iframe_widget iframe {
    width: 265px !important;
}
.post-list.berita li p {
   font-size: 12px; 
   }
 #footer-img li img {
    display: block;
    width: 184px;
    height: 145px;
}
}

@media screen and (max-width:768px){
#wrapper {overflow: hidden; width:768px; margin:0 auto;}
.container { width: auto; padding: 0 30px; }
#primary-header .header { width: auto; padding: 0 30px; height: auto; }
.header .logo { float:none; text-align: center; width: 100%; }
.header .logo img { width: 80%;}
.header .social { width: 100%; float: none; min-height:100px;}
.header .social .icon, .header .schinfo .incenter, .header .schinfo .inleft  { text-align: center;}
#clock { left: 30px;}
#primary-navigator  { display: none;}

.mobimenu { display: block;}
.mobimenu #openmobi {height: 50px; background: #036; text-align: center;}
.mobimenu #openmobi span { font: bold 20px/50px 'Open Sans'; color: #fff; text-align: center; }
.mobimenu .accordion { list-style: none; padding: 0; margin: 0 0 30px; border: none;}
.mobimenu .accordion ul { padding: 0; margin: 0; float: left; display: block; width: 100%; }
.mobimenu .accordion li { background: #3bf; cursor: pointer; list-style: none; padding: 0; margin: 0; float: left; display: block; width: 100%;}
.mobimenu .accordion li.level1 { cursor: pointer; list-style: none; padding: 0; margin: 0; float: left; 
background: #3bf url('../img/theme/open.gif') no-repeat center right; display: block; width: 100%;}
.mobimenu .accordion li.active>a { color: #fff; background: url('../img/theme/close.gif') no-repeat center right; }
.mobimenu .accordion li div { padding: 20px; background: #aef; display: block; clear: both; float: left; width: 360px;}
.mobimenu .accordion a { text-decoration: none; border-bottom: 1px solid #4df; font: bold 14px/16px 'Open Sans', sans-serif; 
color: #fff; padding: 15px 20px; display: block; cursor: pointer;}
	
	/* Level 2 */
.mobimenu .accordion li ul li { background: #036;}
.mobimenu .accordion li ul li.level2 { background: #036 url('../img/theme/open.gif') no-repeat center right ;}
.mobimenu .accordion li ul li a{ border-bottom: 1px solid #0B427A; }
.mobimenu .accordion li ul li ul li {background: #0B4278}
   
#image-slider { width: 708px; height: 330px; }
#image-slider li img { width: 440px; height: 330px; } 
.slides .content { width: 228px; padding: 25px 20px; height: 280px; }
.slides p {font-size: 12px;}
.slides h4 { font-size: 16px; padding: 10px 0; margin: 20px 0 10px; }
#news-ticker, #news-ticker li {width: 600px; margin: 0 auto;}
#sekolahku {width: 100%; height: auto;}
#sekolahku .kepsek {
  height: 190px; 
  background: #f3f3f4; 
  overflow: hidden;
  width: auto;
  border-right: none;
  float: none;
  padding: 0; margin: 0;
}
#sekolahku .poll { width:auto; padding: 20px; float: none; background: #eee;}
#sekilas_info, #pengumuman, #prestasi { width: 100%; margin:0;}
.info-block h4 a { font: bold 15px/1.2 'Open Sans';}
.list-peng, .infose { padding: 30px;}
h3.info { padding: 10px 30px; }
.infose .isiinfo, .list-peng .peng { height: auto; margin-bottom: 20px; }
.list-peng img { float: left; width: 200px; height: 150px;}
.list-peng h4 { min-height: 53px; margin-left: 220px;}
.list-peng p { margin-left: 220px;}
#pengumuman .list-peng p, #prestasi .list-peng p { border-bottom: none; }
#pengumuman .list-peng h4, #prestasi .list-peng h4 { border-bottom: 1px dashed #fff; margin-top: 10px; }
#galeria-img li img, #gallery-photo li img { width: 173px; height: 130px;}
.infooter { width: 50%;}

#main-content { width: 100%; float: none;}
#main-content .widget-title h4 { margin: 5px 0;}
#main-content .widget { margin: 30px 0;}
#main-content .fb_iframe_widget span, .more .fb_iframe_widget iframe { width: 700px !important;}
#main-content .widget canvas {width: 100%;}
#main-content .widget form { margin-bottom: 20px; }
.widget .livevideo {width: 708px; height: 530px;}

#aside-secondary { float: none; width: 100%; margin-top: 120px;}
#aside-secondary .widget { padding: 30px;}
#aside-secondary .widget .post-list li p { font: 14px 'Open Sans'; margin-top: 30px;}
#aside-secondary .widget .post-list li img { margin-top: 0px; width: 160px;}
#aside-secondary .widget .post-list li .sambut { width: 165px; padding: 6px 15px 0 0; float:left;}
#aside-secondary .widget-title h4 { padding: 15px 30px;}
#aside-secondary a.samkep { margin-left: 200px;}
#content-wrapper {display: block;}
#footer-img li img { display: block; width: 133px; height: 110px; }
}

@media screen and (max-width:640px) {
#wrapper { width: 100%;}
#image-slider { width: 580px; height: 270px; }
#image-slider li img { width: 360px; height: 270px; } 
.slides .content { width: 198px; padding: 10px 15px; height: 250px; }
.slides p {font-size: 12px;}
.slides h4 { font-size: 16px; padding: 10px 0; margin: 20px 0 10px; }
.fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 580px !important;
}
.widget .livevideo {width: 580px; height: 345px;}
#galeria-img li img, #gallery-photo li img { width: 141px; height: 105px;}
}

@media screen and (max-width:600px) {
#wrapper { width: 100%;}
#image-slider { width: 540px; height: 240px; }
#image-slider li img { width: 320px; height: 240px; } 
.slides .content { width: 198px; padding: 10px 15px; height: 230px; }
.slides p {font-size: 12px;}
.slides h4 { font-size: 14px; line-height:16px; padding: 5px 0; margin: 0 0 10px; }
#news-ticker { width: 500px;}
#news-ticker li { width: 500px; font: italic 300 18px/22px 'Georgia';}
#sekolahku .kepsek { height: auto;}
#pengumuman .list-peng h4, #prestasi .list-peng h4 { margin-top: 0; min-height: auto; padding-bottom: 8px;}
.fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 530px !important;
}
.widget .livevideo {width: 540px; height: 405px;}
#galeria-img li img, #gallery-photo li img { width: 131px; height: 98px;}
}

@media screen and (max-width:480px) {
#wrapper { width: 100%;}
#image-slider { width: 420px; height: 315px; }
#image-slider li img { width: 420px; height: 315px; } 
.slides .content { bottom:0; left:0; right:0; top: auto; width: auto; padding: 10px 15px; height: auto; }
.slides p {display: none;}
.slides h4 { font-size: 14px; line-height:16px; padding: 5px 0; margin: 0 ; border:0;}
#news-ticker { width: 400px;}
#news-ticker li { width: 400px; font: italic 300 18px/22px 'Georgia';}
#sekolahku .kepsek { height: auto;}
.kepsek p { margin-left:15px;}
.list-peng, .infose { padding: 15px; }
#pengumuman .list-peng h4, #prestasi .list-peng h4 { margin-top: 0; padding-bottom: 8px; margin-left: 95px; min-height: 50px;}
.list-peng p { margin-left: 0;}
.list-peng img { width: 80px; height: 60px;}
#galeria-img li img, #gallery-photo li img { width: 101px; height: 75px;}

.fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 410px !important;
}
.widget .livevideo {width: 420px; height: 315px;}
.footer-title h4 {padding-top: 30px;}
}

@media screen and (max-width:360px) {
.header .logo img { width: 100%;}
.container, #primary-header .header { padding:0 20px;}
.header .social { width: 100%; float: none; min-height: 120px;}
#clock { left: 20px;}
#top-nav li a { display: block;padding: 7px 0 7px 7px;}
#image-slider { width: 320px; height: 225px; }
#image-slider li img { width: 320px; height: 225px; } 
.slides .content { bottom:0; left:0; right:0; top: auto; width: auto; padding: 10px 15px; height: auto; }
.slides h4 { font-size: 14px; line-height:16px; padding: 5px 0; margin: 0 ; border:0;}
#news-ticker { width: 280px;}
#news-ticker li { width: 280px; font: italic 300 14px/18px 'Georgia';}
.kepsek img { width: 100px;}
.kepsek .fa-microphone {display: none;}
.kepsek .kep-more {margin-left:15px;}
.list-peng img { width: 80px; height: 60px;}
.galeria h4 {font: bold 14px/28px "Open Sans";}
.fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 300px !important;
}
.widget .livevideo {width: 300px; height: 225px;}
.views-all { right: 0px;}
#galeria-img li img, #gallery-photo li img { width: 156px; height: 115px;}

.post-list img { width: 100%; height: auto; margin: 0 0 30px;}
#main-content .widget-title h4 .fa {display: none;}
#aside-secondary .widget, #aside-secondary .widget-title h4 { padding: 15px;}
#aside-secondary a.samkep { margin-left: 0;}

.infooter { width: 100%; }
.infooter .list { margin-right: 0;}
#footcont {padding: 20px ;}
.copyright, .dev {width: 100%; float: none; text-align: center;}
}

@media screen and (max-width:320px) {
#image-slider { width: 280px; height: 210px; }
#image-slider li img { width: 280px; height: 210px; } 
.fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 260px !important;
}
.widget .livevideo {width: 280px; height: 210px;}
#galeria-img li img, #gallery-photo li img { width: 136px; height: 100px;}
}