/*
 * Showcase Content Management System
 * Cascading Style Sheets - Login & Admin
 * For 960px screens
 *
 * Copyright (C) Damian Walker
 * Created: 24-Oct-2015
 */

/*----------------------------------------------------------------------
 * Edit buttons on public site
 */

/* the form on which the edit button sits */
h1 form {
    display: inline;
    float: right;
}

/*----------------------------------------------------------------------
 * Login form
 */

/* no sidebar in the login page */
body#login .content {
    width: 100%;
}

/* the login form */
body#login .content form {
    margin: 0 auto;
    margin-top: 24px;
    padding: 24px;
    vertical-align: baseline;
    width: 480px;
}

/* the paragraph tag that groups a label and a field */
body#login .content form > p {
}

/* label for the log-in fields */
body#login .content form > p > label {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding: 0px;
    margin: 0px;
}

/* the log-in input fields */
body#login .content form > p > input {
    display: inline-block;
    vertical-align: top;
    width: 75%;
    padding: 3px 0px;
    margin: 0px;
}

/* the log-in button */
body#login .content form > button {
    float: right;
    margin: 0px;
    padding: 3px 0px;
    width: 25%;
}

/*----------------------------------------------------------------------
 * Installation page layout
 */

/* generic page layout */
body[id^="install"] .content {
    width: 100%;
}

/*----------------------------------------------------------------------
 * Generic installation forms
 */

/* a top-level form taking up the main screen */
body[id^="install"] .content > form {
    overflow: auto;
}

/* editing section of the main form */
body[id^="install"] .content > form > section.editing {
    float: left;
    padding-right: 40px;
    width: 800px;
}

/* button section */
body[id^="install"] .content > form > section.buttons {
    float: right;
    width: 160px;
}

/*----------------------------------------------------------------------
 * Page selection on installation
 */

/* the editing section */
body#install-pages section.editing {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

/* a page entry in the editing section */
body#install-pages section.editing p {
    overflow: hidden;
}

/* the label for a page entry in the editing section */
body#install-pages section.editing p label {
    display: block;
    margin-left: 1.5em;
}

/* the checkbox for a page entry in the editing section */
body#install-pages section.editing p input[type='checkbox'] {
    float: left;
    margin-top:0.5em;
    width: 25%;
}

/*----------------------------------------------------------------------
 * Generic page layout
 */

/* generic page layout */
body[id^="admin"] .content {
    width: 100%;
}

/*----------------------------------------------------------------------
 * Generic admin forms
 */

/* a top-level form taking up the main screen */
body[id^="admin"] .content > form {
    overflow: auto;
}

/* editing section of the main form */
body[id^="admin"] .content > form > section.editing {
    float: left;
    padding-right: 40px;
    width: 800px;
}

/* a form line */
section.editing > p {
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
    overflow: auto;
}

/* labels for the fields */
section.editing > p > label {
    float: left;
    font-weight: bold;
    margin: 3px 0px;
    padding: 3px 0px;
    padding-right: 5%;
    text-align: right;
    width: 25%;
}

/* input fields */
section.editing > p > input,
section.editing > p > select,
section.editing > p > textarea,
section.editing > p > .mce-tinymce,
section.editing > p > .image-preview,
section.editing > p > .radio-buttons,
section.editing > p > .checkboxes {
    float: right;
    margin: 3px 0px;
    padding: 3px;
    width: 75%;
}

/* subrecord table */
section.editing > table {
    table-layout: fixed;
    width: 100%;
}

/* subrecord label column */
section.editing > table .label {
    text-align: right !important;
    padding-right: 5%;
    width: 25%;
}

/* subrecord fields */
section.editing > table input,
section.editing > table select {
    margin: 3px 0px;
    padding: 3px;
    width: 100%;
}
section.editing > table input[type="datetime-local"] {
    padding-top: 0px;
    padding-bottom: 1px;
}

/* subrecord buttons */
section.editing > table button {
    float: right;
    margin: 3px 0px;
    padding: 3px;
}
section.editing > table td button {
    width: 100%;
}

