body, h1, h2, h3, h4, h5, h6, p, table, tr, th, td, dd, dt, ul, li, a, input, select {
   padding: 0px;
   margin:  0px;
   font-family: 'OpenSans', Arial, helvetica, sans-serif;
}
body { background-color: #fff;}

img {
    max-width: 100%;
}

p,
#gMain ul,
#gMain li {
   font-size: 16px;
}

ul li {
   list-style: square outside url('/img/tri-blue.png');
}

li {
    margin-left: 20px;
}

#gMain p > a,
#gMain ul li a {
   color: #69a;
}

/* linker Rand: 40px  */
#gTop, #gMenu, #gMain, #gBottom  { padding-left: 40px; }


/* Top bar */
#gTop {
   border-bottom: 2px solid #69a;
   background-color: #8bc;
   background-image: url('/img/gLogoTop.png');
   position: relative;
   height: 74px;
}


div#gTop img#gLogo {
   margin-bottom: 5px;
   padding-right: 20px;
}


/* SprachSwitch */
#gLang {
   float: right;
   margin-right: 10px;
}

#gLang svg.languageFlag {
   margin-right: 5px;
}

#gLang a, #gLang img {
   border: 0px none #69a;
}

/* Codelisting (hauptsächlich Blog) */
pre {
    background-color: #eee;
    color: #292929;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
    padding: 10px 10px 10px 10px;
}

/* code listings should be a bit smaller */
#gMain code {
    font-size: 85%;
    background-color: #eee;
    color: #292929;
    padding: 0.2em 0.4em 0.2em 0.4em;
}


/* ##########################
 * Menu (blog)
 * ########################## */


#gMenu {
    min-height: 3em;
    background: -webkit-linear-gradient(#f2f2f3, #ffffff);
    background: linear-gradient(#f2f2f3, #ffffff);
    overflow: auto;
}

#open-menu-icon {
   display: none;
}

@media screen and (max-width: 900px) {
   #gMenu {
      padding-left: 20px;
   }
}

#gMenu a {
   text-decoration: none;
   color: #8bc;
}

#gMenu a:hover {
   color: #69a;
}

#gMenu a.gActive {
   color: #69a;
}


#gMenu a, #gMenu img {
   border: 0px none #fff;
}

#gMenu ul,
#gMenu ul li {
   list-style: none;
   padding: 5px 20px 0px 0px;
   margin-left: 0px;
}


#gMenu ul ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
   margin-top: 5px;
   position: absolute;
   z-index: 10;

   border: 1px solid #fff;
   background-color: #f4f4f4;

}

li.gmenu,
div.gmenu{
   float: left;
   padding: 2px 20px 10px 0px;

   font-weight: bold;
   font-size: 16px;
}

div.langLabel {
   display: none;
   font-weight: bold;
}


/* Hamburger menu and associated changes */
@media screen and (max-width: 650px) {
   #open-menu-icon {
      display: block;
      /*right: 0px;
      top: 10px;*/
      float: right;
      margin-top: 10px;
      margin-right: 15px;
      padding: 6px 8px 6px 8px;
      cursor: pointer;
      background-color: #f8f8f8;

      font-size 18px;
      font-weight: 200;
      vertical-align: middle;
   }

   #gTop {
      padding-left: 10px;
      background-position: -50px 0;
   }

   img#gLogo {
      padding-right: 5px;
   }

   .menu-button-closed {
      border-radius: 3px;
   }

   .menu-button-open {
      border-radius: 3px 3px 0 0;
   }

   #open-menu-icon > span {
      display: block;
      width: 30px;
      height: 3px;
      margin-top: 6px;
      margin-bottom: 6px;
      background: #366271;
   }


   nav#gMenu {
      position: absolute;
      right: 0px;
      top: 55px;
      margin-right: 15px;
      margin-left: 15px;
      display: none;
      background-color: #f8f8f8;
      background-image: none;
      border-radius: 5px 0 5px 5px;
      padding-bottom: 10px;
   }

   nav#gMenu.menuShow {
      display: inline;
      z-index: 1000;
   }

   nav#gMenu ul {
      list-style: none;
   }

   div#gLang {
      float: none;
   }

   div.langLabel {
      display: inline-block;
   }

   li.gmenu,
   div.gmenu,
   div.langLabel {
      float: none;
      font-size: 1.3em;
   }

}

