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

/* BODY ELEMENTS */

/* BODY background, color, font */
       /* PURPLE */


/* BODY background, color, font */
       /* PURPLE */

body.purple{ /* your classy purple page */
font-family: "Verdana"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
/* element background */
font-size: 100%; /* spacing between lines */
color:black; /* font color as rgb(r,g,b), name or #hex */
/* background-color:rgb(75%,40%,100%); /* can also use background-image for elements */
width:800px; /* keep at AUTO for flexibility */
/* margin, border, and padding can also be specified as -top, -right, -bottom, -left */
padding:auto; /* space between CONTENT AREA and BORDER */
border:0; /* the outside edge */
margin:auto; /* the space beyond the BORDER; margin fixed top right bottom left so words don't collapse into one another for IE etc */
text-align:center;
}

body.purple h1{ /* main header class of purple class */
background-color:white;
margin-top:0px;
margin-bottom:25px;
padding-top:15px;
font-family: "Trebuchet MS"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
font-weight: 900; /* 100 to 900 */
font-size:75px;
text-align:center;
line-height: .75;
color:#FF9900; /* font color as rgb(r,g,b), name or #hex */
}

body.purple h2{ /* subheader class of purple class */
/* border-right:2px dashed #B74E07;  /* ALL COLORS: dotted, dashed, solid, double; LIGHT: groove, ridge, inset, outset */
font-family: "Georgia"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
font-weight: 200; /* 100 to 900 */
font-style: oblique; /* oblique, normal */
font-size:30px;
text-align:left;
color:black; /* font color as rgb(r,g,b), name or #hex */
/* position:relative;
z-index:5; */
}

body.purple h3{
font-family: "Trebuchet MS"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
font-weight: 400; /* 100 to 900 */
font-size:42px;
color:black;
margin-left:5px;
}

body.purple h4{
font-family: "Trebuchet MS"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
font-weight: 200; /* 100 to 900 */
font-size:20px;
color:gray;
margin-left:5px;
}

/* 3-COLUMN layout */

* { margin:0;}

html, body { height:100%;}

	.wrapper {
		background:white;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin:0px auto -3em; /* negative version of the footer height */
	}

/*	#header {
		border:1px solid #bbb;
		height:80px;
		padding:10px;
	}  */
	#content {
		margin-top:10px;
		padding-bottom:10px;
		background:white;
		position: relative;
		z-index:3;
		/* bottom:0;
		/* left:0;
		right:0; */		
	}
#content div {
		background-color:white;
		/* padding:10px; */
		/* border:1px solid #bbb; */
		float:left;
		line-height: 2 em;
	}

	
	#one {
		margin-left:7px;
		margin-top:7px;
		width:240px;
		line-height:1.5em;
		/* text-indent:25px; */
	}
	
	#two {
		margin:7px;
		padding-left:10px;
		padding-right:10px;
		border-left-color:#CCCCCC;
		border-left-style:solid;
		border-right-color:#CCCCCC;
		border-right-style:solid;
		width:240px;
		line-height:1.5em;
		/* text-indent:25px; */
	}
	#three {
		margin:7px 7px 0px 7px;
		width:240px;
		clear:right;
		line-height:1.5em;
		/* text-indent:25px; */
	}

	#single {
		width:100%;
		border-right-style:solid;
		border-right-width:0px;
		border-right-color:red;
		/* padding: 25px 7px 60px 5px; /* 5px right margin indent in Opera and Netscape! */
		padding-bottom:70px;
		padding-top:25px;
		background:white;
		margin:0px 0px -3em 0px; /* negative version of the footer height = -3em */
		/* position:relative;
		z-index:5;
		height:100em;		 */	
	}
	
	#indent {margin-left: 15px;
		margin-right: 15px;}	

	.footer, .push{
		text-align:center;
		padding-top:10px;
		height: 3em; /* positive version of the wrapper margin  -  was 3em*/
		line-height: 1.25;
		font-size:10px;
		/* padding: 5px 5px 5px 5px; */
		color: black;
		background-color:white;
		/* position:relative;
		z-index:0; */
		bottom:0;
		clear:both;
	}

.code {color:blue;}

/* COLUMN layout options */
       /* ONE-COLUMN with sidebar, PURPLE*/

#onepurp{ /* background, may want to use an image or a repeating image block */
width:auto;
/* height:800px; /* not completely necessary */
margin:0 auto 0 0;
padding:0;
}

#nextentry{
margin-top:-50px;
background-color:white;
margin-bottom:-20px;
margin-right:0px; /* was 20px */
padding-right:225px; /* you added this */
line-height: 1.5;
}
       
#screen{
background:white;
padding:0px 0px 0px 0;
margin:auto;
}

#header{
background-color:white;
font-weight: 400;
font-size: 24px;
/* padding-top:25px;
padding-bottom:20px; /* may want to use line spacing instead */
margin-top:0px;
width:100%;
text-align:center;
}

#nav{ 
position:relative;
text-align:right;
z-index:10; /* the higher the number, the more visible the element is; must use with POSITIONED elements */
}

#onepurp .description{
position:relative;
left:1em;
margin-bottom:0.2em;
background:white;
}

#col{
/* margin-top:-410px; /* change as amount of sidebar text changes; also affects the nav buttons - WAS -920px*/
width:100%;
position:relative;
z-index:2;
}

