﻿#contentFull {
    width:100%;
}

#FeatureImage {
    float: right;
    margin-left:20px;
    margin-bottom:10px;
}

#DashboardHeading {
font-size:large !important;
margin-bottom:1em;
}

.HSPDataContainer {
    width: 21em;
    border: 1px outset #dddddd;
    color: #333333;
    background-color: #f9f9f9;
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
}

.HSPDataHeader {
    font-weight: bold;
    text-align: center;
    border-bottom: 6px solid #b3d234;
    padding:0.6em 0.5em 0.5em 0.5em;
}

.HSPDataHeader a {
    color:#333333 !important;
    text-decoration:underline;
}

    .HSPDataHeader .Title a:hover {
        color: #555555 !important;
    }

    .Subtitle {
        font-weight:normal;
    }

.MoreInformation, #AdditionalLinkContent {
    position: fixed;
    width: 40%;
    border: solid 1px #333333;
    box-shadow: 1px 1px 8px #333333;
    background-color: #ffffff;
    z-index: 5;
    top: 30%;
    left: 30%;
    padding: 2em;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s linear;
}

.MoreInformation ul, #AdditionalLinkContent ul {
   padding-left:4em!important;
   list-style-type:disc!important;
}

    .MoreInformation li:before, #AdditionalLinkContent li:before {
        content:none!important;
    }

.MoreInformationClose, #AdditionalLinkContentClose {
    float: right;
    z-index: 2;
    cursor: pointer;
    color:#000000;
    border-bottom:dotted 1px #333333;
    padding-left:2px;
    padding-right:2px;
    padding-top:2px;
}

    .MoreInformationClose:hover, #AdditionalLinkContentClose:hover {
        border-bottom: solid 1px #bb1122;
        text-decoration: none !important;
        color: #bb1122;
    }

    .MoreInformationClose:after, #AdditionalLinkContentClose:after {
        display: inline-block;
        content: '\274C';
    }

    .MoreInformationClose:hover:after, #AdditionalLinkContentClose:hover:after {
        text-decoration: none !important;
    }

.MoreInformationLink {
    border: solid 3px #555555;
    border-radius: 22px;
    color: #555555;
    font-size: 18px;
    z-index: 2;
    float: right;
    padding: 0 8px;
    cursor: pointer;
    text-decoration: none !important;
    font-family: CenturyGothic;
    font-weight:bold;
}

    .MoreInformationLink:hover {
        text-decoration: none !important;
        background-color: #555555;
        color: #f9f9f9 !important;
        border: double 3px #f9f9f9;
    }
    .MoreInformationLink:active {
        background-color: #eeeeee;
        border: double 3px #555555;
        color: #555555!important;
    }


.HSPDataContent {
    padding: 0 1.2em;
}

    .HSPDataContent ul {
        margin-bottom: 0.5em !important;
        
    }

    .HSPDataContent li {
        border-bottom: dotted 1px #dddddd;
        margin-top: 0.8em !important;
        padding-bottom: 0.2em !important;
        padding-left: 1.8em !important;
    }

        .HSPDataContent li:before {
            background-image: url('/images/HealthyWA/square.png');
            background-size: 7px 7px;
            display: inline-block;
            width: 7px;
            height: 7px;
            top: 5px !important;
            left: 5px !important;
            content: "" !important;
        }

        .HSPDataContent li.LastListItem:before {
            background-image: url(/images/HealthyWA/Arrow3.png) !important;
            background-size:18px 18px;
            width:18px;
            height:18px;
            content:""!important;
            left:0 !important;
            top:0 !important;
        }

#AdditionalLinkHeading {
    display:block;
    clear:both;
}

#AdditionalLink {
    cursor:pointer;
}

#BackgroundOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s linear;
}

.RemoveTransform {
    transform: none !important;
}

#contentFull .MakeVisible {
    visibility: visible;
    opacity: 100;
}

@media screen and (max-width: 991px) {
    #FeatureImage {
        width:14em;
        margin-left: 14px;
        margin-bottom: 8px;
    }
    .HSPDataContainer {
        width: 24em;
        float: none;
        display: inline-block;
        margin-left: 3%;
        margin-right: auto;
    }

    .Title {
        font-size:1.1em;
    }

    .MoreInformationLink {
        padding:0 9px;
    }

    .HSPDataContent li:before {
        background-size: 9px 9px;
        width: 9px;
        height: 9px;
        top: 14px !important;
        left: 14px !important;
    }

    .HSPDataContent li.LastListItem:before {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        left: 10px !important;
        top: 8px !important;
    }

