@charset "utf-8";
/* CSS Document */

/* GRID LABELS */
.header 		{ grid-area: header; }
.banner 		{ grid-area: banner; width:100%; background-color:#444; height: 150px; }
.mainbody 		{ grid-area: main; padding:10px 20px; overflow: hidden; /*background-color: white; */}
.rightcontent 	{ grid-area: right; padding: 15px 20px; color: white; }
.footer 		{ grid-area: footer;}

.logo 		{ grid-area: logo; }
.logotitle 	{ grid-area: logotitle; }
.num 		{ grid-area: num; }
.navigation { grid-area: navigation; }
.toggle 	{ grid-area: toggle; }

/* Grid Containers */
.grid-container {
  display: grid;
   grid-template-areas:
		'header header header header header header'
		'banner banner banner banner banner banner'
		'main main main main main main'
		'right right right right right right'
		'footer footer footer footer footer footer';
  grid-template-rows: auto auto 1fr auto;
  min-height:100%;
}
/* Bkg Colors */
.header, .rightcontent, .footer {
    background-color: #444;
}

/*************** HEADER ****************/
.header {
    display: grid;
    grid-template-areas: 'logo logotitle num navigation toggle';
    grid-template-columns: auto auto 1fr auto; 
    height: 50px;
	padding: 10px;
	text-align: center;
}
/* Logo */
.logo img {
    position: relative;
    top: -4px;
	padding-right: 4px;
	z-index: 1;
}
/* Number */
.num a {
    font-size: 1.2em;
    font-weight: 400;position: relative; z-index: 2;
}
/* Navigation */
.navigation { display: inline;  }
.toggle 	{ display: none; }
nav ul 		{ display: inline-flex; }
.menu li 	{ padding: 0px 10px; }
.menu li a {
    color: white;
    opacity: .8;
}
.menu li a:hover {
	color: white;
	opacity: .99;
}
.item.active { margin: 5px 10px; } /* Active toggled menu state */
ul.menu li.schBtn {
    border-radius: 4px;
    padding: 2px 10px;
    background-color: #019299;
}
/***************************************/

/*********** MEDIA QUERIES ************/

@media (max-width: 1000px) {
	/* Header */
	.header { 
		display: grid; 
		grid-template-areas: 
		'logo num toggle'
		'navigation navigation navigation ';
		grid-template-columns: auto 1fr auto;
		height: 50px;
		padding: 10px;
		/*align-items: center;*/
	}
	
	/* Logo / nav menu item */
	.item, .logotitle {
    	display: none;
	}
	/* Navigation */
	nav ul {
		display: block;
		padding:10px;
		
	}
	.navigation { 
		position: relative; 
		display:block; 
		background-color: #444;
    	width: 100%;
    	top: -30px;
	}
	li.schBtn { margin-bottom: 10px; }
	.toggle { display:block; margin-right:10px; position: relative; }
}
@media (min-width: 1200px) {
	/* Grid Container */
.grid-container {
    grid-template-areas:
        'header header header header header header'
        'banner banner banner banner banner banner'
        'main main main main right right'
        'footer footer footer footer right right';
	}
	.rightcontent {
    	border-left: 1px solid #CCC;
		max-width: 400px;
	}
}