@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

body,html{
	border:0; padding:0; margin:0;
}


.socialIcon{ /* Opt2 / Opt3 menus */
	width: 30px;
	height: 30px;
	padding-bottom:10%;
}

/* -------------------- Landing -------------------- */

#outsideMallName > a{
	color: #297051;
	text-decoration: none;
}

#landing{
	background-image:url('img/landing.jpg');
	position:relative;
	
	background-size:cover;
	background-position:center;
}

#landingLogo {
	left: 25%;
	position: absolute;
	top: 35%;
	width:50vw;
	text-align:center;
}

#landingLogo img{
	/*width:100%;
	max-width:180px;
	margin:auto;*/
	max-width: 180px;
	margin: auto;
	max-height: 60px;
}

#enterVillage{
	width:80%; height:40px;
	position:absolute;
	bottom:8%;
	left:10%;
	text-decoration:none;
}

#progressBar{
	width:96%;
	height:96%;
	padding:2%;
	border-radius:10px;
	background:rgba(0,0,0,0.35);
}

#progressText{
	width:100%;
	height:100%;
	position:absolute;
	z-index:7777;
	
	color:#fff;
	text-align:center;
	line-height:175%;
	font-family:'Roboto Slab', 'Arial', sans-serif;
	font-size:21px;
}

#progress{
	position:absolute;
	width:2%;
	background:#00e01e;
	height:96%;
	border-radius:10px;
}

/* -------------------- Outside -------------------- */

.hh-head{
	font-weight: bold;
}

