/* 
 * Book Chain default.css version 1.0
 * 
 * Copyright (c) 2008 David Green
 */

/* -------------------------- Banner -------------------------- */

body {
	padding: 0;
	margin: 0;
		/* min width on everything except ie is 975 */
	min-width: 975px;
}

#banner {
	background: #a9a9a9;
	background-image: url('../images/top-line.gif');
	background-repeat: repeat-x;
	width: 100%;
	height: 90px;
}

#logo {
	width: 258px;
	height: 84px;
	margin-left: 40px;
}

#logo img {
	border:0px;
}

#banner #links {
	float: right;
	color: #737373;
	font-family: Arial;
	font-size: 9pt;
	width: 500px;
}

/* -------------------------- TOP LINKS -------------------------- */

#banner #links #top ul {
	float: right;
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
}

#banner #links #top li {
	float: left;
	margin: 0 0.15em;
	border-left: 1px solid #737373;
	padding-left: 6px;
	padding-right: 6px;
}

#banner #links #top li.first {
	border-left: 0;
}

#banner #links #top a {
	color: #737373;
	text-decoration: none;
}

#banner #links #top a:hover{
	color:#A20900;
}

/* -------------------------- TABS -------------------------- */

#banner #links #tabs {
	background-image: url('../images/banner-gradient.png');
	background-repeat: repeat-y;
	background-position: top left;
	margin-top: 54px;
	height: 36px;
	width: 500px;
}

#banner #links #tabs ul {
	float: right;
	list-style: none;
	padding: 0;
	margin: 0;
}

#banner #links #tabs li {
	float: left;
	margin: 0;
	text-align: center;
	vertical-align: absmiddle;
	background-image: url('../images/tabs/tab-middle.png');
	background-repeat: no-repeat;
	width: 100px;
	height: 30px;
	padding-top: 6px;
}

#banner #links #tabs li.first {
	background-image: url('../images/tabs/tab-left.png');
	background-repeat: no-repeat;
	width: 98px;
	height: 30px;
}

#banner #links #tabs li.last {
	background-image: url('../images/tabs/tab-right.png');
	background-repeat: no-repeat;
	width: 88px;
	height: 30px;
}

#banner #links #tabs a {
	color: #606060;
	text-decoration: none;
	font-weight: bold;
}

#banner #links #tabs a:hover{
	color:#A20900;
}

/* -------------------------- Search Banner -------------------------- */

#search-banner {
	background-color: #333333;
	width: 100%;
	height: 40px;
}
/* -- Everything except IE7 parses this -- */
*+ #search-banner {
	margin: 0px 0px 14px 0px;
}

#search-form {
	float: right;
}

#search-banner input#query {
	border: 1px solid;
	width: 400px;
	height: 30px;
	color: #797979;
	font-family: Arial;
	font-size: 12pt;
	font-weight: normal;
	vertical-align: middle;
	margin: 4px 0 0 0;
	padding: 4px 0 0 0;
}

/* -- Everything except IE7 parses this -- */
#search-banner input#query {
	margin: 5px 0 0 0;
}

#search-banner input#search-button {
	margin: 5px 4px 0 0;
	border: 0;
	vertical-align: top;	
}

/* -- Everything except IE7 parses this -- */
*+ #search-banner input#search-button {
	margin: 4px 4px 0 0;
}

/* -------------------------- Left Panel -------------------------- */

* html .grey-sidebox .boxhead h2 {height: 1%;} /* For IE 5 PC */

.grey-sidebox {
	background: url('../images/panels/grey-bottom-right.gif') no-repeat bottom right;
	font-size: 100%;
	margin: 0px 10px 10px 10px;
	width: 220px;
}
.grey-sidebox .boxhead {
	background: url('../images/panels/grey-top-right.gif') no-repeat top right;
	margin: 0;
	padding: 0;
}
.grey-sidebox .boxhead h2 {
	background: url('../images/panels/grey-top-left.gif') no-repeat top left;
	margin: 0;
	padding: 5px 0px 5px 25px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	font-family: Tahoma;
	font-size: 10pt;
	font-weight: bold;
}
.grey-sidebox .boxbody {
	background: url('../images/panels/grey-bottom-left.gif') no-repeat bottom left;
	margin: 0;
	padding: 6px 6px 12px 6px;
	font-family: Arial;
	font-size: 9pt;
	color: #606060;
}

.grey-sidebox .boxbody p {
	margin: 12px 0px 12px 0px;
}

/* -------------------------- Right Panel -------------------------- */

* html .red-sidebox .boxhead h2 {height: 1%;} /* For IE 5 PC */

