/*
 * cssjs/omg.css
 *
 * OMG style sheets
 *
 * Copyright 2023 Philippe CROUÉ philippe@croue.com under GNU licence
 *
 */

:root {

    --pageWidth: 1024px;

    --defaultTopBottomMargin: 23px;
    --defaultLeftRightMargin: 0;

    --defaultTopBottomPadding: 7px;
    --defaultLeftRightPadding: 13px;

    --defaultBackgroundColor: white;
    --defaultColor: #333333;
    --boldColor: black;
    --anchorColor: #1E90FF;
    --anchorHoverColor: darkred;
    --borderColor: #DADADA;
    --bottomColor: white;
    --bottomLinkColor: #fcff00;
    --bottomBackgroundColor: #303030;

    --defaultFontSize: 17px;


    --tableOfContentLeftMargin: 33px;
    --tableOfContentBottomMargin: 13px;


    --tableHeadFootColor: black;
    --tableHeadFootBackground: #e0e0e0;
    --tableBodyTHColor: #333333;
    --tableBodyTHBackground: #f0f0f0;
    --tableBodyTDColor: #333333;
    --tableBodyTDBackground: white;

    /* Redefine default Surfin'Data TABLE colors - Begin */
    --TableHeadFootColorTH: black;
    --TableHeadFootBackgroundColorTH: #e0e0e0;
    --TableBodyColorTH: #333333;
    --TableBodyBackgroundColorTH: #f0f0f0;
    --TableBodyColorTD: #333333;
    --TableBodyBackgroundColorTDOdd: white;
    /* Redefine default Surfin'Data TABLE colors - End */

    --tableRowOddBackground: white;
    --tableRowEvenBackground: #F8F8F8;
    --highlightTableRowBackground: #FFFFE0;

    --bannerBottomHeight: 30px;


    --navPrimaryHeight: 40px;
    --navPrimaryPadding: 0 19px;
    --navPrimaryPaddingMini: 0 7px;

    --navFontSize: 19px;
    --navFontSizeMini: 13px;

    --navColor: #ffffff;
    --navBackground: #303030;
    --navHoverBackground: #505050;
    --navCurrentColor: #fcff00;
    --navCurrentBackground: initial;
}

@font-face {
    font-family: mainFont;
    src: url(Ubuntu-Regular.ttf);
}
@font-face {
    font-family: mainFont;
    src: url(Ubuntu-Bold.ttf);
    font-weight: bold;
}

/* Global styles */

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}

BODY {
    width: 100%;
    min-height: 100vh;
    background-color: black;
    text-align: center;
    font-family: mainFont;
    font-size: var(--defaultFontSize);
}
P {
  margin-bottom: var(--defaultTopBottomMargin);
}
LABEL {
  display: block;
  margin: 3px 0;
  padding: 5px 0;
  font-size: 110%;
  font-weight: bold;
}
INPUT, SELECT, TEXTAREA {
  margin: 3px 0;
  padding: 3px 5px;
  width: 100%;
  background-color: white;
/*
  border: 1px solid var(--borderColor);
  border-radius: 3px;
*/
  font-size: var(--defaultFontSize);
  font-weight: normal;
}
INPUT[TYPE="CHECKBOX"] {
  margin-left: 7px;
  width: auto;
}
TEXTAREA {
  height: 65px;
}
NOTE {
  font-size: 60%;
  font-weight: normal;
}

/* Table */

