BODY {
    font-family: "Maiandra GD", Verdana, Geneva, Arial, Helvetica, Swiss, sans-serif;
    background-color: #B8C6CF;
    text-align: center;
    margin: 0;
}

BODY.SIDEBAR {
    background-image: url(sidebar-bg.jpg);
    background-repeat: repeat-y;
    }

H1, H2, H3, H4 {
    font-weight: bold;
    color: rgb(51, 51, 153);
    text-decoration: underline;
    text-align: center;
    margin: 1.5ex auto 1ex auto;
}

H1 {
    font-size: 250%;
}

H2 {
    font-size: 150%;
}

H3 {
    font-size: 110%;
}

H4 {
    text-decoration: none;
    font-size: 110%;
    margin: 1ex auto 0.5ex auto;
}

BODY.ALBUMS H1, BODY.ALBUMS H2, BODY.ALBUMS H3, BODY.ALBUMS H4 {
    color: blue;
}

TABLE {
    border-collapse: collapse;
    margin: 0 auto; /* top+bottom, left+right - auto allows element to float to middle of page */
}

TABLE, TD, TH {
    border-color: black; /* why does IE use white?! */
}

P {
    /* allow narrow paragraphs to float to the centre */
    margin-left: auto;
    margin-right: auto;
}

DL {}

DT {
    font-weight: bold;
    margin-top: 1ex;
}

DD {
    margin: 0;
}

FORM {
    margin: 0; /* irritating trailing margins in some unlikely places! */
}

INPUT, TEXTAREA, SELECT, OPTION, OPTGROUP, BUTTON {
    font-family: "Maiandra GD", Verdana, Geneva, Arial, Helvetica, Swiss, sans-serif;
}

INPUT, SELECT, OPTION, OPTGROUP, BUTTON {
    font-size: 95%; /* this makes button text smaller, amongst other things */
}

INPUT.TEXT, TEXTAREA {
    font-size: 100%;
}

INPUT.TEXT {
    vertical-align: middle;
}

IMG {
    vertical-align: middle;
}

BUTTON {
    overflow: visible; /* only needed for IE, but doesn't hurt Firefox */
}

P.SIGNATURE {
    font-weight: bold;
    font-size: 120%;
}

.INSET {
    width: 80%;
}

.WARNING {
    color: red;
}

.NORMAL {
}

/**********************************************************************
 * TABLE#dump_albums contains the Albums data when it is viewed by an
 * administrator.
 **********************************************************************/

TABLE#dump_albums {
}

TABLE#dump_albums TH, TABLE#dump_albums TD {
    border-style: solid;
    border-width: 1px;
}

/**********************************************************************
 * TABLE#running_total defines the table used to display a running total
 * for the order in the page masthead.
 **********************************************************************/

TABLE#running_total {
    margin: 0 auto;
}

TABLE#running_total TD {
    padding: 0;
}

TABLE#running_total P {
    font-size: 100%;
    font-weight: bold;
    margin: 0;
}

/**********************************************************************
 * Classes for use on the Contact Me and File Not Found pages
 **********************************************************************/

TABLE.CONTACT {
}

TABLE.CONTACT TH, TABLE.CONTACT TD {
    text-align: left;
    border-style: solid;
    border-width: 1px;
    padding: 0.5ex;
}

/**********************************************************************
 * Classes for use on the Links page
 **********************************************************************/

TABLE.LINKS {
}

TABLE.LINKS TD, TABLE.LINKS TH {
    border-style: solid;
    border-width: 1px;
    padding: 0.5ex;
}

TABLE.LINKS TH {
    text-align: center;
}

TABLE.LINKS P {
    margin: 0;
}

TABLE.LINKS P.ORG {
    font-weight: bold;
}

TABLE.LINKS P.LOCATION {
    font-weight: bold;
    font-style: italic;
}

TABLE.LINKS P.ADDRESS {
}

TABLE.LINKS P.LINK {
}


/**********************************************************************
 * Give active feedback when hovering over links.
 *
 * - change the background colour of text links
 * - change the border colour of image links
 * - in an IMGLINK class table, activate both text and image links at
 *   the same time when overingn over a cell
 * - in a TD.ACTIVE cell, change the entire cell background rather
 *   than just text and image links
 *
 * Note that IE6 doesn't support TD:hover
 **********************************************************************/

