/*
layout.css
Copyright Tracy Piper (c) 2009, All Rights Reserved.
2009-03-01

Notes

1.  be careful using <h> blocks inside divs as they render the div in a
    different place than you might think!
*/

/* ============================================================================
** overall settings
*/

html, body {
	margin: 0;
	padding: 0;
    min-height: 100%;
    margin-bottom: 1px;
}

body { 
	font: 100%;
	font-family: verdana, arial;
	font-size: 14px;
	line-height: 1;
	color: #000000; 
	margin-top: 10px;
}

p {
	margin-top: 0; 
}

img {
    border-style: none;
}

/* ============================================================================
** this section defines the appearance of the panel sets that make up the base
** of the site.
*/

/* the canvas that represents the working area of this site */
#pnlContentCanvas {
    height: 100%;
    width: 100%;
    text-align: center;
}

#pnlBase {
    width: 960px;
    text-align: center;
/*    position: relative; top: 10px; */
    margin-left: auto;
    margin-right: auto;
}

#pnlHeader {
    /* the real height is 175px */
    height: 150px;
    text-align: center;
}

#pnlMenu {
    height: 33px;
    text-align: center;
    color: #404040;
    font-family: verdana, arial;
    font-size: 12px;
}

/* this is the panel that contains the content of the other pages */
#pnlContent {
    margin-left: 30px;
    margin-right: 30px;
    text-align: left;
}

/* this is the page header that has the page name and basket link on it */
#pnlPageTop {
    height: 30px;
    text-align: left;
    font-family: verdana, arial;
    font-size: 18px;
    left: 0px;
    right: 0px;
    top: 0px;
    margin-bottom: 10px;
}

/* this is where the page name appears in the pnlPageTop header */
#pageName {
    color: #404040;
    font-family: verdana, arial;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    position: relative;
    top: -23px;
    padding-left: 5px;
}

/* this is where the basket image appears in the header */
#basketImage {
    font-family: verdana, arial;
    font-size: 14px;
    width: 72px;
    position: relative; top: -150px; 
}

/* the basket link at the top of the shop page */
.basketLink {
    position: relative; top: -170px; 
    color: #151697;
    font-family: verdana, arial;
    font-size: 14px;
}

/* this is the basket panel that contains the basket link */
#pnlBasket {
    color: #B67637;
    font-family: verdana, arial;
    font-size: 14px;
    position: absolute;
    right: 0px;
    top: 155px;
    width: 160px;
}

/* this is the block that appears on the page before the main content */
#pnlPageDescription {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

.pnlCookieNotice {
/*    position: relative; top: -10px; */
	line-height: 1.2;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 40px;
	margin-right: 40px;
	padding: 10px 10px 10px 10px;
    color: #990022;
    font-weight: bold;
    border-color: Red;
    border-style: dashed;
    position: relative;
    top: -20px;
}

/* this is where the paypal logo stuff is and the copyright details, etc */
#pnlBottom {
    padding-top: 10px;
    height: auto;
}

.copyright {
    color: #B67637;
    font-size: 11px;
    height: 20px;
    padding-bottom: 5px;
}

/* ============================================================================
** this section defines the appearance of the menu and separators used to 
** separate the menu options
*/

*.menu {
    color: #404040;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
}

/*
a:link, a:visited {
    color: #19C6FF;
    font-family: verdana, arial;
    font-size: 18px;
}

a:hover {
    color: #FFFFFF;
    font-family: verdana, arial;
    font-size: 18px;
}

a:active {
    color: #004060;
    font-family: verdana, arial;
    font-size: 18px;
}
*/

/* ============================================================================
** this section defines general site-wide formatting items
** 
*/

/* appearance of all list separators */
.listSeparator {
    color: #E0E0E0;
}

/* appearance of all general page layout separators */
.layoutSeparator {
    color: #E0E0E0;
    height: 2px;
    margin: 0;
    padding: 0;
}

/* appearance of the page name on the top left of the page */
h1 {
    color: #606060;
    font-family: verdana, arial;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 5px;
}

h2 {
    color: #405090;
    font-family: verdana, arial;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 0;
}

h3 {
    color: #405090;
    font-family: verdana, arial;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
    padding: 0;
}

/* appearance of the list of delivery items on the terms page */
.deliveryList {
    list-style-type: disc;
    list-style-position: outside;
    width: auto;
}

/* appearance of the close button on the reviewitem page and terms page */
.closeButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* ============================================================================
** this section defines the appearance of the home page
*/

#pnlHomePageContent {
    color: #151697;
    font-family: verdana, arial;
    font-size: 14px;
    line-height: 1.2;
}

