/* PUBLIC & RESIDENTIAL
    Styles available throughout both public & residential websites */

p {
    text-indent:20pt; 
    font-family: "Trebuchet", Arial, sans-serif;
}

.flush {
   text-indent:0pt; }
.smital {
   font-style: italic; font-size: 80%; 
}
.rubric {
   color: #FF0000
}
.acro {
   font-family: "Copperplate Gothic"; 
  font-size: 0.9em;
      /* acronyms */
}
.ctr {
    text-align: center;
}

/* version = text at page bottom,
    giving the date the webpage was updated */
p.version {
  text-align: right;
  font-size: 0.7em;
}

/* used in captions? */
p.attribution {
  font-style: italic; 
  font-size: 0.8em;
}
p.signature {
     font-family: "Lucida Handwriting", "Viner Hand ITC"; 
}

.hangd {
  padding-left: 32px ;
  text-indent: -22px ;
} 
.hangd2 {
  padding-left: 54px ;
  text-indent: -22px ;
} 
.hangd3 {
  padding-left: 76px ;
  text-indent: -22px ;
} 
.hangd4 {
  padding-left: 98px ;
  text-indent: -22px ;
} 

/* NAVIGATION */

/* DIV FOR IFRAME DISPLAYING ANOTHER FILE  */
div.topbar {
    width:100%; height:230px; margin:0;
}
div.botbar {
    width:100%; height:60px; margin:0;
}

/* as edit pages, replaced 'barsixty' holding banner 
    & navigation with 'topbar' and 'barsixty' holding contact with 'botbar' */
div.barsixty {
    width:100%; height:160px; margin:0;
}

/* Top navigation bar, w3schools
     STYLE  */ 

iframe.nav {height: 230px;  
   border:0px; width:100%;  
}
div.nav {float: left;
 margin:0;
}

/* Style the links inside the navigation bar */
.nav a {
  float: left;
  background-color: #c26d00;
  color: #f2f2f2; 
  text-align: center;
  padding:1em; 
  text-decoration: none;
  font-size:0.9em; 
  border:1px solid; 
  line-height: 90%;
}

/* Change the color of links on hover */
.nav a:hover {
  background-color: #ffda85;
  color: black;
}

/* Add a color to the active/current link */
.nav a.active {
  background-color: #4CAF50;
  color: white;
}

.nav a span {
  display:none; 
}
.nav a:hover span {
  display:block;
  font-style: italic; 
  font-size: 0.8em;
  left:10em; 
  top:0; 
}


/* SIDEBAR  */
iframe.sidenav {border:0px; width:200px;  }
div.sidenav {
   float:left;width:190px; margin:0;
   padding-right:15px;padding-bottom:10px;
}
ul.sidenav {
   padding:0;
   margin:0;
   font-weight: bold; 
  position:relative; /* ADDED */
   }
li.sidenav {
  list-style-type:none;
  }

li.sidenav a, li.sidenav a:visited {
  display:block;
  width:15em;
  border:1px solid #D60000; 
  font-size:0.8em; 
  text-align:center; 
  text-decoration:none; 
  color:black;   
  margin:0 0 0.25em -0.5em; 
  padding:0.25em; 
  line-height: 90%;
  }

/* Change the color of links on hover */
.sidenav a:hover {
  background-color: #ffda85;
  color: black;
}
li.sidenav a span {
  display:none; 
}
li.sidenav a:hover span {
  display:block;
  font-style: italic; 
  font-size: 0.8em;
  left:10em; 
  top:0; 
}

/* NAVIGATION:  BREADCRUMBS */
div.breadcrumb {
    width:75%; height:55px margin:0;
}
iframe.breadcrumb {
   width:75%; border:0px;
   height:55px ;    }

 /* Style the list [W3schools] */
ul.breadcrumb {
    padding: 5px 5px;
    list-style: none;
}
/* Display list items side by side [W3schools]  */
ul.breadcrumb li {
    display: inline;
}
/* Add a slash symbol (/) before/behind each list item  [W3schools] */
ul.breadcrumb li+li:before {
    padding: 5px;
    color: black;
    content: "/\00a0";
}
/* Add a color to all links inside the list  [W3schools]  */
ul.breadcrumb li a {
    font-size: 75%; 
    color: #0275d8;
    text-decoration: none;
}

/* Add a color on mouse-over  [W3schools] */
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
} 


/* NAVIGATION:  BOTTOM BAR (CONTACT) */

div.bottombar {
  width:100%; 
  margin:0;
  background-color: #c26d00;
}
iframe.bottombar {
   width:100%; border:0px;
}

.bottombar a {
  color: #f2f2f2; 
}

ul.bottombar {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.bottombar li {
  float: left;
  color: #f2f2f2; 
  text-align: center;
  padding:1em; 
  text-decoration: none;
  font-size:0.9em; 
  line-height: 95%;
}

/* NAVIGATION:  BANNER */

div.banner {
    width:100%; height:110px margin:0;
}
iframe.banner {
   width:100%; border:0px;
   height:110px ;    
   frameborder="0";
   scrolling="no"
}
/* end of NAV styles */


h2.standout {
   background-color:blue; color:#ffffff;
}

/* Styles after this taken from Kay’s 2010 website draft.  */

body {
/*    background-color: honeydew; */
    font-size: 100%;
    font-family: "Verdana", "Helvetica", "Arial"; 
}
/*  Tempus Sans ITC in resident area */
h1 {font-family: "Papyrus", "Arial"; }
h2 {font-family: "Papyrus", "Arial"; }
h3 {font-family: "Papyrus", "Arial"; }
h4 {font-family: "Papyrus", "Arial"; }

h1 {
    color: #006400;
    text-align: center;
}

ul {
    list-style-type: none;
    font-family: "Trebuchet", Arial, sans-serif;
}
ul, ol {overflow: hidden;
   margin:0 0 1em 0;
   padding:0 0 0 5em;
   }
li, dl {
   font-family: "Verdana", "Helvetica", "Arial"
}
dt {font-weight: bold; }
dd { 
   margin-bottom: 0.5em; }
td {
   font-family: "Verdana", "Helvetica", "Arial"
}
div {
   font-family: "Verdana", "Helvetica", "Arial"; 
}


/* IMAGES */
div.imageR {float:right;padding-left:20px;padding-bottom:10px;}
div.imageL {float:left;padding-right:20px;padding-bottom:10px;}
div.im100 {width:100px;}
div.im125 {width:125px;}
div.im150 {width:150px;}
div.im175 {width:175px;}
div.im200 {width:200px;}
div.im225 {width:225px;}
div.im250 {width:250px;}
div.im275 {width:275px;}
div.im300 {width:300px;}
div.im325 {width:325px;}
div.im350 {width:350px;}
div.im375 {width:375px;}
div.im400 {width:400px;}
div.im500 {width:500px;}
div.caption {font-size: 90%; font-style: italic; text-align: center; }
div.credits {font-size: 50%; font-style: small-caps; text-align: right; }



/* ACCORDION [W3schools] */
/* Style the buttons that are used to open 
    and close the accordion panel on the links page */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    font-size: 1.5em;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active  
class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
}

/* end of ACCORDION styles */