/* ========================================================
  SOCS Teacher Page Template
  Copyright 2010 FES LLC
  Design   - Spring
  Designer - Paul Tisdale
======================================================== */

@import '../shared/gallery.css?v=200812';
@import '../shared/sharing.css';

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

table.no-border-cell td {
  border: none;
}

/* Links & type ------------------------------------------------------------ */
body {
  background-color: #619a48;
  color: #1a4308;
  margin: 0;
}

/* Design framework images ------------------------------------------------- */
#wrap { /* Background watermark */
/* If NOT using a watermark image for the background (a solid white image doesn't count as a watermark), comment out the
   following rule and use a single "background-color" rule instead. */
/*  background: #fff url(images/watermark.png); */
  background-color: #fff;
  min-width: 990px; /* 1024x768 min screen rez */
}

#wrap2 { /* Left border */
  background: transparent url(images/leftBG.jpg) repeat-y;
}

#wrap3 { /* Right border */
  background: transparent url(images/rightBG.jpg) repeat-y right top;
}

#wrap4 { /* Top border */
  background: transparent url(images/topBG.jpg) repeat-x;
}

#wrap5 { /* Bottom border */
  background: transparent url(images/bottomBG.jpg) repeat-x left bottom;
}

#wrap6 { /* Top left */
  background: transparent url(images/topLeft.jpg) no-repeat;
}

#wrap7 { /* Top right */
  background: transparent url(images/topRight.jpg) no-repeat right top;
}

#wrap8 { /* Bottom left */
  background: transparent url(images/bottomLeft.jpg) no-repeat left bottom;
}

#wrap9 { /* Bottom right */
  background: transparent url(images/bottomRight.jpg) no-repeat right bottom;
}

/* If NOT using PNGs in the wrappers above, no need to fix IE6's PNG problem, so comment out the following "body.ie6" rule. */
/*   body.ie6 #wrap, body.ie6 #wrap2, body.ie6 #wrap3, body.ie6 #wrap4, body.ie6 #wrap5, body.ie6 #wrap6, body.ie6 #wrap7, body.ie6 #wrap8, body.ie6 #wrap9 {behavior: url(/javascripts/iepngfix.htc)} */

/* Main layout ------------------------------------------------------------- */
#title {
  height: 190px; /* Image height */
  position: relative;
}

#title h1, #title h2, #title h3, #title h4 {
  color: #1a4308;
  margin: 0;
}

/* Article headline */
#title h1 {
  font: normal 250% Arial;
  margin-left: 275px;
  padding-top: 35px;
}

/* Article tagline */
#title h2 {
  font-size: 90%;
  font-weight: bold;
  margin-left: 300px;
}

/* Article byline */
#title h3 {
  font-size: 17px;
  position: absolute;
  left: 300px;
  top: 100px;
}

/* Article publish date */
#title h4 {
  position: absolute;
  left: 300px;
  top: 120px;
}

#container {
  overflow: auto; /* Float containment */
}

/* IE6 "overflow: auto;" is not enough to contain the float, need to trigger "hasLayout" */
body.ie6 #container { height: 1%; }

#nav {
  float: left;
  width: 240px;  /* Image width - needed since floated */
}

/* Navigation list of articles */
#nav ul {
  border-top: 1px solid #206800;
  margin: 5px 24px 10px 10px;
}

#nav li {
  border-bottom: 1px solid #206800;
  font-size: 110%;
  list-style: none;
}

#nav li a {
  color: #1a4308;
  display: block;
  padding: 5px;
  text-decoration: none;
}

/* IE6 ignores "display: block;" rule, unless we trigger "hasLayout" */
body.ie6 #nav li a { height: 1%; }

#nav a:hover {
/* If not using an image for the hover effect on navigation items, comment out the following rule.
   Although you could use a background color in addition to a foreground color for the hover effect. */
/*  background: url(images/lilballoon.png) no-repeat right center; */
  color: #7633da;
}

/* Article content */
#content {
  margin: 0 70px 0 240px; /* Left/right margins match background image widths */
  padding: 5px;
}

#content3 {
  overflow: hidden; /* float containment */
}

