/*
html elements
---------------------
*/

	body {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-color: #2a2a57;
		background-image: url("/secretmermaid/images/backgrounds/page_background_tile.jpg");
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 14px;
		line-height: 17px;
		color: #000000;
	}
	
	a:link, a:visited {
		color: #d00098;
		text-decoration: none;
	}
	a:hover {
		color: #d00098;
		text-decoration: underline;
	}
	
	.nonCSS {
		display: none;
	}
	
/*
structure elements
---------------------
*/

	#fullWidth {
		display: block;
		width: 100%;
		text-align: center;
	}

	#usborneBarArea {
		display: block;
		position: relative;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 100%;
		height: 30px;
		background-image: url("/images/common/mini-header/header-bg-tile.gif");
		background-repeat: repeat-x;
		background-color: #333333;
		text-align: left;
		overflow: hidden;
	}
	#usborneBarArea a {
		display: block;
		margin: 0px 0px 0px 3px;
		padding: 0px 0px 0px 0px;
		width: 250px;
		height: 30px;
	}
	#usborneBarArea a#miniLink {
		display: block;
		position: absolute;
		margin: 0px 0px 0px 0px;
		padding: 0px 8px 0px 0px;
		width: auto;
		height: 30px;
		top: 7px;
		right: 0px;
		font-family: Arial, Helvetica, sans-serif; 
		font-size: 11px;
		line-height: 14px;
		color: #ffffff;
		text-decoration: underline;
	}

	#centeredPage {
		display: block;
		margin: 0px auto 0px auto;
		padding: 0px 0px 0px 0px;
		position: relative;
		width: 900px;
		height: 5910px;
		text-align: left;
	}

	#backgroundAreas {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 900px;
		z-index: 40;
	}

	#backgroundOne {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 580px;
		background-image: url("/secretmermaid/images/backgrounds/background1.jpg");
		background-repeat: no-repeat;
	}

	#backgroundTwo {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 830px;
		background-image: url("/secretmermaid/images/backgrounds/background2.jpg");
		background-repeat: no-repeat;
	}

	#backgroundThree {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 900px;
		background-image: url("/secretmermaid/images/backgrounds/background3.jpg");
		background-repeat: no-repeat;
	}
	
	#backgroundFour {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 900px;
		background-image: url("/secretmermaid/images/backgrounds/background4.jpg");
		background-repeat: no-repeat;
	}
	
	#backgroundFive {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 900px;
		background-image: url("/secretmermaid/images/backgrounds/background5.jpg");
		background-repeat: no-repeat;
	}
	
	#backgroundSix {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 900px;
		background-image: url("/secretmermaid/images/backgrounds/background6.jpg");
		background-repeat: no-repeat;
	}

	#backgroundSeven {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 900px;
		height: 900px;
		background-image: url("/secretmermaid/images/backgrounds/background7.jpg");
		background-repeat: no-repeat;
	}

	#contentArea {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 900px;
		z-index: 50;
	}

