@charset "utf-8";
/* CSS CAKE */


body     
{
    MARGIN: 0 AUTO;
    background: #fff;
    width: 100%;
    text-align: center;
    font: 80%/1.5 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
    color: #000;
    line-height: 1.5;
	margin: auto 0; 
	background: url(../img/bg.gif) repeat-x #ecece1;
}
    
h1 {
    float: right;
	text-align: right;
    font-size: 1.5em;
    color: #7b7b80;
    margin: 1px 0 0 0px;
}
    
h2 {
    float: left;
    clear: left;
    font-size: 1.4em;
    margin: 10px 0 5px 0px;
    width: 700px;
}
    
h3 {
    font-size: 1.3em;
    float: left;
    clear: left;
	margin: 0;
    width: 700px;
} 
   
h4 {
    float: left;
    clear: left;
    font-size: 1.3em;
	margin: 0 0 10px 0;
    width: 700px;
}
    
    
p {
    font-size: 1em;
    float: left;
    margin: 5px 0 5px 0;
    width: 700px;
}
    
a {
    color: #888b39;
	font-weight: bold;
	text-decoration: underline;
}    
a:hover {
    color: #ecd613;
	font-weight: bold;
	text-decoration: underline;
}

img {
    border: 0;
}

.clearboth {
    clear: both;
}

.red-copy {
	color: #ab1919;
}

div 
{
    float: left;
}

.button 
{
	float: left;
    height: 25px;
	color: #ffffff;
	background: url(../img/button.gif);
	text-decoration: none;
	border: 0;
	font-weight: bold;
	cursor: pointer;
    font-size: 1em;
    padding: 0 5px 0 5px;
}

input, select, textarea {
    border: 1px solid #b4b4a0;
    padding: 2px;
    font-size: 0.85em;
    font-family: "trebuchet MS", Verdana, Tahoma;
}


/* Page wrapper  ******************************************************************************/

#wrapper-all {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    float: none;
}

#wrapper-content {
    margin: 0 auto;
    width: 1032px;
    text-align: left; 
    float: none;
}

#content {
    
    width: 1032px;
	background: url(../img/content-bg.gif) #fff repeat-x;
	border: 1px solid #c8c8c0;
	margin-top: -1px;
}




/* header  ******************************************************************************/

#header {
    
    width: 1032px;
	height: 140px;
}

#header-leftcol {
    float: left;
    width: 1032px;
	height: 140px;
}
#header-leftcol {
    float: left;
    width: 500px;
} 
#header-rightcol {
    float: right;
    width: 400px;
}

#brand {
    float: left;
	margin-left: 15px;
}
#site-version {
	float: left;
	width: 100px;
	margin: 35px 0 0 10px;
	color: #666666;
	font-size: 0.9em;
}


#logged-in {
	float: right;
	width: 200px;
	text-align: right;
	margin: 35px 18px 4px 0;
}
 
.heads {
	float: right;
	margin: -2px 20px 0 0;
	width: 400px;
	text-align: right;
}
.heads h1 {
	float: right;
	text-align: right;
    font-size: 1.5em;
    color: #7b7b80;
    margin: 1px 0 0 0px;
}


/* TOP NAV *******************************************************************************
	border: 1px solid red;*/

#navtop {
    float: right;
	margin-bottom: 0px;
	width: 370px;
	height: 40px;
	padding: 8px 0 0 0;
	text-align: right;
}
#navtop ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navtop li {
    float: left;
	width: 81px;
	height: 26px;
	text-align: center;
	background: url(../img/btn-account.gif) no-repeat;
	padding: 4px 0 0 4px;
	margin-right: 5px;
}
#navtop li a {
	color: #888b39;
	font-size: 1em; 
}
#navtop li a:hover {
	color: #d1d733;
}





/* MAIN CONTENT  ******************************************************************************/



#content-inside {
	float: left;
	width: 990px;
	margin-left: 20px;
}

.dashboard-boxes {
	float: left;
	text-align: center;
	width: 264px;
	margin: 30px 5px 20px; 0;
	padding: 5px;
	color: #333333;
	background:url(../img/dashb-outerbox-bg.gif);
	border :1px solid #d9d9cc;
}

.dashboard-boxes-heads {
	width: 274px;
	background: #fff;
	height: 50px;
	margin: -5px 0 5px -5px;
	padding-top: 10px;
}

.dashboard-boxes-sml {
	float: left;
	width: 257px;
	padding: 8px;
	margin: -5px 0 0 0px;
	background: url(../img/dashb-box-mid.gif) repeat-y;
	text-align: left;
}
.status-sml {
	float: right;
	text-align: right;
	margin-right: 12px;
	margin-top: -5px;
}
.dashboard-boxes-copy {
	float: left;
	width: 240px;
	line-height: 1.1;
	font-size: 0.9em;
}
.btn-dashboard {
	float: right;
	background: url(../img/btn-dashboard-sml.gif);
	width: 98px;
	height: 24px;
	border: 0;
	margin: 8px 12px -5px 0;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}