/* hack for TinyMCE4 which is too fat for the space given */
section.editing > p > .mce-tinymce {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

/* image preview */
section.editing > p > .image-preview img {
    max-width: 100%;
}

/* things specific to text area */
section.editing > p > textarea.code,
section.editing > p > textarea.rich,
section.editing > p > textarea.public {
    height: 12em;
    resize: none;
}

/* button section */
body[id^="admin"] .content > form > section.buttons {
    float: right;
    clear: right;
    width: 160px;
}

/* button section */
body[id^="admin"] section.buttons {
    margin-bottom: 1em;
}

/* individual buttons */
body[id^="admin"] section.buttons button {
    margin: 3px 0px;
    padding: 3px 0px;
    width: 100%;
}

/*----------------------------------------------------------------------
 * Generic Tables
 */

/* table formatting */
body[id^="admin"] .content table {
    width: 100%;
}

/* table headings */
body[id^="admin"] .content table th,
body[id^="admin"] .content table td {
    text-align: left;
}

/* table headings (numeric) */
body[id^="admin"] .content table th.numeric,
body[id^="admin"] .content table td.numeric {
    text-align: right;
}

/*----------------------------------------------------------------------
 * The Dashboard
 */

/* the overall dashboard screen layout */
body#admin .content > #dashboard {
    display: flex;
    flex-flow: row wrap;
}

/* individual dashboard sections */
body#admin .content > #dashboard > section {
    width: 464px;
    margin: 8px;
}

/* some dashboard sections want to be full width */
body#admin .content > #dashboard > section#modules {
    width: 944px;
}

/* buttons in dashboard sections */
body#admin .content > #dashboard > section .buttons p {
    text-align: right;
}

/* button in dashboard sections */
body#admin .content > #dashboard > section .buttons button {
    width: 160px;
}

/* button among many in dashboard sections */
body#admin .content > #dashboard > section .buttons .many-buttons button
{
    width: 80px;
}

/*
 * Modules section of dashboard
 */

/* the boxed section */
body#admin .content > #dashboard > section#modules {
    display: flex;
    flex-flow: row wrap;
}

/* the icons and captions */
body#admin .content > #dashboard #modules figure {
    margin: 8px;
    text-align: center;
    width: 100px;
}

/*----------------------------------------------------------------------
 * General settings for popup windows
 */

/* the overall popup window */
section.popup,
span.popup {
    display: none;
    flex-flow: column;
    height: 540px;
    left: 50%;
    margin-left: -360px;
    margin-top: -280px;
    position: fixed;
    top: 50%;
    width: 720px;
}

/* the header of the popup window */
section.popup header,
span.popup header {
    flex: 0 1 24px;
    font-weight: bold;
/*
    height: 24px;
*/
    line-height: 18px;
    margin: 0;
    padding: 3px;
    padding-left: 6px;
    width: 100%;
}

/* the content of the popup window */
section.popup section.content,
span.popup section.content {
    flex: 1 1 auto;
}

/* after-section of header */
section.popup .close,
span.popup .close {
    cursor: pointer;
    font-weight: bold;
    padding-right: 3px;
    position: absolute;
    right: 0px;
    top: 0px;
}

/*----------------------------------------------------------------------
 * Reference window
 */

/* the content of the reference window */
.references .content {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    height: 516px;
    overflow-y: scroll;
    padding: 0px 8px;
}

/* a line in the reference window */
section.references section.content p {
    overflow: hidden;
}

/* the label for a line in the reference window */
section.references section.content p label {
    display: block;
    margin-left: 1.5em;
}

/* the checkbox for a line in the reference window */
section.references section.content p input[type='checkbox'] {
    float: left;
    margin-top:0.5em;
}

/*----------------------------------------------------------------------
 * Pop-up window forms
 */

/* the form */
.popup section.content {
    padding: 0px 8px;
}

/* the editing section */
.popup section.content > section.editing {
    float: left;
    margin-right: 40px;
    width: 504px;
}

/* the button section */
.popup section.content > section.buttons {
    float: right;
    width: 160px;
}