/*   SITE CORE STYLES
===================== */
html {
  font-size: 62.5%;
  background-color: #83bd4d; /* Please have a colour or image - background on html needed for javascript */
}

body {
  background: url(toptile.png) center top repeat-x;
  min-width: 980px;
  color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  font-family: 'Comic Sans MS', Chalkboard, ChalkboardSE-Regular, sans-serif;
}

/* Typography
 ============ */
h1, .xxlarge {
  font-size: 26px;
  font-size: 2.6rem;
}

h2, .xlarge {
  font-size: 22px;
  font-size: 2.2rem;
}

/* This is for block titles */
h2 {
  color: #1f52a3;
}

h3, .large {
  font-size: 20px;
  font-size: 2.0rem;
}

h4, .medium {
  font-size: 16px;
  font-size: 1.6rem;
}

h5, .small {
  font-size: 12px;
  font-size: 1.2rem;
}

h6, .xsmall {
  font-size: 11px;
  font-size: 1.1rem;
}

/* Text Highlight Colour
========================
These selection rule sets have to be separate. */
::selection  {
  background-color: #2b853c;
  color: ffff00;
}

::-moz-selection {
  background-color: #2b853c;
  color: ffff00;
}


/* Link Colours
 ============================ */
a {
  color: #1f52a3;
}

a:focus,
a:hover,
a:active {
  color: #ffff00;
}


/* ==========================
   Website Struture
 ============================ */
.container {
  background: url(container.png) center top no-repeat;
}

.inner-container {
  background: url(slither.png) center top repeat-y;
  position: relative;
  width: 980px;
  margin: 0 auto;
}

.main-header {
  background: url(header.png) center top no-repeat;
  position: relative;
  height: 256px;
}

.content-container {
  position: relative;
  background: url(watermark.png) center top no-repeat;
  min-height: 450px;
  padding: 45px;
  margin: 0;
}

/* Home link within the header */
.home-link {
  height: 78px;
  width: 208px;
  position: relative;
  display: block;
  text-indent: -9999px;
  z-index: 105;
  top: 0px;
  left: 390px;
}

/* Footer
 ======== */
.main-footer {
  position: relative;
  background: url(footer.png) center top no-repeat;
  height: 25px;
  margin: 0;
}

.main-footer p {
  position: absolute;
  margin: 0;
}

.main-footer a {
  color: #ffffff;
}

.main-footer a:focus, .main-footer a:hover {
  color: #ffff00;
}


/* Top Navigation Bar
 ==================== */
.helper-nav {
  position: absolute;
  text-align: right;
  height: 20px;
  width: 100%;
  z-index: 201;
  line-height: 1.8;
}

.helper-nav ul {
  padding: 1px 16px 11px 0;
}

.helper-nav li {
  display: inline;
  margin-left: 20px;
  margin-left: 2.0rem;
}

.helper-nav a {
  color: #1f52a3;
}

.helper-nav a:focus,
.helper-nav a:hover,
.helper-nav a:active {
  color: #ffff00;
}


/* Page Title
 ============ */
.page-title {
  display: none
}


/* Breadcrumbs
============== */
.breadcrumbs {
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 10px;
  z-index: 103;
}

.breadcrumbs > li:before {
  color: #ffff00;
}

.breadcrumbs li a {
  color: #ffff00;
  /* Add a color here to override the default link colour */
}

.breadcrumbs li a:focus, .breadcrumbs li a:hover {
  color: #1f52a3;
  /* Add a color here to override the default link colour */
}


/* ============================
   NAVIGATION
=============================== */
.main-nav {
    height: 235px;
    left: 64px;
    margin: 0 auto;
    outline: medium none;
    position: absolute;
    top: 58px;
    width: 807px;
    z-index: 99;
}

.main-nav ul {
  padding: 0;
  margin: 0;
}

.main-nav ul li {
  position: relative;
  display: inline;
  float: left;
  background-repeat: no-repeat!important;
  background-position: left top;
  text-indent: -9999px;
  cursor: pointer;
}

.main-nav ul li a {
  color: #FFF ;
  display: block;
  height: 100%;
  width: 100%;
  text-shadow: 2px 2px 1px #000;  /* Remove text-shadow if not required */
}


/* Change the background position to show the correct image for each navigation button within the sprite */

.main-nav .ps_topic_slug_about-us {
    background: url("aboutus.png") repeat scroll 0 0 transparent;
    height: 142px;
    left: 0px;
    top: 96px;
    width: 132px;
    z-index: 199;
}

.main-nav .ps_topic_slug_our-school {
    background: url("ourschool.png") repeat scroll 0 0 transparent;
    height: 185px;
    left: 54px;
    top: 44px;
    width: 128px;
    z-index: 198;
}

.main-nav .ps_topic_slug_parents {
    background: url("parents.png") repeat scroll 0 0 transparent;
    height: 227px;
    left: 78px;
    top: 26px;
    width: 141px;
    z-index: 197;
}

.main-nav .ps_topic_slug_children {
    background: url("children.png") repeat scroll 0 0 transparent;
    height: 166px;
    left: 100px;
    top: 70px;
    width: 125px;
    z-index: 196;
}

.main-nav .ps_topic_slug_our-community {
    background: url("community.png") repeat scroll 0 0 transparent;
    height: 181px;
    left: 122px;
    top: 59px;
    width: 160px;
    z-index: 195;
}

.main-nav ul li:focus, .main-nav ul li:hover {
  background-position: right top;
}


/* Pop Ups
========== */

/* Styles for ALL pop-up menus added here, styles for individual menus added below */
.main-nav ul li ul {
    display: none;
    left: 20px;
    position: absolute;
    text-align: center;
    top: 145px;
    z-index: 102;
}

.main-nav ul li:focus ul, .main-nav ul li:hover ul {
  display: block;
}

.main-nav ul li:focus ul ul, .main-nav ul li:hover ul ul {
  display: none;
}

.main-nav li ul li {
  display: block;
  height: auto; /* Resets the height from the main li buttons */
  width: 100%;
  margin: 0;
  padding: 0;
  text-indent: 0;
  background: none;
}


.main-nav li ul li:focus, .main-nav li ul li:hover {
  background-color: #ffff00; /* Applies a background color for pop-up li's */
}



/* To specifically style each pop-up, eg individual Background, Border etc
 DELETE IF NOT NEEDED    */
.main-nav .ps_topic_slug_about-us ul {
    background-color: #3399FF;
    left: 16px;
    top: 104px;
    width: 110px;
}

.main-nav .ps_topic_slug_our-school ul {
    background-color: #FFCC00;
    left: 15px;
    top: 140px;
    width: 110px;
}

.main-nav .ps_topic_slug_parents ul {
    background-color: #FF6600;
    left: 0px;
    top: 45px;
    width: 122px;
}

.main-nav .ps_topic_slug_children ul {
    background-color: #FF6699;
    left: 20px;
    top: 115px;
    width: 100px;
}

.main-nav .ps_topic_slug_our-community ul {
    background-color: #9966CC;
    left: 25px;
    top: 138px;
    width: 110px;
}



 /* Add a color here to override the default link colour for each pop-up*/

.main-nav .ps_topic_slug_about-us ul a{
  color: #fff;
}

.main-nav .ps_topic_slug_our-school ul a{
  color: #993300;
}


.main-nav .ps_topic_slug_parents ul a{
  color: #fff;
}


.main-nav .ps_topic_slug_children ul a{
  color: #fff;
}


.main-nav .ps_topic_slug_our-community ul a{
  color: #fff;
}



/* To style the links in the pop up menus
 Styles for ALL menus added here, styles for individual menus added below */
.main-nav li ul li a {
  display: block;
  padding: 3px 0px;
  margin: 0;
  text-decoration: none;
  font-weight: bold;
  text-shadow: none;
}


/*To style the hover effects for the links in the pop up menus
Styles for ALL menus added here, styles for individual menus added below */
.main-nav li ul li a:focus, .main-nav li ul li a:hover {
  color: #ff0000;
}



/* Policy & PrimarySite Link
 =========================== */
.ps-policy-links {
  width: 980px;
  margin: 5px auto;
  color: #fff;
  position: relative;
  padding-bottom: 20px;
}

.ps-policy-list {
  list-style-type: none;
}

.ps-policy-list li {
  float: left;
  margin-right: 20px;
}

.ps-policy-links a {
  color: #fff;
}

.ps-policy-links a:focus, .ps-policy-links a:hover {
  color: #ffff00;
}


/* ========================
   UTILITY STYLES
=========================== */
.text-right {
  text-align: right;
  float: right;
}

.text-center {
  text-align: center;
  display: block;
}

.text-bold {
  font-weight: bold;
}