#exteriorContainer{
	margin:0 auto;
	position:relative;
}
#exteriorWindow{
	margin: 0 auto;
	overflow:hidden;
	position: absolute;
	width: 100%;
}
#exteriorWrapper{
	background: #00adf0;
	background: -moz-linear-gradient(top,  #00adf0 0%, #b3eaff 48%, #e2f7ff 57%);
	background: -webkit-linear-gradient(top,  #00adf0 0%,#b3eaff 48%,#e2f7ff 57%);
	background: linear-gradient(to bottom,  #00adf0 0%,#b3eaff 48%,#e2f7ff 57%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adf0', endColorstr='#e2f7ff',GradientType=0 );
}
.exterior{
	float:left;
	position:relative;
}
#ext1{
	background:url('img/exterior1.png');
	background-size:100%;
	z-index:310;
}
#ext2{
	background:url('img/exterior2.png');
	background-size:100%;
	z-index:311;
}
#ext3{
	background:url('img/exterior3.png');
	background-size:100%;
	z-index:312;
}
#ext4{
	background:url('img/exterior4.png');
	background-size:100%;
	z-index:313;
}
#ext5{
	background:url('img/exterior5.png');
	background-size:100%;
	z-index:314;
}
#ext6{
	background:url('img/exterior6.png');
	background-size:100%;
	z-index:315;
}
#directoryWrap{
	background:url('img/whole-directory-new.png');
	background-size:100%;
	float:left;
	position:relative;
	z-index:316;
}
#ext7 {
	background:url("img/directory-new.png");
	background-repeat:no-repeat;
	background-size:100%;
	left: 50%;
	position: relative;
}
#ext8{
	background:url('img/exterior8.png');
	background-size:100%;
	z-index:317;
}
#ext9{
	background:url('img/exterior9.png');
	background-size:100%;
	z-index:318;
}
#ext10{
	background:url('img/exterior10.png');
	background-size:100%;
	z-index:319;
}
#ext11{
	background:url('img/exterior11.png');
	background-size:100%;
	z-index:320;
}
#ext12{
	background:url('img/exterior12.png');
	background-size:100%;
	z-index:321;
}
#ext13{
	background:url('img/exterior13.png');
	background-size:100%;
	z-index:322;
}
#grass{
	width:100%;
	background: #00ff00;
	background: -moz-linear-gradient(top,  #00ff00 0%, #00af00 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(100%,#00af00));
	background: -webkit-linear-gradient(top,  #00ff00 0%,#00af00 100%);
	background: -o-linear-gradient(top,  #00ff00 0%,#00af00 100%);
	background: -ms-linear-gradient(top,  #00ff00 0%,#00af00 100%);
	background: linear-gradient(to bottom,  #00ff00 0%,#00af00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00af00',GradientType=0 );
	position:absolute;
	bottom:0px;
	z-index:888;
}
#clouds{
	width:7700px;
	height:250px;
	position:absolute;
	z-index:305; /* behind the exteriors */
	overflow:hidden;
}
.cloud{
	position:absolute;
	width:230px;
	height:150px;
	
	background-repeat:no-repeat;
	
	/* to be positioned with js */
	top:20px; left:-250px;
}
#cloud1{
	background-image:url('img/cloud1.png');
	background-size:contain;
}
#cloud2{
	background-image:url('img/cloud2.png');
	background-size:contain;
}
#cloud3{
	background-image:url('img/cloud3.png');
	background-size:contain;
}
#cloud4{
	background-image:url('img/cloud4.png');
	background-size:contain;
}
#cloud5{
	background-image:url('img/cloud5.png');
	background-size:contain;
}
#cloud6{
	background-image:url('img/cloud6.png');
	background-size:contain;
}
#cloud7{
	background-image:url('img/cloud7.png');
	background-size:contain;
}
.butterfly{
	width:50px;
	height:50px;
	position:absolute;
	
	left:300px;
	top:-50px;
	z-index:909;
}
#directoryLinks {
	width: 77%;
	height: 52%;
	left: 12%;
	position: absolute;
	top: 36.5%;
	z-index:9950; /* over eventsWrap */
}
.directoryLink {
	height: 15%;
	line-height: normal;
	position: absolute;
	text-align: center;
	width: 49%;
	line-height: 2em; /* JS */
	font-size: 120%; /* JS */
	font-family:'Roboto Slab', 'Arial', sans-serif;
	border:1px solid black;
}
.left{
	left:0%;
}
.right{
	right:0%;
}
#workshopDL{ background: #d07cff; }
#boutiqueDL{ background: #00aef0; }
#libraryDL{ background: #ffffff; top:17%; }
#enviroclubDL{ background: #fff200; top:17%; }
#postofficeDL{ background: #ff87bc; top:34%; }
#photostudioDL{ background: #00d7cd; top:34%; }
#schoolDL{ background: #00ee21; top:51%; }
#internetcafeDL{ background: #ff0000; top:51%; }
#artstudioDL{ background: #0054d7; top:68%; color:#fff; }
#weatherstationDL{ background: #f8941d; top:68%; }
#trainstationDL{ background: #d900ff; top:85%; }
#candyshopDL{ background: #8dc73f; top:85%; }
.door{
	position:absolute;
}
#trainstation-door{
	left: 42%;
	top: 57.5%;
	width: 21%;
}
#candyshop-door {
	width: 21%;
	left: 16%;
	top: 61%;
}
#postoffice-door {
	width: 20.7%;
	left: 23.5%;
	top: 58%;
}
#artstudio-door {
	width: 21%;
	left: 52.5%;
	top: 59%;
}
#workshop-door {
	width: 21%;
	left: 10.7%;
	top: 59%;
}
#boutique-door {
	width: 21%;
	left: 40.5%;
	top: 54.5%;
}
#photostudio-door {
	width: 21%;
	top: 55.5%;
	left: 16.7%;
}
#enviroclub-door {
	width: 21%;
	left: 32%;
	top: 62%;
}
#school-door {
	left: 39.8%;
	top: 55%;
	width: 20.5%;
}
#internetcafe-door {
	width: 21%;
	left: 37%;
	top: 58.6%;
}
#library-door {
	width: 20.8%;
	left: 42.5%;
	top: 52.5%;
}
#weatherstation-door {
	width: 20%;
	left: 52.5%;
	top: 59.8%;
}
#outsideMallName{
	/*width:100%;
	height:5%;
	text-align: center;
	position:absolute;
	bottom:4.5%;
	font-family:'Roboto Slab', 'Arial', sans-serif;
	color:#297051;*/
    width: 35%;
    height: 10%;
    text-align: center;
    position: absolute;
    top: 26%;
    font-family: 'Roboto Slab', 'Arial', sans-serif;
    color: #297051;
    left: 32.5%;
}
#outsideMallLogo {
    width: 25%;
    height: 10%;
    position: absolute;
    left: 37.5%;
    top: 26%;
	text-align:center;
}
#outsideMallLogo img{
	/*width:100%;*/
	max-height: 100%;
	max-width: 100%;
}
#easterEventsButton{
	bottom: 4%;
    cursor: pointer;
    font-size: 16px;
    height: 5%;
    padding-top: 0.25%;
    padding-bottom: 0.25%;
    position: absolute;
    text-align: center;
    width: 80%;
    left: 10%;
    font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
    color: #333;
    background: -moz-linear-gradient( top, #fff3db 0%, #ffc821 25%, #ff3c00);
    background: -webkit-gradient( linear, left top, left bottom, from(#fff3db), color-stop(0.25, #ffc821), to(#ff3c00));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #b85f00;
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0);
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0);
	
    z-index: 9090;
}
#easterEventsWrap{
	position:absolute;
	width:95%;
	left:2.5%;
	height:95%;
	bottom:5%;
	overflow:hidden;
	z-index:9089;
}
#easterEvents {
    width: 100%;
    height: 92%; /*90*/
    position: absolute;
    top: 100%;
    background: #fff;
	border-radius: 6px 6px 0px 0px;
}
#easterEventsClose {
    width: 100%;
    text-align: center;
    font-family: 'Roboto Slab', Arial, sans-serif;
    font-size: 14px;
    /*background: #ffc821;*/
    height: 7.5%;
	border-radius: 6px 6px 0px 0px;
	
	background: #ff3c00;
	background: -moz-linear-gradient(top,  #ff3c00 0%, #ffc821 100%);
	background: -webkit-linear-gradient(top,  #ff3c00 0%,#ffc821 100%);
	background: linear-gradient(to bottom,  #ff3c00 0%,#ffc821 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3c00', endColorstr='#ffc821',GradientType=0 );
}
#easterEventsInfo{
    width: 100%;
    height: 100%; /*93*/
	overflow:auto;
}
#easterEventsInfo > br{
	display: none;
}
#easterEventsInfo table {
    width: 100% !important;
    height: 100% !important;
    border-color: #FFC821 !important;
	top: 0% !important;
}
#couponsPage{ display: none; }
/*td #optionalButtons{ /* Opt2 - moved to eventsInfo */
	top:10%;
}*/
/*#optionalButtons{
	width: 80%;
	left:10%;
	height: 5.5%;
	position:absolute;
	bottom:4.5%;
}*/
#couponsButton{
	width:46.5%;
	height:99.5%;
	padding-top:0.25%;
	padding-bottom:0.25%;
	left:2.5%;
	background:orange;
	text-align:center;
	position:absolute;
	border-radius:6px;
	font-family:'Roboto Slab', 'Arial', sans-serif;
	border:1px solid black;
}
#egghuntButton{
	width:46.5%;
	height:99.5%;
	padding-top:0.25%;
	padding-bottom:0.25%;
	/*right:2.5%;*/
	right: 1%; /*2.5 is correct but 1 looks better*/
	background:orange;
	text-align:center;
	position:absolute;
	border-radius:6px;
	font-family:'Roboto Slab', 'Arial', sans-serif;
	border:1px solid black;
}

