body	{
   background: #f2f2f2;
   /*
   background-image: url("images/bgcorner2.png");
   background-repeat: no-repeat;
   background-position: right top;
   */
  	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 0.900em; /* 14px/16=0.875em */
	line-height: 1.5em;
  	margin: 0px;
	}

	h1	{
	margin: 0px;
	padding-top: 8px;
	background: #009eff;
	}
	
	.scrollMenu {
	width: 100%;
  	position: relative;
  	background: #007ecc;
  	margin:0px;
  	z-index: 4;
	}

/* The sticky class is added to the header with JS when it reaches its scroll position */
	.sticky {
  	position: fixed;
  	top: 0;
  	left:0;
  	width: 100%
	}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
	.sticky + .main {
 	padding-top: 100px;
	}

	img.header {
	display: block;
  	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	}
	
	h2	{
	background: #009eff;
	margin:0px;
	padding-top:5px;
	padding-bottom:8px;
	text-align: center;
	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 12px; /* 40px/16=2.5em */
	color:#FFFFFF;
	}

	.menu	{
	display: block;
   margin-left: auto;
   margin-right: auto;
   padding-top: 3px;
   min-height: 25px;
   text-align: center;
	}

	.menuItem	{
	display: inline-block;
	min-width: 50px;	
	width: 100px;	
	padding: 3px;
	}
	
	.menuText	{
	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 0.975em;  /* 14px/16=0.875em */
	text-align: center;
	text-decoration: none;
	color:#ffffff;
	}

	h3	{
	text-align: left;
	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 1.25em; /* 30px/16=1.875em */
	}
	
	.action {
    color: darkblue;
	}

	section.intro	{
   background: white;
   color: black;
   border-radius: 0.3em;
	min-width: 60%;
	width:90%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
  	padding: 15px 40px;
	}

	section.main	{
   background: white;
   color: black;
   border-radius: 0.3em;
	min-width: 60%;
	width:90%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
  	padding: 15px 40px;
	}

	section.rhs	{
	float: right;
	margin-left: 5%;
	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 0.775em;  /* 14px/16=0.875em */
	min-width: 30%;
	max-width: 80px;
	}

	p	{
	font-family: Arial, Helvetica, Freesans, sans-serif;
	color: #0d0d0d;
	}

	p.hidden	{
	display: none;
	}
	
	p.footer	{
	font-family: Arial, Helvetica, Freesans, sans-serif;
	font-size: 0.875em; /* 14px/16=0.875em */
	text-align: center;
	}

	img.max {
  	 max-width: 100%;
  	 height: auto;
	}

	ul	{
	font-family: Arial, Helvetica, Freesans, sans-serif;
	}


	li.sub {
    margin-bottom: 2px;
	}

	a.moreorless	{

	}

	li {
    margin-bottom: 10px;
	}
		
	.stdtext	{
		font-family: Arial, Helvetica, Freesans, sans-serif;
		font-size: 0.900em; /* 14px/16=0.875em */
		color: #0d0d0d;
	}
	
	#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
	}
	
	#galleryImage {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	}
	
	.centre {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}
	
	.img_caption {
		font-family: Arial, Helvetica, Freesans, sans-serif;
		font-size: 0.800em; /* 14px/16=0.875em */
	}	
	
	.quickstart_images {
		border: 5px solid lightgray; 
		margin-bottom: -15px;
	}