* {
  box-sizing: border-box;
}

body {font-family: Arial; margin:.5%;}

.clear{clear:both;}
.floatr{float:right}
.floatl{float:left}
a{text-decoration:none;}
img{max-width:100%; height:auto;}
li{}

p, h1, h2, h3{word-wrap: break-word; color:ediumblue;}

#topheader{border:solid; border-color:red; border-bottom-style:none; padding:10px; height:150px; overflow: hidden; min-width:200px;}

#loginstatus{float:right; overflow:auto; width:200px; order:solid;  order-color:red; max-width:100%;}

/* Add a black background color to the top navigation */
.topnav {
  background-color:Blue;
  overflow: hidden;
  min-width:200px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color:White;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: navy;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/****THE FOLLOWING IS FOR DROPDOWN MENU****/

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: Blue;
  font-family: inherit;
  margin-top:0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  /*background-color:Blue;*/
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color:White;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index:1;
  
}

/* Add a  background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
 background-color:navy;
  color: Red;
z-index:1;
}

/* Add a  background to dropdown links on hover */
.dropdown-content a:hover {
  background-color:navy;
  color: red;
  tex-indent:15px;
}

.dropdown:hover .dropdown-content {
  display: block;
  tex-indent:15px;
  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


.dropdown:hover .dropdown-content {
  display: block;
  text-align:center;
}

/***THE FOLLOWING IS FOR MEGA MENU ****/

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 100%;
  padding: 5px;
  background-color:red;
  height: 200px;
  text-align:center;
}

.column a {
  float: none;
  color: blue;
  padding: 7px;
  text-decoration: none;
  display: block;
  tex-align:center;
  }

.column li {
  float: none;
  display:block;
  color: green;
  padding: 7px;
  list-style-type:square;
  display: block;
  text-align:left;
  tex-indent:6px;
}


.column a:hover {
  background-color:navy;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}


     
/***put the following in the asp content place holder tag of the content pages veritical 
division of the main content holder from left to right***/
#column1{
    float: left;
    margin: .5%;
    width: 55%;
    overflow: auto;
    order: solid;
    border-color: red;
    padding:10px 30px 10px 10px;
    min-width:200px;
    
}
 #column2{
    float: left;
    margin: .5%;
    width: 43%;
    overflow: auto;
    border: solid;
    border-color: red;
    border-top-style:dotted;
    min-width:200px;
    background-color:Blue;
    padding:5px;
    
}

/* Add a card effect for articles */
.card {background-color: white;padding: 10px; margin:10px; max-height:330px; 
}
.card2 {background-color: white; padding:10PX; margin:10px; max-height:165px; text-align:center; text-decoration:none;
}
.card3 {background-color: white; padding:10PX; margin:10px; max-height:165px; text-align:center;
}
/* style content of card */
.socialm{}
   
/* Clear floats after the columns */
.row:after {content: ""; display: table; clear: both;}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  #column1, #column2 { width: 100%;padding:0;}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
   topnav a {float: none; width: 100%;}
}

/* the following is for footer*******/

#footer {
    padding: 20px;
    text-align: center;
    background: BLUE;
    margin: .5%;
    border: solid;
    border-color: Red;
    min-width:200px;
    color:White;
   
    
}

/* Place the navbar at the bottom of the page, and make it stick */
.footernavbar {
  background-color: blue;
  overflow:hidden;
  
}

/* Style the links inside the navigation bar */
.footernavbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.footernavbar a:hover {
  background-color: navy;
  color: red;
}

/* Add a background color to the active link */
.footernavbar a.active {
  background-color: blue;
  color: white;
}

/* Hide the link that should open and close the navbar on small screens */
.footernavbar .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
  .footernavbar a:not(:first-child) {display: none;}
  .footernavbar a.icon {
    float: right; /*important for the icon to be on the right side*/
    display: block;/*important for the the icon to apear*/
    }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .footernavbar.responsive {position: relative;}
  .footernavbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  }
  .footernavbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }








/* Footer *
#footer {
    padding: 20px;
    text-align: center;
    background: BLUE;
    margin: .5%;
    border: solid;
    border-color: Red;
    min-width:200px;
    color:White;
   
    
}

.navfooter {
  overflow: hidden;
  background-color: Blue;  
 
  bottom: 0;
  width: 100%;
}

.navfooter a {
  float: left;
  display: block;
  color: White;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navfooter a:hover {
  background-color: navy;
  color: Red;
}

.navfooter a.active {
  background-color: Blue;
  color: white;
}

/*
.navfooter .iconf {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) *
@media screen and (max-width: 600px) {
  .navfooter a:not(:first-child) {display: block;}
  .navfooter a.iconf {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) *
@media screen and (max-width: 600px) {
  .navfooter.responsive a.iconf {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .navfooter.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}
/*

/*THE ABOVE CODE IS FOR FOOTER */



/* BELOW INFO MISC CODE not used here
----------------------------------------------------------*
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
 
}


/*

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-colo: #333;
  float:right;
}

li {display:inline-block
    }
  
li a {
  display: inline-block;
  color: Blue;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 180px;
  box-shadw: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
   overflow:auto;
  
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}







/*

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}
.editpage
{
    position: absolute;
    left: 38%;
}
/*The CSS3 specification includes a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset html font size: */
/*
html { ont-size:100%; }

/*Once done, you can define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 
*/