/* LICENSE and credits: please see LICENSE.txt in this directory */

body {
    z-index: 0;
    background: #fafafa url("/static/theme/img/body-bg.efe6c7da67cb.png") top left repeat;
}

/*
====================================
 Type
====================================
*/

body {
    font: 16px/25px "Cabin", Arial, "Helvetica Neue", "Helvetica", sans-serif;
    color: #444;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
h1 {
    font-size: 175%;
    line-height: 130%;
    margin-bottom: 0.45em;
}
h2 {
    font-size: 150%;
    line-height: 115%;
    margin-bottom: 0.45em;
}
h3 {
    font-size: 125%;
    line-height: 120%;
    margin-bottom: 0.45em;
}
h4 {
    font-size: 100%;
    line-height: 125%;
    margin-bottom: 0.6em;
}
h5, h6 {
    font-size: 100%;
    line-height: 125%;
    margin-bottom: 0.6em;
}
a, a:link {
    color: #4e58b5;
}
a:hover {
    color: #111;
}
table {
    margin-bottom: 1em;
}
p { 
    margin-bottom: 1em;
}
pre, code {
    margin: 15px 0;
    padding: .5em;
    white-space: pre-wrap;
    overflow: auto;
    font-family: 'bitstream vera sans mono', 'andale mono', 'lucida console', monospace;
    line-height: 20px;
    border: 1px solid #CBCBCB;
    background-color: #FFF8ED;
}
textarea, input, select {
    font-size: 15px;
}

/*
====================================
 Main area
====================================
*/

#main {
    margin-left: 5em;
    margin-right: 8em;
}
@media screen and (max-width: 700px) {
    #main {
        margin-left: 1em;
        margin-right: 1em;
    }
}

/*
====================================
 Content area
====================================
*/

#content {
    margin-top: 1em;
    margin-bottom: 1.4em;
}
#content.has_map {
    min-height: 340px;
}
@media screen and (max-width: 500px) {
    /* for margin collapse behavior */
    #content.has_map {
        border-top: 1px solid #fafafa;
        border-bottom: 1px solid #fafafa;
    }
    /* For a tag page */
    #content.has_map #page, #content.has_map #pagetagset {
        margin-top: 250px;
    }
    /* For an included list of tagged pages */
    .included_page_wrapper #pagetagset.has_map {
        margin-top: 290px;
        display: inline-block;
    }
}

/* Map detail view - we want map to have no margins. */
#main.mapdata_detail {
    margin-left: 0;
    margin-right: 0;
}
.mapdata_detail #content {
    margin-top: 0; 
    margin-bottom: 0;
}
/* Page edit view - we don't want margins. */
#main.page_form #content {
    margin-top: 0.9em; 
}
/* Header is different on tag pages */
.tagpage #header_bar {
    padding-left: 3.5em;
    background: url("/static/theme/img/tag-icon.ae4746f508dc.png") 0.75em 45% no-repeat;
}
/* Header is different on tag pages */
.tagpage #header_bar {
    padding-left: 3.5em;
    background: url("/static/theme/img/tag-icon.ae4746f508dc.png") 0.75em 45% no-repeat;
}

/*
====================================
 Header
====================================
*/


#header {
    background: #fafafa url("/static/theme/img/body-bg.efe6c7da67cb.png") top left repeat;
    padding: 0;
    margin: 0;
    border: 1px solid #E8ECEF;
    border-bottom: 1px solid #DAE1E5;
}
#header_bar {
    margin: 0;
    padding: 1.13em 3.5em 1.13em 5em;
    background: #E8ECEF url("/static/theme/img/header-bg.9c7ef7ed874d.png") top left repeat;
    min-height: 0;
}
#header_bar a, #header_bar a:link {
    color: #444;
}
#header_bar a:hover {
    color: #111;
}
#header_bar .inner {
    margin: 0.5em 0;
    display: table-cell;
}
/* Header has an icon on map, tag pages - pages with a special content
 * type */
.content_type #header_bar .inner:before {
    content:"";
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    margin-left: -2.75em;
}
.mapdata #header_bar .inner:before {
    background: url("/static/theme/img/map-icon.6f20ed26097d.png") 3px 0 no-repeat;
}
.tagpage #header_bar .inner:before {
    background: url("/static/theme/img/tag-icon.ae4746f508dc.png") no-repeat;
}
@media screen and (max-width: 700px) {
    #header_bar {
        margin-top: 3.5em;
        padding: 1.13em 1em 1.13em 1em;
    }
    #header_bar > div {
        margin: 0.5em;
    }
    .content_type #header_bar .inner:before {
        margin-left: 0;
        margin-right: 0.2em;
        background-size: auto 88%;
    }
}
@media screen and (max-width: 500px) {
    #header {
        border: 0;
    }
    #header_bar {
        margin-top: 8px;
        padding: 0.5em 1em 1em 1em;
    }
    #header_bar .inner {
        display: block;
    }
}

