/*
 * This file is part of HOAM, copyright (C) 2002-2020 Robert Butler
 *
 * HOAM is free software; you can redistribute it and/or modify it under the
 * terms of the GNU Affero General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option)
 * any later version.
 *
 * HOAM is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with HOAM; if not, see http://www.gnu.org/licenses or write to the
 * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301
 *
 * Questions specific to HOAM should be directed to HOA Management. Please see
 * the HOAM web site at http://hoam.arprs.com/
 *
 * Some portions of HOAM incorporate ideas and/or code from other sources, and
 * those portions are explicitly mentioned and attributed in the relevant
 * section of HOAM source code. Questions about that code should be directed to
 * the original authors.
 *
 */

/******************************************************************************
Modifications to the default tags
******************************************************************************/
body {
  background: white;
  color: black;
  font: 11pt Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1em;
  margin: 0;
  padding: 0;
}
a:link, a:visited {
  font-weight: bold;
  text-decoration: none !important;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  text-decoration: underline;
}
abbr, acronym {
  border-bottom: .1em dotted gray;
  cursor: help;
}
blockquote {
  font-style: italic;
  padding: 0em 1em;
}
button {
  cursor: pointer;
}
caption {
  font-size: .8em;
}
code, kbd, pre, tt, var {
  font-family: "courier new", "courier", monospace;
}
col.legend {
  background: #efefef;
}
col.notes, td.notes, tr.notes {
  background: #eeffee;
}
span.tooltip {
  background: url(/hoam/images/icons/help.png) no-repeat left !important;
  cursor: help;
  display: inline-block;
  margin-left: .25em;
  padding-left: 1.5em;
  position: relative;
}
span.tooltip .tooltiptext {
  box-shadow: .5em .5em .25em dimgrey;
  border: .1em solid forestgreen;
  border-radius: .4em;
  background-color: lightgreen;
  color: black;
  cursor: default;
  font-weight: normal;
  left: 1.5em;
  opacity: 0;
  padding: .75em 1em;
  position: absolute;
  top: -5px;
  text-align: justify;
  transition: opacity 0.5s;
  visibility: hidden;
  width: 265px;
  z-index: 1;
}
span.tooltip .tooltiptext h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center !important;
}
span.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}
span.tooltip.tooltiptext::after {
  content: " ";
  position: absolute;
  top: 1em;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent forestgreen transparent transparent;
}
td.currency {
  text-align: right;
  padding-right: 2em;
}
td.currency_neg {
  text-align: right;
  padding-right: 1.5em;
}
del {
  background-color: #ffcccc;
}
dd {
  text-indent: 1em;
}
dt {
  font-weight: bold;
}
form {
  text-align: center;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
hr {
  width: 90%;
}
img {
  border: 0;
}
img.yotm {
  border: .3em inset;
}
ins {
  background-color: #ccffcc;
  border-bottom: .1em dotted gray;
  text-decoration: none;
}
label {
  display: block;
  font-weight: bold;
  font-style: italic;
}
label span {
  display: block;
}
legend {
  font-weight: bold;
}
p {
  text-indent: 2em;
}
table {
  background-color: white;
  border-spacing: 0;
  padding: .5em;
  text-align: left;
  vertical-align: top;
  width: 100%;
}
table.default {
  padding: 0;
  width: auto;
}
table.default td {
  background: transparent;
  border-bottom: 0;
  padding: 0;
}
thead, tfoot {
  background: silver;
}
th {
  border-bottom: .1em solid black;
  border-top: .1em solid black;
  text-align: center;
}
td {
  padding: .3em;
}
td ul {
  padding-left: 1em;
}
td li {
  text-align: left;
}
textarea {
  padding-bottom: .5em;
  width: 100%;
}

/******************************************************************************
General error or notice messages, however also used elsewhere in the system.
******************************************************************************/
.caution {
  color: orange !important;
}
.complete {
  color: green !important;
}
.error {
  color: red !important;
}
.error_img {
  background: url(/hoam/images/icons/error.png) no-repeat left !important;
  color: red !important;
  padding-left: 1.5em;
}
.warning {
  color: maroon !important;
}

/******************************************************************************
Generic classes that are reused.
******************************************************************************/
.br {
	margin: 1em 0;
}
.clear {
	clear: both;
}
.less_emphasis {
  color: gray;
}
.less-opacity {
  opacity: .50;
}
.onlyprint {
  display: none;
}
.small {
	font-size: .8em;
}
.underline {
  text-decoration: underline;
}

/* https://stackoverflow.com/a/16344389 */
.blink {
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

/******************************************************************************
Page logo
******************************************************************************/
#page_logo {
  background: url("/hoam/images/backgrounds/masthead.jpg") repeat-x 0 -50px;
  color: white;
  font-size: 1.175em;
  font-weight: bold;
  padding: .25em;
  text-align: right;
  height: 100px;
  text-shadow: black .1em .1em .1em;
}
#page_logo a:link {
  color: white;
}
#page_logo a:hover {
  color: silver;
}
#page_logo h1 {
  /* Position and set the font for the large background shadow */
  color: #555555;
  font-family: Verdana, sans-serif;
  font-size: 2.85em;
  position: absolute;
  top: .7em;
}
#page_logo h2 {
  /* Position and set the font for the 1st title */
  color: white;
  font-family: Verdana, sans-serif;
  font-size: 1.65em;
  left: .2em;
  position: absolute;
  text-shadow: black .1em .1em .1em;
  top: -.2em;
}
#page_logo h3 {
  /* Position and set the font for the 2nd title */
  color: lime;
  font-family: Verdana, sans-serif;
  font-size: 1.65em;
  left: 5em;
  position: absolute;
  top: 1em;
}
#page_logo .advertisement {
	position: absolute;
	left: 37%;
	width: 26%;
}

