/* For making buttons: http://superdit.com/2011/12/08/20-css-button-examples-and-tutorials-resource/ */
html,body,div,p,input,textarea,a,ul,li,h1,h2,h3,h4,pre,span,button,table,td,tr,tbody,thead {
  margin:0;
  padding:0;
  font-size:100%;
  box-sizing: border-box;
}
html {
  font-size: 12pt;
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  font-weight: 300;
}
body {
  background-color:#ffffff;
  color:#222;
}
body.login {
}
textarea {
  resize: none;
}
input[type=text], input[type=password], textarea {
  box-sizing: border-box;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  /*box-shadow: 0 0 5px rgba(81, 203, 238, 1);*/
  box-shadow: 0 0 5px rgba(126, 173, 34, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  /*border: 1px solid rgba(81, 203, 238, 1);*/
  border: 1px solid rgba(126, 173, 34, 1);
}
.searchbar input[type=text]:focus {
  box-shadow: 0 0 0;
  margin:0;
}
h1 {
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  margin-bottom:16pt;
  font-size:18pt;
}
h2 {
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  font-size:16pt;
}
h3 {
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  font-size:15pt;
  font-weight:bold;
  color:#7ead22;
}
h3.subheading {
  margin-top:10px;
}
a, a:hover, a:visited {
  color:#FFF;
  cursor:pointer;  
}
button {
  border:1px solid #7ead22;
  border-radius:2px;
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  font-weight:bold;
  font-size:11pt;
  letter-spacing:1px;
  text-shadow: 0px 1px 1px #555;
  padding:1px 3px 1px 3px;
  background-color:#7ead22;
  color:#fff;
  margin-right:3px;
}
button:hover {
  background-color:#ffffff;
  color:#7ead22;
  border:1pt solid #7ead22;
  cursor:pointer;
  text-shadow: 0px 0px 0px #555;
}
h4 {
  color:#7ead22;
  margin:3px;
}
p,ul,pre {
  margin-bottom:10px;
}
a {
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
table {
  border:0;
}
th,td {
  margin:0px;
  padding:4px;
}
#container {
  width:1180px;
  margin:auto;
}
#header {

  font-size:10pt;
  margin:0;
  padding:0;
  height:120px;
  color:#777;
  border-bottom:1pt solid #ccc;
}
#header .logo {
  color:#7ead22;
  height:90px;
  font-size:30pt;
  font-weight:bold;
  text-shadow: 0px 1px 1px #000;
  margin-left:0px;
  padding:1px;
}
#header img {
  padding:1px;
  height:88px;
}
.searchbar th {
  text-align:left;
}
.sort:hover {
  cursor:pointer;
}
#header #menubar {
  clear:both;
  text-align:left;
  padding-top:0px;
}
#header #userbar {
  float:right;
  font-weight:bold;
  text-align:right;
  padding-right:5px;
  padding-top:5px;
  width:350px;
  font-size:11pt;
}
#header #userbar a {
  color:#777;
}
#header #userbar span.username {
  color:#7ead22;
  text-shadow:0px 1px 1px #555;  
  letter-spacing:0.1em;
}
#header ul {
  margin-top:5px;
  text-align:right;
  margin-right:10px;
  font-weight:bold;
}
#header #staffbar li {
  list-style:none;
  display:inline;
}
#content {
  clear:both;
  padding-top:0px;
  border-top:0;
  margin-bottom:10px;
  margin-top:3px;
  min-height:400px;
  color:#000;
}
#login {
  min-height:210px;
  width:400px;
  margin:auto;
  margin-top:50px;
  background-color:#eee;
  padding:10px;
  color:#7ead22;
  border-radius:3px;
}
#login a {
  color:#222;
}
#login input {
  width:220px;
}
#authorised_access {
  text-align:center;
  font-weight:bold;
  font-size:0.85em;
  margin-top:15px;
  color:#aaa;
  letter-spacing:0.1em;
}
#footer {
  height:130px;
  clear:left;
  text-align:center;
  color:#777;
  font-size: 0.90em;
  margin-top:20px;
  padding:10px;
}
#footer div {
  text-align:center;
}
#footer div a {
  color:#fff;
}
table.section {
  width:100%;
}
table.section .column {
  width:200px;
  background-color:#eeeeee;
}
table.section .field {
  background-color:#eeeeee;
}
table.twocolumns {
  width:600px;
}
table.twocolumns .column {
  width:200px;
  background-color:#eeeeee;
}
div.rightcolumn {
  float:right;
  width:340px;
}
table.fourcolumns {
  width:100%;
}
table.fourcolumns .column {
  width:100px;
  background-color:#eeeeee;
}
table.fourcolumns .field {
  width:300px;
}
table.fourcolumns .narrowfield {
  width:150px;
}
table.results td {
  padding:10px;
}
table.grid {
  width:100%;
  font-size:95%;
  border-collapse: collapse;
  border-spacing: 0;
}
table.grid th {
  border:1px solid #ddd;
  padding:2px;
  color:#7ead22;
  vertical-align:bottom;
  text-align:left;
  font-family: 'Roboto Condensed', sans-serif;
}
table.grid .searchbar th {
}
table.grid tr:hover td {
  background-color:#f9f9f9;
  cursor:pointer;
}
table.grid tr.disabled:hover td {
  background-color:#eeeeee;
  cursor:default;
}
table.grid tr select {
  width:120px;
}
table.grid tr input {
  margin:0;
}
table.grid td {
  background-color:#eeeeee;
  border:1px solid #fff;
}
table.grid th.id, table.grid td.id {
  text-align:right;
  margin-right:5px;
  width:40px;
}
table.grid th.date, table.grid td.date {
  text-align:center;
  white-space:nowrap;
}
table.grid th.datetime, table.grid td.datetime {
  text-align:center;
  white-space:nowrap;
  width:140px;
}
.dboard {
  width:290px;
  font-size:95%;
  float:left;
  margin-right:3px;
  margin-bottom:5px;
}
.dboard h3 {
  text-decoration:underline;
}
.dboard h3 img {
  width:15px;
  margin-left:5px;
  vertical-align:middle;
}
.dboard .inner {
  overflow-y:auto;
  height:300px;
}
.dboard .row, .dboard .rowbasic {
  clear:left;
}
.dboard .row:hover {
  background-color:#eeeeee;
  cursor:pointer;
}
.dboard .row .title, .dboard .rowbasic .title {
  color:#7ead22;
  font-weight:500;
}
.dboard .piechart {
  width:280px;
  height:280px;
  border:0;
  color:black;
  font-size:10pt;
  font-weight:bold;
}
input.date {
  width:80px;
}
input.id {
  width:50px;
  text-align:right;
}
select, input, textarea {
  cursor:pointer;
  font-size:11pt;
  font-family: 'Roboto Condensed', Arial, Geneva, sans-serif;
  font-weight:300;
}
input[type=password] {
  font-family: Arial;
}

