/* CSS Document */
/*Authors: client side XHTML and CSS done by Timothy Freedman, all graphics & images supplied by Daniel Freedman
	 Date: 25th Feb 2008
	 Description: this is the single css file for all pages. 
*/


/*basic body settings, "text-align:center" is needed to keep site centered*/

body {				
	background:#333333;
	text-align:center;
}


/*takes the border off the images with links attatched to them*/

img {
	border:none;
}

/*this id is for the largest div which contains the entire site content*/

#wrapper {				
	width:892px;
	height:1430px;
	margin-left:auto;
	margin-right:auto;
}


/*the banner has been split into three sections to get the menu to fit in the right place, this is the top section*/

#banner {
	background:url(../images/header.png) no-repeat;
	height:238px;
	margin-bottom:0px;
}

#menu {
	margin-bottom:25px;
}

/*the holding cell for the content and vertical spacer for the footer/page end. This div has the repeating background, allowing the dragon image background to appear on top of this one and still included with the css*/

#main {				
	float:left;		
	width:892px;	
	background:url(../images/background.gif);
	background-color:#B7A994;
	height:1000px;
	margin-top:0px;
}


/*the content div has all the text, d/l's, galleries, artwork, etc inside it. The use of this extra div is to allow the image of the dragon to be centerd inside the visible webpage area and not affect the other page elements. This div has also been given margins to created a sense of justified text area on the page*/

#content {				
	background:url(../images/dragon.gif) no-repeat center;			 																			
	margin-left:28px;												
	margin-right:28px;
	margin-top:0px;
	height:1000px;
	z-index:2;
	text-align:left;
}


/*basic text formatting for all text (excluding links & menu) on the site. The background image is a grid which gives the illusion of transperancy, its purpose is to give the text a placing on the page instead of floating in the middle of nowhere, improving readability*/

#text {
	float:right;		
	background:url(../images/textgrid.gif);				
	font-family:"Trajan Pro";
	font-size:90%;
	color:#FFFFFF;
	font-size:12px;
	line-height:24px;
	letter-spacing:2px;
	/*margin-right:60px;*/
	margin-right:47px;
	margin-top:10px;
	margin-bottom:10px;
	/*width:696px;*/
	width:722px;
	padding:10px;
	display:inline;
	text-align:left;
}


/*simple, just used for standard headings in text-filled pages*/

#textheading {
	display:inline-block;				
	font-size:18px;
	font-family:"Trajan Pro";
	margin-bottom:10px;
}

.shopcat {
	padding:5px;
	background:#68CCFF;
	color:#000000;
	text-decoration:none;
}

.shopcat:hover {
	color:#FFFFFF;
}

/*footer div - floats underneath main div. If a single page needs extra vertical space the #main id can be altered as an inline style for that page and the footer should change its position accordingly automatically*/

#footer {				
	float:right;		
	background:url(../images/footer.gif);
	height:160px;
	width:892px;
}

#footer p {
	margin-top:55px;
}

/*used only for the return link at the bottom of the galley itmes in each gallery, this div is floated and should move itself as new items are put in*/

#backtogalleries p {				
	text-align:center;
}

#backtogalleries a {
	display:inline-block;
	height:25px;
	text-align:right;
}

/*vertical spacer for the secondary links in the footer section, its purpose is to adjust the position of the footer menu as its position changes slighlty in different browsers. The best position has been found for both browsers at the time of original development(above)*/

#footerspacer {
	width:842px;
	height:34px;
	background-color:#B7A994;
	margin-left:auto;
	margin-right:auto;			
}


/*this is a bounding box for each gallery/artwork featured in the galleries. It is designed so that any number of these can be added into the html (or through a clients login access) and the gallery objects will automatically format themselves so it all look the same and stay in the same places*/

.gallery {				
	background:url(../images/textgrid.gif);		
	float:left;									 
	width:150px;								
	height:180px;
	margin-top:30px;
	margin-left:47px;
	margin-bottom:15px;
}


/*this styles the links which appear below the galleries in the gellery page, it is also used for artwork names and download links*/

.gallerytext {				
	text-align:center;		
	font-size:12px;
	font-family:"Trajan Pro";
	color:#FFFFFF;
	text-decoration:none;
}

.gallerytext a {
	width:150px;
	text-align:center;
}

/*this is the styling for the menu text inside the footer, the footer has been done difffrenetly to the menu because display:bolck; for the footer ruins its layout*/

.footer {			
	color:#FFFFFF;
	font-size:11px;
	text-decoration:none;
	font-family:"Trajan Pro";
}


/*styling for the links in the where to buy page*/

.contactlinks {
	display:inline-block;
	width:200px;
	line-height:18px;	
	color:#FFFFFF;
	font-size:10px;
	text-decoration:none;
	font-family:"Trajan Pro";
	padding-left:15px;
	border:1px dashed #68CCFF;
	border-left:10px solid #68CCFF;
	margin-top:10px;
}


/*makes all links and gallery links change to a blue color when mouse hovers over*/

a {
	color:#FFFFFF;
}

a:hover {				
	color:#68CCFF;
}

p.gallerytext:hover {
	color:#68CCFF;
}


/*makes the border square next to the links on where to buy page enlarge*/

a.contactlinks:hover {				
	border-left:20px solid #68CCFF;
	padding-left:5px;
	color:#FFFFFF;	
}

#text label {
	margin-right:15px;
}

#namelabel {
	padding-right:45px;
}

#subjectlabel {
	padding-right:32px;
}

/*added styles for the zazzle store buyonline pages*/

.productTitle {
	display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}

.gridCell {
	float:left;
}

.centerGrids {
	float:left;
	margin-top:20px;
	margin-left:30px;
}

#main {
	height:auto;
}

/*this code is from Lightbox2 and makes the gallery effect on the images*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }