
body{
	padding: 0;
	margin: 0; /* this makes the iframe fullscreen and removes any scrollbars */
	font: 12px arial; 
	font-weight:normal; 
	text-decoration: none;			/* no underlined text */
	}

/* basic menu settings */
.menu * { 
	padding:0; 
	margin: 0; 
	font: 12px arial;
	list-style-type:none;			/*removes bullet point from (sub)menu items */
	}

/* menu position */
.menu { 
	position: fixed;				/*locks menu to certain position */
	bottom: 0;						/*moves menu to bottom of page -  change to x pixels to move away from the bottom of the page */
	margin-top: 300px;				/* for now : sub menu height */
	float: left;					/*moves the menu to the left of the page */
	left: 100px;					/*moves the menu x pixels away from the left of the page */
    line-height: 12px; 				/*height of every text line */
	background: rgba(0,0,0,0.25);	/* make menu background a color */
	border-radius: 10px;			/* give menubar a rounded corner */
	}

/* menu bar image buttons */
#home {
	width: 50px;
	height: 50px;
	background: url(home_ro.png) 0 0;
	margin-right: 20px;
}

#next {
	width: 50px;
	height: 50px;
	background: url(camera_ro.png) 0 0;
	margin-right: 20px;
}

#list {
  width: 50px;
  height: 50px;
  background: url(menu_ro.png) 0 0;
}

#home:hover {
  width: 50px;
  height: 50px;
  background: url(home_ro.png) -50px 0;
}

#next:hover {
  width: 50px;
  height: 50px;
  background: url(camera_ro.png) -50px 0;
}

#list:hover {
  width: 50px;
  height: 50px;
  background: url(menu_ro.png) -50px 0;
}	

/* active menu text */ 
.menu a { 
	display: block; 
	text-decoration: none; 
	color: #000000;
	}

.menu a:hover {
	/*hover state as image/ */
	}

.menu ul li ul li a:hover { 
	/*hover state as image/ */
	}

.menu ul li ul li {
	width: 150px; 
	border: none; 
	padding-top: 5px; 
	padding-bottom: 5px;
	z-index:1;
	}

.menu ul li ul li a { 
	font-weight: normal; 
	}

.menu ul li {
	float: left; 
	width: 150px;		/* width of sub menu items - make wider as font-size is getting larger */
	font-weight: bold; 
	}

.menu ul li a { 
	}

.menu li{ 
	position:relative; 
	float:left;
	}

/* hides submenu */
.menu ul li ul, .menu:hover ul li ul, .menu:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	}

/* displays list as block */
.menu:hover ul, .menu:hover ul li:hover ul, .menu:hover ul li:hover ul li:hover ul { 
	display:block;
	}

.menu:hover ul li:hover ul { 
	position: absolute;
	margin-top: 1px;
	bottom: 100%;
	}

/* submenu item styling */
.title {
	background: #fff;
	color: #000;
	font: arial;
	font-size: 15px;		/* see also width of sub menu */
	padding: 15px;
	text-align: center;
/*	border-radius: 3px;		give sub menu a rounded corner */
}

/* colorchange rollover menuitem */
.title:hover {
background: rgb(200,200,200);
/*	border-radius: 6px;		give sub menu a rounded corner */
} 

iframe{      
        display: block;  /* iframes are inline by default */   
        height: 100vh;  /* Set height to 100% of the viewport height */   
        width: 100vw;  /* Set width to 100% of the viewport width */     
        border: none; /* Remove default border */
        background: white; /* Just for styling */
    }