/*  
Theme Name: Recensieweb
Description: recensieweb.nl theme
Version: 1.0
Author: RedAnt - Gert Wijnalda
Author URL: http://www.redant.nl
*/

/* --- Used colors ----------------------------------------------------------------------- 

site background	- #2C2A2D
background blue	- #D6DDE9
light blue		- #72B6D8
dark blue		- #407D9F
gray			- #333 */

/* --- CSS Reset ------------------------------------------------------------------------- 

http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain) */

html, body, div, span, applet, object, input, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section 							{ display: block; }
body 														{ line-height: 1; }
ol, ul 														{ list-style: none; }
blockquote, q 												{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after 		{ content: ''; content: none; }
table 														{ border-collapse: collapse; border-spacing: 0; }
a 															{ text-decoration: none }

/* --- Defaults ----------------------------------------------------------------------- */

strong { font-weight: bold;}
cite, em, i { font-style: italic; }
pre, code { 
	font-family: Courier New, monospace; 
	margin-bottom: 10px; 
}
ins { text-decoration: none; }
sup, sub { 
	height: 0; 
	line-height: 1; 
	position: relative; 
	vertical-align: baseline; 
}
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { 
	background: url(images/left-quotes-big.png) no-repeat;
	padding: 0 57px;
	min-height: 40px;
	font-family: Georgia, serif;
	font-size: 17px;
	font-style: italic;
	margin-bottom: 20px;
	text-align: center;
}
blockquote p { padding-bottom: 0px; }

input[type=text],
input.text, 
input.title, 
textarea, 
select { padding: 2px; }
input[type=text]:focus, 
input.text:focus, 
input.title:focus, 
textarea:focus, 
select:focus { }
input[type=text], 
input.text, 
input.title, 
textarea, 
select { 
	margin:0.5em 0; 
}
textarea { padding: 4px; }

.clearfix:after { 
	visibility: hidden; 
	display: block; 
	font-size: 0; 
	content: " "; 
	clear: both; 
	height: 0; 
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* --- Main CSS ----------------------------------------------------------------------- */

body { 
	line-height: 20px; 
	font-family: Arial,Verdana,sans-serif; 
	font-size: 12px;  
	padding-top: 0; 
	padding-bottom: 10px; 
	background-color: #2c2a2d;
	color: black;
}
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }

h1, h2 { 
	padding-bottom: 15px; 
	letter-spacing: 1px; 
	line-height: 1em; 
	font-weight: lighter; 
	font-family: 'Minion Pro', Arial, sans-serif; 
	text-shadow: none; 
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #407d9f;
}
h4 {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;	
	color: #2c2a2d;
}

p { 
	padding-bottom: 20px; 
	line-height: 24px; 
}
p a { text-decoration: none; border-bottom: 1px dotted #999; color: black; }
p a:hover { border-bottom: 1px solid #999; }
p.attribution { color: #333; line-height: 140%; }
p.attribution .book { font-style: italic; color: black; }
p.first { font-weight: bold; }
p.attribution a.category, p.listcategories a.category {
	padding: 0px 8px;
	line-height: 15px;
	text-decoration: none;
	border: none;
	color: white;
	background-color: #407d9f;
	font-size: 11px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	display: inline-block;
}

img.book {
	border: 2px solid black;
	xwidth: 120px;
	xheight: 192px;
	width: 96px;
	height: 150px;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4); 
	-moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4); 
	-webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4); 
}

/* --- Main container ----------------------------------------------------------------- */

#site { 
	text-align: left; 
	margin: 0 auto; 
	width: 980px; 
	position: relative; 
}

/* --- Header ------------------------------------------------------------------------- */

#header { 
	position: relative; 
	padding-top: 10px;
	background-color: #72B6D8;
	height: 80px;
	box-shadow: 0 7px 4px rgba(0, 0, 0, 0.6); 
	-moz-box-shadow: 0 7px 4px rgba(0, 0, 0, 0.6); 
	-webkit-box-shadow: 0 7px 4px rgba(0, 0, 0, 0.6); 
}

	#header #logo {
		position: absolute;
		top: 0;
		left: 45px;
		z-index: 999;
	}

	#header #tagline {
		position: relative;
		top: 5px;
		width: 100%;
		text-align: right;
	}
	#header #tagline h2 {
		padding-right: 15px;
		font-style: italic;
		color: white;
	}
	#header #nav {
		position: absolute;
		bottom: 5px;
	}
	#header #nav ul { 
		padding-left: 155px;
	}
	#header #nav li {
		display: block;
		float: left;
		padding-right: 20px;
	}
	#header #nav li a {
		text-decoration: none;
		color: #fff;
		border: none;
		text-transform: uppercase;
		font-size: 15px;
	}
	#header #nav li a:hover {
		color: #eee;
	}

	#header #search {
		position: absolute;
		bottom: 5px;
		right: 15px;
	}
	
		#header #search #searchinput {
			opacity: 1.0;
			color: #999; 
			background: #EAF0FE; 
			border: none; 
			float: left; 
			width: 250px; 
			padding-left: 9px; 
			font-size: 11px; 
			border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		
#search-form { 
	float: right; 
	background: white; 
	opacity: 0.30;
	width: 161px; 
	height: 28px; 
	border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius-bottomleft: 3px;
}

	#search-form #searchinput {
		opacity: 1.0;
		color: black; 
		background: none; 
		border: none; 
		float: left; 
		margin: 2px 7px 0 5px; 
		width: 114px; 
		padding-left: 9px; 
		font-size: 11px; 
		border-bottom-left-radius: 3px;
		-moz-border-radius-bottomleft: 3px;
		-webkit-border-radius-bottomleft: 3px;
	}
	
	#search-form #searchsubmit { 
		margin-top: 7px; 
		margin-right: 7px; 
	}

