@media all {

  body {margin: 0; padding: 0; font: 16px/1.3 'PT Sans', sans-serif;}
  input, textarea, select, option {font: 16px/1.3 'PT Sans', sans-serif;}
  select, option {background: #fff;}
  h1, h2, h3 {font-family: 'Lato', sans-serif;}
  h1 {font: 250%/1.3 Lobster, cursive; letter-spacing: 1px;}
  img, abbr {border: 0; text-decoration: none;}
  img {vertical-align: middle;}
  textarea {vertical-align: top;}
  input[type="text"], input[type="password"], textarea {padding: 3px;}
  input[type="text"]:focus, input[type="password"]:focus, textarea:focus {outline: 2px solid #000;}  
  input[type="submit"], .actionBtn {cursor: pointer; border: 2px solid #525252; background: #999; color: #fff; padding: 5px 8px; border-radius: 8px;}
  input[type="submit"]:hover, .actionBtn:hover, .actionBtn.activeBtn {border-color: #000; background: #eee; color: #000;}
  input[type="button"].actionBtn {padding: 0 3px;}
  a:focus {outline: 1px dotted #000;}
  a.actionBtn {text-decoration: none;}
  .formList {margin: 0; padding: 0; list-style: none;}
  .formList label {padding-top: 5px; float: left; width: 8em; text-align: right; margin-right: .5em;}
  .formList.widerLabels label {width: 12em;}
  .formList.widestLabels label {width: 14em;}
  .formList.widestLabels .floatDiv {float: left; width: 520px; margin-bottom: 10px;}
  .formList.autoLabels label {width: auto; text-align: left; margin: 0; padding: 0; float: none;}
  .formList li {clear: both; margin: 10px 0;}
  .formList.designLevel label {float: none; font-size: 22px; margin: 0; width: auto;}
  .formCol {float: left; width: 40px; padding-top: 5px;}
  .designDesc {float: left; width: 745px; margin-bottom: 25px;}
  .adminTable {width: 100%; border-collapse: collapse; border-spacing: 0;}
  .adminTable a {color: #000;}
  .adminTable th {border-bottom: 1px dashed #000;}
  .adminTable td, .adminTable th {padding: 10px 5px; text-align: left; vertical-align: top;}
  .adminTable td {font-size: 15px;}
  .adminTable td:last-child a.actionBtn {color: #fff;}
  .adminTable td:last-child a.actionBtn:hover, .adminTable td:last-child a.actionBtn:focus {color: #fcd472; background: #000;}
  .itemList {list-style: none; margin: 0; padding: 0; font-size: 14px;}
  .itemList li {cursor: pointer; margin: 7px 0; padding: 0 0 0 26px; background: url(../i/unchecked-box.png) no-repeat; min-height: 22px;}
  .itemList .checked {background: url(../i/checked-box.png) no-repeat;}
  .itemList .timelineNoCheckbox {font-size: 16px; margin-bottom: 12px; padding-left: 0; background: none; color: red; font-weight: bold; text-align: center; cursor: auto;}
  .smallerLinks {font-size: 12px; word-wrap: break-word;}
  .doubleTxt {font-size: 24px; word-wrap: break-word;}
  .errorMsg {border: 1px solid red; color: red; background: #eee; padding: 10px;}
  .errorMsg p {margin: 0;}
  .notifyMsg {border: 1px solid #ccc; color: #000; background: #eee; padding: 10px;}
  .ctr {text-align: center;}
  .rt {text-align: right;}
  .quotes p {margin: 2em 0; text-align: center;}
  .overallLarger {font-size: 22px;}
  .overallLarger strong {font-size: 26px;}
  .spcHdr {margin-top: 2.5em;}
  .remove {display: none;}
  .proofCol {float: left; width: 415px;}
  .firstCol {margin-right: 10px;}
  .proofNav {position: absolute; top: 35px; right: 40px; width: 350px; text-align: right;}
  .proofHolder {min-height: 537px; margin: 10px 0 20px;}
  .proofHolder p {padding: 15px;}
  .proofCol fieldset {border: 2px solid #000; margin-top: 25px; border-radius: 12px; min-height: 120px;}
  .proofCol legend {padding: 5px 10px; font-weight: bold;}
  .commentBox {padding: 10px; margin: 10px; border: 1px solid #000; min-height: 120px;}
  .commentBox p {font-size: 90%;}
  #contentArea .commentTextarea {width: 285px; margin-left: 10px; vertical-align:middle;}
  .schoolComment, .adminComment {color: green;}
  .employeeComment {color: red;}
  .formImages img {position: relative; top: 0; left: 0;}
  .formImages td {vertical-align: top; text-align: center; padding-right: 30px;}
  .formImages .firstCell {padding-right: 10px; text-align: left;}
  .reviewTable td {padding: .5em;}
  .reviewTable td:first-child {font-style: italic; text-align: right;}
  .checkboxTable {width: 100%;}
  .checkboxTable td {vertical-align: top; padding: .5em;}
  .checkboxTable span {font-size: 90%;}
  .checkboxTable.hideImages img {display: none;}
  .checkboxTable div {position: relative; top: 0; left: 0; display: inline;}
  .checkboxTable div span {position: absolute; display: block; width: 200px; left: 16px; top: 10px; display: none; background: #fff; z-index: 2000; border: 1px solid #000; padding: 5px;}
  .candidNav {font-size: 20px;}
  .candidNav img {vertical-align: top;}
  #leftArrow, #rightArrow {position: absolute; width: 50px; height: 50px; top: 360px; z-index: 2000;}
  #leftArrow {left: 0;}
  #rightArrow {right: 0;}
  #jumpMenuHolder {position: absolute; width: 230px; top: 118px; left: 350px; z-index: 2000;}
  #adminNav .under a {text-decoration: underline;}
  #contentArea.shiftUp {margin-top: -15px; width: 840px; padding: 20px 40px;}
  #contentArea.shiftUp.designForms {width: 790px; padding-left: 90px;}
  #contentArea.shiftUp .spaceList li {margin: 1em 0;}
  #contentArea.shiftUp .spaceList ol {list-style: lower-alpha;}
  #theme-selection {bottom: 10px; font-size: 140%; left: 0; position: absolute; text-align: center; width: 100%;}
  #themeDetailsArea {display: none; margin-top: 410px; font: 130% georgia,serif;}
  #themeDetailsArea p {font-size: 120%; text-align: center; width: 700px; margin: .5em auto;}
  #themeDetailsArea h2 {font-weight: normal; text-align: center; margin: 0; font-size: 180%;}
  #themeDetailsArea h3 {font-weight: normal; text-align: center; margin: 2em 0 .25em; font-size: 150%;}
  #themeBgImages td {padding: 0 10px 10px 0;}
  #themeSpreadImgs td {padding: 0 0 5px;}  
  #themeSpreadImgs td:nth-child(2) {padding-left: 5px;}
  #calculatorArea {display: none; z-index: 1000; padding: 5px; font-size: 90%; position: absolute; right: 50px; top: 155px; width: 240px; border: 1px solid #000; background: #fff;}
  #calculatorArea td {text-align: right;}
  #calculatorArea p {margin: .5em 0;}
  #pageCalcBtn:hover, #pageCalcBtn2:hover {background: #000; color: #fff;}
  #calculatorArea td+td {text-align: left;}
  #ladderTable td {border: 1px solid #000; padding: 0; width: 360px; background: #fff; color: #000;}
  #ladderTable .noBorder {border: none; background: transparent;}
  #ladderTable textarea {border: none; width: 350px; height: 100px; overflow: auto;}
  #ladderTable textarea:focus {outline: 0;}
  #ladderTable div {position: relative; top: 0; left: 0; height: 132px; padding: 2px;}
  #ladderTable div p {color: #999; text-align: center; margin: 0; position: absolute; bottom: 1px; left: 0; width: 360px; border-top: 1px solid #ccc; background: #eee;}
  #templateHolder {margin-top: 8px;}
  #pickfiles, #uploadfiles {display:inline-block; padding: 5px 10px; background: #999; color: #fff; border-radius: 8px; border: 2px solid #999; text-decoration: none; margin-right: 6px;}
  #uploadfiles {background: #000; border: 2px solid #000;}
  #yrForm, #yrForm div {display: inline;}
  .uploadify {position: relative; margin-bottom: 1em;}
  .uploadify-button {background-color: #505050; background-image: linear-gradient(bottom, #505050 0%, #707070 100%); background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%); background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%); background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%); background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #505050),color-stop(1, #707070)); background-position: center top; background-repeat: no-repeat; border-radius: 30px; border: 2px solid #808080; color: #FFF; font: bold 12px Arial, Helvetica, sans-serif; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); width: 100%;}
  .uploadify:hover .uploadify-button {background-color: #606060; background-image: linear-gradient(top, #606060 0%, #808080 100%); background-image: -o-linear-gradient(top, #606060 0%, #808080 100%); background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%); background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%); background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #606060),color-stop(1, #808080));background-position: center bottom;}
  .uploadify-button.disabled {background-color: #D0D0D0; color: #808080;}
  .uploadify-queue {margin-bottom: 1em;}
  .uploadify-queue-item {background-color: #F5F5F5; border-radius: 3px; font: 11px Verdana, Geneva, sans-serif; margin-top: 5px; max-width: 350px; padding: 10px;}
  .uploadify-error {background-color: #FDE5DD !important;}
  .uploadify-queue-item .cancel a {background: url('../i/uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-indent: -9999px; width: 16px;}
  .uploadify-queue-item.completed {background-color: #E5E5E5;}
  .uploadify-progress {background-color: #E5E5E5; margin-top: 10px; width: 100%;}
  .uploadify-progress-bar {background-color: #09F; height: 3px; width: 1px;}
  .phImg {float: left; margin: 0 15px 15px 0; text-align: center; word-wrap: break-word;}
  .phImg img {max-width: 100%; height: auto;}
  .timelineEmphasis, .bonusEmphasis {color: #ED399C;}
  .timelineEmphasis.timelineNoCheckbox {color: red;}
  .leftImgBorder {border-top: 16px solid #fff; border-bottom: 16px solid #fff; border-left: 32px solid #fff;}
  .rightImgBorder {border-top: 16px solid #fff; border-bottom: 16px solid #fff; border-right: 32px solid #fff;}
  .reduceTxt {font-size: 80%;}
  #coverGallery > div {float: left; text-align: center; margin: 30px 30px 30px 0; width: 250px;} 
  .shadeRows tbody tr:nth-child(odd) td {background: #ddd;}

  #tnav {margin-bottom: 30px;}
  #tnav ul {margin: 0; padding: 0; list-style: none;}
  #tnav li, #tnav strong, #tnav a {display: inline-block; font: 18px/36px Lobster, cursive;}
  #tnav strong, #tnav a {text-decoration: none; color: #fcb50f; padding: 0 20px; background: #5d5d5d; border-radius: 12px;}
  #tnav a {color: #fff;}
  #tnav a:hover, #tnav a:focus {color: #fcd472;}

  .dashboardTabs ul {margin: 0; padding: 0; list-style: none; display: flex; align-items: center;}
  .dashboardTabs ul li {height: 60px; width: 100px; margin: 0; padding: 0; background: #818181; text-align: center; display: flex; align-items: center; justify-content: center; position: relative;}
  .dashboardTabs.wider ul li {width: 130px;}
  .dashboardTabs ul li:after, .dashboardTabs ul li:before {left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; z-index: 100; position: absolute; pointer-events: none;}
  .dashboardTabs ul li:not(:last-child):after {border-color: rgba(129, 129, 129, 0); border-left-color: #818181; border-width: 29px; margin-top: -29px;}
  .dashboardTabs ul li:not(:last-child):before {border-color: rgba(247, 239, 228, 0); border-left-color: #F7EFE4; border-width: 34px; margin-top: -34px;}
  .dashboardTabs ul li:not(:last-child).okState:after {
    border-color: rgba(90, 224, 109, 0); border-left-color: #5AE06D;
  }
  .dashboardTabs ul li:not(:last-child).dangerState:after {
    border-color: rgba(245, 75, 76, 0); border-left-color: #F54B4C;
  }
  .dashboardTabs ul a {color: #fff; font-weight: 700; text-decoration: none;}
  .dashboardTabs ul li+li a {padding-left: 35px;}
  .dashboardTabs ul li:nth-child(6) {width: 110px;}
  .dashboardTabs ul li:nth-child(6) a {padding-left: 40px;}
  .dashboardTabs ul li:nth-child(7) {width: 140px;}
  .dashboardTabs ul li:nth-child(7) a {padding-left: 30px;}
  .dashboardTabs ul li:first-child {border-top-left-radius: 16px; border-bottom-left-radius: 16px;}
  .dashboardTabs.firstTabActive ul li:first-child {border-bottom-left-radius: 0;}
  .dashboardTabs.lastTabActive ul li:last-child {border-bottom-right-radius: 0;}
  .dashboardTabs ul li:last-child {border-top-right-radius: 16px; border-bottom-right-radius: 16px;}
  .dashboardTabs ul li.okState {background: #5AE06D;}
  .dashboardTabs ul li.dangerState {background: #F54B4C;}
  .formDetails {background: #818181; width: 100%;}
  .tabConnector {background: #818181; height: 10px; width: 124px;}
  .tabConnector.tab1 {margin-left: 0; width: 126px;}
  .tabConnector.tab2 {margin-left: 130px;}
  .tabConnector.tab3 {margin-left: 257px;}
  .tabConnector.tab4 {margin-left: 384px;}
  .tabConnector.tab5 {margin-left: 511px;}
  .tabConnector.tab6 {margin-left: 638px; width: 105px;}
  .tabConnector.tab7 {margin-left: 745px; width: 135px;}

  .tabSection {min-height: 200px; color: #fff; padding: 30px 15px 0;}
  .flexForm {display: flex; margin-bottom: 20px;}
  .flexForm > label {text-align: right; width: 120px; margin-right: 20px; font-weight: bold; font-size: 110%;}
  .flexForm > div {width: 550px; max-width: 100%;}
  .flexForm textarea {width: 550px; height: 150px;}
  .flexForm input[type="text"], .flexForm input[type="url"] {width: 550px;}
  .formDetails p.ctr {margin: 0; padding: 0 0 30px;}
  .formDetails p.ctr input {font-size: 120%;}
  #salesTab .flexForm > label {width: 180px;}
  #firstProofTab .flexForm > label, #finalProofTab .flexForm > label, #deliveredTab .flexForm > label {width: 220px;}
  #orderedTab .flexForm > label {width: 200px;}

}


@media screen {

  body {background: #525252 url(../i/bg.png) repeat-y;}
  #container {width: 980px; position: relative; top: 0; left: 0; margin: 0 auto;}
  #container.coverContainer {color: #fff; width: 840px;}
  #container.fullWidth {width: 99%;}
  #loginLogo {width: 500px; margin: 30px auto;}
  #loginLogo h1 {color: #fff; text-align: center; margin: 0; text-shadow: 1px 1px 1px #000;}
  #loginBox {background: #F4E8D5 url(../i/box-bg.png) repeat-x; padding: 20px; width: 450px; margin: 0 auto; border: 5px solid #525252; border-radius: 15px;}
  #loginBox h2 {font-size: 22px; margin-top: 0;}
  #smallLogo, #adminNav, #schoolNav, #loginTxt, #adminHdr, #adminAction, #todoArea, #todoTab, #timeTab, #resTab, #bonusTab, #returnLink, #todoRegion, #missingRegion, #dueByRegion, #receivedRegion, #impMsgRegion, #bbMsg, #timelineRegion, #progressArea, #dashboardInsights {position: absolute;}
  #smallLogo {top: 7px; left: -10px; width: 400px; height: 66px; z-index: 5;}
  #adminNav {top: 58px; left: 0; width: 980px; height: 53px; background: url(../i/navbar.png) no-repeat; list-style: none; margin: 0; padding: 0; z-index: 200;}
  #adminNav li {font: 26px/46px Lobster, cursive; display: inline; color: #fcb50f; padding: 0 15px 0 35px;}
  #adminNav a, #schoolNav a {color: #fff; text-decoration: none; text-shadow: 2px 2px 1px #000;}
  #adminNav a:hover, #adminNav a:focus, #schoolNav a:hover, #schoolNav a:focus {color: #fcd472;}
  #schoolNav #proofItem {color: #000;}
  #schoolNav #proofItem a {text-shadow: 2px 2px 1px #ff8f00;}  
  #schoolNav #proofItem a:hover, #schoolNav #proofItem a:focus {color: #999;}
  #schoolNav {top: 58px; left: 0; width: 980px; height: 94px; background: url(../i/navbar.png) no-repeat; list-style: none; margin: 0; padding: 0; z-index: 200;}
  #schoolNav li {font: 26px/46px Lobster, cursive; float: left; color: #fcb50f; text-align: center;}
  #loginTxt {right: 15px; top: 27px; width: 270px; text-align: right; color: #F29B00; font-size: 14px;}
  #loginTxt a {color: #F29B00; text-decoration: none;}
  #contentArea {background: #F4E8D5 url(../i/box-bg.png) repeat-x; padding: 20px; width: 880px; border: 5px solid #525252; border-radius: 15px; min-height: 200px; margin: 0 auto; position: absolute; top: 180px; left: 25px;}
  .fullWidth #contentArea {width: 5400px; left: 0;}
  #dashboardInsights {font-size: 120%; font-weight: bold; line-height: 1.5; color: #fff; display: flex; top: 200px; width: 900px; left: 40px; box-sizing: border-box;}
  #dashboardInsights > div {width: 400px;}
  #adminHdr {top: 112px; left: 40px; font-size: 32px; color: #fff; width: 660px;}
  #adminAction {color: #fff; top: 150px; right: 45px; text-align: right; width: 350px;}
  #loginTxt span, #adminAction a {color: #fff;}
  #todoArea {color: #3D3D3D; background: url(../i/home-bg.png) no-repeat; width: 930px; height: 752px; top: 160px; left: 35px;}
  #todoArea h2, #dueByRegion .dueDateVal {font: 28px Lato,sans-serif; margin: 0; text-shadow: 0 0 3px #eee;}
  #homeItem {width: 110px;}
  #schoolNav #dfItem {width: 170px; text-align: left; padding-left: 10px;}
  #schoolNav #proofItem {background: url(../i/gold-overlay.png) no-repeat; height: 94px; width: 217px; line-height: 32px; padding-top: 5px;}
  #candidsItem {width: 130px;}
  #tipsItem {width: 155px;}
  #contactItem {width: 185px;}
  #todoTab, #timeTab, #resTab, #bonusTab {top: 33px; left: 0; width: 35px; height: 105px;}
  #todoTab {height: 110px;}
  #timeTab {top: 143px;}
  #resTab {top: 248px;}
  #bonusTab {top: 385px; height: 34px; top: 354px;}
  #bonusTab.blockedOut {background:#676767; height: 108px; top: 351px;}
  #schoolYearInfo {color: #fff; font-style: italic; position: absolute; top: 8px; left: 400px; width: 340px; text-align: center;}
  #schoolYearInfo span {display: block; font-size: 14px;}
  #returnLink {right: 0; top: 125px; width: 150px; font-size: 14px; z-index: 5000;}
  #returnLink a {color: #F29B00;}
  #todoRegion, #timelineRegion {left: 60px; top: 20px; width: 260px; height: 400px; overflow: auto;}
  #todoRegion h2, #timelineRegion h2 {color: #00a5d0; display: inline;}
  #timelineRegion p {margin: 6px 0;}
  #timelineRegion .overallLarger {font-size: 16px;}
  #timelineRegion .overallLarger .largerTxt {font-size: 25px;}
  #timelineRegion .overallLarger strong {font-size: 110%;}
  #timelineRegion {height: 460px; line-height: 1.1;}
  #timelineRegion .itemList span {font-size: 80%;}
  #missingRegion {left: 455px; top: 20px; width: 450px; height: 280px; overflow: auto;}
  #dueByRegion {left: 60px; top: 420px; width: 260px;}
  #missingRegion h2, #dueByRegion h2, #receivedRegion h2 {color: #EC008C; display: inline;}
  #dueByRegion h2, #dueByRegion .dueDateVal {color: red;}  
  #receivedRegion h2 {color: #7dc311;}
  #receivedRegion {left: 455px; top: 370px; width: 450px; height: 310px; overflow: auto;}
  #bbMsg {margin: 0; padding: 0; left: 455px; top: 295px; width: 450px; height: 65px;}
  #impMsgRegion {left: 65px; top: 540px; width: 265px; height: 160px; overflow: auto;}
  #impMsgRegion h2 {color: #25408F; font-size: 20px; font-style: italic;}
  #impMsgRegion textarea {width: 223px; height: 115px; background: transparent; border: 0;}  
  #impMsgRegion textarea:focus {outline: none;}
  #todoRegion select {width: 150px;}
  #contentArea.shiftUp h1 {font: italic 35px Lato,sans-serif; margin: 0; color: #EC008C;}
  #contentArea.shiftUp h2, .salesNote {font-size: 20px;}
  #contentArea.shiftUp .spcAbove {margin-top: 40px;}
  #progressArea {width: 80px; height: 468px; left: -20px; top: 30px;}
  #themeName {margin-top: 0;}
  #progressArea a {position: absolute; display: block; width: 80px; height: 120px; z-index: 1000; left: 0;}
  #progressArea #step1 {top: 0;}
  #progressArea #step2 {top: 120px;}
  #progressArea #step3 {top: 240px;}
  #progressArea #step4 {top: 360px; height: 105px;}
  #themeContent {margin-top: 35px;}
  #themeDesc:empty {display: none;}
  #carouselSelectors a {display: inline-block; font-size: 17px; margin-right: 7px; padding: 8px;}
  #themeSelectorBtn {padding: 5px; font-size: 120%;}
  .themeCol {float: left; width: 420px;}
  .themeCol li, #themeScroller li {list-style: none;}
  .themeWindow {color: #fff; padding: 0 15px 15px;}
  #ladderTable td span {display: none;}
  #qsNotify {z-index: 5000; position: fixed; top: 50px; right: 0; font-size: 20px; background: #000; color: #fff; padding: 10px;}
  #qsNotify.offPort {top: -5000px;}

  .fullWidth #dashboardTbl {border-collapse: separate;}
  .fullWidth #dashboardTbl thead tr:nth-child(1) th {border-bottom: 0; padding: 5px;}
  .fullWidth #dashboardTbl thead tr:nth-child(1) th[colspan] {text-align: center; text-transform: uppercase; outline: 1px solid #999;}
  .fullWidth #dashboardTbl thead {background: #f9f3ea; position: sticky; top: 0; z-index: 100;}
  .fullWidth #dashboardTbl tbody th {background: #f9f3ea; position: sticky; left: 0; top: 90px; z-index: 100; border-bottom: 0;} 
  .fullWidth #dashboardTbl tbody tr:hover th, .fullWidth #dashboardTbl tbody tr:hover td {background: #eee;} 

  .faqs h2 ~ h2 {margin-top: 50px;}
  
}


@media print {

  h1 {font-size: 22px; margin-top: 0;}
  h2 {font-size: 18px;}
  h3 {font-size: 16px;}
  .hidePrint, #adminNav, #loginTxt, #adminAction, #schoolNav, #todoTab, #timeTab, #resTab, #bonusTab, #returnLink, #progressArea, #leftArrow, #rightArrow, #qsNotify {display: none;}
  #schoolYearInfo span {display: block;}
  .itemList li {padding: 0;}
  .itemList .checked {font-weight: bold;}
  #ladderTable {width: 100%;}
  #ladderTable td {width: 50%;}
  #ladderTable td div {position: static; height: auto; padding: 0;}
  #ladderTable td textarea {display: none;}
  #ladderTable td span {display: block; padding: 10px;}
  #ladderTable td p {position: static; margin: 0; width: 100%;}
  #contentArea, #dashboardInsights {position: static !important; padding: 0 !important; width: 100% !important;}
  #contentArea h1 {margin-top: 25px;}

}