.red-sidebox {
	background: url('../images/panels/red-bottom-right.gif') no-repeat bottom right;
	font-size: 100%;
	margin: 0px 10px 10px 10px;
	width: 240px;
}
.red-sidebox .boxhead {
	background: url('../images/panels/red-top-right.gif') no-repeat top right;
	margin: 0;
	padding: 0;
}
.red-sidebox .boxhead h2 {
	background: url('../images/panels/red-top-left.gif') no-repeat top left;
	margin: 0;
	padding: 5px 0px 5px 25px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	font-family: Tahoma;
	font-size: 10pt;
	font-weight: bold;
}
.red-sidebox .boxbody {
	background: url('../images/panels/red-bottom-left.gif') no-repeat bottom left;
	margin: 0;
	padding: 6px 6px 12px 6px;
	font-family: Arial;
	font-size: 9pt;
	color: #606060;
}

.red-sidebox .boxbody a {
	color: #A20900;
}

.red-sidebox .boxbody a:hover {
	color: #da0c00;
}

/* -------------------------- White Box -------------------------- */

* html .white-box .boxhead h2 {height: 1%;} /* For IE 5 PC */

.white-box {
}
.white-box .boxhead {
	margin: 0;
	padding: 0;
}
.white-box .boxhead h2 {
	background: url('../images/panels/white-top-left.gif') no-repeat top left;
	padding: 5px 0px 5px 30px;
	margin: 0;
	color: #A20900; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	font-family: Tahoma;
	font-size: 11pt;
	font-weight: bold;
}
.white-box .boxbody {
	margin: 0;
	padding: 0px 0px 0px 7px;
	font-family: Arial;
	font-size: 10pt;
	color: #606060;
}

.white-box .boxbody a {
	color: #A20900;
}

.white-box .boxbody a:hover {
	color: #da0c00;
}


/* -------------------------- Whitebox forms -------------------------- */

.white-box .boxbody table.form {
	padding-top: 12px;
}

.white-box .boxbody table.form td {
	font-family: Arial;
	font-size: 12pt;
	color: #606060;
}

.white-box .boxbody table.form td.label {
	font-family: Arial;
	font-size: 12pt;
	color: #606060;
	width: 200px;
}

/* This is the same as below, but for dojo input boxes */
.white-box .boxbody div.default {
	font-family: Arial;
	font-size: 12pt;
	color: #606060;
	width: 300px;
	height: 30px;
	font-weight: normal;
	vertical-align: middle;
	margin: 4px 0px 0px 0px;
	padding: 4px 0px 0px 6px;
	border:			1px solid #BFBFBF;
}

/* This is used for non-dojo input boxes */
.white-box .boxbody input.default {
	font-family: Arial;
	font-size: 12pt;
	color: #606060;
	width: 300px;
	height: 30px;
	font-weight: normal;
	vertical-align: middle;
	margin: 4px 0px 0px 0px;
	padding: 4px 0px 0px 6px;
	border:			1px solid #BFBFBF;
}

.white-box .boxbody input.error {
	font-family: Arial;
	font-size: 12pt;
	color: #606060;
	width: 300px;
	height: 30px;
	font-weight: normal;
	vertical-align: middle;
	margin: 4px 0 0 0;
	padding: 4px 0 0 0;
	border:			1px solid #BFBFBF;
	background:	#FEC6C6;
}

/* -------------------------- Yellow (centre) Panel -------------------------- */

* html .yellow-box .boxhead h2 {height: 1%;} /* For IE 5 PC */

.yellow-box {
	background: url('../images/panels/yellow-bottom-right.gif') no-repeat bottom right;
	font-size: 100%;
	margin: 0px 10px 10px 10px;
	xwidth: 220px;
}
.yellow-box .boxhead {
	background: url('../images/panels/yellow-top-right.gif') no-repeat top right;
	margin: 0;
	padding: 0;
}
.yellow-box .boxhead h2 {
	background: url('../images/panels/yellow-top-left.gif') no-repeat top left;
	margin: 0;
	padding: 5px 0px 5px 25px;
	color: #A20900; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	font-family: Tahoma;
	font-size: 11pt;
	font-weight: bold;
}
.yellow-box .boxbody {
	background: url('../images/panels/yellow-bottom-left.gif') no-repeat bottom left;
	margin: 0;
	padding: 6px 6px 12px 6px;
	font-family: Arial;
	font-size: 9pt;
	color: #606060;
}

.yellow-box .boxbody a {
	color: #A20900;
}

.yellow-box .boxbody a:hover {
	color: #da0c00;
}

/* -------------------------- Columns -------------------------- */

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
	float:left;
    width:100%;		/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
}

