/* <![CDATA[ */
body {
  margin: 0;
  padding: 0;
  background-image: url("/images/logos/washed.png");
  background-position: 300px 125px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: sans-serif;
}

body.frontpage {
  background-image: none;
  background: #A0CCC4;
}

/* Do header and sidebar heights in pixels or you'll go crazy and it
will always look shit. Header height: 120px, Sidebar width: 180px; */

#content {
/*   position: absolute; */
/*   top: 120px; */
/*   left: 180px; */
  position: relative;
  margin-top: 120px;
  margin-left: 180px;
  margin-right: 0;
  margin-bottom: 5px;
  /* FIXME: broken */
  background-color: transparent;
  overflow: auto;
  /*\*/
  /* Mac IE5 shouldn't see the left and left margin declarations (which
     are for other IEs' benefit) since it has a bug where contained
     elements following the first child are indented by the same amount -
     modern browers of course can center using auto margins, but they
     understand the left center, negative margin shift too */
}

/* header is absolute and should contain three relative sub-boxes:
     - heading: Western/Your Hospital That Cares
     - searchbox: Google search input
     - menubar: menu buttons (specified as absolute))
   */

#header {
  position: absolute;
  top: 0;
  left: 180px;
  width: 100%;
  font-size: smaller;
  height: 120px;
  background-color: #A0CCC4;
}

#heading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 100px;
  height: 100px;
  width: 340px;
}

#searchbox {
  position: absolute;  /* FIXME: Opera needs fixed */
  top: 0;
  bottom: 100px;
  left: 310px;
  width: 300px;
  margin: 0 0 0 0; /* top right bottom left */
  padding: 0;
  overflow: visible;
}

#menubar {
  position: absolute;
  top: 100px;
  bottom: 120px;
  height: 20px;
  left: 180px;
}

/* #footer { */
/*   position: absolute; */ /* Operas 5 + 6, need this to be relative */
/*   bottom: 0; */
/*   width: 100%; */
/*   height: 1em; */
/*   text-align: center; */
/* } */

#sidebartop {
  position: absolute;
  background-color: #A0CCC4;
  top: 0;
  padding-top: 0;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  width: 180px;
  z-index: 2;
}  

#sidebar {
  position: absolute; /* Operas 5 + 6, need this to be relative */
  background-color: #A0CCC4;
  top: 0;
  padding-top: 140px;
  overflow: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 180px;
  z-index: 1;
}

/* Exclude fixed from Mac IE5 if you want working mouseover stuff */
body>#header, body>#sidebartop, body>#sidebar, body>#menubar, body>#searchbox, body>#footer {
  position: fixed;
}

/* Exclude Mac IE5 from fixed */

/* ]]> */

@media print {
  #header, #heading, #sidebartop, #searchbox, #menubar, #sidebar {
    display: none;
  }
  #content {
    margin: 1em;
  }
}

/* settings for appearance alone */
body {
  background-color: transparent;
  color: #004F6D;
}

#header {
  color: #004F6D;
  background: #A0CCC4;
}

#footer {
  background: #A0CCC4;
}

/* convenience div for padding inside positioned divs */
div.paddingwrap {
  margin: 0 4% 0 4%; /* top right bottom left */
  padding: 1em;
}

/* p, h1, h2, h4 { */
/*   margin: 0; */
/*   padding: 0; */
/* } */

img.logo {
  margin: -5px 0 -5px 0;
  border-style: none;
}

img.centre {
  border-style: solid;
  border-color: gray black black gray;
  text-align: center; /* IE */
  margin: 10px 0 10px -30px; /* top right bottom left */
  padding: 0;
}  

img.left {
  float: left;
  clear: right;
  border-style: solid;
  border-color: gray black black gray;
  margin: 10px 40px 10px 0; /* top right bottom left */
}

img.right {
  float: right;
  clear: left;
  border-style: solid;
  border-color: gray black black gray;
  margin: 10px 0 10px 40px; /* top right bottom left */
}

img.leftsmall {
  float: left;
  clear: right;
  width: 100px;
  border-style: solid;
  border-color: gray black black gray;
  margin: 10px 40px 10px 0; /* top right bottom left */
}

img.rightsmall {
  float: right;
  clear: left;
  width: 100px;
  border-style: solid;
  border-color: gray black black gray;
  margin: 10px 0 10px 40px; /* top right bottom left */
}

img.leftnoborder {
  float: left;
  clear: right;
  border-style: none;
  margin: 10px 40px 10px 0; /* top right bottom left */
}

img.rightnoborder {
  float: right;
  clear: left;
  border-style: none;
  margin: 10px 0 10px 40px; /* top right bottom left */
}

img.onsite { /* denotes onsite doctor. Push down */
  margin-bottom: -5px;
}

table.frontpage {
  width: 550px;
  background: #A0CCC4;
}

table.frontpage td {
  padding: 8px;
  font-size: 18px;
}

h1, h2 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Verdant, Tahoma, Arial, sans-serif;
}

h1.sidebar {
  /* fixed font size because we're in a fixed spot */
  font-size: 20px;
  letter-spacing: 8px;
  margin: 5px 5px 0px 5px; /* top right bottom left */
}

