/*
Colors:

Blue: #4784ac
Blue D: #0c426a
Grey: #808285
Tan: #c2b59b
*/

.background-image {
    background-image: url('/images/3662969.jpg');
    background-size: cover;
    background-position: center center;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: -webkit-fiter .3s;
    transition: fiter .5s, 0.5s -webkit-filter linear;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.login-logo-image {
    display: block;
    width: 200px;
    height: 110px;
    margin: 0px auto;
    background: url("/images/SaskCancer_Logo.png") no-repeat;
    background-size: auto;
    position: relative;
    top: 40px;
    z-index: 10;
    background-size: contain;
}

body{
    background: #ccc !important;
}
.portal-outer{
    z-index: 50;
    position: relative;
    padding: 2em;
    border: 1px solid #aaa;
    width: 90%;
    margin: 5em auto ;
    background: #ffffff99;
    max-width: 1400px;

}
.portal{
    padding: 1em;
    background: #fff;
    margin: 2em auto;
    max-width: 1400px;
    border: 1px solid #aaa;

}

h1{
    color: #4784ac;
}
.header h1{
    color: #0c426a;
}

h2{
    color: #808285;
    font-size: 1.3em;
}

form h2{
    display: block;
    margin: 0.5em auto;
    text-align: center;
}




.footer{
    background: #4784ac;
    border: 1px solid #0c426a;
    padding: 1em;
    color: #fff;
}


/*

-------
*/
.main-logo{
    max-width: 200px;
}

.prehire.admin-bar #secondary {
    min-height: calc(100vh - 249px);
}
#page {
    padding: 36px 4px !important;
}
.site-content, .site-main .widecolumn {
    margin-left: 0 !important;
}
#secondary {
    width: 0 !important;
}

#content > article {
    width: 858px;
}
#content > article > .message {
    line-height: 1.1em;
    font-size: 14px;
    background-color: #f3e919;
    padding: 0.95em 1em;
    border: 1px solid #f3cd28;
    border-radius: 0.5em;
    margin: 0 30px 2em;
}
#content > article .gallery-columns-1.gallery-size-full {
    font-size: 0;
}
#content > article ul.materials {
    padding: 0;
    border-width: 0 1px 1px;
    border-style: none dotted dotted;
    border-color: transparent #ddd #ddd;
    margin: 0 0 2em;
    display: block;
}
#content > article ul.materials li {
    padding: 0.2em 0.5em;
    border-top: 1px dotted #ddd;
    margin: 0;
    display: block;
}
#content > article ul.materials li.material-file.viewed {
    background-color: #afd2cd;
}
#content > article ul.materials li.material-file.viewed::before {
    content: '\f418';
    font: 26px/1 Genericons;
    vertical-align: middle;
    color: #0e955e;
    margin-top: -4px;
    display: inline-block;
}
#content > article ul.materials blockquote {
    margin: 0;
}
#content > article ul.materials p {
    margin-bottom: 0.5em;
}
#content > article ul.materials p:last-child {
    margin-bottom: 0;
}
.entry-header a.landing {
    font-size: 0.8em;
    margin-top: -0.8em;
    float: right;
}
.entry-content, .entry-summary, .page-content {
    -moz-hyphens: none !important;
    hyphens: none !important;
    word-wrap: normal !important;
}

ol {
    list-style: decimal;
}
ol > li > ol {
    list-style: lower-alpha;
}
ol > li > ol > li > ol {
    list-style: lower-roman;
}
ol > li, ol > li p {
    margin: 0 0 1em;
}

form.login {
    width: 381px;
    max-width: 100%;
    padding: 1em 18px 0 0;
}
form input[type="submit"] {
    margin: 0 0 24px;
}
form.login input[type="submit"] {
    margin-left: 120px;
}
form label {
    position: relative;
    display: block;
}
form label > img {
    vertical-align: middle;
}
form label > span {
    width: 100px;
    line-height: 2.1em;
    text-align: right;
    padding-right: 5px;
    float: left;
}
form label.choice {
    padding-left: 20px;
}
form label.choice > input[type="checkbox"], form label.choice > input[type="radio"] {
    position: absolute;
    top: 0.74em;
    left: 0;
    margin-top: -0.44em;
    float: left;
    z-index: 10;
}
form label.choice:hover > input[type="checkbox"], form label.choice:hover > input[type="radio"] {
    box-shadow: 0 0 3px #377369;
}
form label.choice > img + input[type="checkbox"], form label.choice > img + input[type="radio"] {
    top: 50%;
}
form label.choice > *:last-child {
    margin-bottom: 0;
}
form label.agree {
    padding: 16px 20px 16px 40px;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    margin: 0 0 24px 20px;
}
form label.agree > input[type="checkbox"] {
    top: 1.76em;
    left: 16px;
}
form label + small {
    max-width: 280px;
    line-height: 1.2em;
    text-align: center;
    color: #777;
    margin: 0.4em 0 0 20px;
    display: block;
}
form label.required {
    color: inherit;
}
form label.required::before {
    content: "*";
    color: #a90329;
    margin-right: 0.5em;
    float: none;
    position: absolute;
    display: inline;
    top: 0px;
    left: -14px;
}
form li label.required::before {
    left: -34px;
}
form input:invalid {
    box-shadow: none;
}
form input.error, form input:-moz-ui-invalid {
    background: #ffdddd;
    background: -moz-linear-gradient(45deg, transparent 0%, transparent 50%, #a90329 50.1%, #a90329 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,transparent), color-stop(50%,transparent), color-stop(50.1%,#a90329), color-stop(100%,#a90329)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, transparent 0%,transparent 50%,#a90329 50.1%,#a90329 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, transparent 0%,transparent 50%,#a90329 50.1%,#a90329 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, transparent 0%,transparent 50%,#a90329 50.1%,#a90329 100%); /* IE10+ */
    background: linear-gradient(45deg, transparent 0%,transparent 50%,#a90329 50.1%,#a90329 100%); /* W3C */
    background-position: right top;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    border-color: #a90329;
    box-shadow: none;
}

ol.packages {
    list-style: none;
    padding: 0 1em;
    margin: 2em 0;
    display: block;
}
ol.packages li {
    position: relative;
    padding: 0.5em;
    border-left: 8px solid transparent;
    margin: 0 0 8px 60px;
    display: block;
}
ol.packages li > aside {
    position: absolute;
    top: 12px;
    left: -88px;
    width: 60px;
    font-size: 10px;
    font-variant: small-caps;
    text-align: center;
    white-space: pre;
    color: #888;
}
ol.packages li.incomplete {
    border-left-color: #cd6c03;
}
ol.packages li.incomplete > aside {
    color: #884803;
}
ol.packages li.not-passed {
    border-left-color: #cd0016;
}
ol.packages li.not-passed > aside {
    color: #88000d;
}
ol.packages li.not-agreed {
    border-left-color: #cd00c0;
}
ol.packages li.not-agreed > aside {
    color: #88007f;
}
ol.packages li.not-started {
    border-left-color: #cdcdcd;
}
ol.packages li.not-started > aside {
    color: #888;
}
ol.packages li.optional {
    border-left-color: #a7cca3;
}
ol.packages li.optional > aside {
    color: #6c856a;
}
ol.packages li.complete {
    border-left-color: #0bcd00;
}
ol.packages li.complete > aside {
    color: #078800;
}
ol.packages li > p:last-child {
    margin-bottom: 0;
}

.button {
    font-size: 1.2em;
}
.button.disabled, .button.disabled:hover {
    background-color: #aaa;
}
@media (max-width: 530px) {
    .portal-outer{
        padding: 0px;
        width: 98%;
    }
}