﻿/*
    Styles that override or extend bootstrap css.
    */

html {
    font-size: 100%;
}

body {
    font-size: 13px;
    line-height: normal;
}

body, select, input, button, legend {
    font-family: Verdana, Arial, Sans-Serif;
    color: #001c39;
}

a, a:hover, a:visited { color: #000033; text-decoration: underline; }
a[disabled] { color: #555; }

hr {
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px;
  border-top: 1px solid #001c39;
}

.container {
    background-color: #e5e5e5;
}

/*banner*/
.row-masthead{
    overflow: hidden;
    background-repeat: no-repeat;
    background-color: #C4C5C5;
    background-size: 100% 100%;
}
.row-masthead.text-banner {
    background-image: url("/images/banner.png");
    height: 140px;
}

.row-masthead.swamp-banner, .row-masthead.portal-swamp-banner {
    background-image: url("/images/swamp.png");
    height: 115px;
}

.row-masthead.text-banner a {
    display: block;
    height: 140px;
    width: 1024px;
}

.row-top-menu {
    background-color: #00356E;
    min-height: 7px;
    text-align: center;
}

@media (max-width: 992px) {
    .row-masthead.text-banner {
        height: 104px;
        background-size: 758px auto;
    }
    .row-masthead.text-banner a { height: 104px; }
}

@media (max-width: 719px) {
    .row-masthead.swamp-banner{
        height: 69px;
    }
    .row-masthead.portal-swamp-banner {
        height: 54px;
    }
    .row-masthead.text-banner {
        height: 69px;
        background-size: 509px auto;
    }
    .row-top-menu{
        min-height: 4px;
    }
    .row-masthead.text-banner a {height: 69px;}
}

.row-footer {
    text-align: center;
    background-image: url("/images/bottom_bg.jpg");
    background-repeat: repeat-x;
    color: #000033;
    background-color: rgb(105, 101, 74);
    font-size: 0.95em;
    padding: 4px 0;
}

.row.voffset  { margin-top: 2px; }
.row.voffset1 { margin-top: 5px; }
.row.voffset2 { margin-top: 10px; }
.row.voffset3 { margin-top: 15px; }
.row.voffset4 { margin-top: 30px; }
.row.voffset5 { margin-top: 40px; }
.row.voffset6 { margin-top: 60px; }
.row.voffset7 { margin-top: 80px; }
.row.voffset8 { margin-top: 100px; }
.row.voffset9 { margin-top: 150px; }


.row-mobile-available {
    font-style: italic;
    text-align: center;
    padding: 16px 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: Verdana, Arial, Sans-Serif;
    font-weight: bold;
    color: #002e5f;
    /*line-height: 1.1;*/
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small {
  font-weight: normal;
  line-height: 1;
  color: #002e5f;
}

h1,
h2,
h3 {
  margin-bottom: 7px;
}

h2,
h3 {
  margin-top: 10px;
}

h1 { margin-top: 0; }

h4,
h5,
h6 {
  margin-top: 7px;
  margin-bottom: 3px;
}

h1,
.h1 {
    font-size: 1.3em;
}

h2,
.h2 {
  font-size: 1.15em;
}

h3,
.h3 {
  font-size: 1.1em;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 14px;
}

h6,
.h6 {
  font-size: 12px;
}

h1 small,
.h1 small {
  font-size: 24px;
}

h2 small,
.h2 small {
  font-size: 18px;
}

h3 small,
.h3 small,
h4 small,
.h4 small {
  font-size: 14px;
}

h1, h2, h3, h4, h5 {
    /* generally centered for most sites but not for voter portal? */
    /* todo: generalize, or find a way to have per-area stylesheets? */
    /*text-align: center;*/
    color: #002e5f;
}

/* override all the stops in bootstrap, one set width at the max of 1024 regardless of window size */
@media (min-width: 10px) {
    .container {
        max-width: 1024px;
        width: auto;
    }
}

.btn {
  padding: 5px 12px;
  font-size: 1.1em;
  font-weight: normal;
  line-height: 1.42857143;
  text-decoration: none;
}
.btn-default {
  color: inherit;
  background-color: #eee;
  border-color: #aaa;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: inherit;
  background-color: #ddd;
  border-color: #999;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/*Over-riding bootstrap's style to change the alternate row color as per SOS theme*/
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #E5E5E5;
}

.form-control {
    height: 26px;
    padding: 2px 3px 4px;
    font-size: inherit;
    color: inherit;
    border: 1px solid black;
    border-radius: 2px;
}

.control-inline { display: inline-block; }

.form-horizontal .radio, 
.form-horizontal .control-label, 
.form-horizontal .checkbox, .form-horizontal .radio-inline, 
.form-horizontal .checkbox-inline {
    padding-top: 4px;
}

div.radio { padding-left: 7.5px; }

.form-horizontal .radio {
  min-height: 20px;
}



input[type="radio"], input[type="checkbox"] {
    margin-top: 2px;
}

.label-summary {
    color: black;
    font-weight: bold;
    font-size: inherit;
    text-align: left;
}

.value-summary {
    padding: .2em .6em .3em;
}

.row-summary {
    margin-bottom: 4px;
}

.panel-title {
    font-size: inherit;
}

/* smaller borders, etc. */
.panel-compressed .panel-heading {
    padding: 4px 12px;
}

.panel-compressed .panel-body {
    padding: 7px 12px;
}

.panel-compressed dl { margin-bottom: 0px; }

.disabled { color: #777; }
.disabled label { color: #777; }
.disabled .required-indicator { display: none; }
.disabled input[type=text] { border-color: #777; }

/* prevents collapse of empty dd elements */
.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}

/* force tooltips not to take bold font from parents */
.tooltip-inner { font-weight: normal; }

.nav-tabs > li > a {
    outline: 0;
    padding: 9px 12px;
    font-size: 1.05em;
}

.nav-tabs {
    border-bottom: 1px solid #001833;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555;
    border: 1px solid #001833;
    border-bottom-color: white;
    cursor: default;
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 70%, #C5C6C6 100%);
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 70%, #C5C6C6 100%);
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 70%, #C5C6C6 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.7, #FFFFFF), color-stop(1, #C5C6C6));
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 70%, #C5C6C6 100%);
    background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 70%, #C5C6C6 100%);
}

@media (max-width: 768px) {
    /* squeeze the tabs so that candidate inquiry and elected official fit on an iPhone */
    .nav-tabs > li > a {
        padding: 4px 7px;
        font-size: 1.0em;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
        color: #555;
    }
}

@media (max-width: 480px) {
    .form-group{
        margin-bottom: 5px;
    }
}

/* override bootstrap behavior of listing out link hrefs on print */
@media print {
    a[href]:after {
        content: "";
    }
}

/* Error Styling */
.has-error .control-label {
    color:#001c39
}
.has-error .help-block {
    font-weight: normal
}
