/* ========================================================
  SOCS Teacher Page Template
  Copyright 2009 FES LLC
  Design   - Blue Notebook
  Designer - Mark Nichols
======================================================== */

@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: #96b6d6 url(images/topper_bg.gif) repeat-x;
  color: #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin: 0;
}

/* Design framework images ------------------------------------------------- */
#wrap { 
 margin: 0 auto;
 width: 960px;
}

/* Main layout ------------------------------------------------------------- */
#title {
  background: transparent url(images/notes_top.jpg) no-repeat 240px;
  height: 150px; /* Image height */
  position: relative;
}

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

/* Article headline */
#title h1 {
  font-weight: normal;
  font-size: 200%;
  margin-left: 270px;
  padding-top: 80px;
}

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

/* Article byline */
#title h3 {
  font-size: 110%;
  position: absolute;
  right: 35px;
  top: 93px;
}

/* Article publish date */
#title h4 {
  position: absolute;
  right: 35px;
  top: 110px;
}

/* Container for the nav and article content divs */
#container {
  background: transparent url(images/notes_body.jpg) repeat-y 240px;
  overflow: auto; /* Float containment */
}

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

/* Navigation list of articles */
#nav {
  background: transparent url(images/nav_top.jpg) no-repeat left top;
  float: left;
  padding-top: 30px; /* Image height */
  width: 240px;  /* Image width - needed since floated */
}

#nav2 {
  background: transparent url(images/nav_bottom.jpg) no-repeat left bottom;
  overflow: auto; /* Float containment */
}

#nav ul {
  background: transparent url(images/nav_bg.jpg) repeat-y;
  margin: 0 0 25px; /* Bottom graphic height */
  padding: 10px 0;
}

#nav li {
  border-bottom: 1px solid #999;
  list-style: none;
  margin: 0 25px;
}

#nav li.first {
  border-top: 1px solid #999;
}

#nav li a {
  color: #036;
  display: block;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
}

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

#nav li a:hover {
  color: #666;
}

/* Article content */
#content {
  margin: 0 9px 0 249px;
  padding: 10px 15px;
}

#content3 {
  background-color: #f2f2f2;
  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: #036;
}

/* Blog - Articles Displayed in Full */
.fullBlogArticle {
  border-bottom: 2px solid #036;
  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 #036;
  clear: both;
}

.relatedSites h3 {
  border-bottom: 1px solid #036;
  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;
}
body.ie6 #feedbackBox { height: 1%; }

#feedbackBox h3 {
  background: #036 url(images/icon_feedback.gif) no-repeat scroll 3px .6em;
  color: #fff;
  font-size: 1em;
  margin: 0;
  padding: .3em 0 .3em 22px;
}

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

#feedbackBox tr.rowA td { background-color: #ddd; }
#feedbackBox th, #feedbackBox tr.rowB td { background-color: #96b6d6; }

#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: #96b6d6;
  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: #d3e1ef; }

#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;
}

#footer {
  background: transparent url(images/notes_bottom.jpg) no-repeat 240px 0;
  height: 100px; /* 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;
}