/**
 * Keystone: CSS
 * Oct 5 2016
 */

/**
 * Globals
 */ 
html {
    height: 100vh;
    font-size: 1em;
}
body {
    height: 100vh;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #D0D0D0;
   /* background: #050505 url(../images/bg/bg.jpg) top center no-repeat;*/
}
a {
    text-decoration: none;
    color: #2b12ef;
}
a:hover {
    text-decoration: underline;    
    color: #3729a7;
}
a:visited {
    color: #2b12ef;
}
h1,h2,h3,h4,h5 {
    margin: 0 0 1em 0;
    padding: 0;
}
h1 {
    margin: 0 0 0 0;
}
h1 a { text-decoration: none; }
h1.underline {
    border-bottom: 1px solid #DDD;
    margin: 0 0 .25em 0;
    padding: 0 0 .25em 0;
}
h2 {
}
h2 a { text-decoration: none; }
h2.underline {
    border-bottom: 1px solid #DDD;
    margin: 0 0 .25em 0;
    padding: 0 0 .25em 0;
}
h3 {
}
h3 a { text-decoration: none; }
h4 {
}
h4 a { text-decoration: none; }
h5 {
}
h5 a { text-decoration: none; }
hr {
    border-width: 0 0 0 0;
    border-top: 1px solid #ddd;
    margin: 0 0 2em 0;
}
strong {
}
em {
}
form {
    padding: 0;
    margin: 0;
}
input[type='text'], input[type='password'] {
    border: 1px solid #aaa;
    padding: .5em;
    background-color: #FFF;
    margin-bottom: .5em;
}
input[type='submit'] {
    background-color: #008000;
    border-width: 0px;
    padding: 1em;
    color: #FFF;
}
.error {
    background-color: #FF0000;
    padding: 1em 1em;
    color: #FFF;
    margin-top: 1em;
}
.small {
    font-size: .9em;
}
.grey {
    color: #aaa;
}
.box {
    border: 1px solid #DDD;
    padding: 1em;
    margin: 0 0 0 0;
    background: #FFF;
}
.notification {
    background-color: #E9FF5B;
    margin-bottom: 1em;
    padding: 1em;
    color: #000;
}

.inline {
    display: inline-block;
}

.control-icon {
    display:inline-block;
    width: 1.25em;
    margin-right: .3em;
    margin-bottom: .3em;
    float:left;
}

.big {
    border: 1px solid #BBB;
    padding: .75em;
}

.dotted-box {
    min-height:5em;
    border:1px dashed #bbb;
    display: inline-block;
    width:100%;
}

.tags { 
    margin-top: 1em;
}

.tags div {
    font-size: .85em;
    display: inline-block;
    margin: 0 .25em .25em 0;
    padding: .25em;
    background-color: #CCC;
    color: #FFF;
}

/**
 * Login page
 */
.login {
    /*background-color: rgba(255,255,255,.2);*/
    padding: 2em;
    color: #555;
    /*border-bottom: 10px solid rgba(255,255,255,.75);*/
}
.login input {
    display: block;
    margin: .5em 0;
}

/**
 * Container
 */
.top-outer {
    display: inline-block;
    position: relative;
    width:100%;
    text-align: center;
    background: #000 url(../images/bg/topnav-bg.png) bottom left repeat-x;
    border-bottom: .25em solid #666;
}
.top {
    display: inline-block;
    position: relative;    
    text-align: left;
    float:left;
    margin: 0;
    padding: .5em 1.5%;
    color: #666;
}
.top a {
    color: #FFF;    
}
.top a img {
    height: 1.5em;
}

.outer {
    display: block;
    position: relative;
    text-align: center;
    width:100%;
}
.inner {
    display: block;
    position: relative;    
    text-align: left;
    padding: 1.5%;
    margin: 0;
    background-color: #f5f5f5;
    width:97.5%;
}

/**
 * Admin
 */
