/*
    font content = font-family: "Open Sans", sans-serif;
    font title = font-family: 'Arvo', serif;
    rec colour = #CC4E3F

*/


/* GENERAL */
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

HTML,
BODY {
    padding: 0;
    margin: 0;
}

BODY {
    font-family: "Open Sans", sans-serif;
    color: #333;
    font-size: 14px;
    background: #FFF url(../images/bg/bg-body.jpg) center top no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

A {
    transition: color 0.2s;
     -webkit-transition: all 0.3s;
    color: #333;
    text-decoration: none;
}

A:hover {
    text-decoration: none;
    color: #555;
}

A IMG {
    border: 0;
}

p {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.4em;
}


/* LAYOUT */
.section {
    padding: 0;
    margin: 0;
}
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 40px;
}
.wrap:after {
    display: block;
    content: "";
    clear: both;
}
.wrap-header {
    padding: 20px 40px;
}
H1, H2, H3, H4, H5, H6 {
    font-family: 'Arvo', serif;
}
.row:after {
    display: block;
    content: "";
    clear: both;
}
.row .col {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
}
.row .col:last-child {
    margin-right: 0;
}
.row .col-1 {
    width: 35%
}
.row .col-2 {
    width: 47%
}
.row .col-3 {
    width: 60%
}
.row .col-4 {
    width: 95%
}



/* HEADER */
HEADER {
    background: rgba(0,0,0,0.2);   
}
HEADER .wrap {
    text-align: center;
}


/* NAVIGASI TOP */
.nav-top {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #cc4e3f;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}
.nav-top LI {
    display: table-cell;
    width: 33.33%;
    text-align: center;
    vertical-align: top;
    padding: 0;
}
.nav-top LI:hover {
    background: #30C5CB
}
.nav-top LI.active {
    background: #30C5CB!important
}
.nav-top A {
    display: block;
    color: #FFF;
    padding: 15px 20px;
}

.nav-user {
    padding: 0;
    margin: 10px;
    list-style: none;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
}
.nav-user > LI {
    display: inline-block;
    margin-left: 8px;
}
.nav-user > LI A {
    display: block;
    border-radius: 5px;
    background: #CCC;
    padding: 4px 8px;
    font-size: 11px;
}

/* KONTEN */
.page-content {
    background: #FFF;
    min-height: 450px;
    padding: 40px;
    border-bottom: 6px solid #30c5cb;
}
.page-title {
    text-align: center;
    margin: 20px 0 50px;
}
.page-title H1 {
    margin: 0;
    font-size: 25px;
    font-weight: 400;
}

.list-horizontal-3 {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    width: 100%;
    text-align: center;
}
.list-horizontal-3 > LI {
    width: 27%;
    margin: 0 15px;
}
.list-shortcut {
    margin-top: 50px;
}
.list-shortcut > LI {
    background: #FFF;
    display: inline-block;
    vertical-align: top;
    position: relative;
    transition: all ease-out 0.2s;
}
.list-shortcut > LI:hover {
    box-shadow: 0px 3px 9px 1px #000000b8;
    transform: translateY(-5px);
}
.list-shortcut-content {
    bottom: 0;
    padding: 30px;
    width: 100%;
}
.list-shortcut-desc {
    font-size: 12px;
    text-align: center;
    height: 130px;
}
.list-shortcut-title {
    font-family: 'Arvo', serif;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    word-wrap: break-word
}
.list-shortcut-img {
    width: 100%;
    height: 200px;
}
.list-shortcut-action {
    margin-top: 12px;
    text-align: center;
}

.list-shortcut-blue .list-shortcut-content {
    background: rgba(48,197,203, 0.9);
}
.list-shortcut-yellow .list-shortcut-content {
	background: rgba(239,200,109, 0.9);
}
.list-shortcut-green .list-shortcut-content {
    background: rgba(201,225,101, 0.9);
}
.list-shortcut-blue .list-shortcut-list A:hover {
    background: #30c5cb
}
.list-shortcut-yellow .list-shortcut-list A:hover {
    background: #efc86d
}
.list-shortcut-green .list-shortcut-list A:hover {
    background: #c9e165
}

.list-shortcut .daftar-siswa .list-shortcut-img {
    background: url(../images/bg/program.jpg) no-repeat center top;
    background-size: cover;
}
/* .list-shortcut .daftar-ekskul-sd .list-shortcut-img {
    background: url(../images/bg/kurikulum.jpg) no-repeat center top;
    background-size: cover;
}
.list-shortcut .daftar-ekskul-tk .list-shortcut-img {
    background: url(../images/bg/join-us.jpg) no-repeat center top;
    background-size: cover;
} */


ul.sidemenu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 90%;
    font-size: 12px;
}
ul.sidemenu > LI {
    display: block;
    border-bottom: 1px solid #CCC;
}
ul.sidemenu > LI:first-child {
    border-top: 1px solid #CCC;
}
ul.sidemenu > LI:hover {
    background: #EEE;
}
ul.sidemenu A {
    display: block;
    padding: 10px 15px;
    text-transform: uppercase;
}
ul.sidemenu > LI.active {
    background: #EEE;
    color: #cc4e3f;
    font-weight: 600;
}
ul.sidemenu > LI.active A {
    color: #cc4e3f;
}
ul.sidemenu > LI.active A:after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #cc4e3f;
    margin-left: 10px;
    margin-bottom: 4px;
    vertical-align: middle;
}
ul.sidemenu LI.unduh_file {
    background: #cc4e3f;
    color: #FFF;
    margin-bottom: 5px;
    text-align: center;
}
ul.sidemenu LI.unduh_file A {
    color: #FFF;
}

