/*****************************************************************************
 GLOBAL - CENTERED PAGE STYLE AND HTML ELEMENT REDEFINITIONS
*****************************************************************************/
body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, Serif;
  text-align: center;
}

#container {
  margin: 0 auto;
  width: 960px;
  text-align: left;
  background: White;
  margin-top: 22px;
  padding: 0px 20px 0px 20px;
}

.centeredContent {
  margin: 0 auto;
  padding: 0;
  width: 960px;
  text-align: left;
}

#mainContent {
}

h1 {
  font-size: 32px;
  color: #3b5998;
  font-weight: bold;
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif;
  border-bottom: solid 1px #c3cee0;
  padding-bottom: 3px;
  margin-bottom: 30px;
}

h1.small { 
  text-align: left; 
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif; 
  color: #3b6cc5; 
  font-weight: normal; 
  font-size: 30px; 
  font-style: normal; 
  border: none;
  width: 85%; 
}

h3 {
  font-size: 25px;
  color: #3b5998;
  font-weight: normal;
  border-bottom: solid 1px #c3cee0;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

h3.small { 
  margin: 10px 0 25px 0; 
  color: #3e3c3c; 
  font-weight: normal; 
  font-style: normal; 
  font-size: 18px; 
  font-family: Georgia, "Times New Roman", Times, Serif; 
  width: 85%; 
  line-height: 24px; 
}

h4 {
  font-size: 20px;
  color: #3b5998;
  font-weight: normal;
  padding-bottom: 3px;
  margin-bottom: 10px;
  background-color: #b1c2d3;
}

.rule {
  clear: both;
  display: block;
  width: 100%;
  height: 4px;
  background: none;
  border-top: solid 1px #c3cee0;
  font-size: 1px;
}

.headerWhiteSpace {
  width: 100%;
  height: 15px;
  line-height: 20px;
}

.PageHeading {      /* Create/Add pages */
  float: left;
  font-size: 32px;
  font-weight: bold;
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif;
  color: #3b5998;
  padding-bottom: 3px;
  margin-right: 35px;
}

.InvoicePageHeading {
  float: left;
  font-size: 32px;
  font-weight: bold;
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif;
  color: #3b5998;
  padding-bottom: 3px;
  padding-left: 52px;
  margin-right: 35px;
  background-image: url(/Images/note.png);
  background-repeat: no-repeat;
  background-position: center left; 
}

.lightGray {
  color: #aaaaaa;
}



/*****************************************************************************
 UPLOADER STYLES
*****************************************************************************/
DIV.ProgressBar { width: 100px; padding: 0; border: 1px solid black; margin-right: 1em; height:.75em; margin-left:1em; display:-moz-inline-stack; display:inline-block; zoom:1; display:inline; }
DIV.ProgressBar DIV { background-color: Green; font-size: 1pt; height:100%; float:left; }
SPAN.asyncUploader OBJECT { position: relative; top: 5px; left: 10px; }



/*****************************************************************************
 PLAN COUNTER STYLES
*****************************************************************************/
#PlanCounter {
  width: 100%;
  background-color: #e2f0f7;
  border-bottom: solid 2px #3b5998;
  font-family: Verdana, Myriad, Arial, Sans-Serif;
  font-size: 11px;
  font-weight: normal;
  color: #3b5998;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
}

#PlanCounter #CenterAlign {
  width: 960px;
  margin: 0 auto 0 auto;
  text-align: left;
}

#PlanCounter #CenterAlign a {
  color: #3b5998;
  text-decoration: underline;
}

#PlanCounter #CenterAlign em {
  font-style: normal;
  font-weight: bold;
}

#PlanCounter #CenterAlign .counter {
  margin-left: 10px;
  margin-right: 30px;
  color: #444444;
}

#PlanCounter #CenterAlign #close {
  float: right;
  display: inline;
}

#PlanCounter #CenterAlign #close a {
  color: #2d2d2d;
}



/*****************************************************************************
 FOOTER STYLES
*****************************************************************************/
#footerContainer {
  width: 100%;
  clear: both;
  display: block;
  background-color: White;
  height: 100px;
  line-height: 100px;
}

