body {
  background:#fff url(../../images/back_gradient.png) repeat-x top left;
  font-family: "Lucida Grande", Tahoma, sans-serif;
  font-size: small;
  text-align:center;
  padding:0;
  margin-top:5px;
  margin-bottom:0;
}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clear {
  clear:both;
}

#body {
  max-width:900px;
  min-width:760px;
  border:1px solid #ccc;
  background:transparent url(../../images/white_90.png) repeat 0% 0%;
  margin:5px auto;
}

.content {
  /*width:754px;*/ width:99.5%;
  max-width:894px;
  min-width:754px;
  margin:2px auto;
  text-align:left;
  padding:0 0 5px 0;
}


h1, h2, h3, h4, h5, p {
  color:#0d285a;
}

h1 {
  font-size:130%;
  font-weight:normal;
  padding:5px;
  margin-bottom:5px;
  margin-top:10px;
}

h2 {
  font-size:110%;
  font-weight:normal;
  padding:5px;
  margin:0 0 5px 0;
}

h3 {
  font-size:105%;
  font-weight:normal;
  padding:5px;
  margin:0 0 5px 0;
}

h4 {
  font-size:95%;
  font-weight:normal;
  padding:5px;
  margin:0 0 5px 0;
}

p {
  padding:5px;
  margin:0;
  color:#404040;
	font-size:90%;
}

p#success {
  color:#f00;
  text-align:right;
  font-size:80%;
}

a {
  color:#3a66bc;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

form {
  color:#404040;
  margin-bottom:0;
}

form fieldset {
  width:90%;
  margin:10px auto 0 auto;
  clear:both;
}

form legend, legend.leg {
  color:#0d285a;
  font-size:90%;
  padding:0 5px 0 0;
}

form ul {
  margin:0;
  padding:0 0 0 5px;
  list-style:none;
  text-align:left;
}

form label {
  width:80px;
  display:block;
  float:left;
  font-size:90%;
  padding-top:4px;
  text-align:left;
}

form .error {
  color:#f00;
  font-size:90%;
}

form hr {
  width:75%;
  text-align:center;
  margin:5px 0;
  border:none;
  color:transparent;
  height:1px;
  border-top:1px dotted #3a66bc;
}

input, select, textarea {
  vertical-align:bottom;
  font-family: "Lucida Grande", Tahoma, sans-serif;
  font-size:110%;
  color:#404040;
}

label {
  width:120px;
  display:block;
  float:left;
  color:#666;
  font-size:90%;
  padding-top:2px;
}

form.form_centred {
  width:32%;
  margin:20px auto;
  text-align:center;
  padding:5px 20px;
}

a.img_link span {
  color:#3a66bc;
  display:block;
  float:none;
  padding:0 10px 0 0;
}
a.img_link span img {
  border:none;
  margin:-1px 10px 0 0;
}


#loggedin {
  width:25%;
  float:right;
}
#loggedin p {
  font-size:80%;
  text-align:right;
  padding:2px 2px 0 0;
  color:#666;
}
#loggedin a {
  color:#666;
  text-decoration:none;
}
#loggedin a:hover {
  color:#666;
  text-decoration:underline;
}


#complaint_sample {
  border:1px solid #ccc;
	overflow-x: hidden;
  overflow-y:scroll;
  overflow:-moz-scrollbars-vertical !important;
  background-color:#fff;
  width:97%;
  margin:10px auto;
  height:90px;
}


table {
  text-align:left;
  margin:0 auto;
  color:#404040;
  font-size:80%;
}

table img {
  border:none;
}

table td.link {
  text-align:center;
}
table td.link a span {
  color:#3a66bc;
  display:block;
  float:none;
  padding:0 10px 0 5px;
}
table td.link a span img {
  border:none;
  margin:3px 4px 0 0;
}

thead.tableHead tr th {
  padding:2px; 
  margin:0;
  background-color:#fff;
  color:#404040;
  border:1px solid #eee;
  font-weight:normal;
}

