landsurveyorsunited/index.html

## index.html
<!-- Menu element that rolls in from the left -->
<div class="meny">
    <h3>More Tools</h3>
    <ul>
        <li><a href="http://lab.hakim.se/radar/">Share Photos</a></li>
        <li><a href="http://lab.hakim.se/forkit-js/">Add a Video</a></li>
        <li><a href="http://lab.hakim.se/scroll-effects/">Post Question</a></li>
        <li><a href="http://lab.hakim.se/zoom-js">Share a Story</a></li>
        <li><a href="http://lab.hakim.se/reveal-js">Add a Term</a></li>
        <li><a href="https://itunes.apple.com/us/app/sinuous/id543097218">Post Event</a></li>
        <li><a href="http://hakim.se/experiments/css/domtree/">Find a Job</a></li>
        <li><a href="http://hakim.se/experiments/css/holobox/">Be a Mentor</a></li>
          <li><a href="http://hakim.se/experiments/css/domtree/">Find a Mentor</a></li>
        <li><a href="http://hakim.se/experiments/css/holobox/">Donate</a></li>
        <li><a href="http://archive.landsurveyorsunited.org">LSU Archive</a></li>
    </ul>
</div>

<!-- Arrow that appears from the left when menu is collapsed -->
<div class="meny-arrow">&#x25BA;</div>

<!-- Contents that will be rotated when the meny is expanded -->
<div class="meny-contents">
    <div class="cover"></div>

   <div id="copy"><a href="https://landsurveyorsunited.com/main/authorization/signUp?target=http://landsurveyorsunited.com/community">Sign Up</a> &bull; <a rel="author" href="https://landsurveyorsunited.com/main/authorization/signIn?target=http://landsurveyorsunited.com/community">Sign In</a></div>
<center><table>
<tbody>
<tr>
<td><details class="modal"><summary>🎙️</summary><div> <a href="/radio" target="load">Land Surveyor Radio</a><div><div class='embed-container'><iframe src='/radio' style='border:0'></iframe></div></div></details></td>
<td><details class="modal"><summary>🏬</summary><div> <a href="#contact" target="load">Land Survey Company Directory</a><div class='embed-container'><iframe src='https://directory.surveyearth.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🦶</summary><div> <a href="/mentorship" target="load">🦶Mentorship for Land Surveyors</a><div class='embed-container'><iframe src='/mentorship' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🧲</summary><div> <a href="/cv" target="load">Land Surveyor Resume CV Generator</a><div class='embed-container'><iframe src='https://storage.ning.com/topology/rest/1.0/file/get/8999865477?profile=original' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📺️</summary><div> <a href="/video" target="load">📺️ Land Surveyor Video Theatre</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🖼️</summary><div> <a href="/photo" target="load">Surveyor Submitted Photos</a><div class='embed-container'><iframe src='https://isurveyedthat.glideapp.io/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📚️</summary><div> <a href="/almanac" target="load">Land Surveyor Learning Resources</a><div class='embed-container'><iframe src='https://prism.glideapp.io/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>📊</summary><div> <a href="/wiki/spreadsheets" target="load">Surveyor Spreadsheet Tools</a><div class='embed-container'><iframe src='https://landsurveyorsunited.com/hubs/excel' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🧿</summary><div> <a href="/hubs/Locations" target="load">🧿 Find Your Local Hub</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🗺️</summary><div> <a href="/map" target="load">🗺️ Global Land Surveyors Map</a><iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe></details></td>
<td><details class="modal"><summary>💬</summary><div> <a href="/forum/topics" target="load">💬Land Surveyor Forums </a><div class='embed-container'><iframe src='https://landsurveyors.biew.site/' style='border:0'></iframe></div></details></td>
<td><details class="modal"><summary>🌎</summary><div> <a href="/jobs" target="load">🌎Land Surveying Jobs Worldwide</a><div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🛒</summary><div> <a href="/smarketplace" target="load">🛒Surveyor Marketplace & Virtual Mall</a><div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div></details></td>
</tr>
</tbody>
  </table></center>
<div class="">
	<h1>Resources and Tools</h1>
	<h2>Land Surveyors United Community</h2>
	<button class="panel-trigger-left">👈️ Surveyor Jobs Board</button><br><br>
	<button class="panel-trigger-right">👉️ Surveyor marketplace</button><br><br>
	<button class="panel-trigger-top">👆️ Surveying Community</button><br><br>
	<button class="panel-trigger-bottom">👇️Land Surveyor Resources</button><br><br>
</div>


<div id="panel1" class="panel panel-left">
	<div class="panel-container">
		<div class="panel-contents">Surveying Jobs Board</div>
		<div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div>
		<div class="panel-close-button">&#128473;</div>
	</div>
</div>

<div id="panel2" class="panel panel-right">
	<div class="panel-container">
		<div class="panel-contents">Surveyor Marketplace</div>
		<div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div>
		<div class="panel-close-button">&#128473;</div>
	</div>
</div>

<div id="panel3" class="panel panel-top">
	<div class="panel-container">
		<div class="panel-contents">Surveyor Marketplace Virtual Mall</div>
		<div class='embed-container'><iframe src='https://app.smarketplace.org/full' style='border:0'></iframe></div>
		<div class="panel-close-button">&#128473;</div>
	</div>
</div>

<div id="panel4" class="panel panel-bottom">
	<div class="panel-container">
		<div class="panel-contents">Global Member Map </div>
		<iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
		<div class="panel-close-button">&#128473;</div>
	</div>
</div>
</div>

## meny-surv.markdown

      
    Raw
  

              meny-surv.markdown
            
          
    Meny surv

