/* LWVNM style sheet */

body { background: white;
	color: #000000;
	min-width: 800px;
	/*padding: 8px;*/
	/*font-family: Times, "Palatino Linotype", serif;*/
	}

h1, h2, h3, h4, h5, h6 {
        /*font-family: Times, "Palatino Linotype", serif;*/
	font-weight: bold;
	text-align: left;
	margin: 10px 0 0 0;
        color: #005696;       /* Match the color on the logo */
	/* background: #ffffff;  /*was cornflower: #fff8dc */
        }
h1 { color: black;
     font-family: Serif; font-weight: bold;
     text-shadow: 2px 2px 2px #bbb;
   }
h2 { color: #005696; }        /* Match the color on the logo */
h3 { color: #048; }
h4, h5 { color: #022; }

#header {
    background: #fcfcfb;
    padding: 0px;
    min-height: 100px;
    background: #f7f7f7;  /* Approximate the color on the logo */
    background-image: url("/images/sangres.jpg");
    /*background-repeat: repeat-x;*/
    background-size: cover;
    background-position: center center;
    }
    h1 { padding-top: 9px; }
    #banner {
        padding: 0; margin: 0; border: 0;
        /* the banner is actually the LWV logo at upper left */
	width: 350px;
	max-width: 100%; height: auto;
	float: left;
	margin: 0;
        padding-bottom: .5em;
	}

.aboutlwv { background: #f4f4f4; }

b.maincat { font-size: 1.3em; font-weight: bold; }

#leftcolumn {
	width: 21%;
	float: left;
	border-right: 5px solid #003366;
	padding: 8px;
	margin: 0;
	font-family: Verdana, Helvetica, sans-serif;
	}
	#leftcolumn a:link { text-decoration: none; }
	#leftcolumn a:visited { text-decoration: none; }
	#leftcolumn a:focus { text-decoration: underline; }
	#leftcolumn a:hover { text-decoration: underline; }
	#leftcolumn a:active { text-decoration: underline; }
	.skip2content { display: none; }

#leftcolumn h2 { font-size: 1.3em;  color: black; }
#leftcolumn h3 { font-size: 1.25em; color: black; font-style: italic; }

img { border-width: 0; }

img.border { border: .5em solid white; }

ul.navlist { list-style: none inside;
	margin-left: 25px;
	padding: 0;
	}
ul.subnavlist { list-style: none inside;
	margin-left: 15px;
	padding: 0;
	font-size: 80%;
	}
ul.navlist li { list-style-type: none;
	display: block;
	margin: .2em 0 0 0;
	padding: 0;
	}

ul.blank { list-style: none outside;
	margin: 0;
	padding: 10px;
	}

/* Calendar page: differentiate events that are in the past. */
tr.past { color: grey; }

/* More list-type classes
** note that IE doesn't support "upper/lower-latin" and requires "upper/lower-alpha" instead
**
*/

.capA { list-style-type: upper-latin;
	list-style-type: upper-alpha; }
.smallA { list-style-type: lower-latin;
	list-style-type: lower-alpha;  }
.decimal { list-style-type: decimal; }
.square { list-style-type: square; }

#rightcolumn { margin: 0 0 0 23%;
	padding-left: 10px;
	}

#footer { margin: 25px 0 10px 0;
	border-top: 2px solid #003366;
	font-size: 75%;
	font-style: oblique;
	font-family: Verdana, Helvetica, sans-serif;
	}

u { text-decoration: underline; }

.alert { color: #ff0000;  /* Red letters */
	font-weight: bold;
	font-size: 120%;
	}
.emphasis { color: #ff0000;  /* Red letters */
	font-weight: bold;
	}