A {
    color: blue;
    text-decoration: none;
    }

A:visited {
    color: blue;
    }

A IMG {
    /* give link images a border so we can change its colour on hover */
    border-style: solid;
    border-width: 2px;
    border-color: #B8C6CF; /* this is the colour of the BODY background so it's effectively invisible */
}

A:hover, TABLE.IMGLINK TD:hover A, TD.ACTIVE:hover A {
    text-decoration: underline;
}

A:hover IMG, TABLE.IMGLINK TD:hover A IMG {
    border-color: blue;
}

TD.ACTIVE:hover A {
    text-decoration: underline;
}

TD.ACTIVE:hover A IMG, TD.ACTIVE A:hover IMG {
    /* use TD.ACTIVE background colour rather than usual IMG border
       because it looks more consistent */
    border-color: cyan;
}

TD.ACTIVE:hover {
    background-color: cyan;
}

/**********************************************************************
 * TABLE.LOGO defines the container for the logo and buttons displayed
 * at the top of each page (both std-header.html and do-gallery.pl).
 **********************************************************************/

TABLE.LOGO {
    width: 100%;
}

TABLE.LOGO TR {
    vertical-align: middle;
}

TABLE.LOGO TD {
    text-align: center;
}

TABLE.LOGO TD.LEFT, TABLE.LOGO TD.RIGHT {
    width: 200px;
}

TABLE.LOGO TD.CENTER {
}

    /* this affects the link buttons in the standard header - see std_header.shtml */
TABLE.LOGO TD.LEFT FORM, TABLE.LOGO TD.RIGHT FORM {
    margin: 5pt 0;
}

TABLE.LOGO BUTTON {
    vertical-align: middle;
    background-color: #B8C6CF;
    padding: 2px 10px;
}

TABLE.LOGO BUTTON:hover {
    border-color: black;
}

/**********************************************************************
 * DIV#link_buttons defines the common navigation buttons in std_header.shtml.
 **********************************************************************/

#link_buttons {
    width: 980px; /* 7 images each 120px wide with 10px padding each side */
    margin: 0 auto;
    line-height: 1.2;
    }

#link_buttons A {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    font-size: 90%;
    }

#link_buttons A:hover {
    background-color: #A7B5BE;
    }

#link_buttons A IMG {
    display: block;
    border: none;
    margin: 0 auto;
    }

/**********************************************************************
 * DIV.FANCY is used to surround the main content of each static page,
 * and directory listings in do_gallery.pl pages.  It adds the
 * "Spirit Horse" background.
 * The first element inside DIV.FANCY needs to be given class FIRST
 * to get rid of the top margin, otherwise there's a nasty chunk of
 * whitespace.  I don't know how else to get rid of it!
 *
 * BODY.FANCY can be used in .info.html to see what the text will look
 * like on top of the logo image.
 **********************************************************************/

DIV.FANCY, BODY.FANCY {
    background-image: url(bg-logo.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    height: 543px; /* height of the bg-logo image */
    clear: both;
}

.FIRST {
    margin-top: 0px;
}

/**********************************************************************
 *           CLASSES FOR USE BY GALLERY CGI SCRIPTS
 **********************************************************************/

 
/**********************************************************************
 * #wrapper contains the header, content and footer DIVs
 * #sidebar floats over #wrapper
 **********************************************************************/

#sidebar {
	float: left; /* IE6 doesn't do fixed */
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;
	height: 100%;
	padding: 5px;
	}

#home_link {
	margin-bottom: 50px;
	}

#home_link A IMG {
	border-color: #A7B5BE;
	}

#home_link A:hover IMG {
	border-color: blue;
	}

#prevupnext { /* DIV#prevupnext contains the PREV, UP and NEXT buttons in the sidebar */
	width: 144px;
	margin: 0 auto;
	vertical-align: middle;
	}

#prevupnext div {
	float: left;
	}

#prevupnext input {
	width: 48px;
	height: 2em;
	}

#link_up {
	}

#link_prev {
	}

#link_next {
	}

#sidebar_menu {
	font-size: 95%;
	width: 144px;
	margin: 0 auto;
	}

#sidebar #running_total {
	margin-top: 10px; /* space between us and sidebar_menu above */
	margin-bottom: 10px; /* space between us and whatever is below */
	}

