/*
----------------------------------------
Thought & Theory
     Author:    Jeff Mehlhoff
---------------------------------------- */

/* zeros out everything */
@import "whitespace-reset.css";

body {
	background: #231f20;
	font: .7em/150% Verdana, Arial, sans-serif;
	color: #666;
}

img { -ms-interpolation-mode:bicubic; }

p { margin-bottom: .7em; }
small { font-size: 90%; }

/* links
---------------------------------------- */
a:link { color: #0099cc; }
a:visited { color: #0099cc; }
a:hover { color: #00b5ff; }
a:active { color: #0099cc; }

a { outline: 0; }

input, textarea {
	border: 1px solid #ccc;
}

/* headers
---------------------------------------- */
h1, h2, h3, h4 {
	text-transform: uppercase;
	font-size: 90%;
	color: #333;
	line-height: normal;
}

h1 {
	font-size: 220%;
}

/* rails specific
---------------------------------------- */

.fieldWithErrors input,
.fieldWithErrors textarea  {
	border: 1px solid #e63c8e;
}


/* universal
---------------------------------------- */
#application {
	margin: 0 auto;
	width: 480px;
	position: relative;
}
	.secondary #application { width: 720px; }
	#container {
		float: left;
		width: 480px;
		background: #fff;
		position: relative;
	}
	.secondary #container { width: 720px; }
	
#header {
	padding-bottom: 10px;
	float: left;
	width: 480px;
	position: relative;
	background: url(../images/bg_header.jpg) bottom center no-repeat;
}
	.secondary #header { 
		width: 720px; 
		background: url(../images/bg_header_secondary.jpg) bottom center no-repeat;
	}
	#logo {
		margin: 0 10px 0 0;
		text-indent: -9999px;
		float: right;
		width: 86px; height: 160px;
		background: url(../images/logo.gif) no-repeat;
		display: inline;
	}
		.secondary #logo { background: none; }
		#logo a:link, #logo a:visited, #logo a:hover, #logo a:active {
			text-indent: -9999px;
			float: right;
			width: 86px; height: 160px;
			background: url(../images/logo.gif) no-repeat;
			display: inline;
		}
			#logo a:hover { background-position: 0 -160px; }
	#nav {
		padding: 40px 20px 10px 20px;
		float: left;
		width: 334px;
		border-bottom: 1px dotted #ddd;
	}
		.secondary #nav { width: 569px; }
		#nav li { display: inline; }
		#nav li a:link, #nav li a:visited, #nav li a:hover, #nav li a:active {
			margin-right: 20px; padding-left: 10px;
			color: #666;
			font-size: 90%;
			font-weight: bold;
			text-transform: uppercase;
		}
			#nav li a:hover, #nav li a.selected { color: #333; }
			#nav_theshelf { background: url(../images/nav_theshelf.gif) 0 50% no-repeat; }
			#nav_articles { background: url(../images/nav_article.gif) 0 50% no-repeat; }
			#nav_bookshelves { background: url(../images/nav_bookshelves.gif) 0 50% no-repeat; }

#auxilirary {
	padding: 20px 10px;
	float: left;
	width: 690px;
	border-left: 10px solid #00a3e6;
}
	#secondary_header { 
		margin: 0 0 20px 0; padding: 0 0 20px 0; 
		border-bottom: 1px dotted #ddd;
	}
	#article_header {
		padding: 20px 10px 20px 10px;
		border-bottom: 1px dotted #ddd;
		float: left;
		position: relative;
		width: 700px;
	}
		#article_header h4 {
			padding: 0 10px 5px 0;
			position: absolute;
			top: 20px; left: -130px;
			width: 120px;
			text-align: right;
			color: #fff;
			border-bottom: 1px dotted #fff;
		}
		#article_header h1, #article_header p {
			float: left;
			width: 580px;
		}
		#article_header .back_to {
			float: right;
			width: 120px;
			text-align: right;
		}
		#article_full {
			padding: 20px 10px 40px 10px;
			float: left;
			width: 690px;
			border-left: 10px solid #e63c8e;
		}
			#book #article_full {
				border-left: 10px solid #00a3e6;
			}
			#article_full blockquote {
				margin: 20px 40px;
				font-style: italic;
				font-size: 140%;
				line-height: 120%;
				font-family: Times, Georgia, serif;
			}
			#article_full cite { 
				font-size: 90%; 
				color: #999;
			}
			#article_full ul { margin: 20px; }
			#article_full ul li {
				list-style: disc;
			}
			#article_full ol { margin: 20px 25px; }
			#article_full ol li {
				list-style: decimal;
			}
	
