@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0; list-style:none; text-decoration:none; outline:none; }
a img{ border:none; }
body{ background:url(../images/bg.jpg) repeat-x 0 0 #ffe689; font:normal 14px/20px 'Calibri-Regular', Trebuchet MS, Arial, Helvetica, sans-serif; color:#666; }
.clear{ font-size:0; line-height:0; clear:both; }
.mainDiv{ width:976px; margin:0 auto; }

.bannerPnl{ float:left; width:100%; position:relative; }
.bannerPnl img{ float:left; width:100%; height:auto; }
.bannerPnl a.logo{ position:absolute; left:0; top:0; width:50%; height:50%; text-indent:-9999px; display:block }

.middilePnl{ float:left; width:100%; }

.leftPnl{ float:left; width:247px; }
.menuPnl{
	float: left;
	width: 205px;
	padding: 20px 20px 120px;
	background: #F7941F;
	border: 1px solid #D67B0B;
	border-radius: 6px;
	position: relative;
}
.menuPnl img.mnuIcon{ float:left; display:none; }
.menuPnl ul{ float:left; width:100%; }
.menuPnl ul li{ list-style:none; background:url(../images/menuBdr.jpg) repeat-x left bottom;  }
.menuPnl ul li a{ font:18px/25px 'Calibri-Bold'; color:#fff; padding:7px 8px; display:block; }
.menuPnl ul li a:hover, .menuPnl ul li a.active{ color:#ffe785; }

.funFor{ float:left; width:90%; font:40px/25px 'Calibri-Bold'; color:#fff; padding:0 5%; margin:-100px 0 0; position:relative; }
.funFor span{ color:#fff; font:30px/25px 'Calibri-Regular'; }
.funFor img{ float:right; width:65%; height:auto }

.leftPnlBtm{ float:left; width:247px; position:relative; padding:20px 0; }
.leftPnlBtm img{ float:left; margin:7px 0; }
.leftPnlBtm img.bbbLogo{ float:none; margin:10px auto 0; display:block; }

.bodyContent{ float:right; width:640px; background:url(../images/bodyContentBg.jpg) repeat-x 0 0 #fff; border:1px solid #fff; padding:20px 30px; border-radius:6px; font:16px/22px 'Calibri-Regular'; color:#333; }
.bodyContent h1{ text-align:left; font:bold 24px/30px Verdana, Geneva, sans-serif; color:#333; padding:0 0 5px; margin:0 0 5px; border-bottom:2px dotted #ee8609; }
.bodyContent h2{ color:#ee8609; font:bold 20px/22px Verdana, Geneva, sans-serif; padding:10px 0 0; }
.bodyContent h3{ color:#333; font:18px/22px 'Calibri-Bold'; padding:10px 0 0; }
.bodyContent p{ font:16px/22px 'Calibri-Regular'; color:#333; padding:5px 0; }
.bodyContent img{ background:transparent; padding:4px; border:4px solid #fde585; margin:15px; }
.bodyContent ul{ padding:0 0 10px; margin:0 }
.bodyContent ul li{ font:16px/22px 'Calibri-Regular'; color:#333; list-style:none; padding:0 0 5px 15px; background:url(../images/bullet.png) no-repeat left 8px; display:block }
.bodyContent a{ color:#0499c1; }
.bodyContent a:hover{ color:#000; }

.videoPnlOne{ float:left; width:100%; height:350px; position:relative; margin:15px 0; }
.videoPnlOne iframe{ position:absolute; left:0; top:0; width:100%; height:100%; }

.footerPnl{ float:left; width:90%; padding:20px 5%; font:16px/22px 'Calibri-Regular'; color:#333; text-align:center; }
.footerPnl a{ color:#2da6d3; text-decoration:none }
.footerPnl a:hover{ color:#000; text-decoration:none }


div.classroomTxt{ float:left; width:50%; }
div.classroomTxt img{ float:left !important; margin-right:15px !important }
table.classroom{ margin:0 0 20px; width:40%; background:#ee8609; float:right; }
table.classroom td{ padding:5px; background:#fff; color:#333; font:15px/22px 'Calibri-Bold'; text-align:center }

/* Summer Camp */
table.summerCampTbl { width: 100%; border-collapse: collapse; margin:10px 0 }
table.summerCampTbl tr:nth-of-type(odd) {   background: #fff4cb;}
table.summerCampTbl th { background: #3d5462; color: white; font-weight: bold; font:18px/22px 'Calibri-Bold'; }
table.summerCampTbl td{ font:16px/22px 'Calibri-Regular'; color:#333; }
table.summerCampTbl td, table.summerCampTbl th { padding: 6px; border: 1px solid #ccc; text-align: left; }

@media 
only screen and (max-width: 640px),
(min-device-width: 640px) and (max-device-width: 640px)  {
table.summerCampTbl table, table.summerCampTbl thead, table.summerCampTbl tbody, table.summerCampTbl th, table.summerCampTbl td, table.summerCampTbl tr { display: block;}
table.summerCampTbl thead tr { position: absolute; top:-9999px; left:-9999px; }
table.summerCampTbl tr { border: 1px solid #ccc; }
table.summerCampTbl td { border: none;	border-bottom: 1px solid #eee; 	position: relative;	padding-left: 50%; }
table.summerCampTbl td:before { position: absolute;	top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
table.summerCampTbl td:nth-of-type(1):before { content: "Week #"; font:18px/22px 'Calibri-Bold'; }
table.summerCampTbl td:nth-of-type(2):before { content: "Dates"; font:18px/22px 'Calibri-Bold'; }
table.summerCampTbl td:nth-of-type(3):before { content: "Theme"; font:18px/22px 'Calibri-Bold'; }
table.summerCampTbl td:nth-of-type(4):before { content: "Topics"; font:18px/22px 'Calibri-Bold'; }
}
/* Summer Camp */


ul.contactFrm{ float:left; width:100%; padding:15px 0; }
ul.contactFrm li{ float:left; width:100%; padding:0 0 10px; margin:0; background:none }
ul.contactFrm li span{ float:left; width:30%; padding:0 2.5% 0 0; font:16px/30px 'Calibri-Bold'; color:#333; text-align:right; }
ul.contactFrm li input[type="text"]{ width:280px; height:22px; padding:3px 5px; border:1px solid #ccc; background:#fff; font:16px/22px 'Calibri-Regular'; color:#333; border-radius:3px }
ul.contactFrm li select{ width:292px; height:auto; padding:5px; border:1px solid #ccc; background:#fff; font:16px 'Calibri-Regular'; color:#333; border-radius:3px }
ul.contactFrm li textarea{ width:285px; height:100px; padding:5px 5px; border:1px solid #ccc; background:#fff; font:16px/20px 'Calibri-Regular'; color:#333; border-radius:3px }
ul.contactFrm li input[type="submit"]{ background:#ee8609; padding:5px 10px; border:none; cursor:pointer; font:16px 'Calibri-Bold'; color:#fff; border-radius:3px }


@media all {
body, .menuPnl ul li a, .footerPnl a
	{transition:all 0.4s linear;-o-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;}
}




@media screen and (max-width: 975px) {
.mainDiv{ width:100%; margin:0; float:left; padding:0; }
.bodyContent{ float:right; width:95%; background:url(../images/bodyContentBg.jpg) repeat-x 0 0 #fff; border:none; padding:20px 2.5%; border-radius:6px; }

.menuPnl{ float:none; width:32px; height:32px; padding:5px 5px 5px 20px; background:#F7941F; border:1px solid #D67B0B; border-radius:6px; position:absolute; left:-15px; top:100px; display:block; z-index:9999; box-shadow:#999 2px 2px 5px; }
.menuPnl img.mnuIcon{ float:left; display:block; cursor:pointer }
.menuPnl ul{ display:none; position:absolute; width:200px; padding:10px; background:#F7941F; left:10px; top:32px; border-radius:0 6px 6px 0; box-shadow:#999 2px 2px 5px; }
.menuPnl ul li{ list-style:none; background:url(../images/menuBdr.jpg) repeat-x left bottom;  }
.menuPnl ul li a{ font:16px/22px 'Calibri-Bold'; color:#fff; padding:7px 8px; display:block; }
.menuPnl ul li a:hover, .menuPnl ul li a.active{ color:#ffe785; }

.leftPnl{ float:none; width:247px; margin:0 auto }
.funFor{ float:left; width:90%; font:40px/25px 'Calibri-Bold'; color:#fff; padding:0 5%; margin:25px 0 0; position:relative; display:none }

table.classroom{ margin:0 30% 20px 0; width:70%; background:#ee8609; float:left; }
div.classroomTxt{ float:left; width:100%; }

}

@media screen and (max-width: 640px) {
.bodyContent{ font:14px/20px 'Calibri-Regular'; color:#333; }
.bodyContent h1{ text-align:center; font:bold 20px/26px Verdana, Geneva, sans-serif; color:#333; padding:0 0 5px; margin:0 0 5px; border-bottom:2px dotted #ee8609; }
.bodyContent h2{ color:#ee8609; font:bold 16px/22px Verdana, Geneva, sans-serif; padding:10px 0 0; }
.bodyContent p{ font:14px/20px 'Calibri-Regular'; color:#333; padding:5px 0; }
.bodyContent img{ background:transparent; padding:4px; border:4px solid #fde585; margin:15px; width:auto; height:auto; max-width:250px; }
.videoPnlOne{ float:left; width:100%; height:300px; position:relative; margin:15px 0 0; }

ul.contactFrm li span{ float:left; width:100%; padding:0 0 0 0; font:16px/30px 'Calibri-Bold'; color:#333; text-align:left; }
}

@media screen and (max-width: 470px) {
.bodyContent img{ background:transparent; padding:4px; border:4px solid #fde585; margin:10px auto; width:auto; height:auto; max-width:250px; float:none !important; display:block; }

}