/* BASIC STYLINGS
============================================================================= */
body {
	padding-top: 20px;
}

.gvDateColumn {
	width: 11em;
}

.row {
	width: 600px;
	min-height: 30px;
	padding-bottom: 20px;
	margin-left: 4em;
}

/* form styling */
#form-container {
	background: white; //#eeddff;
	margin-bottom: 20px;
    border-radius: 5px;
    color: black;
}

.disabled {
    pointer-events: none;
    cursor: default;
}

.enabled {
    pointer-events: visible;
    cursor: auto;
}

.col-xs-6 {
	color: black;
}
.col-xs-offset-3 {
	color: black;
}

.form-group {
	color: black;
	font-size: medium;
}
.form-group a {
	color: black;
}
.form-group:hover {
	color: black;
	# background: red;
	# background: #ddddff;
}

#form-container .page-header {
	background: white; // #a4b4e5;
    color: black;
    font-size: 200%;
	margin: 10px;
	padding: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* ANIMATION STYLINGS
============================================================================= */
#locwiz-form  {
	position: relative;
	min-height: 180px;
	overflow: hidden;
	padding: 30px;
}

#form-views {
	width: auto;
}

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave {
	position: absolute;
	left: 30px;
	right: 30px;
    transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease; 
}

/* enter animation */
#form-views.ng-enter { 
    -webkit-animation: slideInRight 0.5s both ease;
    -moz-animation: slideInRight 0.5s both ease;
    animation: slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation: slideOutLeft 0.5s both ease;
    -moz-animation: slideOutLeft 0.5s both ease;
    animation: slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(200%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(200%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(200%); }
    to      { -webkit-transform: translateX(0); }
}

/* numbered buttons */
#status-buttons {
	
}

#status-buttons a {
	color: black;
	display: inline-block;
	font-size: 12px;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
}

.button {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
.buttonArea {
	text-align: right;
}

#status-buttons a:hover    {
	text-decoration: none;
}

#status-buttons a {
	width: 120px;
	vertical-align: top;
}

/* we will style the span as the circled number */
#status-buttons span {
	background: #aaaaff;
	display: block;
	height: 45px;
	font-size: 35px;
	margin: 0 auto;
	padding: 15px;
	width: 40px; 
    border-radius: 50%;
}

/* active buttons turn light green-blue*/
#status-buttons a.active span {
	background:#D04C8C;
}

.bodyContainer {
	width: 975px;
	min-height: 300px;
}

.incidentLocation {
	max-width: 120px;
}

.incidentDestination {
	max-width: 140px;
}

.incidentCount {
	max-width: 50px;
}

.incidentSource {
	max-width: 80px;
}

.incidentPath {
	max-width: 280px;
}

.siteEdit {
	float: left;
}

.siteView {
	float: left;
}

.subtabpane {
	margin-top: 10px;
	max-width: 975px;
	min-width: 975px;
	width: 975px;
	min-height: 250px;
	overflow: hidden;
}

.editShow {
	display: block
}

.editHide {
	display: none
}

.activeTab {
	display: block
}

.inactiveTab {
	display: none
}

<!--
/* Overrides the alternating table row colors. */
#body table.nocolor tbody tr td {
    background-color:inherit;
}

/* Override the default plain list */
ul.nostyle {
   list-style-type:none
}

/* nostyle is temporary and needs to be reworked. */
#body table.nostyle tbody tr td {
    border:none;
    padding:0px;
    margin:0px;

    padding-top:4px;
    vertical-align:top;
}

#body table.nostyle tbody tr td:first-child {
    padding-top:0px;
}
#body table.nostyle {
    margin-left:-2px
}

/* Overrides for the "notices" functionality. */
#lift__noticesContainer__ div ul  {
    padding:0px;
    margin:0px;
    list-style-type: none;
    font-size:10pt;
    font-weight:bold;
}
#lift__noticesContainer___error li {
    color:red;
}
#lift__noticesContainer___notice li {
    color:#008000;
}

.screenLock {
    opacity: 0.4;
    filter: alpha(opacity=40);
    background-color:white;
    height:100%;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
}

.header {
    padding:5px;
}

hr {
    margin:0px;
}

tr.highlightOnHover {
    cursor:pointer;
}

#body table.gv-table tbody tr.highlightOnHover:hover td {
    background-color:beige;
}

#body table.gv-table tbody tr.row_selected td {
    background-color: lightblue;
}

.keyval td {
    vertical-align:top;
}
.keyval td:first-child {
    width: 1px;
    white-space: nowrap;
    font-weight: bold;
    color: #333;
}
.keyval td:last-child {
    overflow: auto;
    word-break: break-all;
}

