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

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

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

/* the edit button itself */
h1 form button {
    margin: .5em 0;
    padding: .5em;
}

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

/* the login form */
body#login .content form {
    margin: 0 auto;
    margin-top: 0.5em;
    padding: 0.5em;
    vertical-align: baseline;
}

/* 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: block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

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

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

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

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

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

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

/* editing section of the main form */
body[id^="install"] .content > form > section.editing {
}

/* button section */
body[id^="install"] .content > form > section.buttons {
    margin: .5em 0;
    padding: .5em 0;
}

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

/* the editing section */
body#install-pages section.editing {
}

/* 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 {
    margin: 0 1%
    width: 98%;
}

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

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

/* editing section of the main form */
body[id^="admin"] .content > form > section.editing {
}

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

/* labels for the fields */
section.editing > p > label {
    font-weight: bold;
    width: 100%;
}

/* 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 {
    padding: 0.25em;
    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 {
    margin: 0 auto;
    max-width: 100%;
}

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

/* button section */
body[id^="admin"] .content > form > section.buttons {
    text-align: right;
    width: 100%;
}

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

/* individual buttons */
body[id^="admin"] section.buttons button {
    margin: .5em 0;
    padding: .5em;
}

/*----------------------------------------------------------------------
 * 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 {
}

/* individual dashboard sections */
body#admin .content > #dashboard > section {
}

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

/* buttons in dashboard sections */
body#admin .content > #dashboard > section .buttons p {
}

/* button in dashboard sections */
body#admin .content > #dashboard > section .buttons button {
}

/*
 * 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: 1em 0;
    text-align: center;
    width: 33%;
}

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

/* the overall popup window */
section.popup,
span.popup {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

/* the header of the popup window */
section.popup header,
span.popup header {
    font-weight: bold;
    margin: 0;
    padding: 0.25em;
    padding-left: 0.5em;
    width: 100%;
}

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

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

/* the content of the reference window */
.references .content {
    height: 100%;
    overflow-y: scroll;
    padding: 0.5em;
}

/* 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: 0 0.5em;
}

/* the editing section */
.popup section.content > section.editing {
    width: 100%;
}

/* the button section */
.popup section.content > section.buttons {
    text-align: right;
    width: 100%;
}