TABLE {
  border-collapse: collapse;
  margin-bottom: var(--defaultTopBottomMargin);
  border: none;
}
TABLE THEAD, TABLE TFOOT {
  border-top: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
}
TABLE THEAD TR,
TABLE TFOOT TR {
    background-color: var(--tableHeadFootBackground);
    border-bottom: 1px solid var(--borderColor);
}
TABLE TR:last-child {
  border-bottom: none;
}
TABLE THEAD TR TH,
TABLE TBODY TR TH,
TABLE TFOOT TR TH {
    margin-bottom: var(--defaultTopBottomMargin);
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}
TABLE THEAD TR TH,
TABLE TFOOT TR TH {
    color: var(--tableHeadFootColor);
}
TABLE TBODY TR TH {
    color: var(--tableBodyTHColor);
    background-color: var(--tableBodyTHBackground);
}
TABLE TBODY TR TD {
    color: var(--tableBodyTDColor);
    background-color: var(--tableBodyTDBackground);
}
TABLE THEAD TR TD,
TABLE TBODY TR TD,
TABLE TFOOT TR TD {
    margin-bottom: var(--defaultTopBottomMargin);
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
TABLE.invisible {
  border-bottom: none;
}
TABLE.invisible TH, TABLE.invisible TD {
  margin-bottom: 0;
}
.withRightBorder {
  border-right: 1px solid var(--borderColor);
}
TABLE.oddEven TBODY TR:NTH-CHILD(odd) TH,
TABLE.oddEven TBODY TR:NTH-CHILD(odd) TD {
  background-color: var(--tableRowOddBackground);
}
TABLE.oddEven TBODY TR:NTH-CHILD(even) TH,
TABLE.oddEven TBODY TR:NTH-CHILD(even) TD {
  background-color: var(--tableRowEvenBackground);
}

TABLE.highlightRow TBODY TR:HOVER TH,
TABLE.highlightRow TBODY TR:HOVER TD {
    background-color: var(--highlightTableRowBackground);
}

/* Template objects */

MAIN {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: var(--pageWidth);
    max-width: 100%;
    min-height: 100vh;
    color: var(--defaultColor);
    background-color: var(--defaultBackgroundColor);
    text-align: left;
}
SITENAME {
    display: inline-block;
    float: left;
    padding: 3px;
    font-size: 13px;
    font-weight: bold;
}
SITENAME IMG {
    display: inline-block;
    height: 24px;
    vertical-align: middle;
}
MENU {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--navBackground);
}

#connect_popup {
    float: right;
    margin-right: 13px;
}
#u, #p, #s {
    font-size: 100%;
}
#s {
    width: auto;
}

#page_languages {
    display: inline-block;
    float: right;
    margin: 0 0 -5px 0;
    padding: 5px;
}
#page_languages A IMG {
    margin: 0;
    padding: 2px 5px;
    height: 20px;
    border: none;
    border-radius: unset;
}
#page_mainmenu {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: var(--navFontSize);
}
#page_mainmenu UL,
#page_mainmenu UL LI {
    margin: 0;
    padding: 0;
}
#page_mainmenu UL LI {
    display: inline;
    float: left;
}
#page_mainmenu UL LI A,
#page_mainmenu UL LI A:visited {
    display: inline-block;
    margin: 0;
    padding: var(--navPrimaryPadding);
    line-height: var(--navPrimaryHeight);
    color: var(--navColor);
    background-color: var(--navBackground);
    border-radius: unset;
    font-weight: normal;
    font-style: normal;
    font-variant: small-caps;
    cursor: pointer;
    text-decoration: none;
}
#page_mainmenu UL LI A.selected {
    color: var(--navCurrentColor);
    background-color: var(--navCurrentBackground);
    border-radius: unset;
    font-weight: normal;
    font-style: normal;
}
#page_mainmenu UL LI A:hover,
#page_mainmenu UL LI A.selected:hover {
    background-color: var(--navHoverBackground);
    border-radius: unset;
}
#page_title {
    display: inline-block;
    margin: 0;
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    width: 100%;
}
#page_content {
    display: inline-block;
    margin: 0 0 calc(var(--bannerBottomHeight) + var(--defaultTopBottomPadding)) 0;
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    width: 100%;
}

#page_title H1 {
    margin: 0;
    padding: 0 0 var(--defaultTopBottomPadding) 0;
    font-size: 175%;
    font-weight: bold;
    font-variant: small-caps;
}
H2, H3, H4, H5, H6 {
    margin: 0;
    padding: var(--defaultTopBottomPadding) 0;
}
#page_copyright {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    padding: 7px 0;
    width: 100%;
    height: var(--bannerBottomHeight);
    color: var(--bottomColor);
    background-color: var(--bottomBackgroundColor);
    text-align: center;
    font-size: 70%;
}
#page_copyright A {
    color: var(--bottomLinkColor) !important;
    text-decoration: none;
}

/* Specific page styles */

INDEXBANNER {
    display: inline-block;
    margin: 0 0 var(--defaultTopBottomMargin) 0;
    padding: 33px 120px;
    width: 100%;
    color: black;
    background-color: #F1F3DD;
    background-size: cover;
    background-image: url(indexBanner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 3px 3px white;
}

/* Notification message bar */

#notificationBar {

  display: block;
  padding: calc(var(--defaultTopBottomPadding) * 2) var(--defaultLeftRightPadding);
  position: fixed;
  z-index: 1000;
  width: 100%;
  text-align: center;
  visibility: hidden;
}
.notificationBarInfo {
  color: darkgreen;
  background-color: #ccffcc;
  border-bottom: 1px solid darkgreen;
}
.notificationBarError {
  color: darkred;
  background-color: #ffcccc;
  border-bottom: 1px solid darkred;
}
.notificationBarAnimation {
  animation: 3s showHideNotificationBar;
  animation-fill-mode: forwards;
}
@keyframes showHideNotificationBar {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

/* Forms */

FORM UL {
    margin: 0;
    padding: 0;
}
FORM UL LI {
    margin-bottom: calc(var(--defaultTopBottomMargin) / 2);
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    max-width: 100%;
    list-style-type: none;
    color: darkred;
    background-color: #ffeeee;
    border: 1px solid #ffbbbb;
    border-radius: 7px;
    font-size: 75%;
    text-align: justify;
}
.formDiv {
    display: inline-block;
    margin: 0 auto var(--defaultTopBottomMargin) auto;
    max-width: 300px;
}
.formDiv .button-primary,
.formDiv .button-info,
.formDiv .button-alert,
.formDiv .button-reset {
    min-width: var(--buttonMinWidth);
}
.formHDiv {
    display: block;
}
.formHDiv LABEL, .formHDiv INPUT {
    display: inline-block;
    width: auto;
}
.formHDiv .button-primary,
.formHDiv .button-info,
.formHDiv .button-alert,
.formHDiv .button-reset {
    padding: 0 var(--defaultLeftRightPadding);
    min-width: 0;
    height: 28px;
}

.formButtons {
    display: block;
    margin: 0;
    text-align: center;
}
.formButtons DIV, .formButtons A, .formButtons BUTTON {
    display: inline-block;
    margin-top: var(--defaultTopBottomPadding);
    margin-bottom: 0;
    width: 100%;
}

/* Map show objects */

MAPTITLE {
    display: block;
    margin-bottom: calc(var(--defaultTopBottomMargin) / 2);
}
MAPTITLE .name {
    font-weight: bold;
}
MAPTITLE .description {
    font-size: 75%;
}
#mapDiv {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 500px;
    max-height: 100vh;
}
POPUP {
    display: inline-block;
    max-width: 240px;
    font-size: 90%;
    background-color: white;
}
.popupTitle {
    margin: 0 !important;
    font-weight: bold;
}
.popupIconName {
    margin-top: 0 !important;
    font-weight: normal;
}
.popupDesc {
    text-align: justify;
    font-size: 90%;
}
.goWithIcon {
    margin: 0 7px;
    height: 32px;
}
locDef {
    display: none;
}
#markerDiv {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
    width: 767px;
    max-width: 100%;
    max-height: 100vh;
    overflow-y: scroll;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--borderColor);
    border-radius: 13px;
}

#markerDiv, #markerDiv LABEL, #markerDiv INPUT, #markerDiv SELECT, #markerDiv TEXTAREA {
    font-size: 90%;
}
#markerDiv TABLE {
    margin-bottom: 0;
    background-color: white;
}
#markerDiv TABLE TR TH,
#markerDiv TABLE TR TD {
    background-color: var(--defaultBackgroundColor);
}
#markerDiv TABLE TFOOT TR TD {
    padding: 0;
}
#markerDiv INPUT[type=button] {
    margin-top: calc(var(--defaultTopBottomMargin) / 2);
}
#markerDiv windowTitle {
    display: inline-block;
    float: left;
    font-size: 110%;
    font-weight: bold;
    font-variant: small-caps;
}
#markerDiv crossClose {
    display: inline-block;
    margin-top: -3px;
    float: right;
    cursor: pointer;
    font-size: 24px;
}

/* Help table of content */

TABLEOFCONTENT {
    display: inline-block;
    margin: 0 0 var(--defaultTopBottomMargin) 0;
}
TABLEOFCONTENT A {
    display: inline-block;
    margin-bottom: var(--tableOfContentBottomMargin);
}
.tableOfContent2 {
    margin-left: var(--tableOfContentLeftMargin);
}
.tableOfContent3 {
    margin-left: calc(var(--tableOfContentLeftMargin) * 2);
}
.tableOfContent4 {
    margin-left: calc(var(--tableOfContentLeftMargin) * 3);
}

/* Edit map location */

.imageSelectOption {
  padding-left: calc(var(--defaultFontSize) + 5px);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: var(--defaultFontSize);
}
TABLE .editLocation {
  margin-top: var(--defaultTopBottomMargin);
  border-top: 1px solid var(--borderColor);
}

TABLE .editLocation TH, TABLE .editLocation TD {
  vertical-align: top;
  font-size: 80%;
}

/* Map manage - Search location */

#mapDiv #searchButton {
    position: inherit;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    width: 30px;
    height: 30px;
    line-height: 26px !important;
    z-index: 2000;
    cursor: pointer;
    color: black;
    background-color: white;
    background-clip: padding-box;
    text-align: center;
    font-size: 18px;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.2);
}
#mapDiv #searchDiv {
    display: none;
    position: relative;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    padding: var(--defaultTopBottomPadding) calc(var(--defaultLeftRightPadding) / 2);
    width: 320px;
    height: 300px;
    z-index: 2000;
    color: var(--defaultColor);
    background-color: var(--defaultBackgroundColor);
    background-clip: padding-box;
    text-align: left;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    cursor: auto;
}
#mapDiv #searchDiv #searchClose {
    display: inline-block;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 2px;
    right: 3px;
    line-height: 17px;
    font-size: 24px;
    cursor: pointer;
}
#mapDiv #searchDiv DIV #searchText {
    width: 250px;
    height: 30px;
    font-size: 100%;
}
#mapDiv #searchDiv DIV #searchGo {
    margin: 0 0 0 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 100%;
}
#mapDiv #searchDiv #searchResult {
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    text-align: left;
    font-size: 90%;
}
.searchName {
    display: inline-block;
    padding: 5px 0 0 0;
    width: 100%;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
.searchDescription {
    display: inline-block;
    padding: 0;
    width: 100%;
    font-size: 80%;
    font-weight: normal;
}

/* Responsive updates */

@media only screen and (max-width: 640px) {

    TABLE THEAD TR TH,
    TABLE THEAD TR TD,
    TABLE TBODY TR TH,
    TABLE TBODY TR TD,
    TABLE TFOOT TR TH,
    TABLE TFOOT TR TD {
        margin-bottom: 0;
    }

    TABLE,
    TABLE THEAD,
    TABLE TBODY,
    TABLE TFOOT,
    TABLE THEAD TR,
    TABLE TBODY TR,
    TABLE TFOOT TR,
    TABLE THEAD TR TH,
    TABLE TBODY TR TH,
    TABLE TFOOT TR TH,
    TABLE THEAD TR TD,
    TABLE TBODY TR TD,
    TABLE TFOOT TR TD {
        display: block;
        text-align: left !important;
    }

    #page_mainmenu {
        font-size: var(--navFontSizeMini);
    }
    #page_mainmenu LI {
        width: auto;
    }
    #page_mainmenu UL LI A,
    #page_mainmenu UL LI A:visited {
        padding: var(--navPrimaryPaddingMini);
    }
    INDEXBANNER {
        font-size: 130%;
        padding: 33px;
    }
    #markerDiv {
        top: 0;
        left: 0;
        transform: none;
    }
}

@media only screen and (max-width: 360px) {

    POPUP {
        max-width: 190px;
    }
}