/* 
Use this ONLY for general styles:
--COLORS
--LAYOUTS
--H tags, other font styles
--Items on every page
--Generally used tags: hidden, 
:::::::::: SITE-WIDE ::::::::::::::::::::::: */

* { box-sizing: border-box; }

.info-box {border-radius: 3px;}


/* :::::::::::::::: GRID :::::::::::: 
basic grid floats left, has 1% margins */

.grid-2up {
float: left; 
width: 49%; height: 180px;
margin-bottom:10px; margin-right:1%; padding: 1%;
overflow: hidden;
}

.grid-2up h3 {font-size: 24px; }

body {
height: 100%;
background-color: #fff;
padding:0; margin:0;
	text-align:center;
	font: normal 18px Roboto, helvetica, arial, sans-serif; 
	line-height: 1.5;
	color: #555;
border:none 4px green; 
}

#container {
position: relative; top:0px; left: 0px;
max-width:100%; height:auto;
z-index: 1;
border:none 4px red; 
}

#banner {
position: relative; top: 20px; left:0;
float: left; display: inline;
width:100%; height: 70px;
text-align:left; vertical-align: top;
margin: 0; margin-left: 20px;
padding:0; margin-bottom: 20px;
z-index: 700;
border:none;
}

#banner.logo-banner  { z-index: 90; }
#banner .logo-VGR {width:320px}

#banner .tagline {
position: relative; 
margin-top:-10px ;font: normal 17px Roboto, Arial, Sans-serif;
letter-spacing: .0em; color: #2b52af;  }

/* :::::::::: H Tags :::::::::: */
h1.title {font-size: 60px}

h1 {font: bold 40px 'Roboto', helvetica, sans-serif; margin:0;padding:0; line-height: 1.1; }

