/***
 * CSS code to support http://www.bookpig.com
#a90533 Red
#72acd8 Blue/ Blue Light Gradient
#5076a7 Blue Dark Gradient
#231f20 Black
#d7d7d7  Grey 
#AAAAAA  Very Dark Grey 
#F3F2F0  Very Light Grey
NOTES:
- cluetip seem to be 96-98

 ***/
 
/******************* Defaults *******************/

* {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

body 
{
	font: 12px Arial, Helvetica, sans-serif;
	color: #231f20;
	background: #FFFFFF;
}

a {
	color: #5076a7;
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
}

:focus {
	outline: 0;
}

img {
	border-style: none;
    border-color: inherit;
    border-width: medium;
}

hr 
{
    margin: 20px 0px 0px 0px;
	height: 3px;
	color: #a90533;
    background-color: #a90533;
    clear:right;
}

input[type=reset],
input[type=submit],
input[type=button], .Button
{
    cursor: pointer; 
    color: White;
    background: url(Images/A/ButtonBackground.png);
    padding: 2px 2px 2px 2px;
    font-size: 10px;
    letter-spacing: 1px;
}

input[type=checkbox],
input[type=file],
input[type=image],
input[type=radio],
select,
label,
a {
	cursor: pointer; 
}
.NavButton
{
   color: #FFFFFF;
}

.nav
{
    color: White;
    position: relative;
    text-align: right;
    padding-right: 50px;
    padding-top: 3px;
    line-height:2.2em;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 0px;
    background: url(Images/A/TopNavBackground.png);
	height: 79px;
	background-repeat:repeat-x;
	
}

.nav p
{
    margin-bottom: 7px;
}

/******************* Global Classes *******************/
/***** floating classes *****/
.left { float: left; }
.right { float: right; }
.clear { clear: both; display: block;}


/***** visibility classes *****/
.visible { display: block; visibility: visible; }
.invisible { display: none; visibility: hidden; }


/***** list classes *****/
ul
{
    margin-top: 10px;
    margin-bottom: 10px;
}
ul li
{
    margin: 5px 0;
    padding-left: 20px;
    margin-left: 20px;
}

ul.starred  
{
    width: 350px;
    padding: 10px 0px 10px 10px;
    margin: 0px 0; 	
    list-style-type:none;
	list-style-image: none;
	background-color: #5076a7;
	color: White;
	font-size: 12pt;
}
ul.starred li   
{
    margin: 5px 10px 0px 10px; 
    padding-left: 20px; 
    background: url(images/FilledStar.png) no-repeat;
}

/***** book-cover classes *****/
.small-cover {display: block; margin: auto; cursor: pointer; }
.medium-cover {display: block; margin: auto; cursor: pointer; }
.medium-cover-greyed-out {display: block; margin: auto; cursor: pointer; 
    opacity: 0.5; /*Property opacity doesn't exist in CSS level 2.1 but exists in [css3]*/
    filter: alpha(opacity: 50); /*IE opacity*/
 }
.large-cover {display: block; margin: auto; cursor: pointer; }

/***** form and inputs classes *****/
table.form-table { width: 900; }
table.form-table td { padding: 8px 20px 8px 0; text-align: left; white-space: nowrap; }
table.form-table td td { padding: 0; white-space: normal; }

table.form-table-narrow { width: 700px; }
table.form-table-narrow td {padding: 8px 20px 8px 0; text-align: left; white-space: nowrap; }
table.form-table-narrow td td { padding: 0; white-space: normal; }


.validator { color: #a90533; font-weight: bold; }

.radiolist label { margin: 0 20px 0 10px; }

/*
.textbox { padding: 0px 0px 0px 3px; color: Black; border: solid 1px #72acd8; font-size: 10pt;}
.textbox.style2 { font-size: 2px; }
*/

.textbox { padding: 4px;  color: Black; border: solid 1px #72acd8; }
.textbox.style2 { font-size: 12px; }

.baseSuggestionsOnTextBox { padding: 4px;  color: Black; border: solid 1px #72acd8; }

/* modal-popup */

.modal-popup {
	max-width: 850px;
	max-height: 500px;
	padding: 24px;
	background: #F3F2F0;
	border: solid 1px #72acd8;
    overflow: auto;    
}

/*IE6 hack*/ * html .modal-popup {
	height: 500px;
	width: 850px;
}

.modal-popup-bg {
	background: #FFF;
	opacity: 0.7; /*Property opacity doesn't exist in CSS level 2.1 but exists in [css3]*/
	filter: alpha(opacity: 70); /*IE opacity*/
}

/* dropdown */

.PickGridImage
{
    cursor: pointer;
}

.popup-book-cover
{
 margin: 10px;
}
.popup-book-title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #a90533;
}

.popup-book-by
{
	display: block;
	font-size: 12pt;
	color: Black;
}

.popup-readingrange
{
}

.popup-description
{
	display: block;
	font-size: 10pt;
	color: Black;
	height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.popup-staffreview
{
    	font-size: 10pt;
	color: Black;
}

/***** messagebox classes *****/
.messagebox { margin-bottom: 20px; }
.messagebox-body { background-position: 8px 5px; background-repeat: no-repeat; min-height: 90px; padding: 5px 20px 20px 85px; }
/*IE6 hack*/ * html .messagebox-body { height: 90px; }
.messagebox-headline { display: block; font-size: 24px; font-weight: bold; color: #a02229; text-align: left;}
.messagebox-details { display: block; margin-top: 5px; font-size: 13px; color: Black; text-align: left; }

.messagebox-details a {color: Black; text-decoration: underline; }

.messagebox-info { background-color: #a5c5e0; background-image: url(images/InfoIcon.png); }
.messagebox-success { background-color: #bbdb95; background-image: url(images/SuccessIcon.png); }
.messagebox-error { background-color: #e2ac95; background-image: url(images/ErrorIcon.png); }

.messagebox-info .messagebox-headline { color: #5076a7; }
.messagebox-success .messagebox-headline { color: #5c8737; }
.messagebox-error .messagebox-headline { color: #a02229; }
ul.infoboxBulletPoints {
     text-align: left;
     list-style-position: inside;
     padding-left: 15px;
}

/******************* Main MasterPage Classes *******************/
#wrapper {
	width: 1000px;
	margin-left: auto ;
	margin-right: auto ;
}


#nav .logo {
	position: absolute;
	left: 0px;
	top: 5px;
}
/***** menu *****/
#menu {
	background: #72acd8 url(images/bg_menu-repeat.gif) repeat-x left bottom;
	border-bottom: solid 2px #FFF;
}

#menu li {
	float: left;
	margin-right: 40px;
	font-size: 13px;
	font-weight: bold;
	color: Black;
}

#menu li a {
	display: block;
	padding: 12px 0;
	color: Black;
	text-decoration: none;
}

#menu li a:hover,
#menu li.selected a {
	background: url(images/bg_menu_selected.gif) no-repeat 50% bottom;
	color: #72acd8;
}




/***** Main Content *****/
.Logo_Small
{
}
.leftNav
{
    width: 200px;
    display:block;
}

#main 
{
    width: 100%;
	min-height: 400px;
	text-align: left;
	background: #FFFFFF;
	font-size: 14px;
	margin-right: 55px;
}

#header 
{
    margin-top: -10px;
	min-height: 130px;
	text-align: left;
	font-size: 14px;
	margin-left: 25px;
}

/*IE6 hack*/ * html #content {
	height: 600px;
}

h1 {
	margin-bottom: 20px;
	font-size: 42px;
	font-weight: bold;
	line-height: 1em;
	color: #a90533;
}

h2 
{
	font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.3em;
	color: #5076a7;
}

h3 , .categoryLabel
{
	font-size: 20px;
	color: #5076a7;
}


/* Used in suggestions */
h4
{
    color: #a90533;
    font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
}

.leftNavLink
{
    color: #231f20;
    font-size: 12px;
}


.MarkedAsText
{
    background-color: #a90533;
    font-size: 10pt;
    font-weight: bold;
    color: white;
    position:relative;
    top: 60px;
    width: 110px;
    float:left;
    line-height: 1.2em;
    text-align: center;
    z-index: 1;
}    

.suggestions-counts
{
    font-size: 10pt;
    color: #5076a7;
    font-weight: bold;
}
.suggestions-menu {
	width: 180px;
	margin-left: 10px;
	z-index: 2;

}

.suggestionsBox
{
    border: solid 1px #72acd8;
    width: 770px;
    padding: 10px 0px 10px 0px;
}

.suggestionTitle
{
    font-size: 11px;
    width: 110px;
    line-height: 12px;
    color: #5076a7;
    font-weight: bold;
}
.suggestion-results
{
    z-index: 0;
    width: 540px;
}

.suggested-books .book {
	
	height: 190px ;
	padding: 10px 0px 5px 0px;
	text-align: center;
}

/*IE6 hack*/ * html .suggested-books .book {
	margin-left: 3px;
	margin-right: 3px;
}

.suggested-books .book .book-info {
	height: 75px;
}

.suggested-books .book .book-title {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: Black;
}

.suggested-books .book .book-by
{
	display: block;
	font-size: 10pt;
	color: Black;
}

.suggestions-queue-status-label
{
    text-indent: 10px;
    font-weight: bold;
    font-size: 12pt;
    color: #a90533;
    line-height: 14px;
}

.suggestions-queue-status-label-check
{
    position:relative;
    top: 3px;
    margin-bottom: 3px;
    float: left;
}

.notice
{
    font-weight: bold;
    color: #a90533;
    background-color: #E2AC95;
    padding: 4px;
    margin: 5px 0px 5px 0px;
}

.notice:before
{
content:url(Images/ErrorIcon.png);
float: left;
margin: 0px 4px 10px 4px;

}

.pricing-gridview {
	/* border: none; */
	width: 95%;
	margin-top: 20px;
	border-bottom: solid 1px black;
	font-size: 8pt;
}

.pricing-gridview .gridView-row 
{
	border-bottom: solid 1px black;
}

.bottom-black-border
{
 	border-bottom: solid 1px black;
}

.pricing-gridview .gridView-column {
	padding: 10px;
	border-bottom: solid 1px black;
	/*border: none;*/
}

.pricing-gridview .name-column {
	white-space: nowrap;
    text-align: center;
    font-size: 9pt;
}

.pricing-gridview .price-column {
	white-space: nowrap;
	font-weight: bold;
	color: #333;
}

.pricing-gridview .description-column 
{
    font-size: 9pt;
	text-align: center;
	width: 20%;
}


/***** Snapshot-grid **** */
.snapshot-grid
{
    border: solid 1px @72acd8;
    vertical-align: top;
    margin:30px 0px 0px 0px;
    padding:20px 5px 10px 0px;
    width: 400px;
    text-align:center; 
}

.snapshot-name
{
    padding: 8px 5px 8px 5px;
    font-weight: bold;
    text-align: left;
}

.snapshot-queued
{
    border-left: solid 1px black;
    padding: 8px 5px 8px 5px;
}

/***** return-book-grid *****/
.return-book-grid {
    border: solid 1px @72acd8;
    vertical-align: top;
    background:#d7d7d7;
    margin:8px 4px 0;
    padding:20px 5px 10px;
    width: 600px;

}

.return-book-item-title {
    color: #231f20;
    font-weight: bold;
    padding-bottom: 12px;
    margin-left: 24px;
    display: block;
    border: none;
}    

.return-book-item-authors {
    color: #231f20;
    padding-bottom: 12px;
    margin-left: 24px;
    display: block;
    border: none;
}

.return-book-image {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    
}

.return-checkbox {
    padding: 24px;
    text-align: center;
}


/* #content .login-form */


.login-form {
	position: relative;
	margin: 20px auto;
	border: solid 1px #72acd8;
	background: #F3F2F0 ;
}

.login-form .label-container {
	display: block;
	
	padding: 7px 12px 7px 12px;
	text-align: left;
}

.login-form .textbox {
	width: 250px;
	margin: 3px 0;
}

.login-form .checkbox-container {
	padding: 6px 0 6px 114px;
}

.login-form .checkbox-container label {
	margin: 0 15px 0 5px;
}

.login-form .login-button {
	margin: 20px 12px 12px 0;
}

.login-form .link {
	padding: 0 12px 4px 12px;
	font-size: 14px;
	font-weight: bold;
}

.login-form .failure {

	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

.login-form .validator {
	display: inline-block;
	width: 12px;
	height: 30px;
	margin-left: 5px;
	cursor: pointer;
	text-indent: -1000px;
	font-size: 20px;
	background: url(images/tip_icon.gif) no-repeat ;
}


/* #content gift-certificates */


.gift-certificates .start {
	width: 600px;
	margin: 40px auto;
}

.gift-certificates .start .box {
	width: 250px;
	height: 190px;
	padding: 15px;
	margin-right: 15px;
	border: solid 1px #72acd8;
	background: #F3F2F0 ;
}

/* give-gift .step1 */

.gift-certificates .give-gift .box {
	width: 420px;
	margin: 30px 0;
}

#footer 
{
    text-align: center;
    
}

#footer a 
{
	font-weight: bold;
	text-decoration: none;
	color: #a90533;
}

#footer a:hover
{
    text-decoration: underline;
}


/* Reading Level Graph */
.ReadingLevelGraph
{
    height: 110px;
    width: 260px;

        font-size: 8pt;

    color: Black;
 
}
.ReadingLevelInner
{
position: relative;
left: 10px;
top: 5px;
}
.ReadingLevel
{
margin-bottom: 10px;
}
.ReadingLevelGraphTitle
{
    font-weight: bold;
    color: #231f20;
}
.UserBar
{
    position:relative;
    top: 0px;
    background-color: #72acd8;
    white-space: nowrap;
    opacity: 0.7; /*Property opacity doesn't exist in CSS level 2.1 but exists in [css3]*/
    filter: alpha(opacity: 70); /*IE opacity*/
}

.UserTitle
{
    position:relative;
    top: 0px;
}


.BookBar
{
    position:relative;
    top: -4px;
    background-color: #a90533;
    white-space: nowrap;
    opacity: 0.7; /*Property opacity doesn't exist in CSS level 2.1 but exists in [css3]*/
    filter: alpha(opacity: 70); /*IE opacity*/
}

.BookTitle
{
    position:relative;
    top: -6px;
    margin-bottom: -8px;
}
.PreReading
{
    color: #AAAAAA;
       position:relative;
       font-size: 7pt;
       bottom: 0px;
       left: -15px;
}
.College
{
    color: #AAAAAA;
    font-size: 7pt;
       position:relative;
       left: 190px;
       bottom: 14px;
}


/* My Books */
.mybooks-single-image
{
margin: 20px;
}

.mybooks-staff-pick
{
    position: absolute;
    left: 100px;
    top: 60px;
}

.mybooks-part-of-a-series
{
    position: absolute;
    left: 100px;
    top: 0px;
}


.mybooks-athome-book-title
{
    color: #a90533;
    font-weight:bold;
    font-size: 11pt;
    display: block;
}
.mybooks-athome-authors
{
    color: #5076a7;
    font-size: 9pt;
    display: block;
    font-weight:bold;
}

.mybooks-book-title
{
    color: #a90533;
    font-weight:bold;
    font-size: 12pt;
    display: block;
}
.mybooks-authors
{
    color: #5076a7;
    font-size: 10pt;
    display: block;
    font-weight:bold;
}
.mybooks-series-count
{
    font-size: 9pt;
}
.mybooks-expected-availability
{
    font-size: 9pt;
}
.mybooks-date
{
    font-size: 9pt;
    padding: 0px 10px 0px 10px;
}

#simplemodal-overlay {background-color:#000;}
#simplemodal-container 
{
    overflow-y: hidden;
	overflow-x: hidden;
    
    width: 900px;
    background-color:#FFFFFF; border:8px solid #231f20; padding:12px;}
.simplemodal-close {text-align: right; display: block; }
#simplemodal-container a.modalCloseImg 
{
 visibility: hidden;
}




  
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * 
{
	margin:			0;
	padding:		0;
	list-style:		none;
	font: 9pt Arial, Helvetica, sans-serif;
    text-align: left;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	/* width:			10em; left offset of submenus need to match (see below) */
	border: solid 1px #72acd8;
    width: 140px;
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
		background: #F3F2F0;
}

.sf-menu li {
	float:			left;
	position:		relative;
	
}
.sf-menu a {
	display:		block;
	position:		relative;
	padding: 		.25em 1em .25em;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			1.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
	
}

/*** DEMO SKIN ***/
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
}
.sf-menu li li {
	width: 140px;
	background: #F3F2F0 ;
    z-index:		99;
}
.sf-menu li li li 
{
    z-index:		99;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline:		0;
    z-index:		99;	
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.suggestion-list-item {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	font-size: 12pt;
}
.suggestion-list-item:hover {
	background: #F3F2F0;	
}

.sf-vertical, .sf-vertical li 
{
    font-weight:bold;
    white-space: nowrap;
    color: #5076a7;
	width:	9em;
	line-height: 1.7em;
	z-index: 2;
}

.sf-vertical li:hover
{
    font-weight:bold;
    white-space: nowrap;
    color: #5076a7;
	width:	9em;
	line-height: 1.7em;
	background: #F3F2F0;
}


/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	left:	9em; /* match ul width */
	top:	0;
}


/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}


/*-------ClueTip------------*/

/* global */
#cluetip-close img {
  border: 0;
}
#cluetip-title {
  overflow: hidden;
}
#cluetip-title #cluetip-close {
  float: right;
  position: relative;
}
#cluetip-waitimage {
  width: 43px;
  height: 11px;
  position: absolute;
  background-image: url(Images/wait.gif);
}
.cluetip-arrows {
  display: none;
  position: absolute;
  top: 0;
  left: -11px;
  height: 22px;
  width: 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
#cluetip-extra {
  display: none;
}
/***************************************
   =cluetipClass: 'default' 
-------------------------------------- */

