/* -----------------------------------------------------------------------------*/
/* Author: RJ Kelly   7/1/2009                                                  */
/* Title: DIVLayout.CSS                                                         */
/* For: ChristianBooksBibles.com                                                */
/* Description: Simple DIV layout for displaying products with a category link  */
/*              in the top portion and product data with image                  */
/* -----------------------------------------------------------------------------*/

a.producthyperlink { font: bold italic 15.0000px Arial, Helvetica, sans-serif !important; 
	color: #374880 !important; 
	text-decoration: none !important; 
	}

a.producthyperlink :hover { font: bold italic 14px Arial, Helvetica, sans-serif !important; 
	color: #3399FF !important; 
	text-decoration: none !important; 
	}

a.imghyperlink { font: bold italic 15.0000px Arial, Helvetica, sans-serif !important; 
	color: #374880 !important; 
	text-decoration: none !important; 
	}

a.imghyperlink :hover { font: bold italic 14px Arial, Helvetica, sans-serif !important; 
	color: #3399FF !important; 
	text-decoration: none !important; 
	}

a.titlehyperlink { font: bold italic 15.0000px Arial, Helvetica, sans-serif !important; 
	color: #374880 !important; 
	text-decoration: none !important; 
	}

a.titlehyperlink :hover { font: bold italic 14px Arial, Helvetica, sans-serif !important; 
	color: #3399FF !important; 
	text-decoration: none !important; 
	}

/* The bkgrnd image of this DIV is the top portion of the frame. /---------\
   The width must be atleast 573, and less and right side falls off.
   Anymore and the content might overlap it.
   No float so it forces a new line (no DIV stacking)*/
div.frmcrown {background-image: url('/images/framecrown.png');
	background-repeat: no-repeat;
	width:573px;
	float:none;	
	}	
/* The bkgrnd image of this DIV is the side portions of the top header. |          |
   See above for more explanation about size and use. This will repeat along the sides
   for the length of the container, so it always meets the top of the 1st product */
div.header {width:573px;
	float:none;
	background-image: url('/images/framesides.png');
	background-repeat: repeat-y;	
	/*text-align:justify;*/
	overflow:hidden;
	}
/* H2 stylings for the Featured link in the top portion of product layout.
   Used the :hover property to workaround A styling conflicts */
h2.titlelink {font: bold italic 15px Arial, Helvetica, sans-serif !important; 
	color: #374880 !important; 
	text-decoration: none !important; 
	margin: 0px 0px 6px 3px; 
	vertical-align:text-bottom;
	}
h2.titlelink :hover { font: bold italic 14px Arial, Helvetica, sans-serif !important; 
	color: #3399FF !important; 
	text-decoration: none !important;
	margin: 15px; 
        margin: 0px 0px 6px 3px; 
	vertical-align: text-bottom;
	}

/* This paragraph holds the Title, Author, and description. You can adjust its width to 
   get closer or further from the image on the right. Text is justified to provide nice
   uniform block of text. */
p.proddata {width:395px;
	text-align:justify;
	margin: 10px 10px 10px 10px;} 

/* This is the intro paragraphs*/
p.header {
	text-align:justify;
	margin: 20px 7px 20px 20px;
	} 

/*  Containers for the Title and Author data. Title could be deprecated in place of Hyplerlink style.
    I left them for cases where no link is provided. */
span.author { font-style:italic; 
	text-align: left;
	}
span.title { font-weight:800; 
	text-align: left;
	}

/*Container for the grpa grpb classes below. This is located just below intro paragraphs in top of page.*/
.links { width: 565px;margin: 7px;} 

/* Grp containers for the unordered lists and select boxes in top part of the page.
   grpa is used for the select boxes, grpb is used for the unordered lists.*/
.grpa {width:33%;
	float:left;}
.grpb {width:33%;
	float:left;}
.grpb2col {width:49%;
	float:left;}
.grpb1col {width:99%;
	float:left;}

/*This is the spacing between each layout. Adjust the height to make it shorter/taller*/
/*Clear was used to force new line from previous product layout. */
.prod-break{width:573px; 
	height:30px; 
	clear:both;
	background-image: url('/images/framesides.png');
	background-repeat: repeat-y;	
	/*text-align:justify;*/
	overflow:hidden;
}

/*This is the styling for the top portion of the product layout, lt cyan background, pad a little, set height for box*/
.feathead{background-color:#CDE9ED !important;
	padding:10px 0px 10px 3px;
	width:569px;    
	vertical-align:text-bottom;   
      /*color:#6A4B01 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:15px !important;*/
        }


/*Class used for the product images displayed. If its not used the images will stick to the top right*/
.prodimg{ border: 0;
	display: block; /*allows the element to take auto margins*/
	margin: 10px 10px 10px 10px; /*centers in compliant browsers*/
	/*text-align:right; centers in old versions of IE*/
	}
/*Main container for each product layout. Overflow: hidden is needed for FF compatibility. Div will collapse.
  put a nice thin blue/gray line around the whole box.*/
.productcontainer{width:569px; 
		overflow:hidden;
		background-color:#ecebeb;
		border:1px solid #CBCBCB; 
		border-collapse:collapse;
		vertical-align: middle;
		text-align: justify;}
/*this DIV holds the product data, Title, Author. Stick to the left and center content.*/
.datacontainer{ width:400px;
		text-align: center;
		float:left;
		}
/*This is the DIV container for the image, stick to the right, auto set height and width. TRY to align in the middle*/
.imgcontainer { width: 150px;
		height: auto;
		vertical-align: middle;
        text-align: center;
		float:right;
		display: block;
		margin: auto;
		}