BODY {
	background-color: #FFF0FF;
	color: #000000;
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	margin-left: 13%;
	margin-right: 13%;
	font-size: small;
}

H1 {
	color: Black;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 155%;
	margin-bottom: -1em;
	margin-left: 2%;
	text-align: center;
}

H2 {
	color: Black;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 120%;
	margin-left: 7%;
	margin-top: 2.7em;
	text-align: center;
	font-style: italic;
}

H3 {
	color: Black;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 110%;
	margin-left: -5%;
	margin-top: 2em;
	text-align: center;
}

H4 {
	color: Black;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: italic;
	text-align: right;
	line-height: normal;
}

H5 {
	color: Black;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: 900;
	margin-top: 1.5em;
	text-align: left;
}

H6 {
	color : #000000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 100%;
	font-style : italic;
	font-weight : 800;
/*	margin-bottom : -0.8em;*/
}

BLOCKQUOTE {
	margin-left : 0;
}

CAPTION {
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-weight : 800;
}

TH {
	background-color : #FFF0FF;
}

TD {
	background-color: #FFF0FF;
	
}
p {
	text-align: left;
	font-size: small;
	/*margin-left: 220px;*/
}

img.imgl{
	float: left;
	margin-left: 10px;
}

img.imgr{
	float: right;
	margin-right: 10px;
}

.bodyleft{
	margin-left: 200px;
	text-align: left;
	font-size: small;
}

/*The entire page should be within a container*/
.container {
	width:100%;
}
/*actual page content should be in this div*/
.content {
	margin-left:240px;
}
/*The links on the elft side of the page*/
.leftMenu {
	float:left;
	width:200px;
	line-height:200%;
}
/*For "Spoil yourself" as there are three pictures along the right and content in the centre*/
.rightContent {
	float: right;
	width: 200px;
	line-height: 200%;
	text-align: center;
}
.centreContent {
	margin-left:240px;
	margin-right:240px;
}
/*the banner class*/
.banner {
	border: 2px 2px 2px 2px;
	border-style: solid solid solid solid;
}
/*gives a border that mimics a photo frame*/
.photoFrame {
	border: 5px 5px 5px 5px;
	border-style: double double double double;
	margin: 10px 0 10px 0;
}
/* actually should be called "caption" is captions for photos */
.photoFrameP {
	text-align: center;
	width: 150px;
	line-height: 100%;
}

/* stuff for the menu*/
.menuUl {
	font-weight: bold;
	/*list-style-image: url(linkarrow.jpg);*/
	font-family: "Arial Black";
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	font-size: smaller;
	font-style: oblique;
	padding:0px;
	margin:0px;
}
.menuLi {
	/*background-image: url(linkarrow.jpg);
	background-repeat: no-repeat;
	background-position: 0px 12px;
	text-indent: 15px;*/
	list-style: none;
}
a.menuA {
	background-repeat: no-repeat;
	background-position: 10px 8px;
	text-indent: 0px;
	padding-left: 30px;
	border: 10px 10px 10px 10px solid #FFF0FF;
	width: 100%;
}

a.menuA:link {
	color: Black;
	background-image: url(images/linkArrowNormal.jpg);
}
a.menuA:visited {
	color: #AA00AA;
	background-image: url(images/linkArrowNormal.jpg);
}
a.menuA:hover {
	background-color: #FFFFFF;
	color: #FF00FF;
	background-image: url(images/linkArrowHover.jpg);
	border: 10px 10px 10px 10px solid #ffffff;
}
/*I guess the header and footer can be the same sort of thing*/
.header {
	background-color: Fuchsia;
	clear: left;
	text-align: center;
	border: medium solid Fuchsia;
}
.footer {
	clear:left;
	text-align: center;
}
/*links*/
a:link {
	color: Black;
	text-decoration: none;
}
a:visited {
	color: #AA00AA;
	text-decoration: none;
}
a:hover {
	background-color: #FFFFFF;
	color: #FF00FF;
	text-decoration: underline;
}
/*end links*/
/*the tagline that appears underneath the banner*/
.tagline {
	background-color: White;
	font-weight: bold;
	font-family: sans;
	width: auto;
	text-align: center;
	border-left: solid;
	border-right: solid;
	border-left-width: 200px;
	border-right-width: 200px;
	border-color: Fuchsia;
}
/*Seems to have pink highlighted elements inside the document what is the deal anyway that's what this is*/
.pinkHighlight {
	color: Fuchsia;
	font-weight: bold;
}
/*terrible name but it is for that italic tagline up the top but I already have a tagline*/
.emphatic {
	font-style: italic;
	text-align: center;
}
/* there is a quote tht should be italic and on the left */
.quote {
	font-style: italic;
	text-align: right;
}
/* Use this to make a huge deal of somethign */
.bigDeal {
	font-style: italic;
	font-weight: bold;
	font-size: medium;
}

/* for the gallery */
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 100%; /*Width of Carousel Viewer itself*/
height: 300px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
/*width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.galleryimage {
	height: 300px;
}