/* CSS Document */
body {
  background:#EEEEE7;
  margin:10px 0;
  padding:0px 5px 15px 10px;
  font:small/1.6em Verdana, Arial, Helvetica, sans-serif;
  text-align:center;
  color:#333;
  }

h3  {
	
	color: #f059a0;
	font-size: small;
	font-weight: bolder;
	font-style: normal;
}

h4  {
	
	color: #f059a0;
	font-size: small;
	font-weight: bold;
	font-style: normal;
}

h5  {
	
	color: #f059a0;
	font-size:smaller;
	font-weight: bold;
	font-style: normal;
	padding:0;
	margin: 2px;
	text-align:center;
}
.tiny {
	font-size:9px ;
}	
/*stop WinIE6 from calculating width of
italicized text twice, thereby wrecking layout
----------------------------------------------- */

* html em {
  font-style: normal;
  font-weight: bold;
  }


/* Page
----------------------------------------------- */
#page {
  background:#fff url("images/pg_topright.gif") no-repeat right top;
  margin:0 auto;
  padding-top:15px;
  width:755px;
  text-align:left;
  }
#pagea {
  background:url("images/pg_right.gif") repeat-y right top;
  width:755px;
  }
#pageb {
  background:url("images/pg_bot.gif") no-repeat right bottom;
  padding:0 20px 20px 15px;
  width:720px;
  }
  
/* Header
----------------------------------------------- */  
  #header {
  float:left;
  width:720px;
  padding-bottom:5px;
  border: 0;
  }
  
  #header a {
  border-width:0;
  }

a img {
  border-width:0;

}
h1 a, h2 a, h3 a, h4 a {
  border-width:0;
  }


/* Nav
----------------------------------------------- */
/* Nav Images
----------------------------------------------- */


#nav {
 display:none;
  }

#nav ul {
  display:none;
  }
#nav li {
  float:left;
  margin:0;
  padding:0;
  background-image:none;
  line-height:normal;
  text-indent:0;
  }
#nav li a, #nav li strong {
 background-repeat:no-repeat;
  background-position:0 0;
  display:block;
  float:left;
  height:36px;
  /* Get the text strings off the screen */
  text-indent:-10000px;
  }
/* nav buttons are 3 images stacked upon each other - each 36px high  - navigator just slides them up and donw - very slick!*/
#nav li strong {
  background-position:0 -36px;
  }
#nav li a:hover {
  background-position:0 -72px;
  }
  
  
#nav ul {
/*  padding:0 71px;  took out 71 for cpac*/
  padding:0;
  
  }
  
/* change the widths to match the width of the button grapageheadic */  
#nav1 a, #nav1 strong {
  background:url("images/btnMission.gif");
  width:80px;
  }
#nav2 a, #nav2 strong {
  background:url("images/btnAbout.gif");
  width:80px;
  }
#nav3 a, #nav3 strong {
  background:url("images/btnImportance.gif");
  width:80px;
  }
#nav4 a, #nav4 strong {
  background:url("images/btnDirectors.gif");
  width:80px;
  }
#nav5 a, #nav5 strong {
  background:url("images/btnTeachers.gif");
  width:80px;
  }
#nav6 a, #nav6 strong {
  background:url("images/btnClass.gif");
  width:80px;
  }
#nav7 a, #nav7 strong {
  background:url("images/btnCalendar.gif");
  width:80px;
  }  

#nav8 a, #nav7 strong {
  background:url("images/btnAnnounce.gif");
  width:80px;
  }  
#nav9 a, #nav7 strong {
  background:url("images/btnContact.gif");
  width:80px;
  }  
  




/* Footer
----------------------------------------------- */
#footer {
  background:#f059a0 url("images/bottomcorners.gif") no-repeat left bottom;
  clear:both;
  width:720px;
  border-top:10px solid #fff;
  font-size:85%;
  line-height:3.2em;
  color:#dee;
  text-align:center;
  }


#photobox {
	display:none;
}

#photobox a {
	color:#f059a0;
	text-decoration: none;
	
} 
#bigphotobox {
	
	display:none;
}

#julietbox {
	
	display:none;
}

#ballerina {

	display:none;

.opal  {
	
	color: #800080;
	font-size: small;
	font-weight: bolder;
	font-style: italic;
	text-align:left;
}

.sapphire  {
	
	color: #000080;
	font-size: small;
	font-weight: bolder;
	font-style:italic;
    text-align:left;
	
}

.ruby  {
	
	color: #800000;
	font-size: small;
	font-weight: bolder;
	font-style:italic;
	text-align:left;

}

.emerald  {
	
	color: #008000;
	font-size: small;
	font-weight: bolder;
	font-style:italic;
    text-align:left;
	
}

.black  {
	
	color: #000000;
	font-size: small;
	font-weight: bolder;
	font-style:italic;
    text-align:left;
	
}
 .giant {
	color: #000000;
	font-size: 48px;
	font-weight: bolder;
	font-style:italic;
    text-align:left;

}