/* ################################# 
 * Bottom 
 * ################################# */ 

#gBottomContainer {
   clear: both;
   margin-top: 0px;
   padding-top: 10px; 
   padding-bottom: 10px; 
   color: #555;
   background: -webkit-linear-gradient(#f1f1f1, #f8f8f8 25px, #fefefe 55px, #ffffff 50px);
   background: linear-gradient(#f1f1f1, #f8f8f8 25px, #fefefe 55px, #ffffff 50px);
   border-top: 1px solid #f8f8f8;
}

#gBottom {
   margin-left: auto;
   margin-right: auto;
   max-width: 1150px;
   display: block;
   padding-right: 40px;
}

.gBottomBlog#gBottom {
   max-width: 980px;
}

#gBottom a {
   color: #666;
}

#gBottom a:hover {
   color: #333;
}

/*#gBottom ul {
   list-style: none;
}*/

.gLinks li,
.gSitemap li {
   font-size: small;
}

#gBottomMeta li {
   font-size: x-small;
}

#gBottomMeta li {
   padding: 0px;
   margin: 0px;
   text-indent: 0px;
}


/* Bottom Meta */
#gBottomMeta {
   clear: both;
   margin: 0px;
   margin-top: 15px;
   padding: 0px;
}

/* Bottom links */
#gBottomLinks {
   margin: 0px;
   padding: 0px;

   display: block;
   height: 50px;
}

td { 
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ##########################################
 * Sidebar replacement located at the bottom
 * ########################################## */
div.gLinksContainer,
div.gLinks {
   width: 230px;
   float: left;
}

div.gSitemap {
   overflow: hidden;
}

div.gSitemap.gSitemapBlog {
   width: 980px;
}

div.gLinks.gLinksSpaceRight {
   margin-right: 20px;
}

.gLinks li,
.gSitemap li {
   margin-top: 3px;
}

ul.footerList,
form.footerList {
   padding-left: 10px;
}

@media screen and (max-width: 1190px) {
   div.gLinks.floatRight {
      float: right;
   }

   div.gSitemap {
      width: 560px;
   }

   div.gLinks {
      width: 270px;
   }

    div.gLinksNo4 {
        clear: both;
        margin-right: 20px;
    }

    div.gSitemap.gSitemapBlog {
        width: 560px;
    }
}

@media screen and (max-width: 949px) {
    div.gLinksNo4 {
        clear: none;
    }

    div.gSitemapBlog {
        clear: both;
    }
}

@media screen and (max-width: 760px) {
   #gBottom {
      box-sizing: border-box;
   }

   div.gLinks, div.gSitemap {
      margin-left: 0px;
      margin-right: 0px;
   }

   div.gLinks {
      width: 100%;
      float: none;
   }

   div.gSitemap,
   div.gSitemap.gSitemapBlog {
      min-width: 0;
      display: block;
      width: auto;
   }
}

.gLinks a,
.gSitemap a {
   text-decoration: none;
}

h4.bottomHeading {
   margin: 10px 0px 5px 0px;
   padding: 1px;
   padding-left: 10px;

   color: white;
   font-weight: bold;

   border-bottom: 1px solid #69a;
   background-color: #8bc;
}

li.sitemapGroupHeading {
   font-weight: bold;
}

li.sitemapGroupHeading > ul {
   font-weight: normal;
   max-width: 140px;
}

div.gLinks ul li,
li.sitemapGroupHeading ul li,
div#gBottomMeta ul li {
   list-style: none;
   margin-left: 0px;
}

