/* styles for trading cards pages*/

/*Note the div container for the main slideshow area used to be a class - with a fixed width, adding the new class for the colour cancels out the class controlling the width, but the box seems to fit OK as it probably spanning to the width of the wrapper which is the correct width.
*/

/*Previously i had a div id shaping the box and background and a seperate class to style the text in the copyright box - for the trading cards style sheets i want to add another class to the box to change the background colour to fit in with the rest but as i cant put two classes into one element i have created a context rule to the copyright id styling the span element insede to the style of the text -  I can now delete the copyright text class and add the class for the backround colour
I could have also styled the div id for copyright to the test size i wanted - now i can add text of the value of the rest of the page outside the span tags
 */
 

  
#copyright span  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	}

	
/*classes for different box background colours and text colour -  add a new class for the new background colours of the new pages and add classes to the box elements - 

The only elements that need to be changed when adapting this stylesheet for a new background are
add the class to the wrapper id
then change the div class for the slideshow area
then change the div class for the description underneath
add the class to the copyright box at the bottom of page
the slidehow background can be changed in the seperate slideshow css sheet*/

 body {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 14px;
	background-color: #999999;
	margin-top: 0px;
	background-image: url(../Assets%20Images/site%20additional%20graphics/bg%205%20blue%200sat.gif);
	background-repeat: repeat;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
		}
	
/*shock theatre*/
.sh_theat_bk_bg {
	background-color: #000000;
	color: #FFFFFF;	
}

/*star wars series 1*/
.st_war_ser1_blue {
	background-color: #000033;
	color: #999999;
     }
	 
/*star wars series 2*/	 
.st_war_ser2_red  {
	color: #333333;
	background-color:  #FFC4C4;     
     } 	
	  
/*star wars series 3*/
.st_war_ser3_yellow     {
	background-color: #FFFF8C; 
	   color: #333333;
       }
	   
	/*tales from the crypt*/   
.tales_crypt_grey    {
	color: #000000;
	background-color: #666666;
}

/*fright flicks*/

.fright_flicks  {
	color: #FF0000;
	position: relative;
	z-index: 6;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

ul#fright {
	text-align: left;
	display: block;
	margin-left: 40px;
	list-style-position: outside;
}	
ul#fright li {
	background-repeat: no-repeat;
	list-style-type: none;
	list-style-image: none;
	background-image: url(../Assets%20Images/site%20additional%20graphics/bullet_images/skull_bullet.gif);
	background-position: 10px -2px;
	list-style-position: outside;
	padding-left: 40px;
	color: #FF0000;
}


body#fright{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-image: url(../Assets%20Images/site%20additional%20graphics/background_images/fright_sky.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	color: #FF0000;
} 

/*The submenu for the links at the end of the menu was cut off at the width of the original wrapper - therefore only half the text in the menu was visible - i think this is due to the z index of the wrapper which ive had to change to get the background images positioned behind it - To eleviate the problem after trying a number of things i have created a new wrapper for the fright flicks page and given padding to the left and right, this extends the wrapper without extending the space inbetween, the padding gives space for the sub menu*/

#wrapper_fright {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	height: auto;
	float: none;
	padding-top: 0px;
	padding-right: 60px;
	padding-bottom: 0px;
	padding-left: 40px;
}

/*containers for the background images*/  
/*sets all background images to position absolute
In order for the images to appear behind the wrapper and main content ive set the z index to below that of the warapper - ive also set the wrapper position to relative - when it was set at nothing the z index wasnt positioning the image below the wrapper
z index 6 for wrapper and 3 for moon image*/
	   
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv3 span, #extraDiv4, #extraDiv5, #extraDiv6, #extraDiv6 span

{
	position: absolute;
	
}

#extraDiv1 {
	top: 0px;
	width: 242px;
	height: 350px;
	background-image: url(../Assets%20Images/site%20additional%20graphics/background_images/moon3.gif);
	background-repeat: no-repeat;
	z-index: 3;
	left: -40px;
	}
#extraDiv2 {
	background-image: url(../Assets%20Images/site%20additional%20graphics/background_images/lightining_effect_thin2.png);
	background-repeat: no-repeat;
	background-position: right top;
	width: 100%;
	z-index: 2;
	top: 0px;
	right: 0px;
	height: 1350px;
}


#extraDiv3 {
	background-image: url(../Assets%20Images/site%20additional%20graphics/background_images/graveyard_house.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 100%;
	z-index: 3;
	height: 500px;
	position: absolute;
	right: 0px;
	top: 900px;
}
	
	

 /*main container */

  #showcaseslideshowcontainer {

	height: 500px;

	width: 400px;

	border: thin none #000000;

	background-color: #CCCCCC;

	float: left;

}