#category_header {
	padding: 20px 10px;
	float: left;
	width: 460px;
	border-bottom: 1px dotted #ddd;
}
	.secondary #category_header { width: 700px; }
	#category_header h1 {
		float: left;
		width: 360px;
	}
	#category_header a {
		float: right;
		width: 100px;
		text-align: right;
	}
	
#categories {
	padding: 5px 10px;
	float: left;
	width: 700px;
	background: #f7f7f7;
	border-bottom: 1px dotted #ddd; }
	#categories div.fancydropdown {
		float: left;
		position: relative;
		z-index: 3000;
		width: 310px; }
		#categories div.fancydropdown h3 {
			background: #fff url(../images/dropdown_bg.gif) 285px 2px no-repeat;
 			border: 1px solid #ccc;
			text-indent: 5px;
			display: block;
			font-size: 110%;
			text-transform: none;
 			padding: 5px; }
			
			#categories div.fancydropdown.fancydropdown_active h3 {
				background: #fff url(../images/dropdown_bg.gif) 285px -20px no-repeat; }
		
		#categories div.fancydropdown ul {
		  display: none;
			background: #fff;
			border-width: 0px 1px;
			border-style: solid;
			border-color: #ccc;
			width: 308px; }
			#categories div.fancydropdown ul li {
				text-indent: 10px;
				font-size: 95%;
				border-bottom: 1px solid #ccc; }
				#categories div.fancydropdown ul li a {
					padding: 4px 0px;
					display: block; }
					#categories div.fancydropdown ul li a:hover {
						background: #f7f7f7; }

#section_meta {
	padding: 0px 10px 0 0;
	float: right;
	width: 210px;
}
	#section_meta h3 {
		padding-bottom: 10px;
		border-bottom: 1px dotted #ddd;
	}
	#help_callout {	margin-bottom: 20px; }
		#help_callout p { margin: 0; padding: 10px 10px 0 10px; }
	#recent_comments { margin-bottom: 20px; }
		.recent_comment { margin: 10px 0; }
			.recent_comment blockquote {
				padding: 10px;
				background: #f7f7f7;
				word-wrap: break-word;
			}
			.recent_comment cite {
				padding-left: 10px;
				font-style: normal;
				font-weight: bold;
			}
	#top_rated_books { margin-bottom: 20px;	}
		#top_rated_books h3 { margin-bottom: 10px; }
		.top_book {
			padding: 2px 10px 2px 32px;
			background: url(../images/icon_yes.png) 10px 2px no-repeat;
		}
	#flickr_group { margin-bottom: 20px; }
		#flickr_group p { margin: 10px; }

.results {
	margin: 0; padding: 10px;
	float: left;
	width: 460px;
	color: #666;
}

.meta { 
	font-size: 90%; 
	color: #999;
}
.date {
	font-size: 90%;
	font-style: italic;
	color: #999;
}

.pagination {
	padding: 10px;
	border-top: 1px solid #ddd;
	float: left;
	width: 460px;
	text-transform: uppercase;
	font-size: 90%;
	font-weight: bold;
}
	.pagination a, .pagination .current, .pagination .disabled { padding: 0 2px; }
	.secondary .pagination { width: 700px; }
	.next_page {
		margin-left: 5px;
	}
	.pages {
		margin-right: 10px;
		float: left;
		width: 240px;
		text-align: center;
		display: inline;
	}
	.prev_page {
		margin-left : 0px;
		margin-right: 5px;
	}
	
.blank_slate {
	padding: 80px 20px;
	text-align: center;
	background: url(../images/bg_blankslate.gif) center 50% no-repeat;
}

