body {
  font: 12px Roboto, Helvetica, Arial, sans-serif; 
  margin: 0px; 
  color: #333333; 
  background:#ffffff; /*F4F5F7; */
}

/* lifted and altered from styles.css */
.bannerBg { position: relative; overflow: hidden; width: 100%; height: 106px;}
.skyBg { width: 100%; background: #3f447d; 
  background-image: url(../images/BgImages/header-gradient.png);
  background-position: right;
}
/*.dataEnv_dev, .dataEnv_dit { background: #222467}*/
.ttLogo { float: right; margin: 3px 0 0 3px; width: 100px; }
.topRightLogo {
  float: left; 
  width: 300px; 
  margin: 19px 0 0 13px; 
  opacity: 0.8;
}
.blockHeading {
  display: flex;
  padding: 11px;
  width: 40%;
  margin: auto;  
  justify-content: center;
  text-align:center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.bannerTitle {
  display: flex;
  justify-content: center;
  text-align:center;
  width: auto;
  padding-right: 25px;
  color: #fff; z-index: 3;
  font-size: 2.5em; font-family: 'Red Hat Text', Futura, Tahoma, "Arial Black", sans-serif,; 
  font-weight: bold; line-height: 1.2em
}
.bannerTitle strong { padding: 0 6px; color: #e2d049; }
.bannerLocIcons {margin: 0 55px 0 0; float: right; width: 275px; color: #a9abab; text-align: right}
.locIconImgDiv { float: right; margin: 0 3px 0 0; width: 45px; height: 45px;  }
.locIconImg { margin: 0 3px 0 0; width: 42px; height: 42px; background: #aaa; opacity:0.4; border: 1px solid #ccc; border-radius: 0 0 5px 5px; }
.locIconImg:hover { background: #eee; }
.ttLocSel { background: #fff; opacity:1;}
.ttLocSel:hover { background: #fff; }

.bannerMeta {margin: 4px 8px 6px 0; float: right; width: 150px; color: #a9abab; text-align: right}
.gearIcon {margin: -6px 0 0 0; height: 28px;}

.loginPosition {
  margin: 40px auto;
  width: 50%;
}
/* positioned sectionals */
.panel{
	margin: 0 0 6px 0;
	width: auto;
/*	padding: 0 15px;  determines page margins and all internal div width! */
}
.panelHeader{
  width: 100%;
  height: 45px;
}
.panelTitle{
  padding: 0 0 0 15px;
  float: left;
  color: #55616a;
}
.iconSprite {
  margin: 0 0 0 13px;
  float: left;
}
.iconSprite img{
  display: block;
  width: 200px;
  opacity: 0.4;
  margin: 0 12px 0 -13px !important;
}
.hey {
  border: 1px solid red;
  clear: both;
  width: 60%;
  margin: auto;
  padding: 3px;
  text-align: center;
  color: #000;
  background: #fcc;
}
.modal {
  position: absolute;
  top: 102px;
  width: 640px;
  padding: 12px 12px 0 12px;
  overflow: hidden;
  border: 3px solid #000;
  border-radius: 5px;
  background-color: #fff;
  z-index: 210;
  transition: all 0.27s; 
  transition-timing-function: ease-in;
}
.modal-container {
  height: 100%;
  overflow: hidden;
}
.modal-header {
  height: 8%;
}
/* these % height settings are less than ideal */
.modal-body {
  height: 81%;
  overflow: auto;
  padding: 6px;
}
.modal-footer {
  float: right;
  margin: 2px 18px 0 0;
  padding: 6px;
  background: #eee;
}
.modal-cancel-circle {
  position: absolute;
  top: 8px;
  right: 10px;
  transition: all 0.7s;
}
.modal-cancel-circle:hover {
  color: #000;
}

/* detail pages */
/* detail page */
.detailContainer{
  width: 95%;
  margin: 0px auto;
}
.detailBoxLeft{
  float: left;
  width: 23%;
  margin: 0px auto;
}
.detailBoxRight{
  float: right;
  width: 75%;
  margin: 0px auto;
}
.detailBoxHeader{
  width: 100%;
  margin: 0 4px;
  padding: 3px 0;
  background: #101056;
  text-align: left;
  font-size: 1.8em;
  color: #fff;
  border: 1px solid #101056;
  border-radius: 5px 5px 0 0;
}
.detailBoxHeader label{
  display: inline-block;
  margin: 0 0 0 5px;
}
.detailBoxHeader span, .detailBoxHeader a {
  display: block;
  float: right;
  margin: 0 5px;
  color: #fff;
}

.detailBox{
  width: 100%;
  margin: 0 4px 12px 4px;
  background: #fff;
  border: 1px solid #101056;
  overflow: hidden;
  transform-origin: top
}
.teamRows {
  text-align: left;  
}
.inlineMiddling > * {
  vertical-align: middle; 
}
.detailBoxLeft .label{
  padding: 3px 10px 0 3px;
  font-size: 1.2em;
  color: #aaa;
  font-weight: bold;  
}
.detailBoxLeft .value{
  margin: 0 1px 0 7px;
  padding: 5px 3px 5px 7px;
  font-size: 1.4em;
  border: 1px solid #fefefe;
  border-radius: 10px 0 0 10px;
}
.detailBoxRight .label{
  float: left;
  width: 17%;
  min-width: 170px;
  margin: 3px 10px 0 0;
  font-size: 1.2em;
  color: #aaa;
  font-weight: bold;  
  text-align: right;
}
.detailBoxRight .value{
  float: left;
  position: relative;
  width: 75%;
  margin: 3px 10px 5px 0;
  padding: 0 3px 4px 3px;
  font-size: 1.4em;
  text-align: left;
  border: 1px solid #fefefe;
}
.bigSticky{
  font-size: 9em !important;
}
.bigStickyTxt{
  display: inline-block;
  font-family: "Comic Sans MS", "Comic Sans", cursive, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 33px;
  text-align: center;
  vertical-align: top;
  width: 100px;
  margin: 18px 0 0 -97px;
  color: #000;    
}
.stickyLeft{
  float: left;
  width: 100px;
  height: 100px;
  margin: 2px 10px 0 9px;
}
.weeklyText{
  float: left;
  width: 900px;
  min-height: 120px;
  margin: 8px 0 24px 6px;
  padding: 0 0 0 3px;
  border-bottom: solid 3px #999;
  font-size: 1.4em;
  text-align: left;
}
.weeklyMeta{
  float: right;
  font-weight: bold;
}

.tableContainer{
	width: 100%;
	clear: both;
}
.formFloat {
  float: left;
	margin: 2px 0 0 6px;
}

.formSubmit{
  padding: 0 0 8px 0;
  background: #eee;
  width: auto;
  overflow: auto;
}

.formRow{
	position: relative;
	height: 59px;
	overflow: hidden;
}
.formRow label{
  display: block;
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 15px;
  font-weight: bold;
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}
/*** make thumb *****/
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

.formRow input[type=range] {
	top: 33px;
	height: auto;
	border: none;
	padding: 0;
}
.rangeValue{
  position: absolute;
  top: 7px;
  right: 23px;
  width: auto;
  padding: 2px 8px;
  font-size: 1.2em;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 100;
}


.formRow textarea {
	margin: 22px 0 0 14px;
  font-size: 1.3em;
  padding: 4px 0 0 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 1px 1px 6px 0px #757575;
}
.formRow input, .formRow select {
  display: block;
  position: absolute;
  top: 25px;
  left: 15px;
  width: 390px;
  height: 25px;
  padding: 0 0 0 4px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  background-color: #fff;
}
.formRow input[type=text], .formRow input[type=number], .formRow input[type=date], .formRow select {
  box-shadow: inset 1px 1px 6px 0px #757575;
}
.formRow input:disabled {
  background: #eee;
  color: #333;
}
.formRow input[type=submit] {
  display: block;
  position: absolute;
  top: 15px;
  left: 25px;
  background-color: #006;
  color: #ffffff;
  width: auto;
  height: auto;
  padding: 4px 7px;
  border-radius: 11px;
  font-size: 17px;
  cursor: pointer;
}   
.formRowErrorMsg {
  display: block;
  position: absolute;
  top: 0px;
  right: -115px;
  left: 230px;
  height: 17px;
  padding: 4px;
  margin: 0;
  font-size: 1.6em;
  color: #900;
  border-radius: 5px;
  background-color: #eaa;
}

.formPaneContainer {
  /* background-color: #999; */
  position: relative;
  width: 800px;
  margin: 0 auto;
}
.formPaneActive {
  position: absolute;
  top: 3px;
  width: 710px;
  padding: 6px;
  margin: 0;
  border: 3px solid #aaa;
  border-radius: 15px;
  background-color: #fff;
  z-index: 110;
  transform: translateZ(6px)
}
.formPaneActive h2 {
  margin: 3px 0 0 0 ;
  padding: 5px;
}
.formPaneInactive {
	position: absolute;
	top: 3px;
	height: 45px;
	margin-top: -48px;
  padding: 6px;
  border: 2px solid #aaa;
  border-radius: 15px 15px 0 0;
  background-color: #eee;
}
.formPaneInactive span, .formPaneInactive h3{
  float: left;
	display: block;
	margin: 0 4px;
}
.formPaneInactive h3{
	margin: 4px 6px 30px -8px;
  padding: 6px;
  opacity: 0.8;
  border: 1px solid #ccc;
  border-radius: 0 11px 11px 0;
  color: #f0f0f0;
}

.tablePageFilters{
	clear: both;	 
  border: #dadada 2px solid;
  background-color: #fbfbfb;	
  background-position: 0 -46px;
  background-image: url(../images/BgImages/Img11.gif);
  background-repeat: repeat-x;
  height: 42px;
}
.tableKeywordFilter{
  min-width: 250px;
  float: left;
  margin: 9px 0 0 3px;
}
.tableExtraFilters{
  float: left;
  margin: 0px 0 0 7px;
  padding: 0 4px;
  font-size: 10px;
  height: 39px;
}
.tablePagingFilter{
  width: auto;
  float: right;
  margin: 9px 0 0 0;
}
.tableGridContainer {
	border: #dadada 2px solid;
}
.tableGridHighlight{
  padding: 15px 0;
  background: #fff;
  color: #e4151a;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.tableGrid {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  overflow-x: auto;
  overflow-y: auto;
  text-align: left;
}
.tableIconLink {
  color: #5392b3 !important;
  padding: 2px !important; 
}
.tableIconLink:hover {  
  color: #666 !important; 
  text-decoration: none !important;
}
.tableProgressBar {
  width: auto;
  height: 16px;
  margin: 2px 5px;
  border: #000 1px solid;
  border-radius: 2px;
}
.tableProgressBar div {
  height: 100%;
  margin: 0;
  background: #00aa00;
}
.WhtBoxM {
  padding: 15px;
  margin: 11px 0;
  background: #fbfbfc;
  border-top: 3px solid #e0e0e0;
  border-bottom: 3px solid #e0e0e0;
  border-radius: 3px;
}
.markdown p {
  margin: 0 0 1em 0;
  padding: 0;
}
.markdown code, .markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
}
.markdown h2 {
  clear: both;
}
.markdown pre {
  padding: 14px;
  overflow: auto;
  font-size: 1em;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.galleryLabel {
  position: absolute;
  bottom: 10%;
  right: 20px;
  padding: 8px 10px;
  width: auto;
  font-size: 2em;
  background: #50c4e4;
  color: #ebf4fb;
  border-radius: 5px;
}
.galleryThRack {
  position: absolute;
  top: -53px;
  left: 28px;
}
.galleryThumb {
  position: absolute;
  top: 0px;
  width: 150px;
  margin: 0 5px;
  border: solid 2px #f8c561;
  border-radius: 0 10px; 
  opacity: 1;
}
.galleryThumb:hover {
  border: solid 2px #50c4e4;
}
.galleryThumbFade {
  position: absolute;
  top: 60px;
  width: 800px;
  /*border: none;*/
  /*opacity: 0;*/
}


.sectionLabel {
  padding: 0 0 0 8px;
  font-weight: bold !important;
  font-size: 1.1em;
  color: #5d5d5d !important;
  margin: 7px 0;
}
.sectionLabel img{
  padding: 0 11px 0 8px;
}
.djvSubHead{
  background: #dadada;
  border-radius: 4px;
  padding: 3px 7px;
  font-weight: bold;
  font-size: 14px;	
}
.easeAll{
	transition: all 1.5s ease-in-out;
}
.fainted{
	opacity: 0.3;
	filter: alpha(Opacity=30);
}
.posRelative{
	position: relative;
}
/* highlights */
.tFilterInput {
  margin: 0 5px;
  border: #9d9d9f 1px solid;
  border-radius: 4px;
  color: #535353;
  width: 150px;
  height: 20px;
  background: #ffffff;
}

.vsmContainer{
  width: 98%;
  height: 400px;
  overflow: auto;
  margin: 6px;  
}
.vsmAction{
  position: relative;
  height: 50px;
  float: left;
  margin: 0;
  transition: all 0.8s ease-in-out;  
}
.vsmWait{
  float: left;
  height: 50px;
  border-bottom: 6px solid #990000;
  transition: all 0.8s ease-in-out;  
}
.vsmProcess{
  float: left;
  height: 50px;
  border-left: 2px solid #006000;
  border-top: 6px solid #00cc00;
  border-right: 2px solid #000000;
  border-radius: 12px 0 0 0;
  transition: all 0.8s ease-in-out;
}
.vsmLegend{
  position: absolute;
  top: -70px;
  right: 2px;
  height: auto;
  text-align: left;
  border: 1px solid #999;
  border-radius: 5px 5px 3px 3px;
  transition: all 1.3s ease-in-out;
}
.vsmLegend h4{
  margin: 0;
  padding: 4px;
  text-align: center;
  background: #2929da;
  color: #fff; 
}
.vsmLegend div {
  padding: 4px 4px 4px 8px;
}
.vsmLegend b {
  display: inline-block;
  width: 100px;
}

.vsmFrm{
  position: absolute;
  top: 10px;
  left: 3px;
  width: 335px;
  height: auto;
  border: none;
  border-radius: 5px;
  padding: 4px 5px;
  background: #2929da;
  text-align: left;
  font-size: 1.6em;
  color: #fff;
  z-index: 22;
  transition: all 0.8s ease-in-out;  
}
.vsmFrmRows{
  position: relative;
  margin: 5px 0;
}
.vsmFrmRows strong{
  display: inline-block;
  width: 135px;
}
.vsmFrmRows input, .vsmFrmRows select{
  font-size: 1em;
}
.vsmFrmRowsWrap {
  display: inline-block;
}
.vsmFrmRowsIcon {
  position: absolute;
  top: 5px;
  right: 2px;
  cursor: pointer;
}
.vsmFrmSub{
  position: absolute;
  bottom: 11px;
  right: 20px;
  height: 35px; 
  background: #2929da;
  border-radius: 5px;
  font-size: 1em;
  color: #fff; 
  cursor: pointer;
}
.vsmFrmDaysHrs{
  position: absolute;
  top: 8px;
  left: 215px;
  font-size: 0.6em;
  font-weight: bold;
  color: #900; 
}

.vsmFrmCallInsert{
  position: absolute;
  top: -2px;
  left: -2px;
  width: 15px;
  height: 70px;
  border-left: 2px transparent;
  color: #F4F5F7;
}
.vsmFrmCallInsert div {
  position: absolute;
  top: 54px;
  left: -2px;
  border-radius: 0 0 5px;
}
.vsmFrmCallInsert:hover {
  border-left: 2px solid #0f0;
}
.vsmFrmCallInsert:hover div {
  background: #ccc;
}

.vsmFrmCallEdit{
  position: absolute;
  top: 53px;
  left: 18px;
  min-width: 15px;
  height: 20px;
  color: #F4F5F7;
  margin: 0 auto;
  text-align: center;
  border-radius: 0 0 5px 5px;
}
.vsmFrmCallEdit:hover {
  background: #ccc;
}

.vsmMetaFrm{
  position: relative;
  float: left;
  margin: 0;
  color: #F4F5F7;
  background: #ccf;
  transition: all 0.8s ease-in-out;  
}

.yell{
  color: #ff9;
}
.bold{
  font-weight: bold;
}
.larger2m{
  font-size: 1.2em;
}
.greenBg{
  background: #9bfdd2;
}
.blueBg{
  background: #5f6eea;
}
.redBg{
  background: #f99;
}
.muted{
  color: #777;
}
.mutedBg{
  background: #777;
}
.mClick{
  cursor: pointer;
}
.linkText{
  color: #99f;
}
.clickBg{
  background: #d2e7f9;
}
.thClearJQ{
  padding: 0px !important;
}
.thMapsigns{
  padding: 0px 12px 1px 17px !important;
  background-image: url(/images/flag-map-of-texas-county.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.thSchedToggle{
  padding: 0px 2px 1px 4px !important;
  color: #367ebd;
}
.borderRight2Blk{
  border-right: 2px solid #333;
}
.borderLeft2Blk{
  border-left: 2px solid #333;
}
.journalAbs{
  position: absolute;
  top: 19px;
  right: 22px;
  width: 300px;
  height: 152px;
  overflow: auto;
  border: 1px solid #999;
  border-radius: 5px;
  background: #f5f5f5;
  z-index: 100;
}

.mdHelpIcon {
  position: absolute !important;
  top: 7px;
  right: 340px;
  height: 26px;
  z-index: 100;
  padding: 0px 3px 0px 42px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 1.4em;
  line-height: 1.6em;
  color: #333;
  background-color: #d6d6d6;
  background-position: 0px;
  background-image: url(../images/markdown39x24-solid.png);
  background-repeat: no-repeat;
}
.mdHelpIcon:hover, .mdHelpIconActive{
  border: 1px solid #cecece;
  background-color: #fff;
  color: #666;
  background-image: url(../images/markdown39x24.png);
  transition: all 0.7s;
}
.mdTmplBtn {
  position: absolute !important;
  top: 12px;
  right: 240px;
  z-index: 100;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #666;
  background-color: #d6d6d6;
}
.mdTmplBtn:hover {
  border: 1px solid #cecece;
  color: #0f23d0;
  background-color: #fff;
  transition: all 0.7s;
}

.mdHelpPreviewCell{
  background: #fff;
  color: #000 !important;
  font-size: 1.1em;
}

.cellAbs{
  position: absolute;
  top: 0;
  left: -5px;
  border: 1px solid red;
  background: #fff;
  z-index: 100;
}
.schCell{
  height: 100%;
  position: relative;
}
/* dynamic sch_ based on commit level */
.sch_committed{
  background: #fff;
}
.sch_tentative{
  background: #e2f1d9;
}
.sch_loose{
  background: #fcfdda;
}

.orange{
  color: #f7a800;
}
.blue {
  color: #104c80; 
}
.red {
  color: #cd040b;
}
.green {
  color: #55b747;
}
.black {
  color: #000;
}
.challNum{
  display: inline-block;
  vertical-align: top;
  width: 12px;
  margin: 3px 0 0 -12px;
  font-weight: bold;
  color: #fff;    
}
.schFrm{
  width: auto;
  height: auto;
  border: none;
  border-radius: 3px;
  padding: 4px 5px;
  background: #367ebd;
  color: #fff;
  z-index: 22;
}
.schFrmRows{
  margin: 2px 0;
}
.schFrmSub{
  position: absolute;
  top: 121px;
  right: 15px;
  height: 35px; 
  background: #367ebd;
  color: #fff; 
  cursor: pointer;
}
.upperLeft {
  position: absolute;
  top: 95px;
  left: 2px; 
}
.upperRight {
  position: absolute;
  top: 2px;
  right: 2px; 
}
.tightUpperRight {
  position: absolute;
  top: 0px;
  right: 0px; 
  z-index: 20;
}
.cellDiv{
  width: auto;
  padding: 6px;
  color: #333;
  border-bottom: 1px solid #a8a8a8;
}
.GrayTxt {
  color: #8d8d8d;
}
.GrayTxtBold {
  COLOR: #8d8d8d;
  font-weight: bolder;
}

.infoCircle {
  display: absolute;
  top: 5px;
  left: 420px;
  width: 26px;
}

/* Tooltips stuff (for anywhere) */
[tooltip] {
  position: relative;
}

[tooltip]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 6px 0 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
  opacity: 0;
}
[tooltipPos='bottom']::before {
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  white-space: pre-wrap;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: rgba(20, 20, 60, 0.7);
  text-align: left;
  color: #fff;
  padding: 4px 2px;
  font-size: 12px;
  min-width: 160px;
  border-radius: 3px;
  pointer-events: none;
  padding: 4px 4px;
  z-index: 1399;
  opacity: 0;
}
[tooltipPos='bottom']::after {
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%) translateY(0%);
}

[tooltip]:hover::after,
[tooltip]:hover::before {
  opacity: 1;
  transition: all 0.6s;
}

/* Menu stuff */
#menuMain{
  position: absolute;
  top: 83px;
  left: 320px;
}
#menuSub{
  position: absolute;
  top: 114px;
  left: 250px;
}
.menuUl{
  list-style: none;
}
.menuLi{
  display: inline;
  list-style: none;
}
.menuLi a{
  margin: 0 1px 0 0;	
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 1px;
  background: #222;
  font-size: 14px;
  color: #eee;
  text-decoration: none;
}
.menuLi.menuSubLi a{
  padding: 7px 8px;
  font-family: arial;
  font-size: 14px;
  letter-spacing: .025em;	
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 0 0 5px 5px;
  color: #cd040b;
  background: none;
}

.menuLi.tableTabs a {
  padding: 7px 8px 12px 8px;
  margin: 0 4px;
  font-family: arial;
  font-size: 12px;
  letter-spacing: .025em; 
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
  color: #333;
  background: none;
}

.menuLi.menuSel a{
  background: #fafaff !important;
  color: #333;
  font-weight: bold;
  transition: all .3s ease-in-out;
}
.menuLi a:hover{
  background: #666;
}
.menuSubLi.menuSel a, .menuSubLi a:hover {
  color: #cd040b;
  border: 1px solid #aaa;
  background: none;
}
.tableTabs.menuSel a, .tableTabs a:hover {
  color: #cd040b;
  border: 1px solid #aaa;
  border-bottom: none;
  background: none;
}
.loginBtn {
  display: block;
  width: max-content;
  padding: 6px 9px;
  margin: 30px 0 0 0;
  border: 1px solid blue;
  border-radius: 4px;
  background: blue;
  font-size: 14px;
  color: #eee;
  text-decoration: none;
}


.mdContent {
    padding: 0 10px 8px 0;
    width: auto;
    font-size: 1.4em;
    color: #222;
    border-radius: 5px;
}

.mdButton a {
  background: #b70303;
  color:white;
  padding:10px 20px;
  text-decoration:none;
  font-weight:bold;
}

.speakerRight {
  float: right;
  margin: 4px;
  max-width: 20%;
}
.speakerLeft {
  float: left;
  margin: 4px;
  max-width: 20%;
}

/* ##Device = Low Resolution Tablets, Mobiles (Landscape) , Screen = B/w 481px to 767px */
@media (min-width: 100px) and (max-width: 780px) {

  h1 { font-size: 1.8em }
  h2 { font-size: 1.4em }
  h3 { font-size: 1.2em }
  .bannerTitle { top: 5px; left: 64px; color: #fff; z-index: 3; font-size: 1.4em; line-height: 1em}
  .bannerMeta {display: none;}
  .topRightLogo {
    height: 69px;
    margin: 42px 0 0 0;
  }
  .panelHeader { height: 0px; }
  .iconSprite { display: none; }
  .mdContent { font-size: 1.0em; }

  .bodyBlock, .rightBlock, .leftBlock {
    width: 95% !important;
    margin: 6px;
  }

  #menuMain{
    top: 2px;
    left: 2px;
    padding: 11px;
    background: #222;
    z-index: 100;
  }
  #menuSub{
    position: absolute;
    top: 114px;
    left: 250px;
  }

  .menuLi{
    display: block;
    height: 35px;
  }
  .menuLi a{
    margin: 2px 1px 0 0;  
    padding: 6px 12px;
    border: none
    background: #222;
    font-size: 14px;
    color: #eee;
    text-decoration: none;
  }
  .menuLi.menuSubLi a{
    padding: 3px;
    font-size: 14px;
    letter-spacing: .025em; 
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 0 0 5px 5px;
    color: #cd040b;
    background: none;
  }




}

/* Smartphones Mobiles (Portrait). Screen = B/w 320px to 479px */
/*@media (min-width: 320px) and (max-width: 480px) {

}
*/