#object_title {
    margin: 0;
    padding: 0.4em 0;
    display: inline;
}
#object_title a {
    text-decoration: none;
}
#object_subtitle {
    position: relative;
    margin-top: 0.3em;
    margin-left: 0;
    margin-bottom: 0.5em;
    font-size: 80%;
    color: #747474;
}
@media screen and (max-width: 700px) {
    #object_title {
      font-size: 150%;
    }
}

#site_title {
    background: #fafafa url("/static/theme/img/body-bg.efe6c7da67cb.png") top left repeat;
    min-height: 3.95em;
    padding-left: 1.5em;
    font-size: 130%;
    padding-top: 1em;
    margin: 0;
    border-bottom: 1px solid #E8ECEF; /* Check before removing this border -
        it's needed for the correct CSS margin/padding behavior.
        TODO: fix this. */
}
#site_title h1 {
    margin-bottom: 0;
}
#site_title img {
    margin-top: -0.4em;
    padding-bottom: 1.6em; /* make sure there's room for #nav */
    display: block; /* site_title contains either an h1 (block) or an img,
                       so let's make this more consistent */
}
#site_title a, #site_title a:link {
    text-decoration: none;
    color: #444
}
#site_title a:hover {
    color: #111;
}
@media screen and (max-width: 700px) {
    #site_title {
        margin: 0;
        padding: 0;
        border: none;
        clear: both;
        min-height: 0;
        position: relative;
        top: -2em;
    }
    #site_title h1 {
        margin: 0.3em;
    }
}
@media screen and (max-width: 500px) {
    #site_title {
        display: none;
    }
}

#object_actions {
    float: right;
    padding-left: 1.5em;
}
#object_actions ul {
    list-style-type: none;
    margin: 0;
}
#object_actions li {
    display: table-cell;
    vertical-align: middle;
}
#object_actions .button {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0.5em;
}
@media screen and (max-width: 500px) {
    #object_actions {
        padding-left: 0.6em;
    }
}

#object_tags {
    display: block;
    line-height: 1.3;
    margin-top: 1em;
    margin-bottom: 1em;
}
#object_tags form {
    display: inline;
}
#object_tags input[type="submit"] {
    display: inline;
}
#object_tags li.tag {
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    display: block;
    float: left;
}
/* no box-shadow around the text input area */
.tagedit-list li.tagedit-listelement-new {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#object_tags .tag-list {
    display: table-cell;
}
#object_tags .edit_tags {
    display: block;
    padding: 13px 10px 14px 8px;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
#object_tags .edit_tags span {
    background: url("/static/theme/img/tag-icon-small.1bf45005531f.png") 0 0 no-repeat;
    padding-left: 22px;
}
#object_tags .edit_tags_cancel {
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}

#object_tags {
    display: block;
    line-height: 1.3;
    margin-top: 1em;
    margin-bottom: 1em;
}
#object_tags form {
    display: inline;
}
#object_tags input[type="submit"] {
    display: inline;
}
#object_tags li.tag {
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
    display: block;
    float: left;
}
/* no box-shadow around the text input area */
.tagedit-list li.tagedit-listelement-new {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#object_tags .tag-list {
    display: table-cell;
}
#object_tags .edit_tags {
    display: block;
    padding: 13px 10px 14px 8px;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
#object_tags .edit_tags span {
    background: url("/static/theme/img/tag-icon-small.1bf45005531f.png") 0 0 no-repeat;
    padding-left: 22px;
}
#object_tags .edit_tags_cancel {
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}

#login_info {
    float: right;
    clear: right;
    text-align: right;
    margin-right: 2em;
    margin-top: 0.4em;
}
#login_info .welcome {
    float: left;
    margin-right: 0.8em;
}
@media screen and (max-width: 700px){
    #login_info {
        display: block;
        float: none;
        text-align: right;
        width: 100%;
        margin: 0;
        padding: 0;
     }
    #login_info > div {
        margin: 0.5em;
    }
}
@media screen and (max-width: 500px) {
    #login_info {
        display: none;
    }
}

#header .site_search {
    float: right;
    clear: right;
    margin-top: 0.6em;
    margin-right: 2em;
}
#header .site_search input {
    float: left;
}
#header .site_search input[type="text"], #header .site_search #id_q {
    padding: 0;
    height: 2em;
    width: 180px;
    font-size: 15px;
    line-height: 30px;
    background: #ffffff url("/static/theme/img/magnifying_glass.69dbcfa0f741.png") no-repeat 10px 10px;
    padding-left: 30px;
    margin-right: 0.5em;
}

