/*-------------------------------------------
Default styles
---------------------------------------------

Default formatting, relevant to all pages.

Moved away from .php menu colour approach for Boojum as menus are unique and individually formatted

Original author: Ben Sturmfels, Boojum, March 2009

------------------------------------------*/

body {
  font-family: sans-serif;
  font-size: 81%;
  color: #6c7179;
  background: #aaaaaa; /* 0a3d63 */
  position: relative; /* IE6 fix */
  margin: 0 auto;
}


/* Regular elements --------------------*/
h1 {
  font-size: 2.2em;
  color: #0c77be;
  font-family: 'Times New Roman', serif;
  font-weight: normal;
}

h2 {
  font-size: 1.2em;
  color: #6e7176;
}

h3 {
  font-size: 1.1em;
  color: #6e7176;
}

h4 {
  font-size: 1em;
  color: #6e7176;
}

p {
  margin-bottom: 1em;
}

li { margin-bottom: 0.3em; }

cite {
  display: inline;
  text-align: left;
}

td, th {
  border: none;
  padding: 0;
}

th { background: none; }

table.lines th, table.lines td,
table[border] th, table[border] td {
  border: 1px solid #ddd;
  padding: 0.5em;
}

table.lines,
table[border] { margin-left: 1px; } /* Odd problem in Firefox */


/* General layout blocks --------------------*/
#content-wrapper {
  clear: both;
  overflow: hidden;
  background: white;
  /* _height: 1%;  IE6 HACK: make this block contain floating children */
}

#main-content-wrapper {
  overflow: auto;
  background: white;

  /* _height: 1%; IE6 HACK: make this block contain floating children */
}

#main-content-wrapper .inner {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#main-content {
  min-height: 400px;
  background: #fff;
}

#main-content .inner {
  overflow: hidden;
  padding: 0.6em 0 10px;
  margin: 0 0 0 1.5em;
  /* _height: 1%;  IE6 HACK: make this block contain floating children */
}

#sub-content-a {
  color: #000;
  background: #cee4f2;
  margin: 0;
  padding: 0;
}
#sub-content-a .inner-2 {background: #cee4f2 url(../images/pic-left-2.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-4 {background: #cee4f2 url(../images/pic-left-4.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-5 {background: #cee4f2 url(../images/pic-left-5.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-6 {background: #cee4f2 url(../images/pic-left-6.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-7 {background: #cee4f2 url(../images/pic-left-7.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-8 {background: #cee4f2 url(../images/pic-left-8.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-9 {background: #cee4f2 url(../images/pic-left-9.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-10 {background: #cee4f2 url(../images/pic-left-10.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-11 {background: #cee4f2 url(../images/pic-left-11.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-12 {background: #cee4f2 url(../images/pic-left-12.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-13 {background: #cee4f2 url(../images/pic-left-13.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}
#sub-content-a .inner-14 {background: #cee4f2 url(../images/pic-left-2.jpg) no-repeat left bottom; clear: both; margin: 0; padding: 0;}

#sub-content-a .inner-quote {
  clear: both;
  overflow: hidden;
  padding: 1em 4em 1.5em 3.5em;
  min-height: 309px;
}

#sub-content-a p.quote-a {
  font-size: 1.3em;
  font-family: 'Times New Roman', serif;
  color: #0c77be;
  font-weight: normal;
  padding: 0;
  margin: 0 0 5px 0;
}
#sub-content-a p.author-a {  /* Boojum left panel quote text styles permanently set*/
  font-family: 'Times New Roman', serif;
  font-size: 0.8em;
  color: #6d7179;
  padding: 0;
  margin: 0;
}

#sub-content-b {
  background: #fff url(../images/right-bg-1.jpg) no-repeat left top;
  margin: 0;
  height: 615px;
}

#sub-content-b .inner {
  overflow: hidden;
  margin: 10px 35px 0 28px;
  padding: 10px 15px 0 20px;
}


/* Header & branding --------------------*/
#header {
  /* overflow: none;  stop bottom margin of content being passed on */
  clear: left;
  background: #fff;
  border: 0;
}

/* Footer --------------------*/
#footer {
  background: #ff5d5f url(../images/footer-bg-boojum.png) no-repeat left top;
  clear: both;
  height: 34px;
}

#footer .inner {
  padding: 0.2em 1.5em;
  overflow: auto;
  /* _height: 1%;  IE6 HACK */
}

#footer-page-info ul {
  float: left;
  margin: 0;
}

#footer-page-info li {
  color: #6c7179;
  list-style: none;
  margin: 0;
  font-size: 0.8em;
}

#footer-page-info li a {
  color: #6c7179;
}

#footer-page-info p {
  color: #fffeff;
  font-style: italic;
  font-weight: normal;
  font-size: 1.3em;
  font-family: 'Times New Roman', serif;
  float: right;
  display: inline;
  margin: 0;
  padding: 0.2em 4em 0 0;
}


/* Footer quick links --------------------*/
#quick-links {
  overflow: auto;
  margin: -0.5em 0 1em;

  /* _height: 1%;  IE6 HACK: contain floating elements */
}

