body{
	background: #90C427;
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

.menu{
	bottom: 2.5%;
	height: 12%;
	position: absolute;
	background: white;
	display: table;
	
	-webkit-box-shadow: inset 0 0 25px black, 0 0 20px black;
	-moz-box-shadow: inset 0 0 25px black, 0 0 20px black;
	box-shadow: inset 0 0 25px black, 0 0 20px black;
}

.menu-left{
}

.menu-right{
}

.menu-inner{
	position: relative;
	display: table-cell;
	text-align: center;
}

.menuItem{
	position: absolute;
	display: inline-block;
	height: 90%;
}

.menuItem:hover{ cursor: pointer; }

.round-border-full{
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}



  /*------------------*/
 /*  Homepage Style  */
/*------------------*/
#storyMenu{
	width: 100%;
	height: 50%;
	position: relative;
}

#storyMenu img{
	width: 20%;
	float: left;
	position: absolute;
	-webkit-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	-moz-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	
}
#storyMenu img:hover{
	cursor: pointer;
	border: 10px solid white;
}

/* Manually position the images */
#storyMenu img:nth-child(1){
	left: 2%;
	top: 25%;
	z-index: 1;
	transform:rotate(-7deg);
	-ms-transform:rotate(-7deg); /* IE 9 */
	-webkit-transform:rotate(-7deg); /* Safari and Chrome */
	
}
#storyMenu img:nth-child(2){
	left: 22%;
	top: 10%;
	z-index: 2;
}
#storyMenu img:nth-child(3){
	left: 40%;
	top: 15%;
	z-index: 3;
	transform:rotate(-7deg);
	-ms-transform:rotate(-7deg);
	-webkit-transform:rotate(-7deg); 
}
#storyMenu img:nth-child(4){
	left: 59%;
	top: 25%;
	z-index: 2;
}
#storyMenu img:nth-child(5){
	left: 78%;
	top: 17.5%;
	z-index: 1;
	transform:rotate(7deg);
	-ms-transform:rotate(7deg);
	-webkit-transform:rotate(7deg);
}
#siteLogo{
	height: 50%;
	position: relative;
	margin: auto;
}
#siteLogo img{
	position: absolute;
}
#siteLogo img:nth-child(1){
	top: 0%;
	left:22.5%;
	width: 50%;
}
#siteLogo img:nth-child(2){
top: 62%;
    right: 3.5%;
	width: 5%;
}

  /*--------------------------*/
 /*  Storyboard Index Style  */
/*--------------------------*/

#storyIndexContainer{
	position: relative;
	margin: auto;
	top: 2.5%;
	width: 90%;
	height: 85.5%;
}

#storyIndexContainer img{
	position: absolute;
	width: 22.5%;
	-webkit-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	-moz-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
}

#storyIndexContainer img:hover{
	cursor: pointer;
	border: 10px solid white;
}

#storyIndexContainer img:nth-child(1){
	top: 5%;
	left: -3.5%;
	transform:rotate(-7deg);
	-ms-transform:rotate(-7deg); /* IE 9 */
	-webkit-transform:rotate(-7deg); /* Safari and Chrome */
	z-index: 4;
}

#storyIndexContainer img:nth-child(2){
	left: 17.5%;
	top: 5%;
	transform:rotate(5deg);
	-ms-transform:rotate(5deg); 
	-webkit-transform:rotate(5deg); 
	z-index: 3;
}

#storyIndexContainer img:nth-child(3){
	left: 38.5%;
	top: 5%;
	z-index: 2;
}

#storyIndexContainer img:nth-child(4){
	right: 17.5%;
	top: 5%;
	z-index: 4;
	transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
}

#storyIndexContainer img:nth-child(5){
	right: -3.5%;
	top: 7%;
	z-index: 3;
	transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	-webkit-transform:rotate(-10deg);
}

#storyIndexContainer img:nth-child(6){
	left: -3.5%;
	top: 55%;
	z-index: 3;
	transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
}

#storyIndexContainer img:nth-child(7){
	left: 17.5%;
	top: 55%;
	z-index: 4;
	transform:rotate(-10deg);
	-ms-transform:rotate(-10deg); 
	-webkit-transform:rotate(-10deg);
}

#storyIndexContainer img:nth-child(8){
	left: 38.5%;
	top: 55%;
	z-index: 3;
	transform:rotate(1deg);
	-ms-transform:rotate(1deg);
	-webkit-transform:rotate(1deg);
}

#storyIndexContainer img:nth-child(9){
	right: 17.5%;
	top: 58%;
	z-index: 4;
	transform:rotate(-8deg);
	-ms-transform:rotate(-8deg);
	-webkit-transform:rotate(-8deg);
}

#storyIndexContainer img:nth-child(10){
	right: -3.5%;
	top: 55%;
	z-index: 3;
	transform:rotate(8deg);
	-ms-transform:rotate(8deg);
	-webkit-transform:rotate(8deg);
}

#storyIndex .menu{
	width: 15%;
	left: 42.5%;
}

#storyIndex .menuItem{
	height: 85%;
	top: 12%;
	left: 33%;
}

  /*------------------*/
 /* Storyboard Style */
/*------------------*/
.storyboard{
	width: 100%;
	height: 85%;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 0.5%;
	margin-top: 0.5%;
}

#story .menu{
	width: 90%;
	left: 5%;
	bottom: 1%;
}

#story #menuItem-prevSlide{
	top: 5%;
	left: 1%;
}

#story #menuItem-home{
	height: 85%;
	top: 12%;
	left: 13%;
}

#story  #menuItem-storyIndex{
	width: 7%;
	height: 80%;
	top: 12%;
	left: 25.5%;
}

#story  #menuItem-exercise{
	top: 2%;
	left: 36%;
}

#story  #container-lang{
	top: 5%;
	width: 41%;
	left: 47%;
}

#story  #container-inner{
	position: absolute;
	height: 80%;
	width: 90%;
	border: 5px solid black;
	top: 5%;
	left: 10%;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;

	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;

	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

#story #ico-audio{
	width: 20%;
	left: 1%;
}

#story #container-flags{
	position: absolute;
	width: 90%;
	height: 100%;
	left: 12%;
}

#story .ico-flag{
	position: relative;
	width: 20%;
	margin-left: 1.5%;
	top: 10%;
	height: 60%;
	
}
#story .active-flag{
	border: 5px solid #90C427;
	top: 5%;
	-webkit-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	-moz-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
	box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px black;
}

#story #menuItem-nextSlide{
	top: 5%;
	right:1%;
}