/*order of @media queries must be least-to-most specific */
/* "only" keywords prevents non-ios devices running that section, thereby use of "only" targets just ios devices.*/

/* practically all devices*/
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px), only screen and (max-device-width: 480px)  {
	body {
		font-size:1.05em;
	}
	
	.small {
		font-size:1em; /*no separate style for small text on mobile site*/
	}
	
	h1 {
		/*width and height for small logo*/
		width:108px;
		height:86px;
	}

	h1 a {
		/* use small version of logo*/
		width:108px;
		height:86px;
		background-image:url('/images/logo_small.png');
	}
		
	
	h2 {
		/*text-align:center;*/
	}
	
	/*moves the login bar to the bottom of the screen and bottomlinks under it*/
	.bottommobile {
		position:absolute;
		top:100%;
		/*background-color:green;*/
		width:100%;
	}
	
		.bottommobile .bottomlinks {
			display:block;
		}
		
		/*hide the bottomlinks div in the footer*/
		.footer .bottomlinks {
			display:none;
		}
	
	/*style for login bar*/	
	.useractions { 
		width:95%;
		text-align:center;
		padding:5px 0;
		margin:1em auto 2em auto;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border:2px solid #b4d8fa;
		background-color: #e4f1fd;
		font-size:1em; /*resets to the same size as the rest of the page as on main site it is smaller*/
	}
		
		.useractions label { 
			display:block;
			clear:both;
			font-weight:normal;
			margin-bottom:5px;
		}
		
		.useractions .input {
			width:90%;
			margin-bottom:5px;
			border:2px solid #b4d8fa;
		}
		
			.listchoice select {
				max-width:250px;
				font-size:1em;
			}
			
				.listchoice .button {
					clear:both;
					margin:0.5em auto 1em auto;
				}
			
		.toplinks {
			display:block;
			clear:both;
			margin:10px 0 10px 0;
		}
		
			.toplinks li {
				margin-right:10px;
				padding-left:10px;
			}
			
				.toplinks li.first {
					border-left:none;
				}

	/*reset widths for mobile site*/
	.content {
		width:95%;
		margin:0 auto;
		text-align:left;
		/*background-color:blue;*/
	}
	
	/*.wrapper { background-color:red;}*/
	
	.intro, .booksearch, .box  {
		width:auto;
	}

	.mobileoff {
		display:none; /*for text etc which is hidden in mobile version of site*/
	}
	
	/*styles for search box for books*/
	
	.box {
		padding:10px;
	}
	
	.booksearch label {
		font-weight:normal;
	}
	
		.booksearch label div.mobileoff, .booksearch label.mobileoff {
			display:none; /*necessary because of the more specific selector in wsirn.css which sets this to display:block and the mobileoff class can't override it*/
		}
	

	

	.input {
		padding:2px 5px;
		font-size:1.2em;
	}

		.bookinput {
			margin-bottom:0.5em;
			width:90%;
		}

	
	
	/*styles for list of books to choose correct one*/
	
	ul.choice, ul.choice li, ul.choice li a {
		width:auto;
	}
	ul.choice {
		margin:0;
	}
	
		ul.choice li a {
			padding:14px 10px;
			border-bottom:1px dotted #999;
		}
	/*booklist and list manager styles*/
	ul.row {
		padding:3px 0;
	}
	
	ul.row li.checkbox {
		width:20px;
		padding-bottom:3px;
	}
	
		ul.row li.checkbox input {
			width:20px;
			height:20px;
		}
		
			ul.row li.mobileoff {
				display: none; /* more specific selector needed - class on its own doesn't work */
			}

	ul.row li.title {
		/*In this situation there is:
		a checkbox (20px and 14px padding),
		title (250px and 14px padding),
		info/buy button (100px and 14px padding) (on a new line),
		remove button (56px and 14px padding).
		Total width:298px*/
		width:250px;
		padding-bottom:3px;
	}
		
	ul.row li.recommendation {
		/*in this situation there is:
		a checkbox (20px and 14px padding),
		recommendation (250px and 14px padding),
		info/buy button (100px and 14px padding) (on a new line).
		Total width:298px */
		width:250px;
		padding-bottom:3px;
	}
	
		ul.row li.recommendation-logged-out {
			/*in this situation there is:
			recommendation (284px and 14px padding),
			info/buy button (100px and 14px padding) (on new line).
			Total width:298px*/
			width:284px;
			padding-bottom:3px;
		}
	
	ul.row li.listitem {
		/*in this situation there is:
		listitem (284px and 14px padding),
		rename button (85px and 14px padding) (on new line),
		delete button (71px and 14px padding)
		Total width:298px*/
		width:284px;
		padding-bottom:3px;
	}
	
	ul.row li.buy {
		width:100px; /*this is wider than the main site version due to a larger font size*/
		clear:left;
	}
	
	ul.row li.rename {
		width:85px; /*this is wider than the main site version due to a larger font size*/
		clear:left;
	}
	
	input.wsirn {
		float:left;
		font-size:1.2em;
	}
	
	input.update {
		font-size:1.2em;
		margin-bottom:1em;
	}

	div.selectall {
		clear:both;
		float:left;
		margin-bottom:1em;
	}
	
	select.chooselist {
		max-width:250px;
		font-size:1em;
		margin-bottom:1em;
	}
	
	/*width of url input on signin.php*/
	#url {
		width:150px;
	}
	
	/*width of email input in register box (wsirn.php*/
	#emailaddress {
		/*width:150px;*/
	}
	
	/*width of isbn input (finder.php)*/
	#isbn {
		width:150px;
	}
		
	/*footer styles*/	
	
	.footer {
		margin-top:2em;
	}
		
	.socialmedialinks {
		margin-bottom:1em;
	}
		
	.bottomlinks {
		width:95%;
		text-align:center;
		/*margin-top:10px;*/
	}
	
		.bottomlinks li {			
			border-right:none;
			font-size:1em; /*resets to the same size as the rest of the page as on main site it is smaller*/
			display:block;
			/*width:100%;*/
			margin-left:0;
			overflow:hidden;
		}
			.bottomlinks li.nolink {
				width:100%;
				padding:10px 0;
				border-bottom:1px dotted #ccc;
			}
		
			.bottomlinks li a {
				display:block;
				width:100%;
				padding:10px 0;
				overflow:hidden;
				border-bottom:1px dotted #ccc;
			}
		
	/*styles for faq*/
	.faq h3 {
		margin-bottom:30px;
	}
	
	/*styles for contact form*/
	.contact textarea {
		height:100px;
		font-size:1.2em;
	}

	.contact img {
		margin:1em 0;
	}

	.contact p {
		margin:1em 0;
	}

	.contact .button {
		margin:1em 0;
	}

	/*end styles for contact form*/
		
	/*general styles including form styles*/
	
	input[type="text"], input[type="email"], textarea {
		
	}
		
	.button {
		font-size:1em; /*resets to same size as rest of page*/
	}
}


/* ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
	body {
		/*color:yellow;*/
	}
	
	/*space out the social media buttons a bit more for the ipad*/
	.smbutton {
		margin-right:20px;
	}
}