/* Main site tags */
/* Boy Color: Green rgba(24,71,29, 1.0);
   Boy Color: Gold rgba(186,93,9, 1.0);
   Boy Color: Light Tan rgba(233, 233, 228, 1.0);
   Boy Color: Dark Tan rgba(173,157,123, 0.5);
   Cub Color: Blue rgba(9,71,118, 1.0);
   Cub Color: Light Gold rgba(255,224,120, 1.0);
   Cub Color: Dark Gold rgba(145,114,14, 1.0);
   Cub Color: Light Gray rgba(179,179,179, 1.0);
   Cub Color: Dark Gray rgba(102,102,102, 1.0);*/
   
body {
    margin: 0; 
    font-family: 'roboto-con-reg', Arial, serif;     
}
body.boy {
    background-color: rgba(233,233,228, 1.0);
    color: rgba(24,71,29, 1.0);     
}
body.girl {
    background-color: rgba(154,179,213, 1.0);
    color: rgba(0,51,102, 1.0);     
}
body.cub {
    background-color: rgba(9,71,118, 1.0);
    color: rgba(102,102,102, 1.0);     
}
body.neutral {
    background-color: rgba(255,255,255, 1.0);     
}
h1, h2, h3{
    margin: 0; 
    font-family: 'alice', serif;
    padding: 5px;
}
h1 {
    font-size: 4vw; 
}
h2{
   /*color: rgb(0,51,102);*/ 
   font-size: 4vw;
   text-align: center;    
}
h3{
    font-size: 2vw;    
}
h4 {
    color: black;
    padding: 5px;
    margin:0;
    font-size: 1vw;
}
p{
    margin:0px;
    color: black;
}
hr {
    margin: 0 auto;
    width: 33%;
    height: 1px; 
    background-color: black; 
}
img {
    display: block;
    width: 100%;
    height: auto;
} 
a {
   font-family: 'roboto-con-reg', Arial, serif;
   color: rgba(206,17,38, 1);
   text-decoration: none;
   text-align: center;
}
a:hover{
    font-style: italic;
}
a.btn {
    background-color: rgba(206,17,38, 1);
    border: none;
    color: white;
    font-family: 'roboto-con-reg', serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 12px;
    padding: 6px 12px;
    margin: 0px 5px 0px 0px;
    z-index: 9;    
}
a.btn.boy {
    background-color: rgba(186,93,9, 1.0);
    color: white;    
}
a.btn.cub {
    background-color: rgba(9,71,118, 1.0);
    color: white;    
}
.ltblue.girl {
   background-color: rgba(154,179,213, 0.6);
   border: 0px solid red;  
}
.ltblue.boy {
   background-color: rgba(233,233,228, 0.6);
   border: 0px solid red;  
}
.ltblue.cub {
   background-color: rgba(255,224,120, 0.3);
   border: 0px solid red;  
}
.dkblue.girl {
   background-color: rgba(0,51,102, 0.5);
   color: white;
   border: 0px solid green; 
}
.dkblue.boy {
   background-color: rgba(173,157,123, 0.5);
   color: rgba(233, 233, 228, 1.0);
   border: 0px solid green; 
}
.dkblue.cub {
   background-color: rgba(255,224,120, 0.9);
   color: rgba(9,71,118, 1.0); 
   border: 0px solid green; 
}
.btn {
    background-color: rgba(206,17,38, 1);
    border: none;
    color: white;
    font-family: 'roboto-con-reg', serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 12px;
    padding: 6px 12px;
    margin: 0px 5px 0px 0px;
    z-index: 9;    
}
.btn.boy {
    background-color: rgba(186,93,9, 1.0);
    color: white;    
}
.btn.cub {
    background-color: rgba(9,71,118, 1.0);
    color: white;    
}
.btn.thin {
    padding: 1px 12px;   
}
.btn.pay {
    background-color: rgba(76, 103, 72, 1);   
}
.btn:hover {
    font-style: italic;
    cursor: pointer;
}
.btn.display {
    background-color: rgba(237,228,218, 0.8);
    border-radius: 0px;
    color: rgba(24,71,29, 1.0);
    font-family: 'roboto-con-reg', serif;
    padding: 0px;
    width: 70px;
    height: 26px;
    margin: 0px -22px 0px -26px;
    transform: rotate(90deg);
    z-index: 9;    
}
.btn.display.boy {
    background-color: rgba(237,228,218, 0.8);
    color: rgba(24,71,29, 1.0);   
}
.btn.display.girl {
    
    background-color: rgba(154,179,213, 0.8);
    color: rgba(0,51,102, 1.0);   
}
.btn.display.cub {
    background-color: rgba(255,224,120, 0.8);
    color: rgba(102,102,102, 1.0);   
}
.body{
       background-color: rgb(255,255,255)             
    }
