@charset "UTF-8";

/**********************************************************************************************************************/
/* GLOBAL STYLES                                                                                                      */
/**********************************************************************************************************************/

* {
    box-sizing                          : border-box;
    }

html, body {
    margin                              : 0;
    min-height                          : 100vh;
    min-width                           : 100vw;
    padding                             : 0;
    }

@media screen and (min-width:0\0) {                                                                                     /* Apply Styles only to IE 9 & 10 */
    html, body {
        height                          : 100%;
        }
    }

body {
    align-content                       : center;
    background-color                    : #FFFFFF;
    display                             : flex;
    flex-direction                      : column;
    font-family                         : "Roboto", sans-serif;
    justify-content                     : flex-start;
    line-height                         : 1.33;
    }

body > header,
body > footer {
    flex                                : 0 0 auto;
    }

body > main {
    flex                                : 1 1 auto;
    }

a {
    text-decoration                     : none;
    }

a:active, a:visited {
    color                               : #A0B030;
    }

a:hover {
    text-decoration                     : underline;
    }

::placeholder {
    color                               : #707070;
    font-size                           : smaller;
    }

/**********************************************************************************************************************/
/* PAGE HEADER                                                                                                        */
/**********************************************************************************************************************/

body > header {
    background-color                    : #F0F0F0;
    padding                             : 0 20px;
    position                            : sticky;
    width                               : 100%;
    }

body > header > nav {
    background                          : #F0F0F0;
    align-items                         : center;
    display                             : flex;
    flex-wrap                           : wrap;
    justify-content                     : center;
    line-height                         : 1;
    margin                              : 0   -20px;
    padding                             : 5px  20px;
    position                            : sticky;
    width                               : auto;
    }

body > header > nav ul {
    align-items                         : center;
    display                             : flex;
    flex-wrap                           : wrap;
    justify-content                     : space-around;
    margin                              : 0;
    padding                             : 0;
    }

body > header > nav li {
    display                             : inline;
    margin                              : 0;
    padding                             : 0;
    }

body > header > nav li+li {
    margin-left                         : 1em;
    }

body > header > nav .navItem {
    background-color                    : transparent;
    border-radius                       : 5px;
    color                               : #7A7D82;
    display                             : inline-block;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 14px;
    font-weight                         : bold;
    margin                              : 0;
    padding                             : 12px 14px;
    text-decoration                     : none;
    text-transform                      : uppercase;
    }

body > header > nav .navItem:active,
body > header > nav .navItem:hover,
body > header > nav .navItem:focus {
    background-color                    : #E0E0E0;
    color                               : #729615;
    outline                             : none;
    }

body > header > nav #navHome .navItem {
    padding                             : 3px 18px;
    }

body > header > nav #navLogout .navItem {
    background-color                    : #A0B030;
    background-image                    : url(../img/icon-lock.png);
    background-position                 : left 20px center;
    background-repeat                   : no-repeat;
    color                               : #FFFFFF;
    padding-left                        : 50px;
    }

body > header > nav #navLogout .navItem:hover,
body > header > nav #navLogout .navItem:active {
    background-color                    : #C0DA30;
    }

/**********************************************************************************************************************/
/* PAGE FOOTER                                                                                                        */
/**********************************************************************************************************************/

body > footer {
    background                          : #F0F0F0;
    display                             : flex;
    flex-direction                      : column;
    justify-content                     : space-around;
    padding                             : 20px;
    width                               : 100%;
    }

body > footer #ablCopyright {
    color                               : #A0B030;
    display                             : flex;
    justify-content                     : space-around;
    }

body > footer #ablCopyright p {
    clear                               : both;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 14px;
    font-weight                         : 300;
    margin                              : 0 auto;
    text-align                          : center;
    }

body > footer #ablLogo {
    display                             : flex;
    justify-content                     : space-around;
    margin                              : 0;
    }

/**********************************************************************************************************************/
/* PAGE CONTENT                                                                                                       */
/**********************************************************************************************************************/

