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

body {
  min-width: 980px;
  color: #0426a3;
  font-size: 15px;
  font-size: 1.5rem;
  font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
}

@font-face {
    font-family: 'vagrounded_btregular';
    src: url('https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/vagroundedbt-webfont.eot');
    src: url('https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/vagroundedbt-webfont.eot#iefix') format('embedded-opentype'),
         url('vagroundedbt-webfont.woff') format('woff'),
         url('vagroundedbt-webfont.ttf') format('truetype'),
         url('https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/vagroundedbt-webfont.svg#vagrounded_btregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

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

/* This is for block titles and the cookie info table headings */
h2,
.ps_cookie-title {
  color: #f32620;
}

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  {
  color: #F1F5FA;
  background-color: #312e69;
}

::-moz-selection {
  color: #F1F5FA;
  background-color: #312e69;
}


/* Link Colours
 ============================ */
a {
  color: #06f;
}

a:focus,
a:hover,
a:active {
  color: #f60;
  text-decoration: underline;
}


/* ==========================
   Website Struture
 ============================ */
.inner-container {
  position: relative;
  width: 980px;
  margin: 0 auto;
  background: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/sliver.png) center top repeat-y;
}

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

.content-container {
  position: relative;
  min-height: 360px;
  padding: 2px 30px 20px 216px;
  margin: 0;
  background: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/watermark.png) center top no-repeat;
}

/* Home link within the header */
.home-link {
  position: relative;
  display: block;
  top: 27px;
  left: 136px;
  width: 374px;
  height: 41px;
  text-indent: -9999px; /* Remove the border - Only present for visability */
  z-index: 105;
}

/* Footer
 ======== */
.main-footer {
  position: relative;
  height: 95px;
  margin: 0;
  background: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/footer.png) center top no-repeat;
}

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

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

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


/* Top Navigation Bar
 ==================== */
.helper-nav {
  position: absolute;
  top: 0px;
  right: 3px;
  line-height: 1.8;
  text-align: right;
  z-index: 101;
}

.helper-nav li {
  display: inline-block;
}

.helper-nav a {
  display: block;
  color: #312e69;
  text-align: center;
  padding: 3px 5px;
  border-radius: 2px;
}

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

/* ADDRESS 
========== */
.address {
  color: #fff6f7;
  position: absolute;
  top: 64px;
  left: 137px;
}

.address li {
  float: left;
  margin-right: 8px;
}

.address a {
  color: #fff6f7;
}

.address a:hover {
  color: #312e69;
}


/* Page Title
 ============ */
.page-title {
  position: relative;
  top: 0;
  left: 0px;
  font-weight: bold;
  line-height: 1.3;
}

/* Breadcrumbs
============== */
.breadcrumbs {
  margin-top: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

.breadcrumbs li a {
  color: #f32620;
}

.breadcrumbs li a:focus,
.breadcrumbs li a:hover {
  color: #0426A3;
}


/* ============================
   NAVIGATION
=============================== */
.main-nav {
  position: absolute;
  top: 160px;
  left: 5px;
  width: 150px; /*  Change width for horizontal nav  */
  height: auto;
  margin: 0 auto;
  outline: none;
  z-index: 101;
}

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

.main-nav ul li {
  position: relative;
  display: block;
  width: 173px;  /* Width of image/button */
  height: 53px;  /* Height of image/button */
  text-indent: -9999px;
  background: url(nav1.png); /* An image sprite with all navigation buttons in */
  background-repeat: no-repeat!important;
  background-position: left top;
  float: left;
  cursor: pointer;
  margin-bottom: 1px;
}

.main-nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Change the background position to show the correct image for each navigation button within the sprite */
.main-nav .home-btn {background-position: 0 0; z-index: 200;}
.main-nav .ps_topic_slug_general-information-about-rosetta { background-position: 0 -54px; z-index: 199; }
.main-nav .ps_topic_slug_information-for-children-at-rosetta { background-position: 0 -108px; z-index: 198; }
.main-nav .ps_topic_slug_published-information-about-rosetta { background-position: 0 -161px; z-index: 197; }
.main-nav .ps_topic_slug_our-wider-school-community { background-position: 0 -215px; z-index: 196; }
.main-nav .ps_topic_slug_inclusion-at-rosetta { background-position: 0 -268px; z-index: 195; }
.main-nav .mle-btn { background-position: 0 -321px; z-index: 194; }


.main-nav .home-btn:focus, .main-nav .home-btn:hover {background-position: right top;}
.main-nav .ps_topic_slug_general-information-about-rosetta:focus, .main-nav .ps_topic_slug_general-information-about-rosetta:hover { background-position: right -54px; }
.main-nav .ps_topic_slug_information-for-children-at-rosetta:focus, .main-nav .ps_topic_slug_information-for-children-at-rosetta:hover { background-position: right -108px; }
.main-nav .ps_topic_slug_published-information-about-rosetta:focus, .main-nav .ps_topic_slug_published-information-about-rosetta:hover { background-position: right -161px; }
.main-nav .ps_topic_slug_our-wider-school-community:focus, .main-nav .ps_topic_slug_our-wider-school-community:hover { background-position: right -215px; }
.main-nav .ps_topic_slug_inclusion-at-rosetta:focus, .main-nav .ps_topic_slug_inclusion-at-rosetta:hover { background-position: right -268px; }
.main-nav .mle-btn:focus, .main-nav .mle-btn:hover { background-position: right -321px; }


/* Pop Ups
========== */
/* Styles for ALL pop-up menus added here, styles for individual menus added below */
.main-nav ul li ul {
  position: absolute;
  display: none;
  top: 20px;
  left: 165px;
  text-align: center;
  border: solid 2px #000;
  border-radius: 0 5px 5px; /* Remove if navigation doesn't have a border radius */
  z-index: 102;
}

.main-nav ul li ul,
.main-nav ul li ul li {
  width: 130px;
}

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

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

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

.main-nav li ul li:first-child { /* Remove if navigation doesn't have a border radius */
  border-radius: 0px 2px 0 0; /* Applies a border radius to first li in pop-up */
}

.main-nav li ul li:last-child { /* Remove if navigation doesn't have a border radius */
  border-radius: 0 0 2px 2px; /* Applies a border radius to last li in pop-up */
}

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

.main-nav li ul li:only-child:focus,
.main-nav li ul li:only-child:hover { /* Remove if navigation doesn't have a border radius */
  border-radius: 0 2px 2px; /* Applies a border radius on focus/hover if it is the only item in the pop-up */
}

/* To specifically style each pop-up, eg individual Background, Border etc
 DELETE IF NOT NEEDED    */
.main-nav .ps_topic_slug_general-information-about-rosetta ul {background-color: #D12035;}
.main-nav .ps_topic_slug_information-for-children-at-rosetta ul {background-color: #366AB9;}
.main-nav .ps_topic_slug_published-information-about-rosetta ul {background-color: #FDD13E;}
.main-nav .ps_topic_slug_our-wider-school-community ul {background-color: #9A5EC1;}
.main-nav .ps_topic_slug_inclusion-at-rosetta ul {background-color: #008083;}


/* 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;
  width: auto;
  color: #fff;
  font-weight: bold;
  padding: 3px 7px;
  margin: 0;
}

/*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: #FEDB68;
}

/* Policy & PrimarySite Link
 =========================== */
.ps-policy-links {
  position: relative;
  width: 980px;
  height: 45px;
  color: #fff;
  padding-bottom: 5px;
  margin: 5px auto;
  font-size: 13px;
  font-size: 1.3rem;
}

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

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

.ps-policy-links a {
  color: #fff;
  border-bottom: 1px solid;
}

.ps-policy-links a:focus, .ps-policy-links a:hover {
  color: #FFFF00;
  text-decoration: none;
}


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

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

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

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

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


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

.ps_activity-date-info {
  color: #06f;
}

.ps_form-search input[type="text"] {
  color: #333;
  border-color: #0052CC;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 2px #E8EAED;
}

.ps_form-search input[type="submit"] {
  color: #06f;
}

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


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

.icon-box li {
  position: relative;
  display: inline; /* Fix IE Double-margin Float bug */
  font-weight: bold;
  text-align: center;
  word-wrap: break-word;
  float: left;
  overflow: hidden;
}

.icon-box a {
  position: relative;
  display: block;
  background-position: left top;
  background-repeat: no-repeat;
  width: 150px; /* Button width minus left and right padding */
  height: 40px; /* Button height minus top and bottom padding */
  padding: 155px 0px 0px;  /* To Position plain text within the button */
  margin: 25px 16px 10px;
  background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/icon.png);
}

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

/* CLASS PAGES STYLES
===================== */
/* Specifically style each button. eg. unique background images */
/* Classpage Icons - DELETE IF NOT NEEDED */
.ps_page_slug_foundation a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/fs.png); }
.ps_page_slug_year-2 a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/year2.png); }
.ps_page_slug_year-3 a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/year3.png); }
.ps_page_slug_year-4 a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/year4.png); }
.ps_page_slug_year-5 a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/year5.png); }
.ps_page_slug_year-6 a {background-image: url(https://primarysite-prod.s3.amazonaws.com/theme/Rosetta/year6.png); }


/* ============================
   CALENDAR STYLES
=============================== */
/* Diary Detail
=============== */
.ps_event {
  background-color: #B2D0FF;
}

.ps_calendar {
  background-color: #fff;
  width: 88px;
}

.ps_calendar-month {
  background-color: #312E69;
  width: 88px;
}

.ps_calendar-date {
  width: 88px;
}

.ps_event-title a {
  color: #312E69;
}

.ps_event-title a:hover {
  color: #06f;
}

.ps_event-desc {
  color: #333;
}


/* ============================
  BUTTON/CONTACT FORM STYLES
=============================== */
.ps_form-block-errorlist li {
  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;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  background: #C8131A;
  box-shadow: 3px 3px 3px #aaa; /* If you want to remove this style, put box-shadow: none; instead of completely removing it to override styles from the bass.min.css stylesheet*/
}

.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: #fff;
  background-color: #772144;
}


/* ============================
  SCROLL TO TOP BUTTON
=============================== */
.scroll-top {
  color: #929292;
  border: 1px solid #DFDFDF;
  border-bottom: none;
  background-color: #FAFAFA;
}

.scroll-top:hover {
  color: #312e69;
}

/* ============================
   Browser STYLES
=============================== */
/* firefox */
@-moz-document url-prefix() { 
  .address {
    font-size: 10px;
    font-size: 1.0rem;
    left: 132px;
  }
}

/* IE 7
======= */
.ie7 .helper-nav li {
  display: inline
}
.ie7 .main-footer {
  margin-bottom: -6px;
}

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

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

.ie7 .icon-box li {
  word-wrap: normal;
}

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

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

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