/*The wrapper background is now colured ccccc and all of the boxes inside the wrapper are transparent so only one colour property is used*/

#wrapper {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	height: 100%;
	float: none;
}




#bannerbox {
	float: left;
	height: 94px;
	width: 750px;
	border-bottom-style: none;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}



#bannerbox_flash {
	float: left;
	width: 750px;
	
	height: 150px;
	margin: 0px;
	padding: 0px;
}

/* this style is used for the hollywood zombies page as i never created a seperate stlylesheet for that page*/

#bannerbox_white_bg {

	float: left;

	height: 94px;

	width: 750px;

	background-color: #FFFFFF;

	border-top-width: thin;

	border-bottom-style: solid;

	border-top-color: #999999;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: none;

	border-right-style: none;

	border-left-style: none;

	border-right-color: #999999;

	border-bottom-color: #999999;

	border-left-color: #999999;

}







.banner_box_full_size-image {
	padding: 20px;
	height: auto;
	width: 710px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
}



.divider750x15 {
	height: 18px;
	width: 750px;
	float: left;
}



.divider750x15_transparent {

	float: left;

	height: 8px;

	width: 750px;

}







.menubox {
	float: left;
	height: auto;
	width: 750px;
}



.menu1box {
	float: left;
	width: 85px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	text-align: center;
}

.menu5box_95px {
	float: left;
	height: auto;
	width: 95px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
}



.menu4box_110px {
	height: auto;
	width: 110px;
	float: left;
}





.menu2box {
	float: left;
	width: 70px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	text-align: center;


}

.menubox3_50_px {
	width: 50px;
}







/*These 3 styles for use on index only*/



.print_descriptioncontatiner {

	height: auto;

	width: 750px;

	float: left;

	background-color: #CCCCCC;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-bottom-style: solid;

	border-top-color: #666666;

	border-right-color: #666666;

	border-bottom-color: #666666;

	border-left-color: #666666;

}



.descriptioncontatiner {
	height: auto;
	width: 750px;
	float: left;
}







.main_image_contatiner {
	height: auto;
	width: 750px;
	float: left;
	padding-top: 15px;
}




#descriptionbox {
	float: left;
	height: auto;
	width: 420px;
	padding-top: 40px;
	padding-right: 30px;
	padding-bottom: 40px;
	padding-left: 0px;
	border: thin none #333333;

}



#slideshowbox {
	height: auto;
	width: 255px;
	float: left;
	padding-top: 30px;
	padding-right: 5px;
	padding-bottom: 25px;
	padding-left: 40px;

}



#copyright {
	float: none;
	height: auto;
	width: 700px;
	padding-right: 25px;
	padding-left: 25px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	padding-top: 5px;
	clear: both;
	}


.gallery_placer_fits_4 {
	height: auto;
	width: 187px;
	float: left;
	padding-top: 15px;
	padding-bottom: 15px;

}


.box_width_75_spacer {
	float: left;
	height: auto;
	width: 75px;

}

.box_width_110_spacer {
	height: auto;
	width: 110px;
	float: left;

}



/*New Work Page Boxes*/

.new-work_box_150 {
	float: left;
	height: auto;
	width: 120px;
	padding: 15px;

}

.new_work_box_450 {
	float: left;
	height: auto;
	width: 420px;
	padding: 15px;

}

.prints_page_description_box {

	background-color: #A7A7A7;

	float: left;

	height: auto;

	width: 650px;

	padding: 50px;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: solid;

	border-right-style: none;

	border-bottom-style: none;

	border-left-style: none;

	border-top-color: #333333;

	border-right-color: #333333;

	border-bottom-color: #333333;

	border-left-color: #333333;

}





/*Text styles*/



.bold {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	font-style: normal;

	font-weight: bold;

	color: #333333;

}


h3 {

	font-family: Arial, Helvetica, sans-serif;

	font-style: normal;

	font-weight: bold;

	font-variant: normal;

	text-decoration: underline;

}

.italic_text {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: italic;

}



.copyrighttext {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	background-color: #B7B7B7;

}



.spacer_text_colour {

	color: #CCCCCC;

	

	font-family: Arial, Helvetica, sans-serif;

}

/*Links*/

	a {
	color: #414E81;
	border-top-style: none;
	font-size: 1em;
}





a:hover {

	color: #7773C8;

}



img {

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: none;

	border-left-style: none;

}

h1 {

	font-family: Arial, Helvetica, sans-serif;

	font-style: normal;

	color: #515151;

	padding: 0px;

}

.menu3box {
	height: auto;
	width: 50px;
	float: left;

}

.validator_container {
	float: left;
	height: auto;
	width: 700px;
	padding-right: 25px;
	padding-left: 25px;

}
p {
	padding-right: 60px;
	padding-left: 60px;
}