/* -------------------- Outside: Portrait -------------------- */

/* Small portrait + fallback */
@media only screen and (min-width: 320px){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:4480px;
		height:480px;
	}
	.exterior{
		width:320px;
		height:480px;
	}
	#directoryWrap{
		width:640px;
	}
	#ext7{
		margin-left:-160px;
	}
	#grass{
		height: 115px;
		width:4480px;
	}
}

/* iPhone 5 and 5S */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:4480px;
		height:366px;
	}
	.exterior{
		width:320px;
		height:366px;
	}
	#directoryWrap{
		width:640px;
	}
	#ext7{
		margin-left:-160px;
	}
	#grass{
		height: 115px;
		width:4480px;
	}
}

/* Medium portrait */
@media only screen and (min-width: 321px) and (max-width:360px) and (orientation:portrait){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:5040px;
		height:540px;
	}
	.exterior{
		width:360px;
		height:412px;
	}
	#directoryWrap{
		width:720px;
	}
	#ext7{
		margin-left:-180px;
	}
	#grass{
		height:130px;
		width:5040px;
	}
}

/* Medium+ portrait */
@media only screen and (min-width: 361px) and (max-width:400px) and (orientation:portrait){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:5600px;
		height:600px;
	}
	.exterior{
		width:400px;
		height:458px;
	}
	#directoryWrap{
		width:800px;
	}
	#ext7{
		margin-left:-200px;
	}
	#grass{
		height:145px;
		width:5600px;
	}
}

