/* CSS Document */
body {font-size: 16px;}
h1{font: 1.3em Arial, sans-serif; color: #195896;}
h2{font: 1.2em Arial, sans-serif; color: #195896;}
h3{font: 1.1em Arial, sans-serif; color: #195896;}
h4{font: 1em Arial, sans-serif; color: #195896;}
.SiteMapCourse{font: bold 1.1em Arial; margin-bottom: 0.05%; border-bottom:#d8d8d8 1px solid;}
.SubjectSeparator{width:auto; margin-bottom:1px; font: bold 1.1em;}
.font2{font: 1em Arial, sans-serif;	color: black;}
.font3{font: 1.1em Arial, sans-serif; color: black;}
.hbm{font: 1.1em Arial, sans-serif; color: #195896;}
.hbm1{font: 1.2em Arial, sans-serif; color: #195896;}
.hbm2{font: 1.3em Arial, sans-serif; color: #195896;}
.hbm3{font: 1.5em Arial, sans-serif; color: #195896;}
/*  ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- */
 #wrapper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto; 
	grid-gap: 1px; max-width: 768px;
	grid-template-areas: 
	"logo logo logo logo logo"
	"nav nav nav nav nav"
	"search search search search search"
	"section section section section section"
	"section section section section section"
	"footer footer footer footer footer"; 
}
#logo{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	font: 1.5em Arial, Sans-serif; color:#195896; 
	text-shadow:2px 2px 2px 2px #999;	
	text-decoration:  none;
	grid-area: logo;
}
/*  ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- */
#logo a:link{font: 1.5em Arial; color: #195896; text-decoration: none;}
#logo a:visited{font: 1.5em Arial; color: #195897; text-decoration: none;}
#logo a:hover{font: 1.5em Arial; color: #44C806;  text-decoration: underline;}
/* ----- swamp sitemaps ----- */
#sitemap{display: none;}
/* For mobile devices (viewport width less than or equal to 768px) */
/* @media screen and (max-width: 768px) { */
#mobileLook { display: contents;  }
#desktopLook {display: none; }
/*} */
nav{
	display: grid;	
	grid-template-columns: auto; 
	align-items: stretch; background-color: navy; color: white;
	grid-gap: 0 px; padding: 0.1em;
	grid-area: nav;
} 
nav div{
	display: block;	
	font: 1.3em Arial, sans-serif; color: white;
	text-align: center; grid-gap: 1px; 
	border: 1px solid white; border-radius:  5px;
	height: auto;
	text-decoration: none;
}
nav div a{
	display: block;
	color: white; padding: 3px;
	text-decoration: none;
}
/*  ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- DispersedNet ----- ----- [Mobile] ----- ----- */
nav div a:hover{
	display: block;
	background-color: #757575; color: #9BF4F8;
	text-decoration: underline;
}	
/* ----- search goes here -- */
.search{display:grid; 
	grid-template-columns: repeat(1, 5fr); 
	grid-area: search;
}
section {
	display: grid;
	font: 1em Arial, sans-serif; color:black;
	min-height: 50%; height: 75%; max-height: auto; 
	grid-area: section;
}
section a:link{font: 1em Arial; color: #184785; text-decoration: none;}
section a:visited{font: 1em Arial; color:#184685;text-decoration: none; }
section a:hover{font: 1em Arial; color: #00FF00; text-decoration: underline;}
footer {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    justify-content: flex-start;
    font: 1.4em Arial, Sans-serif; color: blue; 
    border-top: 1px solid black; 
    height: auto;
    grid-area: footer;
}
footer div a:link, footer div a:visited {font: 1.2em Arial, Sans-serif;  color: blue;  text-decoration: none;}
footer div a:hover { color: lime;  text-decoration: none;}
/* ----- ----- DispersedNet  ----- -----  (Desktop)  ----- -----  DispersedNet ----- ----- (Desktop )  ----- -----  */
/* @media only screen and (min-width:763px) {*/
@media screen and (min-width:768px) {
 #wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	margin: 0px; grid-gap: 1px;	
	box-sizing: border-box;
	max-width: 99%;
	grid-template-areas: 
	"logo logo logo logo logo sitemap"
	"nav nav nav nav nav nav"
	"search search search search search search"
	"section section section section section section"
	"section section section section section section"
	"footer footer footer footer footer footer"; 
}
#logo{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	background-color: aliceblue; color:#195896; 
	font: 1.9em Arial, Sans-serif;
	text-shadow:2px 2px 2px 2px #999;	
	text-decoration:  none;
	grid-area: logo;
}
#logo a:link{font: Arial; color: #195896; text-decoration: none;}
#logo a:visited{font:Arial; color: #195897; text-decoration: none; }
#logo a:hover{font: Arial; color: #44C806;  text-decoration: underline;}
/* For desktop devices (viewport width greater than 768px)  @media screen and (min-width: 769px) {*/
#mobileLook {display: none; }
#desktopLook {display: contents;}
#sitemap{
	display: grid; 
	background-color: aliceblue;
	justify-content: space-around; 
	grid-area: sitemap;
}
#sitemap ul {padding:0.5em; margin: 0.5em; font:1em Arial; list-style-type: none; }
#sitemap li a{padding: 0.5em; margin-right: 0px; border: 1px solid #778; color: #2d2b2b; 
background: white url(theme/media/bluetab.gif) top left repeat-x; text-decoration: none;}
/* ----- ----- DispersedNet  ----- -----  (Desktop)  ----- -----  DispersedNet ----- ----- (Desktop )  ----- -----  */
nav{
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	justify-content: center;
	background-color: #EAEAEA ;
	padding: 0.1em;
	grid-area: nav;
} 
/* ----- ----- DispersedNet  ----- -----  (Desktop)  ----- -----  DispersedNet ----- ----- (Desktop )  ----- -----  */
nav div{
	display: block;	
	font: 1.3em Arial, sans-serif; color: black;
	grid-gap: 1px; border: 1px solid blue;
	border-radius:  5px; padding: 0px;
	height: auto;
	text-decoration: none;
}
nav div a{
	display: block;	
	color: black; padding: 5px;
	text-decoration: none;
}
/* ----- ----- DispersedNet  ----- -----  (Desktop)  ----- -----  DispersedNet ----- ----- (Desktop )  ----- -----  */
nav div a:hover{
	background-color: #757575; color: #9BF4F8;
	font: Arial, sans-serif; 
	text-decoration: underline;	
}	
.search{display:grid; 
	grid-template-columns: repeat(1, 6fr); 
	grid-area: search;
}
section {
	display: grid;
	min-height: 50%;
	height: 75%;
	max-height: auto;
	grid-area: section;
}
section div{ background-color: transparent; font: 1.1em Arial;	margin:  0px; }
section a:link{font: 1.1em Arial; color: #184785; text-decoration: none;}
section a:visited{font: 1.1em Arial; color:#184685; text-decoration: none; }
section a:hover{font: 1.1em Arial; color: #00FF00;  text-decoration: underline;}
footer a{display: block; font: 1.1em Arial ;padding: 3px;text-decoration: none; color: navy;}
footer a:hover {background-color: #EAEAEA;color: #06D4F5 ; text-decoration: underline;}
/* Closing brace for responsive design*/
}