@charset "UTF-8";

header,nav,article,footer
{
	display:block;
}

body,article,p,h1,h2,h3,h4,p,ul,ol,li,header,form
{
	margin:0px;
	padding:0px;
}


body {
	background-repeat: repeat-x;
	background-image: url(BG.jpg);
	width: 100%;
	height: 100%;
	left: 0px;
	bottom: 0px;
	margin: 0px;
	display: block;
}

#verhoLeft {
	display: block;
	position: fixed;
	height: 100%;
	width: 30px;
	right: 0px;
	top: 0px;
	background-color: #000;
}

.verhoRight {
	display: block;
	position: fixed;
	height: 100%;
	width: 30px;
	left: 0px;
	top: 0px;
	background-color: #000;
}

.verhoLeft {
	display: block;
	position: fixed;
	height: 100%;
	width: 30px;
	right: 0px;
	top: 0px;
	background-color: #000;
}

#verhoRight {
	display: block;
	position: fixed;
	height: 100%;
	width: 30px;
	left: 0px;
	top: 0px;
	background-color: #000;
}



header {
	height: 50px;
	background-image: url(headerImg.png);
	background-repeat: repeat-x;
}

header a img {
	float:left;
}

.fb-like {
	z-index: 99999;
	height: 50px;
	width: 50px;
	float:left;
	padding-top:15px;
	padding-left:100px;
}


.mmStoryline {
	font-family: 'Special Elite', cursive, "Courier New", Courier, monospace;
	font-weight: normal;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	padding-left: 50px;
}

.mmStoryline ul li {
	display: inline;
	height: 5px;
	width: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 25px;
	color: #888;
}

.current {
	text-decoration: none; 
	color: #fff;
}




.mmStoryline {
	height: 50px;
	float: left;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
}

nav ul li {
	display: inline;
	font-family: 'Special Elite', cursive, "Courier New", Courier, monospace;
	font-weight: normal;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	margin-right: 2em;
}

.link a:link {
	text-decoration: none; 
	color: #000;
}

.link a:visited {
	color: #000;   	
}

.link a:hover {
	background-color: #FF0; 
}

.link a:active {
	background-color: #FFF;
	vertical-align:top;
}

.current {
	text-decoration: none; 
	background-color: #FF0;
	vertical-align:top;
}

.valittu {
	text-decoration: none; 
	background-color: #FF0;
	vertical-align:top;
	}







/*------- header end -------*/

#siteBody {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	letter-spacing: 0.05em;
	color: #FFF;
	z-index: 999;
}

h2 {
	font-family: 'Parisienne', cursive;
	font-size: 2em;
	letter-spacing: -0.01em;
	color: #FFF;
	padding-right: 10%;
	padding-left: 10%;
}

.story {
	width: 100%;
	height: 140px;
	overflow:auto;
	padding-top:20px;
	clear:both;
}

.storyText {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	color: #fff;
	padding-right: 10%;
	padding-left: 10%;
	line-height: 1.5em;
}

.storyText a:link {
	font-size: 0.5em;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
}

.storyText a:visited {
	color: #fff;
	text-transform: uppercase;
}

.storyText a:hover {
	color: #ff0;
	text-transform: uppercase;
}

.storyText a:active {
	color: #ff0;
	text-transform: uppercase;
}

.storySpan {
	font-family: 'Parisienne', cursive;
	font-size: 2em;
	letter-spacing: -0.01em;
	color: #b8d2dd;
}

#container {
}

.mainImage {
	padding-bottom:0px;
	display:block;
	margin-right: auto;
	margin-left: auto;
}

#mainImageIndex {
	display:block;
	margin-right: auto;
	margin-left: auto;
	width: 600px;
	height: 700px;
	margin-top: 0px;
}

#MMvideo {
	display:block;
	margin-right: auto;
	margin-left: auto;
	width: 360px;
	height: 260px;
	padding-top: 40px;
}

.MMmyspace {
	display:block;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 90px;
	padding-top: 80px;
}

.indexText {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	color: #fff;
	padding-right: 50px;
	padding-left: 60px;
	padding-top: 180px;
	line-height: 1.5em;
	overflow:auto;
}

.pauseText {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.5em;
	letter-spacing: 0.1em;
	color: #fff;
	padding-top: 10px;
	line-height: 1.5em;
	text-transform: uppercase;
	text-align: center;
}

.pauseText a {
	text-decoration: none;
}

.pauseText a:link {
	color: #fff;
}
.pauseText a:visited {
	color: #fff;
}
.pauseText a:hover {
	color: #ff0;
}
.pauseText a:active {
	color: #ff0;
}


.indexSpan {
	font-family: 'Parisienne', cursive;
	font-size: 2em;
	letter-spacing: -0.01em;
	color: #b8d2dd;
	overflow:auto;
}


.previousPage {
	display: block;
	position: fixed;
	height: 80px;
	width: 80px;
	left: 0px;
	bottom: 0px;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	z-index: 9999;
}
.previousPage a:link {
	display: block;
	position: fixed;
	left: 0px;
	bottom: 0px;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.previousPage a:visited {
	display: block;
	position: fixed;
	left: 0px;
	bottom: 0px;
}
.previousPage a:hover {
	display: block;
	position: fixed;
	left: 5px;
	bottom: 0px;
}
.previousPage a:active {
	display: block;
	position: fixed;
	left: -5px;
	bottom: 0px;
}

.nextPage {
	display: block;
	position: fixed;
	height: 80px;
	width: 80px;
	right: 0px;
	bottom: 0px;
	z-index: 9999;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.nextPage a:link {
	display: block;
	position: fixed;
	right: 0px;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.nextPage a:visited {
	display: block;
	position: fixed;
	right: 0px;
}
.nextPage a:hover {
	display: block;
	position: fixed;
	right: 5px;
}
.nextPage a:active {
	display: block;
	position: fixed;
	right: -5px;
}

.frog {
	display: block;
	position: fixed;
	height: 152px;
	width: 100px;
	right: 100px;
	z-index: 9999;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.frog a:link {
	display: block;
	position: fixed;
	bottom: -110px;
	border-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.frog a:visited {
	display: block;
	position: fixed;
	bottom: -110px;
}
.frog a:hover {
	display: block;
	position: fixed;
	bottom: -5px;
}
.frog a:active {
	display: block;
	position: fixed;
	bottom: 5px;
}


#footer{
margin: 0 auto;
border: none;
}