body {
	background: url(images/main-back.jpg);
	background-color: #FFFFFF;
	background-repeat: repeat-x;
	padding: 0;
	margin: 0;
	font-family: verdana, sans-serif;
	font-size: 12px;
	line-height: 17px;
	overflow: auto;
	}
	
#master {
	position: relative;
	width: 1035px;
	height: 824px;
	background: url(images/background.jpg);
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto;
	}

	/* General Settings */
	
h2 {
	padding: 0;
	margin: 0;
	}
	
h3 {
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	color: #543631;
	}
	
p {
	padding: 5px 0 0 0;
	margin: 0;
	color: #56504b;
	}
	
ul {
	list-style-type: circle;
	padding: 10px 0 0 10px;
	margin: 0;
	}
	
li {
	color: #56504b;
	}
	
a {
	text-decoration: none;
	color: #543631;
	}
	
tr {
	padding: 0;
	margin: 0;
	}
	
td {
	padding: 0;
	margin: 0;
	}
	
a:hover {
	color: #f5bbb4;
	}
	
a:visited {
	color: #543631;
	}
	
	/* Menu Items */
	
#featured {
	position: absolute;
	top: 12px;
	left: 500px;
	font-size: 26px;
	font-family: courier new, monospace, times;
	}
	
#featured a {
	color: #f5bbb4;
	text-decoration: none;
	}
	
#featured a:hover {
	color: #FFFFFF;
	}
	
#featured a:visited {
	color: #FFFFFF;
	}
	
#about {
	position: absolute;
	top: 43px;
	left: 660px;
	font-size: 18px;
	font-family: courier new, monospace, times;
	}
	
#about a {
	color: #fcdadd;
	text-decoration: none;
	}
	
#about a:hover{
	color: #FFFFFF;
	}
	
#about a:visited {
	color: #FFFFFF;
	}
	
#contact {
	position: absolute;
	top: 32px;
	left: 730px;
	font-size: 20px;
	font-family: courier new, monospace, times;
	}
	
#contact a {
	color: #daa19b;
	text-decoration: none;
	}
	
#contact a:hover {
	color: #FFFFFF;
	}
	
#contact a:visited {
	color: #FFFFFF;
	}
	
	/* Bottom information */
	
#who {
	position: absolute;
	top: 555px;
	left: 200px;
	width: 250px;
	height: 200px;
	border-right: dashed gray 1px;
	}
	
#what {
	position: absolute;
	top: 555px;
	left: 475px;
	width: 250px;
	height: 200px;
	border-right: dashed gray 1px;
	}
	
#services {
	position: absolute;
	top: 555px;
	left: 750px;
	width: 250px;
	height: 200px;
	}
	
	/*Specific pages*/
	
#featuredHead {
	position: absolute;
	top: 112px;
	left: 325px;
	width: 265px;
	height:123px;
	padding:0;
	background: url(images/featured-header.png);
	margin:0;
	z-index: 150;
	}
	
#featured1 {
	position: absolute;
	top: 222px;
	left: 265px;
	width: 300px;
	height: 125px;
	padding: 0;
	margin: 0;
	background-color: #f4beb5;
	filter:alpha(opacity=40);
	opacity:0.4;
	}
	
#featured2 {
	position: absolute;
	top: 400px;
	left: 365px;
	width: 300px;
	height: 125px;
	padding: 0;
	margin: 0;
	background-color: #d8a19a;
	filter:alpha(opacity=40);
	opacity:0.4;
	}
	
#featured3 {
	position: absolute;
	top: 283px;
	left: 545px;
	width: 300px;
	height: 125px;
	padding: 0;
	margin: 0;
	background-color: #fad9db;
	filter:alpha(opacity=40);
	opacity:0.4;
	}
	
#featured4 {
	position: absolute;
	top: 130px;
	left: 600px;
	width: 300px;
	height: 125px;
	padding: 0;
	margin: 0;
	background-color: #a09891;
	filter:alpha(opacity=40);
	opacity:0.4;
	}
	
#featuredMovie {
	position: absolute;
	top: 147px;
	left: 320px;
	padding: 0;
	margin: 0;
	z-index: 15;
	}
	
