/*
Style Sheet for Skamania County RCC
*
Site Colors:
Red:#840000
Blue:#000066 
*/

@font-face {
  font-family: raffleFont;
  src: url(fonts/Bangers-Regular.ttf);
}

* {border:0;padding:0;box-sizing:border-box;}
html, body {margin:0 auto;font-family:Lato;font-size:large;}

header {
margin:0;border:0;padding:0 0 0;text-align:center;color:#000000;background-color:#eee;}
header h1 {font-size:1em;color:#000066;margin:0;padding:0 0 10px;}
header h1 a {text-decoration:none;color:#000066;}

nav {font-family:Lato;line-height:18px;font-weight:400;font-style:normal;color:#ffffff;background-color:#800000;}
nav a {display:inline-block;margin:0 -2px;padding:1em;color:white;font-weight:600;cursor:pointer;text-decoration:none;}
nav a:hover {color:white;background-color:#000099;}
nav a:active {background-color:#0000cc;padding:1em 1.1em .9em .9em;}
nav a.current {background-color:#000066;}
nav a.current:hover {cursor:default;}
nav a.current:active {background-color:#000066;padding:1em;}

a.anchor {display:block;padding:20px;color:#ffffff;background-color:#000066;text-decoration:none;text-align:center;border-radius: 30px;}
a.anchor:hover {background-color: #000066;text-decoration:underline;}
a.anchor:active {padding: 19px 21px 21px 19px;background-color:#0000cc;}

.shadow {box-shadow: -2px -1px 8px 0 rgba(255, 255, 255, 0.6), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  }

.flex-container > div {
  margin: 20px auto;
  padding: 10px 10px 0 10px;
  box-shadow: -2px -1px 8px 0 rgba(255, 255, 255, 0.6), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.flex-container > div > p {
  text-align:center;
}

.boxflex p {text-align:center;}

section {display:block;margin:0;padding:5%;background-color:#fff;font-size;3em;}
section h3 {margin:40px 0 5px;padding-bottom:0;}
section p {text-align:justify;}

section#CAUCUS {display:block;}

section#HOME {display:block;padding-top:0;text-align:center;color:#ffffff;background-color:#840000;border:1px solid #800000;}

section#HOME p {min-width:280px;}

section#HOME a#buy {display:inline-block;width:150px;margin:40px;border:2px solid #ffffff;padding:6px 20px 7px;text-decoration:none;cursor:pointer;color:#000000;background-color:#f7f251;border-radius:50%;font-weight:900;}
section#HOME a#buy:hover {border:2px solid #000;color:blue;}
section#HOME a#buy:active {color:#000;background-color:yellow;padding: 5px 21px 8px 19px;}

section#HOME div.shadow-box {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.29);}
section#HOME div#DINNER {margin:0;padding: 20px 0;color:#fff;background-color:#000066;}
section#HOME div#ORDERFORM {margin:0;padding:30px 0 0;background-color:#eee;}
section#HOME div#RAFFLE {margin:5% auto;padding:5% 0;text-align:center;}
section#HOME div#RAFFLE h3 {
  font-family: raffleFont;
  font-size: 3em;
  letter-spacing: .1em;
  color:#aa0000;
  text-shadow: 1px 1px 2px white, 0 0 25px yellow, 0 0 45px yellow;
  }

div#TICKET {
  text-align:center;
  margin:10px auto;
  }
div#RAFFLE img {
  display:inline-block;
  max-width:250px;
  min-width:100px;
  height:auto;
  margin:0 auto;
  box-shadow: -2px -1px 8px 0 rgba(255, 255, 255, 0.6), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
div#RAFFLE p {
  width:90%;
  margin:3% auto 1%;
  border:1px solid black;
  padding: 3%;
  background-color:white;
  text-align:center;
}

section#PLATFORM {color:#fff;background-color:#000066;}
section#PLATFORM p {margin:0;}
section#PLATFORM p:last-child {margin-bottom:5%;}

section#LEADERSHIP {background-color:#eee;}
section#LEADERSHIP p {text-align:left;}
section#LEADERSHIP table#PCO {width:100%;}
section#LEADERSHIP table#PCO th {vertical-align:top;padding-right:5%;}
section#LEADERSHIP table#PCO td {vertical-align:top;font-size:smaller;}
section#LEADERSHIP table#PCO {margin:0 auto;text-align:left;}

section#EVENTS iframe {margin:20px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.29);}

section#NEWS {color:#fff;background-color:#840000;}

footer {padding:2% 5% 150px;color:#ffffff;background-color:#840000;}
footer div {width:49%;}
footer div#right {float:right;}
footer h2 {margin:20px 0;}
footer p {padding-left: 10px;}
footer a, section#NEWS a {display:block;padding:10px ;color:#ffffff;text-decoration:none;text-align:left;}
footer a:hover, section#NEWS a:hover {background-color: #000066;}
footer a:active, section#NEWS a:active {padding: 9px 11px 11px 9px;background-color:#0000cc;}
footer img {width:200px;height:40px;display:block;}

footer form#contactForm {margin:30px 0}
footer form#contactForm input {display:block;width:100%;margin: 8px 0;border:1px inset #777777;padding:5px;}
footer form#contactForm textarea {display:block;width:100%;margin: 8px 0;padding:5px;resize:vertical;}
footer form#contactForm button#submitBtn {width:50%;margin:1px;border:1px outset #999;padding:5px;background-color:#ccc;font-size:large;font-weight:400;}


/* For mobile phones: 320px - 428px*/
{width: 100%;}
nav {display: none;}
section {display: block;}
section#EVENTS iframe {display: none;}
p {clear:right;}
div.flexcontainer img {}
div#JOEKENT > div > img {height:135px;}

@media only screen and (min-width: 600px) {
/* For tablets: */
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
section {display: block;}
section#HOME div#RAFFLE img {margin: 5%;}
p {clear:none;}
div#LD17 {width:45%;min-width:280px;margin:0 0 10px 30px;float:right;}
div#JOEKENT > div > img {height:240px;}
}

@media only screen and (min-width: 768px) {
/* For desktop: */
div#JOEKENT > div > img {height:280px;}
}


@media only screen and (min-width: 992px) {
/* For desktop-widescreen: */
body {max-width:1200px;}
nav {display:block;margin:0;border:0;}
section {display:none;}
section.current {display:block;}
section#CAUCUS, section#HOME, section#ABOUT, section#PLATFORM, section#LEADERSHIP, section#EVENTS {color:#000;background-color:#fff;}
section#EVENTS iframe {display:block;}
div#JOEKENT > div > img {height:300px;}
}