@import url("GannSite.css");

/* OnlineStore Elements */
/*
	Page Structure
	+-body----------------
	+--page---------------
	|
	|    siteNav/siteLogo
	|
	|    content
	|
	|
	|
	|    footer
	|
	+----------------------
*/
#page {
	width: 800px;
	margin: 0 auto;
}

#siteNav {
	padding: 0;
	text-align:center;
/*border-bottom:25px solid #b6c7e5; light-blue ban under old graphic tabs*/
}

#siteLogo {
	padding: 0;
	text-align:center;
}

#content {
	padding: 10px 0;
	margin-bottom: 10px;
}

#footer {
	clear: both;
	font-size: 1.1em;
	color: #777;
	line-height: 1.2em;
	text-align: center;
	margin: 20px 0;
	padding: 4px 0;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}

#content img { /*visa mastercard*/
	margin:0 4px;
	vertical-align:middle;
	border:0;
}

/*
	Inside "content", do shopping cart flow
	+--content----------------------------
	|    shoppingPage
	|    shoppingBar          shoppingCart
	|
	|
	+-------------------------------------
*/
#shoppingPage {
	/* Need "relative" for shoppingCart's absolute. Without offset, this element is not being positioned */
	width: 700px;
	margin: 0 auto;
	position: relative;
}

#shoppingBar {
	position: relative;
	top:0;
	left:0;
	right:60%;
	width:60%;
	height:2em;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size:1.1em;
/*	background-color:#9CF;*/
}

#shoppingCart {
	/* Free from page order */
	position: absolute;
	top:0;
	left:61%;
	right:0;
	width:39%;
	height:2em;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size:1.2em;
	color:#F90;
/*	background-color:#EEE;*/
}

#shoppingCart a {
	color:#F90;
}

#shoppingCart form {
	display:inline;
}

.incart {
	color:#F90;
	padding: 0.25em 1em;
}

/*
 ---------------------------------------------------------------------------------------------
*/

.notiBox {  /* notification box */
	margin: 4px;
	padding: 4px;
	text-align:center;
	background-color:#FFFFFF;
	border: 1px solid #CCC;
	color: #CC0033;
}

.notiBoxC { /* used in Checkout, with checkout color */
	margin: 6px auto;
	padding: 4px;
	text-align: center;
	background-color: #EE6600;
	color: #FFF;
}

/*
	Catalog Page
	+-------------------------
	|		<h1> State
	|		<h2> Law
	|		<a> Book title
	|		<a> Book title
	|		<a> Book title
	|   <strong> "In Cart"
	+-------------------------
*/
#webinar-tb tr > td + td,
#gannprime-tb tr > td + td {
	width: 15%;
	text-align:center;
}


.catalog {
	width: 100%;
	/*
		Neutralize to browser's base size first; h1, h2 inside then scale as expected.
		Don't put size to <td> because everything else will scale based on its size.
		This is why <p> is used inside <td>.
	*/
	font-size: 1em;
}

.catalog td {
	padding: 2px;     /* help compact whitespace */
	font-size: 1.2em; /* cover a, strong, but not p */
}

.catalog p {
	font-size: 1.1em;	/* for gannprime text */
}

.catalog td span{
	padding-left: 20px;	/* indent book title */
}
.catalog h1, .catalog h2, .catalog a {
	font-weight: bold;
}

.catalog h1 {
	font-size: 1.5em;
	color: #900;
	text-align: left;
	margin: 10px 0 0 0;
}

.catalog h2 {
	font-size: 1.3em;
	color: #006;
	margin: 2px 0 2px 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #CCC;
	text-align: left;
}

.catalog a:link, .catalog a:visited  { /* Book title */
	text-decoration: none;
	color: #3163CE;
}

.catalog a:hover, .catalog a:active {
	text-decoration: underline;
	color: #3163CE;
}


/* cartAdd.cfm (table inside form) */

.productOptions th,
.productOptions td {
	margin: 0;
	padding: .1em;
	font-size: 1.2em; /* h1 & h2 inside are sized relatively based on this value! (add_to_cart, edit_cart) */
}

.productOptions th {
	color: #888;
}

.productOptions p{
	color: #555;
	font-size: .9em;
}

