/***********************************************************************
* Bent-O-Rama Bent-O-Rama.css
************************************************************************
* Copyright (c) 2019, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Style sheet for Bent-O-Rama.html.
************************************************************************
* 2019-04-10  P.Kimpel
*   Original version, cloned from POC-5.html.
***********************************************************************/


BODY {
    position:           relative;
    height:             calc(100% - 8px)}

HR {
    background-color:   #333399;
    height:             3px;
    border:             0;
    margin-top:         0.5em;
    margin-bottom:      0.5em;
    padding-top:        0;
    padding-bottom:     0}

#header {
    height:             75px}
#header H3 {
    margin-top:         0}

#ZoomDiv {
    position:           absolute;
    bottom:             0;
    left:               0;
    right:              0;
    margin-left:        auto;
    margin-right:       auto;
    z-index:            3;
    text-align:         center;
    width:              3em;
    font-size:          x-small;
    color:              #666;
    background-color:   white;
    padding:            2px;
    border:             1px solid #999}

#MapContainer {
    position:           absolute;
    left:               0;
    top:                64px;           /* initially */
    bottom:             0;
    z-index:            0;              /* insane Safari fix */
    width:              100%;
    overflow:           hidden}
#Map {
    position:           absolute;
    left:               0;
    right:              0;
    top:                0;
    bottom:             0;
    z-index:            1}              /* insane Safari fix */

#MapLegendDiv {
    position:           relative;
    display:            none;
    font-family:        Arial, Helvetica, sans-serif;
    background:         #FFC;
    padding:            10px;
    margin:             10px;
    border:             2px solid #F00}
#MapLegendDiv TABLE {
    margin-top:         4px}
#MapLegendDiv TABLE TR {
    vertical-align:     middle}
#MapLegendDiv TABLE TH.title {
    font-size:          larger}
#MapLegendDiv TABLE IMG {
    max-height:         24px}
#MapLegendDiv .closeIcon {
    font-size:          18px}

#DistrictMapContent {
    top:                120px;
    left:               50%;
    transform:          translate(-50%, 0);
    height:             420px;
    width:              650px}

#HelpIcon {
    position:           absolute;
    top:                0;
    right:              91px}

#MenuDiv {
    position:           absolute;
    top:                0;
    right:              139px;
    z-index:            9999991;        /* insane Safari fix */
    text-align:         right}
#MenuIcon {
    border:             1px solid white}
#MenuIcon:hover,
#MenuIcon:focus {
    border:             1px solid red}
#MenuTable {
    position:           relative;
    display:            none;
    border:             1px solid black;
    padding:            4px;
    z-index:            9999992;        /* insane Safari fix */
    box-shadow:         12px 12px 12px gray;
    background-color:   white;
    cursor:             pointer;
    text-align:         left}
#MenuTable A:link,
#MenuTable A:visited {
    color:              black;
    text-decoration:    none}
#MenuTable A:hover,
#MenuTable TR:hover {
    color:              white;
    background-color:   #00C}

#MenuSessionStatus {
    color:              gray;
    font-size:          smaller;
    border-bottom:      1px solid black}
#MenuShowPhysicalBentCheck,
#MenuShowVirtualBentCheck,
#MenuShowAlumniChapCheck,
#MenuShowNoInfoBentCheck,
#MenuShowSigmaTauPyramidsCheck,
#MenuClusterPinsCheck,
#MenuShowPinLegendCheck {
    font-size:          smaller}
#MenuContactSupport {
    border-top:         1px solid black}
#MenuContactSupport A:link {
    color:              #003479;
    font-weight:        bold}
#MenuContactSupport A:hover {
    color:              white;
    font-weight:        bold}
#MenuManageDevices,
#MenuListAllVisits,
#MenuChapterUpdate {
    display:            none}

#AuthenticatedDiv {
    position:           absolute;
    display:            none;
    top:                0px;
    right:              187px;
    color:              #090;
    padding-top:        4px;
    padding-bottom:     2px;
    padding-left:       8px;
    padding-right:      8px;
    border:             2px solid #090;
    border-radius:      4px;
    text-align:         center}
#HelloDiv {
    font-size:          larger;
    font-weight:        bold}
#PleaseRegisterDiv {
    position:           absolute;
    display:            none;
    top:                8px;
    right:              187px;
    color:              #999}

