/* Styles for PowerLunch page */


/* ::::  COLOR ::::  */
.purple {color: #9a3ce1}
.bg-purple {background-color: #9a3ce1}
.blue2 {color: #0fdbfc}
.detail { font-weight: normal; font-size: 13px; line-height: 1.3; display: none; }
.detail.dropdownmenu {display: none}

.gradient-rainbow {background: linear-gradient(180deg, #ffffff 5%, rgba(37,192,248,1) 14%, rgba(161,59,223,1) 49%, rgba(223,89,154,1) 84%); }
.gradient-white-pink {background: linear-gradient(180deg, #ffffff 30%, #dd5599 80%); }


/* ::::  LAYOUT ::::  */

#column-full {margin-left: 0; padding:0;}

/* Make the background a color if not one of items child elements */

#archive > .opensesame {
background-color: #7ce9f6; 
border-radius: 25px; border:solid 2px #fff; 
padding: 12px;
}

#archive > section.opensesame {
background-color: #ffffff; 
border-radius: 25px; border:solid 2px #fff; 
padding: 10px 5px;
}

#archive + .click-on, 
#archive + .click-off {font-size: 20px }

#column-main.FPL {margin-left: 0; }
#column-main.FPL section {position: relative; }
#column-main.FPL span.date {font: 600 18px roboto, sans-serif; }
#column-main.FPL h3 b {font: 600 18px roboto, sans-serif; ; color: #9a3ce1; }
#column-main.FPL .detail { font-size: 14px; color:#555; }
#column-main.FPL .detail { font-size: 14px; color:#555; }


#column-sidebar.FPL {max-width: 400px; text-align: left; vertical-align: top; height: 100%}

#column-sidebar.FPL H3 {font-size: 18px}
#column-sidebar.FPL a:link.button-small.FPL,  
#column-sidebar.FPL a:visited.button-small.FPL {
width:100%;
border-radius: 10px; 
padding: 10px;
background-color: #9a3ce1;
font-size: 16px;
margin:5px 0;
}

/* Seasons buttons */

a.button-seasons:link, a.button-seasons:visited, a.button-seasons:active { 
width: auto; 
padding: 3px 0px; 
background-color: var(--blue);
color: #fff;
text-decoration: none;
text-align: center;
border: none 2px white; 
border-radius: 6px;
}

a.button-seasons:hover { 
 background-color: var(--pink);
}


/* :::: VIDEO :::: */

/* This contrains the aspect ration of the YouTube videos 
Some of the styles are on the content page, if they might change from year to year */


#column-main div.video-container {
 position: relative;
  width: 100%; margin-left: 0%;
  height: 100%;
  border: 0;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background-color: #0fdbfc;
  margin-bottom: 10px;
}

div.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#column-sidebar div.video-container {
 position: relative;
  width: 100%; margin-left: 0%;
  height: 100%;
  border: 0;
}


/* :: This style is used for 2023 only :: */

div.short {
position: relative; 
height:180px;
width: 100%; 
background: #ffffff;
overflow: hidden;
border:solid 2px #9a3ce1;
border-radius: 12px;
color: #333;
font-size: 14px;
padding-right: 5px;
}

div.short .youtube-button {
position: absolute; 
width: 60px; 
right: 10px;
bottom: -15px;
border:none 1px white;
}

a.recap {
position: absolute; 
right: 10px;
bottom: 0;
margin-top: 10px;
border:solid 2px white;
color:black; 
/* background-color: #9a3ce1; */
padding: 3px 10px;
}

div.short img {
float:left; 
width: 45%; 
margin-right: 12px; margin-bottom: 20px;
clear:both;
}

div.short h3 {color: #9a3ce1;}


div.box-quote {
backgound-color: #9a3ce1;; color: white;
padding: 20px;
border-radius: 20px;
}