/* 3 column settings */
.columns {
	xbackground:#ff9;    	/* Right column background colour */
	margin-top: 8px;
	max-width: 1100px;	/* Columns no wider than 1100px, line below is same for IE only - also controls min width */
		/* min width is 1000 on ie, 975 everywhere else */
	width:expression(document.body.clientWidth < 1000? "1000px" : document.body.clientWidth > 1100? "1100px" : document.body.clientWidth);
}
/* -- Everything except IE7 parses this -- */
*+ .columns {
	margin-top: 0px;	
}

.columns .colmid {
	float:left;
        width:200%;
        margin-left:-280px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
}
.columns .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:520px;         	/* Left column width + right column width */
        xbackground:#FFD8B7;    	/* Left column background colour */
}
.columns .col1wrap {
        float:left;
	width:50%;
	position:relative;
	right:270px;        	/* Width of left column */
	padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.columns .col1 {
        margin:0 265px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	left:200%;
	overflow:hidden;
}
.columns .col2 {
        float:left;
        float:right;		/* This overrides the float:left above */
        width:240px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:0px;         	/* Width of the left-hand side padding on the left column */
}
.columns .col3 {
        float:left;
        float:right;		/* This overrides the float:left above */
        width:270px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:20px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
}
/* -------------------------- Footer -------------------------- */
#footer {
	clear: both;
}

#footer #links {
	background: #ededed;
	font-family: Arial;
	font-size: 9pt;
	text-align: center;
	color: #737373;
	border-top: 1px solid #737373;
	padding: 4px 0px 4px 0px;
}

#footer #links a {
	color: #737373;
	text-decoration: none;
}

#footer #links a:hover{
	color:#A20900;
}

#footer #copyright {
	font-family: Arial;
	font-size: 8pt;
	text-align: center;
	color: #737373;
	padding-top: 8px;
}

/* -------------------------- General page elements -------------------------- */

.red-arrow {
	background: url('../images/red-arrow.gif');
	background-repeat: no-repeat;
	background-position: 0px 5px;
	margin: 6px 0px 6px 0px;
	padding: 0 0 0 12px;
	color: #606060;
}

.red-arrow .highlight {
	color: #A20900;
}

hr.red-hline {
	border: none;
	border-top: 1px dashed #A20900;
	height: 1px;
	margin-top: 6px;
	background: none;
	padding: 0;
}

hr.grey-hline {
	border: none;
	border-top: 1px dashed #737373;
	height: 1px;
	background: none;
	margin: 0;
	padding: 0;
}

a.red {
	color: #A20900;
}

a.red:hover {
	color: #da0c00;
}

.clear {
	clear: both;
}

.large-button {
	border: 0;
	margin: 4px 6px 4px 6px;
}

span.red {
	color: #A20900;
}

a.grey {
	color:#606060;
	text-decoration:none;
}

a.grey:hover {
	color: #A20900;
}

/* -------------------------- Tag Cloud -------------------------- */

.red-sidebox .boxbody a.tag {
	color: #606060;
	text-decoration: none;
}

.red-sidebox .boxbody a.tag:hover {
	color: #A20900;
}

/* -------------------------- Book elements -------------------------- */

.book {
	margin: 6px 0px 6px 0px;
	padding: 0px 0px 0px 0px;
}

.book table {
	height: 110px;
}

.book td.image {
	vertical-align: top;
	padding: 8px;
	background: #ededed;
}

.book td.image img {
	border: 0;
}

.book td.desc {
	font-family: Arial;
	font-size: 10pt;
	color: #606060;
	vertical-align: top;
	height: 100%;
	border-bottom: 1px solid #737373;
	padding: 0px 4px 4px 8px;
	width: 100%;
	height: 120px;
	background: #FFFFFF;
}

.book td.desc .title {
	margin: 0px 0 4px 0;
	font-family: Arial;
	font-size: 10pt;
	font-weight: bold;
	color: black;
	vertical-align: top;
}

.book td.desc .author {
	margin: 0px 0 4px 0;
	font-family: Arial;
	font-size: 10pt;
	font-weight: normal;
	color: black;
	vertical-align: top;
}

.book td.links {
	background: #ededed;
	font-family: Arial;
	font-size: 10pt;
	margin: 0px 0 0px 0;
	padding: 0px 0 0px 6px;
	height: 20px;
}

/* -------------------------- Book elements when displayed in side panel -------------------------- */

.side-book {
	margin: 6px 0px 6px 0px;
	padding: 0px 0px 0px 0px;
}

.side-book table {
	height: 110px;
}

.side-book td.image {
	vertical-align: top;
	padding: 8px;
	background: #fafafa;
}

.side-book td.image img {
	border: 0;
}

