body {
	 
	 background-color:#000000; 
     font: normal normal 14px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
     background-image:unset;
     background-size:cover;
     /* background-repeat:no-repeat; */
     /* overflow-x: hidden; */
     margin:0px;
     opacity: 0;
     -webkit-transition: opacity 1s ease-in;
       -moz-transition: opacity 1s ease-in;
        -ms-transition: opacity 1s ease-in;
         -o-transition: opacity 1s ease-in;
            transition: opacity 1s ease-in;
}
      
h1 {
	font: normal normal 16px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

h2 {
	color: #FFFFFF;
	font: normal normal 14px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h3 {
	font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

td {
     font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
}



button {
	cursor: pointer;
}

a {text-decoration: none; }
a:link{ color:#f8f8f8; }
a:visited{ color:#f8f8f8; }
a:hover{ color:#ffffff; }
a:active{ color:#f8f8f8; }

p {
	font: normal normal 13px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #B8CEDB;
	margin: 0 0 10px 5px;
}
/* end basic styling   */

p.Mesg {
	font: normal normal 13px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin: 0 0 10px 10px;
	/* position: absolute; */
   /* bottom: 25px; */
}
p.eMesg {
	font: normal normal 13px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #C70C1F;
	margin: 0 0 10px 10px;
	/* position: absolute; */
   /* bottom: 25px;*/
}



/* **** busy icon ***** */
.loading {
    display: block;
    width:150px;
    height: 50px;
    margin: 0 auto;
    position:absolute;
    top: 10px;
    left: 50px;
    z-index: 3;
    background-image: url(../resource/img/busy9.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

/* ***********  */



.classLogo{
	color:#FFFFFF;
	width:300px;
	position:absolute;
	top:50px;
	left:300px;
	/* z-index:2;  */
	
}



.loading {
    display: block;
    width:150px;
    height: 50px;
    margin: 0 auto;
    position:absolute;
    top: 10px;
    left: 50px;
    z-index: 3;
    background-image: url(../resource/img/busy9.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}



.classButton{
	font: normal normal 14px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border-radius: 0px;
	border:1px solid #FFFFFF;
	height: 40px;
    width: 250px;
    color: #FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classButton:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}


.classButtonThin{
	font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border-radius: 0px;
	border:1px solid #FFFFFF;
	height: 25px;
    width: 180px;
    color:#FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classButtonThin:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}

	
.classButtonPage{
	font: normal normal 11px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border-radius: 0px;
	border:1px solid #FFFFFF;
	width:35px;
	height:25px;
	/* width: 250px; */
    color:#FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classButtonPage:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}

.classButtonPage img{
	width:15px;
	padding-top:5px;
}	
.classButtonSelect{
	font: normal normal 11px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-left: 30px;
	margin-top:3px;
	border-radius: 0px;
	border:1px solid #FFFFFF;
	position:absolute;
	width:35px;
	height:25px;
    color: #FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classButtonSelect:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}

.classButtonSelect img{
	width:15px;
	position:relative;
	/* padding-top:5px; */
}	


.classNavButton{
	font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border:none;
	/* border-bottom: 1px solid #FAFFFD; */
	/* border-radius: 8px; */
	height: 25px;
    width: 150px;
    color: #FAFFFD;
    background-color:transparent;
	filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;}
.classNavButton:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}

.classNavButtonActive{
	font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border:none;
	border-bottom: 1px solid #FAFFFD;
	/* border-radius: 8px; */
	height: 25px;
    width: 150px;
    color: #FAFFFD; 
    background-color:transparent; 
	filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;
	}

.classSymbolContainer{
		
		background-color:transparent;
		border: 1px solid #FFFFFF;
		border-radius: 0px;
		width:40px;
		height:25px;
		filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
}

.classSymbol{
		position:relative;
		font-size:20px;
		color:#FFFFFF;
		background-color:transparent;
		left:-3px;
		top:-4px;
		border:none;
		text-align:left;
}
.classSymbolContainer:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}



.UploadPanel {
	position: absolute;
    height: 300px;
    top: 100px;
    left: 400px;
	overflow: hidden;
	width:400px;
}
.classChooserBlind{
	position: absolute;
    /* top: 0px;  */
    top:150px;
    left: 0;
    height:40px;
    width: 250px;
    opacity: 0;
}

.classChooserButton{
	/* top:0px; */
	top:150px;
	position:absolute;
	font: normal normal 16px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	border-radius: 0px;
	border:1px solid #FFFFFF;
	height: 40px;
    width: 250px;
    color: #FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classChooserButton:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}

.classUploadButton{
	/* top: 90px; */
	top:240px;
    position: absolute;
	font: normal normal 16px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	border-radius: 0px;
	border:1px solid #FFFFFF;
	height: 40px;
    width: 250px;
    color: #FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
.classUploadButton:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}



input#idUploadFilename {
	/* top: 60px; */
	top:210px;
	width:350px;
    position: absolute;
	font: normal normal 12px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin: 0 0 10px 10px;
	background: transparent;
    border: none;
	
}


.selectDiv {
	font: normal normal 13px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	//top: 150px;
	top:0px;
    position: absolute;
    width:250px;
 }

.selectLabel {
	top: 0px;
    position: absolute;
}    
.selectBox {
	top: 30px;
    position: absolute;
    width: 250px;
    height:25px;
    background: transparent;
    color: #E1E3D5;
    border-radius: 0px;
    border:1px solid #E1E3D5;
    text-align: center;
    border:1px solid;

 }
.classOption{
	background-color:#000000 !important;
}
 
.servletLink{
   font: normal normal 10px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
   position:absolute;
  /* text-align: center; */
  /* width: 150px; */
   background: transparent;
   color: #FFFFFF;

   border-bottom: 1px solid #FFFFFF;
   filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
   transition: border-color .1s ease-in-out;
}
.servletLink:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}


 
.columnClick{
   filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
   transition: border-color .1s ease-in-out;
   
}
.columnClick:hover{
	filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;
	/* border-bottom: 1px solid #FFFFFF; */
	text-decoration-line:underline;
	cursor: pointer;
	}





.menuSelect{
   font: normal normal 14px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
   /* margin-left: 50px; */
   margin-top: 20px;
   width: 250px;
   background: transparent;
   color: #FFFEFC;

   border-bottom: 1px solid #FFFEFC;
   border-top: none;
   border-left: none;
   border-right: none;
   text-align: left;
   
   filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
   transition: border-color .1s ease-in-out;
}
.menuSelect:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;}


.SheetPanel {
	color:#9E9E9E;
	position:absolute;
    /* margin-left: 50px; */
    /* margin-top: 50px; */
    /* height: 100%; */
    width: 350px;
    /* cew background-color: black; */
    /* background-color: transparent; */
 
}

.SheetPanel input {
	/* cew background-color: #0c0c0c;  */
	background-color: rgba(74,72,72,0.5);
	/* cew color:#b4b4b4;  */
	color:#FFFFFF;
	text-align:right;
	border-top:none;
	border-bottom:none;
    border-left:none;
    border-right:none;
    filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
}
.SheetPanel input:hover{
	filter:alpha(opacity=100);
	 -moz-opacity:1.0; 
	 -khtml-opacity:1.0;
	  opacity:1.0;
 }



.StatusSheetPanel {
	color:#9E9E9E;
	position:relative;    
    background-color: black; 
}
	  
	  
.StatusPanel {
    left: 10px;
    bottom: 0px;
    /* position: absolute; */
   
    /*height: 60px;*/
    width: 400px;
    background-color: #000000; 
    border-top: 1px solid #DBDBD5;

}



/* end basic styling                                 */

      .tabhead {
            font: normal normal 11px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
            height:20px;
           /* width:900px; */
           /* left: 50px; */
           /* top: 50px; */
          /* position:absolute;*/
            border-left:solid 1px #FFFFFF;
            border-top-left-radius: 0px;
            
       }
       .tabhead tr{
         /* cew background: black; */
         background:#525151;
          color: #D6D1D0;
       }
       .tabhead td {
          border-spacing: 0px !important;
          border-top:solid 1px #FFFFFF;
          border-right:solid 1px #FFFFFF;
          
          border-bottom:none;
          border-left:none;
          text-align:center;
       } 

     
      .tabbody {
            font: normal normal 11px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
            /* width:916px; */
            /*left: 50px; */
            /*top: 70px;*/
           /* height:180px; */
           /* position: absolute; */
            overflow-x:none;
            overflow-y:scroll;
            border-left:solid 1px #FFFFFF;
       }
       
       .tabbody tr {
            color:#FFFFFF;
       }
 
       .tabbody tr:nth-child(odd){
          /* cew background: #0c0c0c; */
          background: #1C1C1C;
       }

       .tabbody tr:nth-child(even){
          background: #141414;
        
       }
       
       .tabbody tr:hover {
            background: #7D7C7C;
       }
       
       .tabbody td {
          border-spacing: 0px !important;
         /* border-top:solid 1px darkgrey;*/
         /* border-right:solid 1px darkgrey;*/
          border-bottom:none;
          border-left:none;
          padding-right: 3px;
          padding-left: 2px;
       } 
       
       .tabbody td  input{
          font: normal normal 11px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
          width:100%;
          background:transparent;
          color:#FFFFFF;
          border:none;
       } 
       
       
  /* *** checkkbox classic box *** */         
.classCheckboxClassic {
	position: relative;
	width:15px;
}
       
 
 .classCheckboxGR input[type=checkbox] {
	opacity: 0;
	z-index:2;
	position:relative;
	left:-3px;
	cursor: pointer;
} 

 
/* *** checkkbox from green to red **** */         
.classCheckboxGR {
    width: 13px;
	height: 13px;
	background: #ddd;
	border-radius: 100%;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	}
	
	
.classCheckboxGR label {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 1;
	background: #3fed25;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}	

  
.classCheckboxGR input[type=checkbox]:checked + label {
	background: #ed2548;
}


/* *** checkkbox from red to green **** */  

.classCheckboxRG input[type=checkbox] {
	opacity: 0;
	z-index:2;
	position:relative;
	left:-3px;
	cursor: pointer;
}        
.classCheckboxRG {
    width: 13px;
	height: 13px;
	background: #ddd;
	border-radius: 100%;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	}
	
	
.classCheckboxRG label {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 1;
	background: #ed2548;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}	

  
.classCheckboxRG input[type=checkbox]:checked + label {
	background: #3fed25;
}



input[type=radio] {
	opacity: 0;
	z-index:2;
	position:relative;
	left:-3px;
} 
/* *** radio from red to green **** */         
.classRadioRG {
    width: 13px;
	height: 13px;
	
	background: #ddd;
	border-radius: 100%;
	
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	}
.classRadioRG label {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 1;
	background: #ed2548;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}	
.classRadioRG input[type=radio]:checked + label {
	background: #3fed25;
}


/* ****************************** */
div.classInputField{
	position:absolute;
    width:100px;
    height:30px;
    top:0;
    left:0;	
    border:solid 1px #FFFFFF;
    border-radius:0px;
}
.classInputField input {
		background-color: rgba(74,72,72,0.5);
		color:#FFFFFF;
	text-align:center;
	border-top:none;
	border-bottom:none;
    border-left:none;
    border-right:none;
    margin-left: 5px;
    filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
 }
 .classInputField input:hover{
	filter:alpha(opacity=100);
	 -moz-opacity:1.0; 
	 -khtml-opacity:1.0;
	  opacity:1.0;
 }
 
 
  /* navigation menu horizontal collapse */
 /* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
 
}



/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color:#000000; 
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  /*padding: 4em; */ 
  background-image:unset;
  background-size: cover;
 }

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url(../resource/img/menuOpen.png);
  background-repeat:no-repeat;
  background-size:contain;
  filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3;
}
label[for="nav-trigger"]:hover {
  filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
  background-image: url(../resource/img/menuClose.png);
  background-repeat:no-repeat;
  background-size:contain;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

 
/* ******* help collapse info text ************** */
.info-wrapper {
    height: auto;
    width: 320px;
    margin: 0 auto;
    padding: 0 0 2em 0;
    position: relative;
    z-index:1;
}
.info {
   /* height: 20px; */
    height:0px;
    padding: .2em 2em;
    border-bottom: solid 1px #E1E3D5;
    border-radius: 0 0 1em 1em;
    overflow: hidden;
    position: relative;
    /* added */
    border-left: solid 1px #E1E3D5;
    border-right: solid 1px #E1E3D5;
    background-color:#3B3B3B; 
}


div.info p {
	color:#FFFFFF;
}

 /* p { margin: 1em; } */
.info:after, .aftershadow {
    bottom: 0;
    width: 100%;
    height: 1em;
    border-radius: 0 0 1em 1em;
    position: absolute;
    /*
    background: -webkit-linear-gradient(rgba(192,192,192,0), #ccc);
    background: -moz-linear-gradient(rgba(192,192,192,0), #ccc);
    background: -ms-linear-gradient(rgba(192,192,192,0), #ccc);
    background: -o-linear-gradient(rgba(192,192,192,0), #ccc);
    background: linear-gradient(rgba(192,192,192,0), #ccc);
    content: '';
    */
   
}
/*
.aftershadow {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
}
*/
.info-wrapper a#aCollapse {
    left: 50%;
    bottom: 1.3em;
    width: 9em;
    height: 1.3em;
    margin: -.1em 0 .35em -4.5em;
    border-bottom: solid 1px #E1E3D5;
    border-radius: 0 0 1em 1em;
    display: block;
    overflow: hidden;
    position: absolute;
    font: 700 .67em/1.25em Arial;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
    /* added */
    border-left: solid 1px #E1E3D5;
    border-right: solid 1px #E1E3D5;
    color:#FFFFFF;
    background: -webkit-linear-gradient(rgba(192,192,192,0), rgba(74,72,72,0.5));
    background: -moz-linear-gradient(rgba(192,192,192,0), rgba(74,72,72,0.5));
    background: -ms-linear-gradient(rgba(192,192,192,0), rgba(74,72,72,0.5));
    background: -o-linear-gradient(rgba(192,192,192,0),rgba(74,72,72,0.5));
    background: linear-gradient(rgba(192,192,192,0), rgba(74,72,72,0.5));
    
    
}
.info-wrapper a#aCollapse:focus { outline: none; }
.info-wrapper .less { margin-top: -1.5em; opacity: 0; z-index: -1; }

/* *** help collapse text end ************** */




.classButtonDisabled{
	font: normal normal 14px Open Sans, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin-left: 50px;*/
	border-radius: 0px;
	border:1px solid #FFFFFF;
	height: 40px;
    width: 250px;
    color: #FFFFFF;
    background-color:transparent;
	filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
	cursor:unset;