/* To apply this to a page the way it was intended, add
<link rel="stylesheet" type="text/css" href="devjoe.css">
in the head element and
<div class="tb"></div><div class="bb"></div><div class="lb"></div><div class="rb"></div>
in the body.
*/
body {
padding: 12pt;
margin: 0pt;
font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}

div.tb {
background-image: url("horizdevjoe.gif");
height: 9px;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
}

div.bb {
background-image: url("horizdevjoe.gif");
width: 100%;
height: 9px;
position: fixed;
bottom: 0pt;
left: 0pt;
}

div.lb {
background-image: url("vertdevjoe.gif");
width: 9px;
position: fixed;
top: 9px;
bottom: 9px;
left: 0pt;
}

div.rb {
background-image: url("vertdevjoe.gif");
width: 9px;
position: fixed;
top: 9px;
bottom: 9px;
right: 0pt;
}

H1 {
margin-top: 3pt;
margin-bottom: 3pt;
font-size:2em;
}

H2 {
margin-top: 2pt;
margin-bottom: 2pt;
font-size:1.75em;
}

H3 {
margin-top: 2pt;
margin-bottom: 2pt;
font-size:1.5em;
}

H4 {
margin-top: 2pt;
margin-bottom: 2pt;
font-size:1.3em;
}

H5 {
margin-top: 2pt;
margin-bottom: 2pt;
font-size:1.2em;
}

H6 {
margin-top: 2pt;
margin-bottom: 2pt;
font-size:1.1em;
}

P.caption {
margin-top: 2pt;
margin-bottom: 2pt;
text-align: center;
font-weight: bold;
}
/* Make delete buttons in admin interface appear beside what they delete
   instead of below it*/
DIV.puzlink {
margin-top: 0;
padding-top: 0;
float:left;
}
input.linkdel {
float:left;
margin-left:4pt;
border: 1pt solid black;
background: #ff6060;
font-size: 0.63em;
}
BR.clear {
clear: left;
}
P.tight {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
P.tighttop {
margin-top: 0;
padding-top: 0;
}
input.spoilerbutton {
    display: block;
    margin:10px 0 0 0;
}
div.spoiler {
    overflow: hidden;
}
div.spoiler > div {
    -webkit-transition: all 0.2s ease;
    -moz-transition: margin 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: margin 0.2s ease;
}
input.spoilerbutton[value="Show Keywords"] + div.spoiler > div {
    margin-top:-1000%;
}
input.spoilerbutton[value="Hide Keywords"] + div.spoiler {
    padding:0;
}
input.spoilerbutton[value="Show Answer"] + div.spoiler > div {
    margin-top:-1000%;
}
input.spoilerbutton[value="Hide Answer"] + div.spoiler {
    padding:0;
}