.productOptions h1 {
	color: #003471;
	margin: 0;
	font-size: 1.5em;
	line-height: 1.5em;
}


/* add_bundle.cfm */

.gannprimeText {
	color: #3163CE;
	font-weight: bold;
}

.gannprime h1 {
	color: #3163CE;
	margin: 0;
	font-size: 1.7em;
	line-height: 1.7em;
}

.gannprime h2 {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.3em;
}

.gannprime fieldset { /* 8/14/08 -- make one long column per mp */
	font-size: 1.2em;
	margin-bottom: 10px;
	padding: 10px 20px;
	border: 1px solid #BBB;
}

.gannprime legend {
	font-size: 1.2em;
	font-weight: bold;
	color: #006;
}

.gannprime fieldset em {
	color: #006;
	display: block;
	margin-top:5px;
}


/* cart.cfm (table inside form) */

.cart th,
.cart td {
	font-size: 1.2em;
}

.cart table {
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
}

.cart thead,
.cart tfoot {
	/*Qty, Title, Price*/
	/*Cart Subtotal*/
	border-color: #DDD;
	border-width: 2px;
}

.cart tbody {
	border-color: #DDD;
	border-width: 1px;
	vertical-align:top;
}

.cart thead th {
	/*Qty, Title, Price*/
	color: #999;
}

.cart tbody td span,
.cart tbody span input[type="submit"] {
	/*Remove checkbox, Edit button*/
	font-size: 0.9em;
	margin:0.3em;
}

.cart tfoot th {
	text-align: right;
	font-weight: bold;
	color: #F90;
}

.cart tfoot td{
	text-align: right;
	font-weight: bold;
}

.cart h1 {
	color: #F90;
	margin: 0;
	font-size: 1.5em;
	line-height: 1.5em;
}


/*
	cartAdd.cfm
	cart.cfm
	add_bundle.cfm
*/

input[type="submit"].focalPoint {
	font-size: 1.5em;
	color: #222;
}


/*
  Checkout
	+--content----------------------------
	|    <checkoutPage>
	|
	|		 <form>
	|			 <label>	<input>
	|								<p>
	+-------------------------------------
*/

#checkoutPage {
	margin-left: 3%;
	margin-right: 3%;
	/* auto width centers this block */
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	/* Neutralize browser's base size. Same as .catalog */
	font-size: 1em;
	color: #333;
}

#checkoutPage p {
	font-size: 1.1em;
}

#checkoutLoginCart {
	float:left;
	width:26%;
	margin-left:0;
	margin-right:4px; /*margin-right:1%; one percent was too wide*/
	margin-top:1.5em; /*make table aligned with h1*/
	margin-bottom:0;
	font-size:1.1em;
	color:#666;
	padding:6px;
	border:1px dotted #999;
}

#checkoutLoginCart table caption {
	font-size: 1.4em;
	margin-top: 1em;
	margin-bottom:0;
	padding:0.5em;
	color:#444;
}
#checkoutLoginCart td {
	vertical-align:top;
}
#checkoutLoginCart table tr.tbfoot th {
	text-align:right;
	font-weight:normal;
}
#checkoutLoginCart table tr.tbfoot td {
	text-align:right;
}

#checkoutLoginExisting {
	/* These 2 blocks meet in the middle by making % add up to 100%, then -1% for its border. */
	float:left;
	/*width:47%;*/
	width:33%;
	margin-left:2%;
	margin-right:0;
	padding-right:1%;
	border-right:1px solid #999;
	margin-top:0;
	margin-bottom:0;
}

#checkoutLoginNew {
	float:right;
	/*width:47%;*/
	width:33%;
	margin-left:0;
	margin-right:2%;
	margin-top:0;
	margin-bottom:0;
}

#checkoutReviewOrder {
	float:left;
	width:49%;
	margin-left:5%;
	margin-right: 0;
	padding: 10px;
	font-size: 1.2em;
}

#checkoutReviewPayment {
	float:right;
	width:24%;
	margin-right:5%;
	margin-left: 0;
	padding: 10px;
	font-size: 1.2em;
}

#checkoutReviewOrder h3,
#checkoutReviewPayment h3 {
	font-family:'Lucida Grande',Verdana,Tahoma,sans-serif;
	border-bottom: 2px solid #CCC;
	padding: 2px 0;
	margin-top: 1em;
	margin-bottom:0.5em;
}

