/*-----------------------------------------------------------------------------
Prototype Style Sheet (empty commented stylesheet)
version:   1.0
author:    andy budd
email:     info@andybudd.com
website:   http://www.andybudd.com/
-----------------------------------------------------------------------------*/

/* border: 1px solid #ff0000; /*

/* =General
-----------------------------------------------------------------------------*/
/* Remove padding and margin */
* { margin: 0; 	padding: 0; }

/* Put it back on certain elements */
pre, blockquote, table { margin: 5px 0;}
h3, h4, h5, h6 { margin: 0 0 5px 0;}
h2 { margin: 15px 0 5px 0;}
p {text-indent: 0; margin:0}
p.indent {margin: 0; text-indent: 20px;}
p.margin {margin: 10px 0 10px 0;}
ul {
	list-style-position: inside;
	list-style-type: circle;
	}

/* Class for clearing floats */
.clear { clear:both; }

.floatlf {float: left; margin-right: 10px;}
.floatrt {float: right; margin-left: 10px;}

/* Remove border around linked images */
img { border: 0; }


/* skipnav */
#skipnav
	{ position:absolute;
	margin-left: -1000px;
	}

#skipnav a:focus, #skipnav a:active 
	{
	margin-left: 1000px;
	overflow: visible;
	display: block;
	width: 10em;
	}
	
/* =LINKS 
----------------------------------------------------------------------------*/
a { text-decoration: none; font-weight: bold;}
a:link, a:visited { color:#cc3366; border-bottom: 1px solid #cc3366;}
a:hover { color:#a2214c; border-bottom: 1px solid #a2214c;}

.mainFeature a:link, .mainFeature a:visited, .mainFeature a:hover { color: #4f6725; border-bottom: 1px solid #4f6725;}


/* =TYPOGRAPHY
-----------------------------------------------------------------------------*/

/*font-size*/
h1 { font-size: 2.5em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }
p, li  { font-size: 1.2em; }	

/*color*/
h2 { color: #000 }
h4 { color:#c36; }
div#mainContent h2 {color: #c63;}
div#mainContent h3  {color: #ed3068;}
	
/* = margin and padding settings on content*/
div#mainContent p, 
div#mainContent h2,
div#mainContent h3, 
div#mainContent ul, 
div#mainContent img {
	padding-left: 55px
	}
div#mainContent h4 {margin-left: 55px; display: inline;}
div#mainContent div.mainFeature {margin: 20px 0 0 55px} /*set on Feature div not para */
div#mainContent img.floatrt, div#mainContent img.nopadding {padding-left: 0}	
div#mainContent img.buybutton {float: right; padding: 20px 0 0 10px}	
div#object {
	margin: 10px 0 15px 55px; 
	background-color: #fff; 
	width: 420px;
	height: 340px
	}

/* =CLASSES
-----------------------------------------------------------------------------*/
.white {color: #fff}
.pink {color: #c36}
.orange {color: #c63}
.blue {color:#039}	

/* =BASIC POSITIONAL LAYOUT
-----------------------------------------------------------------------------*/

body {
	text-align: center;
	font-family: "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	color: #222020;
	background-color:#dfeef1;
	background-image: url(../images/architecture/bottom.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	position: relative;
	}

/* Holly hack for IE Must be zero, not the usual 1% value, due to IE bug  \*/
* html body { height: 1%; }

/* TOP BG IMAGE */	
div#wrapper {
	width: 100%;
	background-image: url(../images/architecture/top.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	}
	
/* FIXED WIDTH CONTENT */	
div#contentContainer, div#footer {
	text-align: left;
	width: 840px;
	}
div#contentContainer {
	margin: 0 auto 250px auto;
	background-color:#faf2e4;
	background-image: url(../images/architecture/contentbg.jpg);
	background-repeat: repeat-y;
	}
div#footer	{
	height: 60px;
	background-color:#dfeef1;
	margin: 0 auto;
	background-image: url(../images/architecture/footer.jpg);
	background-repeat: no-repeat;
	}
	
div#footer p {float: right; padding: 30px 55px 0 0 }
div#footer p a {border: none; }	
div#footer p.validated {float: left; margin: 0 0 0 35px; padding-top: 26px}


/* =HEADER 
----------------------------------------------------------------------------*/	
div#header {
	background-color:#faf2e4;
	height: 270px;
	background-image: url(../images/architecture/header.jpg);
	background-repeat: no-repeat;
	}
	
div#header h1 {
	position:relative;
	width: 480px;
	height: 200px;
	}	

div#header h1 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/architecture/h1.png);
	background-repeat: no-repeat;
	}			
		
/* =mainNav */
ul#mainNav { 
	list-style-type:none; 
	height: 40px;
	margin: 20px 0 0 35px;
	}
ul#mainNav li {
	font-size: 1.4em;
	display:inline;
	}
ul#mainNav li a { padding-left: 32px; 
	border-bottom: none;
	background-image: url(../images/architecture/star_pale.gif);
	background-repeat: no-repeat;
	background-position: 12px 0px;
	}
ul#mainNav li a:hover, body#home li.home a, body#book li.book a, body#me li.me a, body#you li.you a, body#schools li.schools a, body#fun li.fun a, body#dances li.dances a {
	padding-left: 32px;
	background-image: url(../images/architecture/star.gif);
	background-repeat: no-repeat;
	background-position: 12px 0px;
	text-decoration: none;
	color: #a2214c;
	}

/* =MAIN AND SUB COLUMNS 
----------------------------------------------------------------------------*/	
div#mainContent { 
	float: left; 
	width: 500px; 
	margin-bottom: 4em;
	}
		
div#subContent { 
	width: 200px; 
	float: right;
	margin-right: 50px;
	display: inline;
	margin-bottom: 4em;
	color: #000;
	}


/* =MAIN FEATURE
---------------------------------------------------------------------------

/* mainFeature */		
.mainFeature { 
	background-image: url(../images/features/mainF1top.jpg);
	width: 409px;
	background-repeat: no-repeat; 
	margin-bottom: 10px;
	font-weight: bold;
	}

div#mainContent .mainFeature p {
	padding-left: 20px; 
	padding-right: 100px; 
	color: #333;
	}	
	
div#mainContent .mainFeature p.end { 
	background-repeat: no-repeat;
	background-position: left bottom;
	font-weight: bold;
	background-image: url(../images/features/mainF1bottom.jpg);
	padding: 0 100px 30px 20px; 
	} 
	
div#mainContent .mainFeature h3 {
	margin: 0; 
	padding: 20px 0 5px 20px;
	color: #4f6725;
	}	
	
div#musicplayer	 {
	float: left; 
	padding-left: 20px;
	padding-right: 10px;
	}		
	


/* =PAGE SPECIFICS
----------------------------------------------------------------------------*/
div#bookimage {
	float: left;
	width: 120px;
	height: 146px;
	margin: 0 10px 0 55px;
	background-image: url(../images/pages/sanddancerscover.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: inline;
	}

/* =HOME PAGE */
body#home div#imageContainer  {
	background-image: url(../images/architecture/thestars.gif);
	background-repeat: no-repeat;
	background-position: 500px 730px;
	z-index: 1
	}
	
body#home .mainFeature { background-image: url(../images/features/mainF1top-music.jpg); }	

/* =BOOK PAGE */
body#book .mainFeature { background-image: url(../images/features/mainF1top-book.jpg); }

/*SCHOOLS PAGE*/
body#schools div#mainContent ul { list-style-type: none; }
body#schools div#mainContent li {
	padding: 0 0 0 30px;
	margin-bottom: 10px;
	background-image: url(../images/architecture/pinkstar.gif);
	background-repeat: no-repeat;
	}
	
/* =FUN PAGE */
body#fun div#mainContent h3 {display: inline; padding: 2px; background-color: #ed3068; color: #fff}	
body#dances .orange {font-weight: bold}	

/* =YOU PAGE */
body#you div#mainContent h3 {margin-top: 2em;}
body#you div#subContent form {
	padding: 50px 0 30px 0;
	margin: 0;
	background-image: none;
	}
	
body#you div#subContent input { 
	width: 160px; 
	margin: 0 0 0 10px;
	}	
body#you div#subContent textarea { 
	width: 160px; 
	margin: 0 0 10px 10px;
	}	
body#you input.contact_button {
	width:				160px;
	margin:				10px 0 0 0;
	color: #fff;
	}


/* =FORMS
-----------------------------------------------------------------------------*/
form {
	padding: 30px 0 30px 0;
	margin: 0 0 0 55px;
	border: none;
	background-image: url(../images/architecture/formdeco.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
	
input { width: 300px; }	
textarea { width: 300px; height: 150px; }	
	
body#schools form {background: none; margin-left: 0; }	
body#schools form input,
body#schools form select,
body#schools form textarea {width: 170px; margin-left: 0;}


input,select,textarea {
	font-size:			14px;
	color:				#c63;
	font-weight:		normal;
	font-family:		Arial, Helvetica, sans-serif;
	padding:			8px 0 8px 10px;
	margin:				0 0 0 40px;
	background:			#fff;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
	}	
	
input:focus,select:focus,textarea:focus{ background: #e9e9e9;}
.input_wrap {
	display: block;
	padding: 0;
	margin:	8px 0 0 0;
	}
	
input.contact_button {
	display:			block;
	width:				350px;
	font-size:			20px;
	background: 		url('../images/architecture/littletick.gif') no-repeat right -20px;
	border:				none;
	font-style:			normal;
	text-align:			center;
	font-weight:		bold;
	padding:			0 0 0 10px;
	margin:				10px 0 0 0;
	cursor:				pointer;
	}

input.contact_button:hover {
	background-position:center right;
	color:				#5c6364;		
	}	


/* =Nature sleuth game
-----------------------------------------------------------------------------*/

/* =links */

 a#link {
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	background-repeat:no-repeat;
	border: 1px solid #666;
	z-index: 1;
	}
body#home a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/butterflyThumb.jpg);
	}
body#book a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/redkiteThumb.jpg);
	}	
body#me a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/ploverThumb.jpg);
	}
	
body#you a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/thrushThumb.jpg);
	}	

body#schools a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/snailThumb.jpg);
	}
body#dances a#link { 
	right: 20px;
	bottom: 20px;
	background-image: url(../images/nature/searocketThumb.jpg);
	}	

/* =game page */
body#fun div#collective {
	margin: 20px 0 130px 55px;
	padding: 10px 10px 130px 10px;
	background-image: url(../images/nature/sanddune.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #dfeef1;
	}
body#fun div#collective p, body#fun div#collective h2 {padding: 0;}
body#fun div#collective h2 {margin-top: 0}

body#fun div#image {
	width: 120px; 
	height: 120px; 
	margin: 0 10px 10px 0;
	background-repeat: no-repeat;
	display: inline
	}
			
body#fun div#image img {border: 2px solid #000; padding: 0;}	
body#fun form {
	padding: 10px 0 10px 0;
	margin: 0;
	background-image: none;
	}
body#fun input { width: 300px; }	
body#fun form p {margin: 5px 0}
body#fun form p.clue {margin-bottom: 30px; color: #a2214c;}
	
body#fun input.contact_button {
	width: 150px;
	padding: 0;
	text-align:	left;
	}

input.contact_button:hover {
	background-position:center right;
	color:				#5c6364;		
	}