/*Tweaks to the superfish menu styles*/
ul.sf-menu {
    margin:0px;
}
ul.sf-menu ul {
    width: 12em;
}

.gv-form input, .gv-form select {
    width: 250px;
}
.gv-form input[type="submit"] {
    width: auto;
}

.noneExist {
    font-weight:normal ! important;
    color:gray ! important;
    text-align:center;
}

.gvNumeric {
    text-align:right;
}

.listHeader {
    text-align:left;
    font-size:12pt;
}

.disabled {
    color:gray;
}

.gv-warn {
    color:goldenrod;
}

.gv-error {
    color:red;
}

.gv-normal {
    color:#008000;
}

.container {
    padding-bottom:100px;
}

button {
    cursor:pointer;
}

#body .messages {
    padding-left:15px;
}

#body div.gv-info {
    font-weight:bold;
    font-size:10pt;
    color:goldenrod;
}
#body div.gv-info img {
    vertical-align:text-bottom;
    margin-right:3px;
}
#body div.gv-info ul {
    list-style-type:none;
    padding:0px;
    margin-top:0px;
    margin-bottom:5px;
}

/*Match decoration*/
.gv-decorated-match {
    position:relative;
    padding:1px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
/*    color:#008000;
    font-weight:bold;
*/
}

.gv-text-frame {
    width:945px;
    height:300px;
    overflow:auto;
    padding:10px;
    border:5px solid gray;
    margin:0px;
}

.gv-subtext-frame {
    width:908px;
    height:auto;
    word-wrap:break-word;
    padding:10px;
    border:2px solid lightblue;
    margin:0px;
}

/*Aligns all table cells to the top*/
.gv-align-top td {
    vertical-align:top;
}

td.gv-restrict-width, td.gv-restrict-width div {
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Date and Time */
.gv-date {
    font-size:8pt;
    color: #666;
}

.gv-time {
}

/* DataTables */
.gv-table td.sorting_asc, .gv-table td.sorting_desc, .gv-table td.sorting {
    cursor:pointer;
    background-position:right center;
    background-repeat:no-repeat;
}

.gv-table td.sorting_asc {
    background-image:url('/images/bullet_arrow_up.png');
}

.gv-table td.sorting_desc {
    background-image:url('/images/bullet_arrow_down.png');
}

.dataTables_filter {
    /*currently unused*/
}

.gv-filter {
    width:auto;
    margin:0px;
    margin-left:auto;
}
.gv-filter_label {
    font-weight: bold;
}
.gv-filter_label_staticfilters {
    /*font-size: 8pt;*/
}
.gv-filter_staticfilter {
    color:#666666;
}
.gv-filter_staticfilter_name {
    font-weight: bold;
}
.gv-filter_staticfilter_value {
}

.dataTables_length {
    margin-top:3px;
    margin-bottom:3px;
    float:left;
    text-align:left;
    width:40%;
}

.dataTables_processing {
    display:none;
}

.dataTables_paginate {
    margin-top:3px;
    margin-bottom:3px;
    float:right;
    text-align:right;
    width:40%;
}

.dataTables_paginate .paginate_button, .dataTables_paginate .paginate_active {
    padding-left:2px;
    padding-right:2px;
    cursor:pointer;
}

.dataTables_paginate .paginate_active {
    color:black;
    font-weight:bold;
}

.dataTables_paginate .paginate_button_disabled {
    color:gray;
    cursor:auto;
}

.dataTables_info {
    margin-top:3px;
    margin-bottom:3px;
    float:left;
    width:40%;
}

.dataTables_empty {
    font-weight:normal ! important;
    color:gray ! important;
    text-align:center;
}

.dataTable {
    clear:both;
}

.selectedNode {
	color: blue;
    border: 1px solid black;
}

.dataTable tr td {
    vertical-align:top;
}

/** Pie Chart Labels */
.pie-label {
    font-size:8pt;
    padding:2px;
    color:white;
    font-weight:bold;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:150px;
}

.pie-label .label {
}

.pie-label .percentage {
}

.pie-label .percentage:after {
    content:" - ";
}

-->

.gvLeftCol {
    position: relative;
    background-colorx: blue;
}

.leftCover {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* This will make it span the full width of the .abc div. */
    height: 100%; /* This will make it span the full height of the .abc div. */
    background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
    background-color2: red;
    z-index: 2;
}

.leftCover2 {
	positionx: absolute;
    topx: 0;
    leftx: 0;
    widthx: 100%;  /* This will make it span the full width of the .abc div. */
    heightx: 100%; /* This will make it span the full height of the .abc div. */
    background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
    z-index: 1;
}

.numeric {
	text-align: right
}