/**
 * rightSidebar.css
 *
 * Copyright (c) 2003-2008 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Site-wide shared elements for pages including a right-hand sidebar.
 *
 * $Id: rightSidebar.css,v 1.7 2008/06/13 16:22:43 asmecher Exp $
 */

/**
 * Common HTML elements
 */


#headerTitle {
    text-align: center;
    width: 100%;
}

#body {
    width: 100%;
}

#rightSidebar {
    float: right;
    width: 20%;
    padding: 0em 0em 1em 0em;
    font-size: 0.65em;
    height: 100%;
    margin-right: 5%;
    margin-left: 2%;
    overflow: hidden;
}

#button-sidebar-right{
    border: 1px solid #ddd;
    border-right: 0;
    background-color: #87CEEB;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: none;
    font-size: 1.8em;
    position: fixed;
    padding-top: 3px;
    z-index: 2000;
        
    webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/** html #rightSidebar { margin-right: 5%; }*/

#main {
	float: left;
	/*height: 860px;*/
	display: inline;
	/*margin-left: 10%;*/
        margin-left: 5%;
	/*min-height: 700px;*/
	overflow: hidden;
	width: 68%;
}

@media(max-width:750px) and (min-width:650px) {
    #main {
        width: 100%;
        margin-left: 0;
    }
    
    #rightSidebar {
        border: 1px solid #ddd;
        background-color: #87CEEB;
        border-radius: 5px 0 0 5px;
	float: none;
        height: 92%;
        margin-right: 5%;
        padding: 20px;
        /*padding-right: 0;*/
        position: fixed;
        /*right: -20px;*/
        right: -340px;
        overflow-y: auto;
        top: 75px;
	width: 300px;
        z-index: 1000;
        
        webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    #button-sidebar-right{
        display: block;
        top: 25%;
        right: 0px;
    }
    
    #body.toggled #rightSidebar{
        right: -38px;
    }
    
    #body.toggled #button-sidebar-right{
        right: 295px;
    }
}

@media(max-width: 650px) and (min-width: 550px) {
    #main {
        width: 100%;
        margin-left: 0;
    }
    
    #rightSidebar {
        border: 1px solid #ddd;
        background-color: #87CEEB;
        border-radius: 5px 0 0 5px;
	float: none;
        height: 92%;
        margin-right: 5%;
        padding: 20px;
        /*padding-right: 0;*/
        position: fixed;
        /*right: -20px;*/
        right: -340px;
        overflow-y: auto;
        top: 75px;
	width: 300px;
        z-index: 1000;
        
        webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    #button-sidebar-right{
        display: block;
        top: 25%;
        right: 0px;
    }
    
    #body.toggled #rightSidebar{
        right: -30px;
    }
    
    #body.toggled #button-sidebar-right{
        right: 297px;
    }
}

@media(max-width: 550px) and (min-width: 450px) {
    #main {
        width: 100%;
        margin-left: 0;
    }
    
    #rightSidebar {
        border: 1px solid #ddd;
        background-color: #87CEEB;
        border-radius: 5px 0 0 5px;
	float: none;
        height: 92%;
        margin-right: 5%;
        padding: 20px;
        /*padding-right: 0;*/
        position: fixed;
        /*right: -20px;*/
        right: -340px;
        overflow-y: auto;
        top: 75px;
	width: 300px;
        z-index: 1000;
        
        webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    #button-sidebar-right{
        display: block;
        top: 25%;
        right: 0px;
    }
    
    #body.toggled #rightSidebar{
        right: -24px;
    }
    
    #body.toggled #button-sidebar-right{
        right: 297px;
    }
}

@media(max-width: 450px) and (min-width: 0px) {
    #main {
        width: 100%;
        margin-left: 0;
    }
    
    #rightSidebar {
        border: 1px solid #ddd;
        background-color: #87CEEB;
        border-radius: 5px 0 0 5px;
	float: none;
        height: 92%;
        margin-right: 5%;
        padding: 20px;
        /*padding-right: 0;*/
        position: fixed;
        /*right: -20px;*/
        right: -340px;
        overflow-y: auto;
        top: 75px;
	width: 300px;
        z-index: 1000;
        
        webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    #button-sidebar-right{
        display: block;
        top: 25%;
        right: 0px;
    }
    
    #body.toggled #rightSidebar{
        right: -20px;
    }
    
    #body.toggled #button-sidebar-right{
        right: 298px;
    }
}