/* 
  Document   : main
  Created on : Apr 14, 2014, 7:15:44 PM
  Author       : Gadu
  Description: Purpose of the stylesheet follows.
*/
/*------------------------------ default ---------------------------------------*/
*{
  margin: 0;
  padding: 0;
  background-color: inherit;
}
/*------------------------------ global ----------------------------------------*/
:root{
  font-size: 11pt;
  --mainBackgroundColor: white;
  --mainBackgroundColor: white;

  --alternateBackgroundColor1: #F8F4FF;
  --alternateBackgroundColor2: #F9FFE3;

  --selectOptionCheckedBackgroundColor: #488f8f;
  --selectOptionSelectedBackgroundColor: #488f8f;

  --tab-expire-color: slategrey;
  --background-tab-expire-color: red;
  --text-tab-expire-color: hsl(0, 0%, 100%);

  /*color-scheme: dark light;*/
  /*filter: invert(1) hue-rotate(180deg);*/
}
/*------------------------------ html ----------------------------------------*/
html{
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--mainBackgroundColor, white);
}
html.darkmode, img.darkmode{
  filter: invert(1) hue-rotate(180deg);
  /*transition: 1s;*/
}
/*------------------------------ body ----------------------------------------*/
body{
  overflow: visible;
  overflow-y: scroll !important;
  background-color: var(--mainBackgroundColor, white);
  text-align: center;
  vertical-align: middle;
  align-items:center;
}
body *:focus{ /* body *, */
  outline-color: coral !important;
  outline-offset: 0 !important;
}
body .tableCalender tr td table a:link{
  color: #0000EE !important;
}
/*------------------------------- group -------------------------------------*/
header, section, footer, aside, nav, article, hgroup{ display: block; background-color: var(--mainBackgroundColor, white); box-sizing: border-box; }
/*------------------------------ headings -----------------------------------*/
h1{ font: bold 1.3rem Tahoma; }
h2{ font: bold 1.1rem Tahoma; }
h4{
  font: 1rem verdana;
  font-family: cursive ;
  margin-bottom: 0;
  margin-top: 5px;
  color: silver;
}
h5{
  font: bold 1rem verdana;
  font-family: Tahoma;
  margin-top: 4px;
  color: brown;
  margin-bottom: -2px;
}
h6{
  font: bold 1rem sans-serif;
  margin-top: 4px;
  color: maroon;
  margin-bottom: -2px;
}
header h1{ text-align: center; }
/*--------------------------- main header -----------------------------------*/
#main_header{
  margin: 0;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  background-color: var(--mainBackgroundColor, white);
  display: inline;
  vertical-align: middle !important;
  text-align: center;
}
#main_header div{
  display: inline-block !important;
  padding: 0;
  vertical-align: middle !important;
  text-align: center;
}
#main_header img{
  margin: 2px 0 0 0;
}
/*----------------------------- main_header_left ---------------------------*/
#main_header_left{
  float: left;
  margin: 0;
  position: relative;
  width: 120px;
  height: 104px;
  vertical-align: middle;
  text-align: center;
}
#main_header_left img{
  position: absolute;
  top: 50%;
  left: calc(0% + (155px / 2));
  transform: translate(-50%, -50%);
}
/*---------------------------- main_header_center --------------------------*/
#main_header_center{
  position: absolute;
  margin: 0;
  width: calc(100% - 224px) !important;
  max-width: 976px !important;
  z-index: 999 !important;
  vertical-align: middle;
  text-align: center !important;
  color: SlateGray;
}
#main_header_center p:nth-of-type(1){
  padding: 0 0 2px 0;
  color: Goldenrod;
  font-size: 1rem;
  font-weight: normal !important;
  font-family: "Comic Sans MS","Courier New",Courier,Garamond;
}
#main_header_center p:nth-of-type(1) span{
  color: DarkGoldenrod;
}

#main_header_center h2{ font-size: 4rem; font-family: Tahoma, Verdana, sans-serif; }
#main_header_center h2 span:nth-of-type(1){ color: DarkSlateGray; }
#main_header_center h2 span:nth-of-type(2){ display: inline-block !important; margin: 0 !important; font-weight: lighter; font-family: Tahoma, Verdana, sans-serif; font-style: italic; font-size: 0.5rem; }
#main_header_center p{ margin: 0 !important; font-family: Tahoma, Verdana, sans-serif; font-size: 0.75rem; }

     @media screen and (min-width: 1200px){
       #main_header_center h2{ font-size: 36pt; }
       #main_header_center p:nth-of-type(1){ font-size: 11pt; }
       #main_header_center p{ font-size: 10pt; }
     }

     @media screen and (max-width: 1122px) {
       #main_header_center h2{ font-size: 20pt; }
       #main_header_center p:nth-of-type(1){ font-size: 10pt; }
       #main_header_center p{ font-size: 9pt; }
     }
     @media screen and (max-width: 768px) {
       #main_header_center h2{ font-size: 12pt; }
       #main_header_center p:nth-of-type(1){ font-size: 9pt; }
       #main_header_center p{ font-size: 8pt; }
     }
     @media screen and (max-width: 512px) {
       #main_header_center p:nth-of-type(1){ font-size: 8pt; }
       #main_header_center p{ font-size: 7pt; }
     }
