/*<!-- Web page authored by Fred Vasenius http://www.fredspage.com -->*/

body {
    
	background-color: white;
	margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
	font-family: sans-serif;
    font-size: 20px;
	color: ;
    
    
	}

/*text on a background*/
.withBackground, .withBackground  a:link {color:white;}
	
.withBackground a:visited{
    color:#fafafa;
}
	
.withBackground a:hover, a:hover{color: red}
/*Header Styling*/	
#head > h1 {
    position: absolute;
    top: -1vw;
    left: 3vw;
    width: 77vw;
    float: left;
    font-size: 5vw;
        opacity:1
}
#head > h2 {
    position: absolute;
    top: 30vw;
    left: 3vw;
    width: 87vw;
    float: left;
    font-size: 3.5vw;
    opacity:.75;
}
#head > p {
    position: absolute;
    top: 20vw;
    left: 75vw;
    width: 20vw;
    float: left;
    font-size: 2vw;
    opacity:.75;
	fill: white;
	stroke-width: .5;
    stroke: white;
}
#head { 
    margin-top: 0%;
/*    margin-width: 0px auto;*/
    position: relative;
    width: 100vw;
    height: 39vw;
    display: block;
    background-color: lightgray;
}
#head > img {
    width: 100vw;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
}


/*menubar styling*/
#menuBar {
    background-color: #60647A;
    width:100vw;
    height: 12vw;
    margin: 0 auto;
/*    text-align: center;*/
    display: table;
}
#menubar.nav{
    border:1px solid #ccc;
    border-width:1px;
    list-style:none;
    margin: 0 auto;
    padding:0;
    text-align:center;
    font-size: 5vw;
    
}
.nav li{
    display:inline-block;
    font-size: 4vw;
    margin-left: 1vw;
    padding: 0vw;
    text-align: center;
    width: 19vw;
    list-style-type: none;
/*    width: 2vw;*/
    
}
.nav a{
    display:inline;
    padding:10px;
       
}
/*sidebar or Primary Content Navigation*/
/*Special coloring*/
a:link .red {
    color:#B50037;
}
a:visited .red {
    color:#B50037;
}

	#sideBar {
        display: block;
		border-width: 0vw;
		border-style: solid;
        border-color: blue;
        margin: auto;
        width: 100vw;
/*        height: 67vw;*/
        text-align: center;
        padding-bottom: 3vw;
		}
#sideBar > div {
    background-color: gray;
    position:relative;
    height: 90.66vw;
    width: 90.66vw;
    margin: 3vw auto;
    border-width: thick;
    border-color: purple;
    border-radius: 20px;
    overflow:hidden;
/*    float: left;*/
}
#sideBar img {
   height: 90.66vw;
    width: 90.66vw;
}
.portal > h2 {
    position:absolute; 
    top: 15vw;
    left: 8vw;
    width: 75vw;
    height: 60vw;
    font-size: 7.5vw;
}

/*btf or below the fold*/

#btf{
    margin: 5vw;
    width: 90vw;
    position:absolute;
        
}
#btf div{
    display: inline-block;
    width:vw;
/*    background-color:lightgray;*/
    border: 10px solid #b4c2d9;
    padding: 2vw;
}
#btf img {
    width: 80vw;
}
#btf .icon {
        width:1em;
    height: 1em;

}
#btf iframe{
    width: 80vw;
}

/* For screens 600px wide or greater*/
@media screen and (min-width: 450px) {
    body {}
    
    #menuBar {
/*    background-color: #60647A;*/
    width:100vw;
    height: 5vw;
    margin: 0 auto;
    text-align: center;
        display:inline-table}
    
    #sideBar {
        position: relative;
    }
    #sideBar > div{
        display:inline-block;
        width:30vw;
        height:30vw;
        margin:1vw;
        top: 2.5vw;
    }
    #sideBar img {
   height: 30vw;
    width: 30vw;
    }
    .portal > h2 {
    position:absolute; 
    top: 4vw;
    left: 2.5vw;
    width: 25vw;
    height: 20vw;
    font-size: 2.5vw;
    }
    
/*    Navigation Bar*/
    .nav li{
    position: relative;
        left: -2.5vw;
    display:inline-block;
    width: 20vw;
    color: white;
    font-size: 1.2em;
    }
/*    Below the fold*/
    #btf {
        /*display: inline-block;*/
	display: block;
        position: absolute;
/*        margin: 5 auto;*/
        
    }
/*  Keep h2 from overflowing  columns*/
    #btf h2 {
        font-size: 1.1em
    }
    #btf > div{
    vertical-align: top;
        float: left;
    display: inline-block;
    width:22vw;
        top: 1vw;
    }
    #btf img, #btf iframe{
        width: 22vw;
    }
    
}
/* For screens 600px wide or greater*/
@media screen and (min-width: 740px){
    #btf h2 {
        font-size: 1.5em
    }
}