body{
color:#777777;
background-color: #f6f6f6;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:18px;
}

.wrapper{
width:960px;
margin: 0 auto;
}

/** Navigation **/

.logo-container{
width:300px;
display:inline;
float:left;
margin:10px;
position:relative;
}

#logo a{
text-decoration:none;
color:#ffffff;
}
.nav-container{
width:620px;
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
position:relative;
}
#header{
background-color: #262626;
height:50px;
}

#nav{
color:#ffffff;
float:right;
list-style:none;
margin: 15px 0px 0px 0px;
position:relative;
right:-20px;
}

#nav li{
float:left;
}

#nav li a {
color: #ccc;
text-decoration:none;
padding:17px 27px;
height:50px;
position:relative;
}

#nav li.last a{
border-right:0px;
}

#nav li a:hover{
background-color:#000000;
color:#fff;
top: 1px;
}

/** Page Layout **/

#page-container{
float:left;
margin-left:200px;

}

#page, #invoice{
width:835px;
margin: 40px 20px;
padding:50px;
background-color:#ffffff;
border: 1px solid #bbbbbb;
min-height: 400px;

}

#controls{
width:200px;
height:600px;
position: fixed;
left:0;
top:100;
background-color: #ffffff;
float:left;
border: 1px solid #cccccc;
padding: 20px 10px 20px 15px
box-shadow: 1px 1px 5px #888;
-moz-box-shadow: 1px 1px 5px #888;
-webkit-box-shadow: 1px 1px 5px #888;
}

#client-controls{
height:40px;
position: relative;
left:30px;
top:-70px;
background-color: #ffffff;
float:left;
padding: 10px 20px;
float:right;
border:none;
}
#controls .title{
margin: 20px 15px;
}

#controls a, #client-controls a {
display:block;
padding:20px 15px 20px 50px;
text-decoration:none;
font-size:16px;
color:#777;
border-bottom:1px solid #eee;
}

#client-controls a{
width:90px;
float:left;
font-size:12px;
padding:10px 15px 10px 50px;
border-bottom:none;
}

#client-controls a.new-message, #client-controls a.new-file{
border-right:1px solid #eee;}

#controls a.new-file, #client-controls a.new-file{
background: transparent url(../images/plus.png) 10px 20px no-repeat;
}

#controls a.progress-tracker{
background: transparent url(../images/progress.png) 10px 20px no-repeat;
}

#controls a.new-message, #client-controls a.new-message{
background: transparent url(../images/message.png) 10px 20px no-repeat;
}

#controls a.new-client{
background: transparent url(../images/client.png) 10px 20px no-repeat;
}

#controls a.new-project{
background: transparent url(../images/project.png) 10px 20px no-repeat;
}

#controls a.change-password, #client-controls a.change-password{
background: transparent url(../images/key.png) 10px 20px no-repeat;
}

#controls a.new-admin{
background: transparent url(../images/admin.png) 10px 20px no-repeat;
}

#controls a.my-profile{
background: transparent url(../images/edit.png) 10px 20px no-repeat;
}

#controls a:hover,  #client-controls a:hover{
background-color:#e5ecf9;}

#page-title  {
border-bottom:1px solid #BCBCBC;
height:90px;
}

#page-title h1 {
float:left;
font-size:36px;
font-weight:bold;
letter-spacing:-0.03em;
line-height:36px;
margin:27px 0;
}


p, fieldset, pre {
margin-bottom:18px;
}

h2  {
font-size:24px;
line-height:1.3em;
margin:0 0 9px;
}

h3  {
font-size:18px;
line-height:1.3em;
margin:0 0 2px;
}

.box-white  {
-moz-border-radius:4px 4px 4px 4px;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #D7D7D7;
margin:0 0 18px;
padding:18px;
}


/** FORMS **/
input, textarea, select{
background:none repeat scroll 0 0 #FAFAFA;
border:1px solid #EEEEEE;
font-size:18px;
line-height:20px;
margin:0;
padding:3px;
display:block;
}

input.wide, textarea.wide, select.wide{
width:440px;
}

input.skinny, select.skinny{
width:80px;
}

form h2.form-title{
padding-left: 30px;
margin-top:-20px;
    height:31px;
}

form h1.page-title{
text-align:center;
}

form#new_file h2{
background: transparent url(../images/plus.png) 0px 3px no-repeat;
}

form#update_progress h2{
background: transparent url(../images/progress.png) 0px 3px no-repeat;
}

form#new_message h2{
background: transparent url(../images/message.png) 0px 3px no-repeat;
}

form#new_client h2{
background: transparent url(../images/client.png) 0px 3px no-repeat;
}

form#new_project h2{
background: transparent url(../images/project.png) 0px 3px no-repeat;
}

form#change-password h2{
background: transparent url(../images/key.png) 0px 3px no-repeat;
}

#submit{
border:none;
background:none;
float:right;
display:block;
}

input:focus, textarea:focus, select:focus{
background:none repeat scroll 0 0 #FCFCFC;
border:1px solid #CCCCCC;
}

form div{
margin:0 auto;
padding-bottom:18px;
width:456px;
}


/** Modal Windows **/

.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
color: #333;
}

.jqmOverlay { background-color: #aaa; }


/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

div#modal-top, div#form-top  {
background:url("../images/modal-top.png") no-repeat scroll 0 0 transparent;
height:8px;
width:546px;
}
div#modal-body,   div#form{
background:url("../images/modal-bg.png") repeat-y scroll 0 0 transparent;
width:545px;
padding-top:20px;
postion:relative;
}
div#modal-bottom, div#form-bottom  {
background:url("../images/modal-bottom.png") no-repeat scroll 0 0 transparent;
height:15px;
width:546px;
}