/*----------------------------- main_header_right ----------------------------*/
#main_header_right{
  margin: 0 !important;
  vertical-align: middle;
  text-align: center;
  float: right;
  width: 104px;
  height: 104px;
}
#main_header_right img{
  border-radius: 50%;
  background-size: cover;
}
/*--------------------------- main_header_indexPage --------------------------*/
#main_header_indexPage{
  vertical-align: middle;
  text-align: center !important;
  float: right;
  width: 100% !important;
  height: 104px !important;
  max-width: 1200px !important;
}
#main_header_indexPage h2{ font-size: 48px !important; color: red; font-family: Tahoma, Verdana, sans-serif; }
#main_header_indexPage h2 span{ font-size: 10px !important; color: black !important; display: inline-block !important; margin: 0 !important; font-weight: lighter; font-family: Tahoma, Verdana, sans-serif; font-style: italic; }
#main_header_indexPage p { margin: 0 !important; font-family: Tahoma, Verdana, sans-serif; font-size: 12px; }
/*--------------------------- main wrapper -----------------------------------*/
#main_wrapper{
  clear: both;
  margin: 0 auto;
  padding-top: 0;
  max-width: 1200px !important;
  background-color: var(--mainBackgroundColor, white);;
  /*overflow-y: scroll !important;*/
  text-align: left;
}
#main_wrapper.darkmode{
  filter: invert(1) hue-rotate(180deg);
}

/*--------------------------- main menu --------------------------------------*/
#main_menu{ clear: left; max-width: 1200px !important; height: 24px; vertical-align: middle !important; text-align: left; }
#main_menu li{ margin: 0; padding: 0 !important; vertical-align: middle !important; font-size: 10pt; font-weight: bold; font-family: "Arial Narrow",Arial,Helvertica,"Courier New"; }
#main_menu li a,#main_menu li span{ margin: 0; width: 100% !important; height: 100% !important; display: table-cell; border-collapse: collapse; border: none; text-decoration: none; }/* display: block makes the entire rectangle to be clickable */
#main_menu li a:nth-child(1), #main_menu li span:nth-child(1){ padding: 5px 6px 3px 8px !important; }
#main_menu li a:nth-child(n+1):nth-last-child(n+1), #main_menu li span:nth-child(n+1):nth-last-child(n+1){ padding: 5px 8px 3px 8px !important; }
#main_menu li a:nth-lastchild(1),#main_menu li span:nth-lastchild(1){ padding: 5px 8px 3px 6px !important; }
#main_menu li:not(.disabled):hover a, #main_menu li:hover span{ background-color: #FFBB00; color: #FFFFFF; } /*  */
#main_menu div ul{ text-decoration: none; }
#main_menu div ul li{ margin: 0 !important; padding: 0 !important; display: inline-block; list-style: none; vertical-align: middle; text-align: center; }

#main_menu_left{ float: left; clear: left; height: 24px; width: 30%; background: yellow; }
#main_menu_left ul li.disabled a{ color: #EBEBE4; pointer-events: none; cursor: default; }
#main_menu_left ul li i{ padding-right: 2px !important; }
#main_menu_left ul li a{ color: #980000; }
#main_menu_left ul li a.design{ color: slategrey; }
#main_menu_left ul li.rightmost{ float: right; color: black; } /* ◀ */
#main_menu_left ul li.rightmost a{ color: black; }
#ToggleIndexPane{ height: 24px !important; vertical-align: top !important; }
/*#main_menu_left ul li:hover a.disabled{ background-color: yellow; }*/

#main_menu_right{ height: 24px; width: auto; background: yellow; }
/*#main_menu_right ul li.leftmost { width: 55px !important; } /* HOME *//* OHSMS */
#main_menu_right ul li i{ padding-right: 2px !important; }
#main_menu_right ul li a{ color: blue; }
#main_menu_right ul li span{ color: silver; }
#main_menu_right ul li.rightmost{ float: right; } /* MIEPOE / Files / WEBDESIGN */
#main_menu_right ul li.rightmost a:hover{ color: white; }
#main_menu_right ul li.rightmost a:last-child{ color: #4EA28D; }
#main_menu_right ul li.rightmost a:first-child{ color: #4EA28D; }
#main_menu_right ul li.right-most a{ color: #4EA28D; }
#main_menu_right ul li.right-most a:active{ color: #B8860B; }

