/******************************************************************
 * Copyright 2/16/2008, Anthony Burdin, All rights reserved.
 * No part of this content or the data or information included therein may be reproduced,
 * republished or redistributed without the prior written consent of Anthony Burdin.
 **************************************************************/
html, body {
  height:100%; 
  margin:0px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#666666;
  font-size:10px;
}

/**************************************************************
 * Table formatting
 *
 **************************************************************/  
.table 
{
  background-color:#ccc;
  border:solid 0px #fff; /* Opera doesn't get border:none or border:0 on fieldsets */
  font-size:10px;
  border-collapse: collapse;  
  margin:1px;
  padding: 1px;
}

tr.tableRow
{ 
  font-size:10px;
  cursor:pointer;
  background-color:white;
  behavior: expression(
    this.onmouseover = new Function("this.className += ' tableRow-hover';"),
    this.onmouseout = new Function("this.className = this.className.replace(' tableRow-hover', '');"),
    this.style.behavior = null
  );  
}
tr.tableRow-hover,
tr.tableRow:hover
{
  background-color:#ccc;
}

.tableHeader 
{ 
  font-size:10px;
  border-bottom:solid 1px black; 
  text-align:center; 
  vertical-align:bottom; 
  /*padding:2px;*/ 
  /*word-break:break-all*/            
}
                                        
.tdWithBorder  /* Used by Rental History page */
{
  border-left:solid 1px black; 
  text-align:center;
}

.tdNoWrap  /* Used by Login page */
{
  vertical-align: top;
  white-space: nowrap; 
  font-size: 12px;
}
  
.bubbleHeader 
{ 
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  color:#666666;
  font-weight:bold;
  text-align:right;
  vertical-align:top;
}  
.bubbleData 
{ 
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  color:#666666;
}

.rentalCell
{ 
  font-size:10px;
  cursor:pointer;
  background-color:white;
  behavior: expression(
    this.onmouseover = new Function("this.className += ' rentalCell-hover';"),
    this.onmouseout = new Function("this.className = this.className.replace(' rentalCell-hover', '');"),
    this.style.behavior = null
  );  
}
.rentalCell-hover,
.rentalCell:hover
{
  background-color:#ccc;
}

/**************************************************************
 * Login Screen Folder Tabs
 *
 **************************************************************/
div.tabArea {
  font-size:12px;
  font-weight: bold;
  padding:2px; 
}

a.tab {
  /*background-color: AliceBlue;*/
  border: 1px solid #000000;
  padding: 1px 1em 2px 1em;
}

a.tab, a.tab:visited {
  color: black;
}

a.tab:hover {
  /*background-color: #d0d0d0;*/
  color: white;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  /*background-color: #c0c0c0;*/
  color: black;
}

/**************************************************************
 * Fieldset formatting
 *
 **************************************************************/
.label
{
  font-size:10px;
  margin: 0px;
  color:#666666;
  text-align:right;
  padding:2px;
  margin-top:0px;
  text-transform:uppercase;
}

.status
{
  font-size:10px;
  margin: 0px;
  color:#666666;
  text-align:left;
  padding:2px;
  margin-top:0px;
  white-space: nowrap;  
  text-transform:uppercase;
}

