body {
   background: white;
   color: black; 
   margin: 0; 
   padding: 0;
   font-family:  Bitstream Vera, sans-serif, Verdana, Arial, Helvetica;
   z-index: 0;
}

h1 {
   font-weight: normal; 
   font-size: 25px;
   margin: 0; 
   letter-spacing: 0.2em;
   color: #446; 
   padding: 0.25em 0.33em 0.125em; 
   border-bottom: 5px double #557; 
   width: 98%;
   z-index: 3;
}

h2 { display: none; }

h4 {
   font-weight: bold;
}

div#menu {
position: absolute;
   top: 60px; 
   left: 0.3em; 
   width: 15%;
   z-index: 2;
   font-weight: normal;
   font-size: 10pt;
}

div#menu h3 {display: none;}

div#menu ul { list-style: none; margin: 0; padding: 0; }

div#menu li {
   display: block; 
   margin: 0; 
   padding: 0;
   overflow: hidden;
}

div#menu a {
   margin: 0; 
width:100%;
   padding-top: 0.16em;
   padding-bottom: 0.16em;
   /*padding-right: 0.33em;*/
   letter-spacing: 1px; 
   text-align: right; 
   font-weight: bold; 
   text-decoration: none;
   border-top: 1px solid #DDD;
   overflow: hidden;
}
*>div#menu a {
   display: block;
}
div#menu a:link {color: #226;}
div#menu a:link:hover {background-color: #F0F0FF;color: #338;}
div#menu a:visited {color: #557; }
div#menu a:visited:hover {background-color: #f0f0ff; color: #338;}
div#menu ul li ul {border-width: 0; margin: 0;}
div#menu ul li ul li {
   font-size: 85%; 
   font-weight: normal; 
   letter-spacing: normal; 
   /*padding-right: 1em; */
   color: #404077;
   overflow: hidden;
}
div#menu ul li ul li a:visited {color: #557;}

div#menu div#links {
   display: block; 
   margin-left: auto; 
   margin-right: auto;
   margin-top: 1em;
   letter-spacing: 1px; 
   text-align: center; 
   font-weight: bold; 
   text-decoration: none;
   color: #337;    
}

div#menu div#links a {
   border-bottom: none;
   display: inline;
   padding: 0.16em;
   padding-top: 3px;
   padding-bottom: 3px;
}

div#menu div#links a:hover {background-color: transparent;}


div#main {
   top: 5em; 
   padding: 3px 3px 3px 3px;
   width: 95%;
   padding-left: 19%;
   text-align: justify;
   z-index: 1;
}
*>div#main {
   width: 81%;
   padding-left: 17%;
}

div#main p { margin-top: 8pt; }

div#main a {
   text-decoration: none;
   color: #337;
   background:transparent;
}

div#main h3 {
   color: #446;
   margin: 0;
   font-weight: bold;
   padding-left: 0.2em;
   padding-top: 0.05em;
   padding-bottom: 0.05em;
   border-bottom: 2px solid #224;
}


div#main a:hover { background: #eee; }

div#main table tr {
   
}

div#main .gbook {
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
   text-align: justify;
   background: #D0D0D0;
   color: #000;
   border: 1px solid #335;
   width: 80%;
   padding: 2px;
}

div#main .gbook strong {
   text-decoration: underline;
   font-weight: normal;
}


div#main table.input {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1em;
   text-align: left;
   background: #D0D0D0;
   color: #000;
   border: 1px solid #335;
}


div#main table p#title {
   color: #000;
   padding: 2px;
   font-weight: bold;
}

div#main table p#list {
   border-color: #224;
   border: 1px solid #335;
   background: #88B;
   color: #000;
   padding: 2px;
}

div#main .gbheading {
   background: #303030;
   color: #FFFFFF;
   text-align: center;
}

div#main .gbheading a {
   text-decoration: underline;
   color: #FFF;
   background:transparent;     
}

div#main .gbheading a:hover {text-decoration: none;background: #000000;}

.hidden {
   display: none;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   border: none;
}

div#main .error {
   background: #D0D0D0;
   color: #000;
   border: 1px solid #335;
   width: 80%;
   margin: 0 0 0 0;
}

div#main .errorhead {
   background: #303030;
   color: #FFFFFF;
}

form {text-align: center;margin-left: auto;margin-right:auto;}

#copyright {font-size: 6pt;}

.cv {margin-left: 2em;}
table.cv td {vertical-align: top;}

div#main table.search {
   width: 80%;
   margin: 2em;
   text-align: left;
   background: #D0D0D0;
   color: #000;
   border: 1px solid #335;
}

div#main table.search td {
   border: 1px solid #335;
}

div#main table.search td.title {
   background: #666;
   text-align: center;
}

div#main table.search td.content {
   padding-left: 12pt;
   padding-right: 12pt;
}

