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

File Name: CSS Foundation
Developer: David Diez
Copyright: 2011
Website:   openintro.org


-----------------
Table of Contents
-----------------

Personal Header
Subject Bars
Announcements
Section Framing
- Course Information
- Section Types
Quiz Results


-----------
Color Theme
-----------
Gray: rgb(158,165,172)
Dark Gray: rgb(107,115,123)
Yellow: rgb(244,220,0)
Blue: rgb(0,68,106)
Red: rgb(159,52,0)
Green: rgb(102,159,0)

----------------------
Important Measurements
----------------------
Max Content Width: 824px


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



/*=====> Personal Header <=====*/
article.home {
  margin: 0;
}
#homeHeader {
  width: 764px;
  height: 20px;
  margin: 10px 0 0 0;
  padding: 0 30px 2px 30px;
  border-bottom: 1px solid rgb(107,115,123);
}
#nameOnHome {
  text-transform: uppercase;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  float: left;
  clear: left;
}
#questionBankLink {
  display: block;
  position: absolute;
  right: 85px;
  top: 0;
  width: 86px;
  height: 14px;
  line-height: 18px;
  margin: 2px;
  background: url(../img/buttons/home001.png) -211px -117px;
}
#questionBankLink:hover {
  margin: 0;
  border: 2px solid rgb(107,115,123);
  cursor: pointer;
}
#teacHelpButton {
  display: block;
  position: absolute;
  right: 30px;
  top: 0;
  width: 33px;
  height: 14px;
  margin: 2px;
  background: url(../img/buttons/home001.png) -109px -2px;
}
#teacHelpButton:hover {
  margin: 0;
  border: 2px solid rgb(107,115,123);
  cursor: pointer;
}


/*=====> Subject Bars <=====*/
.courseBarContainer {
  height: 28px;
  width: 824px;
  margin-top: 12px;
}
.courseBarOpen {
  height: 26px;
  width: 28px;
  margin: 1px;
  clear: none;
  float: left;
  cursor: pointer;
}
.statCourseBarOpen {
  background: url(../img/buttons/home001.png) -325px -405px;
}
.statCourseBarClose {
  background: url(../img/buttons/home001.png) -298px -405px;
}
.courseBar {
  height: 28px;
  width: 764px;
  clear: right;
  float: left;
}
.addCourseBar {
  margin: 0 30px 30px 30px;
  background: rgb(107,115,123);
  height: 24px;
}
.algeCourseBar {
  background: url(../img/pallete/alge001.png);
}
.calcCourseBar {
  background: url(../img/pallete/calc001.png);
}
.mediCourseBar {
  background: url(../img/pallete/medi001.png);
}
.physCourseBar {
  background: url(../img/pallete/phys001.png);
}
.statCourseBar {
  background: url(../img/pallete/stat001.png);
}
.courseAlert {
  display: none;
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 26px;
  background: rgb(255,255,0);
  overflow: visible;
  z-index: 800;
}
.courseAlertText {
  display: none;
  position: absolute;
  top: 10px;
  left: 2px;
  width: 122px;
  height: 20px;
  margin: 1px;
  background: rgb(255,255,255);
  overflow: hidden;
  font-size: 9pt;
  padding-left: 3px;
  line-height: 20px;
  border: 1px solid rgb(0,0,0);
}
.courseAlert:hover > .courseAlertText {
  display: block;
}
.courseBarIcon {
  position: absolute;
  left: 10px;
  top: 1px;
  width: 150px;
  height: 26px;
}
.addCourseBarIcon {
  background: url(../img/buttons/account001.png) -2px -249px;
  height: 20px;
  top: 2px;
  width: 94px;
}
.addCourseBarIcon:hover {
  background-position: -2px -266px;
}
.manageAccount,
.manageCourse {
  position: absolute;
  top: 0;
  right: 0;
  height: 24px;
  line-height: 24px;
  width: 115px;
  text-align: right;
  padding-right: 14px;
  font-family: "museo-slab", Helvetica, Arial;
  font-weight: 300;
  font-size: 8pt;
  color: rgb(255,255,255);
  text-transform: uppercase;
}
.manageCourse {
  display: block;
  height: 28px;
  line-height: 28px;
  font-size: 9pt;
}
.manageAccount:hover,
.manageCourse:hover {
  color: rgb(244,220,0);
}
.algeCourseBarIcon {
  background: url(../img/buttons/home002.png) -223px -604px;
  width: 95px;
}
.calcCourseBarIcon {
  background: url(../img/buttons/home002.png) -110px -604px;
  width: 102px;
}
.mediCourseBarIcon {
  background: url(../img/buttons/home002.png) -342px -604px;
  width: 106px;
}
.physCourseBarIcon {
  background: url(../img/buttons/home002.png) -3px -605px;
  width: 94px;
}
.statCourseBarIcon {
  background: url(../img/buttons/home002.png) 0 -1px;
  width: 105px;
}
.courseBarTitle {
  position: absolute;
  top: 1px;
  left: 144px;
  height: 26px;
  width: 400px;
  color: rgb(255,255,255);
  font-size: 12px;
  line-height: 26px;
  font-family: "museo-slab", Helvetica, Arial;
  font-weight: 300;
  font-size: 9pt;
  text-transform: uppercase;
}
.coursePage {
  margin: 5px 0 28px 0;
  padding-left: 30px;
  width: 764px;
  overflow: visible;
}