#footer {
  width: 100%;
  display: block;
  text-align: left;
  line-height: 20px;
  background-color: White;
  background-image: url(/Images/logo_small.gif);
  background-repeat: no-repeat;
  background-position: 0px 20px;
  padding: 16px 60px;
  border-top: solid 1px #e7e7e7;
}

#footer a {
  color: #0058a3;
  font-weight: normal;
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  text-decoration: none;
  margin-right: 20px;
}

#footer #copyright {
  color: #818181;
  font-size: 14px;
  font-weight: normal;
  font-family: "Myriad Pro", Myriad, Verdana, Arial, Sans-Serif;
}



/*****************************************************************************
 HEADER STYLES
*****************************************************************************/
#header {
  width: 100%;
	background: White;
	color: #000000;
	font-size: 11px;
	margin: 0px auto 0;
	padding: 0 0 0 0;
	overflow: hidden;
}

#headerGradient {
  width: 100%;
  height: 46px;
  /*background: url("/Images/header_gradient.gif") repeat-x;*/
  background: #545553;
  color: White;
  font: bold 20px Arial, Verdana, Sans-Serif;
  padding: 12px 0 0 3px;    /* spacing to the company name */
}

#headerSettingsLinks {
  font: 12px "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  text-align: right;
  float: right;
}

#headerSettingsLinks a {
  color: White;
}

#headerCompanyName {
  float: left;
}

#headerTitle {
  color: #2255aa;
  font-size: 42px;
  margin-bottom: 17px;
  margin-left: 5px;
  margin-top: -5px;
  float: left;
}

.settingsInstructions {
  color: #3d3d3d;
  font-size: 16px; 
  line-height: 20px; 
  font-weight: normal;
  margin-top: -20px;  /* reduce the space below the H1 tag */
  padding-bottom: 20px;
  width: 80%;
}

.settingsInstructions em {
  font-style: normal; 
  background-color: #f3f3d5;
}



/*****************************************************************************
 NAVIGATION - MAIN MENU BAR
*****************************************************************************/
#ddcolortabs {
  clear: both;
  padding: 0;
  width: 100%;
  background: #545553;
  padding-left: 5px;
  voice-family: "\"}\"";
  voice-family: inherit;
}

#ddcolortabs ul {
  font: normal 17px Arial, Verdana, sans-serif;
  margin:0;
  padding:0;
  list-style:none;
  height: 27px;
  line-height: 32px;
  vertical-align: middle;
}

#ddcolortabs li {
  display:inline;
  margin:0 2px 0 0;
  padding:0;
}

#ddcolortabs a {
  float:left;
  color: white;
/*  background: #545553 url(/Images/color_tabs_left.gif) no-repeat left top;*/
  margin:0 2px 0 2px;          /* horizontal space between tabs */
  padding:0 0 0 8px;          /* padding so button transparent image displays */
  text-decoration:none;
  letter-spacing: 1px;
  background-color: #a6a498;
}

#ddcolortabs a span {
  float:left;
  display:block;
 /* background: transparent url(/Images/color_tabs_right.gif) no-repeat right top;*/
  padding:0px 24px 0px 21px;  /* horizontal padding in tab */
}

#ddcolortabs a span {
  float:none;
}

#ddcolortabs a:hover {
  background-color: #f0eddd;
  color: #545553;
}

#ddcolortabs a:hover span {
  background-color: #f0eddd;
}

#ddcolortabs #current a, #ddcolortabs #current span { /*currently selected tab*/
  background-color: #f0eddd;
  font-weight: bold;
  color: #545553;
}

.ddcolortabsline {
  clear: both;
  padding: 0;
  width: 100%;
  height: 4px;
  line-height: 4px;
  background: #3b5998; 
  border-top: 1px solid #fff;
  font-size: 1px;   /* needed to stop pushing IE content down and making this element bigger that 4px (by using a nbsp */
}



/*****************************************************************************
 NAVIGATION - SUB MENU BAR
*****************************************************************************/
.submenu {
  clear: both;
  padding: 0;
  width: 100%;
  height: 36px;
/*  background: url(/Images/nav_bar_background.gif) repeat-x;*/
  background-color: #f0eddd;
}

