body {
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 12px;
	color: #ffffff;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	background-color: #1f4971;
}

p {
	margin: 0;
	padding: 0;
}
/* img, div { behavior: url(iepngfix.htc) } */

div#curtain {
	position: absolute;
	width: 99%;
	height: 100%;
	left: 0;
	background-color: #1f4971;
	z-index: 1000;
}

div#container {
	background: transparent url('images/background.jpg') no-repeat top left;
	position: absolute;
	right: 0px;
	top: 0px;
/*	left: 100px; */
	width: 900px;
	height: 680px;
}

div#moon {
	display: block;
	position: absolute;
	left: 410px;
	top: 215px;
	width: 166px;
	height: 167px;
	z-index: 200;
}

div#storygames {
	display: block;
	position: absolute;
	left: 410px;
	top: 215px;
	width: 166px;
	height: 167px;
	z-index: 300;
	cursor: pointer;
}

div#textbox {
	position: fixed;
	top: 105px;
	margin-left: 15px;
	padding: 0;
	width: 180px;
	z-index: 550;
}
div#textbox div#bubble_top {
	background: transparent url('images/bubble_top.png') no-repeat center;
	width: 210px;
	height: 50px;
}	
div#textbox div#bubble_middle {
	background-color: #000000;
	width: 210px;
}	
div#textbox div#bubble_bottom {
	background: transparent url('images/bubble_bottom.png') no-repeat center;
	width: 210px;
	height: 11px;
}	
div#textbox div#bubble_middle div.tbox {
	padding: 10px;
}


div#bigCloud {
/*	background: transparent url('images/bigCloud.png') no-repeat center; */
	width: 267px;
	height: 161px;
	position: absolute;
	left: 370px;
	top: 230px;
	z-index: 400;
	text-align: center;
	cursor: pointer;
}
div#bigCloud img {
	vertical-align: middle;
}

div#owl {
	position: fixed;
	width: 186px;
	height: 131px;
	left: 0px;
	top: 10px;
	z-index: 600;
	cursor: pointer;
}

.ray {
	position: absolute;
	z-index: 100;
}
.cloud {
	position: absolute;
	z-index: 500;
	cursor: pointer;
}
.rainbow {
	position: absolute;
	z-index: 200;
	cursor: pointer;
}

#cloud1 { left: 408px; top: 31px; width: 170px; height: 96px; }
#cloud2 { left: 587px; top: 100px; width: 168px; height: 89px; }
#cloud3 { left: 643px; top: 240px; width: 176px; height: 117px; }
#cloud4 { left: 587px; top: 399px; width: 168px; height: 104px; }
#cloud5 { left: 407px; top: 482px; width: 180px; height: 101px; }
#cloud6 { left: 243px; top: 392px; width: 176px; height: 91px; }
#cloud7 { left: 150px; top: 232px; width: 178px; height: 109px; }
#cloud8 { left: 233px; top: 88px; width: 175px; height: 100px; }

div#ray1 { left: 495px; top: 0px; width: 225px; height: 295px; }
div#ray2 { left: 495px; top: 37px; width: 405px; height: 259px; }
div#ray3 { left: 495px; top: 296px; width: 405px; height: 259px; }
div#ray4 { left: 495px; top: 295px; width: 231px; height: 384px; }
div#ray5 { left: 264px; top: 296px; width: 231px; height: 384px; }
div#ray6 { left: 0px; top: 296px; width: 495px;height: 259px; }
div#ray7 { left: 0px; top: 37px; width: 495px; height: 259px; }
div#ray8 { left: 264px; top: 0px; width: 231px; height: 296px; }

div#rainbow1 { left: 493px; top: 11px; width: 168px; height: 135px; }
div#rainbow2 { left: 699px; top: 105px; width: 113px; height: 176px; }
div#rainbow3 { left: 693px; top: 315px; width: 135px; height: 168px; }
div#rainbow4 { left: 504px; top: 454px; width: 168px; height: 135px; }
div#rainbow5 { left: 335px; top: 452px; width: 166px; height: 135px; }
div#rainbow6 { left: 186px; top: 299px; width: 113px; height: 176px; }
div#rainbow7 { left: 149px; top: 100px; width: 115px; height: 177px; }
div#rainbow8 { left: 317px; top: 3px; width: 167px; height: 133px; }

a {
	color: #87CEEB;
}
a:hover {
	color: #ffffff;
}
a img, img {
	padding: 0;
	margin: 0;
	border: none;
}
map {
	border: none;
}

#menu {
	z-index: 1000;
	padding: 0;
	position: absolute;
	left: 50%;
	top: 10px;
	margin: 0 0 0 -150px;
	text-align: center;
	width: 320px;
}

#content {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -275px;
	text-align: center;
	width: 555px;
}

#principles {
	display: none;
}

#intro {
	border: 1px solid #444444;
	width: 400px;
	background-color: #202020;
	padding: 0 15px;
	margin: 0 auto;
}

#credits {
	border-top: 1px solid #444444;
	display: none;
	position: fixed;
	width: 100%;
	bottom: 0;
	right: 0;
	background-color: #202020;
	padding: 0px;
	margin: 0 auto;
}
#credits ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#credits ul li {
	text-align: left;
	padding: 5px;
}

#principlesButton, #engineButton, #creditsButton {
}

.tip .tip {
	width: 285px;
	padding: 5px 10px 5px 5px;
	background: url(images/bubble.png) center left;
}
.tip-top {
	height: 3px;
	background: url(images/bubble.png) top left;
	width:  300px;
}
.tip-bottom {
	height: 3px;
	background: url(images/bubble.png) bottom right;
	width:  300px;
}
.tip-title {
	padding-left: 5px;
	width: 100%;
}
.tip-text {
	padding-left: 5px;
	text-decoration: underline;
}
p {
	text-align: left;
}

.center {
	text-align: center;
}