ul#sitemap > li {
   display: inline-block;
   margin-right: 10px;
   vertical-align: top;
   margin-left: 0px;
}

.gfUpper {
    text-transform: uppercase;
}

.boldGrey {
    color: #7f7f7f;
    font-weight: bold;
}

.gfBlueItalic {
    color: #8bc;
    font-style: italic;
    font-weight: bold;
}


/* ################################# 
 * Main
 * ################################# */

#gMain {
   clear: left;
   padding-right: 40px;
   padding-bottom: 20px;
   float: none;
   max-width: 1150px;
   margin-left: auto;
   margin-right: auto;
}

.gMainBlog#gMain {
   max-width: 980px;
}

@media screen and (max-width: 760px) {
   #gMain,
   #gBottom {
      width: 100%;
      box-sizing: border-box;
      margin: 0px 0px 0px 0px;
   }

   #gMain {
      padding-right: 20px;
      padding-left: 20px;
   }

   #gBottom {
      padding-left: 0px;
      padding-right: 0px;
   }

   #gBottomMeta {
      margin-left: 10px;
      margin-right: 10px;
   }
}


h1 {
   color: #8bc;
   font-size: 3em;
   padding: 20px 0px;
}


#gMain {
   color: #555;
}

/* blog: artikel ueberschrift */
h2 {
   padding: 20px 0px 10px 0px;
   font-size: 1.7em;
   font-weight: normal;
}

/* blog: artikel ueberschrift ev. link */
#gMain h1 a,
#gMain h2 a {
   color: #69a;
   text-decoration: none;
}

/* blog: autor (direkt unter h2) */
#gMain p.gAuthor {
   font-size: x-small;
   padding: 0px;
}

/* blog: margin below an entry on pages with multiple entries and between the
 * entry and the navigation arrows */
div.entry {
    margin-bottom: 40px;
}

/* blog: feed icon */
img.feedIcon {
    position: absolute;
    right: 0px;
    margin-right: 10px;
    margin-top: 10px;
}

/* h3,h4 bislang nicht verwendet */
#gMain h3 {
   padding-top: 15px;
   padding-bottom: 4px;
}
#gMain h4 {
   padding-top: 10px;
   padding-bottom: 1px;
}


#gMain p, #gMain ul, #gMain dt {
   padding: 10px 0px;
}

#gMain p, #gMain dl, #gMain li {
/*   font-size: 0.8em;*/
   line-height: 1.5;
}

ul {
   list-style: none;
   text-indent: 0px;
   padding-left: 0px;
}

/* exception for the lists on the reference page */
.references ul {
   list-style-type: none;
   list-style-image: none;
   list-style-position: outside;
}
.references ul li {
   list-style-type: none;
   list-style-image: none;
   list-style-position: outside;
   background-image: none;
   text-indent: 0px;
   padding-left: 0px;
   margin-left: 0px;
}

#gMain > p a,
#gMain > ul a{
   color: #69a;
}

/*#gMain pre {
   border: 1px solid #ccc;
   background-color: #ddd;
   margin: 10px 0px;
   padding: 5px;

   font-size: x-small;
}*/

div.map {
    border: 1px solid #ccc;
    padding: 1px;
    width: 390px;
    height: 260px;
    margin-bottom: 10px;
}



#gMain div.shapefile {
   float: left;
}

#gMain div.shapefile,
#gMain img.shapefile {
   margin: 10px 30px 10px 0px;
}

/* limit image width to width of surrounding div if screen is smaller than image */
@media screen and (max-width: 760px) {
   img.screenshot {
      max-width: 100%;
   }
}

/* If the image is not wrapped into a div because it has a caption,
 * we can set max-width to 100% even if the display is wide. */
img.screenshot.shapefile {
   max-width: 100%;
}


#gMain table.shapefiles_prices {
   margin: 30px;
   padding: 10px;
   font-size: 0.8em;
   border: 1px dotted #555; 
}


