/*
Style Sheet for Skamania County RCC
*
Site Colors:
grey:#efefef
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;}

body {
  background-color:#efefef;
}

header {
  min-height:118px;
  margin:0;
  border:0;
  padding:0;
  color:#ffffff;
  background-color:#103566;
  background-image: 
  url("images/logo_elephant_273x118.png"),
  url("images/SkamaniaRepublicansHeaderStripe_8x188.png");
  background-repeat: no-repeat, repeat-x;
  background-position: top center;
}

header h1 {
  max-width:287px;
  margin:0;border:0;padding:0;
  margin:0 auto;
  padding-top:118px;
  font-size:18px;
  text-align: center;
}
header h1 a {text-decoration:none;color:#fff;}

nav {
  font-family:Lato;
  line-height:18px;
  font-weight:400;
  font-style:normal;
  color:#fff;
}
nav a {display:inline-block;margin:0;padding:1em;color:white;font-weight:600;cursor:pointer;text-decoration:none;line-height:21px;}
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.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.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%;
  color:#000;
  background-color:#ffffff;
}
section h3 {margin:40px 0 5px;padding-bottom:0;}
section p {text-align:justify;}

section#HOME {
  display:block;
  padding-top:0;
  text-align:center;
  color:#000;
  background-color:#ffffff;
}

section#HOME #ANNOUNCEMENT_BANNER {width:80%;max-width:400px;margin:15px auto 0;}

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

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:#ffffff;}
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:0 auto;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:#000000;background-color:#ffffff;}
section#NEWS a {}
section#NEWS a:hover {}

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 {display:block;padding:10px ;color:#ffffff;text-decoration:none;text-align:left;}
footer a:hover {background-color: #000066;}
footer 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*/
body {width: 100%;}
nav {display: none;}
section {display: block;}
section#EVENTS iframe {display: none;}
p {clear:right;}

@media only screen and (min-width: 600px) {
/* For tablets: */
/* position: -webkit-sticky; /* Safari */
/* position: sticky;
top: 0; */
header {background-position: top right;}
header h1 {max-width:100%;margin-right:320px;padding:72px 0 0 5%;text-align: center;}
section {display: block;}
p {clear:none;}
div#LD17 {width:45%;min-width:280px;margin:0 0 10px 30px;float:right;}
}

@media only screen and (min-width: 684px) {
header h1 {font-size:20px;}
}

@media only screen and (min-width: 768px) {
/* For desktop: */
section#HOME div#ENDORSEMENTS h3 {margin:.4em;text-align:left;font-size:larger;}
header h1 {font-size:24px;}
}

@media only screen and (min-width: 992px) {
/* For desktop-widescreen: */
body {max-width:1000px;}
header h1 {padding-top:16px;}
nav {display:block;margin-top:14px;}
section {display:none;}
section.current {display:block;}
section#CAUCUS, section#ABOUT, section#PLATFORM, section#LEADERSHIP, section#NEWS, section#EVENTS {color:#000;background-color:#ffffff;}
section#EVENTS iframe {display:block;}
}