/**
 * Offcanvas
 * Ideal for mobile hidden menus or panels.
 * This code is largely inspired from jQuery Mobile, and other great examples like Foundation Zurb
 *
 * I found some of the examples (at the time) difficult to follow.
 * This is a stripped down version to be used with Offcanvas.js
 * NOTE: It is possible for an entirely css solution. Although behaviour should be handled in the js layer.
 *       Js keeps it easy to delegate left or right behaviour. And easily allows multiple panels on one
 *       page without additional css.
 *
 * TODO: Support media queries. In possibly most cases on desktop view we'll want to see all content.
 *       On mobile we'll want to hide some content in panels.
 *
 * @namespace oc short for Off Canvas
 * @author Alexis Hope bambii7@github.com
 **/

/*
 * This is required, wrapping the entire main content
 * and footer & header, also wraps around the oc-panels
 */
#oc-wrapper {
    position: relative;
    overflow: hidden;
    min-width: 100%;
	min-height: 100%;
    zoom: 1;
}

/*
 * Main content panel & default view
 * Apply z-index to overlay oc-panels, allowing soft gradient borders
 *
 * Note: You could remove this class all together.
 *       If you were after the oc panel to slide out and
 *       consume the entire viewport. Matter of choice.
 */
.oc-canvas {
    /*position: relative;*/
    z-index: 100;
    width: 100%;
    -webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    -ms-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}

/*
 * Panel styles.
 * Fairly self explanatory. Push panel behind main content.
 * Set width to a portion of the main view (use js to detect
 * content click and close panel).
 */
.oc-panel-right, .oc-panel-left {
    position: fixed;
	background: #FFF;
    z-index: 200;
    width: 75%;
    height: 100%;
    -webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -ms-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: left 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

@media only screen and (min-width: 481px){
    .oc-panel-right, .oc-panel-left {
        width: 50%;
    }
}

/*
 * OC closed state position,
 * this is where the animation will begin from.
 */
.oc-panel-left {
    left: -75%;
}

.oc-panel-right {
    right: -75%;
	top: 0;
}

/*
 * OC open state position,
 * animation end.
 */
.oc-panel-left.oc-open {
    left: 0;
}

.oc-panel-right.oc-open {
    right: 0;
    -webkit-box-shadow: -10px 0px 20px 5px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: -10px 0px 20px 5px rgba(100, 100, 100, 0.5);
    box-shadow: -10px 0px 20px 5px rgba(100, 100, 100, 0.5);
}

/*
 * Main content position when panel is active.
 */
.oc-canvas.oc-open-left {
    left: 75%;
}

/*.oc-canvas.oc-open-right {
    right: 75%;
}
.oc-canvas.oc-open-left #header,
.oc-canvas.oc-open-left #footer
{
	position: absolute;
}

.oc-canvas.oc-open-right #header,
.oc-canvas.oc-open-right #footer
{
	position: absolute;
}*/

/*
 * Panel access/button
 * apply this class to anchors with the href pointing to the id of the panel
 * eg. <a href="#menu-panel" class="oc-togglel"> Open Menu </a>
 *     <div id="menu-panel" class="oc-panel-left"> here is a fancy menu </div>
 */
.oc-toggle {
    /* class applied here for documentation & for ide code completion */
}