span.marker {
   color: #A63100;   
}


/* Entry Page */
#fadeShowMain {
   display: inline-block;
   vertical-align: top;
   padding-top: 0em;
   margin-right: 50px;
   margin-bottom: 10px;
   margin-top: 20px;
}


#gMain h4.gTypo,
p.gTypo {
   color:         #8bc;
   font-size:     4em;
   padding:       0px;
   font-weight: bold;
}

h1.gTypo {
   color: #8bc;
   text-transform: uppercase;
}

#entryPage {
   margin-top: 20px;
   width: 300px;
   display: inline-block;
   width: calc(100% - 310px);
   float: right;
}

#entryPage h1.gTypo {
   padding-top: 0px;
}

#entryPage p {
   line-height: 3ex;
   /*font-size: .8em;*/
   /*width: 880px;*/
   text-align: left;
   margin-bottom: 1ex;
}

#entryPage b {
   font-weight:      bolder;
   text-decoration:  none;
   letter-spacing:   0em;
   font-size:        1.3em;
   color:            #69a;
}

/* make h1.gTypo smaller on small displays */
@media screen and (max-width: 680px) {
   #entryPage h1.gTypo {
      font-size: 2.5em;
   }
}

/* disable old front page on small screens */
@media screen and (max-width: 580px) {
   #fadeShowMain {
      display: none;
   }

   #entryPage {
      width: 100%;
      display: block;
      box-sizing: border-box;
   }

   #entryPage p {
      line-height: 3ex;
   }

   #entryPage b {
      font-size: 1.2em;
   }

   h4.gTypo,
   p.gTypo {
      display: none;
   }
}

/* Rendering table */
table.rendering th {
   text-align: left;
   font-size: 0.9em;   
}

/* Price table tiles */

table.tariff-wide {
   width: 100%;
}

table.features,
table.tariff-wide,
table.tariff {
   max-width: 100%;
   padding: 1px;
   background-color: #B3D4DF; 
   border-collapse: collapse;
}

table.features td,
table.features th,
table.tariff-wide td,
table.tariff-wide th,
table.tariff td,
table.tariff th {
   font-size: 0.8em;
   color: #000;   
   border: 1px solid #fff;
}

table.tariff-wide th.premium,
table.tariff-wide th.bulk,
table.tariff th.premium,
table.tariff th.bulk {
   color: #A63100;
}

table.features td,
table.tariff-wide td,
table.tariff td {
   padding: 3px;
}

table.features td {
   text-align: left;
}

table.tariff-wide td,
table.tariff td {
   text-align: right;   
}

table.features th,
table.tariff-wide th,
table.tariff th {
   text-align: left;   
   padding: 3px;
}

table.tariff-wide th.right,
table.tariff th.right {
   text-align: right;   
}

table.tariff-wide td.tf_left,
table.tariff td.tf_left {
   text-align: left;   
}

/* Nice tables */
table.medTable {
   min-width: 50%;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-width: 760px) {
    table.medTable {
        width: 100%;
    }
}

/* #################################
 * clear after floats
 * ################################# */
.clearboth {
   clear: both;
}

/* ################################# 
 * Slider OSMHistory 
 * ################################# */ 
.sliderGallery {
   padding: 0;
   margin: 0;
   color: black;
}


#placename {
   font-size: small;
   font-weight: bold;
   color: #555
}
       
#play {
   background-color: #8bc;
   border: none;
   border-bottom: 1px solid #69a;
   padding: 1px;
   width: 50px;
   text-align: center;
   font-size: x-small;
   font-weight: bold;
   color: white;
   margin-left: 10px;
}

#download {
   background-color: #8bc;
   border: none;
   border-bottom: 1px solid #69a;
   padding: 1px;
   text-align: center;
   font-size: x-small;
   font-weight: bold;
   color: white;
   margin-left: 10px;
}
 