.topmarg{
   margin: 70px 0 0 0;
}
.topmarg.boy h2{
   color: rgba(24,71,29, 1.0);
}
input[type=text]{
  width: 75%;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid rgb(154,179,213);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-size: 14px;
  border-radius: 10px; 
}
input[type=text]:focus {
  border: 1px solid rgb(0,51,102);;
}
input[type=password]{
  width: 75%;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid rgb(154,179,213);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-size: 14px;
  border-radius: 10px;
}
input[type=password]:focus {
  border: 1px solid rgb(0,51,102);;
}
textarea{
  width: 75%;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid rgb(154,179,213);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: inherit; 
}
textarea:focus {
  border: 1px solid rgb(0,51,102);
  font-family: inherit;
  font-size: inherit;
}
.dropdown{
  width: 75%;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid rgb(154,179,213);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-size: 14px;
  border-radius: 10px; 
}
.dropdown:focus {
  border: 1px solid rgb(0,51,102);;
}
@font-face {
  font-family: "alice";
  src: url(fonts/alice-regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: "roboto-con-reg";
  src: url(fonts/roboto-condensed-regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: "roboto-con-lite";
  src: url(fonts/roboto-condensed-light.ttf) format('truetype');
  font-weight: normal;
  font-style: normal; 
}

/* Main menu layout */

#navigation {
    /* navigation bar class */ 
    font-family: 'roboto-con-reg', serif;
    text-align: right;     
}
#navigation .bar{
    /* rectangular navigation bar */
    position: fixed;
    height: 70px;
    width: 100%;    
    line-height: 70px;
    z-index: 10;
    border: 0px solid black;     
}
#navigation .round {
   /* round portion under logo */
   height: 50px;
   width: 100px;
   position: fixed;
   top: 70px;
   border-radius: 0 0 50px 50px;  
}
#navigation .logoback {
   /* dark rectangle under logo */ 
   height: 70px;
   width: 260px;
   position: fixed;

   border: 0px solid purple; 
}
#navigation .logoback.boy {
   /* dark rectangle under logo */ 
   color: rgba(24,71,29, 1.0); 
}
#navigation .logoback.cub {
   /* dark rectangle under logo */ 
   width: 240px;
   color: rgba(102,102,102, 1.0);
}
#navigation .logoback.girl {
   /* dark rectangle under logo */ 
   width: 275px;
   color: white;
}
#navigation img{
   /* BSA logo */ 
   width: 80px;
   position: absolute;
   top: 20px;
   left: 10px;
   border: 0px solid black;   
}
#navigation img.cub{
   /* Cub logo */ 
   width: 95px;
   position: absolute;
   top: 20px;
   left: 2px;
   border: 0px solid black;   
}
#navigation .scoutsbsa{
   /* scouts bsa text */ 
   font-family: 'roboto-con-lite', serif;
   font-size: 23px;
   line-height: 30px;
   margin-right: 5px;
   margin-top: 3px;
   text-align: right;
}
#navigation .troop{
    /* troop text */
    font-family: 'alice', serif;
    line-height: 30px; 
    font-size: 30px;
    margin-right: 5px;
    margin-top: 0px;
    text-align: right; 
}
#navigation .num{
    /* troop numeral has to be slightly larger */
    font-size: 36px;
    margin-right: 0;
}   
label {
    /* this displays the hamburger */
    display: none;
}
#toggle {
    /* this toggles the hamburger on and off */
    display: none;
}
#navigation .mainmenu {
    /* this adds the proper spacing to the navigation buttons */
    width: 60%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    margin: 0 52px 0 260px;
    display: flex;
    justify-content: space-around;
    height: 70px;
    border: 0px solid black;
    position: absolute;
    top: 0px;
}
#navigation .mainmenu.cub {
    /* this adds the proper spacing to the navigation buttons */
    margin: 0 52px 0 240px;
}
#navigation .mainmenu.girl {
    /* this adds the proper spacing to the navigation buttons */
    margin: 0 52px 0 275px;
}
#navigation .mainmenu a {
    /* formatting for the main navigation links */
    color: white;
    font-size: 16px;
    display: inline-block;
}
#navigation .mainmenu.boy a {
    /* formatting for the main navigation links */
    color: rgba(24,71,29, 1.0);
}
#navigation .mainmenu.cub a {
    /* formatting for the main navigation links */
    color: rgba(102,102,102, 1.0);
}
#navigation ul {
    /* first tier of the nav links */
    display: inline;
    margin: 0;
    padding: 0;
}
#navigation ul li {
    /* displays the second tier of the nav links */
    display: inline-block;
    animation: nav-down 0.6s;
}
#navigation ul li:hover {
    /*  */
}
#navigation ul li:hover ul {
    /*  */
    display: block;    
}
#navigation ul li ul {
    /*  */
    position: absolute;
    display: none;
}
#navigation ul li ul li { 
    /*  */
    background: rgba(0,51,102, 0.9); 
    display: block;
    -webkit-transition: border-radius 1s; /* Safari */
    transition: border-radius 0.6s; 
}
#navigation .boy ul li ul li { 
    /*  */
    background: rgba(233,233,228, 0.8);  
}
#navigation .cub ul li ul li { 
    /*  */
    background: rgba(255,224,120, 0.8);  
}
#navigation ul li ul li a {
    /*  */
    display:block !important;
    line-height: normal;
    padding: 12px 5px 12px 5px;
    margin-top: 1px;
} 
#navigation ul li ul li:hover {
    /*  */
    border-radius: 20px;
}
   