#message {
	margin: 20px 0; padding: 10px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
	#message p { margin: 0; }
	.error { background: #e63c8e; }

#footer {
	float: left;
	width: 480px;
	position: relative;
	border-top: 1px solid #ddd;
	background: url(../images/bg_footer.gif) 412px 9px no-repeat;
}
	.secondary #footer { 
		width: 720px; 
		background: url(../images/bg_footer.gif) 652px 9px no-repeat;
	}
	#rss { 
		padding: 10px;
		float: left;
		width: 460px; 
	}
		.secondary #rss { width: 700px; }
		.icon_rss {
			padding: 2px 0 2px 22px;
			background: url(../images/icon_rss.gif) 0 50% no-repeat;
		}
	#footer ul { 
		padding: 20px 10px; 
		float: left;
		width: 460px;
		border-top: 1px solid #ddd;
	}
		.secondary #footer ul { width: 700px; }
		#footer ul li {
			margin-right: 5px; 
			display: inline;
		}
		#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
			text-transform: uppercase;
			color: #999;
			font-weight: bold;
			font-size: 90%;
		}
			#footer a:hover { color: #666; }
	
	#copyright { 
		margin: 0; padding-right: 10px;
		position: absolute;
		bottom: 20px; left: -100px; 
		width: 90px;
		text-align: right;
		text-transform: uppercase;
		font-size: 90%;
		color: #fff;
	}


/* page specific
---------------------------------------- */
/* index */
#entries {
	float: left;
	width: 480px;
}
	.entry {
		margin-bottom: 1px; padding: 20px 10px;
		float: left;
		width: 450px;
		position: relative;
	}
		.entry.odd { background: #f7f7f7; }
		.entry.book_release { border-left: 10px solid #00a3e6; }
		.entry.article { border-left: 10px solid #e63c8e; }
		.entry.bookshelf { border-left: 10px solid #ffd400; }
		
		.entry .category {
			margin: 0; padding: 0 10px 5px 0; 
			position: absolute;
			top: 20px; left: -140px;
			width: 120px;
			text-align: right;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 90%;
			color: #fff;
			border-bottom: 1px dotted #ddd;
		}
		
		.entry h2 { margin-bottom: 2px; }
		.entry .headline_pic { width: 450px; }
		
		.entry .book {
			margin-right: 10px;
			float: left;
			display: inline;
		}
			.entry .book img { max-width: 150px; }
		.entry .book_info {
			display: inline;
			float: left;
			width: 270px;
		}
		
		.read_more { font-weight: bold; }
		
/* article */
#further_reading {
	margin-top: 1px; padding: 0 10px;
	float: left;
	width: 690px;
	border-left: 10px solid #00a3e6;
	position: relative;
	background: #f7f7f7;
}
	#further_reading h4 {
		padding: 0 10px 5px 0;
		position: absolute;
		top: 20px; left: -140px;
		width: 120px;
		text-align: right;
		color: #fff;
		border-bottom: 1px dotted #fff;
	}

.intro {
	font-style: italic;
	color: #333;
	font-size: 140%;
	line-height: 120%;
	font-family: Times, Georgia, serif;
}

.pic_md {
	margin-left: 10px; padding: 10px;
	float: right;
	width: 315px;
	background: #f7f7f7;
	display: inline;
}
.pic_lg {
	margin: 10px 0; padding: 10px;
	float: left;
	width: 670px;
	background: #f7f7f7;
}

#comments {
	margin-top: 1px; padding: 0 10px;
	float: left;
	width: 690px;
	border-left: 10px solid #666;
	position: relative;
}
	#comments h4 {
		padding: 0 10px 5px 0;
		position: absolute;
		top: 20px; left: -140px;
		width: 120px;
		text-align: right;
		color: #fff;
		border-bottom: 1px dotted #fff;
	}
	#comment_header {
		margin-top: 15px; padding: 5px 0;
		border-bottom: 1px solid #ddd;
	}
	.comment {
		padding: 20px 0;
		float: left;
		width: 690px;
	}
		.comment_info {
			float: left;
			width: 170px;
		}
			.comment_info p { margin: 0; }
		.comment_content {
			float: left;
			width: 520px;
		}
	.admin_entry_control {
		margin-top: 20px;
	}

	#add_comment {
		margin-bottom: 20px;
		float: left;
		width: 690px;
	}
		#add_comment fieldset {
			float: left;
			width: 410px;
		}
		#add_comment h3 {
			padding-bottom: 5px;
			border-bottom: 1px solid #ddd;
		}
		#add_comment fieldset { border: none; }
		#comment_name, #comment_email, #comment_url, #comment_comment {
			padding: 5px;
			width: 400px;
			font-size: 110%;
			background: #f7f7f7;
		}
			#comment_comment {
					font-family: Verdana;
					font-size: 120%;
			}
		#add_comment small { color: #999; }
		#form_details {
			margin-top: 25px;
			float: right;
			width: 240px;
			font-size: 90%;
		}
		#form_details h5 {
			margin-bottom: 10px;
			text-transform: uppercase;
		}
		.textile { margin-top: 10px; }
		.textile p { margin: 0; }