/* IE6 "The IE6 Three Pixel Text-Jog" http://www.positioniseverything.net/explorer/threepxtest.html */
body.ie6 #content table { margin-right: -3px; }

/* Blogs ---------------------------------------------------------------------- */
.fullBlogArticle a:link, .fullBlogArticle a:visited, .fullBlogArticle a:hover,
.blogArticle a:link, .blogArticle a:visited, .blogArticle a:hover {
  color: #000;
}

/* Blog - Articles Displayed in Full */
.fullBlogArticle {
  border-bottom: 2px solid #000;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

.fullBlogArticle .blogArtHead {
  font-size: 153.9%;
  margin: 0 0 .25em;
}

.fullBlogArticle .blogArtTag {
  font-size: 123.1%;
  margin: 0 0 .25em;
}

.fullBlogArticle .blogArtByline {
  font-size: 93%;
  font-weight: bold;
}

.fullBlogArticle .blogArtComments {
  margin: 1em 0;
  padding-left: 8px;
}

.fullBlogArticle .blogArtComments a {
  font-weight: bold;
  padding-left: 5px;
}

/* Blog - Article Abstracts */
.blogArticle {
  margin-bottom: 1em;
  padding-bottom: .5em;
}

.blogArticle .blogArtHead {
  margin: 0 0 .25em;
}

.blogArticle .blogArtTag {
  margin: 0 0 .25em;
}

.blogArticle .blogArtByline {
  font-size: 93%;
}

.blogArticle .blogArtAbs img {
  padding: 0 5px 0 8px;
}

.blogArticle .blogArtAbs span {
  font-size: 93%;
}

/* Related Sites -------------------------------------------------------------- */
.relatedSites {
  border-bottom: 1px solid #2a6130;
  clear: both;
}

.relatedSites h3 {
  border-bottom: 1px solid #2a6130;
  font-size: 1em;
  line-height: 1em;
  margin: 0;
  padding: 0 0 .25em;
}

.relatedSites p {
  margin: .5em;
}

.relatedSites ul {
  margin: .5em;
  padding: 0 0 0 1.2em;
}

/* Feedback ------------------------------------------------------------------- */
#feedbackBox {
  clear: both;
  padding: 2.5em 0 1em;
}

#feedbackBox h3 {
  background: #2a6130 url(images/icon_feedback.gif) no-repeat scroll 5px 7px;
  color: #fff;
  font-size: 1em;
  margin: 0;
  padding: .3em 0 .3em 23px;
}

#feedbackBox table {
  font-size: .9em;
  margin-bottom: 0;
  width: 100%;
}

#feedbackBox tr.rowA td { background-color: #eee; }
#feedbackBox th, #feedbackBox tr.rowB td { background-color: #619a48; }

#feedbackBox th, #feedbackBox td {
  border: 0;
  color: #000;
}

#feedbackBox th { white-space: nowrap; }

#feedbackBox th#postedBy { width: 15%; }

#feedbackBox td { vertical-align: top; }

#feedbackBox td span { display: none; }

#feedbackBox p {
  background-color: #619a48;
  color: #000;
  font-size: .9em;
  margin: 0;
  padding: .5em;
}

#feedbackBox a { font-weight: bold; }

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

#feedbackBox p a:hover {
  color: #fff;
  text-decoration: underline;
}

#feedbackBox .backgroundError { background-color: #c0dcb4; }

#feedbackBox .formItems label {
  display: block;
  float: left;
  text-align: right;
  width: 170px;
}

#feedbackBox p.formItems span {
  display: block;
  margin-left: 180px;
}

#feedbackBox p.formItems span label {
  display: inline;
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

#feedbackBox .formItems input, #feedbackBox .formItems textarea { width: 95%; }

#feedbackBox #fbYes, #feedbackBox #fbNo { width: auto; }

#feedbackBox .formItems span.spacer {
  clear: both;
  display: block;
  height: 1px;
  overflow: hidden;
}

#feedbackBox .formButtons { text-align: center; }

#feedbackBox noscript {
  color: #fff;
  font-weight: bold;
}

body.ie6 #feedbackBox p.formItems span label { position: relative; }

#footer {
  height: 225px; /* Image height */
}

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
  display: none;
}

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

.hideBlogLink {
  display: none;
}