/* RESET STYLES */

* {
    margin: 0;
    padding: 0;
}
img { border: 0; }

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: bold;
    font-family: Trebuchet, "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}
    
/* Lists */ 
ul, ol, dl, li, dt, dd {
    list-style: none;
}

/* Forms */
form, fieldset {
    border: 0;
}   
legend {
    color: #000;
}
input, textarea, select, button {
    font-size: 120%;
    font-family: "trebuchet ms", arial, sans-serif;
}

/* Tables */
table {
    border-collapse: collapse;
    border: 0;
}
td, th, caption {
    font-size: 100%;
    font-weight: normal;
    text-align: left;
}

/* APPLY STYLES */

/* Global */
body { font-size: 62.5%;  } /*sets fonts so that 1em = 10px (approx) */ 

/* Lists */
ol li {
    list-style-type: decimal;
    margin-left: 2em;
}

/* LAYOUT */

/*Centre the content and make the width 75em so it all scales if text is resized */
body { 
    background-image: url(graphics/backgroundGrid.gif);
}
div#container { 
    text-align: left;
    margin: 0 auto;
    width: 75em;
}
div#large {
    float: left;
    width: 70%;
    padding-top: 3px;
}

/* Banner */
/* Extra div needed to hold the two parts of the banner box as well as the text */
div#banner {
    background: url(graphics/bannerRight.gif) no-repeat 100% 0%;
    height: 125px;
    margin-top: 20px;
    overflow: hidden;   
}
div#bannerText {
    background: url(graphics/bannerLeft.gif) no-repeat 0% 0%;
    height: 125px;  
}
div#banner h1 {
    background: url(graphics/bannerText.gif) no-repeat 50% 50%;
    height: 53px;
    padding-top: 60px;
    text-indent: -1000em;
}

/* Nav */
div#nav {
    float: left;
    width: 100%;
    background: url(graphics/line.gif) no-repeat 100% 100%;
}
div#nav li {
    display: block;
    text-align: center;
    background: url(graphics/tabOrangeR.gif) no-repeat 100% 0%;
    margin-bottom: 1px;
}
div#nav li.nav1 { /* these set the relative widths of the tabs to span across the whole content width */
    float: left;
    width: 15%;
}
div#nav li.nav2 {
    float: left;
    width: 20%; 
}
div#nav li.nav3 {
    float: left;
    width: 30%;
}
div#nav li.nav4 {
    float: left;
    width: 15%;
}
div#nav li.nav5 {
    float: right;
    width: 20%;
    background: url(graphics/tabOrangeLast.gif) no-repeat 100% 0%; /* this one has more space to the right to align with the main content panel */
}
div#nav li a {
    display: block;
    padding: 0.5em;
    margin-bottom: -2px; /*makes the 1px bottom line visible under the graphic */
    background: url(graphics/tabOrangeCnr.gif) no-repeat 0% 0%;
}
div#nav li.nav1 a {
    background: url(graphics/tabOrangeFirstLeft.gif) no-repeat 0% 0%; /* this one has more space to the left to align with the main content panel */
    padding-left: 1.2em; /* this centres the text a little better to compensate for the above */
    margin-bottom: -2px; /*makes the 1px bottom line visible under the graphic */
}
div#nav li.nav5 a {
    padding-right: 1.5em; /* this centres the text a little better to compensate for the different graphic used for the shadow effect */
} 
div#nav li#thisPage a {
    margin-bottom: -1px;
    background: url(graphics/tabLeftCnr.gif) no-repeat 0% 0%;
}
div#nav li#thisPage {
    margin-bottom: -1px;
    background: url(graphics/tabRight.gif) no-repeat 100% 0%;
}
div#nav li#thisPageFirst a {
    margin-bottom: -1px;
    background: url(graphics/tabFirst.gif) no-repeat 0% 0%;
}
div#nav li#thisPageFirst {
    margin-bottom: -1px;
    background: url(graphics/tabRight.gif) no-repeat 100% 0%;
}
div#nav li#thisPageLast a {
    margin-bottom: -1px;
    background: url(graphics/tabLeftCnr.gif) no-repeat 0% 0%;
}
div#nav li#thisPageLast {
    margin-bottom: -1px;
    background: url(graphics/tabLast.gif) no-repeat 100% 0%;
}



/* Content */
div#contentFrame1 {
    float: left;
    width: 100%;
    background: url(graphics/contentPanelRight.gif) no-repeat 100% 100%;
}
div#contentFrame2 {
    background: url(graphics/contentPanelLeft.gif) no-repeat 0% 100%;   
}
div.content {
    padding: 1.5em 6em 6em; /* top, left&right, bottom */
}

/* Hides from IE5-mac \*/
html .content {height: 1%;}
html #sidePanelFrame1 {height: 1%;}
html #sidePanelFrame2 {height: 1%;}
html #sidePanelFrame3 {height: 1%;}
html #sidePanelFrame4 {height: 1%;}
/* End hide from IE5-mac */


