/*

Colours     :   Blue    #298CAD (Logo))
            :   Blue    #C0E0EA (<thead>))

Sections    :   LOGO (@import)
            :   DEFAULT
            :   TYPOGOGRAPHY
            :   LOGIN
            :   LAYOUT
            :   PAGE HEADINGS
            :   TABS
            :   MENU
            :   GALLERY
            :   FORMS
            :   ERRORS
            :   FOOTER
            :   FLASH MESSAGE
            :   TABLES
            :   LOG
            :   TESTING
            :   RESPIONSIVE TESTING

*/

/*  LOGO  ------------------------------------------- */
/*  ------------------------------------------------   */
@import url('mwcsslogo.css');

/*  DEFAULT  ---------------------------------------   */
/*  ------------------------------------------------   */

body {
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

/*  TYPOGOGRAPHY  ----------------------------------   */
/*  ------------------------------------------------   */

h1,h2,h3,h4,h5,h6,button,a.btn,blockquote {
    margin:0;
    padding:0;
    color: #555;
    font-family: sans-serif;
    font-weight:400;
}

h2 {    font-size: 26px; }
h3 {    font-size: 20px; }
h4 {    font-size: 16px; }

a {
    color: #7b7b7b;
    word-wrap: break-word;
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
            transition: color 0.2s ease-in, background 0.2s ease-in;
}

a:before, a:after {
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
            transition: color 0.2s ease-in, background 0.2s ease-in;
}

a:hover,
a:focus {
    /*color: #ffffff;*/
    text-decoration: none;
    outline: 0;
}

a.info {
    color: #666;
    font-size: 20px;
}

a.siteLink {
    color: #666;
    font-size: 14px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

span.external {
    display:inline-block;
    width: 10px;
    height: 10px;
    background: url('../graphics/external.png') no-repeat;
    padding-right: 15px;
}

span.normal {
    font-weight: normal;
}

.padBorder {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

span.glyphicon {
    font-size: 16px;
    text-align:center;
}

i:hover {
    cursor: help;
}

/* LOGIN  -------------------------------------- */
/* --------------------------------------------- */

#login {
    margin: 100px auto;
    width: 300px;
}

#login h1 {
    display: none;
}

#loginLogo {
    position: relative;
    height: 80px;
    background: url(../graphics/padlock.png) no-repeat top left;
}

#loginLogo > #logo {
    top: 25px;
    left: 70px;
}

#login h2 {
    font-size: 16px;
    line-height: 40px;
    color:#666;
    text-shadow: 2px 2px 4px #FFF;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    margin-bottom: 15px;
}

#login h3 {
    font-size: 11px;
    color:#666;
    padding-top: 5px;
    border-top: 1px solid #ccc;
}

#login h3 span {
    float:right;
}

/* LAYOUT  ------------------------------------- */
/* --------------------------------------------- */

#logoWrapper {
    position:absolute;
    top:  6px;
    left: 0;
}

#parent {
    /* Pad the top for the fixed Navigation */
    margin-top: 50px;
    /* Pad the bottom for the fixed Footer */
    margin-bottom: 50px;
    /* #menu/#main fill the space between the fixed Navigation and Footer */
    display: flex;
    min-height: calc(100vh - 100px);
}

#main {
    position: relative;
    padding: 10px;
    overflow:hidden;
    flex: 1;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

/* PAGE HEADINGS  ------------------------------------- */
/* ---------------------------------------------------- */

#main h2 {
    background-position: 4px 4px;
    background-repeat: no-repeat;
    background-size: 22px;
    padding-left: 33px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}
#main h2#dashboard   { background-image: url('../graphics/admin.png');      }
#main h2#homepage    { background-image: url('../graphics/pages.png');      }
#main h2#navigation  { background-image: url('../graphics/nav.png');        }
#main h2#gallery     { background-image: url('../graphics/gallery.png');    }
#main h2#users       { background-image: url('../graphics/users.png');      }
#main h2#tables      { background-image: url('../graphics/default.png');    }
#main h2#forms       { background-image: url('../graphics/list.png');       }
#main h2#log         { background-image: url('../graphics/database.png');   }
#main h2#blog        { background-image: url('../graphics/blog.png');       }
#main h2#faq         { background-image: url('../graphics/legend.png');     }
#main h2#link        { background-image: url('../graphics/link.png');       }
#main h2#documents   { background-image: url('../graphics/documents.png');  }
#main h2#categories  { background-image: url('../graphics/categories.png'); }

/* TABS  --------------------------------------- */
/* --------------------------------------------- */

.nav-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #298CAD;
}

.nav-tabs li.active a,
.nav-tabs li.active a:hover {
    border-top: 2px solid #298CAD;
}
.nav-tabs li.inactive a:hover {
    border-top: 1px solid #298CAD;
}

/* MENU  --------------------------------------- */
/* --------------------------------------------- */

#menu {
    padding: 0;
    width:170px;
    flex-shrink: 0;
}

#menu ul {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
}

#menu li {
    border-bottom: 1px solid #ccc;
}

#menu li:first-child {
    margin-top: 10px;
}

li.menu a.dashboard  { background-image: url('../graphics/admin.png');      }
li.menu a.navigation { background-image: url('../graphics/nav.png');        }
li.menu a.homepage   { background-image: url('../graphics/pages.png');      }
li.menu a.users      { background-image: url('../graphics/users.png');      }
li.menu a.gallery    { background-image: url('../graphics/gallery.png');    }
li.menu a.blog       { background-image: url('../graphics/blog.png');       }
li.menu a.link       { background-image: url('../graphics/link.png');       }
li.menu a.forms      { background-image: url('../graphics/list.png');       }
li.menu a.sitemap    { background-image: url('../graphics/sitemap.png');    }
li.menu a.tables     { background-image: url('../graphics/default.png');    }
li.menu a.log        { background-image: url('../graphics/database.png');   }
li.menu a.faq        { background-image: url('../graphics/legend.png');     }
li.menu a.documents  { background-image: url('../graphics/documents.png');  }
li.menu a.categories { background-image: url('../graphics/categories.png'); }

li.menu a.dashboard,
li.menu a.navigation,
li.menu a.homepage {
    background-position: 10px 10px;
    line-height: 30px;
}

/*li.menu a.widgets,*/
li.menu a.users,
li.menu a.gallery,
/*li.menu a.subs,*/
li.menu a.blog,
/*li.menu a.guestbook,*/
li.menu a.link,
/*li.menu a.portfolio,*/
li.menu a.forms,
li.menu a.sitemap,
li.menu a.tables,
li.menu a.log,
li.menu a.faq,
li.menu a.documents,
li.menu a.categories /*,
li.menu a.help */ {
    background-position: 10px 6px;
    line-height: 22px;
}

li.menu a {
    background-repeat: no-repeat;
    position:relative;
    display:block;
    padding: 10px 0 10px 60px;
    font-size: 12px;
    color: #333;
}

li.menu.selected,
li.menu a:hover {
    font-weight: bold;
    text-decoration: none;
}

li.menu.selected a:hover {
    cursor: default;
}

/* GALLERY   ------------------------------------- */
/* ----------------------------------------------- */

#imageGallery {

}

#imageGallery .imageOuter {
    height: 220px;
    padding:0;
}

#imageGallery .imageInner {
    margin: 5px;
    position: relative;
    height: 210px;
    border: 1px dotted #ccc;
}
#imageGallery .imageInner:hover {
    border: 1px dotted #999;
}

#imageGallery .imageInner .image {
    text-align: center;
    padding-top: 2px;

}

#imageGallery .imageInner .imageDetail {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #F0F0F0;
    padding: 5px;
}

#imageGallery .imageInner .imageActions {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 5px;
    display:none;
}

#imageGallery .imageInner:hover .imageActions {
    display:block;
}

#imageGallery .imageInner .imageActions .edit {
    position: absolute;
    top: 2px;
    left: 2px;
}

#imageGallery .imageInner .imageActions .delete {
    position: absolute;
    top: 2px;
    right: 2px;
}


/* FORMS   ------------------------------------- */
/* --------------------------------------------- */

span.tip {
    font-size: 11px;
    color: #666;
    font-style: italic;
    white-space: nowrap;
}

.error,
select.error,
textarea.error,
input.error {
    border: 1px solid red !important;
}


/* ERRORS   ------------------------------------ */
/* --------------------------------------------- */

.errors {
    border: 1px dotted red;
    background-color: #FFE0E0;
    padding: 10px;
}

/* FOOTER   ------------------------------------ */
/* --------------------------------------------- */

#footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    border-top: 2px solid #298CAD;
    padding: 10px 20px;
    background: #555;
    z-index: 100;
}

#footer p {
    padding: 5px 0;
    color:#ddd;
}

#footer a {
    color:#ddd;
}

/* FLASH MESSAGE  ------------------------------ */
/* --------------------------------------------- */

#flashMsg {
    position:absolute;
    top: 1px;
    left: 0;
    width: 100%;
    text-align: center;
}

#flashMsg .success h3 {
/*    background-image: url(/graphics/accept.png);
    background-repeat: no-repeat;
    background-position: 7px 12px;*/
    padding: 12px 30px;
}

#flashMsg .error h3 {
/*    background-image: url(/graphics/error.png);
    background-repeat: no-repeat;
    background-position: 7px 12px;*/
    padding: 12px 30px;
}

#flashMsg .success {
    border: 1px solid #449D44;
    background:rgba(68,157,68,0.2);
}
#flashMsg .error {
    border: 1px solid #FF0000;
    background:rgba(255,0,0,0.2);
}


/* TABLES  ------------------------------------- */
/* --------------------------------------------- */

.table {
    margin-bottom: 10px;
}

th {
    white-space: nowrap;
}

tbody th {
    background-color: #F0F0F0;
}

tr.spacer, thead tr {
    background-color: #C0E0EA;
}

.table tr.spacer td {
    height: 3px;
/*    padding:0px;*/
}

tr.parent {
    background-color: #f0f0f0 !important;
}

td.slideThumb {
    width: 200px;
    padding: 10px 15px !important;
}

