html {
    position: relative;
    padding:0;
    margin:0;
}
body { 
    background-color:#eee;
}
div#tc {
    overflow-y:auto;
}
div#_hdr {
    z-index:99;
}
html, body {
	/*
	 * Relates to the pseudo class & sibling bug, see
	 * http://css-tricks.com/webkit-sibling-bug/ for more details
	 */
	-webkit-animation: bugfix infinite 1s;
}

/* Also relates to the pseudo class & sibling bug */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.slide-outer {
    position:relative;
	overflow: hidden;
    margin:0px;
   width:calc(100% - 2px);
}

.slide-lbody{
    position:relative;
    top:0;
    margin:0;
    max-height:100vh;
    overflow-y:auto;
}
.slide-body{
    position:relative;
    width:100%;
    padding-bottom:0em;/*this equal the height of .slide-header */
}


/* @group .slide-left */
.slide-left, .slide-header {
    position: fixed;
    margin: 0;
    z-index: 2;
    background: #eee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    /*
		 * The width determines how much of the page you want to
		 * remain visible once the menu slides over
		 */
    /*
		 * Must be absolutely positioned otherwise it won't sit
		 * side by side with the content but instead above it
		 * */
}

.slide-left{
    overflow-y:auto;
    max-height: 100vh;        
    }