#onepurp p#side{ /* flexible width for purple class sidebar text */
width:auto; /* interior paragraphs of purple pages */
text-align:left; /* left, right, center, justify */
font-style: oblique; /* oblique, normal */
font-family: "Times New Roman";
font-size: 15px;
color: #333333;
line-height: 1;
position:relative;
z-index:3;
}
        
#entry{
/* margin-top:78px; */
background-color:blue;
margin-bottom:-20px;
margin-right:0px; /* was 20px */
/* padding-right:225px; /* you added this */
line-height: 1.5;
}
		
     
.continued{
margin-left:-1px; /* if you keep within photo_text division */
}

#onepurp .photo{ /* the position for the photo to reside */
left:-120px; /* the element is set this much from (or into) the left margin) */
position:absolute;
top:-15px;
}

#onepurp .photo img{ /* the actual image */
/* border:solid #CC99FF 2px; */
width:100px;
height:100px;
}

#onepurp #sidebar{
background-color:none;
margin-top:0px;
margin-left:75%;
margin-right:0px;
padding:10px;
width:auto;
position:relative;
z-index:4;
}    

#onepurp .date{
padding:0;
position:relative;
top:-35px;
margin:0 1em 0 0;
text-align:right;
}
   
a:link{ /* the initial state */
padding:0;
background-color:none;
border:none;
color:#FF9900;
text-decoration:none;
font-weight:bold;
}

a:visited{ /* the initial state */
padding:0;
background-color: white;
border:none;
color:#FF9900;
text-decoration:none;
font-weight:bold;
}

a:hover{
padding:0;
background-color: white;
border:none;
color:red;
text-decoration:none;
font-weight:bold;
}

a:active{ /* an indication of what page your visitor is on */
padding:0;
background-color:white;
border:none;
color:#FF9900;
text-decoration:none;
font-weight:bold;
}

a:hover.current{
text-decoration:none; /* underline, overline, line-through, none */
color:red;
font-weight:bold;
}

/*  SITEMAP & SITEMAP links */

	
	#map {
	font-size:10px;
	color:#999999;
	margin-left:5px;
	line-height:1.25 em;
	}

p#map a:link { /* the initial state */
padding:0;
background-color:none;
border:none;
color:#999999;
text-decoration:none;
font-weight:bold;
}

p#map a:visited{ /* the initial state */
padding:0;
background-color: white;
border:none;
color:#999999;
text-decoration:none;
font-weight:bold;
}

p#map a:hover{
padding:0;
background-color: white;
border:none;
color:black;
text-decoration:none;
font-weight:bold;
}

p#map a:active{ /* an indication of what page your visitor is on */
padding:0;
background-color:white;
border:none;
color:#999999;
text-decoration:none;
font-weight:bold;
}

p#map a:hover.current{
text-decoration:none; /* underline, overline, line-through, none */
color:black;
font-weight:bold;
}


/* POPUP options */

#pop{
margin-top:0px;
position:absolute; /* POPUP: must be absolute */
z-index:1; /* the higher the number, the more visible the element is; must use with POSITIONED elements */
}

img {border:black solid 5px;}

img.mini{
border:none;
}

div#pop a:hover{
background:white;
}

div#pop a:img.big{
height:0;
width:0;
border-width:0;
}

div#pop a:hover img.big{ 
position:absolute;
top:100px;
left:300px;
height:575px;
width:500px;
border:none;
}

/* FOOTER options */

#footer, hr{
line-height: 1.25;
font-size:10px;
/* padding: 5px 5px 5px 5px; */
margin: /* 0 10px auto 10px */auto;
position:relative;
z-index:10;
color: black;
background-color:none;
bottom:0;
}

		 
p.miniphotos{
height:33px;
overflow:hidden; /* visible (the default), hidden, scroll, auto (have scrollbars appear when necessary) */
padding-top:4px;
margin-bottom:auto;
}

.miniphotos img{
padding:0 2px;
vertical-align:middle; /* baseline, middle, sub, super, text-top, text-bottom, top, bottom */
}

p#newsec{ /* subheader class of purple class */
/* border-right:2px dashed #B74E07;  /* ALL COLORS: dotted, dashed, solid, double; LIGHT: groove, ridge, inset, outset */
font-family: "Georgia"; /* stick to: Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, serif, sans-serif */ 
font-weight: 800; /* 100 to 900 */
font-style: oblique; /* oblique, normal */
font-size:30px;
margin-left:0px;
color:black; /* font color as rgb(r,g,b), name or #hex */
position:relative;
z-index:5;
}

/* LIST options */

li { margin-left: 10px;} /* http://ifyoucodeittheywill.com/2009/03/xhtml-and-css-of-lists/ */

ol{ /* HTML: <ol><li></li></ol> http://ifyoucodeittheywill.com/2009/03/xhtml-and-css-of-lists/ */
list-style-type:decimal; /* disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman */
margin-right:10px;
margin-left: 15px;
padding-left: 10px;
list-style-position: outside;
}

ul{ /* HTML: <ul><li></li></ul> http://ifyoucodeittheywill.com/2009/03/xhtml-and-css-of-lists/ */
list-style-type:square; /* disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman */
margin-right:10px;
margin-left: 5px;
padding-left: 0;
list-style-position: outside;
}

dl{ /* HTML: <dl><dt><dd></dd></dt></dl> */
/* definition lists */
}

dt{ /* HTML: <dl><dt><dd></dd></dt></dl> */
font-weight:bold;/* the term to be defined */
}

dt.example{
font-style:oblique;
}

dd{ /* HTML: <dl><dt><dd></dd></dt></dl> */
/* the definition */
font-style:oblique;
}