#main_menu_indexPage{ height: 24px; width: 100%; background: yellow; float: left; clear: left; }
#main_menu_indexPage ul{ margin-top: 0; text-decoration: none; }
#main_menu_indexPage ul li i{ padding-right: 2px !important; }
#main_menu_indexPage ul li a{ display: block !important; text-decoration: none !important; text-align: center !important; color: #980000; } /* display: block makes the entire rectangle to be clickable */
#main_menu_indexPage ul li.leftmost{ /*width: 60px !important;*/ text-align: center !important; } /* Logout */
/*#main_menu_indexPage ul li{ padding-left: 8px !important; padding-right: 8px !important; } /* cPanel [:not(.leftmost)] */
.main_menu_bg{ background-color: #FFBB00; color: white !important; }
#main_menu #ToggleIndexPane{ font-size: bigger; }
/*--------------------------- main index -------------------------------------*/
#main_index{
  float: left;
  margin: 0.5rem 0 0 0;
  margin-bottom: 5px;
  /*height: available;*/
  max-width: 30%;
  width: 30%;
  display: table-cell;
  border-left: 0 solid gold; /* originally: no line */
  /*padding: 10px 2px 0 0;*/
  background: white;
  line-height: 1.2;
  opacity: 1;
  background-color: inherit;
  overflow: hidden;
  transition: all .75s ease;
}
#main_index.w-hide{
  padding: 0;
  opacity: 0;
  width: 0;
  opacity: 0;
}

#main_index header{ margin: 6px 0 0 18px; text-align: center; }
#main_index header h1{ margin: 10px 0 2px 24px !important; text-align: left !important; }
#main_index header h2{ transform: scale(1,1) !important; -webkit-transform: scale(1.5,1) !important; display: inline-block; color: black; }
#main_index li{ padding: 1px; }
#main_index li:not(.selection){
  font: bold 12px Tahoma;
  color: #980000;
  border-top: 1px dashed silver;
  padding: 2px 0 1px 1px;
}
#main_index li:last-child:not(.selection){
  border-top: 1px dashed silver;
  border-bottom: 1px dashed silver;
}
#main_index a{ text-decoration:none; }
#main_index ul li:hover, #main_index ol li span:hover{ background: #FFBB00; } /* highlight by making a RECTANGLE of color (#FFBB00)*/
#main_index ul li:link, #main_index ul li:visited{ color: black; }
#main_index ol li a{ display: block; }
#main_index ol li > span{ color: #2F4F4F; } /* silver */
#main_index ol li a > span{ color: #2F4F4F; } /* darkslategray */
#main_index ul li a:link, #main_index ul li a:visited{ color: #980000; }
#main_index ol li a:link, #main_index ol a:visited{ color: #980000; }
#main_index ol li:not(.nohover):hover{ background: #FFBB00; } /* highlight by making a RECTANGLE of color (#FFBB00) */
#main_index ol li.nohover{ pointer-events: none; cursor: default; color: silver; }
#main_index ol li.nohover a{ pointer-events: none; cursor: default; color: silver; }
#main_index ol.disablehover li:hover{ background: yellow; }
#main_index ol li:link, #main_index ol li:visited{ color: black; }

p.marginL35px{ margin-top: 0; }

#selected_1,#selected_2,#selected_3,#selected_4,#selected_5{ background: #FFBB00; }
#selected_1{ border-bottom: 0 dashed #BBB; }

.lessthan_10{
  color: #980000;
  border: none !important;
  font: bold 12px courier;
  list-style: none;
  margin-left: 32px;
  padding: 2px 0 2px 4px;
}

.list100to500{
  color: #980000;
  border: none !important;
  font: bold 12px courier;
  list-style: none;
  margin-left: 0;
  padding: 2px 0 2px 4px;
}