label.error {
  background:url("Images/Required/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  font-size:10px;
  font-weight: bold;
  color: #EA5200;
}

label.checked {
  background:url("Images/Required/checked.gif") no-repeat 0px 0px;
}
  
/*****************************************************************
 * Text field
 *****************************************************************/
.savvyInput{
  border:none;
  background:none;
  padding:0;
  margin:0;
  width:auto;
  overflow:visible;					
  text-align:center;	
  white-space:nowrap;	
  height:20px;
  line-height:18px;			
}

savvyInput span, savvyInput em{
  display:block;
  height:20px;
  line-height:18px;			
  margin:0;
  color:#954b05;
}	

savvyInput span{
  padding-left:20px;
  background:url("Images/Required/textfield300.gif") no-repeat 0 0;
}	

savvyInput em{
  font-style:normal;
  padding-right:20px;
  background:url("Images/Required/textfield300.gif") no-repeat 100% 0;
}
  
.textfield 
{
  margin:0px;
  font:10px Verdana, Arial, Helvetica, sans-serif;
  border:solid 0 #fff;        
  padding:3px 8px;
  width:200px;  
  height:20px;
  vertical-align:top;
  background: transparent url("Images/Required/textfield200.gif") no-repeat;
}

/* Hack, prevents IE6 from moving background image left when user type a long text input. IE6 was fixed vs. scroll W3C directive reversed
   Does not work for IE7 or IE8, these browsers get "fixed" correct, but "scroll" is still wrong 
*/
* html .ieBackgroundScroll
{
  background-attachment: fixed;
}     

.textarea 
{
  font:10px Verdana, Arial, Helvetica, sans-serif;
  /* color:#333 ; */
  /*margin:3px; */
  height:165px;
  width:200px;
  border:solid 0 #fff;
  padding: 3px 8px;
  background: transparent url("Images/Required/textarea_bg.gif") no-repeat;

}

.wideText
{
  font-size:10px;
  margin: 0;
  /*padding:1em;
  margin-top:0.3em;*/
  text-align:center;
  float:center;
  color:black;
  text-transform:uppercase;
}

.instructionText
{
  font-size:11px;
  margin: 0;
  /*padding:1em;
  margin-top:0.3em;*/
  float:center;
  color:blue;
}

.fullJustify
{
  text-align:justify;
}

/***************************************************************
 * Narrow Submit Button Styles
 *
 * Since we want our buttons to be über-flexible, we'll have to make the background image 
 * expand with the size of the * button's text. For that, we'll use the beloved sliding doors technique; 
 * two complementing images creating the illusion of a single, stretching image.   
 ***************************************************************/  
a.button {
    background: transparent url('Images/Required/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('Images/Required/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}          	

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}  
/***************************************************************
 * Narrow Submit Button Styles
 *
 * First, we define common attributes of the button: image, size, font ...
 * Second, we defined color and hover hehaviors through onMouseOver and Out ...   
 ***************************************************************/  
.submit
{
  /*behavior:url("Components/rollover.htc");*/   
  margin:0px;  
  background: transparent url("Images/Required/submit80.gif") no-repeat;
  height:20px;
  width:80px;
  vertical-align:top;
  border:solid 0 #fff;  
  font:10px Verdana, Arial, Helvetica, sans-serif;  
  text-transform:uppercase;  
  color:#fff;
  behavior: expression(
      this.onmouseover = new Function("this.className += ' submit-hover';"),
      this.onmouseout = new Function("this.className = this.className.replace(' submit-hover', '');"),
      this.style.behavior = null
  );    
}
.submit:hover, 
.submit-hover
{
  color:blue;
}

/***************************************************************
 * Wide Submit Button Styles
 *
 * First, we define common attributes of the button: image, size, font ...
 * Second, we defined color and hover hehaviors through onMouseOver and Out ... 
 ***************************************************************/  
.submit80 
{
  margin:0px;
  background: transparent url("Images/Required/submit180.gif") no-repeat;
  border:solid 0 #fff;
  height:20px;  
  width:180px;
  vertical-align:top;
  font:10px Verdana, Arial, Helvetica, sans-serif;  
  text-transform:uppercase; 
  color:#fff;
  behavior: expression(
      this.onmouseover = new Function("this.className += ' submit-hover80';"),
      this.onmouseout = new Function("this.className = this.className.replace(' submit-hover80', '');"),
      this.style.behavior = null
  ); 
}
.submit80:hover,
.submit-hover80
{  
  color:blue;
}
/***************************************************************
 * Required Fields
 *
 ***************************************************************/  
.requiredInfo 
{ 
  color:red; 
}
/***************************************************************
 * Copyright Style
 *
 ***************************************************************/  
.copyrightStyle 
{ 
  font: italic 10px Verdana, Arial, Helvetica, sans-serif;
  color:#666666;
  text-align:center; 
}

/*****************************************************************
 * Splitter container. Set this to the desired width and height
 * of the combined left and right panes. In this example, the
 * height is fixed and the width is the full width of the body,
 * less the margin on the splitter itself.
 */
#MySplitter {
	width: 100%;
	height: 100%;
	overflow: auto;
	border: 1px solid black;
	/* No padding allowed */
}        
#srchContainer {
  overflow: auto;
}        
#googleMap {          
  overflow: auto;                           
}
/* 
 * Splitter bar style; the .active class is added when the
 * mouse is over the splitter or the splitter is focused
 * via the keyboard taborder or an accessKey. 
 */           
#MySplitter .vsplitbar {
	width: 6px;
	background: AliceBlue url('Images/Required/vgrabber.gif') no-repeat center;
}
#MySplitter .vsplitbar.active {
	background: AliceBlue url('Images/Required/vgrabber.gif') no-repeat center;
	opacity: 0.7;
}    

/*************************************************************************
 * Tooltip styling. By default the element to be styled is .tooltip on CScrLogin  
 */
.tooltip {
	background-color:#000;
	border:1px solid #fff;
	padding:10px 15px;
	width:200px;
	display:none;
	color:#fff;
	text-align:left;
	font-size:12px;
}

.tooltip.bottom {
	/*background:url('Images/Required/black_arrow_bottom.png');*/
	padding-top:40px;
	height:55px;
}