#ReZoomBtn {
    vertical-align:     middle}

#ChapterInfoPopup {
    position:           absolute;
    display:            none; /* Hidden by default */
    top:                4px;
    bottom:             4px;
    left:               auto;
    right:              4px;
    z-index:            10;
    width:              60%;
    max-width:          700px;
    transform:          translate(100%);
    background-color:   transparent;
    pointer-events:     none;
    overflow:           visible}

.collapseModeless {
    animation-name:     modelessSlideRight;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode:forwards}

.expandModeless {
    animation-name:     modelessSlideLeft;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode:forwards}

@keyframes modelessSlideRight {
    from {
        transform:      translate(0)}
    to {
        transform:      translate(100%) translate(-24px)}
    }

@keyframes modelessSlideLeft {
    from {
        transform:      translate(100%) translate(-24px)}
    to {
        transform:      translate(0)}
    }

#ChapterInfoCollapseTab {
    position:           absolute;
    left:               0;
    top:                8px;
    width:              24px;
    height:             48px;
    z-index:            15;
    background-color:   rgba(255,255,255,0.75);
    font-size:          14px;
    font-weight:        bold;
    padding:            0;
    border-radius:      0;
    border-left:        1px solid #999;
    border-top:         1px solid #999;
    border-bottom:      1px solid #999;
    border-right:       none;
    pointer-events:     auto}

#ChapterInfoCollapseTab:hover,
#ChapterInfoCollapseTab:focus {
    color:              red;
    border-color:       red;
    background-color:   white;
    text-decoration:    none;
    cursor:             pointer}

#ChapterInfoContent {
    position:           absolute;
    left:               24px;
    right:              0;
    top:                0;
    bottom:             0;
    background-color:   #FFD;
    padding:            8px;
    border:             2px solid black;
    box-shadow:         12px 12px 12px gray;
    pointer-events:     auto}
#ChapterInfoContent.inactive {
    background-color:   #CCC}

#ChapterName {
    font-size:          larger;
    font-weight:        bold}
#ChapterLoc,
#SchoolName {
    font-size:          medium}
#SigmaTauHistory {
    margin-top:         4px;
    font-size:          smaller;
    text-align:         center}
#BentReturnBtn {
    position:           absolute;
    z-index:            +1;
    top:                4em;
    right:              8px;
    display:            none;
    font-size:          smaller}
#VisitReturnBtn {
    position:           absolute;
    z-index:            +1;
    top:                4em;
    right:              8px;
    display:            none;
    font-size:          smaller}

#ChapterDataDiv {
    position:           absolute;
    top:                6em;
    bottom:             0;
    width:              calc(100% - 16px);
    overflow:           auto}           /* Enable scroll if needed */
#ChapterImageDiv {
    width:              100%;
    text-align:         center;
    display:            none}
#ChapterImage {
    max-width:          100%;
    max-height:         25vh}           /* 25% of viewport height */
#ChapterInfo {
    margin-top:         0.5em;
    width:              100%;
    max-height:         50%;
    font-size:          medium}
#BentCaption {
    margin-top:         1em;
    font-weight:        bold}
#BentTable {
    margin-top:         0.5em;
    width:              100%;
    display:            none}
#BentTableBody TR {
    vertical-align:     top}
#BentTableBody TD {
    padding:            4px}

#ChapterTotalsDiv {
    margin-top:         0.5em;
    text-align:         center}
#TotalVisitsSpan,
#RecentVisitsSpan {
    font-weight:        bold}
#ChapterEventDiv {
    position:           relative;
    display:            none}
#ChapterEventCalendarLink {
    position:           absolute;
    display:            none;
    right:              8px}
#ChapterEventCaption {
    margin-bottom:      0.5em;
    font-weight:        bold}

#AlumniDataDiv {
    position:           absolute;
    top:                6em;
    bottom:             0;
    width:              calc(100% - 16px);
    display:            none;
    overflow:           auto}           /* Enable scroll if needed */
#AlumniImageDiv {
    width:              100%;
    text-align:         center;
    display:            none}
#AlumniImage {
    max-width:          100%;
    max-height:         25vh}           /* 25% of viewport height */
#AlumniZoomDiv {
    margin-top:         0.5em;
    text-align:         center;
    font-weight:        bold}
#AlumniEventDiv {
    display:            none}
