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


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

.warn {
    background-color:   #FF9}

.rj .dijitInputField INPUT {
    text-align:         right}

.sectionHead {
    margin-top:         0.5em;
    margin-bottom:      0.5em;
    font-weight:        bold}

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

#HeaderItemsDiv {
    position:           absolute;
    top:                6px;
    right:              150px;
    text-align:         right}
#ContactSupportLink {
    margin-top:         16px;
    font-size:          smaller}
#HelloSpan {
    display:            none;
    color:              #090;
    margin-top:         4px;
    padding-top:        4px;
    padding-bottom:     2px;
    padding-left:       8px;
    padding-right:      8px;
    border:             2px solid #090;
    border-radius:      4px;
    font-size:          larger;
    font-weight:        bold}
#PleaseRegisterSpan {
    display:            none;
    margin-top:         16px;
    font-size:          smaller;
    color:              #999}

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

#ChapterList {
    width:              20em}
#ChapterMsg {
    font-weight:        bold}

#ChapterTabs {
    position:           relative;
    max-width:          800px;
    left:               50%;
    transform:          translate(-50%,0)}
#ChapterTabs DIV.dijitTabPaneWrapper {
    overflow:           auto}

#ChapterImageGroup {
    display:            none}
#ChapterImageDiv {
    width:              100%;
    text-align:         center}
#ChapterImageMsg {
    color:              red;
    font-weight:        bold}
#ChapterImage {
    max-width:          100%;
    max-height:         50vh}           /* 50% of viewport height */
#ChapterImageButtons {
    width:              100%;
    max-width:          700px}
#ChapterImageRotateDiv {
    visibility:         hidden}
#ChapterImageBtnDiv {
    z-index:            0;
    display:            block}

#ChapterUpdaterDiv {
    display:            none}
#UpdaterTable.normal > #UpdaterTableBody TR TD {
    padding:           4px}
#NewEmailAddrRow {
    vertical-align:     middle}

#ChapterInfoGroup {
    display:            none}
#CalendarTable {
    width:              100%}
#CalendarTable TR {
    vertical-align:     middle}
#ChapterCalendar,
#ChapterDescription {
    margin-left:        1em;
    margin-top:         0.5em;
    width:              100%;
    max-width:          calc(700px - 1em);
    font-size:          medium}
#ChapterDescriptionButtons {
    width:              100%;
    max-width:          700px}

/* This is the mess necessary to get the Chapter Description editor box
   to be responsive to the window height */

#ChapterTabs {
    height:             calc(100% - 8em)}       /* allow for header */
#ChapterTabs DIV.dijitTabPaneWrapper {
    height:             100%}
#ChapterTabs DIV.dijitTabContainerTopChildWrapper {
    height:             100%}
#ChapterInfoPane {
    height:             calc(100% - 16px)}      /* allow for tabs */
#ChapterInfoGroup {
    height:             100%;
    display:            none}
#ChapterDescription {
    height:             calc(100% - 12em);      /* allow for calendar URLs */
    min-height:         10em}
#ChapterDescription DIV.dijitEditorIFrameContainer {
    height:             calc(100% - 34px)}      /* allow for toolbar */

/* End of Chapter Description mess */

#BentListDiv {
    margin-top:         1em}
#BentList {
    width:              32em}
#BentMsg {
    font-weight:        bold}

#BentInfoDiv {
    display:            none}
#BentImageDiv {
    margin-top:         1em;
    width:              100%;
    max-width:          700px;
    text-align:         center}
#BentImageMsg {
    color:              red;
    font-weight:        bold}
#BentImage {
    max-width:          100%;
    max-height:         30vh}           /* 30% of viewport height */
#BentImageButtons {
    width:              100%;
    max-width:          700px}
#BentImageRotateDiv {
    visibility:         hidden}
#BentImageBtnDiv {
    z-index:            0;
    display:            block}
#BentDataTable {
    margin-top:         1em;
    width:              700px}
#BentName {
    width:              30ch}
#BentNote {
    font-family:        Arial, Helvetica, sans-serif;
    width:              100%}
#BentLat,
#BentLng{
    text-align:         right;
    width:              12ch}

#UseMapModal .modalContent {
    top:                5%;
    bottom:             5%;
    left:               5%;
    width:              90%;
    max-width:          90%;
    transform:          none;
    overflow:           hidden;
    padding:            0;
    border:             2px solid black;
    border-radius:      16px;
    box-shadow:         12px 12px 12px gray}

#map {
    position:           absolute;
    left:               0;
    top:                0;
    bottom:             0;
    right:              0}

#MapPanelDiv {
    font-family:        Arial, Helvetica, sans-serif;
    font-size:          small;
    background:         #FFC;
    padding:            10px;
    margin:             10px;
    border:             2px solid #F00}

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