/* TELSERV TRAINING */

body {
margin: 0px 0 5px 0px;
padding: 0;
text-align: left;
}
#container {
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 800px;
text-align: left;
vertical-align: left;
}
a {
text-decoration: underline;
color: green;
}
a:hover {
text-decoration: underline;
color: black;
}
strong {
font-weight: bold;
}
h1 {
margin: 0 0 25px 0;
padding: 0 0 0 5px;
font: normal 145% Arial, sans-serif;
color: #667788; 
}
h2 {
margin: 0 0 0px 0;
padding: 0 0 10px 5px;
font: normal 70% Verdana, sans-serif;
line-height: 17px;
color: #333; 
}
h3 {
margin: 0 0 0px 0;
padding: 0px 0 10px 5px;
font: bold 70% Verdana, sans-serif;
line-height: 16px;
color: #333; 
}
p {
margin: 0;
padding: 0 0 5px 7px;
font: normal 70% Verdana, sans-serif;
line-height: 16px;
color: #333; 
}
ul{
font: normal 70% Verdana, sans-serif;
}
.body_big { width:552px; float:left; margin:0; padding:20px 15px;}
.bold {
font-weight: bold;
}
.backtotop {
margin: 0;
padding: 0;
text-align: right;
}
img {
border: none;
}
.logout {
color: #fff;
float: right;
padding: 0 0 0px 0px;
margin: 20px 10px 0px 0;
}
.logout a {
color: #fff;
font: bold 70% Verdana, sans-serif;
}
.logout a:hover {
color: yellow;
}
/* ----------------------------------------------------------------------------------------------------------------HEADER--------------- */
#header {
width: 780px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #fff;
border-top: 5px solid #fff;
height: 200px;
}
.user {
margin: 30px 0 0 10px;
padding: 0;
color: #000;
font-weight: bold;
}
.logok {
padding: 0 0 0 0;
margin: 0 0 10px 0px;
}
.logok1 {
padding: 0 0 0 0;
margin: 0px 0 0px 0px;
}
.hlink {
padding: 0;
margin: 0;
text-align: right;
}
#nav {
position: relative;
padding: 0;
margin: 24px 0 0px 10px;
list-style: none;
display: inline;
overflow: hidden;
width: 550px;
float: left;
}
#nav li {
margin: 0; 
padding: 0 0px 0 0;
display: inline;
list-style-type: none;
}
#nav a {
float: left;
padding: 24px 0px 0 0;
margin: 0 6px 0 0;
overflow: hidden;
height: 0px !important; 
height /**/:24px; /* for IE5/Win */
}
#nav a:hover {height: 24px;}
#nav a.active, #nav a.selected {background-position: 0 -24px;}
#nav1 a  {width: 106px;background: url(../images/nav6a.png) top left no-repeat;}
#nav2 a  {width: 109px;background: url(../images/nav5a.png) top left no-repeat;}
#nav3 a  {width: 109px;background: url(../images/nav4a.png) top left no-repeat;}
#nav4 a  {width: 109px;background: url(../images/nav3a.png) top left no-repeat;}
#nav5 a  {width: 93px;background: url(../images/nav2a.png) top left no-repeat;}
#prodnav1 a  {width: 106px;background: url(../images/prodnav1.gif) top left no-repeat;}
#prodnav2 a  {width: 106px;background: url(../images/prodnav2.gif) top left no-repeat;}
#prodnav3 a  {width: 106px;background: url(../images/prodnav3.gif) top left no-repeat;}
#prodnav4 a  {width: 109px;background: url(../images/prodnav4.gif) top left no-repeat;}
.hbar {
background-color: #eeeecc;
border-bottom: 1px solid #cccc99;
margin: 0;
padding: 15px 0 5px 0;
width: 780;
}
/* ---------------------------------------------------------------------------------------------------------------CONTENT--------------- */
#contentOFF{
display:none
} 
#content {
padding: 20px 0 20px 0px;
margin: 0 0 0 0;
width: 800px;
}
#content p { font:normal 13px Arial, Helvetica, sans-serif; color:#484848; line-height:1.8em; padding:5px; margin:0;}
#content h2 { margin: 0 0 0px 0; padding: 10px 0 5px 30px; font: normal 100% Verdana, sans-serif; line-height: 17px; color: #333;}
#content ul { font:normal 13px Arial, Helvetica, sans-serif; color:#484848; line-height:1.8em; padding:0 0 0 40px; margin:0;}
#hcontent {
padding: 45px 0 20px 50px;
margin: 0 0 0 0;
width: 780px;
}
.hili {
background-color: #ffff66;
font-weight: bold;
}
/* ---------------------------------------------------------------------------------------------------------------FOOTER--------------- */
#footer {
width: 760px;
margin: 25px 0 10px 0;
padding: 7px 10px 0 10px;
height: 20px;
font: normal 70% Arial, sans-serif; 
line-height: 14px;
color: #333;
border-top: 1px solid #ccc;
}
/* ---------------------------------------------------------------------------------------------------------------TABLES--------------- */
table {
font: normal 70% Arial, Verdana, sans-serif;
}
.newtitle {
background-color: burlywood;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.newtitle td {
padding: 0 0 0 7px;
}
.rptHdr1 {
background-color: aquamarine;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.rptHdr1 td {
padding: 0 0 0 7px;
}
.rptHdr2 {
background-color: coral;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.rptHdr2 td {
padding: 0 0 0 7px;
}
.rptHdr3 {
background-color: darkgray;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.rptHdr3 td {
padding: 0 0 0 7px;
}
.rptHdr4 {
background-color: darkkhaki;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.rptHdr4 td {
padding: 0 0 0 7px;
}
.rptHdr5 {
background-color: darkorange;
height: 30px;
font: bold, 105% Arial, Verdana, sans-serif;
}
tr.rptHdr5 td {
padding: 0 0 0 7px;
}
.title {
background-color: #006cb7;
height: 25px;
font: bold 105% Arial, Verdana, sans-serif;
color: #fff
}
tr.title td {
padding: 0 0 0 7px;
}
tr.shade {
background: #ffffee;
height: 25px;
} 
tr.shade td {
border-bottom: 1px solid #eee;
padding: 3px 0 3px 7px;
}
tr.noshade {
height: 25px;
} 
tr.noshade td {
border-bottom: 1px solid #eee;
padding: 3px 0 3px 7px;
}
tr.rowHighlight td { 
background-color: yellow; 
padding: 3px 0 3px 7px;
border-bottom: 1px solid #eee;
}
label {
font: normal 105% Arial, sans-serif;
}
input {
font: normal 105% Arial, sans-serif;
}
tr.item td {
padding: 3px 0 0px 7px;
border: none;
height: 20px;
}
tr.itembold td {
padding: 3px 0 0px 7px;
border: none;
color: #222;
font: bold 100% Arial, sans-serif;
}
tr.btn td {
padding: 10px 0 0px 7px;
border: none;
}
td.total {
background: #ffffdd;
height: 25px;
font: bold 105% Arial, sans-serif;
padding: 3px 0 3px 7px;
}
table.info {
font: normal 105% Arial, sans-serif;
}
/********** signup form **********/
#signup { margin:0; padding:5px 10px;}
#signup * { color:#F00;}
#signup ol { margin:0; padding:0; list-style:none;}
#signup li { margin:0; padding:0; background:none; border:none; display:block;}
#signup li span { color:#000; font:bold 13px Arial;}
#signup li.buttons { margin:5px 0 5px 0;}
#signup label { float:left; margin:0; width:110px; padding:5px 0; font:bold 13px Arial, Helvetica, sans-serif; color:#555e67; text-transform:capitalize;}
#signup label span { font:bold 10px Arial, Helvetica, sans-serif; color:#F00}
#signup input.text { width:300px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#signup input.medTxt { width:150px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#signup input.smlTxt { width:50px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#signup select { width:205px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:30px; background:#fff;}
#signup textarea { width:400px; border:1px solid #555e67; margin:10px 0; padding:2px; background:#fff; height:250px;}
#signup li.buttons input { padding:3px 0; margin:0 0 0 170px; border:0; color:#FFF;}

.form { float:left; width:640px; margin-top:40px; margin-left:10px;}
/********** contact form **********/
#classform { margin:0; padding:5px 10px;}
#classform * { color:#F00;}
#classform ol { margin:0; padding:0; list-style:none;}
#classform li { margin:0; padding:0; background:none; border:none; display:block;}
#classform li span { color:#000; font:bold 13px Arial;}
#classform li.buttons { margin:5px 0 5px 0;}
#classform label { float:left; margin:0; width:125px; padding:5px 0; font:bold 13px Arial, Helvetica, sans-serif; color:#555e67; text-transform:capitalize;}
#classform label span { font:bold 10px Arial, Helvetica, sans-serif; color:#F00}
#classform input.text { width:400px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#classform input.medTxt { width:150px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#classform input.smlTxt { width:50px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#classform select { width:205px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:30px; background:#fff;}
#classform textarea { width:400px; border:1px solid #555e67; margin:10px 0; padding:2px; background:#fff; height:250px;}
#classform li.buttons input { padding:3px 0; margin:0 0 0 95px; border:0; color:#FFF;}

/* -----------------------------------------------------------------------------------------------------------JAVA ERROR --------------- */
input.errHilite {
background-color: #FFEEFF;
}
label.errHilite {
color: #FF0000;
}
ul#errors {
	display: none;
	margin: 0;
	padding: 0 0 0 7px;
	font-weight: bold;
	}	
ul#errors li {
	list-style-type: none;
	margin: 0;
	color: #FF0000;
	background-color: #FFFFFF;
	background-image: none;
	padding: 0;
font: normal 70% Verdana, sans-serif;
	}
ul#errors li.heading {
	list-style-type: none;
	color: #FF0000;
	margin: 0;
	padding: 0;
	background-image: none;
font: bold 70% Verdana, sans-serif;
	}
.errortextsignin {
font: bold 70% Verdana, sans-serif;
color: #FF0000;
width: 400px;
}
/*---------Square Buttons----------------*/
a.squarebutton{
background: transparent url('../images/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}
a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}
a.squarebutton span{
background: transparent url('../images/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
}
/*---------Rounded Buttons---------------*/
a.boldbuttons{
background: transparent url('../images/roundedge-brown-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;
}
a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}
a.boldbuttons span{
background: transparent url('../images/roundedge-brown-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}
a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; 
width: 100%;
}
.rotate90 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#dvLoading
{
 background:#000 url(../images/giphy.gif) no-repeat center center;
 height: 100px;
 width: 100px;
 position: fixed;
 z-index: 1000;
 left: 50%;
 top: 50%;
 margin: -25px 0 0 -25px;
}
/*------------------- Tool Tip ----------------------------------------------*/
/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

	/* Tooltip text */
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 240px;
		background-color: black;
		color: #fff;
		text-align: left;
		padding: 5px;
		border-radius: 6px;
		position: absolute;
		z-index: 1;
		top: -5px;
		left: 110%;
	}

		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			margin-top: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent black transparent transparent;
		}
	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
		visibility: visible;
	}