/* :::::::::::::: 	GENERAL  :::::::::::::: */

body {font-family: roboto, sans-serif}

/* :::::::::: Colors :::::::::: */

:root {
--blue: #4f6df3;
--magenta: #bb2299; 
--white: #ffffff;
--darkblue: #0c00aa;  
--gold: #f0bb44;
--pink: #E84CC7;
--teal: #66ccff;
--lightpink: #E8B2C8;
--lightblue: #5898fc;
--orange: #d77d31;
}

/* 2024 */
.SD {color: #3946f1 }
.LD {color: #88CCFF }
.TU {color: #c592fa }
.LR {color: #Cc8888 }
.SR {color: #992200 }

.bg-SD {background-color: #2292d4 }
.bg-LD {background-color: #88bbff }
.bg-TU {background-color: #c4abf0 }
.bg-LR {background-color: #fac1da }
.bg-SR {background-color: #ca6e99 }


.blue {color: #0e4cea;} 
.bluePP {color: #2292d4 }

/* 2023
.blue {color: #0e4cea;} 
.bluePP {color: #2292d4 }

.SD {color: #2292d4 }
.LD {color: #ace0ef }
.TU {color: #c4abf0 }
.LR {color: #fac1da }
.SR {color: #ca6e99 }

.bg-SD {background-color: #2292d4 }
.bg-LD {background-color: #ace0ef }
.bg-TU {background-color: #c4abf0 }
.bg-LR {background-color: #fac1da }
.bg-SR {background-color: #ca6e99 }
*/

.bg-blue {background-color: #0e4cea;}
.blue-lt {color: #5898fc;} 

.blue-dk {color: #002288;}
/*.bg-blue {background-color: #2b52af;}
.blue-lt {color: #5898fc;} */
.bg-blue-lt {background-color: #5898fc;}
.bg-red {background-color:#bb9999; }

.magenta {color: #bb2299;}
.bg-magenta {color: #bb2299;}
.gold {color:#f0bb44;}


/*
.grad-rainbow {
linear-gradient(90deg, rgba(70,66,228,1) 22%, rgba(187,17,153,1) 78%, rgba(240,187,68,1) 100%;}
*/

.grad-text {-webkit-text-fill-color: transparent; -webkit-background-clip: text; }


.grad-text-rainbow {
background: linear-gradient(90deg, rgba(70,66,228,1) 22%, rgba(187,17,153,1) 78%, rgba(240,187,68,1) 100%);
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text; }

h1 {font-family: zilla slab,roboto, helvetica, arial, sans-serif; }
#outcome h1 {font-family: roboto, helvetica, arial; }

.small { line-height: 1.1; }
.quote { line-height: 1.4;  font: normal italic  24px Prata, serif; color: #a91181;}
.attribution { line-height: 1.1; font: normal 12px arial, sans-serif}
/* :::::: Matrix TABLE  :::::::: */
table.matrix {width: 100%}
table.matrix  th {font-size: 11px; background-color: #fe9; font-weight: normal; text-align: center; padding: 3px; margin:0;}

table.matrix td {text-align: center; padding: 3px; vertical-align: middle;}
table.matrix  td.name h1 {font: normal 20px 'roboto', sans-serif ; font-weight: bold; text-align: left; padding-left: 10px;}
table.matrix  td.link  {font-size: 12px; font-weight: normal; }


/* :::::: JQUERY STYLES :::::: */
.click-up {display: inline}
.click-down {display: none}



/*  :::: 2023 MERCH PAGE :::: */
section.block.merch {
float: left; 
height: 180px; width: 49%; 
margin-bottom: 10px; margin-right: 1%;
padding: 0 10px 10px 10px;
overflow: hidden; 
}
section.block.merch h3 {font-size: 24px; line-height:1;  }
section.block.merch img {float:left; margin-right: 20px; width: 150px;}


/* :::: 2023 POWER PACKS
and 2024 CD pages xxxxxxx:::: */

/* Powerpack page layout */
#column-main-PP {float: left; width: 60%; margin-right: 2%;  border:solid 3px #ddd; border-radius: 12px; }
#column-sidebar-PP {float: left; width: 37%; height: 100%;  min-width: 350px; }
#column-sidebar-PP h3 {font: bold 14px Roboto, sans-serif; text-transform: uppercase;}

/* Box to display county info. Make all counties 100% in Web version.  */

.pinstyle-PP-county {
position: relative;
float: none;
text-align: center;
vertical-align: top;
width: 100%; 
height: auto; 
margin-bottom: 20px;
border:solid 7px #000; border-radius: 10px; 
font: normal 14px Roboto; color: black; 
background-color: #fff; 
overflow: hidden;
padding: 0 0 24px 0; 
}

.county-header {position:relative; top: 0px; text-transform:uppercase; line-height:1; }

.county-header H1 { font: bold 30px Roboto, sans-serif; color: black; }
.county-header H3 { text-transform:none; font-size: 14px; }



/* ::: Circular image for County candidates */

#column-main-PP div.county-candidates { float: left;  display:inline-block; font-size: 11px; text-align: center }

#column-main-PP .circular_image { 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: black;
vertical-align:middle;
margin-left: 20px;
border: solid 4px black;
}


#column-main-PP .circular_image img{
  width:100%;
}


/* GRID to display the supporting orgs. 3up */

#column-sidebar-PP section.grid { width: 70%; margin-left: 15%; text-align: center;  padding: 0; margin-top: 0; }

#column-sidebar-PP div.grid { 
float: left;
width: 32%; aspect-ratio:1/1;
margin-right: 1%; margin-bottom: 3px;
overflow: hidden; 
border: solid 1px #ccc;
padding: 3%;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
 -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

#column-sidebar-PP div.grid img { width: 100% }

/* To display HD candidates on sidebar -- much smaller */

.pinstyle-postcards {
position: relative;
float: left;
width: 23%; height: 190px; aspect-ratio: .5;  
margin:0; margin-left: 1%; margin-bottom: 10px;
border:solid 6px #2292d4; border-radius: 10px; 
text-align:center; font: normal 14px Roboto; color: black; 
background-color: #fff; 
overflow: hidden; 
}

.pinstyle-postcards   img {width: 100%; margin:0; }

.pinstyle-postcards .name {
position: relative; top: 0%; 
text-align: center; width: 100%;  
background-color: white; color: black; 
margin-top: -5px;
padding-top: 3px;
font: 600 14px roboto, sans-serif; }

.pinstyle-PP .district {position: absolute; bottom:0; text-align: center; width: 100%; height: 50px; font: normal 12px 'roboto', sans-serif; color: black; }


/* To display HD candidates */
.pinstyle-PP {
position: relative;
float: left;
width: 23%;  aspect-ratio: .6;  
margin:0; margin-left: 1%; margin-bottom: 10px;
border:solid 7px #000; border-radius: 10px; 
text-align:center; font: bold 20px Roboto; color: black; 
background-color: #fff; 
overflow: hidden; 
}

.pinstyle-PP  img {width: 100%; margin:0; }

.pinstyle-PP .name {
position: relative; top: 0%; 
text-align: center; width: 100%;  
background-color: white; color: black; 
margin-top: -5px;
padding-top: 3px;
font: 600 20px roboto, sans-serif; }

.pinstyle-PP .district {position: absolute; bottom:0; text-align: center; width: 100%; height: 40px; font: 600 22px 'roboto black', sans-serif; color: black; }

.pinstyle-PP a.button-small {background-color: orange; color: black }

a.button-PP:link, a.button-PP:visited, a.button-PP:active { 
font-size: 18px; 
padding: 2px 10px; 
background-color: #3946f1; 
/* background-color: #2b52af;*/
color: #fff;
text-decoration: none;
text-align: center;
border: solid 1px #fff; 
border-radius: 5px;
margin-top: 20px; margin-bottom: 20px; 
}

a.button-PP:hover { 
 background-color: #ace0ef;
 color: black; 
 padding-left: 20px; padding-right: 20px; 
}




/* :::: ELECTION BANNER :::: */
#banner-election { 
	position: relative;
	background-color: #203080;  color: #fff; 
	height: 150px; 
	text-align: left; 
	padding: 20px 30px 10px 30px;  
	position: relative; top: 0px;
	overflow: hidden;
	 }


.banner-election-title {
position: relative; 
float:left; width: 50%; }

.banner-election-menu {
position: absolute; right: 30px; top: 10px;
width: 30%; margin-left: 3%;
font-size: 16px;   vertical-align: middle; 
border: none; 
line-height: 1.6
}

.mini-calendar { 
width: 300px; padding: 5px; 
position: absolute; 
right: 30px; top:0;
font-size: 14px;
line-height: 1.8;
}

#banner-election h1 { margin-left: 0; display: inline; line-height: 1; font: 600 44px 'roboto', sans-serif; color: #fff }
#banner-election  h2 {line-height: .4;  letter-spacing:.1em; margin-left: 30px;}
#banner-election h4 {font-size: 24px; font-style: normal;  margin-top: -24px; margin-left: 120px; letter-spacing: 5px; text-transform: uppercase}



/* ::::::::::::::::::: CANDIDATE of the WEEK on homepage :::::::::::::: */

.block-COTW {
float: left; 
width: 48%; height: auto;
margin-right: 1%;
padding: 0; 
text-align: center; 
vertical-align: top; 
border: none 2px black;
display:block;   
overflow: auto;  
}

.block-COTW-3 {
float: left; 
width: 32%; height: auto;
margin-right: 0%; margin-left: 1%;
padding: 0; 
text-align: center; 
vertical-align: top; 
border: none 2px black;
display:block;   
overflow: hidden; 
/* resize: vertical; */
}


.block-COTW h1 {
font-size: 22px;
}

.block-COTW img.candidate {
width: 100%;
}

.block-COTW img.iconSmall {
width: 60px;
}

.block-COTW a.button {
padding:3px; font-size: 14px;
}


.block-COTW a.button {
background-color: #ee7744; }

/* ::::::::::::::::::: CANDIDATE GALLERY PAGE :::::::::::::: */

section#candidates { width: 100%; margin:0; padding:0; }

/* ::: Pinstyle :::  #column-full section#candidates .pinstyle */
section#candidates .pinstyle {
position: relative;
float: left;
width: 24%; max-width: 220px; height: 280px;  
margin-right: 1%; margin-bottom: 10px;
padding: 5px; 
border-radius: 10px; 
border: none 10px #eecc00;
text-align: center; 
color: #fff; 
z-index: 50;
}

section#candidates .pinstyle.Loss {
background-color: #777788; border: solid 8px #666677; 
}

section#candidates .pinstyle.Win {
background-color: #444488; border: solid 8px var(--blue); 
}
section#candidates .pinstyle.Undecided {
background-color: #999;
}



/* 2019 mark districts that were re-drawn */
.pinstyle .redistricted { 
position: absolute; top: 0px;
border-top-right-radius: 10px;
width:100%;
padding: 2px 12px 2px 10px;
background-color: #f0bb44; 
color: #2b52af;
text-align: right; 
font-size: 10px; font-weight: bold;
 text-transform: uppercase;
} 


/* :::::: RESULTS under photo of Candidate 
change opacity of loosing candidate after election:::::::: */
section.container-results {
position: relative; bottom: 15px;
width: 100%;
margin-top:0px;
text-align: left; 
font-size: 10px;
}

div.results-r {background-color: #ca6e99; }
div.results-d {background-color: var(--blue); }
div.results-i {background-color: var(--orange);}

div.results-d, div.results-r, div.results-i {
padding:2px 12px 2px 0px; 
text-align: left; padding-left: 10px;
font-size: 12px;
width: 100%;
}

div.results-d.Win  {
font-weight: bold; font-size: 15px;
background-color: #5495ff; 
color:#ffffff; 
}

div.results-d.Loss {
background-color: #67c; 
color:#ffffff;  
opacity: 70%;
}

div.results-r.Win {
opacity: 100%;
}

div.results-r.Loss {
opacity: 50%;
}



/* OLD results */
section#candidates .result {
position: absolute;  bottom: 40px;
text-align: center;
width: 100%; 
background-color: #ccc;
padding: 5px 5px;
font: 400 14px helvetica, sans-serif; 
text-transform: uppercase;
color: #000;
opacity: .85; 
z-index: 2;
}

section#candidates .result-past {
position: absolute;  bottom: 16px;
text-align: center;
width: 100%; 
/* background-color: #6ca7da; */
/*  background-color: #fe9; */
padding: 5px 5px;
font: 400 14px helvetica, sans-serif; 
text-transform: uppercase;
color: #000;
opacity: .85; 
z-index: 2;
}

section#candidates .result-loss {
position: absolute;  bottom: 40px;
text-align: center;
width: 100%; 
background-color: #ccc;
padding: 5px 5px;
font: 400 14px helvetica, sans-serif; 
text-transform: uppercase;
color: #000;
opacity: .60; 
z-index: 50;
}

section#candidates .pinstyle img  { 
border: solid 1px #fff; margin-bottom: 5px; width: 90%; margin-left: 5%;  max-width: 150px;}

section#candidates .pinstyle.bg-red { background-color:#9f4444; border-color: #9f4444; }

/* section#candidates .pinstyle.bg-blue {background-color: #2b52af; border-color: #2b52af;  } */
section#candidates .pinstyle.bg-blue {background-color: #394ff6; border: solid 2px #394ff6;  } 

section#candidates .pinstyle.bg-blue-dk {background-color: #4444bb; border: solid 2px #4444aa;  } 

section#candidates .circle { position:absolute; top:-5px; left:-5px; border:solid 4px; padding: 10px 5px 5px 5px; z-index: 3;}

section#candidates .pinstyle.bg-red .circle { color:#c62a33 ; border-color: #9f4444; background-color:#fff; }


section#candidates .pinstyle h4 { line-height: 1.1 }


section#candidates .small { font-size: 11px }

section#candidates .pinstyle.bg-blue .circle { color:#394ff6; border-color: #394ff6; background-color:#fff }

section#candidates .circle.red { border-color: #c62a33;}

section#candidates .pinstyle .opponents {text-align: center;  font-size: 11px; text-transform: uppercase; background-color: #fff; padding: 3px 0; margin-top:2px;}

section#candidates .opponents-container {position: absolute; bottom: 0px; width: 100%; }

section#candidates .opponent-d { background-color: #2b52af; font-size: 12px; padding:4px; font-weight: normal; color: #fff;}

section#candidates .opponent-r { 
width: 100%;
background-color: #b77;
font-size: 11px; padding:3px; font-weight: normal; color: #fff; line-height: 1.2;
}

section#candidates .opponent-i { background-color: #cccccc; font-size: 12px; padding:4px; color: #000;}
section#candidates .opponent-l { background-color: #fe9; font-size: 12px; padding:4px;color: #000; }
section#candidates .opponent-w { background-color: #eebb99; font-size: 12px; padding:4px; color: #000;}

section#candidates H3.option {color: #235f9a; margin-bottom: 5px;font-family: 'Roboto Condensed', sans-serif;}

/* Sort headings */
.sort-subhead {color: #555; font:normal 18px arial, sans-serif;}


/* RIBBONs of candidate boxes */

section#candidates .ribbon-container {
position: absolute;
width: 100%; height: 100%;
overflow: hidden;
z-index:100;
border:none;
}

/* 2019  "redistricted tags.*/
.pinstyle .ribbon  {
position: absolute;  top: -2px; right:0px;
text-align: center;
width: 70%;
margin-left: 15%;
/* -ms-transform: rotate(-45deg);  IE 9 */
 /* -webkit-transform: rotate(-45deg); Chrome, Safari, Opera 
 /* transform: rotate(-45deg);*/
background-color: #feb;
padding: 2px 2px 2px 20px;
font: 400 10px helvetica, sans-serif; 
text-transform: uppercase;
color: #cc1111;
opacity: 100; 
z-index: 1;
}

.box-candidate .ribbon,  .box-candidate .ribbon2 {
position: absolute; /*left: -50px;*/ top: 10px;
text-align: center;
width: 100%;
/* -ms-transform: rotate(-45deg);  IE 9 */
/* -webkit-transform: rotate(-45deg); Chrome, Safari, Opera 
transform: rotate(-45deg);*/ 
background-color: #fe9;
padding: 5px 50px;
font: 600 12px helvetica, sans-serif; 
text-transform: uppercase;
color: #cc1111;
z-index: 50;
-moz-opacity: .80;
  opacity: 0.8;
    filter: alpha(opacity=80); 
}

.box-candidate .ribbon2 { background-color: #aabbcc; color: #000 }
 


/* ::::::::::::::::::; CANDIDATE PROFILES :::::::::::::::: */

#container.profile {background-color: white}

#col1.profile { 
background-color:#fff; 
width: 55%; 
float: left; border: none;  
margin-top: 0; margin-right: 0;
font: 200 16px helvetica, sans-serif; 
line-height: 24px; 
padding: 10px; 
text-align: left;
 }
 
#col1 img.headshot { float:left; width: 200px; height: 200px; margin-right: 20px }

#col1.profile h1.name {
font: bold 40px 'Nixie One', sans-serif ; 
letter-spacing: -.8px; 
color: #000  
}

#col1.profile  h3.district-number { 
font:  Bold 28px 'Arial Black', 'Nixie One'; 
text-transform: uppercase; 
color: #000;
}


h4.distno { 
font:  Bold 35px 'Arial Black', sans-serif; 
text-transform: uppercase; 
color: #000;
}

#col1 .location {
padding-top: 10px;
font: normal 16px helvetica, arial, sans-serif; 
/*color: #276098; */
color: #000;
line-height: 1.6; 
}

#col1.profile h4  { font:800 36px 'Arial Black', sans-serif; color: #2b52af; line-height: 1;  }

#col1.profile h4.about  { font: bold 24px helvetica, arial; color: #88bbee; padding:4px 20px; margin-left: -50px; text-transform:uppercase; letter-spacing: 0em}


#col1.profile .box-issues {
border: solid 4px #2b52af;
border-radius: 12px;
padding: 20px;
}

#col1.profile .box-issues h2 {
font-size: 20px;
}

#col1.profile .box-issues .detail {
font-size: 16px;
margin-left: 50px;
}


#col1.profile fieldset {
border: solid 20px #88bbee }

#col1.profile fieldset legend {
font: 600 22px 'arial black', sans-serif; color: #88bbee; text-transform: uppercase }

#col1.profile h4.about::before {
  content: "    ";
  background-color: #88bbee;
  color: #88bbee;;
  font-weight: bold;
}

#col1.profile h4.after::before {
  content: "    ";
  background-color: #88bbee;
  color: #88bbee;;
  font-weight: bold;
}

/* ::::::: #col2.profile::::::::  */

div.expander {
padding: 10px 20px 10px 20px; 
text-align: left; 
border-radius: 12px;}

div.expander h3 { 
float: left; 
text-transform: uppercase; 
font-size: 14px;
margin-left: 0;}

div.expander h4 { 
text-transform: none; 
font-size: 12px;
margin-left: 0px;}


div.expander .click-on { 
float:right; 
color: #000; 
font-size: 24px;}

#col2.profile { 
position: relative; right: 0; top: 0px;
float: left; 
background-color:#ffffff; 
width: 40%;  border: none;
font-family: helvetica, arial, sans-serif; 
line-height: 1.6;  
padding: 10px 10px; 
margin-left: 3%; 
margin-right: 0; 
 }

#col2.profile h1 { font:bold 20px helvetica, arial, sans-serif }
#col2.profile h3  { font:bold 20px helvetica, arial, sans-serif }
#col2.profile h4  { font:bold 20px helvetica, arial, sans-serif }

#col2.profile .statistics {
border: solid 4px gray;
background-color: white; 
width: 100%; 
padding: 0 5px 5px 5px; border: none 8px #aaa;
}

#col2.profile iframe {
width: 100%; height: 300px; 
}

#col2.profile a.button-donate2:link,  
#col2.profile a.button-donate2:visited {
font: normal 24px 'Roboto Condensed', sans-serif;
color: #4642e4; 
background-color: #f0bb44;
border: outset 2px #4642e4;

}

#col2.profile a.button-donate2:hover {
font: normal 24px 'Roboto Condensed', sans-serif; 
color: white; 
background-color: #4642e4;
border: inset 2px #4642e4;
}


