/* ========================================================
  SOCS Teacher Page Template
  Copyright 2009 FES LLC
  Design   - A+
  Designer - Paul Tisdale  
  NOTE: The rules provided below are from the 
        "School World Base" example - use or delete.

  http://www.myteacherpages.com/webpages/demo/index.cfm?mydesign=Music 

======================================================== */

@import '/teacherpages/shared/gallery.css';
@import '/teacherpages/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; }

/* Links & type ------------------------------------------------------------ */
body {
/*  background-color: #b3c887;*/
/*  background: #b3c887 url(images/bodyBG.jpg);*/
/*   background: #b3c887 url(images/bodyBG.png); */
  color: #000;
  margin: 0;
}

/* Design framework images ------------------------------------------------- */
#wrap { /* Background watermark */
  background: #000 url(images/watermark.jpg);
  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.png) repeat-x left top;*/
  background: transparent url(images/topBG.jpg) repeat-x;
}

#wrap5 { /* Bottom border */
  background: transparent url(images/bottomBG.jpg) repeat-x left bottom;
}

#wrap6 { /* Top left */
/* corner ornament:  background: transparent url(images/topLeft01.png) no-repeat; */
  background: transparent url(images/topLeft.jpg) no-repeat;
}

#wrap7 { /* Top right */
  background: transparent url(images/topRight.jpg) no-repeat right top;
}

#wrap8 { /* Bottom left */
/* corner ornament:  background: transparent url(images/bottomLeft02.png) no-repeat left bottom; */
  background: transparent url(images/bottomLeft.jpg) no-repeat left bottom;
}

#wrap9 { /* Bottom right */
  background: transparent url(images/bottomRight.jpg) no-repeat right bottom;
}

* html #wrap, * html #wrap2, * html #wrap3, * html #wrap4, * html #wrap5, * html #wrap6, * html #wrap7, * html #wrap8, * html #wrap9 {behavior: url(/javascripts/iepngfix.htc)}

/* Main layout ------------------------------------------------------------- */
#title {
  height: 190px; /* Image height */
  position: relative;
}

#title h1, #title h2, #title h3, #title h4 {
  color: #fff;
  margin: 0;
}

/* Article headline */
#title h1 {
  color: #FFF;
  font: normal 200% Arial;
  margin-left: 200px;
  padding-top: 55px;
}

/* Article tagline */
#title h2 {
  font-size: 90%;
  font-weight: bold;
  margin-left: 200px;
  
}

/* Article byline */
#title h3 {
  font-size: 17px;
  position: absolute;
  right: 75px;
  top: 60px;
}

/* Article publish date */
#title h4 {
  position: absolute;
  right: 75px;
  top: 84px;
}

#container {
  overflow: auto; /* Float containment */
}

/* IE6 "overflow: auto;" is not enough to contain the float, need to trigger "hasLayout" */
* html #container { height: 1%; }

#nav {
  float: left;
  width: 225px;  /* Image width - needed since floated */
}

/* Navigation list of articles */
#nav ul {
  margin: 0;
}

#nav ul {
  border-top: 2px solid #fff;
  margin: 0px 45px 15px 50px;
}

#nav li {
  border-bottom: 2px solid #fff;
  font-size: 110%;
  list-style: none;
}

#nav li a {
  color: #fff;
  display: block;
  padding: 4px 13px 8px 10px;
  text-decoration: none;
}

/* IE6 ignores "display: block;" rule, unless we trigger "hasLayout" */
* html #nav li a { height: 1%; }

#nav a:hover {
  background: #000 url(images/navArrow.gif) no-repeat right center;
  color: #fff;
}

/* Article content */
#content {
  background-color: #fff;
  margin: 0 80px 0 248px; /* Left/right margins match background image widths */
  padding: 5px;
}
/* Blog "Section Listing" */
#blogFeat a:link, #blogFeat a:visited, #blogFeat a:hover,
.blogArt a:link, .blogArt a:visited, .blogArt a:hover {
  color: #000;
}

/* Blog "Section Listing" - Featured article */
#blogFeat {
  overflow: auto; /* Float containment */
}

#blogFeatImgBox {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  border: 1px solid #eee;
  float: left;
  margin: 0 10px 10px 0;
  padding: 8px 8px 5px;
}

#blogFeatImg {
  margin-bottom: 5px;
}

#blogFeatHead {
  margin: 0 0 5px;
}

/* Blog "Section Listing" - Other articles */
.blogArtHead {
  margin-bottom: 3px;
}

* html .blogArt { clear: left; }

/* Feedback ------------------------------------------------------------------- */
#feedbackBox {
  padding: 2.5em 0 1em;
}

#feedbackBox h3 {
  background: #000 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: #eee; }
#feedbackBox th, #feedbackBox tr.rowB td { background-color: #91C2F4; }

#feedbackBox th, #feedbackBox td {
  border: 0;
  color: #000;
}

#feedbackBox th { white-space: nowrap; }

#feedbackBox td { vertical-align: top; }

#feedbackBox td span { display: none; }

#feedbackBox p {
  background-color: #000;
  color: #fff;
  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: #c3ecff; }

#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;
}

* html #feedbackBox p.formItems span label { position: relative; }
/* IE6 "The IE6 Three Pixel Text-Jog" http://www.positioniseverything.net/explorer/threepxtest.html */
* html #content table { margin-right: -3px; }

#footer {
  height: 225px; /* Image height */i
}

