body
{
    /*background-color:#ffcc00;*/
    background-color:White;
    font-size: .80em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #000000;    
}

a:link
{
    color: #e5ad2f;
    text-decoration: underline;
}
a:visited
{
    color: #e5ad2f;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}
a.goToMainContent
{
position:relative;
left: -9999px; 
} 
a.goToMainContent:link 
{ 
color: black;
text-decoration: underline; 
}

a.goToMainContent:visited 
{ 
color: black;
text-decoration: underline;
}

a.goToMainContent:hover 
{
color: black;
text-decoration: underline; 
}


/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

h1
{
    margin-bottom: 10px;
}
h2
{
    padding: 0 0 10px 0;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;    
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
}

#main
{
    padding: 10px;
    background-color: #fff;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#footer
{
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #FF8080;
	background-color:black;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    /*background-color: #ffeeee;*/
}

.validation-summary-errors
{
    font-weight: bold;
    color: #FF8080;
    background-color:#000000;
}

.validation-field-errors
{
    font-size:12px;    
    color: #b00a0a;
	background-color:white;
}

.validation-summary-valid
{
    display: none;
}

.Message
{
	font-weight: bold;
    color: #0000FF;
}
/* FORM LAYOUT ELEMENTS   

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align:left;
}

ul li
{
    display: inline;
    list-style: none;
}

ul#imagelist li
{
    display:list-item;
    list-style-type:disc;
}


ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 5px 9px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label,
.display-field,
.editor-field
{
    margin: 0.5em 0;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

/*Styles for table
--------------------------------------------------------------------*/
/*@media only screen and (max-device-width: 480px) 
{
    table
    {
        
        border-left: solid 1px black;
        border-bottom: solid 1px black;
        border-top: solid 1px black;      
    }

    tr td
    {
        border-right: solid 1px black;        
    }

    th.customer, td.customer { width: 234px;}
    th.location, td.location { width: 20px;}
    th.pn, td.pn { width: 59px;}
    th.model, td.model { width: 157px;}
    th.sn, td.sn { width: 170px;}

    .grayBackground
    {
        background-color:Gray;    
    }
}*/
table 
{
	border: none;
	border-collapse: collapse;
}

td, th
{
  padding: 0px;
  border: none;
  text-align:left;
}


/*----------------------------------------------------------*/

.textArea
{
    width: 450px;
    height: 200px;    
    
}

.textArea2
{
    width: 200px;
    height: 100px;    
    
}
.noBorder 
{
    border-style: none;
}

.hideIt { display:none; }

.textcolor a
{
    color: #fff;
}

.floatLeft { float:left; width: 220px;}
.clearAll { clear:both; }
.marginLeft { margin-left:3px; }
.marginRight { margin-right:5px; }
.marginTop { margin-top: 10px; }
.disabledTextColor { color:#8E8E8E !important; }
.alignLeft { text-align:left;}

input[type="text"], input[type="password"], textarea 
{
    width: 85%;
    height:16px;
    border: 1px solid #404040;
    padding: 3px;   
    margin:0px 10px 10px 0px;       
}

.inputDropdown
{   
    width: 85%;
    height:24px;
	margin:0px 10px 10px 0px;    
}

.inputTextArea
{
    width: 85%;
    height: 120px;
	margin-bottom:10px;      
}

.inputWith
{
    width: 200px !important;      
}

.grayBackground
{
   background-color:#A5AAAD;    
}

.alternatingRow
{
   background-color:#B4CDD4;  
}
.hover_img 
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; left:5px; top:5px;  max-width : 100%; height: auto; }


img.responsive 
{
    width : 100%; /* or max-width : 100% */
    height: auto; 
}

div#imgDialog{ left:0px; top:0px;  max-width : 100%; height: auto; z-index:99;}

.centerText
{
    text-align:center;      
}

.marginTopBottom
{
   margin: 5px 0px;
}

.backImage
{    
    background-image:url('../Images/webapp-bg-hyster.png');    
    background-repeat: no-repeat;               
    background-position: center center;
    background-attachment: fixed;
    /* background-size: 40%;*/
   background-color:black;  
    color:White; 
   
}
/*-------------------Accessibility------------------*/
.login-heading
{
	background-color:#FFCC00;  
	margin:0;
	height:50px;
	font-size:calc(1.2vw + 1.2vh + 2vmin);
	border-bottom:2px solid black; 
	line-height:auto;
	font-weight:100;
	font-family:Arial;
	color:#312700;
	padding-left:20px;
	letter-spacing:1px;
	padding:15px;
}
.terms-conditions li
{
    margin-bottom: 20px;
    line-height: 1.6em;
}
a:link
{
  color:#000000;
  margin:5px;
}
a:visited
{
	color:#696969;
}
.footable td , .footable th
{
	padding:4px;
}
.grayBackground th
{
	color:#1d1c1c;
}
input:focus
{
	outline: 2px solid black;
}
a:focus
{
	outline: 2px solid black;
	color:#034AF3;
}
.assets-heading
{
	background-color:#FFCC00; 
	width:98.5%; 
	margin:0;
	height:auto !important;
	border-bottom:2px solid black; 
	line-height:2em;
	padding:20px 0px 5px 20px;	
	font-weight:100 !important;
	font-family:Arial !important;
	color:#312700 !important;
	letter-spacing:1px;
	font-size: calc(1.2vw + 1.2vh + 2vmin) !important;
	margin-top:-10px !important;
}
.login-background
{
	margin:auto; 
	border:none; 
	margin-top:20px; 
	text-align:center;
	height:160px;
	padding:20px;
	/*background-color:rgba(0,0,0,0.7);*/
}
h3
{
	font-size:1em;
}
select:focus, input:focus, textarea:focus
{
	outline:2px solid black;
}

#UserName:focus, #Password:focus
{
	outline:2px solid white;
}

.checkboxtermandcondition:focus
{
 box-shadow:
		0 0 0 2px #000000,
		0 0 0 5px #FFFFFF;		
		outline: none;
}

 #conditions:focus,  #conditions:active,  #conditions:hover
 {
 	outline: 2px solid #ffffff !important; 	
} 

#login-submit:focus, #login-submit:active, #login-submit:hover
{
		box-shadow:
		0 0 0 2px #000000,
		0 0 0 5px #FFFFFF;		
		outline: none;
	}
input::-moz-focus-inner, select::-moz-focus-inner, button::-moz-focus-inner{
	border:0;
}
.label-background
{
	background-color:black;
	margin-top: 50px;
	margin-bottom: 50px;
}
a[href="#skip"]
{
    position: relative;
    left: -9999px; /* pushes it off screen */
	
}
a[href="#skip"]:focus 
{
    left: 0px;
}
ul#menu li a[href="#skip"]
{
	font-size:11px;
	padding:1px;
}
.loginerror{
	background-color:black;
}
a:hover{
	color:#034AF3;
	text-decoration:underline;
}



.imgSearch:focus, .imgSearch:hover, .imgSearch:active
{
	outline: 2px solid #000000 !important;
	padding: 2px !important;
	margin: -2px !important;
	
	}
	
	
.linkPrivacyPolicy:focus, .linkPrivacyPolicy:hover, .linkPrivacyPolicy:active
{
	outline: 2px solid #ffffff !important;
	padding: 2px !important;
	margin: -2px !important;
	}

div .tablesearch a:visited
{
	color: #034af3 !important;
	}
	
div .tablesearch a:hover
{
	color: #034af3 !important;
	outline: 2px solid black !important;
}

.imagepage_imagelink
{
	color:Black;
	text-decoration:underline;
	}

.imagepage_imagelink:focus, .imagepage_imagelink:hover  
{
	color:#034af3;
	outline: 2px solid #000000 !important;
}

.imagepage_imagelink:active
{
	color:#034af3;
	}
.imagepage_imagelink:visited
{
	color:Black;
	text-decoration:underline;
	}

.ui-dialog-titlebar
{
	background-color:#E6E6E6 !important;
	color: #000000 !important;
	}

.loginErrorMsg
{
	color: #FF8080;
    background-color: black;
	}
	
	
.errorvaidationmessage
{
	color: #FF8080 !important;
    background-color: black !important;
	}
	
.listerrorincenter
{
	text-align: center;
   list-style-position  : inside;
	}
	

.validationErrorLink
{
	text-decoration: underline;
    text-decoration-color:  #ffffff;
	}
	
.validationErrorLink:focus, .validationErrorLink:hover
{
	outline: solid 2px #ffffff;
	text-decoration-color: #ffffff;
}

#errordiv:focus
{
	outline:none !important;
	border: none !important;
	}
	
#errorInfoNoneAssetSelection:focus
{
	outline:none !important;
	border:none !important;
	}
	

#successfulMessage:focus
{
	outline:none !important;
	border:none !important;
	}	
	
	
.ui-datepicker-close:focus
{
	outline: solid 2px #000000;
	}

@media (min-width:200px) and (max-width:1000px)
{
	a[href="#skip"]
	{
    font-size: 11px;
    padding: 1px;
    margin-left: 20px;
	}
}


.titleNotification
{
	    font-size: 18px !important;
	}
	
	
.linkLoginPage a
{
	text-decoration: underline;
}

.linkLoginPage a:hover, .linkLoginPage a:focus 
{
	outline: 2px solid #000000 !important;
	border: 1px solid #ffffff !important;
	margin-top: -1px !important;
    margin-left: -1px !important;
}


.a11ycollapsible {
}

.a11yactive, .a11ycollapsible:hover {
}

.a11ycontent {
  display: none;
  margin-top: 10px;
}

.displayNone{
    position : relative;
    left: -9999px; /* pushes it off screen */
	margin-left:-75px;	
	display:none;
}

.ui-button-text-only
{
	margin-right:10px;
	}
	
.ui-dialog-buttonset button
{
	width:100px;
	}
	
/* datetime picker*/
.ui-state-default
{
	color: black !important;
	}


.ui-state-hover
{
	border: 1px solid #000000 !important;
	outline: 2px solid #000000 !important;
	color: black !important;
}

.ui-state-highlight:focus
{
    border: 1px solid #000000 !important;
    outline: 2px solid #000000 !important;
	color: black !important;
}


.ui-state-active
{
	border: 1px solid #264565 !important;
	outline: 1px solid #264565 !important;
}


	
.ui-state-highlight
{
  border : 1px solid #7b0000 !important;
  outline  : 1px solid #7b0000 !important;
  color : black !important;
}


.ui-datepicker-today a
{	
	border  : 1px solid #867000 !important;
	outline  : 1px solid #867000 !important;
}

/*End datetime picker*/


.tbHeaderButton
{
	background-color: #A5AAAD;
	background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	outline:none;
	font-weight: normal;
}	

.tbHeaderButton:focus, .tbHeaderButton:hover, .tbHeaderButton:active
{	
	outline: solid 2px black !important;
	border: solid 1px transparent !important;
	background-color: #FFCC00 !important;
	background:none;	
	
}

.tbHeaderSort:hover .tbHeaderButton
{	
	outline: solid 2px black !important;
	border: solid 1px transparent !important;
	background-color: #FFCC00 !important;
	background:none;
}

.popup
{
    font-size:13px !important; 
    font-weight: bold !important;    
}

div.menulink
{
	display: inline;
}

.toolTipSpan 
{ 
    position:absolute; 
    padding:8px; 
    border:solid 1px #BBBBBB; 
    background-color:#fbfdff; 
    max-width:20%; 
}

.btnColor 
{
    border-color:#919191 !important; 
    background:#ffffff !important; 
}

/* Because we are not using both custom version of an older jquery ui css and the full minified css like we did in the past, 
 we need to set this zoom attribute separately.*/
#login-submit 
{
	zoom: 1.6;
	width: 68px;
}

.loginBtn
{
    width:70px; 
    height:26px;
    background: white; 
    border:solid 2px #0096c7; 
    border-radius: 5px;    
}
.loginBtn:hover
{
   border:solid 2px black;
   background-color:green;
   color:white;   
}
.top-header
{
    text-align:left;	
    background: #d52231;
    width: 100%;
    height: 40px;
    border-bottom-color:#ffc53a;
    border-bottom-width:4px;
    border-bottom-style:solid;
    padding-left: 50px;
    padding-top: 20px;    	
}
.textBox
{
    border: solid 2px black !important; 
    border-radius: 3px !important; 
    margin-top: 3px !important;
    width: 200px !important;            
}

.borderInput {
	border: 1px solid #767676 !important;
}

.borderSearch {
	border: 1px solid #919191 !important;
}

@media (max-width:500px)
{
	ul#menu li
	{
		display: inherit;
		}
	div.menulink
	{
		display: inherit;
	}
		
	div.menulink
	{
		background-color:#e8eef4;
		width:180px;
		height:40px;		
		margin-top:5px;
		margin-bottom:5px;
	}
	.ui-dialog {
    width: 300px !important;
}

	.backImage
	{   
	   background-size: 100%;
	}
}

@media (min-width: 1001px){
.ui-dialog {
    width: 900px !important;
}
}

@media (min-width: 501px) and (max-width: 700px){
.ui-dialog {
    width: 500px !important;
}
	.backImage
	{   
	   background-size: 100%;
	}
}


@media (min-width: 701px) and (max-width: 1000px){
.ui-dialog {
    width: 700px !important;
}
}