#sidebar_menu input {
	font-size: 100%;
	width: 100%;
	height: 2em;
	}

#sidebar_menu ul {
	width: 150px;
	}

#sidebar_menu li.sidebar_level_0 { /* override DDM settings for buttons */
	padding: 0;
	margin: 0;
	border: 0;
	background-color: #A7B5BE;
	background-image: none;
	}

#special_offers {
	background-color: #ffff66;
	border: solid black 1px;
	margin: 10px 0;
	padding: 5px 0;
	}

#special_offers P {
	margin: 5px;
	}

#special_offers P.standout {
	font-weight: bold;
	}

#side_notes {
	border: solid black 1px;
	font-size: 75%;
	}

#side_notes P {
	margin: 5px;
	}

#wrapper {
	margin-left: 210px; /* = #sidebar width + padding */
	}

#wrapper DIV.CONTENT {
	padding: 5px;
	}

#headrow {
	}

#bodyrow {
	}

#footrow {
	}

#header {
	}

#content {
	}

#footer {
	}

DIV.BANNER {
	vertical-align: middle;
	border: solid black 1px;
	background-color: cyan;
	padding: 5px;
	font-weight: bold;
	}

BODY.ALBUMS DIV.BANNER {
	background-color: #ffff66;
	}

SPAN.BANNER_TEXT {
	font-size: 120%;
	}

#content {
	}

/**********************************************************************
 * Tweak the button used to submit the drop-down menus in the navigation
 * bar that are used when the browser doesn't support JavaScript.
 **********************************************************************/

BUTTON.RET_MSIE6 {
    padding: 1px 3px 0px 2px;
    height: 3ex;
    position: relative;
    top: 1px;
}

BUTTON.RET_MSIE7 {
    padding: 0px 2px;
    height: 3ex;
    position: relative;
    top: 1px;
}

BUTTON.RET_Firefox2 {
    padding: 1px 2px 2px 2px;
    height: 3.3ex;
    position: relative;
    top: -1px;
}

/**********************************************************************
 * DIV.PLAIN is used on do_gallery.pl pages to surround content on
 * pages that don't use DIV.FANCY.
 * The first element should have class FIRST to remove the top margin.
 **********************************************************************/

DIV.PLAIN {
}

/**********************************************************************
 * PRE.INFO is used on do_gallery.pl pages to surround the optional
 * text content from .info.txt.
 *
 * DIV.INFO does the same thing for .info.hmtl.  The first element of
 * this should have CLASS="FIRST" to remove the top margin.
 *
 * NB these elements also pick up the attributes defined in .INFO in
 * jayphotos.css.
 **********************************************************************/

PRE.INFO {
    margin: 0 auto 5px auto; /* top, right, bottom, left - auto allows element to float to centre */

    font-family: "Maiandra GD", Verdana, Geneva, Arial, Helvetica, Swiss, sans-serif;
    font-size: 100%;
  
    /* I want to turn on word-wrap in the PRE element.  The standard CSS property setting
     * for this is "white-space: pre-wrap".  Unfortunately neither Firefox 2.0 nor IE6/7
     * support this value.  Fortunately they do both support proprietary values, so
     * if I put them here then it works for both browsers.  Hacky, but it works!
     * These settings are used by Gmail.
     * See http://archivist.incutio.com/viewlist/css-discuss/71386
     */
     
    white-space:pre-wrap;	/* CSS standard value */
    white-space:-moz-pre-wrap;	/* setting for Firefox */
    white-space:-o-pre-wrap;	/* setting for IE6/7 */
    word-wrap: break-word;	/* IE needs this too */
    white-space:-pre-wrap;	/* dunno, but this was in the web article too! */
}

DIV.INFO {
}

/**********************************************************************
 * TABLE.DIR is used to surround the directory list content.  I had to
 * use a table for layout because I can't get a UL element to centre
 * nicely (Internet Explorer doesn't support the display:table CSS
 * property value).
 *
 * I wonder if a DIV with margins:auto would work as well?
 **********************************************************************/

TABLE.DIR {
}

TABLE.DIR TD {
    text-align: left;
}

TABLE.DIR UL {
    /* NB: Firefox uses padding to set spacing for bullet character, IE uses margin-left */
    margin: 0 0 1em 1em;
    padding: 0;
}

/**********************************************************************
 * DIV#thumbnails defines the thumbnail grid.
 **********************************************************************/

