<?
header("Content-type: text/css");

$main_paddingtop = 232; // compensate for space behind overlying banner+menu
?>

body, html {
color: #000;
font-size: 14px;
font-family: Georgia, serif;
text-align: center;

background: #fc0;

margin: 0;
padding: 0;
}

/* preloaded images */
#preload {
width: 0;
height: 0;

background: transparent url('images/searchbox.png') no-repeat top left;

z-index: -99;
}
#preload div {
background: transparent url('images/searchbuttonover.png') no-repeat top left;
}
#preload div div {
background: transparent url('images/searchbuttondown.png') no-repeat top left;
}
#preload div div div {
background: transparent url('images/searchbuttonoverreflect.png') no-repeat top left;
}
#preload div div div div {
background: transparent url('images/searchbuttondownreflect.png') no-repeat top left;
}
#preload div div div div div {
background: transparent url('images/searchboxreflect.png') no-repeat top left;
}

h1:first-letter {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 160%;
}

h1.list {
margin-top: 0;
margin-left: 25px;
position: fixed;
z-index: 1;
}

h2:first-letter {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 160%;
}

a {
color: #608;
text-decoration: none;
outline: 0;
top: 0;
left: 0;

cursor: pointer;
}

a.list {
width: 100%;

padding-left: 8px;
padding-right: 8px;

display: inline-block;
}

a:hover {
color: #b0f;
text-decoration: none;
}

a.list:hover {
font-size: 140%;
line-height: 85%;
vertical-align: middle;

background: #ffd633;

padding-left: 0;
padding-right: 16px;
}

a:active {
position: relative;
top: 1px;
left: 1px;
}

#main {
padding-top: <? echo $main_paddingtop."px"; ?>; /* compensate for space behind overlying banner+menu */
padding-bottom: 90px; /* compensate for space behind overlying footer */
}

#banner {
width: 100%;
height: 150px; /* 160 minus 10 padding */

background: #fc0 url('images/banner.png') no-repeat center 10px;

padding-top: 10px;

display: inline-block;
position: fixed;
top: 0;
left: 0;

/* find how to make div click-thru first */
/* z-index: 1; */
}

#menu {
width: 100%;

background: transparent url('images/fc0fading-top.png') repeat-x bottom left;

margin: 0;
padding-bottom: 32px; /* for fading image */

position: fixed;
top: 160px; /* directly below banner */
left: 0;
}

#menu div {
background: #fc0;

padding-bottom: 8px;
}

#menu a{
color: #a00;
font-size: 16px;
font-weight: bold;

margin: 0px 8px;
}

#menu a:hover {
color: #f00;
}

#menu a span {
font-size: 70%; /* make cap letters other than first smaller in size - only applies to "HOME" and "ALL" */
}

form#search {
margin: 0 auto 8px;
padding: 0;

display: inline-block;
}

div#searchbox {
width: 160px;
height: 26px; /* 32 minus 8 padding */

background: transparent url('images/searchboxdarkreflect.png') no-repeat bottom left;

margin: 0;
padding: 0;
padding-bottom: 8px;

float: left;
}

input#searchbox {
width: 150px; /* 160 minus 5+5 padding */
height: 18px; /* 26 minus 4+4 padding */
vertical-align: middle;

color: #444;
font-size: 12px;
font-family: Georgia, serif;

background: transparent url('images/searchboxdark.png') no-repeat top left;
border: 0;
outline: 0;

margin: 0;
padding: 4px 5px 4px;
}

input#searchbox:active, input#searchbox:focus {
color: #000;

background: transparent url('images/searchbox.png') no-repeat top left; /* change bgd even if javascript disabled */
}

div#searchbutton {
width: 26px;
height: 26px; /* 32 minus 8 padding */

background: transparent url('images/searchbuttonreflect.png') no-repeat bottom left;

margin: 0;
margin-left: 6px; /* to separate from searchbox */
padding: 0;
padding-bottom: 8px;

float: left;
clear: right;
}

input#searchbutton {
width: 26px;
height: 26px;
vertical-align: middle;

background: transparent url('images/searchbutton.png') no-repeat top left;
border: 0;
outline: 0;

margin: 0;
padding: 0;

cursor: pointer;
}

input#searchbutton:hover {
background: transparent url('images/searchbuttonover.png') no-repeat top left; /* change bgd even if javascript disabled */
}

input#searchbutton:active, input#searchbutton:focus {
background: transparent url('images/searchbuttondown.png') no-repeat top left; /* change bgd even if javascript disabled */
border: 0;
outline: 0;
}

#content {
width: 400px;
text-align: justify;

margin: 0px auto;
}

#list {
text-align: right;

margin-top: 28px;
margin-right: 30px;
}

#sig {
width: 160px; /* 240 minus 80 padding */

text-align: right;
font-weight: bold;

background: transparent url('images/daniellimsig.png') no-repeat top left;

margin-left: auto;
padding-top: 80px;
}

#footer {
width: 100%;
font-size: 10px;

background: transparent url('images/fc0fading-bottom.png') repeat-x top left;

padding-top: 32px; /* for fading image */

position: fixed;
left: 0;
bottom: 0;
}

#footer div {
background: #fc0;

padding: 20px 0px 8px;
}


/* ==NO-JAVASCRIPT (ASSUMED)== */

#nojavascript {
width: 100%;
height: 16px; /* 48 minus 32 padding */

color: #f00;
font-family: Impact, Charcoal, sans-serif;
font-size: 24px;
text-align: center;
text-shadow: 0px 0px 3px #000, 0px 0px 10px #f00, 0px 3px 4px #000;

background: transparent url('images/blackfading-top.png') repeat-x bottom left;

padding-bottom: 32px;

position: fixed;
top: 0;
left: 0;
z-index: 5;
}

#nojavascript div {
height: 12px; /* 16 minus 4 padding */

background: #000;

padding-top: 4px;
}

/* bring everything down by 16 to compensate for no javascript banner */

#main {
padding-top: <? echo ($main_paddingtop+16)."px"; ?>;
}

#banner {
top: 16px;
}

#menu {
top: 176px;
}

/* ==END NO-JAVASCRIPT== */


/* ==IF JAVASCRIPT ENABLED== */

.javascriptenabled #nojavascript {
display: none; /* hide the no javascript banner */
}

.javascriptenabled #main {
padding-top: <? echo $main_paddingtop."px"; ?>; /* back to default */
}

.javascriptenabled #banner {
top: 0px !important; /* back to default */
}

.javascriptenabled #menu {
top: 160px; /* back to default */
}

/* ==END IF JAVASCRIPT ENABLED== */