.row-archive {
	float: right;
	width: 80px;
	margin: -5px 0 0 0px;
}
.row-archive label {
	padding: -2px 0 0 0px;
	font-size: 0.9em;
}



#status-key {
	float: right;
	background: #e6e6c7;
	width: 100px;
	padding: 10px;
	margin: 30px 0 0 0px;
}
#status-key h3 {
	font-size: 1.3em;
    float: left;
    clear: left;
	margin-bottom: 10px;
	color: #666666;
}
#status-key ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#status-key li {
    float: left;
	width: 100px;
	padding: 0px 0 0 0px;
	margin: 2px 0 2px 0;
}
#status-key li.planned {
	background: url(../img/status-planned.gif) no-repeat top right;
}
#status-key li.open {
	background: url(../img/status-open.gif) no-repeat top right;
}
#status-key li.closed {
	background: url(../img/status-closed.gif) no-repeat top right;
}
#status-key li.qa {
	background: url(../img/status-qa.gif) no-repeat top right;
}
#status-key li.staging {
	background: url(../img/status-staging.gif) no-repeat top right;
}
#status-key li.live {
	background: url(../img/status-live.gif) no-repeat top right;
}




/* FOOTER  *****************************************************************************
	border: 1px solid red;*/


#footer-wrapper {
	text-align: center;
	width: 100%;
	background: url(../img/footer-bg.gif) repeat-x;
	margin: 0 auto;
}

#footer {
    float: left;
	height: 200px;
	margin: 0px 0 0 0;
	width: 938px;
	text-align: center;
}

#footer-links {
    float: left;
	width: 340px;
	margin-top: 0px;
}
#footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer-links li {
    font-size: 0.9em;
    float: left;
	clear: left;
    margin: 0px 10px 20px 0px;
	height: 10px;
}
#footer-links li a {
    color: #9eb1b1;
	font-weight: normal;
}

#footer-links li.footer-head {
	font-weight: bold;
	color: #727c7c;
    font-size: 1.2em;
	margin-bottom: 20px;
}

#copywrite {
	float: right;
	margin: 0px;
	font-size: 0.9em;
	color: #c3c7c7;
}







/* FORM ELEMENTS ***********************************************************border: 1px solid red;*****/


.error 
{
    color: Red;
    font-style: italic;
}

#login-box 
{
    float: left;
    border: 1px dotted #7e7e49;
    padding: 10px;
    width: 350px;
    margin: 20px 0 20px 300px;
}
.login-row {
    padding-top: 5px;
}
.login-row label {
    width: 100px;
    float: left;
    color: #000;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 2px 2px 2px 2px;
}
.login-row input, select, textarea {
    width: 200px;
    float: left;
    border: 1px solid #b4b4a0;
	margin-right: 10px;
    padding: 2px;
    font-family: "trebuchet MS", Verdana, Tahoma;
    font-size: 1em;
}
.login-norow {
    padding-top: 5px;
}
.login-norow label {
    width: 100px;
    float: left;
    color: #000;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 2px 2px 2px 2px;
}
.button.btn-login {
    width: 60px;
}



.row {
    padding-top: 5px;
}
.row label {
    float: left;
    color: #000;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 3px 2px 2px 2px;
    font-size: 0.85em;
}
.row input, select, textarea {
    float: left;
    border: 1px solid #b4b4a0;
	margin-right: 10px;
    padding: 2px;
    font-size: 0.85em;
    font-family: "trebuchet MS", Verdana, Tahoma;
}
.row input.projectitem-title {
    width: 680px;
	margin-left: 2px;
}
.row select.estimate {
    width: 50px;
    padding: 4px 0 4px 2px;
}
.row select.select-med {
    width: 90px;
    padding: 4px 0 4px 2px;
    border: 1px solid #b4b4a0;
}
.row textarea {
	width: 710px;
}
   
.row input.radio-btn {
    float: left;
    width: 20px;
    border: 0;
    margin: 3px 5px 0 0;    
    background: none;
}    
.row input.checkbox {
    float: left;
    width: 20px;
    border: 0;
    margin: 3px 5px 0 0;    
    background: none;    
}

.row input.btn-register {
	background: url(../img/btn-register.jpg);
	float: left;
	width: 141px;
	height: 25px;
	border: 0;
	margin-top: 3px;
}


