* {
    box-sizing: border-box;
}

body, html {
    background: #eee;
    color: black;
    margin: 0;
}
.pure-g [class*=pure-u], body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
}

a {
    color: #1F50D6;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.grid-center > div {
    margin: auto;
}

.left {
    text-align: left;
}
.right {
    text-align: right;
}

.table-full { width: 100%; }

.table-simple td {
    padding: 0 0.5em;
}

.light {
    font-weight: 300;
    font-size: 0.8em;
    margin: 0.5em 0;
}


.pure-form select {
    /* text looks cropped here for some reason with .5em .6em */
    padding: .3em .6em;
}

.content-wrapper > div.pure-g {
    width: 100%;
}

.clear { clear: both; }


body.splash-page #header2 {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#header {
    padding: 1em 15% 0.5em 15%;
    border-bottom: 1px solid #222;
    background: #282c37;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.20)
}
#header_title {
    font-weight: 300;
    font-size: 2em;
    display: inline-block;
    margin: 0;
}
#header_title a {
    color: #fff;
    text-decoration: none;
    line-height: 1;
}
#header_menu {
    margin: 0;
    float: right;
    display: inline-block;
    list-style-type: none;
    padding: 1.1em 0 0 0;
}
#header_menu li {
    padding: 0 1em;
    display: inline;
}
#header_menu li a {
    color: #eee;
    font-size: 1.2em;
    text-decoration: none;
}
#header_menu li a.menu_user {
    color: #ccf;
}
#header_menu li a.menu_logout {
    color: #fcc;
}



.splash-container {
    background: #1F50D6;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    position: fixed !important;
}

.splash {
    padding-top: 2em;
    /* absolute center .splash within .splash-container */
    width: 40%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    text-transform: none;
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}


.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
}

.is-center, .center {
    text-align: center;
}


/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
/*
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}
*/
.splash .pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

.splash a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
    font-weight: normal;
}

.content-wrapper {
    background: #eee;
    width: 100%;
}

body.splash-page .content-wrapper {
    position: absolute;
    top: 50%;
    min-height: 12%;
    z-index: 2;
}

.content {
    padding: 1em 1em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
.content-subhead i {
    margin-right: 7px;
}

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
    padding: 2em 20% 3em 20%;
    line-height: 1.4em;
}

.ribbon-icon .fa {
    font-size: 6em;
    padding-top: 0.5em;

}
.ribbon-icon * {
}


.footer {
    background: #111;
    width: 100%;
}
.footer-content {
    margin: auto;
    color: #ddd;
    text-align: left;
    font-size: 0.9em;
}
.footer strong {
    font-weight: 300;
    text-transform: uppercase;
}
.footer ul {
    margin-top: 0;
    padding-left: inherit;
    list-style-type: none;
}
.footer ul li a {
    text-decoration: none;
    color: #aad;
}
.footer ul li a:hover {
    text-decoration: underline;
}


