/* reset all elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
  font-family: arial, helvetica, verdana, sans-serif; 
}

body { background:#342; color:#fff; max-width:1200px;}
h1 { font-size: 175%; margin-left:1em;}
h2 { font-size: 130%;}
h3 { font-size: 115%;}
h1, h2, h3 { margin-top: 0.5em; margin-bottom: 0.5em; }
p { margin-bottom: 1em; margin-top: 1em;}
h4 { font-size: 100%; padding: 0; margin-bottom: 0; } 
pre, tt, code { font-family: courier, sans-serif; }
thead { font-weight:bold; }
ul,ol { margin-left: 1.5em;}
blockquote { margin-left: 1.5em; margin-right: 1.5em; }

a { color:#ddd; }
a:visited { color:#ddd; }
a:hover { color:#f00; }

p.br { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; }
.walk {font-size:80%; padding-bottom:0.7em; margin: 0;}
.park {font-weight:bold; margin: 0;}
.people {margin: 0;}
.date {margin: 0;}

td.md {background-color: #c0ffc0;}
td.sd {background-color: #c0ffff;}
td.os {background-color: #ffc0c0;}

span.new {color: red;}

img.right { float:right; }
img.left { float:left; }
div.right { float:right; }
div.left { float:left; }
.clear_both { clear:both; }
p.news_item { margin: 0; }
.question { font-weight: bold; padding-bottom: 0; margin-bottom: 0; }
.answer { margin-left: 20px; margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; }

/* used in webliography and fire trails page */
div.special { float:right; background-color: #ffd; border: thin solid black; padding: 0.5em; margin: 0.5em; width: 240px;}
div.special ul { list-style: none; margin-left: 0; }
div.special ul li:before { content: "\00BB \0020"; }
/* used in index page */
div.pictures { float: right; width: 180px;}
/* used in track notes pages */
div#trip_list { float:right; border: thin solid black; padding: 0.5em; margin: 0.5em; }
div#trip_list ul { list-style: none; margin-left: 0; }
/* used in photography page */
div.image_and_text { clear:both; }
/* used in descenders page */
div.descender_images { float: right; width: 240px; }

/* used in trip page */
div.photo_links { width: 70%; font-size: 80%; }
div.photo_links ul { text-align:center; }
div.photo_links li { display: inline; list-style-type: none; padding-left: 3em; padding-right: 3em; }
.previous { float:left;text-align:left; }
.next { float:right; text-align:right; }

/* used in photography page */
.small { font-size: 60%;}

/* used on knots and webliography page*/
table.border { border-collapse: collapse; }
table.border td { border: 2px solid black; padding: 0.25em; vertical-align:text-top; }
#body {
  width:100%;
  background: url(/tom/canyoning_background.jpg) no-repeat;
}
#header {
  height:108px;
  vertical-align:bottom;
}
#navbar { width: 206px; vertical-align: top; }
#navbar ul { margin-left: 0; }
#navbar ul li { list-style: none; padding-top:0.5em; }
#navbar ul li ul { margin-left: 1em }
#navbar ul li ul li { list-style: none; padding-top:0; }
#navbar ul li ul li:before {content: "\00BB \0020";}

#content {
  vertical-align: top;
  padding: 20px;
  color: #000;
  background: #fff;
}
#content a { color:#00f; }
#content a:visited { color:#808; }
#content a:hover { color:#f00; }
#footer { text-align: center; }
div.footer { font-size: 70%; }

.navlist li { display: inline; list-style-type: none; padding-right: 20px; }

/* hover links */
a.info {
    position:relative; /*this is the key*/
    z-index:24;
}

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:2em; 
    left:2em; 
    width:15em;
    border:thin solid black;
    background-color:#ffd; 
    color:#000;
    text-align: center; 
}