html
{
  background-image: url('/img/background.jpg');  
}

body
{
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: .9em;
  margin:    12px auto;
  max-width: 1200px;
  border: 1px solid black;
  padding: 12px;
  background-color: white;
}

a:link
{
  color: blue;
  text-decoration: none;
}

a:visited
{
  color: blue;
  text-decoration: none;
}

a:hover
{
  color: blue;
  text-decoration: underline;
}

#name-filters a
{
        font-size: 75%;
}

#name-filters a.not-selected
{
        background-color: white;
        border: solid white 2px;
        color: blue;
        padding: 4px;
        margin: 2px;
}

#name-filters a.selected
{
        background-color: powderblue;
        border-radius:.5em;
        border: solid black 2px;
        color: black;
        padding: 4px;
        margin: 2px;
        text-decoration: none;
}

.river-condition-poor
{
  background-color: #f2abb1;
}

.river-condition-low
{
  background-color: #f7dfb2;
}

.river-condition-good
{
  background-color: #66ff66;
}

.river-condition-high
{
  background-color: #b2c9f7;
}

.river-condition-flood
{
  background-color: #dab2f7;
}

.river-condition-potential
{
  background-color: #ffff66;
}

table
{
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-collapse: collapse;
}

table.internal
{
  margin-left: 0px;
  border: none;
  border-collapse: collapse;
}  

table#summary
{
 margin: 0px;
}

thead#trip-list
{
  font-weight: bold;
}

thead
{
  font-weight: bold;
}

thead#classic
{
  font-weight: bold;
}

th
{
  background-color: #d3d3d3;
  margin: 4px;
  padding: 8px;
}

td
{
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
}

tr.internal
{ 
  border: none;
}

td.internal
{ 
  padding-left: 6px;
  padding-right: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
  border: none;
}


tr.even
{
  color: #000000;
  background-color: white;
}

tr.odd
{
  color: #000000;
  background-color: #E8E8E8;
}

#river-list tr:hover
{
  background-color: yellow;
  color: #000000;
}

#trip-list tr:hover
{
  background-color: yellow;
  color: #000000;
}

#gauge-data tr:hover
{
  background-color: yellow;
  color: #000000;
}

.wide
{
  margin: 36px;
}

.contact
{
  font-weight: bold;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius:1em;
  padding: 6px;
  margin: 24px;
  box-shadow: 3px 3px 4px #888888;
  background-color: #fbbbbb;
}  

.donate
{
  font-weight: bold;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius:1em;
  padding: 6px;
  margin: 24px;
  box-shadow: 3px 3px 4px #888888;
  background-color: #a6f7bb;
}  

ul.plain
{
  list-style-type: none;
  padding-left: 0px;
}

ul#filters
{
  margin-top: -12px;
  text-align:center;
}

li.activated
{
  border-color: black;
  border-style: solid;
  border-width: 1px;
  display: inline;
  margin-left: 6px;
  margin-right: 6px;
  padding: 4px;
  padding-left: 12px;
  padding-right: 12px;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  border-radius:1em;
  box-shadow: none;
  background-color: white;
}

li.not-activated
{
  border-color: black;
  border-style: solid;
  border-width: 1px;
  display: inline;
  margin-left: 6px;
  margin-right: 6px;
  padding: 4px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius:1em;
  box-shadow: 3px 3px 4px #888888;
  background-color:  #d3d3d3;
}

li.menu
{
  display: inline;
  font-weight: bold;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius:1em;
  padding: 6px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: 2px;
  margin-right: 18px;
  box-shadow: 3px 3px 4px #888888;
  background-color:  #d3d3d3;
}  

li.selected
{
  background-color: white;  
  box-shadow: none;  
}  

ul.conditions
{
  margin-left: 36px; 
  margin-right: 36px;
}

li.conditions
{
  padding: 5px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
}

.tooltip 
{
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext 
{
    visibility: hidden;
    width: 240px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 12px;
    border-color: black;
    border-style: solid;
    border-width: 3px;
    border-radius:2em;
    box-shadow: 3px 3px 4px #888888;

    position: absolute;
    z-index: 1;
    top: -5px;
    right: 115%; 
    margin-left: -60px;

    opacity: 0;
}

.tooltip:hover .tooltiptext 
{
    visibility: visible;
    opacity: 1;
}

.center
{
  text-align: center;
}

.right
{
  text-align: right;
}

.small
{
  font-size: 80%;
}

.small-list
{
  margin-left: auto;
  margin-right: auto;
  width: 260px;
}

.data-list
{
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

.medium-list
{
  margin-left: auto;
  margin-right: auto;
  width: 600px;
}

.large-list
{
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

.gauge_statistics
{
  margin-left: auto;
  margin-right: auto;
}


.dark-outline
{
  border-color: black;
  border-style: solid;
  border-width: 2px;
}

.label
{
  font-weight: bold;
  background-color: #d3d3d3;
  white-space: nowrap;
}

.label-bold-only
{
  font-weight: bold;
  white-space: nowrap;
}

.graph
{
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.button
{
  padding: 4px;
  margin: 2px;
  border: 2px solid black;
  border-radius:.5em;
  background-color: PaleGreen;
}

.note
{
  padding: 12px;
  max-width: 400px;
  border: 2px solid black;
  border-radius:.5em;
  background-color: #E8E8E8;
}

.warning
{
  padding: 12px;
  max-width: 600px;
  border: 2px solid black;
  border-radius:1em;
  background-color: #FFBABA;
  margin: auto;
}

sup
{
  top: -0.5em;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub
{
  bottom: -0.25em;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}