/* extra article formatting */
#article_full h3 { 
	margin-bottom: 20px; 
	font-size: 140%;
	line-height: normal;
}
#article_full .headline_pic {
	margin-bottom: 20px; padding: 10px;
	float: left;
	width: 670px;
	background: #f7f7f7;
}
#goods { 
	margin: 20px 0;
	float: left;
	width: 690px; 
}
	.good {
		margin-bottom: 20px;
		float: left;
		width: 690px;
	}
		.good h4 { 
			margin-top: 10px; padding: 2px 0 2px 22px; 
			background: url(../images/icon_gift.gif) 0 50% no-repeat;
		}
		.good p { padding-left: 22px; }
		
.case_study { margin: 20px 0; }
		
#bookcases { 
	margin: 20px 0;
	float: left;
	width: 690px; 
}
	.bookcase {
		margin-bottom: 20px;
		float: left;
		width: 690px;
	}
		.bookcase h4 { margin-top: 10px; }

#top_list {
	margin: 20px 0;
	float: left;
	width: 690px;
}
	#top_list .book_favorite {
		padding: 10px 20px; 
		float: left;
		width: 650px;
		border-bottom: 1px solid #ddd;
	}
		#top_list p { margin: 0; }
		#top_list .count {
			margin-right: 10px;
			float: left;
			width: 20px;
			font-size: 120%;
			display: inline;
			font-style: italic;
			font-weight: normal;
		}
		#top_list .book_favorite_info {
			float: left;
			width: 610px;
		}

.question { 
  margin-bottom: 10px;
	color: #333;
	font-weight: bold; 
}
.answer { margin-bottom: 20px; }
  .answer h5 { color: #e63c8e; }

.book_suggestion {
	padding: 20px 0 20px 10px;
	float: left;
	width: 325px;
}
	.book_suggestion .book {
		float: left;
		width: 75px;
	}
	.book_suggestion .book_info {
		float: right;
		width: 240px;
	}
	
/* book */
#book_pics {
	float: left;
	width: 290px;
}
	#book_full {
		padding: 20px 10px;
		float: left;
		width: 270px;
		background: #f7f7f7;
		text-align: center;
	}
		#book_full img { max-width: 220px; }
	
	#flickr_book {
		margin: 20px auto 0 auto; padding: 0 10px;
		float: left;
		width: 270px;
	}
		#flickr_imgs {
			float: left;
			width: 270px;
		}
		#flickr_book img { 
			margin: 0 5px; padding: 2px;
			background: #fff;
			border: 1px solid #ddd;
			float: left;
			width: 50px; 
			display: inline;
		}
		#flickr_book img:hover { border: 1px solid #0099cc; }
		.icon_flickr {
			margin: 10px 0 0 5px; padding: 2px 0 2px 22px;
			float: left;
			background: url(../images/icon_flickr.gif) 0 50% no-repeat;
			display: inline;
		}
	
#book_review {
	float: right;
	width: 380px;
}
.btn_amazon { margin: 40px 0; }
.btn_amazon a:link, .btn_amazon a:visited, .btn_amazon a:hover, .btn_amazon a:active {
	padding: 10px 20px;
	background: #ddd;
	text-transform: uppercase;
	font-weight: bold;
	color: #333;
	font-size: 90%;
}
	.btn_amazon a:hover { 
		background: #00b5ff;
		color: #fff;
	}