/* Main content */

#section-a .content {
    /*  */
    display: flex;
    position: relative;
    width: 100%;
    border: 0px solid black;  
}
#section-a img {
    z-index: 0; 
    border: 0px solid red; 
}
#section-a img.cover {
    width: 50%;
    margin: auto;
    padding-top: 70px;
    border: 0px solid red;  
}
#section-a .panel {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border: 0px solid green; 
    margin: auto;
}
#section-a .pad {
    padding: 5px 5px 15px 25px;
}
#section-a h1, h2 {
    padding: 5px 5px 5px 25px;
}
#section-a h2 {
    /*color: rgb(255, 255, 255);*/
    font-size: 3vw;
    text-align: left;
}

/* Upcoming events content */ 

#section-b .events{
    position: relative;    
    border: 0px solid purple;
}
#section-b .events h2{
    /*color: black;*/
    border: 0px solid black;
}
.logo {
    position: absolute;
    z-index: 0;
    width: 30%;
    top: -30px;
    left: 50%;
    opacity: 0.15;    
}
#section-b .center {
    display: flex;
    justify-content: center;
    padding: 15px;
    border: 0px solid black; 
}
#section-b .eventcard {
   position: relative;
   border: 0px solid blue;
}
#section-b img{
    border: 0px solid blue; 
}
#section-b .cover {
   text-align: center;
   padding-top: 10px;
   border: 0px solid red; 
}
#section-b input.cover {
   display: inline; 
   /*width: 28%;*/
   margin: auto;
}
#section-b .eventcard-content{
    width: 100%;
    position: absolute;
    bottom: 0px;
    border: 0px solid black;
    background-color: rgba(233,233,228, 0.8);
    font-size: 16px;
    padding: 5px 0;
}
#section-b ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#section-b li {
    margin-bottom: 10px;
    padding: 0;
}
#section-b .blue {
   color: rgb(0,51,102);
   font-size: 20px; 
}
#section-b .pad {
   padding: 5px; 
}
#section-b .left {
   position: absolute;
   width: auto;
   border: 0px solid black; 
}
#section-b .right {
   text-align: right;
   border: 0px solid black; 
}
#section-b table {
   margin: 12px;
   color: black; 
   border: 0px solid black;
   table-layout: fixed;
   font-size: 18px;
   text-align: left;
   cursor: pointer;     
}
#section-b table .otherdate {
   padding: 5px;
   color: rgb(255, 255, 255); 
   background-color: rgba(0,51,102, 0.8);
   font-size: 16px;
   white-space: nowrap;
}
#section-b table .otherdate.boy {
   color: rgb(255, 255, 255); 
   background-color: rgba(173,157,123, 1.0);
}
#section-b table .otherevent {
   padding: 5px;
   font-family: 'alice', serif;
   color: rgb(0, 51, 102); 
   background-color: rgba(154, 179, 213, 0.6);
   width: 100%;
   font-weight: bold;
}
#section-b table .otherevent.boy {
   color: rgba(24,71,29, 1.0); 
   background-color: rgba(233,233,228, 1.0);
}
#section-c input.cover {
    /*width: 50%;*/
    text-align: center;
    margin: auto;
    padding-top: 0px;
    border: 0px solid red;
    display: block; 
}
#about-a {
   margin-top: 70px;
   position: relative; 
}
#about-a p{
   padding: 10px 10px 0px 10px;
   text-indent: 15px; 
}
#about-a h2{
   border: 0px solid black; 
}
#about-a .boy h2{
   color: rgba(24,71,29, 1.0); 
}
#about-a h4{
   text-align: left;
   padding: 5px 0px 0px 20px;
   font-style: italic; 
}
#about-a .links{
    display: flex;
    justify-content: center;
    margin-top: 5px;     
}
#about-a a{
    text-decoration: none;
    color: rgb(206,17,38);
    margin: 0 10px;
    border: 0px solid black;
    z-index: 5; 
}
#about-a .boy a{
    color: rgba(186,93,9, 1.0); 
}
#about-a .cub a{
    color: rgba(145,114,14, 1.0); 
}
#contact p{
    padding: 10px 10px 0px 10px;
    text-align: center; 
}
#contact .center{
    padding: 10px 10px 0px 10px;
    text-align: center; 
}
#contact .boy a{
    color: rgba(186,93,9, 1.0);
}
#construction {
   margin-top: 70px; 
}
#construction p{
   padding: 10px 10px 0px 10px;
   text-indent: 15px;
   text-align: center; 
}
#construction h2{
   border: 0px solid black; 
}
#construction .boy h2{
   color: rgba(24,71,29, 1.0); 
}
#construction img{
   width: 30%;
   margin: 0 auto;
   position: relative;
   z-index: 1;
}
#calentry {
   display: inline-flex;
   margin: 10px 5px;
   background-color: rgba(0,51,102, 0.1);
   border: 0px solid black;
   width: 99%;   
}  
#calentry img{
   width: auto;
   height: 200px;
   border: 0px solid black;
   z-index: 1;
}
#calentry .datebox{
   background-color: rgba(0,51,102, 0.8);
   width: 120px;
   height: 200px;
   position: absolute;
   z-index: 2;
   color: white;
   border: 0px solid black;
}
#calentry .datebox.boy{
   background-color: rgba(173,157,123, 0.8);
}
#calentry .datebox.cub{
   background-color: rgba(255,224,120, 0.6);
   color: black;
}
#calentry .datebox.simple{
   position: relative;
   height:auto;   
}
#calentry .datebox.simple.mainpage{
   width:16%;   
}
#calentry .datebox.simple.calpage{
   width:11%;  
}
#calentry .datebox.simple.boy {
   background-color: rgba(173,157,123, 1.0);
   color: white;
}
#calentry .datebox.simple.cub {
   background-color: rgba(255,224,120, 0.6);
}
#calentry h1, h2, h3, h4{
   border: 0px solid red;
   text-align: center;   
}
#calentry .datebox.simple h1{
   font-size: 28px;
   padding: 0px;   
}
#calentry .datebox.simple h2{
   font-size: 18px;   
}
#calentry h1 {
   font-size: 42px;
}
#calentry h2 {
   font-size: 22px;
   color: rgb(233,233,228);
   padding: 0px;
}
#calentry h4 {
   color: rgb(173,157,123);
   font-size: inherit;
   padding-top: 5px;
}
#calentry .boy h4 {
   color: black;
}
#calentry .boy .girl h2 {
   color: rgb(233,233,228,1.0);
}
#calentry .cub h4 {
   color: rgba(102,102,102, 1.0);
}
#calentry .cub h2 {
   color: rgba(9,71,118, 1.0);
}
#calentry .bottom{
   position: absolute;
   width: 100%;
   bottom: 0px;
   padding: 5px 0px; 
}
#calentry .details{
   display: block;
   border: 0px solid green;
   padding: 5px;   
}
#calentry .details p {
   padding: 5px 15px;
}
#calentry .eventname, .eventplace {
   padding: 5px 15px;
   text-align: left; 
}
#calentry .eventname{
   font-size: 26px;
   color: rgb(0,0,0);   
}
#calentry .eventplace {
   font-size: 16px;
   color: rgb(173,157,123);
}
#calentry .eventplace.boy {
   color: rgba(173,157,123, 1.0);
}
#calentry .eventplace.cub {
   color: rgba(9,71,118, 1.0);
}
#calentry .details p {
   font-size: 15px;
}
#calentry .details a {
   font-size: 15px;
   padding: 5px 15px; 
}
#footer {
    width: 100%;
    background-color: rgb(173,157,123);
    margin-top:30px;
}
#footer .troop{
    font-size: 20px;
    padding: 2px; 
}
#footer .troop.cub{
   background-color: rgba(255,224,120, 0.8);
   color: rgba(0,51,102, 1);
}
#footer .meetinginfo{
    font-size: 14px;
    color: white;
    padding: 2px;
}
#footer .meetinginfo.cub{
   background-color: rgba(255,224,120, 0.8); 
   color: rgba(102,102,102, 1.0);
}
#footer .copyright{
    font-size: 11px;
    color: white;
    text-align: center;
    padding: 4px;
}
#footer .copyright.cub{
   background-color: rgba(255,224,120, 0.8); 
   color: rgba(102,102,102, 1.0);
}
#eventdetail {
   border: 0px solid black;
   margin-left:auto; 
   margin-right:auto; 
}
#eventdetail .lefttool {
   color: rgba(0,51,102, 1);
   text-align: right;
   width: 25%;
   vertical-align: top;
   padding: 4px 4px;
   font-weight: bold;
   text-decoration: underline dotted;
   border: 0px solid red; 
}
#eventdetail .lefttool.boy {
   color: rgba(24,71,29, 1.0);
}
#eventdetail .lefttool.list {
   width: 50%;
   text-decoration: none;
}
#eventdetail .lefttool.left {
   text-align: left;
   text-decoration: none;
}

