/* vars */
:root {
    --main-background: #f8f8f8;
    --panel-background: #eee;
    --panel-border: 1px solid #ccc;
    --color-primary: #1976d2;
    --default-mid: #666;
    --default-dark: #333;
    --default-light: #ddd;
    --danger-light: #fee;
    --danger-dark: #c44;
    --success-light: #efd;
    --success-dark: #494;
    --info-light: #def;
    --info-dark: #17d;
}

/* general global styles */
body { background: var(--main-background); color: #333; font-family: Helvetica, Tahoma, sans-serif; line-height: 1.2em; padding: 0; margin: 0; }
.body { max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 70px); padding: 20px; }
.body-narrow { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.body-editor { max-width: 1400px; margin: 0 auto; padding: 0; flex-grow: 1; }
.body img, .body-narrow img { width: auto; max-width: 100%; border: 1px solid #ccc; }
a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: #249; text-decoration: underline; }
body, p { line-height: 1.4em; }
body, p, td, button, li { font-family: Helvetica, Tahoma, sans-serif; font-size: 1em; line-height: 1.2em; }
input, select, textarea { font-family: Helvetica, Tahoma, sans-serif; font-size: 1rem; line-height: 1.2rem; background: #fff; color: #444; border: 1px solid #bbb; padding: 1px 3px; min-height: 20px; }
input[type='checkbox'] { height: 18px; width: 18px; margin: 1px; vertical-align: middle; }
input:disabled, select:disabled, textarea:disabled { background: #f8f8f8; color: #666; }

.onlywide { display: none; }
.onlynarrow { display: inline; }
@media screen and (min-width: 768px) {
    .onlywide { display: inline; }
    .onlynarrow { display: none; }
}
/* header */
.header { padding: 10px; background: #333; border-bottom: 1px solid #ccc; color: #ddd; font-family: monospace; font-size: 1.1em; user-select: none; }
.header .float-right { text-decoration: none; padding: 3px 5px; }
.header .logo { color: yellow; text-decoration: none; padding: 3px 5px; }
.header .homenavitem { color: #ddd; text-decoration: none; padding: 3px 5px; }
.header .homenavitem:hover { color: #333; background: #ccc; }
.header .homenavitem.active { text-decoration: underline; color: #fff; }
.header .homenavitem.active:hover { color: #333; background: #ccc; }
.header .menubtn { border: 1px solid #ccc; cursor: pointer; background: var(--color-primary); color: #f8f8f8; }
.header .menubtn:hover { background: #f8f8f8; color: var(--color-primary); }

#mainnavmenu { position: absolute; top: 22px; right: 0; padding: 10px 10px; border: 1px solid #ccc; margin: 10px; background: #333; color: #ddd; z-index: 99; text-align: right; line-height: 22px; }
#mainnavmenu a { color: #ddd; text-decoration: none;  display: block; padding: 1px 10px; }
#mainnavmenu a:hover { text-decoration: underline; color: #ddd; background: #222; }
#mainnavmenu hr { border: 0; margin: 5px 0; padding: 0; border-bottom: 1px solid #888; }
#mainnavmenu .loggedinwarning { padding: 1px 3px; background: red; color: yellow; }
.banner-thin { max-width: 300px; margin: 25px auto; }

#userMessage { }
#userMessage .userMessageDiv { margin: 5px 15px; padding: 20px; border: 1px solid #985; color: #333; background: #fec; position: relative; }
#userMessage .userMessageDiv a { color: var(--color-primary); cursor: pointer; text-decoration: underline; }
#userMessage .userMessageDiv a:hover { color: #249; }
#userMessage .userMessageDiv .userMessageCloser { position: absolute; top: 0; right: 0; padding: 3px 5px; line-height: 1em; color: #fff; text-decoration: none; }

#floatInfoWrapper { position: fixed; bottom: 0; right: 0; display: inline-block; padding: 10px; text-align: right; }
#floatInfoWrapper .floatMessage { margin-bottom: 5px; border: 1px solid #369; background: #def; color: #369; padding: 10px; display: inline-block; clear: both; float: right; max-width: 300px; text-align: left; }

/* footer */
.footer { padding: 5px; background: #333; border-top: 1px solid #ccc; text-align: center; }
.footer, .footer * { font-size: 12px; color: #ccc; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #eee; }

/* banner */
.banner-main { background: url(/img/pf-banner.jpg); background-size: cover; background-position: center; padding: 50px; background-color: #888; }
.banner-inner { max-width: 1200px; margin: 0 auto; color: #fff; text-align: center; }
.banner-inner h1 { font-size: 48px; color: #fff; line-height: 64px; }
@media screen and (max-width: 800px) {
    .banner-inner h1 { font-size: 36px; color: #fff; line-height: 42px; }
}

/* feature columns */
.feat-row { }
.feat-row h2 { color: var(--color-primary); font-size: 36px; line-height: 42px; }
.feat-left { width: 49%; }
.feat-right { width: 48%; float: right; }
.feat-right img { width: 100%; }
.hr { clear: both; margin: 0 0 2em 0; padding: 1em; border-bottom: 1px solid #ccc; }
@media only screen and (max-width: 700px) {
    .feat-row h2 { font-size: 30px; line-height: 36px; }
    .feat-left { width: 100%; }
    .feat-right { width: 100%; float: none; margin-bottom: 1em; }
}

/* modals */
.modal { display: none; position: fixed; z-index: 9000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.modal .modalguts { margin: auto; padding: 20px; border: 1px solid #888; width: 800px; max-width: 95%; max-height: 60vh; overflow-y: auto; background: var(--main-background); }
.modal .modalguts.medium { width: 650px; }
.modal .modalguts.narrow { width: 500px; }
.modal .modalguts.huge { width: 80vw; max-height: 80vh; }
.modal .modalguts img { max-width: 100%; }
/* global modal only */
.modal .globalmodaltitle { border-bottom: 1px solid #bbb; margin-bottom: 1em; padding-bottom: 1em; font-weight: bold; }
.modal .globalmodalfooter { border-top: 1px solid #bbb; margin-top: 1em; padding-top: 1em; text-align: right; }

/* helper classes */
.pfblur:not(:focus) {
    color: transparent !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
    text-transform: uppercase;
    text-decoration: underline overline line-through;
    /*-webkit-text-security: disc;*/
    font-family: cursive;
    cursor: pointer;
}
/*.pfblur { filter: blur(2px); -webkit-text-security: disc; cursor: pointer; }*/
/*.pfblur:focus { filter: blur(0px); -webkit-text-security: none; }*/
.float-right { float: right; }
.section-title { color: var(--color-primary); margin: 1.5em 0 0.5em 0; padding: 10px; line-height: 1em; }
.section-head { background: var(--color-primary); color: #f8f8f8; margin: 1.5em 0 0.5em 0; padding: 10px; line-height: 1em; }
p.spacer { height: 50px; }
.subtlegf { text-align: right; font-size: 0.7em; opacity: 0.8; }
.banner-thin { max-width: 500px; margin: 25px auto; }
.clear { clear: both; }
.error { background: #800; color: #eee; padding: 1px 3px; }
.error>.button { background: #e00; color: #eee; border: 1px solid #ccc; margin: 2px 5px; }
.error>.button:hover { background: #f00; color: #fff; border: 1px solid #fff; }
.error>a { color: #bde; }
.error>a:hover { color: #fff; }
.warning, .warning * { color: yellow; }
.betaopt { opacity: 0.8; }
.highlight { line-height: 1.5em; font-size: 1.2em; }
.highlight i { font-style: italic; font-size: 0.8em; opacity: 0.9; margin-bottom: 0.3em; display: inline-block; }
.pull-right { text-align: right; color: #12579a; font-weight: bold; }

/* alerts */
.alert { padding: 0.5em 1em; margin-bottom: 1em; border: 1px solid #ccc; background: #eee; }
.alert.alert-error { color: var(--danger-dark); background: var(--danger-light); border-color: var(--danger-dark); }
.alert.alert-success { color: var(--success-dark); background: var(--success-light); border-color: var(--success-dark); }
.alert.alert-info { color: var(--info-dark); background: var(--info-light); border-color: var(--info-dark); }

/* TBA */
.button { background: var(--default-light); color: var(--default-dark); padding: 3px 5px; cursor: pointer; border: 1px solid #eee; text-decoration: none; display: inline-block; margin: 1px 3px; }
.button:hover { background: var(--default-dark); color: var(--default-light); }
.button:disabled { background: #999; color: #666; cursor: not-allowed; }
.button.small { font-size: 0.8em; padding: 0px 2px; margin: 0px 1px; }

.button.default { background: var(--default-light); color: var(--default-dark); border: 1px solid #aaa;  }
.button.default:hover { background: var(--default-dark); color: var(--default-light); }
.button.primary { background: var(--color-primary); color: #f8f8f8; border: 1px solid #cdf; }
.button.primary:hover { background: #f8f8f8; color: var(--color-primary); border: 1px solid var(--color-primary); }
.button.danger { background: var(--danger-dark); color: var(--danger-light); border: 1px solid var(--danger-light); }
.button.danger:hover { background: var(--danger-light); color: var(--danger-dark); border: 1px solid var(--danger-dark); }
.button.success { background: var(--success-dark); color: var(--success-light); border: 1px solid var(--success-light); }
.button.success:hover { background: var(--success-light); color: var(--success-dark); border: 1px solid var(--success-dark); }

/* forms */
.formtile { max-width: 750px; margin-bottom: 3em; }
.formhead { margin-bottom: 0.5em; border-bottom: 1px solid #ccc; padding-bottom: 0.5em; }
.formtile .longinput { width: 100%; }
.formtile textarea { width: 100%; }
.formtile .formtable { border-collapse: collapse; width: 100%; }
.formtile .formtable td { padding-left: 5px; width: 1%; }
.formtile .formtable td:first-child { padding-right: 5px; width: 1%; white-space: nowrap; }
.formtile .formtable td.stretch, .formtile .formtable th.stretch { width:99%; }
.formtile .formtable td.right { text-align: right; }
.spacer { min-height: 1em; }

/* content boxes */
.content-box { margin: 2em auto; padding: 2em; border: 1px solid #ddd; background: #fafafa; border-radius: 4px; }
.content-box.narrow { max-width: 600px; }
.content-box.medium { max-width: 700px; }
.button-row { margin-top: 25px; text-align: center; }
.btndisabled { background: #666; cursor: not-allowed; color: #ccc; }
.btndisabled:hover { background: #666; cursor: not-allowed; color: #aaa; }

/* question boxes for forms */
.question-box { padding: 10px; margin: 8px 0; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.question-box input[type='radio'], .question-box input[type='checkbox'] { display: none; }
.question-box input[type='radio'] + label:before, .question-box input[type='checkbox'] + label:before { content: "◻"; padding-right: 10px; font-size: 28px; font-family: monospace; vertical-align: middle; }
.question-box input[type='radio']:checked + label:before, .question-box input[type='checkbox']:checked + label:before { content: "☑"; padding-right: 10px; font-size: 28px; font-family: monospace; vertical-align: middle; }
.question-box label { cursor: pointer; padding-left: 5px; display: block; line-height: 1.6; }
@media (max-width: 550px) {
    .formtile .formtable td:first-child { white-space: normal; }
}
table.simpletable { border-collapse: collapse; }
table.simpletable.full { width: 100%; }
table.simpletable th { background: var(--default-mid); color: var(--default-light); padding: 3px 5px; font-weight: normal; text-align: left; }
table.simpletable td { border: 1px solid #ccc; padding: 3px 10px 3px 5px; }
table.simpletable td.stretch, table.simpletable th.stretch { width: 100%; }
table.simpletable td.right { text-align: right; padding: 3px 5px 3px 10px; }
table.simpletable.selectable td { cursor: pointer; }
table.simpletable.selectable tr:hover { background: #fff; }

/* simple forms */
.simpleform {}
.simpleform .formrow { margin-top: 1em; }
.simpleform .formrow:first-child { margin-top: 0; }
.simpleform .formlabel { font-weight: bold; }
.simpleform .formvalue {}
.simpleform .formvalue input, .simpleform .formvalue select, .simpleform .formvalue textarea { width: 100%; }
.simpleform .formvalue input[type=checkbox], .simpleform .formvalue input[type=radio] { width: 1.1em; }
.simpleform .formvalue textarea { max-width: 100%; min-width: 100%; }
.simpleform .formhelp { opacity: 0.7; font-size: 0.7em; }

@keyframes fadeIn {
    from { opacity: 0.2; }
}
.pfpreview { opacity: 0.35; animation: fadeIn 600ms infinite alternate; cursor: wait !important; pointer-events: none; }


:root {
    --universal-margin: 0.5rem;
    --universal-padding: 0.5rem;
}

/*
  Definitions for the grid system, cards and containers.
*/
.container {
    margin: 0 auto;
    padding: 0 calc(1.5 * var(--universal-padding));
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
}

.col-sm,
[class^='col-sm-'],
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 calc(var(--universal-padding) / 2);
}

.col-sm,
.row.cols-sm > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: 0;
}

.col-sm-1,
.row.cols-sm-1 > * {
    max-width: 8.33333%;
    flex-basis: 8.33333%;
}

.col-sm-offset-0 {
    margin-left: 0;
}

.col-sm-2,
.row.cols-sm-2 > * {
    max-width: 16.66667%;
    flex-basis: 16.66667%;
}

.col-sm-offset-1 {
    margin-left: 8.33333%;
}

.col-sm-3,
.row.cols-sm-3 > * {
    max-width: 25%;
    flex-basis: 25%;
}

.col-sm-offset-2 {
    margin-left: 16.66667%;
}

.col-sm-4,
.row.cols-sm-4 > * {
    max-width: 33.33333%;
    flex-basis: 33.33333%;
}

.col-sm-offset-3 {
    margin-left: 25%;
}

.col-sm-5,
.row.cols-sm-5 > * {
    max-width: 41.66667%;
    flex-basis: 41.66667%;
}

.col-sm-offset-4 {
    margin-left: 33.33333%;
}

.col-sm-6,
.row.cols-sm-6 > * {
    max-width: 50%;
    flex-basis: 50%;
}

.col-sm-offset-5 {
    margin-left: 41.66667%;
}

.col-sm-7,
.row.cols-sm-7 > * {
    max-width: 58.33333%;
    flex-basis: 58.33333%;
}

.col-sm-offset-6 {
    margin-left: 50%;
}

.col-sm-8,
.row.cols-sm-8 > * {
    max-width: 66.66667%;
    flex-basis: 66.66667%;
}

.col-sm-offset-7 {
    margin-left: 58.33333%;
}

.col-sm-9,
.row.cols-sm-9 > * {
    max-width: 75%;
    flex-basis: 75%;
}

.col-sm-offset-8 {
    margin-left: 66.66667%;
}

.col-sm-10,
.row.cols-sm-10 > * {
    max-width: 83.33333%;
    flex-basis: 83.33333%;
}

.col-sm-offset-9 {
    margin-left: 75%;
}

.col-sm-11,
.row.cols-sm-11 > * {
    max-width: 91.66667%;
    flex-basis: 91.66667%;
}

.col-sm-offset-10 {
    margin-left: 83.33333%;
}

.col-sm-12,
.row.cols-sm-12 > * {
    max-width: 100%;
    flex-basis: 100%;
}

.col-sm-offset-11 {
    margin-left: 91.66667%;
}

.col-sm-normal {
    order: initial;
}

.col-sm-first {
    order: -999;
}

.col-sm-last {
    order: 999;
}

@media screen and (min-width: 768px) {
    .col-md,
    [class^='col-md-'],
    [class^='col-md-offset-'],
    .row[class*='cols-md-'] > * {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding: 0 calc(var(--universal-padding) / 2);
    }
    .col-md,
    .row.cols-md > * {
        max-width: 100%;
        flex-grow: 1;
        flex-basis: 0;
    }
    .col-md-1,
    .row.cols-md-1 > * {
        max-width: 8.33333%;
        flex-basis: 8.33333%;
    }
    .col-md-offset-0 {
        margin-left: 0;
    }
    .col-md-2,
    .row.cols-md-2 > * {
        max-width: 16.66667%;
        flex-basis: 16.66667%;
    }
    .col-md-offset-1 {
        margin-left: 8.33333%;
    }
    .col-md-3,
    .row.cols-md-3 > * {
        max-width: 25%;
        flex-basis: 25%;
    }
    .col-md-offset-2 {
        margin-left: 16.66667%;
    }
    .col-md-4,
    .row.cols-md-4 > * {
        max-width: 33.33333%;
        flex-basis: 33.33333%;
    }
    .col-md-offset-3 {
        margin-left: 25%;
    }
    .col-md-5,
    .row.cols-md-5 > * {
        max-width: 41.66667%;
        flex-basis: 41.66667%;
    }
    .col-md-offset-4 {
        margin-left: 33.33333%;
    }
    .col-md-6,
    .row.cols-md-6 > * {
        max-width: 50%;
        flex-basis: 50%;
    }
    .col-md-offset-5 {
        margin-left: 41.66667%;
    }
    .col-md-7,
    .row.cols-md-7 > * {
        max-width: 58.33333%;
        flex-basis: 58.33333%;
    }
    .col-md-offset-6 {
        margin-left: 50%;
    }
    .col-md-8,
    .row.cols-md-8 > * {
        max-width: 66.66667%;
        flex-basis: 66.66667%;
    }
    .col-md-offset-7 {
        margin-left: 58.33333%;
    }
    .col-md-9,
    .row.cols-md-9 > * {
        max-width: 75%;
        flex-basis: 75%;
    }
    .col-md-offset-8 {
        margin-left: 66.66667%;
    }
    .col-md-10,
    .row.cols-md-10 > * {
        max-width: 83.33333%;
        flex-basis: 83.33333%;
    }
    .col-md-offset-9 {
        margin-left: 75%;
    }
    .col-md-11,
    .row.cols-md-11 > * {
        max-width: 91.66667%;
        flex-basis: 91.66667%;
    }
    .col-md-offset-10 {
        margin-left: 83.33333%;
    }
    .col-md-12,
    .row.cols-md-12 > * {
        max-width: 100%;
        flex-basis: 100%;
    }
    .col-md-offset-11 {
        margin-left: 91.66667%;
    }
    .col-md-normal {
        order: initial;
    }
    .col-md-first {
        order: -999;
    }
    .col-md-last {
        order: 999;
    }
}

@media screen and (min-width: 1280px) {
    .col-lg,
    [class^='col-lg-'],
    [class^='col-lg-offset-'],
    .row[class*='cols-lg-'] > * {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding: 0 calc(var(--universal-padding) / 2);
    }
    .col-lg,
    .row.cols-lg > * {
        max-width: 100%;
        flex-grow: 1;
        flex-basis: 0;
    }
    .col-lg-1,
    .row.cols-lg-1 > * {
        max-width: 8.33333%;
        flex-basis: 8.33333%;
    }
    .col-lg-offset-0 {
        margin-left: 0;
    }
    .col-lg-2,
    .row.cols-lg-2 > * {
        max-width: 16.66667%;
        flex-basis: 16.66667%;
    }
    .col-lg-offset-1 {
        margin-left: 8.33333%;
    }
    .col-lg-3,
    .row.cols-lg-3 > * {
        max-width: 25%;
        flex-basis: 25%;
    }
    .col-lg-offset-2 {
        margin-left: 16.66667%;
    }
    .col-lg-4,
    .row.cols-lg-4 > * {
        max-width: 33.33333%;
        flex-basis: 33.33333%;
    }
    .col-lg-offset-3 {
        margin-left: 25%;
    }
    .col-lg-5,
    .row.cols-lg-5 > * {
        max-width: 41.66667%;
        flex-basis: 41.66667%;
    }
    .col-lg-offset-4 {
        margin-left: 33.33333%;
    }
    .col-lg-6,
    .row.cols-lg-6 > * {
        max-width: 50%;
        flex-basis: 50%;
    }
    .col-lg-offset-5 {
        margin-left: 41.66667%;
    }
    .col-lg-7,
    .row.cols-lg-7 > * {
        max-width: 58.33333%;
        flex-basis: 58.33333%;
    }
    .col-lg-offset-6 {
        margin-left: 50%;
    }
    .col-lg-8,
    .row.cols-lg-8 > * {
        max-width: 66.66667%;
        flex-basis: 66.66667%;
    }
    .col-lg-offset-7 {
        margin-left: 58.33333%;
    }
    .col-lg-9,
    .row.cols-lg-9 > * {
        max-width: 75%;
        flex-basis: 75%;
    }
    .col-lg-offset-8 {
        margin-left: 66.66667%;
    }
    .col-lg-10,
    .row.cols-lg-10 > * {
        max-width: 83.33333%;
        flex-basis: 83.33333%;
    }
    .col-lg-offset-9 {
        margin-left: 75%;
    }
    .col-lg-11,
    .row.cols-lg-11 > * {
        max-width: 91.66667%;
        flex-basis: 91.66667%;
    }
    .col-lg-offset-10 {
        margin-left: 83.33333%;
    }
    .col-lg-12,
    .row.cols-lg-12 > * {
        max-width: 100%;
        flex-basis: 100%;
    }
    .col-lg-offset-11 {
        margin-left: 91.66667%;
    }
    .col-lg-normal {
        order: initial;
    }
    .col-lg-first {
        order: -999;
    }
    .col-lg-last {
        order: 999;
    }
}