.input {
  width:200px;
}

.autocomplete-w1 { background:url(../images/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; font-size:10pt; }
.autocomplete .selected { background:#F0F0F0; font-weight:bold; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

/* !Navigation
--------------------- */
ul#nav {
  font-family:'Roboto Condensed', Arial, Geneva, sans-serif;
  font-size:11pt;
  line-height:1;
  list-style:none;
  margin:0;
  padding:0;
  overflow: hidden;
  z-index:99999;
}
/* -- First Level -- */
#nav li {
  list-style:none;
  float:left;
  margin:0;
  border-right:0px solid #666;
  z-index:99999;
}
#nav li a {
  color:#7ead22;
  display:block;
  padding:8px 9px 5px 9px;
  text-decoration:none;
}
#nav li a:hover {
  color:#fff;
  background-color:#7ead22;
}
#nav li a.active {
  font-weight:bold;
}
#nav li a.menuactive {
  color:#fff;
  background-color:#7ead22;  
}
#nav li a.menuactive:hover {
  color:#fff;
}
#nav li a.permanent {
  color:#555;
  background-color:#7ead22;  
}
#nav li a.permanent:hover {
  color:#fff;
}
/* -- Second Level -- */
#nav li.hover,
#nav li:hover {
  position:static;
}
#nav li ul {
  font-weight:300;
  border:1px solid #ccc;
  border-top-color:#7ead22;
  left:-999em;
  position:absolute;
  background-color:white;
  margin:0;
  z-index:99999;
}
#nav li:hover ul,
#nav li.hover ul {
  left:auto;
}
#nav li ul li {
  text-align:left;
  float:none;
}
#nav li ul li a {
  color:#000;
  padding:0.5em 1em;
}
#nav li ul li a:hover {
  color:#222;
  background-color:#7ead22;
}
ul#secondary-nav {
  list-style:none;
  width:210px;
}
#secondary-nav a {
  text-decoration:none;
  font-weight:bold;
  font-size:smaller;
  color:#7ead22;
}
#secondary-nav h2 {
  padding-top:5px;
  font-weight:bold;
  height:30px;
}
#secondary-nav li {
  width:100%;
  display: block;
  padding-top:5px;
  padding-bottom:1px;
  padding-left:5px;
  padding-right:5px;
}
#secondary-nav li a:hover {
  text-decoration:underline;
  color:#555;
}
#secondary-nav li ul {
  list-style: normal;
}
#secondary-nav li ul li {
  width:200px;
  margin-bottom: 2px;
}
#librarycontent {
  padding:0;
  vertical-align:top;
}
#librarycontent ul {
  list-style:none;
}
#librarycontent a {
  color:#7ead22;
  text-decoration:underline;
}

