﻿body {
    background: #0C6B8E;
    color: #333;
    font-size: 62.5%;
    font-family: arial, verdana, geneva, helvetica, sans-serif;
}

*{
    padding: 0;
    margin: 0;
}

select {
    min-width: 1.5em;
}

.hidden {
    position: absolute;
    left: -9000px;
}

a img, img {
    border: 0;
}

a:link, a:visited {
    color: #fff;
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
}

.mainContent a:link, .mainContent a:visited {
    color: #0C6B8E;
    font-weight: bold;
}

.bullet {
    background: url(/images/bullet-blue.gif) no-repeat center left;
    padding: 2px 0  2px 20px;
}

fieldset {
    border: 0;
}

.left {
    float: left;
}

.right { 
    float: right;
}

h1 {
    color: #555;
    font-size: 1.5em;
    padding: 0 0 10px 0;
}

h2 {
    color: #555;
    font-size: 1.4em;
    padding: 0 0 10px 0;
}

h3 {
    color: #555;
    font-size: 1.2em;
    padding: 0 0 5px 0;
}

p {
    padding: 0 0 10px 0;
}

.fixed {
    position: absolute;
    bottom: 0;
    left: 0;
}

ul {
    margin-left: 1em;
}

/* -------  clearing -------- */
#element:after, .outer:after {
    clear:both;
    display:block;
    content:".";
    height:0;
    font-size:0;
    line-height:0;
    visibility:hidden;
}

/*------------- layout -----------------------*/
.outer {
    width: 984px;
    padding-left: 9px;
    background: url(/images/outer-bg.gif) no-repeat bottom left;
    margin: 0 auto;
}

.wrapper {    
    width: 984px;
    float: left;
    background: #fff url(/images/wrapper-bg.gif) no-repeat bottom left;
    font-size: 1.2em;
}

.wrapper.kids {    
    background: #fff url(/images/wrapper-kids-bg.gif) no-repeat bottom left;
}

.wrapper.young {    
    background: #fff url(/images/wrapper-young-bg.gif) no-repeat bottom left;
}

.wrapper.parents {    
    background: #fff url(/images/wrapper-parents-bg.gif) no-repeat bottom left;
}

.wrapper.pract {    
    background: #fff url(/images/wrapper-pract-bg.gif) no-repeat bottom left;
}

.wrapper.about {    
    background: #fff url(/images/wrapper-about-bg.gif) no-repeat bottom left;
}

.header {
    float: left;
    width: 984px;
    background: #0C6B8E;
}

.header .logo {
    float: left;
    padding: 30px 0 10px 0;
}

.contentWrap {
    float: left;
    width: 954px;
    padding: 15px;
}

.leftCol {
    float: left;
    width: 300px;
    padding: 0 0 120px;
}

.mainContent {
    float: left;
    width: 644px;
    padding: 0 0 0 10px;
}

.home .contentWrap {
    padding-right: 0;
}

.home .mainContent {
    width: 954px;
    padding: 0;
}

/*------------- footer -----------------------*/
.footer {
    width: 984px;
    margin: 0 auto;
}

.footer ul {
    text-align: right;
    padding: 20px 0 5px 0;
    margin-left: 0;
    font-size: 1.1em;
    width:984px;
    float: left;
}

.footer li {
    display: inline;
    padding: 0 0 0 5px;
}

.footer li a {
    background: #0C6B8E;
    border-left: 1px solid #fff;
    padding-left: 5px;
}

.footer li.first a {
    border: none;
}

/*------------- search -----------------------*/
.search {
    float: right;
    width: 355px;
    background: url(/images/search-bot.gif) no-repeat bottom left;
    padding: 0 0 14px 0;
    margin-right: 20px;
}

.search .fRow {
    color: #fff;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px 10px 0 10px;
    background: url(/images/search-bg.gif) repeat-y;
}

.search .fRow label {
    padding: 0 10px;
}

.search .fRow .fSearch {
    width: 180px;
    border: 1px solid #C666A4;
    min-height: 1.5em;
    vertical-align: middle;
    padding-left: 5px;
    color: #333;
}

.search .fRow .go {
    vertical-align: middle;
    padding-left: 10px;
    border: none;
}

/*------------- nav -----------------------*/
.nav {
    display: inline;
    margin: 20px 0 0 0;
    padding: 0 0 0 5px;
    width: 979px;
    float: left;
    background: #fff url(/images/nav-bg.gif) repeat-x top;
}

.nav li {
    list-style: none;
    float: left;
    padding-top: 23px;
    width: 195px;
    background: url(/images/nav-li-bg.gif) no-repeat top left;
}

.nav li a {
    float: left;
    font-weight: bold;
    font-size: 1.4em;
    width: 155px;
    padding: 0px 20px 30px 20px;
    background: #0C6B8E url(/images/nav-a-bg.gif) no-repeat bottom left;
}

/*------------- left col / left nav -----------------------*/
.leftCol span {
    color: #555;
    display: block;
    width: 246px;
    padding: 15px 20px 10px;
    font-size: 1.5em;
    font-weight: bold;
    background: url(/images/leftcol-span-bg.gif) no-repeat top left;
}

.leftCol p {
    width: 246px;
    padding: 0 20px 20px;
    margin-bottom: 20px;
    background: url(/images/leftcol-p-bg.gif) no-repeat bottom left;
}

.leftCol ul {
    margin-left: 0;
}

.leftCol li {
    list-style: none;
}

.leftCol li a:link span, .leftCol li a:visited span {
    color: #fff;
    display: block;
    list-style: none;
    font-size: 1.2em;
    font-weight: bold;
    width: 258px;
    padding: 20px 15px;
    background: url(/images/leftcol-li-bg.gif) no-repeat top left;
}

.leftCol li a {
    margin-top: 3px;
    display: block;
    width: 288px;
    background:  #0C6B8E url(/images/leftcol-a-bg.gif) no-repeat bottom left;
}

.parents .leftCol li a:hover span, .parents .leftCol li a:focus span, .parents .leftCol li.selected a:link span, .parents .leftCol li.selected a:visited span {
    background: url(/images/leftcol-li-orange.gif) no-repeat top left;
}

.parents .leftCol li a:hover, .parents .leftCol li a:focus, .parents .leftCol li.selected a {
    background: #0C6B8E url(/images/leftcol-a-orange.gif) no-repeat bottom left;
}

.parents .leftCol li li a:link, .parents .leftCol li li a:visited, .parents .leftCol li li a:hover, .parents .leftCol li li a:focus{
    background: url(/images/bullet-orange.gif) no-repeat center left;
    padding: 2px 0 2px 20px;
    width: 268px;
}
.young .leftCol li a:hover span, .young .leftCol li a:focus span, .young .leftCol li.selected a:link span, .young .leftCol li.selected a:visited span {
    background: url(/images/leftcol-li-green.gif) no-repeat top left;
}

.young .leftCol li a:hover, .young .leftCol li a:focus, .young .leftCol li.selected a{
    background: #0C6B8E url(/images/leftcol-a-green.gif) no-repeat bottom left;
}
.kids .leftCol li a:hover span, .kids .leftCol li a:focus span, .kids .leftCol li.selected a:link span, .kids .leftCol li.selected a:visited span {
    background: url(/images/leftcol-li-red.gif) no-repeat top left;
}
.kids .leftCol li a:hover, .kids .leftCol li a:focus, .kids .leftCol li.selected a {
    background: #0C6B8E url(/images/leftcol-a-red.gif) no-repeat bottom left;
}

.pract .leftCol li a:hover span, .pract .leftCol li a:focus span, .pract .leftCol li.selected a:link span, .pract .leftCol li.selected a:visited span{
    background: url(/images/leftcol-li-grey.gif) no-repeat top left;
}

.pract .leftCol li a:hover, .pract .leftCol li a:focus, .pract .leftCol li.selected a {
    background: #0C6B8E url(/images/leftcol-a-grey.gif) no-repeat bottom left;
}

.leftCol li a:hover span, .leftCol li a:focus span, .leftCol li.selected a:link span, .leftCol li.selected a:visited span {
    background: url(/images/leftcol-li-purp.gif) no-repeat top left;
}

.leftCol li a:hover, .leftCol li a:focus, .leftCol li.selected a {
    background: #0C6B8E url(/images/leftcol-a-purp.gif) no-repeat bottom left;
}

.leftCol li li a, .leftCol li li a:link, .leftCol li li a:visited {
    color: #0C6B8E !important;
}

.leftCol li ul{
    padding: 0 0 15px 15px;
    margin-left: 0;
}

