@charset "UTF-8";

/**
 *   by Georg Ording
 *   2012-04-10
 */

@media all
{
    body{
        /*background: url('../images/logo.png') no-repeat center center transparent;*/
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        height: 92vh;
    }
    .pad{padding: 1%;}

    #page-wrapper {
        margin: 0 auto;
        width: 99.8%;
        min-width: 360px;
    }

    /* ################ Header        ################ */

    #header{
        background-color: rgb(238, 238, 238);
        border: 1px solid rgba(210,210,210,1);
        box-shadow: 3px 5px 7px #CCC;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: 2fr 3.5fr 2.5fr;
        grid-template-areas:
            "logo info nav";
    }
    #headerLogo{grid-area: logo;}
    #headerInfo{grid-area: info;}
    #headerNavWrapper{grid-area: nav;}

    #headerLogo div{margin: 4px;}
    #headerInfo .headerInfo{margin: 1px 0; text-align: center;}
    #headerNav{
        background-color: rgb(238, 238, 238);
        box-shadow: 3px 5px 7px #CCC;
        display: none;
        height: 100vh;
        left: -1px;
        opacity: 0;
        overflow-y: auto;
        position: fixed;
        top: 55px;
        min-width: 0;
        width: 0;
    }

    #headerNav .firstLevel{margin-left: 2%;}
    #headerNav .secondLevel{margin-left: 4%;}
    #headerNav .menuLink {color: #AA0000; cursor: pointer; margin: 5px 0; }

    #mobileMenu #menuButton{
        background: url('../images/icons/wunde24-menu-button.png') no-repeat -45px 2px transparent;
        display: inline-block;
        height: 50px;
        margin-top: 2px;
        width: 50px;
    }
    #mobileMenu #menuButton.closed{background-position: -45px 2px;}
    #mobileMenu #menuButton.opened{background-position: 5px 2px;}
    #header{width: 100%;}
    #headerWundManager{position: fixed; left: 0; top: 0; z-index: 5000;}
    #main{margin: 70px 0; padding-bottom: 40px;}
    #headerWundManager #userName{color: #CCCCCC; }

    /* **************** Header  END   **************** */
	
	#main{position: relative; }

    #footer{position: fixed; bottom: 0; width: 96%;}
	
	#sb1,
	#content,
	#sb2{float: left; margin-top: 5px;}

	#sb1{left: 0; width: 0;}
	#content{left: 0; width: 97%;}
	#sb2{left: 0; width: 0;}

	.sb1.sb2 #sb1{left: 62%; width: 17%;}
	.sb1.sb2 #content{left: 0; width: 60%;}
	.sb1.sb2 #sb2{left: 81%; width: 17%;}

	.sb1 #sb1{left: 0; margin-right: 1%; width: 16%;}
	.sb1 #content{left: 19%; width: 78.4%;}
	.sb1 #sb2{left: 0; width: 0;}
	
	.sb2 #sb1{left: 0; width: 0;}
	.sb2 #content{left: 0; width: 78.4%;}
	.sb2 #sb2{left: 81%; width: 17%;}	
	
	.page_edit #sb1{left: 0; width: 25%;}
	.page_edit #content{left: 25%; width: 67%; padding: 2% 4%; }
	.page_edit #sb2{left: 0; width: 0;}
	
	/* #####  Sidebar  ##### */
	
	.sidebar_select {width: 100%;}
	
	#content{padding: 1.5%;}
	
	#page_info pre{overflow: hidden;}
	
	.rc_s{
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;		
	} 	
	.rc_m{
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;		
	}
	.rc_b{
		border-radius:30px;
		-moz-border-radius:30px;
		-webkit-border-radius:30px;		
	}	

	.rc_s_top{border-radius: 5px 5px 0 0;}
	.rc_m_top{border-radius: 15px 15px 0 0;}
	.rc_b_top{border-radius: 30px 30px 0 0;}
	
	.rc_s_bot{border-radius: 0 0 5px 5px;}	
	.rc_m_bot{border-radius: 0 0 15px 15px;}	
	.rc_b_bot{border-radius: 0 0 30px 30px;}	

	/* ################ Nav        ################ */
	.nav li{float: left;}
	.nav li a{border-width: 0 0 0 1px; border-style: solid;  float: left; padding: 0 5px;}
	.nav li:first-child a{border-width: 0 ;}
	
	#nav_admin .nav{float: left;}

    /* ################ User        ################ */
    #userNameWrapper{height: 22px; }
	#loginMenu,
    #userName{float: right; font-size: 12px; padding: 4px 20px 4px 0; }
    #userName .userName{color: #FFFFFF; font-weight: bold; font-size: 115%; padding-left: 10px; text-shadow: 1px 1px 1px #8888FF;}

/******************************************************************
**                         POPUP     	     					 **
******************************************************************/
    #popupBackground{
        background-color: rgba(33, 33, 33, 0.75);
        border:1px solid #cecece;
        height:100%;
        left:0;
        position:fixed;
        _position:absolute; /* hack for internet explorer 6*/
        top:0;
        width:100%;
        z-index: 999;
    }


    #popup{
        background-color: rgba(250,250,250, 1);
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        border: 2px solid #EE0000;
        box-shadow: 4px 5px 16px #CF2222;
        display:none;
        font-size:13px;
        opacity: 1;
        padding:12px;
        position: fixed;
        _position:fixed; /* hack for internet explorer 6*/
        z-index:1000;
    }

    #popup_form_close,
    .popupFormClose,
    #popup_form_close{
        background: url("../images/system/close.png") no-repeat scroll center top;
        height: 34px;
        line-height:14px;
        position:absolute;
        right:-17px;
        top:-17px;
        width: 34px;
    }

    #popup_form_close:hover,
    .popupFormClose:hover,
    #popup_form_close:hover{
        background: url("../images/system/close.png") no-repeat scroll center bottom;
        right: -16px;
        top: -16px;
    }

    #backButton{position: fixed; left: 5%; top: 60px; z-index: 200;}

    .xdebug-error tbody tr:first-child th{color: #000000; font-size: 125%;}

}