#eventdetail .lefttool .tooltiptext {
  visibility: hidden;
  background-color: rgba(173,157,123,1);
  color: #fff;
  font-weight: normal;
  text-align: center;
  padding: 5px 5px;
  margin-left: -40px;
  margin-top: 25px; 
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}
#eventdetail .tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 35px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(173,157,123,1) transparent;
}
#eventdetail .lefttool:hover .tooltiptext {
  visibility: visible;
}
#eventdetail .right {
   color: rgb(0,0,0);
   text-align: left;
   width: 75%;
   vertical-align: top;
   padding: 4px 4px;
   border: 0px solid blue; 
}
#eventdetail .right a{
   color: rgba(186,93,9, 1.0); 
}
#eventdetail .header {
   border-bottom: 2px solid gray;
   color: black;
   font-weight: bold;
   padding: 0px 0px 0px 4px; 
}
.eventcenter {
    display: flex;
    justify-content: center;
    padding: 15px 15px 15px 15px;
}
#join {
   margin-top: 70px; 
}
#join a{
   margin-top: 5px;
}
#join .boy a{
   color: rgba(186,93,9, 1.0);
}
#join p{
   padding: 10px 10px 0px 10px;
   text-indent: 15px; 
}
#join h3{
    color: rgba(206,17,38, 1);
    font-size: 22px;   
}
#join .boy h3{
    color: rgba(186,93,9, 1.0);
}
#join .boy h2{
    color: rgba(24,71,29, 1.0);  
}
#join h4{
    font-size: 18px;   
}
#join .appimg{
    width: 250px;
    border: 1px solid black;     
}
#join .apps{
    display: flex;
    justify-content: center;   
}
#join .grid-container {
   display: grid;
   grid-template-columns: auto auto;
   grid-gap: 5px;
   border: 0px solid black;
   padding: 10px 0;
   justify-content: center;
   width: 100%;
}
#join .grid-container > div{

}
#leader{
    margin-top: 10px;
    justify-content: center;
}
#leader .card{
   position: relative;
   display: inline-block; 
   border: 0px solid red;
   max-width: 450px;    
}
#leader .back{
    position: absolute;
    bottom: 0px;
    left: 15%; 
    width: 85%;
    height: 70px;
    background-color: rgba(0,51,102, 1);
    border-radius: 0 20px 20px 0;
    border: 0px solid purple; 
}
#leader .back.boy{
    background-color: rgba(173,157,123, 0.8); 
}
#leader .dropdown-content{
   display: none;
   position: absolute;
   top: 100%;
   left: 0%;
   background-color: rgba(154,179,213, 1.0);
   border-radius: 0 0 20px 20px;
   width: 93%;
   padding: 5px 5px;
   margin: 0px 0px 20px 0px;
   z-index: 1;
   animation: nav-down 0.2s;
   font-weight: bold;
}
#leader .dropdown-content.boy{
   background-color: rgba(233, 233, 228, 1.0);
}
#leader .dropdown-content.cub{
   background-color: rgba(255,224,120, 1.0);   
}
#leader .dropdown-content p{
   color: white;   
}
#leader .dropdown-content.boy p{
   color: rgba(24,71,29, 1.0);
}
#leader .dropdown-content.cub p{
   color: rgba(102,102,102, 1.0); 
}
#leader .card:hover .dropdown-content {
  display: block;  
}

