/*-----------------------------------------------------------------------------
     Name: basic.css
   Author: Frank Opper (www.frank-opper.de)
     Date: 2024-04-25
  Version: 1.05

  Basic style sheet for lol-dieband.de
-----------------------------------------------------------------------------*/

@font-face {
  font-family: "OpenSans";
  src: url("fonts/OpenSans-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
}

html {
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: OpenSans, Helvetica, Arial, sans-serif;
  /* font-size: 13px; */
  color: #000000;
  background: #fffafa url(images/noten_fffafa.jpg) no-repeat fixed 0 0;
  background-size: cover;
}

@media (min-width: 768px) {
  body {
    background: #fffafa url(images/noten_fffafa.jpg) no-repeat fixed 0 0;
    background-size: cover;
  }
}

header {
  height: 180px;
  border-bottom: 12px solid #cccccc;
  background: #000000 url(images/header_bg.png) no-repeat center -60px;
}

header div {
  max-width: 1000px;
  margin: 0 2vw;
}

@media (min-width: 768px) {
  header div {
    margin: 0 2vw 0 120px;
  }
}

header h1 {
  position: absolute;
  top: 70px;
  right: 2vw;
  color: #fffafa;
}

header h1 span::after {
  content: "\A";
}

header form {
  display: none;
  margin: calc((52px + 1em) / 2) 0 0 0;
  text-align: right;
}

header form label {
  display: none;
}

header input {
  width: 50vw;
  padding: 0 0.5em;
  line-height: 2em;
}

@media (min-width: 768px) {
header input {
  width: 30em;
}
}

/*----- Menue -----*/

div#menubar {
  margin: -126px 2vw 84px 2vw;
  width: 62px;
}

@media (min-width: 768px) {
  div#menubar {
    margin: -126px 2vw 84px 120px;
  }
}

label.hamburg {
  display: block;
  position: relative;
  width: 62px;
  height: 42px;
  margin 0 auto;
  background: #333333;
}

input#hamburg { display: none; }

.line {
  display: block;
  position: absolute;
  left: 10px;
  width: 42px;
  height: 2px;
  background: #ffffff;
  transition: 0.5s;
  transform-origin: center;
}

.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 30px; }

#hamburg:checked + .hamburg .line:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2) {
  opacity: 0;
}

#hamburg:checked + .hamburg .line:nth-child(3) {
  transform: translateY(-10px) rotate(45deg);
}

nav#menu {
  position: absolute;
  height: auto;
  max-height: 0;
  overflow: hidden;
  margin-top: 84px;
  font-weight: bold;
  transition: all 0.5s;
}

#hamburg:checked + .hamburg + nav#menu {
  max-height: 600px;
  overflow: visible;
  border-bottom: 1px solid #555555;
  background: linear-gradient(90deg, #eeeeee, #fffafa);
}

nav#menu h4 {
  display: none
}

nav#menu ul {
  margin: 0;
  padding: 0;
}

nav#menu ul li {
  list-style: none;
  padding: 0;
  border-top: 1px solid #555555;
}

nav#menu a {
  display: block;
  padding: 1em 5em 1em 3em;
  text-decoration: none;
  color: #000000
}

nav#menu a:hover {
  background: #cccccc;
}

nav#menu a span {
  display: none
}

nav#menu a:hover span {
  display: block;
  position: absolute;
  top: -2.7em;
  left: 0;
  width: 20em;
  font-size: 0.8em;
  font-weight: normal;
  color: #ffffff
}

nav#menu a span b {
  display: none
}

/*---- Inhalt ----*/

main {
  flex: auto;
  max-width: 1000px;
  margin: 0 2vw 3em 2vw;
}

@media (min-width: 768px) {
  main {
    flex: auto;
    max-width: 1000px;
    margin: 0 2vw 3em 120px;
  }
}

main h1 {
  clear: both;
  margin: 2em 0 18px 0;
  border-bottom: 1px solid #b22222; /* #dc143c; */
  font-family: Times, serif;
  font-size: 1.8em;
  font-style: italic;
  font-weight: normal;
  font-variant: small-caps;
  color: #b22222; /* #dc143c; */
}

main h1 span {
  border-bottom: 2px solid #b22222;
}

main h2 {
  clear: both;
  margin: 2em 0 18px 0;
  border-bottom: 1px solid #b22222; /* #dc143c; */
  font-family: Times, serif;
  font-size: 1.4em;
  font-weight: normal;
  font-style: italic;
  color: #b22222; /* #dc143c; */
}

main h2 span
{
  border-bottom: 2px solid #b22222;
}

main h3 {
  clear: both;
  font-family: Times, serif;
  font-size: 1.2em;
  font-weight: normal;
  font-style: italic;
  color: #b22222; /* #dc143c; */
}

main h3 span {
  border-bottom: 2px solid #b22222;
}

main h5 {
  margin: -1.3em 0 1em 0;
  font-family: Times, serif;
  font-weight: normal;
  color: #b22222; /* #dc143c; */
}

main p {
  margin: 1em 0;
  line-height: 1.5em
}

main p:first-line {
  line-height: 1em
}

main p:first-letter {
  font-size: 1.5em
}

main p.follow:first-letter {
  font-size: 1em
}

main h1 + time, h2 + time {
  display: block;
  margin: -1.3em 0 1em;
  font-family: Times, serif;
  font-size: 0.8em;
  color: #b22222;
}

main ul, ol, dl {
  margin:  0 0 1em 1.5em;
  line-height: 1.5em;
  list-style: url(images/modern_bullet.svg);
}

main pre {
  margin: 1em 0;
  padding: 1em 0 0 0;
  border: 1px dashed #f5deb9;
  border-left: 5px solid #f5deb9;
  background: #f5f5dc
}

main a:link {
  color: #0000ff;
  text-decoration: underline;
}

main a:visited {
  color: #660099;
  text-decoration: underline;
}

main a:hover {
  color: #000000;
  background: #cccccc;
  text-decoration: none
}

main a[href^="http"] {
  padding-right: 1em;
  background: url(images/modern_extlink.svg) right 70% no-repeat
}

main a[href^="https"] {
  padding-right: 1em;
  background: url(images/modern_extlink.svg) right 70% no-repeat
}

main h2 a:link, h2 a:visited {
  color: inherit
}

main a.img:before {
  content: ""
}

/*---- Fusszeile ----*/

footer {
  border-top: 12px solid #cccccc;
  color: #ffffff;
  background: #000000 url(counter.php) 50% 72% no-repeat;
}

footer div {
  display: flex;
  max-width: 1000px;
  margin: 1em 2vw 2em 2vw;
}

@media (min-width: 768px) {
  footer div {
    margin: 1em 2vw 2em 120px;
  }
}

footer ul {
  flex: auto;
  line-height: 1.5em;
  list-style: url(images/modern_bullet.svg)
}

footer ul li {
  margin: 0 1em;
}

footer a {
  text-decoration: none;
  color: #ffffff;
}

footer a:hover {
  color: #000000;
  background: #cccccc;
}

footer p {
  flex: auto;
  line-height: 1.5em;
  text-align: right;
}

footer p:first-letter {
  font-size: 1em
}

/*----- Navigation innerhalb der Seiten  -----*/

ul.navi {
  clear: both;
  margin: 2em auto;
  text-align: center
}

ul.navi li {
  display: inline;
}

ul.navi a {
  padding: 0.5em 0.66em;
  border: 1px solid transparent;
  text-decoration: none;
  color: #000000
}

ul.navi a:hover {
  border: 1px solid #c0c0c0;
  box-shadow: 4px 4px 4px #c0c0c0;
  color: #888888;
  background: linear-gradient(0deg, #f5deb2, #ffffe0)
}

ul.navi a.this {
  border: 1px solid #000000;
  box-shadow: 4px 4px 4px #708090;
  cursor: default;
  background: linear-gradient(0deg, #ffdead, #ffffe0)
}

/*----- Eingabefelder -----*/

fieldset {
  padding: 2em;
  border: 1px solid #000000
}

legend {
  margin: 0;
  padding: 0.5em 1em;
  border: 1px solid #000000;
  font-weight: bold;
  color: #000000
}

.input {
  margin: 1em 0;
}

.input input, .input textarea {
  font-family: OpenSans, Helvetica, Arial, sans-serif;
  font-size: 1em;
  /*width: 100%;*/
  margin-left: 12px;
  padding: 0.2em;
  border: 1px solid #cccccc
}

.input input:focus, .input textarea:focus {
  border: 1px solid #000000;
  background: #cccccc
}

.input label {
  /*display: block;*/
  margin: 1em 0 0.2em;
}

input.button {
  width: 7em;
  margin: 1em 0 0.2em 0;
}

.error {
  font-weight: bold;
  color: #b22222
}

.confirmbox {
  padding: 0.5em 1em;
  border: 2px solid #228b22;
  background: #98fb98
}

.errorbox {
  padding: 0.5em 1em;
  border: 2px solid #b22222;
  background: #ff9999
}

.errorbox:first-letter, .confirmbox:first-letter {
  font-size: 1em
}

/*----- Images -----*/

img {
  height: auto;
  margin: 0 auto;
  padding: 0.5em;
  border: 1px solid #999999;
}

@media (min-width: 768px) {
  img {
    margin: 0 0.5em;
  }
}

a img {
}

a:hover img {
  border: 1px dashed #0000ff;
  background: linear-gradient(90deg, #cccccc, #fcfcfc)
}

video {
  height: auto;
  margin: 0 auto;
  padding: 0.5em;
  border: 1px solid #999999;
}

/*----- Textfluss -----*/

.left {
  display: block;
}

@media (min-width: 768px) {
  .left {
    float: left;
  }
}

.right {
  display: block;
}

@media (min-width: 768px) {
  .right {
    float: right;
  }
}

.middle {
  vertical-align: middle
}

.next {
  display: block;
  clear: both
}

div.next {
  overflow: hidden;
  height: 1px
}

.center {
  text-align: center
}

/*----- Fotogalerie -----*/

ul.pic {
  margin: 0;
  padding: 0;
  list-style: none
}

ul.pic li {
  display: inline
}

ul.pic li a:hover {
  background: transparent
}

/*
div.pic {
  float: left
}

div.pic a:hover {
  background: transparent
}
*/

img.bigpic { /* entfaellt bei Anzeige mit fo_img.js */
  display: block;
  margin: 1em auto;
  padding: 2em;
  border: 1px solid #000000;
  text-align: center
}

img.smallpic {
  float: right;
  margin: -1em 0 0 1em
}

/*----- Tabellen -----*/

table {
  clear: both;
  width: 100%;
  margin: 1em 0;
  border: 0 none
}

table.color {
  width: 90%;
  border-spacing: 0 1em
}

table.color td {
  line-height: 2.5em
}

table.info {
  border: 0 none
}

table.info tr {
  border: 0 none
}

table.info th {
  padding: 0 0 0.5em 0;
  border: 0 none;
  text-align: left;
  font-size: 1.5em;
  font-weight: normal;
  font-style: italic
}

table.info td {
  padding: 0.5em;
  border: 0 none;
  vertical-align: top
}

table.info td.col1 {
  width: 20%;
  font-weight: bold;
  text-align: right
}

table.calendar {
  border: 1px solid #999999;
  border-spacing: 0;
  text-align: center;
}

table.calendar tr.weekend {
  background-color: #cccccc;
}

table.calendar td, table.calendar th {
  /*position: relative;*/
  border: 1px solid #999999;
}

table.calendar td.gig {
  background-color: lightgreen;
}

table.calendar td.rehersal {
  background-color: lightblue;
}

table.calendar td.absent {
  background-color: #ff6666;
}

table.calendar button {
  width: 100%;
  border: 0 none;
  font-size: 1em;
  color: #000000;
  background: transparent;
}

table.calendar span {
  margin: auto;
  padding: 0.5em 1em;
  border: 1px solid #000000;
  text-align: left;
}

table.calendar span:first-line {
  font-weight: bold;
}

/*----- Weblog / Gaestebuch -----*/

ul#root li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  list-style: none
}

ul#root li ul {
  margin: 0;
  padding: 0 0 0 3em
}

ul#root li.start {
  margin-top: 2em
}

.q {
  margin: 1em 2em
}

.locked {
  color: #ff0000;
  font-weight: bold
}

.unlocked {
  color: #009900;
  font-weight: bold
}

.locked a, .unlocked a {
  color: inherit;
  text-decoration: none
}

.edit a {
  font-size: 0.8em;
  text-decoration: none
}

.message {
  margin: 1em 0
}

.message:first-letter {
  font-size: 1em
}

.reply {
  color: #b22222
}

.reply:first-letter {
  font-size: 1em
}

/*----- Sitemap -----*/

ul#sitemap b {
  position: relative
}

ul#sitemap b span {
  display: none
}

ul#sitemap b:hover span {
  display: block;
  width: 15em;
  position: absolute;
  top: 1em;
  left: -1em;
  padding: 0.5em;
  border: 1px solid #000000;
  font-weight: normal;
  background: #cccccc;
  z-index: 1
}

ul#sitemap b span a {
  float: left
}

/*----- sonstige Formatierungen -----*/

address {
  width: 20em;
  margin: 0 auto;
  font-style: normal
}

.important {
  color: #ff0000
}

.small {
  font-size: 0.8em;
}

#map_canvas_box {
  float: left;
  padding: 0.5em;
  border: 1px solid #f5deb2
}

#map_canvas {
  width: 800px;
  height: 600px
}

/*----- Korrekturen fuer IE -----*/

* html div#menu a {
  border: 1px solid #fff8dc
}

* html div#submenu a {
  border: 1px solid #fff8dc
}

* html div#submenu ul li {
  list-style-image: none
}

*+html div#submenu ul li {
  list-style-image: none
}

* html div#content {
  height: 1px
}

* html table {
  width: 70%
}

/*-----------------------------------------------------------------------------
  History:

  2022-04-22  1.00  initial revision
  2022-05-11  1.01  added counter
  2023-03-05  1.02  bullet points in ul as SVG
  2023-04-21  1.03  icon for external links as SVG
  2023-05-03  1.04  added styles for time element
  2024-04-25  1.05  added styles for calendar
-----------------------------------------------------------------------------*/