/**
	\file	layout.css

	$LastChangedDate$
	$Revision$
	$Author$
*/




/* Headers */
h1 {
    font-size: 22pt;
    color: #7F4F4F;
    font-weight: bold;
    font-family: arial, verdana;
    /*text-align: right;*/
}

h2 {
    font-size: 16pt;
    color: #7F4F4F;
    font-weight: bold;
    padding-bottom: 0px;
    padding-top: 10px;
    font-family: verdana;
}

h3 {
    font-size: 10pt;
    color: #7F4F4F;
    font-weight: bold;
}

body {
    color: black;
    font-family: arial;
    font-size: 11pt;
    background-color: #FFF7DF;
    margin: 0;
}

.header {
    font-size: 16pt;
    /* color: #663300; */
    color: #7F4F4F;
    font-weight: bold;
    padding: 10px 20px 20px 0px;
}

#quicksearch a {
    font-size: 10pt;
    font-weight: normal;
    margin-right: 20px;
}

#main {
    padding-top: 40px;
    margin: 0px 10px 10px 10px;
    margin-bottom: 200px;
}

div#logo {
    text-align: right;
}

.nivo-logo {
    width: 160px;
    height: 50px;
    position: absolute;
    top: 60px;
    left: 35px;
}

#quicksearch, #browse, #recent, #smartsearch {
    /*border: solid 2px #663300;*/
    height: 360px;
    border: solid 2px #B39890;
    padding: 20px;
    float: left;
}

#quicksearch, #smartsearch p {
    margin-top: 20px;
    text-align: right;
    font-size: 10pt;
}

#recent {
    height: 100%;
}

#recent_tickets {
    /*border: solid 2px #663300;*/
    border: solid 2px #B39890;
    padding: 20px;
    float: left;
}

#quicksearch, #browse, #smartsearch {
    width: 350px;
    margin: 20px;
}

#map {
    margin-top: -50px;
    margin-left: 20px;
}

#map img {
    border: none;
}

#map_caption {
    font-size: 8pt;
    width: 200px;
    margin-top: -50px;
}

#recent, #recent_tickets {
    width: 784px;
    margin: 20px 20px 50px 20px;
}

.nicetime {
    color: #5F3B3B;
    font-size: 8pt;
}

a {
    color: #5F3B3B;
    text-decoration: none;
}

a:visited {
    color: #5F3B3B;
    text-decoration: none;
}

a:hover {
    color: #5F3B3B; /*663300;*/
    text-decoration: underline;
}

#menu {
    background-color: #5F3B3B;
    padding: 4px;
    margin: 0 0 0 0;
    text-align: center;
    font-weight: bold;
    position: fixed;
    width: 100%;
    color: white;
    opacity: 0.9;
}

#menu a {
    color: white;
}

#footer {
    clear: both;
    font-size: 0.8em;
    background-color: #EFE5E0; /* light pink */
    padding: 5px;
    margin: 50px 0 0 0;
    text-align: center;
}

a.info {
    position: relative; /*this is the key*/
    z-index: 24;
    border-bottom: dotted 1px blue;
    color: black;
}

a.info:hover {
    z-index: 25;
}

a.info span {
    display: none
}

a.info:hover span { /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    top: 1em;
    left: -16em;
    width: 15em;
    border: 1px solid black;
    background-color: #FFF7DF;
    color: #000;
    text-align: center;
    font-size: 0.8em;
}

.abbrev {
    color: blue;
    text-decoration: none;
    border-bottom: dotted 1px blue;
}

div#version {
    text-align: right;
    font-style: italic;
    margin-top: -15px;
}

.action_result {
    font-style: italic;
    border: solid;
    margin: 30px 30px 30px 30px;
    padding: 10px;
    border-color: green;
    color: green;
}

div#add_button {
    margin-bottom: 20px;
}

table.version_info {
    background-color: #FCFFCD;
}

.version,.date {
    text-align: right;
    vertical-align: top;
    padding-right: 10px;
    padding-left: 5px;
}

.date {
    font-style: italic;
    font-size: 8pt;
}

table tr.long-text {
	display: none;
	color: red;
}

table.page_navigator {
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FCFFCD;
    vertical-align: top;
    margin-top: 20px;
    margin-bottom: 20px;
}

table.page_navigator td {
    width: 540px;
    text-align: center;
}

table.page_navigator td:first-child {
    width: 350px;
    text-align: left;
}

table.page_navigator td:last-child {
    width: 350px;
    text-align: right;
}


