/* SOCIAL NAVIGATION */

.sn1 a {
  width: 74px;
  height: 40px;  
  display: block;
  float:right;
  margin-top:1px;  /* line up with instagram 2020 */
}  
.sn1 a:hover {
  visibility: visible; 
}
.sn1 a span {
  background: url(/images/facebook.gif) no-repeat transparent;
  width: 74px;
  height: 40px;
    position: absolute;
}
.sn1 a:hover span {
  background: url(/images/facebook.gif) no-repeat transparent 0 -40px;
}


.sn2 a {
  width: 88px;
  height: 40px;  
  display: block;
  float:right;
  margin-top:1px;  /* line up with instagram 2020 */
}
.sn2 a:hover {
  visibility: visible; 
}
.sn2 a span {
  background: url(/images/twitter.gif) no-repeat transparent;
  width: 88px;
  height: 40px;
    position: absolute;
}
.sn2 a:hover span {
  background: url(/images/twitter.gif) no-repeat transparent 0 -40px;
}

.sn3 a {
  width: 99px;
  height: 40px;  
  display: block;
  float:right;
  margin-top:1px;  /* line up with instagram 2020 */
}  
.sn3 a:hover {
  visibility: visible;
}
.sn3 a span {
  background: url(/images/linked.gif) no-repeat transparent;
  width: 99px;
  height: 40px;
    position: absolute;
}
.sn3 a:hover span {
  background: url(/images/linked.gif) no-repeat transparent 0 -40px;
}


.sn4 a {
  width: 99px;
  height: 40px;  
  display: block;
  float:right;
  margin-top:1px;  /* line up with instagram 2020 */
}  
.sn4 a:hover {
  visibility: visible;
}
.sn4 a span {
  background: url(/images/YouTube.gif) no-repeat transparent;
  width: 99px;
  height: 40px;
    position: absolute;
}
.sn4 a:hover span {
  background: url(/images/YouTube.gif) no-repeat transparent 0 -40px;
}


.sn5 a {
  width: 99px;
  height: 40px;  
  display: block;
  float:right;
}  
.sn5 a:hover {
  visibility: visible;
}
.sn5 a span {
  background: url(/images/Instagram.gif) no-repeat transparent;
  width: 99px;
  height: 40px;
    position: absolute;
}
.sn5 a:hover span {
  background: url(/images/Instagram.gif) no-repeat transparent 0 -40px;
}



/* breadcrumb */
#breadcrumb {
  color: #999999;
  font-size: 0.9em;
  margin: 12px 0 0;
}


/* NAVIGATION */

.mn1 a {
  width: 72px;      /* change this to tweak menu width */
  height: 40px;  
  display: block;
  float:left;
}  
.mn1 a:hover {
  visibility: visible; 
}
.mn1 a span {
  background: url(/images/nav_home.gif) no-repeat transparent;
  width: 72px;
  height: 40px;
  position: absolute;
}
.mn1 a:hover span {
  background: url(/images/nav_home.gif) no-repeat transparent 0 -40px;
}

.mn5 a {
  width: 72px;      /* change this to tweak menu width */
  height: 40px;  
  display: block;
  float:left;
}  
.mn5 a:hover {
  visibility: visible;
}
.mn5 a span {
  background: url(/images/nav_about.gif) no-repeat transparent;
  width: 72px;
  height: 40px;
  position: absolute;
}
.mn5 a:hover span {
  background: url(/images/nav_about.gif) no-repeat transparent 0 -40px;
}


.mn2 a {
  width: 70px;
  height: 40px;  
  display: block;
  float:left;
}  
.mn2 a:hover {
  visibility: visible; 
}
.mn2 a span {
  background: url(/images/nav_tips.gif) no-repeat transparent;
  width: 70px;
  height: 40px;
    position: absolute;
}
.mn2 a:hover span {
  background: url(/images/nav_tips.gif) no-repeat transparent 0 -40px;
}
.mn2 li a {
  width: 170px;
}

.mn3 a {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
}  
.mn3 a:hover {
  visibility: visible; 
}
.mn3 a span {
  background: url(/images/nav_news.gif) no-repeat transparent;
  width: 74px;
  height: 40px;
    position: absolute;
}
.mn3 a:hover span {
  background: url(/images/nav_news.gif) no-repeat transparent 0 -40px;
}

.mn4 a {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
}  
.mn4 a:hover {
  visibility: visible; 
}
.mn4 a span {
  background: url(/images/nav_photos.gif) no-repeat transparent;
  width: 74px;
  height: 40px;
    position: absolute;
}
.mn4 a:hover span {
  background: url(/images/nav_photos.gif) no-repeat transparent 0 -40px;
}


