/** /hp/ao/ae/lz/www/detlefhahn/segeln/sbf_see/index.php   12.08.2025 08:36
 * ©  Detlef Hahn 
 */
@charset "UTF-8";/* basis_6_1.cssgrid_3
ersetzt normalize , gelte für alle Geräte, wenn sie nicht in einer speziellen Regel überschrieben werden.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary{display:block;margin:0}audio,
canvas,
video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html,
button,
input,
select,
textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,
a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,
strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,
code,
kbd,
pre,
samp{font-family:monospace, serif,'courier new', monospace;font-size:1em}pre{margin:0.5em 1em 0 1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,
q:after{content:'';content:none}small{font-size:80%}sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,
menu,
ol,
ul{margin:1em 0em}dd{margin:0 0 0 5px}menu,
ol,
ul{padding:0 0 0 2px}nav ul,
nav ol{list-style:none;list-style-image:none;padding:0;margin:0}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}button,
input{line-height:normal}button,
select{text-transform:none}button, html input[type="button"], input[type="reset"],
input[type="submit"]{line-height:1.5rem;font-size:1.1em;vertical-align:top;padding:5px 12px;font-family:Roboto, sans-serif;font-weight:250;color:teal;border:2px solid silver;background-image:linear-gradient(to top, gainsboro 0%, white 90%);border-radius:20px;cursor:pointer}input[type="button"].btn_09{font-size:0.9rem;padding:3px 10px;border-radius:15px;cursor:pointer}input[type="button"].small_btn{font-size:1.0em}/* input[type="submit"]{appearance:button;cursor:pointer}*/
button[disabled],
html input[disabled]{cursor:default}input[type="search"]{appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}button:focus-within,
input:focus-within{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{font-family:garamond-premier-pro,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;font-weight:500;color:#00203E;text-align:left;/*	font-family:Georgia, "Times New Roman", Times, serif;* /* font-family:Helvetica, sans-serif;*/ font-size:var(--def-size)}input, select, textarea, button{font-size:inherit;font-family:inherit}/* https://www.mediaevent.de/css/form-input.html */
input[type="color"]{padding:0;/** für firefox **/ width:64px;height:64px;cursor:pointer}::-moz-color-swatch{border-color:red}/** Webkit-Browser **/
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}::placeholder{color:navy;opacity:1;transition:opacity 1s}:focus::placeholder{opacity:0}/*:placeholder-shown zum Eingabefeld, das wirkt nicht auf den Platzhalter selber, sondern auf das Eingabefeld. Der Rahmen verschwindet, sobald der Benutzer das erste Zeichen schreibt. */:placeholder-shown{border:2px solid red}/* Größere Schriften sind ein großer Schritt für Formulare. font-size, border, color, padding und background-color sind die einfachsten Maßnahmen.
*/
optgroup{background-color:pink}select{background-color:seashell;width:180px;font-size:1.1em;font-family:inherit;font-weight:300}table.prog_cfg{width:13rem;background-color:yellow;font-size:1.0rem;font-weight:bold}.switch{position:relative;display:inline-block;width:60px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#fc666c;/* #ccc Grau */ -webkit-transition:.4s;transition:.4s;border:solid black 1px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked + .slider{background-color:#57e389}input:focus + .slider{box-shadow:0 0 1px #57e389;/* blau #2196F3;*/}input:checked + .slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}/* Rounded sliders */
.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}body.dark input{background-color:#FFFFFE;color:#010101}/* Zunächst Regeln Global z.b. für body min-width basierte Breakpoints sind Mobile First. Alles was nicht innerhalb einer 
@media-Regel für den Start einer Monitorbreite festgelegt wird,
sind universelle Stile für alle Monitorbreiten und zielen auf die kleinsten Geräte (zumeist auf Smartphones) ab.
Begonnen wird mit dem kleinsten Monitor
Alle folgenden Media Queries überschreiben bei min-width nur die Eigenschaften, die sich bei einem Breakpoint ändern oder neu hinzukommen. BASE (MOBILE) SIZE Diese ersten Regeln kommen auf den mobilen Geräten zur Anwendung, wenn si niocht in eieder der nachfolgen Media-Queries überschrieben werden. These are the mobile styles. It's what people see on their phones. Remember, keep it light:Speed is Important. the order in which the media queries are defined actually matters. if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific
*/ /* The:root rule set is used if you want globally available variables. The custom property prefix was var- in the earlier spec, but later changed to -- def-padb wird bei den Hamburger-menues verwendet, damit google nicht mosert das die anklickbaren zu eng sind hier werden alle Regeln eleminoiert, die nav betreffen. Das soll ausschliesslich in menu_6_01_media.css geregelt werden root sollte nach menu_x_y verlagert werden */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#152E4E;--secondary:#0375B3;--danger:#F60906;--light:#F5F5F5;--dark:#9EB9C8;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family:garamond-premier-pro,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;font-weight:500;color:#00203E;text-align:left;--font-family-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--nav-item-size:12em;/* definiert die Gösse der Submenuitems */ --radius-size:10px;--def-size:1.3rem;--def-line-height:1.6rem;--def-padb:12px}.html5badge{background-image:url('/common/img/html5_badge20.png');background-repeat:no-repeat;background-position:right}input[type="checkbox"]{outline:solid 1px black !important}/* input[type=button]{outline:solid 1px black}dann immer Kasten aussen ,*/ #ruler{position:absolute;margin:0;padding:0;width:100%;/* 2560px;*/ z-index:1002;background:url('/common/img/ruler.png') no-repeat;height:32px}div.mnu_refresh{float:left;padding-top:10px;font-size:1.8rem;font-weight:bold;width:50px}span.mnu_refresh{float:left;display:inline;padding-top:10px;font-size:1.8rem;font-weight:bold;width:50px}.refresh{float:left;border-radius:0;display:inline;width:1px;height:1px}/* typography */
body{background-color:Whitesmoke;margin-top:0px;margin-left:0px;/*background-color:#0099ff;*/
/*	font-family:Thesis, Helvetica, Arial, sans-serif;*/
font-family:garamond-premier-pro,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;color:#00203E;text-align:left;/*	font-size:var(--def-size);line-height:var(--def-line-height);*/ font-weight:normal}div[class*="grid_"] p.black{color:black !important;border:none}span.abc{width:90px;display:inline-block;border:solid 1px black;padding:4px}div#main_content{color:#3d3d3d}div#main{background-color:#FFFFFF;padding-left:5px;padding-top:10px}h1, h2, h3, h4, h5, h6{font-weight:normal;font-family:'Droid Serif', Arial, Helvetica, sans-serif;line-height:1.3em;margin:.45em 0 0;/* oben/unten 0.45em , rechtslinks 0 */ padding:0;/*	color:red;*/}h2 +p{margin-top:0}/* rückt h2 mit nachfolgenden p zusammen (webdesign Gesetz der Nähe)*/ p{font-size:var(--def-size)}/* highlight */
.aw_default{color:black}.aw_keyword{color:red}.aw_source{color:#0000BB}.aw_comment{color:#FF8000}.aw_string{color:#DD0000}.aw_html_src{color:#00BB00}/* Verwendung tooltip z.B. a, span class="tooltip" data-tooltip="Dieser Text wird angezeigt" */ .inf-toolbar__icon{display:block;width:25px;height:25px;margin:18px 0 0 0;background-repeat:no-repeat;background-size:auto;text-align:center}p.large_text{font-size:1.3rem;font-weight:280;line-height:1.5em;margin-bottom:1.5em}/*
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold */ p.text{font-size:1rem;font-weight:420;line-height:1.7em;margin-bottom:1.5em}.tooltip{position:relative;color:#3983ab;text-decoration:none;padding-bottom:10px;min-width:300px;max-width:350px;z-index:100}.tooltip::after{content:attr(data-tooltip);position:absolute;bottom:10%;left:70%;background:#dfac40;/* #3983ab;*/ padding:0.2em 0.4em;color:#000000;border-radius:0.3em;opacity:0;transition:all 0.3s;min-width:300px;max-width:350px;z-index:100}.tooltip::before{content:"";position:absolute;width:0px;height:0px;border-top:1em solid #dfac20;/* #3983ab;*/ border-left:1em solid transparent;border-right:1em solid transparent;transition:all 0.3s;opacity:0;left:70%;bottom:5%;z-index:100}.tooltip:hover::after,
.tooltip:focus::after{opacity:1.0;bottom:100%;z-index:100}.tooltip:hover::before,
.tooltip:focus::after{opacity:1.0;bottom:70%;z-index:100}ul.close{display:none}ul.open{display:block}/* /usr/share/openclipart/png/computer/icons/flat-theme/ */ li.open{list-style-image:url("/common/img/icons/folder_1_24.png")}li.close{list-style-image:url("/common/img/icons/folder_2_24.png")}li.fln{list-style-image:url("/common/img/icons/text-html_24.png")}li.fln_js{list-style-image:url("/common/img/icons/text-generic.png")}.no_deco{text-decoration:none}.white{background-color:white;min-height:56px;padding-left:10px;padding-bottom:5px;border-radius:var(--radius-size)}/* css für left-Submenu */
div.nav_left_head{padding:0 0 0 2px;background-color:#CFCFCF;width:97%;color:black;z-index:10}div#nav_left_head > input:checked ~ label, /*show submenu when clicked */
div#toggle_menu{display:block}/* Initiale Anzeige */
/* Toggled State */
input[type="checkbox"]:checked ~ div#toggle_menu{display:block}input[type="checkbox"] ~ div#toggle_menu{display:none}div.submenu{top:10px;background-color:#FFFFEC;height:650px;max-height:650px;overflow-y:auto;z-index:10}ul.navleft{padding:0 0 0 5px;width:95%}ul.nav_left{background-color:#E6E6E6;border:solid 1px black}li.nav_left{list-style:none;background-color:#E6E6E6;width:95%;border:solid 1px white;padding-left:1px}li.nav_left a{text-decoration:none;width:85%}li.nav_left:hover{background-color:yellow;z-index:1000}li.nav_left a:hover{color:red;z-index:1000}/* end left-submenu */
div#l_nav_id{background-color:#FFCFCF;border:solid 2px black}ul#l-nav li{list-style:none;margin:0 0 0 5px;line-height:1.5rem}ul#l-nav li:hover{background-color:yellow;z-index:1000}ul#l-nav li a{text-decoration:none}/* links */
div.link, div#ext_links{background-color:#CFCFCF;color:white}a,
a:visited,
a:active, a:hover{color:#0099ff}/* Add an "active" class to the current link */
a:hover{text-decoration:none}.cookie_info{padding:5px;font-size:0.8rem;background-color:red;color:black;width:650px}div#cookie_div{width:250px;font-size:0.8rem;border:outset 3px red}div#cookie_drag_div{background-color:#CFCFCF}div#cookie_vals th{text-align:center}div#cookie_vals td.ccnt, div#cookie_vals td.cpath{background-color:red;color:black;width:8%;text-align:center}div#cookie_vals td.cname{background-color:red;color:black;width:25%}div#cookie_vals td.ccont{background-color:red;color:black;width:35%}div#cookie_vals td.cablauf{background-color:red;color:black;width:30%}div#awk{padding-left:20px;background-color:#FFFFCF;color:black !important}div#user_info_div{border:outset red 4px;margin:auto;padding-left:10px;padding-right:10px;width:60%;height:93%;z-index:99}div#user_info_txt{background-color:silver;padding-left:10px;padding-right:10px;width:100%;height:97%;overflow:auto}div#ftab_svg, div#used_files_svg_div{width:97%;height:1400px;border:solid black 2px;overflow-y:auto}div#used_files_svg_drag_div, div#used_files_drag_div{background-color:yellow;line-height:1.3rem;border:outset red 2px;width:99%}div#svg{overflow-y:auto}div#px_ratio_drag_div{background-color:yellow;line-height:1.3rem;border:outset red 2px;width:710px}div#donate{width:705px;color:black}input#payme{display:inline}div.box{margin-left:20px}pre{background-color:#FCFCFC;color:black;border:solid 1px blue;margin-left:5px;width:96%;white-space:pre;padding:0rem 1.5rem 0.5rem;overflow-x:scroll}pre.sample{background-color:#f6f6f6;border:solid 1px blue;padding:5px;margin-left:50px;width:85%}/* margin:25px 50px 75px 100px;top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px;top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px;top and bottom margins are 25px right and left margins are 50px
*/
pre.def , pre.code{BACKGROUND-COLOR:#f6f6f6;BORDER:#dedede thin solid;margin-left:20px;margin-right:20px;COLOR:black;FONT-FAMILY:monospace;FONT-SIZE:var(--def-size);FONT-STYLE:normal;FONT-WEIGHT:normal;PADDING-BOTTOM:5px;PADDING-LEFT:10px;PADDING-RIGHT:5px;PADDING-TOP:5px;TEXT-DECORATION:none;white-space:pre-wrap}pre.merke{background-color:#fffecc;border:#0000ff thin solid;FONT-SIZE:var(--def-size);FONT-STYLE:normal;FONT-WEIGHT:bold;PADDING-BOTTOM:5px;PADDING-LEFT:10px;PADDING-RIGHT:5px;PADDING-TOP:5px;TEXT-DECORATION:none}pre.cons{background-color:#fffecc;border:#0000ff thin solid;font-size:1rem;FONT-STYLE:normal;FONT-WEIGHT:bold;padding-bottom:5px;PADDING-LEFT:10px;PADDING-RIGHT:5px;TEXT-DECORATION:none;hyphens:none}pre.cons:first-line{width:99%;background-color:#cd6a51;color:white;font-size:1.1rem;line-height:1.175rem;display:inherit;overflow-x:hidden}pre.link{background-color:yellow;border:#0000ff thin solid;font-size:1rem;FONT-STYLE:normal;FONT-WEIGHT:bold;padding-bottom:5px;line-height:1.3rem;PADDING-LEFT:10px;PADDING-RIGHT:5px;TEXT-DECORATION:none;hyphens:none}code.link{background-color:#66FFFF}pre.link:first-line{width:99%;background-color:#cd6a51;color:white;font-size:1.1rem;line-height:1.175rem;display:block;overflow-x:hidden}pre.error{background-color:#fffecc;border:#0000ff thin solid;font-family:courier;FONT-SIZE:12pt;FONT-STYLE:normal;FONT-WEIGHT:bold;width:90%;PADDING-BOTTOM:5px;PADDING-LEFT:10px;PADDING-RIGHT:5px;PADDING-TOP:5px;TEXT-DECORATION:none}body{scrollbar-width:thin;/* "auto" or "thin" */ scrollbar-color:blue orange;/* scroll thumb & track */}/* width */::-webkit-scrollbar{width:20px}/* Track */::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:10px}/* Handle */::-webkit-scrollbar-thumb{background:red;border-radius:10px}input[type=button], input[type=submit] , input[type=cancel]{height:2.2rem;vertical-align:top;background-color:#CFCFCF;color:#010101 !important;font-size:1.05rem;font-weight:bold;border:outset 3px red;border-radius:10px;padding-left:15px;padding-right:15px}input[type=button].smallBtn{padding:1px;margin:1px}input:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid{background-color:#FF3333}input:valid , input:focus:valid, textarea:required:valid, textarea:focus:valid{background-color:#00FF00}input[type=checkbox]{outline:solid 1px black !important}input[type=text].right{text-align:right}input[checkbox]{width:210px;display:inline;font-weight:bold}/* Checkbox text */
.cbk_bog{vertical-align:top;font-size:100%;display:inline;font-weight:bold}input[radio]{width:30px}input#bgnr{width:50px}.clear_both{clear:both}td.ok{background-color:#33FF33;color:black !important}td.not_ok{background-color:red;color:black !important}table#checkl_tab tr td , table#checkl_tab tr th{border:1px solid #4F4F4F;border-collapse:separate}td.key{width:20px;text-align:center}table.border_tab tr td , table.border_tab tr th{border:1px solid #9F4F4F;border-collapse:separate;border-spacing:5px}table.border_tab th.tleft{text-align:left}table.border_tab tr:nth-child(even){background:#999;color:black}table.border_tab tr:nth-child(odd){background:#3F3;color:black}table.border_tab tr:hover{background-color:#B5c5c5}table.water_tab{border:solid 1px black;border-collapse:separate;border-spacing:2px;width:400px}table.water_tab td{border:solid 1px black}table.water_tab th{border:solid 1px black}table.water_tab tr:nth-child(even){background:#CCC}table.water_tab tr:nth-child(odd){background:#FFF}table#spons_tab{border:solid 1px black;border-collapse:separate;border-spacing:2px;width:500px}table#spons_tab td{border:solid 1px black}table#spons_tab th{border:solid 1px black}table#spons_tab tr:nth-child(even){background:#CCC;color:black}table#spons_tab tr:nth-child(odd){background:#FFF;color:black}table#spons_tab tr:hover{background-color:#F5c5c5}table.valtab td{border:solid 1px black;font-size:1.1rem}table.valtab td th{border:solid 1px black}table.valtab td tr:nth-child(even){background:#CCC}table.valtab td tr:nth-child(odd){background:#FFF}table.valtab input{font-size:1.1rem}table.seltab td{border:solid 1px black;font-size:1.1rem}table.seltab td th{border:solid 1px black}table.selltab td tr:nth-child(even){background:#CCC}table.seltab td tr:nth-child(odd){background:#FFF}table.seltab input{font-size:1.1rem}/* auch in menu_6-1_1_media.css */
table.bordered, td , th{margin:1px;border:1px solid black;border-collapse:separate;border-spacing:3px}table.bordered tbody tr:nth-child(2n), tr:nth-child(2n){background-color:#FFFFCF;color:black;font-weight:bold}table.bordered tbody tr:nth-child(2n-1), tr:nth-child(2n-1){background-color:#CFCFCF;color:black;font-weight:bold}table.bordered tbody tr:hover{background-color:yellow}table.prov, td , th{margin:1px;border:1px solid black;border-collapse:separate;border-spacing:3px}table.prov tbody tr:nth-child(2n), tr:nth-child(2n){background-color:#FFFFCF;color:black;font-weight:bold}table.prov tbody tr:nth-child(2n-1), tr:nth-child(2n-1){background-color:#CFCFCF;color:black;font-weight:bold}table.prov tbody tr:hover{background-color:yellow}table.auswert tr:hover{background-color:#F5c5c5}span.left100{width:120px;display:inline-block}span.red{color:red;font-weight:bold}span.green{color:green;font-weight:bold}span.abc{width:90px;display:inline-block;border:solid 1px black;padding:4px}/* Box sizing. Awesome thing. Read about it here:http://www.w3schools.com/cssref/css3_pr_box-sizing.asp content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included border-box	The width and height properties (and min/max properties) includes content, padding and border, but not the margin
*/
*{box-sizing:border-box;/* Anwendbar auf all Elemente that accept width oder height */ -moz-box-sizing:border-box}/* Mozilla Firefox 2 is a version of Firefox, a web browser released on October 24, 2006 Firefox has finally begun shipping with box-sizing unprefixed as of version 29. */ /* Die Browser übernehmen für Eingabefelder input und textarea nicht ohne weitere * Angaben die Schriftfamilie:Formular-Elemente erben die Schrift – font-family – * nicht automatisch vom body-Element. Die Browser setzen die Schrift des * Betriebssystems ein, also meist eine serifenfreie Schrift wie Arial oder Helvetica. ' Schnelle Abhilfe schafft CSS inherit für font-size und font-family – * Erben vom body-Element.
*/ input, select, textarea, button{font-size:inherit;font-family:inherit}div.bg_1{font-size:1.0rem}/* ============================= RR ====================================== */ div.wrc_07{border:none;/* outset 4px grey;*/ background-color:#FFFFEC;color:#010101}div#rr_div{/* min-width:390px;border:outset 3px #010101;*/ padding-left:5px}div.head_data, p.head_data, span.call{background-color:#FFAAAA;color:#010101;margin-left:5px;padding:5px;width:95%;display:inline-block}div.head_data ol{margin-left:10px}/* ======================= ============================================= */ /*
display:block;verwandelt das inline-Element label in ein Block-Element mit Zeilenumbruch, padding vergrößert die Klickfläche, bei den Checkboxen zeigt der Cursor, dass man nicht auf das winzige Kästchen zielen muss.
*/
label{display:block;padding:1ex}.flex label{cursor:pointer}code{font-family:"Operator Mono SSm A", "Operator Mono SSm B", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;font-size:1.1rem;line-height:1.2rem;font-weight:normal;display:inline-block;color:#2b4180;/* white-space:nowrap;*/ overflow-x:scroll}code{color:black;background-color:#f9f9f9;border:1px solid #ddd;border-radius:2px;padding:1px 4px}code.red{color:red;font-size:1.1rem}/* structure b background-color:#ffffff;*/ .wrapper{width:99.9%;margin:0 auto;border-radius:var(--radius-size)}header{padding:5px 0;border-radius:var(--radius-size)}#main_nav{text-align:center;background-color:#00006B}/* Wenn gewollt dann extra cllass bei grid_x*/
.bord_right{padding-right:3rem;border-right:2px solid #e2e2e2;margin-right:3rem}.mid{margin:0 auto}#info, #kopf #page-header{/*	background:#f4f4f4;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;border-right:2px solid #e2e2e2;auch kein border-right. Wenn gewollt dann extra cllass bei grid_x */ padding:2px;width:99.5%;margin:auto;border-radius:var(--radius-size)}#info h1, #kopf h1{line-height:1.2em;margin-top:0px;margin-bottom:0px}.flexslider{display:none}#content{margin:5px 0}aside{margin:40px 0}p{margin:0 0 1.5em;font-size:1.1rem;line-height:1.2rem;color:black}/* RESPONSIVE IMAGES */
img{max-width:100%;height:auto}/* MAIN MENU .menu-toggle{display:block;float:right;width:45px;height:40px;padding:5px;margin:10px 0 0;background:#0064b4;color:#fff;cursor:pointer;text-transform:uppercase;font-size:1.2rem}.menu-toggle.toggled-on{background:#0099ff}.nav-menu{clear:both;margin-bottom:60px}.nav-menu.toggled-on{display:block;position:relative;z-index:10;max-width:230px}.nav-menu li a{background:#dadada;display:block;margin:1px 0;padding:5px 10px 5px;text-decoration:none}.nav-menu li a:hover{background:#006464;color:#fff;z-index:10}.nav-menu li li a{background:#e8e8e8;padding-left:40px}.nav-menu li li li a{background:#efefef;padding-left:50px}/ * ENDE MAIN MENU */ /* SECONDARY MENU #secondary-navigation{margin-bottom:20px;#secondary-navigation ul{margin:0;padding:0}#secondary-navigation ul li a{background:#E6E6E6;display:block;margin:5px 0;padding:5px 10px 5px;text-decoration:none}#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{background:#0099ff;color:#fff}ENDE SECONDARY MENU */ /*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12{margin-bottom:5px;/*positioning and padding*/ position:relative;min-height:1px;padding-left:1px;padding-right:5px;float:left;display:block}/*GRID*/
/* & Columns:12 */
.row{margin-left:3px;margin-right:3px}/* .grid_1, grid_2, grid_3. grid_4, grid_5, grid_6,grid_7, grid_8, grid_9, grid_10, grid_11, grid_2{width:100%}[class*="grid_"]{width:100%}*/ .rightfloat{float:right}/* FOOTER in footer,css
small_footer{font-size:0.95rem;padding:5px;width:99%;margin:auto;bottom:-12px}footer{font-size:0.95rem;padding:5px;width:99%;margin:auto;bottom:-12px}footer ul{margin:0;padding:0}footer{background:#3B5998;color:#fff;border-radius:var(--radius-size);margin-top:10px;margin-bottom:10px}footer h1, footer h2, footer h3, footer h4{color:#FFF;margin-bottom:10px}footer ul{margin:0 0 0 8%}footer table tr{margin:5px auto;background-color:#3B5998;border:none}footer table tr td{border:none;background-color:#3B5998}a.buttonlink{background:#000000;/ * #0099ff;* / border-radius:7px;color:#fff;display:block;float:left;margin:10px 15px 10px 0;padding:10px;font-size:0.85rem;text-decoration:none}a.buttonlink:hover{background:#8dbc01}*/ /*colors and backgrounds*/
body{background:#fff}h1, h2, h3, h4, h5, h6{color:#333}/* display:inline-block allows to set a width and height on the element. * Also, with display:inline-block, the top and bottom margins/paddings are respected, * but with display:inline they are not.*/
a.small_foot, span.small_foot{padding-left:5px;display:inline-block !important;min-width:120px;font-weight:bold;color:white;line-height:1.8rem}/*
.greenelement{background:#5ec79e;color:#fff}.violetelement{background:#887dc2;color:#fff}*/ .cpright{position:absolute;bottom:5px;right:60px;z-index:20}.map{position:relative;overflow:hidden}.layer{position:absolute}.tile{pointer-events:none;position:absolute;width:256px;height:256px}.info{position:absolute;bottom:10px;left:1px;font-size:1.2em;width:99%}div#leaflet-control-mouseposition{font-size:1.2em}div#mapkoords{width:340px}div#cont{width:900px}div#map{cursor:crosshair}/* div.map img{border:solid 1px red}*/ div#port_div{min-height:620px;min-width:600px}div.portmap{position:absolute;z-index:201}div.player{z-index:202}img.ptile{z-index:203}.leaflet-container .leaflet-control-mouseposition{background-color:rgba(255, 255, 255, 0.7);box-shadow:0 0 5px #bbb;padding:0 5px;margin:0;color:#333;font:11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif}div#leaflet-control-mouseposition{font-size:1.2em}div#mapkoords{width:340px}div#cont{width:900px}div#map{cursor:crosshair}/* div.map img{border:solid 1px red}*/ div#port_div{min-height:620px;min-width:600px}div.portmap{position:absolute;z-index:201}div.player{z-index:202}img.ptile{z-index:203}.leaflet-container .leaflet-control-mouseposition{background-color:rgba(255, 255, 255, 0.7);box-shadow:0 0 5px #bbb;padding:0 5px;margin:0;color:#333;font:11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif}/* ende leaflet-map */ /* Contain floats display:table;content:" ";*/ .clearfix:before,
.clearfix:after,
.row:before,
.row:after{}.clearfix:after,
.container:after,
.row:after{clear:both}/* SHOW HIDE */
ul#cbk_ul{background-color:#FFFFCF;min-width:230px}ul#cbk_ul li{background-color:#FFFFCF;min-width:230px;height:1.3rem;color:#010101 !important}ul#cbk_ul li:hover{height:1.2rem}ul#cbk_ul li:hover{background-color:#FFFFCF;color:#010101 !important}ul#cbk_ul li input[type=checkbox]{vertical-align:middle}ul.lev_2{position:relative;left:150px;background-color:#0FFFEC;color:red}#ul#cbk_ul{background-color:#5B78A4;color:white;min-width:180px}/****** Style Star Rating Widget *****/ .rating{border:none;float:left}.rating > input{display:none}.rating > label:before{margin:5px;font-size:1.25em;font-family:FontAwesome;display:inline-block;content:"\f005"}.rating > .half:before{content:"\f089";position:absolute}.rating > label{color:#ddd;float:right}/***** CSS Magic to Highlight Stars on Hover *****/ .rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label{color:#FFD700}/* hover previous stars in list */ .rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label{color:#FFED85}rating{text-align:center;perspective:250px;position:absolute;top:40%;width:100%}#rating span{cursor:pointer;font-size:50px;padding:0 5px;color:#cfcfcf;opacity:.5;transition:all 150ms;display:inline-block;transform:rotateX(45deg);transform-origin:center bottom}#rating span.hover{color:#ff0;opacity:1;transform:rotateX(0deg);text-shadow:0 0 30px #ffc}span.item{font-size:0.8rem;color:#000000}div#breakpoint{width:80px;color:black;background:white;margin-right:5px}span.breakspan{width:80px;color:black;background:white;margin-right:5px}div#svghide{display:none}div#search_area{font-size:0.8rem;width:820px;height:500px;max-height:500px;overflow:auto}span.search_red{background-color:yellow;color:red}/*pre#search_pre{font-size:0.8rem;width:800px;max-height:500px:overflow:auto}*/ /*
PRINT STYLESHEET The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value. */

@media print{*{background:transparent;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important}/* Black prints faster:h5bp.com/s */ a, a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{content:""}/* Don't show links for images, or javascript/internal links */ pre, blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}/* h5bp.com/t */ tr, img{page-break-inside:avoid}img{max-width:100% !important}div.grid_12 > div#kopf{display:none}nav{display:none}div#kopf, div#kopf_anhang{display:none}div#footer_sect , div#cookie_div{display:none}div.draggable ,div#modal{display:none}h2, h3{break-after:avoid}@page{margin:0.5cm}/* @-moz-document url-prefix(){}@else{p, h2, h3{orphans:3;widows:3}/ * Firefox kennt das nicht !!! alle anderen ja * /}*/}