.submenu ul {
  font: bold 13px Arial, Verdana, Sans-Serif;
  margin:0;
  padding:0;
  list-style:none;
  vertical-align: middle;
}

.submenu li {
  display:inline;
  margin:0;
  padding:0;
  background: none;
  white-space: nowrap;
}

.submenu li a {
  display:block;
  float:left;
  color: #4263ae;
  background: none;
  margin: 8px 30px 0 0;         /* spacing between buttons */
  padding: 2px 6px 2px 6px;     /* size of button */
  letter-spacing: 1px;
  border: solid 1px #f0eddd;    /* needs border so sligns with hover+current styles (becasue they have border) */
  /*height: 26px;
  line-height: 22px;*/
}

.submenu li a:hover, .submenu li a.current {
  color: #495d8b;
  background-color: #bfcfe2;
  border: solid 1px #8298b2;
  text-decoration: none;
}



/*****************************************************************************
 INVOICE VIEW TABLE STATUS ICONS.
*****************************************************************************/
.StatusDraft, .StatusSent, .StatusPaid, .StatusOverdue {
  font: normal 8px Verdana, Arial, Sans-Serif;
  text-transform: uppercase;
  color: White;
	text-align: center;
	padding: 2px 3px;
	display: inline;
}

.StatusDraft {
  background-color: silver;
}

.StatusSent {
  background-color: Orange;
}

.StatusPaid {
  background-color: Green;
}

.StatusOverdue {
  background-color: Red;
}



/*****************************************************************************
 MESSAGE STYLING - HELP, ERROR, INFORMATION, SYSTEM ETC.
*****************************************************************************/
.contextHelp {  
  font: normal 13px "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 12px;
  color: #000;
	text-align: left;
	background: #eaf3fa;
	padding: 5px 20px 5px 15px;
  border: solid 1px #b1c2d3;
  width: 90%;
  margin: 20px auto 20px auto;
}

.contextHelp h2 {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  color: #2367d2;
  margin-bottom: 3px;
}

.contextHelp p {
  margin: 0;
  padding: 0;
}

.contextHelp em {
  font-weight: bold;
  font-style: normal;
}

.contextHelp ul {
  margin: 10px 50px 10px 30px;
}

.contextHelp li {
  font-weight: normal;
  list-style-type: disc;
}

.contextHelp .foot a {
  color: Silver;
  font-size: 12px;
  display: block;
  text-align: right;
  width: 100%;
}

/* This alert is displayed when a user exceeds their plan limits for clients, invoices or staff */
.ExceededTrialLimitAlert {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #000;
	background: #FFE6E6;
	text-align: left;
	padding: 10px 15px 10px 15px;
	border: 2px solid #FF0000;
	width: 80%;
}

.ExceededTrialLimitAlert .GoBackLinkBig {
  margin-top: 15px;
  color: Red;
}


.alert {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  color: #000;
	background: #FFE6E6 url(/Images/exclamation.png) center no-repeat;
	background-position: 15px 8px;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #FF0000;
	border-bottom: 2px solid #FF0000;
}

.alert li, .alert ul {
  font-size: 13px;
  font-weight: normal;
}

.alertOK {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  color: #737373;
	background: #d9f3cd url(/Images/tick.png) center no-repeat; 
	background-position: 15px 8px;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #59ac35;
	border-bottom: 2px solid #59ac35;
  margin-bottom: 30px;
}

.alertOK li, .alertOK ul {
  font-size: 12px;
  font-weight: normal;
}

.alertInfo {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
	background: #aad1ed url(/Images/info.png) center no-repeat; 
	background-position: 15px 8px;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #4596d2;
	border-bottom: 2px solid #4596d2;
  margin-bottom: 30px;
}

.alertInfo li, .alertInfo ul {
  font-size: 12px;
  font-weight: normal;
}



