@charset "UTF-8";

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

@media all
{

    /* ################ Dummy        ################ */
    /* **************** Dummy  END   **************** */

	/* ################ Header        ################ */
	#header{
        background-color: rgb(82, 94, 238);
        border: 1px solid rgba(230,230,230,1);
        box-shadow: 3px 5px 7px #CCC;
        padding: 10px 20px;
        position: relative;
	}
    #header #headerLogo{margin: 0 auto; width: 140px;}
    #header #headerLogoName{
        background: url('../images/logoName.png') no-repeat top left transparent;
        background-size: contain;
        height: 3.5vh;
        position: absolute;
        top: 3vh;
        width: 27%;
    }
    #header h1{text-align: center;}
    #header h1 a{color: #000099; text-shadow: 2px 2px 8px #000066;}
    #header h4{color: #999999; text-shadow: 1px 1px 4px #666666;}

	#header #languages{float: right; clear: both; margin-top:10px;}

	/* **************** Header  END   **************** */

	/* ################ Nav_main        ################ */
	#nav_main{
		background-color: rgba(227, 214, 171, 1);
        height: 12px;
		padding: 10px 20px;
		margin: 5px 0;
		box-shadow: 3px 5px 7px #CCC;
	}
	#nav_main a{color: #000000; font-size: 14px;}
	#nav_main a:hover{color: #C77C52;}

	/* **************** Nav_main  END   **************** */

	/* ################ nav_sub        ################ */

	#nav_sub{float: right;}
	.nav li a{border-color: #FFFFFF; color: #FFFFFF; text-decoration: none; font-size: 11px; line-height: 1em;}
	#footer .nav li a{border-color: rgba(82, 94, 238, 0.8); color: rgba(82, 94, 238, 1); text-decoration: none; font-size: 11px; line-height: 1em;}


	/* **************** nav_sub  END   **************** */


	/* ################ Nav_admin        ################ */
	#nav_admin{background-color: rgba(0,0,0,0.75); color: rgba(255,255,255,1); width: 99.8%; margin: 0 0.1%;}
	#nav_admin ul{list-style: none outside none; margin: 0;}
	#nav_admin li{border-width: 0; border-style: solid; border-color: #FFFFFF; cursor: pointer; float: left; padding: 3px 10px; }
	#nav_admin li:last-child {border-width: 0;}

	#nav_admin ul.firstLevel li{position:relative;}

	#nav_admin ul.firstLevel li ul{display: none;}
	#nav_admin ul.firstLevel li:hover ul{display: block;}
	#nav_admin ul.secondLevel{background-color: #484747; border-style: solid; border-color: #FFFFFF; border-width: 1px; box-shadow: 3px 5px 12px 4px rgba(200, 128, 200, 0.1); left: -1px; position:absolute; top: 22px; z-index: 1000 !important;}
	#nav_admin ul.secondLevel li{border-width: 0 0 1px 0; float: none; height: 24px;line-height: 1.2em; white-space: nowrap;}
	#nav_admin ul.secondLevel li.separator{background-color: #555555; border-width: 0 0 1px 0; float: none; height: 5px;}
	#nav_admin ul.secondLevel li.search{height: 22px;}
	#nav_admin ul.secondLevel li a{border-width: 0; color: #FFFFFF;  font-size: 14px; line-height: 1.2em; padding: 5px 0; text-decoration: none;}
	#nav_admin ul.secondLevel li:last-child {border-width: 0;}

	#nav_admin ul.secondLevel li:hover{background-color: #FFFFFF; border: 1px solid #000000;}
	#nav_admin ul.secondLevel li:hover a{color: #000000;}

    #nav_admin input{background-color: #CCCCCC; font-size: 10px; padding: 0 1px; width: 90%; }

    #nav_admin.fixed{
        background-color: rgba(25, 25, 25, 1);
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #FFFFFF;
        opacity: 1;
        position: fixed;
        top: 0;
        width: 1024px;
        z-index: 100;
    }


    #nav_admin ul.secondLevel li.ListNew a{color: #FE0000;}
    #nav_admin ul.secondLevel .ListRevise a{color: #FF7E00;}
    #nav_admin ul.secondLevel .ListClosed a{color: #0da504;}


    #nav_admin #search{height: 26px; position: relative; width: 40px;}
    #nav_admin #search img{left: 0; position: relative; top: -8px;}

	/* **************** Nav_admin  END   **************** */

    /* ################ Nav_loggedInUser        ################ */

    #userMenu{background-color: rgb(200, 200, 230); border-radius: 8px; border: 1px solid rgb(0, 0, 255); box-shadow: -1px 1px 1px #AAAADD;}
    #userMenu li{color: #333333; font-weight: bold; opacity: 1; padding: 5px 40px; text-align: center;}
    #loginMenu li a,
    #userMenu li a{color: inherit !important; width: 100%;}
    #loginMenu li:hover{text-shadow: 1px 1px 1px #444444;}
    #userMenu li:hover{background-color: #666699; color: #CCCCCC; text-shadow: 1px 1px 1px #444444;}
    #userNameWrapper #userMenu{display: none; position: absolute; right: 0; z-index: 100;}
    #userNameWrapper:hover #userMenu{display: block;}

    /* **************** Nav_loggedInUser  END   **************** */

	/* ################ Info        ################ */
	#info{color: rgba(54,54,226,1); padding: 10px; text-align: center;}
	#info #cont{padding: 10px 20px;}
	/* **************** Info  END   **************** */

	/* ################ Languages        ################ */

    #languages li{float: left; margin-right: 5px;}
    #languages .selected{opacity: 1;}
    #languages .available{opacity: .5;}
    #languages  img:hover{opacity: 1;}

	/* **************** Languages  END   **************** */


	/* ################ Main        ################ */
	#main{
		 /*background: url(../images/background_sb1_sb2.png) repeat-y center center transparent;*/
	}
	/* **************** Main  END   **************** */

    /* ################ Button        ################ */
    .button{background-color: rgba(128, 128, 200, 0.4); border-radius: 5px; border-style: solid; border-width: 1px; border-color: #999 #333 #333 #999; margin: 0 0 0 10px; padding: 2px 5px; font-size: 90%;}
    .button:hover{background-color: rgba(255, 255, 255, 0.6); color: #990000;}
    .delete.button:hover{color: rgba(255, 0, 0, 0.8)}
    /* **************** Button END   **************** */

    /* ################ Arrow Icon        ################ */

    .moveIcon{
        background: url(../images/icons/arrowsAll.png) no-repeat;
        display: inline-block;
        height: 34px;
        overflow: hidden;
        width: 34px;
    }

    /* **************** Arrow Icon  END   **************** */

	/* ################ Content        ################ */

	.content{padding: 1.5% 1.505%; position: relative; text-align: justify;}
	.content #login,
	.content #add_edit,
	.content #invalid{	text-align: center;	}

    .smallPage .content{padding: 2vh 15%; width: 70%;}
    #data_table,
	#login_table{margin: 10px auto 0;}

	.content h1{font-size: 24px; margin: 3px 0;}
    .content h2{font-size: 18px; text-align: center;}
	.content h4{font-size: 12px; margin: 3px 0 20px;}
	.content .author{font-size: 12px; margin: 3px 0 3px 5px;}
	.content .created{font-size: 10px; margin: 3px 0 3px 5px;}

    .content #welcome{color: rgba(100,100,100,1); font-size: 88px; margin: 50px 0; text-align: center; text-shadow: 5px 6px 12px rgba(50,50,200,0.52);}
    .content img{
        background-color: #DDDDDD;
        border-radius: 5px;
        border-width: 2px;
        border-style: solid;
        border-color: #AAAAAA #AAAAAA #888888 #888888;
        margin: 0 6px 10px 0;
        padding: 5px;
    }

    .listEditIcon img,
    .list_edit_icon img{
        background-color: transparent;
        border: none;
        margin: 0;
        padding: 0;
    }

    .content img.right{float: right; margin: 0 0 10px 10px;}
    .content img.big{float: left; margin: 0 20px 20px 0; width: 462px;}
    .subHeadline{font-weight: 700;  margin: 15px 0 5px 0; }
    .subContent{font-size: 80%;}
    .indent{margin-left: 5%;}

    .half img{max-width: 100%;}
    .half aside{font-size: 80%; text-align: justify;}
    .advertisement {background-color: rgba(240, 240, 240, 0.8); border:6px inset #B7B7B7; padding: 3%; margin: 2%;}
    .advertisement a{color: #333333;}

    .homeHeader{position: relative; z-index: 200;}

    .background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    #page3 #main .background {
        background: url(../images/rep-kalk-landing-img.jpg) no-repeat center center transparent;
        background-size: cover;
        height: 100%;
        opacity: 0.22;
    }

    #page8Content{color: #333333; font-size: 120%; text-shadow: -1px 1px 1px #DDDDDD, 1px 1px 1px #FFFFFF; }

    #base.notFound .content p{margin: 15px 0;}

	/* **************** Content  END   **************** */

	/* ################ sb        ################ */
	#sb1,
	#sb2{
		background-color: rgba(200,200,244,0.7);
		padding: 1.5% 0.75%;

	}
    #sb1{box-shadow: -2px 5px 7px #9999B9;}
	/* **************** Sb  END   **************** */

	/* ################ Footer        ################ */

	#footer{
        position: relative;
        bottom: 0;
	}

	.block{background-color: rgba(128, 128, 200, 0.4); width: 242px;}
	#powered_by{font-size: 11px; margin: 10px 0;}
    #footerMenu{font-size: 11px; float: right; height: 14px; margin: 10px;}
    #footerMenu a{border-right: 1px solid #999999; padding: 0 5px;}
    #footerMenu a:last-child{border-right: none;}
	/* **************** Footer  END   **************** */

    /* ################ Page        ################ */

    .loginDescription{line-height: 1.5em; padding-top: 8vh; text-align: justify;}
    /* **************** Page  END   **************** */


	/* ################ Category        ################ */

		#category #message{font-size: 12px; margin-top: 20px;}
		#category #message .update{font-size: 14px;}

		#category_menu.nav h3{margin: 10px 0 5px 0;}
		#category_menu.nav li{float: none;}
		#category_menu.nav li a{border-width: 0; float: none; font-size: 16px; padding: 0 0 0 10px;}

		#category_list{width: 347px;}
		#category_list .f0{width: 100px;}
		#category_list .f1{width: 145px;}

	/* **************** Category  END   **************** */

    /* ################ Form        ################ */
    .formFieldWrapper,
    .formLine{margin: 10px 0;}
    .formFieldWrapper label,
    .formLine label{display: inline-block; float: left; margin-right: 10px; text-align: right; width: 90px;}
    .fromFieldWrapper #content,
    .formLine #content{float: left; margin: 0; width: 80%;}

    .inputView{color: #0000AA; text-shadow: 1px 1px 2px #666;}


    /* **************** Form  END   **************** */

    /* ################ Menu        ################ */
            #Menu_list{width: 347px;}
            #Menu_list .f0{width: 100px;}
            #Menu_list .f1{width: 145px;}

    /* **************** Menu  END   **************** */


	/* ################ Alias        ################ */

		#alias_list{width: 720px;}
		#alias_list .f0{width: 50px; text-align: center;}
		#alias_list .f1{width: 44px; text-align: center;}
		#alias_list .f2{width: 120px; }
		#alias_list .f3{width: 105px;}
		#alias_list .f4{width: 70px;}
		#alias_list .f5{width: 110px; }
		#alias_list .f6{width: 44px; text-align: center;}
	/* **************** Alias  END   **************** */


	/* ################ User        ################ */

    #userInfo{margin: 10px 10% 30px;}
	p.user_info{ margin: 0;}
	.user_info .label{ display: inline-block; font-size: 80%; width: 80px;}

    #users .line{margin-bottom: 5px;}
    #users label{display: inline-block; margin-right: 10px; text-align: right; width: 80px;}

	#user_list{width: 487px;}
	#user_list .f0{width: 120px;}
	#user_list .f1{width: 150px;}
	#user_list .f2{width: 100px; text-align: center;}

	#password_form_wrapper{text-align: center;}

    #users #add_edit{float: left; width: 49%;}
    #users #usersPermissions{float: right; width: 49%;}
    #users #usersPermissions label{display: inline-block; font-size: 80%; margin: 0; text-align: left;}
    #users #usersPermissions #checkGroups{float: left; margin: 10px 0 0 10%; width: 25%;}
    #users #usersPermissions #checkRoles{float: right; margin: 10px 10% 0 0 ; width: 35%;}
    #users #usersPermissions input,
    #users #usersPermissions .line{margin: 0;}
    #users #usersPermissions #submitPermissions{margin: 10px 10%; width: 80%;}

    #usersPermissionsLabel {float: left; }
    #usersPermissionsString {float: left; }
    #usersPermissionsString span{display: inline-block; width: 80px;}

    .userChangePasswordWrapper .formLine label{width: 120px;}


	/* **************** User  END   **************** */

    /* ################ Client        ################ */

    p.client_info{ margin: 0;}
    .client_info .label{ display: inline-block; font-size: 80%; width: 80px;}

    #client .line{margin-bottom: 5px;}
    #client label{display: inline-block; margin-right: 10px; text-align: right; width: 100px;}

    #user_list{width: 487px;}
    #user_list .f0{width: 120px;}
    #user_list .f1{width: 150px;}
    #user_list .f2{width: 100px; text-align: center;}



    /* **************** Client  END   **************** */


    /* ################ Popup        ################ */

    #popupContent{height: 100%;}
    #popup .submitButton{position: relative; right: 14px; bottom: -14px;}

    #popupSearch .headline{font-size: 150%; margin-bottom: 6px;}


    /* **************** Popup  END   **************** */


    /* ################ Block Content        ################ */

    .blockContent{margin-bottom: 15px;}
    .blockContentHeadline{background-color: #525EEE; border: 2px solid #000000; padding: 5px 18px; height: 20px; position: relative;}
    .blockContentHeadlineDescription{color: #DDDDDD; float: left;  font-size: 14px; text-shadow: 1px 1px 1px #666666;}

    .expand{
        background: url("../images/icons/iconSetArrowsSmall.png") no-repeat 0 0 transparent;
        width: 22px;
        height: 22px;
        float: right;
        cursor: pointer;
        position: relative;
        z-index: 400;
    }
    .expand.closed{background-position: -58px -104px;}
    .expand.open{background-position: -7px -103px;}
    .blockContentBody{background-color: rgba(255,255,255,0.8); border-width: 0 2px 2px 2px ;border-style: solid; border-color: #000000; padding: 5px;}


    /* **************** Block Content  END   **************** */


    /* ################ Page        ################ */

    #contentMenu {
        margin: 0 0 10px;
        padding: 9px 10px;
        border: 1px solid #444;
        border-radius: 6px;
        background-color: #aaa;
        box-shadow: 2px 2px 1px #666
    }

    #contentMenu .button{padding: 5px;}
    #contentMenu form {display: inline-block}

    #pageInfo{display: inline-block; margin-bottom: 20px;}
    #pageInfo .highlight{margin-right: 50px;}
    #pageInfo .description{margin-right: 20px;}

    #pageForm input{width: 66%}
    #pageForm .formFieldWrapper input{width: 100%}
    #pageForm .floatLeft{margin-right: 20px}

    /* **************** Page  END   **************** */


    /* ################ Pagination       ################ */

    .pagination{margin-top: 4px;}
    .paginationButton{background-color: #E3D6AB; border-style: solid; border-width: 1px; border-color: #333 #666 #666 #333; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; width: 50px;}
    .paginationButton:hover{background-color: #557700; color: #DFDFDF;}
    .paginationButton.next{border-radius: 0 10px 10px 0; box-shadow: 1px 1px 1px #666; margin-left: 15px;}
    .paginationButton.next:hover{background-color: #557700; box-shadow: 2px 2px 1px #333;}
    .paginationButton.previews{border-radius: 10px 0 0 10px; box-shadow: -1px 1px 1px #666; margin-right: 15px;}
    .paginationButton.previews:hover{ box-shadow: -2px 2px 1px #333;}
    .paginationButton.inActive{visibility: hidden;}

    .paginationInfo{font-size: 11px; padding: 5px 20px 0;}
    .paginationMoveTo{font-size: 11px; margin-right: 40px;}
    #paginationMoveTo{background-color: #E3D6AB;  border-radius: 12px; box-shadow: 1px 1px 1px #666; font-size: 11px; text-align: center; width: 26px;}

    /* **************** Pagination  END   **************** */

    /* ################ Login       ################ */
    #loginForm{margin: 0 auto; width: 100%; max-width: 260px;}
    #login .line{margin-bottom: 10px;}
    #login .descr{font-weight: bold;}
    #login .descr,
    #login .input_label{font-size: 80%;}
    #login .formLine {display: block; float: none; font-size: 10px; margin-right: 0; text-align: center;}

    #login input{background-color: #CCCCCC; padding: 2px 0; text-align: center; width: 100%;}
    #login #submitLogin{color: #333333; font-weight: bold; padding: 4px; width: 100%; }
    #login #submitLogin:hover{background-color: #333333; color: #CCCCCC; }

    /* **************** Login END   **************** */

	/* ################ List       ################ */
    h2.list{margin: 0 0 10px; text-align: center; }
    .data_list{margin: 0 auto;}
    #listHead,
    .listHead,
    #list_head,
    #listBody,
    .listBody,
    #list_body,
    #listFooter,
    #list_footer,
    .listLine,
    .list_line,
    .editField,
    .edit_field,
    .listField,
    .list_field{border: 0 solid #FFFFFF; padding: 2px 0.5%;}

    .list_field,
    .listField,
    .edit_field,
    .editField{display: inline-block;}

    .list_field,
    .listField{font-size: 12px;}

    .listLine,
    .list_line{border-width:  1px 1px 2px 1px ; font-size: 0; margin: 3px auto;}
    .editField,
    .edit_field{ min-width: 60px; text-align: right; width: 5%;}

    #listHead .listLine,
    .listHead .listLine,
    #list_head .list_line{background-color: #0000FF; }
    #listHead .listField,
    .listHead .listField,
    #list_head .list_field{color: rgb(255,255,255); text-align: center; font-size: 11px; vertical-align: bottom;}

    #listFooter .listLine,
    .listFooter .listLine,
    #list_footer .list_line{background-color: #333333;}
    #listFooter .listLine,
    .listFooter .listLine,
    #list_footer .list_line .list_field{color: #FFFFFF;}

    #listBody .listLine:nth-child(odd),
    .listBody .listLine:nth-child(odd),
    #list_body .list_line:nth-child(odd){background:#CFCFCF;}
    #listBody .listLine:nth-child(even),
    .listBody .listLine:nth-child(even),
    #list_body .list_line:nth-child(even){background:#ACACAC;}
    #listBody .listField,
    .listBody .listField,
    #list_body .list_field{color: #333333; font-size: 12px;}

    .info{margin-bottom: 15px; position: relative;}
    .info:hover .info_display{display: block;}
    .info_display{background-color: #EEEEEE; box-shadow: 3px 5px 7px #EEEEEE;	border: 1px solid #AAAAAA; color: #000000; display: none; left: 30px; padding: 5px; position: absolute; top: 20px; width: 300px; z-index: 100;}

	#content .list .shortDate{font-size: 11px; margin: 0; text-align: center;}
	/* **************** List  END   **************** */

    /* ################ add_edit        ################ */
        #add_edit td{text-align: left;}
        #add_edit input,
        #add_edit textarea{width: 300px;}
        #add_edit select{width: 300px;}
        #add_edit input.da{width: 120px; text-align: center;}
        #add_edit input.ch{width: 20px; text-align: left;}
        #add_edit #function{margin: 20px 0 15px;}

    /* **************** add_edit  END   **************** */

    /* ################ Message        ################ */
    #message{
        font-size: 90%;
        padding: 10px 0 0;
        text-align: center;
    }

    /* **************** Message  END   **************** */

	/* #################   Defaults    ################# */

    input,
	select{background-color: #B1BCE9;}
	.tx{background-color: #E3D6AB;}

	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
    .clearfix:before {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .backButton,
    .deleteButton,
    .submitButton{
        background-color: #8d8ef8;
        border-radius: 6px;
        box-shadow: 1px 1px 1px #7171e3;
        font-size: 12px;
        margin: 15px 0 0 0 ;
        padding: 4px 10px;
        text-align: center;
    }
    .backButton{float: left;}
    .deleteButton:hover{background-color: #FF9999;}


    p{margin: 0;}
    .floatLeft,
	.f_left{float: left;}
    .floatRight,
	.f_right{float: right;}
	.clear{clear: both;}
	.block{display: inline-block;}
    .box{border-width: 2px; border-style: solid; border-color: #666 #333 #333 #666; border-radius: 6px ; box-shadow: 2px 2px 4px #666; margin: 10px 0 0; padding: 5px 15px;}
	.hidden,
	.hiddenWrapper{display: none;}
    .unVisible{visibility: hidden;}
	.highlight{color: #224FFF; font-weight: bold; font-size: 120%; text-shadow: 2px 2px 2px #98ADFD;}
	.highlightInline{color: #224FFF; font-weight: bold; font-size: 105%; margin: 0 10px;}
	.headline{color: #224FFF; font-weight: bold; font-size: 110%; text-align: center; text-shadow: 3px 3px 3px #98ADFD;}
	.center{text-align: center;}
	.fail{color: #DD3333; font-weight: bold; font-size: 115%; text-shadow: 2px 2px 3px #999999;}
	.error{color: #CC0000;}
	.description{color: #666666; font-size: 12px; text-align: center;}
    .important{color: #FF0000; font-size: 150%;}
    .i{color: #FF3300; font-size: 110%; font-weight: bold;}
    .booleanImage{cursor: pointer;}
    a{text-decoration: none;}
	ul{list-style: none outside none; padding: 0; margin: 0;}
	li{list-style: none outside none; margin: 0;}

	/* ****************   Defaults  END   **************** */


}

@media print{
    #userNameWrapper,
    #header,
    #nav_main,
    #nav_admin{display: none;}
    body{background: none;}
    #content{background-color: transparent; box-shadow: none;}

}

@media screen and (max-width: 980px){
    body{

    }

    div#leftcolumn{
        display: none;
    }
}