div#main table.list {
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #557;
   background: #66A;
   padding: 2px;                                         
   color: black;
}
   
div#main table.list td {
   margin: 6pt;
   border: 1px solid #557;
   background: #88C;
   padding: 2px;
}

div#main div#boxout {
   float: right;
   position: absolute;
   top: 5em; 
   right: 0px;
   width: 25%;
   text-align: left; 
   font-size: 90%; 
   padding: 4px; 
   background: white; 
   border-left: 1px dashed #557;
   border-bottom: 1px dashed #557;
   color: black; 
   margin: -1px 0.5em 0.2em -1px;
   z-index: 2;
}

div#main a span.popup { 
   display: none; 
   position: absolute;
   top: 5.5em;
   right: 0px;
   width: 22%;
   text-align: left;
   font-size: 90%;
   padding: 4px;
   background-color: #F0F0FF;
   color: black;
   border: dashed #557 1px;
   margin: -1px 0.5em 0.2em -1px;
   z-index: 3;
}
div#main a:hover span.popup {
   display: block;
}

.small { font-size: x-small; }
img.small { height: 75px; }
.strike { text-decoration: line-through; }

table.backed {
   border-collapse: collapse; 
   background-color: #ccbbff;
   border: 1px #888888 solid;
}
table.backed thead tr {
   margin: 2px;
   background-color: #aa99ee;
   border: 1px #888888 solid;
}
table.backed tbody td {
   text-align: left;
}
table.backed tbody tr {
   border-bottom: 2px #666 solid;
   margin-bottom: 0.5em;
   padding-bottom: 0.5em;
}

ul#icons {
   display: block;
   text-align: center;
}
ul#icons a {
   text-decoration: none;
}

ul#icons li {
   display: inline;
   margin: 2em;   
}

a img { border: none; } 

div#main a span.filmpopup {
   display: none;
   position: absolute;
   top: 6em;
   left: 65%;
   width: 30%;
   text-align: left;
   font-size: 90%;
   padding: 4px;
   background-color: #F0F0FF;
   margin: -1px 0.5em 0.2em -1px;
   border-top: dashed #557 1px;
   border-left: dashed #557 1px;
   z-index: 101;
   position: fixed;
}
div#main a:hover span.filmpopup {
   display: block;
}

div#main .mpd { color: #5bb; }
div#main .list { color: #05f; }
div.center { width: 100%; text-align: center; }
div#main h4.center { width: 100%; text-align: center; }
div#main pre.code {
   display: block; 
   padding: 1em;
   width: 80%;
   border: 1px solid black;
}
div#main span.code {
   padding: 1px;
   margin: 2px;
}
div#main .code { 
   margin-left: auto;
   margin-right: auto;
   background-color: #fcc;
   margin-top: 0px;
   overflow: hidden;
}
div#main h4.code { 
   background-color: transparent;
   padding: 2px 1em 2px 1em;
   border: none;
   border-left: 1px solid black;
   border-right: 1px solid white;
   margin-bottom: 0px;
   margin-top: 1em;
}

.debit {
   background-color: #fcc;
   color: red;
}
.debit:before {
   content: '£';
}
.credit:before {
   content: '£';
}

.credit {
   background-color: #cfc;
   color: green;
}
table.transactions,form.account table {
   width: 100%;
}
table.totals {
   width: 75%;
}
table.totals td:first-child {
   text-align: center;
}
table.transactions,form.account table,table.totals {
   border: 1px solid black;
   background-color: #ffc;
}
form.account table {
   width: 50%;
}
form.account table td[colspan="2"] {
   border-top: 1px solid #ccc;
}
.future {
   color: #999;
}
table.totals td, table.totals th, table.transactions td,table.transactions th {
   border: 1px solid #ccc;
}
table.totals th[colspan="2"] {
   border-bottom: 1px solid  black;
}
.notice {
   border: 1px solid #66f;
   background-color: #aaf;
   font-weight: bold;
   padding: 2px;
   text-align: center;
}
.error {
   border: 1px solid #f66;
   background-color: #faa;
   font-weight: bold;
   padding: 2px;
   text-align: center;
}
.chores h4 {
   margin-top: 0em;
   border-bottom: 1px solid #ccc;
}
.chores-shadow {
   background-color: blue;
   border-right: 5px solid #ccc;
   border-bottom: 5px solid #ccc;
   margin: 2em;
}
.chores-shadow {
   position: fixed;
   top: 4em;
   right: 0em;
}
.chores {
   margin-left: -5px;
   margin-top: -5px;
   border: 1px solid black;
   background-color: #ffc;
   padding: 0.5em;
}
.chores ul {
   padding-left: 1em;
}
.even {
   background-color: #dfb;
}
.odd {
   background-color: #fdb;
}
table.transactions a {
   display: block;
   text-align: center;
}
.margin {
   margin: 1em;
}