/*
.mn5 a {
  width: 82px;
  height: 40px;  
  display: block;
  float:left;
}  
.mn5 a:hover {
  visibility: visible; 
}
.mn5 a span {
  background: url(/images/nav_charity.gif) no-repeat transparent;
  width: 82px;
  height: 40px;
    position: absolute;
}
.mn5 a:hover span {
  background: url(/images/nav_charity.gif) no-repeat transparent 0 -40px;
}

.mn6 a {
  width: 70px;
  height: 40px;  
  display: block;
  float:left;
}  
.mn6 a:hover {
  visibility: visible; 
}
.mn6 a span {
  background: url(/images/nav_news.gif) no-repeat transparent;
  width: 70px;
  height: 40px;
        position: absolute;
}
.mn6 a:hover span {
  background: url(/images/nav_news.gif) no-repeat transparent 0 -40px;
}

*/

/* ON STATES MAIN NAVIGATION */

body#home .mn1 {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_homeSel.gif) no-repeat transparent;
  text-indent:-99999px;
} 

body#about .mn5 {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_AboutSel.gif) no-repeat transparent;
  text-indent:-99999px;
}

body#tips .mn2 {
  width: 70px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_TipsSel.gif) no-repeat transparent;
  text-indent:-99999px; /* on state, makes submenu items visible! */
  z-index:1000;  /* submenu takes precedence over other content on webpage */
}

body#news .mn3 {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_NewsSel.gif) no-repeat transparent;
  text-indent:-99999px;
}

body#photos .mn4 {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_PhotosSel.gif) no-repeat transparent;
  text-indent:-99999px;
}


/* MENU: DROPDOWN/SUBMENU */

/* Basic elements to show hide dropdown menu here ... 
ul.mn li ul {
    display: none;
}
ul.mn li:hover > ul {
    display: block;
}
*/

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
/* menu heading css */
ul.mn li.menuHeading {
  float:left; 
  /* display:block; */
  background:#ccc; 
  position:relative;
  z-index:500; 
  margin:0 1px;
}

/* menu list items (submenu) */
ul.mn li.subject {
  float:left;
  /* display:block; */
  background:#E0E0E0;
  position:relative;
  z-index:500;
  border: .6px solid white;
  /* font-family: Tahoma, Geneva, sans-serif; */
  /* margin:0 1px; */
}


/* submenu, it's hidden by default */
/* this styles menu items under 'tips' menu heading for this website */
ul.mn ul {
  top:40px;  /* really important, pushes submenu below main menu */
  position:absolute;
  left:0;
  display:none; 
  margin:0 0 0 -1px; 
  padding:0; 
  list-style:none;
  font-size:1em;   /* control submenu font size form here */
  font-weight:bold; 
  font-family:Arial; /* Verdana */
  
  text-indent:1px;
  /*background-color:white;*/
}


ul.mn ul li {
  width:180px;
  float:left; 
  border-top:1px solid #fff;
  background-color:#D8DFEA;
}

/* display block will make the link fill the whole area of LI */
ul.mn ul a {                   /* this is the styling for the submenu items */
  display:block;  
  height:15px;
  padding: 5px 5px 5px 12px;   /* submenu items padding */
  color:#1E1A4B;
  text-decoration:none;

}

ul.mn ul a:hover {          /* mouse over submenu items */
  text-decoration:none;
  /*color:#DF0101;         red */
  /*background-color:#EEEEEE;*/
  color:#DF0101;
  width:188px;
}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html ul.mn ul {
  margin:0 0 0 -2px;
}


/*
.mn1Sel {
  width: 74px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_homeSel.gif) no-repeat transparent;
  text-indent:-99999px;
} 


.mn2Sel {
  width: 62px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_librarySel.gif) no-repeat transparent;
  text-indent:-99999px;
}

.mn3Sel {
  width: 73px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_newsSel.gif) no-repeat transparent;
  text-indent:-99999px;
}

.mn4Sel {
  width: 186px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_photoSel.gif) no-repeat transparent;
  text-indent:-99999px;
}


/*
.mn5Sel {
  width: 70px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_charitySel.gif) no-repeat transparent;
  text-indent:-99999px;
}  

.mn6Sel {
  width: 70px;
  height: 40px;  
  display: block;
  float:left;
  background: url(/images/nav_newsSel.gif) no-repeat transparent;
  text-indent:-99999px;
}  

*/

















































































































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */