@import url(//fonts.googleapis.com/css?family=Open+Sans);

html * {
    margin: 0 ; /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

.printOnly {
    display: none;
}

.screenOnly {
 /*background-color: #EEE;*/
 /*padding: 10px;*/
 /*text-align: center;*/
}

body {
    height:100%; background-color:white;width:1200px;
}

.DEVSYSTEM_HEADER {
    text-align: left;
    color: white;
    padding: 20px;
    font-size:60%;
    /*border: 1px solid #FFF7DB;*/
    /*border-style:outset;*/
    /*background-color: #FFF7DB;*/
}

div.fixed-width {
    width: 700px;
}

div.demoBlock {
    border: 1px solid #FFF7DB;
    border-style: outset;
    background-color: #FFF7DB;
}

div.framed, span.framed, a.framed {
    border: 1px solid #d3d3d3;
    padding: 3px;
}

div.post-prompt-gap {
    margin: 10px 0;
}
div.post-answer-gap {
    margin: 1px 0;
}
a.framedLink {
    /*border: 1px solid #d3d3d3;*/
    padding: 3px;
    margin: 3px;
}


div.padded-framed {
    border: 1px solid #d3d3d3;
    padding: 10px;
}

div.indented_framed {
    border: 1px solid #d3d3d3;
    padding: 3px;
    padding-left: 30px;
}

div.level1TintBar {
    width: 700px;
}

div.level2TintBar {
    width: 670px;
}

div.expandableLevel1TintBar {
    min-width: 700px;
}

div.expandableLevel2TintBar {
    min-width: 670px;
}

div.lockedAtBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}
/* GENERAL */

.spinner {
    padding: 5px;
    position: absolute;
    right: 0;
}

body {
    background-color: #D5D5D5;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.umass-branded {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#leftcol {
    float: left;
    height: 100%;
    width: 70px;
}

#centercol {
    background-color: white;
    float: left;
    height: 100%; /*  min-height:800px;  */
    width: 90%; /*  margin-left:70px; */
}

#header {
    background-color: #881C1C;
    height: 80px;
    padding-top: 0;
    padding-bottom: 25px;
}

#tabBar {
    background-color: #DDD;
    height: 40px;
    text-align: center;
    width: 100%;
}

#tabBar a {
    font-size: 125%;
    background-color: #DDD;
    color: #871212;
    color: #003B5C;
    padding: 10px;
    text-decoration: none;
    height: 40px;
}

#tabBar a:hover {
    color:red;
    color:#66899D;
}

#tabBar a.tabSelected {
    background-color: #F9F9F9;
    padding-top:12px;
    padding-bottom:12px;
}

a:link, a:visited {
    color: #bf8383;
    color: #881C1C;

    font-weight: bold;
}

/* Add the [href] so <a name=""> anchors don't have a hover effect */
a[href]:hover {
    color: red;
    color:#66899D;
    text-decoration: underline;
}
/* Add explicit a[name] so <a name=""> anchors don't have a hover effect on older browsers*/
a[name]:hover {
    color: inherit;
    text-decoration: none;
}

.list a:link {
    /*color: #bf8383;*/
    color: #AA3F3F;
    /*text-decoration: none;*/
}

.list a:hover {
    color: red;
    color:#66899D;
}

