/* GENERAL PAGE SETUP */

/* includes padding and boder in total width or height */
/* sets padding and margin at 0px as the default */
* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px
}

/* centers the website */
.content {
  max-width: 960px;
  margin: auto;
}

/* adds background image to site */
body {
    background-image: url("images/wood.jpg");
    margin: 0px;
    padding: 0px;
}


/* TOP SECTION OF THE PAGES */

/* creates top area of the page with top margin to move it down */
.top {
  margin-top: 30px;
}

/*styles the boot image at top of most pages */    
.boots {
    width: 60px;
    border: 2px solid #cc0000;
    border-radius: 20%;
    margin-right: 15px;
    vertical-align: -15px;
}

/* styles the main website headline */
h1 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 45px;
    color: white;
    display: inline; 
}

/* creates the main navigation bar */

/* takes out the bullets and padding and margins */ 
.nav-main {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* puts the navigation in a row */
.nav-main li{
  float: right;
}

/* makes the navigation into boxes */
.nav-main li a, .nav-main li a:visited {
  display: block;
  padding: 10px;
  font-family: 'Noto Sans', Tahoma, sans-serif;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
}

/* styles the main navigation links */
.nav-main li a:hover, .nav-main li a:active {
  color: #cc0000;
}

/* clears float after the top */
.top:after {
  content: "";
  display: table;
  clear: both;
}


/* HEADER SECTION OF THE PAGES */

/* creates header area of the page */
.header {
  background-color: #ffffcc;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
}

/* styles the section headlines */
h2 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 36px;
    color: #cc0000;
    padding: 0px;
}

/* styles area for rule line under section headlines */
.ruleline {
  background-color: #ffffcc;
  padding: 0px;
}

/* styles the rule line under the section headlines when no subnav */
hr { 
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: #cc0000;
  background-color: #cc0000;
  margin: 0px;
}

/* styles the tagline */
h5 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 16px;
    color: #000000;
    padding-top: 20px;
    float: right;
}

/* creates the subnavigation bar */

/* takes out the bullets and padding and margins */ 
.nav-sub {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* puts the subnavigation in a row */
.nav-sub li {
  float: right;
}

/* makes the subnavigation into boxes */
.nav-sub li a, .nav-sub li a:visited {
  display: block;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  font-family: 'Noto Sans', Tahoma, sans-serif;
  font-size: 14px;
  color: #cc0000;
  text-align: center;
  text-decoration: none;
}

/* styles the subnavigation links */
.nav-sub li a:hover, .nav-sub li a:active {
  color: #000000;
}

/* clears float after the subnavigation */
.nav-sub:after {
  content: "";
  display: table;
  clear: both;
}

/* clears float after the header area */
.header:after {
  content: "";
  display: table;
  clear: both;
} 


/* BELOW HEADER SECTION OF THE HOME PAGE */

/* creates belowheader area of the home page */
.belowheader {
  border-radius: 10px;
  background-color: #800080;
  padding: 10px 10px 13px 10px;
  margin: 15px 0px 0px;
}

/* styles the text in the belowheader area */
.belowheader p {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 1.6;
    padding-top: 5px;
    padding-bottom: 5px
}

/* styles the belowheader links */
.belowheader a, .belowheader a:visited {
    color: #ffd700;
    text-decoration: underline;
}

.belowheader a:hover, .belowheader a:active {
    color: #ffd700;
    text-decoration: none;
}

/* creates extra belowheader area of the home page */
.exbelowheader {
  border-radius: 10px;
  background-color: #cc0000;
  padding: 10px 10px 13px 10px;
  margin: 15px 0px 0px;
}

/* styles the text in the extra belowheader area */
.exbelowheader p {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 1.6;
    padding-top: 5px;
    padding-bottom: 5px
}

/* styles the extra belowheader links */
.exbelowheader a, .exbelowheader a:visited {
    color: #ffffff;
    text-decoration: underline;
}

.exbelowheader a:hover, .exbelowheader a:active {
    color: #ffffff;
    text-decoration: none;
}

/* MAIN SECTION OF THE PAGES */

/* creates main area of the page */
.main {
  background-color: #ffffcc;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
}

/* clears float after the main area */
.main:after {
  content: "";
  display: table;
  clear: both;
}


/* FOOTER SECTION OF THE PAGES */

/* creates footer area of the page */
.footer {
  background-color: #ffffcc;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

/* styles the text in the footer area */
p.footer {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 12px;
    color: #cc0000;
    text-align: center;
}


/* COLUMNS */

/* creates a column container to keep multiple columns the same length */
.col-container {
  display: table;
  width: 100%;
}

/* creates two columns - same width - for header area AND sidebar photos */
.column-header-both {
  display: table-cell;
  vertical-align: top;
  width: 50%;
  background-color: #ffffcc;
  padding: 0px;
}

/* creates the wide left column for the main area */
.column-main-left {
  display: table-cell;
  vertical-align: top;
  background-color: #ffffcc;
  width: 66.66%;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 20px;
}

/* creates the narrow right column for the main area */
.column-main-right {
  display: table-cell;
  vertical-align: top;
  background-color: #ffffcc;
  width: 33.33%;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 10px;
}

/* creates the narrow left column for donors */
.column-sponsors-left {
  display: table-cell;
  vertical-align: top;
  background-color: #ffffcc;
  width: 33.33%;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 20px;
}

/* creates the wide right column for donors */
.column-sponsors-right {
  display: table-cell;
  vertical-align: top;
  background-color: #ffffcc;
  width: 66.66%;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 10px;
}

/* creates five columns - same width - for team photos */
.column-team {
  display: table-cell;
  vertical-align: top;
  width: 12.5%;
  background-color: #ffffcc;
  padding-right: 10px;
  padding-left: 10px;
}

/* clears float after the row */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* SIDEBARS */

/* puts a box around the sidebars */
.sidebar {
  border: 1px solid #cc0000;
}

/* creates the bar headings for the sidebars */
.sidebar button {
  background-color: #cc0000;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  width: 100%;
}

/* styles the text in the sidebars */
.sidebar p {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 13.5px;
    color: #000000;
    padding: 5px;
    line-height: 1.6;
}


/* ONLINE RAFFLE ORDERING CODE */

/* create container for the code */
.raffle-container {
  text-align: center;
}

/* set display of code */
.raffle {
  display: inline-block;
}


/* HEADINGS */

/* styles the specific page info headlines */
h3 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 28px;
    color: #cc0000;
    padding-bottom: 10px;
}

/* styles the specific text divion headlines */
h4 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 22px;
    color: #cc0000;
    padding: 10px 0px;
}

