/* using html4 doctype declarations will break  window height calculations unless we set height to 100% */
html, body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;      
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;    
}

/* id of top element */
#content {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;  
    text-align: left;
}

#policy{
    
}

#policy a {
       cursor: pointer;
    color: #006699 !important;
    text-decoration: none;
}

#policy td {
       text-align: justify;
}

#policy h2 {
       color: #16AA9D;
}

.row {
    background-color: papayawhip;
}

/* class for boxed element */
.frame {
    border: 1px solid #16AA9D;
    padding: 5px;
}

/* class for boxed element */
.frame-nopad {
    border: 1px solid #16AA9D;
    padding: 0;
    margin: 0 ;
}

.frame-no-result {
    border: 1px solid #16AA9D;
    float:left;
    background:white;
    height: 15em;
    width:50%;
    padding-top: 5em; 
    padding-left: 5em;
}

.picture-frame {
    display:block;
    margin-left: auto;
    margin-top: 100px;
    margin-right: auto;
    border: 1px solid #16AA9D;
    width: 60%;
    padding: 5px;
}

.picture-noframe {
    margin-left: 20%;
    text-align: right;
    width: 60%;

}
.frame-blue {
    border: 2px solid #006699  !important;
    padding: 5px  !important;
    background: white;
}
.frame-red {
    border: 2px solid #d00407 !important;
    padding: 5px !important;
    background: white;
   
}


.frame-pink {
    border: 2px solid deeppink !important;
    padding: 10px 5px  !important;
    background: white;
}

.frame-green {
    border: 2px solid limegreen !important;
    padding: 10px 5px !important;
    background: white;
}


/* nth-child(2n) gives every second column, whilst nth-child(2) gives ONLY the second column */
.alternate-columns td:nth-child(2n){
    background-color: lightgray;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.second-column-highlight td:nth-child(2){
    background-color: lightgray;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.alternate-columns select{
    max-width: 20em;
    min-width: 20em;
}
.second-column-highlight select{
    max-width: 20em;
    min-width: 20em;
}

.no-alternate-columns td:nth-child(2n) {
    background-color: white;
    padding-left: 0.4em;
    padding-right: 0.4em;
}
.no-alternate-columns30 td:nth-child(2n) {
    background-color: white;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.no-alternate-columns select{
    max-width: 20em;
    min-width: 20em;
}

.no-alternate-columns30 select{
    max-width: 30em;
    min-width: 30em;
}

.input28high {
    box-sizing: border-box;
    height:28px;
}
.max-8em {
    max-width: 8em;
}
.max-10em {
    max-width: 10em;
}
.max-15em {
    max-width: 15em;
}
.max-20em {
    max-width: 20em;
}
.max-25em {
    max-width: 25em;
}
.max-30em {
    max-width: 30em;
}
.max-40em {
    max-width: 40em;
}
.min-8em {
    min-width: 8em;
}
.min-10em {
    min-width: 10em;
}
.min-15em {
    min-width: 15em;
}
.min-20em {
    min-width: 20em;
}
.min-25em {
    min-width: 25em;
}
.min-30em {
    min-width: 30em;
}
.min-40em {
    min-width: 40em;
}
.width-5em{
    min-width: 5em;
    max-width: 5em;
}

.width-2em{
    min-width: 2em;
    max-width: 2em;
}
.width-3em{
    min-width: 3em;
    max-width: 3em;
}
.width-4em{
    min-width: 4em;
    max-width: 4em;
}
.width-6em{
    min-width: 6em;
    max-width: 6em;
}

.width-8em{
    min-width: 8em !important;
    max-width: 8em !important;
}

.width-10em{
    min-width: 10em !important;
    max-width: 10em !important;
}

.width-15em{
    min-width: 15em;
    max-width: 15em;
}

.width-19em{
    min-width: 19em;
    max-width: 19em;
}
.width-20em{
    min-width: 20em;
    max-width: 20em;
}
.width-25em{
    min-width: 25em;
    max-width: 25em;
}
.width-30em{
    min-width: 30em;
    max-width: 30em;
}

.width-60em{
    min-width: 60em;
    max-width: 60em;
}

.bigbutton{
    min-width: 15em;
    max-width: 15em;
    font-size: large;
    min-height: 3em;
    max-height: 3em;
}
.mediumbutton{
    min-width: 10em;
    max-width: 10em;
    font-size: large;
    min-height: 2em;
    max-height: 2em;
}

.biggerbutton{
    min-width: 20em;
    max-width: 20em;
    font-size: large;
    min-height: 3em;
    max-height: 3em;
}

.max-height-10em {
    max-height: 10em;
}

.max-height-15em {
    max-height: 15em;
}

.max-height-20em {
    max-height: 20em;
}

.break-word {
    word-wrap:break-word; 
}

.no-overflow {
    overflow:hidden; 
}

a[href], input[type='submit'],  input[type='reset'],  input[type='button'],  input[type='image'], input[type='radio'], select, button, .pointer {
       cursor: pointer;       
}

input:disabled {
    cursor:default;
}

select {
    font-family: inherit;
    font-size: medium;
}

input[type='text']  {
    min-width: 20em;
}

textarea, input {
    font-family: inherit;
    color: #006699;
    font-size: medium;   
}
fieldset {
    border: none;
}

/* id of the the top user menu */

.header {
    text-align: right;
    font-size: smaller;
}

.left-title {
    color: #16AA9D;
    text-align: left;
}

.left-title-indent {
    padding-left: 5%;
    color: #16AA9D;
    text-align: left;
}

.left-title-indent h1, h2, h3, h4 {
    margin:0;
        
    padding:0;
}

.right-title {
    color: #16AA9D;
    text-align: right;
}

.right-title-indent {
    padding-right: 5%;
    color: #16AA9D;
    text-align: right;
}

.left-indent {
    padding-left: 5%;
    text-align: left;
}

.left-error-indent {
    padding-left: 5%;
    color: deeppink;
    text-align: left;
}

.left-info-indent {
    padding-left: 5%;
    color: limegreen;
    text-align: left;
}

.indent {
    padding-left: 2em;
}

.error {
    color: #d00407 !important;
    font-weight: bold ! important;
}

.large-error {
    color: #d00407 !important;
    font-weight: bold ! important;
    font-size: larger;
}

.highlight {
    color: #FFFF66;
    font-weight: bold;
}

.highlightback {
    background-color: #FFFF66;
    font-weight: bold;
}

.highlightTube {
    background-color: rgb(0,0,0);
    color: white;
    font-weight: bold;
    font-size: smaller;
    text-align: center;
}

.height2 {
    min-height: 3em;
    max-height: 3em;
}

.info {
    border: 1px solid #16AA9D;
    text-align: left;
    font-size: smaller;
    vertical-align: top;    
    border-radius: 20px;
    padding: 10px;  
    background-color: #f8eded; 
}

.small {
    font-size: smaller;
}

.info h2  {
       color: #16AA9D;
}

/* for div around a scroll able table */
/* this will centre the scrollable block  */
/* you need to set the hieght and width  */
/* the height might be 500
/* the width could be e.g. 90% */
/* and then make the width of the table below 100% */

.scrollable-centered{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-color: lightgrey;
    border-width: 1px;
    background-color: transparent ;
}

.scrollable-centered-noframe{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style:none; 
    background-color: transparent ;
}

.scrollable-centered70-noframe{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style:none; 
    background-color: transparent ;
    width:70%;
    float:left;
}

.scrollable-centered-blue{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-width: 2px;
    border-color: #006699;
    background-color: transparent ;
}

.scrollable-centered-red{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-width: 2px;
    border-color: #d00407;
    background-color: transparent ;
}

.scrollable-centered-blue-on-white{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-width: 2px;
    border-color: #006699;
    background-color: white ;
}
.scrollable-centered-blue-on-yellow{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-width: 2px;
    border-color: #006699;
    background-color:#FFFF66; 
}

.scrollable-centered-red-on-white{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    border-style: solid; 
    border-width: 2px;
    border-color: #d00407;
    background-color: white ;
}

.scrolled-exception {
    color: #16AA9D;
    overflow: auto;
    margin-left: 0;
    padding: 1em 0.5em;
    border-style: solid; 
    border-width: thin;  
    background-color: white ;
    max-width: 30em;
}

/*----------------------------------------------------------------------------*/
/* lined table */


/* changed the font from just sans-serif on 1/10/14 */
.lined , .linedred
{
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    border-collapse:collapse;
    background-color: white;
}

.lined  td, .lined th 
{

    border:1px solid black;
    padding:3px 7px 2px 7px;
}
 .linedred  td, .linedred th 
{

    border:1px solid #16AA9D;
    padding:3px 7px 2px 7px;
}

 .whiteborder  th 
{

    border:1px solid white ! important;
    padding:3px 7px 2px 7px;
}

.lined th 
{

    text-align:left;
    vertical-align: top;
    padding-top:5px;
    padding-bottom:4px;
    background-color: #7E7E85;
    color:#fff;
    font-style: italic;

}
.linedred th 
{

    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color: #16AA9D;
    color:#fff;
    font-style: italic;

}
.linedredwhite th 
{

    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color: #16AA9D;
    color:#fff;
    font-style: italic;

}

.top-aligned-cells  td, .top-aligned-cells th  {
    vertical-align: top;
}
.redheader
{

    text-align:left;
    background-color:#d00407 !important;
    color:#fff;
    font-family: inherit;
    font-style: italic;
    padding:5px 5px 5px 5px;
}

.bottomheavy th {
    border-bottom: 5px solid black !important;
}
.leftheavy {
    border-left: 5px solid black !important;
}
.rightheavy {
    border-right: 5px solid black !important;
}
.whiteheader th 
{
    text-align:left;
    background-color:white;
    color:black;
    font-family: inherit;
    font-style: italic;
    padding:5px;
    margin:5px;
}
.blueheader th 
{
    text-align:left;
    background-color:#006699;
    color:#fff;
    font-family: inherit;
    font-style: italic;
    padding:5px 5px 5px 5px;
}

.maroonheader th 
{
    text-align:left;
    background-color:white !important; 
    color:#16AA9D !important; 
    font-family: inherit;
    font-style: italic;
    padding:5px 5px 5px 5px;
}

.lined tr.alt td 
{
    color:#000;
    background-color:pink;
}


.greyed 
{
    background-color:lightgray;    
}

.grey
{
    color:gray !important;
}

.white 
{
    background-color:white;    
}

/*----------------------------------------------------------------------------*/
/* sub table */

.subtable 
{
    font-family: sans-serif;
    width:90%;
    text-align: left;
    border-collapse:collapse;
    background-color: mistyrose;
}

.subtable  td, .subtable th 
{

    border:1px solid darkgrey;
    color: grey;
    padding:3px 7px 2px 7px;
}

/* ----------------------------------------------------------------------------------*/
/* Link styles */

a {
	font-weight: bold;
    color: #006699 !important;
    text-decoration: none;
}

a:HOVER {
	color: #FF9966 !important;
}

/* ----------------------------------------------------------------------------------*/
/* general classes */

.left-top {
    text-align: left;
    vertical-align: top;
}

.right-top {
    text-align: right;
    vertical-align: top;
}

.top {
    vertical-align: top;
}

.bottom {
    vertical-align: bottom;
}


.right {
    text-align: right;
}

.center {
    text-align: center;
}

.redBorder {
    text-align: left;
    color: #d00407;
    background-color: #c3c3c3;
    border: 3px solid #d00407;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.pageActions {
    text-align: left;
    background-color: lightgray;
    padding-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid black;
}
.pageActions td {
    font-size: smaller;
}

.pageActionsHighlight {
    text-align: left;
    background-color:lavenderblush;
    padding-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid black;
}
.pageActionsHighlight td {
    font-size: smaller;
}

.pageActionsHighlightY {
    text-align: left;
    background-color:#FFFF66;
    padding-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid black;
}
.pageActionsHighlightY td {
    font-size: smaller;
}

.quickPageActions {     
    text-align: left;
    padding: 0px 0px 5px 0px;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.quickPageActions  p {
    line-height: 70%;
}

.pageScoring {
    text-align: left;
    background-color:#FFCCFF;
    padding-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid black;
}

.pageScoring td {
    font-size: smaller;
}


.padded10L  {
    padding: 10px;
    text-align: left;
}

.clickable {
	font-weight: bold;
	color: #006699;
	text-decoration: none;
        cursor: pointer;          
}

.clickable:HOVER {
	color: #FF9966;
}
.clickable-red {
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
        cursor: pointer;
}

.clickable-red:HOVER {
	color: #FF9966;
}

.clickable-warn {
	font-weight: bold;
	color:#D0E4FD;
	text-decoration: none;
        cursor: pointer;          
}

.clickable-warn:HOVER {
	color:#FF0000;
}

.clickable-greyed {
	font-weight: bold;
	color:lightgray;
	text-decoration: none;         
}

.clickable-greyed-small {
	font-weight: bold;
        font-size: smaller;
	color:lightgray;
	text-decoration: none;         
}

.clickable-small {
	font-weight: bold;
        font-size: smaller;
	color:cornflowerblue;
	text-decoration: none;
        cursor: pointer;          
}

.error-small {
	font-weight: bold;
        font-size: smaller;
	color: #d00407;
	text-decoration: none;        
}

.clickable-small:HOVER {
	color: #FF9966;
}

td.clickable:HOVER {
	color: #FF9966;
}

.report {
    font-weight: bold;
    font-size: smaller;
    text-decoration: none;
    cursor: pointer;  
    color:red;
    background-color: #ffddef;
    border: 1px solid red;
    padding:0 5px;
    text-align: center;
    vertical-align: bottom;
    border-radius: 30px;
    box-shadow: 1px 1px 2px #000;
}

.report:HOVER {
    color: #FF9966;
    background-color:#cbfad6;
}
/**----------------------------------------------------------------------------*/
/* for assymetric columns */
.left75 {
 width:75%;
 text-align: left;
 padding-left: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
}
.left100 {
 width:100%;
 text-align: left;
 padding-left: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
}

.right25 {
 width:25%;
 font-size: smaller;
 text-align: right;
 padding-right: 10px;
 padding-top: 0px;
 padding-bottom: 0px;

}

#loading {
    background:url("../images/spin.gif") no-repeat center;
    height: 150px; width: 150px;    
    position: fixed; left: 45%; top: 50%; z-index: 1000;
    margin: -25px 0 0 -25px;
}


.ui-dialog .ui-dialog-titlebar 
{
    height: 40px !important;
    /* TREVOR ADDED */
    font-size: 16px;
}

.ui-dialog .ui-dialog-title
{
     white-space: normal !important/* forces ignore of  text-overflow: ellipsis; */
}

.submit input {

    color: #16AA9D;
    width: 8em;
    font-size: smaller;
    font-weight: bold;
}

.search input{

    color: #006699;
    width: 8em;
    font-size: smaller;
    font-weight: bold;

}

.submit {
    background-color: lavenderblush;
    padding:1em;
    border: 2px solid #16AA9D;
    border-radius: 20px;
    text-align: center;
}

.edit {
    background-color: red;
    padding:1em;
    border: 2px solid black;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    font-size:large;
    color: white;
    text-decoration: none;
    cursor: pointer;          
}

.edit2 {
    font-weight: bold;
    font-size: medium;
    font-style: normal !important;
    text-decoration: none;
    cursor: pointer;
    color: #c10043;
    background-color: #ffddef;
    border: 2px solid #c10043;
    padding: 0.5em 2em 0.5em 2em;
    text-align: center;
    vertical-align: bottom;
    border-radius: 6px;
    box-shadow: 1px 1px 2px #000;
    margin: 0.5em 1em;
}

.edit3 {
    font-weight: bold;
    font-style: normal !important;
    text-decoration: none;
    cursor: pointer;
    color: #c10043;
    background-color: #ffddef;
    border: 2px solid #c10043;
    padding: 0.5em 1em 0.5em 1em;
    text-align: center;
    border-radius: 6px;
    box-shadow: 1px 1px 2px #000;
    margin: 0.5em 1em;
}


.printwork {
    background-color: chartreuse;
    padding:1em;
    border: 2px solid darkgreen;
    border-radius: 20px;
    text-align: center;
}

.sprintwork input{

    color: #006699;
    width: 16em;
    font-size: smaller;
    font-weight: bold;

}
.search {
    background-color:lavender;
    padding:1em;
    border: 2px solid #006699;
    border-radius: 20px;
    text-align: center;
}

.greenWB {
   background:#009900;
   color:white;
}

.redWB {
   background:#FF0000;
   color:white;
}

.important {
   background:#FFFF66; 
}
.importantTransp {
   background:rgba(255,255,0,0.3); 
}
.alwaysgreen {
    background: rgb(216, 255, 204);
}
.alwaysgreenTransp {
    background: rgba(216, 255, 204, 0.3);
}

.longtext {
    font-size: smaller;
    word-wrap:break-word;
}


.floatL18 {
    width:18em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;
}

.floatL20 {
    width:20em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;
}

.floatL25 {
    width:25em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;
}

.floatL30 {
    width:30em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;   
}

.floatL40 {
    width:40em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;   
}
.floatL60 {
    width:60em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;   
}

.floatL80 {
    width:80em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;
}
.floatL50 {
    width:50em;
    float:left;
    padding-left:1em;
    padding-bottom:1em;   
}

.floatR {
    float:left;
    padding-left:1em;
}

.floatC {
    float:left;
    padding-right:1em;
    width:50%;
    text-align: right;
}

.expired {
    color:gray !important;
    background-color:lightgray !important;
}

.maroonPanel {
    background-color: #16AA9D;
    color: cornsilk;
    border: 1px solid #16AA9D;
}

.silkPanel {
    color: #16AA9D;
    background-color: cornsilk;
    border: 1px solid #16AA9D;
}

.redPanel {
    background-color: red;
    border-radius: 5px;
    border: 2px outset;
    color: white;
    font-weight: 600;
    cursor: pointer;  
}



.redPanel a {
	font-weight: bold;
	color: black !important;
	text-decoration: none;
}

.redPanel a:HOVER {
        font-weight: bold;
	color: #FF9966 !important;
}
/* fluidx cap colours*/

.PURPLE {background-color:#edccfd !important;}
.YELLOW {background-color:#fafc56 !important;}
.LBLUE {background-color:#8ffbf5 !important;}
.AMBER {background-color:#ef6116 !important;}
.BLACK {background-color:lightgray !important;}
.ORANGE {background-color:orange !important;}
.WHITE {background-color:white !important;}
.DBLUE {background-color:#7e99fb !important;}
.GREEN {background-color:lightgreen !important;}
.RED {background-color:  #f80404 !important;}
.BLUE {background-color:#7e99fb !important;}
.WRONG {background-color:red !important;color: white !important;}
.NONE {background-color:black !important;color: white !important;font-weight: bold; }
.gone {background-color:#eeeeee;}
.hidden{ visibility:hidden; }

.onlyprint
{
    display:none;
}

/* because the jqgrid pager bar has a zindex of 101 
the dialogs are coming up behind it
.ui-dialog { z-index: 1000 !important ;}
.ui-front { z-index: 1000 !important ;}
*/

.unscrollable-centered-red-on-paleblue{
    overflow-y: visible;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 2px;
    border-color: #c10043;
    background-color: #EDF2F6;
}

.unlinedC {
    border-collapse:collapse;
    border: 0;
    margin: 0;
    padding: 0;
}

.unlinedC td {
    padding: 0.4em ;
}

.unlinedC th {
    padding:  0.4em !important;
}

.explanation {
    padding:  0 0 0.4em 1.2em !important;
    vertical-align: top;
    font-weight: bold;
    font-size: smaller;
    color: #c10043;
    text-decoration: none;
    max-width: 30em !important
}
.edit4 {
    font-weight: bold;
    font-size:small;
    font-style: normal !important;
    text-decoration: none;
    cursor: pointer;
    color:#c10043;
    background-color: #ffddef;
    border: 1px solid #c10043;
    padding:0.3em 1em 0.5em 1em;
    text-align: center;
    vertical-align: top;
    border-radius: 6px;
    box-shadow: 1px 1px 2px #000;
    margin-right: 0.4em;
}

.edit4:HOVER {
    color: #FF9966;
    background-color:#cbfad6;
}

.interested {
    background-color: orange;
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.reserved{
    background-color: red;
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
}
.ok{
    background-color: lawngreen;
    color: black;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.discarded{
    background-color: red;
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
}
.emphatic {
    font-style: italic;
    text-decoration-line: underline;
    text-decoration-color: red;
}