table.default {
    background-color: #FCFFCD;
    border-collapse: collapse;
    border: solid 2px;
    text-align: left;
    table-layout: fixed;
    margin-top: 20px;
    margin-bottom: 20px;
}


/* - - - - - - - - - - - - - - - - SEARCH RESULTS, TICKETS, RELATIONS - - - - - - - - - - - - - - - - */

table.search_results, table.tickets, table.relations {
    margin-left: auto;
    margin-right: auto;
    background-color: #FCFFCD;
    border-collapse: collapse;
    border: solid 2px;
    text-align: left;
    table-layout: fixed;
}

table.search_results th, table.tickets th, table.relations th, table.default th {
    padding: 2px 6px 2px 3px;
    padding-left: 3px;
    border: 1px solid #7F4F4F;
}

table.search_results td, table.tickets td, table.relations td, table.default td {
    vertical-align: top;
    padding: 2px 6px 2px 4px;
    border: 1px solid #7F4F4F;
}

table.search_results td a {
    font-weight: bold;
}

table.search_results th img {
    float: right;
}

table.attributes {
    margin-bottom: 30px;
}

table.attributes td {
    padding: 2px 6px 2px 4px;
}

#change_search_filter {
    clear: both;   
}

/* - - - - - - - - - - - - - - - - RELATIONS - - - - - - - - - - - - - - - - */

table.relations td.icons {
    width: 30px;
}

#relations {
    width: 440px;
    padding: 10px 0px 10px 0px;
    clear: both;
}

#relations p {
    text-align: center;
}

/* - - - - - - - - - - - - - - - - RECORDS - - - - - - - - - - - - - - - - */

#record_heading {
/*     border: 1px solid yellow; */
    clear: both;
    margin-bottom: 10px;
}

#record_heading #name {
    font-family: verdana, arial;
    font-size: 20pt;
    font-weight: bold;
    width: 440px;
    float: left;
    margin-bottom: 10px;
}

#record_heading #icons {
    width: 300px;
    float: left;
    margin-left: 310px;
}

#record_heading #status {
    margin-left: 10px;
    width: 120px;
    float: left;
    border: 2px dotted #7F4F4F;
    padding: 3px;
    text-align: center;
    font-weight: bold;
/*     color: #7F4F4F; */
}

#church {
/* 	border: 1px solid; */
    margin-bottom: 50px;
    clear: both;
    font-family: georgia, calibri, arial;
}

#church h2, .organ h2, #references h2 {
    margin-top: 0;
}

#references h2 {
    font-size: 11pt;
}

#references td {
    font-size: 10pt;
}

#references td.info {
    font-family: georgia, arial;
    font-size: 9pt;
}

#church_pictures_and_address {
    width: 440px;
    float: left;
    padding: 0px 0px 10px 0px;
}

#church_pictures {
    width: 440px;
    float: left;
    padding: 0px 0px 10px 0px;
}

#photographer {
    font-size: 8pt;
    font-style: italic;
}

#church_address {
    width: 440px;
    float: left;
    padding: 0px 0px 10px 0px;
}

#no_picture {
    background-image: url('../images/geenkerk.jpg');
    width: 264px;
    height: 400px;
    text-align: left;
    position: relative;
    border: 1px solid #7F4F4F;
}

#no_picture p {
    margin-left: 30px;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    font-style: italic;
}

#church #building {
    width: 420px;
    float: left;
    padding: 0px 10px 10px 10px;
}

#location {
    width: 420px;
    float: left;
    padding: 0px 0px 10px 10px;
}

#location img, #church_pictures img, #organ_pictures img {
    border: 1px solid #7F4F4F;
    margin: 5px;
}

#organs {
    clear: both;
}

.organ {
    border-top: 1px solid #7F4F4F;
    clear: both;
    font-family: georgia, arial;
}

.organ #history {
    width: 440px;
    float: left;
    padding: 0px 0px 10px 0px;
}

#organ_pictures {
    width: 420px;
    float: left;
    padding: 0px 10px 10px 10px;
}

.organ #disposition {
    width: 420px;
    float: left;
    padding: 0px 0px 10px 10px;
}

.organ #organ_locations {
    width: 600px;
    float: left;
    padding: 0px 0px 10px 10px;
}

.organ #organ_locations p {
    text-align: center;
}

#references {
    border-top: 1px dotted #7F4F4F;
    clear: both;
    font-family: arial;
    padding-bottom: 15px;
}

