/*BenBella Books WEB SITE STYLE SHEET*/
/**************************************************************************************
date:   	2/26/09
author:    	Laura Yeffeth
email:     	laura@laurayeffeth.com
website:   	http://www.benbellabooks.com/

/***** =COLOR SCHEME *****

Background 							#ffffff		White
Header/Footer background			#e2e8dd		Light Blue
Main Text							#252525		Dark Gray
Navigation Text						#464646		Medium Gray
TABS/LOGO/ h3 headings				#27627b		Blue
Darker Footer Text					#01557a		Medium Blue
Lighter Footer Text					#86bbc9		Light Blue
Active Tabs/h2 headings				#b81617		Red

/***** =LAYOUT *****/
html {font-size: 100%}
html, body, #container {height: 100%}
body > #container {height: auto; min-height: 100%;}
body {  
color: #252525;
font: 62.5%/1.4 Trebuchet, Arial, sans-serif;
height: 101%;
text-align: center; /* This centers the container in IE 5* browsers*/
}
div#container {
background: url(../media/header_background.png) top center repeat-x;
position: relative;
text-align: left; /* This overrides the text-align: center on the body element. */
}
#contentWrap {
padding-bottom: 140px;
overflow: auto;
}
#content {
position: relative;
width: 940px;
margin: 60px auto;
overflow: visible;
}
#sideContent {
width: 240px;
height: 500px;
float: left;
margin-bottom: 60px;
}
#mainContent {
width: 640px;
float: right;
padding-bottom: 40px;
}
/***** =TYPOGRAPHY *****/
h1, h1 a:link span {
font-size: 2em; 
line-height: 4em;
color: #24627b;
}
h2 {
background: no-repeat;
color: #b81617; 
height: 30px;
font-size: 3.5em; 
font-weight: 100;
line-height: .8em; 
text-transform: uppercase; 
width: 640px;
}
.books h2 {
border-bottom: 1px solid #db8a8b;
}
/*Replacement of page title text with text graphics*/
h2.bestsellers {background: url(../media/h2.png) 0 0;}
h2.upcoming {background: url(../media/h2.png) 0 -30px;}
h2.new {background: url(../media/h2.png) 0 -60px;}
#smartpop h2 {background: url(../media/h2.png) 0 -90px;}
#health h2 {background: url(../media/h2.png) 0 -120px;}
#business h2 {background: url(../media/h2.png) 0 -150px;}
#reference h2 {background: url(../media/h2.png) 0 -180px;}
#science h2 {background: url(../media/h2.png) 0 -210px;}
#advice h2 {background: url(../media/h2.png) 0 -240px;}
#memoirs h2 {background: url(../media/h2.png) 0 -270px;}
#ideas h2 {background: url(../media/h2.png) 0 -300px;}
#sports h2 {background: url(../media/h2.png) 0 -330px;}
#fiction h2 {background: url(../media/h2.png) 0 -360px;}
#agents h2 {background: url(../media/h2.png) 0 -390px;}
#authors h2 {background: url(../media/h2.png) 0 -420px;}
#press h2 {background: url(../media/h2.png) 0 -450px;}
#ourAuthors h2 {background: url(../media/h2.png) 0 -480px;}
#blog h2 {background: url(../media/h2.png) 0 -510px;}
#about h2 {background: url(../media/h2.png) 0 -540px;}
#staff h2 {background: url(../media/h2.png) 0 -570px;}
#contact h2 {background: url(../media/h2.png) 0 -600px;}
#privacy h2 {background: url(../media/h2.png) 0 -630px;}
#terms h2 {background: url(../media/h2.png) 0 -660px;}
#order h2 {background: url(../media/h2.png) 0 -690px;}

h3 {
font-size: 1.8em; 
margin: 1em 0;
text-transform: uppercase; 
font-weight: 400;
color: #27627b;
}
.books h3 {
font-size: 2.1em; 
margin: 1em 0 0 0;
}
h4 {font-size: 1.6em;}
h5, p, ul, ol {
font-size: 1.6em;
margin: 1em 0;
}
strong {
font-weight: 600;
}
ul {list-style: disc inside;}
ol {list-style: decimal inside;}

