body {
    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    color: #555555;
    background-color: #fff;
    margin: 0; padding: 0;
    font-size: 105%;
}

#header {
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #999;
}

#header .logo {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #222;
}

#header .nav {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

#footer {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid #999;
    text-align: right;
}


#header a, #header a:visited {
    color: #000;
    vertical-align: middle;
}

a:hover {
    text-decoration: none;
}

.nav a {
    margin-right: 10px;
}

.error {
    background: #ff0000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    margin: 5px;
}

#content {
    margin-left: 10%;
    margin-right: 10%;
    text-align: justify;
    width: 80%;
    left: 10%;
}

.frame-image {
    padding: 5px;
    border: 1px solid #555;
    margin: 10px;
    box-shadow: 3px 3px 5px #888;
}

.inset-image {
    width: 27%;
    max-width: 400px;
    min-width: 250px;
}

.inset-image-portrait {
    height: 27%;
    max-height: 400px;
    min-height: 250px;
}

.inset-image-right {
    float: right;
}

#main {
    max-width: 700px;
    margin: 0 auto;
}

.dir-elements {
    margin-top: 10px;
    margin-bottom: 10px;
}

.dir-element {
    display: inline-block;
    padding: 5px;
    margin: 2px;
    border-radius: 4px;
    border: 1px solid black;
}

.dir-elements form {
    display: inline;
}

.docs-delete>img {
    opacity: 0.3;
    margin-left: 5px;
}

.docs-delete>img:hover {
    opacity: 1.0;
}

.docs-element-icon {
    display: inline-block;
    text-align: center;
    padding: 4px;
}

.docs-element-list {
    display: block;
    text-align: left;
}

.docs-element-list img {
    vertical-align: middle;
}

.docs-search-list {
    display: block;
    text-align: left;
}

.docs-search-list img {
    vertical-align: middle;
}

.docs-search-list span {
    margin-left: 48px;
}

.location-gallery {
    width: 95%;
    height: 300px;
}

.wiki-editor textarea {
    width: 80%;
    height: 400px;
}

.markdown-reference td, .markdown-reference th {
	border-bottom: 1px solid #ddd;
}

#userview p {
    text-align: center;
}

#userview h2 {
    text-align: center;
}

#userview table { 
    margin-left: auto; margin-right: auto; 
    text-align: left;
}

#wpview h2 { 
    text-align: center; 
}

#wpview table { 
    margin-left: auto; margin-right: auto; 
    text-align: left;
}

#wpview table th {
    border-bottom: 1px solid #000;
}

#wpview table td {
    padding: 5px;
}

#wpview table tbody tr:nth-child(odd) {
    background-color: #eee;
}

#wpview .approval-no {
    font-style: italic;
    color: #000;
}

#wpview .approval-yes {
}

#wpview .modifier-positive {
    color: green;
    font-weight: bold;
    font-size: 60%;
    float: right;
    width: 35px;
}

#wpview .modifier-negative {
    color: red;
    font-weight: bold;
    font-size: 60%;
    float: right;
    width: 35px;
}

#wpview select {
    max-width: 300px; 
}

#wp-total-approved, #wp-total-unapproved, #wp-total-target {
    font-weight: bold;
}

#wpview p {
    text-align: center;
}

#wpview .wp-nav {
    margin-top: 5px;
}

#wpview .wp-hours {
    text-align: right;
}

#wpview .wp-hours-total {
    font-weight: bold;
    text-align: right;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#wpview tr.retired {
    opacity: 0.5;
}

#wpview .jobcode {
    width: 50px;
}

#wpview .jobname {
    width: 300px;
}

#wpview .jobcategory {
    width: 200px;
}

#votesview h2 { 
    text-align: center; 
}

#votesview table { 
    margin-left: auto; margin-right: auto; 
    text-align: left;
}

#votesview table td {
    padding: 8px;
}

#votesview table th {
    border-bottom: 1px solid #000;
}

#votesview .votecount {
    text-align: center;
}

#votesview .votedate span {
    text-align: left;
    white-space: nowrap;
}

#votesview .votepsec {
    font-size: 80%;
}

#votesview .majority-for {
    background-color: green;
    color: white;
}

#votesview .majority-against {
    background-color: red;
    color: white;
}

#votesview .vote-active {
    font-weight: bold;
}

#votesview .vote-inactive {
    font-weight: normal;
    opacity: 0.7;
}

#workdate {
    width: 85px;
}

#personname, #description {
    width: 150px;
}

.nowrap {
    white-space: nowrap;
}

.grid-3 {
    display: inline-block;
    width: 33%;
}

@media screen and (max-width: 480px) {

    .responsive-table thead { display: none; }
    .responsive-table td { display: flex; }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        width: 120px;
        min-width: 120px;
        text-align: left;
    }

    #content {
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 95%;
    }

    .grid-3 {
        width: 95%;
    }

}






/* Think this is some old crap we don't use any more
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

.toggle { margin: 2px 0 0 14px; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.toggle li { float: left; }
.toggle li a {width: 50px; padding: 6px 0; text-align: center; display: block; text-shadow: 1px 1px 0 #fff; font-size: 12px; font-weight: 600; color: #666; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;

background: #ffffff; 
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); 
background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); 
background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); 
background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); 
background: linear-gradient(top, #ffffff 0%,#ededed 100%); 

box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;

}
.toggle li:first-child a {-webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}
.toggle li a:hover { background: #ededed; color: #222; }
.toggle li a.active { background: #c8e0f3; color: #325874; cursor: default; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); }

.slider { margin: 50px 0 10px!important;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}
*/