/* Makes the page fill the window. */
html {
    font-size:0.9em;height:100%;
}
body {
    height:     100%;
    border:0;margin:0;padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.9em;
    color:#333333;background-color:white;
}
button {
    font-size:  smaller;
}
button:disabled {
    color:black;
    border:2px solid brown;
}


/* prevent selection of text, e.g. in popup window */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* next entries area form smartphones */
@media screen and (max-device-width: 900px) {
    h1 {font-size: 1.4em;margin-top:0;margin-bottom:0px;    }
    h2 {font-size: 1.2em;margin-top:0;margin-bottom:5px;    }
    h3  {font-size:1.1em; }
    h4  {font-size:1.0em;margin-top:0;margin-bottom:0px; }

    /* used for webcams.html */
    td.imagetitle {
        font-size: 2.8em;
    }
}

/* next entries are for wide screens (PC) only */
@media screen and (min-device-width: 901px) {
    h1  {font-size:1.8em;margin-top:0;margin-bottom:10px; }
    h2  {font-size:1.6em;margin-top:0;margin-bottom:8px; }
    h3  {font-size:1.4em;margin-top:0;margin-bottom:5px; }
    h4  {font-size:1.2em;margin-top:0;margin-bottom:5px; }

    td.imagetitle { font-size: 1.3em;  }       /* used for webcams.html */

    .clsTdContent {
        background-color:white;
//        border:0;
//        padding:0;


        border-left:2px solid #ccc;
        border-right:2px solid #ccc;
        border-top:0;
        border-bottom:2px solid #ccc;
        padding:0 10px 0 10px;
        border-bottom-right-radius:12px;
        border-bottom-left-radius:12px;

        width:100%;
    }
}

@media screen and (max-width: 900px) {
    .largeScreenOnly { display: none; }
}
@media screen and (min-width: 901px) {
    .smallScreenOnly { display: none ; }
}

canvas {
    vertical-align:bottom;
}
img  {border:0;}
table {
     margin:0; border-spacing:0;padding:0;
}
td	 {
	 text-align:left;vertical-align:top;
     margin:0; border-spacing:0; padding:0;
	 }
ul {
	 border:0;
	 margin-left:0;margin-top:0;margin-bottom:0;margin-right:0;
     padding-left:20px;
	 overflow: auto;
}
li {
        margin-left:0;margin-top:0;
        margin-bottom:5px;
        margin-right:0;
        list-style-position:outside;
}

.title {
	font-family:arial;
	font-weight:700;
	font-size:1.5em;
	color:yellow;
}


.activeMenu {
    background: rgba(255,255,255,1.0)!important;
    border-bottom:0px !important;
}
.MenuTab td {
    background: rgba(200,200,200,1.0);
    border-top-left-radius:12px;
    border-top-right-radius:12px;

    border-bottom:1px solid #999;
    border-left:2px solid #eee;
    border-right:2px solid #999;
    border-top:2px solid #eee;

    font-family:Arial,sans-serif; font-size:0.9em;font-weight:500;

    margin-right:-1px;
    padding:3px 5px;
    text-align:center; vertical-align:middle;

    height:28px; width:150px;
}
.MenuTab td:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(200,200,200,0.5));
    cursor:pointer;
}