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

Default formatting, relevant to all pages.

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

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


/* Regular elements --------------------*/
h1 {
  font-size: 2.0em;
  color: #0070bb;
}

h2 {
  font-size: 1.5em;
  color: #0070bb;
}

h3 {
  font-size: 1.2em;
  color: #0070bb;
}

h4 {
  font-size: 1em;
  color: #0070bb;
}

p {
  margin-bottom: 1em;
}

li { margin-bottom: 0.5em; }

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: auto;
  background: white;

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

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

#main-content .inner {
  overflow: hidden;
  padding: 0.6em 0 10px;
  margin: 0 1.5em 1em;

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

#sub-content-a {
  color: #000;
  background: #fff;
  margin: 0 0 0;
}

#sub-content-a .inner {
  overflow: hidden;
  padding: 1em 0 1.5em;
  min-height: 440px;
}

#sub-content-b {
  background: #fff;
  margin: 0 0 0;
}

#sub-content-b .inner {
  min-height: 440px;
  overflow: hidden;
  padding: 1em 1em 1.5em;
}


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

#header-top{
  background: #fff url(../images/header-vyma-1.png) no-repeat left top;
  border: 0;
  margin: 0;
  padding: 0;
  height: 150px;
}

h1#site-title {
  padding: 2px 0 0 15px;
  margin: 0;
}


/* Footer --------------------*/
#footer {
  color: #fff;
  background: #0a3d63;
  clear: both;
}

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

#footer p {
  margin: 0;
}

#footer-page-info ul {
  clear: both;
  margin: 0;
}

#footer-page-info li {
  list-style: none;
  margin: 0;
  font-size: 0.9em;
}

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


/* 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: ", ";
}


/* Search --------------------*/
#search-form {
  position: absolute; right: 5em; top: 0px;

  z-index: 100; /* IE7 HACK: search box goes missing */
  _position: relative; _left: 0; _top: 0; /* IE6 HACK: it's just plain broken */
}

#search-form fieldset {
  border: none;

  _position: absolute; _right: 5em; _top: -150px; /* IE6 HACK: it's just plain broken */
}

#search-form legend,
#search-form label { display: none; }

#search-form #search-input {
  width: 11em;
  font-size: 0.9em;
  margin: 0 0.3em 0 0; /* IE6 & 7 HACK: extra space between input and button */
  padding: 0;
}

#search-form #search-button {
  padding: 0;
  margin: 0;
}

#search-form button {
 font-size: 0.8em;
 padding: 0 2px 0;
 margin: 0;
}

/* Contact --------------------*/
#contact-box {
  position: absolute; right: 335px; top: 15px;

  z-index: 100; /* IE7 HACK: search box goes missing */
  _position: relative; _left: 0; _top: 0; /* IE6 HACK: it's just plain broken */
}
#contact-box a {
  color: #fff;
}

/* Overall menu --------------------*/
#overall-menu {
  background: #fff url(../images/header-vyma-2.png) no-repeat left top;
  float: left;
  padding-top: 0;
  width: 100%;
}

#overall-menu ul {
  padding: 0;
}

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

#overall-menu li a {
  background: url(../images/cnr-overall-menu-white.png) right top no-repeat;
  color: white;
  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;

  _background-image: url(../images/cnr-overall-menu-ie6-white.png);
}

#overall-menu li.item-1 a { background-color: #094877; }
#overall-menu li.item-2 a { background-color: #094877; }
#overall-menu li.item-3 a { background-color: #D35EAB; }
#overall-menu li.item-4 a { background-color: #D87E31; }
#overall-menu li.item-5 a { background-color: #A46AE4; }
#overall-menu li.item-6 a { background-color: #206DA9; }
#overall-menu li.item-7 a { background-color: #094877; }
#overall-menu li.item-7 a { background: url(../images/cnr-overall-menu-blue.png) right top no-repeat; background-color: #094877; }

#overall-menu li.item-extra-1 { float: right; }
#overall-menu li.item-extra-1 a { background-image: none; }
#overall-menu li.item-extra-1.current a { text-decoration: underline; }