.page-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-menu > LI {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #30c5cb;
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 5px;
    color: #FFF;
}
.page-menu > LI A{
    color: #FFF   
}


.list-box {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-box LI {
    width: 45%;
    display: inline-block;
    vertical-align: top;
}
.list-box LI A {
    display: block;
    background: #EEE;
    padding: 12px 15px;
    margin: 5px;
    font-weight: 600;
}
.list-box LI A:hover {
    background: #DDD;
}

.box-login {
    width: 590px;
    margin: 30px auto;
}
.export-data {
    margin: 20px 0;
    text-align: right;
}


/* FOOTER */
.footer-top {
    background: #FFF;
    text-align: center;
    padding: 40px 0;
}
.footer-top > DIV {
    display: inline-block;
    margin: 0 20px;
}
.footer-top P {
    margin-top: 8px;
}
.footer-bottom {
    background: #cc4e3f;
    color: #FFF;
    padding: 20px 40px;
}
.footer-bottom-left {
    float: left;
}
.footer-bottom-right {
    float: right;
}
.socmed-top SPAN {
    display: inline-block;
    margin-right: 10px;
}
.socmed-top IMG {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

.tab-navigasi-table {
    margin-bottom: 20px;
    background: #EEE;
    padding: 10px 20px;
    text-align: center;
}
.tab-navigasi-table A {
    display: inline-block;
    margin: 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}
.tab-navigasi-table A:hover {
    color: #cc4e3f;
}


table.table-data {
    font-size: 11px;
    width: 100%;
}
table.table-data TH {
    background: #cc4e3f;
    font-size: 10px;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px;
}
table.table-data TD {
    border-bottom: 1px solid #CCC;
    padding: 8px 2px;
    vertical-align: top;
}
table.table-data TR:nth-child(odd) TD {
    background: #EEE
}



/* FORM */
table.table-form {
    width: 100%;
}
table.table-form tbody {
    width: 100%;
}
table.table-form TD {
    padding: 10px;
    vertical-align: top
}
table.table-form INPUT[type=text], 
table.table-form INPUT[type=email], 
table.table-form INPUT[type=password], 
table.table-form TEXTAREA,
table.table-form SELECT {
    width: 100%;
    padding: 4px 15px;
    border: 1px solid #CCC;
}
span.input-desc {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}
.form-warning {
    display: block;
    background: #cc4e3f;
    color: #FFF;
    padding: 5px 10px;
    font-size: 11px;
    text-transform: capitalize;
    margin-top: 0;
}

.btn-view-data {
    display: block;
    background: #30c5cb;
    color: #FFF;
    padding: 10px 20px;
    text-transform: uppercase;
    margin-top: 50px;
    text-align: center
}
.select-smaller {
    font-size: 12px;
    padding: 4px!important;
}



/* BUTTON */
.button {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  border: none;
  text-transform: uppercase;
  background-color: #CC4E3F;
  border: 1px solid #a5645d;
  color: #FFF;
}
.button:hover {
  background-color: #DD8980;
  color: #FFF;
  -webkit-transition: background 200ms ease;
  -moz-transition: background 200ms ease;
  -o-transition: background 200ms ease;
  -ms-transition: background 200ms ease;
  transition: background 200ms ease;
}
.button.small {
  padding: 5px 18px;
  font-size: 12px;
}
.button.medium {
  padding: 12px 28px;
  font-size: 14px;
}
.button-line-white {
    background-color: transparent!important;
    border: 1px solid #FFF!important;
}
.button-line-white:hover {
    background-color: #FFF!important;
    color: #333
}
.button-line-black {
    background-color: transparent!important;
    border: 1px solid #333!important;
    color: #333!important;
}
.button-line-black:hover {
    background-color: #333!important;
    color: #FFF!important;
}


/* LAIN-LAIN */
.clear {
    clear: both;
}
hr.divider {
    margin: 30px 0;
    border: 1px solid #EEE;
}
.body-nobg {
    background: #FFF!important;
}
.bg-yellow {
    background: #EFC86D
}
.box-success {
    background: #c9e165;
    padding: 15px 20px;
    border: 1px solid #adc159;
    text-align: center
}
.box-info {
    background: #cefdff;
    padding: 15px 20px;
    border: 1px solid #b2f4f7;
    text-align: center;
}
.box-warning {
    background: #EFC86D;
    padding: 15px 20px;
    border: 1px solid #EAB537;
    text-align: center
}
.box-error {
    background: #FDC502;
    padding: 15px 20px;
    border: 1px solid #cc9e00;
    text-align: center
}
.chromeframe {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    color: #FFF;
    margin: 0;
    padding: 30px 20px;
    background: #C00000;
    z-index: 9999999999999999999;
    text-align: center;
}

.chromeframe A {
    color: yellow;
}