#col2 .location {
font-size: 12px; 
}

#issues .detail {font-size: 16px; color:#235f9a; margin-left: 30px;}


/* :::::: BOXES :::::::: */
.polissuesbox {
border: solid 20px #F0Bb44; 
padding: 5px 20px;
}

/* :::::::::: BUTTONS ::::::::::::::::::::::: */

a.button:link, a.button:visited, a.button:active { 
width: auto; 
font-size: 18px; 
padding: 5px 10px; 
background-color: #002288; 
/* background-color: #2b52af;*/
color: #fff;
text-decoration: none;
text-align: center;
border: none 2px #fff; 
border-radius: 10px;
margin-top: 20px;
}

a.button:hover { 
 background-color: #8fafff;
 color: white; 
 padding-left: 20px; padding-right: 20px; 
}



a.button-donate:link, a.button-donate:visited, a.button-donate:active { 
position: absolute; top: 30px; right: 20px;
display: block;
background-color: #4642E4;
color: #fff; 
text-align: center; padding: 8px 10px 8px 10px; 
border-radius: 4px; 
font-size: 14px; letter-spacing: .05em;
color:#fff; z-index: 200;
}

a.button-donate:hover { 
background-color: #88bbee; color: #000; 
}

/* Use this button for the phone view */
a.button-donate2:link, a.button-donate2:visited, a.button-button2:active { 
position: relative;  
margin-top: 0px; 
display: block; width: 100%; 
background-color: #f0bb44; 
color: #000; 
text-align: center;  
border-radius: 4px;
padding: 10px 0; 
font-size: 14px; letter-spacing: .05em; 
color:#fff; z-index: 200;
}