/* Medium++ portrait */
@media only screen and (min-width:401px) and (max-width:440px) and (orientation:portrait){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:6160px;
		height:660px;
	}
	.exterior{
		width:440px;
		height:504px;
	}
	#directoryWrap{
		width:880px;
	}
	#ext7{
		margin-left:-220px;
	}
	#grass{
		height:160px;
		width:6160px;
	}
}

/* Medium+++ portrait */
@media only screen and (min-width:441px) and (max-width:480px) and (orientation:portrait){
	.cloud{
		width:150px;
		height:98px;
	}
	#exteriorWrapper{
		width:6720px;
		height:720px;
	}
	.exterior{
		width:480px;
		height:549px;
	}
	#directoryWrap{
		width:960px;
	}
	#ext7{
		margin-left:-240px;
	}
	#grass{
		height:175px;
		width:6720px;
	}
}

/* Large portrait */
@media only screen and (min-width:481px) and (max-width:520px) and (orientation:portrait){
	.cloud{
		width:160px;
		height:104px;
	}
	#exteriorWrapper{
		width:7280px;
		height:780px;
	}
	.exterior{
		width:520px;
		height:596px;
	}
	#directoryWrap{
		width:1040px;
	}
	#ext7{
		margin-left:-260px;
	}
	#grass{
		height:190px;
		width:7280px;
	}
}

/* Large+ portrait */
@media only screen and (min-width:521px) and (max-width:560px) and (orientation:portrait){
	.cloud{
		width:170px;
		height:111px;
	}
	#exteriorWrapper{
		width:7840px;
		height:840px;
	}
	.exterior{
		width:560px;
		height:641px;
	}
	#directoryWrap{
		width:1120px;
	}
	#ext7{
		margin-left:-280px;
	}
	#grass{
		height:205px;
		width:7840px;
	}
}

/* Large++ portrait */
@media only screen and (min-width:561px) and (max-width:600px) and (orientation:portrait){
	.cloud{
		width:180px;
		height:117px;
	}
	#exteriorWrapper{
		width:8400px;
		height:900px;
	}
	.exterior{
		width:600px;
		height:686px;
	}
	#directoryWrap{
		width:1200px;
	}
	#ext7{
		margin-left:-300px;
	}
	#grass{
		height:220px;
		width:8400px;
	}
}

/* Large+++ portrait */
@media only screen and (min-width:601px) and (max-width:640px) and (orientation:portrait){
	.cloud{
		width:190px;
		height:124px;
	}
	#exteriorWrapper{
		width:8960px;
		height:960px;
	}
	.exterior{
		width:640px;
		height:732px;
	}
	#directoryWrap{
		width:1280px;
	}
	#ext7{
		margin-left:-320px;
	}
	#grass{
		width:8960px;
		height:235px;
	}
}

/* Phablet portrait */
@media only screen and (min-width:641px) and (max-width:680px) and (orientation:portrait){
	.cloud{
		width:200px;
		height:130px;
	}
	#exteriorWrapper{
		width:9520px;
		height:1020px;
	}
	.exterior{
		width:680px;
		height:780px;
	}
	#directoryWrap{
		width:1360px;
	}
	#ext7{
		margin-left:-340px;
	}
	#grass{
		width:9520px;
		height:250px;
	}
}

/* Phablet+ portrait */
@media only screen and (min-width:681px) and (max-width:720px) and (orientation:portrait){
	.cloud{
		width:215px;
		height:140px;
	}
	#exteriorWrapper{
		width:10080px;
		height:1080px;
	}
	.exterior{
		width:720px;
		height: 825px;
	}
	#directoryWrap{
		width:1440px;
	}
	#ext7{
		margin-left:-360px;
	}
	#grass{
		width:10080px;
		height:265px;
	}
}

/* Phablet++/Tablet portrait */
@media only screen and (min-width:721px) and (max-width:770px) and (orientation:portrait){
	.cloud{
		width:230px;
		height:150px;
	}
	#exteriorWrapper{
		width:10780px;
		height:1155px;
	}
	.exterior{
		width:770px;
		height:880px;
	}
	#directoryWrap{
		width:1540px;
	}
	#ext7{
		margin-left:-385px;
	}
	#grass{
		width:10780px;
	}
}

/* Large Tablet portrait (Nexus 10 etc) */
@media only screen and (min-width:771px) and (max-width:850px) and (orientation:portrait){
	.cloud{
		width:230px;
		height:150px;
	}
	#exteriorWrapper{
		width:10780px;
		height:1155px;
	}
	.exterior{
		width:770px;
		height:880px;
	}
	#directoryWrap{
		width:1540px;
	}
	#ext7{
		margin-left:-385px;
	}
	#grass{
		width:10780px;
	}
}

/* -------------------- Outside: Landscape -------------------- */

/* Small-medium landscape + fallback */
@media only screen and (max-width:568px) and (orientation:landscape){
	.cloud{
		width:140px;
		height:91px;
	}
	#exteriorWrapper{
		width:3906px;
		height:320px;
	}
	.exterior{
		width:279px;
		height:320px;
	}
	#directoryWrap{
		width:558px;
	}
	#ext7{
		margin-left:-139.5px;
	}
	#grass{
		width:3906px;
	}
}

/* Medium landscape */
@media only screen and (min-width:569px) and (max-width:667px) and (orientation:landscape){
	.cloud{
		width:160px;
		height:104px;
	}
	#exteriorWrapper{
		width:4578px;
		height:375px;
	}
	.exterior{
		width:327px;
		height:375px;
	}
	#directoryWrap{
		width:654px;
	}
	#ext7{
		margin-left:-163.5px;
	}
	#grass{
		width:4578px;
	}
}

/* Medium+ landscape */
@media only screen and (min-width:668px) and (max-width:736px) and (orientation:landscape){
	.cloud{
		width:180px;
		height:117px;
	}
	#exteriorWrapper{
		height:414px;
		width:5054px;
	}
	.exterior{
		height:414px;
		width:361px;
	}
	#directoryWrap{
		width:722px;
	}
	#ext7{
		margin-left:-180.5px;
	}
	#grass{
		width:5054px;
	}
}

/* Large landscape (tablet) */
@media only screen and (min-width:737px) and (max-width:1024px) and (orientation:landscape){
	.cloud{
		width:200px;
		height:130px;
	}
	#exteriorWrapper{
		height:515px;
		width:6300px;
	}
	.exterior{
		height:515px;
		width:450px; /* 550 */
	}
	#directoryWrap{
		width:900px;
	}
	#ext7{
		margin-left:-225px;
	}
	#grass{
		width:6300px;
	}
}

/* XL landscape (Nexus 10 + catch-all) */
@media only screen and (min-width:1025px) and (max-width:1280px) and (orientation:landscape){
	.cloud{
		width:200px;
		height:130px;
	}
	#exteriorWrapper{
		height:515px;
		width:6300px;
	}
	.exterior{
		height:515px;
		width:450px;
	}
	#directoryWrap{
		width:900px;
	}
	#ext7{
		margin-left:-225px;
	}
	#grass{
		width:6300px;
	}
}
	
/* -------------------- Interiors -------------------- */
/* Each interior should have its own CSS, since background
positioning (etc) will matter more for some than others */

#useHorizontal{
	display:none;
}

.interior{
	position: absolute;
	width:100%;
	height:100%;
}

#trainstation-interior{
	background:url('img/trainstation-bg.gif');
	background-size: cover;
	background-position:center;
}

#candyshop-interior{
	background:url('img/candyshop-bg.gif');
	background-size:cover;
	background-position:center;
}

#postoffice-interior{
	background:url('img/postoffice-bg.gif');
	background-size:cover;
	background-position:center;
	
	position: absolute;
	width:100%;
	height:100%;
}

#artstudio-interior{
	background:url('img/artstudio-bg.gif');
	background-size:cover;
	background-position:center;
}

#workshop-interior{
	background:url('img/workshop-bg.gif');
	background-size:cover;
	background-position:center;
}

#boutique-interior{
	background:url('img/boutique-bg.gif');
	background-size:cover;
	background-position:center;
}

#photostudio-interior{
	background:url('img/photostudio-bg.gif');
	background-size:cover;
	background-position:center;
}