.alert a { color: #ff0000; }

.subtitle { font-size: 75%;
	font-style: oblique;
	font-weight: normal;
	}
.synopsis { font-size: 80%;
    font-style: italic;
    font-weight: normal;
    }

.news { background: #f3fff5; }
.news legend { font-weight: bold; font-size: 120%; }

.announceBlue, .announceGreen, .announceRed, .announceWhite, .announceViolet, .announceLight {
	/* min-width: 500px; */
	border-style: outset;
	border-color: #bbb;
  	border-width: 3px;
	padding: 5px;
	margin: 10px 0 10px 0;
	}
	.announceBlue { background: #dff;  }  /* powderblue */
	.announceGreen { background: #98fb98; }   /* palegreen */
	.announceRed { background: #ff6666;       /*  */
		color: #ffffff;
		}
	.announceWhite { background: #ffffff; }
	.announceViolet { background: #fee; }
        .announceLight { background: #eff; }


.float-left { float: left;
   margin: 5px 10px 5px 0;
   }
.float-right { float: right;
   margin: 5px 5px 5px 0;
   }

.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }

.align-right { text-align: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }

.icon { border: 0;
	vertical-align: text-bottom;
	margin: 0 5px;
	}

/* Make an a look like a button */
a.buttonlike {
    background: #ddd;
    color: blue;
    font-weight: bold;
    border: 3px outset #ddd;
    padding: .2em;
    text-decoration: none;
}
a.buttonlike:hover { background: #eee; }
a.buttonlike:active { border: 3px inset #ddd; }
a.button_inactive { border: 3px inset #ddd; }

a.buttonlike_sm {
    background: #ddd;
    color: blue;
    font-weight: bold;
    border: 2px outset #ddd;
    padding: .1em;
    text-decoration: none;
}
a.buttonlike_sm:hover { background: #eee; }
a.buttonlike_sm:active { border: 3px inset #ddd; }

/* Donate button */
a.donatebutton {
    display: inline-block;
    padding: 0.5em 1em;


    text-decoration: none;
    color: #FFF;
    border-radius: 10px;
    background-image: linear-gradient(#35f 0%, #6cf 100%);
}
a.donatebutton:hover {
    background-image: linear-gradient(#79f 0%, #7df 70%);
}
a.donatebutton:active { border: 3px inset #ddd; }

/* The 100-year minutes, randomly chosen on the home page */
.minute {
    background: #eff;
    border: 4px outset #ddd;
    border-radius: 30px;
    padding: .7em;
    margin: .75em .5em;
}

table { border: thin solid #000000;
	width: 96%;
	margin: auto;
	border-collapse: collapse;
	background: #fff8dc;    /* was white */
	}
	caption { font-size: 150%;
		color: #0000ff;
		/*font-family: Verdana, Helvetica, sans-serif;*/
		font-weight: bold;
		text-align: left;
		}
	table th { background-color: #dddddd;   /* grrey */
		text-align: center;
		font-size: 110%;
		border: thin solid #000000;
		padding: 3px;
                text-align: left;
		}
	table td { background-color: #ffffff;  /* white */
		text-align: left;
		font-size: 90%;
		border: thin solid #000000;
		padding: 2px 6px;
		}

table.invisible { border-width: 0;
	color: #000000;
	background: #ffffff;  /*was cornflower: #fff8dc */
	/* float: left; */
	margin: 0;
	}
	table.invisible caption { font-size: 120%;
		color: #0000ff;
		/*font-family: Verdana, Helvetica, sans-serif;*/
		font-weight: bold;
		text-align: left;
		margin: 10px 0;
		}
	table.invisible th {
		color: #000000;
		background: #fff8dc;
		text-align: center;
		font-size: 100%;
		border-width: 0;
		padding: 3px 0;
		}
	table.invisible td {
		text-align: left;
		font-size: 100%;
		color: #000000;
		background: #ffffff;  /*was cornflower: #fff8dc */
		border-width: 0;
		padding: 2px 6px;
		}

table.bills { border-width: 0;
	background: #fff8dc;
	color: #000000;
	margin: 10px 0 0 15px;
	border-collapse: collapse;
	empty-cells: hide;
	}
	table.bills th { color: #0000ff;
		background: #dddddd;
		text-align: left;
		/*font-family: Verdana, Helvetica, sans-serif;*/
		font-weight: bold;
		font-size: 120%;
		border: 2px solid #000000;
		padding: 8px 6px;
		}

	table.bills td {
/*		color: #000000;   */
		background: #fff8dc;
		font-size: 100%;
		text-align: left;
		vertical-align: top;
		border: 0;
		border-bottom: 2px dotted #333333;
		padding: 4px 6px;
		}

table.memberform {  border: none !important;
	color: #000000;
	background: #ffffff;  /*was cornflower: #fff8dc */
	/* float: left; */
	margin: 0;
	}
table td.hdr { width: 10em; }
table td.input { width: auto }

/* Voter Guide questions and answers */
p.question { font-style: italic; font-weight: bold; }
p.answer { }

/* Columns for the Voter Guide */
div.candidate_list, div.candidate_list3 { display: none; }

div.col_1_of_2 {
	float: left;
	width: 48%;
}

div.col_2_of_2 {
	float: right;
	width: 48%;
}

div.col_n_of_3 {
	float: left;
	width: 32%;
        margin: auto .35em;
}

div.col_n_of_4 {
	float: left;
	width: 24%;
        margin: auto .35em;
}

/* Make the Voter Guide 2 columns stack on narrow displays */
@media (max-width: 900px) {
	div.candidate_list { display: block; }

	div.col_1_of_2, div.col_2_of_2 {
		float: none;
		width: 98%;
	}
}

/* And a similar rule for the rare page that has 3 or more columns */
@media (max-width: 1490px) {
	div.candidate_list3 { display: block; }

	div.col_n_of_3, div.col_n_of_4 {
		float: none;
		width: 98%;
	}
}

/* Some mobile- and narrow-friendly rules to override earlier ones: */
@media (max-width: 840px) {
	body          { min-width: 40px !important; }
}

@media (max-width: 500px) {
	.skip2content { display: block; }
	/* Make both banner and leftcolumn take up the whole width,
	 * so that #rightcolumn will start fully below the navigation.
	 * Tried adding clear: both on #leftcolumn instead, but no joy.
	 */
	body          { min-width: 40px; }
	#banner       { width: 99%; }
	#leftcolumn   { width: 99%; border-right: 0; }
	#rightcolumn  { margin: 0 0 0 0%; padding-left: 0px; }
}