.side-book td.desc {
	font-family: Arial;
	font-size: 9pt;
	color: #606060;
	vertical-align: top;
	height: 100%;
	border-bottom: 1px solid #737373;
	padding: 0px 4px 4px 8px;
	width: 100%;
	height: 120px;
}

.side-book td.desc .title {
	margin: 0px 0 4px 0;
	font-family: Arial;
	font-size: 9pt;
	font-weight: bold;
	color: black;
	vertical-align: top;
}

.side-book td.links {
	background: #fafafa;
	font-family: Arial;
	font-size: 9pt;
	margin: 0px 0 0px 0;
	padding: 0px 0 0px 6px;
	height: 20px;
}

/* -------------------------- User page elements -------------------------- */
textarea.post-comment {
	width:  420;
	height:	100;
	font-family:		Arial;
	font-size:		11pt;
	color: #797979;
}
div.comment-header {
	background: #ededed;
	margin: 10px 0px 0px 0px;
	padding: 2px;
}
div.comment-body {
	padding: 2px;
}
div.comment-footer {
	margin: 0px 0px 0px 0px;
}
/* -------------------------- Transaction type elements -------------------------- */
table.transaction {
	background: #ECECEC;
	margin-top: 16px;
	width: 100%;
	width: expression("450px")	/* For IE7 use 450px width */;
}

td.transaction-title {
	background: #FFFFFF;
	color: #606060;
	font-size: 11pt;
}
td.transaction-comment {
	background: #ECECEC;
	color: #606060;
	font-size: 11pt;
}
td.transaction-amount {
	background: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	color: #606060;
	font-size: 11pt;
}
td.transaction-total {
	background: #FFFFFF;
	text-align: right;
	font-weight: bold;
	color: #606060;
	font-size: 11pt;
}
td.transaction-total-amount {
	background: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	color: #606060;
	font-size: 11pt;
}
td.transaction-action {
	text-align: right;
}
.checkout {
	margin-top: 4px;
	text-align: right;
	width: 100%;
	width: expression("450px");	/* For IE7 use fixed 450px width */
}
/* -------------------------- Tags (on book details page) -------------------------- */
.tags ul {
	list-style: none;
	padding: 0;
	margin: 4px 0 0 4px;
}

.tags ul li {
	float: left;
	margin: 0 0.15em;
	padding-left: 6px;
	padding-right: 6px;
}
/* -------------------------- Numbered blobs (on how it works page) -------------------------- */
.blob1 {
	background-image: url('../images/blob1.png');
	background-repeat: no-repeat;
	margin: 4px 0px 0px 0px;
	padding: 2px 0px 0px 32px;
	height: 32px;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
}
.blob2 {
	background-image: url('../images/blob2.png');
	background-repeat: no-repeat;
	margin: 8px 0px 0px 0px;
	padding: 2px 0px 0px 32px;
	height: 32px;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
}
.blob3 {
	background-image: url('../images/blob3.png');
	background-repeat: no-repeat;
	margin: 8px 0px 0px 0px;
	padding: 2px 0px 0px 32px;
	height: 32px;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
}
/* -------------------------- Q&A blobs (on FAQ page) -------------------------- */
.faq {

}

.faq .question {
	background-image: url('../images/blobq.png');
	background-repeat: no-repeat;
	margin: 8px 0px 4px 0px;
	padding: 6px 0px 0px 36px;
	height: 30px;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
}

.faq .question a {
	color: #606060;
}

.faq p {
	margin: 0px 0px 8px 0px;
	padding: 0;
}
/* -------------------------- Address Label -------------------------- */
.address-label {
	border: 1px dashed #BFBFBF;
	background: white;
	width:350;
	position: relative;
	left: 16;
}
/* -------------------------- Results page links -------------------------- */
td.results-previous {
	width: 100%;
	align: left;
}
td.results-next {
	width: 100%;
	align: right;
}

/* -------------------------- User page -------------------------- */
#yourAddress {
	width: 250px;
	heigth: 100px;
	font-family: Arial;
	font-size: 10pt;
	color: #606060;
	border: 0px;
	padding: 1px;
	margin: 1px;
}
#yourAddress .line {
	width: 250px;
	heigth: 20px;
	font-family: Arial;
	font-size: 10pt;
	color: #606060;
	border: 1px solid white;
	padding: 1px;
}

#editableAddress {
	width: 250px;
	heigth: 100px;
	display: none;
	padding: 1px;
	margin: 1px;
}
#editableAddress input {
	width: 250px;
	heigth: 20px;
	font-family: Arial;
	font-size: 10pt;
	color: #606060;
	border: 1px solid #606060;
	padding: 1px;
}
#editableAddress input:focus {
	xbackground-color: blue;
}