.cluetip-default {
  background-color: #d7d7d7;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #d7d7d7;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #5076a7;
  color: #fff;
}
.cluetip-default #cluetip-title a {
  color: #72acd8;
  font-size: 0.95em;
}  
.cluetip-default #cluetip-inner {
  padding: 10px;
  background-color: #F3F2F0;
}
.cluetip-default div#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

/* default arrows */

.clue-right-default .cluetip-arrows {
  background-image: url(Images/darrowleft.gif);
}
.clue-left-default .cluetip-arrows {
  background-image: url(Images/darrowright.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-default .cluetip-arrows {
  background-image: url(Images/darrowdown.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-default .cluetip-arrows {
  background-image: url(Images/darrowup.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}

@media print
{
    .PageBreak 
    {
        page-break-after:always;
    }
}

/* Gift Certificate Classes */
.giftCertificateAmounts
{
    font-size: 18pt;
    color: #a90533;
    font-weight: bold;
}

.smallHelpText
{
    font-size: 8pt; 
    font-weight: bold;
    color: #5076a7;
}

/* IE FIXES */
      #menu-header { 
          z-index:2; 
      }
      #menu-content { 
          z-index:1; 
      }  


.helpSubject
{
    display: block;
        font-size: 12pt; 
    font-weight: bold;
    color: #a90533;
}

.helpAnswer
{
    display: block;
    font-size: 10pt; 
    color: #5076a7;
}

.RoundedBox
{
    border: solid 2px #a90533; 
    padding: 4px 8px 4px 8px;
    margin-bottom: 6px;
}