/* Ein paar Grundeinstellungen und Resets */
html {font-family: Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin: 0;}
/* article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;} */
a {background: transparent;}
b,strong {font-weight: bold;}
h1 {font-size: 2em; margin: 0.67em 0;}
small {font-size: 80%;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0; color: blue;}
pre {overflow: auto;}
code,kbd,pre,samp {font-family: "Courier New", Courier, monospace; font-size: 0.9375em;}
textarea {overflow: auto;}
table {border-collapse: collapse; border-spacing: 0;}
td,th {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0;}
iframe {border: none;}

@-ms-viewport {width: device-width; zoom: 1; user-zoom:fixed;}
@-o-viewport {width: device-width; zoom: 1; user-zoom:fixed;}
@viewport {width: device-width; zoom: 1; user-zoom:fixed;}

/* Allgemeine Einstellungen */
body { 
 font-size: 75%;
 line-height: 1.3;
}

h1, h2, h3, h4, h5 {color: #cc3300; font-weight: bold; margin: 2em 0 1em 0;}
h1 {font-size: 1.800em;}
h2 {font-size: 1.500em; margin-top: 0.5em;}
h3 {font-size: 1.375em;}
h4 {font-size: 1.200em;}
h5 {font-size: 1.000em;}

ul, ol {margin: 1em 0; padding: 0 0 0 1.2em;}

div > img {display: block;} /* sonst kleiner Abstand unter Bildern */
p > img {display: inline;} 

code {color: green;}

#seite {margin: 0 auto; max-width: 71em; background-color:#effbff; overflow: hidden;}
    
#inhalt, #inhaltblog {margin: 0 10px; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
         word-wrap: break-word;}

.s-icon, #b2ersatz {width: 2.5em; height: 2.5em; margin: 0.2em;}


/* Header Bereich */
#seite > header {overflow: hidden; background-color: #D0EEFF; border-bottom: 2px solid #0000FF;}
#site-title {position: fixed;	top: 0;	left: 0; width: 100%; z-index: 10010; overflow: auto; color: white; background-color: #cc3300;}
.no-positionfixed #site-title {position: absolute;} /* position:fixed Problem mit Modernizr */
#menubutton {margin: 0.625em;	float: left;}
#menu2button, #b2ersatz {margin: 0.625em; float: right;}
#site-title p {margin: 0.8em 0; font-size: 1.3em;	font-weight: bold; text-align: center;}
#site-title a, #site-title a:visited {text-decoration: none; color: white;}

#logobar {margin: 4.6em 10px 0;}
#gpslogo, #top-socials, #discover-outdoor {float: left;}
#gpslogo {width: 25%; text-align: left;}
#top-socials {width: 40%; text-align: center;}
#discover-outdoor {width: 35%; text-align: right; margin-top: 1em;}
#top-socials p {margin: 0; font-size: 0.875em;}
#cse-search-box {display: none;}


/* linke Navigationsleiste */
.navleiste {display: none; }


/* rechte Blogleiste */
.blogleiste {display: none;}

/* Inhaltsbereich */

/* TopNav und Seitentitel */
.pagetitle {display: none;}
.topnav {display: none;}

#titlebar {margin: 4em 0 2em;}


/* Gastautorennennung */
.gastautor {display: inline-block; font-weight: bold; background-color: #D0EEFF; 
            margin-top: 0; padding: 0.4em; border: 1px solid black;}


/* Karte */
#Karte {padding-bottom: 130%; height: 0;}
.kartenunterschrift {font-size: 0.7em; color: blue; margin: 0 0 2em 1px; text-align: left;}


/* Summary */
.summary {font-weight: bold;}


/* Gpswandern Floatboxen */
.rechtsbox {
 display: inline-block;
 float: right;
 max-width: 100%;
 margin: 0 0 0.5em 1em;
}

.linksbox {
 display: inline-block;
 float: left;
 max-width: 100%;
 margin: 0 1em 0.5em 0;
}