.slider {
   width: 512px;
   height: 40px;
   margin-top: 1px;
   position: relative;
   background: url(/img/gScrollbar.png) no-repeat 0px 11px;
}
        
.handle {
   position: absolute;
   cursor: move;
   height: 32px;
   width: 32px;
   top: 0px;
   background: url(/img/gScroller.png) no-repeat;
   z-index: 100;
}
        
.slider-date-first {
   margin-left: 0px;
   color: #555;
   font-size: .7em;
}

.slider-date-last {
   margin-left: 400px;
   color: #555;
   font-size: .7em;
}

#gallery {
   margin-top: 10px;
}

/* ################################
 * Projects
 * ################################ */


div.ptags {
   margin-bottom: 20px;
}

div.ptag {
   float: left;
   margin: 2px 10px 2px 0px;   
   font-weight: 900;
   /* color: #bf5b30; */
   color: #888;
   opacity: 0.6;

   cursor: pointer;
}

div.ptag_selected {
   opacity: 0.9;   
}

div.ptag:hover {
   opacity: 1;   
}

div.projectlist {
   clear: left; 
}


div.thnproj {
   float: left;   
   margin: 0px 25px 25px 0px;
   width: 220px;
   min-height: 255px;

   -moz-box-shadow:    3px 3px 4px 5px #888;
   -webkit-box-shadow: 3px 3px 4px 5px #888;
   box-shadow:         3px 3px 4px 5px #888;
}

@media screen and (max-width: 530px) {
    div.thnproj {
        width: 200px;
    }
}

@media screen and (max-width: 490px) {
    div.thnproj {
        width: 180px;
    }
}

@media screen and (max-width: 490px) {
    div.thnproj {
        width: 220px;
        float: none;
    }
}

div.thnproj img {
   width: 220px;
   height: 200px;
   max-width: 100%;
}

div.thnproj a {
    color: #69a;
}

#gMain div.thnproj h2 {
   font-size: small;
   font-weight: bold;
   margin: 10px 0px 0px 10px;
   padding: 0px 0px 10px 0px;
}

img.screenshot {
   -moz-box-shadow:    3px 3px 4px 5px #888;
   -webkit-box-shadow: 3px 3px 4px 5px #888;
   box-shadow:         3px 3px 4px 5px #888;
}

/* ##############################
 * menu boxes
 * ############################## */
div.menuboxes {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.subitembox {
   width: 320px;
   background-color: #eee;
   margin: 15px 15px 15px 15px;
   padding: 15px 15px 15px 15px;
}

.subitembox {
   color: #333;
   text-decoration: none;
}

.subitembox:hover {
   background-color: #ddd;
}

.subitembox:hover {
   color: #222;
}

img.boximage {
   margin-right: 10px;
   width: 100%;
   margin-bottom: 10px;
}

#menuboxes h2 {
   padding-top: 0px;
}

/* ###############################
 * gallery
 * ############################### */
div.gallery-boxes {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
}

.gallery-box {
   background-color: #eee;
   margin-right: 30px;
   margin-bottom: 30px;
   padding: 10px 10px 10px 10px;
}

/* ###############################
 * references
 * ############################### */

div.referencesList {
   display: flex;
   flex-wrap: wrap;
}

div.references {
   float: left;   
   background-color: #eee;
   margin: 0px 25px 25px 0px;
   width: 280px;

   -moz-box-shadow:    3px 3px 4px 5px #888;
   -webkit-box-shadow: 3px 3px 4px 5px #888;
   box-shadow:         3px 3px 4px 5px #888;
}

div.references > ul {
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;

}

div.references > h3.referencesHeading {
   color: #88BBCC;
   background-color: #fff;
   padding: 10px 0px 10px 20px;   !important
   margin: 0px 0px 0px 0px;
}

div.references ul {
   margin: 0px 20px;
}

/* ###############################
 * two images with heading next to each other
 * ############################## */