ul li.last {
background: none !important;
padding-right: 0 !important;
}
p.name {margin-bottom: 0;}
p.jobTitle {margin-top: 0;}
.disclaimers, .liability {
text-transform: uppercase;
}
/***** =LINKS *****/
a:link, a:visited {text-decoration: none; color: #27627b; border-bottom: 1px solid #27627b;}
a:hover, a:active {text-decoration: none; color: #b81617; border-bottom: 1px solid #b81617;}
a:hover span, a:active span {border-bottom: none; text-decoration: none; color: #b81617;}
#logo a:link, #logo a:visited, #navList li a:link, #navList li a:visited, #logo a:hover, #logo a:active, #navList li a:hover, #navList li a:active {border-bottom: none;}

/***** =IMAGE REPLACEMENT *****

Neal Image Replacement by Neal Venditto:  http://neal.venditto.org/
This technique allows for text to show up in place of images when style sheets 
are disable or when images are turned off.

In your html, add class "replace" to any text element you want to replace with an image.
Then surround the text with <span> tags. 
*/
.replace span {
position:relative;
z-index:-1;
}
.replace a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
border-bottom: none;
}
/***** =HEADER *****/
#header {
height: 177px;
width: 960px;
margin: 0 auto;
position: relative;
}
h1#logo {
padding-top: 21px;
width: 243px;
height: 137px;
float: left;
}
/*Using NIR Image Replacement Method for Logo*/
h1#logo a {
background: transparent url(../media/logo.png) 0 0 no-repeat;
overflow: hidden;
text-decoration: none;
}
h1#logo a:hover {
background: transparent url(../media/logo.png) 0 -137px no-repeat;
}
h1#logo a span { /* STYLING OF THE TEXT REPLACEMENT FOR THE IMAGE OF LOGO */
display: block;
text-transform: uppercase;
}
#subNav {
width: 300px;
float: right;
}
#subNav ul, #subNav form{
height: 27px;
float: right;
}
#subNav li {
list-style: none;
float: left;
padding: 0 8px;
background: transparent url(../media/divider.gif) center right no-repeat;
}
#subNav li a {
border-bottom: none;
text-transform: uppercase;
text-decoration: none;
font-size: .7em;
color: #000;
}
#subNav li a:hover, #subNav li a:active {
color: #b81617;
}
#subNav form {
background:transparent url(../media/search.png) 0 0 no-repeat; 
clear: right;
position: relative;
width: 268px;
}
#cse-search-box input {
border: none !important;
padding: 0;
}
#cse-search-box input#field {
position: absolute;
left: 6px;
top: 1px;
background-color: transparent;
height: 21px;
padding-top: 3px;
width: 231px;
font-size: 1.4em;
}
#cse-search-box input#button {
position: absolute;
top: 0;
right: 4px;
background-color: transparent;
height: 27px;
width: 31px;
}
/***** =NAVIGATION *****/

/***** =Main Navigation *****/
#navList {
position: absolute;
width: 684px;
height: 37px;
margin: 0;
background: transparent url(../media/navigation.png) 0 0 no-repeat;
list-style: none;
bottom: 0;
right: 0;
}
#navList li {
position: absolute;
top: 0;
display: block; /*eliminates any flickering of the hover images*/
height: 37px;
width: 110px;
padding-right: 4px;
}
#navList li.navBooks {left: 0;}
#navList li.navAgents {left: 114px;}
#navList li.navAuthors {left: 228px;}
#navList li.navPress {left: 342px;}
#navList li.navOurAuthors {left: 456px;} 
#navList li.navBlog {left: 570px;}

#navList li.navBooks a {background: transparent url(../media/navigation.png) 0 0;}
#navList li.navAgents a {background: transparent url(../media/navigation.png) -114px 0;}
#navList li.navAuthors a {background: transparent url(../media/navigation.png) -228px 0;}
#navList li.navPress a {background: transparent url(../media/navigation.png) -342px 0;}
#navList li.navOurAuthors a {background: transparent url(../media/navigation.png) -456px 0;} 
#navList li.navBlog a {background: transparent url(../media/navigation.png) -570px 0;}

#navList li.navBooks a:hover {background: transparent url(../media/navigation.png) 0 -37px;}
#navList li.navAgents a:hover {background: transparent url(../media/navigation.png) -114px -37px;}
#navList li.navAuthors a:hover {background: transparent url(../media/navigation.png) -228px -37px;}
#navList li.navPress a:hover {background: transparent url(../media/navigation.png) -342px -37px;}
#navList li.navOurAuthors a:hover {background: transparent url(../media/navigation.png) -456px -37px;} 
#navList li.navBlog a:hover {background: transparent url(../media/navigation.png) -570px -37px;}

/*The following code causes the active page to be highlighted in the navBar*/
.books #navList li.navBooks a {
background: transparent url(../media/navigation.png) 0 -37px;}
#agents #navList li.navAgents a {
background: transparent url(../media/navigation.png) -114px -37px;}
#authors #navList li.navAuthors a {
background: transparent url(../media/navigation.png) -228px -37px;}
#press #navList li.navPress a {
background: transparent url(../media/navigation.png) -342px -37px;}
#ourAuthors #navList li.navOurAuthors a {
background: transparent url(../media/navigation.png) -456px -37px;} 
#blog #navList li.navBlog a {
background: transparent url(../media/navigation.png) -570px -37px;}