.buttons a:link, .buttons a:hover {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 0;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    margin-left: 3px;
    overflow: visible;
    padding: 2px 6px;
    text-decoration: none;
    color:black;
}
.menuButton a.admin {
    background: url(../images/admintiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.attachment {
    background: url(../images/attachmenttiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
    padding-left: 28px;
    color: red;
    color:#66899D;
}

.menuButton a.proposal {
    background: url(../images/proposaltiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.proposalForm {
    background: url(../images/proposaltiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.edit {
    background: url(../images/editTiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.show {
    background: url(../images/searchtiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

h1, h2, h3 {
    color: #881C1C;
    color: #003B5C;
}

h1 {
    font-weight: normal;
    font-size: 140%;
    margin: .8em 0 .3em 0;
    line-height: 1.25em;
}

h2 {
    font-size: 120%;
    margin-top: 5px;
    margin-bottom: 5px;
}

h3 {
    font-size: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
}

span.formTitle {
    color: #881C1C;
}
span.formHeadingText {
    font-size: larger;
    color: #881C1C;
}

#header h1 {
    margin: 5px;
}

ul {
    padding-left: 15px;
}

/*
Unfortunately, many years ago we globally set the ul padding, which messes up ul tags in question instructions.
Since I don't want to mess up any layouts already using ul, I'm creating a special class that can be used to
reproduce the default behavior.
 */
ul.indented {
    padding-left: 40px;
}

input, select, textarea {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    font: 11px verdana, arial, helvetica, sans-serif;
    margin: 2px 0;
    padding: 2px 4px;
}

select {
    padding: 2px 2px 2px 0;
}

textarea {
    /*  width: 350px;
      height: 150px;
    */
    vertical-align: top;
}

input:focus, select:focus, textarea:focus {
    border: 1px solid #b2d1ff;
}


input.wideField {
  width: 60em;
}


input.middleField {
  width: 24em;
}

input.narrowField {
  width: 12em;
}
.body {
    float: left;
    margin: 0 15px 10px 15px;
}

/* NAVIGATION MENU */

.nav {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-style: solid none solid none;
    margin-top: 5px;
    padding: 7px 12px;
}

.menuButton {
    font-size: 10px;
    padding: 0 5px;
}

.menuButton a {
    color: #333;
    padding: 4px 6px;
}

.menuButton a.home {
    background: url(../images/skin/house.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.list {
    background: url(../images/skin/database_table.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.create {
    background: url(../images/skin/database_add.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.print {
    background: url(../images/printertiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.download {
    background: url(../images/downloadtiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}


.menuButton a.note {
    background: url(../images/note_edit.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

span.note {
    background: url(../images/note_edit.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.submit {
    background: url(../images/submittiny.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

/* MESSAGES AND ERRORS */

.LoginMessage, .HeaderMessage {
    background: #FFEEEE url(../images/skin/exclamation.png) 8px 50% no-repeat;
    border: 1px solid red;
    color: red;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px;
    font-size: 150%;
    line-height:normal;
}

.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

.tip {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}


.help {
    background: #eaf2e6 url(../images/lightbulb.png) 8px 50% no-repeat;
    border: 1px solid #b4e695;
    color: #506642;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.help-frame {
    border: 1px solid #d3d3d3;
    padding: 8px;
    background: #f6fcf2;
}



.warning, .warn {
    background: #FEEFB3 url(../images/sm_warn.png) 8px 50% no-repeat;
    display: inline-block;
    border: 1px solid #553;
    color: #9F6000;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}

div.errors ul {
    list-style: none;
    padding: 0;
}

div.errors li {
    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}

td.errors input {
    border: 1px solid red;
}

td.errors textarea {
    border: 1px solid red;
}

div.errors select {
    border: 1px solid red;
}

div.errors input {
    border: 1px solid red;
}

div.errors textarea {
    border: 1px solid red;
}

div.wizardInstructions {
    background: #FEEFB3 url(../images/sm_warn.png) 8px 50% no-repeat;
    display: inline-block;
    border: 1px solid #553;
    color: #9F6000;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

/* TABLES */

table.visible-cells {
    border: 2px solid #EEEEEE;
    text-align: left;
    background-color: #F9F9F9;
    width: 100%;
}

tr {
    border: 0;
}

table.visible-cells tr.tr-group-start td {
    border-top: solid thin ;
}
td, th {
    font: 12px verdana, arial, helvetica, sans-serif;
    line-height: 13px;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}

th {
    background: #fff url(../images/skin/shadow.jpg);
    background-size: auto 100%;
    color: #888;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
}

th a:link, th a:visited, th a:hover {
    color: #881C1C;
    display: block;
    font-size: 10px;
    width: 100%;
}

th.asc a, th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}

th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}

th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.niceTableX {
    border:1px solid #CCC;
}
.niceTableX th {
    color:black;
    background: lightgray;
}
.niceTableX td {
    padding:3px;
    border:none;
}

/*odd and even row striping on tables*/
.niceTableX tr:nth-child(odd){
    background: rgba(222, 222, 222, 0.5)
}

.niceTableX tr:nth-child(even){
    background: rgba(255, 255, 255, 0.5)
}
div.inline-form-content td.form-heading, td.inline-form-heading {
    font-weight: bold;
    color: #881C1C;
}

div.inline-form-content {
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border-radius: 7px 7px 7px 7px;
    border: 2px outset #aaa;
}

div.form-question-answer th {
    background-image: none;
    background-color: #dcdcdc;
    color: #000000;
}

.odd {
    background: #f2f2f2;
}

.even {
    background: #fff;
}

table .buttonTable {
    border: none;
    border-collapse: collapse;
    width: 250px;
}

table .noBorder {
    border: none;
}

.loginTable {
    width: 40%;
}

.iconCell {
    width: 50px;
}

.progressCell {
    width: 70px;
}

.incompleteCell {
    text-align: center;
}

td a img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: none;
}

/* LIST */

.list table {
    border-collapse: collapse;
}

.list th, .list td {
    border-left: 1px solid #ddd;
}

.list tr:hover {
    background: #f9e9e9;
}

/*div.instruction-block:hover {*/
    /*background: #f9e9e9;*/
    /*border-left: 1px solid #ddd;*/
/*}*/

/* We add this class to whatever we want to hide, and remove it when we want it to show */
.hideMe {
    display: none
}

#hideable.shown {
    display: inherit
}

legend, .legend {
    background: #871212;
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 125%;
    border: 1px solid #fff;
    border-color: #e5e5c3 #505014 #505014 #e5e5c3;
    /*-moz-border-radius-bottomleft: 5px;*/
    /*-moz-border-radius-bottomright: 5px;*/
    /*-moz-border-radius-topleft: 5px;*/
    /*-moz-border-radius-topright: 5px;*/
    border-radius: 5px;
    margin-top: 10px;
    padding:3px;
    /*  color: #881C1C;
     background: white;
     font-size: 125%;
     padding-left: 5px;
     padding-right: 5px;
     margin-top: 15px;
     border: 1px solid #881C1C;
     -moz-border-radius-bottomleft: 5px;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
    */
}

fieldset, .fieldset {
    background: #EEEEEE;
    border: 1px solid #fff;
    border-color: #fff #666661 #666661 #fff;
    /*-moz-border-radius-bottomleft: 5px;*/
    /*-moz-border-radius-bottomright: 5px;*/
    /*-moz-border-radius-topleft: 5px;*/
    /*-moz-border-radius-topright: 5px;*/
    border-radius: 5px;
    width: 95%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}


.prop {
    padding: 5px;
}

.prop .name {
    text-align: left;
    width: 15%;
    white-space: nowrap;
}

.prop .value {
    text-align: left;
    width: 85%;
}

.valignMiddle {
    vertical-align: middle;
}
/* PAGINATION */

.paginateButtons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    padding: 10px 3px;
}

.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}

.paginateButtons span {
    padding: 2px 3px;
}

/* DIALOG */

.dialog table {
    padding: 5px 0;
}

/* ACTION BUTTONS */

.buttons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    color: #666;
    font-size: 10px;
    margin-top: 5px;
    overflow: hidden;
    padding: 0;
}

.buttons input {
    background: #fff;
    border: 0;
    color: #333;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    margin-left: 3px;
    overflow: visible;
    padding: 2px 6px;
}

.buttons input.delete {
    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.withdraw {
    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.copy {
    background: transparent url(../images/copytiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.goBack {
    background: transparent url(../images/goBacktiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.proceed {
    background: transparent url(../images/proceedtiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.discard {
    background: transparent url(../images/discardtiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.edit {
    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.show {
    background: transparent url(../images/searchtiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.save {
    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.approve {
    background: transparent url(../images/approvetiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.saveProposal {
    background: url(../images/skin/database_add.png) center left no-repeat;
    padding-left: 28px;
}

.buttons input.updateButton {
    background: url(../images/update16.png) center left no-repeat;
    padding-left: 28px;
}

.buttons input.search {
    background: transparent url(../images/searchtiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.submit {
    background: transparent url(../images/submittiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.reassign {
    background: transparent url(../images/reassign.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.delegate {
    background: transparent url(../images/delegate.png) 5px 50% no-repeat;
    padding-left: 28px;
}

/* 32x32 */
.button {
    margin-bottom: -10px;
    border: none;
}

.button48x48 {
    margin-bottom: -16px;
    border: none;
}

.button16x16 {
    margin-bottom: -5px;
    border: none;
}

/*  Styling from the UMass GenEd page  */

#wrapper {
    margin: 0 auto;
    padding: 0;
    width: 1000px;

}

#wrapper_l {
    background-image: url(../images/background_left.jpg);
    background-position: left top;
    background-repeat: repeat-y;
}

#wrapper_r {
    background-image: url(../images/background_right.jpg);
    background-position: left top;
    background-repeat: repeat-y;
}

#innerwrapper {
    background-color: #FFFFFF;
    border: medium none;
    margin: 0 8px;
    min-height: 100%;
    padding: 0;
    position: relative;
}

#bottom {
    background-image: url(../images/background_bottom.jpg);
    background-position: left top;
    background-repeat: repeat-x;
    height: 8px;
}

#bottom_l {
    background-image: url(../images/background_bl.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    height: 8px;
}

#bottom_r {
    background-image: url(../images/background_br.jpg);
    background-position: 100% 0;
    background-repeat: no-repeat;
    height: 8px;
}

.vertlogo {
    background-color: #000000;
    background-image: url(../images/background_sidebar.gif);
    background-position: right top;
    background-repeat: repeat-y;
}

#footer #footer_symbols, #footer #footer_address {
}

#footer_address {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
    padding: 0;
    text-align: center;
}

#footer_address div {
    border-bottom: 1px solid #8D939B;
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom: 20px;
    padding-top: 0;
}

#footer_symbols {
}

#footer #footer_symbols .symbol_l {
    padding-right: 15px;
}

#footer #footer_symbols .symbol_r {
    padding-left: 0;
}

#footer p {
    margin: 0;
    padding: 0 0 5px;
}

.copyright {
    color: #999999;
    line-height: 20pt;
    text-decoration: none;
}

.longText {
    width: 500px;
}

.shortText {
    min-width: 100px;
}
.mediumText {
    min-width: 200px;
}

.tinyText {
    width: 10em;
}

.threeDigits {
    width: 3em;
}

fieldset.comboselect {
    border: 0;
    display: block;
    float: left;
    width: 490px;
    margin-bottom: 10px;
    padding: 0;
}

fieldset.comboselect * {
    display: block;
    float: left;
    width: 40%;
    margin-left: 5px;
}

fieldset.comboselect select {
    height: 250px;
    width: 200px;
}

fieldset.comboselect fieldset {
    border: 0;
    width: 10%;
    height: 200px;
    padding: 10px;
    padding-top: 25px;
}

fieldset.comboselect fieldset input {
    width: 100%;
    clear: left;
    margin: 5px 0;
}

fieldset.comboselect select option {
    width: 100% !important;
    border: 0;
    border-bottom: 1px dotted #959DB7;
}

.buttons input.resetSearchFilters {
    background: transparent url(../images/recycle.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.menuButton a.showProposalForm {
    /*background: url(../images/search.png) center left no-repeat;*/
    /*background-color:#add8e6;*/
    padding: 10px;
    /*padding-right: 10px;*/
    font-size: 120%;
    line-height: 200%;
}

.menuButton a.editProposalForm {
    background: url(../images/edit.png) center left no-repeat;
    padding: 50px;
    padding-right: 10px;
    font-size: 120%;
    line-height: 175%;
}

.buttons input.excel {
    background: transparent url(../images/excelTiny.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.tintBarLarge {
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
    width: 75%;
    margin-bottom: 2em;
    background-color: #EEE;
}

.tintBarLargeNonCollapsible {
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
    width: 75%;
    margin-bottom: 2em;
    background-color: #EEE;
}

.tintBarLargeWelcomePage {
    background-color: #EEE;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
}

.tintBarLargeWelcomePage ul {
    list-style-type: none;
    line-height: 200%;
}

.tintBarMedium {
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
    width: 95%;
    margin-bottom: 2em;
    background-color: #EEE;
    /*min-width:1200px;*/
}

.tintBarSmall {
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    width: 95%;
    margin-left: 10px;
    background-color: white;
}

.tintBarSmall ul {
    list-style-type: none;
    /*line-height: 2em;*/
}

.tintBarSmallWelcomePage {
    background-color: white;
    padding: 5px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 5px;
}

div.tintBarSmall li {
    padding-left: 1em;
    text-indent: -1em;

}

.biggy {
    color: #871212;
    font-size: 130%;
    font-weight: bold;
}

.medium {
    color: black;
    font-size: 120%;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 8px;
}

.grayButton {
    background-color: #EEE;
    font-size: 11px;
    font-weight: bold;
    border-radius: 5px;
    padding:6px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-shadow: 0px 3px 5px #AAA;
    background: linear-gradient(to bottom, #FFF, #DDD);
    border: 1px solid #BBB;
    color: #003b5c;
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 8px;
}

.grayButton:hover {
    color: red;
    color:#66899D;
    background-color: #DDD;
    /*background: linear-gradient(to bottom, #EEE, #CCC);*/
    border: 1px solid #AAA;
}

.grayButtonLink:link, .grayButtonLink:visited {
    text-decoration: none;
    color:black;
    width: auto;
}

.grayButtonLink {
    background-color: #EEE;
    font-size: 11px;
    /*font-weight: bold;*/
    border-radius: 5px;
    padding:16px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-shadow: 0px 3px 5px #AAA;
    background: linear-gradient(to bottom, #FFF, #DDD);
    border: 1px solid #BBB;
    text-decoration: none;
    margin-bottom: 2px;
    margin-top: 2px;
    display: inline-block;
    color: #003b5c
}

a[href].grayButtonLink:hover {
    color: red;
    color:#66899D;
    background-color: #DDD;
    /*background: linear-gradient(to bottom, #EEE, #CCC);*/
    border: 1px solid #AAA;
    text-decoration:none;
    cursor: default;
}

.developer {
    background-color: #ffefd5;
    border: 1px solid #cd853f;
}

div.showFormHeading
{
    outline:#ccc ridge 1px; padding:3px; margin:2px
}

.printOnly {
  display: none;
}

/*DL, DT, DD TAGS LIST DATA*/
div.approvalChainOutline dl {
    margin-bottom:50px;
}

div.approvalChainOutline dl dt {
    background:#5f9be3;
    color:#fff;
    float:left;
    font-weight:bold;
    margin-right:10px;
    padding:5px;
    width:300px;
}

div.approvalChainOutline dl dd {
    margin:2px 0;
    padding:5px 0;
    clear:both;
}

/*TABLE LIST DATA*/
div.approvalChainOutline table {
    margin-bottom:50px;
}

div.approvalChainOutline table tr th {
    background:#e3d9c2;
    color:black;
    font-weight:bold;
    padding:5px;
    width:300px;
}

div.approvalChainOutline table tr td {
    padding-left:10px;
}


div.approvalChainOutline .uncompleted_rule  th {
    background: #e6e6e6;
}

div.approvalChainOutline  .uncompleted_rule  td {
    background: rgba(184, 141, 141, 0.20);
}



div.approvalChainOutline .completed_rule  th {
    background: #e6e6e6;
}

div.approvalChainOutline  .completed_rule  td {
    background: rgba(184, 141, 141, 0.20);
}


div.approvalChainOutline .current_rule th {
    background: #bc8f8f;
}

div.approvalChainOutline .current_rule td {
    background: rgba(176, 132, 132, 0.20);
}


div.approvalChainOutline .current_rule {
    background: rgba(209, 165, 165, 0.20);
}


div.approvalChainOutline table.inactive {
   border: 1px solid red;
}


div.approvalChainOutline .inactive th {
    background: #bebebe;
}

div.approvalChainOutline .inactive td {
    background: #e0e0e0;
}


div.approvalChainOutline .inactive {
    background: #f3f3f3;
}

td.highlight {
    color: red;
    font-weight: bold;
}

tr.highlight-row {
    background-color: yellow ;
    font-weight: bold;
}

input.autocompletesuser {
    width: 300px;
}

span.unanswered_question, div.unanswered_question, span.question_flag.unanswered  {
    background: url(../images/skin/exclamation.png) center left no-repeat;
    color: red;
    padding-left: 25px;
}

div.unanswered span.question_flag, span.unanswered span.question_flag {
    background: url(../images/skin/exclamation.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

div.required:before, span.required:before {
  content: "*";
    color: red;
    font-weight:bold;
}

#mediaInspector {
  display:none
}
@media aural {
  #mediaInspector { z-index: 1 }
}
@media braille {
  #mediaInspector { z-index: 2 }
}
@media embossed {
  #mediaInspector { z-index: 3 }
}
@media handheld {
  #mediaInspector { z-index: 4 }
}
@media print {
  #mediaInspector { z-index: 5 }
}
@media projection {
  #mediaInspector { z-index: 6 }
}
@media screen {
  #mediaInspector { z-index: 7 }
}
@media tty {
  #mediaInspector { z-index: 8 }
}
@media tv {
  #mediaInspector { z-index: 9 }
}

.ARRTable {
    color: black;
    background-color:white;
    border:5px solid FFF ;
    border-radius: 15px;
}

.ARRTable td {
    border-bottom: 1px solid #DDD;
}

.ARRTable .lineNumber {
           color:blue
}

.ARRTable .requirement {
    margin-left:0em;
}

.ARRTable .rule {
   padding-left: 3em;
}

.ARRTable .line {
    padding-left: 6em;
}

.ARRTable .recall {
    padding-left: 9em;
}

.ARRTable .courses {
    padding-left: 9em;
}

.ARRTable .coursesNotShown {
    padding-left: 9em;
    color:gray;
    font-style: italic;
}

.ARRTable .courseTitle {
    color:black;
}

.AnswerDiff {
    text-align: left;
    font-size: 12px;
}

a[href^="mailto:"], a.mailto {
background:transparent url(../images/envelope.png) center right no-repeat;
display:inline-block;
padding-right:20px;
}


pre.fixed-with-scrollable {
    white-space: pre-wrap;
    max-width: 95%;
    overflow-x:auto;
}


div.standard-page   {width: 6in; }
/*div.standard-page table  {display: block; }*/
/*div.standard-page  th,td {display: inline-block; }*/

/*
if CKEditor inserts <pre> tags, we want text inside those tags to wrap to fit window, not
make one huge line.
*/
.htmlAnswer pre {
    white-space: pre-wrap;
}

.toggle-trigger:after {
    content: " (click to hide)";
    opacity: 0.6;
    font-size: smaller;
}

.closed.toggle-trigger:after {
    content: " (click to show)";
    opacity: 0.6;
    font-size: smaller;
}


.toggle-trigger:before {
    content: " ";
    background: url(../images/open.gif) center left no-repeat;
    padding-left:20px;
}

.closed.toggle-trigger:before {
    background: url(../images/closed.gif) center left no-repeat;
    padding-left:20px;
}

.toggle-trigger {
    cursor: zoom-out;
}

.closed.toggle-trigger {
    cursor: zoom-in;
}

.row_up, .row_down {
    cursor: pointer;
}

div.inline-form-edit-section {

}

.black {
    color: #000000;
}

tr.remove {
    text-decoration: line-through;
}

table.form-heading-table-layout {

}

table.form-heading-table-layout  tr {
  border-bottom:1pt solid #d6d6d6;
}

table.form-heading-table-layout th  {
    background-image: none;
    background-color: #e6e6e6;
}

table.frame-cell {
    border-collapse:collapse;
}

table.frame-cell th, table.frame-cell td{
    border:1px solid #e6e6e6;
}

table.ruled {
      border-collapse:collapse;
}

table.ruled tr{
  border:1px solid #e6e6e6;
}

th.centered, td.centered {
    text-align: center;
    vertical-align: middle;
}

td.right, th.right {
    text-align: right;
}

div.windowSized {
    /*max-width: 600px;*/
}
div.tab-loading:before {
    content: " ";
    background: url(../images/spinner.gif) center left no-repeat;
    padding-left:20px;
}

div.needsUserAttention {

}
div.approvalChainHistory tr.current_rule th {
    background: #bc8f8f;
}

div.approvalChainOutline tr.current_rule td {
    background: rgba(176, 132, 132, 0.20);
}


tr.current-rule td {
    background: rgba(255, 248, 145, 0.64);
}

div.is_stuck {
    background: rgba(136, 28, 28,0.76);
}

iframe.obvious {
    border-style: ridge;
    border-width: 3px;
    /*border-color: #881C1C;*/
    border-color: rgb(0, 59,92);
}

dl {
    border: 3px double #ccc;
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    color: green;
  }
  dt::after {
    content: ":";
  }
  dd {
    margin: 0 0 0 130px;
    padding: 0 0 0.5em 0;
  }

  div.select-subject {
      width: 20em;
  }

  span.released-to-external-reviewers {
      color: limegreen;
  }

.wait, .wait * {
    cursor: wait !important;
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Keep the lettered labels in alphabetized <ol> tags nicely justified
<ol class="alpha">
  <li><span class="li"> Expenses eligible for reimbursement must meet IRS standards.</span></li>
</ol>
*/
ol.alpha li {
    list-style-type: upper-alpha;
    font-family: monospace, sans-serif;  /* make letters the same width */
}

ol.alpha li span {
    font-family: Verdana, Arial, Helvetica, sans-serif; /* go back to default font */
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.flex-child {
    flex: 1;
}

.flex-child:first-child {
    margin-right: 20px;
}

table.ruled {
  border-collapse: collapse;
}

table.ruled tr {
  border-bottom: 1px solid black;
}

table.ruled tr:last-child {
  border-bottom: none;
}

table.ruled td, table th {
  border: none;
}