@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

   
 @media screen and (max-width: 480px) { 
 
 
   /* MOBILE STRUCTURAL CSS */  

/* Background of Page */


body{background: #F5F5DC;
}

h1{
display: block; 
border: 2px solid gold;
background: black;
font-family: "Times New Roman";
color: gold;
text-align: center;
line-height: normal;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}


#date {
		margin-top: 1em;
		margin-left: 1em;
		text-align: left;
		color:#db9833; 
		font-size: .7em;
		font-weight: bold;		
}





/* Story Title stamp in lower left */
h2{
	border: none;
	font-family: "Times New Roman";
	text-align: center;
	line-height: normal;
	color: #db9833;
	text-decoration: none;
	font-size: 110%;
	font-weight: bold;
}


.dedication {
	font-family: "Comic Sans MS", cursive;
	text-align: left;
	font-size: .7em;	
	margin-top: 3em;
	margin-bottom:3em;
}

h4 {
border:  none;
margin-left: 100px;
  font-family: Comic Sans MS, "Arial";
  line-height: normal;
  color: #2B1B17;
  font-style: normal;
  text-align: left;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold; 

}
/* Dotted Border in blockquote and footer */
.dots {
  border-top: 2px dotted grey;
  width: 100%;
}


/* Dotted Border in footer */
.bottomdots {
  border-top: transparent;
  width: 100%;
}

hr {
  border-top: 1px solid white;
  width:80%;
}


p{
border:  none;
margin-left: .7em;
margin-right: .7em;
  font-family: "Comic Sans MS", "Arial";
  line-height: normal;
  color: #2B1B17;
  font-style: normal;
  text-align: left;
  text-decoration: none;
  font-size: 90%;
  font-weight: normal;
}

p.colortext {
   color: blue;
   }

.indent {
	border:  none;
	margin-left: 1.75em;
	margin-right: 1.75em;
	font-size: 90%;
	font-family: Comic Sans MS, "Arial";
}
 
.indent b{
	color: blue;
	font-weight: bold
}


 
.quote{
border:  none;
margin-left: 1em;
margin-right: 1em;
  font-family: "Comic Sans MS", "Arial";
  line-height: normal;
  color: #000066;
  font-style: normal;
  text-align: left;
  text-decoration: none;
  font-size: 90%;
  font-weight: normal;
}

a[href^="mailto"] { 
color: blue;
font-family: "Comic Sans MS", "Arial";
font-size: 100%;
font-style: normal;
font-weight: normal;
line-height: normal;
text-decoration: none;
}

a[href^="mailto"]:hover:after { content: " > " attr(title); }

.strip {
font-family: Comic Sans MS;
font-size: 65%;
text-align: center;
background-color: #FFFFC2;
color: #8C001A;
width: auto;
}


h3{
    font-family: "Times New Roman";
	color: #db9833;
    font-size: .9em;
	text-align: center;
	text-decoration: none;
}


/* Menu*/

#menu a {
  display: block;
  font-family: "Arial";
  padding: 1px;
  color: blue;
  text-decoration: none;
  font-size: .7em;
  font-weight: normal;
  border: 1px solid grey;
}

#menu a:visited{
color: gray;
background-color: transparent;
}

#menu a:hover{
color: black;
background-color: transparent;
}

#menu a:active{
color: maroon;
background-color: transparent;
}

#menu ul {
   margin: auto;
   text-align: center;
   margin:0;
   padding:0;
   list-style:none;
}
   
#menu li {
   clear: both;
}

img{
    display: block;
	margin-top: auto;
	margin-bottom: auto;
    margin-left: auto;
    margin-right: auto; 
}

#footer {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align: center; 
}

#footer p {
	font-size: .7em;
	font-family: Times New Roman;
}
 }