td.h_info {
    width: 20px;
    vertical-align: top;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

td.info {
    padding: 0;
    margin: 0;
}

td.remarks {
    padding-left: 10px;
    vertical-align: top;
    width: 100px;
}

td.info_section {
    padding-top: 10px;
    font-weight: bold;
}

#change_date {
    margin-top: 100px;
    font-family: georgia, calibri, arial;
    font-style: italic;
    font-size: 8pt;
    border-top: 1px solid;
    padding-top: 3px;
    margin-bottom: 20px;
}

/* - - - - - - - - - - - - - - - - SEARCH RESULT CARDS - - - - - - - - - - - - - - - - */

#result_cards, #search_results_buttons {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}
.result_card {
    clear: both;
    border-bottom: 1px solid #E8D5CB;
}

.result_section {
    float: left;
    margin: 20px;
    vertical-align: top;
}

.result_section .name {
    font-size: 1.5em;
    font-weight: bold;
}

.result_section .church_address {
    margin-top: 10px;
}

.result_section .status {
    color: #7F4F4F;
}

.result_section:nth-child(2) {
    width: 200px;
}

.result_section:nth-child(3) {
    width: 400px;
}

.result_section:nth-child(4) {
    width: 200px;
}

.result_section .organ {
    float: left;
    margin: 20px;
    vertical-align: top;
    border: none;
}

.result_section .organ .name {
    font-family: aria;
    font-size: 10pt;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}

#search_results_buttons {
    margin-bottom: 20px;
    
}

#search_results_buttons li {
    display: inline-block;
    padding: 20px;
    font-size: 1.1em;
}

#search_results_buttons li a {
    font-weight: bold;
}

#search_results_buttons li:nth-child(1) a {
    margin-left: 10px;
    margin-right: 20px;
}
    
#search_results_buttons li:nth-child(2) {
    margin-left: 300px;
}

#search_results_buttons li .selected {
    border-bottom: 2px solid black;
}

/* - - - - - - - - - - - - - - - - FORM STYLES - - - - - - - - - - - - - - - - */

.form_label {
    font-size: 10pt;
    font-weight: bold;
}

.form_error_label {
    font-size: 11pt;
    font-weight: bold;
    color: red;
}

.form_error {
    font-size: 10pt;
    font-style: italic;
    color: red;
    margin-left: 190px;
    margin-top: -7px;
}

#linked_removal {
    color: red;
    margin-bottom: 30px;
}

/* - - - - - - - - - - - - - - - - LOG IN - - - - - - - - - - - - - - - - */

td.login_name {
    width: 100px;
    text-align: right;
    padding-right: 5px;
}

td.login_field {
    width: 50px;
    padding-bottom: 5px;
}


#login_form {
    width: 150px;
    margin: 30px 0px 5px -8px;
    padding: 10px 10px 10px 10px;
    border: 2px solid;
    background-color: transparent; /*#E6E6CF;*/
    text-align: right;
    text-indent: 0em;
}

#login_form form {

}

#login_form #login_form_links {
    padding-top: 5px;
    border-top: 2px solid #AAA;
}

#login_form div.login_form_links a {
    color: black;
    text-decoration: none;
}

#login_form div.login_form_links a:visited {
    color: black;
    text-decoration: none;
}

#login_form div.login_form_links a:hover {
    color: black;
    text-decoration: underline;
}

#login_form div.clearfix {
    padding: 3px 0px 5px 0px;
    vertical-align: top;
}

#login_form h2 {
    font-size: 0.9em;
    padding: 0px 0px 5px 0px;
}

#login_form form label {
    float: left;
    font-size: .7em;
    text-align: right;
    margin-top: 4px;
}

#login_form_links a {
    font-size: .6em;
    color: #663300;
}

#login_form_links a:visited {
    color: #663300;
}


div#default_form div.clearfix input {
    border-color: #746F64;
    border: 1px solid;
    padding: 2px;
}

div#default_form div.clearfix textarea {
	font-family: arial;
	font-size: 10pt;
    border-color: #746F64;
    border: 1px solid;
}

div#default_form div.clearfix select {
    border-color: #746F64;
    border: 1px solid;
}

div#signup,div#default_form, div#default_form_remove {
    width: 870px;
    margin-left: 40px;
    margin-top: 20px;
    background-color: #FCFFCD;
    clear: both;
}

div#signup form,div#default_form form, div#default_form_remove form {
    border-top: 2px solid #000080;
    border-bottom: 3px solid #000080;
}