/*------------- breadcrumb -----------------------*/
.breadcrumb{
    margin: 0 0 10px 0;
}

.breadcrumb li{
    display:inline;
    list-style: none;
}

.breadcrumb li a{
    background:transparent url(/images/blue-arrow.gif) no-repeat right center;
    padding-right:14px;
}

/*------------- homepage -----------------------*/
.home h1 {
    padding: 10px 0 40px 10px;
}

.home h2 {
    padding: 10px 0 20px 10px;
}

.home .contentWrap {
    padding-bottom: 80px;
}

.home a:link, .home a:visited{
    color: #fff;
}

/*------------- box -----------------------*/
.box{
    float: left;
    width: 199px;
}

.box h2{
    font-size: 1.4em;
}

.box h2 a{
    display: block;
    padding: 175px 10px 10px 20px;
    color: #fff;
}

.box p{
    padding: 0px 20px 20px;
    color: #fff;
    font-size: 1.2em;
    min-height: 95px;
}

.box a:link, .box a:visited {
    text-decoration: underline;
}

.box a:hover, .box a:focus {
    text-decoration: none;
}

.home .box.kids{
    background: red url(/images/kids-bg.gif) repeat-y;
}

.home .box.kids h2    {
    background: url(/images/kids-h2-bg.gif) no-repeat top left;
}

.home .box.kids p{
    background: url(/images/kids-p-bg.gif) no-repeat bottom left;
}

.home .box.teen{
    background: green url(/images/teen-bg.gif) repeat-y;
}

.home .box.teen h2{
    background: url(/images/teen-h2-bg.gif) no-repeat top left;
}

.home .box.teen p{
    background: url(/images/teen-p-bg.gif) no-repeat bottom left;
}

.home .box.parent{
    background: green url(/images/parent-bg.gif) repeat-y;
}

.home .box.parent h2{
    background: url(/images/parent-h2-bg.gif) no-repeat top left;
}

.home .box.parent p{
    background: url(/images/parent-p-bg.gif) no-repeat bottom left;
}

.home .box.pract{
    background: green url(/images/pract-bg.gif) repeat-y;
}

.home .box.pract h2{
    background: url(/images/pract-h2-bg.gif) no-repeat top left;
}

.home .box.pract p{
    background: url(/images/pract-p-bg.gif) no-repeat bottom left;
}
.home .box.pet{
    width: 154px;
    background: green url(/images/pet-bg.gif) repeat-y;
}

.home .box.pet h2{
    background: url(/images/pet-h2-bg.gif) no-repeat top left;
}

.home .box.pet p{
    background: url(/images/pet-p-bg.gif) no-repeat bottom left;
}

/*--------------------- internal links -----------------------------*/
.links {
    margin-left: 0;
    padding-top: 40px;
    clear: both;
}

.links li {
    float: left;
    list-style: none;
    width: 157px;
    margin-right: 2px;
    font-size: 1.2em;
    font-weight: bold;
}

.links li a:link, .links li a:visited {
    background: #0C6B8E;
    color: #fff !important;
}

.links li a:hover, .links li a:focus {
    text-decoration: underline;
}

.links a:link, .links a:visited, .links a:hover, .links a:focus {
    text-align: center;
    display: block;
    width: 137px;
    padding: 15px 10px;
    background: #0C6B8E url(/images/link-span-red.gif) no-repeat top left;
}

.links li{
    background: url(/images/link-red.gif) no-repeat bottom left;
    width: 157px;
}

.links .red{
    background: #0C6B8E  url(/images/link-red.gif) no-repeat bottom left;
}

.links .red a:link, .links .red a:visited{
    background: url(/images/link-span-red.gif) no-repeat top left;
}

.links .green{
    background: #0C6B8E  url(/images/link-green.gif) no-repeat bottom left;
}

.links .green a:link, .links .green a:visited{
    background: url(/images/link-span-green.gif) no-repeat top left;
}

.links .grey{
    background: #0C6B8E  url(/images/link-grey.gif) no-repeat bottom left;
}

.links .grey a:link, .links .grey a:visited{
    background: url(/images/link-span-grey.gif) no-repeat top left;
}

.links .purp{
    background: #0C6B8E  url(/images/link-purp.gif) no-repeat bottom left;
}

.links .purp a:link, .links .purp a:visited{
    background: url(/images/link-span-purp.gif) no-repeat top left;
}

.links .orange{
    background: #0C6B8E  url(/images/link-orange.gif) no-repeat bottom left;
}

.links .orange a:link, .links .orange a:visited{
    background: url(/images/link-span-orange.gif) no-repeat top left;
}

/*--------------------- latest speach bubbles -----------------------------*/
.latest{
    float: right;
    width: 210px;
}

.latest h2{
    text-align: center;
}

.latest ul{
    margin-left: 0;
}

.latest li{
    list-style: none;
    margin: 0 2px 5px;
    text-align: center;
}

.latest li a{
    color: #fff !important;
    display: block;
    width: 210px;
    padding: 0 0 10px;
    background: url(/images/bubble-blue-bottom.gif) no-repeat bottom left;
}

.latest li a span{
    display: block;
    width: 190px;
    padding: 10px;
    background: url(/images/bubble-blue-top.gif) no-repeat top left;
}

.latest li.alt a{
    background: url(/images/bubble-purp-bottom.gif) no-repeat bottom left;
}

.latest li.alt a span{
    background: url(/images/bubble-purp-top.gif) no-repeat top left;
}

/*--------------------- wide pages -----------------------------*/
.wide .mainContent{
    width: 944px;
    min-height: 400px;
}

.wide .links{
    width: 800px;
    margin: 0 auto;
    margin-bottom: 100px;
    float: none;
    
}
/*--------------------- forms -----------------------------*/
.formWrap{
}

.formWrap .fRow{
    float: left;
    clear: left;
    padding: 5px 0;
}

.formWrap .fRow label{
    width: 150px;
    float: left;
}

.formWrap .fRow .button{
    margin-left: 150px;
}

.fRow ul{
    margin-left: 0;
}

.fRow li{
    display: inline;
    list-style: none;
}

.forum{
    float: left;
    clear: left;
}

.forum .fRow{
    width: 600px;
}

.forum textarea{
    margin-left: 150px;
}

.forum h2{
    margin-top: 20px;
}

/*--------------------- innerCol -----------------------------*/
.innerCol{
    float: left;
    width: 315px;
}

.innerCol.alt{
    margin-left: 10px;
}

/*--------------------- info -----------------------------*/
.info{
}

.info h2{
    width: 624px;
    padding: 10px;
    background: url(/images/info-top-bg.gif) no-repeat top left;
}

.info ul{
    width: 614px;
    margin-left: 0;
    padding: 0 10px 10px 20px;
    background: url(/images/info-bot-bg.gif) no-repeat bottom left;
}

.info li{
    padding: 2px 0;
}

