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

Default formatting, relevant to all pages.

We no longer add styling hacks to work around bugs in particular
browser versions (such as IE6).

These styles duplicated those in our Django repository with some changes

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

@media screen {
  body {
    font-family: sans-serif;
    background: #89a;
    border-right: 1px solid #678;
    border-bottom: 1px solid #678;
    margin: 0 auto 1.5em 0;
    min-width: 580px;
    max-width: 1200px;
  }
}


/* Regular elements --------------------*/
h1 {
  font-size: 1.8em;
  color: #002664;
}

h2 {
  font-size: 1.4em;
  clear: both;
  color: #002664;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #cdd;
  margin-bottom: 0.5em;
}

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

@media screen {
  h2, h3 {
    text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
  }
}

h4 {
  font-size: 1em;
  font-style: italic;
  color: #002664;
}

li { margin-bottom: 0.5em; }

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

td, th { border: none; }

th { background: #eee; }

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

/* Special case of above */
table[border="0"] td, table[border="0"] th {
  border: none;
}

table.hlines th, table.hlines td {
  border: none;
  border-top: 1px solid #ddd;
}

table.hlines th {
  border-bottom: 1px solid #ddd;
}

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

tr.even { background: #eee; }


/* General layout blocks --------------------*/
#content-wrapper {
  clear: both;
  overflow: auto;
  background: white;
}

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

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

#sub-content-a {
  margin: 0 0 1.5em;
}

#sub-content-a .inner {
  background: rgb(230, 247, 253);
  min-height: 400px;
  overflow: hidden;
  padding: 1em 1em 1.5em;
  border-right: 1px solid #bfe7f0;
  border-bottom: 1px solid #bfe7f0;
}

#sub-content-b {
  margin: 0 0 1.5em;
}

#sub-content-b .inner {
  background: #eee;
  min-height: 400px;
  overflow: hidden;
  padding: 1em 1em 1.5em;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}


/* Header & branding --------------------*/
header {
  position: relative;
  background: white;
  padding: 10px 0 0;
}

h1#site-title {
  height: 50px; width: 122px;
  float: left;
  margin: 0 0 0 10px;
}

#site-title img { display: block; }

@media screen {
  #print-header { display: none; }
}

h1#section-title {
  color: white;
  background: rgb(0, 51, 96) url(/static/images/cnr-section-title.png) left top no-repeat;
  line-height: 1.0;
  height: 24px;
  padding: 11px 16px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 10px 0 169px;
}


/* Footer --------------------*/
footer {
  color: #333;
  background: #eee;
  clear: both;
  border-top: 1px solid #ddd;
  padding: 1em 1.5em;
  overflow: auto;
}

footer p {
  margin: 0;
}

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

#footer-page-info li {
  list-style: none;
  margin: 0;
}


/* Search --------------------*/
#search-form {
  clear: both;
  float: right;
}

#search-form fieldset {
  /* Remove shadow and background which are being added by fieldset. */
  background: none;
  border: none;
  padding: 0;
  margin: 0 10px;
  box-shadow: none;
  -moz-box-shadow: none;
}

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


/* Overall menu --------------------*/
#overall-menu {
  float: left;
  margin-top: 4px;
}

#overall-menu li a {
  font-weight: bold;
  background: url(/static/images/cnr-overall-menu.png) right top no-repeat;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  /* background: -moz-linear-gradient(top, rgba(0,0,0,0.2), transparent); */
  /* background: -webkit-linear-gradient(top, rgba(0,0,0,0.2), transparent); */
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
  color: white;
  padding: 0.3em 2.1em 0.4em 1.5em;
  border: none;
  margin: 0 3px 0 0;
}

#overall-menu li.item-1 a { background-color: rgb(0, 174, 239); }
#overall-menu li.item-2 a { background-color: rgb(236, 0, 140); }
#overall-menu li.item-3 a { background-color: rgb(141, 198, 68); }
#overall-menu li.item-4 a { background-color: rgb(145, 145, 149); }
#overall-menu li.item-5 a { background-color: rgb(0, 51, 96); }
#overall-menu li.item-6 a { background-color: rgb(56, 124, 43); }
#overall-menu li.item-7 a { background-color: rgb(118, 33, 35); }

#overall-menu li.item-extra-1 a { background-color: rgb(101, 45, 137); }


/* Main menu --------------------*/
#main-menu {
  background: rgb(0, 174, 239);
  float: left;
  width: 100%;
}

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

#main-menu li a {
  font-weight: bold;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
  padding: 0.3em 0.6em 0.4em;
  border: none;
  border-right: 1px dotted #888;
  margin: 0;
}

#main-menu li.current a {
  background: #bfebfb;
  color: rgb(0, 51, 96);
  border-right-style: solid;
  text-shadow: rgba(255, 255, 255, 0.2) 1px 1px 1px;
}

body.overall-sec-2 #main-menu { background: rgb(236, 0, 140); }
body.overall-sec-3 #main-menu { background: rgb(141, 198, 68); }
body.overall-sec-4 #main-menu { background: rgb(145, 145, 149); }
body.overall-sec-5 #main-menu { background: rgb(0, 51, 96); }
body.overall-sec-6 #main-menu { background: rgb(56, 124, 43); }
body.overall-sec-7 #main-menu { background: rgb(118, 33, 35); }

body.overall-sec-2 #main-menu li.current a { background: #fabfe2; }
body.overall-sec-3 #main-menu li.current a { background: #c6e2a1; }
body.overall-sec-4 #main-menu li.current a { background: #f5dfcb; }
body.overall-sec-5 #main-menu li.current a { background: #7f99af; }
body.overall-sec-6 #main-menu li.current a { background: #9bbd95; }
body.overall-sec-7 #main-menu li.current a { background: #e8cad8; }


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

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

#sub-menu li a {
  font-weight: bold;
  color: rgb(0, 51, 96);
  padding: 0.3em 0.8em 0.4em;
  border: none;
  border-right: 1px dotted #999;
  margin: 0;
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 1px;
}

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

body.overall-sec-1 #sub-menu { background: #bfebfb; }
body.overall-sec-2 #sub-menu { background: #fabfe2; }
body.overall-sec-3 #sub-menu { background: #c6e2a1; }
body.overall-sec-4 #sub-menu { background: #f5dfcb; }
body.overall-sec-5 #sub-menu { background: #7f99af; }
body.overall-sec-6 #sub-menu { background: #f4d7ea; }
body.overall-sec-7 #sub-menu { background: #e8cad8; }

body.overall-sec-1 #sub-menu li.current a { background: #e6f7fd; }
body.overall-sec-2 #sub-menu li.current a { background: #fde6f4; }
body.overall-sec-3 #sub-menu li.current a { background: #e2f1d0; }
body.overall-sec-4 #sub-menu li.current a { background: #f4f4f5; }
body.overall-sec-5 #sub-menu li.current a { background: #bfccd7; }
body.overall-sec-6 #sub-menu li.current a { background: #e6ebef; }
body.overall-sec-7 #sub-menu li.current a { background: #f2e9e9; }


/* Page header and level up------------- */
@media screen {
#page-top {
  overflow: auto;
  background: #eee;
  padding: 0 0.5em;
  margin: 0.5em 0 0.7em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.05);
}

#page-top a {
  color: #888;
  text-decoration: none;
}

#page-top a:hover { text-decoration: underline; }

h1#page-title {
  margin: 0.2em 0 0.1em;
}

#page-top h1#page-title {
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 1px;
}

#page-level {
  font-size: 0.95em;
  font-weight: bold;
  float: right;
  background: url(/static/images/icon-level.png) no-repeat left;
  line-height: 2em;
  padding: 8px 0 0;
  margin: 0 0 0.2em;
}

#page-level a {
  padding-left: 20px;
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 1px;
}
}


/* Main content --------------------*/
#page-summary p {
  max-width: 40em;
}

#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;
}


/* Main content page info ----------------------*/
#page-info {
  color: #999;
  font-size: 0.85em;
  width: 20em;
  float: right;
}

#page-info h2 { display: none; }

