/* 
    Created on : 10-Jun-2014, 11:38:22 AM
    Author     : pvasak
    UPDATED to use Grid : 20-Aug-2017
    UPDATED to use color headers : 20-July-2018
    UPDATED  : 12-May-2025
*/

@media (orientation: portrait) {
	@supports (grid-area: auto) {
	@media screen and (min-width: 35.5em) {
   #grid {
    display: grid;

    /* The rows, columns and areas of the grid are defined visually
     * using the grid-template-areas property.  Each string is a row,
     * and each word an area.  The number of words in a string
     * determines the number of columns. Note the number of words
     * in each string must be identical. */
    grid-template-areas: "Header1 Header2"
                         "Menu Menu"
                         "Content Sidebar"
                         "Footer Footer";

    /* The way to size columns and rows can be assigned with the
     * grid-template-columns and grid-template-rows properties. */
    grid-template-columns: 1fr 250px;
    grid-template-rows: 82px 1fr auto;
  }
 }
 }
}

@media (orientation: landscape) {
	@supports (grid-area: auto) {
	@media screen and (min-width: 48em) {
   #grid {
    display: grid;

    /* Again the template property defines areas of the same name,
     * but this time positioned differently to better suit a
     * landscape orientation. */
    grid-template-areas: "blank Header1 Header2"
                         "blank Menu Menu"
                         "blank Content Sidebar"
                         "blank Footer Footer";
    grid-template-columns: 9px 1fr 250px;
    grid-template-rows: 82px 1fr auto;
  }
 }
 }
}
/* The grid-area property places a grid item into a named
 * area of the grid. */
#headerGEST  { grid-area: Header1 }
#headerTXT   { grid-area: Header2 }
nav          { grid-area: Menu }
#Content     { grid-area: Content }
#Sidebar     { grid-area: Sidebar }
footer       { grid-area: Footer }

body
{
	margin:0 auto;
	padding: 0px;
	max-width: 1280px;
	min-width: 480px;
	background: #fff;
	font-family: sans-serif,lucida,verdana,helvetica,arial;
	background-color:#fefffe;
}

#headerGEST{
	padding: 15px 25px;
	background: linear-gradient( #b7c090, #c2cbc9); /* Standard syntax */
        //background: linear-gradient( #aaccee, #cceeff); /* blue series */
}
/* fit images to container */
#headerGEST img {
	vertical-align: initial;
 	max-height: 84px;
	float: left;
}
#headerTXT{
	font-size: small;
        color: #3465a4;
	//color: #0571b3;
	text-shadow: 1px 1px #555;
	background: linear-gradient( #b7c090, #c2cbc9); /* Standard syntax */
        //background: linear-gradient( #aaccee, #cceeff); /* blue series */
}
#insertRight{
        clear:both;
        float: right;
        //height: 80vh;
        margin: 0px 0px 0px 0px;
        overflow: hidden;
        z-index: -1;
}
/* fit images to container */
#insertRight img {
        float:right;
        max-width: 100%;
        height: auto;
        opacity:0.1;
        overflow: hidden;
}

nav {
	float: left;
	width: 100%;
	background-color: #a3c4Db;	
	text-shadow: 1px 1px #bbbbbb;
	border: 1px solid #ccc;
	border-radius: 3px;
}
nav ul li {
	text-align: center;
	list-style-type: none;
	display: inline;
	}
nav li a {
	display: block;
	text-decoration: none;
	border-right: 2px solid #ccc;
	padding: 4px 12px;
	float: left;
	color: #000000;
}
nav li a:hover {
	background-color: #CCCCCC;
}
#Content{
  display: block;
  height: 100%;
}

article
{
	background-color: #fdfdfd;
	clear: left;
	float: left;
	height: auto;
	width: 98%;
	margin: 2px 2px 4px 4px;
	padding: 4px;
	position: relative;
	/* border: 2px solid #bbb;
	box-shadow: 4px 4px 4px #cccccc;
	border-radius: 8px; */
}
articleB /* Show Border */
{
        background-color: #fdfdfd;
        clear: left;
        float: left;
        height: auto;
        width: 98%;
        margin: 2px 2px 3px 3px;
        padding: 4px;
        position: relative;
        border: 1px solid #ddd;
        /* box-shadow: 4px 4px 4px #cccccc;*/
        border-radius: 6px; 
}

/* fit images to container */
article img {
	vertical-align:middle;
	height: auto;
	float: left;
}

/* fit images to container */
article embed {
	vertical-align:middle;
 	max-width: 99%;
	float:none;
	border: 2px solid #aaaaaa;
	box-shadow: 5px 5px 5px #cccccc;
	border-radius: 8px;
}

#map{
	width:auto;
	height:600px;
	border: 2px solid #aaaaaa;
	box-shadow: 5px 5px 5px #cccccc;
	border-radius: 8px;
}

#containerWGL {
        width: 100%;
        height: 100%;
        /* border: 2px solid #aaaaaa; */ 
}

#Sidebar{
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(222, 233, 245, 0.3); 
        overflow: hidden;
        z-index: 1;
}
#insertSide{
        clear:both;
        float: right;
        width: 100%;
        height: inherited;
        margin: 0px 0px 0px 0px;
        overflow: hidden;
}
/* fit images to container */
#insertSide img {
        float: right;
        max-width: 100%;
        height: auto;
        opacity:0.1;
        overflow: hidden;
}

aside
{
	float: right;
	margin: 6px 6px 6px 6px;
	border: 1px solid #ccddaa;
	border-radius: 4px;
	text-align: center;
        min-width: 120px;
	max-width: 240px;
	box-shadow: 1px 1px 1px #ddd;
}
aside ul li {
	list-style-type:none;
	display: inline-block;
	background: #ccddaa;  
	border: 1px solid #cccccc;
 	margin-right: 30px;
	width: 120px;
	height: 20px;
	line-height: 25px;
	padding:0;
	text-align: center;
}
aside ul li:hover {  
    background: #0571b3;  
    color: #c2cbc9;  
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;  
    padding: 3px 6px;  
    margin: 0;  
    text-decoration: none;  
}  
/* fit images to container */
aside img {
	display: inline;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
 	max-width: 96%;
	height: auto;
	float:none;
        //opacity: 0.4;
}

/*aside img:hover {
  opacity: 1.0;
}*/

footer {
	//clear:both;
	width: 100%;
	background-color: #fff;
	text-align: center;
	padding: 1px;
	position: relative; 
        z-index: 1;
}
#foot1 {
    display: inline-block; /* the default for span */
    padding: 1px;
    float: right;
    float: left;
    width: 67%;
    height: 166px;
}
#foot2
{
    display: inline-block;
    padding: 1px;
    float: right;
    overflow: visible;
    width: 260px;
    height: 166px;
}