@media screen and (max-width: 700px) {
    #header .site_search {
        float: left;
        margin-top: -2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}
@media screen and (max-width: 500px) {
    #header .site_search {
        float: none;
        margin: 0;
        margin-top: -44px;
        margin-right: 80px;
        padding: 0;
        /*padding-left: 65px;*/
        padding-left: 5px;
        padding-top: 5px;
        position: relative;
        height: 27px;
    }
    .site_search form {
        height: 100%;
    }
    #header .site_search input {
        float: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #header .site_search input[type="submit"] {
        display: none;
    }
    #header .site_search input[type="text"], #header .site_search #id_q {
        width: 100%;
        height: 100%;
        background-position: 10px 8px;
    }
}

/*
====================================
 Map widget on a page
====================================
*/

/* The entire-map div */
#map {
    background: #E8ECEF url("/static/theme/img/header-bg.9c7ef7ed874d.png") top left repeat;
    padding: 10px;
    border-bottom: 1px solid #DAE1E5;
    border-left: 1px solid #DAE1E5;
    border-right: 1px solid #DAE1E5;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    float: right;
    margin-top: -1.2em;
    margin-left: 1em;
    margin-bottom: 0.8em;
}
#map a, #map a:link {
    color: #444;
}
#map a:hover {
    color: #111;
}
/* Just the widget. Contained in #map. */
.mapwidget.small {
  border: 1px solid #b5b5b5;
  width: 400px!important;
  height: 300px!important;
}
#map .info {
  display: table-cell;
  padding-top: 10px;
}
#map .info a {
  padding-left: 25px;
  font-size: 90%;
  background-repeat: no-repeat;
  background-position: 9px 50%;
}
#map .info a {
  display: block;
  padding-top: 12px;
  padding-bottom: 13px;
  padding-right: 0.8em;
  font-weight: normal;
  margin-right: 0.5em;
}
#map .info a.view {
  background-image: url("/static/theme/img/magnifying_glass.69dbcfa0f741.png");
}
#map .info a.edit {
  background-image: url("/static/theme/img/edit_icon.c1c4ae14b19f.png");
}
#map .simple_pagination {
  padding-top: 0.4em;
  height: 1.5em!important;
}
#map .simple_pagination a {
  margin-right: 0.5em;
}

/* Map widget, when it's part of page content */
#page #map {
    margin: 0.5em;
    margin-left: 0;
}
@media screen and (max-width: 700px) {
    #map {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .mapwidget.small {
        width: 100%!important;
        height: 200px!important;
    }
}
@media screen and (max-width: 500px) {
    #map {
        width: 100%;
        position: absolute;
        left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .mapwidget.small {
        border-left: none;
        border-right: none;
    }
    #map .info {
        padding-left: 1em;
    }
}

/* Map widget, when it's part of page content */
#page #map {
    margin: 0.5em;
    margin-left: 0;
}
/* Overview map */
.mapdata #results_pane {
  background: #E8ECEF url("/static/theme/img/header-bg.9c7ef7ed874d.png") top left repeat;
  padding-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
  width: 15em;
  margin-top: -2px;
  border-right: 1px solid #DAE1E5;
}

/* Border added to make JS height calculation work immediately for
* maps */
.mapdata #content_wrapper {
   /* Don't remove the border w/o checking that maps still occupy the full window */
   border: 1px solid #fafafa;
}

/*
====================================
 Files
====================================
*/
.pagefile form table td, .pagefile form table, .pagefile form th {
    border: none;
}

/*
====================================
 Nav
====================================
*/

#nav ul {
    list-style-type: none;
    position: absolute;
    margin-left: 2em;
    margin-top: -2em;
}
#nav a, #nav a:link {
    color: #444;
}
#nav li {
    margin: 0;
    margin-right: 0.4em;
    float: left;
}
#nav li a {
    text-align: center;
    font-size: 90%;
    display: block;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    float: left;
    padding: 0.1em 0.5em 0.3em 0.5em;
    line-height: 100%;
    margin: 0;
    border: 1px solid #e1e1e1;
    background-color: #e1e1e1;
    text-decoration: none;
}
#nav li a:hover {
    background-color: #bfbfbf;
    border: 1px solid #bfbfbf;
    color: #111;
}
#nav #pull {
    display: none;  
}
@media screen and (max-width: 700px) {
    #nav ul {
        font-size: 86%;
        margin: 0.5em;
        padding: 0;
        float: none;
        position: relative;
        top: -3em;
    }
    #nav li {
        margin: 0.2em;
    }
    
    #nav li a {
        padding: 0.5em 0.3em 0.5em 0.3em;
    }
}
@media screen and (max-width: 500px) {
    #nav {
        color: #666!important;
        font-weight: bold;
        border: none;
        margin-bottom: 4px;
        /* TODO: explore using purely CSS gradients */
        background: #e6e6e6 url("/static/theme/img/gradient.7f91d291668f.png") repeat-x bottom left;
        border-bottom: 1px solid #bfbfbf;
        text-decoration: none;
    }
    #nav ul {
        margin: 0;
        padding: 0;
        top: 0;
        display: none;
        border: none;
    }
    #nav li, #nav li a {
        width: 100%;
        padding: 0;
        margin: 0;
        float: none;
        font-size: 110%;
        background-color: #455868;
        color: #f4f4f4!important;
	    display: block;
	    text-align: center;
	    text-decoration: none;
	    line-height: 40px;
    }
    #nav li a {
        border: none;
        border-bottom: 2px solid #576979;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    #nav li:last-child a {
        border-bottom: none;
    }
    #nav li a:hover, #nav li a:active {
        background-color: #8c99a4;
        border: none;
        border-bottom: 2px solid #576979;
    }
    #nav li:last-child a:hover, #nav li:last-child a:active {
        border-bottom: none;
    }
    #nav #pull {  
        display: block;  
        height: 40px;
    }  
    #nav #pull .button {
        float: none;
    }
    #nav #pull:after {  
        content:"";  
        background: url("/static/theme/img/nav-icon.7b370519f267.png") no-repeat;  
        width: 30px;  
        height: 30px;  
        display: block;  
        position: absolute;
        margin-top: 11px;  
        right: 5px;  
    }
    #nav li {
        text-transform: capitalize;
    }
}

/*
====================================
 Footer
====================================
*/


#footer {
    background: #e1e1e1 url("/static/theme/img/footer-bg.34eceb039a94.png") top left repeat;
    padding: 1.5em;
    clear: both;
    min-height: 30px;
}
#footer p { margin: 0; padding: 0; color: #999;}

#powered_by {
    width: 100%;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
#powered_by a img {
    border: none;
}
#powered_by a {
    background-image: none;
}

/*
====================================
 Lists
====================================
*/

ul { list-style-type: disc; }
ul ul { list-style-type: circle; margin-top: 0.5em;}
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul { list-style-type: circle; }
ol { list-style-type: decimal ; }

ul, ol { margin-bottom: 1em; }

li {
    margin-left: 3em;
    margin-bottom: 0.4em;
}
/* Text indent styles */
.indent1 { margin-left: 3em; }
.indent2 { margin-left: 6em; }
.indent3 { margin-left: 9em; }
.indent4 { margin-left: 12em; }
.indent5 { margin-left: 15em; }
.indent6 { margin-left: 18em; }
.indent7 { margin-left: 21em; }
.indent8 { margin-left: 24em; }
.indent9 { margin-left: 27em; }
.indent10 { margin-left: 30em; }

/* Sub/Sup */
sub { vertical-align: sub }
sup { vertical-align: super }

/* We don't want margin inside <p> inside list items.  The editor has a
 * tendency to occasionally add <p> to list items when editing, so in order to
 * keep tables looking consistent we zero this out. */
#content #page li p, .page_editor li p {
    margin-bottom: 0;
}

/*
====================================
 Tables
====================================
*/


table, td, th {
    vertical-align: top;
    border-top: 1px solid #bfbfbf;
    border-left: 1px solid #bfbfbf;
}
td, th {
    padding: 5px;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
}
thead, tfoot { background: #f2f2f2; }

@media screen and (max-width: 700px) {
    /* For images next to tables on small screens */
    #content #page table {
        clear: both;
    }
}

/* We don't want margin inside <p> inside table cells.  The editor has a
 * tendency to add <p> to table cells when editing, so in order to keep
 * tables looking consistent we zero this out. */
#content #page td p, .page_editor td p {
    margin-bottom: 0;
}
/* Reset the <p> behavior inside the diff table's immediate <td>s */
#content #page .htmldiff > td > p {
    margin-bottom: 1em;
}

/*
====================================
 Forms and buttons
====================================
*/

/*
form p { color: #999; }
form p label { font-weight: normal; }
*/

form p.required label { font-weight: bold; }
textarea, input, button, .button, select {
    display: block;
    padding: 5px;
    color: #444!important;
    background-color: #fff;
    border: 1px solid #BFBFBF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
textarea, input, .button {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
input[type="text"], input[type="password"] {
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    background: #fff;
}
@media screen and (max-width: 700px) {
    input[type="text"], input[type="password"] {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}
select {
    display: block;
    max-height: 300px;
    width: 250px;
    margin-bottom: 10px;
    font: 16/20px 'bitstream vera sans mono', 'andale mono', 'lucida console', monospace;
}
input[type="submit"], input[type="button"], button, .button {
    font: 16px/25px "Cabin", Arial, "Helvetica Neue", "Helvetica", sans-serif;
    color: #666!important;
    font-weight: bold;
    padding: 6px 10px;
    border: none;
    /* TODO: explore using purely CSS gradients */
    background: #e6e6e6 url("/static/theme/img/gradient.7f91d291668f.png") repeat-x bottom left;
    margin: 10px 5px 10px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    border: 1px solid #bfbfbf;
    display: block;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.button {
    float: left;
    cursor: pointer;
}
.little.button, input.little, a.little {
    padding: 0.2em 0.5em 0.3em 0.5em;
    margin: 0;
    font-size: 90%;
}
input.little {
    /* values are slightly different to make it look the same as
     * non-input little button. Not sure why this works but it does. */
    height: 2.2em;
}
.tiny.button, input.tiny {
    padding: 10px 8px 11px 8px;
    margin: 0;
    font-size: 90%;
    line-height: 0;
}
.button.cancel {
}

.button.active {
    background: #dcdcdc url("/static/theme/img/gradient.7f91d291668f.png") repeat-x bottom left;
}


input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {
    background-color: #dcdcdc!important;
    border-color: #c8cbde;
    border-bottom-color: #a9a9a9;
}
input[type="submit"]:active, input[type="button"]:active, button:active, .button:active {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
input[type="hidden"] { display: none; }
input[type="checkbox"], input[type="radio"] { display: inline; }
label {
    margin-bottom: 4px;
    font-weight: bold;
    color: #444;
}
div.templates {
    clear: both;
}
div.templates li {
    list-style: none;
    margin-left: 1em;
}
/* textarea { background: #fff; width: 435px; height: 150px; } */

/*
====================================
 History area
====================================
*/

#compare_form {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    padding: 8px;
    display: table;
}
#compare_form label {
    font-weight: normal;
    color: #999999; /* On white bg, so let's go lighter */
}
#compare_form label a {
    text-decoration: none; /* Underline is too intense here */
    color: #5d66bf; /* on white bg, so let's go lighter */
}
#compare_form label a:hover {
    color: #444;
}
#compare_form .date {
    color: #444;
    font-weight: bold;
}
#compare_form .date:hover {
    color: #111;
    text-decoration: underline;
}
#compare_form thead td, #compare_form tfoot td {
    padding-left: 1em;
}
#compare_form table {
    background-color: white;
    margin: 0;
}
#compare_form td {
    vertical-align: middle;
    padding-left: 1em;
    padding-right: 1em;
}

@media screen and (max-width: 700px) {
    #compare_form {
        font-size: 70%;
    }
    #compare_form td {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

/* Login form */
#login_form table td, #login_form table {
}

#recentchanges .tags .changelabel span {
    background: url("/static/theme/img/tag-icon-small.1bf45005531f.png") 0 0 no-repeat;
    padding-left: 20px;
}

.see_also {
    margin-top: 2em;
}
/*
====================================
 Messages and alerts
====================================
*/

.messages {
    border: 1px solid #d2d2d2;
    background-color: #feffc9;
    margin-top: 1em;
    margin-bottom: 0;
    color: black;
    padding: 1em 1em 0 1em;
    list-style-type: none;
}
.mapdata .messages {
    border-top: none;
    margin-top: 0;
}
.messages li {
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
}

#dialog {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    padding: 1em;
    padding-bottom: 0.5em;
    color: #000000;
    margin-bottom: 1em;
    margin-top: 0.8em;
}
#dialog ul {
    list-style-type: none;
}
#dialog ul li {
    margin-left: 0;
}

#create_page_dialog {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    padding: 1em;
    color: #000000;
    margin-bottom: 1em;
    margin-top: 0.8em;
}
#create_page_dialog div {
    min-height: 3em;
}
.create_map {
    padding-top: 1em;
    min-width: 30px;
    display: table;
    vertical-align: top;
    margin-bottom: 0;
}
.create_map .button {
    margin-right: 0.5em;
    margin-top: -0.35em;
}
.button.map .text {
    background: url("/static/theme/img/map-icon-small.ffa74865ca29.png") 0px 66% no-repeat;
    padding-left: 20px;
}
.button.redirect .text {
    background: url("/static/theme/img/arrow-turn-left.b08c7a6c66dc.png") 2px 2px no-repeat;
    padding-left: 20px;
}

/*
====================================
 Recent Changes
====================================
*/

