@charset "UTF-8";

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

@media all
{
	body{
		background: url('../images/system/background.jpg') repeat-x top center #BDBDCB;
        height: 100vh;
		margin: 0; 
		padding: 0;
        position: relative;
		width: 100%;

	}
	.pad{padding: 1%;}
	
	#page-wrapper {
		margin: 0 auto;
		max-width: 1024px;
        min-width: 360px;
        position: relative;
        height: 100vh;
	}	
	
	#main{position: relative; }

    #footer{margin-top: 20px; padding: 10px 4%; width: 92%;}
	
	#sb1,
	#content,
	#sb2{float: left; margin-top: 15px;}

	#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;}

    /* ################ Grid        ################ */
    .grid{ min-width: 200px;}
    .half{padding: 2%; width: 45.8%; }
    .oneThird{padding: 2%; width: 29.2%; }
    .twoThird{padding: 2%; width: 62.5%; }
    .full{padding: 2%; width: 95.5%;}

/******************************************************************
**                         POPUP     	     					 **
******************************************************************/
    #popupBackground{
        background-color: #000000;
        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: #ccccff;
        border-radius: 8px;
        border: 2px solid #000066;
        box-shadow: 4px 5px 16px #7171e3;
        display:none;
        font-size:13px;
        opacity: 1;
        padding:12px;
        position: fixed;
        z-index:1000;
    }
    .popup.fail{
        background-color: #ffcccc;
        border: 2px solid #660000;
        box-shadow: 4px 5px 16px #e37171;
        display: table;
    }
    .popup.success{
        background-color: #ccffcc;
        border: 2px solid #006600;
        box-shadow: 4px 5px 16px #71e371;
        display: table;
    }
    .popup.topPosition{
        top: 10vh !important;
    }

    .popup.fail #popupContent,
    .popup.success #popupContent{display: table-cell; text-align: center; vertical-align: middle;}

    #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;
    }

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

}

@media screen and (max-width: 678px){
    .half{width: 96%; }
    .oneThird{width: 96%; }
    .twoThird{ width: 96%; }

}