main {
    align-content                       : center;
    background-color                    : #FFFFFF;
    display                             : flex;
    flex-direction                      : column;
    height                              : 100%;
    justify-content                     : flex-start;
    margin                              : 0;
    padding                             : 0;
    }

main > header,
main > footer {
    flex                                : 0 0 auto;
    }

main > article {
    flex                                : 1 0 auto;
    }

/**********************************************************************************************************************/

main > header {
    background-color                    : #F0F0F0;
    color                               : #A0B030;
    font-family                         : "Roboto", sans-serif;
    min-height                          : 150px;
    padding                             : 0 20px 20px;
    position                            : relative;
    text-align                          : center;
    width                               : 100%;
    }

main > header h1 {
    font-size                           : 40px;
    font-weight                         : 300;
    letter-spacing                      : 4px;
    margin                              : 0;
    padding                             : 0;
    }

main > header h2 {
    font-size                           : 22px;
    font-weight                         : 400;
    letter-spacing                      : 4px;
    margin                              : 0;
    padding                             : 0;
    text-transform                      : uppercase;
    }

main > header p {
    color                               : #97999A;
    font-size                           : 20px;
    font-weight                         : 300;
    text-align                          : center;
    }

/**********************************************************************************************************************/

main > article {
    align-content                       : center;
    display                             : flex;
    flex-direction                      : column;
    height                              : auto;
    justify-content                     : flex-start;
    margin                              : 0 auto;
    overflow                            : visible;
    position                            : relative;
    padding                             : 20px;
    text-align                          : center;
    vertical-align                      : top;
    }

/**********************************************************************************************************************/

main > article .action-delete {
    color                               : #C00000;
    }

main > article .button-bar {
    margin                              : 20px auto;
    position                            : relative;
    }

main > article .button-bar > * {
    margin                              : 0 20px;
    }

main > article .button-bar .alt-action {
    border-radius                       : 5px;
    color                               : #A0B030;
    font-size                           : 16px;
    padding                             : 15px;
    position                            : absolute;
    white-space                         : nowrap;
    }

main > article .button-bar .alt-action:focus,
main > article .button-bar .alt-action:hover {
    background-color                    : #ECECEC;
    color                               : #A0B030;
    outline                             : none;
    }

main > article .input-grid {
    background-color                    : #F6F6F6;
    border-radius                       : 10px;
    margin                              : 20px auto;
    padding                             : 10px;
    position                            : relative;
    table-layout                        : auto;
    }

main > article .input-grid td {
    padding                             : 5px;
    text-align                          : left;
    vertical-align                      : middle;
    }

main > article .input-grid td:first-child {
    text-align                          : right;
    }

/**********************************************************************************************************************/

main > article button {
    background-color                    : #A0B030;
    border                              : 0;
    border-radius                       : 5px;
    color                               : #FFFFFF;;
    cursor                              : pointer;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 14px;
    font-weight                         : 400;
    letter-spacing                      : 1px;
    margin                              : 0;
    min-width                           : 120px;
    padding                             : 15px;
    text-align                          : center;
    text-transform                      : uppercase;
    white-space                         : nowrap;
    }

main > article button:active,
main > article button:focus,
main > article button:hover {
    background-color                    : #C0DA30;
    border                              : 0;
    outline                             : none;
    }

main > article button[disabled],
main > article button[disabled]:hover,
main > article button[disabled]:focus {
    background-color                    : #C0C0C0;
    cursor                              : auto;
    }

main > article button.listNext {
    background-image                    : url(../img/icon-next.png);
    background-position                 : right 20px center;
    background-repeat                   : no-repeat;
    padding-right                       : 50px;
    }

main > article button.listPrev {
    background-image                    : url(../img/icon-prev.png);
    background-position                 : left 20px center;
    background-repeat                   : no-repeat;
    padding-left                        : 50px;
    }

main > article button.listRowOdd > tr {
    background-color                    : rgba(0,0,0,0.10);
    }

main > article label {
    color                               : #808080;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 15px;
    padding                             : 15px 0;
    text-transform                      : uppercase;
    }

main > article input:NOT([type=checkbox]):NOT([type=radio]),
main > article select,
main > article textarea {
    -moz-appearance                     : none;
    -webkit-appearance                  : none;
    color                               : #404040;
    background-color                    : #D0D0D0;
    border                              : none;
    border-radius                       : 5px;
    font-size                           : 18px;
    outline                             : none;
    padding                             : 10px 15px;
    }

main > article input:focus,
main > article select:focus,
main > article textarea:focus {
    background-color                    : #E4E4E4;
    }

main > article select {
    background-image                    : url(../img/icon-select.png);
    background-position                 : right 20px center;
    background-repeat                   : no-repeat;
    padding-right                       : 50px;
    }

main > article form div.group+div.group {
    margin-top                          : 20px;
    }

main > article form span.group+span.group {
    margin-left                         : 50px;
    }

main > article a+*,
main > article button+*,
main > article input+*,
main > article label+*,
main > article select+* {
    margin-left                         : 20px;
    }

/**********************************************************************************************************************/

main > article .box-group {
    align-content                       : center;
    display                             : flex;
    flex-direction                      : row;
    flex-wrap                           : wrap;
    justify-content                     : center;
    }

main > article .box-group-item {
    border-radius                       : 5px;
    display                             : inline-block;
    height                              : auto;
    margin                              : 20px;
    overflow                            : hidden;
    width                               : 300px;
    }

main > article .box-group-item[onclick] {
    cursor                              : pointer;
    }

main > article .box-group-elem {
    padding                             : 20px;
    }

main > article .box-group-elem.button {
    background-color                    : #ECECEC;
    }

main > article .box-group-elem.icon {
    background-color                    : #616161;
    }

main > article .box-group-elem.title {
    color                               : #ECECEC;
    background-color                    : #757575;
    }

main > article .box-group-elem > * {
    margin                              : 0 auto;
    }

main > article .box-group-elem.icon > img {
    border-radius                       : 5px;
    margin                              : auto;
    height                              : 100px;
    }

main > article.emulation-container {
    position                            : relative;
    margin                              : 0;
    padding                             : 0;
    }

main > article.emulation-container > iframe {
    position                            : absolute;
    top                                 : 0;
    left                                : 0;
    bottom                              : 0;
    right                               : 0;

    border                              : none;
    height                              : 100%;
    margin                              : 0;
    padding                             : 0;
    width                               : 100%;
    }

main > article :IS(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
    margin-top                          : 0;
    }

/**********************************************************************************************************************/
/* PAGE-TARGETED                                                                                                      */
/**********************************************************************************************************************/

main#errorPage > article {
    display                             : inline-block;
    height                              : auto;
    margin-top                          : 50px;
    overflow                            : auto;
    padding                             : 20px;
    max-width                           : 70em;
    width                               : 100%;
    }

main#errorPage > article p {
    color                               : #97999A;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 20px;
    font-weight                         : 300;
    line-height                         : 35px;
    margin                              : 0;
    text-align                          : center;
    }

main#errorPage > article .labels {
    display                             : inline-block;
    float                               : left;
    height                              : 30px;
    margin                              : 0 30px 0 0;
    padding                             : 0;
    text-align                          : right;
    width                               : 140px;
    }

main#errorPage > article label {
    color                               : #C2C5C7;
    float                               : right;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 15px;
    height                              : 6px;
    letter-spacing                      : 1px;
    margin                              : 22px 0;
    padding                             : 0;
    text-transform                      : uppercase;
    width                               : 140px;
    }

main#errorPage > article .fields {
    display                             : inline-block;
    float                               : left;
    height                              : auto;
    max-height                          : 150px;
    min-height                          : 95px;
    width                               : 220px;
    }