.ribbon-dark {
    background: #2d3e50;
    color: #ccc;
}
.ribbon-dark .content-head-ribbon { color: #ddd; }
.ribbon-dark .content-head-ribbon { color: #ddd; }

.ribbon-white { background: #eee; color: #000; }
.ribbon-white .content-head-ribbon { color: #000; }


.ribbon-orange {
    background: #D6A21F;
    color: #fff;
}
.ribbon-orange .content-head-ribbon { color: #eee; }

.ribbon-green {
    background: #63A307;
    color: #fff;
}
.ribbon-green .fa { color: #fff; }
.ribbon-green .content-head-ribbon { color: #eee; }

.ribbon-purple {
    background: #9916e3;
}
.ribbon-right {
    color: #333;
}


h2.content-head{
    line-height: 1;
}



.pricing-tables, .information {
    max-width: 980px;
    margin: 0 auto;
}
.pricing-tables {
    text-align: center;
}
.pricing-table {
    border: 1px solid #ddd;
    margin: 4em 0.5em 2em;
    padding: 0 0 3em;
}
.pricing-table-free .pricing-table-header {
    background: #519251;
}

.pricing-table-biz .pricing-table-header {
    background: #2c4985;
}

.pricing-table-blue-0 .pricing-table-header { background: #0B1D4C; }
.pricing-table-blue-1 .pricing-table-header { background: #0F2666; }
.pricing-table-blue-2 .pricing-table-header { background: #12307F; }
.pricing-table-blue-3 .pricing-table-header { background: #163999; }
.pricing-table-blue-4 .pricing-table-header { background: #1A43B2; }

.pricing-table-orange-1 .pricing-table-header { background: #B2871A; }
.pricing-table-orange-2 .pricing-table-header { background: #CC9A1E; }
.pricing-table-orange-3 .pricing-table-header { background: #D9A41F; }
.pricing-table-orange-4 .pricing-table-header { background: #E5AE21; }

.pricing-table-header {
    background: #111;
    color: #fff;
}
.pricing-table-header h2 {
    margin: 0;
    padding-top: 1em;
    font-size: 1em;
    font-weight: normal;

}
.pricing-table-price {
    font-size: 3em;
    margin: 0.2em 0 0;
    font-weight: 100;
}
.pricing-table-price span {
    display: block;
    text-transform: uppercase;
    font-size: 0.25em;
    padding-bottom: 1em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    *color: #fff;
}
.pricing-table-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.pricing-table-list li {
    padding: 0.8em 0;
    background: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
}


.button-choose {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 2em;
    font-weight: bold;
    position: relative;
    bottom: -1.5em;
}

.information-head {
    color: black;
    font-weight: 500;
}

.pricing-infos {
    text-align: center;
    width: 100%;
    margin-bottom: 3.125em;
}
.pricing-infos ul {
    list-style-type: none;
    padding: 1em;
}

.contact-button {
    text-align: center;
}
.contact-button .pure-button {
    color: black;
    padding: 0.5em 2em;
    border-radius: 5px;
    border: 3px solid black;
}

.contact-button a.pure-button-primary {
    background: transparent;
    color: black;
    border-radius: 5px;
    font-size: 120%;
    font-weight: normal;
}










.message {
    width: 100%;
    margin: 0;
    padding: 1em;
    border-bottom: 1px solid #444;
    text-align: center;
}
.message.success { background: #276D00; color: #fff; }
.message.error { background: #B62316; color: #fff; }
.message.info { background: #2351D8; color: #fff; }

.message a { color: #fff; }


.code-editor {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8em;
}
.task-id, pre, .pgp-key-id, .code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
    padding: 0.1em 0.25em;
}

.task-id {
    background-color: rgba(0, 0, 0, 0.2);
}




.pagecontent {
    margin-bottom: 5em;
}
.content-wrapper > .pagecontent {
    width: 100%;
}





.leftnav {
    background-color: #2d3e50;
}
.leftnav a {
    text-decoration: none;
}
.navtitle {
    text-align: center;
}
.nav-menu-button, .pure-menu-heading {
    font-size: 1.1em;
    text-transform: uppercase;
    color: #678eb6;
}
.pure-menu-heading {
    margin-top: 1em;
}
.pure-menu-item a {
    color: #ddd;
    font-size: 1em;
}

.pure-menu-item.selected .pure-menu-link {
    background-color: #213243;
}

.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
    background-color: #455669 !important;
}


.block {
    background: #fff;
    border: 1px solid #ccc;
    margin: 1em;
}
.rounded-block {
    border-radius: 3px;
}
.padded-block {
    padding: .5em 1em;
}


.block-note {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em;
}
.block-note ul {
    margin-top: 0;
    margin-bottom: 0;
}
.block-note li i {
    font-size: 1.1em;
}


h2 {
    font-size: 2em;
    text-align: center;
    font-weight: normal;
}
h3 {
    font-weight: 300;
    font-size: 1.6em;
    margin: 0.5em 0;
}

.inst-list-item {
}

.inst-list-description {
    padding: 1em;
}
.inst-list-manage {
    padding: 1em;
    padding-top: 1.4em;
}
.inst-list-name, .inst-list-desc {
    margin: 0;
}
.inst-list-name a {
    text-decoration: none;
    color: #1f50d6;
    font-weight: bold;
    font-size: 1.2em;
}
.inst-stat {
    font-size: 1.6em;
    text-align: center;
    color: white;
    padding-top: 0.5em;
}
.inst-stat span {
    display: block;
    text-transform: uppercase;
    font-size: 0.5em;
}
.inst-stat-accounts { background: #63a307; }
.inst-stat-statuses { background: #d6a21f; }
.inst-stat-peers { background: #9916e3; }


.inst-view-status {
    background: #8e8e8e;
    color: white;
    text-align: center;
}
.inst-view-status-text {
    font-size: 1.8em;
    margin: 0.5em;
    margin-bottom: 0.3em;
}
.inst-view-status-version {
    font-size: 1.1em;
    margin: 0.5em 1em 1em 1em;
}

.inst-view-actions {
    text-align: center;
    padding: 1em;
}
.inst-view-actions form {
    display: inline;
}

.inst-status-block .inst-stat {
    padding-bottom: 0.4em;
}

.inst-status-active { background: #63a307; }
.inst-status-inactive { background: #a30707; }


.inst-view-plan {
    text-align: center;
}
.inst-view-plan h3 {
    font-weight: 300;
    font-size: 1.6em;
    margin: 0.5em 0;
}
.quota-status-danger { color: #900; font-weight: normal; }
.quota-status-warning { color: #900; }
.quota-status-normal {  }



table.table-light {
    text-align: left;
    margin: auto;
}
table.table-light td {
    padding: 0.2em 2em;
}


.inst-op {
    padding: 1em;
}
.inst-op h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.6em;
    font-weight: normal;
}
.inst-op label {
    font-weight: normal;
}
.inst-op input[type=submit] {
    margin: 1em 1em;
}
.inst-op .actions {
    text-align: center;
}



.inst-settings-group {
    padding: 1em;
}
.inst-settings-group h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.6em;
    font-weight: normal;
}
.inst-settings-group input[type=submit] {
    margin: 1em 0.5em;
}
.inst-settings-group .actions {
    text-align: right;
}


.inst-settings-group .pure-control-group {
    margin-bottom: 1em;
}

.pure-form-aligned label {
    font-weight: normal;
}
.pure-form-message {
    margin: 0.5em 4em;
    text-align: center;
}
.pure-form-message.form-error {
    color: #900;
}
.pure-form-message ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}



.button-danger {
    background: #a30707;
    color: #fff;
}


.notice li {
    padding-left: 0.5em;
}

.notice-error {
    background: #fee;
}
.notice-success {
    background: #efe;
}


.pure-table {

}
.full-width-table {
    border: 0;
    width: 100%;
}

.inst-unavailable-block {
    padding: 1em;
    background: #fff59b;
}
.inst-unavailable-block h4 {
    margin: 0 0 0.5em 0;
}
.inst-unavailable-block p {
    margin: 0.5em 0 0 0;
}








.public-stats {
    margin-bottom: 2em;
    padding: 0.5em 1em;
    text-align: center;
    font-size: 1.2em;
}
.public-stats em {
    font-weight: normal;
    font-style: normal;
}

.simple-form {
    padding: 1em 2em;
}
.simple-form .pure-form {
    text-align: center;
}
.simple-form .pure-form label,
.simple-form .pure-form input {
    width: 100%;
}
.simple-form .pure-form label {
    font-weight: normal;
    padding: 0.1em;
}
.simple-form.signup .pure-form label {
    text-align: left;
    margin-top: .75em;
}
.simple-form .pure-form .pure-button {
    margin-top: 1.5em;
}


.account-overview-block h3 {
    font-weight: 300;
    font-size: 1.6em;
    margin: 0.5em 0;
}
.account-overview-block table {
    width: 100%;
}


.more-link {
    text-align: right;
}
.more-link a {
    text-decoration: none;
}


.account-balance {
    font-size: 2em;
    text-align: center;
    margin: 0.5em 0;
}
.account-balance .value {
    font-size: 1.6em;
}
.account-balance-upcoming {
}
.account-balance-block .title {
    font-size: 1.4em;
    display: block;
}
.account-balance-block .value {
    font-size: 1.6em;
    display: block;
    text-align: center;
}
.account-balance-upcoming .value {
    color: #c33;
}
.account-balance-funded .value {
}




.deposit-paypal form {
    text-align: center;
}



.aligned-radio {
    list-style-type: none;
    display: inline-block;
    padding-left: 0;
}
.pure-form-aligned .pure-control-group .aligned-radio label {
    text-align: left;
    width: 100%;
}



.software-selector-description {
    font-weight: 300;
    font-size: 0.8em;
    display: block;
}

select option[disabled] {
    display: none;
}

.errorlist {
    color: #900;
    list-style-type: none;
}


.inst-task-actions {
    padding: 0 1em;
    text-align: right;
}

.inst-task-actions-form {
    display: inline-block;
}
.inst-task-actions-form input {
    margin: -0.5em 0.5em 0 0.5em;
}


pre.legal-text {
    overflow-wrap: normal;
    white-space: pre-wrap;
}


.dashboard-block {
    color: #fff;
    padding: 0;
}
.dashboard-block h3 {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5em;
    margin: 0;
    text-align: center;
}
.dashboard-block a {
    color: #fff;
}
.dashboard-block p {
    margin: 1em;
    font-weight: normal;
}

.dashboard-block-content {
    min-height: 3em;
}
.dashboard-block-link {
    text-align: right;
}

.dashboard-status-ok { background: #2351D8; }
.dashboard-status-danger { background: #B62316; }






.inst-plan-plan, .inst-plan-support {
    padding: 0.5em 1em;
}

form.inst-plan-change {
    width: 100%;
    margin-top: 2em;
}
form.inst-plan-change label {
    font-weight: normal;
}


.kb-question-list {
    list-style-type: circle;
}
.kb-question-list a {
    font-size: 1.2em;
}
.kb-question-meta .kb-vote-buttons {
    padding-left: 1em;
}
.kb-question-meta p {
    margin: 0.5em 0;
}

.kb-stats-panel {
    padding: 0.5em;
}
.kb-stats-panel > div {
    padding: 0.5em;
    background: #eee;
}
.kb-stats-n {
    text-align: right;
    font-size: 2em;
    margin: 0;
}
.kb-stats-legend {
    text-align: right;
    margin: 0em 0;
}
.kb-stats-link p {
    margin: 0;
}



.kb-cat-top-questions a {
    font-size: 1.0em;
}
.kb-cat-top-questions li.more {
}

.ticket-message {
    border-top: 1px solid #ccc;
    padding: 0 0 2em 0;
}
.ticket-message-meta {
    margin: 0.1em 0.5em;
    text-align: right;
    font-size: 0.9em;
}
.ticket-message-content {
    margin: 0.25em 1em;
}
.ticket-reply {
    margin-top: 1em;
}

.ticket-reply .pure-button {
    margin: 0 0.5em;
}

.ticket-message-by-staff {
    background: #f0f0fa;
}


.inline-form {
    display: inline;
}
.smol-button {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.8em;
    margin: 0 .5em;
}

.error-text {
    color: #900;
}

@media (max-width: 1000px) {
    .ribbon {
        padding-left: 2%;
        padding-right: 2%;
    }
}