/*--- DBY 25 ---*/
html  {
  font-size: 100%;
}

body {	 
  margin: 0;
  background-color: #036; 
  /*  ---------------------------------------------------------------------- 
  STRANGE: some images don't show when file names are two words with a space in between them!!! 

  background-image: url(../Images/Stars Med.jpg);	 Does NOT Work  
  background-image: url(../Images/Stars.jpg);	 		  Works but too long 
  background-image: url(../Images/Stars Shorter.jpg);	Does NOT Work 	
  background-image: url(../Images/StarsShorter.jpg);        Works but too short	
  					 
  --------------------------------------------------------------------------*/
  background-image: url(../Images/StarsMed.jpg);
  background-repeat: repeat-y;
  
  font-family: Arial, Helvetica, Verdana, Lucida, san-serif;
}  

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 16%;
  height: 800px;  
  /*height: auto;  auto and percent don't work as they adjust to amount of text/graphics, not desired page height  */
  
  position: fixed;
  /*  height: 100%;  */
  overflow: auto;
  
  filter:	alpha(opacity=70); 	
  opacity:	0.7; 		   		
}

ul.sidenav li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
  font-size:1rem;
  border-radius: 40%;		/*  rounded button links  */
}
/*--------------my added code- LoVe HAte   ---------------- */ 
ul.sidenav li a:link		{color:#f39; background-color:	#aaa;}   /* red text, gray bkg        1 */
ul.sidenav li a:visited		{color:#39f; background-color:	#ff6;}   /* blue text, yellow bkg     4	*/
ul.sidenav li a:hover		{color:#fff; background-color:	#96c;}   /* white text, purple bkg    2 */
ul.sidenav li a:active		{color:#ff6; background-color:	#f03;}   /* yellow text, red bkg      3 */


.content {
  margin-left: 17%;
  padding: 1px 16px;
  height: 800px;  				
  /*height: auto;  auto and percent don't work as they adjust to amount of text/graphics, not desired page height  */
  color:  #ff9;
  background-color: #036;
  text-align: justify;
  font-size: 1.25rem;
}

.title {			
  color:  #dcf;
  text-align: center;
  font-family: script;
  font-size: 5rem;  
}						

.ms {			/* on About Y page */	
  margin: auto;	
  text-align: center;
  background-color:  #c00;
}

.graphic {				
  width:  30%;
  height:  30%;
  margin: auto;	
}

.footer {				
  margin: auto;	
  text-align: center;
}

/* --------------my added code- LoVe HAte for footer  ---------------- */ 
.footer :link		{color:#c00;)   /* red     1 */
.footer :visited	{color:#ff6);)  /* blue   4 */
.footer :hover		{color:#fff;)   /* white   2 */
.footer :active		{color:#ff6;)   /* yellow  3 */

@media(max-width: 900px) {
  .content  {
    margin-left: 0;
	font-size: .85rem;
  }
  ul.sidenav {
      /*-----  display: none;  Background image, StarsMed does not show  ----*/
	background-color: #036;
  }
 
  ul.sidenav li a {
    float: left;
    padding: 15px;
	width: auto;
    height: auto;
	font-size: .85rem;
    position: relative;
  }   
}

@media(max-width: 400px) {
  .content  {
    margin-left: 0;
    font-size: .55rem;
  }  	
	
  ul.sidenav {
    display: none;    /*-----  Background image, StarsMed does not show  ----*/
	background-color: #036;
  }	
  ul.sidenav li a {
    text-align: center;
    float: none;
	font-size: .55rem;
  }
}