/*============================================================
 Kids Capers CSS - MattK 2010
============================================================*/

@import url(reset.css);

/*============================================================
 Body
============================================================*/

html, body {
	/*height: 100%;*/
}

body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 1.4em;
	color: #727272;
	text-align: center;
	background-color: #FFFFFF;
	background:url(../images/bg_body.jpg) no-repeat center top;
}

/*============================================================
 Header
============================================================*/

.header {
	width:960px;
	height:108px;
	margin:-16px 0 0 0;
	position:relative;
	z-index:2;
}

.logo {
	margin:-1px 0 0 36px;
	float:left;
}

.phoneNumber {
	float:right;
	margin:26px 7px 0 0;
}

/*============================================================
 Navigation
============================================================*/

.nav {
	width:792px;
	height:42px;
	margin:4px 38px 0 130px;
	position:relative;
	z-index:3;
}

.nav li { float:left; }

.nav01 {
	width:64px;
	background:url(../images/btn_home.png) top left no-repeat;
}

.nav02 {
	width:86px;
	background:url(../images/btn_centres.png) top left no-repeat;
}

.nav03 {
	width:82px;
	background:url(../images/btn_aboutus.png) top left no-repeat;
}

.nav04 {
	width:93px;
	background:url(../images/btn_programs.png) top left no-repeat;
}

.nav05 {
	width:108px;
	background:url(../images/btn_recruitment.png) top left no-repeat;
}

.nav06 {
	width:131px;
	background:url(../images/btn_resource.png) top left no-repeat;
}

.nav07 {
	width:137px;
	background:url(../images/btn_calender.png) top left no-repeat;
}

.nav08 {
	width:91px;
	background:url(../images/btn_contactus.png) top left no-repeat;
}

.nav01, .nav02, .nav03, .nav04, .nav05, .nav06, .nav07, .nav08 {
	height:42px;
	display:block;
}

a.nav01:hover, a.nav02:hover, a.nav03:hover, a.nav04:hover, a.nav05:hover, a.nav06:hover, a.nav07:hover, a.nav08:hover { background-position:0 -42px; }

.navSelected { background-position:0 -42px; }

/*============================================================
 Content
============================================================*/

/*.content a {
	color:#63C1EC;
	text-decoration:underline;
}

.content a:hover {
	text-decoration:none;
}*/

.frontPage {
	width:960px;
	height:480px;
	background:url(../images/bg_front.png) top left no-repeat;
	display:block;
	margin:-66px 0 0 0;
}

.leftText {
	width:310px;
	margin:70px 0 0 80px;
}

.leftText h1 {
	line-height:24px;
	color:#FFF;
	letter-spacing:-0.5pt;
}

.leftText img {
	float:left;
	margin:2px 10px 0 0;
}

.leftText p {
	color:#3e3e3e;
	width:300px;
	margin:7px 0 0 0;
}

.rightText {
	margin:70px 0 0 320px;
	width:230px;
}

.rightText h1 {
	color:#595959;
}

.rightText a {
	float:left;
}

.frontBtns {
	width:960px;
	height:141px;
	margin:-103px 0 0 0;
}

.frontBtns img {
	float:left;
}

/*---------- Inside pages ---------*/

.inner {
	width:960px;
	margin:-490px 0 0 0;
}

.innerLeft {
	width:660px;
}

.innerLeft img{
	margin:0 0 0 50px;
}

.innerLeftText {
	margin:40px 50px 0 100px;
}

.innerLeftText p {
	margin:10px 0 20px 0;
	color:#727272;
	line-height:18px;
}

.innerRight {
	width:180px;
	margin:90px 0 0 40px;
}

.innerRight h1 {
	color:#FFF;
}

.innerRight p {
	color:#727272;
	font-size:11px;
	margin:10px 0;
	line-height:16px;
}

/*.innerRight a {
	color:#727272;
	text-decoration:none;
}

.innerRight a:hover {
	text-decoration:underline;
}*/

/*============================================================
 Programs Page
============================================================*/

.programTable {
	border-spacing:0px;
	width:100%;
	/*border:1px solid #bfbfbf;
	background:#dddddd;*/
	margin-bottom:30px;
}

.programTable th, .programTable td {
	background:#ffffff;
	padding:3px;
	color:#727272;
}

.programTable th {
	font-weight:bold;
	text-align:center;
	background:#e3f4fc;
	padding:6px 0;
}

.programTable td {
	vertical-align:top;
	border-bottom:1px solid #e5e5e5;
}

.programTable li {
	list-style-type:disc;
	list-style-position:outside;
	margin:0 0 0 15px;
}

.leftCol {
	width:30%;
	font-weight:bold;
}

/*============================================================
 Form Elements
============================================================*/

.commonForm table {
	width:500px;
	margin:10px 0 20px 0;
}

.commonForm th {
	font-weight:bold;
	text-align:left;
	color:#70c9ee;
	font-size:14px;
	font-weight:bold;
	line-height:30px;
	padding-bottom:30px;
}

.formHead {
	width:500px;
	height:36px;
	background:url(../images/form_border.jpg) no-repeat;
}

th.formSubHead {
	font-size:11px;
	border:none;
	padding-bottom:0;
}

.commonForm tr {
	height:26px;
}

.commonForm td {
	margin:0;
}

.formLabel {
	text-align:right;
	width:80px;
	font-weight:bold;
}

.formSpace {
	width:5px;
	color:#FF0000;
}

.formInput {
	width:163px;
}

.formInput input {
	width:163px;
	height:24px;
	background:url(../images/bg_input.png) no-repeat;
	border:none;
	padding:4px 0 0 3px;
}

.formInput select {
	width:150px;
}

.formInput textarea {
	width:163px;
	height:40px;
	overflow:auto;
	background:url(../images/bg_textarea.jpg) no-repeat;
	border:none;
	padding:2px;
}

.formInput2 textarea {
	width:320px;
	height:100px;
	overflow:auto;
	background:url(../images/bg_textarea2.jpg) no-repeat;
	border:none;
	padding:2px;
}

.formCheck {
	width:40%;
}

.formCheck input {
	float:right;
}

.submit {
	width:60px;
	height:32px;
	background:url(../images/btn_submit.jpg) no-repeat;
	border:none;
	margin:0 0 0 100px;
	cursor:pointer;
}

input.submit:hover {
	background-position:0 -32px;
}

input.error {
	width:163px;
	height:24px;
	background:url(../images/bg_inputError.png) no-repeat;
	border:none;
	padding:4px 0 0 3px;
}

label.requiredText {
	color:#70c9ee;
	font-weight:bold;
}

label.error {
	color:red;
	font-weight:bold;
}

/*select.error {
	width:163px;
	height:24px;
	background:url(small-dropdown-error.jpg) no-repeat;
	border:none;
	padding:4px 0 0 3px;
}*/

/*============================================================
 Monthly Calendar Page
============================================================*/

a.calendarBtn {
	display:block;
	width:480px;
	height:46px;
	background:#eaf8ff;
	margin-bottom:2px;
	text-decoration:none;
	color:#727272;
}

a.calendarBtn:hover { background:#def4ff;}

.calendarBtn img {
	margin:12px 0 0 12px;
	float:left;
}

.calendarBtn span {
	margin:6px 0 0 14px;
	float:left;
}

/*============================================================
 Centres Page
============================================================*/

.centreTab {
	width:500px;
	height:120px;
	border-bottom:1px solid #e5e5e5;
	padding:20px 0;
}

.centreTab-image {
	width:180px;
	height:120px;
	background:#c8eaf8;
	float:left;
}

	.centreTab-image img {
		border:1px solid #FFF;
		margin:4px;
	}

.centreTab-text {
	width:300px;
	height:120px;
	margin-left:20px;
	float:left;
}

p.centreTab-text-head {
	font-weight:bold;
	font-size:14px;
	color:#70c8ee;
	margin:0;
	height:20px;
}

.centreTab-text a {
	color:#70c8ee;
	font-weight:bold;
	text-decoration:none;
	border-bottom:1px dotted #70c8ee;
}

.centreTab-text a:hover {
	border-bottom:1px solid #70c8ee;
}

p.centreTab-text-body {
	height:70px;
	overflow:hidden;
	margin:0 0 10px 0;
}

/*-------- Centre Sub Pages ---------*/

p.centre-text-body {
	margin:10px 0 20px 0;
}

.slideshow img {
	margin:0;
}

.cycleNav a {
	width:17px;
	height:17px;
	background:url(../images/dot.png) no-repeat;
	display:block;
	cursor:pointer;
	margin:8px 2px;
	float:left;
	line-height:60px;
	border-bottom:none;
}

.cycleNav a:hover { background-position:0 -17px;
	border-bottom:none; }

.cycleNav a.activeSlide { background-position:0 -17px; }

/* Cover the numbers for the slideshow */
.cycleCover {
	width:500px;
	height:20px;
	background:#FFF;
	margin-top:30px;
	position:relative;
}

.contactTable {
	margin-bottom:20px;
}

.contactTable tr {
	height:28px;
}

.contactTable td {
	margin:0;
	padding:0;
}

.contactTable-l {
	width:60px;
	font-weight:bold;
	border-bottom:1px solid #e7e7e7;
}

.contactTable-m {
	width:30px;
	border-bottom:1px solid #e7e7e7;
}

.contactTable-r {
	width:300px;
	border-bottom:1px solid #e7e7e7;
}

/*============================================================
 Resource Centre Page
============================================================*/
.resourceHead {
	width:500px;
	height:36px;
	background:url(../images/form_border.jpg) no-repeat;
	font-weight:bold;
	text-align:left;
	color:#70c9ee;
	font-size:14px;
	font-weight:bold;
	line-height:30px;
	margin-top:20px;
	padding-bottom:10px;
}

/*============================================================
 Links
============================================================*/

a {
	color:#63C1EC;
	text-decoration:none;
	border-bottom:1px dotted #63C1EC;
}

a:hover { border-bottom:1px solid #63C1EC; }

.logo a { border:none; }

.nav a { border:none; }

.calendarBtn { border:none; }

a.calendarBtn:hover { border:none; }

.innerRight a {
	color:#727272;
	border-bottom:1px dotted #727272;
}

.innerRight a:hover { border-bottom:1px solid #727272; }



/*============================================================
 Footer
============================================================*/

.footer {
	width:960px;
	height:112px;
	background:url(../images/bg_footer.jpg) top left no-repeat;
	display:block;
}

.footerAllText {
	font-size:11px;
	line-height:16px;
	color:#7a95a4;
	margin:50px 0 0 50px;
}

.footerAllText div {
	float:left;
	width:130px;
}

.footerAllText a {
	color:#7a95a4;
	text-decoration:none;
	border-bottom:none;
}

.footerAllText a:hover {
	text-decoration:underline;
	border-bottom:none;
}


/*============================================================
 Common Assets
============================================================*/

h1 {
	font-size:26px;
}


/*--------- Margins -----------*/

.marTop0 { margin-top:0; }
.marTop5 { margin-top:5px; }
.marTop10 { margin-top:10px; }
.marTop15 { margin-top:15px; }
.marTop20 { margin-top:20px; }
.marTop25 { margin-top:25px; }

.marBtm0 { margin-bottom:0; }
.marBtm5 { margin-bottom:5px; }
.marBtm10 { margin-bottom:10px; }
.marBtm15 { margin-bottom:15px; }
.marBtm20 { margin-bottom:20px; }
.marBtm25 { margin-bottom:25px; }

.mar0 { margin:0; }

/*--------- Other -----------*/



.clear { clear:both; }

strong {
	font-weight: bold;
	}

em {
	font-style: italic;
	}

input,
textarea {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #7a7a7a;
}

a img	{border: none;}

.hidden {
	display:none;
}

/*============================================================
 Floats
============================================================*/

.float-l {
	display: block;
	float: left;
}

.float-r {
	display: block;
	float: right;
}

/*============================================================
 Wrapper
============================================================*/

.wrap {
	text-align: left;
	width: 960px;
	margin: 10px auto 0 auto;
	position:relative;
	}


/*============================================================
 Fixes
============================================================*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




/*============================================================
Capers Inhouse Solution Added CSS
============================================================*/

.external_links{
padding: 20px 20px 40px 20px;
margin:10px 0px 0px 0px;
background-color: rgb(112, 200, 238);}

.external_links p.row{font-size:14px;
margin:3px 0px 6px;
color:#ffffff;}

.external_links a{color:#333333;}