/*****************************************************************************
 TRANSACTION MESSAGES (CLIENT VIEW)
*****************************************************************************/
.transactionOK, .transactionError { padding: 0 30px 10px 30px; }
.transactionOK { border: solid 2px #59ac35; background-color: #d9f3cd; }
.transactionError { border: solid 2px #ff0000; background-color: #ffe6e6; }

  .transactionBody { font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
    font-size: 13px; font-weight: normal; }

    .transactionBody h2 { font-size: 20px; font-weight: bold; border: none; }
    .transactionBody h3 { font-size: 16px; font-weight: bold; border: none; margin-bottom: 0; 
      margin-left: 50px; }
    
    .transactionOK h3 { color: #59ac35; }
    .transactionError h3 { color: Red; }
        
    .transactionBody p { color: Black; margin-top: 0; margin-left: 50px; }
      .transactionBody p em { font-weight: bold; font-style: normal; }



/*****************************************************************************
 BIG BUTTONS SECTION E.g. ADD CLIENT, etc
*****************************************************************************/
a.button {
  float: left;
  background: url(/Images/button.gif);
  display: block;
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: .8em;
  color: #0066CC;
  font-weight: bold;
  height: 30px;
  line-height: 29px;
  margin-bottom: 14px;
  text-decoration: none;
  width: 191px;
}

a:hover.button {
  color: #555555;
}

.add {
  background: url(/Images/add.gif) no-repeat 10px 8px;
  text-indent: 30px;
  display: block;
}

.send {
  background: url(/Images/msg.gif) no-repeat 10px 8px;
  text-indent: 30px;
  display: block;
}



/*****************************************************************************
 SEND LINK - in invoice "view" view
*****************************************************************************/
#sendLink {
  float: left;
  display: block;
  background-color: rgb(181, 212, 254);
  font-weight: bold;
  height: 30px;
  line-height: 29px;
  margin-bottom: 14px;
  padding-left: 5px;
  padding-right: 5px;
}




/*****************************************************************************
 ACTION BUTTONS - TOP OF TABLES (BLUE, SMALL)
*****************************************************************************/
#actionButtons{
  width: 100%;
  height: 32px;
  background-image: url(/Images/toolbar_bg.png);
  overflow: hidden;
}

#actionButtons ul{
  margin: 0;
  padding: 0;
  padding-left: 20px;
  font-size: 13px;
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  list-style-type: none;
}

#actionButtons li{
  display: inline;
  margin: 0;
}

#actionButtons li a{
  float: left;
  display: block;
  text-decoration: underline;
  margin-bottom: 5px;
  margin-right: 10px;
  padding: 8px 8px;
  color: #3a56bc;
  border: none;
  background: none;
}

#actionButtons li a:hover, #actionButtons li.selected a{
  color: #b8b8ef;
  background: #3a56bc;
}



/*****************************************************************************
 ACTION LINKS - TOP OF TABLES ON INVOICE VIEW SCREEN (BLUE, SMALL)
*****************************************************************************/
#actionLinks {
  clear: both;
  width: 100%;
  display: block;
  border: none;
  border-top: solid 1px #dedede;
  border-bottom: solid 1px #dedede;
  background-color: #fafaf2;
  margin-bottom: 10px;
}

#actionLinks a:link, #actionLinks a:visited, #actionLinks a:active, #actionLinks .disabledButton {
  display: inline;
  color: #3f5ea0;
  margin-left: 8px;
  margin-right: 18px;
  font-size: 14px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

#actionLinks a:hover {
  color: #7e8eaf;
}



/*****************************************************************************
 SUB TITLE - Any information below the main H1 title on a page.
*****************************************************************************/
.TitleSubInfo {
  float: left;
  width: 100%;
  display: block;
  margin-bottom: 30px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  color: Gray;
}

.TitleSubInfo strong {
  font-weight: bold;
  color: Black;
}



/*****************************************************************************
 DETAIL TABLE - 2 column table for displaying information in a "View" view.
                e.g. View Client.
*****************************************************************************/
.DetailsTable {
  width: 900px;
  background-color: #eaf3fa;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-size: .8em;
  border: solid 5px #b1c2d3;
}

.DetailsTable .TopRow {
  vertical-align: middle;
  height: 40px;
}

.DetailsTable .LeftColumn, .DetailsTable .RightColumn {
  width: 450px;
  background-color: #eaf3fa;
  vertical-align: top;
}

.DetailsTable p {
  font-weight: bold;  
  color: #3b5998;
  padding-left: 10px;
}

.DetailsTable a {
  color: #3b5998;
}