#leader img{
    float: left;
    height: auto;
    width: 15%;    
    border-radius: 20px 20px 0px 0px;    
}
#leader .position, #leader .name{
    color: white;
    font-size: 22px;
    border: 0px solid red;
    padding: 5px; 
}
#leader .name{
    color: rgba(154,179,213, 1);
    font-size: 16px;
}
#leader .name.boy{
    color: rgba(186,93,9, 1.0);
}
#leader .name.cub{
    color: rgba(179,179,179, 1.0);
}
#leader .eagle, .gold, .eaglegold, .silverbeaver{
   position: absolute;
   top: 0px; 
   float: left;
    height: 90%;
    width: auto;    
    border-radius: 0;
    border: 0px solid red;
    padding: 3px 3px 3px 9px;    
}
#leader .gold {
   height: 60%;
   width: auto;
   padding: 15px 3px 15px 9px; 
}
#leader .silverbeaver {
   height: 70%;
   width: auto;
   padding: 15px 3px 15px 9px; 
}
#leader .awards {
   display: flex;
   margin: 30px 0 0 0;
   height: 70px;
   justify-content: center;
   border: 0px solid black;  
}
#leader .awards.boy a{
   color: rgba(186,93,9, 1.0);  
}
#leader .eagledesc {
   height: 90%;
   width: auto;
   border: 0px solid black;
   border-radius: 0;
   padding: 3px;   
}
#leader .golddesc {
   height: 60%;
   width: auto;
   border: 0px solid black;
   border-radius: 0;
   padding: 13px 0 13px 13px;
}
#leader .beaverdesc {
   height: 70%;
   width: auto;
   border: 0px solid black;
   border-radius: 0;
   padding: 13px 0 13px 13px;
}
#leader .awarddesc{
   border: 0px solid black;
   padding: 26px 10px;
}
#leader .grid-container {
   display: grid;
   grid-template-columns: auto auto;
   grid-gap: 5px;
   border: 0px solid black;
   margin: auto;
   padding: 10px;
   justify-content: center;
   width: 100%;
}
#leader .grid-container > div{
   width: auto;
}
#leader .grid-span {
   grid-column: 1 / span 2;
   margin: auto;
   width: 100%;   
}

