* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; overflow: auto;}
      
body { background-color: #fff; color: #333; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   12px;
  line-height: 16px;
}
li {
  padding-left: 1em;
}
p {
 padding-top: 0.6em;
}
p + p {
 padding-top: 0.6em;
}

select { font-size: 11px; }
input { font-size: 11px; }
textarea { font-size: 11px; }

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}


a { color: #000; }
a:visited { color: #666; }
/*a:hover { color: #fff; background-color:#000; }*/


.fieldWithErrors {
  padding: 2px;
 background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid grey;
  width: 100%;
}

div.progressBar div.background {
  background-color: #333;
  height: 18px;
  width: 0%;
}

/* Used for selected items in map menu */
.menuSelected {
  background-color: #e0f8e0
}

/* Used in riverlist when a river is selected */
.selected { background-color: #e0f8e0; border: 1px solid #222; }


#header { position: absolute; top: 0px; height: 65px; left:0px; right: 0px; }
#headleft { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 290px; padding: 0px;}
#headcenter { position: absolute; top: 0px; bottom: 0px; left: 300px; right: 350px; text-align:center; }
#headright { position: absolute; top: 0px; bottom: 0px; right: 0px; width: 340px; text-align: right; padding: 5px; }

#headspace { position: absolute; top: 65px; height: 10px; left: 0px; right: 0px; border-top: 2px solid #888;  }

#left { position: absolute; top: 75px; bottom: 30px; left: 0px; width: 140px; }
#leftmain { position: absolute; top: 0px; bottom: /*26*/40px; left: 0px; right: 10px; padding: 5px; margin-top: 10px; border: 1px solid #000; overflow: hidden;}
#leftmain li { padding-bottom: 5px; padding-top: 5px; border-bottom: 1px solid #888; }
#lefttitle { position: absolute; left: 10px; top: 0px; height: 20px; background-color: #FFF; }
#leftad { position: absolute; bottom: 0px; height: 20px; left: 0px; right: 0px; padding: 10px; background-color: #fff; }

/* No left column
#nomap { position: absolute; top: 75px; bottom: 30px; left: 0px; right: 0px; overflow: auto; }
#main { position: absolute; top: 75px; bottom: 30px; left: 0px; right: 406px; }
*/
#main { position: absolute; top: 75px; bottom: 30px; left: 140px; right: 406px; }
#nomap { position: absolute; top: 75px; bottom: 30px; left: 140px; right: 0px; overflow: auto; background-color: #f0f8ff; border: 1px solid #000; padding: 50px; }
#nomap p { margin-bottom: 10px; margin-top: 5px; padding: 5px 0;}

.front { position: absolute; top: 75px; left: 0px; right: 0px; padding: 50px; }


#maininfo { position: absolute; top: 0px; height: 49px; left: 0px; right: 0px; padding: 5px; border: 1px solid #000; background-color:#F8F8FF; }
#flash { text-align: center; background-color: #EEE; }
#map { position: absolute; top: 60px; bottom: 0px; left: 0px; right: 0px; border: 1px solid #000;}

#mapresize { position: absolute; top: 75px; bottom: 30px; right: 400px; width: 6px; background-color:#fff; }
#mapresize:hover { cursor: col-resize; }

#panel { position: absolute; top: 75px; bottom: 30px; right: 0px; width: 400px; background-color: #fff; }
#panelhead { position: absolute; top: 0px; height: 55px; left: 0px; right: 0px; padding: 5px 5px 0px 5px; }
#panelnav { position: absolute; bottom: 0px; left: 10px }
#panelmain { position: absolute; top: 60px; bottom: 40px; left: 0px; right: 0px; padding: 5px; border: 1px solid #000; overflow: auto; }
#sidebar-action { position: absolute; bottom: 0px; height: 29px; left: 0px; right: 0px; padding: 5px; border: 1px solid #000; background-color:#F0F080; }
#panelinfo { position: absolute; bottom: 0px; height: 29px; left: 0px; right: 0px; padding: 5px; border: 1px solid #000; background-color:#F0F080; }

#panelmain td { padding: 2px; }
#panelmain table { border-spacing: 0px; }

#panellinks { position: absolute; right: 5px; top: 0px; }

#footer { position: absolute; bottom: 0px; height: 20px; left:0px; right: 0px; margin-top: 10px; border-top: 2px solid #888; }

/* tried without width and text-align elements to get the right width, but sometimes the last tab jumps down to the next line
   also the panel attribute position and bottom attributes seem to be a bit of hack to get the tabs to sit at the bottom
  */
#paneltab { position: absolute; bottom: 0px; height: 25px; right: 10px; width:350px; text-align:right; }
#paneltab li {
  background-color:#9df; display:inline;
  position: relative;
  bottom: -5px;
  margin:0 5px 0 0; padding: 5px;
  font-size: 11px; text-transform:uppercase;
  border-top: 1px solid #068; border-left: 1px solid #068; border-right: 1px solid #068;
}
#paneltab .selected { background-color: #6ad; font-weight: bold; color: #000; }
#paneltab li:hover { cursor: pointer; background-color: #6ad; }
#paneltab a { text-decoration: none; }


#loading { text-align: center;  padding: 10px; margin: 30px; }

#regionlist { text-align:center; }
#regionlist .head { border-bottom: 1px solid #eee; }

.point { border-bottom: 1px solid #eee; }
.pointselect { border: 1px solid #888; background-color: #aea; }
.point:hover { cursor: pointer }

#menu { width:90px;padding:5px;text-align:left;border-style:solid; border-width:1px; background-color:#ffffff; }
.menuitem:hover { cursor: pointer }

#help { font-size: 9pt; }

#openid {
  font-size:12px;
  background:#FFFFFF url(/images/openid/login.gif) no-repeat scroll 5px 50%;
  border:1px solid #999999;
  padding: 3px 3px 3px 25px;
}

.richtext {
  font-size: 11px;
  line-height: 14px;
}
.richtext p + p {
  padding-top: 0.6em;
}
.richtext li {
  margin-left: 1em;
}


.front { padding: 5px; }
.column1 { float: left; width: 33%; padding: 5px; }
.column2 { float: left; width: 33%; padding: 5px; }
.column3 { float: left; width: 30%; padding: 5px; }
.module { display: block; left: 0px; top: 0px; border:3px solid #ECECEC; background:#FFFFFF none repeat scroll 0%; margin:5px 0px; }
.moduleNoFrame { display: block; left: 0px; top: 0px; background:#FFFFFF none repeat scroll 0%; margin:5px 0px; }
.moduleFrame {border:1px solid #F6EEA5 !important;background:#FFFFFF none repeat scroll 0%;overflow:hidden;
position:relative;}
.moduleHeader {padding-left: 5px; background:#FFFFE0 repeat-x scroll left bottom !important;height:1.8em; min-height:20px;overflow:hidden; font-weight: bold;}
.moduleContent {display:block;
padding-bottom:0pt;background:#FFFFFF none repeat scroll 0%;
clear:both;
padding:7px;}

#trips { width: 100%; border-spacing: 0px; }
.tripH th { border-bottom: 1px dotted #888888; }
.trip1 { cursor: pointer; padding: 4pt; background-color: #fafafa; }
.trip1a { background-color: #fafafa; }
.trip1a td { border-bottom: 1px dotted #888888; }
.trip2 { cursor: pointer; padding: 4pt; background-color: ##ffffff; }
.trip2a { background-color: ##ffffff; }
.trip2a td { border-bottom: 1px dotted #888888; }
.tripS { background-color: #ffffdd; }

.pagination {
  padding: 3px;
  margin: 2px;
  font-size: 8pt;
}
.pagination a {
  padding: 2px 2px 2px 2px;
  margin: 1px;
  border: 1px solid #fff;
  text-decoration: none;
  color: #000099;
}
.pagination a:hover, .pagination a:active {
  border: 1px solid #009;
  background-color: #fff;
  color: #000;
}

.pagination span.current {
  padding: 2px 2px 2px 2px;
  margin: 1px;
  border: 1px solid #009;
  background-color: #88f;
  font-weight: bold;
  color: #FFF;
}
.pagination span.disabled {
  padding: 2px 2px 2px 2px;
  margin: 1px;
  border: 1px solid #fff;
  color: #ddd;
}

#triphead { position: absolute; top: 80px; height: 25px; left: 145px; right: 400px; }
#triplist { position: absolute; top: 105px; left: 145px; right: 400px; bottom: 30px; overflow:auto; background-color: #ffffff; border: 1px solid #484; padding: 10px;}
#tripinfo { position: absolute; top: 105px; right: 5px; width: 365px; overflow: auto; bottom: 30px; background-color: #f8f8ff; border: 1px dashed #888; padding: 10px;}



#maintab {
position: absolute; bottom: 0px; right: 0px; width: 340px;
background:white url(/images/navigation_blue.png) repeat-x scroll left bottom;
/*border-bottom:1px solid #7FD7F7;*/
min-height:31px;
line-height:1.357em;
}
* html #maintab {
height:31px;
}
#maintab ul {
font-family:Helvetica,Arial,sans-serif;
margin:0pt auto;
overflow:hidden;
padding:0pt 0pt 0pt 100px;
width:300px;
}
#maintab li {
display:inline;
float:left;
font-size:1.143em;
font-weight:bold;
margin:0pt -20px 0pt 30px;
min-height:24px;
padding-left:2px;
}
* html #maintab li {
height:25px;
}
#maintab li a, #maintab li strong {
color:#636363;
display:block;
min-height:20px;
padding:8px 10px 4px 8px;
text-decoration:none;
}
#maintab li.active a {
padding:0pt;
}
#maintab li.active, #maintab li.active a, #maintab li.active strong {
background:#7FD7F7 none repeat scroll 0%;
color:white;
}
#maintab li.active, #maintab li:hover {
background:#7FD7F7 url(/images/navi_top_left.png) no-repeat scroll left top;
}
#maintab li.active strong, #maintab a:hover {
background:#7FD7F7 url(/images/navi_top_right.png) no-repeat scroll right top;
}
#maintab li:hover a {
color:white;
}