BODY { 
	background-color: #ccccff;
	font-family: garamond, "times new roman", serif;
	color: #330099;
	font-size: 16pt;
	padding: 10px;
}

A:link.onwhite {
	color: #ff00cc;
}

A:link.nav {
	color: #9999ff;
	font-weight: regular;
}

A:visited.nav {
	color: #9999ff;
	font-weight: regular;
}

A:visited.onwhite {
	color: #aa0099;
}

A:link {
	color: #ffffff; 
	font-weight: bold; 
	font-family: arial, sans-serif;
}

A:visited {
	color: #ddddff; 
	font-weight: bold; 
	font-family: arial, sans-serif 
}

.nav {
	font-size: 80%;
	text-align: right;
}

.sidebar {
	color: #222222;
	font-size: 100%;
	text-align: center;
	bordercolor: #ffffff
}

.info {
	background-color: #ffffff;
}

.bold {
	font-size: 110%;
	font-weight: bold;
	color: #444477;
}

.head1 {
	font-weight: bold;
	font-size: 140%;
	text-decoration: underline;
}

.new {
	font-weight: bold;
	font-size: 80%;
	color: #669900;
}

.price {
	font-weight: bold;
	font-size: 130%;
	color: #00aa33;
}

DIV.logo {
	position: absolute;
	margin-top: 25px;
	margin-left: 70px;
	width: 260px;
	z-index: 1;
}

DIV.box0 {
	float: left;
	position: absolute;
	top: 60px;
	right: 5em;
	width: 40%;
	padding: 10px;
	background-color: #CCFFCC;
	text-align: left;
	z-index: 2;
}

DIV.box1 {
	float: left;
	position: absolute;
	top: 100px;
	right: 1em;
	width: 20%; /*was 200px */
	padding: 20px;
	background-color: #FFFFCC;
	border: dotted #330099;
	text-align: center;
	z-index: 3;
}

DIV.box2 {
	float: right; 
	position: absolute; 
	top: 225px; 
	right: 5em;
	width: 30%;
	padding: 10px;
	background-color: #CCFFFF;
	border: double black;
	text-align: center;
	z-index: 5;
}

DIV.box3 {
	float: right;
	position: absolute;
	top: 400px;
	right: 1em;
	width: 30%;
	padding: 3em 1em;
	background-color: #CCFFCC;
	text-align: center;
	z-index: 4;
}

DIV.navbar {
	float: left;
	position: absolute;
	top: 200px;
	width: 55%;
	background: #CCCCFF;
	padding-left: 1em;
	padding-right: 4em;
	padding-bottom: 2em;
	padding-top: .5em;
}
#home, #classes, #events, #contact {color: #330099}

div.tabs {  min-height: 40em;		/* No height: can grow if :target doesn't work */  position: relative;		/* Establish a containing block */  line-height: 1;		/* Easier to calculate with */  z-index: 0
}			/* So that we can put other things behind */

div.tabs > div {
	display: inline;
}
div.tabs > div > a {  background: #CCCCFF;		/* Active tabs are light gray */
	color: #330099;
	font-size: 70%;
  padding: 0.45em;		/* Some breathing space */  border-bottom: 0.95em solid white;
} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {  border-bottom: none;		/* Make the bottom border disappear */
	background: #CCCCFF;}		/* Inactive tabs are white */

div.tabs > div:target > a,	/* Apply to the targeted item or... */:target #home > a {		/* ... to the default item */  background: white;
}		/* Active tab is light gray */

div.tabs > div > div {  background: white;		/* Light gray */  z-index: -2;			/* Behind, because the borders overlap */  left: 0; top: 2em;		/* The top needs some calculation... */  bottom: 0; right: 1em;		/* Other sides flush with containing block */  overflow: auto;		/* Scroll bar if needed */  padding-top: 0.5em;		/* Looks better */
	padding-left: 0.5em;
	padding-right: 2em;}	
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */  position: absolute }		/* All these DIVs overlap */div.tabs > div:target > div, :target #default2 > div {  position: absolute;		/* All these DIVs overlap */  z-index: -1}			/* Raise it above the others */

DIV.main {
	float: left;
	position: absolute;
	top: 200px;
	bottom: 20px;
	width: 50%;
	background-color: white;
	padding: 5px;
}

DIV.footer {
	position: absolute;
	top: 95%;
	font-size: 60%;
}

.title {
	font-weight: bold;
	font-family: arial, sans-serif;
	color: #006666;
}

.heading {
	color: #003333;
	font-size: 87%;
}

.emphs {
	color:#009999;
	font-size: 100%;
	font-weight: bold;
}

.note {
	color: #003333;
	font-size: 69%;
}