.text-hide {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.clear {
  clear: both;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}


/* ========================
   NEWS STYLES
=========================== */
.news-items {
  width: 740px;
}

.ps_activity-date-info {
  color: #ffff00;
}

.ps_form-search input[type="text"] {
  color: #437A99;
  border-color: #80AED8;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 8px rgba(25, 62, 83, 0.1) inset, 0px 0px 0px 3px rgba(155, 180, 195, 0.3);
}

.ps_form-search input[type="submit"]:focus, .ps_form-search input[type="submit"]:hover {
  color: #002D5A;
}


/* ========================
   ICON PAGE STYLES
=========================== */
.icon-box {
  position: relative;
  margin: 0 auto;
  padding: 0 0 40px 0;
  list-style-type: none;
  overflow: hidden;
  width: 758px;
}

.icon-box li {
  position: relative;
  display: inline; /* Fix IE Double-margin Float bug */
  float: left;
  text-align: center;
  font-weight: bold;
  /*text-indent: -9999px;*/
}

.icon-box a {
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-position: left top;
}

/* CLASS PAGES STYLES
===================== */
.classpages {
  width: 650px;
}

.classpages a {
    background-image: url("classes-icon.png");
    height: 5px;
    margin: 25px 23px 50px;
    padding: 110px 0px 0px;
    width: 116px;
}



.classpages a:focus, .classpages a:hover {
  background-position: right top;
}


/* CURRICULUM PAGES STYLES
========================== */
.curriculum {
  width: 650px;
}

.curriculum a {
    background-image: url("classes-icon.png");
    height: 5px;
    margin: 25px 23px 50px;
    padding: 110px 0px 0px;
    width: 116px;
}


.curriculum a:focus, .curriculum a:hover {
  background-position: right top;
}





/* KIDS ZONE STYLES
===================== */
.kidszone {
  width: 606px;
}

.kidszone ul {
  position: relative;
  margin: 0 auto;
}

.kidszone a {
  width: 121px;
  height: 18px;
  margin: 0 13px 15px 13px;
  padding: 130px 0 0 0;
}

.kidszone a:focus, .kidszone a:hover {
  background-position: right top;
}

.icon-box li.pushright {
  margin-left: 70px; /* to center the buttons - delete if not needed */
}

/* Kids' Zone Buttons
===================== */
.english  { background-image: url(english.png); }
.maths    { background-image: url(maths.png); }
.science  { background-image: url(science.png); }
.history  { background-image: url(history.png); }
.games    { background-image: url(games.png); }
.ks1links { background-image: url(kslinks1.png); }
.ks2links { background-image: url(kslinks2.png); }
.brain    { background-image: url(brainbuilders.png); }

/* For the Kidszone Iframe
==========================  */
.kidszone-content {
  position: relative;
  left: 0px;
  border-radius: 15px;
  top: 0;
  width: 605px;
  margin: 0 auto;
}

.kidszone-iframe {
  border: 3px solid #1f52a3;
  border-radius: 15px;
  background-color: #1f52a3;
}


/* ============================
   CALENDAR STYLES
=============================== */

/* Diary Detail
=============== */
.ps_event {
  background-color: #ccc;
}

.ps_calendar {
  background-color: #fff;
  color: #000;
}

.ps_calendar-month {
  background-color: #1f52a3;
}

.ps_event-title {
  color: #1f52a3;
}

.ps_event-desc { 
  font-size: 1.4rem;
  font-size: 14px;
  color: #000;
  padding-top: 2px;
}


/* ============================
  BUTTON STYLES
=============================== */

.ps-contact-form-error {
  color: #B94A48;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ps_form-blocks .ps_form-btn,
.ps_prev,
.ps_next {
  color: #fff;
  background: #3399ff;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 0px #1f52a3;
}

.ps_prev:focus,
.ps_prev:hover,
.ps_next:focus,
.ps_next:hover,
.ps_form-blocks .ps_form-btn:focus,
.ps_form-blocks .ps_form-btn:hover {
  color: #1f52a3;
  background-color: #cccccc;
}


/* ============================
  VIRTUAL TOUR STYLES
=============================== */
.virtual-tour {
  height: 530px;
  width: 100%;
}


/* ============================
  COOKIE INFORMATION STYLES
=============================== */
.ps_cookie-title {
  color: #1f52a3;
  background-color: #cccccc;
}

/* Google Translator */
#google_translate_element {
  position: absolute;
  height: 26px;
  top: 20px;
  left: 40px;
  z-index: 110;
}

.goog-te-gadget-simple {
  width: 168px;
  height: 30px;
  border: 1px solid #1F3278!important;
  border-radius: 4px;
}

.goog-te-gadget-simple span {
  display: inline-block;
  line-height: 2.4;
}

.goog-te-menu-value span:first-child {
  width: 112px;
}

.goog-te-menu-value span + img + span {
  color: #1F3278!important;
  border-left-color: #1F3278!important;
}

.goog-te-menu-value > span + img + span {
  height: 21px;
  line-height: 1.8;
  margin-top: 5px;
}

.goog-te-banner-frame {
  position: absolute!important;
  top: -40px!important;
}


/* IE STYLES
============ */

/* IE 7
======= */
.ie7 .main-footer {
  margin-bottom: -6px;
}


.ie7 a.text-right {
  margin-top: -20px;
}

.ie7 .breadcrumbs > li {
  margin-right: 10px;
}

/* IE 8
======= */
.ie8 {}

/* IE 9
======= */
.ie9 {}

/* IE
===== */
.ie {}