/*
 * $Id:$
 *
 * A CSS file for laying out the page in general
 */

.clear {
    clear: both;
}

.offscreen {
  position: absolute;
  left: -2000px;
  z-index: -10;
}

#page {
    position: relative;
    margin: 10px auto 30px auto;
    width: 1000px;
    background-color: white;
    color: #111111;
}

.corner {
    width: 5px;
    height: 6px;
    background-repeat: no-repeat;
    position: absolute;
}


#top-left-corner {
    top: 0px;
    left: 0px;
    background-image: url(../images/corners/tl.png);
}
#top-right-corner {
}
#bottom-left-corner {
    bottom: 0px;
    left: 0px;
    background-image: url(../images/corners/bl.png);
}
#bottom-right-corner {
    bottom: 0px;
    right: 0px;
    background-image: url(../images/corners/br.png);
}

#content {
    padding: 6px 10px 6px 10px;
    min-height: 440px;
    height:auto !important;
    height: 440px;
    position: relative;
}


#content .pretty li {
    background-image: url(../images/pages/bullet.png);
    background-repeat: no-repeat;
    padding: 0px 0px 15px 12px;
    background-position: 0px 7px;
}

.spinner-container {
    position: relative;
}

.spinner {
    background-image: url(../shared/images/loading/mozilla_blu.gif);
    background-repeat: none;
    background-color: white;
    width: 16px;
    height: 16px;
    display: none;
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 200;
}

.movie-container {
    background-color: black;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.movie-container .the-container {
    position: absolute;
    top: 4px;
    left: 4px;
    color: white;
    font-size: 80%;
}

.movie-container .corner {
    position: absolute;
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
}

.movie-container {
  border: 2px solid black;
  border-radius: 10px;
}

.pager {
    clear: both;
}

.float-left, .column {
    float: left;
}

.float-right {
    float: right;
}

.video-message {
    position: absolute;
    width: auto;
    font-size: 9px;
    background-color: #FFF77F;
    color: #0A002E;
    border: 1px solid black;
    padding: 2px;
}

.new {
    font-size: 10px;
    background-color: #FEFE1A;
    text-transform: uppercase;
}



.columns  li {
    padding: 5px;
    list-style-type: none;
    background-image: none;
}

.columns  .list {
    float: left;
}

.columns  h2 {
    background-image: url(../images/tables/gray-header-33px.png);
    background-repeat: repeat-x;
    color: white;
    text-transform: uppercase;
    font-size: 15px;
    padding: 4px;
    font-weight: bold;
}


.columns  .sep {
    width: 1px;
    min-height: 400px;
    border-right: 3px solid #CCCCCC;
    padding-left: 10px;
    margin-right: 10px;
    float: left;
}



.pricing {
    width: 520px;
    color: #333333;
}

.pricing .overview {
    border-top: 3px solid #CCCCCC;
    border-bottom: 3px solid #CCCCCC;
}

.pricing .overview .prices {
    float: right;
    font-size: 18px;
    color: black;
}

.pricing .overview .prices td {
    padding: 5px;
}

.pricing .overview {
    padding: 20px;
}

.pricing .overview p {
    width: 215px;
}

.pricing h4 {
    font-family: Arial Black;
    font-size: 25px;
}

.pricing .section {
    border-bottom: 2px solid #CCCCCC;
    padding: 10px 20px 10px 20px;
}

.pricing .section h4 {
    width: 130px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    margin-right: 32px;
}
.pricing  .student h4 {
    color: #C4162D;
}

.pricing .parent h4 {
    color: #0707D2;
}

.pricing .community h4 {
    color: #5C1C98;
}

.pricing .section p {
    margin: 5px 0px 0px 0px;
}

.pricing .section .options .opt label {
    float: none;
    width: auto;
}


.pricing .section .options .opt {
    float: left;
    width: 100px;
    font-family: Arial Black;
    font-size: 12px;
    text-transform: uppercase;
}

.pricing .info {
    margin: 0px 20px 0px 20px;
}

.hanging-indent-25 li {
    padding-left: 25px;
    text-indent: -25px;
    padding-bottom: 24px;
}

li.left-arrow {
    background-image: url("../images/pages/left-arrow.png");
    background-repeat: no-repeat;
    padding-left: 23px;
    padding-bottom: 15px;
}


li.right-arrow {
    background-image: url("../images/pages/right-arrow.png");
    background-repeat: no-repeat;
    padding-left: 23px;
    padding-bottom: 15px;
}

.medskip {
    clear: both;
    height: 15px;
}

.close-window-link {
   text-align: center;
   margin: 5px auto;
   width: 150px;
   padding: 5px;
   background-color: #FEFF8F;
   border: 1px solid #666666;
}

.hidden {
    display: none;
}

.tutoring-icon {
    background-repeat: no-repeat;
    background-image: url(../images/layout/tutoring.sprite.png?xcache=1);
    display: block;
    text-indent: -9999px;
    clear: both;
    margin-right: 10px;
}
.tutoring-icon.online {width: 97px; height: 72px; background-position: 0px 0px; }
.tutoring-icon.help {width: 100px; height: 55px; background-position: -99px 0px; }
.tutoring-icon.tutors {width: 100px; height: 93px; background-position: -201px 0px; }
.tutoring-icon.cost {width: 100px; height: 84px; background-position: -303px 0px; }
.tutoring-icon.button {width: 161px; height: 51px; background-position: -405px 0px; }

.online-tutoring p {
    margin-top: 9px;
    float: left;
    width: 660px;
}

.online-tutoring p > b {
    display: block;
}

.online-tutoring .testimonials {
    margin-left: 29px;
    color: #E23126;
}

.online-tutoring .testimonials h2 {
    color: #E23126;
}

.teacher-resources .resource {
  margin: 0px 10px 20px 10px;
}

.breadcrumbs {
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}


#container .highlight {
  border: 1px solid #444444;
  background-color: #30B457;
  padding: 10px;
  color: #333;
  font-weight: bold;
}


h2 > .tags {
  font-size: 15px;
  float: right;
}

h2 > .tags a {
  color: #30b457;
  border: 1px solid #30b457;
  padding: 4px;
  margin: 0px 5px;
}

h2 > .tags a.selected {
  background-color: #3FC167;
  color: white;
}

.cols > .col {
  box-sizing: border-box;
  float: left;
}

.blog-faq-holder h3 .tags a.selected {
  color: black;
}

.leading { margin-top: 10px; }
.leading2 { margin-top: 20px; }
.leading3 { margin-top: 30px; }
.following { margin-bottom: 10px; }
.following2 { margin-bottom: 20px; }
.following3 { margin-bottom: 30px; }

.cols > .col.w50 { width: 50%; }
.cols > .col.w25 { width: 25%; }
.cols > .col.w75 { width: 75%; }
.cols > .col.w33 { width: 33.333333333%; }
.cols > .col.w16 { width: 16.666666666%; }

.w100 { width: 100% }

.basic-table table, table.basic {
  width: 100%;
  border: 2px solid #222;
}

.basic-table table td, .basic-table table th,
table.basic td,  table.basic th
 {
  border-bottom: 2px solid #222;
  padding: 5px 10px;
}


.basic-table table th,
table.basic th {
  color: white;
  background-color: #64A92E;
}

.basic-table table tr:hover td,
table.basic tr:hover td {
  background-color: yellow;
}

label.plain {
  display: inline;
  width: auto;
}

ul.basic {
  list-style: none;
}