.header {
    padding: 0 0 1em 0;
}
.mobile-header {
    display: none;
}
.profile {
    display: inline-block;
    float: left;
    width: 15%;
    margin: 0 0 0 0;
    padding: 0% 1% 1% 0;
    word-wrap: break-word;
}
.profile img {
    margin: 0 0 1em 0;
}
.right {
    display: inline-block;
    float: right;
    width: 83%;
    margin: 0 0 0 0%;
}
.page-container {
    
}
.admin-controls a {
    display: block;
}
.admin-control {
    
}
.admin-control span {
    color: #DDD;
}
.admin-control a {
    color: #999;
    /*font-size: 90%;*/
    text-decoration: none;
}
.admin-control a:hover {
    color: #333;
}
.admin-control img {
    width: 1.25em;
}
/**
 * Page
 */
.page-title {
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 3em;
    font-size: 1.25em;
    font-weight: bold;
    padding: 0;
    margin: 0;
    color: #FFF;
    width: 70%;
}
.a { 
    padding: 1em;
    width: 280px;
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em;
}
.b { 
    margin-left: .25em;
    width: 70px;
}
.c { 
    margin-left: .25em;
    width: 70px;
}
.d { 
    margin-left: .25em;
    width: 70px;
}
.e { 
    margin-left: .25em;
    width: 70px;
    border-top-right-radius: .25em;
    border-bottom-right-radius: .25em;
}
 .page-title_old {
    background: url("../images/bg/header-bg.png") center left no-repeat;
    background-size: contain;
    height: 3em;
    line-height: 3em;
    font-size: 1.25em;
    font-weight: bold;
    padding-left: .5em;
    color: #FFF;
    width: 70%;
}
.page-config {
    padding: 1em;
    background-color: #F9F9F9;
    margin-bottom: 1em;
    color: #666;
    line-height: 150%;
}

.column {
    margin-bottom: 1em;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    padding: 1em 2em 0 0;
}
.w60 { width: 60%; }
.w40 { width: 40%; }
.w70 { width: 70%; }
.w30 { width: 30%; }

/**
 * Comments
 */
.comments {
    margin: 1em 0 1em 0;
    padding: 1em 0 1em 0;
    color: #555;
    font-size: 95%;
    border-top: 1px solid #e0e0e0;
}

.comment {
    margin: 1em 0 1em 0;
    padding: 1em 0 1em 0;
    border-top: 1px solid #eee;
}

.comment img {
    margin: .5em 0;
}

.comment-left {
    display: inline-block;
    float: left;
    width: 8%;
}

.comment-right {
    display: inline-block;
    float: right;
    width: 91%;
    padding-top: .5em;
}
.reply {
    border-top: 1px solid #f3f3f3;
    margin: 1em 0;
    padding: 1em 0;
}

/**
 * Calendar
 */
.calendar {
    padding: 1em 0;
}

/**
 * Main navigation
 */
.main-navigation {    
    display: inline-block;
    float: right;
    width: 100%;
    /* background: url(../images/bg/nav-bg.png) bottom left repeat-x; */
    padding: 0;
    margin-bottom: 1em;
    border-width: 1px 0;
    padding: 0;
}
.main-navigation ul, .main-navigation li {
    display: inline-block;
    margin: 0;
    padding: 0;
    float: left;
}
.main-navigation a {
    display: inline-block;
    padding: 1.25em 1em;
    text-decoration: none;
    border-right: 5px solid #FFF;
}
.main-navigation a:hover {
    text-decoration: underline;
}

/**
 * Page admin
 */
.configuration {
    background-color: #F0F0F0;
    padding: 1em;
    margin-bottom: 1em;
}

/**
 * User controls
 */
.user-controls, .admin-controls, .profile-summary, .qlink {
    border: 3px solid #e0e0e0;
    padding: 1em;
    margin: 0 0 1em 0;
    -webkit-box-shadow: .25em .25em .25em #F5F5F5;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    .25em .25em .25em #F5F5F5;  /* Firefox 3.5 - 3.6 */
    box-shadow:         .25em .25em .25em #F5F5F5;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    background-color: #fbfbfb;
}

/**
 * Module
 */
.module {
    border: 1px solid #e5e5e5;
    padding: 1em;
    margin: 1em 0;
    -webkit-box-shadow: .25em .25em .25em #e5e5e5;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    .25em .25em .25em #e5e5e5;  /* Firefox 3.5 - 3.6 */
    box-shadow:         .25em .25em .25em #e5e5e5;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    background-color: #FFF;
}
.slider {
     border-width: 10px;
}

