/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 14, 2014, 12:39:19 PM
    Author     : Hadi Nategh <hn@stylite.de>
*/
@media all {
	#egw_fw_sidebar{
		-webkit-transform: translate3d(0px,0px,0px);
	}
	
	// ######################tabs header ##########################
	// #      #      #     #     #     #     #     #     #     ####
	// #      #      #     #     #     #     #     #     #     ####
	// #  tab header #     #     #     #     #     #     #     ####
	// #      #      #     #     #     #     #     #     #     ####
	// ############################################################
	// Div Tabs

	.egw_fw_ui_tabs_header {
		margin: 0px 0 0 0;
		padding: 1px 1px 0px 0px;
		background-position: bottom;
		background-repeat: repeat-x;
		background-color: transparent;
		height: 34px;

			h1 {
				/*float: left;*/
				display: inline;
				width: 100%;
				text-align: center;
				-webkit-margin-before: 0;
				-webkit-margin-after: 0;
			}

			img{
				text-align:center;
				float: none;
				margin: 0 auto;
				.dimension_width_height_l;
			}

		// Tab
		// ##########
		// #        #
		// #        #
		// ##########
		// Inactive

		.egw_fw_ui_tab_header {
			padding-left: 0;
			position: relative;
			.border_radius(5px,0, 0, 5px);
			background: transparent;
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 0px 5px 0px 0px;
			padding: 2px 5px 7px 2px;
			cursor: pointer;
			border-width: 1px 1px 0 1px;
			border-style: solid;
			border-color: @gray_30;;
			background-repeat:repeat-x;
			height: 38px;
			width: 97%;
			&:hover {
				/*.background_color_20_gray ;*/
				background-color: @egw_color_1_e;
			 }

			// APP Name
			h1 {
				/*font-size: 100%;*/
				.fontsize_xxl;
				line-height: 1em;
				margin:0 15px 2px 2px;
				vertical-align: super;
			}

			// Images
			img.egw_fw_ui_tab_icon {
				display: inline-block;
				.dimension_width_height_l;
				margin: 5px 1px 0 1em;

				.img_filter_gray;
			}

			// FOR SVG IMG
			object {
			.dimension_width_height_l;
			/*background-color: @gray_0;*/
			margin: 8px 1px 0 5px;
			.border_radius(5px,0, 0, 5px);


			}


		}

		// ##########
		// #        #
		// #        #
		// ##########
		/*Active Tabs*/
		.egw_fw_ui_tab_header_active {
			border-width: 1px 1px 0px 1px !important;
			/*padding: 0 0 5px !important;*/
			.background_color_30_gray ;
			background-image:none !important;

			&:hover {.background_color_25_gray ;}


			// Active image
			img.egw_fw_ui_tab_icon {
				display: inline-block;
				.dimension_width_height_l;
			}
			 /*Active object*/
			 object {
			.dimension_width_height_l;
			margin: 0px 1px 0 5px;
			.border_radius(2px,0, 0, 2px);

			background-color: @gray_30;
			}
		}
	}
	
	    //SIDE AREA
    #egw_fw_sidemenu {
        position: absolute;
        top: 0px;
        bottom: 4px;
        left: 4px;
        right: 5px;
        overflow: auto;
        z-index: 0;
        padding-top: 0.6em;
        font-size: 0.9em;
		
            //####################################################
            // All Tabs
            // DRAG AND DROP
            .egw_fw_ui_sidemenu_entry_header
			{
				display: block;
				margin: 0 0;
				/*padding: 0px 5px 5px 10px;*/

				&:hover {
					.background_color_15_gray;
					.rounded(5px);
				}

				&:active {.box_shadow_standard_light_inset;}


				h1 {
					margin: 0 0 10px 0;
					padding-top: 0.31em;
					padding-left: 3em;
					.color_40_gray;
					/*font-size: 12px;*/
					.fontsize_xl;
					line-height: 17px;
				}

				object {background-color: @gray_0; .dimension_width_height_m;}

			}



            // ####################################
            // ####                               #
            // ###   IMG  |  ADD NAME             #
            // ###                                #
            // ###                                #
            // ####################################
            // Active APP
            // Active Tab
            // rounded Corner Left Top
            .egw_fw_ui_sidemenu_entry_header_active {
                //
                cursor: pointer;
                background-image: url("../images/clear.png");
                background-position: 95% -3000px;
                background-repeat: no-repeat;

                .background_color_10_gray;
                .border_radius ( 5px, 0px, 0px, 27px );
                .bordered (@gray_30, @gray_30, @gray_30, @gray_30);

                margin: 0 0 0 0;
                border-bottom: none;
                height: 33px;


                img {padding-left: 9px; padding-top: 6px; height: 18px;}

                h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;}

                &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
                &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}

                &:focus {
                    background-image: url("../images/ajax-loader.gif");
                    background-repeat: no-repeat;
                    background-position: 90% 50%;
                    .Complete_Button_active;

                    .background_color_25_gray;
                }

                object {
                    margin-left: 14px;
                    margin-top: 8px;
                    .rounded (3px;);
                    .dimension_width_height_s;
                }

                .egw_fw_ui_ajaxloader {margin-top: -26px;}

            }

            //####################################################
            // egw_fw_ui_sidemenu_entry_content
            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            //  ##        div.egw_fw_ui_category     ##
            //   ##       &:nth-last-of-type(-n+3)   ##
            //    #####################################





            .egw_fw_ui_sidemenu_entry_content {
                display: block;
                background-image: none;
                .border_radius (0, 0, 27px, 0);
                border-color: @gray_30;
                border-style: solid;
                border-width: 0px;
                margin: 0 0 2em 0;


                // rounded Corner on bottom
                &:nth-last-of-type(-n+3)   {
                    padding:  5px 0.3em 1.5em 0.3em;
                    margin: 0 0 10px 0;
                    .background_color_30_gray;
                    .border_radius (0, 0, 24px, 0);
                    border-color: @gray_30;
                }

               & > div {.background_color_30_gray;}

                //###################################################
                // has round corners
                div.egw_fw_ui_category:nth-last-of-type(-n+3) {
                    .border_radius (0, 0, 15px, 0);
                }

                //###################################################
                // Normal
                .egw_fw_ui_category {
                    margin: 4px 5px 5px 5px;
                    padding: 0.5em 1em 0.5em 0;
                    cursor: pointer;
                    //																												border-top: 7px solid;
                    border-color: @gray_30;
                    background-color: @gray_10;

                    /*background-color: @egw_color_2_d;*/

                    .border_radius(3px,3px,3px,3px);

                    h1 {
                        margin: 5px 0px 3px 5px;
                        padding: 0px 0px 0px 15px;
                        line-height: 1em;
                        .fontsize_l;
                        background-image:url(../images/arrow_left.png);
                        background-repeat:no-repeat;
                        background-position:left center;
                    }

                    div.egw_fw_ui_category:nth-last-of-type(-n+3) {
                                                                    img.egw_fw_ui_sidemenu_listitem_icon {
                                                                     display: block;
                                                                     }
                    }

                }

                //#################################
                // Hover
                // on Mouse over change color
                .egw_fw_ui_category:hover {
                    .background_color_40_gray;
                    padding: 0.5em 1em 0.5em 0;
                }



                /*######################*/
                // Active State
                // change Background color in Blue
                // See all Elements
                .egw_fw_ui_category_active {
                    border-bottom-width: 0px;
                    margin-top: 4px;

                    background-color: @egw_color_2_a;

                    /*.background-color-50-gray;*/
                    .color_5_gray;
                    .border_radius(3px,3px,3px,3px) !important;

                    h1 {
                        background-image:url(../images/arrow_down.png);
                        line-height: 1em;
                        font-size: 12px;

                            a {
                            color: #FFF;


                            img {.dimension_width_height_s;}

                            &:hover {
                                    padding: 5px 30px 5px 0px;
                                    width: 200px;
                                    .background_color_10_gray;
                                    .color_50_gray;
                                    .Complete_Button_hover;
                                }
                            }

                         }

                    &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);}
                }





            }

            .egw_fw_ui_sidemenu_entry_content_bottom {
                border-width: 0px 1px 1px 1px;
            }
            .egw_fw_ui_sidemenu_entry_header_bottom {
                border-width: 0px;
                border-color: @gray_0;
            }

            .egw_fw_ui_sidemenu_entry_icon {
				display: inline-block;
				.dimension_height_m;

				padding-left: 0;
				padding-right: 0px;
				float: left;

				/*filter grey*/
				.img_filter_gray;
			}


    } // SIDEMENU End
	
	//ToggleClass
	
	.sidebarToggle{
		width:82px !important;
		.egw_fw_ui_sidemenu_entry_content{
			display:none !important;
		}
		.egw_fw_ui_sidemenu_entry_header{
			height: 38px;
			width: 54px;
			text-overflow: ellipsis;
			border-radius: 0px 15px 15px 0px;
			img{
				src: url(../images/topmenu_items/setup.png) !important;
				height:32px !important;
				width:32px !important;
			}
		}
		
		.egw_fw_ui_tabs_header{
			span{
				height:38px;
				width:50px;
				border-radius: 0px 15px 15px 0px;
				img{
					height:32px !important;
					width:32px !important;
				}
			}
		}
		#egw_fw_splitter{
			display:none;
		}
	}
}