/******************************************************************************
Navigation content
******************************************************************************/
#page_navigation {
  background: url("/hoam/images/backgrounds/background.png") repeat-y;
  border-top: .1em solid #999;
  z-index: 1;
}
#page_navigation ul {
  list-style-type: none;
  margin-top: -1em;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 2;
}
#page_navigation li {
  display: inline;
  margin: 0 .2em;
  text-align: center;
}
#page_navigation li a {
  background-color: #228b22;
  border: .1em solid #006400;
  color: white;
  font-size: 105%;
  font-weight: normal;
  padding: .2em .5em .3em .5em;
  text-decoration: none;
}
#page_navigation li a:hover, #page_navigation li a#current {
  background-color: #0bbf0b;
  border: .1em solid black;
  border-top: .1em solid black;
  border-bottom: .1em solid black;
  padding: .3em .5em .4em .5em;
}
#page_navigation li a#current {
  font-weight: bold;
}

/******************************************************************************
'container' holds the #page_toolbar and #page_content; this exists solely to
provide a common 'column' background element to those two items.
******************************************************************************/
#container {
  background: white url("/hoam/images/backgrounds/background.png") repeat-y;
}

/******************************************************************************
Toolbar content
******************************************************************************/
#page_toolbar {
  background: white url("/hoam/images/backgrounds/background.png") repeat-y;
  float: left;
  padding: .5em;
  text-align: center;
  width: 180px;
}
#page_toolbar .toolbox {
  background: #228b22;
  border-color: black;
  border-style: solid;
  border-width: .1em;
  color: silver;
  margin-bottom: .6em;
  overflow: hidden;
  padding: .4em;
}
#page_toolbar a:link, #page_toolbar a:visited {
  color: white;
}
#page_toolbar a:hover {
  color: silver;
}

/******************************************************************************
Page content
******************************************************************************/
#page_content {
  line-height: 1.2em;
  margin-left: 195px;
  padding: 0 .75em .5em .5em !important;
  text-align: justify;
}
#page_content h1 {
  border-bottom: .1em solid black;
  line-height: .9em;
  margin: 0;
  padding: .3em 0 .3em 0;
  text-align: left;
}
#page_content .advertisement {
	margin: 1em 37% 1em 37%;
	width: 26%;
}

/******************************************************************************
Footer content
******************************************************************************/
#page_footer {
  background: #98cc98;
  clear: both;
  color: white;
  margin: 0;
  padding: .5em;
  text-align: center;
}
#page_footer a:link, #page_footer a:visited {
  color: white;
}
#page_footer a:hover {
  color: gray;
}
#page_footer .advertisement {
	margin: 1em 37% 1em 37%;
	width: 26%;
}
#page_footer .copyright {
  font-size: .85em;
}

/******************************************************************************
fillme is normally assigned to a div, and is used as a container for
progamatically inserted content (ie, through javascript).
******************************************************************************/
#fillme {
  margin: 0;
  padding: 0;
}

/*** Below are all of the remaining "generic" classes ***/
tr.alternate-row {
  background-color: #e9e9e9 !important;
  border: 0 !important;
}
ul.none {
  list-style: none;
}
.accesskey {
  display: inline;
  text-decoration: underline;
}
.box_information, .box_warning {
  border: .1em solid black;
  border-radius: .4em;
  box-shadow: .5em .5em .25em dimgrey;
  margin: 1.5em 1em;
  padding: .5em 1em .5em 3em;
  text-align: center;
}
.box_information {
  background: #eeeeee url('/hoam/images/icons/information.png') no-repeat .5em center;
}
.box_warning {
  background: #eeeeee url('/hoam/images/icons/exclamation.png') no-repeat .5em center;
}
.center {
  text-align: center;
}
.cursor_help {
  cursor: help;
}
.group_name {
  font-style: italic;
}
.hlight {
  background: yellow;
  color: black;
}
.outline {
  border: .1em solid gray;
  padding: .1em;
}
.product_name {
  text-transform: uppercase;
}
.server-communication {
  background: red;
  color: white;
  font-size: .9em;
  font-variant: small-caps;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.textareaExpander {
  cursor: pointer;
  float: right;
  font-size: 1.25em;
  font-weight: bold;
  margin-top: -1em;
}
.binary_attachment {
  border: 0;
  font-size: .7em;
  float: left;
  margin: .2em;
  max-width: 20em;
  text-align: center;
}
.RHS {
  float: right !important;
  margin-left: 1em !important;
  margin-right: .3em !important;
  text-align: left !important;
}

/******************************************************************************
Search
******************************************************************************/
.searchResult {
  margin-bottom: 1em;
}
.searchResult h1 {
  border: 0 !important;
  margin: 0;
  padding: 0;

  font-weight: normal;
  font-size: 1em;
}
.searchResult p {
  margin: 0;
  text-indent: 0;
}
.searchResult span {
  font-size: .8em;
}

/******************************************************************************
Forms
******************************************************************************/
form input:focus, select:focus, textarea:focus {
  background-color: #ffffbb;
}
form .mandatory, form .optional{
  background-color: silver;
  border-color: gray;
  border-left: .3em solid;
  border-right: .3em solid;
  border-radius: 1em;
  text-align: left;
  padding: .5em 1% .5em 1%;
}
form .advanced_options {
  border: .1em solid black;
  padding: 1em;
}
form .checkbox_option {
  border: 0;
  float: left;
}
form .checkbox_option label {
  display: inline;
}
form .mandatory {
  border-color: red;
}
form .mandatory label {
  color: red;
}
form .text {
  width: 100%;
}

/************************************************************************
Article specific CSS
************************************************************************/
.article_tool {
  float: right;
  padding-left: .4em;
}
.article_summary {
  border-bottom: .1em solid;
  padding: 0em 1em 1em 1em;
  margin: 2em 5em;
}
.article_note {
  background: #ccffcc;
  border-left: 0;
  border-right: 1em solid lime;
  color: green;
  float: left;
/* We need to expand the margin larger than needed because of IE's screwed up box model. */
  margin: 1em 1em 1em .3em;
  padding: .5em;
  max-width: 10em;
  text-align: right;
/* We need to specifiy an exact width, otherwise IE gets confused */
  width: 10em;
}
.article_note.RHS {
  border-right: 0 !important;
  border-left: 1em solid lime !important;
}
.article_credit {
  font-style: italic;
  font-size: .8em;
}
.article_note a:link, .article_note a:visited { 
  color: green;
}

/************************************************************************
Message Boards
************************************************************************/
.messageboard {
  margin: 1em 0 1em 0;
}
.messageboard h1 {
  border: .1em solid black;
  background: green;
  color: white;
  font-size: 1.125em;
  font-weight: normal;
  margin: 0 0 .1em 0;
  padding: 0 0 0 1em;
}
.messageboard h2 {
  font-weight: bold;
  font-size: .8em;
  margin: .1em 0 .9em 0;
  padding: 0;
}
.messageboard h4 {
  font-weight: bold;
  font-size: .7em;
  margin: 1em 0 1em 3em;
}
.messageboard img {
  margin: 1em 0 .3em .4em;
}
.messageboard h1 > img {
  margin: 0;
  padding: 0 2.em 0 .2em;
}
.messageboard p {
  text-indent: 0em;
}

/************************************************************************
News
************************************************************************/
.news {
  padding: .5em;
}
.news h1 {
  background-color: #228b22;
  color: white;
  font-weight: normal;
  font-size: 1.25em;
  margin: 0em -.5em;
  padding: 0 .5em 0 .5em;
}
.news h2 {
  font-weight: bold;
  font-size: .9em;
  margin: .1em 0 .9em 0;
  padding: 0;
}
.news h2 a {
  color: black;
}
.news h4 {
  color: green;
  font-weight: bold;
  font-size: .7em;
  margin: 1em 0 1em 3em;
}
.news img {
  margin: .5em 0 .5em 1em;
}
.news .topic {
  float: right;
  margin-bottom: .5em;
  margin-left: 1em;
}
.news p {
  text-indent: 0em;
}
.news_tool {
  float: right;
  padding-left: .4em;
}
.news_tool img {
  margin: .4em .2em 0 0;
}

/************************************************************************
  Budget administration / editing
************************************************************************/
.table_refresh {
  cursor: pointer;
}
.budget_action {
  text-align: center;
  vertical-align: middle;
}
.budget_assessment {
  color: red;
}
.budget_balance {
  color: inherit;
}
.budget_body {
  min-height: 20em; /* This needs to be overridden by JS after checking the available screen size */
  overflow: auto;
}
.budget_check, .budget_date, .budget_detail {
  text-align: center;
}
.budget_id {
  display: none;
}
.budget_invoice_body {
  min-height: 20em; /* This needs to be overridden by JS after checking the available screen size */
  page-break-before: avoid !important;
  overflow: auto;
}
.budget_invoice_body tr, .budget_invoice_body td {
  page-break-inside: avoid !important;
}
.budget_invoice_container {
  border: .1em solid black;
  float: right;
  height: 7em;
  margin-top: 1em;
  overflow: visible;
  padding: .5em 1em;
  page-break-inside: avoid !important;
  text-align: center;
  width: 15%;
}
.budget_invoice_container h2, .budget_invoice_total h2 {
  background: white !important;
  border: .1em solid black;
  font-size: 100%;
  margin-top: -1.75em;
  padding: .5em 1em;
  overflow: visible;
}
.budget_invoice_customer_container {
  border: .1em solid black;
  height: 7em;
  margin-top: 2em;
  margin-right: 20%;
  overflow: visible;
  padding: .5em 1em;
}
.budget_invoice_customer_container h2 {
  background: white !important;
  border: .1em solid black;
  font-size: 100%;
  margin-top: -1.75em;
  padding: .5em 1em;
  overflow: visible;
}
.budget_invoice_customer_id {
  float: right;
  text-align: right;
}
.budget_invoice_fineprint {
  font-size: 0.8em;
  line-height: 1.1em;
  margin-right: 20%;
}
.budget_invoice_item_number, .budget_invoice_item_date {
  text-align: center;
}
.budget_invoice_total {
  border: .1em solid black;
  float: right;
  margin-top: 2em;
  min-height: 7em;
  padding: .5em 1em;
  page-break-inside: avoid !important;
  text-align: center;
  width: 15%;
}
.budget_memo, .budget_description {
  text-align: left;
}
.budget_loading {
  background-image: url('/images/icons/throbber.gif');
  background-position: center center;
  background-repeat: no-repeat;
  height: 15em;
  text-align: center;
}
.budget_not_posted {
  opacity: .5 !important;
}
.budget_payment {
  color: green;
}
.budget_window_move {
  opacity: .20;
}

/******************************************************************************
Mini-vote
******************************************************************************/
.mini-vote h1 {
  font-size: 1.1em;
  font-weight: bold;
}
.mini-vote form div {
  background: white;
  border: 0;
  color: black;
  padding: 0;
  text-align: center;
}

/******************************************************************************
Letters to homeowners
******************************************************************************/
.letter {
  line-height: 1.2em;
  text-align: justify;
}
.letter h1 {
  border-bottom: .2em solid black;
  line-height: .9em;
  margin: 0;
  padding: .3em 0 .3em 0;
  text-align: left;
}
#letter dl {
  page-break-after: always;
  page-break-inside: avoid;
}
.letter-head, #letter_head {
  margin: 1em;
  text-align: center;
}
.letter-head h1, #letter_head h1 {
  color: green;
  border-bottom: .2em solid black;
  font-size: 1.5em;
  font-variant: small-caps;
  margin: 0;
  padding: .25em;
  text-align: center;
  text-transform: capitalize;
}
.letter-head h2, #letter_head h2 {
  font-size: 1.2em;
  font-variant: small-caps;
  margin: 0;
  padding: .25em;
  text-transform: capitalize;
}
.letter-head h3, #letter_head h3 {
  font-size: .9em;
  font-style: italic;
  font-weight: normal;
  margin: 0;
}
#letter_salutation {
  text-align: left;
}
#letter_signature {
  text-align: left;
}
.letter-approver {
  margin: 2em 0 0 0;
  text-align: left;
}
.letter-date {
  float: right;
  padding-top: 1em;
  text-align: right;
}
.letter-footer {
  text-align: left;
}
.letter-homeowner-address {
  margin: 1em 0;
  text-align: left;
}
.letter-person {
  text-align: left;
}
.letter-residence-address {
  margin: 1em 0;
  text-align: left;
}
.letter-salutation {
  margin-top: 2em;
  text-align: left;
}
.letter-signature {
  text-align: left;
}
.letter-specific {
  color: red;
  font-weight: bold;
  text-indent: 2em;
}
.letter-topic {
  font-weight: bold;
  margin: 0 0 1em 0;
  text-align: left;
}
.letter-tracking {
  font-family: monospace;
}
.letter-tracking:first-line {
  text-decoration: underline;
}
.violation_letter {
  background: white;
  color: black;
  margin: 2em;
  padding: 1em;
  page-break-after: always !important;
  text-align: left;
}
.violation_letter h1 {
  color: green;
  font-size: 1.75em;
  font-variant: small-caps;
  margin: 0;
  text-align: center !important;
  text-transform: capitalize;
}
.violation_letter h2 {
  display: block !important;
  font-size: 1.1em;
  font-variant: small-caps;
  margin: 0;
  text-align: center;
  text-transform: capitalize;
}
.violation_letter h3 {
  display: block !important;
  font-size: .9em;
  font-style: italic;
  font-weight: normal;
  margin: 0;
  text-align: center;
}
.violation_letter_description {
  font-weight: bold;
}
.violation_letter_salutation {
  margin-top: 1em;
  text-align: left;
}
.violation_letter_signature {
  margin-top: 2em;
  text-align: left;
}
.violation_letter_specific {
  color: red;
}
.owner_address {
  margin: 3em 0;
  text-align: left;
}

/******************************************************************************
Violation entry / editing
******************************************************************************/
.violation_quickinfo {
  background: white;
  border: .1em solid black;
  color: black;
  float: right;
  font-size: .8em;
  height: 14.5em;
  max-width: 50%;
  padding: .5em;
  width: 35em;
}
.violation_quickinfo img {
  float: left;
  margin: 0 .5em .5em 0;
}

/******************************************************************************
Overriding the defaults used by tabber.
******************************************************************************/
.tabberlive {
  text-align: left;
}

/******************************************************************************
Print media formatting
******************************************************************************/
@media print {
  #page_logo, #page_navigation, #page_toolbar, .donotprint {
    display: none !important;
  }
  .onlyprint {
    display: block !important;
  }
  #container {
    background-image: none !important;
  }
  #page_content {
    background: 0;
    margin: 0;
  }
  #page_content h1 {
    color: green;
    border-bottom: .2em solid black;
    text-align: center;
  }
  #page_footer {
    background: transparent;
    color: black;
  }
  #page_footer a {
    color: black !important;
  }
  .violation_letter {
    font-size: 90%;
    margin: 0;
  }
}