div.twoColumnImages {
   display: flex;
   align-items: flex-end;
}

div.twoColumnBox {
   margin-right: 10px;
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

div.twoColumnbBox a {
   text-decoration: none;
}

div.twoColumnbBox a::hover {
   text-decoration: none;
}

div.twoColumnBox img {
   max-width: 100%;
}

div.twoColumnBox > p {
   text-align: center;
}

p.twoColumnHeadingCell {
   font-weight: bold;
}

/* ###############################
 * gallery
 *  ############################### */

table.gallerytab td {
    width: 240px;
    vertical-align: top;
    padding: 10px;
}


#gallery_projects {
   float: left;
   width: 280px;
      margin-right: 5px;
}

#gallery_projects ul li {
   clear: left;
   height: 100px;
   margin-bottom: 10px;
   border: 1px dotted #8bc;
   background-repeat: no-repeat;
   cursor: pointer;
}

#gallery_projects h2 {
   font-size: 20px;
   background-color: white;
   padding: 3px;
   margin: 30px 0px 40px 50px;
   opacity: 0.85;
   filter:alpha(opacity=85); /* For IE8 and earlier */
}

#gp_description h2, #gallery_projects h2.gp_active {
   color: #A63100;
}

.gp_hidden {
   display: none;   
}

/* /// */

.gmText {
   display: none;
}

.galleryMisc {
   border-bottom: 1px solid #69a;
   background-color: #8bc;
   overflow: hidden;
   position: relative;
   margin-top: 20px;
   padding: 5px;
   height: 105px;
   width: 500px;
}

        
.galleryMisc ul {
   position: absolute;
   list-style: none;
   white-space: nowrap;
   padding: 0px;
   margin: 0px;
}
        
.galleryMisc ul li {
   display: inline;
}

.galleryMisc ul li img {
   border-width: 1px;
   border-color: #69a;
}

/* Small Map Compare based on Leaflet */
div.middleMapContainer {
   padding: 15px;
   background-color: #f8f8f8;
   width: 100%;
   box-sizing: border-box;
}

div.leafletMiddleMap {
   width: 100%;
   height: 400px;
}
@media screen and (max-width: 450px) {
   div.leafletMiddleMap {
      height: 300px;
   }
}

.mapContainerSmallDisplay {
   display: none;
}

select.mapStyleSelect {
   font-size: 100%;
   border-radius: 0;
   border: 1px solid #bbb;
   box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
   padding: .5em .7em .3em .7em;
   margin: 0 10px 10px 0;
}

p.selectLabel {
   font-size: 80%;
}

p.selectLabelInline {
   display: inline-block;
}

div.controlButtonGroup {
    margin-bottom: 10px;
}

@media screen and (max-width: 550px) {
   .mapContainerSmallDisplay {
      display: initial;
   }

   p.selectLabel {
      margin-right: 10px;
      font-size: 100%;
   }

   div.mapSwitchButtonGroup {
      display: none;
   }
}

button.tabButton {
   float: left;
   background-color: #ddd;
   padding: 4px 4px 4px 4px;
   margin-right: 10px;
   color: black;
   border-style: none;
   /*border-color: #69a;*/
}

button.tabButton.activeTab {
   border-width: 1px 1px 0 1px;
   border-style: solid solid none solid;
   background-color: #aaa;
}

/* map which is similar to leafletMap but a bit higher on large screens */
@media screen and (min-height: 640px) {
   div.squareMap {
      height: 500px;
   }
}


/* ************************************************ */
/* Blog Styles (werden nur von Wordpress benoetigt) */

/* vor- und zurueck-blaettern */
#gBlogNavigation div a {
   color: #fff;
   font-weight: bold;
   text-decoration: none;
}

#gBlogNavigation div {
    background-color: #8bc;
    padding: 7px 7px 7px 7px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#gBlogNavigation div.alignleft  { float: left; }
#gBlogNavigation div.alignright { float: right;  }