/*11L | core.css*/
*, ul, li, fieldset, form, input {margin: 0; padding: 0; border: 0px}
ul, li {list-style: none}
em {font-style: normal}
body {background: #dfe0e3 url(../images/body-bg.gif) top left repeat-x; color: #444;}

/*header*/
#header {width: 100%; height: 34px; overflow: hidden; background: url(../images/header-full-slice.gif) top left repeat-x;}
#headerWrap {width: 95%; padding: 0; overflow: hidden; min-width: 962px}
a.logo {cursor: pointer; width: 237px; background: url(../images/logo.png) top left no-repeat; position: absolute; top: 0; left: 2.5%; height: 69px; z-index: 1000}

/*utility*/
.utility {width: 500px; float: right; padding: 4px 0 5px; color: #d8d8d8; text-align: right; font: 10px/18px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;;}
.utility a {color: #fff; font: 10px/18px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;; padding: 0 3px; }

/*content*/
#content {width: 100%; overflow: hidden; min-width: 1004px}

/*sidebars*/
#readerSidebar, #mainSidebar {float: left; width: 20%; min-width: 180px; overflow: hidden}
#readerSidebar {position: fixed; top: 80px; left: 0; min-width: 201px}
#mainSidebar {margin-top: 93px;}
#jsMath_Warning {position: fixed; top: 30%; left: 30%}

/*mainMenu*/
.mainMenu {width: 151px; float: right; overflow: hidden;}
.mainMenu li {display: block; clear: both; font: normal 11px/11px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; text-align:left; text-transform: capitalize}
.mainMenu li a, .mainMenu li span {background: url(../images/menu-slice.png) top left repeat-y; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #666; display: block; padding: 10px 20px; position: relative; width: 111px}
.mainMenu li span {background: #fff; border-bottom: 1px solid #ededed; color: #2f3543; font-weight: bold}
.mainMenu li a:hover {text-decoration: none; color: #2f3543; background: #fff ; font-weight: bold}
.mainMenu li.top a {background: transparent url(../images/menu-top.png) top left no-repeat; border-bottom: 0px; border-top: 0px; padding-top: 12px}
.mainMenu li.top span, .mainMenu li.top a:hover {background: transparent url(../images/menu-top-active.png) top left no-repeat; border-bottom: 0px; border-top: 0px; padding-top: 12px}
.mainMenu li.bottom a {background: url(../images/menu-bottom.png) bottom left no-repeat; border-bottom: 0px; border-top: 0px; padding-bottom: 15px}
.mainMenu li.bottom span, .mainMenu li.bottom a:hover {background: transparent url(../images/menu-bottom-active.png) bottom left no-repeat; border-bottom: 0px; border-top: 0px; padding-bottom: 15px;}

/*contentContainer*/
#contentContainer, #contentContainer-bl {background: #fff url(../images/content-left.png) bottom left no-repeat; overflow: hidden; float: right; width: 80%; min-height: 450px; min-width: 802px}
#contentContainer-bl {background: #fff url(../images/content-bottom-left.gif) bottom left no-repeat; clear: both; height: 21px; min-height: 21px; position: relative}

/*mainContainer*/
.mainContainer {width: 722px; padding: 40px 45px; overflow: hidden}

/*featureContainer*/
#featureContainer {width: 722px; padding: 40px 45px; overflow: hidden}


/*featureBody*/
#featureBody {float: left; width: 440px}
.logoTagline {background: url(../images/logo_tagline.gif) top left no-repeat; display: block; height: 109px; width: 380px; margin-top: 22px}
.registerNow {color: #fff; display: block; width: 128px; height: 32px; margin: 10px 0 0 2px; background: url(../images/registerNow.png) top left no-repeat; text-align: center; font: bold 15px/32px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; text-transform: uppercase;}
.registerNow:hover {background: url(../images/registerNow.png) bottom left no-repeat}

.howItWorks {color: #fff; display: block; width: 128px; height: 32px; background: url(../images/howItWorks.png) top left no-repeat; text-align: center; font: bold 15px/32px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 20px 0}
.howItWorks:hover {background: url(../images/howItWorks.png) bottom left no-repeat; }



/*benefitsList*/
#benefitsBox {background: #fafafa; border: 1px solid #ddd; width: 628px; padding: 40px 45px; margin: 0px 0 35px 45px; text-align: center; overflow: hidden; }
#benefitsBox p {font: normal 12px/18px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif }
#benefitsBox p.big {font-size: 14px; color: #555}

#benefitsBox p.bigger {font-size: 18px; color: #373d49}
#benefitsBox p.bold {font-weight: bold}

ul.benefitList {padding: 15px 0; width: 600px; margin: 12px; overflow: hidden; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd}
ul.benefitList li {color: #373d49; text-transform: capitalize; display: block;  width: 150px; float: left; text-align: center; font-weight: bold; font-size: 13px; padding-top: 76px}
.makeNotes {background: url(../images/notesIcons.png) top center no-repeat; }
.anyBrowser {background: url(../images/anyBrowser.png) top center no-repeat; }
.saveTrees {background: url(../images/saveTrees.png) top center no-repeat; }
.itsFree {background: url(../images/itsFree.png) top center no-repeat; }

.moreInfo {width: 300px; float: left; text-align: right; padding-right: 20px}
.moreInfo p {padding: 5px 0}
#benefitsBox .moreInfo p.big {padding-top: 20px; padding-bottom: 0px; text-transform: capitalize; line-height: 18px; color: #373d49}

.screenWrap {width: 276px; float: right}
#benefitsBox a.howItWorks {position: relative; margin: 0 0 0 75px}
a.screenShot {display: block; width: 276px; height: 170px; margin-top: -25px; background: url(../images/screen.png) top left no-repeat}
.capitalize {text-transform: capitalize}

/*loginContainer*/
#loginContainer {float: right; width: 197px; height: 162px; padding: 20px; background: #e7e8e7 url(../images/login-bg.png) top left no-repeat}
#loginContainer h3 {color: #444; font-size: 14px}
#loginContainer ol {padding: 5px 0; display: block}
#loginContainer ol li {padding: 3px 0; display: block}
#loginContainer .buttons ol {padding-top: 0px}
#loginContainer label {	font: bold 10px/13px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;  text-transform: uppercase; color: #555; padding-left:1px; padding-bottom: 2px; display: block}
input#session_email, input#session_password {width: 180px; padding: 4px 5px; font: bold 11px/14px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;  color: #555; border: 1px solid #ccc; background: #fff}

/*bookContainer*/
#bookContainer {float: left; width: 100%; min-width: 802px; overflow: hidden}

/*breadcrumbs*/
#crumbs {border-bottom: 1px solid #eee; display: block; padding: 30px 0 10px; margin: 0 45px 23px; color: #658775; width: 712px; clear: both; overflow: hidden}
#crumbs a {font: normal 10px/14px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; text-transform: capitalize; color: #666; }

/*book-body*/
#book-body {width: 65%; padding: 0 45px 30px}

/*notesContainer*/
#notesContainer {float: left; padding: 0 20px}
.notes {font: normal 11px/16px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; color: #333; border: 1px solid #faef5e; padding: 10px; background: #FFF790 /* url(../images/notes-bg-slice.png) repeat-x scroll left 1px */; margin: 20px 0; left: 75%; width: 20%}
.notes .save, .notes .cancel, .notes .edit { font-size: 10px; line-height: 14px; padding-top: 3px; color: #555; display: block; text-align: right; } /* DP */
.notes .save { float: right; position: relative; } /* DP */
.notes .cancel { float: left; position: relative; } /* DP */
a.addNote {background: url(../images/addNote.png) top left no-repeat; position: absolute; left: 99%; top:1.0em; height: 22px; width: 38px}
a.addNote:hover {background: url(../images/addNote.png) bottom left no-repeat}
textarea.editinplace {background: url(../images/notes-textarea-bg.png) 0px left repeat-x; height: 200px; width: 100%; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;}

/*next*/
.next a, .next span {background: url(../images/next.png) top left no-repeat; display: block; width: 89px; height: 30px}
.next a:hover {	background: url(../images/next.png) bottom left no-repeat}
.next span.endOfBook {background: url(../images/end.png) bottom left no-repeat}
#book-body .next {margin-top: 15px}
#readerSidebar .next a, #readerSidebar .next span {background: url(../images/nextTab.png) top left no-repeat; float: right; margin: 5px 0 20px}
#readerSidebar .next a:hover {	background: url(../images/nextTab.png) bottom left no-repeat}
#readerSidebar .next span.endOfBook {background: url(../images/endTab.png) bottom left no-repeat}

/*highlight*/
.highlight {overflow: hidden; float:right; width: 63px; padding: 0 10px 10px; clear: both }
.highlight a  {display: block; float: left; width: 28px; height: 23px}
a#highlightOn {background: url(../images/highlight.png) bottom left;}
a#highlightOn:hover, #highlightOn.active {background: url(../images/highlight.png) top left;}
a#highlightUndo {background: url(../images/erase.png) bottom left; float: right}
a#highlightUndo:hover, #highlightUndo.active {background: url(../images/erase.png) top left;}
.highlighted div.paragraph {background: none;}
.highlighted, .highlighted * {background: #FFF790;  color: #333}

/*toc*/
.tocWrap {padding-top: 27px; width: 170px; float: right; background: url(../images/tocHeader.png) top left no-repeat; height: 350px; overflow-x: hidden; overflow-y: auto;}
ol.toc {background: url(../images/tocBottom.png) bottom left no-repeat; clear: both; display: block; width: 100%; padding-bottom: 10px}
ol.toc li {font: 9px/12px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;; }
.toc a {background: #fbfbfb; color: #666; padding: 8px 15px 10px; width: 130px; display: block; border-top: 1px solid #dbdbdb}
.toc li .chapter {text-transform: none; font-weight: normal}
.toc li.active {background: #fff; border-left: 1px solid #bbb}
.toc li.active a.chapter {background: #5b606b; border-top: 4px solid #373D49; color: #fff; display: block; padding-bottom: 10px; padding-top: 6px}
.toc li.active a {color: #2f3543; font-weight: bold; background: #fff}
.toc li.active ol.sections {padding-bottom: 10px; padding-top: 6px} 
.toc li.active ol li a {font-weight: normal; display: block; padding: 4px 20px; border-top: 0px; width: 120px} 
.toc li.active ol li.current a {font: bold 10px/14px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;  color: #373d49} 
.toc li ol li {display: none}
.toc li.active ol li {display: block}
.toc span {display: none;}
.toc span.active {display: block;}

/*chapterSets*/
.setsTab {width: 94px; margin: 14px 0; float: right}
.chapterSets {font: 9px/12px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;;}
.chapterSets a {border-top: 1px solid #dbdbdb;  padding: 6px 9px 7px; border-bottom: 1px solid #bbb; background: #fafafa; border-left: 1px solid #dedede; text-transform: none; font-weight: normal; display: block}

/*formContainer*/
#formContainer {width: 722px; padding: 40px 45px; overflow: hidden} 
#formContainer form {padding: 10px 0}
#formContainer form li#user_terms_of_service_input {margin-top: 10px}
#formContainer .commit {margin-bottom: 5px}
#formContainer p {padding: 5px 25% 26px 0; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;}
#formContainer .errorExplanation p, #formContainer p.inline-errors, #failure  {color: #ee0a1c;  padding: 0px 0 5px}
#formContainer p.inline-errors {font-size: 11px; font-style: italic}
#formContainer span.required-message {color: green;}
#formContainer li.required.error abbr {color: green; font-size: 14px;}

/*forms*/
form ol {padding: 5px 0; display: block}
form ol li {padding: 3px 0; display: block}
form .buttons ol {padding-top: 0px}
form input, form textarea {width: 170px; padding: 3px 4px; font: bold 12px/14px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;  color: #555; border: 1px solid #ccc; background: #fbfbfb; cursor: pointer; outline: none}
form input[type=hidden] { display: none !important; }
form input:focus {background: #fff}
form select {color: #555; border: 1px solid #ccc; background: #fbfbfb}
form label {font: bold 10px/12px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;  text-transform: capitalize; color: #555; padding-left:1px; padding-bottom: 2px; display: block}
form input.submit, form input.create {color: #fff; width: 89px; font: bold 10px/10px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; height: 30px;  border: 0px; text-transform: uppercase; background: transparent url(../images/button.gif) no-repeat scroll left bottom; text-align:center; /* -moz-border-radius: 8px; -webkit-border-radius: 8px */}
#loginContainer form input.submit {background: url(../images/blueButton.png) no-repeat left top; font-size: 9px; line-height: 9px; padding: 5px 0 7px; width: 55px; height: 25px}
#loginContainer form input.submit:hover {background: url(../images/blueButton.png) no-repeat left bottom; }

form input#user_terms_of_service, form input#user_age_18_or_older {height: 10px; width: 10px; vertical-align: top; margin-right: 10px}
form#new_user ol, form#edit_user_1 ol {float: left; width: 300px}
form#new_user ol li ol li, form#edit_user_1 ol li ol li {width: 30%; float: left}
form#new_user ol li.date ol li {width: auto; padding-right: 10px;}
form ol li#user_birthdate_input {padding: 3px 0; display: block; width: 100%; overflow: hidden}
fieldset.inputs {padding-top: 5px}

/*errors*/
.errorExplanation ul {display: none}
.showErrorsOnBase .errorExplanation ul {display: block; color: #ee0a1c;}

/*user feedback*/
#success, #failure, #notice {color: green; font-family: "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; font-size: 11px; position: relative; top: 35px; left: 46px; width: 90%;}

/*buttons*/
.button, .submit, #addBook form input, #my-books form input, input.update {
	background: transparent url(../images/button.gif) no-repeat scroll left top; text-align:center; 
	color: #fff; 
	font: bold 10px/10px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; 
	text-transform: uppercase; 
	text-align: center;
}

#addBook form input, #my-books form input {
	margin-top: 14px;
	color: #444;
	display: block;
	width: 89px; 
	font: bold 10px/10px "Lucida Grande", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; 
	height: 30px;  
	border: none; 
	text-transform: uppercase; 
	background: transparent url(../images/button.gif) no-repeat scroll left top; 
	text-align:center;
}

a.bigButton:hover, input.bigButton:hover, .signupContainer a:hover {text-decoration: none; color: #222}
#addBook form input, #my-books form input {margin-top: 8px}

/*add book, bookshelf*/
.mainContainer #my-books ul, .mainContainer ul#addBook {width: 100%; overflow: hidden; padding: 0 0 25px 0}
.mainContainer li.book {width: 42.5%; height: 125px; padding: 15px 7.5% 15px 0; float: left; overflow: hidden; list-style: none}
li.book a.imgWrap {display: block; float: left; width: 75px; height: 125px; padding-right: 20px}
li.book a.imgWrap img {width: 75px; border: 1px solid #eee;}
li.book a.bookDetailsWrap {padding: 2px 20px 3px; font-size: 14px; float: right}
li.book span.subTitle {font-size: 11px; text-transform: capitalize}

/*footer*/
#footer {font: normal 10px/16px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;; text-align: right; text-transform: capitalize; color: #666; width: 95%; min-width: 967px; padding: 10px 0; clear: both; margin: 3px 0; overflow: hidden;}
.footerLinks {background: transparent; float: right; width: 804px}
.footerLinks a {text-decoration: none; color: #666; padding: 0 5px}
.footerLinks a.first {padding-left: 0px}
.copyright {display: block; margin-top: 8px; float: right; height: 20px; width: 170px; background: url(../images/copyright.png) top left no-repeat}

/*global classes*/
.hide {display: none}
.clear {clear: both}
.left {float: left}
.right {float: right}
.forty {width: 40%}
.thirty {width: 30%}