.level_1{ 
  margin-left: -5px;
}
.level_11{ 
  margin-left: -5px;
}
.level_11.disabled, .level_1.disabled{ pointer-events: none; cursor: not-allowed; color: #2F4F4F !important; }
.level_11.disabled > a, .level_1.disabled > a{ pointer-events: none; color: #2F4F4F !important; }
.level_2{
  color: #980000;
  border: none !important;
  font: bold 12px courier;
  list-style: none;
  margin-left: 28px;
  padding: 2px 0 2px 4px;
}
.level_22{
  color: #980000;
  border: none !important;
  font: bold 12px courier;
  list-style: none;
  margin-left: 28px;
  padding: 2px 0 2px 4px;
}
.level_22.disabled, .level_2.disabled{ pointer-events: none; cursor: not-allowed; color: silver !important; }
.level_22.disabled > a, .level_2.disabled > a{ pointer-events: none; color: silver !important; }
.level_3{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 66px;
  padding: 2px 0 2px 4px;
}
.level_33{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 68px;
  padding: 2px 0 2px 4px;   
}
.level_33.disabled, .level_3.disabled{ pointer-events: none; cursor: not-allowed; color: silver !important; }
.level_33.disabled > a, .level_3.disabled > a{ pointer-events: none; color: silver !important; }
.level_4{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 86px;
  padding: 2px 0 2px 4px;
}
.level_44{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 88px;
  padding: 2px 0 2px 4px;   
}
.level_5{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 86px;
  padding: 2px 0 2px 4px;
}
.level_5{
  color: #000;
  border: none !important;
  font: normal 12px sans-serif;
  list-style: none;
  margin-left: 88px;
  padding: 2px 0 2px 4px;   
}
ol.indexOL{
  margin-left: 33px !important;
  counter-reset: item;
  counter-reset: list_1;
  counter-reset: list_2;
  counter-reset: list_3;
  counter-reset: list_4;
  counter-reset: list_5;
}
ol.indexOL li{
  display: block;
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
}
ol.decimal li{
  margin-top: 8px;
  list-style: decimal;
}
ol.indexOL li span {
  color: grey;
}
ol.indexOL li:last-child span{
  color: darkslategrey;
}
ol.indexOL li b {
  color: black;
}
.level_1, .level_11, .level_2, .level_22, .level_3, .level_33, .level_4, .level_44, .level_5, .level_55 {
  color: #000 !important;
}
ol.indexOL li.level_11:before {
  content: counters(list_1, " ") ".";
  counter-increment: list_1;
  position: absolute;
  margin-right: 100%;
  right: 15px; /* space between number and text */
}
ol.indexOL li.level_1:before {
  content: counters(list_1, " ") ".";
  counter-increment: list_1;
  position: absolute;
  margin-right: 100%;
  right: 7px; /* space between number and text */
}
ol.indexOL li.level_22:before {
  content: counters(list_1, " ") "." counters(list_2, " ");
  counter-increment: list_2;
  position: absolute;
  margin-right: 100%;
  right: 15px; /* space between number and text */
}
ol.indexOL li.level_2:before {
  content: counters(list_1, " ") "." counters(list_2, " ");
  counter-increment: list_2;
  position: absolute;
  margin-right: 100%;
  right: 7px; /* space between number and text */
}
ol.indexOL li.level_33:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ");
  counter-increment: list_3;
  position: absolute;
  margin-right: 100%;
  right: 15px; /* space between number and text */
}
ol.indexOL li.level_3:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ");
  counter-increment: list_3;
  position: absolute;
  margin-right: 100%;
  right: 7px; /* space between number and text */
}
ol.indexOL li.level_44:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ") "." counters(list_4, " ");
  counter-increment: list_4;
  position: absolute;
  margin-right: 100%;
  right: 15px; /* space between number and text */
}
ol.indexOL li.level_4:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ") "." counters(list_4, " ");
  counter-increment: list_4;
  position: absolute;
  margin-right: 100%;
  right: 7px; /* space between number and text */
}
ol.indexOL li.level_55:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ") "." counters(list_4, " ") "." counters(list_5, " ");
  counter-increment: list_5;
  position: absolute;
  margin-right: 100%;
  right: 15px; /* space between number and text */
}
ol.indexOL li.level_5:before {
  content: counters(list_1, " ") "." counters(list_2, " ") "." counters(list_3, " ") "." counters(list_4, " ") "." counters(list_5, " ");
  counter-increment: list_5;
  position: absolute;
  margin-right: 100%;
  right: 7px; /* space between number and text */
}

ol.indexOL .lessthan_10:before {
  content: counters(list_1, " ") ".0" counters(list_2, " ");
  counter-increment: list_2;
  position: absolute;
  margin-right: 100%;
  right: 5px; /* space between number and text */
}
/*--------------------------- main section -----------------------------------*/
#main_index li.selection:hover{
  color: white !important;
}
/*--------------------------- main section -----------------------------------*/
#main_section{
  float: right;
  margin: 0;
  padding: 0;
  height: auto;
  max-width: calc(100% - 2px);
  width: calc(100% - 30% - 2px); /* originally: 660px, the 718px */
  padding-bottom: calc(24px + 6px) !important;
  display: inline;
  overflow-y: hidden;
  background-color: var(--mainBackgroundColor, white);
  font-family: Tahoma,Verdana,Arial;
  font-size: 10pt !important;
  transition: .75s all ease;
}
#main_section.w-hide{
  padding: 0;
  width: calc(100% - 2px);
}

