@import url("reset.css");
@import url("nav.css");


body {
	background: #393939;
	font: 12px/16px Arial, Helvetica, sans-serif;
	color: #000;
}

.container {
	width: 870px;
	margin: 0 auto;
	background: #dfdfdf;
}

a { color: #7e002c; }
a:hover { color: #333; }

em { font-style: italic;}


/*---------------------------------------------   
    header
----------------------------------------------*/
.header {
	height: 69px;
	border-bottom: 1px solid #303030;
	background: #000 url(../images/core/logo.gif) no-repeat center;
}

.header a {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	height: 69px;
}




/*---------------------------------------------   
    feature area (homepage)
----------------------------------------------*/
.feature-area {
	height: 526px;
	background: #7e002c;
	position: relative;
}

/* items (1, 2, 3) */
.feature-area .item {
	width: 230px;
	position: absolute;
	top: 0;
	height: 409px;
	display: block;
}

.feature-area .item h2 {
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	line-height: 31px;
	padding-left: 15px;
}

.feature-area .item .text {
	color: #fff;
	font-weight: bold;
	padding: 8px 15px;
	height: auto;
	overdflow: hidden;
}

.feature-area .item .text p {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
}

.feature-area .item .two { height: 409px; background: #98C73B; }

.feature-area .one { left: 0; }
.feature-area .two { left: 230px; }
.feature-area .three { left: 460px; }

.feature-area .one h2 { background: #000000; }
.feature-area .two h2 { background: #201e1f; }
.feature-area .three h2 { background: #000000; }

.feature-area .one .text { background: #242424; }
.feature-area .two .text { background: #333232; }
.feature-area .three .text { background: #111111; }

.feature-area .image-container {
	background:#111111; 
	width:228px;
	border-right: 2px solid #7E002C;
	text-align:center;
	min-height:490px; _height:490px;
}

.feature-area .item .news-section {
	background: #111111;
	padding: 10px;
	border: 0;
	/*border-right: 2px solid #7E002C;*/
}

.feature-area .item .news-section h2 {
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
	padding: 0;
	line-height: normal;
	background: none;
}

.feature-area .item .news-section p {
	color: #ffffff;
	margin-bottom: 5px;
}


/*---------------------------------------------   
    right column (also refer to nav.css)
----------------------------------------------*/
.right-column {
	position: absolute;
	right: 0;
	top: 0;
	border-top: 1px solid #000;
	width: 180px;
	height: 403px;
}

.inner-right-column { height: auto; }

.right-column p, 
.inner-right-column p {
	color: #fff;
	font-size: 11px;
	line-height: 13px;
	margin: 0 20px;
}

.right-column a, 
.inner-right-column a { color: #fff; }

#mailing-list a {
	color:#ffffff;
	text-decoration: none;
	padding: 4px 5px 4px 15px;
	width: 160px;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: bold;
	display: block;
}

#mailing-list a:hover{
	color: #ffffff;
	background-color: #940b3b;
}

#contact-us p {
	margin: 0 0 3px 15px;
	line-height: 1.3em;
}

#contact-us p.big {
	font-size: 13px;
	color: #ffffff;
	font-weight: bold;
}



/*---------------------------------------------   
   logos (homepage)
----------------------------------------------*/
.feature-area .bocs {
	position: absolute;
	bottom: 0; left: 0;
	width: 690px;
	height: 39px;
	background: url(../images/bocs.gif) no-repeat;
	display: block;
}

.feature-area .bocs a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	height: 39px;
}

.feature-area .beactive {
	position: absolute;
	bottom: 0; right: 0;
	width: 180px;
	height: 38px;
	background: #fff url(../images/beactive.gif) 0 0 no-repeat;
}

.feature-area .beactive a {
	display: block;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
  height: 38px;
	text-decoration: none;
}

.feature-area .beactive a#beactive-healthway {background: url('../images/beactive-healthway.gif'); width: 41px; margin: 0 10px 0 85px;}
.feature-area .beactive a#beactive-heart {background: url('../images/beactive-heartfoundation.gif'); width: 34px;}


/*---------------------------------------------   
    content area (homepage)
----------------------------------------------*/
body.home .content { padding: 10px 20px; }

body.inner .content {
	position: absolute;
	left: 0; top: 0;
	width: 690px;
	height: auto;
	border-top: 1px solid #000;
}

.content p, 
.inner-content p { margin-bottom: 15px; }

.content ul, 
.inner-content ul {
	margin: 10px 0 10px 25px;
	list-style: disc;
}




/*---------------------------------------------   
    footer
----------------------------------------------*/
.footer {
	background: #171717 url(../images/core/bg-footer.gif) repeat-y right;
	color: #777;
	line-height: 13px;
	font-size: 11px;
	height:55px;
}

.footer a {
	color: #777;
	text-decoration: none;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline;
} 

#footer-nav{
	width:550px;
	float:left;
	margin:15px;
}

#affiliates-logo {
	width:255px;
	float:right;
	padding: 5px 10px 0 0;
}

.footer .redkite {
	width: 44px;
	height: 40px;
	padding: 0 5px 0 0;
	background: url(../images/core/logo-redkite.gif) center center no-repeat;
	float:right;
}

.footer .heartfoundation {
	width: 51px;
	height: 40px;
	padding: 0 5px 0 0;
	background: url(../images/core/logo-heartfoundation.gif) center center no-repeat;
	float:right;
}

.footer .healthway {
	width: 61px;
	height: 40px;
	padding: 0 5px 0 0;
	background: url(../images/core/logo-healthway.gif) center center no-repeat;
	float:right;
}

.footer .active {
	width: 76px;
	height: 40px;
	padding: 0 5px 0 0;
	background: url(../images/core/logo-beactive.gif) center center no-repeat;
	float:right;
}

.footer .logolink a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 43px;
	text-decoration: none;	
}


/*---------------------------------------------   
    inner pages (containers)
----------------------------------------------*/
.inner-content-container {
	background: #dfdfdf url(../images/bg-right.gif) repeat-y right;
}

.inner-content {
	float: left;
	width: 690px;
}

.inner-right-column {	
	float: right;
	width: 180px;
	padding-bottom: 10px;
}




/*---------------------------------------------   
    inner pages (h1 - titles)(h2 - sub titles)
----------------------------------------------*/

h1 {
	height: 45px;
	text-indent: -9999px;
	display: block;
}

h1.performances { background: #171717 url(../images/titles/performances.gif) no-repeat; }
h1.ballet { background: #171717 url(../images/titles/ballet.gif) no-repeat; }
h1.kidsballet { background: #171717 url(../images/titles/kids-ballet.gif) no-repeat; }
h1.dancers { background: #171717 url(../images/titles/dancers.gif) no-repeat; }
h1.drama { background: #171717 url(../images/titles/drama.gif) no-repeat; }
h1.history { background: #171717 url(../images/titles/history.gif) no-repeat; }
h1.news { background: #171717 url(../images/titles/news.gif) no-repeat; }
h1.photogallery { background: #171717 url(../images/titles/photogallery.gif) no-repeat; }
h1.schoolincursions { background: #171717 url(../images/titles/incursions.gif) no-repeat; }
h1.mailing{ background: #171717 url(../images/titles/mailing-list.gif) no-repeat; }

body.inner h2 {
	height: 30px;
	text-indent: -9999px;
	display: block;
}

h2.currentperformances { background: #c4c2c2 url(../images/titles/current-performances.gif) no-repeat; }
h2.incursions2008 { background: #c4c2c2 url(../images/titles/2008-incursions.gif) no-repeat; }
h2.schoolincursions { background: #c4c2c2 url(../images/titles/schoolincursions.gif) no-repeat; }
h2.bookingform { background: #c4c2c2 url(../images/titles/bookingform.gif) no-repeat; clear: both; display: block; }
h2.testimonials { background: #c4c2c2 url(../images/titles/testimonials.gif) no-repeat; }
h2.workshops { background: #c4c2c2 url(../images/titles/workshops.gif) no-repeat; clear: both; display: block; }
h2.enquiry-form { background: #c4c2c2 url(../images/titles/enquiry-form.gif) no-repeat; clear: both; display: block; }




/*---------------------------------------------   
    inner pages (content)
----------------------------------------------*/

h3, h4, h5 {
	color: #222;
	margin-bottom: 10px;
	font-weight: bold;
}
h3 { font-size: 16px; }
h4 { font-size: 15px; }
h5 { font-size: 14px; }

hr {
	border: 0;
	border-bottom: 1px dashed #bbb;
	height: 1px;
	margin-bottom: 15px;
	clear: both;
	display: block;
}

/* featured items */
.features .item, 
.subitems .item {
	background: #d6d6d6;
	margin-bottom: 1px;
}

.subitems .image {
	float: left;
	width: 150px;
}

.features .item .image {
	float: left;
	width: 240px;
}

.features .item .info {
	float: left;
	width: 400px;
	padding: 20px 20px 0 20px;
}

.subitems .info {
	float: left;
	width: 470px;
	padding: 20px 20px 0 20px;
}

.features .item .info h3 { margin-bottom: 5px; }

.features .alt .image, 
.subitems .alt .image {
	float: right;
}

body.inner .bocs {
	background: #c4c2c2 url(../images/logo-bocs.gif) no-repeat;
	height: 31px;
	width: 120px;
	padding-left: 45px;
	margin-bottom: 15px;
}

.text {
	padding: 20px;
}


.datatable {
	border: 1px solid #bbb;
	border-right: 0;
	border-bottom: 0;
	margin-bottom: 15px;
}

.datatable td {	
	border: 0;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 3px;
	background: #d6d6d6;
	vertical-align: top;
}

.testimonials-schools td { width: 16%; }

.datatable th {	
	border: 0;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 3px;
	background: #171717;
	color: #fff;
	text-align: center;
	font-weight: normal;
}

#gallery-container{
	width: 645px;
	margin: 0 auto;
}

.gallery .item {
	float: left;
	width: 140px;
	margin: 0 9px 20px 9px;
	height: 200px;
}

.gallery .image {
	width: 140px;
}

.gallery .caption {
	padding-top: 5px;
	font-size: 9px;
	line-height: 12px;
}


/*---------------------------------------------   
  news
----------------------------------------------*/
.news .item {
	border-bottom: 1px dashed #aaa;
	margin: 0 0 10px 0;
	padding:3px;
}
.news .item .image {
	float: right;
	width: 120px;
}
.news .item .image img {
	margin:2px;
}


/*---------------------------------------------   
  ballet training
----------------------------------------------*/

div.training-ballet table td {
	padding: 5px 20px 20px 0;
	vertical-align: top;
}


/*---------------------------------------------   
  ballet drama
----------------------------------------------*/

div.training-drama table td {
	padding: 5px 20px 20px 0;
	vertical-align: top;
}

.left { float: left; margin: 0 10px; }
.right { float: right; margin: 10px; }
.middle { text-align: center;}
.clear { display: block; clear: both; }