/* CSS rules to be used within EditLive should be placed between these two comments */
/* EditLive Styles~ */
/* ~EditLive Styles */

/* ----------------------------------------------------------------------------

  To target a specific version of IE use the following prefix to the CSS selector:

  body.ie6 - Targets IE 6 or earlier
  body.ie7 - Targets IE 7
  body.ie8 - Targets IE 8
  body.ie9 - Targets IE 9 or later

  Font Sizes - http://developer.yahoo.com/yui/3/cssfonts/
  
  Pixels    Percent
    10        77
    11        85
    12        93
    13        100
    14        108
    15        116
    16        123.1
    17        131
    18        138.5
    19        146.5
    20        153.9
    21        161.6
    22        167
    23        174
    24        182
    25        189
    26        197
    
/* Resets & overrides --------------------------------------------------------- */
html { background: none; }

/* Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding
   it when the page doesn't reach below the fold, thus creating an undesireable "jump".
   This "fixes" the jump by keeping the scroll bar displayed at all times. */
html { overflow-y: scroll; }

/* Links & type --------------------------------------------------------------- */
body {
  background: #CCC;
/*     background: #4C6795 url(/vimages/L10/bodyBG.jpg) repeat-x; */
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

/* Force the font size to be 100% (13px - see comments above). If OS font settings are increased in size,
   the font for the site in IE6-7 also increased. */
body.ie6, body.ie7 {
  font-size: 13px;
}

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

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

/* Header --------------------------------------------------------------------- */
#hd {
}

#hd1 {
}

#hd2 {
  background: transparent url(/vimages/L10/dropShadowHeader.png) no-repeat center top;
  padding-top: 20px;
}

#hd3 {
  background-color: #470057;
  margin: 0 auto;
  width: 960px;
}

/* Body ----------------------------------------------------------------------- */
#bd {
}

#bd1 {
}

#bd2 {
  background: transparent url(/vimages/L10/dropShadowBody.png) repeat-y center top;
}

#bd3 {
  background-color: #fff;
  margin: 0 auto;
  width: 960px;
}

/* Footer --------------------------------------------------------------------- */
#ft {
}

#ft1 {
}

#ft2 {
  background: transparent url(/vimages/L10/dropShadowFooter.png) no-repeat center bottom;
  padding-bottom: 20px;
}

#ft3 {
  background-color: #470057;
  color: #fff;
  margin: 0 auto;
  width: 960px;
}

#ft3 a:link, #ft3 a:visited, #ft3 a:hover {
  color: #fff;
}

/* vbanner -------------------------------------------------------------------- */
#leaderBoard, #topBanner, #bottomBanner {
  text-align: center;
}

#leaderBoard2 {
  margin: 0 auto;
  width: 960px;
}

#leaderBoard p, #topBanner p, #bottomBanner p {
  margin-bottom: 0;
}

#topBanner {
  border-bottom: 1px solid #999;
  padding: 8px 0;
  text-align: left;
}

#topBanner.noBanner {
  display: none;
}

/* Top Banner News Ticker ----------------------------------------------------- */
#topBanner.ticker {
  border-top: 1px solid #fff;
  padding: 0;
}
  
#tbTicker {
  /* IE needs a background color - otherwise font anti-aliasing gets messed up during the fades */
  background-color: #fff;
  font-weight: bold;
  height: 34px;
  line-height: 34px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#tbTicker.tickerWarning {
  background-color: #900;
  color: #fff;
}

#tbTicker a:link, #tbTicker a:visited {
  color: #006bdc;
}

#tbTicker a:hover, #tbTicker a:active {
  color: #006bdc;
  text-decoration: underline;
}

#tbTicker.tickerWarning a:link, #tbTicker.tickerWarning a:visited, #tbTicker.tickerWarning a:hover, #tbTicker.tickerWarning a:active {
  color: #fff;
  text-decoration: underline;
}

#tbTicker .tickerTitle {
  color: #900;
  padding: 0 5px;
  text-transform: uppercase;
}

#tbTicker.tickerWarning .tickerTitle {
  color: #fff;
}

#tbTicker .tickerBar {
  background-color: #fff;
  border-left: 1px solid #fff;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#tbTicker.tickerWarning .tickerBar {
  background-color: #900;
  border-left: 1px solid #900;
}