.highlightQUIZ{ background-color: #F8E69C; font-weight: bold; }

.holiday{ background: PowderBlue; color: white !important; }

.white{ color: white; }
.black{ color: black; }
.red{ color: red; }
.redbold{ color: red; font-weight: bold; }
.green{ color: green; }
.greenbold{ color: green; font-weight: bold; }
.darkgreen{ color: green; }
.darkgreenbold{ color: darkgreen; font-weight: bold; }
.blue{ color: blue; }
.bluebold{ color: blue; font-weight: bold; }
.plum{ color: plum; }
.tan{ color: tan; }
.teal{ color: teal; }
.peru{ color: peru; }
.coral{ color: coral; }
.lightSeaGreen{ color: LightSeaGreen; }
.darkGoldenRod{ color: DarkGoldenRod; }
.mediumSlateBlue{ color: MediumSlateBlue; }
.magenta{ color: magenta; }
.magentabold{ color: magenta; font-weight: bold; }
.orange{ color: orange; }
.orangebold{ color: orange; font-weight: bold; }
.deeppink{ color: deeppink; }
.pink{ color: pink; }
.deeppinkbold{ color: deeppink; font-weight: bold; }
.gray{ color: gray; }
.grey{ color: grey; }
.lightgray{ color: lightgray; }
.lightgrey{ color: lightgrey; }
.silver{ color: silver; }
.gainsboro{ color: gainsboro; }
.whitesmoke{ color: whitesmoke; }
.dimgray{ color: dimgray; }
.dimgrey{ color: dimgrey; }

.bgWhite { background-color: white; }
.bgBlack{ background-color: black; color: white; }
.bgGrey{ background-color: grey; }
.bgRed{ background-color: red; }
.bgBlue{ background-color: blue; }
.bgTeal{ background-color: teal; }
.bgOlive{ background-color: olive; }
.bgGreen{ background-color: green; }
.bgCream{ background-color: #FFFDD0; }
.bgYellow{ background-color: yellow; }
.bgTomato{ background-color: tomato; }
.bgSilver{ background-color: silver; }
.bgLightGray{ background-color: lightgray; }
.bgWhiteSmoke{ background-color: WhiteSmoke; }
.bgGainsboro{ background-color: Gainsboro; }
.bgLightGrey{ background-color: lightgrey; }
.bgLightGreen{ background-color: lightgreen; }
.bgLawngreen{ background-color: lawngreen; }
.bgSpringgreen{ background-color: springgreen; }
.bgAquamarine{ background-color: aquamarine; }
.bgGainsboro{ background-color: Gainsboro;}
.bgWhiteSmoke{ background-color: WhiteSmoke; }
.bgPowderBlue{ background-color: powderblue; }
.bgPearl{ background-color: #FDEEF4; }

.lineThrough { text-decoration: line-through; }

.textCapitalize{ text-transform: capitalize !important; }
.textUppercase{ text-transform: uppercase !important; }
.textLowercase{ text-transform: lowercase !important; }

/*---------------------------- article ---------------------------------------*/
#main_section article{
  float: right;
  margin: 0 2px 0 2px !important;
  margin-bottom: calc(24px + 6px) !important;
  /*margin-left: 2px;*/
  padding-top: 6px !important;
  max-width: calc(100% - 2px);
  /*width: calc(100% - 30% - 4px);*/
  width: calc(100% - 2px);
  height: auto !important;
  background-color: var(--mainBackgroundColor, white);
  overflow-y: hidden;
  font: normal 10pt Verdana,Arial;
  color: black; 
  transition: all .75s ease;
}
#main_section article.w-hide{
  padding: 6px !important;
  width: calc(100% - 2px);
}
#main_section article header{ margin-top: -2px; margin-bottom: 0; }
#main_section article header h4{ margin-top: 0; /*text-transform: uppercase;*/ font: 18px Tahoma; }
#main_section article header h4 span{ color: #F0F; }
#main_section article header h4 span span{ text-transform: none; }
#main_section article header h4 span span span{ text-transform: none; color: grey; }
#main_section article header h4 strong strong{ text-transform: none; }
#main_section article ul{ margin-left: 20px; }
#main_section article ol{
  list-style: decimal-leading-zero;
  margin-left: 33px;
}

#SearchFilter{ float: right; margin: -3px 2px 0 0; padding: 3px 3px 1px 3px; width: 224px; border: 1px solid silver; border-radius: 3px; display: inline-block; outline-color: coral; font-size: 10pt; }
#SearchToolbox{ float: right; margin: -3px 2px 0 0; padding: 3px 3px 1px 3px; width: 128px; border: 1px solid silver; border-radius: 3px; display: inline-block; outline-color: coral; font-size: 10pt; }
/*.searchfilter{ float: right; margin-right: 2px; padding: 0 2px; width: 224px; border: 1px solid silver; display: inline-block; outline-color: coral; font-size: 11pt; }*/

.printMe{ float: right; margin: -3px 2px 2px 0; padding: 0; width: 128px; height: 21px; vertical-align: middle !important; font-size: 10pt; }

