body {
	font-family: "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
	background: #6CF url(../i/bkgnd.jpg) 100% 0 no-repeat fixed;
	text-align: center; 
	color: #000;
	font-size:100%;
	line-height:1.4em;
	margin:0; padding:0;
}

a { color: #03F; text-decoration: none; }
a:hover { color: #02D; text-decoration: underline; }

p, li   { font-size: 100%; line-height:1.3em; text-align: justify; padding: 0; margin: 0 0 10px 0;}
h1 { font-size: 140%; line-height:1.4em; text-align: center; padding: 0; margin: 0 0 10px 0; }
h2 { font-size: 120%; line-height:1.3em;  text-align: center;  padding: 0; margin: 0 0 10px 0; }
h3 { font-size: 100%; line-height:1.2em;  text-align: center;  padding: 0; margin: 0 0 10px  0; }
ul	{ margin-top: 0; padding-top: 0;}

table#online td { padding;5px; }
table#online { border:2px solid #000 !important; }
#container { overflow:hidden; width:90%; max-width: 1024px;  margin: 10px auto; text-align: left; border-radius:10px; box-shadow:2px 2px 8px #000; }
#content { 	padding: 30px 35px 5px 35px; }
#wrapper { background:#FAFFFF url(../i/bkgnd2.jpg) 100% 0 no-repeat fixed; margin:0;  padding:0; }
#banner img { width:100%; height:auto; }
#menu { overflow:hidden; margin:0; padding:0.5em 0 1em 0; text-align:center; background: url(../i/banner-bottom.jpg) 0 top no-repeat; background-size:100% 100%; }
#menu li { margin:0 2% -5px 2%; padding:0; display:inline-table; }
#menu li a { text-decoration: none; background: url(../i/yin-yang.png) 0 50% no-repeat; background-size:1.5em; color:#F50; text-shadow:1px 1px 1px #000; display:block; padding:0 5px 0 1.5em; font-size:150%; line-height:1.4em; font-style:italic; font-weight:bold; }
#menu li a:hover { color:#FA0; }
#menu li a:active { position:relative !important; top:2px left:2px; }

#footer {  padding: 15px 35px 5px 35px; }
#footer p{  font-size: 80%; line-height:1em; color: #555; text-align: center; }
#webdesign { text-align: center; font-size: 80%; margin-bottom:10px; }
#webdesign a { color: #888; text-decoration:none; }
#webdesign a:hover{ color: #02D; }

.align-right { text-align:right; }
.center { margin: 0 auto; text-align: center; }
.indent1 { padding-left: 25px; }
.indent2 { padding-left: 50px; }
.no-bullets { list-style: none; padding: 0;  }
.no-bullets li { padding: 0; }
.narrow	{ width: 60%; margin-left: 20%;}
.quote { width: 60%; margin-left: 20%; font-style: italic; font-size: 85%; }
.float-left { float: left; margin-right: 25px; }
.float-right { float: right; margin-left: 25px; }
.grayed { color: #AAA; }
.grayed a { color: #AAA; }
.grayed a:hover { color: #AAA; }


.news { border-width: 1px 1px 1px 1px;
	border-color: #9CF;
	 }
	 
.notice {
	text-align:center;
	padding: 15px 20px 15px 15px;
	border: 3px solid #09F;
	margin: 15px;
	background-color:#FFF;
	color: #000;
	border-radius:10px;
	line-height:1.6em;
}

.time-and-place { margin: 15px 0 15px 10px; width: 100%; border-top: 1px solid #000; }
.time-and-place td { font-size: 90%; line-height:1.4em; padding: 5px; border-bottom: 1px solid #000;  }
h3.city {  text-align: left; font-size: 125%; padding: 5px 10px 5px 10px; background-color: #09F; color: #FFF; margin-bottom: 5px; }
.location {margin: 0 0 15px 225px; border-left: 3px solid #09F; min-height: 100px; }
.location p { margin: 0 0 10px 10px; }
.teacher { clear: left;  padding: 0 0 25px 0; }
.teacher-name { clear: left; text-align: left; }
.class-pic { float: left; margin: 0 25px 50px 0; }
.selector { width: 100%; margin-bottom: 15px; }
.selector td { padding: 0; }
.clearall { clear: both; margin-bottom: -25px; }


a.reg-butn { display:inline-table; font-size:80%; line-height:1em; padding:4px; text-align:center;  font-weight:bold; border-radius:3px; margin:5px auto 10px; box-shadow: 2px 2px 4px #888; color:#06C; border:1px solid #06C; text-decoration: none; }
a.reg-butn:hover { background-color:#06C; color: #FFF; }


@media screen and (max-width: 960px) {
#menu li a { font-size:125%; line-height:1.5em; }
#menu li {  margin:0 1% 0 1%; }
#wrapper {  background-image:none !important; }
}

@media screen and (max-width: 720px) {
#menu li a { font-size:100%; line-height:1.4em; }
#menu li {  margin:0; }
#footer { background-image: none; }
#container { margin:1% 2% !important; padding:0; width:96% !important; border-radius:5px !important; }

#content { width:92%; padding:2% 4%; }
#content img { width:90% !important; height:auto !important; float:none; margin-left:5% !important; }
h1, h2, h3 { text-align:center !important; }
#content img.class-pic { border-radius:10px; width:40% !important; margin-left:30% !important; margin-bottom:10px;  }
.teacher   { width:auto; margin:0 0 50px 0 !important; padding:0 !important;}
.teacher-name { border:3px solid #09F; padding:5px 25px 5px 25px; }
.location { width:100%; overflow:hidden; margin:0 0 10px 0 !important; padding:0 !important; }
.time-and-place { width:100%; margin:0 0 10px 0 !important; padding:0 !important;  } 
.narrow	{ width: 90%; margin-left: 5%;}
.quote { width: 90%; margin-left: 5%; font-style: italic; font-size: 85%; }
}

@media screen and (max-width: 480px) {

#container { margin:0 !important; padding:0; width:100% !important; border-radius:0 !important; }
}