#bottomBanner {
  clear: both;
}

/* Navigation Menu ------------------------------------------------------------ */
#navIndicator {
  background: transparent url(/vimages/L10/navIndicator.png) no-repeat center top;
  height: 35px; /* Image height */
  position: absolute;
  z-index: 2;
}

/* 1st-level */
#nav {
  background: #470057 url(/vimages/L10/navBG.jpg) repeat;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#nav li {
  display: inline;
  float: left;
  margin: 0;
  padding: 0;
}

#nav a {
  color: #fff;
  margin: 0;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

#nav a span {
  display: block;
  padding: 7px 9px 12px;
  position: relative;  /* must have position set to anything other than static to use z-index */
  z-index: 3;          /* raises the z-index of the line item 3 levels all other elements */
}

/* Use this rule to change the style of the "selected" top-level section */
#nav a.selected span.top {
  color: #fff;
}

#nav.noscript li:hover span.top, #nav.noscript a.selected span.top {
  background: transparent url(/vimages/L10/navIndicator.png) no-repeat center top;
  color: #fff;
}

/* 2nd-level */
#nav li ul {
  background-color: #E1AA05;
  border: 1px solid #E1AA05;  /* Use border for "beveled" appearance */
  left: -999em;               /* Better than 'display:none;' for accessibility */
  line-height: normal;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 185px;
  z-index: 4;
}

#nav.noscript li:hover ul {
  left: auto;
}
body.ie6 #nav, body.ie7 #nav { behavior: url(/javascripts/ie/cssHoverFix.htc); }

#nav ul li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.ie6 #nav ul li { float: left; width: 185px; } /* IE6 whitespace bug */

#nav ul a {
  white-space: normal;
}

#nav ul a span {
  border-top: 1px solid #f3c53c; /* Use top & bottom border for "beveled" appearance */
  border-bottom: 1px solid #bb8e07;
  display: block;
  padding: 4px 4px 4px 8px;
}

#nav ul li.last a span {
  border-bottom: none;
}

#nav li span.navArrow {
  background: transparent url(/vimages/L10/navArrow.gif) no-repeat 177px 50%;
  padding: 4px 12px 4px 8px;
}

#nav li span.left {
  background-image: url(/vimages/L10/navArrowLeft.gif);
  background-position: 4px 50%;
  padding: 4px 4px 4px 14px;
}

#nav ul li:hover span, #nav.noscript ul li:hover span {
  background-color: #470057;
  border-top: 1px solid #470057;
}

#nav ul li a.selected span, #nav.noscript ul li a.selected span {
  background-color: #470057;
  border-top: 1px solid #470057;
  cursor: default;
}

/* 3rd-level */
#nav li ul ul {
  position: absolute;
  top: 0;
}

#nav.noscript li:hover ul ul {
  left: -999em;
}

#nav ul li:hover li span, #nav.noscript ul li:hover li span {
  background-color: #E1AA05;
  border-top: 1px solid #f3c53c;
}

#nav ul ul li:hover span, #nav.noscript ul ul li:hover span {
  background-color: #470057;
  border-top: 1px solid #470057;
}

#nav ul ul li a.selected span, #nav.noscript ul ul li a.selected span {
  background-color: #470057;
  border-top: 1px solid #470057;
  cursor: default;
}

#nav.noscript li li:hover ul {
  left: 100%;
}

#nav ul.level3 li a span {
  border-bottom: 1px solid #440c0d;
}

#nav ul.level3 li.last a span {
  border-bottom: none;
}

/* Masthead ------------------------------------------------------------------- */
#masthead {
  background: transparent url(/vimages/L10/masthead.png) no-repeat;
  height: 250px;
  position: relative;
  width: 960px;
}

/* logo ----------------------------------------------------------------------- */
#logo {
  display: block;
  height: 150px;
  left: 220px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999em;
  top: 19px;
  width: 160px;

/*   outline: 1px solid #fff; /* For debugging - aligning clickable area with logo */ */
}

#logoImage {
  display: block;
  height: 100%;
  width: 100%;
}

/* Image Rotator -------------------------------------------------------------- */
#imgRotator {
  background-color: #CCC;
  float: right;
  height: 250px;
  position: relative;
  width: 370px;
}

#imgRotator img {
  left: 0;
  position: absolute;
  top: 0;
}