div.sidebarbox {
  background-color: #004F6D;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  display: block;
/*   width: 120px; */
  height: 4em;
  padding: 1px;
  margin: 0 auto 0 auto; /* top right bottom left */
  clear: left;
  width: 80%;  /* FIXME: ??? */
}

div.sidebarbox p {
  padding: 0.4em 0 0.2em 0;
  margin: 0.2em 0 0.2em 0;
}

div.sidebarbox a {
  color: #FF99FF;
}
  
div.sidebarbox a:hover {
  color: #fff;
}
  
/* p.sidebarbox a:visited { */
/*   color: #A0CCC4; */
/* } */
  

img.sidebar {
  border-style: none;
  margin: 5px 40px 5px 40px; /* top right bottom left */
}

h2.sidebar {
  margin: 0px 5px 5px 5px; /* top right bottom left */
  font-size: 14px;
  font-weight: normal;
}

input.search {
  background-color: #A0CCC4;
  width: 5em;
}

a.loosebutton {
  margin: 0 10px 0 0; /* top right bottom left */
  border-style: none;
}

a.loosebutton img {
  border-style: none;
}

input.searchbutton {
  /* padding-top: 5px; */
}

span.field {
/*   text-decoration: underline; */
  font-weight: bold;
/*   font-size: smaller; */
}

table.form {

}

table.form tbody tr td {
  padding: 5px 0 5px 20px;
}

span.formnote {
  font-size: smaller;
}

ol.form {
  list-style-type: lower-latin;
}

ol.form li {
  margin-bottom: 0.5em;
}

textarea:focus, select:focus, input.feedback:focus {
  background: #A0CCC4;
  color: #004F6D;
  border-style: solid;
  border-width: 1px;
  border-color: black gray gray black;
}

textarea, select, input {
  color: #004F6D;
}

p.yesno {
  text-align: center;
  font-weight: bold;
  font-size: smaller;
  width: 8em;
  border-style: solid;
  border-width: 1px;
  border-color: black gray gray black;
  background: #A0CCC4;
  color: #004F6D;
}

p.checkbox {
  padding-left: 5em;
  font-size: smaller;
  width: 25em;
  border-style: solid;
  border-width: 1px;
  border-color: black gray gray black;
  background: #A0CCC4;
  color: #004F6D;
}

input.submit {
  background: #A0CCC4;
  color: #004F6D;
}

input.google {
  background: #eee;
  color: #004F6D;
}

ul.fields li {
  margin-bottom: 0.5em;
}

ul.hotels {
  list-style-type: none;
}

ul.hotels li {
  margin-bottom: 0;
}

table.buttons {
  margin: 20px 0 10px 20px;
}

table.buttons tbody tr {
  margin: 10px 30px 10px 20px;
}

td.buttontext {
/*   padding: 0 0 0 40px; */
/*   text-indent: 40px; */
  margin: 10px 30px 10px 20px;
  font-size: smaller;
}

span.compulsory {
  vertical-align: middle;
  color: red;
  font-weight: bold;
  font-size: larger;
}

input.feedback {
  padding: 5px 20px 0 0;
}

span.surname {
  text-transform: uppercase;
  font-weight: bold;
}

ul.specialists li {
  margin-bottom: 1em;
}

#content p {
  margin: 0.75em 0 0 0 ; /* top right bottom left */
  padding: 0;
}

ol {
  /* margin: 0 0 2em 1em; */ /* top right bottom left */
}

code {
  display: block;
  background-color: #dddddd;
}

blockquote {
  font-style: italic;
}

table.kitchen {
  border: thick solid #A0CCC4;
  border-collapse: collapse;
  margin: 1em 0 0 0; /* top right bottom left */
  width: 100%;
}

table.kitchen th {
  background-color: #A0CCC4;
  font-size: larger;
  padding-bottom: 0.5em;
}

table.kitchen td {
  padding: 0.5em 1em 0em 1em; /* top right bottom left */
  border: 0;
  border-right: thick solid #A0CCC4;
  padding-bottom: 0.5em;
}

table.kitchen tr.alt {
  background-color: #A0CCC4;
}

td.google {
  padding: 0;
  margin: -10px 0 0 0;
}

input.radio {
  margin: -10px 0 0 0;
  padding: 0;
}

a.pagebutton img {
  border-style: none;
}

table.topbuttons {
  position: absolute;
  top: 60px;
  left: 0;
  margin: 0; /* top right bottom left */
  padding: 0;
  border-style: none;
}

p.bigside {
  margin: 50px 5px 5px 5px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.1em;
}

p.copyright {
  text-align: center;
  font-size: xx-small;
  font-family: Arial, sans-serif;
}

em {
  font-weight: bold;
}

em.two {
  font-weight: normal;
  text-decoration: underline;
}

table.logos {
  margin: 1em 10% 0 10%;
  border: 3px solid #004F6D;
  background-color: #A0CCC4;
  border-collapse: collapse;
}