/*=====> Announcements <=====*/
.announceBar,
.announceBarY {
  width: 764px;
  height: 17px;
  font-family: "museo-sans", Helvetica, Arial;
  font-weight: 300;
  font-size: 8pt;
  background-color: rgb(230,230,231);
}
.announceBarY {
  background-color: rgb(244,220,0);
}
.announceBarTitle,
.announceBarLabel {
  position: absolute;
  left: 14px;
  top: 0;
  height: 17px;
  line-height: 17px;
  width: 100px;
  text-transform: uppercase;
}
.announceBarLabel {
  left: auto;
  right: 0;
  width: 80px;
  text-align: right;
  padding-right: 14px;
}
.announceBarLabel:hover {
  color: rgb(0,68,106);
  cursor: pointer;
}
.announcement {
  padding: 10px 0 10px 15px;
  min-height: 18px;
  background: url(../img/pallete/lightGray001.png);
}
.announcementText {
  margin-right: 109px;
  font-size: 13px;
  line-height: 18px;
}
.announcementDate {
  position: absolute;
  top: 11px;
  right: 50px;
  font-size: 11px;
  line-height: 18px;
  height: 18px;
}
.announcementClose {
  position: absolute;
  bottom: 12px;
  right: 15px;
  height: 13px;
  width: 14px;
  background: url(../img/buttons/home001.png) -340px -436px;
}
.announcementClose:hover {
  background-position: -321px -437px;
  cursor: pointer;
}
.announcementEdit {
  position: absolute;
  bottom: 12px;
  right: 15px;
  height: 13px;
  line-height: 13px;
  font-size: 10px;
}
.announcementEdit:hover,
.announcementEdit:focus {
  color: rgb(0,68,106);
  cursor: pointer;
}
#addAnnouncement {
  
}
#addAnnouncement:hover,
#addAnnouncement:focus {
  color: rgb(0,68,106);
  cursor: pointer;
}
#addAnnSubmit {
  display: block;
  position: absolute;
  right: 15px;
  top: 8px;
  width: 61px;
  height: 23px;
  background: url(../img/buttons/home001.png) -293px -253px;
  border: none;
}
#addAnnSubmit:hover {
  background-position: -293px -275px;
  cursor: pointer;
}
#addAnnTextCount,
#editAnnTextCount {
  position: absolute;
  top: 10px;
  left: 415px;
  font-size: 12px;
  clear: right;
  float: left;
  line-height: 18px;
  height: 18px;
}
#addAnnTextError,
#postError,
#editTextError,
#editPostError {
  font-size: 12px;
}



/*=====> Section Framing <=====*/
.homeTable {
  margin: 17px 0 0 0;
  overflow: visible;
  table-layout: fixed;
}
.homeTableLeft {
  width: 360px;
  padding: 0 10px;
  border-left: 1pt solid rgb(0,68,106);
  border-right: 1pt solid rgb(0,68,106);
  overflow: visible;
  vertical-align: top;
}
.homeTableRight {
  width: 361px;
  padding: 0 10px;
  border-right: 1pt solid rgb(0,68,106);
  overflow: visible;
  vertical-align: top;
}
.sectionBar {
  width: 100%;
  height: 19px;
}
a.sectionBar {
  display: block;
}
.algeSectionBar {
  background: url(../img/pallete/alge001.png);
}
.calcSectionBar {
  background: url(../img/pallete/calc001.png);
}
.mediSectionBar {
  background: url(../img/pallete/medi001.png);
}
.physSectionBar {
  background: url(../img/pallete/phys001.png);
}
.statSectionBar {
  background: url(../img/pallete/stat001.png);
}
.sectionBarTitle {
  text-transform: uppercase;
  padding-left: 5px;
  font-family: "museo-slab", Helvetica, Arial;
  font-weight: 300;
  font-size: 9pt;
  line-height: 20px;
  color: rgb(255,255,255);
}
a > .sectionBarTitle:hover {
  color: rgb(158,165,172);
}