h2 {color: #000; margin:0;padding:0; font-size: 30px; font-weight: 400; line-height: 1.2; }

h3  /* Subhead blue */
{color: #5898fc; margin:0; padding: 8px 0 0 0 ; font: bold 20px helvetica, arial, sans-serif; line-height: 1.2}

h3.slab  /* Subhead blue */
{color: #5898fc; margin:0; padding: 8px 0 0 0 ; font: bold 20px 'Roboto', sans-serif; line-height: 1.2}

h3.meta {font-size: 18px; letter-spacing: .2em; text-transform: uppercase }

h4 /* Subhead grey */
{color: #99ccff; margin:0;padding-top: 20px; font-size: 18px; font-weight: 600; line-height: 1.1;} 

h5 /* bolded */
{color: #008866; margin:0;padding:0; font-size: 16px; font-weight: 600; display:inline; } 

h6 /* tagline */
{color: #77aa77; margin: 20px 0 0 0; padding: 20px 0; font-size: 20px; font-weight: 200; font-style: italic; margin-top: -15px} 

img {border:none; margin: 0 5px 5px 0 }
em {font-style: normal; font-weight: bold }
sup {color: #888}
.superbig {font-size: 60px; font-family: 'arial black'}
.loose {letter-spacing: .5em; font-size: 12px; text-transform: uppercase;}

img[alt],  img[title], div[title]  {
color: black;
font-style: normal;
font-size: 18px;
text-transform: uppercase;
}

/* :::::::::: 2024 Colors :::::::::: */
:root {
--white: #ffffff;
--blue: #3946f1;
--lightblue: #66b0ff;
--darkblue: #0c00aa;
--purple: #5522ff;
--lightpurple: #c592fa;
--magenta: #bb2299; 
--teal: #66ccff;
--gold: #ef9737;
--orange: #d77d31;
/* --pink: #e952f7; */
--pink: #db4eb3;

--lightpink: #E8B2C8;
--lightblue: #aabbee;
--red: #BD2825;
--bloodred: #552211;
--green: #009999;
--darkteal: #009999;
}


/* BLUES & PURPLES */
.teal {color: var(--teal);}
.blue {color: var(--blue)}
.darkblue {color: var(--darkblue)}
.blue-dk {color: #0b2490; }
.blue-lt {color: #5898fc; }
.bg-blue {background-color: #4f6df3;}
.blue {color: #0e4cea;} 
.blue2 {color: #1014a8} 
.blue-dk {color: #203080; }
.blue-lt {color: #5898fc; }
.bg-blue {background-color: #0045ef;}
.bg-blue2 {color: #1014a8}
.bg-blue-dk {color: #203080} 
.bg-blue-lt-2 {background-color: #88bbff; }
.bg-blue-lt {background-color: #5898fc;}
.bg-purple-lt {background-color:#cc99ee; }
.bg-purple {background-color:#8844dd; }
.bg-teal {background-color:#66ccff; }
.bg-darkteal {background-color:#009999; }
.purple {color: #8844dd}
/* .blue-lt, .blue1 {color: #5495e5;}
.bg-blue-lt {background-color:#5495e5; } */


/* REDS & PINKS */
.red {color: #bb3333;}
/* .red {color: #e65; } */
.bg-red {background-color: #c62a33 }
/* .bg-red {background-color:#bb3333; } */
.bg-red-lt {background-color: #eaa }
.magenta {color: #bb2299;} 
.bg-magenta {background-color: #bb2299;} 
  /*  .magenta {color: #bb1199;} Original Magenta  */
.pink  {color:#db4eb3;}
.bg-pink  {background-color:#f24d92;}
.rust {color: #df9824}


/* YELLOW & ORANGE */
.yellow {color: #f0bb44}
.bg-yellow {background-color:#feb; }
.orange  {color:#ee7744;}
.bg-orange {background-color:#ee7744; }
.gold {color:#f0bb44;}
.bg-gold {background-color:#ecc66f; }
.bg-orange {background-color:#ee7744; }

/* GREENS */
.green  {color:#009999;}
.green-lt  {color:#77cc88;}
.bg-green {background-color:#009999; } 
.bg-green-lt {background-color:#77cc88; }
/* .bg-green {background-color:#119966; } */


/* BLACKS & GRAYS */
.black {color:#000;}
.bg-black {background-color:#000; }
.gray {color: #666;}
.gray-lt {color: #6666ff;}
.bg-gray  {background-color:#aaaaaa; }
.bg-gray-lt  {background-color:#dddddd; color: #ffffff;}
.white {color:#fff;}
.bg-white {background-color: #fff }


/* :::::: Gradients :::::: */
.grad-white-blue {background-image: linear-gradient(to right, #ffffff 30%, #5555ff );}
.grad-white-blue-lt {background-image: linear-gradient(to bottom right, #ffffff 60%, #5495e5 );}
.grad-white-gold {
background-image: linear-gradient(to right, #ffffff 30%, #fcc66f );}
.grad-white-green {
background-image: linear-gradient(to right, #ffffff 30%, #33ddcc );}
.grad-white-orange {
background-image: linear-gradient(to bottom right, #ffffff 60%, #ee7744 );}
.grad-orange-white-orange {
background-image: linear-gradient(to right, #ff8844, #ffffff );}
.grad-purple-blue 
{ background-image: linear-gradient(to bottom right, #5abff9 25%, #ffffff 50%, #aa77ff );}
.grad-red-pink 
{ background-image: linear-gradient(to bottom right, #c62a33  3%, #ee9944  80%, #ff5588 );}

/* :::::: General tags :::::: */
.narrow { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 500;}

.quote {
font: normal 200 26px helvetica, arial; 
line-height: 1.2;
padding: 10px;
}
/* 
Use this ONLY for general styles:
--COLORS
--LAYOUTS
--H tags, other font styles
--Items on every page
--Generally used tags: hidden, 
:::::::::: SITE-WIDE ::::::::::::::::::::::: */

* { box-sizing: border-box; }

.info-box {border-radius: 3px;}


/* :::::::::::::::: GRID :::::::::::: 
basic grid floats left, has 1% margins */

.grid-2up {
float: left; 
width: 49%; height: 180px;
margin-bottom:10px; margin-right:1%; padding: 1%;
overflow: hidden;
}

.grid-2up h3 {font-size: 24px; }

body {
height: 100%;
background-color: #fff;
padding:0; margin:0;
	text-align:center;
	font: normal 18px Roboto, helvetica, arial, sans-serif; 
	line-height: 1.5;
	color: #555;
border:none 4px green; 
}

#container {
position: relative; top:0px; left: 0px;
max-width:100%; height:auto;
z-index: 1;
border:none 4px red; 
}

#banner {
position: relative; top: 20px; left:0;
float: left; display: inline;
width:100%; height: 70px;
text-align:left; vertical-align: top;
margin: 0; margin-left: 20px;
padding:0; margin-bottom: 20px;
z-index: 700;
border:none;
}

#banner.logo-banner  { z-index: 90; }
#banner .logo-VGR {width:320px}

#banner .tagline {
position: relative; 
margin-top:-10px ;font: normal 17px Roboto, Arial, Sans-serif;
letter-spacing: .0em; color: #2b52af;  }

/* :::::::::: H Tags :::::::::: */
h1.title {font-size: 60px}

h1 {font: bold 40px 'Roboto', helvetica, sans-serif; margin:0;padding:0; line-height: 1.1; }

h2 {color: #000; margin:0;padding:0; font-size: 30px; font-weight: 400; line-height: 1.2; }

h3  /* Subhead blue */
{color: #5898fc; margin:0; padding: 8px 0 0 0 ; font: bold 20px helvetica, arial, sans-serif; line-height: 1.2}

h3.slab  /* Subhead blue */
{color: #5898fc; margin:0; padding: 8px 0 0 0 ; font: bold 20px 'Roboto', sans-serif; line-height: 1.2}

h3.meta {font-size: 18px; letter-spacing: .2em; text-transform: uppercase }

h4 /* Subhead grey */
{color: #99ccff; margin:0;padding-top: 20px; font-size: 18px; font-weight: 600; line-height: 1.1;} 

h5 /* bolded */
{color: #008866; margin:0;padding:0; font-size: 16px; font-weight: 600; display:inline; } 

h6 /* tagline */
{color: #77aa77; margin: 20px 0 0 0; padding: 20px 0; font-size: 20px; font-weight: 200; font-style: italic; margin-top: -15px} 

img {border:none; margin: 0 5px 5px 0 }
em {font-style: normal; font-weight: bold }
sup {color: #888}
.superbig {font-size: 60px; font-family: 'arial black'}
.loose {letter-spacing: .5em; font-size: 12px; text-transform: uppercase;}

img[alt],  img[title], div[title]  {
color: black;
font-style: normal;
font-size: 18px;
text-transform: uppercase;
}

/* :::::::::: 2024 Colors :::::::::: */
:root {
--white: #ffffff;
--blue: #3946f1;
--lightblue: #66b0ff;
--darkblue: #0c00aa;
--purple: #5522ff;
--lightpurple: #c592fa;
--magenta: #bb2299; 
--teal: #66ccff;
--gold: #ef9737;
--orange: #d77d31;
--pink: #e952f7;
--lightpink: #E8B2C8;
--lightblue: #aabbee;
--red: #BD2825;
--bloodred: #552211;
--green: #009999;
}


/* BLUES & PURPLES */
.teal {color: var(--teal);}
.blue {color: var(--blue)}
.darkblue {color: var(--darkblue)}
.blue-dk {color: #0b2490; }
.blue-lt {color: #5898fc; }
.bg-blue {background-color: #4f6df3;}
.blue {color: #0e4cea;} 
.blue2 {color: #1014a8} 
.blue-dk {color: #203080; }
.blue-lt {color: #5898fc; }
.bg-blue {background-color: #0045ef;}
.bg-blue2 {color: #1014a8}
.bg-blue-dk {color: #203080} 
.bg-blue-lt-2 {background-color: #88bbff; }
.bg-blue-lt {background-color: #5898fc;}
.bg-purple-lt {background-color:#cc99ee; }
.bg-purple {background-color:#8844dd; }
.bg-teal {background-color:#66ccff; }
.purple {color: #8844dd}
/* .blue-lt, .blue1 {color: #5495e5;}
.bg-blue-lt {background-color:#5495e5; } */


/* REDS & PINKS */
.red {color: #bb3333;}
/* .red {color: #e65; } */
.bg-red {background-color: #c62a33 }
/* .bg-red {background-color:#bb3333; } */
.bg-red-lt {background-color: #eaa }
.magenta {color: #bb2299;} 
.bg-magenta {background-color: #bb2299;} 
  /*  .magenta {color: #bb1199;} Original Magenta  */
.pink  {color:#db4eb3;}
.bg-pink  {background-color:#f24d92;}
.rust {color: #df9824}


/* YELLOW & ORANGE */
.yellow {color: #f0bb44}
.bg-yellow {background-color:#feb; }
.orange  {color:#ee7744;}
.bg-orange {background-color:#ee7744; }
.gold {color:#f0bb44;}
.bg-gold {background-color:#ecc66f; }
.bg-orange {background-color:#ee7744; }

/* GREENS */
.green  {color:#009999;}
.green-lt  {color:#77cc88;}
.bg-green {background-color:#009999; } 
.bg-green-lt {background-color:#77cc88; }
/* .bg-green {background-color:#119966; } */


/* BLACKS & GRAYS */
.black {color:#000;}
.bg-black {background-color:#000; }
.gray {color: #666;}
.gray-lt {color: #6666ff;}
.bg-gray  {background-color:#aaaaaa; }
.bg-gray-lt  {background-color:#dddddd; color: #ffffff;}
.white {color:#fff;}
.bg-white {background-color: #fff }


/* :::::: Gradients :::::: */
.grad-white-blue {background-image: linear-gradient(to right, #ffffff 30%, #5555ff );}
.grad-white-blue-lt {background-image: linear-gradient(to bottom right, #ffffff 60%, #5495e5 );}
.grad-white-gold {
background-image: linear-gradient(to right, #ffffff 30%, #fcc66f );}
.grad-white-green {
background-image: linear-gradient(to right, #ffffff 30%, #33ddcc );}
.grad-white-orange {
background-image: linear-gradient(to bottom right, #ffffff 60%, #ee7744 );}
.grad-orange-white-orange {
background-image: linear-gradient(to right, #ff8844, #ffffff );}
.grad-purple-blue 
{ background-image: linear-gradient(to bottom right, #5abff9 25%, #aa77ff );}
.grad-red-pink 
{ background-image: linear-gradient(to bottom right, #c62a33  5%,#ee9944  70%, #f24d92 );}

/* :::::: General tags :::::: */
.narrow { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 500;}

.quote {
font: normal 200 26px helvetica, arial; 
line-height: 1.2;
padding: 10px;
}
 
.quote2 {
font: normal 200 20px helvetica, arial; 
line-height: 1.2;
padding: 10px;
 }

.attribution {display: inline; font-size: 11px;  line-height: 1; }
.attribution-rt {display: block; font-size: 10px;  line-height: 11px; text-align: right}
.expand {letter-spacing: .05em}
.caption {font-size: 12px; text-align: left; margin-right: 20px; line-height: 12px; }
.instructions {font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.caption, .small-caps {font-size: 11px; line-height: 1.1; font-weight: 200 }
.small-caps {text-transform: uppercase }
.normal {font-style: normal; color: #555 }
.small {font-size: 12px; line-height: 1.2 }
a.extra-link {font-size: 12px; font-weight: bold }
.upper { text-transform: uppercase;}

/* :::::: FLAGS :::::: */

.newitem { 
display: block; 
width: 80px; padding: 4px 5px; 
font-size: 15px; 
position: absolute; 
background-color:#c62a33;
color: #fff; letter-spacing: .1em;
border-radius: 10px;
text-align: center;
margin-left: -20px; margin-top: -34px; 
z-index: 180; 
}

.flag { 
position: absolute; top: 25px; left: 0;
width: 60px; padding: 3px 5px;
font-size: 12px; 
color: #fff; letter-spacing: 0em;
border-radius: 5px;
text-align: center;
margin-left: -20px; margin-top: -34px; 
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
opacity: .99;
z-index: 300; 
}
.container-flag { position: relative; }
.error {color: #c62a33; font-size: 14px;}
.rotate { 
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}

/* Lists */

li { list-style-type: square }

ul li {
list-style-type: square; 
line-height: 1.3; 
font-size: 14px;
margin-top: 20px;}

ol {margin-bottom: 0; padding-bottom:0; margin-top: 0; padding-top:0}

/* ::::::::::::::::::::::: Hiders ::::::::::::::::::::::: */
.hide-phone { display: initial }
.hide-screen { display: none }
.hide-screen-pad { display: none }
.hide-phone-pad { display: initial }

.shared-heading {padding: 10px; width: 70% }

/* ::::::::::::::::::::::: jQuery Styles ::::::::::::::::::::::: */
/* Main menu, other hidden items */
.detail, .detail-vol, .detail-words { display: none; color: #555}
.detail-vol {width:100%; z-index: 150 }
.click-on { text-transform: uppercase; }
.click-off { display: none; text-transform: uppercase; }
.detail.dropdownmenu {display: none}

/* :: Social media ::: */
/* ::: SOCIAL MEDIA. This is a absolute block   ::: */
#container-sm {
position: absolute; top: 10px; right: -5px;
width: 50px;
display: block;
z-index: 600; 
}

/* :::::::::::::::: COLUMNS ::::::::::::  */
/* 70/30, 60/40, 50/50 */
/* 12/1/2022 -- I am trying to remove all styles that define widths of columns from other style sheet and consolidate here into 3 sizes. 
Default should be 70/30, but for some reason 60/40 seems to be happening... */

#column-full { 
position: relative; 
float: none; clear:both;
width: 100%; min-height: 500px;
margin-right: 0; padding: 0px  20px 0 40px ; 
text-align: left; 
border: none 1px gray;
z-index:1;
}

#column-center { 
width: 70%; 
margin-left: 15%;
text-align: center;
padding-top: 20px;
}

#column-main { 
position: relative; 
float: left; 
width: 70%;
margin-right: 1%; padding: 0px  10px 0 20px ; 
text-align: left; 
clear:both;
z-index:1;
}

#column-sidebar { 
position: relative; 
float: left; 
width: 27%;
text-align: left; 
z-index:1;
}


#column-main.issues h2 { padding-bottom: 0; margin-bottom:0; }

#column-sidebar.issues h1 { 
text-transform: uppercase;
font-size: 18px;
}


/* :::::::::::::::::::::::   TABLES   :::::::::::::::::::::: */
table {border: solid 2px #000; background-color: #fff; width: auto}

table td { position: relative; }
th {  font-weight: normal; text-align: left; 
background-color: #dde5ee; border: solid 2px #eee; }
td {  border-top: solid 1px #aaa }
td.name { font-size: 12px; font-weight: normal; text-align: left; line-height: 1.2; }
td.name a { font-weight: bold; font-size: 14px; }
td.address { font-size: 11px; font-weight: normal; text-align: left; border-bottom: solid 1px #888 }
td.position { font: bold 12px arial black, sans-serif; text-transform: uppercase; color: #888; font-stretch:condensed}

td.subhead {background-color: #eeeeff; font-size: 14px; font-weight: bold; 
color: #000; letter-spacing: .1em; border: solid 2px #333;
text-align: center }
td.list {padding-left: 10px; line-height: 1.2; font-size: 9px;}
td.name { font-size: 14px; font-weight: bold}
td.name2 { font-size: 12px; font-weight: bold}


/* ::::: Forms ::::: */

form {font-size: 14px }

#container-form { margin-left: 0px; color: #555; font-weight: bold; line-height: 1; }
#container-form .normal {font-weight: normal; font-size: 12px }
#container-form h3 {margin-left: -40px }

textarea { font-size: 15px; }

input {font-weight: normal; }

input[type=text], 
input[type=email], 
input[type=URL], 
input[type=name],
input[type=password]
{ width: 100%;
border: solid 1px #aaa; 
border-radius: 8px; 
padding: 6px 20px;
display: inline; 
margin: 6px 0; 
font-size: 15px; color: #000;
box-sizing: border-box;
}

input[type=text]:focus {background-color: #fff; border-style: solid; border: solid 1px #000; border-radius: 8px !important; 
}

textarea, input, *:focus { outline: none !important; }

input[type=select]{ font-weight: normal; }

input[type=submit]{ border: solid 4px #333; border-radius: 18px; padding: 10px;  display: inline; width: 200px; margin-top: 0; font-size: 16px;
   box-sizing: border-box; background-color: #fe9; box-shadow: 3px 3px 3px #888888;}

input[type=submit]:hover { background-color: #feb; box-shadow: 0px 0px 0px #888888;}  
   

input:invalid {border: 2px solid #888;}
input:valid {border: 1px solid #aaa;}


/* ::::: SEARCH ::::: */
#container-search { 
position: relative; 
text-align: right;
width: 40%; height: 35px;
padding:0; 
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
margin-top: 20px; 
border:solid 1px #888; 
border-radius: 0 20px 20px 0; 
font-size: 13px; 
}

#container-search:focus { width: 100%; }


#container-search input[type=text] { 
position: relative;  top: 0px; left:-5px;
float: left;
height: 100%; width: 80%;  
margin: 0; 
border:none 1px #888; 
vertical-align: top; 
 }
 
#container-search input[type=text]:focus { border: none;}

#container-search button {
position: relative; top:0; right: 0px;
float: left; 
height: 100%; width: 20%; 
padding: 0; margin: 0; 
background-color: #fff; 
/* background-image: url("images/icon_search.png"); */
background-repeat: no-repeat;
border: none;
}


/* :::::::: Homepage  BANDS :::::  */

#container.homepage .pan-volunteer {
position: relative; top:0px;
width: 100%; text-align: left; 
padding:0; margin: 0;
border: solid 20px #6ca7da; border-width: 20px 0;
}

#container.homepage .pan-volunteer img { margin:0; vertical-align: bottom; margin-bottom: -10px }
#container.homepage .pan-volunteer h1 {font-size: 85px }

#container.homepage .band {
width: 100%; 
padding: 20px 0; 
}

#container.homepage .band h1 {font-size: 80px; color: #fff;  }


/* ::::::::::  BLOCKS ::::::::*/
.block2 {
position: relative;
float: left; 
width: 47%;
height: auto;
padding-left: 10px;
margin-right: 1%;
text-align: left; vertical-align: top; 
}

/* :: BLOCK3 :: 
Used on election-materials _graphics page*/
.block3 {
float: left; 
width: 31%; height: auto;
padding: 20px;
margin-right: 1%; margin-bottom: 0px; 
text-align: center; 
vertical-align: top; 
border: solid 1px var(--lightblue);
border-radius: 24px;
}

.block3 img {width: 100%}

.block3 p {text-align: left }
.block3 h1 { font: bold 28px 'roboto', sans-serif; }
.block3 h3 { font: bold 18px roboto, sans-serif; }

/* ::Election Resources page :: */
#resources .block3 {
width: 31%; height: 360px;
}

.block4 {
float:left; 
width: 23%; margin-right: 1%;
}

.container-blocks-full { 
position: relative;
float: left; 
width: 100%; height: auto;
border: solid 12px #3c56f2;
padding: 1% 1%; margin: 0; 
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);
line-height: 1.2;
}

.container-blocks-full.block2 {
position: relative;
float: left; 
width: 48%;
height: auto;
padding-left: 0; padding-top: 0;
margin-right: 0;
text-align: left; vertical-align: top; 
}

.container-blocks-full.block2 img {width: 100%; margin: 0}
.container-blocks-full.block2 h1 { font: normal 18px Prata, serif;  }
.container-blocks-full.block2 h3 { font-weight: normal }


/*  :::::: BLOCKS ::::::  */
#block-sidebar { 
position: relative; top: 20px; 
float:left; 
width: 40%; height: auto; padding: 2%; 
margin-left: 2%;
text-align: left; 
background-color: #fff;
z-index:1;
}

#block-sidebar #container-filters {height: auto; text-align: right;   }


/* Used for canvass/eventdisplays */
.block2-small, .block2-smaller {
position: relative;
float: left; 
text-align: right; 
vertical-align: top;
padding-left: 10px; }


block2-smaller { min-width: 20%; border:none 1px black;}
block2-small {width:70%; border:none 1px black; }

.block2-smaller img.headshot {
width: 90px; height: 90px; float:right; margin-right: 10px; }

.block2-smaller .dateblock {
width: 160px; 
color:#000;
font-size: 11px;
line-height: 1.2; 
text-align: right; 
float:right;
margin-right: 10px;
border: none 1px black }

.block2-smaller .dateblock h3 { 
font-size: 17px; 
text-transform: uppercase;
}

.block2-smaller .dateblock .button-medium {font-size: 15px; padding:3px; border-radius: 3px; margin:-3px 0 1px 0}

.block2-small.textblock {
width: 58%;
font-size: 14px;
text-align: left;  
line-height: 1.2;
margin-top:0; padding-top: 0;
border:none 1px black;
}

.block2-small.textblock img {
display:inline;
margin-top:-20px;
float: right;
/* position: absolute; top: 0px; right: 20px; */
width: 180px;
}

.block2-small.textblock h3 {
font-size: 24px;
color: #000;
text-align: left; 
padding-bottom:0; margin-bottom:0; 
}


/* :::::::::: BLOCK2  2 UP on homepage ::::::::*/

#container.homepage .block2 {
position: relative;
float: left; 
width: 48%;
height: 100%;
padding-left: 0; padding-top: 0;
margin-right: 1%;
text-align: left; 
vertical-align: top; 
}

#container.homepage .block2 h2 { }
/* time and date */
#container.homepage .block2 h3 { font-weight: normal }

/* More info */
#container.homepage .block2 a.moreinfo:link,
#container.homepage .block2 a.moreinfo:visited 
{ font-size: 12px; text-transform: uppercase; line-height: 1.5; margin-left: 10px}

#container.homepage .block2 a.moreinfo:hover
 { color: blue }

#container.homepage .block2 img {width: 98%}
#container.homepage .block2 .address {font-size: 12px; }


.block2 img {width: 100%;  margin: 1%}
.block2.poster h4  { display: none; font-size: 18px; margin-top:-20px; text-transform: uppercase; letter-spacing: .3em; margin-left: 20px; text-align: center;}
.block2.text h2  { font-size: 28px; color: #2B52AF;}
.block2.text h2.subtitle  { color: #2B52AF; font-size: 22px;}
.block2.text .time { font-size: 12px; color: #000;}
.block2.text .address { font-size: 16px; color: #000;}
.block2.text .event-text { position: relative; font-size: 14px;  color: #555; line-height: 1.2; margin-bottom: 10px;}
.block2.text a.button:link,  a.button:visited {position: relative; display: inline; padding: 5px 30px; margin-top: 10px; text-align: center; border-radius: 10px;}


/* meta header */
#container.homepage .block2 h4 {
text-transform: uppercase; letter-spacing: .1em; text-align: left; margin-top: 0; padding-top: 0;
}

/* :::: Women's Summit:::::  */

.pinstyle.WS {
position: relative;
float:left; 
width: 21%; 
height: auto; min-height: 250px;
margin-left: 1%;
border: solid 1px #ccc;
background-color: #fff;
}
.pinstyle.WS img {width: 99%; margin-bottom:0}
.pinstyle.WS {padding: 5px; text-align: center; font-size: 12px}
.pinstyle.WS h3 {font: normal 1.8vw 'Roboto Condensed', helvetica, arial; color:#888; line-height: 1.2}
.pinstyle.WS h4 b {font: bold 16px  helvetica, arial; color:#000;}
.pinstyle.WS h4 {font: normal 14px  helvetica, arial; color:#888; margin-top: -10px}

#summit-2021 a.button {
background-color: #ee7744}

#summit-2021 h1 {
color: #ee7744;
margin-left: 0;
}

/* :::::::::: INTERIOR PAGES ::::::::: */
/* :: GRASSROOTS DIRECTORY  */
/* :: ISSUE COLUMNS  */
/* :: COALITION COLUMNS  */
/* :: ADVocacy COLUMNS  */


/* :::: :: GRASSROOTS DIRECTORY :: :: */

#banner-directory { height: 140px; text-align: left; padding: 5px 30px; 
background-color: #5495e5; position: relative; top: 0px; }
.banner-directory-title {float:left; width: 30%; }
.banner-directory-menu {
font-size: 12px; float: left; width: 67%; margin-left: 3%; vertical-align: top; border: none; position: relative; top:0px; line-height: 1.6
}


#banner-directory .ttmessage {position: absolute; z-index: 200; top:20px; left: 100px; width: 350px}

.detail.dropdownmenu, .ttmessage {display: none}


/* :::: ISSUES :::: */ 
.imagecredit { font-size: 11px; margin: -5px 10px 0 20px; text-align: right; padding-right: 15px;}



/* :::::::::: ORGANIZATONS :::::::::: */
.org {
padding: 2%; 
border: solid 1px #888;
line-height: 1.2;
font-size: 12px
}

.org .name {font: bold 18px Arial, helvetica; color: #000 }

.org a { font-size: 14px }

/*  ::::::::::::::::: Directory: List of orgs ::::::::::: */
#directory {
border: solid 10px #2b52af;
background-color: #fff;
height: auto;
min-height: 500px; max-width: 1000px;
padding: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 120;
} 

#directory .star { color: #6ca7da }
#directory .icon-org { width: 60px; height: 60px; float:left;  }
#directory h3 {font-size: 18px;color: #2b52af;} 
#directory .location { font-weight: normal; font-size: 16px; color: #888 } 
#directory .about {font-weight: normal; font-size: 12px; color: #888 } 
#directory .list-text { margin-left: 0px; font-size: 12px; }
#directory .list-twitter-name { font-size: 12px;color: #aa0000 }

/* :::: CD LINKS ::::: */

.links-cd {
position: relative; 
bottom: 0px; display: block;
margin-left: 20px;
text-align: center;
width: 100%; 
overflow: visible;
 }


.links-cd a {
float: left; 
width: 50px;
background-color: #c62a33;
padding: 8px 5px 10px 5px; 
border: solid 1px #fff; 
border-bottom: none;
border-radius: 12px 12px 0 0;
vertical-align: top;
	font-size: 13px; font-weight: bold;
	z-index: 50;
	}

.links-cd a:hover { background-color: #2b52af; }

.links-cd a.bg-blue { background-color: #2b52af;}

/* ::::  MAPS :::: */

.map-label, .map-label2 {
padding: 8px 12px;
background-color: #21409A;
text-align: center; line-height: 1.1;
width: 240px; height: 50px;
border-radius: 10px;
display: inline;
color: #fff; 
overflow: visible; 
}

.map-label2 {background-color: #6ca7da;}

/* :::: ORG DISPLAY (single org) ::::: */
#block-main.org {
position: relative; top: 20px; 
width: 75%; border: none; }


#orginfo {
position: relative; color: #555;
border: solid 20px #000;
padding: 30px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; 
}

#orginfo .org-logo { float: left; font-size: 40px !important; margin: 0px 20px 30px 0; width: 200px; height: 200px; line-height:1; color: #6ca7da }

#orginfo .org-logo img {
width:200px; height: 200px; margin-right: 30px; margin-bottom: 50px; border: solid 1px #888; border-radius: 10px }


#orginfo .org-name-short {color: #6ca7da; font-size: 24px; font-weight: normal }

#orginfo h1 {color: #000 }

#orginfo .location { 
font: normal 20px helvetica, arial; 
color: #6ca7da; 
margin-top: 5px}


#orginfo .info-basic h1 {font-size: 50px; line-height: 1; }
#orginfo .contact a {margin-left: 0px; font-size: 11px;   }
#orginfo .contact img {width: 40px  }

#orginfo .org-about { clear:both; font-size: 22px;  color: #5495e5; line-height: 1.4 }
#orginfo .org-moreinfo { font-size: 16px;  color: #555; line-height: 1.4 }
#orginfo .org-moreinfo a:link, #orginfo .org-moreinfo a:visited { color: #6ca7da; text-transform: uppercase }

#orginfo .org-members-no, #orginfo .activities {color: #333; font-size: 18px }
#orginfo .org-members-no b, #orginfo .activities b {color: #235f9a; font-size: 18px}


/* :::: Yearly actions / history ::::: */

h3.election-year,  h3.election-year-now, h3.year-now  { 
margin-left: -20px; 
background-color:#aaa; color: #fff;
padding: 8px; margin-bottom: 10px }

h3.election-year-now  { background-color:#2b52af;}

h3.year-now  { background-color:#008866;}

/* :::: Timestamp ::::: */
.timestamp {text-align: right; font-size: 11px;}



/* :::: LOGOS diplayed ::::: */

.logos {width: 150px; height: 150px; float: left; margin-right: 5px; margin-bottom: 5px} 



/* Matrix */
.yesno {font: 600 16px helvetica, arial, sans-serif; color: #000 }


/* :::::::::: FOOTERS ::::::::::::::  */

#footer {
position:relative; top: 0px;
padding:20px; margin:0;
width:90%; height: auto;
clear:both;
	background-color: var(--darkblue);
	font-size: 14px; line-height: 1.2;
	text-align: center;

color:#eee;
z-index:0;
overflow: hidden;
}

/*  Sources / footnotes  */

#sources { 
text-align: left;
font-size: 12px;
padding: 10px 10px 10px 50px;
font-size: 12px; line-height: 1.2; color: #555; 
border-top: dotted 3px #888;
}

#sources h3 { text-transform: uppercase }

#sources a { font-weight: bold }


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

/* :: Actions */
a.button-ACT:link, .button-ACT:visited {
display: inline; position: relative;
background-color: white; 
color: var(--purple);
border-radius: 20px; 
font-size: 16px; border:solid 2px var(--purple); border-radius: 20px; padding: 12px
 }

a.button-ACT:hover  { 
background-color: var(--purple);
color: white;
}

/* :: Resistance Events */
a.button-RE:link, .button-RE:visited {
display: inline; position: relative;
 background-color: var(--magenta); margin: 10px 4px; padding: 5px 8px;
 color: white; font-size: 12px;
 border-radius: 20px; 
 }

a.button-RE:hover  { color: black;
   box-shadow: 0 0 10px #9997e8, 0 0 20px #6600ff, 0 0 20px #fff ;
   border: solid 1px #ffffff; color:white;
}

a.button-RE.bg-blue:link, .button-RE.bg-blue:visited { background-color: var(--blue); }
a.button-RE.bg-darkteal:link, .button-RE.bg-darkteal:visited { background-color: var(--darkteal); }






a.button-learnmore:link { text-decoration: none; color:#5566dd; background-color:#def; padding: 4px; font: normal 12px arial, sans-serif;}
a.button-learnmore:active { text-decoration: none; color:#000; background-color:#def; }
a.button-learnmore:visited { text-decoration: none; color:#5566dd; background-color:#def; } 
a.button-learnmore:hover{ text-decoration: none; color:#000; background-color:#cff0aa; }

a.button:link, a.button:visited, a.button:active { 
width: auto; 
font-size: 16px; 
padding: 5px 15px; 
background-color: var(--blue);
color: #fff;
text-decoration: none;
text-align: center;
border: none 2px white; 
border-radius: 10px;
}

a.button:hover { 
 background-color: var(--teal);
 color: white; 
 border: solid 2px white; 
}

.openbutton {
width: 350px;
background-color: #2b52af;
color: #fff; 
border-radius: 10px; 
display:inline; 
padding: 10px; 
font-size: 20px; 
}

a.button-1up:link, a.button-1up:visited, a.button-1up:active {
float: left;
display: block;
text-align: center;
width: 100%; 
padding: 20px; 
margin:0; margin-bottom: 20px;
border: none 12px #fff; 
border-radius: 0px;
font-size: 18px;
line-height: 1.1;
background-color: #1014a8;
color: #fff;
}

a.button-2up:link, a.button-2up:visited, a.button-2up:active {
float: left;
display: block;
width: 50%; 
padding: 14px; margin:0;
border: solid 12px #fff; border-radius: 20px;
font-size: 14px;
line-height: 1.1;
}

a.button-3up:link, a.button-3up:visited, a.button-3up:active {
float: left; 
width: 32%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin-left: 1%;
border: solid 3px #fff; border-radius: 12px;
font-size: 12px; color: #fff;
line-height: 1.4;
}

a.button-3up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-4up:link, a.button-4up:visited, a.button-4up:active {
float: left; 
width: 24%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin:0;
border: solid 3px #fff; border-radius: 12px;
font-size: 14px; color: #fff;
line-height: 1.4;
}

a.button-4up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-5up:link, a.button-5up:visited, a.button-5up:active {
float: left; 
width: 19%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin:0;
border: solid 3px #fff; border-radius: 12px;
font-size: 11px; color: #fff;
line-height: 1.4;
}

a.button-5up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-small:link,
 a.button-small:visited, 
 a.button-small:active   {
display: block; 
width: 80%; margin-left: 10%;
padding: 1px 10px; 
background-color: #394ff6;
border: solid 1px #fff; 
border-radius: 20px;
margin-top: 3px; margin-bottom: 0;
	text-align: center;
	font: normal 14px arial, sans-serif; 
	color: #fff;
	text-decoration: none; 
}

a.button-small:hover   {
 background-color: #f0bb44; color: #000;}

a.button-medium:link, a.button-medium:visited, a.button-medium:active { 
font-size: 20px; 
color: #fff; padding: 5px 10px; 
background-color: #1e68b6; 
border: none 2px #fff; border-radius: 5px;
}
a.button-medium:hover { background-color: #6ca7da;}


/* ::::::::::::::: Boxes :::::::::::: */
.box-subtle {
border: solid 1px #ccc;
padding: 2%;
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);
overflow: hidden; 
}

.box-sidebar {
background-color:#4aa3dd; 
padding: 10px 20px;
font-size: 12px; 
color: #fff;
margin-bottom: 0px;
border: solid 1px white; 
}

/* Info box  */
.infobox-electiondates {
position: absolute; top: 0px; left: 65%;
background-color: #88bbee; color: #fff;  
width: 280px; border:none 1px black; padding: 10px;
}


.box-key { 
border: solid 3px #2b52af;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 0 20px 20px 20px ; 
}


.box-float2 { 
float: left; 
width: 48%;
margin-right: 1%;
border: none;
}

.box-nav {
width: 100%;
background-color: #feb;
font-size: 12px; font-weight: normal;
line-height: 1.2;
}

.box-action {
border: solid 12px #000;
padding: 2%;
text-align: center;
font-size: 18px;
}



.box-curve {
 padding: 3px 10px 3px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
    }

.box-shadow {
 -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);
    padding: 3px 10px 3px 10px;
    font-size: 18px; color: #fff;
    text-align: center;
    -moz-border-radius: 10px;
-webkit-border-radius: 10px;
    }
    
    /* use this w/0 white text */


.box-nav {
border: none 1px #ccc;
padding: 3%;
background-color: #feb; 
font-size: 12px;
}


.box-scroll {
overflow: scroll;
}


.box-blue {
background-color: #5566dd;
color: white;
padding: 20px;
font: 200 18px helvetica, arial;
}

.box-blue h3 { color: white; }


.box-blue-lt {
background-color: #3381ff;
color: white;
padding: 20px;
font: 200 18px verdana, arial;
}

.box-blue-lt h3 {
font: 600 30px arial black, arial; 
color: #fff;
text-transform: uppercase;
line-height: 1; 
border: none;
}

.box-blue-lt h4 {
font: 600 22px arial black, arial; 
color: #000;
text-transform: uppercase;
line-height: 1; 
border: none;
}

.box-curve { 
padding: 30px;
border: solid 4px #d60f3f;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}





.box-sidebar h2 { font-size: 16px }


.box-sidebar h3 {font-size: 24px }

.box-sidebar-standsfor {
background-color:#fff; 
padding: 10px 20px;
font-size: 118px; 
color: #1e68b6;
margin-bottom: 0px;
border: solid 10px #1e68b6; 
border-radius: 10px;
margin-bottom: 20px; 
}

.box-sidebar-standsfor h2 { font-weight: 800; font-size: 30px; }

.box-sidebar-standsfor i {  font-size: 16px; }

#col1 .special {font-size: 20px; font-weight: normal; color: #1e68b6; }

#nav-candidates { 
position: absolute; top: 10px; right: 0px;
line-height: 5px; 
width: 230px; height: auto;
padding: 0px; 
background-color: transparent;
z-index: 120; }

#nav-candidates img { width: 35px; height: 35px; margin-right: 1px; border:solid 1px #fff; font-size: 10px; line-height: 1}





/* :::::::: CANDIDATES :::::: */
.box-candidate {
position: relative; 
width: auto; height: auto; 
float:left; 
	text-align: center;   
border: solid 1px #fff;
margin-right: 2%; margin-bottom: 1%;
background-color: #1e68b6;
line-height: 15px;
padding: 0 0;
color: #fff;
overflow: hidden;
}

.box-candidate img { margin: 0 }

.box-candidate .name {font-size: 16px; color: #fff; letter-spacing: -.01em }
.box-candidate .dist {
font: normal 13px arial, sans-serif; color: #abf; text-transform: uppercase}

/* ::::::::::::::::::::::: Presentations ::::::::::::::::::::::: */
.box-video { 
float: left; 
width: 40%;
height: 320px; 
margin-right: 20px; margin-bottom: 20px; 
font: normal 14px helvetica, arial, sans-serif;
overflow: hidden;
padding: 0; margin: 0
}


.box-video img  {border: solid 2px black; margin-top: 10px;}

.box-video iframe {margin-top: 10px; width: 100%; height: 300px;}

/* ::::::::::::::::::::::: issues ::::::::::::::::::::::: */
.learnmore,  .learnmore p { font: normal 12px verdana; line-height: 1.4 ; color: #888; padding: 8px}

 learnmore hr { border: dotted 1px #4aa3dd; margin-top: 20px }
.learnmore h3 { font-size: 26px }


/* :::::::::: ISSUES :::::: */

.box-issue {
position: relative; 
width: 19%; height: 300px; 
text-align: center;
float:left; 
border: solid 4px #1e68b6; 
  /*  border: solid 4px #50a5db;*/
margin-right: 1%; margin-bottom: 1%;
	background-color: #fff;
	border-radius: 5px;
padding: 10px;
overflow: hidden;
}


.box-issue .label { 
clear:both;
position: absolute; top: 0px; left: 0;
vertical-align: center; 
text-align: center;
width: 100%; height: 58px; 
/* font: bold 17px helvetica, arial, sans-serif; letter-spacing: 0;*/
 font: normal 17px 'Roboto', georgia, serif; letter-spacing: 0; 
letter-spacing: 0;
text-transform: uppercase; 
color: #ffffff; 
background-color: #1e68b6;
padding: 5px; margin: 0; 
 }
 



.box-issue p {
margin-top: 60px; 
text-align: center;
font: 400 16px helvetica, arial, sans-serif; 
line-height: 1.3;
color: #555555;
}

.box-issue .arrow { color: #1e68b6; font-size: 24px }



/* :::: donate button :::: */

button-donate:link, button-donate:visited, button-donate:active { 
display: block;
width: 100%;
	text-align: center;
	font-size: 24px; 
	color: #fff; padding: 10px; 
	background-color: #c62a33; 
border: none 2px #fff; border-radius: 10px;
}
button-donate:hover { background-color: #88bbee; }


/* :::::::::: SHAPES ::::::::::::::::::::: */

.circle {
padding: 15px 10px 6px 10px;
border:solid 2px #d60f3f;
	width: 65px;
	height: 65px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.circle h3 {font-size: 14px }
#container-form .circle { 
padding: 5px 10px 3px 10px;
border:solid 2px #d60f3f;
	width: 65px;
	height: 65px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.bar-shadow {
border-right: solid 2px #555;
padding: 5px;
    text-align: center;
}

.arrow-bold-rt {
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-left: 50px solid #c62a33;
	border-bottom: 32px solid transparent;
	}
	
.arrow-bold-PP {
	/*background-color: #c86f98; */
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-left: 50px solid #c86f98;
	border-bottom: 32px solid transparent;
	}

/* :::::::::: LINKS :::::::::::::::::::::: */

a:link { text-decoration: none; color:#2b52af}
a:active { text-decoration: none; color:#2b52af  }
a:visited { text-decoration: none; color:#2b52af  } 
a:hover{ text-decoration: none; color:#6ca7da }

a.r:link { text-decoration: none; color:#ffffff}
a.r:active { text-decoration: none; color:#ffffff  }
a.r:visited { text-decoration: none; color:#ffffff  } 
a.r:hover{ text-decoration: none; color:#ffffff; }

a.red:link { text-decoration: none; color:#c62a33}
ared:active { text-decoration: none; color:#c62a33  }
a.red:visited { text-decoration: none; color:#c62a33  } 
a.red:hover{ text-decoration: none; color:#ee7744; }


a.highlight:link { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;}
a.highlight:active { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;  }
a.highlight:visited { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;  } 
a.highlight:hover{ text-decoration: none; color:#000; background-color: #ffee99; padding: 4px;}


a.tile:link { text-decoration: solid; color:#ffffff;}
a.tile:active { text-decoration: solid; color:#ffffff  }
a.tile:visited { text-decoration: solid; color:#ffffff  } 
a.tile:hover{ text-decoration: solid; color:#f0bb44;}


 img.tile { text-decoration: solid; color:#ffffff; width: 23%; margin-right: 1%}



/* :::::::::::::::: On old election pages  :::::::::::::::::::::: */
#container-thumbnails {position: relative; border: none 1px white; width: 100%; background: white;}
div.thumbnail {width: 300px; float:left; z-index:100; position: relative; background: white;}
div.thumbnail:hover {width: 700px; z-index:200; position: absolute; bottom:0; background: white;}

/* :::::::::::::::: LISTS on interior pages ::::::::::::::  */

#container.list {width: 100%; padding: 0; margin:0;}

#container.list .container-blocks {
position: relative;
clear:both;
background-color: #fff;
width:100%;
clear:both; 
border-top: dotted 3px  #ee7744; 
padding:6px 0;
z-index: 200;
}

/* ::: Listings !!!!! Is this still in use???????/ :::: */

#container.list #block-main {width: 70%; background-color: #fff;}
#container.list #block-sidebar {width: 20%; background-color: #ccc; height: 100%}

/* :::: INFO PAGES (used in 2017 for info on opponents :::: */

#infopage {
	text-align: left;
	color: #555; 
	font-size: 18px; 
}

#infopage li { margin-left: 20px; }

#infopage .checkbox {
float: left;
    width: 130px; height: 130px;
    font-size: 230px; 
    line-height: 50%;
    margin: 10px 35px 50px 0;
    vertical-align: top;
    border: none 1px black;
    padding: 0;
}


img.checkbox {
float: left;
    width: 130px; height: 130px;
    margin: 10px 35px 50px 0;
    vertical-align: top;
    padding: 0;
}

#infopage fieldset {width: 90%; margin-left: 5%; padding: 10%; }

#infopage li {
list-style-image: url('images/square-gray.png');
margin-left: 34px;
}

/* ::::::::::::::: BLOCKS   :::::::::::: */

#blocks {
position: relative; top: 0px;
clear:both;
width:100%;
overflow:visible;
border: none;
	text-align:left;
	font-size:16px; color: #444;
	line-height: 1.8;
z-index: 50; 
}


/* :: 2-block setup on Computer; 1 block on phone :: */
.block2-40 { float: left; width: 38%; margin-right: 1%; padding: 10px}
.block2-60 { float: left; width: 59%; margin-right: 1%; padding: 10px}

/* :: 1-block setup :: */

#block-full {
clear:both;
position: relative; top:20px;
width: 100%; 
padding: 0 5%;
text-align: left;
color: #333;
font-size: 14px;
z-index: 1;
}

#block-full.spreadsheet {
width: 100%; max-width: 100%;
}

/* ::::::::::::::: 2-block setup  :::::::::::: */

#block-main { 
position:relative; top:0px;
float:left; 
width: 60%;
height:auto; min-height:500px;
margin-top:0px; margin-right:0; margin-left: 2%;
padding-bottom:20px; padding-right: 1%; padding-left: 1%;
background-color:transparent;
	text-align:left;
	font-size:16px; 
	color: #666;
	line-height: 1.4;
overflow: visible;
z-index:50;
}


/* ::::::::::::::: Organization Directory Search ::::::::::::  */

#block-main.org-search {float: left; width: 75%; margin-left: 1%;}

#block-sidebar.org-search {
float:left; width: 20%; text-align: right; margin-left: 1%
}


#container.coalition #block-main {float:left; width: 55%; margin-left:0; text-align: left }
#container.coalition #block-sidebar {float:left; width: 30%; margin-left: 2%; text-align: left }



/* ::::::::::::::: BLOCK Tweaks to main and sidebar :::::::::::: */

#block-main.events-calendar { width: 75%; overflow: visible; margin:0;}
#block-sidebar.events-calendar { width: 20%; margin: 0 0 0 1%; font-size: 11px; text-align: left}

#block-main.donate { width: 50%}
#block-sidebar.donate { width: 40%; margin-left: 3%}

.calendar-monthly {
width: 100%; height: 600px; 
border: solid 4px black;
}

.tag /*use for new, updated, etc */
{ width: 80px; background-color: #d60f3f; color: white; font-weight: bold; }

/* ::: Events :::::::::: */

.event {
position: relative;
height: auto; padding: 2% 2% .5% 2%; 
border: solid 2px  #5566d0; /* border-top: solid 26px #5566d0; */
background-color: #fff;
/* border-top-left-radius: 15px;
border-top-right-radius: 15px; */
	text-align: center;
	font-size: 16px;
	line-height: 1.3;
z-index: 90;
overflow: hidden;
}

.event div.title {color: #5566d0; font-size: 20px; font-weight:bold }
.event div.date {color: #000; font-size: 18px; font-weight:bold; text-transform: none; }
.event div.time {color: #000; font-size: 16px; font-weight:normal }
.event div.location {color: #000; font-size: 12px; font-weight:normal }

.logo { font: bold 14px arial, helvetica;}
.event div.detail {text-align: left; font-size: 12px; }

.label-cal {
position: relative; top: -10px; left: -10px;
background-color: #5566d0; 
width: 140%; 
height: auto;
text-align: left; 
color:#fff; 
font: bold 12px arial; text-transform: uppercase;
padding: 5px 10px; 
border: none 1px #fff; 
z-index:100 
}


/* ::::: TOOLTIP :::::::

.tooltip {position: relative;}

.tooltip .tooltiptext {
  position: absolute;
  visibility: hidden;
  width: 120px;
  text-transform: none;
  background-color: #066; color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 200;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #066 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
*/

img.phone100  {  width: 300px; margin-right: 20px; float: left}

/* HOW TO */
#container.howto { clear:both; width: 80%; margin-left: 10%; }
#container.howto h3.meta { font-size: 18px; letter-spacing: .2em; }
#container.howto h2 { font: bold 28px 'Roboto Condensed', sans-serif }



 
.quote2 {
font: normal 200 20px helvetica, arial; 
line-height: 1.2;
padding: 10px;
 }

.attribution {display: inline; font-size: 11px;  line-height: 1; }
.attribution-rt {display: block; font-size: 10px;  line-height: 11px; text-align: right}
.expand {letter-spacing: .05em}
.caption {font-size: 12px; text-align: left; margin-right: 20px; line-height: 12px; }
.instructions {font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.caption, .small-caps {font-size: 11px; line-height: 1.1; font-weight: 200 }
.small-caps {text-transform: uppercase }
.normal {font-style: normal; color: #555 }
.small {font-size: 12px; line-height: 1.2 }
a.extra-link {font-size: 12px; font-weight: bold }
.upper { text-transform: uppercase;}

/* :::::: FLAGS :::::: */

.newitem { 
display: block; 
width: 80px; padding: 4px 5px; 
font-size: 15px; 
position: absolute; 
background-color:#c62a33;
color: #fff; letter-spacing: .1em;
border-radius: 10px;
text-align: center;
margin-left: -20px; margin-top: -34px; 
z-index: 180; 
}

.flag { 
position: absolute; top: 25px; left: 0;
width: 60px; padding: 3px 5px;
font-size: 12px; 
color: #fff; letter-spacing: 0em;
border-radius: 5px;
text-align: center;
margin-left: -20px; margin-top: -34px; 
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
opacity: .99;
z-index: 300; 
}
.container-flag { position: relative; }
.error {color: #c62a33; font-size: 14px;}
.rotate { 
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}

/* Lists */

li { list-style-type: square }

ul li {
list-style-type: square; 
line-height: 1.3; 
font-size: 14px;
margin-top: 20px;}

ol {margin-bottom: 0; padding-bottom:0; margin-top: 0; padding-top:0}

/* ::::::::::::::::::::::: Hiders ::::::::::::::::::::::: */
.hide-phone { display: initial }
.hide-screen { display: none }
.hide-screen-pad { display: none }
.hide-phone-pad { display: initial }

.shared-heading {padding: 10px; width: 70% }

/* ::::::::::::::::::::::: jQuery Styles ::::::::::::::::::::::: */
/* Main menu, other hidden items */
.detail, .detail-vol, .detail-words { display: none; color: #555}
.detail-vol {width:100%; z-index: 150 }
.click-on { text-transform: uppercase; }
.click-off { display: none; text-transform: uppercase; }
.detail.dropdownmenu {display: none}

/* :: Social media ::: */
/* ::: SOCIAL MEDIA. This is a absolute block   ::: */
#container-sm {
position: absolute; top: 10px; right: -5px;
width: 50px;
display: block;
z-index: 600; 
}

/* :::::::::::::::: COLUMNS ::::::::::::  */
/* 70/30, 60/40, 50/50 */
/* 12/1/2022 -- I am trying to remove all styles that define widths of columns from other style sheet and consolidate here into 3 sizes. 
Default should be 70/30, but for some reason 60/40 seems to be happening... */

#column-full { 
position: relative; 
float: none; clear:both;
width: 100%; min-height: 500px;
margin-right: 0; padding: 0px  20px 0 40px ; 
text-align: left; 
border: none 1px gray;
z-index:1;
}

#column-center { 
width: 70%; 
margin-left: 15%;
text-align: center;
padding-top: 20px;
}

#column-main { 
position: relative; 
float: left; 
width: 70%;
margin-right: 1%; padding: 0px  10px 0 20px ; 
text-align: left; 
clear:both;
z-index:1;
}

#column-sidebar { 
position: relative; 
float: left; 
width: 27%;
text-align: left; 
z-index:1;
}


#column-main.issues h2 { padding-bottom: 0; margin-bottom:0; }

#column-sidebar.issues h1 { 
text-transform: uppercase;
font-size: 18px;
}


/* :::::::::::::::::::::::   TABLES   :::::::::::::::::::::: */
table {border: solid 2px #000; background-color: #fff; width: auto}

table td { position: relative; }
th {  font-weight: normal; text-align: left; 
background-color: #dde5ee; border: solid 2px #eee; }
td {  border-top: solid 1px #aaa }
td.name { font-size: 12px; font-weight: normal; text-align: left; line-height: 1.2; }
td.name a { font-weight: bold; font-size: 14px; }
td.address { font-size: 11px; font-weight: normal; text-align: left; border-bottom: solid 1px #888 }
td.position { font: bold 12px arial black, sans-serif; text-transform: uppercase; color: #888; font-stretch:condensed}

td.subhead {background-color: #eeeeff; font-size: 14px; font-weight: bold; 
color: #000; letter-spacing: .1em; border: solid 2px #333;
text-align: center }
td.list {padding-left: 10px; line-height: 1.2; font-size: 9px;}
td.name { font-size: 14px; font-weight: bold}
td.name2 { font-size: 12px; font-weight: bold}


/* ::::: Forms ::::: */

form {font-size: 14px }

#container-form { margin-left: 0px; color: #555; font-weight: bold; line-height: 1; }
#container-form .normal {font-weight: normal; font-size: 12px }
#container-form h3 {margin-left: -40px }

textarea { font-size: 15px; }

input {font-weight: normal; }

input[type=text], 
input[type=email], 
input[type=URL], 
input[type=name],
input[type=password]
{ width: 100%;
border: solid 1px #aaa; 
border-radius: 8px; 
padding: 6px 20px;
display: inline; 
margin: 6px 0; 
font-size: 15px; color: #000;
box-sizing: border-box;
}

input[type=text]:focus {background-color: #fff; border-style: solid; border: solid 1px #000; border-radius: 8px !important; 
}

textarea, input, *:focus { outline: none !important; }

input[type=select]{ font-weight: normal; }

input[type=submit]{ border: solid 4px #333; border-radius: 18px; padding: 10px;  display: inline; width: 200px; margin-top: 0; font-size: 16px;
   box-sizing: border-box; background-color: #fe9; box-shadow: 3px 3px 3px #888888;}

input[type=submit]:hover { background-color: #feb; box-shadow: 0px 0px 0px #888888;}  
   

input:invalid {border: 2px solid #888;}
input:valid {border: 1px solid #aaa;}


/* ::::: SEARCH ::::: */
#container-search { 
position: relative; 
text-align: right;
width: 40%; height: 35px;
padding:0; 
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
margin-top: 20px; 
border:solid 1px #888; 
border-radius: 0 20px 20px 0; 
font-size: 13px; 
}

#container-search:focus { width: 100%; }


#container-search input[type=text] { 
position: relative;  top: 0px; left:-5px;
float: left;
height: 100%; width: 80%;  
margin: 0; 
border:none 1px #888; 
vertical-align: top; 
 }
 
#container-search input[type=text]:focus { border: none;}

#container-search button {
position: relative; top:0; right: 0px;
float: left; 
height: 100%; width: 20%; 
padding: 0; margin: 0; 
background-color: #fff; 
/* background-image: url("images/icon_search.png"); */
background-repeat: no-repeat;
border: none;
}


/* :::::::: Homepage  BANDS :::::  */

#container.homepage .pan-volunteer {
position: relative; top:0px;
width: 100%; text-align: left; 
padding:0; margin: 0;
border: solid 20px #6ca7da; border-width: 20px 0;
}

#container.homepage .pan-volunteer img { margin:0; vertical-align: bottom; margin-bottom: -10px }
#container.homepage .pan-volunteer h1 {font-size: 85px }

#container.homepage .band {
width: 100%; 
padding: 20px 0; 
}

#container.homepage .band h1 {font-size: 80px; color: #fff;  }


/* ::::::::::  BLOCKS ::::::::*/
.block2 {
position: relative;
float: left; 
width: 47%;
height: auto;
padding-left: 10px;
margin-right: 1%;
text-align: left; vertical-align: top; 
}

/* :: BLOCK3 :: 
Used on election-materials _graphics page*/
.block3 {
float: left; 
width: 31%; height: auto;
padding: 20px;
margin-right: 1%; margin-bottom: 0px; 
text-align: center; 
vertical-align: top; 
border: solid 1px var(--lightblue);
border-radius: 24px;
}

.block3 img {width: 100%}

.block3 p {text-align: left }
.block3 h1 { font: bold 28px 'roboto', sans-serif; }
.block3 h3 { font: bold 18px roboto, sans-serif; }

/* ::Election Resources page :: */
#resources .block3 {
width: 31%; height: 360px;
}

.block4 {
float:left; 
width: 23%; margin-right: 1%;
}

.container-blocks-full { 
position: relative;
float: left; 
width: 100%; height: auto;
border: solid 12px #3c56f2;
padding: 1% 1%; margin: 0; 
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);
line-height: 1.2;
}

.container-blocks-full.block2 {
position: relative;
float: left; 
width: 48%;
height: auto;
padding-left: 0; padding-top: 0;
margin-right: 0;
text-align: left; vertical-align: top; 
}

.container-blocks-full.block2 img {width: 100%; margin: 0}
.container-blocks-full.block2 h1 { font: normal 18px Prata, serif;  }
.container-blocks-full.block2 h3 { font-weight: normal }


/*  :::::: BLOCKS ::::::  */
#block-sidebar { 
position: relative; top: 20px; 
float:left; 
width: 40%; height: auto; padding: 2%; 
margin-left: 2%;
text-align: left; 
background-color: #fff;
z-index:1;
}

#block-sidebar #container-filters {height: auto; text-align: right;   }


/* Used for canvass/eventdisplays */
.block2-small, .block2-smaller {
position: relative;
float: left; 
text-align: right; 
vertical-align: top;
padding-left: 10px; }


block2-smaller { min-width: 20%; border:none 1px black;}
block2-small {width:70%; border:none 1px black; }

.block2-smaller img.headshot {
width: 90px; height: 90px; float:right; margin-right: 10px; }

.block2-smaller .dateblock {
width: 160px; 
color:#000;
font-size: 11px;
line-height: 1.2; 
text-align: right; 
float:right;
margin-right: 10px;
border: none 1px black }

.block2-smaller .dateblock h3 { 
font-size: 17px; 
text-transform: uppercase;
}

.block2-smaller .dateblock .button-medium {font-size: 15px; padding:3px; border-radius: 3px; margin:-3px 0 1px 0}

.block2-small.textblock {
width: 58%;
font-size: 14px;
text-align: left;  
line-height: 1.2;
margin-top:0; padding-top: 0;
border:none 1px black;
}

.block2-small.textblock img {
display:inline;
margin-top:-20px;
float: right;
/* position: absolute; top: 0px; right: 20px; */
width: 180px;
}

.block2-small.textblock h3 {
font-size: 24px;
color: #000;
text-align: left; 
padding-bottom:0; margin-bottom:0; 
}


/* :::::::::: BLOCK2  2 UP on homepage ::::::::*/

#container.homepage .block2 {
position: relative;
float: left; 
width: 48%;
height: 100%;
padding-left: 0; padding-top: 0;
margin-right: 1%;
text-align: left; 
vertical-align: top; 
}

#container.homepage .block2 h2 { }
/* time and date */
#container.homepage .block2 h3 { font-weight: normal }

/* More info */
#container.homepage .block2 a.moreinfo:link,
#container.homepage .block2 a.moreinfo:visited 
{ font-size: 12px; text-transform: uppercase; line-height: 1.5; margin-left: 10px}

#container.homepage .block2 a.moreinfo:hover
 { color: blue }

#container.homepage .block2 img {width: 98%}
#container.homepage .block2 .address {font-size: 12px; }


.block2 img {width: 100%;  margin: 1%}
.block2.poster h4  { display: none; font-size: 18px; margin-top:-20px; text-transform: uppercase; letter-spacing: .3em; margin-left: 20px; text-align: center;}
.block2.text h2  { font-size: 28px; color: #2B52AF;}
.block2.text h2.subtitle  { color: #2B52AF; font-size: 22px;}
.block2.text .time { font-size: 12px; color: #000;}
.block2.text .address { font-size: 16px; color: #000;}
.block2.text .event-text { position: relative; font-size: 14px;  color: #555; line-height: 1.2; margin-bottom: 10px;}
.block2.text a.button:link,  a.button:visited {position: relative; display: inline; padding: 5px 30px; margin-top: 10px; text-align: center; border-radius: 10px;}


/* meta header */
#container.homepage .block2 h4 {
text-transform: uppercase; letter-spacing: .1em; text-align: left; margin-top: 0; padding-top: 0;
}

/* :::: Women's Summit:::::  */

.pinstyle.WS {
position: relative;
float:left; 
width: 21%; 
height: auto; min-height: 250px;
margin-left: 1%;
border: solid 1px #ccc;
background-color: #fff;
}
.pinstyle.WS img {width: 99%; margin-bottom:0}
.pinstyle.WS {padding: 5px; text-align: center; font-size: 12px}
.pinstyle.WS h3 {font: normal 1.8vw 'Roboto Condensed', helvetica, arial; color:#888; line-height: 1.2}
.pinstyle.WS h4 b {font: bold 16px  helvetica, arial; color:#000;}
.pinstyle.WS h4 {font: normal 14px  helvetica, arial; color:#888; margin-top: -10px}

#summit-2021 a.button {
background-color: #ee7744}

#summit-2021 h1 {
color: #ee7744;
margin-left: 0;
}

/* :::::::::: INTERIOR PAGES ::::::::: */
/* :: GRASSROOTS DIRECTORY  */
/* :: ISSUE COLUMNS  */
/* :: COALITION COLUMNS  */
/* :: ADVocacy COLUMNS  */


/* :::: :: GRASSROOTS DIRECTORY :: :: */

#banner-directory { height: 140px; text-align: left; padding: 5px 30px; 
background-color: #5495e5; position: relative; top: 0px; }
.banner-directory-title {float:left; width: 30%; }
.banner-directory-menu {
font-size: 12px; float: left; width: 67%; margin-left: 3%; vertical-align: top; border: none; position: relative; top:0px; line-height: 1.6
}


#banner-directory .ttmessage {position: absolute; z-index: 200; top:20px; left: 100px; width: 350px}

.detail.dropdownmenu, .ttmessage {display: none}


/* :::: ISSUES :::: */ 
.imagecredit { font-size: 11px; margin: -5px 10px 0 20px; text-align: right; padding-right: 15px;}



/* :::::::::: ORGANIZATONS :::::::::: */
.org {
padding: 2%; 
border: solid 1px #888;
line-height: 1.2;
font-size: 12px
}

.org .name {font: bold 18px Arial, helvetica; color: #000 }

.org a { font-size: 14px }

/*  ::::::::::::::::: Directory: List of orgs ::::::::::: */
#directory {
border: solid 10px #2b52af;
background-color: #fff;
height: auto;
min-height: 500px; max-width: 1000px;
padding: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 120;
} 

#directory .star { color: #6ca7da }
#directory .icon-org { width: 60px; height: 60px; float:left;  }
#directory h3 {font-size: 18px;color: #2b52af;} 
#directory .location { font-weight: normal; font-size: 16px; color: #888 } 
#directory .about {font-weight: normal; font-size: 12px; color: #888 } 
#directory .list-text { margin-left: 0px; font-size: 12px; }
#directory .list-twitter-name { font-size: 12px;color: #aa0000 }

/* :::: CD LINKS ::::: */

.links-cd {
position: relative; 
bottom: 0px; display: block;
margin-left: 20px;
text-align: center;
width: 100%; 
overflow: visible;
 }


.links-cd a {
float: left; 
width: 50px;
background-color: #c62a33;
padding: 8px 5px 10px 5px; 
border: solid 1px #fff; 
border-bottom: none;
border-radius: 12px 12px 0 0;
vertical-align: top;
	font-size: 13px; font-weight: bold;
	z-index: 50;
	}

.links-cd a:hover { background-color: #2b52af; }

.links-cd a.bg-blue { background-color: #2b52af;}

/* ::::  MAPS :::: */

.map-label, .map-label2 {
padding: 8px 12px;
background-color: #21409A;
text-align: center; line-height: 1.1;
width: 240px; height: 50px;
border-radius: 10px;
display: inline;
color: #fff; 
overflow: visible; 
}

.map-label2 {background-color: #6ca7da;}

/* :::: ORG DISPLAY (single org) ::::: */
#block-main.org {
position: relative; top: 20px; 
width: 75%; border: none; }


#orginfo {
position: relative; color: #555;
border: solid 20px #000;
padding: 30px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; 
}

#orginfo .org-logo { float: left; font-size: 40px !important; margin: 0px 20px 30px 0; width: 200px; height: 200px; line-height:1; color: #6ca7da }

#orginfo .org-logo img {
width:200px; height: 200px; margin-right: 30px; margin-bottom: 50px; border: solid 1px #888; border-radius: 10px }


#orginfo .org-name-short {color: #6ca7da; font-size: 24px; font-weight: normal }

#orginfo h1 {color: #000 }

#orginfo .location { 
font: normal 20px helvetica, arial; 
color: #6ca7da; 
margin-top: 5px}


#orginfo .info-basic h1 {font-size: 50px; line-height: 1; }
#orginfo .contact a {margin-left: 0px; font-size: 11px;   }
#orginfo .contact img {width: 40px  }

#orginfo .org-about { clear:both; font-size: 22px;  color: #5495e5; line-height: 1.4 }
#orginfo .org-moreinfo { font-size: 16px;  color: #555; line-height: 1.4 }
#orginfo .org-moreinfo a:link, #orginfo .org-moreinfo a:visited { color: #6ca7da; text-transform: uppercase }

#orginfo .org-members-no, #orginfo .activities {color: #333; font-size: 18px }
#orginfo .org-members-no b, #orginfo .activities b {color: #235f9a; font-size: 18px}


/* :::: Yearly actions / history ::::: */

h3.election-year,  h3.election-year-now, h3.year-now  { 
margin-left: -20px; 
background-color:#aaa; color: #fff;
padding: 8px; margin-bottom: 10px }

h3.election-year-now  { background-color:#2b52af;}

h3.year-now  { background-color:#008866;}

/* :::: Timestamp ::::: */
.timestamp {text-align: right; font-size: 11px;}



/* :::: LOGOS diplayed ::::: */

.logos {width: 150px; height: 150px; float: left; margin-right: 5px; margin-bottom: 5px} 



/* Matrix */
.yesno {font: 600 16px helvetica, arial, sans-serif; color: #000 }


/* :::::::::: FOOTERS ::::::::::::::  */

#footer {
position:relative; top: 0px;
padding:20px; margin:0;
width:90%; height: auto;
clear:both;
	background-color: var(--darkblue);
	font-size: 14px; line-height: 1.2;
	text-align: center;

color:#eee;
z-index:0;
overflow: hidden;
}

/*  Sources / footnotes  */

#sources { 
text-align: left;
font-size: 12px;
padding: 10px 10px 10px 50px;
font-size: 12px; line-height: 1.2; color: #555; 
border-top: dotted 3px #888;
}

#sources h3 { text-transform: uppercase }

#sources a { font-weight: bold }


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

/* :: Actions */
a.button-ACT:link, .button-ACT:visited {
display: inline; position: relative;
background-color: white; 
color: var(--purple);
border-radius: 20px; 
font-size: 16px; border:solid 2px var(--purple); border-radius: 20px; padding: 12px
 }

a.button-ACT:hover  { 
background-color: var(--purple);
color: white;
}


a.button-learnmore:link { text-decoration: none; color:#5566dd; background-color:#def; padding: 4px; font: normal 12px arial, sans-serif;}
a.button-learnmore:active { text-decoration: none; color:#000; background-color:#def; }
a.button-learnmore:visited { text-decoration: none; color:#5566dd; background-color:#def; } 
a.button-learnmore:hover{ text-decoration: none; color:#000; background-color:#cff0aa; }

a.button:link, a.button:visited, a.button:active { 
width: auto; 
font-size: 16px; 
padding: 5px 15px; 
background-color: var(--blue);
color: #fff;
text-decoration: none;
text-align: center;
border: none 2px white; 
border-radius: 10px;
}

a.button:hover { 
 background-color: var(--teal);
 color: white; 
 border: solid 2px white; 
}

.openbutton {
width: 350px;
background-color: #2b52af;
color: #fff; 
border-radius: 10px; 
display:inline; 
padding: 10px; 
font-size: 20px; 
}

a.button-1up:link, a.button-1up:visited, a.button-1up:active {
float: left;
display: block;
text-align: center;
width: 100%; 
padding: 20px; 
margin:0; margin-bottom: 20px;
border: none 12px #fff; 
border-radius: 0px;
font-size: 18px;
line-height: 1.1;
background-color: #1014a8;
color: #fff;
}

a.button-2up:link, a.button-2up:visited, a.button-2up:active {
float: left;
display: block;
width: 50%; 
padding: 14px; margin:0;
border: solid 12px #fff; border-radius: 20px;
font-size: 14px;
line-height: 1.1;
}

a.button-3up:link, a.button-3up:visited, a.button-3up:active {
float: left; 
width: 32%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin-left: 1%;
border: solid 3px #fff; border-radius: 12px;
font-size: 12px; color: #fff;
line-height: 1.4;
}

a.button-3up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-4up:link, a.button-4up:visited, a.button-4up:active {
float: left; 
width: 24%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin:0;
border: solid 3px #fff; border-radius: 12px;
font-size: 14px; color: #fff;
line-height: 1.4;
}

a.button-4up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-5up:link, a.button-5up:visited, a.button-5up:active {
float: left; 
width: 19%; height: auto; 
vertical-align: middle;
padding: 10px 0 10px 0; margin:0;
border: solid 3px #fff; border-radius: 12px;
font-size: 11px; color: #fff;
line-height: 1.4;
}

a.button-5up:link h2 {font-size: 24px; font-weight: bold; color: white }

a.button-small:link,
 a.button-small:visited, 
 a.button-small:active   {
display: block; 
width: 80%; margin-left: 10%;
padding: 1px 10px; 
background-color: #394ff6;
border: solid 1px #fff; 
border-radius: 20px;
margin-top: 3px; margin-bottom: 0;
	text-align: center;
	font: normal 14px arial, sans-serif; 
	color: #fff;
	text-decoration: none; 
}

a.button-small:hover   {
 background-color: #f0bb44; color: #000;}

a.button-medium:link, a.button-medium:visited, a.button-medium:active { 
font-size: 20px; 
color: #fff; padding: 5px 10px; 
background-color: #1e68b6; 
border: none 2px #fff; border-radius: 5px;
}
a.button-medium:hover { background-color: #6ca7da;}


/* ::::::::::::::: Boxes :::::::::::: */
.box-subtle {
border: solid 1px #ccc;
padding: 2%;
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);
overflow: hidden; 
}

.box-sidebar {
background-color:#4aa3dd; 
padding: 10px 20px;
font-size: 12px; 
color: #fff;
margin-bottom: 0px;
border: solid 1px white; 
}

/* Info box  */
.infobox-electiondates {
position: absolute; top: 0px; left: 65%;
background-color: #88bbee; color: #fff;  
width: 280px; border:none 1px black; padding: 10px;
}


.box-key { 
border: solid 3px #2b52af;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 0 20px 20px 20px ; 
}


.box-float2 { 
float: left; 
width: 48%;
margin-right: 1%;
border: none;
}

.box-nav {
width: 100%;
background-color: #feb;
font-size: 12px; font-weight: normal;
line-height: 1.2;
}

.box-action {
border: solid 12px #000;
padding: 2%;
text-align: center;
font-size: 18px;
}



.box-curve {
 padding: 3px 10px 3px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
    }

.box-shadow {
 -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);
    padding: 3px 10px 3px 10px;
    font-size: 18px; color: #fff;
    text-align: center;
    -moz-border-radius: 10px;
-webkit-border-radius: 10px;
    }
    
    /* use this w/0 white text */


.box-nav {
border: none 1px #ccc;
padding: 3%;
background-color: #feb; 
font-size: 12px;
}


.box-scroll {
overflow: scroll;
}


.box-blue {
background-color: #5566dd;
color: white;
padding: 20px;
font: 200 18px helvetica, arial;
}

.box-blue h3 { color: white; }


.box-blue-lt {
background-color: #3381ff;
color: white;
padding: 20px;
font: 200 18px verdana, arial;
}

.box-blue-lt h3 {
font: 600 30px arial black, arial; 
color: #fff;
text-transform: uppercase;
line-height: 1; 
border: none;
}

.box-blue-lt h4 {
font: 600 22px arial black, arial; 
color: #000;
text-transform: uppercase;
line-height: 1; 
border: none;
}

.box-curve { 
padding: 30px;
border: solid 4px #d60f3f;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}





.box-sidebar h2 { font-size: 16px }


.box-sidebar h3 {font-size: 24px }

.box-sidebar-standsfor {
background-color:#fff; 
padding: 10px 20px;
font-size: 118px; 
color: #1e68b6;
margin-bottom: 0px;
border: solid 10px #1e68b6; 
border-radius: 10px;
margin-bottom: 20px; 
}

.box-sidebar-standsfor h2 { font-weight: 800; font-size: 30px; }

.box-sidebar-standsfor i {  font-size: 16px; }

#col1 .special {font-size: 20px; font-weight: normal; color: #1e68b6; }

#nav-candidates { 
position: absolute; top: 10px; right: 0px;
line-height: 5px; 
width: 230px; height: auto;
padding: 0px; 
background-color: transparent;
z-index: 120; }

#nav-candidates img { width: 35px; height: 35px; margin-right: 1px; border:solid 1px #fff; font-size: 10px; line-height: 1}





/* :::::::: CANDIDATES :::::: */
.box-candidate {
position: relative; 
width: auto; height: auto; 
float:left; 
	text-align: center;   
border: solid 1px #fff;
margin-right: 2%; margin-bottom: 1%;
background-color: #1e68b6;
line-height: 15px;
padding: 0 0;
color: #fff;
overflow: hidden;
}

.box-candidate img { margin: 0 }

.box-candidate .name {font-size: 16px; color: #fff; letter-spacing: -.01em }
.box-candidate .dist {
font: normal 13px arial, sans-serif; color: #abf; text-transform: uppercase}

/* ::::::::::::::::::::::: Presentations ::::::::::::::::::::::: */
.box-video { 
float: left; 
width: 40%;
height: 320px; 
margin-right: 20px; margin-bottom: 20px; 
font: normal 14px helvetica, arial, sans-serif;
overflow: hidden;
padding: 0; margin: 0
}


.box-video img  {border: solid 2px black; margin-top: 10px;}

.box-video iframe {margin-top: 10px; width: 100%; height: 300px;}

/* ::::::::::::::::::::::: issues ::::::::::::::::::::::: */
.learnmore,  .learnmore p { font: normal 12px verdana; line-height: 1.4 ; color: #888; padding: 8px}

 learnmore hr { border: dotted 1px #4aa3dd; margin-top: 20px }
.learnmore h3 { font-size: 26px }


/* :::::::::: ISSUES :::::: */

.box-issue {
position: relative; 
width: 19%; height: 300px; 
text-align: center;
float:left; 
border: solid 4px #1e68b6; 
  /*  border: solid 4px #50a5db;*/
margin-right: 1%; margin-bottom: 1%;
	background-color: #fff;
	border-radius: 5px;
padding: 10px;
overflow: hidden;
}


.box-issue .label { 
clear:both;
position: absolute; top: 0px; left: 0;
vertical-align: center; 
text-align: center;
width: 100%; height: 58px; 
/* font: bold 17px helvetica, arial, sans-serif; letter-spacing: 0;*/
 font: normal 17px 'Roboto', georgia, serif; letter-spacing: 0; 
letter-spacing: 0;
text-transform: uppercase; 
color: #ffffff; 
background-color: #1e68b6;
padding: 5px; margin: 0; 
 }
 



.box-issue p {
margin-top: 60px; 
text-align: center;
font: 400 16px helvetica, arial, sans-serif; 
line-height: 1.3;
color: #555555;
}

.box-issue .arrow { color: #1e68b6; font-size: 24px }



/* :::: donate button :::: */

button-donate:link, button-donate:visited, button-donate:active { 
display: block;
width: 100%;
	text-align: center;
	font-size: 24px; 
	color: #fff; padding: 10px; 
	background-color: #c62a33; 
border: none 2px #fff; border-radius: 10px;
}
button-donate:hover { background-color: #88bbee; }


/* :::::::::: SHAPES ::::::::::::::::::::: */

.circle {
padding: 15px 10px 6px 10px;
border:solid 2px #d60f3f;
	width: 65px;
	height: 65px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.circle h3 {font-size: 14px }
#container-form .circle { 
padding: 5px 10px 3px 10px;
border:solid 2px #d60f3f;
	width: 65px;
	height: 65px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.bar-shadow {
border-right: solid 2px #555;
padding: 5px;
    text-align: center;
}

.arrow-bold-rt {
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-left: 50px solid #c62a33;
	border-bottom: 32px solid transparent;
	}
	
.arrow-bold-PP {
	/*background-color: #c86f98; */
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-left: 50px solid #c86f98;
	border-bottom: 32px solid transparent;
	}

/* :::::::::: LINKS :::::::::::::::::::::: */

a:link { text-decoration: none; color:#2b52af}
a:active { text-decoration: none; color:#2b52af  }
a:visited { text-decoration: none; color:#2b52af  } 
a:hover{ text-decoration: none; color:#6ca7da }

a.r:link { text-decoration: none; color:#ffffff}
a.r:active { text-decoration: none; color:#ffffff  }
a.r:visited { text-decoration: none; color:#ffffff  } 
a.r:hover{ text-decoration: none; color:#eeFF99; }

a.red:link { text-decoration: none; color:#c62a33}
ared:active { text-decoration: none; color:#c62a33  }
a.red:visited { text-decoration: none; color:#c62a33  } 
a.red:hover{ text-decoration: none; color:#ee7744; }


a.highlight:link { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;}
a.highlight:active { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;  }
a.highlight:visited { text-decoration: none; color:#2b52af; background-color: #ffee99; padding: 4px;  } 
a.highlight:hover{ text-decoration: none; color:#000; background-color: #ffee99; padding: 4px;}


a.tile:link { text-decoration: solid; color:#ffffff;}
a.tile:active { text-decoration: solid; color:#ffffff  }
a.tile:visited { text-decoration: solid; color:#ffffff  } 
a.tile:hover{ text-decoration: solid; color:#f0bb44;}


 img.tile { text-decoration: solid; color:#ffffff; width: 23%; margin-right: 1%}



/* :::::::::::::::: On old election pages  :::::::::::::::::::::: */
#container-thumbnails {position: relative; border: none 1px white; width: 100%; background: white;}
div.thumbnail {width: 300px; float:left; z-index:100; position: relative; background: white;}
div.thumbnail:hover {width: 700px; z-index:200; position: absolute; bottom:0; background: white;}

/* :::::::::::::::: LISTS on interior pages ::::::::::::::  */

#container.list {width: 100%; padding: 0; margin:0;}

#container.list .container-blocks {
position: relative;
clear:both;
background-color: #fff;
width:100%;
clear:both; 
border-top: dotted 3px  #ee7744; 
padding:6px 0;
z-index: 200;
}

/* ::: Listings !!!!! Is this still in use???????/ :::: */

#container.list #block-main {width: 70%; background-color: #fff;}
#container.list #block-sidebar {width: 20%; background-color: #ccc; height: 100%}

/* :::: INFO PAGES (used in 2017 for info on opponents :::: */

#infopage {
	text-align: left;
	color: #555; 
	font-size: 18px; 
}

#infopage li { margin-left: 20px; }

#infopage .checkbox {
float: left;
    width: 130px; height: 130px;
    font-size: 230px; 
    line-height: 50%;
    margin: 10px 35px 50px 0;
    vertical-align: top;
    border: none 1px black;
    padding: 0;
}


img.checkbox {
float: left;
    width: 130px; height: 130px;
    margin: 10px 35px 50px 0;
    vertical-align: top;
    padding: 0;
}

#infopage fieldset {width: 90%; margin-left: 5%; padding: 10%; }

#infopage li {
list-style-image: url('images/square-gray.png');
margin-left: 34px;
}

/* ::::::::::::::: BLOCKS   :::::::::::: */

#blocks {
position: relative; top: 0px;
clear:both;
width:100%;
overflow:visible;
border: none;
	text-align:left;
	font-size:16px; color: #444;
	line-height: 1.8;
z-index: 50; 
}


/* :: 2-block setup on Computer; 1 block on phone :: */
.block2-40 { float: left; width: 38%; margin-right: 1%; padding: 10px}
.block2-60 { float: left; width: 59%; margin-right: 1%; padding: 10px}

/* :: 1-block setup :: */

#block-full {
clear:both;
position: relative; top:20px;
width: 100%; 
padding: 0 5%;
text-align: left;
color: #333;
font-size: 14px;
z-index: 1;
}

#block-full.spreadsheet {
width: 100%; max-width: 100%;
}

/* ::::::::::::::: 2-block setup  :::::::::::: */

#block-main { 
position:relative; top:0px;
float:left; 
width: 60%;
height:auto; min-height:500px;
margin-top:0px; margin-right:0; margin-left: 2%;
padding-bottom:20px; padding-right: 1%; padding-left: 1%;
background-color:transparent;
	text-align:left;
	font-size:16px; 
	color: #666;
	line-height: 1.4;
overflow: visible;
z-index:50;
}


/* ::::::::::::::: Organization Directory Search ::::::::::::  */

#block-main.org-search {float: left; width: 75%; margin-left: 1%;}

#block-sidebar.org-search {
float:left; width: 20%; text-align: right; margin-left: 1%
}


#container.coalition #block-main {float:left; width: 55%; margin-left:0; text-align: left }
#container.coalition #block-sidebar {float:left; width: 30%; margin-left: 2%; text-align: left }



/* ::::::::::::::: BLOCK Tweaks to main and sidebar :::::::::::: */

#block-main.events-calendar { width: 75%; overflow: visible; margin:0;}
#block-sidebar.events-calendar { width: 20%; margin: 0 0 0 1%; font-size: 11px; text-align: left}

#block-main.donate { width: 50%}
#block-sidebar.donate { width: 40%; margin-left: 3%}

.calendar-monthly {
width: 100%; height: 600px; 
border: solid 4px black;
}

.tag /*use for new, updated, etc */
{ width: 80px; background-color: #d60f3f; color: white; font-weight: bold; }

/* ::: Events :::::::::: */

.event {
position: relative;
height: auto; padding: 2% 2% .5% 2%; 
border: solid 2px  #5566d0; /* border-top: solid 26px #5566d0; */
background-color: #fff;
/* border-top-left-radius: 15px;
border-top-right-radius: 15px; */
	text-align: center;
	font-size: 16px;
	line-height: 1.3;
z-index: 90;
overflow: hidden;
}

.event div.title {color: #5566d0; font-size: 20px; font-weight:bold }
.event div.date {color: #000; font-size: 18px; font-weight:bold; text-transform: none; }
.event div.time {color: #000; font-size: 16px; font-weight:normal }
.event div.location {color: #000; font-size: 12px; font-weight:normal }

.logo { font: bold 14px arial, helvetica;}
.event div.detail {text-align: left; font-size: 12px; }

.label-cal {
position: relative; top: -10px; left: -10px;
background-color: #5566d0; 
width: 140%; 
height: auto;
text-align: left; 
color:#fff; 
font: bold 12px arial; text-transform: uppercase;
padding: 5px 10px; 
border: none 1px #fff; 
z-index:100 
}


/* ::::: TOOLTIP :::::::

.tooltip {position: relative;}

.tooltip .tooltiptext {
  position: absolute;
  visibility: hidden;
  width: 120px;
  text-transform: none;
  background-color: #066; color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 200;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #066 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
*/

img.phone100  {  width: 300px; margin-right: 20px; float: left}

/* HOW TO */
#container.howto { clear:both; width: 80%; margin-left: 10%; }
#container.howto h3.meta { font-size: 18px; letter-spacing: .2em; }
#container.howto h2 { font: bold 28px 'Roboto Condensed', sans-serif }