/* Main menu --------------------*/
#main-menu {
  float: left;
  width: 100%;
  height: 100%;
}

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

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

#main-menu li a {
  color: white;
  line-height: 1.3; /* IE6 & IE7 HACK: ahem, why didn't inherit? */
  padding: 0.2em 1.3em 0.3em;
  border: none;
  border-right: 1px dotted #d7710d;
  margin: 0;
}

#main-menu li.current a {
  background: #ccc;
  color: #33366B;
  border-right-style: solid;
}

body.overall-sec-1 #main-menu { background: url(../images/main-menu-bg.png) no-repeat left top #094877; }
body.overall-sec-2 #main-menu { background: url(../images/main-menu-bg.png) no-repeat left top #052338; }
body.overall-sec-3 #main-menu { background: #D35EAB; }
body.overall-sec-4 #main-menu { background: #D87E31; }
body.overall-sec-5 #main-menu { background: #A46AE4; }
body.overall-sec-6 #main-menu { background: #206DA9; }
body.overall-sec-7 #main-menu { background: url(../images/main-menu-bg.png) no-repeat left top #094877; }

body.overall-sec-1 #main-menu li.current a { background: #85a4bc; }
body.overall-sec-2 #main-menu li.current a { background: #85a4bc; }
body.overall-sec-3 #main-menu li.current a { background: #eaafd6; }
body.overall-sec-4 #main-menu li.current a { background: #ecbf99; }
body.overall-sec-5 #main-menu li.current a { background: #d2b5f2; }
body.overall-sec-6 #main-menu li.current a { background: #90b7d5; }
body.overall-sec-7 #main-menu li.current a { background: #869fc8; }


/* Sub menu --------------------*/
#sub-menu {
  background: #999;
  float: left;
  width: 100%;
}

#sub-menu ul {
  padding: 0 0 0 0.7em;
}

#sub-menu li {
  font-weight: bold;
  font-size: 1em;
}

#sub-menu li a {
  color: #33366B;
  line-height: 1.4; /* IE6 & IE7 HACK: ahem, why didn't inherit? */
  padding: 0.3em 0.8em 0.4em;
  border: none;
  /* border-right: 1px dotted #999;*/
  margin: 0;
}

#sub-menu li.current a {
  background: #ccc;
  color: #33366B;
}

body.overall-sec-1 #sub-menu { background: #85a4bc; }
body.overall-sec-2 #sub-menu { background: #85a4bc; }
body.overall-sec-3 #sub-menu { background: #eaafd6; }
body.overall-sec-4 #sub-menu { background: #ecbf99; }
body.overall-sec-5 #sub-menu { background: #d2b5f2; }
body.overall-sec-6 #sub-menu { background: #90b7d5; }
body.overall-sec-7 #sub-menu { background: #ddd; }

body.overall-sec-1 #sub-menu li.current a { background: #c1d1dd; }
body.overall-sec-2 #sub-menu li.current a { background: #c1d1dd; }
body.overall-sec-3 #sub-menu li.current a { background: #f4d7ea; }
body.overall-sec-4 #sub-menu li.current a { background: #f5dfcb; }
body.overall-sec-5 #sub-menu li.current a { background: #e8daf8; }
body.overall-sec-6 #sub-menu li.current a { background: #c7dae9; }
body.overall-sec-7 #sub-menu li.current a { background: #c2cfe3; }


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

#page-summary p {
  color: #0070bb;
  font-size: 1.1em;
  font-weight: bold;
}

#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: 16em;
  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 {
  font-size: 1.4em;
  background: #ddd;
  color: #0070bb;
  padding: 0.1em 0.71em; /* 0.56 = 1 / 1.4 */
  border: none;
  margin: 0 -0.71em 0.5em;
}

#sub-content-b h2, #sub-content-b h3, #sub-content-b h4 {
  color: #0070bb;
}



/* 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 10px 0 0;
  vertical-align: text-top;
  float: left;
}


/* 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.formerror {
  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;
}