/* --- Slider on front page ----------------------------------------------------------- */

#slideshow {
	height: 275px;
	background-image: url('images/paperstack.png');
}

.dots {
	position: absolute;
	top: 320px;
	left: 65px;
}

	.dots a {
		color: white;
		font-size: 30px;
		padding-right: 10px;
	}
	
#dot-2, #dot-3, #dot-4, #dot-5 { opacity: 0; }

.reviewPanel {
	position: relative;
	left: 360px;
	top: 10px;
	width: 575px;
	height: 250px;
}

	.reviewPanel img.book {
		position: relative;
		top: 20px;
		z-index: 999;
	}
	
	.reviewPanel .excerpt {
		position: absolute;
		width: 465px;
		left: 90px;
		top: 0;
		height: 250px;
		background-color: #EAF0FE;
		opacity: 0.9;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		overflow: hidden;
	}

	.reviewPanel .excerpt h2 { padding: 25px 0 0 25px; margin: 0; }
	.reviewPanel .excerpt p { padding: 0 10px 0 25px; margin: 0; line-height: 169%; }
	.reviewPanel .excerpt p.attribution { padding-top: 5px; padding-bottom: 5px; }
	.reviewPanel .excerpt a.readmore {
		position: absolute;
		right: 15px;
		bottom: 10px;
		display: block;
		width: 108px; height: 35px;
		background: url('images/readmore.png') no-repeat 0 0;
		background-position: 0 0;
		text-indent: -1999px;
		overflow: hidden;
	}

#review-2, #review-3, #review-4, #review-5 { display: none; }

span.left-arrow,
span.right-arrow,
a#left-arrow, 
a#right-arrow {
	position: absolute; 
	top: 200px; 
	width: 40px; 
	height: 44px; 
	text-indent:-9999px; 
	z-index: 40; 
}
a#left-arrow { left: -7px; }	
a#right-arrow { right: -7px; }
span.left-arrow {
	background: url(images/arrow_left.png) 9px 7px no-repeat;
	left: -17px;
}
span.right-arrow {
	background: url(images/arrow_right.png) 12px 7px no-repeat;
	right: -17px;
}
span.left-arrow,
span.right-arrow {
	width: 37px;
	height: 38px;
	border-radius: 20px;
	background-color: white;
}

/* --- Main content ------------------------------------------------------------------- */

#content {
	background-image: url('images/back-gradient.png');
	background-repeat: repeat-x;
	background-color: #eaf0fe;
	padding-left: 35px;
	padding-bottom: 25px;
}

	#content .column {
		float: left;
		width: 280px;
		margin-right: 30px;
		padding-top: 25px;
	}
	#content .column h2 {
		padding-top: 15px;
	}
	#content .wide {
		width: 510px !important;
		margin-right: 110px;
	}

/* --- Footer ------------------------------------------------------------------------- */

#footer {
	color: #666;
	padding: 10px 15px;
}

	#footer p {
		font-size: 10px !important;
		line-height: 120% !important;
	}
	
	#footer a {
		text-decoration: none;
		border: none;
		color: #999;
	}

	#footer #thanks {
		float: left;
		text-align: left;
		width: 500px;
	}
	
	#footer #copyright {
		float: right;
		text-align: right;
	}
		

/* --- Box styles --------------------------------------------------------------------- */

.filled {
	background-color: #d6dde9;
	padding-left: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-bottom-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

.bluebox {
	background-color: #72b6d8;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 9px;
	margin-bottom: 25px;
}
	.bluebox h2 { color: white; padding-bottom: 10px; padding-top: 5px !important; }
	.bluebox p { font-size: 12px; padding: 0;}

.box {
	border: 1px solid #72b6d8;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 0 9px;
}
	.box h2 { padding-bottom: 10px; }
	.box h3 { padding-bottom: 5px; }
	.box p { font-size: 12px; padding-bottom: 10px; line-height: 140%; }


/* --- Non-regular pages (body class='...') ------------------------------------------- */

.review {

}

	.review #header #logo {
		left: -15px;
	}

	.review #header #nav ul { 
		padding-left: 290px;
	}

	.review .wide h2 {
		padding-bottom: 0;
	}

	.review .wide p {
		line-height: 160%;
	}

	.review .filled {
		padding-bottom: 20px;
	}
	
		.review .filled img.book {
			position: relative;
			float: left;
			left: -30px;
			margin-right: -15px;
		}
		
		.review .filled p {
			padding-bottom: 0 !important;
		}
	
		.review .filled h2 {
			padding: 0 !important;
		}
		
		.review .filled .bookdetails {
			padding-top: 10px;
			font-size: 11px;
		}
		
		.review .filled .bookdetails p {
			padding: 0 !important;
			margin: 0 !important;
			line-height: 140%;
		}
		
		.review .filled h3 {
			padding-top: 5px;
		}

	.review .reviewerBio {
		color: #333;
		font-size: 11px;
	}
	
		.review .reviewerBio hr {
			position: relative;
			margin: 0;
			width: 150px;
			text-align: left;
		}
		
		.review .reviewerBio p {
			padding-top: 5px;
		}

/* --- Tipsy -------------------------------------------------------------------------- */

.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-arrow { position: absolute; background: url('images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }