/** 
 * Copyright (c) Frankenbueffel e.V. 2003-2012. 
 * Alle Rechte vorbehalten. Alle gewerblichen Schutz- und Urheberrechte hinsichtlich des 
 * gesamten Text-, Bild- und Softwarematerials o.ae. auf dieser site sind Eigentum von 
 * Frankenbueffel Westheim e.V. 
 * 
 * Author: Joerg Fackler 
 */


/*
                     mmmm
                     ""##
  m#####m   m####m     ##       m####m    ##m####  mm#####m
 ##"    "  ##"  "##    ##      ##"  "##   ##"      ##mmmm "
 ##        ##    ##    ##      ##    ##   ##        """"##m
 "##mmmm#  "##mm##"    ##mmm   "##mm##"   ##       #mmmmm##
   """""     """"       """"     """"     ""        """"""

*/

.red {
    color: red
}

.green {
    color: green
}

.errmsg {
    color: red;
}


/* dimensions
       mm     ##
       ##     ""
  m###m##   ####     ####m##m   m####m   ##m####m  mm#####m
 ##"  "##     ##     ## ## ##  ##mmmm##  ##"   ##  ##mmmm "
 ##    ##     ##     ## ## ##  ##""""""  ##    ##   """"##m
 "##mm###  mmm##mmm  ## ## ##  "##mmmm#  ##    ##  #mmmmm##
   """ ""  """"""""  "" "" ""    """""   ""    ""   """"""
*/

.overall,
nav.topmenu,
.viewer .content,
.submenu {
    width: 800px;
}

table.tblsmall,
.leftside,
.rightside {
    width: 100px;
}

.tblsmall img,
.tblsmall input {
    width: 90px;
}

body,
.overall {
    height: 1000px;
}

.middle {
    width: 590px;
    text-align: justify;
}

#map {
    width: 560px;
}

table.dates {
    height: 300px;
    padding: 10px;
}

.head {
    height: 100px;
}

table.dates,
.tblnorm,
.thumbs {
    width: 100%;
}

.html {
    width: 98%;
    padding: 1%;
}

.daydate {
    width: 90%;
}

.thumbs TD {
    width: 25%;
    height: 150px;
}

.viewer {
    background-color: black;
}

.viewer a {
    text-decoration: none;
}

.viewer a:hover,
.viewer a span:hover,
.viewer div span:hover {
    color: white;
}

.wir li {
    height: 125px;
    width: 100px;
}


/*


 mm                                  mm
 ##                                  ##
 ##m###m    m####m    ##m####   m###m##   m####m    ##m####
 ##"  "##  ##"  "##   ##"      ##"  "##  ##mmmm##   ##"
 ##    ##  ##    ##   ##       ##    ##  ##""""""   ##
 ###mm##"  "##mm##"   ##       "##mm###  "##mmmm#   ##
 "" """      """"     ""         """ ""    """""    ""



border margin padding */

.viewer .content,
.submenu {
    margin-right: auto;
    margin-left: auto;
}

.content,
.submenu {
    border-bottom: 0px;
}

td.tblsmall02,
.tblnorm01,
.tblnorm02,
.tblnorm00 {
    border-style: dotted;
}

.content,
.submenu,
.cnthead,
TABLE {
    border-collapse: collapse;
}

.bottommenu,
.overall {
    margin: 0 auto;
}

BODY,
FORM,
.collapse,
.topmenu {
    margin: 0px;
    padding: 0px;
}

ul.wide-list li {
    margin-bottom: 0.8em;
}

IMG {
    border: 0px;
}

.wir li {
    margin: 10px;
    margin-bottom: 20px;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}


/*


    mmmm
   ##"""                         ##
 #######    m####m   ##m####m  #######   mm#####m
   ##      ##"  "##  ##"   ##    ##      ##mmmm "
   ##      ##    ##  ##    ##    ##       """"##m
   ##      "##mm##"  ##    ##    ##mmm   #mmmmm##
   ""        """"    ""    ""     """"    """"""

font-sizes ---------------------------------------------*/

TEXTAREA,
INPUT,
SELECT,
BODY {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.headline {
    font-size: medium;
}

TEXTAREA,
INPUT,
SELECT,
BODY,
.content,
.submenu,
.tblnorm02,
.tblnorm01,
.html,
.topmenu A {
    font-size: small;
}

.shortnews,
.shortdates,
td.tblsmall01,
td.tblsmall02,
.tblnorm00,
.footer,
.cnthead {
    font-size: xx-small;
}

A,
.link,
.shortdates,
.shortnews {
    text-decoration: none;
}

.tblsmall input {
    font-size: 125%;
}

.bigger {
    font-size: 125%;
}

.big {
    font-size: 200%;
}

.desc {
    font-size: x-small;
}


/*


           mmmm         ##
           ""##         ""
  m#####m    ##       ####      m###m##  ##m####m  mm#####m
  " mmm##    ##         ##     ##"  "##  ##"   ##  ##mmmm "
 m##"""##    ##         ##     ##    ##  ##    ##   """"##m
 ##mmm###    ##mmm   mmm##mmm  "##mm###  ##    ##  #mmmmm##
  """" ""     """"   """"""""   m""" ##  ""    ""   """"""
                                "####""

text-aligns ---------------------------------------------*/

BODY,
FORM,
.collapse {
    margin: 0px;
    padding: 0px;
}

.right,
.rightside,
.action {
    text-align: right;
}

.left,
.leftside,
.cnthead,
.overall {
    text-align: left;
}

.center,
.thumbs TD,
.bottommenu,
.footer,
.topmenu {
    text-align: center;
}

.content,
.submenu {
    text-align: justify;
}

table#news.tblsmall .tblsmall01,
table#party.tblsmall .tblsmall01,
table#bilder.tblsmall .tblsmall02,
table#birthday.tblsmall .tblsmall02,
table#random.tblsmall .tblsmall02,
table#login2.tblsmall .tblsmall02,
table#brothers.tblsmall .tblsmall02 {
    text-align: center;
}

table#party.tblsmall .tblsmall02 {
    text-align: right;
}

table#login1.tblsmall .tblsmall01,
table#dates.tblsmall .tblsmall01 {
    text-align: left;
}

.wir li {
    text-align: center;
}

.force_top {
    vertical-align: top;
}


/** 

 ##m####m   m#####m  ##m  m##
 ##"   ##   " mmm##   ##  ##
 ##    ##  m##"""##   "#mm#"
 ##    ##  ##mmm###    ####
 ""    ""   """" ""     ""

 banner menu stuff **/

.stickymenu {
    position: fixed;
    top: 0;
    width: 798px;
}

.strike {
    text-decoration: line-through;
}

.topmenu {
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

nav.topmenu {
    display: table;
    table-layout: fixed;
    position: sticky;
    top: 0;
    margin: 0 auto;
    padding: 0;
}

nav.topmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

nav.topmenu ul li {
    list-style: none;
    text-align: center;
    flex-grow: 1;
}

nav.topmenu ul li a {
    display: block;
    text-decoration: none;
}

.headline {
    letter-spacing: 10pt;
    font-weight: bold;
    display: inline;
}


/* 


                               mmmm                   ##
   ##                          ""##        ##         ""
 #######    m####m    m####m     ##      #######    ####     ##m###m
   ##      ##"  "##  ##"  "##    ##        ##         ##     ##"  "##
   ##      ##    ##  ##    ##    ##        ##         ##     ##    ##
   ##mmm   "##mm##"  "##mm##"    ##mmm     ##mmm   mmm##mmm  ###mm##"
    """"     """"      """"       """"      """"   """"""""  ## """
                                                             ##



Tooltip text */


/* https://www.w3schools.com/howto/howto_css_tooltip.asp */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}


/* Tooltip arrow */

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/**


                                         mmmm
                                         ""##
  m####m   ##m  m##   m####m    ##m####    ##       m#####m  "##  ###
 ##"  "##   ##  ##   ##mmmm##   ##"        ##       " mmm##   ##m ##
 ##    ##   "#mm#"   ##""""""   ##         ##      m##"""##    ####"
 "##mm##"    ####    "##mmmm#   ##         ##mmm   ##mmm###     ###
   """"       ""       """""    ""          """"    """" ""     ##
                                                              ###

overlay, used by viewer */

#overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: visible;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    text-align: right;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0,0,0,0.5);  Black background with opacity */
    z-index: 0;
    /* Specify a stack order in case you're using a different order for other elements */
    /*cursor: pointer;  Add a pointer on hover */
    /* pointer-events: none; */
}

.overlayButton {
    position: fixed;
    /* higher as #overlay */
    z-index: 1;
}

.viewer a #gallery_image {
    display: block;
    margin: auto;
}


/*



##      ##  ##m####   m#####m  ##m###m   ##m###m    m####m    ##m####
"#  ##  #"  ##"       " mmm##  ##"  "##  ##"  "##  ##mmmm##   ##"
 ##m##m##   ##       m##"""##  ##    ##  ##    ##  ##""""""   ##
 "##  ##"   ##       ##mmm###  ###mm##"  ###mm##"  "##mmmm#   ##
  ""  ""    ""        """" ""  ## """    ## """      """""    ""
                               ##        ##

! wrapper is merely used in sender.htm */

div.wrapper ul {
    width: 100%;
}

div.wrapper ul li {
    float: left;
    width: 14em;
    list-style-type: none;
    list-style-image: none;
}

div.wrapper br {
    clear: left;
}

div.wrapper {
    margin-bottom: 1em;
}


/**


                     mmmm      mmmm
                     ""##      ""##
  m###m##   m#####m    ##        ##       m####m    ##m####  "##  ###
 ##"  "##   " mmm##    ##        ##      ##mmmm##   ##"       ##m ##
 ##    ##  m##"""##    ##        ##      ##""""""   ##         ####"
 "##mm###  ##mmm###    ##mmm     ##mmm   "##mmmm#   ##          ###
  m""" ##   """" ""     """"      """"     """""    ""          ##
  "####""                                                     ###



dl gallery TODO semantically incorrect */

dl.gallery {
    border: 1px solid gray;
    background-color: #ccc;
    text-align: center;
    padding: 10px;
    float: left;
    margin-right: 1em;
}

.gallery dt {
    font-weight: bold;
}

.gallery dt img {
    border: 1px solid gray;
}

.gallery dd {
    margin: 0;
    padding: 0;
}

.gallery dt img {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}

.gallery dd {
    margin: 0;
    padding: 0;
}


/*


              ##
              ""
 ####m##m   ####     mm#####m   m#####m
 ## ## ##     ##     ##mmmm "  ##"    "
 ## ## ##     ##      """"##m  ##
 ## ## ##  mmm##mmm  #mmmmm##  "##mmmm#
 "" "" ""  """"""""   """"""     """""

misc */

body {
    overflow-y: scroll;
}

H3,
H1 {
    display: inline;
}

.overall {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}

.share {
    fill: white;
}

.touch {
    padding: 20px;
}

.mapUI {
    background-color: white;
    border: 2px solid white;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: "pointer";
    margin-bottom: 22px;
    margin-right: 20px;
    text-align: "center";
    float: left;
    color: rgb(25, 25, 25);
    font-family: Roboto, Arial, sans-serif;
    font-size: 32px;
    line-height: 38px;
    padding-left: 5px;
    padding-right: 5px;
}

#map {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
}

#map:after {
    /* makes it square */
    content: "";
    display: block;
    padding-bottom: 100%;
}

.inlineli li {
    list-style-type: none;
    list-style-image: none;
    display: inline;
}

.wir li {
    float: left;
    display: inline;
}

.action {
    white-space: nowrap;
}

.footer {
    font-style: italic;
    position: fixed;
    bottom: 0%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
}