#enviroclub-interior{
	background:url('img/enviroclub-bg.gif');
	background-size:cover;
	background-position:center;
}

#school-interior{
	background:url('img/school-bg.gif');
	background-size:cover;
	background-position:center;
}

#internetcafe-interior{
	background:url('img/internetcafe-bg.gif');
	background-size:cover;
	background-position:center;
}

#library-interior{
	background:url('img/library-bg.gif');
	background-size:cover;
	background-position:center;
}

#weatherstation-interior{
	background:url('img/weatherstation-bg.gif');
	background-size:cover;
	background-position:center;
}

@media only screen and (orientation:portrait){
	/* Focus on conductor + chick */
	#trainstation-interior{
		background:url('img/trainstation-bg.gif');
		background-size: cover;
		background-position:45%;
	}
	
	/* focus on left bunny + bird */
	#workshop-interior{
		background:url('img/workshop-bg.gif');
		background-size:cover;
		background-position:15%;
	}
	
	/* focus on the left bunny + window */
	#enviroclub-interior{
		background:url('img/enviroclub-bg.gif');
		background-size: cover;
		background-position: 20%;
	}
	
	/* focus on teacher + right bunny */
	#school-interior{
		background:url('img/school-bg.gif');
		background-size:cover;
		background-position:75%;
	}
	
	/* focus on right bunny */
	#internetcafe-interior{
		background:url('img/internetcafe-bg.gif');
		background-size:cover;
		background-position: 75%;
	}
	
	#useHorizontal {
		height: 80%;
		width: 100%;
		font-size: 7vw;
		font-family: 'Roboto Slab',Arial,sans-serif;
		padding-top: 30%;
		position: absolute;
		left: 0;
		top: 0;
		background: #93DF92;
		display:block;
	}
}

/*@media only screen and (orientation:landscape){
	
}*/

.topWrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 39999;
  width:100%;
  height:15vh;
  background:rgba(0,0,0,0.25);
  border-bottom:5px solid #f7e200;
  
  font-family: 'Roboto Slab', serif;
}

.activitiesBar {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:39998;
  background:green;
  text-align:center;
  line-height:15vh;
  font-size:100%;
  color:#fff;
}

.menuBar {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index:39997;
  background:#816aa1;
  text-align:center;
  line-height:15vh;
  color:#fff;
}

.activitiesInfo {
  background: none repeat scroll 0 0 #93DF92;
  height: 83%; padding-top:3%;
  padding-left:5%; padding-right:5%;
  position: absolute;
  top: -100%;
  width: 90%;
  z-index: 31455;
  text-align:center;
}

.menuInfo {
  background: none repeat scroll 0 0 #E6E6FA;
  height: 83%; padding-top:3%;
  overflow:auto;
  padding-left:5%; padding-right:5%;
  position: absolute;
  top: -100%;
  width: 90%;
  z-index: 31454;
}

.column {
  float: left;
  font-family: 'PT Sans',sans-serif;
  font-size: 14px;
  margin-bottom: 15px;
  text-align: center;
  width: 100% !important;
  float: left;
}

.column > p{
	font-weight: bold;
}

.exit {
  cursor: pointer;
  position:absolute;
  z-index:22500;
  bottom:5%;
  right:5%;
  background:url('img/exitBtn.svg');
  background-size:cover;
  width:24vh;
  height:15vh;
  text-align:center;
  line-height:15vh;
  color:#fff;
  font-family:'Roboto Slab', sans-serif;
  font-size:5vh;
  text-shadow:1px 1px 0px #C5B500;
  
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
  
  display:table;
}

.activityButton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	width:80%;
	height:13%; padding-top:1%; padding-bottom:1%;
	margin-top:3.5%;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#3ea10d 0%,
		#8bbd2d);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#3ea10d),
		to(#8bbd2d));
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	border: 1px solid #67ad0b;
	-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(255,255,255,1);
}

@media only screen and (orientation:landscape){
	.activitiesBar, .menuBar{
		font-size: 7vh;
	}
	.column{
		font-size: 4.5vh;
	}
}

@media only screen and (orientation:portrait){
	.activitiesBar, .menuBar{
		font-size: 6vw;
	}
	.column{
		font-size: 4.5vw;
	}
}