html, body {
 margin: 0;
 padding: 0;
 background: #9999FF;
 font-size: 15px;
 text-align:center; 
 height: 100%;
 float:none;
 font-family:"Times New Roman",Georgia,Serif; 
 }


header, section, footer, aside, nav, main, article, figure, FIGCAPTION {
    display: block; 
}

#page-container
{ 
 max-width: 1350px;
 background: #ffffff;  
 border-bottom-width: 20px;
 border-top-width: 20px;
 border-right-width: 100px;
 border-left-width: 100px;
 border-style: solid;
 border-color: #9999FF;
 position: relative;
 min-height: 100%;
 text-align:center;
 float:none;
 margin:0 auto;
 overflow:hidden;/* without this the border would not go around the whole pg */
}

 
header
{
 background: #FFFFFF;
 color:#000000;
 height: auto;
 width: 70%;
 float: right;
 font-family: "Times New Roman", Times, serif;
 font-weight: bold;
 text-align: center;  
 border-bottom-width: 2px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 font-size: 3.0em;
}

h1.SiteTitle
{
font-size: 1.0em;
}

nav h1
{
font-size: .9em;
line-height:.2em;
}

nav h3
{
margin: 0;
font-size: 1.2em;
}

h1
{
margin: .4em;
font-size: .7em;
}

h2
{
font-size: 1.1em;
margin: .4em;
}

h3
{
font-size: .9em;
margin: .3em;
}


h4
{
font-size: .7em;
margin: .3em;
}

h5
{
font-size: .6em;
margin: .3em;
}

.MainImage
{
margin-top: 0px;
width:98%;
height:auto;
}


FIGURE, FIGCAPTION {
font-style: italic;
font-family: "Times New Roman", Times, serif;
font-size:1.4em;
margin: 0;
}

main
{
 background: #ffffff;
 color:#000000;
 height: auto;
 float: right;
 width: 66%;
 text-align: left; 
 padding-left: 2%;
 padding-top: 1%;
 padding-right: 2%;
 padding-bottom: 2%;
font-size:1.4em;
line-height:1.2em;
}


main a
{
text-decoration: underline; 
color: #0000cc;
font-weight: bold; 
} 

#image
{
 background: #ffffff;
 height: auto;
 width: 30%;
 float: left;
 text-align:center;  
 font-size: .6em; 
 }

#LeftSideBar
{
 background: #ffffff;
 height: auto;
 width: 30%;
 float: left;
 text-align:center;
 clear:left;   
 }

nav
{
 background: #ffffff;
 height: auto;
 width: 30%;
 float: left;
 text-align:center;   
 clear:left;
 color:#000000;
 font-size:1.8em; 
 font-family: "Times New Roman", Times, serif;
 font-weight: bold; 
 }

nav a:hover 
{   
background-color: #9999FF;   
text-decoration: none;

}

.button {
    display: block;
    width: 96%;
    height: auto;
    background: #DCDCDC;
    margin-right: 1%;
margin-left: 2%;
    padding-right: 1%;
    padding-top: 4%;
    margin-bottom: 2%;
    padding-bottom: 4%;
    text-align: center;    
    color:#000000;
    font-weight: bold;    
    text-decoration: none;
    font-size:.6em;
   border-width: 1px;
 border-style: solid;
 border-color: black;
}

footer
{
  background: #FFFFFF;
 color:#000000;
 height: auto;
 float: left;
 width: 100%;
 text-align: center; 
 clear:both;
 font-weight: bold;
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: #000000;
 border-bottom-width: 2px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 text-decoration: none;
 font-size:1.1em;
 text-decoration: underline;
 padding-bottom: 1%;
 padding-top: 2%;
}

footer a
{
color:#000000; 
text-decoration: none;
font-size: 1.8em;
}

footer a:hover 
{   
color: #191970
}

#InsertOne
{
 background: #ffffff;
 height:auto;
 width: 47%;
 float:right;
text-align:center;

}

#InsertThree
{
 background: #ffffff;
 height:auto;
 width: 100%;
 float:right;
text-align:center;
border-bottom-width: 20px;
border-top-width: 20px;
border-style: solid;
border-color: #ffffff;
}


#InsertTwo
{
 background: #ffffff;
 height:auto;
 width: 100%;
 float:right;
 text-align:center;
 border-bottom-width: 20px;
 border-top-width: 20px;
 border-style: solid;
 border-color: #ffffff;
}

.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000000;
	background: #9999FF;
	text-align: center;
	font-size:2.3em;
        height: auto;
	display: none;
        border-width-bottom: 10px;
 border-style: solid;
 border-color: #ffffff;
}

label { 
 line-height: 80px; /*Controls height of MENU button on mobile*/
}

   

/*Hide checkbox*/
input[type=checkbox]{
    display: none;    
    -webkit-appearance: button;
}


/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ nav{
    display: block;
    width: 100%;
}

/*Hide main when invisible checkbox is checked*/
input[type=checkbox]:checked ~ main{
    display: none;
   }

/*Hide main when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #image{
    display: none;
   }

   
/*Hide footer when invisible checkbox is checked*/
input[type=checkbox]:checked ~ footer{
    display: none;
   }


/* ---- 2nd Largest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 1185px)
{
#page-container
{  
border-right-width: 60px;
border-left-width: 60px;
}
}


/* ---- 3rd Largest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 1085px)
{
body {  
 font-size: .9em; 
 }
}

/* ---- 4th Largest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 1024px)
{
body {  
 font-size: .8em; 
 }
}


/* ---- 5th Largest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 925px)
{
body {  
 font-size: .75em; 
 }
#page-container
{  
border-right-width: 20px;
border-left-width: 20px;
}
}

/* ---- 6th Largest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 815px)
{
#page-container
{  
border-right-width: 10px;
border-left-width: 10px;
}

}

/* ----  Smallest Screen--------------------------------------------------------------------------- */
@media screen and (max-width : 620px)
{
.show-menu
{
display:block;
}

nav
{
display: none;
}

main
{ 
 width: 96%; /* there is 2% padding on left and right */
 }

header
{
 width: 100%;
 
 border-bottom-color: #ffffff;
} 

image
{
display: none;
}

#page-container
{  
border-width: 0px;

}


.button
{
font-size:.8em;

}

#LeftSideBar
{
 display: none;
 }

figure {
    display: none;
}


@media screen and (max-width : 520px)
{
header
{
 font-size:2.1em;
} 

}