@charset "UTF-8";
/* CSS Document */

html {background-color: #666;}

body
{ 
background-image:url('shamancel.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -20px -20px; 
background-color: #666;
}

/* font styles */
h1 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; text-transform: lowercase; letter-spacing: 10px; font-style: italic; font-size:32px; color: #000;}
h1.title {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; text-transform: lowercase; letter-spacing: 4px; font-style: italic; color:#666; text-align:right; font-size:25px;}

h2 {font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 2px; font-style: normal; font-size:30px;}

h3 {font-family:"MS Serif", "New York", serif; text-transform: lowercase; letter-spacing: 2px; font-style: normal;}

h4 {font-family:"MS Serif", "New York", serif; text-transform: lowercase; letter-spacing: 2px; font-style: normal; font-size:30px; margin: 0; padding: 0; text-align:left;}

p {font-family:"MS Serif", "New York", serif; text-indent:15px; text-align: left;}

p.first:first-line {font-size:115%; font-style:italic;}
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
font-style:oblique;
float : left;
width : 1em;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
text-indent:0px;
}
p.first{font-family:"MS Serif", "New York", serif; text-indent:0px; text-align: left;}

a {text-decoration:none; color:#C03}
a:hover {text-decoration:none; color:#900; font-style:oblique;}

td {font-size:80%; font-style:italic; text-align:left;}

/* div styles specified under twoColLiqRtHdr class */

.twoColLiqRtHdr #container { 
padding: 30px;
	width: 75%; 
	background-image:url(ccc.gif); 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColLiqRtHdr #header { 
	background-color:#333; 
	padding: 0 10px; 
} 
.twoColLiqRtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}


/* for the back button */

.twoColLiqRtHdr a.door {background-image:url(door4a.gif); background-repeat: no-repeat; display:block; text-decoration:none; color:#666; padding:0px; height:32px; font-size:22px; margin: 0px; padding: 0px; width:80px; text-align:right; font-style:oblique;}
.twoColLiqRtHdr a:hover.door {background-image:url(door4b.gif); background-repeat: no-repeat; color:#000;}

/* main content */
.twoColLiqRtHdr #mainContent { 
	margin: 0 10% 100 10px; /* the left margin should mirror the margin on the header and footer for proper alignment. */
	padding:5%;
	text-align:center;
	background:#FFF;
} 

.twoColLiqRtHdr #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD; 
} 
.twoColLiqRtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: center;
	font-style:oblique;
}

/* menu image controls split between display buttons and hover buttons */

.twoColLiqRtHdr #menu {width:auto; overflow:auto;}
.twoColLiqRtHdr #menu ul {list-style-type:none; margin:0; padding:0; text-indent:35px;}
.twoColLiqRtHdr #menu ul li {display:table-cell; font-family:"MS Serif", "New York", serif; text-transform: lowercase; letter-spacing: 2px; font-style: normal; font-size:1em; padding: 0px; width:10em; height:32px; margin:0;}
.twoColLiqRtHdr #menu ul li.camera {background-image:url(camera1a.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li.clapper {background-image:url(clapper1b.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li.paint {background-image:url(planter1a.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li.skull {background-image:url(skull0b.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li.arrow {background-image:url(arrow3b.gif); background-repeat: no-repeat;}

/* hover buttons */

.twoColLiqRtHdr #menu ul li a {display:table-cell; text-decoration:none; color:#FFF; padding: 0px; height:32px; width:15em}
.twoColLiqRtHdr #menu ul li a:hover {background-color:#FFF; font-style:oblique; color:#000;}
.twoColLiqRtHdr #menu ul li a:hover.camera {background-image:url(film04a.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li a:hover.clapper {background-image:url(clapper1a.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li a:hover.paint {background-image:url(planter1b.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li a:hover.skull {background-image:url(bulb1c.gif); background-repeat: no-repeat;}
.twoColLiqRtHdr #menu ul li a:hover.arrow {background-image:url(envelope01b.gif); background-repeat: no-repeat;}

#portrait {float:right; margin:10px 10px; padding:10px 10px}

/* miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}