#reviews {
	margin-top: 1px; padding: 0 10px;
	float: left;
	width: 690px;
	border-left: 10px solid #666;
	position: relative;
}
	#reviews h4 {
		padding: 0 10px 5px 0;
		position: absolute;
		top: 20px; left: -140px;
		width: 120px;
		text-align: right;
		color: #fff;
		border-bottom: 1px dotted #fff;
	}
	#reviews_header {
		margin-top: 15px; padding: 5px 0;
		border-bottom: 1px solid #ddd;
	}
	.rec_count {
		margin-left: 10px; padding: 2px 0 2px 18px;
		background: url(../images/icon_yes.png) 0 50% no-repeat;
		color: #666;
	}
	
	.review {
		padding: 20px 0;
		float: left;
		width: 690px;
	}
		.review_info {
			float: left;
			width: 170px;
		}
			.review_info p { margin: 0; }
		.review_content {
			float: left;
			width: 520px;
		}
			.rating {
				margin-bottom: 15px; padding: 10px;
				border: 1px solid #ddd;
				background: #f7f7f7;
			}
				.rating p { margin: 0; }
				.rating .yes {
					padding: 2px 0 2px 22px;
					background: url(../images/icon_yes.png) 0 50% no-repeat;
				}
				.rating .no {
					padding: 2px 0 2px 22px;
					background: url(../images/icon_no.gif) 0 50% no-repeat;
				}
	
	#add_review {
		margin-bottom: 20px;
		float: left;
		width: 690px;
	}
		#add_review fieldset {
			float: left;
			width: 410px;
		}
		#add_review h3 {
			padding-bottom: 5px;
			border-bottom: 1px solid #ddd;
		}
		#add_review fieldset { border: none; }
		#review_name, #review_email, #review_url, #review_review {
			padding: 5px;
			width: 400px;
			font-size: 110%;
			background: #f7f7f7; }
			#review_review {
				font-family: Verdana;
				font-size: 120%;
				height: 100px;
			}
		#add_review small { color: #999; }
		#form_details {
			margin-top: 25px;
			float: right;
			width: 240px;
			font-size: 90%;
		}
		#add_review .radio {
			margin-bottom: 2px;
		}
		#form_details h5 {
			margin-bottom: 10px;
			text-transform: uppercase;
		}

/* about */
#signatures { margin-top: 20px; }
	
/* contact */
#contact_content { padding-right: 125px; }
.form_contact { padding: 10px 0; }
	#contact_name, #contact_email, #contact_message {
		padding: 5px;
		width: 400px;
		font-size: 110%;
		background: #f7f7f7;
		border: 1px solid #ccc;
	}
	.form_btn {
		padding: 10px 20px;
		background: #ccc;
		border: none;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 90%;
		font-family: Verdana;
	}
	.form_btn.disabled {
		background: #e8e8e8; 
		color: #ccc; 
	}
		.form_btn:hover { 
			background: #00b5ff; 
			color: #fff; 
		}
		.form_btn.disabled:hover { 
			background: #e8e8e8; 
			color: #ccc; 
		}


/* forms */

.form {
	float: left;
	padding: 0 10px;
}

.form input[type="text"], .form textarea {
	padding: 5px;
	border: 1px solid #ccc;
	font-size: 200%;
	width: 685px;
}

.form textarea { 
	font-size: 120%; 
	font-family: "Verdana"; 
	height: 200px; 
	width: 685px; }

.form label {
	float: left;
	font-size: 120%;
	font-weight: bolder;
	margin: 10px 0px;
	width: 600px;
	vertical-align: top; padding: 0 20px 0 0; }
	
.form p.form_seperator { 
	border-top: 1px dotted #ccc; 
	padding-top: 15px; 
	margin-top: 10px; }
	.form p.form_seperator label { margin-top: -5px; }


/* error pages */
#error_message {
	margin: 40px auto; padding: 0 40px 20px 40px;
	width: 400px;
	background: #fff;
}
	#error_message h1 {
		margin: 0 auto 20px auto;
		display: block;
		float: none;
	}
	#error_message h2 { 
		margin-bottom: 10px; 
		font-size: 140%;
		line-height: normal;
	}