.edit-module {
    /*background-color: #F0F0F0;*/
    border: .25em solid #E5E5E5;
    padding: 1em;
}

/**
 * Modules
 */
.module-type-selector {
    background-color: #F5F5F5;
    border: .25em #d0d0d0 solid;
    padding: 1em;
}
.insert-module-link {
    display: block;
    padding: 0;
}
.insert-module {
    display: none;
    padding: 0;
}

/**
 * Calendar
 */
.row {
    border-top: 1px solid #DDD;
    padding: .5em;
}
.odd {
    background-color: #FBFBFB;
}
.date-item {
    display: inline-block;
    width: 46%;
    float: left;
    margin: 1% 1% 0 0;
    padding: 1%;
    border: 1px solid #EEE;
    background-color: rgba(0,0,0,.01);
}

/**
 * Light box
 */
.lightbox {
    display: block;
    padding: 1em;
    background-color: #fbfbfb;
    border: 1px solid #ddd;
    position: absolute; /*relative /* absolute */
    z-index: 9999;
}

/**
 * Media break-points
 */
@media only screen  and (max-width : 950px) {
    html { }   
    .login {
        /*background-color: rgba(255,255,255,.2);*/
        padding: 1em;
        color: #555;
        width: 80%;
        display: block;
        /*border-bottom: 10px solid rgba(255,255,255,.75);*/
    }
    .login input[type='text'] {
        display: block;
        margin: .5em 0;
        width: 99%;
        padding: .5em;
        font-size: 1.2em;
    } 
    .login input[type='password'] {
        width: 99%; 
        margin: .5em 0;
        width: 99%;
        padding: .5em;
        font-size: 1.2em;
    }
    .big {
        padding: 1em;
    }  
    .top a img {
        height: 2.5em;
    }  
    #main-navigation {
        display: none;
    }
    .main-navigation { 
        width: 100%;
        border-width: 0;
        padding: 0;
    }
    .main-navigation ul, .main-navigation li {
        display: block;
        margin: 0;
        padding: 0;
        float: none;
    }
    .main-navigation a {
        display: block;
        color: #000;
        padding: 1em;
        border-bottom: 1px solid #FFF;
        text-decoration: none;
    }
    .main-navigation a:hover {
        text-decoration: underline;
    }
    .header {
        display: none;
    }
    .mobile-header {
        display:block;
        margin-bottom: 2em;
    }    
    .mobile-header form {
        margin-top: 1em;
    }
    .mobile-menu-button {
        display:inline-block;
        float: right;
        width: 20%;
        margin-right: 1em;
    }
    .profile {
        display: none;
    }
    .right {
        display: block;
        float: none;
        width: 100%;
    }
    .column {
        margin-bottom: 1em;
        display: block;
        float: none;
        box-sizing: border-box;
        padding: 1em 2em 0 0;
        width:100%;
    }
    .w60 { width: 100%; }
    .w40 { width: 100%; }
    .w70 { width: 100%; }
    .w30 { width: 100%; }
    .page-title {
        background: none;
        height: 3em;
        line-height: 3em;
        font-size: 1.25em;
        font-weight: bold;
        padding-left: .5em;
        color: #FFF;
        width: 95%;
        background-color: #35679a;
    }
    .admin-control a {
        font-size: 90%;
    }
}

 /*
@media only screen  and (max-width : 1400px) {
    html {
        font-size: 95%;
    }
}
@media only screen  and (max-width : 1300px) {
    html {
        font-size: 90%;
    }
}
@media only screen  and (max-width : 1200px) {
    html {
        font-size: 85%;
    }
}
@media only screen  and (max-width : 1100px) {
    html {
        font-size: 80%;
    }
}
@media only screen  and (max-width : 1000px) {
    html {
        font-size: 75%;
    }
}
@media only screen  and (max-width : 900px) {
    html {
        font-size: 70%;
    }
}
@media only screen  and (max-width : 800px) {
    html {
        font-size: 65%;
    }
}
@media only screen  and (max-width : 700px) {
    html {
        font-size: 55%;
    }
}
*/