#quick-links h3 {
  padding-bottom: 0em;
  margin-bottom: 0;
}

#quick-links ul {
  margin: 0;
}

#quick-links li {
  list-style: none;
  display: inline;
  margin: 0 0.5em 0.1em 0;

  /* _display: block;  IE6 HACK: inline causes blowout */
}

#quick-links a {
  color: #666;
  white-space: nowrap;
  text-decoration: none;
}

#quick-links a:hover, #quick-links a:focus {
  text-decoration: underline;
}

#quick-links li a:after {
  content: ", ";
}


/* Overall menu --------------------*/
#overall-menu {
  float: left;
  display: inline;
  padding: 0 0 0 40px;
}

#overall-menu ul {
  padding: 0;
}

#overall-menu li {
  font-weight: normal;
  font-size: 1em;
}

#overall-menu li a {
  color: #000;
  line-height: 1.4; /* IE6 & IE7 HACK: ahem, why didn't inherit? */
  padding: 0.3em 2.1em 0.4em 1.5em;
  border: none;
  margin: 0 3px 0 0;
  text-decoration: underline;
}


/* Main menu --------------------*/
#main-menu {
  float: left;
  background: #cee4f2 url(../images/main-menu-bg.jpg) no-repeat left top;
  min-height: 200px;
  min-width: 300px;
  margin: 15px 0 0 0;
  padding: 9px 0 0 41px;
}

#main-menu ul {
  padding: 0 0 0 0.2em;
}

#main-menu li {
  font-weight: normal;
  font-size: 1.3em;
  font-family: 'Times New Roman', serif;
}

#main-menu li a {
  color: #6c7179;
  line-height: 1.4em; /* IE6 & IE7 HACK: ahem, why didn't inherit? */
  padding: 0.3em 0.3em 0;
  border: none;
  margin: 0;
}

#main-menu li.current a {
  text-decoration: underline;
}

#main-menu li.menu-4 a,
#main-menu li.menu-7 a,
#main-menu li.menu-9 a,
#main-menu li.menu-12 a { font-size: 1.4em; color: #0c77be; padding-top: 0; }

#main-menu li.menu-1 { padding-left: 2px;}
#main-menu li.menu-5 { clear: left; padding-left: 25px;}
#main-menu li.menu-8 { clear: left; padding-left: 0;}
#main-menu li.menu-11 { clear: left; padding-left: 20px;}
#main-menu li.menu-13 { clear: left; padding-left: 30px;}
/* pad right of menu 7 to fix ie7 list alignment problem */
#main-menu li.menu-7 { padding-right: 2.4em;}


/* Main content --------------------*/
h1#page-title {
  margin: 0 0 0.1em;
}

#page-summary p {
  font-size: 1.1em;
  font-weight: normal;
}

#main-content blockquote {
  font-size: 1.1em;
  overflow: auto;
  background: #eee;
  font-style: italic;
  width: 50%;
  float: right;
  padding: 1em 1em 0;
  margin: 0 0 0.5em 1em;
}

#support-us p {
  clear: both;
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  margin: 1em 0;
}


/* Main content page info ----------------------*/
#page-info {
  color: #999;
  font-size: 0.85em;
  width: 11.5em;
  float: right;
  padding: 0;
  margin: 0.2em 0 0.2em 0.5em;
}

#page-info h2 { display: none; }

#page-info ul {
  padding: 0;
  border-top: 1px dotted #fff;
  margin: 0;
}

#page-info li {
  list-style: none;
  line-height: 2em;
  padding: 0 0 0 35px;
  border: 1px solid #ddd;
  margin: 0 0 0.2em 0;
}

#page-info a {
  color: #999;
  text-decoration: none;
  display: block;
  padding: 0;
}

#page-info a:hover, #page-info a:focus {
  text-decoration: underline;
}

#page-info li.level {
  background: url(../images/icon-level.png) no-repeat 10px center;
}
#page-info li.author {
  background: url(../images/icon-author.png) no-repeat 10px center;
}
#page-info li.e-update {
  background: url(../images/icon-mail.png) no-repeat 10px center;
}
#page-info li.discuss {
  background: url(../images/icon-discuss.png) no-repeat 10px center;
}
#page-info li.sendfriend {
  background: url(../images/icon-send-to-friend.png) no-repeat 10px center;
}
#page-info li.searchterm {
  background: url(../images/icon-searchwords.png) no-repeat 14px 50%;
}
#page-info li.municipality {
  background: url(../images/icon-municipality.png) no-repeat 10px center;
}
#page-info li.send-photo {
  background: url(../images/icon-photo.png) no-repeat 8px center;
}


/* Sub-content --------------------*/
#sub-content-a, #sub-content-b {
  display: none; /* hidden by default, made visible by multi-column layouts */
}

#sub-content-a h1 {
  font-size: 1.3em;
  clear: both;
  color: #0070bb;
  border-bottom: none;
}

#sub-content-a h2 {
  font-size: 1.2em;
  clear: both;
  color: #0070bb;
  border-bottom: none;
}

#sub-content-a h3 {
  font-size: 1.1em;
  clear: both;
  color: #0070bb;
}

#sub-content-b #sub-content-title {
  background: #fff url(../images/right-heading-bg.jpg) no-repeat right top;
  font-size: 1.6em;
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  color: #0c77be;
  border: none;
  margin: 8px 30px 0 0;
  padding: 8px 0 0 48px;
}

#sub-content-b h2, #sub-content-b h3, #sub-content-b h4 {
  color: #6e7176;
}



/* This section menu --------------------*/
#this-section-menu {
  margin-bottom: 0.7em;
}

#this-section-menu ul.v-menu li {
  padding: 0;
  margin: 0;
}

#this-section-menu li a {
  color: #0070bb;
  line-height: 1.3;
  font-weight: bold;
  display: block;
  padding: 0 22px 0.2em 0;
  border: none;
  border-bottom: 1px dotted #999;
  margin: 0.4em 10px 0;
  text-decoration: none;

  /* _background-image: none;  IE6 HACK: no alpha transparency */
}

#this-section-menu li a:hover {
  text-decoration: underline;
}

#this-section-menu li.current a {
  background: url(../images/icon-arrow-right-b-trans.png) no-repeat right top;

  /* _background-image: none;   IE6 HACK: no alpha transparency */
}


/* Images --------------------*/
#main-content img {
  margin: 0;
  padding: 0;
}


/* Embedded media --------------------*/
.media {
  width: 25em;
  background: #eee;
  padding: 0.5em 1em 1em;
  border: 1px solid #ddd;
  margin: 1em 0;
}

.media h3 {
  margin: 0.5em 0 0;
}

.media .runtime {
  margin: 0.5em 0;
}

.media .desc {
  margin: 0.5em 0;
}

.media audio, .media video {
  margin: 1em 0;
}

.media .recommended-download {
  margin: 0 0 1.5em;
}

.media .recommended-download a {
  font-weight: bold;
}

#main-content .media .recommended-download img {
  margin: 0 0.5em 0 0;
}

.media .alternate-download {
  clear: both;
  background: #e0e0e0;
  padding: 0.5em 1em;
  border: 1px solid #d0d0d0;
}

.media .alternate-download p {
  margin: 0.2em 0;
}

.media .alternate-download ul {
  margin: 0 0 0.5em 1.5em;
}


/* Misc ----------------------*/
#skip, .menu-heading {
  display: none;
}

.half-block {
  width: 46%;
  float: left;
  padding: 0 2%;

  /* _width: 45.5%;  IE6 HACK */
}

.third-block {
  width: 29%;
  float: left;
  padding: 0 2%;

  /* _width: 28.5%;  IE6 HACK */
}

#this-section-menu li a span {
  color: #bbb;
}

#this-section-menu li.current a span {
  color: inherit;
}

/* TODO: We shouldn't really duplicate these, as they are already in forms.css. */
button {
  font-size: 1em;
  line-height: 1.5;
}

button img, #main-content button img,  #sub-content-b button img {
  vertical-align: middle;
  display: inline;
  margin: 0 0.2em;
  float: none;
}

body.no-search #search-form { display: none; }

#browser-warning {
  padding: 0.7em 1em;
  border: 3px #f90 solid;
  margin: 0.5em 0;
}

#main-content #browser-warning img { margin: 0 1em 0 0; }

/* Form errors */
input.formerror {
  background: #fcc;
  border-color: red;
}

textarea.formerror {
  background: #fcc;
  border-color: red;
}

select.formerror {
  background: #fcc;
  border-color: red;
}

p.errortext {
  color: red;
  font-weight: bold;
}

#buttons {
  clear: both;
}

#buttons button {
  float: right;
  margin-right: 100px;
}

/* Find program table formatting */
#find-program table {
  border-collapse: collapse;
}

#find-program th {
  border: 0;
  vertical-align: top;
  text-align: left;
  padding: 15px 0 5px;
}

#find-program table td {
  border: 0;
  vertical-align: top;
  text-align: left;
  padding: 5px 20px 5px 0;
}
#find-program table td.program-name {
  font-size: 1.3em;
  font-weight: bold;
  color: #0070bb;
}
#find-program table td.program-title {
  padding-top: 8px;
}

#main-menu li.menu_logout {
  padding-left: 30px;
}
#main-menu button {
  font-size: 0.85em;
  padding: 0 0.2em;
  margin: 0;
  line-height: 1.1em;
}

#main-menu button img {
  vertical-align: top;
  display: inline;
  margin: 0 0.2em;
  float: none;
}


#browser-warning {
  background: white;
  padding: 0.7em 1em;
  border: 3px #f90 solid;
  margin: 0.5em 0;
}

#main-content #browser-warning img { margin: 0 1em 0 0; }

#sub-content-b table td.contact-icon-td {
  width: 55px;
  height: 60px;
}
#sub-content-b table td.contact-text-td {
  padding-top: 10px;
  height: 60px;
}