DIV#thumbnails {
    text-align: left;
    }

DIV#thumbnails DIV.THUMB {
    float: left;
    position: relative;
    width: 180px;
    height: 200px;
    margin: 2px;
    }

DIV#thumbnails DIV#pad_thumbs {
    clear: both; /* appears after last thumbnail to force size of container */
    }

DIV#thumbnails DIV.ORDERED {
    background-color: cyan;
    }

DIV#thumbnails DIV.BOTTOM {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    font-size: 75%;
    text-align: center;
    }

DIV#thumbnails A {
    display: inline-block;
    }

DIV#thumbnails DIV.hover,
DIV#thumbnails DIV:hover {
    background-color: #A7B5BE;
    }

DIV#thumbnails IMG {
    display: block;
    margin: 0 auto 2px;
    border: none;
    }

/**********************************************************************
 * IMG.PIC defines the layout for individual pics.
 * IMG.NOSAVE adds padding if there's no "how to save" text above.
 **********************************************************************/

IMG.PIC {
    display: inline-block;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    padding: 2px;
}

IMG.NOSAVE {
    margin-top: 20px;
}

/**********************************************************************
 * DIV.COMMENTS defines the comments area below the main page contents.
 **********************************************************************/

DIV.COMMENTS {
}

DIV.COMMENTS TABLE {
    border: solid black 1px;
}

DIV.COMMENTS TD {
    padding: 0 5px;
    text-align: center;
}

DIV.COMMENTS P {
    margin-top: 0;
    margin-bottom: 0;
}

DIV.COMMENTS P.MESSAGE { /* like H4 */
    font-size: 110%;
    font-weight: bold;
    color: red;
    text-decoration: underline;
    margin: 1ex auto;
}

/**********************************************************************
 * TABLE#picorder defines the table for the orderable items.
 **********************************************************************/

TABLE#picorder {
    margin: 8px auto;
}

TABLE#picorder TH, TABLE#picorder TD {
    border-style: solid;
    border-color: black;
    border-width: 1px 2px;
    padding: 2px 4px;
}

TABLE#picorder TH {
    border-top-width: 2px;
    border-bottom-width: 2px;
    background: cyan;
}

TABLE#picorder TD.ITEM {
    border-right: none;
    text-align: center;
    padding-right: 2px;
}

TABLE#picorder TD.NUMBER {
    border-left: none;
    text-align: left;
    padding-left: 2px;
}

TABLE#picorder TD.LAST {
    border-bottom-width: 2px;
}

TABLE#picorder TD.EMPTY {
    border-width: 2px;
    /* border: none; */
}

TABLE#picorder TD P.NAME {
    margin: 0;
}

TABLE#picorder TD P.COMMENT {
    font-size: 75%;
    margin: 0;
}

P.PICORDER {
    margin: 8px auto 0 auto;
}

TABLE.ALBUM_LIST {
    margin: 8px auto;
}

TABLE.ALBUM_LIST UL {
    margin: 0;
}

DIV.CREATE_ALBUM {
    margin: 8px auto;
}

DIV.ALBUM_BUTTON {
}

P.ALBUM_ORIGINAL {
    font-size: 80%;
    margin: 3px auto 0 auto;
}

/**********************************************************************
 * TABLE#order defines the layout for the Order Summary page.
 **********************************************************************/

TABLE#order {
}

TABLE#order TD {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    text-align: center;
    vertical-align: middle;
    padding-right: 5px;
    padding-left: 5px;
}

TABLE#order TH {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    text-align: center;
    vertical-align: middle;
    padding-right: 5px;
    padding-left: 5px;
}

TABLE#order TD.HEADING {
    vertical-align: top;
    padding:0;
}

TABLE#order TD.REMOVE {
}

TABLE#order TD.PICTURE {
    padding:0;
}

TABLE#order TD.REF {
}

TABLE#order TD.ITEM {
    text-align: left;
}

TABLE#order TD.NUMBER {
    padding:0;
}

TABLE#order TD.UNITCOST {
}

TABLE#order TD.TOTALCOST {
}

TABLE#order TD.SUMMARY {
    background-color: cyan;
    font-weight: bold;
}

TABLE#order TD.SUBTOTAL {
    background-color: cyan;
    font-weight: bold;
}

TABLE#order TD.DISCOUNTS {
    color: red;
}