#main_section article ul{ margin-left: 20px; }
#main_section article ol{ list-style: decimal-leading-zero; margin-left: 33px; }
#main_section article a{ text-decoration: none; }
#main_section article a:link, a:visited{ color: darkgreen; } // #980000
#main_section article a:hover{ color: darkgreen; }
#main_section article table a:hover{ color: darkgreen; }
#main_section article ul{ margin-left : 44px; margin-top: 2px; list-style: disc; }
#main_section article p.nomatch{ font: normal 26pt arial; margin: 0; }
#main_section article pre{ font: normal 14px arial; margin-top: 5px; }
#main_section article table{ text-align: center; border: 1px solid black; }
#main_section tfoot{ text-align: left; }
#main_section table { border-collapse: collapse; }
#main_section table, td, th { border: 1px solid black; }
#main_section table caption{
  font: bold 16px verdana;
  text-align: left;
  padding: 3px;
}
#main_section caption div{
  font: normal 12px verdana;
  text-align: left;
}
#main_section table th{
  border: 1px solid black;
  padding: 2px;
  background-color: lightgrey;
}
#main_section table tr td{
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 2px;
}
#UallCentre td, th{
  text-align: center;
  border-bottom: 1px solid black;
}
.symbols{
  background-color: lightgrey;
  border-bottom: 1px solid black;
}
.belowsymbols{
  border-top: 1px solid black;
}
.nolinebelow{ border-bottom: 0 !important; }
.inspection { border-collapse: collapse !important; }
.inspection td{ border-spacing: 0; border: 1px solid black; border-top: none; }

#registerForm table { border: hidden !important; margin-left: -2px; }
#registerForm table td{ text-align: left !important; }
#deleteUsersForm table td{ text-align: left !important; border: hidden !important; }
#updateUsersForm table { border: hidden !important; margin-left: -2px; }
#updateUsersForm table td{ text-align: left !important; }
#activityUsersForm table td { border-bottom: 1px solid black !important; text-align: left; }
#activityUsersForm table td:nth-child(4), #activityUsersForm table td:nth-child(5), #activityUsersForm table td:nth-child(7) { text-align: right; padding-right: 5px !important; }

#submitDeleteUsersForm{ margin-left: -4px; }