div#form-top, div#form, div#form-bottom{
margin:0 auto;
}

#modal-body div#form-top, #modal-body div#form, #modal-body div#form-bottom{
background:none;
}

div#form-top{
margin-top:40px;
}

/** Status Messages **/

.error_list, #alert{
width: 450px;
margin: 20px auto;
}

.error, .success, .notice{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius: 3px;
color: #333333;
margin: 6px 0px;
padding: 5px;
font-size: 12px;
}

.success{
background-color: #DFFFBF;
border: 1px solid #9ADF8F;
}

.error{
background-color: #FFE1E0;
border: 1px solid red;
}

.notice{
background:  #FFF8CC;
border: 1px solid #ccc;
}


div.load-cont{
width:545px;
height:60px;
}
img.loading{

margin:0 auto;
display:block;
position:relative;
}
.tmp{
display:none;
}

td {
border-bottom:1px solid #DDDDDD;
padding-bottom:4px;
padding-left:10px;
padding-top:4px;
font-size:14px;
font-weight:normal;
padding:10px 0 10px 10px;
}

td.small{
width:10%
}

thead{
background-color: #333333;
color:#E7E7E7;
font-family:Arial,'Trebuchet MS';
font-weight:normal;

}

thead tr td:first-child {
/* background: url(../images/nw.gif) no-repeat top left; */

}

thead tr td:last-child {
/*	background: url(../images/ne.gif) no-repeat top right; */
}

table.clients td{
width:20%;
}

thead td {
background:none repeat scroll 0 0 #333333;
color:#E7E7E7;
font-family:Arial,'Trebuchet MS';
font-weight:normal;
padding:7px 0 7px 10px;
}

/** General Layout **/

.three-quarters{
width:613px;
float:left;
margin-right:30px;
}

.one-quarter{
width:195px;
padding:15px;
float:left;
}

.one-quarter{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #cccccc;
margin-left:30px;
}

.one-quarter h3{
color:#333333;
margin-bottom:20px;
}

.widget{
float:left;
margin: 20px 0px;
}

.widget .three-quarters{
width: 633px;
}

.widget .full{
width:900px;
}

.widget .three-quarters.notice{
padding: 12px;
width: 606px;
text-align:center;
}
.more{
display:block;
float:right;
}
.content{
background: #ffffff;
border: 1px solid #cccccc;
width:900px;
padding:30px;
margin-top:30px;
margin-bottom: 30px;
min-height:600px;
}

.content.admin{
margin-left:240px;
}

.page-title{
margin-bottom: 20px;
color: #aaaaaa;
}


.account-balance{
color:#3F7FA5;
font-weight:bold;
text-align:center;
}

.large-bullet{
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
width:34px;
height:25px;
text-align:center;
background-color:#F2F5FF;
padding-top:6px;
border: 1px solid #93ABFF;
color:#333;
font-size:12px;
float:left;
}

.status-complete{
width:24px;
height:24px;
background: transparent url(../images/check.png);
font-size:11px;
text-indent:-99999px;
display:block;
float:right;
margin: 8px 0px 0px 15px;
opacity: 0.8;
}

.status-complete:hover{
opacity: 1;
}

.status-in-progress{
font-size: 14px;
font-weight:bold;
color: #333;
}

.sidebar{
width:250px;
float:left;
margin-left:30px;
}

.message .body{
background-color: #999;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #ffffff;
padding: 10px;
margin:20px 20px 0px 20px;
}

.message .meta{
float:right;
margin:3px 20px 0px 0px;
}

/** Project Phases and Documents **/

.project-phases{
padding-left: 0px;
width: 600px;
display: block;
float:left;
}

.project-phases li {
list-style:none;
display:block;
margin-bottom:35px;
}

.phase-title{
float:left;
margin: 0px 0px 10px 30px;
}

.documents, .project-phases .note{
display:block;
width:500px;
clear:both;
margin-left:70px;
padding-left:0px;
}

.documents li{
background:url(../images/file.png) no-repeat scroll 0px 10px;
border-bottom:1px solid #D7D7D7;
color:#999999;
font-size:11px;
line-height:15px;
list-style:none outside none;
padding:8px 0px 6px 20px;
margin-bottom:0px;
}

.documents li.even {
background-color:#f6f6f6;
}

.project-phase li ol.documents li a  {
color:#0044BC;
}

.documents .delete-document{
    float:right;
}

.project-phase li ol li a:active  {
cursor:pointer;
text-decoration:underline;
}

.project-phases .note, .welcome{
border: 1px dotted #d7d7d7;
padding: 5px;
text-align: center;
background-color: #f6f6f6;
opacity: 0.8;
width:488px;
}

.sidebar .note{
border: 1px dotted #d7d7d7;
padding: 5px;
text-align: center;
background-color: #f6f6f6;
opacity: 0.8;
}

.project-phases .note:hover{
opacity:1;
}

.welcome{
font-size:18px;
width:500px;
height:200px;
padding:30px;
margin: 70px auto;
line-height:1.5;
text-align:left;
}

.welcome td:first-child{
width:30%;
padding:0px;
}

.welcome td{
border:none;
text-align:left;
}

.project-progress{
width:300px;
margin:0 auto;
text-align:center;
font-weight:bold;
clear:both;
}

.progressbar {
    width: 300px;
    background: url(../images/progressbar.png) no-repeat 0 -40px;
	margin: 10px auto 70px auto
}

.progressbar-completed {
    height: 20px;
    margin-left: -1px;
    background: url(../images/progressbar.png) no-repeat 1px 0;
}

.progressbar-completed div {
    float: right;
    width: 50%;
    height: 20px;
    margin-right: -1px;
    background: url(../images/progressbar.png) no-repeat 100% 0;
    display: inline; /* IE 6 double float bug */
}