.w30  {  width:  40px;    text-align: center;   }
.w50  {  width:  50px;    }
.w65  {  width:  65px;    }
.w70  {  width:  70px;    }
.w85  {  width:  85px;    }
.w100 {  width: 100px;    white-space: nowrap   }
.w150 {  width: 150px;    white-space: nowrap   }
.w200 {  width: 200px;    white-space: nowrap   }
.w250 {  width: 250px;    white-space: nowrap   }
.w300 {  width: 300px;    white-space: nowrap   }
.w350 {  width: 350px;    white-space: nowrap   }

.m100 {  min-width:100px; white-space: nowrap  }
.m200 {  min-width:200px; white-space: nowrap  }
.m300 {  min-width:300px; white-space: nowrap  }

/* Drag-n-Dropable tables */

tr.draggable td {
    background-image: url('../graphics/crosshatch.gif');
    background-repeat: repeat;
    cursor: move;
}

td.dragHandle button:hover,
td.dragHandle button:focus {
    cursor: move;
}

/* Callouts - admin preview (Admin::CALLOUT_STYLES). A new style needs a
   .callout-<key> rule here; unknown keys render as .callout-info. */

.callout {
    border: 1px solid;
    border-left-width: 5px;
    padding: 10px;
}
.callout p:last-child {
    margin-bottom: 0;
}
.callout-error   { border-color: #d9534f; background: #fdf2f2; }
.callout-warning { border-color: #f0ad4e; background: #fdf8ec; }
.callout-info    { border-color: #298cad; background: #eff7fa; }

tr.calloutInactive td {
    opacity: 0.5;
}

/* Column-heading row under the blue title row - grey, like tbody th */
#calloutListing thead tr + tr {
    background-color: #F0F0F0;
}

/* ----------------------------------------- */

#sql {
    padding: 0 20px;
}

/* LOG  ------------------------------------ */
/* ----------------------------------------- */

#logTable {
    font-size: 12px;
}

/* TAGS (backlog #107)  ------------------------- */
/* --------------------------------------------- */
.tagChoice {
    display: inline-block;
    font-size: 14px;
    padding: 6px 12px;
    margin: 0 6px 8px 0;
    cursor: pointer;
}
.tagChoice.label-default {
    background-color: #eeeeee;
    color: #555555;
}
.tagChoice::before {
    margin-right: 5px;
}
.tagChoice.label-default::before {
    content: "+";
}
.tagChoice.label-primary::before {
    content: "\00D7";
}

/* CKEDITOR RESOURCE PICKER (backlog #65)  ------ */
/* --------------------------------------------- */
.maggs-resource-picker {
    width: 320px !important;
    max-height: 360px;
    padding: 10px !important;
    box-sizing: border-box !important;
}
.maggs-resource-picker__filter {
    width: 100% !important;
    padding: 6px 8px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    border-radius: 3px;
}
.maggs-resource-picker__body {
    max-height: 300px;
    overflow-y: auto;
}
.maggs-resource-picker__group-title {
    margin: 10px 0 6px !important;
    font-size: 12px !important;
    text-transform: uppercase;
    color: #777 !important;
}
.maggs-resource-picker__group-title:first-child {
    margin-top: 0 !important;
}
.maggs-resource-picker__message {
    color: #777 !important;
    text-align: center !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}
.maggs-resource-picker__list {
    display: flex;
    flex-direction: column;
}
.maggs-resource-picker__item {
    text-align: left !important;
    padding: 6px 8px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    border-radius: 3px;
}
.maggs-resource-picker__item:hover {
    background-color: #f0f0f0 !important;
}
.maggs-resource-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.maggs-resource-picker__thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid transparent !important;
    background: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 3px;
    overflow: hidden;
}
.maggs-resource-picker__thumb:hover {
    border-color: #ccc !important;
    background-color: #f0f0f0 !important;
}
.maggs-resource-picker__thumb img {
    width: 100% !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 2px;
}
.maggs-resource-picker__thumb span {
    display: block;
    width: 100% !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px !important;
}

/* NO JS  -------------------------------------- */
/* --------------------------------------------- */
.noscriptmsg {
    height: 400px;
    margin-top: 200px;
    text-align: center;
}

/* TESTING  ------------------------------------ */
/* --------------------------------------------- */
/*div {   border: 1px dotted grey;  }*/

/* RESPIONSIVE TESTING  ------------------------ */
/* --------------------------------------------- */
                                                                                    .hilight {border: 1px dotted white;}
/* Custom, iPhone Retina */         @media only screen and (min-width : 320px) {    .hilight {border: 1px solid yellow;}  }
/* Extra Small Devices, Phones */   @media only screen and (min-width : 480px) {    .hilight {border: 1px solid green;}   }
/* Small Devices, Tablets */        @media only screen and (min-width : 768px) {    .hilight {border: 1px solid blue;}    }
/* Medium Devices, Desktops */      @media only screen and (min-width : 992px) {    .hilight {border: 1px solid pink;}    }
/* Large Devices, Wide Screens */   @media only screen and (min-width : 1200px){    .hilight {border: 1px solid red;}     }