A three dimensional and space efficient menu concept. Could easily be made CSS-only via :hover but touch is cool so I went for JavaScript.
A Pen by JFarrow on CodePen.
License.

  
## script.js
(function(){

	var meny = document.querySelector( '.meny' );

	// Avoid throwing errors if the script runs on a page with
	// no .meny
	if( !meny || !meny.parentNode ) { return; }

	var menyWrapper = meny.parentNode;

	// Add a class to identify the parent of the meny parts
	menyWrapper.className += ' meny-wrapper';

	var indentX = menyWrapper.offsetLeft,
		activateX = 40,
		deactivateX = meny.offsetWidth || 200,
		touchStartX = null,
		touchMoveX = null,
		isActive = false,
		isMouseDown = false;

	var supports3DTransforms = 'WebkitPerspective' in document.body.style ||
								'MozPerspective' in document.body.style ||
								'msPerspective' in document.body.style ||
								'OPerspective' in document.body.style ||
								'perspective' in document.body.style;

	document.addEventListener( 'mousedown', onMouseDown, false );
	document.addEventListener( 'mouseup', onMouseUp, false );
	document.addEventListener( 'mousemove', onMouseMove, false );
	document.addEventListener( 'touchstart', onTouchStart, false );
	document.addEventListener( 'touchend', onTouchEnd, false );

	// Fall back to more basic CSS
	if( !supports3DTransforms ) {
		document.documentElement.className += ' meny-no-transform';
	}

	document.documentElement.className += ' meny-ready';

	function onMouseDown( event ) {
		isMouseDown = true;
	}

	function onMouseMove( event ) {
		// Prevent opening/closing when mouse is down since
		// the user may be selecting text
		if( !isMouseDown ) {
			var x = event.clientX - indentX;

			if( x > deactivateX ) {
				deactivate();
			}
			else if( x < activateX ) {
				activate();
			}
		}
	}

	function onMouseUp( event ) {
		isMouseDown = false;
	}

	function onTouchStart( event ) {
		touchStartX = event.touches[0].clientX - indentX;
		touchMoveX = null;

		if( isActive || touchStartX < activateX ) {
			document.addEventListener( 'touchmove', onTouchMove, false );
		}
	}

	function onTouchMove( event ) {
		touchMoveX = event.touches[0].clientX - indentX;

		if( isActive && touchMoveX < touchStartX - activateX ) {
			deactivate();
			event.preventDefault();
		}
		else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
			activate();
			event.preventDefault();
		}
	}

	function onTouchEnd( event ) {
		document.addEventListener( 'touchmove', onTouchMove, false );

		// If there was no movement this was a tap
		if( touchMoveX === null ) {
			// Hide the menu when tapping on the content area
			if( touchStartX > deactivateX ) {
				deactivate();
			}
			// Show the meny when tapping on the left edge
			else if( touchStartX < activateX * 2 ) {
				activate();
			}
		}

	}

	function activate() {
		if( isActive === false ) {
			isActive = true;

			// Add the meny-active class and clean up whitespace
			document.documentElement.className = document.documentElement.className.replace( /\s+$/gi, '' ) + ' meny-active';
		}
	}

	function deactivate() {
		if( isActive === true ) {
			isActive = false;

			// Remove the meny-active class
			document.documentElement.className = document.documentElement.className.replace( 'meny-active', '' );
		}
	}

})();

/*
  Simple slide-in panel, controlled by CSS variables.
	JavaScript is only used for toggling class names on panel.
  Supports all 4 directions left, right, top and bottom.
	JavaScript function returns handler for use on triggers.
	Panel closes on click outside panel (overlay) or on close button.
*/

(function() {
	var setPanelHandler = function(panel) {
		var panelClose = panel.querySelector(".panel-close-button"),
		panelContainer = panel.querySelector(".panel-container"),
		panelHandler = function(e) {
			if (
				(e.target === panel && !panel.classList.contains("panel-inactive")) ||
				!e.currentTarget.contains(panelContainer)
			) {
				panel.classList.contains("panel-active")
					? panel.classList.toggle("panel-inactive")
					: panel.classList.add("panel-active");
			}
		}.bind(panel);
	panel.addEventListener("click", panelHandler, false);
	if (panelClose) panelClose.addEventListener("click", panelHandler, false);
	return panelHandler;
};

var panelHandlerLeft = setPanelHandler(document.querySelector("#panel1"));
document
	.querySelector(".panel-trigger-left")
	.addEventListener("click", panelHandlerLeft, false);

var panelHandlerRight = setPanelHandler(document.querySelector("#panel2"));
document
	.querySelector(".panel-trigger-right")
	.addEventListener("click", panelHandlerRight, false);

var panelHandlerTop = setPanelHandler(document.querySelector("#panel3"));
document
	.querySelector(".panel-trigger-top")
	.addEventListener("click", panelHandlerTop, false);

var panelHandlerBottom = setPanelHandler(document.querySelector("#panel4"));
document
	.querySelector(".panel-trigger-bottom")
	.addEventListener("click", panelHandlerBottom, false);
})();

## style.css
* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

	font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	color: #222;
}

/**
  * Element which wraps all of the other .meny parts
  */
.meny-wrapper {
	-webkit-perspective: 800px;
	   -moz-perspective: 800px;
	    -ms-perspective: 800px;
	     -o-perspective: 800px;
	        perspective: 800px;

	-webkit-perspective-origin: 0% 50%;
	   -moz-perspective-origin: 0% 50%;
	    -ms-perspective-origin: 0% 50%;
	     -o-perspective-origin: 0% 50%;
	        perspective-origin: 0% 50%;
}

.meny,
.meny-contents {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-transition: -webkit-transform .4s ease;
	   -moz-transition: -moz-transform .4s ease;
	    -ms-transition: -ms-transform .4s ease;
	     -o-transition: -o-transform .4s ease;
	        transition: transform .4s ease;

	-webkit-transform-origin: 0% 50%;
	   -moz-transform-origin: 0% 50%;
	    -ms-transform-origin: 0% 50%;
	     -o-transform-origin: 0% 50%;
	        transform-origin: 0% 50%;
}