main#errorPage > article .fields p {
    color                               : #757575;
    display                             : block;
    float                               : left;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 18px;
    font-weight                         : 300;
    height                              : 30px;
    margin                              : 20px 0 0 0;
    text-align                          : left;
    text-transform                      : uppercase;
    width                               : 220px;
    }

/**********************************************************************************************************************/

main#loginPage > article .input-grid input {
    width                               : 40ch;
    }

/**********************************************************************************************************************/

main#mainPage > article h1 {
    color                               : #616161;
    font-size                           : 40px;
    padding                             : 42px 0 0 0;
    }

main#mainPage > article p {
    color                               : #97999A;
    font-family                         : "Roboto", sans-serif;
    font-size                           : 22px;
    font-weight                         : 300;
    margin                              : 20px 0 0 0;
    text-align                          : center;
    }

/**********************************************************************************************************************/

main#passwordChangePage > article .input-grid input {
    width                               : 40ch;
    }

/**********************************************************************************************************************/

main#publishSelectPage > article {
    max-width                           : 80em;
    width                               : 100%;
    }

main#publishSelectPage > article .filter {
    align-content                       : center;
    display                             : flex;
    flex-direction                      : row;
    justify-content                     : space-between;
    margin                              : 20px auto 0;
    width                               : 100%;
    }

main#publishSelectPage > article .fileList {
    border-spacing                      : 0;
    margin                              : 20px auto;
    width                               : 100%;
    }

main#publishSelectPage > article .fileList th {
    background-color                    : #757575;
    color                               : #FFFFFF;;
    font                                : bold 1rem sans-serif;
    letter-spacing                      : 2px;
    padding                             : 15px;
    text-align                          : left;
    width                               : auto;
    }

main#publishSelectPage > article .fileList th:first-child {
    border-radius                       : 6px 0 0 0;
    }

main#publishSelectPage > article .fileList th:last-child {
    border-radius                       : 0 6px 0 0;
    }

main#publishSelectPage > article .fileList th.reference {
    width                               : 165px;
    }

main#publishSelectPage > article .fileList th.status {
    width                               : 130px;
    }

main#publishSelectPage > article .fileList th.action {
    text-align                          : center;
    width                               : 120px;
    }

main#publishSelectPage > article .fileList td {
    background-color                    : transparent;
    color                               : #3A3A3A;
    font                                : normal 1rem sans-serif;
    padding                             : 15px;
    text-align                          : left;
    }

main#publishSelectPage > article .fileList tr.listRowEven td {
    background-color                    : #F0F0F0;
    }

main#publishSelectPage > article .fileList tr.listRowOdd td {
    background-color                    : #F8F8F8;
    }

main#publishSelectPage > article .fileList td.action {
    text-align                          : center;
    }

main#publishSelectPage > article .fileList td .action-delete {
    font                                : bold 0.75rem sans-serif;
    }

@media screen and (width <= 1050px) {
    main#publishSelectPage > article .filter {
        flex-direction                  : column;
        margin                          : 0 auto;
        }

    main#publishSelectPage > article .filter > .group  {
        margin                          : 0 auto;
        }

    main#publishSelectPage > article .filter > .group+.group  {
        margin-top                      : 20px;
        }

    main#publishSelectPage > article .fileList th.optional,
    main#publishSelectPage > article .fileList td.optional {
        display                         : none;
        }

    main#publishSelectPage > article .fileList th {
        width                           : auto;
        }
    }

/**********************************************************************************************************************/
/* TARGETED OVERRIDES - ALL MUST BE TAGGED AS IMPORTANT                                                               */
/**********************************************************************************************************************/

.space-between+.space-between {
    padding-top                         : 1em !important;
    }

.fail {
    color                               : #D04000 !important;
    font-weight                         : bold !important;
    }

.small {
    font-size                           : smaller !important;
    }


.okay {
    color                               : #090 !important;
    font-weight                         : bold !important;
    }

.note {
    color                               : #808080 !important;
    }

.warn {
    color                               : #D08040 !important;
    font-weight                         : bold !important;
    }

/**********************************************************************************************************************/