#main {
  margin-left:240px;
  width:900px;
}
#main li {
  margin-left:30px;
}
#main h1.title {
  color:#339ef2;
  margin:0;
  padding-top:5px;
  margin-left:10px;
  height:30px;
  font-weight:bold;
  font: 15pt Arial, Geneva;
  margin-bottom:0;
}
#main #breadcrumb {
  margin-left:10px;
  color:#aaa;
  font-size:9pt;
}
#main #breadcrumb a {
  color:#aaa;
}
#main #breadcrumb a:visited {
  color:#aaa;
}
#main #maincontent {
  margin:10px;
  height:100%;
  padding-bottom:10px;
}
input.error, textarea.error, select.error {
  border:1px solid red;
}
div.error, span.error {
  color:red;
  padding:5px;
}
div.error p {
  margin:10px 0;
}
.success {
  color:green;
}
.message {
  color:#000;
}
td.error {
  color:red;
}
.errorborder {
  border:1px solid red;
}
.errorback {
  background-color:#edc;
}
#calendar {
  padding:0;
  margin:0;
  color:#000;
}
#calendar a {
  text-decoration:none;
  color:#000;
}
.calendar {
  font-size:9pt;
  float:left;
  margin-right:25px;
}
#legend {
  margin-left:0;
  border:1px solid #555;
  font-size:9pt;
  border-collapse: collapse;
  border-spacing: 0;
  height:185px;
  margin-top:-15px;
}
#legend .title {
  font-size:9pt;
  letter-spacing:1.1;
  font-weight:bold;
}
#legend td, #legend th {
  border:1px solid #555;
  font-weight:normal;
  margin:0;
  padding:0px 5px 0px 5px;
  width:120px;
}
#legend td {
  width:100px;
}
.red {
  background-color:red;
  color:red;
  font-weight:bold;
}
div.statusCompliant, #legend .statusCompliant {
  background-color:green !important;
  color:white !important;
}
div.statusPartiallyCompliant, #legend .statusPartiallyCompliant {
  background-color:#ff9900 !important;
}
div.statusNotCompliant, #legend .statusNotCompliant {
  background-color:yellow !important;
}
div.statusNotYetDue {
/*  background-color:#0099ff !important;*/
}
#legend .statusNotYetDue {
    background-color:#0099ff !important;
}
div.statusOverdue, #legend .statusOverdue {
  background-color:#ff2222 !important;
  color:white !important;
}