.rechtsbox > img, .linksbox > img {max-width: 100%; height: auto;}

.panorama {width: 100%; overflow-x: auto; overflow-y: hidden;}

.floatcenter {text-align: center;}
.floatcenter > * {display: inline-block; margin: 0.3em;}

.pict {font-size: 0.7em; color: blue; margin: 0 0 1px 1px; text-align: left;}

.umbruch {clear: both; margin-top: 1em;}


/* Höhenprofil, Höhentabelle und Download */
#hoehenprofil {max-width: 100%;}
#hoehenprofil img {height: auto; max-width: 100%;}
#hoetabklein {margin: 1em 2em 0 2em; overflow: hidden;}
#hoetabklein table {width: 100%;}
#hoetabklein tr:nth-child(even) {background-color: #d0eeff;}
#hoetabklein td:first-child+td {text-align: right;}

#download {display: none;}


/* Stand: */
.aenderung {text-align: right; font-size: 0.8em; color: #cc3300;}


/* Footer */
.footer {background-color: #D0EEFF; border-top: 2px solid #0000FF; padding: 0 0.625em 1em;}
.footer-rechts {float: right; margin-left: 1em;}
.geo-tag, .jsonp {text-align: right;}
#social-icons p {font-size: 0.75em; text-align: center; margin: 1em 0 0.5em 0;}
.copyright {font-size: 0.75em; margin: 0 0 0.583em;}
.bottomnav {font-size: 0.75em; width: 16em;}
.bottomnav ul {padding: 0; margin: 0;}
.bottomnav ul li {display: block; list-style-type: none;}
.bottomnav ul li a {line-height: 2em;}
/* .bottomnav ul li a:link {text-decoration: none;} */


/* Werbekennzeichnung */
.wbg {display: none;}
.ad-do-728x90 {display: none;}
.adsense-ads {display: none;}


/* Styles für andere Seiten (non-Wandern) */
/* Indexseiten */
.indextable {width: 100%; margin: 1em 0 3em; font-size: 0.9375em; line-height: 1em;}
.indextable tr:nth-child(odd) {background-color: #d0eeff;}
.indextable tr td {padding: 0.4em 0 0.4em 1em; vertical-align: top;}
.indextable tr td:first-child {padding-left: 0.4em;}


/* freie Seiten */

/* einfache Tabelle */
.stable {text-align: left; font-size: 0.8125em; margin: 1em 0 2em;}
.stable td {padding: 0.3em; border: 1px solid #CC3300;}

/* responsive Tabelle */
.rtable {width: 100%; text-align: left; font-size: 0.8125em; margin: 1em 0 2em;}
.rtable tr {border-bottom: 1px solid #cc3300; display: block; overflow: auto; padding-bottom: 0.2em;}
.rtable tr:first-of-type {border-top: 1px solid #CC3300;}
.rtable thead {display: none;}
.rtable td {width: 100%; float: left; display: block; padding: 3px 0;}
.rtable td:first-of-type {color: #cc3300; font-weight: bold;}
.rtable td:before {content: attr(data-header); font-weight: bold;}

/* Guestbook auf GORP-Testseite */
#gb p, #gb ul, #gb ol {font-size: 0.875em;}
#gb p.author {font-style: italic; margin-top: 4em; margin-bottom: 0.4em; padding-bottom: 0.2em; border-bottom: 1px solid #CC3300;}
#gb p.entry {margin-top: 0; margin-bottom: 0; padding-top: 0;}
#gb p.comment {font-style: italic; margin-top: 0; margin-bottom: 0; padding: 0.5em 0 0 2em; color: #606060;}

/* Youtube Video */
.iframe-max-wrapper {max-width: 640px;}
.iframe-wrapper {position: relative; padding-bottom: 75%; height: 0;}
.iframe-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* Trackviewer */
#app {width: 100%; background-color: #E5E3DF; -moz-hyphens: manual; -webkit-hyphens: manual;
 -ms-hyphens: manual; hyphens: manual; word-wrap: normal;}
#app #mapdiv {width: 100%; height: 20em;}
#app form {line-height: 25px; margin-top:0; margin-bottom:0; clear: both;}
#app #myfile, #app #urleingabe {width: 17em; overflow: hidden;}
#app .inlinetext {float:left; width: 38px; text-align:right; margin-right:2px; font-size: 0.8125em;}
#app input {display: block; float: left; margin: 0 3px;}
#app #webabruf, #app #allesloeschen {float: none; display: inline-block;}
#app #tralla {float:right; margin:3px 4px 0 0;}

.codebox {margin-top: 1.5em;}
.codearea {width: 99.5%; font-family: "Courier New", Courier, monospace; font-size: 0.6875em; color: green;}

#changelog {font-family: "Courier New", Courier, monospace; font-size: 0.8125em;}
#changelog p {margin: 0;}
#changelog ul {margin: 0.125em 0 0.25em 0; font-size: 1em;}
#changelog h4 {margin: 1.5em 0 0.25em 0;}
#changelog h5 {margin: 0; font-weight: normal;}


/* Trackviewer und GORP Feedback */
.fb p {margin: 1px 0;}
.fb .small {font-size: 0.8em;}
.fb #msg {float: none; width: 100%;}
.fb input {display: block; clear: left;}


/* Blog */
.blog-article {font-size: 0.9em; margin: 4em 0 2em 0;}
.blog-article img {max-width: 100%;}
.blog-pic {float: right; margin: 0 0 0.5em 0.5em;}
.blog-article footer {display: table; width: 100%; border-top: 2px solid #CC3300; font-size: 0.75em;}
.blog-author {display: table-cell; width: 16em;}
.blog-article .blog-category {display: table-cell; padding: 0 0.5em;}
.blog-article .blog-category a {margin-right: 0.5em;}
.blog-permalink {display: table-cell; width: 6em; text-align: right;}
.blog-author a {padding-right: 0.5em;}


/* Erster Breakpoint */

 #Karte {padding-bottom: 50%; height: 0;}

 #hoehenprofil {float: left; width: 70%;}
 #hoehenprofil img {height: 170px;}
 #hoetabklein {width: 30%; margin: 0 0 0 70%; padding-top: 1.5em;}

 .indextable tr td:first-child {width: 40%;}

 .fb #msg {float: left; width: 50%; margin-right: 5px;}




/* Zweiter Breakpoint */

 #logobar {margin: 0.5em 10px 0;}
 #gpslogo {width: 12em; margin: 0 0 0 0.625em;}

 #menubutton, #menu2button, #b2ersatz {display: none;}

 #site-title {position: inherit;	width: inherit; color: #cc3300; background-color: inherit;}
 .no-positionfixed #site-title {position: inherit;} /* position:fixed Problem mit Modernizr */
 #site-title p {margin: 0 0 0.2em 0; font-size: 1.8em;	text-align: left;}
 #site-title a, #site-title a:visited {color: #cc3300;}
 #top-socials {text-align: left; width: inherit;}
 #top-socials p {display: inline-block; vertical-align: top; margin-top: 1em;}
 #discover-outdoor {float: right; margin-top: -1.5em; width: inherit;}
 
 .bottomnav {width: inherit; margin: 3em 0;}
 .bottomnav ul li {list-style-type: none; display: inline; margin-right: 2em;}

 .rtable thead {display: table-header-group;}
 .rtable tr {display: table-row; border: none; padding-bottom: 0;}
 .rtable th, .rtable td {padding: 0.2em; float: none; display: table-cell; width: auto; border: 1px solid #CC3300;}
 .rtable td:first-of-type {color: inherit; font-weight: normal;}
 .rtable td:before {content: ''; font-weight: normal;}