body 
{
	margin: 0px;
	color: #333; 
	font:   0.7em Verdana, Arial, Helvetica,sans-serif; 
	line-height: 18px; 
	background-color: #ffffff; 
}

#login a:link, #login a:visited
{
	color: #ffffff;
}
#title h1 a:link, #title h1 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#reportresults h2 {
	font-size: 1.1em;
	font-weight: bold;
}

a 
{
	text-decoration: none;
}
a:visited 
{
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active 
{
	text-decoration: none;
}


/* initially set margin and padding to zero for all browsers */
* {
	margin: 0;
	padding: 0;
}

#body 
{
	padding: 0px 8px 10px 7px;
}

/* add fade background and padding to all table rows */
.row1 {
	padding: 3px;
	background: url(images/timesheet_data_bg.gif) repeat-x;
	background: #F9FAFB;
}
.row1 img {
	border: none;
	text-align: center;
}

/* define the main layout divs */
#header {
	margin-right: auto;
	height: 50px;
	width: 100%;
}
#title {
	padding-top: 5px;
	padding-bottom: 0px;
	padding-left: 28px;
	float: left;
	height: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#login {
	padding-top: 0px;
	padding-right: 28px;
	float: right;
	clear: none;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 10px;
	height: 28px;
	top: 0px;
	text-align: right;
}

.commission {
	font-weight:bold;
	color:Red;
	
}
/* make crumbs after making new nav */
#breadcrumb {
	padding-top: 4px;
	padding-left: 10px;
	background: #919191;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: bold;
	height: 20px;
}

#commissionbreadcrumb
{
	padding-top:0px;
	padding-left:0px;
	background:#ffffff;
	color:#000000;
	font-size:10px;
	font-weight:bold;
	height:20px;
	float:right;
	text-align:right;
	clear:none;
	vertical-align:top;
	width:100%;
}
/* IE needs height:512px BUT this height:512px below must be removed to display correctly in Mozilla */
#reportresults, #projectadministration, #adminedit, #timesheet, #addhours, #projectreport, #resourcereport {
	height: 717px;
}
/* Mozilla needs min-height:512px (IE will ignore this min-height) */
#reportresults, #projectadministration, #adminedit, #timesheet, #addhours, #projectreport, #resourcereport {
	min-height: 512px;
}
#addhours {
	padding: 10px;
	border: 1px solid #000000;
	float: left;
	background: #DAE1E7 url(images/background_addhours.jpg) repeat-x left top;
	color: #666666;
	font-family: Tahoma,Verdana,Helvetica,Helvetica-Narrow,sans-serif;
	width: 195px;
	position: relative;
}
#reportresults, #projectadministration, #adminedit, #projectreport, #resourcereport {
	padding: 10px;
	border: 1px solid #000000;
	background: #FFFFFF;
	color: #666666;
	font-family: Tahoma,Verdana,Helvetica,Helvetica-Narrow,sans-serif;
}
#timesheet {
	padding: 10px;
	border: 1px solid #000000;
	margin-left: 0px;
	background: #FFFFFF;
	color: #666666;
	font-family: Tahoma,Verdana,Helvetica,Helvetica-Narrow,sans-serif;
}
#timesheetdata, #projecttable {
	width: 100%;
	text-align: center;
}
#catlist {
	width: 20%;
}
/* define other elements inside the main layout divs */
#title h1 {
	display: inline;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
}
/* can be removed if no images in breadcrumb area */
#breadcrumb img {
	border: none;
	padding-right: 3px;
	vertical-align: middle;
}
/* all the legend tags use this same style */
legend {
	padding: 0px 4px;
	margin: 0px 0px 7px 0px;
	color: #666666;
	font-weight: bold;
	font-size: 1em;
	vertical-align: middle;
}
/* define sizes of the username field */
.username {
	font-size: 0.9em;
	width: 150px;
}
/* all the fieldset tags use this same style */
fieldset {
	margin-bottom: 0px;
	padding: 0px 12px 12px 12px;
	width: auto;
	display:block;
}

/* create hover effect for calendar icons */
#addhours a:link img, #addhours a:visited img, #resourcereport a:link img, #resourcereport a:visited img {
	padding: 2px;
	border: 1px solid #DFE4EA;
	background: #DFE4EA;
}
/* Put the admin edit calendar icon on a white background */
#adminedit a:link img, #adminedit a:visited img {
	padding: 2px;
	border: 1px solid #FFFFFF;
	background: #FFFFFF;
}
#addhours a:hover img, #resourcereport a:hover img, #adminedit a:hover img {
	padding: 2px;
	border: 1px solid #C1CFE0;
	background: #E8ECF0;
}
#addhours a:active img, #resourcereport a:active img, #adminedit a:active img {
	padding: 2px;
	border: 1px solid #C1CFE0;
	background: #C9D4E2;
}