/* styles the cancellation headline */
h6 {
    font-family: 'Roboto Condensed', Impact, sans-serif;
    font-size: 18px;
    color: #28B463;
    padding: 10px 0px;
}


/* TEXT AND LISTS */

/* sets em as tag for italic */
em { 
  font-style: italic;
}

/* sets strong as tag for bold */
strong { 
  font-weight: bold;
}

/* styles the main text and list items */
.column-main-left p, .main p, .main li {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 15px;
    color: #000000;
    padding: 0px;
    margin-bottom:15px;
    line-height: 1.6;
}

/* styles the text in the calendars */
p.calendar {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 13.5px;
    text-align: center;
    color: #000000;
    padding: 15px 0px;
    line-height: 1.6;
}

/* styles the text in the captions */
p.caption {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 12.5px;
    color: #000000;
    padding: 5px 0px;
}

/* styles the text in the date labels */
p.datelabel {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 13px;
    font-style: italic;
    color: #000000;
    padding: 5px 0px;
}

/* styles the text in the team photo labels */
p.team {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 5px 0px 25px 0px;
}

/* styles the form labels */
.label {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 14px;
    color: #000000;
}

/* styles the alz donor text -- NOT SURE this is actually used */
.sponsor p, .sponsor li {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 13.5px;
    color: #000000;
    padding: 0px;
    line-height: 1.6;
}

/* styles the alz donor lists */
.column-sponsors-left li, .column-sponsors-right li {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 13.5px;
    color: #000000;
    padding: 0px;
    margin-left: 20px;
    line-height: 1.6;
}

/* styles the unordered list for the calendar page */
.column-main-left ul {
    padding: 0px 20px 20px;
}

.column-main-left li {
    font-family: 'Noto Sans', Tahoma, sans-serif;
    font-size: 15px;
    color: #000000;
    padding: 0px;
    line-height: 1.6;
}

/* styles the ordered list for the bylaws page */
.main ol {
    list-style-type: decimal;
    padding: 0px 20px;
}


/* LINKS */

/* styles non-navigation links */
a, a:visited {
    color: #cc0000;
    text-decoration: underline;
}

a:hover, a:active {
    color: #cc0000;
    text-decoration: none;
}

/* styles alzheimers pages links */
a.alzheimers, a.alzheimers:visited {
    color: #800080;
    font-weight: bold;
    text-decoration: underline;
}

a.alzheimers:hover, a.alzheimers:active {
    color: #800080;
    font-weight: bold;
    text-decoration: none;
}