tbody.scrollContent TR TD {
  padding:0 4px; 
  margin:0;
  line-height:2.2em;
}
tbody.scrollContent TR.normalRow TD {
  background-color:#f3f5f7;
}
tbody.scrollContent TR.alternateRow TD {
	background-color:#dce0e7; /*#020c99;*/
}

.trans_div {
	background:transparent url(../../images/white_90.png) repeat 0% 0%;
	border:1px solid #eee;
}

table#customer_address {
  font-size:90%;
}
table#customer_address tbody tr td {
  border:1px solid #eee;
  padding:2px;
  vertical-align:top;
}
table#customer_address tbody tr td h4 {
  font-size:110%;
  font-weight:normal;
}
table#customer_address tbody tr td#contactmethod {
  /*border-color:#3a66bc;*/
  background-color:#ffffe6;
}

table.status {
  margin:0 auto;
  border:1px solid #eee;
  font-size:80%;
  /*background:transparent url(../../images/white_90.png) repeat 0% 0%;*/
}

table.leftal {
  margin:0 auto;
  border:1px solid #eee;
  font-size:80%;
  text-align: left;
  /*background:transparent url(../../images/white_90.png) repeat 0% 0%;*/
}

table.status thead tr th {
  border:1px solid #eee;
  text-align:center;
  background-color:#496879;
  color:#fff;
  font-weight:normal;
  line-height:2;
}

table.status tbody tr {
  background:transparent url(../../images/white_90.png) repeat 0% 0%;
}

table.status tbody tr td {
  border-bottom:1px solid #eee;
  border-top:1px solid #eee;
  line-height:2.4;
  padding:2px 4px 2px 4px;
}
table.status tbody tr.spacer td {
  border:none;
  line-height:1.2;
  background:none;
}

table.status td {
  font-size:100%;
  text-align:center;
  vertical-align:center;
}
table.status td img {
  vertical-align:middle;
}

table.status td span {
  color:#ccc;
}

table.status td a span {
  color:#3a66bc;
  display:block;
  float:none;
  padding:0 10px 0 5px;
}
table.status td a span img {
  border:none;
  margin:3px 4px 0 0;
}

table.status td.done {
  background:transparent url('../../images/done_back.png') repeat top left;
  /* #78e178 */
}

table.status td.notdone {
  background:transparent url('../../images/notdone_back.png') repeat top left;
  /* #e17878 */
}

table.status td.late {
  background:transparent url('../../images/late_back.png') repeat top left;
  /* #78e178 */
}

table.status td.notdonelate {
  background:transparent url('../../images/status_close.png') repeat top left;
  /* #e17878 */
}

table.status td.status_late {
  background:transparent url('../../images/status_late.png') repeat top left;
}
table.status td.status_close {
  background:transparent url('../../images/status_close.png') repeat top left;
}
table.status td.status_7days {
  background:transparent url('../../images/status_7days.png') repeat top left;
}

table.status tr.highlight {
  background-color:#ff0;
  cursor:pointer;
}


table#notes {
  margin:0 auto;
  font-size:100%;
}
table#notes tr {
  vertical-align:top;
}
table#notes tr td {
  width:50%;
}

table#notes tr td div p {
  margin-bottom:10px;
}
table#notes tr td div p span.note_creator {
  display:block;
  float:none;
  padding:0 10px 0 0;
  font-size:90%;
  margin-bottom:-10px;
  color:#666;
}
table#notes tr td div p span.note_creator img {
  border:none;
  margin:0 10px 0 0;
}
table#notes tr td div {
	border:1px solid #ccc;
	overflow-x: hidden;
  overflow-y:scroll;
  overflow:-moz-scrollbars-vertical !important;
}
table#notes tr td div#internal {
	height:404px;
}

table#notes tr td div#published {
	height:183px;
}
table#notes tr td div#pending {
	height:184px;
}


#navigation_bar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
padding-left:2px;
background-image:url(../../images/navigation/back2.png);
background-repeat:repeat-x;
width:100%;
}

#navigation_bar ul {
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0;
/*
width:752px;
padding-left:2px;*/

}

#navigation_bar li {
display:inline;
padding:0;
}