#login {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 15px 15px 15px 15px;
    z-index: 1; 
}
#login .lefttool {
   color: rgba(0,51,102, 1);
   text-align: right;
   width: 25%;
   vertical-align: middle;
   padding: 4px 4px;
   font-weight: bold;
   text-decoration: none; 
}
#login .lefttool.boy {
   color: rgba(24,71,29, 1.0);
}
#login .lightsubmit{
    background-color: transparent;
    border: none;
    color: rgba(0,51,102, 1);
    font-family: 'roboto-con-reg', serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 12px;
    padding: 6px 12px;
    margin: 0 5px;
    width: 100%;  
}
#login .lightsubmit:hover {
    font-style: italic;
    cursor: pointer;
}
#login p {
    color: rgb(206,17,38);
    text-align: center;
    font-family: 'roboto-con-reg', serif; 
}
#signin {
    margin: 70px 0 0 0;
    width: 65%;
    margin-left:auto; 
    margin-right:auto;
    border: 0px solid red;
    color: black;
}
#signin .table{
    border-collapse: collapse;
    width: 100%;
    color: black;
}
#signin .table.boy a{
    color: rgba(186,93,9, 1.0); ;
}
#signin td{
    padding: 3px 5px 3px 5px;
}
#signin .topline{
    font-family: 'alice', serif;
    color: rgb(0,51,102);
    width: 60%;
    font-size: 23px;
    border-bottom: 3px solid black; 
}
#signin .topline.boy{
    color: rgba(24,71,29, 1.0);
}
#signin .balance{
    color: black;
    font-size: 18px;
    
}
#signin .warning{
    color: red;
    font-size: 12px;
    font-style: italic;
}
#signin .topevent{
    width: 60%;
    border-bottom: 2px solid gray;
    color: black;
}
#signin .eventname{
    font-family: 'alice', serif;
    color: rgb(0,51,102);
    font-size: 18px;
    border: 0px solid blue;
    width: 60%
}

#signin .right{
    text-align: right;
}
#signin .center{
    text-align: center;
    color: black;
    width: 40%;
}
#signin .btn{
    background-color: rgba(0,51,102, 1);
    border: none;
    color: white;
    font-family: 'roboto-con-reg', serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 3px;    
    z-index: 9;
}
#signin .accnt{
   border-top: 3px solid black;
   width: 17%;
   text-align: right;  
}
#signin .smbtn{
    width: 35px;
}
#signin .smbtn.boy{
    background-color: rgba(186,93,9, 1.0);
    color: white;
}
#signin .lgbtn{
    width: 80px;
}
#signin .status{
    color: black;
    font-size: 12px;
    font-style: italic;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(200,200,200, 1);
}
#consent {   
    width: 65%;
    margin-left:auto; 
    margin-right:auto;
    border: 0px solid red;
    color: black;
}
#consent .left {
   color: rgba(0,51,102, 1);
   text-align: right;
   width: 30%;
   vertical-align: middle;
   padding: 4px 4px;
   font-weight: bold;
   text-decoration: none; 
}
#consent .right {
   text-align: left;
   width: 70%;
   vertical-align: top;
   padding: 4px 4px; 
}
#consent td{
   padding: 0px 5px 0px 5px; 
}
#consent .name{
    font-size: 20px;
    border-bottom: 1px solid gray;
    padding: 15px 5px 0px 5px; 
}
#consent .center{
    text-align: center;
    padding: 0px 25px 0px 25px;
}

#register {
    margin: 0px 0 0 0;
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
    border: 0px solid red;
    color: black;
}
#register table{
    border-collapse: collapse;
    width: 100%;
    color: black;
}
#register td{
    padding: 3px 5px 3px 5px;
}
#register .entry {
    border-collapse: collapse;
    width: 100%;
    color: black;
}
#register .entry tr:hover{
    background-color: rgba(154,179,213, 0.4);
    font-style: italic;
    cursor: pointer;
}
#register .topline{
    font-family: 'alice', serif;
    color: rgb(0,51,102);
    font-size: 23px;
}

#register .topevent{
    border-bottom: 2px solid gray;
    color: black;
    background-color: white;
    font-style: normal;
    font-size: 14px;
    cursor: default;
} 
#register .eventname{
    font-family: 'alice', serif;
    color: rgb(0,51,102);
    font-size: 18px;
    border: 0px solid blue;
    width: 60%
}

#register .btn{
    background-color: rgba(0,51,102, 1);
    border: none;
    color: white;
    font-family: 'roboto-con-reg', serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 3px;    
    z-index: 9;
}
#register .smbtn{
    width: 35px;
}
#register .lgbtn{
    width: 80px;
}
#register .dropdown{
    width: 100%;
    margin: 1px 0px 1px 0px;
}
#register .status{
    color: black;
    font-size: 14px;
    /*font-style: italic;
    padding-bottom: 8px;*/
    border-bottom: 1px dashed rgba(200,200,200, 1);
} 
 

/* Changes based on smartphone sizing */

@media only screen and (max-width: 4000px) and (min-width: 1100px) {
   .body{
       width: 1100px;
       margin: auto;                
    }
    h1, h2{
      font-size: 44px;
    }
    #section-a h2{
      font-size: 32px;
    }
    #section-b h4{
      font-size: 16px;
    }
    #navigation .bar{
      width: 1100px;
    }
    #signin .center{
    color: black;
    }
    #section-b .blue{
       font-size: 20px; 
    }
}

@media only screen and (min-width: 800px) {
    #section-b .blue{
       font-size: 20px; 
    }
    #signin .center{
        color: black;
    }

}

@media only screen and (min-width: 721px) { 
    #navigation .mainmenu a{
       font-size: 23px;
    }
    .grid {
       display: grid;
       margin-bottom: -4px;
       /*grid-template-columns: 1fr 1fr 1fr;*/       
    }
    .content-wrap, #section-b ul{
         /*grid-column: 1/3;*/
    }
    #section-b ul {
       display: flex;
       justify-content: space-around;
    }
    #section-b li {
       width: 31%;
    }
    #section-b .blue{
       font-size: 18px; 
    }
    #signin .center{
    color: black;
    }       
} 

/* Phone landscape mode */
@media only screen and (max-width: 720px) and (min-width: 519px) {
    #navigation .mainmenu a{
      font-size: 16px;    
    }
    #navigation ul li ul li a {
       padding: 16px 5px 16px 5px;
    }
    #navigation .bar{
      top: 0px;
    }    
    #section-b .blue{
       font-size: 20px; 
    }
    #section-b h4{
       font-size: 18px;
    }
    #about-a {
      margin-top: 70px; 
    }
    h2{
      font-size: 24px; 
    }
    #calentry {
      display: inline-grid;  
    }
    #leader .card {
     max-width: 100%;
    }
    #leader .grid-container {
      display: block;
      width: auto;
    }
    #leader .grid-container > div {
      padding: 5px;
    }
    #join .grid-container {
      grid-template-columns: auto;
    }
    #signin .center{
    color: black;
    font-size: 14px;
    }
   #signin .balance{
    font-size: 14px;
    font-weight: bold;
   }
   #signin .topevent{
    font-size: 14px;
   }
   #signin .btn{    
    font-size: 12px;    
   }
   #register .topevent{
    font-size: 14px;
   }
   #register {       
    font-size: 14px;
   }
   #eventdetail .name{
    font-size: 14px;
   }
   #section-b table .otherevent {
     font-size: 16px;
   } 
}

