/* zdemosdemo.css */
body {
    background-color: #0000cc; /* Dark blue */
    margin: 0;
    padding: 0;
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
	font-family: 'Calibri', 'Arial', sans-serif;
	font-size: 1.3em; /* Site-wide normal text default font size */
    color: #ffffff; /* Demo-wide default text color, white */
    text-align: left; /* Site-wide default text alignment */
}

.page-container {
    background-color: #0000cc;
    width: 600px;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid #ffffff; */
}

.page-content {
    width: 100%;
}

a:link {
    color: #99ccff;		/* light blue */
	text-decoration: none;
}

a:visited {
    color: #99ccff;
	text-decoration: none;
}

a:hover {
    color: #cc0000;		/* red */
	text-decoration: none;
}

a:active {
    color: #99ccff;
	text-decoration: none;
}

.centered {
    text-align: center;
}

.centered-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.centered-image img {
  /* max-width: 100%; */
  max-width: 600px;
  height: auto;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.black {
	color: #000000;
}

.white {
	color: #ffffff;
}

.blue {
	color: #0000cc;
}

.light-blue {
	color: #99ccff;
}

.red {
	color: #cc0000;
}

.yellow {
	color: #ffff99;
}

.green {
	color: #4bfa00;
}

.dark-green {
	color: #2d7300;
}

.bold {
    font-weight: bold;
}
.italic {
	font-style: italic;
}

.small-text {
    font-size: .9em;
}

.centered-image {
  float: centered;
  margin: 10px;
}

.right-aligned-image {
  float: right;
  margin: 10px;
}

.section-title-text {
    font-size: 1.2em;
	color: #cc0000; /* red */
    font-weight: bold;
}
 
/* Demos voting demonstration pages */
.demo-voting-container {
    display: flex;
    width: 600px;
	background-color: #000099; /* Dark blue */
	/* border: 1px solid #ccc; */
}

.demo-voting-selected-issue {
    font-size: 1.4em;
	color: #cc0000; /* red */
    font-weight: bold;
}

/* Demos Notes page */
.demo-note {
    display: flex;
	flex-direction: column;
    align-items: top;
    padding: 0;
    margin: 0;
	height: 3000px;		/* Notes widely separated vertically, only one visible at a time */
}

.demo-note-open-close {		/* demo notes pg open and close pg msg */
    font-size: .9em;
	color: #99ccff;		/* light blue */
}

.demo-note-title {
	color: #cc0000;		/* red */
    font-weight: bold;
}

/* 3-button voting, grn-yel-red vert col */
.demo-3but-vote-column {	/* Was demo-voting-column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
	/* border: 1px solid #ccc; */
}

.demo-3but-vote-column1 {
	width: 110px;
    padding: 10px;
    align-items: center;
}

.demo-3but-vote-column1 img {
    width: 66px;
    height: 50px;
    padding: 22px 0;
    align-items: center;
	/* border: 1px solid #ccc; */
}

.demo-3but-vote-column2 p {
	width: 310px;
    margin: 0;
    padding: 20px 0;
    align-items: center;
	/* border: 1px solid #ccc; */
}

.demo-3but-vote-column3 p {
	width: 140px;
    margin: 0;
    padding: 20px 0;
    align-items: center;
	/* border: 1px solid #ccc; */
}

.demo-3but-vote-column3 {
    flex: 1;
    justify-content: center;
    align-items: center;
}

/* pie chart voting, grn-yel-red pie slices */
.demo-pie-voting-container {
	display: flex;
    width: 600px;
	background-color: #000099; /* Dark blue */
	align-items: center;
	margin: 0 0;
	/* border: 5px solid #000099; */
}

.demo-pie-voting-container a {
    /* font-size: .9em; */
	/* font-weight: bold; */
	justify-content: left;
    padding: 10px;
    align-items: center;
	/* border: 1px solid #ccc; */
}

.demo-small-pie-text {
    font-size: .8em;
}

/* Voting for candidates for office: pres, senator, rep */
.vote-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    background-color: #000099;
    /* margin: 0 auto; */
    /* padding: 10px; */
    color: #ffffff;
	border: 5px solid #000099;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 10px; */
}

.column img {
    width: 153px;
    height: 28px;
    /* margin: 10px 0; */
}

.column1 p, .column2 p {
    color: #FFFF99;
    font-size: 14px;
}

/* .column2 p {
    color: #99CCFF;
}
 */
 
/* demo candidate list */
.list-container {
    width: 100%;
    max-width: 600px;
    background-color: #000099;
    /* margin: 0 auto; */
    /* padding: 20px; */
    color: #ffffff;
	/* border: 5px solid #000099; */
}

.list-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.list-row {
    display: table-row;
}

.list-cell {
    display: table-cell;
    /* padding: 10px; */
    /* border: 1px solid #ccc; */
    text-align: center;
    vertical-align: middle;
}

.list-header .list-cell {
    background-color: #000099;
    color: #ffffff;
    font-weight: bold;
}

.list-candidate {
    color: #ffffff;
}

a {
    color: #99CCFF;
    /* text-decoration: underline; */
}

/* current candidate name box */
.list-current-candidate-box-dk-grn {
	display: flex;
    width: 580px;
	background-color: #2d7300;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: 0 0;
}

.list-current-candidate-box-grn {
	display: flex;
    width: 580px;
	background-color: #4bfa00;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: 0 0;
}

.list-current-candidate-box-yel {
	display: flex;
    width: 580px;
	background-color: #ffff99;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: 0 0;
}

.list-current-candidate-box-red {
	display: flex;
    width: 580px;
	background-color: #cc0000;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: 0 0;
}

/* Demos demonstration vote summary page */
.demo-vote-summary-container {
    width: 600px;
    margin: 0 auto;
    /* border: 1px solid #000; */
}

.sum-row {
    width: 600px;
    /* border-bottom: 1px solid #000; */
    /* padding: 5px 0; */
}

.sum-row:last-child {
    border-bottom: none;
}

.sum-title {
    text-align: center;
    margin: 0;
	color: #cc0000;		/* red */
    font-weight: bold;
}
.sum-col-head-text {
	/* font-size: 1.3em; */
    font-weight: bold;
}

.sum-content p {
    text-align: left;
    margin: 0;
}

.sum-grid {
    display: flex;
}

/* .column { */
    /* width: 25%; */
	/* width: 27%, 25%, 25%, 27%; */
	/* width: 65px, 300px, 135px, 151px; */
	/* padding: 10px; */
    /* margin: 0 auto 5px auto; */
    /* margin: 10; */
    /* box-sizing: border-box; */
/* } */

/* .column ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

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

.column.right img {
    display: block;
    margin: 0 auto 5px auto;
}

.column.right p {
    margin: 0;
}
 */