/*=====> Section Framing - Course Information <=====*/
/** /
.createNewBox {
  width: 100%;
  height: 22px;
}
.createNew {
  position: absolute;
  top: 4px;
  right: 2px;
  height: 14px;
  line-height: 15px;
  padding: 0 4px;
  background-color: rgb(244,220,0);
  font-family: "museo-sans", Helvetica, Arial;
  font-weight: 500;
  font-size: 8pt;
  text-transform: uppercase;
}
.createNew:hover {
  top: 2px;
  right: 0;
  border: 2px solid rgb(107,115,123);
  cursor: pointer;
}
/**/
.courseDescription,
.classResources,
.teacherInformation,
.courseSyllabus {
  border-top: 1pt solid rgb(107,115,123);
  border-bottom: 1pt solid rgb(107,115,123);
  width: 100%;
}
/*
.algeTBBorders {
  border-top: 1pt solid rgb(50,102,149);
  border-bottom: 1pt solid rgb(50,102,149);
}
.calcTBBorders {
  border-top: 1pt solid rgb(100,152,255);
  border-bottom: 1pt solid rgb(100,152,255);
}
.physTBBorders {
  border-top: 1pt solid rgb(102,159,0);
  border-bottom: 1pt solid rgb(102,159,0);
}
.statTBBorders {
  border-top: 1pt solid rgb(0,68,106);
  border-bottom: 1pt solid rgb(0,68,106);
}
*/
.classResources,
.teacherInformation,
.courseSyllabus {
  border-top: none;
}
.courseDescriptionTitle,
.classResourcesTitle,
.teacherInformationTitle,
.courseSyllabusTitle {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  width: 300px;
  color: rgb(107,115,123);
}
/*
.algeColor {
  color: rgb(50,102,149);
}
.calcColor {
  color: rgb(100,152,255);
}
.physColor {
  color: rgb(102,159,0);
}
.statColor {
  color: rgb(0,68,106);
}
*/
.courseDescriptionText,
.classResourcesText,
.teacherInformationText,
.courseSyllabusText {
  font-size: 12px;
  line-height: 15px;
  padding: 5px 0;
  border-top: 1pt solid rgb(107,115,123);
}
.editSyllabusLink:hover {
  cursor: pointer;
  color: rgb(0,68,106);
}
.classResourcesText {
  padding: 2px 0;
}
.teacherInformationText {
  padding: 0;
  border-top: none;
}
.courseInformationArrowDown,
.courseInformationArrowUp {
  position: absolute;
  right: 5px;
  top: 3px;
  width: 17px;
  height: 11px;
  background: url(../img/buttons/home001.png) -261px -436px;
}
.courseInformationArrowDown:hover {
  background-position: -297px -436px;
  cursor: pointer;
}
.courseInformationArrowUp {
  background-position: -243px -436px;
}
.courseInformationArrowUp:hover {
  background-position: -279px -436px;
  cursor: pointer;
}
.classResourceItem {
  font-size: 12px;
  line-height: 15px;
  padding: 3px 75px 3px 1px;
}
.classResourceLink {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 62px;
  height: 12px;
  font-size: 10px;
  line-height: 15px;
  padding: 3px 0 0 0;
  text-transform: uppercase;
  color: rgb(0,68,106);
}
.teacherInfoItem,
.teacherInfoItemF {
  font-size: 12px;
  line-height: 15px;
  padding: 3px 75px 3px 1px;
  padding: 4px 0;
}
.teacherInfoItemF {
  border-top: 1pt solid rgb(107,115,123);
}



/*=====> Section Framing - Section Types <=====*/
.topElement, .element, .elementArchived {
  width: 100%;
  font-size: 10px;
  line-height: 16px;
  text-transform: uppercase;
  border-top: 1pt solid rgb(107,115,123);
  border-bottom: 1pt solid rgb(107,115,123);
  margin: 0;
  padding: 0;
}
.topElement {
  height: 16px;
}
.element, .elementArchived {
  text-transform: none;
  line-height: 18px;
  padding: 2px 0;
  border-top: none;
}
.elementArchived {
  height: 0;
  overflow: hidden;
  border: none;
}
.showArchivedElements {
  font-size: 10px;
  line-height: 16px;
  height: 16px;
}
.showArchivedElements:hover {
  color: rgb(0,68,106);
  cursor: pointer;
}
.topElementTitle, .elementTitle {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 154px;
  height: 100%;
  overflow: visible;
}
.elementTitle {
  font-size: 12px;
}
.elementTitleLink,
.elementTitleLink:hover {
  color: rgb(107,115,123);
}
.topElementStatus, .elementStatus {
  display: inline-block;
  width: 120px;
  height: 100%;
  position: absolute;
  top: 2px;
  left: 154px;
}
.topElementStatus {
  top: 0;
}