#AlumniEventCalendarLink {
    display:            none;
    float:              right}
#AlumniEventCaption {
    margin-bottom:      0.5em;
    font-weight:        bold}
#AlumniVisitDiv {
    margin-top:         0.5em}
#AlumniNewVisitBtn {
    float:              right}
#AlumniVisitCaption {
    font-weight:        bold}
#AlumniVisitTable {
    margin-top:         0.5em;
    display:            none}
#AlumniVisitTableBody TR {
    vertical-align:     top}
#AlumniVisitTableBody TD {
    padding:            4px}
#AlumniTotalsDiv {
    margin-top:         0.5em;
    text-align:         center}
#AlumniTotalVisitsSpan,
#AlumniRecentVisitsSpan {
    font-weight:        bold}
#AlumniInfo {
    margin-top:         0.5em;
    width:              100%;
    max-height:         50%;
    font-size:          medium}

#ChapterEventBody TD.ruleCol,
#AlumniEventBody TD.ruleCol {
    border-left:        1px solid black;
    border-right:       1px solid black;
    padding-left:       4px;
    padding-right:      4px}

#BentDataDiv {
    position:           absolute;
    top:                6em;
    bottom:             0;
    width:              calc(100% - 16px);
    display:            none;
    overflow:           auto}           /* Enable scroll if needed */
#BentDataHeader {
    font-weight:        bold}
#BentImageDiv {
    margin-top:         1em;
    width:              100%;
    text-align:         center;
    display:            none}
#BentImage {
    max-width:          100%;
    max-height:         25vh}           /* 25% of viewport height */
#BentNote {
    margin-top:         1em}
#NewVisitBtn {
    float:              right}
#VisitCaption {
    margin-top:         1em;
    font-weight:        bold}
#VisitTable {
    margin-top:         0.5em;
    display:            none}
#VisitTableBody TR {
    vertical-align:     top}
#VisitTableBody TD {
    padding:            4px}

#VisitBentName,
#VisitImageCaption,
#VisitInfoCaption {
    margin-top:         1em;
    font-weight:        bold}
#VisitDataDiv {
    position:           absolute;
    top:                6em;
    bottom:             0;
    width:              calc(100% - 16px);
    display:            none;
    overflow:           auto}           /* Enable scroll if needed */
#VisitBentName {
    font-weight:        bold}
#VisitImageDiv {
    margin-top:         0.5em;
    width:              100%;
    text-align:         center}
#VisitImageMsg {
    color:              red;
    font-weight:        bold}
#VisitImage {
    max-width:          100%;
    max-height:         25vh}           /* 25% of viewport height */
#VisitImageButtons {
    width:              100%;
    max-width:          700px}
#VisitImageRotateDiv {
    visibility:         hidden}
#VisitImageBtnDiv {
    z-index:            0}
#VisitInfoTable {
    margin-top:         0.5em;
    width:              100%}
#VisitRelativeLinks {
    text-align:         right;
    font-size:          smaller}
#VisitDate {
    text-align:         center}
#VisitNote {
    font-family:        Arial, Helvetica, sans-serif;
    width:              calc(100% - 4px)}
#NewVisit2Btn {
    float:              right}
#VisitInfoCaption {
    margin-top:         1em;
    font-weight:        bold}
#VisitDetailButtons {
    width:              100%}

#ZoomImageModal {
    background-color:   rgba(0, 0, 0, 0.8)}
#ZoomImageClose {
    color:              #CCC}
#ZoomImageClose:hover,
#ZoomImageClose:focus {
    color:              red;
    text-decoration:    none;
    cursor:             pointer}
#ZoomImage {
    position:           absolute;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-width:          95%;
    max-height:         95%;
    padding:            0;
    border:             4px solid black;
    border-radius:      16px;
    box-shadow:         12px 12px 12px black}

#ImageReleaseFileDiv {
    display:            none;
    text-align:         center}
#ImageReleaseButtonDiv {
    width:              100%;
    margin-top:         0.5em;
    text-align:         right}

#RequestEmailText {
    width:              90%;
    margin-left:        5%}
#RequestEmailTextError {
    visibility:         hidden;
    width:              80%;
    margin-left:        10%;
    color:              red;
    font-weight:        bold}
#RequestEmailButtonDiv {
    width:              100%;
    text-align:         right}