@charset "utf-8";
html {
background: #bbba82; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmE4MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjglIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjYmJiYTgyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, #bbba82 0%, #dddddd 8%, #ffffff 49%, #dddddd 90%, #bbba82 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bbba82), color-stop(8%,#dddddd), color-stop(49%,#ffffff), color-stop(90%,#dddddd), color-stop(99%,#bbba82)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #bbba82 0%,#dddddd 8%,#ffffff 49%,#dddddd 90%,#bbba82 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #bbba82 0%,#dddddd 8%,#ffffff 49%,#dddddd 90%,#bbba82 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #bbba82 0%,#dddddd 8%,#ffffff 49%,#dddddd 90%,#bbba82 99%); /* IE10+ */
background: linear-gradient(to right, #bbba82 0%,#dddddd 8%,#ffffff 49%,#dddddd 90%,#bbba82 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbba82', endColorstr='#bbba82',GradientType=1 ); /* IE6-8 */
background-attachment: fixed;
}
body {
font: 100%/1.4 georgia, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
p {
border:0;
padding:0;
}
.container {
width: 940px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-color: #BBBA82;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
text-align: center;
padding-top: 2px;
padding-bottom: 0px;
}
.headerbackgroundimage {
POSITION: relative;
WIDTH: 936px;
HEIGHT: 52px;
background-image: url(../images/OhioElectionResultsBannerSm.jpg);
background-repeat: no-repeat;
background-position: center 50%;
padding: 2px;
}
.HeaderTitle {
POSITION: relative;
TEXT-ALIGN: center;
PADDING-BOTTOM: 2px;
TEXT-INDENT: 5px;
MARGIN: 2px 0px 3px 10px;
PADDING-LEFT: 2px;
WIDTH: 930px;
PADDING-RIGHT: 2px;
FONT-FAMILY: Georgia, serif;
WHITE-SPACE: nowrap;
LETTER-SPACING: 5px;
COLOR: #BBBA82;
FONT-SIZE: 32px;
RIGHT: 0px;
FONT-WEIGHT: bold;
PADDING-TOP: 2px;
text-outline: 1;
text-shadow: 1px 1px 1px #000;
}
.content {
padding: 10px 5px 2px 5px;
background-color: #BBBA82;
min-height: 400px;
}
.contentbox {
width: 100%;
background-color: #fff;
min-height: 250px;
}
.contentbox h1{
margin: 0;
padding: 35px 0 5px 0;
text-align:center;
font-size:18px;
font-weight:bold;
}
.contentbox h2, .contentbox h4{
margin: 0;
padding: 20px;
text-align:center;
font-size:18px;
font-weight:bold;
}
.contentbox h4 {
font-size: 14px;
padding: 0;
margin-bottom: 1.0em;
}
.contentbox h4 a {
color: #BF2127;
}
.contentbox p{
margin: 0;
padding: 0 20px 0 20px;
}
.contentbox600 {
width: 100%;
background-color: #fff;
min-height: 600px;
}
.contentbox600 h1{
margin: 0;
padding: 20px;
text-align:center;
font-size:18px;
font-weight:bold;
}
.contentbox600 p{
margin: 0;
padding: 0 20px 0 20px;
}
/* ~~ The footer ~~ */
.footer {
padding: 1px 0;
background-color: #BBBA82;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a
or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.clear {
clear: both;
}
/*CSS Top Menu */
#cssmenu {text-align:center; margin: 0 2px 0 2px}
#cssmenu ul { margin: 0 auto ;display:inline-block; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {
height: 30px; /* This is for the main menu bit at the top */
line-height: normal;
font: bold .9em sans-serif;
text-align: center;
background-color: #29487F;
box-shadow: 0px 2px 3px rgba(0,0,0,.4);
vertical-align: middle;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
#cssmenu > ul > li > a {
color: #FFF;
line-height: 30px; /* This bit chances the size of the text on the main heading */
padding: 5px 10px; /* This is the padding between the different titles */
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #E9E9E9; background-color: #6991CD;}
#cssmenu > ul > li > a.activemenulink {color: #E9E9E9; background-color: #6991CD;}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 0px 0 0px 0;
background-color:#FFF;
text-align: left; /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
position: absolute;
top: 20px; /* This is for the drop down annimation */
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 35px; /* This is how far from the top the drop down annimation will go */
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{ /* This is the drop down menu, change font or size when its drops down */
color: rgb(50,50,50);
font: normal .8em sans-serif;
font-size: 13px;
background-color:#E0E0E0;);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #6991CD;}
#cssmenu ul ul ul { /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px; /* This is for a sub sub menu */
padding: 16px 0 20px 0;
background-color: rgb(250,250,250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 196px;
visibility: visible;
}
#cssmenu ul ul a:hover{
background-color: #6991CD;
color: rgb(240,240,240);
}
/* QuoteStyles*/
blockquote p { margin-bottom: 2px; }
blockquote cite { font-style: normal; display: block; text-align: right; text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }
.bq__image {
float: right;
width: 50%;
margin-bottom: 0.5em;
margin-left: 0.5em;
border: 4px solid #BBBA82;
}
.blockquotelink { margin:0 0 20px 0; text-align:right; color:#BF2127; font-style:italic; font-family: sans-serif, Helvetica, Arial; padding-right: 5px;}
.blockquotelink a, a:visited { color:#BF2127;}
/*
| Setting the width for the blockquotes is required
| to accurately adjust it's contianer
*/
blockquote {
font-family: Georgia, Times, serif;
width: 600px; /* required */
margin: 0 auto;
}
/*
| The #quote_wrap div is created
| by Quovolver to wrap the quotes
*/
#quote_wrap {
background: #fbffec;
margin: 25px 10px; padding: 10px; border: 1px solid #edffaf;
}
/* PDF DL Table Style*/
.pdfdownloads {
margin-left: auto;
margin-right: auto;
width: 90%;
border: 0;
vertical-align:top;
padding: 0;
}
.pdfdownloads td {
width: 33%;
border: 0;
vertical-align:middle;
padding: 1px;
background-color:#E9E9E9;
}
.pdfdownloads p {
font-family: sans-serif, Helvetica, Arial;
text-align:center;
font-size:12px;
line-height: 1.4;
margin: 5px;
}
/* Feature Section */
.feature {
width: 80%;
margin: 4.0em auto 2.0em;
padding: 1.0em;
max-width: 800px;
border: 4px solid #6991CD;
background: #fbffec;
}
.feature.feature--red {
border-color: #e15a1f;
}
.feature ul {
list-style: none;
padding: 0;
margin: 1.0em 0 0;
}
.feature h3 {
text-transform: uppercase;
}
.feature h3, .feature p {
padding: 0;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex__item {
margin-bottom: 0.5em;
-webkit-box-flex: 1; -ms-flex: 1 1 250px; flex: 1 1 250px;
}
/* Map Table Styles */
.TopResults {
margin-left: auto;
margin-right: auto;
width: 275px;
vertical-align: middle;
padding: 0;
font-family: sans-serif, Helvetica, Arial;
font-size:13px;
}
.TopResults td {
vertical-align: middle;
padding: 2px;
background-color:#FFF;
}
.TopResults th {
font-weight:bold;
font-size: 120%;
}
.RegionResults {
border: 1;
vertical-align: middle;
padding: 2px;
font-family: sans-serif, Helvetica, Arial;
font-size:11px;
}
.RegionResults td {
vertical-align: middle;
padding: 2px;
background-color:#FFF;
}
.RegionResults th {
font-weight:bold;
font-size: 120%;
}
a, img {
border:none;
}
/* new nav */
#nav
{
width: 100%;
height: 30px; /* This is for the main menu bit at the top */
line-height: normal;
font: bold .9em sans-serif;
text-align: center;
background-color: #29487F;
box-shadow: 0px 2px 3px rgba(0,0,0,.4);
vertical-align: middle;
}
#nav a {text-decoration: none;}
#nav > a {display: none; }
#nav ul { list-style: none; margin: 0 auto ;display:inline-block; padding: 0;}
#nav li {
position: relative;
z-index: 1000;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active
{
background-color: #6991CD !important;
}
#nav > ul > li > a.activemenulink {color: #E9E9E9; background-color: #6991CD;}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul {
height: 30px; /* 60 */
}
#nav > ul > li {
height: 100%;
float: left;
position: relative;
}
#nav > ul > li > a {
color: #FFF;
line-height: normal; /* This bit changes the size of the text on the main heading */
padding: 5px 33px; /* This is the padding between the different titles */
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #fff;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a
{
color: #FFF; background-color: #6991CD;
}
/* second level */
#nav li ul {
right:auto;
display: none;
position: absolute;
top: 100%;
background-color: #E0E0E0;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
font-size: .8em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 5px;/* 15 (20) */
text-decoration:none;
color: #000;
font-weight: normal;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background-color: #6991CD;
color: #FFF;
}