#recentchanges ul {
    list-style-type: none;
    margin-top: 1em;
}
#recentchanges h2 {
    font-size: 180%;
    margin-top: 0.7em;
    padding-bottom: 0.1em;
    border-bottom: 2px solid;
}
#recentchanges h3 {
    margin-top: 1em;
}
#recentchanges h3 a, #recentchanges h3 a:link {
    color: #444;
}
#recentchanges h3 a:hover {
    color: #111;
}
#recentchanges hr {
    height: 5px;
    border: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    margin-top: 2em;
    margin-bottom: 1.5em;

    /* Copied from #main margin: */
    margin-left: -5em;
    margin-right: -8em;
}
#recentchanges #limit_to {
    float: right;
    margin-top: 0.1em;
    padding-bottom: 0.7em;
}
#recentchanges #limit_to span {
    float: left;
}
#recentchanges #limit_to .pagination {
    margin-left: 0.4em;
    margin-right: 0.4em;
    margin-top: -0.6em;
}
#recentchanges li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 30px;
    margin-bottom: 0.7em;
}
#recentchanges .changelabel {
    width: 5.2em;
    /* This is basically .little.button */
    text-align: center;
    font-weight: bold;
    font-size: 90%;
    display: block;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    float: left;
    padding: 7px 10px 8px 10px;
    line-height: 100%;
    margin: 0;
    margin-right: 1em;
    border: 1px solid #bfbfbf;
}
#recentchanges .changelabel.updated {
    /* .updated is a button */
    color: #666;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

    /* TODO: explore using purely CSS gradients */
    background: #E8ECEF url("/static/theme/img/gradient.7f91d291668f.png") repeat-x bottom left;
    border: 1px solid #bfbfbf;

    /* Slightly different padding*/
    padding-top: 6px;
    padding-bottom: 7px;

    text-decoration: none;
}
#recentchanges .changelabel.updated:hover
{
    background-color: #dcdcdc!important;
    border-color: #c8cbde;
    border-bottom-color: #a9a9a9;
}
#recentchanges .changelabel.updated:active {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#recentchanges .changelabel.added {
    background-color: #fdfab4;
    color: #6b6945;
    border-color: #e1e1e1;
    border: none;
    border-radius: 0px;
}
#recentchanges .changelabel.deleted {
    background-color: #f3d8d8;
    border-color: #dedede;
    color: #808080;
    color: #767676;
    color: #6b6b6b;
    color: #646464;
    border: none;
    border-radius: 0px;
}
#recentchanges .changelabel a {
    text-decoration: none;
    color: #666;
}
#recentchanges .comment {
    padding-right: 0.5em;
}

#recentchanges .map .changelabel span {
    background: url("/static/theme/img/map-icon-small.ffa74865ca29.png") 0px 66% no-repeat;
    padding-left: 20px;
}
#recentchanges .file .changelabel span {
    background: url("/static/theme/img/document-block-light.14a5da1863e2.png") 2px 66% no-repeat;
    padding-left: 20px;
}
#recentchanges .redirect .changelabel span {
    background: url("/static/theme/img/arrow-turn-left.b08c7a6c66dc.png") 2px 2px no-repeat;
    padding-left: 20px;
}

#recentchanges .tags .changelabel span {
    background: url("/static/theme/img/tag-icon-small.1bf45005531f.png") 0 0 no-repeat;
    padding-left: 20px;
}

@media screen and (max-width: 700px) {
    #recentchanges #limit_to {
        float: none;
        height: 2em;
        margin: 0;
        font-size: 95%;
    }
    #recentchanges h3 {
        font-size: 110%;
        margin-top: 0.6em;
    }
    #recentchanges li {
        padding-left: 0;
        margin-left: 0;
    }
}
@media screen and (max-width: 500px) {
    #recentchanges #limit_to {
        clear: both;
        float: none;
        height: 5em;
        padding-bottom: 0;
    }
    #recentchanges #limit_to span {
        display: block;
        float: left;
        margin-bottom: 0.5em;
    }
    #recentchanges #limit_to .pagination {
        padding: 0;
        margin: 0;
        clear: both;
        margin-right: 0.4em;
    }
    #recentchanges .changelabel {
        display: block;
        width: 100%;
        clear: both;
        margin-bottom: 0.5em;
        padding: 10px 0 11px 0;
    }
    #recentchanges .changelabel.updated {
        /* Slightly different padding*/
        padding-top: 9px;
        padding-bottom: 10px;
    }
    #recentchanges hr {
        margin-left: -1em;
        margin-right: -1.5em;
    }
}


.see_also {
    margin-top: 2em;
    clear: both;
}


/*
====================================
 Search results
====================================
*/

