/*
  Colours used:
OVAR Crest:
  green=#42634a
  red=#ce3929
  text color: #031 (needs to be darker than logo to show up)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent none repeat scroll 0%;
}

html {
    background-color: #201000;
}

body {
    width: 980px;
    margin: 10px auto 10px auto;
 }

p+p, ul+p {
    margin-top: 0.5em;
}

#wrapper {
    background: url('../images/OVAR__logo_wallpaper_196px.gif') repeat;
    width:100%;
    overflow: hidden;
    font-size: 12pt;
    font-family: calibri,arial,sans-serif;
    color: #031;
    /*font-family: garamond,serif;*/
}

#banner {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 195px; /* The height of the logo image */
    color: #42634a;
}

#pageContent {
    float: left;
    width: 940px;
    padding: 20px;
    min-height: 200px;
    overflow: hidden;
    background-color: #eee;
    font-size: 14pt;
}

#pageContent img {
    margin: 10px;
}

#pageContent ul, #pageContent ol {
    list-style-position:inside;
    margin-left: 1em;
    margin-right: 2em;
    text-align: justify;
    line-height: 100%;
}

#pageContent p {
    text-align: justify;
    margin-left: 1em;
    margin-right: 1em;
    line-height: 110%;
}

#pageContent h1+p {
    margin-top: 1em;
}

#pageContent h1 {
    font-size: 20pt;
    font-weight: bold;
    text-align:center;
}

#pageContent h2 {
    font-size: 18pt;
    text-align:center;
}

#pageContent h3 {
    font-size: 16pt;
    text-align:center;
}

#pageContent h4 {
    font-size: 16pt;
    font-style: italic;
    text-align:center;
}

.center {
    text-align:center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.twoColumn {
    -moz-column-count: 2; /* Firefox */
    -webkit-column-count: 2; /* Safari and Chrome */
    column-count: 2;
    column-fill: balance;
}

div.columnRuleThinBlack {
    column-rule:1px solid black;
    -moz-column-rule:1px solid black; /* Firefox */
    -webkit-column-rule:1px solid black; /* Safari and Chrome */
}

footer {
    float: left;
    background-color: #42634a;
    color: white;
    width: 100%;
    font-style: italic;
    border-top: 1px outset #42634a;
}

/* Home page divs and styles */
#leftColumn {
    width: 310px;
    float: left;
    padding-bottom: 2000px;
    margin-bottom: -1990px;
}

#nextMeeting {
    background-color: lightgray;
    padding: 5px;
    border: 3px #eee outset;
    text-align: center;
}

#announcements {
    background-color: lightgray;
    padding: 5px;
    margin-top: 10px;
    height: 100%;
    margin-bottom: 10px;
}

#announcements h1,
#announcements h2,
#announcements h3,
#announcements h4,
#announcements p
{
    text-align: center;
}

#rightColumn {
    width: 600px;
    margin-left: 30px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: right;
}

/* Site uses lots of images with a caption below: */
div.imgWithCaptionBelow {
    width: 100%;
    padding-bottom: 1em;
}

div.imgWithCaptionBelow>img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}    

div.imgWithCaptionBelow>p {
    text-align: center !important;
}