#navigation_bar a {
color:#FFF; /* need because it will use default link color */
float:left;
padding:0 3px 0 3px; /* left 3 px because of left.png image */ 
text-decoration:none;
}

#navigation_bar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}

#navigation_bar a span img {
border:none;
margin:8px 4px 0 0;
}

/* show picture when mouse over link */
#navigation_bar a:hover{
background: url(../../images/navigation/left.png) no-repeat left center;
}

#navigation_bar a:hover span {
background:url(../../images/navigation/right.png) no-repeat right center;
}

#navigation_bar a.right {
	float:right; /* for help button - just add class "right" ->  <a class="right"... */
}



/* BUTTONS */

#form_submit {
	text-align:right;
	padding-bottom:0;
}

button { 
  border:0; 
  cursor:pointer; 
  padding:0 22px 0 0; 
  text-align:center;
}
button span {
  border:0;
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 26px; 
  font:normal 12px 'Trebuchet MS','Arial';
}

/*blue buttons*/
button.submitBtn2 { 
  height: 52px;
  background:url(../../images/button/right.png) right no-repeat; 
}

button.submitBtn2 span { 
  height:50px; 
  line-height:50px;
  background:url(../../images/button/left.png) left no-repeat;
  color:#fff;
}

button.submitBtn { 
  height: 51px;
  background:url(../../images/button/right.png) right no-repeat; 
}

button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../../images/button/left.png) left no-repeat;
  color:#fff;
}

button.submitBtn2 span img {
	padding:0 5 0 0;
	vertical-align:middle;
}

button.submitBtn span img {
	padding:0 5 0 0;
	vertical-align:middle;
}

button.submitBtn:hover {
	background:url(../../images/button/right_over.png) right no-repeat; 
}
button.submitBtn:hover span {
	background:url(../../images/button/left_over.png) left no-repeat; 
}


/*red buttons*/
button.submitBtnRed { 
  background:url(../../images/button/red_right.png) right no-repeat; 
}
button.submitBtnRed span { 
  height:50px; 
  line-height:50px;
  background:url(../../images/button/red_left.png) left no-repeat;
  color:#fff; 
}
button.submitBtnRed span img {
	padding:0 5px 0 0;
	vertical-align:middle;
}

button.submitBtnRed:hover {
	background:url(../../images/button/red_right_over.png) right no-repeat; 
}
button.submitBtnRed:hover span {
	background:url(../../images/button/red_left_over.png) left no-repeat; 
}



button.backBtn { 
  background:url(../../images/button/faded_right.png) right no-repeat; 
}
button.backBtn span { 
  background:url(../../images/button/faded_left.png) left no-repeat;
}

button.backBtn:hover {
	background:url(../../images/button/faded_right_over.png) right no-repeat; 
}
button.backBtn:hover span {
	background:url(../../images/button/faded_left_over.png) left no-repeat; 
}



/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0 0 0;
 border-bottom: 1px solid #ccc;
 font: bold 90% Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 margin: 0 5px 0 0;
border:1px solid #ccc;
 border-bottom: none;
 text-decoration: none;
 padding:5px 15px 4px 15px;
 line-height:1.8;
 font-size:90%;
}

ul.tabbernav li a:link { color: #3a66bc;  }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 text-decoration:underline;
}

ul.tabbernav li.tabberactive a
{
 color:#000979;
 background:#fff;
}


/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 background:transparent url(../../images/white_90.png) repeat 0% 0%;
border:1px solid #ccc;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}




.note_frame {
  width:100%;
  max-width:900px;
  min-width:760px;
  height:175px;
  border:1px solid #ccc;
  background:transparent url(../../images/white_90.png) repeat 0% 0%;
  display:none;
}


table.date_picker {
}

table.date_picker tr td {
  text-align:center;
  font-size:110%;
  background-color:#fff;
  border:1px solid #ccc;
}
table.date_picker tr td.prev {
  text-align:right;
  background-color:transparent;
  border:none;
}
table.date_picker tr td.next {
  text-align:left;
  background-color:transparent;
  border:none;
}
table.date_picker tr td img {
  border:none;
}