table.logos td {
  font-weight: bold;
  text-align: center;
  margin: 0 3em 0 3em;
  padding: 0 1em 0.2em 1em;
}

table.logos img {
  margin-top: 0.5em;
  border-style: none;
}

div.bigquote {
  width: 320px;
  font-size: 24px;
}

div.medquote {
  width: 300px;
  font-size: 18px;
}

ul.contacts {
  list-style-type: none;
}

p.address {
  white-space: pre;
}

hr {
  color: #004F6D;
  background-color: #004F6D;
  height: 5px;
  width: 65%;
  margin: 57px auto 57px auto; /* top right bottom left */
}

.clear {
  clear: both;
}

h3 {
  margin: 1em 0 0 0; /* top right bottom left */
}

p.end {
  margin-bottom: 100%;
}

p.padded {
  padding: 1em;
}

p.quote {
  margin: 5px 10px 0 10px; /* top right bottom left */
  width: 135px;
  font-style: italic;
}

p.midquote {
  font-size: larger;
  text-align: center;
}

a.anchor { /* to make anchor links go to top of div rather than top of page */
  top: 120px;
}

.anchor {
  font-weight: bold;
}

ul.links li {
  width: 100%;
}

a.small {
  text-align: right;
  font-size: smaller;
}

div.FIXME {
  padding: 1em;
}

.FIXME {
  color: red;
  font-size: 12px;
  line-height: 13px;
  padding-left: 1em;
  padding-right: 1em;
}

/* Begin CSS Code for Horizontal Dropdown/Popout Menu */

#menu{
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
}

#menu a, #menu h2{
  display: block;
  font: bold medium arial,helvetica,sans-serif;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #888 #555 #bbb; /* top right bottom left */
  white-space: nowrap;
  text-align: center;
  text-indent: 3px;
  margin: 0;
  padding: 1px 0;
}

#menu a{
  font-size: smaller;
  background: #eee;
  text-decoration: none;
  width: 100%;
}

#menu a, #menu a:visited {
  color: #004F6D;
}

#menu a:hover{
  color: #004F6D;
  background: #ddd;
  color: #a00;
  background: #ddd;
}

#menu a:active{
  color: #060;
  background: #ccc;
}

/* widths: 60 / entries
   eg. 5 entries: 12% each
       4 entries: 15% each */

#menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width: 120px; /* FIXME: ??? */
/*   width: 9.9em; */
}

#menu li {
  position: relative;
  width: 100%
}

#menu li:hover{
  cursor: pointer;
  z-index: 100;
}

#menu ul ul{
  position: absolute;
  width: 100%;
  z-index: 500;
  top: auto;
  /* top: 0; */
  display: none;
}

/* slightly unnerving but better than having submenus
   disappear off the bottom of the screen */

#menu ul ul ul {
  bottom: 0;
  left: 100%;
}

#menu li:hover ul ul,
#menu li li:hover ul ul,
#menu li li li:hover ul ul,
#menu li li li li:hover ul ul
{display: none;}

#menu li:hover ul, 
#menu li li:hover ul,
#menu li li li:hover ul, 
#menu li li li li:hover ul 
{display: block;}

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li{float: left;height: 1%;}
* html #menu ul li a{height: 1%;}
/* End */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
  font-weight: bold;
  text-indent: 3px;
  color: #004F6D;
  background: #eee;
}

#menu a.x:hover{
  color: #a00;
  background: #ddd;
}

#menu a.x:active{
  color: #060;
  background: #ccc;
}

#menu a.toplevel {
  color: #fff;
  background: #004F6D;
  margin: 0;
  padding: 0;
}

#menu h2{
  color: #fff;
  background: #004F6D;
  text-align:  center;
  text-transform: uppercase;
  margin: 0;
  width: 100%
}

/* End CSS Code for Horizontal Dropdown/Popout Menu */

/* CSS depress buttons -
http://web.tampabay.rr.com/bmerkey/examples/css-buttons2.html */

p.buttons a.button {
  margin: 0 auto 0 auto; /* top right bottom left */
  clear: left;
  width: 80%;  /* FIXME: ??? */
}

/* create a button look for links */

a.button:link, a.button:visited
{ /* FIXME: fix colours so depress effect works */
  background-color: #004F6D;
  border-top: #000000 solid 1px;
  border-right: #003300 solid 1px;
  border-bottom: #003300 solid 1px;
  border-left: #000000 solid 1px;
  color: #A0CCC4;
  font-family: arial,helvetica,sans-serif;
  font-size: small;
  font-weight: bold;
  padding: 1px 2px 1px 3px; /* top right bottom left */
  margin: 0 auto 0 auto;
  text-decoration: none;
  width: 12em;  /* FIXME: ??? */
  display: block;
  text-align: center;
}

a.button:hover {
  background-color: #A0CCC4;
  color: #004F6D;
}

/* depress effect on click */
a.button:active, a.button:focus 
{
  border-top: #003399 solid 1px;
  border-right: #99ccff solid 1px;
  border-bottom: #99ccff solid 1px;
  border-left: #003399 solid 2px;
}

span.title {
  font-weight: bold;
}