/* div with black line across bottom. Mostly used in Articles */
div.borderBottom {
    border-bottom:1px solid black;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

/* divs to stick a img-with-caption in, either left or right */
div.leftImg {
    float:left;
    margin-right:1em;
}
div.rightImg {
    float:right;
    margin-left:1em;
}
/* Make the caption bold: */
div.leftImg p, div.rightImg p {
    font-weight: bold;
}

/* Generic table style */
/* Basic border, cell contents centered */
/*table {
    border-collapse: collapse;
}*/

caption {
    font-weight: bold;
    font-size: 110%;
}

table, th, td {
    border: 1px solid black;
}

table td {
    padding: 0px 5px 0px 5px;
    text-align: center;
}

/* No internal or external borders */
table.noborders, table.noborders td, table.noborders th {
    border: none;
    border-collapse: collapse;
}
table.noborders th {
    padding-left: 3px;
}

table.left td { text-align: left; }

table.alternatingRowBackgrounds tr:nth-child(odd) {
    background-color: #bbb;
}
table.alternatingRowBackgrounds tr:nth-child(even) {
    background-color: #ddd;
}

table.equalWidths td {
    width:8%;
}

/* Outer border outset but cells slightly inset */
table.standout {
    border: 5px outset black;
    background-color: #f4f4f4;
    margin-bottom: 1em;
}

table.standout td, table.standout th {
    border: 1px inset black;
}

/* Specific tables */
table.layouts {
    width: 100%;
}

table.layouts thead {
    background-color: #ccc;
}

table.layouts td:first-child {
    text-align: left !important;
}
table.layouts td:last-child {
    text-align: left !important;
}
table.layouts td:nth-child(2) {
    text-align: center;
}

.ext {
    background-color: #ddf;
}

table.layouts tr.notAvailable {
    background-color: #888;
}

table.mcewan {
    width: 250px;
}

/* Event Calendar styles */
table.eventCalendar {
    border: 5px outset black;
    background-color: #f4f4f4;
    font-size: 12pt;
}

table.eventCalendar td, table.eventCalendar th {
    border: 1px inset black;
    border-collapse: no-collapse;
}

table.eventCalendar thead {
    background-color: #ccc;
    font-size: 110%;
    text-align: center;
}    

table.eventCalendar td:nth-child(2) {
    width: 9em; /* Make date/time column wide */
}

tr.ottawaEvent {
    background-color: #ddd;
}

tr.ovarEvent {
    background-color: yellow;
}

/* Place and date are centered; description is left-aligned */
table.eventCalendar td {
    text-align: center;
    line-height: 100%;
    padding-bottom: 0.3em;
}
table.eventCalendar td:last-child {
    text-align: left;
}

/* Place should be all bold; date and description only the first line should be bold: */
table.eventCalendar td:first-child,
table.eventCalendar td:nth-child(2)::first-line,
table.eventCalendar td:last-child::first-line
{
    font-weight: bold;
    font-size: 110%;
    line-height: 120%;
}

table.groupPhotos {
    border: none;
}

table.groupPhotos td {
    border: none;
    padding: 10px;
    vertical-align: top;
    width: 33%;
}

/* Lark Spur Line ad */
table.larkSpur {
    width: 100%;
}
table.larkSpur td:first-child {
    width: 8%;
}
table.larkSpur td:last-child {
    width: 92%;
    font-weight: bold;
    font-size: 120%;
    text-align: left !important;
}

/* divs in two columns, maybe with central border */
div.leftHalf {
    width: 49%;
    float: left;
}

div.rightHalf {
    width: 49%;
    float: right;
}

div.borderRight {
    padding-right: 10px;
    border-right: 1px solid black;
}
div.borderLeft {
    padding-left: 10px;
    border-left: 1px solid black;
}

.underline {
    text-decoration: underline;
}

/* Make some whitespace between rows */
table.tallRows tr {
    padding-bottom: 20px;
}

div.scannerFreq {
    border:1px solid black; 
    padding:5px
}
div.scannerFreq>table>tbody>tr>td {
    vertical-align: top;
}

div.scannerFreq>table>tbody>tr>td>table td:last-child {
    text-align: left;
}

ul.horizontal {
    list-style: none;
}
ul.horizontal li {
    float: left;
    display: inline;
    text-align: center;
    margin-right: 1em;
}

ul.itemSpaced li {
  margin-top:0.2em;
}

.buttonList {
    background-color: transparent;
    padding: 0;
    float: left;
    display: block;
    font-size: 14pt;
    font-family: calibri,verdana,arial,sans-serif;
    font-style: normal;
    z-index: 10;
    list-style-type: none;
}
.buttonList li {
    float: left;
    display: inline;
    position: relative;
    color: white;
    background: #42634a;
    border: 2px outset #42634a;
    border-radius: 5px;
    margin-right: 3px;
}

.buttonList a {
    color: white;
    text-decoration: none;
    padding: 1px 3px 1px 3px;
}
.buttonList a:hover {
    color: yellow;
}

.buttonList li:active {
    border: 2px inset #42634a;
}

/* Slideshow styles */
#slideShowFrame {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: black;
    border: 10px grey inset;
    overflow: hidden;
}

div.fadingSlideShow { /* This contains the show */
    position: relative;
}

/* Have to do the show/hide on the contained elements rather than the whole div because IE is stupid */
/*div.fadingSlideShow>div {
    display: none;
}*/

div.fadingSlideShow img, div.fadingSlideShow p { /* Individual slide */
   position: absolute;
   display: none;  /* Start with everything invisible */
   margin: 0 !important;
}
div.fadingSlideShow p {
    color: white;
    text-align: left !important;
}

.controlPanel {
    background-color: transparent;
    padding: 0;
    float: left;
    display: block;
    z-index: 10;
    list-style-type: none;
    margin-top: 5px;
}
.controlPanel li {
    float: left;
    display: inline;
    position: relative;
    color: white;
}

.controlPanel li:first-child button {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    padding-left: 1em;
}

.controlPanel li:last-child button {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    padding-right: 1em;
}

.controlPanel button {
    color: white;
    font-size: 14pt;
    font-family: calibri,verdana,arial,sans-serif;
    font-style: normal;
    background-color: #42634a;
    padding: 1px 3px 1px 3px;
    background: #42634a;
    border-top: 2px outset #42634a;
    border-bottom: 2px outset #42634a;
    border-left: 1px outset #42634a;
    border-right: 1px outset #42634a;
}
.controlPanel button:hover {
    color: yellow;
}

.controlPanel button:active {
    border-top: 2px inset #42634a;
    border-bottom: 2px inset #42634a;
    border-left: 1px inset #42634a;
    border-right: 1px inset #42634a;
}