/**
 * The menu element which expands out from the left.
 */
.meny {
	display: none;
	position: fixed;
	height: 100%;
	width: 200px;
	z-index: 1;
	margin: 0px;
	padding: 15px;

	-webkit-transform: rotateY( -30deg ) translateX( -97% );
	   -moz-transform: rotateY( -30deg ) translateX( -97% );
	    -ms-transform: rotateY( -30deg ) translateX( -97% );
	     -o-transform: rotateY( -30deg ) translateX( -97% );
	        transform: rotateY( -30deg ) translateX( -97% );
}
	.meny-ready .meny {
		display: block;
	}
	.meny-active .meny {
		-webkit-transform: rotateY(0deg);
		   -moz-transform: rotateY(0deg);
		    -ms-transform: rotateY(0deg);
		     -o-transform: rotateY(0deg);
		        transform: rotateY(0deg);
	}

/**
 * Page contents which gets pushed aside while meny is active.
 */
.meny-contents {
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	padding: 20px 40px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
	.meny-active .meny-contents {
		-webkit-transform: translateX( 200px ) rotateY( 15deg );
		   -moz-transform: translateX( 200px ) rotateY( 15deg );
		    -ms-transform: translateX( 200px ) rotateY( 15deg );
		     -o-transform: translateX( 200px ) rotateY( 15deg );
		        transform: translateX( 200px ) rotateY( 15deg );
	}

/**
 * A shadow-like element placed on top of the contents while
 * meny is active.
 */
.meny-contents .cover {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	z-index: 1000;
	opacity: 0;

		background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	-webkit-transition: all .4s ease;
	   -moz-transition: all .4s ease;
	    -ms-transition: all .4s ease;
	     -o-transition: all .4s ease;
	        transition: all .4s ease;
}
	.meny-ready .meny-contents .cover {
		display: block;
	}
	.meny-active .meny-contents .cover {
		visibility: visible;
		opacity: 1;
	}

/**
 * Graphic that highlights menu availability while inactive.
 */
.meny-arrow {
	position: absolute;
	top: 45%;
	left: 12px;
	z-index: 2;
	font-family: sans-serif;

	font-size: 20px;
	color: #fff;
  text-stroke: #000 2px 2px 2px;

	-webkit-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	   -moz-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	    -ms-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	     -o-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	        transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
	.meny-active .meny-arrow {
		left: -40px;
		opacity: 0;
	}


/**
 * Fallback for browsers that don't support transforms.
 */

.meny-no-transform .meny,
.meny-no-transform .meny-contents {
	-webkit-transition: left .4s ease;
	   -moz-transition: left .4s ease;
	    -ms-transition: left .4s ease;
	     -o-transition: left .4s ease;
	        transition: left .4s ease;
}

.meny-no-transform .meny {
	left: -300px;
}
	.meny-no-transform.meny-active .meny {
		left: 0px;
	}

.meny-no-transform .meny-contents {
	position: absolute;
}
	.meny-no-transform.meny-active .meny-contents {
		left: 300px;
	}


/**
 * Styles that are more or less specific to the demo page:
 */

a {
	color: #c2575b;
	text-decoration: none;

	-webkit-transition: 0.15s color ease;
	   -moz-transition: 0.15s color ease;
	    -ms-transition: 0.15s color ease;
	     -o-transition: 0.15s color ease;
	        transition: 0.15s color ease;
}
	a:hover {
		color: #f76f76;
	}

h1,
h2 {
	font-size: 18px;
}

.meny {
	background: #333;
	color: #eee;
}
	.meny ul {
		margin-top: 10px;
	}
		.meny ul li {
			list-style: none;
			font-size: 18px;
			padding: 3px 5px;
		}
			.meny ul li:before {
				content: '-';
				margin-right: 5px;
				color: rgba( 255, 255, 255, 0.2 );
			}

.meny-contents>article {
	max-width: 400px;
}
.meny-contents p {
	margin: 10px 0 10px 0;
	font-size: 16px;
	line-height: 1.32;
}

.meny-contents small {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	color: #333;
	font-size: 0.85em;
	border-top: 1px dashed #ccc;

	-webkit-text-size-adjust: none;
}

.meny-contents .sharing {
	position: absolute;
	bottom: 20px;
}
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500italic);

html {
	height: 100%;
	background-color: rgba(34, 32, 36, 1);
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	background-repeat: no-repeat;
}
body {
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10591557652?profile=RESIZE_930x");
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
	font: normal 100% "Fira Sans", sans-serif;
}
h1,h2 {-webkit-text-stroke: 1px #cc0000;
-webkit-text-fill-color: #FFFFFF;font-weight:900;}
h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
/* Main element. The page overlay */
.panel {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	cursor: pointer;
	/* Theese 3 vars controls the speed and size of the panel */
	--panel-width: 40vw;
	--panel-height: 40vw;
	--panel-transition-speed: 0.3s;
}
.panel.panel-active {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	transition: background var(--panel-transition-speed) linear;
}
#copy {
	position:fixed;
	z-index:1000;
	right:150px;
	top:-8px;
	font-size:.65em;
	padding:8px 8px 2px 8px;
	background: #000000;
	border: 2px solid #737c85;
	border-radius:.7em;
	opacity: 0.9;
	box-shadow:0 0 8px #5f7182;
	color:#eee;
  background-position: fixed;
}
#copy a {
	color:#ccc;
	text-decoration:none
}
#copy a:hover {
	color:#fff
}
.panel.panel-inactive {
	width: 0vw;
	height: 0vh;
	background: rgba(0, 0, 0, 0);
	transition: background var(--panel-transition-speed) linear,
		width 0s linear var(--panel-transition-speed),
		height 0s linear var(--panel-transition-speed);
}
/* Panel Container. This is the element that slide in-out */
.panel-container {
	display: block;
	position: absolute;
	background: #eee;
	overflow: auto;
	cursor: default;
	transition: var(--panel-transition-speed) transform ease-in-out;
	float: left;
}
/* Left side panel */
.panel.panel-left .panel-container {
	top: 0;
	left: 0;
	width: var(--panel-width);
	height: 100%;
	transform: translate(calc(var(--panel-width) * -1), 0);
	box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-left.panel-inactive .panel-container {
	transform: translate(calc(var(--panel-width) * -1), 0) !important;
}
/* Right side panel */
.panel.panel-right .panel-container {
	top: 0;
	right: 0;
	width: var(--panel-width);
	height: 100%;
	transform: translate(var(--panel-width), 0);
	box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
	border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-right.panel-inactive .panel-container {
	transform: translate(var(--panel-width), 0) !important;
}
/* Top panel */
.panel.panel-top .panel-container {
	top: 0;
	left: 0;
	height: var(--panel-height);
	width: 100%;
	transform: translate(0, calc(var(--panel-height) * -1));
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-top.panel-inactive .panel-container {
	transform: translate(0, calc(var(--panel-height) * -1)) !important;
}
/* Bottom panel */
.panel.panel-bottom .panel-container {
	bottom: 0;
	left: 0;
	height: var(--panel-height);
	width: 100%;
	transform: translate(0, var(--panel-height));
	box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.panel.panel-bottom.panel-inactive .panel-container {
	transform: translate(0, var(--panel-height)) !important;
}
/* Expand panel */
.panel.panel-active .panel-container {
	transform: translate(0, 0);
}
/* Panel Close Button */
.panel-close-button {
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0.5em;
	right: 0.5em;
	color: #ddd;
	background: #cc0000;
	cursor: pointer;
  text-align: center;
  font: normal 1em Arial;
	line-height: 1em;
	transition: color .4s ease-in-out;
}
.panel-close-button:hover {
	color: #00ff00;
}

  .button
    {
        display: inline-block;
        white-space: nowrap;
        background-color: #ddd;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
        background-image: -webkit-linear-gradient(top, #eee, #ccc);
        background-image: -moz-linear-gradient(top, #eee, #ccc);
        background-image: -ms-linear-gradient(top, #eee, #ccc);
        background-image: -o-linear-gradient(top, #eee, #ccc);
        background-image: linear-gradient(top, #eee, #ccc);
        border: 1px solid #777;
        padding: 0 1.5em;
        margin: 0.5em;
        font: bold 1em/2em Arial, Helvetica;
        text-decoration: none;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        -moz-border-radius: .2em;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    }

    .button:hover
    {
        background-color: #eee;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
        background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
        background-image: -moz-linear-gradient(top, #fafafa, #ddd);
        background-image: -ms-linear-gradient(top, #fafafa, #ddd);
        background-image: -o-linear-gradient(top, #fafafa, #ddd);
        background-image: linear-gradient(top, #fafafa, #ddd);
    }

    .button:active
    {
        -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        position: relative;
        top: 1px;
    }

    .button:focus
    {
        outline: 0;
        background: #fafafa;
    }

    .button:before
    {
        background: #ccc;
        background: rgba(0,0,0,.1);
        float: left;
        width: 1em;
        text-align: center;
        font-size: 1.5em;
        margin: 0 1em 0 -1em;
        padding: 0 .2em;
        -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -moz-border-radius: .15em 0 0 .15em;
        -webkit-border-radius: .15em 0 0 .15em;
        border-radius: .15em 0 0 .15em;
        pointer-events: none;
    }

	/* Buttons and inputs */

	button.button, input.button
	{
		cursor: pointer;
		overflow: visible; /* removes extra side spacing in IE */
	}

	/* removes extra inner spacing in Firefox */
	button::-moz-focus-inner
	{
	  border: 0;
	  padding: 0;
	}

	/* If line-height can't be modified, then fix Firefox spacing with padding */
	 input::-moz-focus-inner
	{
	  padding: .4em;
	}

	/* The disabled styles */
	.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
	{
		background: #eee;
		color: #aaa;
		border-color: #aaa;
		cursor: default;
		text-shadow: none;
		position: static;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}

:root {
  --gutter-horizontal: 10vw;
  --gutter-vertical: 10vh;
}


img {
  max-width: 100%;
}

details + details {
  margin-top: 1em;
}

details.modal summary {
  background: #fff;
  color:#000066;
  border: 2px solid black;
  cursor: pointer;
  display: inline-block;
  padding: .25em .5em;
}

details.modal summary::-webkit-details-marker {
  display: none;
}

details.modal summary::before {
  content: "";
  display: inline-block;
  padding-right: .25em;
}

details[open].modal summary::before {
  content: "Close";
}

details[open].modal {
  overflow: auto;
  padding: 1em;
  position: fixed;
  z-index: 10;
}

details[open].modal,
details[open].modal::after {
  bottom: 10vh;
  bottom: var(--gutter-vertical);
  left: 10vw;
  left: var(--gutter-horizontal);
  right: 10vw;
  right: var(--gutter-horizontal);
  top: 10vh;
  top: var(--gutter-vertical);
}

details[open].modal::before,
details[open].modal::after {
  content: "";
  position: fixed;
  z-index: -1;
}

details[open].modal::before {
  background: rgba(0, 0, 0, .75);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

details[open].modal::after {
  background: #fff;
}
.embed-container { position: relative; padding-bottom: 86.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.frameContainer{
    position: fixed;
    height: 100%;
    top:0px;
    left: 300px;
    right:0px;
    bottom:0px;
    z-index:1;
}

.main_iframe{
    height: 100%;
    width: 100%;
    border:none;
    background:#3366ff;
}

## styles
<link href="https://landsurveyorsunited.github.io/cssfiles/multiplanel.js" rel="stylesheet" />
	<!-- Menu element that rolls in from the left -->
	<div class="meny">
	<h3>More Tools</h3>
	<ul>
	<li><a href="http://lab.hakim.se/radar/">Share Photos</a></li>
	<li><a href="http://lab.hakim.se/forkit-js/">Add a Video</a></li>
	<li><a href="http://lab.hakim.se/scroll-effects/">Post Question</a></li>
	<li><a href="http://lab.hakim.se/zoom-js">Share a Story</a></li>
	<li><a href="http://lab.hakim.se/reveal-js">Add a Term</a></li>
	<li><a href="https://itunes.apple.com/us/app/sinuous/id543097218">Post Event</a></li>
	<li><a href="http://hakim.se/experiments/css/domtree/">Find a Job</a></li>
	<li><a href="http://hakim.se/experiments/css/holobox/">Be a Mentor</a></li>
	<li><a href="http://hakim.se/experiments/css/domtree/">Find a Mentor</a></li>
	<li><a href="http://hakim.se/experiments/css/holobox/">Donate</a></li>
	<li><a href="http://archive.landsurveyorsunited.org">LSU Archive</a></li>
	</ul>
	</div>

	<!-- Arrow that appears from the left when menu is collapsed -->
	<div class="meny-arrow">►</div>

	<!-- Contents that will be rotated when the meny is expanded -->
	<div class="meny-contents">
	<div class="cover"></div>

	<div id="copy"><a href="https://landsurveyorsunited.com/main/authorization/signUp?target=http://landsurveyorsunited.com/community">Sign Up</a> • <a rel="author" href="https://landsurveyorsunited.com/main/authorization/signIn?target=http://landsurveyorsunited.com/community">Sign In</a></div>
	<center><table>
	<tbody>
	<tr>
	<td><details class="modal"><summary>🎙️</summary><div> <a href="/radio" target="load">Land Surveyor Radio</a><div><div class='embed-container'><iframe src='/radio' style='border:0'></iframe></div></div></details></td>
	<td><details class="modal"><summary>🏬</summary><div> <a href="#contact" target="load">Land Survey Company Directory</a><div class='embed-container'><iframe src='https://directory.surveyearth.com/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🦶</summary><div> <a href="/mentorship" target="load">🦶Mentorship for Land Surveyors</a><div class='embed-container'><iframe src='/mentorship' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🧲</summary><div> <a href="/cv" target="load">Land Surveyor Resume CV Generator</a><div class='embed-container'><iframe src='https://storage.ning.com/topology/rest/1.0/file/get/8999865477?profile=original' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>📺️</summary><div> <a href="/video" target="load">📺️ Land Surveyor Video Theatre</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🖼️</summary><div> <a href="/photo" target="load">Surveyor Submitted Photos</a><div class='embed-container'><iframe src='https://isurveyedthat.glideapp.io/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>📚️</summary><div> <a href="/almanac" target="load">Land Surveyor Learning Resources</a><div class='embed-container'><iframe src='https://prism.glideapp.io/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>📊</summary><div> <a href="/wiki/spreadsheets" target="load">Surveyor Spreadsheet Tools</a><div class='embed-container'><iframe src='https://landsurveyorsunited.com/hubs/excel' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🧿</summary><div> <a href="/hubs/Locations" target="load">🧿 Find Your Local Hub</a><div class='embed-container'><iframe src='https://learn.landsurveyorsunited.com/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🗺️</summary><div> <a href="/map" target="load">🗺️ Global Land Surveyors Map</a><iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe></details></td>
	<td><details class="modal"><summary>💬</summary><div> <a href="/forum/topics" target="load">💬Land Surveyor Forums </a><div class='embed-container'><iframe src='https://landsurveyors.biew.site/' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🌎</summary><div> <a href="/jobs" target="load">🌎Land Surveying Jobs Worldwide</a><div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div></details></td>
	<td><details class="modal"><summary>🛒</summary><div> <a href="/smarketplace" target="load">🛒Surveyor Marketplace & Virtual Mall</a><div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div></details></td>
	</tr>
	</tbody>
	</table></center>
	<div class="">
	<h1>Resources and Tools</h1>
	<h2>Land Surveyors United Community</h2>
	<button class="panel-trigger-left">👈️ Surveyor Jobs Board</button><br><br>
	<button class="panel-trigger-right">👉️ Surveyor marketplace</button><br><br>
	<button class="panel-trigger-top">👆️ Surveying Community</button><br><br>
	<button class="panel-trigger-bottom">👇️Land Surveyor Resources</button><br><br>
	</div>



	<div id="panel1" class="panel panel-left">
	<div class="panel-container">
	<div class="panel-contents">Surveying Jobs Board</div>
	<div class='embed-container'><iframe src='https://jobs.landsurveyorsunited.org' style='border:0'></iframe></div>
	<div class="panel-close-button">🗙</div>
	</div>
	</div>

	<div id="panel2" class="panel panel-right">
	<div class="panel-container">
	<div class="panel-contents">Surveyor Marketplace</div>
	<div class='embed-container'><iframe src='https://rss.smarketplace.org' style='border:0'></iframe></div>
	<div class="panel-close-button">🗙</div>
	</div>
	</div>

	<div id="panel3" class="panel panel-top">
	<div class="panel-container">
	<div class="panel-contents">Surveyor Marketplace Virtual Mall</div>
	<div class='embed-container'><iframe src='https://app.smarketplace.org/full' style='border:0'></iframe></div>
	<div class="panel-close-button">🗙</div>
	</div>
	</div>

	<div id="panel4" class="panel panel-bottom">
	<div class="panel-container">
	<div class="panel-contents">Global Member Map </div>
	<iframe width="100%" height="520" frameborder="0" src="https://landsurveyors.carto.com/viz/9c0755a0-8fc6-11e6-b3bf-0ef24382571b/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
	<div class="panel-close-button">🗙</div>
	</div>
	</div>
	</div>
	(function(){

	var meny = document.querySelector( '.meny' );

	// Avoid throwing errors if the script runs on a page with
	// no .meny
	if( !meny \|\| !meny.parentNode ) { return; }

	var menyWrapper = meny.parentNode;

	// Add a class to identify the parent of the meny parts
	menyWrapper.className += ' meny-wrapper';

	var indentX = menyWrapper.offsetLeft,
	activateX = 40,
	deactivateX = meny.offsetWidth \|\| 200,
	touchStartX = null,
	touchMoveX = null,
	isActive = false,
	isMouseDown = false;

	var supports3DTransforms = 'WebkitPerspective' in document.body.style \|\|
	'MozPerspective' in document.body.style \|\|
	'msPerspective' in document.body.style \|\|
	'OPerspective' in document.body.style \|\|
	'perspective' in document.body.style;

	document.addEventListener( 'mousedown', onMouseDown, false );
	document.addEventListener( 'mouseup', onMouseUp, false );
	document.addEventListener( 'mousemove', onMouseMove, false );
	document.addEventListener( 'touchstart', onTouchStart, false );
	document.addEventListener( 'touchend', onTouchEnd, false );

	// Fall back to more basic CSS
	if( !supports3DTransforms ) {
	document.documentElement.className += ' meny-no-transform';
	}

	document.documentElement.className += ' meny-ready';

	function onMouseDown( event ) {
	isMouseDown = true;
	}

	function onMouseMove( event ) {
	// Prevent opening/closing when mouse is down since
	// the user may be selecting text
	if( !isMouseDown ) {
	var x = event.clientX - indentX;

	if( x > deactivateX ) {
	deactivate();
	}
	else if( x < activateX ) {
	activate();
	}
	}
	}

	function onMouseUp( event ) {
	isMouseDown = false;
	}

	function onTouchStart( event ) {
	touchStartX = event.touches[0].clientX - indentX;
	touchMoveX = null;

	if( isActive \|\| touchStartX < activateX ) {
	document.addEventListener( 'touchmove', onTouchMove, false );
	}
	}

	function onTouchMove( event ) {
	touchMoveX = event.touches[0].clientX - indentX;

	if( isActive && touchMoveX < touchStartX - activateX ) {
	deactivate();
	event.preventDefault();
	}
	else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
	activate();
	event.preventDefault();
	}
	}

	function onTouchEnd( event ) {
	document.addEventListener( 'touchmove', onTouchMove, false );

	// If there was no movement this was a tap
	if( touchMoveX === null ) {
	// Hide the menu when tapping on the content area
	if( touchStartX > deactivateX ) {
	deactivate();
	}
	// Show the meny when tapping on the left edge
	else if( touchStartX < activateX * 2 ) {
	activate();
	}
	}

	}

	function activate() {
	if( isActive === false ) {
	isActive = true;

	// Add the meny-active class and clean up whitespace
	document.documentElement.className = document.documentElement.className.replace( /\s+$/gi, '' ) + ' meny-active';
	}
	}

	function deactivate() {
	if( isActive === true ) {
	isActive = false;

	// Remove the meny-active class
	document.documentElement.className = document.documentElement.className.replace( 'meny-active', '' );
	}
	}

	})();

	/*
	Simple slide-in panel, controlled by CSS variables.
	JavaScript is only used for toggling class names on panel.
	Supports all 4 directions left, right, top and bottom.
	JavaScript function returns handler for use on triggers.
	Panel closes on click outside panel (overlay) or on close button.
	*/

	(function() {
	var setPanelHandler = function(panel) {
	var panelClose = panel.querySelector(".panel-close-button"),
	panelContainer = panel.querySelector(".panel-container"),
	panelHandler = function(e) {
	if (
	(e.target === panel && !panel.classList.contains("panel-inactive")) \|\|
	!e.currentTarget.contains(panelContainer)
	) {
	panel.classList.contains("panel-active")
	? panel.classList.toggle("panel-inactive")
	: panel.classList.add("panel-active");
	}
	}.bind(panel);
	panel.addEventListener("click", panelHandler, false);
	if (panelClose) panelClose.addEventListener("click", panelHandler, false);
	return panelHandler;
	};

	var panelHandlerLeft = setPanelHandler(document.querySelector("#panel1"));
	document
	.querySelector(".panel-trigger-left")
	.addEventListener("click", panelHandlerLeft, false);

	var panelHandlerRight = setPanelHandler(document.querySelector("#panel2"));
	document
	.querySelector(".panel-trigger-right")
	.addEventListener("click", panelHandlerRight, false);

	var panelHandlerTop = setPanelHandler(document.querySelector("#panel3"));
	document
	.querySelector(".panel-trigger-top")
	.addEventListener("click", panelHandlerTop, false);

	var panelHandlerBottom = setPanelHandler(document.querySelector("#panel4"));
	document
	.querySelector(".panel-trigger-bottom")
	.addEventListener("click", panelHandlerBottom, false);
	})();
	* {
	margin: 0;
	padding: 0;
	}

	html,
	body {
	height: 100%;
	overflow: hidden;
	}

	body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

	font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	color: #222;
	}

	/**
	* Element which wraps all of the other .meny parts
	*/
	.meny-wrapper {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;

	-webkit-perspective-origin: 0% 50%;
	-moz-perspective-origin: 0% 50%;
	-ms-perspective-origin: 0% 50%;
	-o-perspective-origin: 0% 50%;
	perspective-origin: 0% 50%;
	}

	.meny,
	.meny-contents {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition: -webkit-transform .4s ease;
	-moz-transition: -moz-transform .4s ease;
	-ms-transition: -ms-transform .4s ease;
	-o-transition: -o-transform .4s ease;
	transition: transform .4s ease;

	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	-ms-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	}

	/**
	* The menu element which expands out from the left.
	*/
	.meny {
	display: none;
	position: fixed;
	height: 100%;
	width: 200px;
	z-index: 1;
	margin: 0px;
	padding: 15px;

	-webkit-transform: rotateY( -30deg ) translateX( -97% );
	-moz-transform: rotateY( -30deg ) translateX( -97% );
	-ms-transform: rotateY( -30deg ) translateX( -97% );
	-o-transform: rotateY( -30deg ) translateX( -97% );
	transform: rotateY( -30deg ) translateX( -97% );
	}
	.meny-ready .meny {
	display: block;
	}
	.meny-active .meny {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
	}

	/**
	* Page contents which gets pushed aside while meny is active.
	*/
	.meny-contents {
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 20px 40px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	}
	.meny-active .meny-contents {
	-webkit-transform: translateX( 200px ) rotateY( 15deg );
	-moz-transform: translateX( 200px ) rotateY( 15deg );
	-ms-transform: translateX( 200px ) rotateY( 15deg );
	-o-transform: translateX( 200px ) rotateY( 15deg );
	transform: translateX( 200px ) rotateY( 15deg );
	}

	/**
	* A shadow-like element placed on top of the contents while
	* meny is active.
	*/
	.meny-contents .cover {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	z-index: 1000;
	opacity: 0;

	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	}
	.meny-ready .meny-contents .cover {
	display: block;
	}
	.meny-active .meny-contents .cover {
	visibility: visible;
	opacity: 1;
	}

	/**
	* Graphic that highlights menu availability while inactive.
	*/
	.meny-arrow {
	position: absolute;
	top: 45%;
	left: 12px;
	z-index: 2;
	font-family: sans-serif;

	font-size: 20px;
	color: #fff;
	text-stroke: #000 2px 2px 2px;

	-webkit-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	-moz-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	-ms-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	-o-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	}
	.meny-active .meny-arrow {
	left: -40px;
	opacity: 0;
	}


	/**
	* Fallback for browsers that don't support transforms.
	*/

	.meny-no-transform .meny,
	.meny-no-transform .meny-contents {
	-webkit-transition: left .4s ease;
	-moz-transition: left .4s ease;
	-ms-transition: left .4s ease;
	-o-transition: left .4s ease;
	transition: left .4s ease;
	}

	.meny-no-transform .meny {
	left: -300px;
	}
	.meny-no-transform.meny-active .meny {
	left: 0px;
	}

	.meny-no-transform .meny-contents {
	position: absolute;
	}
	.meny-no-transform.meny-active .meny-contents {
	left: 300px;
	}


	/**
	* Styles that are more or less specific to the demo page:
	*/

	a {
	color: #c2575b;
	text-decoration: none;

	-webkit-transition: 0.15s color ease;
	-moz-transition: 0.15s color ease;
	-ms-transition: 0.15s color ease;
	-o-transition: 0.15s color ease;
	transition: 0.15s color ease;
	}
	a:hover {
	color: #f76f76;
	}

	h1,
	h2 {
	font-size: 18px;
	}

	.meny {
	background: #333;
	color: #eee;
	}
	.meny ul {
	margin-top: 10px;
	}
	.meny ul li {
	list-style: none;
	font-size: 18px;
	padding: 3px 5px;
	}
	.meny ul li:before {
	content: '-';
	margin-right: 5px;
	color: rgba( 255, 255, 255, 0.2 );
	}

	.meny-contents>article {
	max-width: 400px;
	}
	.meny-contents p {
	margin: 10px 0 10px 0;
	font-size: 16px;
	line-height: 1.32;
	}

	.meny-contents small {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	color: #333;
	font-size: 0.85em;
	border-top: 1px dashed #ccc;

	-webkit-text-size-adjust: none;
	}

	.meny-contents .sharing {
	position: absolute;
	bottom: 20px;
	}
	@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500italic);

	html {
	height: 100%;
	background-color: rgba(34, 32, 36, 1);
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10578036869?profile=RESIZE_1200x");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-repeat: no-repeat;
	}
	body {
	background: url("https://storage.ning.com/topology/rest/1.0/file/get/10591557652?profile=RESIZE_930x");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	font: normal 100% "Fira Sans", sans-serif;
	}
	h1,h2 {-webkit-text-stroke: 1px #cc0000;
	-webkit-text-fill-color: #FFFFFF;font-weight:900;}
	h1 {font-size:3.5em;}
	h2 {font-size:2.5em;}
	/* Main element. The page overlay */
	.panel {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	cursor: pointer;
	/* Theese 3 vars controls the speed and size of the panel */
	--panel-width: 40vw;
	--panel-height: 40vw;
	--panel-transition-speed: 0.3s;
	}
	.panel.panel-active {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	transition: background var(--panel-transition-speed) linear;
	}
	#copy {
	position:fixed;
	z-index:1000;
	right:150px;
	top:-8px;
	font-size:.65em;
	padding:8px 8px 2px 8px;
	background: #000000;
	border: 2px solid #737c85;
	border-radius:.7em;
	opacity: 0.9;
	box-shadow:0 0 8px #5f7182;
	color:#eee;
	background-position: fixed;
	}
	#copy a {
	color:#ccc;
	text-decoration:none
	}
	#copy a:hover {
	color:#fff
	}
	.panel.panel-inactive {
	width: 0vw;
	height: 0vh;
	background: rgba(0, 0, 0, 0);
	transition: background var(--panel-transition-speed) linear,
	width 0s linear var(--panel-transition-speed),
	height 0s linear var(--panel-transition-speed);
	}
	/* Panel Container. This is the element that slide in-out */
	.panel-container {
	display: block;
	position: absolute;
	background: #eee;
	overflow: auto;
	cursor: default;
	transition: var(--panel-transition-speed) transform ease-in-out;
	float: left;
	}
	/* Left side panel */
	.panel.panel-left .panel-container {
	top: 0;
	left: 0;
	width: var(--panel-width);
	height: 100%;
	transform: translate(calc(var(--panel-width) * -1), 0);
	box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	}
	.panel.panel-left.panel-inactive .panel-container {
	transform: translate(calc(var(--panel-width) * -1), 0) !important;
	}
	/* Right side panel */
	.panel.panel-right .panel-container {
	top: 0;
	right: 0;
	width: var(--panel-width);
	height: 100%;
	transform: translate(var(--panel-width), 0);
	box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	}
	.panel.panel-right.panel-inactive .panel-container {
	transform: translate(var(--panel-width), 0) !important;
	}
	/* Top panel */
	.panel.panel-top .panel-container {
	top: 0;
	left: 0;
	height: var(--panel-height);
	width: 100%;
	transform: translate(0, calc(var(--panel-height) * -1));
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.panel.panel-top.panel-inactive .panel-container {
	transform: translate(0, calc(var(--panel-height) * -1)) !important;
	}
	/* Bottom panel */
	.panel.panel-bottom .panel-container {
	bottom: 0;
	left: 0;
	height: var(--panel-height);
	width: 100%;
	transform: translate(0, var(--panel-height));
	box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	}
	.panel.panel-bottom.panel-inactive .panel-container {
	transform: translate(0, var(--panel-height)) !important;
	}
	/* Expand panel */
	.panel.panel-active .panel-container {
	transform: translate(0, 0);
	}
	/* Panel Close Button */
	.panel-close-button {
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0.5em;
	right: 0.5em;
	color: #ddd;
	background: #cc0000;
	cursor: pointer;
	text-align: center;
	font: normal 1em Arial;
	line-height: 1em;
	transition: color .4s ease-in-out;
	}
	.panel-close-button:hover {
	color: #00ff00;
	}

	.button
	{
	display: inline-block;
	white-space: nowrap;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background-image: -webkit-linear-gradient(top, #eee, #ccc);
	background-image: -moz-linear-gradient(top, #eee, #ccc);
	background-image: -ms-linear-gradient(top, #eee, #ccc);
	background-image: -o-linear-gradient(top, #eee, #ccc);
	background-image: linear-gradient(top, #eee, #ccc);
	border: 1px solid #777;
	padding: 0 1.5em;
	margin: 0.5em;
	font: bold 1em/2em Arial, Helvetica;
	text-decoration: none;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	}

	.button:hover
	{
	background-color: #eee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
	background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
	background-image: -moz-linear-gradient(top, #fafafa, #ddd);
	background-image: -ms-linear-gradient(top, #fafafa, #ddd);
	background-image: -o-linear-gradient(top, #fafafa, #ddd);
	background-image: linear-gradient(top, #fafafa, #ddd);
	}

	.button:active
	{
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	position: relative;
	top: 1px;
	}

	.button:focus
	{
	outline: 0;
	background: #fafafa;
	}

	.button:before
	{
	background: #ccc;
	background: rgba(0,0,0,.1);
	float: left;
	width: 1em;
	text-align: center;
	font-size: 1.5em;
	margin: 0 1em 0 -1em;
	padding: 0 .2em;
	-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-moz-border-radius: .15em 0 0 .15em;
	-webkit-border-radius: .15em 0 0 .15em;
	border-radius: .15em 0 0 .15em;
	pointer-events: none;
	}

	/* Buttons and inputs */

	button.button, input.button
	{
	cursor: pointer;
	overflow: visible; /* removes extra side spacing in IE */
	}

	/* removes extra inner spacing in Firefox */
	button::-moz-focus-inner
	{
	border: 0;
	padding: 0;
	}

	/* If line-height can't be modified, then fix Firefox spacing with padding */
	input::-moz-focus-inner
	{
	padding: .4em;
	}

	/* The disabled styles */
	.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
	{
	background: #eee;
	color: #aaa;
	border-color: #aaa;
	cursor: default;
	text-shadow: none;
	position: static;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}

	.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

	@import url(http://weloveiconfonts.com/api/?family=entypo);
	@import url(https://fonts.googleapis.com/css?family=Alef);
	/* entypo */
	[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
	*{-webkit-font-smoothing:antialiased;}

	:root {
	--gutter-horizontal: 10vw;
	--gutter-vertical: 10vh;
	}



	img {
	max-width: 100%;
	}

	details + details {
	margin-top: 1em;
	}

	details.modal summary {
	background: #fff;
	color:#000066;
	border: 2px solid black;
	cursor: pointer;
	display: inline-block;
	padding: .25em .5em;
	}

	details.modal summary::-webkit-details-marker {
	display: none;
	}

	details.modal summary::before {
	content: "";
	display: inline-block;
	padding-right: .25em;
	}

	details[open].modal summary::before {
	content: "Close";
	}

	details[open].modal {
	overflow: auto;
	padding: 1em;
	position: fixed;
	z-index: 10;
	}

	details[open].modal,
	details[open].modal::after {
	bottom: 10vh;
	bottom: var(--gutter-vertical);
	left: 10vw;
	left: var(--gutter-horizontal);
	right: 10vw;
	right: var(--gutter-horizontal);
	top: 10vh;
	top: var(--gutter-vertical);
	}

	details[open].modal::before,
	details[open].modal::after {
	content: "";
	position: fixed;
	z-index: -1;
	}

	details[open].modal::before {
	background: rgba(0, 0, 0, .75);
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	}

	details[open].modal::after {
	background: #fff;
	}
	.embed-container { position: relative; padding-bottom: 86.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.frameContainer{
	position: fixed;
	height: 100%;
	top:0px;
	left: 300px;
	right:0px;
	bottom:0px;
	z-index:1;
	}

	.main_iframe{
	height: 100%;
	width: 100%;
	border:none;
	background:#3366ff;
	}