/*styles that apply across the board for html elements*/

body{
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif;
	background-color:#fff;
	margin:0;
	font-size:90%;
}

h1 {
	margin:1em auto;
	width:162px;
	height:126px;
}

h1 a {
	text-indent:-9999px;
	display:block;
	width:162px;
	height:126px;
	background-image:url('/images/logo.png');
}

h2 {
	font-size:1.2em;
}

	h2.top {
		margin:1.5em 0 2em 0;
	}

	h2.sharethis {
		font-size:1em;
		font-weight:bold;
		margin-top:0;
	}

h3 {
	font-size:1em;
}

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


/*end styling for html elements*/

/*styles for page structure*/

.wrapper {
	position:relative; /*this is needed so the login bar can move to the bottom on the mobile site*/
}

.content {
	width:600px;
	text-align:center;
	margin:0 auto;
}


/*style for login bar*/
.useractions {
	padding: 10px;
	text-align: right;
	font-size:0.8em;
}

	.useractions label {
		font-weight:bold;
	}
	
	.useractions .input {
		border-color:#64aff5;
		width:150px;
	}
	
	.useractions .button {
		/*make sure font size doesn't have 0.8em applied to it twice (button style and useractions are set to be 0.8em - this resets that*/
		font-size:1em;
		/*color:#64aff5;
				border-color:#64aff5;*/
	}
	
	.useractions .listchoice {
		display:inline;
		padding:0;
	}
	
		.listchoice select {
			max-width:200px;
			margin-right:0.5em;
		}
		
	.toplinks {
		display:inline;
		padding-left:0.5em;
	}
	
	.toplinks li{
			line-height:0.8em;
			margin:0 0.5em 0 0;
			border-left: 1px solid #666;
			display:inline-block;
			padding-left:0.5em;
			font-weight:bold;
		}
		
/*hide the extra set of bottom links in the bottommobile div for the main site*/
.bottommobile .bottomlinks {
	display:none;
}

/*styles for search box for books*/

.box {
	width:100%;
	padding:10px 0;
	margin-top:2em;
	margin-bottom:2em;
	overflow:hidden;
}

	.booksearch {
		background-color:#eee;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border:2px solid #999;
	}
	
		.booksearch label {
			margin:1em 0;
			display:block;
			font-weight:bold;
		}
		
			.booksearch label div {
				font-weight:normal;
				display:block;
				margin-top:1em;
			}
			
			.booksearch label.inlinelabel {
				display:inline;
			}
			
		.booksearch h2 {
			font-size:1em;
			margin:0 0 1em 0;
		}
		
			.booksearch h2.topmargin{
				margin-top:1.5em;
			}
			
			.booksearch h2.topmarginextra{
				margin-top:2em;
			}
		
		.bookinput {
		    width:75%;
			margin-bottom:1em;
		}
		
/*styles for list of books to choose correct one*/
ul.choice {
	list-style-type:none;
	padding:0;
	width:100%;
	margin:0;
	text-align:left;
}

	ul.choice li {
		display:block;
		margin:0;
		font-size:1.1em;
	}
		ul.choice li a {
			display:block;
			padding:0.5em 10px;
		}
			
		ul.choice li:hover {
			/*background-color:#d4bb9c;*/
			background-color:#ccc;
			/*text-decoration:none;*/
		}
		
		
/*booklist  and list manager styles*/

.resultsheader {
	text-align:left;
	margin:2em 0;
}

form.wsirnform {
	width:100%;
	overflow:hidden;
}