/* Styling of text for navigation links if images are turned off */
#navList li a span {
background-color: #27627b;
border: 1px solid #86bbc9;
border-bottom: none;
color: #fff;
display: block;
font-size: .8em;
font-weight: bold;
height: 30px;
line-height: 2.4em;
padding: 0 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
#navList li a:hover span {
color: #b81617;
background-color: #fff;
border: 1px solid #86bbc9;
}
/***** =Side Navigation *****/
#content h3.browse {
font-size: 2.1em; 
text-transform: uppercase; 
text-align: center;
font-weight: 400;
color: #27627b;
height: 30px;
border-bottom: 1px solid #e2e8dd;
background: url(../media/browse.png) 0 0 no-repeat;
margin: 0;
}
#bookNav {
position: relative;
font-size: 1.4em;
margin-top: 0;
}
#bookNav li {
position: absolute;
list-style: none;
border-bottom: 1px solid #e2e8dd;
text-align: right;
text-transform: uppercase;
height: 34px;
width: 240px;
}
#bookNav li.bestsellers {top: 0px;}
#bookNav li.upcoming {top: 35px;}
#bookNav li.new {top: 70px;}
#bookNav li.smartpop {top: 105px;}
#bookNav li.health {top: 140px;}
#bookNav li.business {top: 175px;}
#bookNav li.reference {top: 210px;}
#bookNav li.science {top: 245px;}
#bookNav li.advice {top: 280px;}
#bookNav li.memoirs {top: 315px;}
#bookNav li.ideas {top: 350px;}
#bookNav li.sports {top: 385px;}
#bookNav li.fiction {top: 420px;}

#bookNav li a {
border-bottom: none;
color: #252525;
text-decoration: none;
font-size: .82em;
line-height: 3em;
display: block;
height: 34px;
}
#bookNav li a span {
display: block;
height: 34px;
width: 230px;
padding-right: 10px;
}
#bookNav li.mainBook a {
font-size: 1.1em;
line-height: 2.4em;
font-weight: 800;
}
#bookNav li a:hover {
color: #b81617;
background: url(../media/shading.png) repeat-y;
}
#bookNav li.subBook a:hover {
font-weight: 600;
}
/*The following code causes the active page to be highlighted in the navBar*/
#bestsellers #bookNav li.bestsellers a, #upcoming #bookNav li.upcoming a, #new #bookNav li.new a { color: #b81617; 
background: url(../media/shading.png) no-repeat;
}
#smartpop #bookNav li.smartpop a, #health #bookNav li.health a, #business #bookNav li.business a, 
#reference #bookNav li.reference a, #science #bookNav li.science a, #advice #bookNav li.advice a, 
#memoirs #bookNav li.memoirs a, #ideas #bookNav li.ideas a, #fiction #bookNav li.fiction a, #sports #bookNav li.sports a {
color: #b81617; 
background: url(../media/shading.png) repeat-y;
font-weight: 600; 
}
/***** =MAIN CONTENT *****/
.category {
overflow: auto;
width: 640px;
clear: both;
}
p.more {
margin: 0;
text-align: right;
color: #b81617;
}
.book {
float: left;
height: 220px;
width: 170px;
margin: 30px 42px 0 0;
overflow: visible;
}
.book p {
width: 170px;
font-size: 1.1em;
margin: 0;
}
.book img {
height: 150px;
width: 100px;
border: 1px solid #cccccc;
}
.title {
text-decoration: underline;
}
.author {
margin-bottom: 30px; 
}
/***** =FOOTER *****/
#footerWrap {
position: relative;
margin-top: -140px; /* negative value of footer height */
height: 140px;
background: url(../media/footer_background.png) bottom center repeat-x;
clear: both;
} 
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#footer {
position: relative;
width: 960px;
margin: 0 auto;
padding-top: 28px;
height: 84px;
font-size: .8em;
}
#footer img {
width: 150px;
height: 84px;
margin: 0 55px;
float: left;
}
#footer ul {
position: absolute;
right: 10px;
width: 690px;
height: 13px;
float: right;
text-align: right;
margin: .5em 0;
}
.siteInfo {bottom: 0;}
.footerNav {bottom: 32px;}

#footer ul li {
border-bottom: none;
display: inline;
list-style: none;
text-decoration: none;
font-size: .85em;
height: 13px;
}
.footerNav li {
padding: 0 8px;
background: transparent url(../media/divider.gif) center right no-repeat;
}
.siteInfo li {
padding: 0 6px 0 15px;
background: transparent url(../media/check.gif)  2px -2px no-repeat;
}
#footer .footerNav li, #footer .footerNav li a:link, #footer .footerNav li a:visited {
border-bottom: none;
text-decoration: none; color: #01557a; 
}
#footer .footerNav li a:hover, #footer .footerNav li a:active {
border-bottom: none;
text-decoration: none; color: #b81617; 
}
#footer .siteInfo li, #footer .siteInfo li a:link, #footer .siteInfo li a:visited {
border-bottom: none;
text-decoration: none; color: #86bbc9; 
}
#footer .siteInfo li a:hover, #footer .siteInfo li a:active {
border-bottom: none;
text-decoration: none; color: #b81617; 
}
/***** =FORM *************************************************************************/
form {
}
form ul li {
list-style: none;
margin: 0;
}
label {
display: block;
margin-top: 20px;
}
input {
width: 300px;
}
input.name, input.email {
height: 20px;
border: 1px solid #86bbc9;
}
input.button {
margin-top: 20px;
width: 50px;
}
input.check {
margin: 0 10px 0 0;
border: 1px solid #86bbc9;
}
textarea {
width: 560px;
border: 1px solid #86bbc9;
}
li.info, li.project {
margin: 40px 0 10px;
}
form em {
font-size: .9em;
font-style: italic;
}