#page-info li {
  float: left;
  list-style: none;
  padding: 0.5em 1em;
  padding-left: 20px;
  margin: 0 0.5px;
  margin-left: 0;
  display: inline;
}

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

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

#page-info li.page-rating {
  padding-left: 0;
  padding-bottom: 0;
}

li.page-rating form {
  display: inline;
  margin-right: 0.5em;
}

#page-info li.level {
  background: url(/static/images/icon-level.png) no-repeat 0px center;
}
#page-info li.author {
  background: url(/static/images/icon-author.png) no-repeat 0px center;
}
#page-info li.e-update {
  background: url(/static/images/icon-mail.png) no-repeat 0px center;
  padding-left: 0;
}
#page-info li.e-update a {
  padding-left: 20px;
}
#page-info li.page-print {
  background: url(/static/images/icon-print.png) no-repeat 0px center;
  padding-left: 0;
}
#page-info li.page-print a {
  padding-left: 22px;
}
#page-info li.discuss {
  background: url(/static/images/icon-discuss.png) no-repeat 0px center;
}
#page-info li.sendfriend {
  background: url(/static/images/icon-share-this.png) no-repeat 0px center;
}
#page-info li.searchterm {
  background: url(/static/images/icon-searchwords.png) no-repeat 0px center;
}
#page-info li.municipality {
  background: url(/static/images/icon-municipality.png) no-repeat 0px center;
}
#page-info li.send-photo {
  background: url(/static/images/icon-photo.png) no-repeat 0px center;
}
#page-info li.send-photo a {
    padding-left: 8px;
}


/* Sub-content --------------------*/
#sub-content-a h1 {
  font-size: 1.3em;
  clear: both;
  color: #019FC2;
  border-bottom: none;
}

/* See README "Headings in the right panel" */
#sub-content-a h2, #sub-content-a h3,
#sub-content-b h2, #sub-content-b h3 {
  font-size: 1.1em;
  color: #002664;
  font-style: normal;
  clear: both;
  padding: 0.5em 0 0;
  border: none;
  border-top: 1px dotted #bbb;
  margin: 0 0 0.2em;
}

#sub-content-b #sub-content-title {
  font-size: 1.4em;
  background: #ddd;
  padding: 0.1em 0.71em; /* 0.56 = 1 / 1.4 */
  border: none;
  margin: 0 -0.71em 0.5em;
}

#sub-content-b h4 {
  font-size: 1em;
  color: #33366B;
  font-style: italic;
  padding-top: 0.3em;
}

/* features in left column */
#sub-content-a .feature {
  text-align: right;
  width: 190px;
  padding: 0;
  border: none;
  margin: 0 -1em 0 auto;
}

#sub-content-a .feature .intro {
  padding: 0 10px 0.2em;
  margin: 0 -10px 1em;
  background: #dedfe0;
}

#sub-content-a .feature h3 {
  margin: 0 -11px 0.7em;
}

#sub-content-a .feature img {
  float: none;
  display: inline;
  margin-bottom: 0.5em;
}

#sub-content-a .feature p {
  font-size: 1.2em;
  font-style: italic;
  margin-right: 0.5em;
}


/* Images --------------------*/
#main-content img, /* image on its own treated as a .figleft */
#main-content img.figleft, #main-content img[align=left],
#sub-content-b img, /* image on its own treated as a .figleft */
#sub-content-b img.figleft, #sub-content-b img[align=left] {
  float: left;
  margin: 0.3em 1em 0.5em 0;
}

#sub-content-a img.figright, #sub-content-a img[align=right],
#main-content img.figright, #main-content img[align=right],
#sub-content-b img.figright, #sub-content-b img[align=right] {
  float: right;
  margin: 0.3em 0 0.5em 1em;
}

/* Misc ----------------------*/
.todo {
  color: #a33;
  font-size: 1.3em;
}

.done {
  color: #3a3;
  font-size: 1.3em;
}

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

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

.errorlist, .error { color: #d00; font-style: italic; }


/*  Custom banners --------------*/

/* Shop banner */
body.overall-sec-3 #section-title { background: rgb(141, 198, 68); }

/* Find banner */
body.overall-sec-4 #section-title { background: rgb(145, 145, 149); }