body, table, textarea {font-family:verdana; font-size:13px; background-color:#F8F8F8; }

h2 {
	font-size:14px;
}

/* 
.signupTextInput {width:80%}
*/


body {padding:0; margin:1; }

.sum1 {width:58px;}
.yearSum1 {width:70px}

.date_range_select1 {cursor:pointer}

input {border-radius:3px;}

.ui-widget {margin-left:-2px;} /* adjustment */

.label1 { text-align:right;}
.txt1 {width:55px;}
.rad1 {vertical-align:-10%; }
.selected_radio {font-weight:bold; }
textarea {border-radius:3px;}

.error { background-color: yellow; color:red; border: 1px dotted red; }
label.error { color:red; display:block; font-weight:strong; background-color:white; border:none; }

/* expense and income, green and red! */
#labelexpense {
	color:#FF0000; 
}

#labelincome {
	color:#00CC00; 
}

/* bolder and weaker class, for expense and income radio button */
.bolder1 {
	font-weight: bold;
	font-size: 115%;
	width: 56%;
}

/* submit button: round edge, hover effect */
button {
	border-radius:5px; 
	padding:5px; padding-left:10px; padding-right:10px; 
	margin:5px; font-style:italic; font-weight:bold; color:blue; 
}

button:hover { background: #eef;}

/* jquery validator */ 
.my-error-class {
	/* display:block;  will put it to the next line */
    color:#FF0000;  /* red */
	border: 2px dotted red; 
}
.my-valid-class {
    color:#004400; /* green */
}

/* data grid */
#divData1{		/* outer div */
	border: 3px solid red; 
	text-align: center;
}



.trData1 {cursor:pointer;}
.trDataOver1 {background-color:#000066; color:white; }
.trDataSelect1 {background-color:#000066; color:white; }

#divDataGrid { 	width: 500px; height: 300px; }  /* height be changed on the fly! */

/* brief summary */
#brief_summary1 {
	border:0px solid red; 
	// background-color:#EEEEEE;
	color: 444; 
	margin-top:-8px;
}	

#tbBriefSummary {
	border-radius:3px;
	border:1px dotted #F8F8F8; 
}

#tbBriefSummary td{
	padding:0px 5px 5px 5px; 
}

.incomeClass1  {
	font-weight:normal;
	color:#00CC00;
}

/* the width of the datagrid, to make the header and body same width always */
#tblDataGridHeader1 {position:relative; text-align;center; margin-top:5px;}
.dataGridTable1 { width:100%; }

.dateCell1 { cursor:pointer; text-align:left; }
.dateCell1:hover { background: #000066; color:white; }

.itemCell1 {  cursor:pointer; text-align:left; }
.itemCell1:hover { background: #000066; color:white; }

.amtCell1  {  cursor:pointer; text-align:right; }
.amtCell1:hover { background: #000066; color:white; }

.priceCell1 { cursor:pointer; text-align:right; }
.priceCell1:hover { background: #000066; color:white; }

.suppCell1 {  cursor:pointer; text-align:left; padding-left:20px; }
.suppCell1:hover { background: #000066; color:white; }

/* better idea now, use jquery to do that! dynamically! so no worries about different text, date format problem! 
   - so, will not specify the width, but keep the class, numerous cells could use those class! 
 */

.recur1 {font-size:88%; width:95px;} 
 
/* the date header in the datagrid */
#datehead1 {cursor:pointer;}



/* slickgrid */
.txtSearch {
	margin: 0 4px 0 0px;
	padding: 2px 5px 2px 0px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid silver;
	width:65px; height:20px;
	position:absolute; 
}

.incomeClass1  {
	font-weight:normal;
	color:#00CC00;
}

.over1kExpense1 {
	font-weight:normal;
	color:#FF0000;
}

.over1hExpense1 {
	font-weight:normal;
	color:#FF8800;
}

#myGrid {
    background: white;
    outline: 0;
    border: 1px solid gray;
}

.grid-header {
	border: 1px solid gray;
	border-bottom: 0;
	border-top: 0;
	background: url('slickgrid/images/header-bg.gif') repeat-x center top;
	color: black;
	height: 24px;
	line-height: 24px;
}

.grid-header label {
	display: inline-block;
	font-weight: bold;
	margin: auto auto auto 6px;
}

.loading {
	text-align:center; 
	width:30%; left:34%; top:10%; position:absolute; padding:15px; 
	font-size:30px; 
	border: 3px brown solid; 
	background-color:#FFFFDD; color:brown; 
	font-style:italic;
	z-index:5000; 
}

/* for td spacing */
.spc1 {padding-left:20px;}

/* for bottom copy right, and contact */
.footer {
    position: fixed;
    bottom: 0;
    text-align: center; 
    width: 100%;
}