html, body, ul, ol, li, p, h1 , h2, h3, h4, h5, h6, form, fieldset, a, div, img, blockquote{border-style: none;border-color: inherit;border-width: 0;margin: 0;padding: 0;}
body{margin: 0px;padding: 0px;background: #fff url('images/bg.gif') repeat-x; 
     font: 13px Trebuchet MS, Arial, Helvetica, sans-serif;color: #333333;}

body.empty{background: #fff;}

/********************* STRUCTURE **********************/
div#container{margin: 0 auto; width: 900px; padding: 0; border: 0; overflow: hidden;}
div#header{width: 900px; height: 160px; padding: 0; margin: 0 auto;}
div#content{float: left; display: block; width: 900px; min-height: 600px;}
div#left-column{float: left; display: block; width: 700px;}
div#right-column{float: left; display: block; width: 200px;}
div#footer-container {background-color: #18BDF5;}
div#content-wide{float:left; display: block; width: 900px;}

/********************* LOGO **********************/
#logo {float: left; padding: 25px 0 0 0; width: 900px;}
#logo h1 {margin: 0; text-transform: lowercase; letter-spacing: -2px; font-size: 3.6em; font-weight: normal; color: #fff;}
#logo h1 a {padding-right: 20px; text-decoration: none; color: #fff;}
#logo p {margin: -5px 0 0 0; text-transform: uppercase;	font-size: 1.22em; letter-spacing: -1px;}
#logo a {text-decoration: none; color: #FFFFFF;}

/********************* MENU BAR **********************/
div#menu-list {float: right;}
div#menu-list ul {margin: 0px; padding: 0px 0px 0px 0px; list-style: none;}
div#menu-list li {display: inline;}
div#menu-list ul li a{display: block; float: left; margin-left: 20px; text-decoration: none; text-transform: lowercase; font-size: 1.2em; color: #FFFFFF;} 
div#menu-list ul li a:active, 
div#menu-list ul li a:hover{border-bottom: 3px solid #8AD9F3;}

/********************* TEXT **********************/
h2 {font-size: 18pt; font-weight: normal; letter-spacing: -1px; color: #000;}
h3 {font-size: 14pt; font-weight: normal; letter-spacing: -1px; color: #000;}
p, ol, ul {line-height: 1.67em;}
a {color: #18BDF5;}
a:hover {text-decoration: none;}

/********************* FOOTER **********************/
#footer{width: 900px; margin: 0 auto; padding-top: 30px; color: #fff;}
#footer ul {margin: 0; padding: 0; list-style: none;}
#footer li {display: block;	float: left; width: 240px; padding-left: 29px;}
#footer li.first {padding-left: 0;}
#footer li ul {margin: 0;}
#footer li li {display: list-item;	float: none; margin: 0;	padding: 5px 0;}
#footer li li a {padding-left: 21px; color: #fff;}
#legal {clear: both; margin: 0;	padding: 50px 0; text-align: center; color: #fff;}
#legal a {color: #fff;}

/********************* INTRO TEXT **********************/
div.body-text{float: left; display: block; width: 680px; margin: 0 0 20px 0;}
div.body-text p{padding-left: 5px; margin-bottom: 10px;}
div.body-text h2{margin: 10px 0;}
div.body-text h3{margin: 5px 0;}
div.body-text ul {padding-left: 50px; padding-bottom: 5px; font-size: 10pt; width: 100%;}
div.body-text li {width: 600px;}

/********************* LOGIN and SIGNUP **********************/
div#login{float: left; display: inline; width: 250px; margin-left: 20px;  padding: 5px 5px 20px 10px; background: url('images/cen.gif') repeat-x left bottom; border:solid 1px #d7f4fd;}
div#sign-up{float: left; display: inline; width: 250px; margin-left: 50px; padding: 5px 5px 20px 10px; background: url('images/cen.gif') repeat-x left bottom; border:solid 1px #d7f4fd;}
div#sign-up h3,
div#login h3{margin: 0px 0px 10px 0px;}
div#sign-up label,
div#login label{float: left; display: block; width:90px;}
div#sign-up input,
div#login input{width: 140px; margin: 0 0 3px 10px;}
div#sign-up input.button,
div#login input.button{width: 110px; float: left; margin-left: 100px;}
.login-feedback{float:left; width: 235px; font-size: 12px; color: #f00; }
div#sign-up span.explanation{margin: 0 0 3px 100px;}
#login .remember input{width: 16px; float:left;}

/********************* PASSWORD RECOVERY **********************/
div#recover{float: left; display: inline; width: 250px; margin-left: 50px; padding: 5px 5px 5px 20px;background: url('images/cen.gif') repeat-x left bottom; border:solid 1px #d7f4fd;}
div#recover label{float: left; display: block; width:80px;}
div#recover input{width:150px; margin-bottom: 3px;}
div#recover input.button{width: 80px; float: left; margin-left: 80px;}

/********************* CONTACT US **********************/
div#contact{float: left; display: inline; width: 450px; margin: 30px 0 0 50px; padding: 5px 5px 5px 20px; background: url('images/cen.gif') repeat-x left bottom; border:solid 1px #d7f4fd;}
div#contact label{float: left; display: block; width:80px;}
div#contact input{width:250px; margin-bottom: 3px;}
div#contact input.button{width: 80px; float: left; margin-left: 80px;}
div#contact .feedback{width: 400px; color: #f00; font-weight: bold; font-size: larger; margin-left: 80px;}
div#contact textarea{width: 400px; height: 150px;}

/************************************************************************************************************/

/********************* PAGE HEADERS **********************/
div.inline-header{float:left; width: 680px; margin-bottom: 10px;}
div.inline-header h2{float:left;}
div.inline-header div.back-link {float:left; line-height: 25px; margin-left: 20px;}
div.inline-header div.progress {float:left; line-height: 25px; margin-left: 20px; padding-top: 3px;}
div.inline-header span {margin-left: 20px; font-size: larger;}
div.inline-header div.sub-links{float:left; width: 680px; line-height: 25px; margin-left: 20px;}

/********************* FULL WIDTH LEFT COLUMN INPUT FORM **********************/
.wide-entry {float:left; display: block; width: 865px; margin: 10px 0; padding: 5px 5px 5px 10px; background: url('images/cen.gif') repeat-x left bottom; border:solid 1px #d7f4fd;}
.wide-entry > .edit-entry > h3{float:left; margin-bottom: 10px; width:100%;}
.wide-entry > h3 {float:left; margin-bottom: 10px; width:100%;}
.wide-entry > h3.short {float:left; margin-bottom: 10px;}
.wide-entry .back-link {float:left; line-height: 25px; margin-left: 15px;}
.wide-entry span.grid-total {float: right; border-top: solid 1px #ccc; margin-right: 5px;}
.wide-entry .summary-radio{margin: 10px 5px;}

.wide-entry .sub-menu{float:left; display:block; clear:left;padding-bottom:5px;}
.wide-entry .sub-menu label{width: 80px;}
.wide-entry .sub-menu input{width: 70px; margin-bottom: 3px;}
.wide-entry .sub-menu input[type='checkbox']{width:30px; text-align: left;}
.wide-entry .sub-menu a.time-button{width:80px; font: 13px Trebuchet MS, Arial, Helvetica, sans-serif;color: #333333; text-decoration: underline; padding: 0px 10px;}
.wide-entry .sub-menu a.time-button:hover{text-decoration: underline;}

.wide-entry > ul {list-style: none;}

/********************* SHORT EDITOR **********************/
div.edit-entry {float: left; display: block; width: 300px; padding: 5px 5px 5px 20px;}
div.edit-entry label{float: left; width: 100px;}
div.edit-entry label.long{float: left; width: 120px;}
div.edit-entry input{width: 70px; margin-bottom: 3px;}
div.edit-entry input.medium{width: 100px; margin-bottom: 3px;}
div.edit-entry input.long{width: 200px; margin-bottom: 3px;}
div.edit-entry input.button-first{width: 80px; float: left; margin-left: 100px;}
div.edit-entry input.button-first-long{width: 80px; float: left; margin-left: 120px;}
div.edit-entry input.button{width: 80px; float: left; margin-left: 5px;}
div.edit-entry textarea{width: 100%; height: 70px;}
div.edit-entry img {padding: 0 0 2px 3px;}
div.edit-entry select {width: 200px; margin-bottom: 5px;}

div.edit-entry .option-group {float:left; display:block; width: 650px;}
div.edit-entry .option-group label {width: 120px; line-height: 25px; vertical-align: middle;}
div.edit-entry .option-group input {width: 50px; line-height: 25px; margin: 0; padding:0; clear:left;}

.link-box {float:left; display:block; padding-left: 20px;}
.link-box ul {list-style: none;}
.link-box li {width: 150px;}

.inline-entry label{width: 80px;}
.inline-entry input{width: 100px;}

/********************* HALF WIDTH GRID ENTRY **********************/
.display-grid{float: left; display: block; width: 300px; padding: 5px 5px 5px 20px;}
.display-grid-medium{float: left; display: block; width: 865px; padding: 5px 5px 5px 20px;}
.display-grid-wide{float: left; display: block; width: 875px; padding: 5px 5px 5px 20px;}
.display-grid span.total{float: left; width: 205px ;display: block; padding: 0px 0px 00px 80px; border-top:dotted 1px #d7f4fd; font-weight:bold; text-align: right;}
.display-grid span.total-short{float: left; width: 105px ;display: block; padding: 0px 0px 0px 80px; border-top:dotted 1px #d7f4fd; font-weight:bold; text-align: right;}
.display-grid-wide span.total{float: left; display: block; width: 870px; border-top:dotted 1px #ccc; font-weight:bold; text-align: right;}
.grid-description{padding-left: 10px; width:400px; text-align:left; vertical-align: top;}
.grid-time {width: 40px; text-align:right; vertical-align:top;}
.grid-totaltime {width: 65px; text-align:right; vertical-align:top;}
.grid-day {width: 80px; text-align: left; vertical-align: top;}
.grid-longday {width: 200px; text-align: left; vertical-align: top;}
.grid-link {width: 40px; text-align: center; vertical-align: middle;}
.grid-link a:link,
.grid-link a:visited,
.grid-longlink a:link,
.grid-longlink a:visited  { text-decoration: none;}
.grid-link a:hover, 
.grid-link a:active,
.grid-longlink a:hover, 
.grid-longlink a:active { text-decoration: underline;}
.grid-longlink {width: 50px; text-align: center; vertical-align: middle;}
.grid-vlonglink{width: 100px; text-align: center; vertical-align: middle;}

/* row styles */
.row{background-color: #fff;}
.alternate-row{background-color: #d7f4fd;}
.header{border-bottom: solid 1px #000;}

th{border-bottom: solid 1px #d7f4fd;}

/********************* PREFERENCES **********************/
div.preferences {float: left; display: block; width: 670px;}
div.preferences label{padding-left: 3px; line-height: 20px; vertical-align: middle;}
div.preferences input{width: 20px; line-height: 20px; margin-bottom: 3px;}
div.preferences input.button{width: 80px; float: left; margin: 5px 0 0 5px;line-height:17px;}
div.preferences p {float:left; padding: 5px 0 0 20px; font-style: italic;}

input.gen-api-key{width: 200px;}
.api-key{padding: 10px; font-size: 12pt;}

/********************* INFO LIST **********************/
div#info {display: block; float:left;}
div#info a:link,
div#info a:visited {float: right;}
div#info a:hover,
div#info a:active {float: right;}

div#main-info {display: block; float: left; margin-left: 10px;}

div.info-item {display:block; float: left; margin-bottom: 30px; width: 200px}
div.info-item h3{}
div.info-item p {font-size: 8pt; padding-bottom: 8px;}
div.info-item p.subtitle {font-size: 8pt; font-style: italic;}
div.info-item img {float:left; width: 40px; height:40px; margin-right: 10px;}
div.info-item img.small {float:left; width: 20px; height:20px; margin-right: 10px;}

/********************* HELP PAGE **********************/
div#help-header {display:block; float:left; margin: 0 0 30px 10px; width: 700px;}
div#help-header img {display:block; float:left; width: 40px; height:40px;}
div#help-header h2{display:block; float:left; font-size: 18pt; line-height: 50px; width: 600px;}
div#help-header p{display:block; float:left; width: 700px;}

div#help-header div.sub-title{display:block; float:left; margin: 20px 0 20px 10px;}
div#help-header div.sub-title p{width: 670px;}


div.help-section dl {display: block; float: left; margin: 0 0 0 30px; width: 670px;}
div.help-section dt {float:left; width: 200px;}
div.help-section dd {float:left; margin: 0 0 5px 20px; width: 400px;}

div.help-section{display:block; float:left; width: 700px; margin: 0 0 30px 10px;}
div.help-section h3{display:block; float:left; font-size: 12pt; margin: 0 0 10px 10px;}
div.help-section h3.full{width: 690px;}
div.help-section a{display:block; float:left; margin: 0 0 0 20px; line-height: 20px; text-decoration: none;}
div.help-section p{display:block; float:left; padding: 0 0 0 40px; clear:left; width: 650px; margin-bottom: 5px;}

/********************* FEEDBACK **********************/
.feedback {float:left; display: block; line-height: 20px; margin: 5px 3px 20px 0; padding: 2px 5px 2px 10px; 
           color: #000; border: solid 1px #ccc; width: 672px; font-weight: bold; font-size: larger;}
           
/********************* REPORTS **********************/
.report-day{width: 10px; text-align: left; vertical-align: top;}
.report-time{width: 80px; text-align:right; vertical-align:top;}

/********************* CUSTOM REPORTS **********************/
div.custom-report{float:left; display:block; width: 250px;}
div.custom-report span{float: left; display: block; width: 90px;}
div.custom-report a:link,
div.custom-report a:visited{width: 50px;}
div.custom-report a:hover,
div.custom-report a:active{width: 50px;}

/********************* Collapsing panels **********************/
img.collapser{float:left; display: block; width: 9px; height: 9px; padding-top: 6px;}

.title{width: 875px; margin-bottom: 20px; padding-bottom: 5px;}
.title h3.link {float:left; display: block; cursor: pointer; margin: 0; padding-left: 10px; border: 0px; border-bottom: dotted 1px #ccc; width: 855px;}
.title .sub-link-end{float:right; display: block;}

/********************* CHARTS **********************/
.chart-options{float:left; display: block; width: 800px;}

.small-chart{float: left; display: block; width: 300px; padding: 5px 5px 5px 20px;}

/********************* Timesheets **********************/
#ts-header{float: left; display: block; width: 800px; margin: 0 0 30px 0;}
#ts-header h2{border:0; width: 100%; margin: 5px 0;}
#ts-header h3{border:0; width: 100%; margin: 5px 0;}

#ts-grid{float: left; display: block; width: 800px; margin: 10px 0;}
#ts-grid th{border-bottom: solid 1px #000;}

#ts-sig{float:left; display: block; width: 800px; margin: 50px 0 0 0;}
.line{float:left; display:block;  margin: 15px 0; clear: both;}
.label{float:left; display:block; width: 80px;}
.underline{float:left; display:block; width: 300px; border-bottom: solid 1px #000;}

/********************* Filters **********************/
.filter-select{width: 150px;}
.short-input{width: 70px;}

/********************* Non-chargeable Table ***********/
table.non-chargeable{width: 200px;}
table.non-chargeable > td{width: 100px;}


/********************* Monthly Report Table ***********/

table.month { margin-bottom: 100px;}
table.month th {padding-bottom: 5px; margin-bottom: 5px;}
table.month td {width: 50px; height: 50px; text-align: right; padding-right: 5px;}
table.month td.empty{background-color: #D7F4FD;}
table.month td.noncharge{background-color: #22B14C;}
table.month td.charge{background-color: #fff;}
table.month td.weekheader{background-color: #fff; text-align: center; font-weight: bold;}

table.month-summary {width: 250px;}