/* -- body -------------------------------------------------------------------------------------------------- */

body
 {margin: 0;  padding: 0 5% 0 0;
  background: #867e73 url(images/sky011.jpg) fixed top left no-repeat;
  font-family: Verdana, Geneva, sans-serif;  font-size: small;  font-style: normal;  font-weight: normal;
  text-align: left;  color: black}


/* -- defaults/misc ----------------------------------------------------------------------------------------- */

a:link, a:visited
 {text-decoration: none;  font-weight: bold;  color: #184569}

a:hover
 {text-decoration: none;  font-weight: bold;  color: #CC0033}

a[href^="email.htm"], a[href^="javascript:popupMail"], a[href^="error-email.htm"]  /* display 'envelope' icon for email links */
 {background: transparent url(images/letter.png) top right no-repeat;  padding-right: 15px}

a[href^="http"]  /* display 'new window' icon for external links */
 {background: transparent url(images/external.png) top right no-repeat;  padding-right: 12px}

* + html a[href^="email.htm"], * + html a[href^="javascript:popupMail"],
* + html a[href^="error-email.htm"], * + html a[href^="http"]
 {display: inline-block} /* fix for IE7 so 'envelope' or 'new window' icon remains in correct position when link text wraps */

p
 {padding: 0;  border: none;  margin: 0.75em 0 0.75em 0;  text-align: justify;  line-height: 1.25}
 
p.error-message
 {color: #CC0033;  font-weight: bold}

.notes
 {font-size: 0.8em}

span.label  /* heading at start of text line */
 {color: #CC0033; font-weight: bold}

span.latin, span.subspecies, span.subsp, span.publication, span.signature, span.author  /* italic font for scientific names/subspecies etc */
 {font-style: italic}

img
 {border: none}
 
em
 {font-weight: bold;  font-style: normal}
 
blockquote
 {color: #226193}

h1
 {margin: 0 0 25px 0;  border: none;  padding: 30px 0 0 110px;  min-height: 80px;
  background: transparent url(images/heading-logo.png) top left no-repeat;
  font-size: 3em;  font-weight: normal;  font-family: Georgia, Verdana, Geneva, sans-serif;
  line-height: 1.1;  letter-spacing: 0.1em;  color: #CC0033}

* html h1
 {background-image: url(images/heading-logo.jpg);  /* IE6 doesn't support PNG images */
  height: 110px}  /* IE6 doesn't support min-height */

h1 span  /* sub-heading */
 {display: block;  margin: 0;  padding: 0;
  font-size: 0.5em;  letter-spacing: 6px} /* px used because Firefox and IE7 interpret ems differently */

h2
 {margin: 2em 0 0.5em 0;  border: none;  padding: 0;
  font-size: 1.75em;  font-weight: bold;  font-family: Georgia, Verdana, Geneva, sans-serif;  color: #226193}

h2 span /* sub-heading */
 {font-weight: normal}

h3
 {margin: 1.5em 0 0.5em 0;  border: none;  padding: 0;
  font-size: 1.25em;  font-weight: bold;  font-family: Georgia, Verdana, Geneva, sans-serif;  color: black}

h3 span /* sub-heading */
 {font-weight: normal}

h4
 {margin: 0.75em 0 0.75em 0;  border: none;  padding: 0;
  font-size: 1em;  font-weight: bold;  font-family: Georgia, Verdana, Geneva, sans-serif;  color: black}

div.spacer
 {clear: both;  line-height: 1px;  margin: 0;  border: none;  padding: 0}

div.plain
 {background-color: white;  padding: 1em 2em 1em 2em}

div.h2box  /* invisible box with same top margin as <h2> */
 {background: none;  margin: 3.5em 0 0.5em 0;  border: none;  padding: 1px 0 0 0}

div.h2box h2
 {margin-top: 0}

span.emh  /* hidden span for disguising email addresses */
 {display: none}

span.ems
 {display: inline}

span.invisible
 {visibility: hidden}

ol
 {list-style-type: decimal}

ol ol
 {list-style-type: lower-roman}

ul.plain
 {margin-left: 0;  padding-left: 0;  list-style-type: none}

ul.plain ul.plain
 {margin-left: 2em}

ul.indented
 {margin-left: 2em}

ul.spaced-out li, ol.spaced-out li
 {margin-bottom: 1em}

.clear-both
 {clear: both !important}

.no-clear
 {clear: none !important}

.clear-left
 {clear: left !important}

.clear-right
 {clear: right !important}

.large-telno
 {font-size: 2em}

table.outlined  /* standard table with white borders */
 {border-collapse: collapse;  border: solid 1px white}

table.outlined td, table.outlined th  /* standard table with white borders */
 {padding: 0.25em 0.5em 0.25em 0.5em;  border: solid 1px white;  text-align: left;  vertical-align: top}

.highlight
 {font-weight: bold}

/* -- general content --------------------------------------------------------------------------------------- */

div.content-region  /* whole page except for navig column */
 {margin: 0 0 50px 240px;  padding: 0;  border: none;  min-width: 500px;
  background-color: transparent}

div.main-content  /* outlined area (50px originally in content-region margin, but moved due to IE7 bug) */
 {margin: 50px 0 0 0;  padding: 1.5em 5% 2em 5%;  border: solid #888888 1px;  min-height: 500px;
  background: #cecac7 url(images/sky011b.jpg) fixed top left no-repeat}

* html div.main-content
 {height: 500px}  /* IE6 doesn't support min-height */

.right-pic, .right-pic-xbm  /* right-aligned containers for pics etc */
 {float: right;  margin: 0.2em 0 0.1em 1em;  padding: 0;  border: none}

.lowerright-pic
 {float: right;  clear: right;  margin: 0.2em 0 0.1em 1em;  padding: 0;  border: none}

.left-pic, .left-pic-xbm  /* left-aligned containers for pics etc */
 {float: left;  margin: 0.2em 1em 0.1em 0;  padding: 0;  border: none}

.left-pic-xbm, .right-pic-xbm  /* extra bottom margin */
 {margin-bottom: 2em}

img.big-pic
 {border: solid 1px black;  padding: 0;  margin: 2em auto 2em auto}
 
div.left-col  /* left 'half' of main-content */
 {float: left;  margin: 0;  padding: 0;  border: none;  width: 55%}

div.right-col  /* right 'half' of main-content */
 {float: right;  margin: 0;  padding: 0;  border: none;  width: 39%}

div.boxed-sect  /* boxed full-width section */
 {margin: 2em 0 2em 0;  border: solid white 1px;  padding: 0.25em 1em 0.25em 1em;  text-align: left;
  background: transparent}

div.boxed-sect h2  /* caption at top of boxed section */
 {margin: 0.25em 0 0 0;  padding: 0;  text-align: left}

/* -- footer ------------------------------------------------------------------------------------------------ */

div.footer  /* footnote below main-content */
 {margin: 10px;  padding: 0;
  text-align: center;
  background-color: transparent;  border: none}

div.footer p
 {margin: 2px 0 2px 0;  border: none;  padding: 0;  text-align: center;
  font-size: 0.75em;  font-weight: normal;  font-family: Georgia, Verdana, Geneva, sans-serif;  color: black}


/* -- navig region ------------------------------------------------------------------------------------------ */

div.navig-region  /* links on left of page */
 {margin: 325px 0 0 10px;  padding: 0;  border: none;  width: 220px;
  position: absolute;  top: 0;  left: 0;
  font-size: medium;  font-weight: bold;  text-align: right;  color: white;
  background-color: transparent}

* html div.navig-region
 {height: 1%}  /* bug fix for IE6 */

div.navig-region a:link, div.navig-region a:visited
 {font-weight: bold;  color: white}

div.navig-region a:hover
 {font-weight: bold;  color: #CC0033}

div.navig-region ul
 {margin: 0 0 2em 0;  padding: 0;  list-style-type: none}

div.navig-region ul li
 {line-height: 1.01;  margin-bottom: 0.3em}


/* -- featured bird ----------------------------------------------------------------------------------------- */

#d1, #d2  /* two overlapping 'slices' */
 {margin: 0;  padding: 0;  border: solid #888888 1px;
  position: absolute;  top: 10px;  left: 10px;
  background: #202427 url(images/ringed-plover.jpg) top left no-repeat}

#d1  /* top slice */
 {border-bottom: none;  width: 300px;  height: 39px}

#d2  /* left-hand slice */
 {border-right: none;  width: 229px;  height: 300px;}

#d2:hover
 {background-image: url(images/ringed-plover-credit.jpg)}

/* -- 'spare' divs ------------------------------------------------------------------------------------------ */

#d3, #d4, #d5
 {display: none}

/* -- home page --------------------------------------------------------------------------------------------- */

#home-page h1  /* larger heading on home page */
 {padding: 20px 0 0 110px;  min-height: 90px;
  font-size: 4em;  font-weight: bold;  line-height: 1;  letter-spacing: normal;  color: #226193}

#home-page h1 span  /* sub-heading */
 {font-size: 0.375em;  font-weight: normal;  line-height: 1.1;  letter-spacing: 6px;  color: #CC0033}

#home-page h2  /* smaller top margin for headers on home page */
 {margin-top: 1em}

#home-page h2:first-child  /* no top margin for headers at top of left-col/right-col */
 {margin-top: 0;  padding: 0}

#intro-pic  /* 'moving' pic with introductory text */
 {margin: 0;  padding: 0;  border: solid white 1px;  height: 100px;
  background: white url(images/bins1.jpg) top center no-repeat}

#intro-pic:hover
 {background-image: url(images/bins2.jpg)}

#intro-text
 {font-size: 1.1em}

div.soc-banner  /* box for special announcements */
 {display: none}

a.ad1  /* advert positioned below left-hand menu items (contact us etc) */
 {display: block; margin: 0 10px 0 10px}

/* -- home page - recent updates ---------------------------------------------------------------------------- */

ul.update-list /* list of recent updates */
 {margin: 1em 0 1em 0;  border: none;  padding: 0;  text-align: left;  list-style: none}

ul.update-list span  /* note of when updated or added */
 {font-weight: normal;  font-style: italic;  font-size: xx-small;  color: black}

ul.update-list li  /* standard update item */
 {padding: 2px 8px 2px 8px;  margin-bottom: 10px;  border: solid 1px white;  background-color: transparent}

ul.update-list li:hover
 {background-color: white}

ul.update-list li.imp  /* update item emphasised with brighter background */
 {background-color: #F9E9C9}

ul.update-list li.imp:hover
 {background-color: white}

ul.update-list li.pic  /* update item with background image */
 {min-height: 46px;  background: transparent repeat top left;  font-size: 120%}

* html ul.update-list li.pic
 {height: 50px}  /* IE6 doesn't support min-height */

ul.update-list li.wildlife-art-b
 {background: #cbcbc9 url(images/wildlife2010b-detail.jpg) top right no-repeat;  min-height: 15px;  padding: 15px 200px 15px 8px}

ul.update-list li.wildlife-art
 {background: white url(images/wildlife2010-detail.jpg) top right no-repeat;  min-height: 15px;  padding: 15px 175px 15px 8px}

ul.update-list li.jthrelfall
 {background: white url(images/johnthrelfall2010-detail.jpg) center right no-repeat;  min-height: 15px;  padding: 15px 175px 15px 8px}

ul.update-list li.cbarrett
 {background: #4ca1fc url(images/cbarrett2010-detail.jpg) top left no-repeat;  min-height: 15px;  padding: 15px 8px 15px 175px}

ul.update-list li.dwoodhead
 {background: white url(images/dwoodhead2009-detail.jpg) center right no-repeat;  min-height: 15px;  padding: 15px 165px 15px 8px}

ul.update-list li.pbartlett
 {background: #c2e4fd url(images/pbartlett2009-detail.jpg) top right no-repeat;  min-height: 15px;  padding: 15px 130px 15px 8px}

ul.update-list li.kbrockie
 {background: white url(images/kbrockie2009-detail.jpg) top right no-repeat;  min-height: 15px;  padding: 15px 130px 15px 8px}

ul.update-list li.nhart
 {background: white url(images/nhart2-detail.jpg) top right no-repeat;  min-height: 15px;  padding: 15px 150px 15px 8px}

ul.update-list li.wneill
 {background: white url(images/william-neill-detail.jpg) center left no-repeat;  min-height: 15px;  padding: 15px 8px 15px 140px}

ul.update-list li.pic-sample-r  /* example recent update with image at right end */
 {background: white url(images/pic.jpg) center right no-repeat;  min-height: 15px;  padding: 15px 120px 15px 8px}

ul.update-list li.pic-sample-l  /* example recent update with image at left end */
 {background: white url(images/pic.jpg) center left no-repeat;  min-height: 15px;  padding: 15px 8px 15px 100px}

ul.update-list li.flowers  /* example of full-length background image, normal size text */
 {background: white url(images/flowers-detail.jpg) center left repeat-x;  min-height: 15px;  padding: 10px 8px 10px 8px}

ul.update-list li.seawatch
 {background: #a6bbdc url(images/sea.jpg) top center repeat}

ul.update-list li.seawatch:hover
 {background: white}

ul.update-list li.highlight
 {background: #ebdbb7}

ul.update-list li.highlight:hover
 {background: white}

ul.update-list li.books
 {background: white url(images/books-h.jpg) bottom left repeat-x;  min-height: 71px}


/* -- home page - main menu --------------------------------------------------------------------------------- */

div.menu-sect  /* boxed menu section */
 {margin: 0 0 1em 0;  border: solid white 1px;  padding: 6px 8px 6px 8px;  text-align: left;  list-style: none;
  background: transparent}

div.menu-sect:hover
 {background: white}

div.menu-sect p
 {font-size: 0.9em;  margin: 0 0 5px 0;  padding: 0;  font-weight: normal}

div.menu-sect ul
 {margin: 0;  border: none;  padding: 0;  list-style: none;
  background: transparent}

div.menu-sect ul li
 {line-height: 1.01;  margin-bottom: 0.3em}


/* -- photo-area -------------------------------------------------------------------------------------------- */

div.photo-area  /* area containing all photos */
 {margin: 2em 0 0 0;  border: none;  padding: 0}

div.photo-area ul  /* 'list' of photos */
 {margin: 0;  border: none;  padding: 0;  list-style: none}

div.photo-area li  /* contains photo and caption as hyperlink */
 {margin: 0;  border: none;  padding: 0 0.5em 0 0.5em;
  float: left;  width: 15em;  min-width: 200px;
  text-align: center;  text-decoration: none;  font-size: 0.9em}

* html div.photo-area li
 {width: 200px}  /* IE6 doesn't support min-width */

div.photo-area a
 {display: block;  text-decoration: none}

div.photo-area img  /* thumbnail displayed centrally within hyperlink 'block'; default size 160 x 120px */
 {display: block;  margin: 0 auto 0 auto;  border: solid 1px #226193;  padding: 0;  width: 160px;  height: 120px}

div.photo-area span  /* contains picture caption, set to 'block' to position below photo */
 {display: block;  margin: 0.25em 0 0 0;  border: none;  padding: 0;  height: 5em}

* html div.photo-area span  /* allow extra vertical space for caption in IE6, as width doesn't expand with font size */
 {height: 7em}

div.photo-area span span  /* revert to 'inline' for nested spans */
 {display: inline}

div.photo-area span.mount  /* 160 x 120px 'surround' for thunbnails smaller than this */
 {display: block;  margin: 0 auto 0 auto;  border: none;  padding: 0;  width: 162px;  height: 122px;  overflow: hidden}

#photo-menu-pic  /* image containing small pics for photo menu page */
 {margin: 0;  padding: 0;  border: solid white 1px;  height: 100px;
  background: white url(images/photo-menu.jpg) top center repeat}

div.photo-area span.pv-caption  /* hidden caption for passing to photo viewer */
 {display: none}

/* -- 'feature' boxes for news items etc -------------------------------------------------------------------- */

div.feature  /* box containing one news item etc (full width) */
 {clear: both;  margin: 0 0 1em 0;  padding: 1%;  border: solid white 1px;  width: 100%}

div.feature-l  /* box containing one news item etc (left col) */
 {float: left;  clear: left;  margin: 0 0 1em 0;  padding: 1%;  border: solid white 1px;  width: 46%}

div.feature-r  /* box containing one news item etc (right col) */
 {float: right;  clear: right;  margin: 0 0 1em 0;  padding: 1%;  border: solid white 1px;  width: 46%}

div.feature h2, div.feature-l h2, div.feature-r h2  /* no top margin if inside feature box */
 {margin-top: 0}


/* -- directories ------------------------------------------------------------------------------------------- */

div.directory-sect h2  /* alphabetic caption */
 {margin: 0;  padding: 0;  text-align: left}

div.directory-sect h3
 {margin: 0;  padding: 0;  text-align: left}

div.directory-sect caption
 {margin: 0;  border: none;  padding: 0;  text-align: left;
  font-size: 1.75em;  font-weight: bold;  font-family: Georgia, Verdana, Geneva, sans-serif;  color: #226193}

div.directory-sect  /* boxed directory section */
 {margin: 2em 0 2em 0;  border: solid white 1px;  padding: 0.25em 1em 0.25em 1em;  text-align: left;
  background: transparent}

div.directory-sect ul
 {margin: 0;  padding: 0;  list-style-type: none}

div.directory-sect ul li
 {line-height: 1.01; margin: 0.5em 0 0.5em 0}

div.directory-sect td.ename
 {width: 20em}


/* -- NBN gateway ------------------------------------------------------------------------------------------- */

div.nbn-county
 {width: 600px;  height: 600px;  background: white top left no-repeat;  margin: 0;  border: solid black 1px;  padding: 0}

div.nbn-scotland  /* hide bottom portion of UK map */
 {width: 600px;  height: 400px;  background: white top left no-repeat;  margin: 0;  border: solid black 1px;  padding: 0;  overflow: hidden}


/* -- misc pages -------------------------------------------------------------------------------------------- */

#atlas-agreement div.content-region
 {min-width: 860px}

#branch-text, #where-to-watch-text
 {margin-left: 270px;  padding: 0;  border: none;  background: none}

div.calendar-h2  /* box with same top margin as <h2>, and calendar background image */
 {margin: 3.5em 0 0.5em 0;  border: none;  padding: 0 0 0 60px;  min-height: 27px;
  background: transparent url(images/calendar.jpg) left center no-repeat}

div.calendar-h2 h2
 {margin-top: 0}

/* -- membership -------------------------------------------------------------------------------------------- */

#membership thead
 {font-weight: bold;  color: #226193}

#membership #category
 {width:80%}

#membership #rate
 {font-weight: bold}

#membership td
 {padding-right: 2em}
 
#membership-banner  /* image containing small pics for membership page */
 {margin: 0 0 2em 0;  padding: 0;  border: solid white 1px;  height: 120px;
  background: transparent url(images/membership-pics.jpg) top center repeat}

/* -- sbrc -------------------------------------------------------------------------------------------------- */

#brc-decisions table, table.subspecies-le20
 {width: 100%;  border-collapse: collapse;  border: solid 1px white}

#brc-decisions td, table.subspecies-le20 td
 {padding: 0.25em 1em 0.25em 1em;  border: solid 1px white}

#brc-decisions col.species
 {width: 35%}

#brc-decisions col.site
 {width: 35%}

table.subspecies-le20 col.species
 {width: 30%}

table.subspecies-le20 col.subspecies
 {width: 30%}

/* -- scottish list ----------------------------------------------------------------------------------------- */

#scottish-list div.content-region  /* don't allow page to be shrunk too much or tables get squashed */
 {min-width: 900px}

#scottish-list table.subspecies
 {width: 100%}

#scottish-list table.species
 {width: 70%}

#scottish-list table.subspecies col.category
 {width: 6%}

#scottish-list table.subspecies col.species
 {width: 26%}

#scottish-list table.subspecies col.subspecies
 {width: 12%}

#scottish-list table.subspecies col.sci-species
 {width: 26%}

#scottish-list table.subspecies col.sci-subspecies
 {width: 16%}

#scottish-list table.subspecies col.status
 {width: 14%}

#scottish-list table.species col.category
 {width: 6%}

#scottish-list table.species col.species
 {width: 26%}

#scottish-list table.species col.sci-species
 {width: 38%}

/* -- publications ------------------------------------------------------------------------------------------ */

#publications #sbr div.indented
 {margin: 0 0 0 285px;  border: none;  padding: 0}

#publications #stkilda div.indented
 {margin: 0 0 0 215px;  border: none;  padding: 0}

/* -- clyde branch ------------------------------------------------------------------------------------------ */

ul.clydespecies
 {list-style: none}

ul.clydespecies li
 {float: left;  display: block;  width: 15em}

/* -- scottish bird report ---------------------------------------------------------------------------------- */

#sbr label.species
 {float: left;  margin-right: 1em;  font-weight: bold}

#sbr div.sbr-section  /* encloses SBR species section for one area/year */
 {margin: 0 0 2em 0;  padding: 0;  border: none;  border-top: solid white 1px}

#sbr #d1, #sbr #d2
 {background: transparent url(images/sbr-map.png) top left no-repeat; border: none}

#sbr p.status
 {font-style: italic;  color: #CC0033}

#sbr table
 {border-collapse: collapse;  border: solid 1px white}

#sbr table td, #sbr table th
 {border: solid 1px white;  padding: 1px 5px 1px 5px}

#sbr div.species-dropdown, #sbr div.area-checkboxes, #sbr div.year-checkboxes
 {margin-bottom: 1em}

#sbr div.area-checkboxes span
 {width: 14em;  display: inline-block}

#sbr div.year-checkboxes span
 {width: 6em;  display: inline-block}

#sbr .right-pic /* right-aligned container for image and caption */
 {width: 350px}

#sbr .right-pic img
 {width: 350px}

#sbr .right-pic div
 {font-size: 0.8em;  color: #CC0033;  text-align: center}

/* -- birds of scotland fund -------------------------------------------------------------------------------- */

#bos-fund h1
 {background-image: url(images/heading-logo-bos-fund.png);  padding: 40px 0 0 110px;  min-height: 88px}

* html #bos-fund h1
 {background-image: url(images/heading-logo-bos-fund.jpg);  /* IE6 doesn't support PNG images */
  height: 128px}  /* IE6 doesn't support min-height */

/* -- migrants ---------------------------------------------------------------------------------------------- */

#migrants table
 {width: 100%;  border-collapse: collapse;  border: solid 1px white;  font-size: 0.75em}

#migrants td, #migrants th
 {padding: 0.2em 0.2em 0.2em 0.2em;  border: solid 1px white;  text-align: left;  vertical-align: top}

#migrants th
 {font-weight: bold}

#migrants col.species
 {width: 10%}

#migrants col.arrivals
 {width: 18%}

#migrants div.content-region  /* don't allow page to be shrunk too much or tables get squashed */
 {min-width: 900px}

#migrants #d1, #migrants #d2
 {background-image: url(images/sedge-warbler.jpg)}

#migrants #d2:hover
 {background-image: url(images/sedge-warbler-credit.jpg)}

/* -- email directory --------------------------------------------------------------------------------------- */

#email div.main-content
 {padding-bottom: 100em}

/* -- constitution ------------------------------------------------------------------------------------------ */

#constitution h2, #constitution h3, #constitution p.notes
 {text-align: center}

/* -- login, passwords etc ---------------------------------------------------------------------------------- */

#login label, #change-password label
 {margin-right: 0.5em;  font-weight: bold}

#member-admin label
 {display: inline-block;  width: 13em;  font-weight: bold}

#login form, #change-password form, #member-admin form
 {margin-top: 2em;  margin-bottom: 2em}

#login form div, #change-password form div
 {display: inline-block;  float: left;  margin-right: 2em;  margin-bottom: 1em}

#member-admin form div
 {margin-bottom: 1em}

#login p.error-message, #login p.notes, #change-password p.error-message
 {clear: both}


/* -- art gallery ------------------------------------------------------------------------------------------- */

#art-gallery #d1, #art-gallery #d2
 {background-image: url(images/donald-watson-gallery.jpg)}


/* -- conferences ------------------------------------------------------------------------------------------- */

#conference-banner  /* image containing small pics for conference page */
 {margin: 0 0 2em 0;  padding: 0;  border: solid white 1px;  height: 120px;
  background: transparent url(images/conference-pics.jpg) top center repeat}

/* -- lothian bird bulletin --------------------------------------------------------------------------------- */

#lbb div.indented
 {margin: 0 0 0 175px;  border: none;  padding: 0}