/* Side panel */
div#sidePanelFrame1 {
    clear: right;
    float: right;
    width: 28%;
    margin-top: 0;
    background: url(graphics/sideRightTop.png) no-repeat 100% 0%;
}
div#sidePanelFrame2 {
    background: url(graphics/sideRightBottom.png) no-repeat 100% 100%;
}
div#sidePanelFrame3 {   
    background: url(graphics/sideLeftBottom.gif) no-repeat left bottom;
    padding-bottom: 2.5em;
}
div#sidePanelFrame4 {   
    background: url(graphics/sideLeftTop.gif) no-repeat 0% 0%;
}
div#sidePanelFrame1 p.side, p.image {
    text-align: left;
    padding: 0 0.8em;
    margin: 0;
}
div#sidePanelFrame1 p.side_action, h4 {
	text-align: center;
    padding: 0 1em;
    margin-right: 1em;
}
div#sidePanelFrame1 p.image {
    padding-top: 2em;
    margin-left: 0.4em;
}
div#sidePanelFrame1 h3 {
    padding-bottom: 0.6em;
    padding-top: 0.6em;
    margin: 0 2em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
div#sidePanelFrame1 p.btn {
    border-bottom: 1px solid #ccc;
    padding: 0 1em;
    margin-right: 2em;
    margin-left: 2.4em;
}
p.side {
	font-size: 230%;
	font-family: georgia, "times new roman", garamond, serif;
	font-weight: bold;
	font-style: italic;
	color: #786;
}
p.sideTag {
	margin-top: 2em;
	margin-right: 2em;
	text-align: right;
	font-size: 95%;
	padding: 0 0.8em
}
/* Footer */
div#footer {
    clear: both;
    float: left;
    width: 100%;
    padding-top: 0.5em;
    border-top: 1px solid #ccc;
    padding-bottom: 1em;
}
div#footer li.footLeft {
    float: left;
    width: 40%;
    font-family: "trebuchet ms", verdana, arial, sans-serif;
}
div#footer li.footRight {
    float: right;
    text-align: right;
    width: 40%;
    font-family: "trebuchet ms", verdana, arial, sans-serif;
}

/* TYPOGRAPHY */

div#nav li a {
    font-size: 1.2em;
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    color: black;
}
div#nav li#thisPage a, div#nav li#thisPageFirst a, div#nav li#thisPageLast a {
    font-size: 1.2em;
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    color: green;
}
div#nav li a:link {
    color: black;
    text-decoration: none;
}
div#nav li a:visited {
    color: black;
    text-decoration: none;
}
div#nav li a:hover {
    color: maroon;
    text-decoration: underline;
}
div#nav li a:active {
    color: green;
    text-decoration: none;
}
h2 {
    font-size: 2em;
    color: #DF8800; /* Burnt orange */
    padding-bottom: 0.4em;
    padding-top: 0.8em;
}
h3 {
    font-size: 1.8em;
    color: #000; /* Black */
}
h4 {
    font-size: 1.6em;
    color: #00689C; /* Blue */
    padding-bottom: 0.4em;
    padding-top: 0.8em;
    padding-left: 2em;  
}
h5 {
    font-size: 1.4em;
    color: #00689C; /* Blue */
    padding-bottom: 0.4em;
    padding-top: 0.8em;
}
p, dd, dt, ol, ul.general {
    font-size: 1.3em;
    font-family: verdana, helvetica, arial, sans-serif;
    line-height: 1.3;
}
ul.general li{
    list-style-type: disc;
    padding: 0.4em 0 0 0;
    margin-left: 2em;
}
p,  ul.general, ol.general {
    padding-bottom: 1.3em;
}
label {
    font-size: 1.15em;
    font-family: verdana, helvetica, arial, sans-serif;
    line-height: 1.3;
}
fieldset#files p, fieldset#files ol {
    font-size: 1.15em;
    font-family: verdana, helvetica, arial, sans-serif;
    line-height: 1.3;
}
p.drop {
    margin-top: 1.5em;
}
p.faq_list {
	padding-top: 0.4em;
	padding-bottom: 0.2em;
}

/* FORMS */

