body{
	background-image:url("/images/watermark.gif");
	background-position:100% 58px;
	background-repeat:no-repeat;
	margin:0px;
	font-family: bitstream-vera-sans, Arial, Helvetica, sans-serif;
	text-align:center;
}
div#outer{
	margin:0px;
	background-image:url("/images/background.gif");
	background-repeat: repeat-x;
	
}
div#page{
	min-width:480px;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
	padding-right:5px;
	padding-left:5px;
	text-align:center;
}

* html #page{
	width:expression( document.body.clientWidth > (900) ? "900":"auto" );
}
	        
form{
	margin:0px;
}
a{
	color:#15d000;
	/*text-decoration:none;
	padding-bottom:-1px;
	border-bottom:1px dashed #15d000;*/
	text-decoration: none;
	background: transparent url(/images/underline-green.gif) 0 1.07em repeat-x; 
}
a:hover{
	background: transparent url(/images/underline-green-animated.gif) 0 1.07em repeat-x; 
}
/*
 * header
 */
#header{
	margin-top:15px;
	width:100%;
	margin-bottom:0px;
}
#logo{
	width:303px;
}
.search-filler{
	height:6px;
}
.search-l{
	background: url('/images/search-l.gif') no-repeat center right;
}
.search-l span{
	width:31px;
	display:block;
}
.search-r{
	background: url('/images/search-r.gif') no-repeat center left;
}
.search-r span{
	width:21px;
	display:block;
}
.search-c{
	background: url('/images/search-c.gif') repeat-x center;
	width:100%;		
}
/* I might have had this at one point for IE. This is not needed for mozilla */
/*.search-go{*/
/*  margin-top:1px;*/
/*}*/
#page_search{
	/* the main search box*/
	background-color:transparent;
	border:0px;
	width:100%;
}

/* 
 * Page level
 */
#footer{
	clear:both;
	margin-bottom:10px;
	height:1px;
}
h1.image-based{
	margin:0px;
	padding:0px;
	/*margin:0px;*/
	height:28px;
	font-size:medium;
	font-weight:normal;
	background-repeat:no-repeat;
	/*border:1px solid red;*/
	/*margin-bottom:10px;
	padding-bottom:8px;
	border-bottom:1px solid #dec977;
	*/
	position:relative;
}
/* This serves as the bottom margins for the h1 above, because
 IE will not display margins correctly on the h1 elements themselves
 with an absolutely positioned span inside them. */
div.title-border{
	font-size:0em;
	/*border:1px solid blue;*/
	height:4px; 
	margin-bottom:10px;
	/* space between header and underline */
	border-bottom:1px solid #dec977;
}

h1.image-based span{
	/*height:28px;
	display:block;
	max-height:10px;
	float:right;*/
	margin:0px;
	padding:0px;
	position:absolute;
	bottom:0px;
	right:0px;
}

/* generic dialog classescode */
.hd .c,
.ft .c {
 font-size:1px; /* ensure minimum height */
}
.bd .c { 
 padding-left:10px;
 padding-right:10px;
}

/* specific page dialog */
.dialog .hd { background:transparent url(/images/tl.gif) no-repeat 0px 0px; }
.dialog .hd .c { background:transparent url(/images/tr.gif) no-repeat right 0px; }
.dialog .bd { background:transparent url(/images/ml.gif) repeat-y 0px 0px; }
.dialog .bd .c { background:transparent url(/images/mr.gif) repeat-y right 0px; }

.dialog .ft .c, .dialog .hd .c { height:8px; }
.dialog .ft {  background:transparent url(/images/bl.gif) no-repeat 0px 0px; }
.dialog .ft .c {  background:transparent url(/images/br.gif) no-repeat right 0px; }

/* used for info messages at the top */
.info .hd { background:transparent url(/images/info-tl.gif) no-repeat 0px 0px; }
.info .hd .c { background:transparent url(/images/info-tr.gif) no-repeat right 0px; }
.info .bd { background:transparent url(/images/info-ml.gif) repeat-y 0px 0px; }
.info .bd .c { background:transparent url(/images/info-mr.gif) repeat-y right 0px; }
.info .bd .c { 
 padding-left:5px;
 padding-right:5px;
}
.info .ft .c, .info .hd .c { height:4px; }
.info .ft {  background:transparent url(/images/info-bl.gif) no-repeat 0px 0px; }
.info .ft .c {  background:transparent url(/images/info-br.gif) no-repeat right 0px; }