.HomePageTitle {
    font-weight: bold;
    font-size: 14px;
}

/* ============================================================================
** this section defines the appearance of the contact page
*/

#pnlContactPageContent {
    color: #151697;
    font-family: verdana, arial;
    font-size: 14px;
    line-height: 1.2;
}

.ContactPageTitle {
    font-weight: bold;
    font-size: 14px;
}

/* ============================================================================
** this section defines the appearance of the event list
*/

.eventCellLeftTop {
    vertical-align: text-top;
    text-align: left;
    width: 60%;
}

.eventCellLeftBottom {
    vertical-align: text-top;
    text-align: left;
}

.eventCellRight {
    vertical-align: text-top;
    text-align: left;
    padding-left: 20px;
}

.eventName {
    color: #151697;
    font-weight: bold;
    font-family: verdana, arial;
    font-size: 14px;
}

.eventDate {
    color: #804100;
    padding: 10px 0px 0px 0px;
    display: block;
    font-family: verdana, arial;
    font-size: 14px;
}

.eventAddress {
    color: #804100;
    padding: 10px 0px 0px 0px;
    display: block;
    font-family: verdana, arial;
    font-size: 14px;
    line-height: 1.2;
    white-space: pre;
}

.eventLinkURL {
    color: #804100;
    padding: 10px 0px 10px 0px;
    display: block;
    font-family: verdana, arial;
    font-size: 14px;
}

.eventNotes {
    color: #044000;
    padding: 10px 0px 0px 0px;
    line-height: 1.2;
    display: block;
    font-family: verdana, arial;
    font-size: 14px;
}

/* ============================================================================
** this section defines the appearance of the shop list and item review page
** 
*/

/* column 1: the left column of the item list */
.shopNameColumn {
    vertical-align: middle;
    text-align: right;
    width: 400px;
    padding: 0px 10px 0px 10px;
	line-height: 1.4;
}

/* column 2: the centre image column of the item list */
.shopImageColumn {
    vertical-align: middle;
    text-align: center;
/*    height: 260px; */
    width: 260px;
}

/* column 3: the right buying details column of the item list */
.shopBuyColumn {
    vertical-align: middle;
    text-align: left;
    width: 400px;
    padding: 0px 10px 0px 10px;
	line-height: 1.4;
}