/*
Gray: rgb(158,165,172)
Dark Gray: rgb(107,115,123)
Yellow: rgb(244,220,0)
Blue: rgb(0,68,106)
Red: rgb(159,52,0)
Green: rgb(102,159,0)
*/

.topElementOptions, .elementOptions {
  display: block;
  width: 85px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 274px;
  overflow: visible;
}
.elementOptionsBlank {
  margin-top: 2px;
  width: 79px;
  height: 12px;
  padding: 2px;
  border: 1px solid rgb(0,0,0);
}
.elementOptionsDDArrow {
  height: 10px;
  width: 10px;
  background: url(../img/buttons/home001.png) -343px -325px;
}
.elementOptionsDD, .elementOptionsDDF {
  display: block;
  overflow: hidden;
  width: 81px;
  background: rgb(255,255,255);
}
ul.elementOptionsDD {
  list-style: none;
  position: absolute;
  top: 20px;
  left: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  border-left: 2px solid rgb(0,0,0);
  border-right: 2px solid rgb(0,0,0);
  border-bottom: 2px solid rgb(0,0,0);
}
li.elementOptionsDD, li.elementOptionsDDF {
  position: relative;
  height: 20px;
  width: 70px;
  padding: 0 5px;
}
li.elementOptionsDDF {
  padding-top: 1px;
}
.elementOptionsDDSpace {
  height: 2px;
}
.elementOptionsDivDD {
  height: 17px;
  padding: 2px 0 0 0;
  border-bottom: 1px solid rgb(158,165,172);
}
div.elementOptionsDD,
a.elementOptionsDD {
  display: block;
  font-size: 10px;
  padding: 2px 2px 2px 3px;
  line-height: 11px;
  height: 11px;
  margin-bottom: 2px;
  color: rgb(107,115,123);
  width: 65px;
}
div.elementOptionsDD:hover,
a.elementOptionsDD:hover {
  background: rgb(244,220,0);
  font-size: 10px;
  cursor: pointer;
}
[class="elementOptions"]:hover > ul.elementOptionsDD {
  overflow: visible;
  height: auto;
  opacity: 1;
  -webkit-transition: opacity .4s linear;
  -moz-transition: opacity .4s linear;
  -o-transition: opacity .4s linear;
  transition: opacity .4s linear;
}
[class="elementOptions"]:hover > .elementOptionsBlank {
  border: 2px solid rgb(0,0,0);
  padding: 1px;
  -webkit-transition: opacity .4s linear;
  -moz-transition: opacity .4s linear;
  -o-transition: opacity .4s linear;
  transition: opacity .4s linear;
}
.nearDeadline {
  padding: 0px 3px 5px 3px;
  background: rgb(244,220,0);
  height: 12px;
}


/*=====> Quiz Results, Manage Account <=====*/
.scoreResults,
.courseList {
  margin: 10px 0;
  width: 100%;
}
.scoresTR,
.scoresTD,
.scoresTDFirst,
.scoreResultsTR,
.scoreResultsTD,
.scoreResultsTDFirst,
.courseListTR,
.courseListTD,
.courseListTDFirst {
  padding: 2px 4px;
  border: none;
  font-size: 11px;
}
.courseListTD,
.courseListTDFirst {
  font-size: 13px;
}
.scoresTD,
.scoresTDFirst,
.scoreResultsTD,
.scoreResultsTDFirst,
.courseListTD,
.courseListTDFirst {
  border-bottom: 1px solid rgb(158,165,172);
}
.scoresTDFirst,
.scoreResultsTDFirst,
.courseListTDFirst {
  border-top: 1px solid rgb(158,165,172);
}
.scoresTD,
.scoresTDFirst {
  width: 5%;
}
th.scoresTD,
th.scoresTDFirst {
  width: 13%;
}
.lateQuiz {
  background: rgb(244,220,0);
}
.quizDate {
  width: 45px;
}
.quizTime {
  width: 70px;
}
.manageAccountOption,
.manageAccountOptionS {
  cursor: pointer;
  color: rgb(0,68,106);
}
.manageAccountOption:hover,
.manageAccountOptionS:hover {
  cursor: pointer;
  color: rgb(107,115,123);
}
.manageAccountOption:active,
.manageAccountOptionS:active {
  text-decoration: underline;
}




/*=====> Manage Homepage <=====*/
#taList {
  float: left;
  width: 250px;
  margin-right: 5px;
}