/*css file to test split background and foreground image security method*/

/*This is exactly the way the html has to appear:

<link rel="stylesheet" type="text/css" href="siege.css"/>

*/

/*Note:  Divisions, Text, and Paragraph Treatments at End of File*/

.Ballista {
	position: relative;
	align: center;
	width: 450px;
	height: 397px;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
}

#Ballista {
	background-image: url(http://medievallifestyle.com/image-files/ballista-bg.jpg);
	background-position: 1px 1px;
	background-repeat: no-repeat;
	width: 450px;
	height: 397px;
	z-index: 1;
}

#Ballista-Fore {
	background-image: url(http://medievallifestyle.com/image-files/ballista-fg.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 450px;
	height: 397px;
	z-index: 3;
}

.Ballista-Mechanism {
	position: relative;
	float: left;
	width: 450px;
	height: 236px;
	margin: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Ballista-Mechanism {
	background-image: url(http://medievallifestyle.com/image-files/ballista-mechanism.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 450px;
	height: 236px;
	z-index: 1;
}

.Ballista-Stock-Mechanism {
	position: relative;
	float: right;
	width: 450px;
	height: 236px;
	margin: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Ballista-Stock-Mechanism {
	background-image: url(http://medievallifestyle.com/image-files/ballista-stock-mechanism.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 450px;
	height: 236px;
	z-index: 1;
}

.bookmark {
	position: relative;
	background-image: url(http://www.medievallifestyle.com/images/buttonbookmarkon.gif);
	background-repeat: no-repeat;
	display: block;
	width: 130px;
	height: 50px;
	margin: 0;
	padding: 0;
}

.Catapult {
	position: relative;
	align: center;
	width: 475px;
	height: 404px;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;	
}

#Catapult {
	background-image: url(http://medievallifestyle.com/image-files/catapult-bg.jpg);
	background-position: 1px 1px;
	background-repeat: no-repeat;
	width: 475px;
	height: 404px;
	z-index: 1;
}


#Catapult-Fore {
	background-image: url(http://medievallifestyle.com/image-files/catapult-fg.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 475px;
	height: 404px;
	z-index: 3;
}

.centerpic {
	align: center;
	margin-right: 10px;
	margin-left; 10px;
	margin-bottom: 25px;
}

.collagebackground {
	background-image: url(http://medievallifestyle.com/image-files/collage.jpg);
	background-repeat: repeat-x repeat-y;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8;
	color: #000000;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-left: 0px;
	font-weight: regular;
	text-align: center;
	z-index: 2;
}

#Copyrighted-Material  {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: 5;
}

.credits {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11;
	color: #000000;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-left: 0px;
	font-weight: regular;
	text-align: center;
	z-index: 2;
}

.endlogo {
	background-image: url(../image-files/endlogo.gif);
	width: 271px;
	height: 39px;
	margin: 0px;
	padding: 0px;
	color: white;
	background-position: center;
}

.Horizontal-Spacer-Long {
	background-image: url(http://medievallifestyle.com/image-files/horizontal-spacer-long.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	position: relative;
	width: 473px;
	height: 26px;
	margin: 0;
	padding: 0;
	z-index: 1;
}	

	
.Invisible {
	display: none;
}
	
.Lanyard-Latch {
	position: relative;
	float: right;
	width: 262px;
	height: 207px;
	margin: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Lanyard-Latch {
	background-image: url(http://medievallifestyle.com/image-files/lanyard-latch.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 262px;
	height: 207px;
	z-index: 1;
}

.leftpic {
	float: left;
	margin-right: 10px;
	margin-bottom: 25px;
}

.No-Javascript {
	background-image: url(http://medievallifestyle.com/image-files/canvas.gif);
	background-position: 0% 0%;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #336633;
	font-weight: bold;
	text-align: center;
	text-valign: middle;
	
}

.Perrier {
	position: relative;
	float: left;
	width: 400px;
	height: 323px;
	margin: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Perrier {
	background-image: url(http://medievallifestyle.com/image-files/perrier.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 400px;
	height: 323px;
	z-index: 3;
}

.Ratchet-and-Pawl {
	float: right;
	position: relative;
	width: 244px;
	height: 266px;
	margin: 0;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0;
	cell-padding: 0;
	cell-spacing: 0;
}

#Ratchet-and-Pawl {
	background-image: url(http://medievallifestyle.com/image-files/ratchet-and-pawl.jpg);
	background-position: -1px -1px;
	background-repeat: no-repeat;
	width: 244px;
	height: 266px;
	top: 0;
	left: 0;
	z-index: 1;
}	

.Revolving-Latch {
	position: relative;
	float: left;
	width: 285px;
	height: 175px;
	margin: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Revolving-Latch {
	background-image: url(http://medievallifestyle.com/image-files/revolving-latch.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 285px;
	height: 175px;
	z-index: 1;
}

.rightpic {
	float: right;
	margin-left: 10px;
	margin-bottom: 25px;
}

.Sidebar-Right {
	float: right;
	position: relative;
	width: 50%;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	z-index: 1;
	background-color: #FFFFFF;
}

.Siege-Engines {
	position: relative;
	width: 600px;
	height: 407px;
	margin: 0px;
	padding: 0px;
}

#Siege-Engines {
	background-image: url(http://medievallifestyle.com/image-files/siege-engines-bg.jpg);
	background-position: 1px 1px;
	background-repeat: no-repeat;
	width: 600px;
	height: 407px;	
	z-index: 1;
}


#Siege-Engines-Fore {
	background-image: url(http://medievallifestyle.com/image-files/siege-engines-fg.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 600px;
	height: 407px;
	z-index: 3;
}

.Staff-Sling {
	position: relative;
	float: right;
	width: 100px;
	height: 282px;
	margin: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

#Staff-Sling {
	background-image: url(http://medievallifestyle.com/image-files/staff-sling.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 100px;
	height: 282px;
	z-index: 3;
}

.Three-T {
	width: 290px;
	background-color: #ffffff;
	padding: 0px;
	margin: 0px;
	z-index: 1;
}

.Torsion-Spring {
	position: relative;
	width: 323px;
	height: 272px;
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
}

#Torsion-Spring {
	background-image: url(http://medievallifestyle.com/image-files/torsion-spring.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 323px;
	height: 272px;
	z-index: 1;
}


.Trebuchet {
	position: relative;
	width: 600px;
	height: 322px;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	cellpadding: 0;
	cellspacing: 0;
}

#Trebuchet {
	background-image: url(http://medievallifestyle.com/image-files/trebuchet-bg.jpg);
	background-position: 1px 1px;
	background-repeat: no-repeat;
	width: 600px;
	height: 322px;
	z-index: 1;
}


#Trebuchet-Fore {
	background-image: url(http://medievallifestyle.com/image-files/trebuchet-fg.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 600px;
	height: 322px;
	z-index: 3;
}

.Windlass {
	position: relative;
	clear: both;
	align: center;
	width: 490px;
	height: 231px;
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
}

#Windlass {
	background-image: url(http://medievallifestyle.com/image-files/windlass.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 490px;
	height: 231px;
	z-index: 1;
}


/*-------------------------------------*/
	
/*DIVISION CLASSES*/

div.content {
	display: block;
	margin: 50px;
	padding: 15px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

div.widecontent {
	display: block;
	margin: 15px;
	padding: 5px;
}

div.footer {
	position: relative;
	align: center;
	text-align: center;
	clear: both;
	margin: 0px;
	margin-top: 0px;
	padding: 0px;
	padding-bottom: 5px;
}

/*LINKS*/

a.subtitlelink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11;
	color: #000000;
	text-decoration: none;
}


/*TEXT, HEADERS, ETC.*/

.centeralert {    /*Paragraph Type*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14;
	color: #000000;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 0px;
	font-weight: bold;
	text-align: center;
	z-index: 2;
}

.clickformore {    /*Paragraph Type*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
	position: relative;
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-style: italic;
	text-decoration: underline;
	text-align: left;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #336633;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 0;
	text-align: center;
	font-weight: bold;
	clear: both;
	float: center;
	position: relative;
	align: center;
	z-index: 3;
}


h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16;
	color: #336633;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 6px;
	margin-bottom: 6px;
	font-weight: regular;
	text-align: left;
	z-index: 2;
}

.reg {    /*Paragraph type*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14;
	color: #000000;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 0px;
	font-weight: regular;
	text-align: left;
	z-index: 2;
}

.small {    /*Paragraph Type*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13;
	color: #000000;
	position: relative;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 0px;
	text-align: left;
	font-weight: regular;
	z-index: 2;
}

.topnavtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 8;
	text-decoration: none;
	color: black;
}