body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0;
    font-size: 11pt;
}
th, td {
	vertical-align: top;
}

/*** LISTE ***/
#liste {
	border-collapse: collapse;
	margin: 1ex 0 1ex 0;
    min-width: 100%;
}
#listenhead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
#liste tr {
	border-bottom: 1px dotted gray;
}
#liste tr:nth-child(even) {
	background-color: #f2f2f2;
}
#liste tr:hover {
	background-color: #ddd;
}
#liste th {
    background-color: #ccc;
    padding: 5px 2ex 5px 2ex;
}
#liste th:hover {
    background-color: #999;
    color: white;
}
#liste td {
	padding: 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#liste tr.selected {
	background-color: #faa;
}
#liste tr.selected:hover {
	background-color: #f88;
}
#liste tr td:nth-child(1) { /* id */
    font-size: 80%;
    padding-top: 6px;
    color: gray;
}
#liste tr td:nth-child(2) { /* name */
	max-width: 30ex;
}
#liste tr td:nth-child(1n+3) {
	text-align: center;
}
#liste tr td:nth-child(1n+7) { /* stars */
    font-size: 70%;
    padding-top: 7px;
}
#liste tr td:nth-child(10) { /* Lega */
    font-size: 100%;
}
#liste a {
    text-decoration: none;
    color: green;
}

/*** FILTER ***/

#f_minhm, #f_maxhm, #f_mingrad, #f_maxgrad {
    width: 9em;
}
#filter input#f_text, #filter input#f_region {
    width: 20em;
}

/*** STERNE ***/

/* Based on https://codepen.io/jamesbarnett/pen/vlpkh */
.rating {
  border: none;
  padding: 0;
  margin: 0 1ex 0 1ex;
  display: inline-block;
}

.rating > input { display: none; }
.rating > label:before {
  margin: 1px;
  display: inline-block;
  content: '\2605';
}

.rating > label {
  color: #eee;
  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 /* hover previous stars in list */
{
    color: #FFD700;
}



/*** GRID LAYOUT: ***/
#filter {
    display: inline-grid;
    grid-template-columns: auto;
    vertical-align: top;
    justify-content: start;
    align-content: center;
    grid-gap: 1px;
    padding-left: 2ex;
}
#filter .sTit {
    /*min-width: 13ex;
    text-align: right;
    display: inline-block;*/
    margin-top: 10px;
    display: block;
    vertical-align: top;
}
#filter form {
    display: inline-block;
    vertical-align: top;
}

#layout {
    display: grid;
    grid-template-columns: 20em auto  ;
    grid-template-rows: 50px auto 50vh;
    height: 100vh;
}
#head {
    grid-area: 1/1 / 2/2;
    background: #eee;
}
#filter {
    grid-area: 2/1 / 3/2;
}
#mapid {
    grid-area: 1/2 / 3/3;
}
#listediv {
    grid-area: 3/1 / 4/3;
    overflow: scroll;
}

/*** nirvana.php: ***/

h1 {
    margin: 8px;
}

body.nirvana {
    background: #f8f8f8;
}
#infolayout {
    width: calc(100% - 40px);
    padding: 15px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50px auto auto auto;
    grid-gap: 10px;
}
#chead {
    grid-area: 1/1 / 1/3;
    background: #eee;
}
#veloviewer {
    grid-area: 2/2 / 5/3;   /* R1-3 */
}
#strava {
    grid-area: 4/1 / 5/2;   /* L3 */
}
#climbinfo {
    grid-area: 2/1 / 3/2;   /* L1 */
}
#climbdesc {
    grid-area: 3/1 / 4/2;   /* L2 */
}
unused {
    grid-area: 2/2 / 3/3;   /* RO */
    grid-area: 3/2 / 4/3;   /* RU */

}

#veloframe {
    width:  100%;
    height: 100%;
    margin: 0;
    max-height: 792px;
}
#stravaframe {
    width: 100%; /* 590 original */
    height: 405px; /* 405 original */
    border: none;
    max-height: 405px;
}

#climbinfo th, #climbinfo td {
    padding: 2px;
    vertical-align: top;
}
#climbinfo th {
    text-align: right;
    width: 8em;
}
#climbdesc th {
    text-align: left;
}
#climbinfo table, #climbdesc table  {
    width: 100%;
    /* height: calc(100% - 20px); */
}
#i_descr {
    border: 1px dotted gray;
    height: 80px;
    /* height: 100%; */
    width: 100%;
    background: white;
}
#i_haerte {
    position: relative;
    top: -7px;
    color: gray;
}
#i_rules {
    min-width: 10em;
}
/* Edit-Mode: */
#editButton {
    position: fixed;
    right: 1em;
    top: 1em;
}
.editmode  {
    background: #FEE;
}
#i_descr.editmode {
    border: 5px solid #FEE;
}
#tipphilfe {
    display: none;
}
div.editmode ~ #tipphilfe {
    display: inline-block;
}

/*** auth.php: ***/
#lockicon {
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 501;
}
#loginbox {
	position: absolute;
	background: white;
	padding: 10px;
	right: 5px;
	top: 25px;
	z-index: 500;
	visibility: hidden;
}