/* input text boxes */
.text-l{
	background: url('/images/text-l.gif') no-repeat center right;
}
.text-l span{
	width:9px;
	height:36px;
	display:block;
}
.text-c{
	/*background-image:url('/images/text-c.gif');*/
	background: url('/images/text-c.gif') repeat-x center;
	width:100%;
}
.text-r{
	background: url('/images/text-r.gif') no-repeat center left;
}
.text-r span{
	width:9px;
	height:36px;
	display:block;
}
#page-message{
	margin-top:0.5em;
	margin-bottom:0.5em;	
	margin-left:auto;
	margin-right:auto;
	width:80%;
	
	min-height:1em;
	height:auto;	
	background-color:#ffe582;
	text-align:center;
}
/* min height for UE. http://www.cssplay.co.uk/boxes/minheight.html */
/*\*/
* html #page-message{
	height: 1em;
}
/**/

/* 
 * Search side
*/

#search{
	text-align:left;
	float:left;
	width:47%;
}
#shelf-add h1{
	font-size:1.2em;
}
h1#add-shelf-title{
	background-image:url(/images/header-add-book.gif);	
}
#shelf-search{
}
.shelf-search-button{
	margin-left:8px;
	margin-right:8px;
}
input#shelf_search_box{
	width:100%;
	border:0px;
	background-color:transparent;
}
#shelf-search .progress{
	width:16px;
}
.search-instructions{
	font-size:smaller;
	color:gray;
	font-style:italic;
	margin-left:3px;
	margin-bottom:10px;
}


/* 
 * Shelf side
 */
h1#book-shelf-title{
	background-image:url(/images/header-book-shelf.gif);	
	/* this must be a pixel less than the regular image-based header's bottom padding*/
	/*padding-bottom:7px;*/	
	/*margin-bottom:0px;*/
	
	/*border:0px;*/
}
/* for this title, the box comes right under it. Don't need a bottom margin */
div#book-shelf-title-border{
	border:0px;
	height:3px;
	margin-bottom:0px;
}

#shelf{
	text-align:left;
	float:right;
	width:50%;
}
#shelf-items{
	background-color:#fff9de;
}
#shelf-items .instruction{
	font-style:italic;
	font-size:smaller;
	text-align:center;
}

#shelf h2{
	/* used for titles like "currently reading"*/
	clear:both;
	font-size:1em;
	margin:0px;
	/*padding-bottom:2px;*/
}

#shelf .sublist{
	/* lists that include both headers and shelf-items*/	
	padding-left:5px;
	padding-bottom:15px;
	/*border-top:1px solid blue;*/
	zoom:1;	/* todo delete ? */
}

#shelf-messages{
	padding-top:.25em;
	padding-bottom:.25em;
	margin-top:.5em;
	margin-bottom:.5em;
	margin-left:.5em;
	margin-right:.5em;
	min-height:2em; 
	/*border:1px solid green;	*/
	height:auto;
	text-align:right;
}
/* min height for UE. http://www.cssplay.co.uk/boxes/minheight.html */
/*\*/
* html #shelf-messages {
	height: 1em;
}
/**/
#shelf-messages-content{
	background-color:#ffe582;
	width:49%;
	text-align:left;
	margin-left:auto;
}
#shelf-messages-content a{
	font-weight:bold;
}

.shelf-item{
	/*margin-bottom:5px;*/
	padding-top:5px;
	padding-bottom:4px;
	/*margin-left:10px;
	margin-right:10px;*/
	/*padding-bottom:5px;*/
	border-bottom:1px dotted black;
	border-bottom:1px dotted #fff9de;
	border-bottom:2px dotted #e4d188;
	border-bottom:1px dotted #b5a35b;	
	clear:both;
	cursor:move;
	/* do not trigger mouse selections in the draggable element */
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;	
}
/*\*/	
*html .shelf-item{	height:1%; }/**/

/* Making a hover class causes some flickering. Enable to see.
   Workaround could be to remove this class dynamically when a drag
   starts, or do the hover code in JS
div.shelf-item:hover{
	background-color:#efe0a4;
}
*/
.hovering{
	background-color:#efe0a4;
}

.shelf-item .delete{
	position:absolute;
	right:0;
	/*top:0.4em;*/
	top:0.4em;
}
.shelf-item .delete img{
	border:0px;
}

.shelf-item .title{
	height:1%;
	/*margin-left:1em;*/
	/*margin-right:1em;*/
	}
.shelf-item .authors{
		color:gray;
}
.shelf-item .content{
	margin-right:1.5em;
}
.shelf-item .nobreaks{
	border:1px solid blue;
}
.shelf-item .spacer{
	/*width:5.5em;*/
	height:1px;
	width:5.5em;
	display:inline;
	border:1px solid red;
}
.shelf-item .add{
	position:absolute;
	right:0;
	bottom:3px;	/* Should be about the same as .shelf-item's padding bottom*/
	/*float:right;*/
}