#submenu {
	position: absolute;
	top: 240px;
	left: 860px;
	padding: 0;
	margin: 0;
	width: 170px;
	height: 200px;
	line-height: 40px;
	z-index: 21
	}
	
#submenu h2 {
	background: url(images/button-back.png);
	background-repeat: no-repeat;
	}
	
#submenu a {
	padding-left: 10px;
	}
	
#description {
	position: absolute;
	top: 240px;
	left: 200px;
	padding: 0;
	margin: 0;
	width: 160px;
	height: 285px;
	z-index: 20;
	}
	
#contactHead {
	position: absolute;
	top: 95px;
	left: 212px;
	width: 301px;
	height:130px;
	padding:0;
	background: url(images/header-contact.jpg);
	margin:0;
}

#contactBack {
	position: absolute;
	top: 210px;
	left: 273px;
	width: 602px;
	height:344px;
	background: url(images/contact-back.jpg);
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
	z-index: 10;
	}

#contactForm {
	position: absolute;
	top: 215px;
	left: 560px;
	padding: 0;
	margin: 0;
	z-index: 100;
	}
	
.right {
	float: right;
	}

#contactForm textarea, input {
	border: 0;
	background: none;
	}
	
#contactForm textarea {
	overflow: auto;
	}
	
#contactName{
	position: absolute;
	top: 5px;
	left: 0px;
	width: 30px;
	height: 20px;
	}

#contactPhone {
	position: absolute;
	top: 47px;
	left: 0px;
	width: 30px;
	height: 20px;
	}

#contactEmail {
	position: absolute;
	top: 87px;
	left: 0px;
	width: 30px;
	height: 20px;
	}

#contactMessage {
	position: absolute;
	top: 135px;
	left: 0px;
	width: 30px;
	height: 20px;
	}
	
#contactButton {
	position: absolute;
	top: 280px;
	left: 200px;
	width: 30px;
	height: 20px;
	}

#myInfo {
	position: absolute;
	top: 440px;
	left: 200px;
	width: 230px;
	height: 65px;
	z-index: 150;
	}
	
#thankyou {
	position: absolute;
	top: 107px;
	left: 200px;
	padding: 0;
	margin: 0;
	width: 779px;
	height: 181px;
	}
	
#aboutHead {
	position: absolute;
	top: 99px;
	left: 216px;
	width: 338px;
	height:104px;
	padding:0;
	background: url(images/header-about.jpg);
	margin:0;
	}
	
#aboutContent {
	position: absolute;
	top: 220px;
	left: 226px;
	width: 700px;
	height: 300px;
	font-size: 13px;
	line-height: 22px;
	color: #f5bbb4;
	margin:0;
	}

#aboutContent p {
	padding:0 0 10px 0;
	}
	
#footer {
	position: absolute;
	top: 790px;
	left:35px;
	height: 14px;
	width: 1000px;
	text-align: center;
	padding-left: 30px;
	}
/*	
.displace {
	position: absolute;
	left: -5000px;
	}
/*main blocks
div.mnav{
	position: relative;
	width: 500px;
	height: 300px;
	background-color: black;
	
	
	padding: 0px;
	}
div.mnav div a {
	display: block;
	width: 100px;
    height: 55px;
	
    text-decoration: none;
    background: url("button1.png");
	background-position: 0 0;
    }
	
/*individual settings*
div.mnav div.page1{
	position: relative;
	top: 10px;
	left:100px;
	z-index: 1001;
	}
div.mnav div.page2{
	position: relative;
	top: -5px;
	left: 125px;
	z-index: 1005;
	}	
div.mnav div.page3{
	position: relative;
	top: -20px;
	left: 150px;
	z-index: 1003;
	}		
	
/* Hover divnks 
div.mnav div a:hover{
	background-position: 0 -110px;
}
div.mnav div:hover{
	z-index: 1020;
}

/* Active divnks 
div.mnav div a:Active{
	background-position: 0 -55px;
}

/* Selected divnks 
div.mnav div a.selected{
	background-position: 0 -220px;
}
div.mnav div.selected{
	z-index: 1010;	*/
	
/*works like an alt tag. add text in the displaced span for accessibility.(view menu with css off, you'll see it)*/
.displace {
	position: absolute;
	left: -5000px;
	border:none;
	text-decoration: underline;
	}
	