/*--------------------- calendar header --------------------------*/
.calHeader {
    margin: 0;
    padding: 0;
    width: 300px;
    background: #0C6B8E;
    color: #fff;     
    font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
.calHeader span 
{
    padding: 0 20px;
}

/*--------------------- calendar ---------------------------------*/
.calNav, .calNav a {
    font-weight: bold;
    color: #fff !important;    
    text-align: left;
    text-decoration: none;
}

caption span{
    padding: 0 20px;
}

.wrap{
    float: left;
    margin-bottom: 20px;
}

.calendar {
    float: left;
    width: 300px;
    border-left: 1px solid #A2ADBC;
    font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #616B76;
    text-align: center;
    background-color: #fff;
}

.calendar caption {
    margin: 0;
    padding: 0;
    width: 300px;
    background: #0C6B8E;
    color: #fff;     
    font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}

.calendar th {
    font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #616B76;
    background: #D9E2E1;
    border-right: 1px solid #A2ADBC;
    border-bottom: 1px solid #A2ADBC;
    border-top: 1px solid #A2ADBC;
}

.calendar .today,.calendar td.today a,.calendar td.today a:link,.calendar td.today a:visited {
    color: #F6F4DA;
    font-weight: bold;
    background: #A00067;
}

.calendar td {
    width:14%;
    border-right: 1px solid #A2ADBC;
    border-bottom: 1px solid #A2ADBC;
    height: 40px;
    text-align: center;
    background: url(/images/bg_calendar.gif) no-repeat right bottom;
}

.calendar td a {
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 10px 0;    
}

.calendar td a:link,.calendar td a:visited {    
    background: url(/images/bg_calendar.gif) no-repeat;
}

.calendar td a:hover,.calendar td a:focus, .calendar td a:active {
    text-decoration: underline;
    background: url(/images/bg_calendar.gif) no-repeat right top;
}

.key{
    float: left;
    width: 200px;
    border: 1px solid #DCDCDC;
    padding: 10px 0 10px 10px;
}

.key span{
    display: block;
    float: left;
    clear:left;
    padding: 10px 15px;
    margin: 0 5px 5px 0;
    border: 1px solid #A2ADBC;
}

.key span.today{
    color: #F6F4DA;
    font-weight: bold;
    background: #A00067;
}

.key span.event{
    background: url(/images/bg_calendar.gif) no-repeat;
    font-weight: bold;
    color: #0C6B8E;
}

.key p{
    float: left;
    padding: 10px 0 0 0;
    width: 150px;
}

/*--------------------- noticeboards -----------------------------*/
.top, .bottom{
    float: left;
    padding: 10px;
    margin-top: 10px;
    width: 622px;
    background: #0C6B8E url(/images/top-bg.gif) no-repeat top left;
    text-align: right;
}

.bottom{
    background: #0C6B8E url(/images/bottom-bg.gif) no-repeat bottom left;
    margin: 0 0 1em 0;
}

.top h2{
    float: left;
    padding: 0;
    color: #fff;
}

.top a, .bottom a{
    color: #fff !important;
    background: #9E0065;
    padding: 3px;
    border: 1px solid #fff;
}

.noticeboard{
}

.noticeboard{
    float: left;
    width: 642px;
    border: 1px solid #ddd;
    border-width: 1px 0 0 1px;
}

.noticeboard caption{
    background: #0C6B8E;
    color: #fff;
    width: 642px;
    text-align: left;
    font-size: 1.3em;
    font-weight: bold;
    padding: 3px;
}

.noticeboard th{
    text-align: left;
    color: #000;
    background: #ddd;
}

.noticeboard td, .noticeboard th{
    padding: 3px;
    border: 1px solid #ddd;
    border-width: 0 1px 1px 0;
    vertical-align: top;
}

.noticeboard td span{
    font-weight: bold;
}

.noticeboard td.center, .noticeboard th.center{
    text-align: center;
}

.noticeboard .firstPost td{
    color: #000;
    border-top: 2px solid #9E0065;
    border-bottom: 2px solid #9E0065;
}

.noticeboard-topic 
{
    clear:both;
    width: 642px;
    color:#000;
    background-color:#ddd;
    border-top: 2px solid #9E0065;
    border-bottom: 2px solid #9E0065;
    padding: 0;
}

.noticeboard-topic p 
{
    padding: 3px;
}

/*--------------------- pagination -------------------------------*/
.pagination{
    margin-left: 0;
    padding: 10px 0;
}

.pagination li{
    list-style-type: none;
    display: inline;
}

.pagination a{
    padding: 0 5px;
    border: 1px solid #8AB8C8;
    padding-bottom: 1px;
}

.pagination a.currentpage{
    background: #9E0065;
    color: #FFF !important;
    border-color: #9E0065;
    font-weight: bold;
}

.pagination .disablelink{
    background-color: white;
    text-decoration: none;
    cursor: default;
    color: #555;
    border-color: #555;
    font-weight: normal;
}

/*--------------------- treasure hunt -----------------------------*/
.hunt{
    padding: 7px;
    width: 122px;
    height: 122px;
    border: 2px solid #A00067;
    text-align: center;
}

.hunt span{
    display: block;
    font-size: 1.4em;
    font-weight: bold;
    color: #BB0000;
    padding: 0 0 5px;
}

/*--------------------- logos -----------------------------*/
.logos li{
    display: inline;
    padding: 5px;
}

/*--------------------- site map -----------------------------*/
.sitemap li{
    padding: 2px;
    margin-left: 1em;
}

.sitemap li li li li{
    list-style: disc;
}

/*--------------------- random stuff -----------------------------*/
img.left{
    padding: 0 10px 10px 0;
}

div.left{
    width: 420px;
    clear: left;
}

.error {
    clear: both;
    color:#FF0000;
}

.errorPanel {
    clear: both;
    background-color:#fff;
    border: 1px solid #f00;
    padding: 5px; 
    margin: 10px 0 5px 0;
} 

.errorPanel p {
    color:#f00;
}

.hidden {
    display:none;
}