TABLE#order TD.TOTALDISCOUNT {
    background-color: cyan;
    font-weight: bold;
    color: red;
}

TABLE#order TD.POSTAGE {
    /* font-weight: bold; */
}

TABLE#order TD.TOTAL {
    background-color: cyan;
    font-weight: bold;
}

/**********************************************************************
 * TABLE#prices defines the outer table for the price table at the top
 * of the Order Summary page.
 **********************************************************************/

TABLE#prices {
    margin: 0 auto;
}

TABLE#prices TD, TABLE#prices TH {
    border-style: solid;
    border-color: black;
    border-width: 2px;
    padding-left: 5px;
    padding-right: 5px;
}

TABLE#prices TH {
    background-color: cyan;
}

TABLE#prices TD.ITEM {
    border-width: 1px 1px 1px 2px;
    text-align: center;
    vertical-align: middle;
}

TABLE#prices TD.ITEM P.NAME {
    margin: 0;
    white-space: nowrap;
}

TABLE#prices TD.ITEM P.COMMENT {
    font-size: 75%;
    margin: 0;
}

TABLE#prices TD.RANGE {
    border-width: 1px;
    white-space: nowrap;
}

TABLE#prices TD.COST {
    border-width: 1px 2px 1px 1px;
    text-align: right;
}

TABLE#prices TD.LAST {
    border-bottom-width: 2px;
}

TABLE#prices TD.EMPTY {
    /*
    border-width: 1px;
    border-color: #B8C6CF;
    */
    /* border: none; - doesn't work on IE when overlaps row with rowspan cell */
}

/**********************************************************************
 * TABLE.CONTACT defines the table used to display the email fields
 * for sending a message about the website to admin or a friend.
 **********************************************************************/

TABLE.CONTACT {
}

TABLE.CONTACT TH, TABLE.CONTACT TD {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    text-align: left;
    vertical-align: top;
    padding: 1px;
}

TABLE.CONTACT TH {
    padding-left: 5px;
    padding-right: 5px;
}

TABLE.CONTACT TD {
}

TABLE.CONTACT TEXTAREA {
    overflow-y: scroll; /* scrollbars always on */
    overflow-x: hidden;
}

/**********************************************************************
 * FORM.INLINE makes a form display as an inline element (rather than
 * block-level) so there's no line break before and after.
 *
 * Later versions of CGI.pm put a DIV at the end of the FORM to hold
 * the sticky params, so make this inline too.
 **********************************************************************/

FORM.INLINE, FORM.INLINE DIV {
    display: inline;
    white-space: nowrap;
    /*vertical-align: middle;*/
}

/**********************************************************************
 * DIV#order_form_buttons contains the buttons following the order form.
 * DIV.ORDER_FORM_BUTTON contains each individual button.
 * Note that the "Continue Shopping" button is outside #order_form_buttons
 * but does have class=ORDER_FORM_BUTTON.
 **********************************************************************/

#order_form_buttons {
    margin-top: 20px;
    }

DIV.ORDER_FORM_BUTTON {
    margin: 5px auto;
    }

DIV.ORDER_FORM_BUTTON INPUT { /* submit buttons */
    width: 12em;
    }

/**********************************************************************
 * DIV.ORDER_HELP is used for the help message on the order summary page.
 **********************************************************************/

DIV.ORDER_HELP {
    width: 80%;
    margin: 15px auto 0; /* #order_form_buttons margin-top - DIV.ORDER_FORM_BUTTON margin */
}

DIV.ORDER_HELP P {
    margin: 0 auto 5px;
}

DIV.ORDER_HELP P.CALLOUT {
    font-size: 120%;
    font-weight: bold;
}

/**********************************************************************
 * TABLE.LOGIN defines the layout for the My Pictures login page.
 **********************************************************************/

TABLE.LOGIN {
}

TABLE.LOGIN TH {
    text-align: right;
    padding-right: 4px;
}

TABLE.LOGIN TD.BUTTON {
    text-align: center;
    padding-top: 10px;
}

TABLE.LOGIN TD.SEPARATOR {
    text-align: center;
    padding-top: 1.5ex;
}

DIV.SEPARATOR { /* better than HR? */
    margin: 2ex auto;
    width: 30em;
    height: 0;
    border-top: groove 2px black;
}

/* END */