/*main block
div.mnav{
	position: absolute;
	top: 0;
	left: 450px;
	/*set your top, left, width & height to desired size to encompass ENTIRE menu
	width: 550px;
	height: 100px;
	/*set bg to none after you have it placed where you want
	background:none;
	border: solid black 1px;
	z-index: 300;
	padding: 0px;
	margin: 0;
	}*/
	
/*
 * These are your actual buttons. they are represented by anchors with specific backgrounds.
 * you will need to make one png for each button, each with the different states:
 * 		normal, hover, active, selected   (skip visited)
 * see button1.png for example
 */
a.featured {
	position: absolute;
	top: -15px;
	left: 590px;
	display: block;
	text-decoration: none;
	/*set these to exactly the size of the veiwable button*/
	width: 300px;
    height: 100px;
	/*use 1001 - 1009 for buttons*/
	z-index: 1001;
	/*set this to the png file that contains your "featured" sprite*/
    background: url(images/featured.png);
	/*this displays the defualt state of your sprite.*/
	background-position: 0px 0px;
    }
	
	/*rinse and repeat for each button below*/
a.contact {
	position: absolute;
	top: 10px;
	left: 850px;
	display: block;
	text-decoration: none;
	width: 157px;
    height: 100px;
	z-index: 1005;	
    background: url(images/contact.png);
	background-position: 0px 0px;
	}	
a.about1 {
	position: absolute;
	display: block;
	text-decoration: none;
	width: 150px;
    height: 100px;
	top: -20px;
	left: 460px;
	z-index: 1003;
    background: url(images/about.png);
	background-position: 0px 0px;
    }
	
/* Hover buttons
 * move the background to show the position of the sprite that contains the
 * "hover" graphic. This is coordinates on the png image itself, but use a 
 * negative. again, see button1.png. notice that in this instance (since all 
 * buttons use the same png sprite, that they are all the same. this will
 * probably not be the case in your application.
 */
a.featured:hover{
	background-position: -2px -100px;
/*
 * z-index controls the hover effect that causes the overlapping to work. probably
 * can leave this alone. 
 */
	z-index: 1020;
}
a.contact:hover{
	background-position: 0 -100px;
	z-index: 1020;
}
a.about1:hover{
	background-position: 0px -92px;
	z-index: 1020;
}

/* Selected links 
 * moving the background image to show the correct state.
 * z-index moves to middle (see hover explanation)
 */
a.featured.selected{
	background-position: 0 -295px;
	z-index: 1010;
}
a.contact.selected{
	background-position: 0 -300px;
	z-index: 1010;
}
a.about1.selected{
	background-position: 0 -290px;
	z-index: 1010;
}
	
/*
 * Added focus links for mozilla for unsightly accessibility border
 * Tab functionality restored by mimicing IE which uses the :active
 * for its tabbing instead of :focus. 
 * 
 * I have given :focus and :active states a higher z-index than hover.
 * this means that if someone inadverdantly tabs to a menu item they wont
 * see the hover animation. clicking the button will work normally however.
 * I am just putting this note here for completeness. I don't think
 * it will be an issue.
 */
a.featured:focus {
	outline: none;
	background-position: -2px -198px;
	z-index: 1030;
}
a.contact:focus {
	outline: none;
	background-position: 0 -202px;
	z-index: 1030;
}
a.about1:focus {
	outline: none;
	background-position: 1px -197px;
	z-index: 1030;
}

/* Active links
 * Again, same as the hover status.
 */
a.featured:active{
	background-position: -2px -198px;
	z-index: 1030;
}
a.contact:active{
	background-position: 0 -202px;
	z-index: 1030;
}
a.about1:active{
	background-position: 1px -197px;
	z-index: 1030;
}
/*
 * There is no z-index requirements for active state, you are still hovering the div
 * controlling the z-index in order to click its anchor.
 */


/*
 * I have found that using the current precedence of:
 * 			 normal link, :hover, .selected, :focus, :active
 * will cause the selected link to respond to the focus and active states, while
 * ignoring the hover. This seems the best result, but you can rearrange for
 * slightly different effects.
 */