/* Phone portrait mode */
@media only screen and (max-width: 520px) {
    #navigation .bar {
        height: 30px;
        top: 0px;
        background-color: rgba(154,179,213, 0.9);     
    }
    #navigation .bar.boy {
        background-color: rgba(233,233,228, 0.6);     
    }
    
    label {
        margin: 0 20px 0 0;
        font-size: 16px;
        line-height: 30px;
        display: block;
        cursor: pointer;
        width: 26px;
        float: right;
        color: white;
    }
    #navigation .mainmenu {
        text-align: center;
        margin: 30px 0 0 0;
        width: 100%;
        height: 204px;
        display: none;
        
    }
    #navigation ul {
      display: block;
      font-size: 20px;
      border-top: 1px solid white;
      padding: 0;
      line-height: 50px;
      margin-top: 0px;
      background-color: rgba(154,179,213, 0.9); 
    }
    #navigation .boy ul {
      background-color: rgba(233,233,228, 0.8);  
    }
     #navigation ul li ul li a {
      margin-top: 0px;
      border-top: 1px solid white;
      padding: 14px 5px 14px 5px;    
    }
     #navigation ul li:hover ul {
        display: block;
        width: 100%;
        left: 0px;        
    }
    .btn.display {
       visibility: hidden;
    }
    #toggle:checked + .mainmenu {
        display: block;
    }
    #navigation .round {
       /* round portion under logo */
       height: 20px;
       width: 40px;
       position: fixed;
       top: 30px;
       border-radius: 0 0 20px 20px;  
    }
    #navigation .logoback {
       /* dark rectangle under logo */ 
       height: 30px;
       width: 180px;
       position: fixed;
       color: white;
       top: 0;
    }
    #navigation img{
       /* BSA logo */ 
       width: 30px;
       position: fixed;
       top: 10px;
       left: 5px;   
    }
    #navigation .scoutsbsa{
       visibility: hidden; 
    }
    #navigation .troop{
        visibility: visible;
        font-size: 26px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    #navigation .num{
        font-size: 28px;
        position: relative;       
    }
    .btn{
        font-size: 12px;
    }
    #section-a .pad {
      padding: 5px 5px 5px 5px;
    }
    #section-a h1, h2 {
        padding: 5px 5px 5px 5px;
    }
    #section-b .center {
       padding: 5px;
    }
    #section-b h4 {
       font-size: 12px;
    }
    #section-b table .otherdate {
    font-size: 12px;
    }
    #section-b table .otherevent {
     font-size: 14px;
    }
    h2 {
      font-size: 20px;
    }
    #about-a {
      margin-top: 30px; 
    }
    #about-a a{
      font-size: 14px; 
    }
    .topmarg{
      margin: 30px 0 0 0;
    }
    #calentry {
      display: inline-grid;  
    }
    #calentry .details h2{
      font-size: 20px;  
    }
    #eventdetail .left, .right, a {
      font-size: 14px;
    }
    #eventdetail .name{
        font-size: 14px;
    } 
    #leader .back{
       height: 65%; 
    }
    #leader .position{
       font-size: 14px;
       padding: 3% 0% 0% 0%;
       margin: auto; 
    }
    #leader .name{
       font-size: 12px;
       padding: 0;
       margin: auto;
    }
    #leader .dropdown-content{
       font-size: 14px;
       padding: 3% 0% 0% 3%;
    }
    #leader .awarddesc{
       font-size: 12px;
       padding: 26px 10px;
   }
    #leader .grid-container {
      display: block;
      border-top: 0px solid black;
      width: auto;
    }
    #leader .grid-container > div {
      padding: 5px;
    }
    #leader .gold {
     padding: 5px; 
     }
     #leader .silverbeaver {
    padding: 5px; 
    }
    #join .grid-container {
      grid-template-columns: auto;
    }
    textarea{
        width: 100%;
    }
    input[type=text]{
        width: 100%;
    }
    input[type=password]{
        width: 100%;
    }
    .dropdown{
        width: 100%;
        font-size: 12px;
    }
    #eventdetail .lefttool {
        font-size: 13px;
   }
   #signin {
       width: 100%;
       margin: 30px 0 0 0;
       margin-left:auto; 
       margin-right:auto;
   }
   #signin .topline{
        font-size: 20px;
        padding-top: 20px;
   }
   #signin .center{
    color: black;
    font-size: 14px;
    }
   #signin .topevent{
    font-size: 14px;
   }
   #signin .balance{
    font-size: 14px;
    font-weight: bold;
   }
   #signin .btn{    
    font-size: 12px;    
   }
   #register {
       width: 100%;
       margin: 0px 0 0 0;
       margin-left:auto; 
       margin-right:auto;
       font-size: 14px;
   }
   #register .topline{
        font-size: 20px;
        padding-top: 20px;
   }
   #register .center{
    color: black;
    font-size: 14px;
    }
   #register .topevent{
    font-size: 14px;
   }
   #section-b .blue{
       font-size: 14px; 
   }

}


/** Dropdown Animation **/
@-webkit-keyframes nav-down {
  0% { height: 0px; }
  100% { height: 50px; }
}
 
@-moz-keyframes nav-down {
  0% { height: 0px; }
  100% { height: 50px; }
}
 
@-o-keyframes nav-down {
  0% { height: 0px; }
  100% { height: 50px; }
}
 
@keyframes nav-down {
  0% { height: 0px; }
  100% { height: 50px; }
}