.slide-header, .tslide-label {
    -webkit-transition: top 500ms ease,top 500ms ease;
    -moz-transition: top 500ms ease,top 500ms ease;
    -o-transition: top 500ms ease,top 500ms ease;
    transition: top 500ms ease,top 500ms ease;
}
.slide-header {
    left:0;
    right:0;
    background: #333;
    padding: 0 38px;
    overflow: hidden;
    border-left: 1px solid #444;
    top: calc(-9em + 2px)!important;
    min-height: 9em;
    max-height: 9em;
    height: 9em; /*for menu slide from top: make this equal to .slide-lbody translateY and body padding-bottom */
    background: linear-gradient(45deg, #333,#333 75%, #00c3f7);
    background: -webkit-linear-gradient(45deg, #333,#333 75%, #00c3f7);
    background: -o-linear-gradient(45deg, #333,#333 75%, 00c3f7);
    background: -moz-linear-gradient(45deg, #333,#333 75%, #00c3f7);
    background: linear-gradient(45deg, #333,#333 75%, #00c3f7);
}
a.button.gobot{
    display:inline-block;
    position:fixed;
    top:0;
    width:1.5em;
    
    right:2.5em;
    z-index: 7;
}

.slide-header a, .slide-outer>a{
    text-decoration:none;
}
.slide-lbody>a:hover{
    background:#fff;
}
/*.slide-left ul, */.slide-header ul{
    margin:0;
    padding:0;
}

/*.slide-left li,*/ .slide-header li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

/*.slide-left li a, */.slide-header li a {
	padding: 5px 9px;
	text-decoration: none;
	background: #333;
	color: #eee;
    display:inline-block;
}
    /*.slide-left li a
    {
        display: block;
    }*/
    


/*.slide-left li a:hover,*/ .slide-header li a:hover {
	background: #444;
}

                            /* This is the checkbox */
.lslide-checkbox, .tslide-checkbox {
	position: fixed;
	top: -9999px;
	left: -9999px;
    z-index:3;
}

/* This is the clickable label */


.slide-label, .tslide-label {
	cursor: pointer;
	position: fixed;
    
	z-index: 3;
	display: block;
	margin: 1px;
}

.slide-label,
.slide-label:active,
.slide-label:focus,
.tslide-label,
.tslide-label:active,
.tslide-label:focus  {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.slide-label{
left:-1px;
}


.tslide-label {
    right:1px;
    top:-1px;
}

.main-nav, .slide-label:after, .tslide-label:after {
	content: "";
	color: #333;
	background: #ddd;
	display: block;
	height: 30px;
	width: 35px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	border-radius: 3px;
	font: 24px/30px 'responav';
	text-align: center;
}

.slide-label:after {
    content: "\25B8";
    
}
.tslide-label:after {
      content: "\25BE";
}


.lslide-checkbox:checked ~ .slide-label:after{
    content: "\25C2";
    
}

.tslide-checkbox:checked ~ .tslide-label:after {
	content: '\25B4';
}

/*
.tslide-label:before, .slide-label:before {
        content: '\2630';
        position: absolute;
        left: 0;
        background: #333;
        display: block;
        width: 1.5em;
        height:1.5em;
        border-radius: 3px;
        text-align: center;
        vertical-align: middle;
        line-height: normal;
        color: #fff;
    }

.lslide-checkbox:checked ~ .slide-label:before,
.tslide-checkbox:checked ~ .tslide-label:before{    
        content: '\2A09';
        padding:5px 0 0 0;
    }
*/
.lslide-checkbox:checked ~ .slide-left {
    left: 0;
}

    .slide-left, .slide-lbody
    {
        -webkit-transition: left 500ms ease;
		-moz-transition: left 500ms ease;
		-o-transition: left 500ms ease;
		transition: left 500ms ease;
    }
    .slide-lbody
    {
        -webkit-transition: width 500ms ease,top 500ms ease;
		-moz-transition: width 500ms ease,top 500ms ease;
		-o-transition: width 500ms ease,top 500ms ease;
		transition: width 500ms ease,top 500ms ease;

        -webkit-transition: left 600ms ease,top 500ms ease;
		-moz-transition: left 600ms ease,top 500ms ease;
		-o-transition: left 600ms ease,top 500ms ease;
		transition: left 600ms ease,top 500ms ease;

        -webkit-transition: margin-top 500ms ease,top 500ms ease;
		-moz-transition: margin-top 500ms ease,top 500ms ease;
		-o-transition: margin-top 500ms ease,top 500ms ease;
		transition: margin-top 500ms ease,top 500ms ease;
    }
.lslide-checkbox:checked ~ .tslide-checkbox

 {
    pointer-events:none;
    opacity:0.5;
}

.tslide-checkbox:checked ~ .slide-lbody{
    top:9em;
}

.tslide-checkbox:checked ~ .slide-header {
        top:0!important;
        /*
		-webkit-transform: translateY(0%) scale(1);
		-moz-transform: translateY(0%) scale(1);
		-ms-transform: translateY(0%) scale(1);
		-o-transform: translateY(0%) scale(1);
		transform: translateY(0%) scale(1);
        */    
	}

 
/*
 * set the width pretty high to test on an Ipad in portrait mode,
 * depending on your website you can probably make this narrower
    @media handheld, only screen and (max-width: 9880px) {
 */

	/* Only show the menu link on smaller screens */
	

	/*
	 * The transition value determines the speed
	 * at which the content will slide over
	 */
    .slide-header, .slide-body
    {
        /*
        -webkit-transition: top 500ms ease;
		-moz-transition: top 500ms ease;
		-o-transition: top 500ms ease;
		transition: top 500ms ease;
            */
    }
    
	.slide-lbody, .slide-left,.slide-body, .slide-header{
		/*-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
            */
	}


	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	/*.slide-lbody,*/
	.slide-left,.slide-body,
	.slide-header  {
		/*-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
            -webkit-perspective: 1000;
		-moz-perspective: 1000;
            */
		
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
    	}

	/*
	 * When the checkbox is checked slide the content
	 * over and the checkbox with it
	 */
	.lslide-checkbox:checked ~ .slide-lbody{
        width:calc(100% - 13em);
        left:13em;
        /*
		-webkit-transform: translateX(15em) scale(1);
		-moz-transform: translateX(15em) scale(1);
		-ms-transform: translateX(15em) scale(1);
		-o-transform: translateX(15em) scale(1);
		transform: translateX(15em) scale(1);
        */
	}
    .tslide-checkbox:checked ~ .slide-lbody
    {
        top: 9em;
    }
    .tslide-checkbox:checked ~ .slide-body {
        top:9em;
        
        /*for top menu: make this equal to the height of top menu and .slide-body padding-bottom*/
/*
		-webkit-transform: translateY(9em) scale(1);
		-moz-transform: translateY(9em) scale(1);
		-ms-transform: translateY(9em) scale(1);
		-o-transform: translateY(9em) scale(1);
		transform: translateY(9em) scale(1);
        */
	}

	
     
    .slide-left{
        	/* Keeps the menu hidden off-canvas to the left */
            width: 13em;
        left:calc(-13em + 6px);
        border:1px solid #eee;
        height:100vh;
        /*
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
          */      
        
    }
    
    .slide-header li:first-child a {
		border-left: none;
	}

	.slide-header li:last-child a {
		border-right: none;
	}