#imgRotatorMask {
  background: transparent url(/vimages/L10/mastheadMask.png) no-repeat;
  float: right;
  height: 250px;
  position: absolute;
  right: 0;
  top: 0;
  width: 370px;
  z-index: 2;
}
body.ie6 #imgRotatorMask { behavior: url(/javascripts/ie/iepngfix.htc); }

/* Content -------------------------------------------------------------------- */
#content {
  /* Faux column color - 2nd column */
  background: transparent url(/vimages/L10/contentBG.jpg) repeat-y right top;
  position: relative; /* Need an anchor for the "social media" bar which will be at the bottom of the 2nd column */
}

/* Main Content --------------------------------------------------------------- */
#contentMain {
  background-color: #fff;
  float: left;
  padding: 0 20px;
  width: 550px; /* 590 - (20 * 2) = 550 */
}

/* Accomodate Calendar and Archive page - no 2nd column */
#contentMain.wideload {
  width: 920px;
}

/* Sidebar Content ------------------------------------------------------------ */
#contentSide {
  float: right;
  width: 370px;
}

#sideHd {
  background-color: #E1AA05;
  border-bottom: 1px solid #E1AA05;
  height: 34px;
  position: relative;
}

/* Search --------------------------------------------------------------------- */
#siteSearchForm {
  background: transparent url(/vimages/L10/searchBox.gif) no-repeat;
  height: 20px; /* Image height */
  left: 166px;
  padding: 2px 0 0 8px;
  position: absolute;
  top: 8px;
  width: 175px; /* Image width */
}

#siteSearchForm label {
  display: none;
}

#siteSearchForm .textInput {
  border: 0;
  float: left;
  outline: none;
  width: 145px;
}

#siteSearchForm #searchButton {
  padding: 2px 0 0 3px;
}

/* Sidebar Tabs --------------------------------------------------------------- */
#sideTabs {
  /* Need room at bottom of 2nd column for the social media bar */
  padding: 10px 25px 40px;
}

#sideTabs ul.tabsNav {
  background-color: #EBDCAD;
  border-bottom: 1px solid #EBDCAD;
  display: block;
  font-size: 123.1%; /* 16px */
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  list-style: none;
  margin: 0;
  padding: 0 0 3px;
}

#sideTabs ul.tabsNav li {
  border-right: 1px solid #fff;
  float: left;
  list-style: none;
  position: relative;
}

#sideTabs ul.tabsNav li.last {
  border-right: 0;
}

#sideTabs ul.tabsNav li a {
  background-color: #EBDCAD;
  color: #666;
  display: block;
  font-weight: bold;
  outline: 0;
  padding: 0 10px;
  text-decoration: none;
}
body.ie6 #sideTabs ul.tabsNav li a, body.ie7 #sideTabs ul.tabsNav li a { cursor: pointer; }

#sideTabs ul.tabsNav li a .fader {
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  
  background-color: #FFF;
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#sideTabs ul.tabsNav li a.selected {
  background-color: #EBDCAD;
  color: #470057;
}

#sideTabs .sidePanels {
  background-color: #ddd;
}

#sideTabs .sidePanel {
  /* IE needs a background color to prevent font anti-aliasing problems when jQuery fading */
  background-color: #EBDCAD;
}

/* vButtons ------------------------------------------------------------------- */
#vButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#vButtons li {
  border-bottom: 1px solid #fff;
  list-style: none;
  margin: 0;
  padding: 0;
}

#vButtons li a  {
  display: block;
  font-size: 123.1%;
  font-weight: bold;
  padding: 12px 10px;
  text-decoration: none;
}

#vButtons li a:hover {
  background-color: #470057;
  color: #fff;
}

/* Social Media Bar ----------------------------------------------------------- */
#socialMediaBar {
  background-color: #E1AA05;
  bottom: 0;
  position: absolute;
  right: 0;
  width: 370px; /* 2nd column width */
}

#socialMediaBar.wideload {
  background-color: #fff;
}

#socialMediaBar ul {
  list-style: none;
  margin: 0 0 0 25px;
  padding: 0;
}

#socialMediaBar.wideload ul {
  margin-left: 150px; /* This will need to be adjusted based on how many icons are in the bar */
}

#socialMediaBar li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 7px 10px 7px 0;
}

