/* OpenSeaMap site CSS — faithful rebuild of the original style.css,
   modernized only where needed for responsiveness. */

a {
    text-decoration: none;
    color: #1e2d78;
}
body {
    background-image: url('/fileadmin/template/resources/img/grey_eeeeee.gif');
    background-repeat: repeat-y;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
}
td p {
    margin: 0px;
}

/* ---------- header ---------- */
#header {
    background: #c0c0ff url('/fileadmin/template/resources/icons/OpenSeaMapLogo_200.png') no-repeat 12px center/160px 80px;
    border-bottom: 1px solid #99f;
}
#header .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    min-height: 84px;
}
#header h1 {
    margin: 0;
    font-size: 32px;
}
#header h1 a { color: #27408B; }
#header h1 a:hover { text-decoration: underline; }
#header h1 small {
    font-size: 0.5em;
    font-weight: normal;
}
#topmenu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#topmenu a {
    display: block;
    padding: 4px 8px;
    color: #000;
}
#topmenu a:hover, #topmenu a.currentLanguage { background: #AAA; color: #fff; }

/* ---------- layout frame ---------- */
#frame {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
}
#menu {
    flex: 0 0 200px;
    max-width: 100%;
    background: #EEE;
}
#content {
    flex: 1 1 320px;
    min-width: 280px;
    padding: 20px;
}

#menu h2 {
    margin: 0;
    padding: 6px;
    font-size: 16px;
    color: #27408B;
    background: #c0c0ff;
    text-align: center;
}
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu ul li a {
    display: block;
    padding: 8px 8px 8px 14px;
    color: #000;
}
#menu ul li a:hover { background: #AAA; color: #fff; }
#menu ul li a.dl_current,
#menu ul li.active > a { background: #AAA; color: #fff; }
#menu a[href^="http"]::after { content: "\2197\00A0"; }

#rights {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

/* ---------- content elements (fluid_styled_content markup, original look) ---------- */
.frame {
    margin-bottom: 10px;
}
.frame-header h2, .frame-header h3 {
    font-size: 20px;
}
.bodytext p {
    margin: 0.4em 0;
}
.ce-bodytext p {
    margin: 0.4em 0;
}
.rechtsbuendig {
    text-align: right;
    margin-top: -12px;
    margin-bottom: 10px;
}
p.eingerueckt {
    margin-left: 20px;
}
table.rahmen1 {
    background: #F9F9F9 none repeat scroll 0 0;
    border: 1px solid #AAAAAA;
    border-collapse: collapse;
    font-size: 95%;
    margin-left: 20px;
}
table.rahmen1 td {
    border: 1px solid #AAAAAA;
    padding: 4px;
}
table.rahmen1 th {
    background-color: #C0C0FF;
    border: 1px solid #AAAAAA;
    padding: 4px;
}

/* textpic/image: image beside the text, like the original csc-textpic */
.ce-textpic {
    overflow: hidden;           /* clearfix, like old csc-textpic */
    margin-top: 10px;
}
.ce-intext .ce-gallery {
    float: left;
    margin: 0 10px 0 0;
}
.ce-intext.ce-right .ce-gallery {
    float: right;
    margin: 0 0 0 10px;
}
.ce-above .ce-gallery,
.ce-below .ce-gallery {
    float: none;
    margin: 0 0 10px 0;
}
.ce-below .ce-gallery {
    margin: 10px 0 0 0;
}
.ce-center .ce-gallery {
    float: none;
    margin: 0 auto 10px auto;
    text-align: center;
}
.ce-center .ce-gallery figure.image {
    display: inline-block;
}
.ce-gallery figure.image {
    margin: 0 4px 4px 0;
}
.ce-gallery img {
    border: 0;
    max-width: 100%;
    height: auto;
}
.ce-intext .ce-bodytext {
    overflow: hidden;           /* text wraps around the floating image */
}
.ce-intext.ce-nowrap .ce-bodytext {
    overflow: visible;
    display: flow-root;         /* nowrap variant: text in its own column */
}

/* image captions */
.ce-gallery figcaption {
    font-size: 0.85em;
    color: #555;
    text-align: center;
}

/* ---------- teaser boxes on the start page (like the old contc11/contc12) ---------- */
.teaser-row { display: flex; flex-wrap: wrap; gap: 3%; }
.teaser-col { flex: 1 1 280px; min-width: 260px; }
.teaser-col .frame {
    background: #f0f0f0;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 6px 6px 0;
    margin-top: 9px;
}

/* ---------- start page columns ---------- */
.start-columns { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.start-main { flex: 1 1 480px; min-width: 320px; }
.start-right { flex: 0 1 300px; min-width: 260px; }

/* ---------- map ---------- */
#map {
    height: 400px;
    width: 100%;
    padding: 0;
    margin: 0;
}
.map-full #map {
    height: 100vh;
}

/* ---------- footer / misc ---------- */
#page-footer {
    margin-top: 20px;
    padding: 8px 16px;
    color: #666;
    font-size: 0.85em;
    text-align: center;
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
    #frame { flex-direction: column; }
    #menu { flex: 1 1 auto; width: 100%; }
    #content { padding: 12px; }
    #header .inner { justify-content: center; text-align: center; }
    .start-columns { flex-direction: column; }
    .start-right { flex: 1 1 auto; width: 100%; }
}