/* djocc default style sheet */

a:link { color:red; }
a:visited { color:red; }
a:active { color:red; }
a:hover { font-weight: bold; color:black; }

h1,h2,h3,h4,h5,h6 { font-family: verdana, helvetica, arial, sans-serif; color:black; }
h1 { font-size: 18pt; }
h2 { font-size: 14pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11pt; }
h5 { font-size: 10pt; }
h6 { font-size: 10pt; }

.pre {white-space: pre;}

body { font-family: helvetica, verdana, arial, sans-serif; font-size: 10pt; background:#FFFAF0; }

p { font-family: helvetica, verdana, arial, sans-serif; font-size: 10pt; text-align: center; white-space:pre}

table,th,tr,td {font-family: helvetica, verdana, arial, sans-serif; font-size: 10pt; text-align:left;}

th { text-align:center; background:#999999; }

table.occ tr:nth-child(odd)  { background: #FEF0D6; }
table.occ tr:nth-child(even) { background: #FFFAF0; }

.occTable tr{font-family: helvetica, verdana, arial, sans-serif; font-size: 8pt; text-align:left;}

ol,ul { line-height: 125%; }

hr { height: 1px; }

tt, pre {
font-family: monospace; font-size: 9pt; text-align:left; background: #FFFFFF;
}

/* Browser specific (not valid) styles to make preformatted text wrap */
/* Tahoma, Arial, Arial, Verdana, siehe https://www.w3schools.com/cssref/css_websafe_fonts.asp */

/* Scheint beides nicht zu gehen!? Abhilfe: django template filter {{variable|wordwrap:80}} */
pre-wrap {
	font-family: monospace; font-size: 9pt; text-align:left; background: #FFFFFF;
	overflow-x: auto;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

#content {
  /* border: 0px solid #606060; */
  width: 100%;
  margin: 0px auto;
  /*margin: 2em;*/
  padding: 0;
}


/* simple horizontal menue
#hormenu {
  border: 0px solid #606060;
  /*background-color: #dddddd;
  padding: 3px;
  margin: 0px auto;
  line-height: 2em;
}
*/

/* vertical menue at right */
#vertmenu {
  border:0px solid #606060;
  background-color:#dddddd;
  width:100px;
  padding:3px;
  margin:0;
  line-height:30px;
  float:left;
}
.menutitle {
  margin:-5px -5px 5px -5px;
  padding:2px;
  background-color:#cccccc;
  font-weight:bold;
  border-bottom:1px solid #606060;
}


/* tabbed styles */
#navlist {padding: 3px 0; margin: 0;  border-bottom: 1px solid #778;  font: bold 12px Verdana, sans-serif;}
#navlist li {list-style: none; margin: 0;  display: inline;}
#navlist li a {padding: 3px 0.5em; margin-left: 3px;  border: 1px solid #778; border-bottom: none;  background: #DDE;  text-decoration: none;}
#navlist li a:link {color: #448;}
#navlist li a:visited {color: #667;}
#navlist li a:hover {color: #000; background: #AAE;  border-color: #227;}
#navlist li a#current {background: white; border-bottom: 1px solid white;}


/* Get rid of these standard blue bg in check boxes and radio buttons in Opera, Chrome etc. */
/* https://stackoverflow.com/questions/24322599/why-cannot-change-checkbox-color-whatever-i-do */
/* input[type="checkbox"] { filter: invert(100%) hue-rotate(18deg) brightness(1.7); } */

input[type='checkbox'], input[type='radio'] { filter: grayscale(100%) opacity(75%) ; }


/* Radio Buttons */
.custom-radio-list {
    list-style-type: none;
    padding: 4px;
    margin: 0;
}


/* Leaflet stuff follows ... */

/* All maps (class) */
#map_pred {
        width:  800px;
        height: 800px;
    }

#map_rep {
        width:  800px;
        height: 800px;
    }

.ui-control {
  background:#fff;
  position:absolute;
  top:10px;
  right:10px;
  padding:10px;
  z-index:100;
  border-radius:3px;
  }

/* Force left-alignment of Labels in Leaflet Layer Control (ovverride leaflet.css) */
.leaflet-control-layers label {
  text-align: left;
	}

.leaflet-control-layers-group-name {
  text-align: left;
}


/* Get rid of these dstandard blue bg in check boxes and radio buttons in Opera, Chrome etc. */
input[type='checkbox'], input[type='radio'] { filter: grayscale(1) opacity(80%) ; }


/* worldmap */
.night0 {
  stroke: steelblue;
  fill: steelblue;
  fill-opacity: .3;
}
.night {
  stroke: steelblue;
  fill: gray;
  fill-opacity: .3;
}


/* Aus base.html => konsolidieren */
body {
    padding-bottom: 30px;
}

.alignLeft {
  text-align: left;
  padding-left: 5px;
}

.alignRight {
  text-align: right;
  padding-right: 5px;
}

.alignCenter {
  text-align: center;
}


.info {
    padding: 6px 6px;
    font: 12px/15px Tahoma, Arial, sans-serif;
    background: white;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info p {
    align:left;
    margin: 0 0 0px;
    color: #777;
}

.leaflet-popup-content {
    /* margin: 3px 5px; */
    margin: 5px 7px;
  line-height: 1.4;
    font: 11px/12px Arial, Tahoma, Arial, sans-serif;
}