#socialMediaBar img {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  
  vertical-align: middle;
}

/* Breadcrumbs ---------------------------------------------------------------- */
#sectionName {
  border-bottom: 1px solid #999;
  color: #470057;
  font-size: 93%;
  font-weight: normal;
  margin: 0;
  padding: 9px 0;
  text-transform: uppercase;
}

/* Footer Row 1 (School Address & vList Signup -------------------------------- */
#ftRow1 {
  border-bottom: 1px solid #fff;
}

/* Footer Row2 (Copyright & Translation) -------------------------------------- */
#ftRow2 {
  padding: 0 0 1em;
}

/* School Address ------------------------------------------------------------- */
#schoolAddress {
  float: left;
  font-size: 116%; /* 15px */
  font-weight: bold;
  padding: 10px 0 0;
  text-align: center;
  width: 590px;
}

#schoolAddress .addressLine {
  margin: 0 0 8px;
}

#schoolAddress span {
  background: transparent url(/vimages/L10/bullet.png) no-repeat scroll left center;
  padding: 0 15px 0 22px;
}

#schoolAddress span.first {
  background-image: none;
  padding-left: 0;
}

#schoolAddress span.last {
  padding-right: 0;
}

/* vList Signup --------------------------------------------------------------- */
#vlist {
  float: right;
  padding: 0 0 10px;
  width: 370px;
}

#vlist form {
  float: left;
  padding: 10px 0 0 20px;
  width: 205px;
}

#vlist p {
  font-weight: bold;
  margin: 0 0 5px;
}

#vlist p.multiple {
  margin-top: 8px;
}

#vlist #email {
  background: transparent url(/vimages/L10/vlistEmailBox.png) no-repeat;
  border: 0;
  font-size: 85%; /* 11px */
  height: 18px;
  line-height: 18px;
  outline: 0;
  padding: 0 5px;
  width: 168px; /* (5 * 2) + 168 = 178 (Image width) */
}

#vlist input {
  vertical-align: middle;
}
body.ie6 #vlist #goButtonEmail { behavior: url(/javascripts/ie/iepngfix.htc); }

#vlist ul {
  display: inline;
  float: right;
  font-size: 93%; /* 12px */
  margin: 18px 35px 0 0;
  padding: 0;
  text-transform: lowercase;
}

#vlist.secureLoginSingle ul {
  margin-top: 8px;
}

#vlist.secureLoginMulti ul {
  margin-top: 12px;
}

#vlist a:link, #vlist a:visited, #vlist a:hover {
  text-decoration: underline;
}

/* Copyright & SOCS Links ----------------------------------------------------- */
#copyRight {
  float: left;
  font-size: 93%; /* 12px */
  margin: 0;
  padding: 14px 0;
  text-align: center;
  width: 590px;
}

#copyRight span {
  border-left: 1px solid #fff;
  padding: 0 7px;
}

#copyRight span.first {
  border-left: none;
  padding-left: 0;
}

#copyRight span.last {
  padding-right: 0;
}

#copyRight img {
  padding-top: 0;
  vertical-align: middle;
}
body.ie6 #copyRight img { behavior: url(/javascripts/ie/iepngfix.htc); }

/* Translation ---------------------------------------------------------------- */
#ft3 .translate {
  float: right;
  width: 370px;
}

#ft3 .translate form {
  padding: 10px 0 0 20px;
}

#ft3 .translate label {
  display: none;
}

#ft3 .translate p {
  float: left;
  line-height: 23px;
  margin: 0;
}

#ft3 .translate a {
  font-weight: bold;
  padding-right: 10px;
}

/* Misc ----------------------------------------------------------------------- */
#upgradeBrowser {
  padding: 1em 0;
}

#upgradeBrowser div {
  background-color: #600;
  border: 2px solid #000;
  font-size: 18px;
  margin: 0 auto;
  padding: 10px 5px 5px;
  text-align: center;
  width: 960px;
}

#upgradeBrowser p {
  color: #fff;
  margin: 0 0 5px;
}

#upgradeBrowser a:link, #upgradeBrowser a:visited, #upgradeBrowser a:hover {
  color: #f15d5d;
}

.hidden, .hiddenNav {
  display: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
body.ie6 .clearfix, body.ie7 .clearfix { zoom: 1; }