.row-wide {
    padding-top: 5px;
    clear: both;
    float: left;
    width: 730px;
}
.row-wide .label {
    float: left;
    margin: 0;
    width: 100px;
}
.row-wide .inputfield {
    float: left;
    margin: 0;
    width: 300px;
}




/* LEFT NAV *******************************************************************************
	border: 1px solid red;*/

#nav-left {
    float: left;
	margin-bottom: 20px;
	margin-top: 18px;
	width: 263px;
	padding: 0;
	background: url(../img/nav-left-bg.gif);
}
#nav-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav-left li {
    float: left;
	clear: left;
	margin: 5px 0 0 15px;
}
#nav-left li a {
	color: #888b39;
	font-size: 1em; 
}
#nav-left li a:hover {
	color: #d1d733;
}


/* PROJECT ITEM PAGE *********************************************************************************/

#projects-panel
{
	float: right;
	width: 690px;
	margin: 18px 0 20px 0;
	/*border: 1px solid red;*/
}
#project-search 
{ 
	float:left;
	clear: left;
	margin: 0px 0 20px 0;
}
#project-item 
{ 
	float:left;
	clear: left;
	width: 659px;
	padding: 0 10px 0 15px;
	background: url(../img/project-itembox-mid.gif);
}
#project-item h2 {
    float: left;
    clear: left;
	width: 200px;
    font-size: 1.4em;
    margin: 0px 0 5px 0px;
}

.projectitem-btn-row {
    float: right;
    padding-top: 5px;
	width: 318px;
}
.projectitem-button 
{
	float: left;
	width: 95px;
    height: 29px;
	display: block;
	color: #ffffff;
	margin: 5px 10px 0 0;
	background: url(../img/btn-newitem.gif) no-repeat;
	text-decoration: none;
	border: 0;
	font-weight: bold;
}
.row-projectitem {
    float: left;
    padding-top: 5px;
}
.row-projectitem label {
    float: left;
    color: #000;
    display: block;
    font-weight: normal;
    margin: 0 0px 0 0;
	width: 60px;
}
.row-projectitem input, select, textarea {
    float: left;
    border: 1px solid #b4b4a0;
	margin-right: 10px;
    padding: 2px 0 2px 2px;
    font-size: 0.98em;
    font-family: "trebuchet MS", Verdana, Tahoma;
	width: 120px;
}
.row-projectitem select {
	width: 124px;
    padding: 3px 0 4px 2px;
}




/* ITEM DETAIL PAGE *********************************************************************************/

#item-detail-box {
	float: left;
	background: url(../img/itemdetail-box-mid.gif) #ecece1 repeat-y;
	width: 998px;
	margin: 20px 0 20px 0;
}
#item-detail-box table {
	float: left;
	width: 980px;
	border-collapse: collapse;
	margin: 0px 0 0px 9px;
}
#item-detail-box th, td {
	padding: 7px;
	vertical-align: top;
	border: 1px dotted white;
}
#item-detail-box th {
	width: 100px;
}
#item-detail-box td {
	width: 760px;
}

.detail-textarea {
	width: 840px;
}

.btn-project-detail {
	float: right;
	background: url(../img/btn-dashboard-sml.gif);
	width: 98px;
	height: 24px;
	border: 0;
	margin: 3px 10px 0px 0;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

.comments-log {
	float: left;
	width: 840px;
	padding: 6px;
	background: #dcdccc;
}
.comments-log .cl-name {
	float: left;
	border-right: 1px solid white;
	width: 100px;
}
.comments-log .cl-date {
	float: left;
	border-right: 1px solid white;
	padding-left: 6px;
	width: 100px;
}
.comments-log .cl-link {
	float: left;
	width: 620px;
	padding-left: 6px;
}

/* Cutomer styels *******************************************************/

.message-outer-box 
{    
    float: left;
    clear: left;
    width: 983px;
}
.message-box 
{
    width: 973px;
    background: url(../img/messages-box-bg.gif) repeat-y;
    padding: 0 10px 0 10px;
    margin-top: -5px;
}


/* BILLING TABLE ***************************************************************************/

.billing-table 
{
    float: left;
    clear: both;
	border-collapse: collapse;
	margin: 0px 0 0 0;
	width: 970px;
	border-bottom: 1px solid #dfdfc8;
}
.billing-table th {
	padding: 3px;
}
.billing-table td {
	padding: 3px;
}
.billing-table th.billingtable-title, td.billingtable-title 
{
    width: 400px;
}
.billing-table th.billingtable-time, td.billingtable-time 
{
    width: 100px;
}
.billing-table th.billingtable-completed, td.billingtable-completed 
{
    width: 200px;
}
.billing-table th.billingtable-billed, td.billingtable-billed 
{
    width: 200px;
}