#checkoutReviewPrimeCredit {
	margin-left: 10%;
	margin-right: 10%;
	/* auto width centers this block */
	width: auto;
	padding: 6px 10px;
	font-size: 1.2em;
	border: 1px solid #FF9933;
}

#checkoutReviewOrder table tr.tbfoot th,
#checkoutReviewPrimeCredit table tr.tbfoot th {
	text-align:right;
}

#checkoutReviewOrder table tr.tbfoot td,
#checkoutReviewPrimeCredit table tr.tbfoot td {
	text-align:right;
	font-weight:bold;
}

#checkoutPage form {
	margin:0;
	padding:10px 0;
	font-size:1.2em;
}

#checkoutPage form h1,
#checkoutPage h1 {
	font-family:'Lucida Grande',Verdana,Tahoma,sans-serif;
	color: #444;
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom:0.5em;
}

#checkoutPage h1 {
	/*
		Overwrite to make all h1 same size.
		This h1 outside form inherits 1em size, not form's 1.2em (1.2-1=.2 So up size .2)
	*/
	font-size: 1.7em !important;
}

#checkoutPage form h2 {
	font-family:'Lucida Grande',Verdana,Tahoma,sans-serif;
	font-size: 1.3em;
	margin-top: 1em;
	margin-bottom:0.5em;
	color: #FF6600;
}

#checkoutPage form h3 {
	font-family:'Lucida Grande',Verdana,Tahoma,sans-serif;
	font-size: 1.2em;
	margin-top: 1em;
	margin-bottom:0.5em;
}

#checkoutPage form label {
	width: 9em;
	float: left;
	text-align: right;
	margin: .1em .5em;
	clear: both;
}

#checkoutPage form label.required {
	font-weight: bold;
	color:#000000;
}

#checkoutPage form label.error {
	font-weight: bold;
	color: #CC0033;
}

#checkoutPage form input,
#checkoutPage form select {
	float: left;
	margin: .1em .5em;
}

#checkoutPage form p {
	float: left;
	margin: .1em 0 .1em 10.5em; /* make text aligned to input */
	clear: both;
	font-size: 1em;
	font-weight: normal;
}

#checkoutPage form input[type="submit"] {
	/* help prevent clicking change address button by accident */
	font-size: 1.2em;
	color: #555;
	*font-size:1em; /* ie had button across and over paragraph */
}

#checkoutPage form input[class="confirm-btn"] {
	/* help prevent clicking change address button by accident */
	font-size: 1.3em;
	color: #333 !important;
	*font-size:1.1em; /* ie had button across and over paragraph */
	display:inline;
}

#checkoutPage form #submitBtn {
	float: none;
	margin-top:1em;
	margin-bottom: 1em;
	margin-left: 40%;
	margin-right: 40%;
	clear: both;
	font-size: 1.3em;
	*font-size: 1.2em;
	color: #000;
}

#checkoutPage form #finalBtn {
	float: none;
	margin-left: 40%;
	margin-right: 40%;
	clear: both;
	font-size: 1.5em;
	font-weight: bold;
	color: #000;
}

#checkoutPage form br {
	clear: both;
}

/* 
	Overwrite to help fixing checkoutLogin.cfm after showing shopping cart, #checkoutLoginCart.
*/
#checkoutPage #checkoutLoginExisting form label,
#checkoutPage #checkoutLoginNew form label {
	width: 5em;
}

#checkoutPage #checkoutLoginExisting form p,
#checkoutPage #checkoutLoginNew form p {
	margin: .1em 0 .1em 6.5em; 
}

#checkoutPage #checkoutLoginExisting form #submitBtn,
#checkoutPage #checkoutLoginNew form #submitBtn {
	margin-left: 30%;
	margin-right: 50%;
}

ul.inline-form {
	display:inline;
	list-style:none;
}

ul.inline-form li {
	display:block;
	float:left;
	margin:0;
	padding:0;
}

ul.inline-form li label {
	display:block;
	/* overwrite checkout form's label */
	float:none !important;
	width:auto !important;
	text-align:left !important;
	margin:.1em .5em;
}