/* appearance of the item number */
.itemID {
    color: #151697;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item category */
.itemCategory {
    color: #151697;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item name */
.itemName {
    color: #151697;
    font-weight: bold;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item image */
.itemImage {
    border-style: none;
}

/* appearance of the item description */
.itemDescription {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item price */
.itemPrice {
    color: #151697;
    font-weight: bold;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item sale price */
.itemSalePrice {
    color: #FF0000;
    font-weight: bold;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item availability message */
.itemAvailabilityStatus {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item-in-basket message */
.itemBasketStatus {
    color: #FF0000;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the item size description */
.itemSizeDescription {
    color: #804100;
    display: block;
    padding: 10px 0px 0px 0px;
    font-family: verdana, arial;
    font-size: 14px;
}

/* appearance of the buy button next to the item for sale */
.buyButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* appearance of the quantity field next to the item for sale 
** on the shop page and reviewbasket page */
.buyQuantity {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 3px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 14px;
    text-align: right;
}

/* appearance of the category name */
.categoryName {
    display: inline;
}

.hlCategoryName {
    color: #404040;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
    padding: 0px 5px 0px 5px;

}

/* ============================================================================
** this section defines the appearance of the following specific objects on the
** item review page
*/

/* appearance of the display panel on the item review page*/
.itemDisplayPanel {
    color: #E0E0E0;
    border-width: 3px;
    border-style: outset;
    margin-top: 15px;
    padding: 20px 5px 20px 5px;
}

/* appearance of the item name on the item review page*/
.itemNameReview {
    color: #151697;
    font-weight: bold;
    font-family: verdana, arial;
    font-size: 14px;
    text-align: center;
}

/* appearance of the item description on the bottom of the item review page*/
.itemDescriptionReview {
    color: #01738A;
    display: block;
    font-family: verdana, arial;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
}

/* appearance of the item size description on the bottom of the item review page*/
.itemSizeDescriptionReview {
    color: #01738A;
    font-family: verdana, arial;
    font-size: 14px;
    text-align: center;
}

/* appearance of the item image on the item review page*/
.itemImageReview {
     border-style: none;
}

/* ============================================================================
** this section defines the appearance of the following specific objects on the
** basket review page
*/

/* item number */
.reviewCell_01 {
    vertical-align: middle;
    text-align: left;
    width: 50px;
}

/* item name */
.reviewCell_02 {
    vertical-align: middle;
    text-align: left;
    width: auto;
}

/* item image */
.reviewCell_03 {
    vertical-align: middle;
    text-align: left;
    width: 0px;
}

/* item amount (sale amount) */
.reviewCell_04 {
    vertical-align: middle;
    text-align: right;
    width: 90px;
}

/* item reduction (basket discount voucher spread) */
.reviewCell_05 {
    vertical-align: middle;
    text-align: right;
    width: 90px;
}

/* item total */
.reviewCell_06 {
    vertical-align: middle;
    text-align: right;
    width: 90px;
}

/* quantity input */
.reviewCell_07 {
    vertical-align: middle;
    text-align: right;
    width: 120px;
}

/* line total */
.reviewCell_08 {
    vertical-align: middle;
    text-align: right;
    width: 90px;
}

/* line action */
.reviewCell_09 {
    vertical-align: middle;
    text-align: right;
    width: 100px;
}

.reviewItem {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

.totalToPay {
    color: #804100;
    font-family: verdana, arial;
	font-weight: bold; 
    font-size: 14px;
}

/* this is the block for delivery options */
.pnlDeliveryOptions {
}

/* formatting for the button to update the quantity of an item */
.updateButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* formatting for the button to remove an item */
.removeButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* formatting for the button return to the shop */
.continueShoppingButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    text-align: center;
    cursor: pointer;
}

/* formatting for the title checkout steps */
.checkoutStepsTitle {
    display: block;
	color: #01738A;
	font-weight: bold; 
    font-family: verdana, arial;
	font-size: 14px;
    padding: 15px 0px 15px 0px;
}
    
/* formatting for the voucher input field */
.basketVoucher {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 3px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 14px;
    text-align: left;
}

/* formatting for the button to apply the voucher */
.voucherButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

.voucherDetails {
/*    position: relative; top: -10px; */
    color: #990022;
    font-weight: bold;
}

/* formatting for the email input fields */
.basketEmail {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 3px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 14px;
    text-align: left;
}

/* formatting for the button to update the email address */
.emailButton {
	background-color: #FFFFFF;
	color: #01738A;
	border: solid 2px #01738A;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* the status line when emails have been input */
.emailStatus {
    color: #990022;
    font-weight: bold;
    position: relative; top: 5px;
}

/* formatting for the button to start the checkout process */
.makePaymentButton {
    cursor: pointer;
}

/* this is the block that governs steps 1 - 4 */
.pnlShowBuyingOptions {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

/* this is the block that appears on buying step 1 */
.pnlVoucherOptions {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

/* this is the block that appears on buying step 2 */
.pnlTermsOptions {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

/* this is the block that appears on buying step 3 */
.pnlEmail {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

/* this is the block that appears on buying step 4 */
.pnlPaymentOptions {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    position: relative; top: -10px;
	line-height: 1.2;
	margin-bottom: 0px;
}

/* ============================================================================
** this section defines the appearance of the layout of the invoice page
*/

.invoiceHeaderLabel {
    color: #804100;
    background-color: #F0F0F0;
    font-family: verdana, arial;
    font-size: 14px;
    height: 30px;
    width: 150px;
}

.invoiceHeaderValue {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

.invoiceHeaderAddress {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
    white-space: pre;
    line-height: 1.2;
}

.invoiceComment {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

/* ============================================================================
** this section defines the appearance of the set of page navigation controls
** at the base of a list page
*/

/* this is the block the contains the navigation controls */
.pageNavBlock {
    text-align: center;
    vertical-align: middle;
    color: #404040;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
}

/* appearance of labels in the navigation controls */
.pageNavLabel {
    color: #404040;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
}

/* appearance of lists (drop-down controls) in the navigation controls */
.pageNavList {
	background-color: #FFFFFF;
	color: #404040;
	border: solid 2px #404040;
	font-weight: normal; 
	font-size: 14px;
    font-family: verdana, arial;
}

.pageNavLabelDisabled {
    color: #B0B0B0;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
    cursor: default;
}

.pageNavOption {
    color: #404040;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
    padding: 0px 5px 0px 5px;
}

.pageNavOptionDisabled {
    color: #B0B0B0;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
    cursor: default;
    padding: 0px 5px 0px 5px;
}

.pageNavOptionSelected {
    color: #FFFFFF;
    font-family: verdana, arial;
    font-size: 14px;
    text-decoration: none;
    padding: 0px 5px 0px 5px;
    border: solid 2px #000000;
    background-color: #404040;
}

/* ============================================================================
** this section defines the appearance of the authenticated pages
*/

#pnlMasterLogin {
    background-color: #FFFFFF;
    border: dashed 2px #B67637;
    color: #990022;
    padding: 10px 0 10px 0;
    margin-top: 10px;
    margin-bottom: 20px;
}

#pnlLoginTable {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

#loginTable {
    width: 500px;
    font: bold;
    background-color: #9F9FFF;
    font-family: verdana, arial;
    font-size: 14px;
    color: #3F3FFF;    
}

.loginTableNameCell {
    width: 100px;
    height: 25px;
    text-align: left;
    background-color: #CFCFFF;
    font-family: verdana, arial;
    font-size: 14px;    
}

.loginTableValueCell {
    text-align: left;
    font: bold;
    background-color: #FFFFFF;
    font-family: verdana, arial;
    font-size: 14px;
}

.loginNameInputBox {
	background-color: #FFFFFF;
	width: 200px;
	color: #3F3FFF;
	border: solid 2px #9F9FFF;
	padding: 3px;
	font-size: 14px;
    font-family: verdana, arial;
    height: 16px;
    text-align: left;
}

.passwordInputBox {
	background-color: #FFFFFF;
	width: 200px;
	color: #3F3FFF;
	border: solid 2px #9F9FFF;
	padding: 3px;
	font-size: 14px;
    font-family: verdana, arial;
    height: 16px;
    text-align: left;
}

.loginTableButtonCell {
    text-align: center;
    background-color: #FFFFFF;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* formatting for the buttons on the bottom of the login page */
.loginPageButton {
	background-color: #FFFFFF;
	color: #3F3FFF;
	border: solid 2px #9F9FFF;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* ============================================================================
** this section defines the appearance of the details on the orders to send page
*/

/* date received */
.reviewOrderCell_01 {
    vertical-align: middle;
    text-align: left;
    width: 180px;
}

/* invoice number */
.reviewOrderCell_02 {
    vertical-align: middle;
    text-align: left;
    width: 320px;
}

/* Name */
.reviewOrderCell_03 {
    vertical-align: middle;
    text-align: left;
    width: auto;
}

/* delivery type */
.reviewOrderCell_04 {
    vertical-align: middle;
    text-align: left;
    width: 100px;
}

/* delivery status */
.reviewOrderCell_05 {
    vertical-align: middle;
    text-align: left;
    width: 140px;
}

.reviewOrder {
    color: #804100;
    font-family: verdana, arial;
    font-size: 14px;
}

/* ============================================================================
** this section defines the appearance of general input tables for the admin
** authenticated pages
*/

.adminInputTable {
    width: 100%;
    background-color: #9F9FFF;
    font-family: verdana, arial;
    font-size: 14px;
    color: #000000;
}

.adminTableHeader {
    display: block;
    width: 100%;
    height: 25px;
    text-align: left;
    font-family: verdana, arial;
    font-size: 14px;    
    color: #D00000;
}

.adminTableLabel {
    width: 250px;
    height: 30px;
    text-align: left;
    background-color: #F0F0F0;
    font-family: verdana, arial;
    font-size: 14px;    
    color: #804100;
}

.adminTableValue {
    width: auto;
    text-align: left;
    background-color: #FFFFFF;
    font-family: verdana, arial;
    font-size: 14px;
    color: #804100;
    height: 30px;
}

.adminTableLink {
    width: 80px;
    text-align: left;
    background-color: #FFFFFF;
    font-family: verdana, arial;
    font-size: 14px;
    color: #3F3FFF;
}

.adminSingleInputBox {
	background-color: #FFFFFF;
	width: 200px;
	color: #3F3FFF;
	border: solid 1px #9F9FFF;
	padding: 3px;
	font-size: 14px;
    font-family: verdana, arial;
    height: 16px;
    text-align: left;
}

.adminMultilineInputBox {
	background-color: #FFFFFF;
	width: 625px;
	color: #3F3FFF;
	border: solid 1px #9F9FFF;
	padding: 3px;
	font-size: 14px;
    font-family: verdana, arial;
    height: 100px;
    text-align: left;
}

.adminTableButton {
	background-color: #FFFFFF;
	color: #3F3FFF;
	border: solid 2px #9F9FFF;
	padding: 1px;
	font-weight: normal; 
	font-size: 12px;
    font-family: verdana, arial;
    height: 24px;
    cursor: pointer;
}

/* the status line when details have been saved to the database */
.databaseUpdateStatus {
    color: #990022;
    font-weight: bold;
    position: relative; top: -2px;
}