.MoreInformation, #AdditionalLinkContent {
        position: fixed !important;
        top: 8% !important;
        left: 10% !important;
        width: 82% !important;
    }

    #contentFull .MoreInformation ul li, #AdditionalLinkContent ul li {
        display: list-item !important;
        padding-left: 8px !important;
        padding-right: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .MoreInformation ul, #AdditionalLinkContent ul {
        padding-left: 2em;
    }

    .MoreInformation p, #AdditionalLinkContent p {
        margin-bottom: 0.6em;
    }
}

@media screen and (max-width: 776px) {
    #FeatureImage {
        width: 26vw;
        margin-left: 2vw;
        margin-bottom: 2vw;
    }

    .HSPDataContainer {
        width: 42vw;
        margin-left: 3%;
    }

    .Title {
        font-size: 0.9em;
    }

    .Subtitle {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 660px) {
    .Title {
        font-size: 0.85em;
    }

    .HSPDataContent {
        font-size:0.95em;
    }

    .MoreInformationLink {
        padding:0 8px;
        font-size:16px;

    }

    .HSPDataContent li:before {
        background-size: 8px 8px;
        width: 8px;
        height: 8px;
        top: 14px !important;
        left: 14px !important;
    }

    .HSPDataContent li.LastListItem:before {
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        top:10px!important;
    }

    #contentFull .HSPDataContent ul li {
        padding-left: 32px !important;
    }
}

@media screen and (max-width: 580px) {
    #FeatureImage {
        display:none;
    }

    .Title {
        font-size: 1em;
    }

    .Subtitle {
        font-size: 0.9em;
    }

    .HSPDataContainer {
        width: 68%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-size: 1em;
    }

    .HSPDataContent {
        font-size:1em;
    }

    .HSPDataContent li:before {
        background-size: 9px 9px;
        width: 9px;
        height: 9px;
        top: 14px !important;
        left: 18px !important;
    }

    .HSPDataContent li.LastListItem:before {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        left: 14px !important;
        top: 8px !important;
    }

    .MoreInformationLink {
        border-radius: 22px;
        font-size: 20px;
        padding: 0 10px;
    }

    .MoreInformation, #AdditionalLinkContent {
        position: fixed !important;
        font-size: 0.9em;
        padding: 0.6em 1.4em 0.2em 1.4em;
        top: 7% !important;
        width: 92% !important;
        left: 4% !important;
        overflow:auto;
    }

    #AdditionalLinkContent {
        font-size: 0.8em;
    }
        
        .MoreInformationClose, #AdditionalLinkContentClose {
            font-size: 0.85em;
        }

    #contentFull .MoreInformation h2, #AdditionalLinkContent h2 {
        clear: both;
        margin-top: 1.8em;
        margin-bottom: 0.8em;
        font-size: 1.1em;
        text-align: left !important;
    }
    
    .MoreInformation ul, #AdditionalLinkContent ul {
        padding-left: 2em!important;
    }

    #contentFull .MoreInformation li, #AdditionalLinkContent li {
        margin-bottom: 0.4em !important;
        padding-left:2px!important;
    }

    .MoreInformation p, #AdditionalLinkContent p {
        margin-top: 1em;
    }

    #contentFull .HSPDataContent ul li {
        padding-left: 40px !important;
    }
}

@media screen and (max-width: 505px) {
    .HSPDataContainer {
        width: 78vw;
        font-size:3.4vw;
    }
}

@media screen and (max-width: 450px) {
    .HSPDataContainer {
        width: 78vw;
        font-size: 3.6vw;
    }

    .MoreInformationLink {
        border-radius: 16px;
        font-size: 16px;
        padding: 0 8px;
        border: solid 3px #333333;
    }

        .MoreInformationLink:hover {
            border: double 3px #f9f9f9;
        }

        .MoreInformationLink:active {
            border: double 3px #555555;
        }

    .HSPDataContent {
        font-size: 3.7vw;
    }
    #contentFull .HSPDataContent ul li {
        padding-left: 20px !important;
    }

    .HSPDataContent li:before {
        background-size: 8px 8px;
        width: 8px;
        height: 8px;
        top: 3.7vw !important;
        left: 4px !important;
    }

    .HSPDataContent li.LastListItem:before {
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        top:0.7em!important;
        left:0!important;
    }
}