ul.inline-form li label input {
	display:block;
	float:none;
	margin:.1em .5em;
}

/* Check out: profile ui */
.grid-g {
	width:100%;
	display:block;
	clear: both;
}
.grid-u-left {
	width:47%;
	margin-left:0;
	margin-right:1px;
	float:left;
	/*padding 10px takes 3%*/
	padding:10px;
	clear:left;
	display:block;
}
.grid-u-right {
	width:46%;
	margin-left:1px;
	margin-right:0;
	float:right;
	padding:10px;
	clear:right;
	display:block;
}
.grid-u {
	width:99%;
	margin-left:0;
	margin-right:1px;
	padding:10px;
	display:block;
}

/* Keep in mind .profile inherits #checkoutPage form */
/*
	+--------------------------------------------------
	| Positioning
	|
	|	<div "profile">
	|		<input "radio">		<p>					<input "submit">
	|											<p>					<input "submit">
	+--------------------------------------------------
*/
.profile {
	/* Containing Block */
	/* Its height is zero eventhough there're child elements */
	position:relative;
	display:block;
	/* clear solves problem of all radios overlap/top to the same position behind one another. */
	clear:both;
	margin-bottom:1em;
}

.profile input[type="radio"] {
	position:absolute;
	top:4px;
	left:0;
}

.profile p {
	position:relative;
	top:auto;
	/* radio button's size */
	left:30px;
	right:0;
	display:block;
	bottom:0;
	/*
		expand to fill up, plus give room for submit button.
		ie: 100% didn't make radio show on ie.
	*/
	width:90%;
	/* overwrite form label's margin */
	margin-left:0 !important;
	padding:4px 8px;
}

.profile p input[type="submit"],
.profile p a {
	position:absolute;
	/* top to padding of p */
	top:4px;
	right:8px;
	/* ie: without width, it had button expanded across whole block. Manually change size to button's text. */
	/* *width:100px; //no more submit button*/
}

.profile-custid {
	background-color:#dadada;
}

.profile-shipid {
	background-color:#eee;
}

.profile-default-ship {
	border:1px solid #FF6600;
	background-color:#eee;
	padding:4px 8px;
}

/*
 * Check out
 */
.progress {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.1em;
	color: #999999;
	border-bottom: 4px solid #999999;
	padding: 0 1px;
}

.progressOn {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	color: #FF6600;
	border-bottom:4px solid #FF6600;
	padding: 0 1px;
}


/*
 * Below are for tags inside memo field for book's synopsis and author info
 */

div.blurbText {
	margin: 1em 0;
	font-size: 1.2em;
}

div.blurbText h1 { /* same as book title */
	font-size: 1.5em;
	color: #003471;
	margin: 1em 0 0.5em;
	border-top: 2px solid #ccc;
	padding-top: 1em; /* pad border line */
}

div.blurbText h2 {
	font-size: 1.3em;
	margin: 1em 0 0.5em;;
	border-top: 1px solid #ccc;
	padding-top: 0.5em; /* pad border line */
}

div.blurbText p {
	font-size: 1.1em;
}

#whatsnew {
	color: #900;
}
/*
	Synopsis
	.bH3
	.bH4

	Author
	.aH3
	.aH4
*/

.bH3, .aH3 {
	font-size: 1.2em;
	margin: 0.5em 0 0.25em;
}

.bH4, .aH4 {
	font-size: 1.1em;
	margin: 0.5em 0 0.25em;
	color:#888;
}

.bPara li, .aPara li {
	line-height: 1.2;
	padding-left: 10px;
	list-style-type : disc;
	list-style-position: inside;
}


/*
	General Style
	Place these rules at bottom of css for cascading overwrite
*/
sup {
	font-weight: bold;
	color: #CC0033;
}

.note {
  font-size: smaller;
}

.redText {
	color: #CC0033;
}

.grayText {
	color: #666;
}

.centered { /* make block element centered */
	width: auto;
	margin: 10px auto;
	text-align: center;
}

.money {
	text-align: right;
}

.siteseal {
	/* 6/2010 */
	display:inline-block;
	display: -moz-inline-stack;
	/* ie 6,7 didn't work anyway */
	zoom:1
	*display:inline;
}