div#signup div.clearfix, div#default_form div.clearfix, div#default_form_remove div.clearfix {
    border-top: 1px solid #CFD0FF;
    padding: 10px 0px;
    vertical-align: top;
}

div#signup form label, div#default_form form label, div#default_form_remove form label {
    width: 170px;
    float: left;
    margin: 2px 10px;
    font-weight: bold;
    font-size: 11pt;
}

div#signup div.remark, div#default_form div.remark {
    font-style: italic;
    padding: 0 0 5px 25px;
    color: #663300;
}

div#default_form_remove div.remark {
    visibility: hidden;
}

div#signup div.buttongroup, div#default_form div.buttongroup, div#default_form_remove div.buttongroup {
    border-top: 1px solid #000080;
    text-align: right;
    padding: 10px 10px 10px 0;
}

/* exceptions */
div#signup form label {
    width: 180px;
}

div#signup {
    width: 550px;
}

div#default_form_remove form label {
    color: gray;
}

div#default_form_remove input {
    color: gray;
}

div#default_form_remove textarea {
    color: gray;
}

div#default_form_remove div.buttongroup input {
    color: black;
}

div#search_form form label {
    font-weight: bold;
    clear: both;
    display: block;
}

div#search_form form input {
    margin-top: 2px;
    margin-bottom: 8px;
}

div#search_form div.buttongroup {
	margin-top: 10px;
}

div#search_form span {
	display: block;
	margin-top: 2px;
	margin-bottom: 10px;
}

/* - - - - - - - - - - - - - - - - ACTION RESULTS - - - - - - - - - - - - - - - - */

.action_result {
    font-style: italic;
    border: solid;
    margin: 25px 30px 25px 30px;
    padding: 10px;
    border-color: green;
    vertical-align: middle;
    color: green;
}

.action_result img {
    vertical-align: bottom;
    padding-top: 0px;
    margin-right: 5px;
}

.action_error_result {
    font-style: italic;
    border: solid;
    margin: 25px 30px 25px 30px;
    padding: 10px;
    border-color: red;
    vertical-align: middle;
    color: red;
}

.action_error_result img {
    vertical-align: bottom;
    margin-right: 5px;
}

/* - - - - - - - - - - - - - - - - RECORD NAVIGATOR - - - - - - - - - - - - - - - - */

#record_navigator {
	width: 90%; /* 1310px; */
	float: left;
	background-color: #EFE5E0;
	margin-top: 20px;
	margin-bottom: 20px;
    font-weight: bold;
}

#record_navigator ul {
    margin: 0;
    padding: 0;
}

#record_navigator li {
	float: left;
	background-color: #EFE5E0;
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 30%; /* 440px; 33% */
    text-align: center;
}

#record_navigator li:first-child {
    text-align: left;
}

#record_navigator li:last-child {
    /*width: 430px;*/
    text-align: right;
}

#record_navigator li:hover {
/* 	background-color: #5F3B3B; */
}

#record_navigator a {
	text-decoration: none;
	color: #5F3B3B;
	padding: 0 6px;
}

#record_navigator a:hover {
	text-decoration: underline;
}

#quickjump {
    margin-left: 100px;
    clear: both;
}

* html a {
	display: block;
}

/* - - - - - - - - - - - - - - - - AUTO COMPLETE - - - - - - - - - - - - - - - - */

#smartsearch_autocompletion_anchor {
    display: block; 
    position: relative;
    margin-top: 5px;
    margin-left: 0px;
    width: 300px;
} 

#city_autocompletion_anchor, #county_autocompletion_anchor, #church_autocompletion_anchor {
    display: block; 
    position: relative;
    margin-top: -5px;
    margin-left: 190px;
    width: 300px;
} 

.ui-menu-item {
    font-size: 10pt;
    border-top: 1px solid #FFF7DF;
    /*margin-left: 30px;*/
}

.extra {
    color: #809FFE; 
    display: block;
}

.ui-autocomplete {
    position: absolute;
    background: white;
}

/*
.ui-autocomplete li {
    text-indent: 50px;
    padding-left: 50px;
    background-repeat: no-repeat;
    background-image: url("../images/icons/church.png");
}

.ui-autocomplete li[data-type="city"] {
    background-image: url("../images/icons/marker.png");
}
*/

.smartsearch-searchbutton  {
    background: #FFF7DF;
    background-image: url("../images/icons/search.png");
    float: right;
    background-size: 32px;
    width: 32px;
    height: 32px;
    border: none;
    color: white;
    margin-top: -4px;
    margin-left: 2px;
    display: inline-block;
}