.grid td.statusCompliant {
  background-color:green !important;
  color:white !important;
}
.grid td.statusPartiallyCompliant {
  background-color:#ff9900 !important;
}
.grid td.statusNotCompliant {
  background-color:yellow !important;
}
.grid td.statusNotYetDue {
}
.grid td.statusOverdue {
  background-color:#ff2222 !important;
  color:white !important;
}

span.statusCompliant {
  color:green;
}
span.statusPartiallyCompliant {
  color:#ff9900;
}
span.statusNotCompliant {
  color:yellow;
}
span.statusNotYetDue {
}
span.statusOverdue {
  color:#ff2222;
}

.statusCompliant a {
  background-color:green !important;
  background-image:none !important;
  color:white !important;
}
.statusPartiallyCompliant a {
  background-color:#ff9900 !important;
  background-image:none !important;
  color:white !important;
}
.statusNotCompliant a {
  background-color:yellow !important;
  background-image:none !important;
  color:#555 !important;
}
.statusNotYetDue a {
  color:#0099ff !important;
  font-weight:bold !important;
}
.statusOverdue a {
  background-color:#ff2222 !important;
  background-image:none !important;
  color:white !important;
}
#submenu {
  margin-top:0px;
}
#submenu .active {
  color:#ffffff;
}
#submenu button {
  color:#555;
  background-color:#7ead22;
  border:0;
  font-weight:600;
  font-size:10pt;
  letter-spacing:1pt;
  text-shadow: 0px 0px 0px #555;
  padding:4px 3px 4px 3px;
}
#submenu button:hover {
  color:#ffffff;
}
div.preformatted {
  border:1px solid #aaa;
  padding:3px;
}
div.readonlytextarea {
  width:100%;
  height:100px;
  border:1px solid #aaa;
  overflow-y:auto;
}
#assessment_results_report div {
  margin-top:15px;
}
#assessment_results_report table {
  margin-top:15px;
}
a.link {
  color:#7ead22;
  font-weight:400;
}
.notes {
  height:700px;
  overflow-y:auto;
}
.notes div.list {   
  margin-right:10px;
  margin-bottom:10px;
}
.notes div.list div.info {
  font-weight:400;
}
.notes div.list div.note {
  background-color:#eeeeee;
  padding-bottom:20px;
  padding:3px;
}
.emphatic {
  color:#7ead22;
  font-weight:bold;
}
tr.filled {
  background-color:#eeeeee;
}
#clientapplication {
  width:1000px;
}
#clientapplication td.column {
  width:250px;
}
#clientapplication td.info {
  background-color:#eeeeee;
  padding:10px;
}
h3.pagetitle {
  margin-bottom:20px;
}
input.searchinput {
  background:white url(/static/images/find.png) left no-repeat;
  padding-left:19px;
  margin-top:0;
}
input.searchinput:focus {
  width:150px;
  padding-left:19px;
  margin-top:0;
}
#sitesearch {
  float:right;
  margin-top:0;
  width:100px;
}
#sitesearch:focus {
  width:150px;
  padding-left:19px;
  margin-top:0;
}
h3 img.refresh, img.refresh {
  width:13px;
}
#login.deadlines {
  color:black;
  height:auto;
}
.box {
  background-color:#e0e0e0;
  border-radius:3px;
  padding:15px;
  margin-bottom:10px;
}
.box ul {
  margin-left:40px;
}
.box label {
  display:inline-block;
  width:85px;
  color:#444;
  height:25px;
}
button[disabled] {
  border:1px solid #999;
  background-color:#ddd;
  color:#999;
  text-shadow:0px;
}
button[disabled]:hover {
  border:1px solid #999;
  background-color:#ddd;
  color:#999;
  cursor:default;
}
a.action {
  color:purple;
  font-size:85%;
  margin-left:10px;
  text-decoration:underline;
}
div.finished {
  font-weight:normal;
  color:black;
  border-radius:3px;
  padding:5px;
}
div.finished p {
  margin:10px 0;
}
button.selected {
  background-color:#fbfbfb;
  color:#7ead22;
  border:1px solid #7ead22;
  cursor:pointer;
  text-shadow: 0px 0px 0px #555;
  text-decoration: underline;
}