html
{
   text-size-adjust: none; /* IMPORTANT.  This prevents font sizes from being adjusted inappropriately by mobile devices. */
}

*
{
   font-family: verdana;
   font-size: 11px;
   margin: 0;
   padding: 0;
}

table
{
   border-collapse: collapse;
}

a
{
   color: blue;
   cursor: pointer;
   text-decoration: none;
}

p
{
   margin-bottom: 10px;
}

hr
{
   color: grey;
   margin-bottom: 10px;
   margin-top: 10px;
}

/* For main layout **********************************************************************************************************************************/

@media print
{
   div#main-content-div-inner
   {
      display: block !important; /* Firefox will only print the first page and will ignore page breaks if 'display: inline-block' is used. */
   }
}

div#main-content-div
{
   margin-left: auto;
   margin-right: auto;
}

/*
 * The purpose of the main-content-div-inner is to allow the content to be wider than the header and footer, but ensure that its content is
 * still centered.
 */
div#main-content-div-inner
{
   display: inline-block;
   min-width: 1000px;
   text-align: left;
   padding-top: 20px;
}

div#main-content-div-inner h2
{
   font-size: medium;
   margin-bottom: 10px;
}

div.editable-table-top-links-div,
table.editable-table
{
   margin-left: auto;
   margin-right: auto;
   max-width: 1000px;
   width: 100%;
}

div.webtrim-links-menu-div
{
   margin-bottom: 20px;
}

/* For UTILS.validator.validateForm() ***************************************************************************************************************/

input.validator-invalid,
select.validator-invalid,
textarea.validator-invalid
{
   background-color: red;
   color: white;
}

div.validator-error-msg
{
   background-color: red;
   color: white;
   font-size: x-small;
   text-align: center;
}

/* Generic classes **********************************************************************************************************************************/

*.anchor-style
{
   color: blue;
   cursor: pointer;
   text-decoration: none !important;
}

*.italic {font-style: italic;}

*.float-left   {float: left  !important;}
*.float-right  {float: right !important;}
*.clear-floats {clear: both  !important;}

*.align-c {text-align: center !important;}
*.align-l {text-align: left   !important;}
*.align-r {text-align: right  !important;}

*.nowrap {white-space: nowrap;}

*.cursor-help    {cursor: help   ;}
*.cursor-pointer {cursor: pointer;}

span.jobtask-label-span,
span.job-label-span
{
   border: 1px solid black !important;
   color: black;
   display: inline-block;
   margin: 1px !important;
   padding: 1px !important;
}

span.left-span  {float: left ;}
span.right-span {float: right;}

*.error-msg   {color: red  ;}
*.success-msg {color: green;}

/* Oft used GUI elements. ***************************************************************************************************************************/

h2, p, ul
{
   margin-bottom: 10px;
}

div#main-content-div-inner > ul
{
   margin-left: 20px;
}

div#main-content-div-inner > p
{
   width: 1000px;
}

/* This is for expand/contract buttons.  The text inside the span is expected to be either '+' or '-'. */
div#main-content-div-inner span.expand-span
{
   /* The purpose of the sizing and positioning rules is to align with default position of checkboxes. */
   background-color: #888 !important;
   border: 1px solid black !important;
   color: #fff !important;
   cursor: pointer !important;
   display: inline-block !important;
   font-size: 8px !important;
   position: relative !important;
   top: -3px !important;
   text-align: center !important;
   width: 10px !important;
}

iframe {background-color: white;} /* To prevent iframes from being transparent. */

ul, ol {margin-left: 20px; margin-bottom: 5px;}

/* Bar charts. **************************************************************************************************************************************/

span.bar-chart-outer-span,
span.bar-chart-outer-span > span
{
   margin: 0 !important;
   padding: 0 !important;
   vertical-align: middle;
}

span.bar-chart-outer-span
{
   border-radius: 3px;
   border: 3px solid #333;
   display: inline-block;
   height: 6px;
   margin-left: auto;
   margin-right: auto;
   text-align: left !important;
   width: 20px;
}

/* Ensure small gap that may appear at far right is correct color. */
span.bar-chart-outer-span.under {background-color: #fff;}
span.bar-chart-outer-span.over  {background-color: #f37020;}

span.bar-chart-outer-span > span
{
   display: inline-block;
   height: 100%;
   vertical-align: top;
}

span.bar-chart-outer-span > span.under-span {background-color: #70f320;}
span.bar-chart-outer-span > span.over-span  {background-color: #f37020;}