form {
    margin-top: 1em;
    margin-bottom: 3em;
}
label {
    padding-bottom: 0.2em;
}
option {
    padding: 0.2em 0.4em;
}
div.radioBtn {
    padding: 0.8em;
    background-color: #FFF8F2; /*Pale orange background*/
}
input#submitBtn {
    float: right;
    width: auto;
    margin-top: 1em;
    font-size: 135%;
    padding: 0.2em;
}
form#docSubmit label {
    display: block;
    margin-top: 0.8em;
}
form#docSubmit label.inline {
    display: inline;
}
fieldset {
    margin-bottom: 0.8em;
    padding: 0 0.8em 1.2em 1.3em;
}
fieldset#clientDetails {
    background-color: #FFF8F2; /*Pale orange background*/
}
fieldset#jobInfo {
    background-color: #F2F8FF; /*Pale blue background*/
}
fieldset#files, fieldset#payLogin {
    background-color: #FFF2F8; /*Pale red background*/
}
fieldset#findUs {
    background-color: #F8F2FF; /*Pale purple background*/
}
fieldset#submit {
    background-color: #F2FFF8; /*Pale green background*/
}
fieldset#promo {
    background-color: #F8FFF2; /*Pale background*/
}
fieldset#payLogin label {
    display: block;
    padding-top: 1em;
}
span.formError {
    color: red;
    font-weight: bold;
    padding-left: 2em;
}
body#paymentEntry form {
    margin-top: 3em;
}
.sample {
	margin: -1.5em 0 0.8em 0;
	padding: 1em 0 0 0;;
}
.sample button {
	font-size: 0.9em;
	padding: 0;
}
/* MISC */
span.grn {
    color: green;
}
div#payBtn {
    margin-top: 1em;
    border-top: 1px solid #ccc;
}
div.loginInvalid {
    padding: 0.8em;
    text-align: center;
}
div.loginInvalid h5{
    color: red;
}
/* CLIENT */
div#detail_job {
    background-color: #F2FFF8;
    margin-top: 2em;
}
div#detail_files {
    background-color: #F8F2FF;
    margin-top: 2em;
    padding-bottom: 0.8em;
}
div#detail_client dl, div#detail_job dl, div#detail_files p {
    padding: 0.8em 1.6em;
}
div#detail_files div.fsect p {
    padding: 0.8em;
}
div#detail_client dt, div#detail_job dt, div#detail_files {
    color: #00689C;
    font-size: 100%;
}
span.red {
    color: red;
}
div.fsect {
    margin: 0.8em;
    padding: 0;
    border: 1px solid #ccc;
}
div.fsect input.dnlBtn {
    margin : -1em 0.8em 0 0;
    float: right;
    width: auto;
    font-size: 135%;
    padding: 0.2em;
}
span.grn {
    color: #598B15;
}
span.green {
    color: green;
}
span.orange {
    color: #DF8800; /* Burnt orange */
}

/* TABLE */
table.rates {
    font-size: 1.1em;
    font-family: verdana, helvetica, arial, sans-serif;
    line-height: 1.1;
    border: 1px solid #ccc;
    width: 100%;
    margin-bottom: 1.8em;
}
table.rates caption {
    color: #DF8800; /* Burnt orange */
    margin-top: 1.5em;
    margin-bottom: 0.4em;
}
table.rates td, table.rates th {
    padding: 0.6em 0.8em;
    text-align: center;
}
table.rates td.description {
	width: 60%;
}
table.rates tr.even {
    background-color: #F2F2F2;
}
table.rates th {
    color: #00689C; /* Blue */
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

/* CONTACT FORM */
div#emailForm {
    background-color: #FFF8F2; /*Pale orange background*/
    margin-top: 0.8em;
}
div#emailForm form {
    margin: 1em 2em 0 1.6em;
    padding: 0.4em;
}
div#emailForm label {
    padding-bottom: 0.2em;
}
div#emailForm label {
    display: block;
    margin-top: 0.8em;
}
div#emailForm input.btn {
    margin : 1em 0.8em 1em 0;
    font-size: 135%;
}
p.radioList {
	font-size: 100%;
	padding-bottom: 0.3em;
}
p.radioList input {
	margin-right: 0.1em;
	margin-left: 0.6em;
}

/* CM PAGES */
fieldset.cm_update input, fieldset.cm_delete input, fieldset.cm_new input, form.cm_side input {
	padding: 0.2em 0.8em;
}
fieldset.cm_delete input {
	color: red;
}
fieldset.cm_update {
	float: right;
	width: auto;
	margin-top: 0.4em;
}
fieldset.cm_delete {
	float: right;
	width: auto;
	margin-top: 0.4em;
}
fieldset.cm_new {
	clear: both;
	text-align: center;
	margin-top: 0.4em;
	padding: 0.8em;
	border: 1px solid #00689C;
}
form.cm_side {
	margin-left: 2em;
}
form.cm_side input {
	margin-top: 0.4em;
}
/* LOGIN PAGES */
form#login {
	margin-top: 40px;
	margin-left: 40px;
	width: 60%;
}
form#add {
	margin-top: 20px;
	width: 100%;
}
form#login fieldset {
	background: #C5B2A3;
	padding: 2em;
	border: 1px solid black;
}
form#add fieldset {
	background: #E9C956;
	padding: 1.5em;
	margin-bottom: 1em;
	border: 1px solid black;
}
form#login fieldset input, form#add fieldset input {
	margin-bottom: 1em;
}
h3.login_error {
	color: red;
}