a.button-donate2:hover { 
background-color: #ee7744; color: #000;
}


/* Buttons for CANDIDATE GALLERY */

 a.button-r:link,
 a.button-r:visited, 
 a.button-r:active   {
display: block; 
width: 80%; margin-left: 10%;
padding: 4px 40px; 
background-color: #fff; color: #fff;
border: none 4px #bb3333; 
border-radius: 30px;
margin-top: 10px; margin-bottom: 0;
	text-align: center;
	font-size: 14px; 
	color: #1e68b6;
	text-decoration: none; 
}

a.button-r:hover { 
background-color: #f0bb44;
color: black; 
padding-left: 20px; padding-right: 20px; 
}


#container.fundraising .pinstyle {
width: 30%; max-width: 350px; height: 325px;  
}


/* Buttons for CANDIDATE FUNDRAISING GALLERY */

#container.fundraising .pinstyle img {width: 85%; max-width: 200px; border-width: 4px;}

#container.fundraising .pinstyle  a.button-r:link,
#container.fundraising .pinstyle a.button-r:visited, 
#container.fundraising .pinstyle  a.button-r:active   {
background-color: #ffee99;
border: solid 4px #bb3333; 
padding: 10px 40px; 
display: block; 
font-size: 20px; font-weight: bold;
text-transform: uppercase;
background-color: #fff;
color: #1e68b6;
text-decoration: none; 
text-align: center;
border: none 2px #fff; 
border-radius: 30px;
}

#container.fundraising .pinstyle a.button-r:hover { 
background-color: #f0bb44;
color: black; 
padding-left: 20px; padding-right: 20px; 
}

/* ::::::  2021 HD MAP ::::::  */
#map .map-title { float:left; position: absolute; top: 50px; left: 0; width: 50%; z-index:120 }

/* ::::::::::::::::::: CANDIDATE of the WEEK Toolkit :::::::::::::: */

.box-outline {
text-align: center;
border:solid 5px #ee7744;
border-radius: 25px; 
padding: 20px; 
background-color: #aabbcc;
color:black;}



img.resize {width: 50%;}