html {
    position: relative;
    overflow-x:auto;
    margin:0;
    width:calc(100vw - 25px);
}
body {
    margin: 0 0 0em; /* margin-bottom = footer min-height */
    background:#eee;
    border-bottom:1px solid #ddd;    
    }

html,body {
    padding:0;
	/*
	 * 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 {
/*	overflow: hidden;*/
    /*currently this is set as a magic number. It equals 
        min-height of div#addClass, div#editCls, div#editcart in UserCenter/reviewWinMgr.csss
        min-height of div#prezEd in userCenter/getPrez4Meet.css
         */
}

.slide-header {
    min-height: 9em;
    height: 9em; /*for menu slide from top: make this equal to .slide-lbody translateY*/
    top: -9em;
    width: 100vw;
    margin: 0;
    padding: 0;
    background: #00c3f7;
    overflow: hidden;
    z-index:2;
    vertical-align: top;
    border-radius: 0;
    
    background: linear-gradient(45deg, #444,#444 75%, #00c3f7);
    background: -webkit-linear-gradient(45deg, #444,#444 75%, #00c3f7);
    background: -o-linear-gradient(45deg, #444,#444 75%, 00c3f7);
    background: -moz-linear-gradient(45deg, #444,#444 75%, #00c3f7);
    background: linear-gradient(45deg, #444,#444 75%, #00c3f7);
}

    .slide-content
    {
        padding-bottom: calc(9em + 30px);/*equals 30+height of .slide-header, 
            to allow for increase Height command to be shown*/
        top:-9em;
    }
    .slide-checkbox:checked ~ .slide-header,
    .slide-checkbox:checked ~ .slide-content
    {
        top:0;
    }


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

	/*
	 * 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
	 */
	/*
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
        perspective: 1000px;
        */
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
           margin:0;
	}

.slide-header a,.slide-outer>a{
    text-decoration:none;
}

.slide-outer>a:hover{
    background:#fff;
}

.slide-header ul{
    margin:0;
    padding:0;
 
}

.slide-header li {
    display:inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.slide-header li a {
	display:inline-block;
	padding: 5px 20px;
	text-decoration: none;
	background: #444;
	color: #eee;
}

.slide-header li a:hover {
	background: #555;
}

a.button.gobot{
    display:inline-block;
    position:fixed;
    top:0;
    width:1.8em;
    height:1.2em;
    right:3em;
    z-index: 999;
}
/* This is the checkbox */
.slide-checkbox {
	position: fixed;
	top: -9999px;
	left: -9999px;
}



.slide-label {
	cursor: pointer;
	position: fixed;
    right:1em;
    top:0;
	z-index: 9;/*this is above .nav */
	margin: 1px;
    
}

/* Kill the nasty outlines everywhere */
.slide-label,
.slide-label:active,
.slide-label:focus {
    border:none;
    display:inline-block;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

    .slide-label:after {
      content: '\25BE';
        position: absolute;
        top:-1px;
        left: -12px;
        color: #333;
	    background: #ddd;
        display: block;
        width: 1.5em;
        height:1.5em;
        border-radius: 3px;
        text-align: center;
        vertical-align: middle;
        line-height: normal;      
}

.slide-checkbox:checked ~ .slide-label:after {
    content: '\25B4';
}
    /*
        
.slide-label:before {
        content: '\2630';
        content: "\25BE";

    }

    .slide-checkbox:checked ~ .slide-label:before {
        content: '\2A09';
        content: '\25B4';
        padding:5px 0 0 0;
    }
        */


div#dimm{
    display:none;
    z-index:2;
    position:fixed;
    width:100%;
    height:80%;
    top:0;
}
div.show#dimm{
    display:block;
    background:#aaa;
    opacity:0.7;
}

/*
 * screen width smaller than max-width will not see menu but link to menu.
 *   to not show menu but the link to menu, increase max-width
    @media handheld, only screen and (max-width: 9880px) {
 */

	/* Only show the menu link on smaller screens */
	.slide-label {
		display: block;
	}

	
    

	.slide-header li {
		float: left;
	}

	.slide-header li a {
		border-left: 1px solid #222;
		border-right: 1px solid #444;
		padding: 12px 12px;
	}

	.slide-header li:first-child a {
		border-left: none;
	}

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