/*
content
-------------------------
*/

	#usborneLogo {
		position: absolute;
		top: 8px;
		right: 18px;
	}

	#secretMermaidLogo {
		position: absolute;
		top: 7px;
		left: 8px;
	}
	#flashSecretMermaidLogo {
		position: absolute;
		top: 0px;
		left: 0px;
	}

	#illustrator {
		position: absolute;
		top: 15px;
		left: 530px;
	}

	#siteIntro {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: absolute;
		top: 335px;
		left: 30px;
		width: 275px;
		font-size: 18px;
		line-height: 22px;
		color: #ffffff;
		font-weight: bold;
		text-shadow: 0px 2px 5px #036;
	}
	
	#molly {
		position: absolute;
		top: 247px;
		left: 569px;
	}
	#flashMolly {
		position: absolute;
		top: 237px;
		left: 569px;
	}
	
	#dolphin {
		position: absolute;
		top: 691px;
		left: 288px;
	}
	
	#jellyfish1 {
		position: absolute;
		top: 687px;
		left: 88px;
	}
	
	#book1 {
		position: absolute;
		top: 673px;
		left: 454px;
	}
	#flashBook1 {
		position: absolute;
		top: 673px;
		left: 445px;
	}
	
	#shoal1 {
		position: absolute;
		top: 947px;
		left: 39px;
	}
	
	#bubbles1 {
		position: absolute;
		top: 1032px;
		left: 364px;
	}
	
	#book2 {
		position: absolute;
		top: 1131px;
		left: 48px;
	}
	#flashBook2 {
		position: absolute;
		top: 1121px;
		left: 38px;
	}
	
	#jellyfish2 {
		position: absolute;
		top: 1450px;
		left: 366px;
	}
	
	#book3 {
		position: absolute;
		top: 1526px;
		left: 429px;
	}
	
	#flashBook3 {
		position: absolute;
		top: 1516px;
		left: 429px;
	}
	
	#house1 {
		position: absolute;
		top: 1855px;
		left: 530px;
	}
	
	#necklace {
		position: absolute;
		top: 1718px;
		left: 71px;
	}
	#flashNecklace {
		position: absolute;
		top: 1718px;
		left: 61px;
	}
	
	#seahorse1 {
		position: absolute;
		top: 1801px;
		left: 484px;
	}
	
	#book4 {
		position: absolute;
		top: 1834px;
		left: 200px;
	}
	#flashBook4 {
		position: absolute;
		top: 1824px;
		left: 190px;
	}
	
	#bubbles2 {
		position: absolute;
		top: 2180px;
		left: 434px;
	}
	
	#book5 {
		position: absolute;
		top: 2395px;
		left: 505px;
	}
	#flashBook5 {
		position: absolute;
		top: 2385px;
		left: 515px;
	}
	
	#dolphin2 {
		position: absolute;
		top: 2460px;
		left: 110px;
	}
	
	#bubbles3 {
		position: absolute;
		top: 2715px;
		left: 240px;
	}
	
	#book6 {
		position: absolute;
		top: 2870px;
		left: 60px;
	}
	#flashBook6 {
		position: absolute;
		top: 2860px;
		left: 50px;
	}
	
	#shoal3 {
		position: absolute;
		top: 2795px;
		left: 560px;
	}
	
	#book7 {
		position: absolute;
		top: 3260px;
		left: 70px;
	}
	#flashBook7 {
		position: absolute;
		top: 3250px;
		left: 60px;
	}
	
	#jellyfish3 {
		position: absolute;
		top: 3250px;
		left: 580px;
	}
	
	#penguin {
		position: absolute;
		top: 3500px;
		left: 650px;
	}
	
	#seahorse2 {
		position: absolute;
		top: 3900px;
		left: 380px;
	}
	
	#bubbles5 {
		position: absolute;
		top: 3600px;
		left: 300px;
	}
	
	#book8 {
		position: absolute;
		top: 3770px;
		left: 430px;
	}
	#flashBook8 {
		position: absolute;
		top: 3750px;
		left: 440px;
	}
	
	#house2 {
		position: absolute;
		top: 3662px;
		left: 0px;
	}
	
	#book9 {
		position: absolute;
		top: 4150px;
		left: 500px;
	}
	#flashBook9 {
		position: absolute;
		top: 4180px;
		left: 490px;
	}
	
	#shoal4 {
		position: absolute;
		top: 4330px;
		left: 130px;
	}
	
	#bubbles4 {
		position: absolute;
		top: 4500px;
		left: 490px;
	}
	
	#book10 {
		position: absolute;
		top: 4640px;
		left: 70px;
	}
	#flashBook10 {
		position: absolute;
		top: 4630px;
		left: 60px;
	}
	
	#shoal2 {
		position: absolute;
		top: 4975px;
		left: 40px;
	}
	
	#book11 {
		position: absolute;
		top: 5030px;
		left: 423px;
	}
	#flashBook11 {
		position: absolute;
		top: 5019px;
		left: 420px;
	}
	
	#book12 {
		position: absolute;
		top: 5119px;
		left: 40px;
	}
	#flashBook12 {
		position: absolute;
		top: 5129px;
		left: 40px;
	}
	
	#shipAnchor {
		position: absolute;
		top: 5746px;
		left: 3px;
	}
	
	#crab {
		position: absolute;
		top: 5806px;
		left: 568px;
	}
	
	#darkQueen {
		position: absolute;
		top: 5294px;
		left: 517px;
	}
	#flashDarkQueen {
		position: absolute;
		top: 5294px;
		left: 517px;
	}
	
	#queenAndPrincess {
		position: absolute;
		top: 5464px;
		left: 123px;
	}
	#flashQueenAndPrincess {
		position: absolute;
		top:5454px;
		left: 113px;
	}
	
	#gates {
		position: absolute;
		top: 5537px;
		left: 595px;
	}


/*
content viewer
-------------------------
*/

	#contentViewer {
		display: block;
		position: absolute;
		z-index: 100;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		min-height: 100%;
	}
	#contentViewer.active {
		display: block;
	}
	#contentViewer.inactive {
		display: none;
	}

	#contentViewerBG {
		display: none;
		width: 100%;
		height: 100%;
		background-color: #2D2C58;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}

	.finalOpacity {
		display: block;
		filter: alpha(opacity=80);
		-moz-opacity: 80;
		opacity: 80;
	}

	#contentViewerY {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		text-align: center;
	}

	#contentViewerY.advanced {
		position: fixed;
	}

	#contentViewerPanel {
		display: block;
		position: relative;
		margin: 0px auto 0px auto;
		padding: 0px 0px 0px 0px;
		width: 640px;
		height: 550px;
	}

	#contentViewer #content {
		display: block;
		position: absolute;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		top: 50px;
		left: 20px;
		width: 600px;
		height: 450px;
		background-color: #FBF0A9;
		background-image: url("/secretmermaid/images/content_viewer/viewer_inner_bg.jpg");
		background-repeat: no-repeat;
		z-index: 200;
	}
	
	#contentViewer #content p.closeWindow {
		display: block;
		position: absolute;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		top: 6px;
		right: 16px;
	}
	
	#contentViewer #content .contentFrame {
		display: block;
		position: absolute;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		top: 40px;
		left: 15px;
		width: 570px;
		height: 380px;
		border: none;
	}