.remark {
    text-align: left;
    font-size: 8pt;
    color: red;
}

/*
.ui-autocomplete-loading {
    background: white url("../images/icons/ui-anim_basic_16x16.gif") right center no-repeat;
}*/

/* - - - - - - - - - - - - - - - - SEARCH PANE PROTOTYPE - - - - - - - - - - - - - - - - */

.wrapper_test {
    overflow:auto;
    height:100%;
    width:100%;
}
.test_left {
    width:530px;
    background-color:#006666;
    height:100%;
    float:left;
    overflow:scroll;
/*    overflow-style:auto;  not supported */
    z-index:10;
    position:absolute;
    top:0px;
    overflow-x:hidden;
}
.full_map {

    height:100%;
    background-color:#FFCC00;
    overflow:scroll;
    /*overflow-style:auto; not supported */
    position:relative;
    padding-left:530px;
    overflow-x:hidden;
    /*border:5px solid #fff;*/
}


/* FILEDROP STYLES */


/* Essential FileDrop zone element configuration: */
.fd-zone {
  position: relative;
  overflow: hidden;
  /* The following are not required but create a pretty box: */
  width: 15em;
  margin: 0 auto;
  text-align: center;
}

/* Hides <input type="file"> while simulating "Browse" button: */
.fd-file {
  opacity: 0;
  font-size: 118px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* filter: alpha(opacity=0); not supported */
  font-family: sans-serif;
}

/* Provides visible feedback when use drags a file over the drop zone: */
.fd-zone.over { border-color: maroon; background: #eee; }

/* - - - - - - - - - - - - - - - - PICTURES - - - - - - - - - - - - - - - - */

#pictures {
    width: 400px;
}

#pictures img {
    display: block;
}

#pictures a img {
    vertical-align: bottom;
    display: inline;
    margin-bottom: 5px;
}

.picture-container {
    clear: both;
}

.pictures_thumbnail {
    /*display: block;*/
    float: left;
    margin-bottom: 10px;
}

#pictures .title {
    /*display: block;*/
    clear: both;
    margin: 0px 0px 20px 200px;
    font-style: italic;
    font-size: 8pt;
}

#pictures ul {
    float: left;
    margin: .5em 1em .75em 0em;
    list-style-type: none;
}

#pictures li {
    margin-left: 18px;
    /*text-indent: 0px;*/
    margin-bottom: 0.0em;
}

#pictures a {
    color: #7F4F4F;
    text-decoration: none;
}

#pictures a:visited {
    color: #7F4F4F;
    text-decoration: none;
}

#pictures a:hover {
    color: #7F4F4F;
    text-decoration: underline;
}

#picture_edit_remove_thumbnail {
    margin: 10px 0 10px 10px;
}

/* - - - - - - - - - - - - - - - - MENU / NAVIGATION - - - - - - - - - - - - - - - - */

#page_menu {
    background-color: #EFE5E0; /* light pink */
}

#page_menu {
    margin: 10px 20px 20px 0;
    padding: 3px;
}

#page_menu b {
    margin-left: 3px;
    color: #7F4F4F;
}

#page_menu ul {
    margin: .5em 1em .75em 0em;
    list-style-type: square;
}

#page_menu li {
    margin-left: 18px;
    /*text-indent: 0px;*/
    margin-bottom: 0.0em;
}

#page_menu a {
    color: #7F4F4F;
    text-decoration: none;
}

#page_menu a:visited {
    color: #7F4F4F;
    text-decoration: none;
}

#page_menu a:hover {
    color: #7F4F4F;
    text-decoration: underline;
}

/* - - - - - - - - - - - - - - - - CONTENT HISTORY DIFF - - - - - - - - - - - - - - - - */

table.diff {
    table-layout: fixed;
    width: 700px;
    font-size: 9pt;
    border: none;
}

table.diff td {
    vertical-align: top;
    /*
    white-space: pre;
    white-space: pre-wrap;
    font-family: monospace;
    */
    /*width: 45%;*/
    border: none;
}

td.diffSeparator {
    width: 20px;
}

.diffInserted {
    background-color: #E0FFE0;
    border: none;
}

.diffDeleted {
    background-color: #FFE0E0;
    border: none;
}

/* - - - - - - - - - - - - - - - - GRAPHS - - - - - - - - - - - - - - - - */

#relations_graph {
    display: block;
    width: 1200px;
    height: 600px;
    border: solid;
    background-color: white;
}