ul.booklist, ul.booklist li, ul.row {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}
	ul.booklist{
		margin-bottom:2em;
	}

	ul.booklist li {
		width:100%;
		overflow:hidden;
	}

	ul.row {
		width:100%;
		overflow:hidden;
	}
	
		li.on ul.row {
			background-color:#fef2ca;
			border-radius: 5px;
		}
		
			li.listmanager ul.row {
				background-color:#d4e9fc;
			}
			
			li.recommendations ul.row {
				background-color:#dfefbd;
			}
			
			li.importisbn ul.row {
				background-color:#ffe6de;
			}
			
			ul.row li {
				float:left;
				overflow:hidden;
				padding:1em 7px;
			}
	
				ul.row li.checkbox {
					width:16px;
				}
				
					ul.row li.checkbox input {
						margin:0;
					}
	
				ul.row li.title {
					/*In this situation there is:
					a checkbox (16px and 14px padding),
					title (386px and 14px padding),
					info/buy button (86px and 14px padding),
					remove button (56px and 14px padding).
					Total width:600px*/
					width:386px;
					text-align:left;
				}
					
				ul.row li.recommendation {
					/*in this situation there is:
					a checkbox (16px and 14px padding),
					recommendation (456px and 14px padding),
					info/buy button (86px and 14px padding).
					Total width:600px */
					width:456px;
					text-align:left;
				}
				
					ul.row li.recommendation-logged-out { /*in this situation there is recommendation (486px and 14px padding), info/buy button (86px and 14px padding). Total width:600px*/
						width:486px;
						text-align:left;
					}
	
				ul.row li.buy {
					width:86px;
				}
	
					li.buy a.button {
						/*overrides button colour*/
						border:2px solid #749925;
						background-color:#749925;
						background: -moz-linear-gradient(100% 100% 90deg, #749925, #b7db6b);
						background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b7db6b), to(#749925));
						background: -webkit-linear-gradient(#b7db6b, #749925);
						background: -o-linear-gradient(#b7db6b, #749925);
					}
						li.buy a.button:hover {
							background: -moz-linear-gradient(100% 100% 90deg, #749925, #d8ecaf);
							background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d8ecaf), to(#749925));
							background: -webkit-linear-gradient(#d8ecaf, #749925);
							background: -o-linear-gradient(#d8ecaf, #749925);
						}
						
						/*remove underline on button styles*/
						ul.row li a.button:hover {
							text-decoration:none;
						}
	
			ul.row li.remove {
				width:56px;
				float:right;
			}
				
			ul.row li.listitem {
				/*In this situation there is:
				the listitem (416px + 14px padding),
				rename button (71px + 14px padding),
				delete button (71px + 14px padding)
				total width:600px*/
				width:416px;
				text-align:left;
			}
			
			ul.row li.rename {
				width:71px;
			}
			
			ul.row li.delete {
				width:71px;
				float:right;
			}
			
			ul.row .categories{
				width:486px;
		    	font-size: 0.7em;
		    	text-align:left;
		    	color:#948987;
		    	letter-spacing: 0.05em;
			}
			
				ul.signin ul.row .categories {
					width: 416px; /* for sign in page, this is the width of the checkbox and book title lis above including padding */
				}

/*What should I read next button (inherits from .button class too)*/
input.wsirn {
	/*overrides button colour*/
	/*border:2px solid #64aff5;
		background-color:#64aff5;
		background: -moz-linear-gradient(100% 100% 90deg, #64aff5, #b4d8fa);
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4d8fa), to(#64aff5));
		background: -webkit-linear-gradient(#b4d8fa, #64aff5);
		background: -o-linear-gradient(#b4d8fa, #64aff5);*/
	font-size:1em;
}
	input.wsirn:hover {
		/*background: -moz-linear-gradient(100% 100% 90deg, #64aff5, #d4e9fc);
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4e9fc), to(#64aff5));
				background: -webkit-linear-gradient(#d4e9fc, #64aff5);
				background: -o-linear-gradient(#d4e9fc, #64aff5);*/
	}
	
div.selectall {
	float:right;
}

p.sharelist {
	clear:both;
	margin:3em 0;
	font-weight:bold;
}

select.chooselist {
	margin-right:1em;
	max-width:200px;
}


/*footer styles*/

.footer{
    margin: 3em 0 2em 0;
    font-size: 0.8em;
	width:100%;
	text-align:center;
	overflow:hidden;
	clear:both;
}

.amazonad {
	margin-bottom:2em;
}

/*social media links*/
.socialmedialinks {
	width:100%;
	margin:0 auto 3em auto;
	overflow:hidden;
}

.bottomlinks{
	clear:both;
	overflow:hidden;
	padding:0;
	margin:0 auto;
	width:100%;
}

	.bottomlinks li {
		line-height:0.8em;
		margin:0 0 0 1em;
		border-right: 1px solid #666;
		display:inline-block;
		padding-right:1em;
	}
	
		.bottomlinks li.last {
			border-right:none;
		}

/*styles for reginfo page*/
.reginfo {
	text-align:left;
}

/*styles for faq*/
.faq h3 {
	text-align:left;
	cursor:pointer;
}
	.faq h3.linky {
		color: #ee6234;
	}
		.faq h3.linky:hover {
			text-decoration:underline;
		}

.faq p {
	text-align:left;
	padding:10px;
	background-color:#eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #999;
	margin-bottom:3em;
}

/*end faq styles*/

/*styles for contact form*/
.contact {
	text-align:left;
	padding:10px;
}

	.contact label {
		float:left;
		clear:left;
		width:100px;
		margin-left:100px;
		vertical-align:middle;
		line-height:24px;
	}
	
	.contact .input, .contact textarea {
		float:left;
		width:200px;
		clear:right;
		margin:1em 0;
	}
		.contact textarea {
			height:200px;
			font-size:0.75em;
			font-family: 'Lucida Grande','Lucida Sans Unicode',Helvetica,sans-serif;
		}

	.contact img {
		display:block;
		clear:both;
		margin:1em 0 1em 200px;
	}
	
	.contact p {
		clear:both;
		margin:1em 0 1em 200px;
	}
	
	.contact .button {
		clear:both;
		float:left;
		margin:1em 0 1em 200px;
	}

/*end styles for contact form*/


/*general styles including form styles*/

.intro {
	text-align:left;
}

.small{
    font-size: 0.8em;
}

.input {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #ccc;
	padding:5px 10px;
	-webkit-appearance: none; /*remove shadow on ios*/
}

.left {
	text-align:left;
}

.margin {
	margin: 0 10px;
}

.marginbottom {
	margin-bottom:1em;
}

.button {
	color:#fff;
	font-weight:bold;
	font-size:0.8em;
	padding:3px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #ff7345;
	background-color:#ff7345;
	background: -moz-linear-gradient(100% 100% 90deg, #ff7345, #ffb789);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffb789), to(#ff7345));
	background: -webkit-linear-gradient(#ffb789, #ff7345);
	background: -o-linear-gradient(#ffb789, #ff7345);
	
}

	.button:hover {
		background: -moz-linear-gradient(100% 100% 90deg, #ff7345, #ffd9ab);
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd9ab), to(#ff7345));
		background: -webkit-linear-gradient(#ffd9ab, #ff7345);
		background: -o-linear-gradient(#ffd9ab, #ff7345);
	}
	
.message {
	text-align:left;
	background-color: #D4E9FC;
	margin-bottom: 2em;
    margin-top: 2em;
    padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #64aff5;
}

.warning {
	color:red;
}

.antispam { display:none;}
/*end general styles*/