#search_results .highlighted {
    font-weight: bold;
}
#search_results .simple_pagination {
    height: 3em;
}

#search_results #create_page_dialog input[type="submit"] {
    margin-bottom: 0;
}

#search_results .site_search {
    padding: 1em;
    padding-bottom: 0.3em;
}
#search_results .site_search input {
}
#search_results .site_search input[type="text"], #search_results .site_search #id_q {
    padding: 0;
    height: 30px;
    width: 25em;
    font-size: 15px;
    line-height: 30px;
    background: #ffffff url("/static/theme/img/magnifying_glass.69dbcfa0f741.png") no-repeat 10px 10px;
    padding-left: 30px;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.with_map #search_results #results_list {
    margin-right: 480px;
}

#search_results #map {
    margin-top: 1em;
    margin-left: 0!important;
    right: 8em;
}

/* Fix an issue with #map being floated + scrollToFixed */
#search_results #map.scroll-to-fixed-fixed {
    left: auto!important;
}

@media screen and (max-width: 500px) {
    .with_map #search_results #results_list {
        padding-top: 250px;
    }
    #main.allow_creation.with_map #search_results #results_list {
        padding-top: 264px;
    }
    #search_results #map {
        margin-top: -1.2em;
        position: absolute;
    }
    #main.allow_creation #search_results #map {
        position: absolute;
        margin-top: 0em;
    }
}
@media screen and (max-width: 700px) {
    .with_map #search_results #results_list {
        margin-top: 1em;
        margin-right: 0;
    }
}

.site_search .tt-dropdown-menu {
    margin-top: 0em;
    background-color: white;
    min-width: 210px;
    border: 1px solid #BFBFBF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
}
.site_search .twitter-typeahead {
    float: left;
    height: 100%;
}
.tt-suggestion {
    padding-left: 30px;    
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1em;
    margin: 0!important;
}
.tt-suggestion p {
    margin: 0;
}
.tt-hint {
    color: #999!important;
}
.tt-is-under-cursor {
    background-color: #d7e7f9;
}

#recentchanges .tags .changelabel span {
    background: url("/static/theme/img/tag-icon-small.1bf45005531f.png") 0 0 no-repeat;
    padding-left: 20px;
}

.see_also {
    margin-top: 2em;
}
/*
====================================
 Attributions
====================================
*/

#attributions {
    margin: 1.5em 1em 0.5em 1em;
    font-size: 80%;
    text-align: center;
}

/*
====================================
 Pagination
====================================
*/

.pagination { float: left; background: #e6e6e6; padding: 8px; border-radius: 5px; -moz-border-radius: 5px; webkit-border-radius: 5px; }
.pagination a, .pagination span { background: #fff; display: block; color: #444; text-decoration: none; float: left; padding: 2px 10px; border: 1px solid #bfbfbf; border-left: none; }
.pagination a.disabled, .pagination span.disabled,
.pagination a.disabled:hover, .pagination span.disabled:hover { color: #999; background: #fff; }
.pagination a:hover { background: url("/static/theme/img/gradient-light.da72bd534549.png") repeat-x scroll left bottom #f6f6f6; }
.pagination .next { border-right: 1px solid #bfbfbf; }
.pagination a:first-child { border-left: 1px solid #bfbfbf; }
.pagination .current, .pagination .current:hover { color: #444; background: url("/static/theme/img/gradient-light.da72bd534549.png") repeat-x scroll left bottom #d9d9d9; }

/*
====================================
 Editor
====================================
*/

#editor_actions {
    height: 4em;
    margin-top: -1em;
}
#editor_actions ul, #editor_actions .extra_actions {
    list-style-type: none;
    margin: 0
    padding: 0;
}
#editor_actions li {
    margin: 0;
    padding: 0;
    float: left;
}
#editor_actions .extra_actions {
    float: right;
    margin-top: -2.8em;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    padding: 0.5em 0 0.5em 0;

}
#editor_actions .extra_actions li {
    float: left;
    margin-right: 0.5em;
}
#editor_actions .extra_actions li:first-child {
    float: left;
    margin-left: 0.5em;
}
#editor_actions input[type="submit"] {
    padding: 8px 12px;
}
#editor_actions .cancel .button {
    margin-top: 0.70em;
}

#id_comment {
    max-width: 20em;
    width: 50%;
    padding-right: 0.2em;
    padding-left: 0.5em;
}
form #content_footer {
    margin-top: -1em;
}
.mapdata form #content_footer {
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-top: 1em;
}

/* Inside page editor, indicate that clicking on page title 
   allows for page rename */
.in_edit #object_title a:hover {
    background-color: white; 
    outline: 1px solid gray;
    color: #444;
}


@media screen and (max-width: 1075px) {
    #editor_actions .extra_actions {
        padding: 0;
        margin-left: 2em;
        background: none;
    }
    #editor_actions .extra_actions li, #editor_actions .extra_actions li:first-child {
        display: block;
        float: none;
        margin: 0;
        margin-top: 0.5em;
        width: 100%;
    }
    #editor_actions .extra_actions li a {
        display: block;
        float: none;
        width: 200px;
        text-align: center;
        margin-bottom: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
}
@media screen and (max-width: 600px) {
    #editor_actions {
        margin: 0;
        height: auto;
    }
    #editor_actions .save_area {
        text-align: center;
    }
    #content_footer h3 {
        font-size: 100%;
    }
    #editor_actions .save {
        width: 74%;
        float: left;
    }
    #editor_actions .save input[type="submit"] {
        width: 100%;
    }
    #editor_actions .cancel {
        float: right;
        width: 20%;
    }
    #editor_actions .cancel .button {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        margin-left: 0;
    }
    #editor_actions .extra_actions {
        float: none;
        margin: 0;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        display: inline-block;
        width: 100%;
    }
    #editor_actions .extra_actions li a {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #id_comment {
        width: 100%;
    }

    .mapdata form #content_footer {
        padding-left: 1em;
        padding-right: 1em;
    }

    #editor_actions .button {
        float: none;
    }
}




/*
=======================================
 Page specific (not stuff in page css)
=======================================
*/
#create_page {
    min-height: 4em;
}


/*
====================================
 Map customizations for this theme
====================================
*/

/* Map widget in detail view */
.olControlPanZoom {
    margin-left: 15px;
    margin-top: 8px;
}
.olwidgetEditableLayerSwitcher {
    position: absolute;
    left: 130px;
    margin-top: 10px;
}
@media screen and (max-width: 500px) {
    .olControlLayerSwitcher {
        display: none;    
    }
}
/*
====================================
Frontpage 
based on sf.localwiki / dentonwiki
====================================
*/
#page .welcome td {
    display: block;
    max-width: 1360px;
    height: 280px;
    background-image: url("/static/theme/img/foto_porto_wiki.ca4549ff51e9.jpg");
    background-position: 66% 0%;
    background-repeat: no-repeat;
    padding: 2em;
    border: 3px solid #b5b5b5;
}
#page .welcome {
    width: 100%;
    border: none;
}
#page .welcome a {
    text-decoration: none;
}
#page .welcome a:hover {
    text-decoration: underline;
}
#page .welcome h1, #page .welcome h2, #page .welcome h3, #page .welcome h4 {
    background-image: url("/static/theme/img/80_trans_white_bg.651f15e536f5.png");
    background-repeat: repeat;
    width: auto;
    float: right;
    padding: 0 0.25em 0 0.25em;
}
#page .welcome h1 {
    padding: 0.1em 0.25em 0.1em 0.25em;
}
#page .welcome h3 {
    padding: 0.2em 0.3em 0.25em 0.3em;
    margin-top: 0;
}
#page .welcome .searchbox * {
    vertical-align: middle;
}
#page .welcome .searchbox input {
    margin-top: 0.4em;
}

#site_title h1 {
    font-family: 'Exo', sans-serif;
}

#site_title_dot {
    color: #ccc;
    letter-spacing:-3px
}
/*
====================================
Frontpage 
based on sf.localwiki / dentonwiki
====================================
*/
#page .welcome td {
    display: block;
    max-width: 1360px;
    height: 280px;
    background-image: url("/static/theme/img/foto_porto_wiki.ca4549ff51e9.jpg");
    background-position: 66% 0%;
    background-repeat: no-repeat;
    padding: 2em;
    border: 3px solid #b5b5b5;
}
#page .welcome {
    width: 100%;
    border: none;
}
#page .welcome a {
    text-decoration: none;
}
#page .welcome a:hover {
    text-decoration: underline;
}
#page .welcome h1, #page .welcome h2, #page .welcome h3, #page .welcome h4 {
    background-image: url("/static/theme/img/80_trans_white_bg.651f15e536f5.png");
    background-repeat: repeat;
    width: auto;
    float: right;
    padding: 0 0.25em 0 0.25em;
}
#page .welcome h1 {
    padding: 0.1em 0.25em 0.1em 0.25em;
}
#page .welcome h3 {
    padding: 0.2em 0.3em 0.25em 0.3em;
    margin-top: 0;
}
#page .welcome .searchbox * {
    vertical-align: middle;
}
#page .welcome .searchbox input {
    margin-top: 0.4em;
}

#site_title h1 {
    font-family: 'Exo', sans-serif;
}

#site_title_dot {
    color: #ccc;
    letter-spacing:-3px
}