/* add hover effect to any a href images within the data tables */
#timesheetdata a:link img, #timesheetdata a:visited img, #projecttable a:link img, #projecttable a:visited img {
	padding: 2px;
	border: 1px solid #EDF0F3;
	background: #EDF0F3;
}
#timesheetdata a:hover img, #projecttable a:hover img {
	padding: 2px;
	border: 1px solid #C1CFE0;
	background: #FBFBFC;
}
#timesheetdata a:active img, #projecttable a:active img {
	padding: 2px;
	border: 1px solid #C1CFE0;
	background: #D9E2EC;
}
/* make the cal icon appear in line with the forms and text */
#addhours img, #resourcereport img, #adminedit img {
	border: 0px;
	vertical-align: text-bottom;
}
/* make hours input field more prominent */
#addhours .hours {
	padding-top: 1px;
	font-size: 1.5em;
	font-weight: bold;
	width: 35px;
	height: 20px;
	text-align: center;
}
.projectlist, .resourcelist {
	border: 1px solid #00FF00;
	margin-bottom: 4px;
	height: auto;
	width: 200px;
}
/* condense in mark up to be '.button' */
.submit, .reset, .delete, .create, .add, .copy {
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 0.9em;
	height: 28px;
}
/* make submit button larger */
.submit {
	width: 108px;
}
/* define the look of the data tables (using colgroup in the source) 
colcatlist1 and colcatlist1 are generic names since I'm not sure 
what kind of date goes into these cells. More appropriate names can
be added for these */
.coldescription, .colcatlist1, .colcatlist2 {
	text-align: left;
}
.colday, .colhours, .coledit, .coldelete {
	width: 5%;
}
.colproject, .colcategory {
	width: 15%;
}
.colhours {
	font-weight: bold;
}
.coldescription {
	width: 50%;
}
/* define pop up calendar look */
.calmonday, .caltuesday, .calwednesday, .calthursday, .calfriday, .calsaturday, .calsunday {
	text-align: center;
}
.calcurrentmonth {
	background: #EEEEEE;
}
.calcurrentday {
	border: 1px solid #000000;
}
.calothermonth a:link, .calothermonth a:visited {
	color: #999999;
}
.calweekend {
	background: #E2E2E2;
}
/* create section heading container to separate long forms */
.formsection {
	padding: 10px;
	margin-top: 15px;
	background: #D6DDE9 url(images/background_formsection.gif) repeat-x center;
	font-weight: bold;
	text-align: center;
}
/* sometimes we hide elements from display in visual browsers (but leave them in the source for non visual browsers and for accessibility). I've also hidden the table in the admin_create_projects.html page */
.hidden {
	visibility: hidden;
}
.none {
	display: none;
}

img {
	border: none;
}
/* Old information */
#container {
	margin-right: auto;
	margin-left: auto;
	width: 800px;
}
#header {
	margin-right: 10px;
	margin-left: 10px;
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 10px;
}
#page_content {
	padding: 10px;
	margin: 10px;
	height:auto;
}

#col_left {
	float: left;
	width: 240px;
	padding-left: 5px;
	padding-right: 5px;
}

#col_full {
	clear: both;
}

#col_right {
	float: none;
	clear: none;
	margin-left: 260px;
}

#col_float {
	text-align: right;
	float: right;
}

#footer {
	background-repeat: repeat-x;
	clear: both;
	margin-right: 10px;
	margin-left: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
#footer p 
{
	color:Black;
	font-size: 10px;
}

p { color:Black; font-size: 12px; line-height: 18px; padding-top: 10px; padding-bottom: 10px;
    width: 706px;
}

td { font-size: 11px; }
h1 {
	font-size: 25px;
	line-height: 28px;
	margin-bottom: 10px;
}
h2 {
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 10px;
}
h3 { font-size: 15px; font-weight: bold; line-height: 28px; }
h4 { font-size: 12px; font-weight: bold; line-height: 18px; }

ul {
	list-style-position: inside;
	list-style-type: disc;
}

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeader a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeaderSelected a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

/*AutoComplete flyout */

.autocomplete_completionListElement 
{  
	visibility : hidden;
	margin : 0px!important;
	background-color : inherit;
	color : windowtext;
	border : buttonshadow;
	border-width : 1px;
	border-style : solid;
	cursor : 'default';
	overflow : auto;
	height : 200px;
    text-align : left; 
    list-style-type : none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
	background-color: #ffff99;
	color: black;
	padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem 
{
	background-color : window;
	color : windowtext;
	padding : 1px;
}

/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {
	
	background-color:white;
	overflow:hidden;
}

.collapsePanelHeader{
	width:100%;
	height:30px;
	background-image: url(images/bg-menu-main.png);
	background-repeat:repeat-x;
	color:#FFF;
	font-weight:bold;
}

.demoarea {
	padding:20px;
	background:#FFF url(images/demotop.png) no-repeat left top;
}

.demoarea p 
{
	padding:5px;
}
.demopopup
{
    background:#fff url(images/popup_background.gif) no-repeat left bottom;
    padding-top:20px;
    padding-bottom:20px;
}
.demoheading 
{
    background:#fff url(images/popup_header.jpg) no-repeat left bottom;
	padding-top:20px;
	padding-bottom:20px;
	color:#5377A9;
	font-family:Arial, Sans-Serif;
	font-weight:bold;
	font-size:1.5em;
}

.demobottom {
	height:8px;
	background:#FFF url(images/demobottom.png) no-repeat left bottom;
}
/*Modal Popup*/
.modalBackground {
	background-color:#ffffff;
    filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

.sampleStyleA {
	background-color:#FFF;
}

.sampleStyleB {
	background-color:#FFF;
	font-family:monospace;
	font-size:10pt;
	font-weight:bold;
}

.sampleStyleC {
	background-color:#ddffdd;
	font-family:sans-serif;
	font-size:10pt;
	font-style:italic;
}

.sampleStyleD {
	background-color:Blue;
	color:White;
	font-family:Arial;
	font-size:10pt;
}
#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}

/* Main form block */

.alignCenter { text-align : center;}
.alignLeft { text-align:left;}
.alignRight { text-align:right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignTopRight{text-align: right; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}
.MainBlockLeft{ width:400px; text-align:left; vertical-align:top;}
.addressBlockRight{width: 175px; text-align: right; vertical-align: top;}

#leftcolumn { width: 500px; border:0px none; float: left}
#rightcolumn { width: auto;  border:0px none; float: right}
#labels { width: 200px;  border:0px none; float: left}
#textboxes { width: 150px;  border:0px none; float: left}

#full { clear:both;}
.mainBlock
{
    vertical-align: top;
    text-align: center;
    line-height: inherit;
}