body{
    margin:  6px;
    padding:0px;
}

.moduletable,.moduletable_menu {
    border: 1px solid #777;
    padding: 10px 10px; 
    background: #dddddd;
    width: 93%;
	margin: 0 auto;
    border-radius: 5px;
	box-shadow: 7px 7px 5px #aaa;
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ddd, #FFF); /* Standard syntax (must be last) */
    margin-bottom: 20px;
}



.grad_border {
    border: 1px solid #ccc;
    padding: 10px 10px; 
    background: #dddddd;
    width: 93%;
	margin: 0 auto;
    border-radius: 5px;
	box-shadow: 7px 7px 5px #aaa;
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#999, #FFF); /* Standard syntax (must be last) */
}

$blue: #336c95;
$transitionSpeed: .5s;
$menuOffset: 80%;

html , body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "Helvetica", sans-serif;
    font-size: 15px;
    overflow: hidden;
}

#menu , #favorites {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: $menuOffset;
    z-index: 1;
    background: #333;
    overflow: auto;
    opacity: 0;
    -webkit-transition: opacity 0s $transitionSpeed;
    
    ul {
        display: block;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    
        li a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #222;
            color: #fff;
            text-shadow: 0 1px 0 #000;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
            background: -webkit-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
            background: -moz-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
    
            &.active {
                background-color: $blue;
            }
        }
    }
}

#favorites {
    left: auto;
    right: 0;
}

.handler {
    display: none;
    
    &#handler-right:checked {
        
        & ~ #favorites {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }
        
        & ~ #wrapper {
            -webkit-transform: translate3D(-$menuOffset,0,0);
            -moz-transform: translate3D(-$menuOffset,0,0);
    
            #content {
                overflow: hidden;
            }
        }
    }
    
    &#handler-left:checked {
    
        & ~ #menu {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }
    
        & ~ #wrapper {
            -webkit-transform: translate3D($menuOffset,0,0);
            -moz-transform: translate3D($menuOffset,0,0);
    
            #content {
                overflow: hidden;
            }
        }
    }
}

#wrapper {
    position: relative;
    z-index: 2;
    background: #F5F5F5;
    height: 100%;
    box-shadow: 0 0 3px #000;
        -webkit-transform: translate3D(0,0,0);
        -moz-transform: translate3D(0,0,0);
    -webkit-transition: -webkit-transform $transitionSpeed ease-in-out;
    -moz-transition: -moz-transform $transitionSpeed ease-in-out;
    
    #button {
        height: 20px;
        padding: 10px;
        background: #eee;
        line-height: 20px;
    
        label {
            color: #666;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
    
            &:hover {
                color: $blue;
            }

            &#right {
                float: right;
            }
        }
    }

    #content {
        padding: 10px;
        color: #666;
        line-height: 1.5em;
        font-size: .9em;
        font-weight: 300;
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    
        p:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}

.OrderReportButton{
    background-color: #F3F3F3;
    color: #0080FF;
    line-height: 25px;
    width:80px;
    cursor:pointer; 
    margin:4px;
    padding-left: 10px;    
    padding-right:10px;
    border: 1px solid #aaa;
}

.OrderReportButton:hover{
    background-color: #E0E0E0;
    color: #007CFF;
    border: 1px solid #008;
}

.no_overlay {
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.my-helper-modal {
    width: 535px;
    position: fixed;
    top: 35%;
    left: 50%;
    margin-top: -200px;
    margin-left: -265px;
    z-index: 101; /* 1px higher than the overlay layer */

    border-radius: 5px;
    border: 1px solid #999;
	padding: 5px;
}

/* Modal CSS*/
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-dialog{
	position: fixed;
	background: #E3EAF8;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 15px;
	padding-bottom: 20px;
	border: 2px solid #fff;
	border-radius: 4px;
	top: 30%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	-webkit-transform: translateX(-50%) translateY(-30%);
	-moz-transform: translateX(-50%) translateY(-30%);
	-ms-transform: translateX(-50%) translateY(-30%);
	transform: translateX(-50%) translateY(-30%);
	text-align: center;
}

.md-fullscreen {
	position: fixed;
	background: #E3EAF8;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 15px;
	padding-bottom: 20px;
	border: 1px solid #53555b;
	top: 50%;
	width: 100%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	height: 100%;
	visibility: visible;
	top: 0;
	left: 0;
	z-index: 2000;
	opacity: 1;
	transition: opacity 2s linear;
	text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(13,27,115,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(20,35,0,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}