.DetailsTable ol {
  margin: 0;
  padding-left: 10px;
  padding-bottom: 10px;
  list-style: none;
}



/*****************************************************************************
 SUMMARY TABLE - Table (without sorting, paging) that is used in a "View" view
                 to display data. E.g View Client - display the invoices for
                 the client in a summary table.
*****************************************************************************/
.SummaryTable {
  width: 100%;
  border: none;
  border-top: solid 3px #cccccc;
  border-bottom: solid 1px #cccccc;
  background-color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}

.SummaryTable th {
  font-size: 13px;
  font-weight: bold;
  color: #555555;  
}

.SummaryTable tr {
  vertical-align: top;
}

.SummaryTable td {
  font-size: 13px;
  font-weight: normal;
  color: Black;
}

.SummaryTable tr.even {
  background-color: #ecf6fc;
}



/*****************************************************************************
 EMPTY TABLE - DISPLAY A CENTERED BOX CONTAINING A CREATE BUTTON/LINK
*****************************************************************************/
#emptyTable {
  margin: 30px auto 30px auto;
  padding: 20px;
  width: 80%;
  border: solid 1px yellow;
  background-color: rgb(255, 255, 206);
  text-align: center;
  font-size: 20px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #3b5998;
}



/*****************************************************************************
 TOOLTIPS
*****************************************************************************/
.tooltip {
  border: solid 1px #90ac13; 
	background: #eef4d3;
	color: #6b800d;
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 13px;
	font-weight: bold;
	padding: 4px;
	text-align: center;
	margin-top: 10px;
}



/*****************************************************************************
 DATA ENTRY POPUP (GLOBAL) STYLE
*****************************************************************************/
.dataEntryPopup {
    /*display: none;*/
    /*z-index: 100;*/
}

.dataEntryPopup input, .dataEntryPopup textarea {
    border: 2px solid #b1c2d3;
    font-size: 1.1em;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}


#overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
}



/*****************************************************************************
 AJAX THROBBER STYLE
*****************************************************************************/
#loading {
  display: none;
  background-color: #fff;
  padding: 5px;
  border: solid 1px #cccccc;
  z-index: 100;
  position: fixed;
  left: 50%;
  top: 50%;
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 13px;
  font-weight: bold;
  color: #666666;
  vertical-align: middle;
}



/*****************************************************************************
 TABLE STYLING FOR INFORMATION PRESENTATION E.g. Clients, Invoices lists etc.
*****************************************************************************/
.tableBody {
  width: 100%;
  border: none;
  border-top: solid 1px #cccccc;
}

.tableBody th a {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 13px;
  font-weight: bold;
  color: White;  
}

.tableBody td {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: 13px;
  font-weight: normal;
  color: Black;
  border-bottom: solid 1px #efefef;
}
  
.tableBody .tableLink {
  font-size: 11px;
}

.tableBody tbody tr {
  cursor: pointer;
}



/*****************************************************************************
 ACTVE, ARCHIVED, DELETED TABLE STYLES
*****************************************************************************/
#tableActiveLinks {
  text-align: right;
  display: block;
  padding-top: 5px;
  padding-right: 20px;
  width: 100%;
}

#tableActiveLinks a {  /* non-current folder */
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: .8em;
  color: #777777;
}

.tableActiveLink { /* current folder */
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: .8em;
  color: #777777;
}

.TableFilterLinks {
  font-family: "Lucida Sans Unicode", Myriad, Verdana, Arial, Sans-Serif;
  font-size: .8em;
}

.TableFilterLinks a {
  color: Blue;
}



/*****************************************************************************
 PAGINATION STYLES - TABLE DATA PAGING
*****************************************************************************/
#tablePagination {
  display: block;
  float: right;
  margin: 10px 0px 5px auto;
}

ul                           { border:0; margin:0; padding:0; }
#pagination-digg             { font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
#pagination-digg ul          { border:0; margin:0; padding:0; }
#pagination-digg li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a           { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,
#pagination-digg .next-off   { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,
#pagination-digg .previous a { font-weight:bold; }	
#pagination-digg .active     { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link, 
#pagination-digg a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-digg a:hover     { border:solid 1px #0e509e; }