.deleteUsers{ margin-bottom: 5px !important; }
.deleteUsers td{ background-color: #CCCCCC; padding: 0 5px 5px 5px !important; text-align: left; }
.deleteUsers td h5{ font-size: 18px !important; }
.deleteUsers td h5 span{ color: black !important; font-size: larger; }

.tableUsersPaging { margin-bottom: 5px !important; border: hidden !important; }
.tableUsersPaging td{ background-color: #CCCCCC; padding: 5px !important; text-align: left; border: hidden !important; }
.tableUsersPaging td h5{ font-size: 18px !important; }
.tableUsersPaging td h5 span{ color: black !important; font-size: larger; }

#pagingTable { margin-bottom: 5px; }

#tableListUsers { border: hidden !important; }

.lavender_bg { background-color: #E6E6FA !important; }
.grey_bg { background-color: #D3D3D3 !important; }
.red_bg { background-color: #FF0000 !important; }

.bottomline{ border-bottom: 1px solid black; }
.allunderlined tr td{ padding-top: 5px; padding-bottom: 5px; }
.nobullets{ list-style: none; margin-left: -30px; }
.buletts_none{ list-style-type: none; }
.level2list{
  list-style: lower-alpha;
  margin: 0;
  margin-left: -15px;
}
.marginB5px{ margin-bottom: 5px; }
.marginB3px{ margin-bottom: 3px; }
.marginB1px{ margin-bottom: 1px; }
.marginB2px{ margin-top: 5px; }
.marginL22px{ margin-left: 22px; }
.marginL35px{ margin-left: 35px; }
.marginT3px{ margin-top: 3px; }
.marginT5px{ margin-top: 5px; }
.marginT10px{ margin-top: 10px; }
.marginT15px{ margin-top: 15px; }
.note{ font: normal 12px Tahoma; }
.alignleft{ text-align: left; }
.centered{ position: fixed; left: 50%; margin-left: -100px; }

#padding2px td{ padding: 2px; }
.referencesL{
       width: 140px; 
       text-align: left; 
       vertical-align: top;
       border-left-style: hidden;
       border-right-style: hidden;
}
.referencesR{
       height: available; 
       text-align: left; 
       vertical-align: top;
       border-left-style: hidden;
       border-right-style: hidden;
}
li.listing4:before { list-style-type: none; content: "4"; }
li.listing5:before { content: "5" }
/*--------------------------- main footer ------------------------------------*/
#main_footer{
  clear: both;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  width: 1200px;
  max-width: 1200px;
  height: auto !important;
  line-height: 24px;
  background-color: #EFEFEF;
  vertical-align: middle !important;
  text-align: left !important;
  font: 11px Tahoma !important;
  position: fixed !important;
  bottom: 0 !important;
}
/*-------------------------- footer menu -------------------------------------*/
#main_footer div:nth-child(-n+2){ float: right; padding: 12x 2px !important; width: 100%; z-order: 99; display: none; background-color: silver; word-wrap: inherit !important; }
#main_footer div:nth-child(-n+2) p{ margin: 0 !important; padding: 2px 6px 9px 6px !important; border: none; text-align: left; line-height: normal; background-color: whitesmoke; font-family: 'Courier New',Helvetica,Garamond; font-size: 11.5pt; }
#main_footer div:nth-child(-n+2) p:first-of-type{ /*margin-top: -6px !important;*/ }
#main_footer div:nth-child(-n+2) p b{ margin: 0 8px 0 4px !important; width: 24px; font-size: 12px; font-weight: normal; }
#main_footer div .image_left{ width: 12px; height: 24px; margin: 0; margin-left: calc(12px / 2); margin-bottom: calc(-12px / 2); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform:  rotate(90deg); transform: rotate(90deg); }

#main_footer div:nth-child(-n+2) a{ float: right !important; clear: both !important; margin-left: 6px; padding-left: 2px; width: 24px; display: table-cell; }
#main_footer div:nth-child(-n+2) .closed{ position: relative; right: 0; top: 0; width: 20px; height: 20px; opacity: 0.3; border-radius: 50%; }
#main_footer div:nth-child(-n+2) .closed:hover{ opacity: 1; }
#main_footer div:nth-child(-n+2) .closed:before, .closed:after{ position: absolute; left: 10px; content: ' '; height: 20px; width: 2px; background-color: #000; }
#main_footer div:nth-child(-n+2) .closed:before{ transform: rotate(45deg); }
#main_footer div:nth-child(-n+2) .closed:after{ transform: rotate(-45deg); }

#main_footer div:last-child span, #main_footer div:last-child p{ height: 100%; display: inline; vertical-align: middle; }
#main_footer div:last-child span{ float: left; width: 30%; padding-top: 5px !important; }
#main_footer div:last-child p{ /*float: right;*/ word-wrap: inherit !important; }
/*-------------------------5px !important-- footer menu -------------------------------------*/
.footer_menu{ padding: 0 !important; background-color: #EFEFEF; vertical-align: middle !important; }
.footer_menu{ margin: 0; height: 100%; text-decoration: none; vertical-align: middle !important; }
.footer_menu li{ margin: 0 !important; padding: 0 12px; height: 100% !important; display: inline-block; list-style: none; font: bold 11px Tahoma !important; text-align: center; vertical-align: middle; }
.footer_menu li a{ display: block !important; padding: 5px; text-decoration: none !important; color: blue; vertical-align: middle; } /* display: block makes the entire rectangle to be clickable */
.footer_menu li:hover, .footer_menu li:hover a{ background-color: #FFBB00; color: #FFF; }
/*-------------------------- button hober ------------------------------------*/
.text-rotate {
   -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
                 -ms-transform: rotate(-90deg);
                      -o-transform: rotate(-90deg);
                                     transform: rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

   color: #000000;
   position: absolute;
   transform-origin: 50% 50%;
}
/*---------------------- ROTATE table 270 degrees ----------------------------*/
#table270degA{
  position: relative;
  border: 1px solid black;
  -ms-transform: rotate(270deg); /* IE 9 */
  -ms-transform-origin:50% 75%; /* IE 9 */
  -webkit-transform: rotate(270deg); /* Opera, Chrome, and Safari */
  -webkit-transform-origin:50% 75%; /* Opera, Chrome, and Safari */
  transform: rotate(270deg);
  transform-origin:50% 70%;
}
#table270degB{
  position: relative;
  border: 1px solid black;
  -ms-transform: rotate(270deg); /* IE 9 */
  -ms-transform-origin:50% 75%; /* IE 9 */
  -webkit-transform: rotate(270deg); /* Opera, Chrome, and Safari */
  -webkit-transform-origin:50% 85%; /* Opera, Chrome, and Safari */
  transform: rotate(270deg);
  transform-origin:50% 70%;
}
/*-------------------- independent FONT formatting ---------------------------*/
.SUPfontnormal11monospace{
  font: normal 11px monospace;
}
/*--------------------------- main menu --------------------------------------*/
.myHoverLI:hover { background-color: #DDDDDD; }
/*--------------------------- main menu --------------------------------------*/

/*--------------------------- main menu --------------------------------------*/
ol.indexOL li{
  display: block;
  position: relative;
}
ol.indexOL li.list100to500:before {
  content: counters(item, " ") ".00";
  counter-increment: item;
  position: absolute;
  margin-right: 100%;
  right: 5px; /* space between number and text */
}
ol.indexOL .lessthan_10:before {
  content: counters(list_1, " ") ".0" counters(list_2, " ");
  counter-increment: list_2;
  position: absolute;
  margin-right: 100%;
  right: 5px; /* space between number and text */
}
/*--------------------------- main menu --------------------------------------*/
.objective{
  margin-left: 0;
}
/*----------------------------BORDERLESS TABLE--------------------------------*/
.borderedTABLE{
  border: 1px solid black;
  margin-top: 15px;
  width: 100%;
}
.borderedTABLE caption{ margin-left: -2px; }
.borderedTABLE tbody tr{ text-align: left; }
.borderedTABLE tbody tr td{ vertical-align: top; }
.borderedTABLE tbody tr th{ vertical-align: middle; }
.referencelist{ list-style: lower-alpha; }
/******************************************************************************/
/* TABS - TABS - TABS - TABS - TABS - TABS - TABS - TABS - TABS - TABS - TABS */
/******************************************************************************/
/*----- Tabs -----*/
.tabs {
  width: 100%;
  height: 700px;
  display: inline-block;
}
 
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after { display:block; clear:both; content:''; }
.tab-links li { margin: 0 5px -10px 5px; float:left; list-style:none; }
.tab-links a {padding: 9px 15px; display: inline-block; border-radius: 8px 8px 0 0; background: #FFF; font-size: 14px; font-weight:600; color: #4c4c4c; transition: all linear 0.15s; }
.tab-links a:hover { background: #a7cce5; text-decoration: none; }
li.active a, li.active a:hover { background: #000; color: #fff !important; }
/*----- Content of Tabs -----*/
.tab-content { padding: 0; background: #FFF; }
.tab { display: none; }
.tab.active {display: block; }
/******************************************************************************/
/*                                                                                                                                                                                                                                                                                                                                                                          */
/******************************************************************************/
.button3d{
  margin: 1px 0; padding: 3px; width: 144px; background-color: #67DCF9; text-align: center;
}
.button3d_plain{
  margin: 1px 0; padding: 3px; width: 144px; text-align: center;
}
.button3d:hover{
  background-image:linear-gradient(bottom,rgb(79,142,191) 0%,rgb(102,166,214) 100%);
  background-image:-o-linear-gradient(bottom,rgb(79,142,191) 0%,rgb(102,166,214) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(79,142,191) 0%,rgb(102,166,214) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(79,142,191) 0%,rgb(102,166,214) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(79,142,191) 0%,rgb(102,166,214) 100%);
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,rgb(79,142,191)),color-stop(1,rgb(102,166,214)));
  }
.button3d:active{
  -webkit-box-shadow:0px 2px 0 #2b638f,0px 1px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 3px rgba(255,255,255,.5);
  -moz-box-shadow:0px 2px 0 #2b638f,0px 1px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 3px rgba(255,255,255,.5);
  box-shadow:0px 2px 0 #2b638f,0px 1px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 3px rgba(255,255,255,.5);
  background-image:linear-gradient(bottom,rgb(88,154,204) 0%,rgb(90,150,199) 100%);
  background-image:-o-linear-gradient(bottom,rgb(88,154,204) 0%,rgb(90,150,199) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(88,154,204) 0%,rgb(90,150,199) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(88,154,204) 0%,rgb(90,150,199) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(88,154,204) 0%,rgb(90,150,199) 100%);
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,rgb(88,154,204)),color-stop(1,rgb(90,150,199)));
  -webkit-transform:translate(0,4px) rotateX(20deg);
  -moz-transform:translate(0,4px);transform:translate(0,4px);
}
/******************************************************************************/
/*                                                                                                                                                                                                                                                                                                                                                                          */
/******************************************************************************/
#activityTable td{ font-family: Tahoma !important; font-size: 14px !important; padding: 3px !important; background-color: #E7FDA1; text-align: center; vertical-align: middle; border: 1px solid black; font-weight: bold;
}
#activityTableContents td{ font-family: Tahoma !important; font-size: 14px; padding: 3px !important; background-color: #EEFCC3; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; 
}
ol.indexOL{ margin-left: 33px !important; }

.styleTextField { margin-top: 5px; width: 256px !important; height: 20px; padding-left: 6px; border: 1px solid #666; border-radius: 3px; font-family: arial, helvertica, sans-serif; } 
select.styleTextField{ margin-top: 5px; width: calc(256px + 8px); height: 22px; padding-top: 3px; text-align: center; text-align-last: center; -moz-text-align-last: center; }
textarea.styleTextField{ height: 20px; padding-bottom: 0; }
input[type=text].styleTextField{ height: 20px !important; }
input[type=email].styleTextField{ height: 20px !important; }
input[type=password].styleTextField{ height: 20px !important; }

.submitButton{ margin: 2px 0; padding 3px 4rem; max-width: calc(256px + 8px); height: 26px !important; font-size: 14px; font-weight: bold; background-color: violet !important; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid grey; color: #980000; padding: 3px; }
.submitButton:hover{ background-color: purple !important; color: grey !important; }

article input[type="submit"]:not(.submitButton) { margin: 2px 0; padding: 3px 4rem; /*width: calc(256px + 8px);*/ height: 26px !important; font-size: 14px; font-weight: bold; background-color: #EFEFEF !important; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid grey; color: #ABABAB; }
.GPS { height: 18px !important; }

.sansserif{ font-family: Verdana, Arial, Helvetica, sans-serif; }
.serif{ font-family: Times, "Times New Roman", Georgia, serif; }
.monospace{ font-family: "Lucida Console", Courier, monospace; }
.cursive{ font-family: cursive; }
.fantasy{ font-family: fantasy; }
.emoji{ font-family: emoji; }
.math{ font-family: math; }