/**
 * EGroupware: Stylite Pixelegg template
 *
 * Definitions for layout and raster
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package pixelegg
 * @version $Id$
 */

@import (reference) "../../phpgwapi/templates/default/def_buttons.less";

 //############## Layout ########################################################################################

// Allgemeines

/* #################################################
 * Basecontainer
 * #################################################
 */







//IFRAME

.egw_fw_content_browser_iframe,
#divMainView {
//								.background-color-0-gray;
								margin: 0;

								body {.background-color-0-gray; }
}

#egw_fw_header{

	width: 100%;
	float: left;

// Logo

#egw_divLogo {
							float: left;
							width: 255px;
							display: block;
							margin-left: -8px;
							text-align: center;
							height: 45px;
							.background-color-5-gray;

								img {
										height: 40px;
										border: none;
										.background-color-5-gray;
									}

								}

/* ###########################################################################################################################################
/* ###########################################################################################################################################
* Topmenu
/* ###########################################################################################################################################
*/

				#egw_fw_topmenu ul,
				#egw_fw_topmenu > * > ul > li,
				.topmenu_info_item,
				 #egw_fw_topmenu_items,
				 #egw_fw_topmenu_info_items {
												display: inline;
											}

//				// Feld für Menu und User + Hinzufügen
//				#egw_fw_topmenu {
////								position: fixed;
////								z-index: 100;
//								top: 0px;
////								float: left;
////								width: auto;
//								margin: 0em;
////								margin-left: 255px;
////								text-align: right;
//								padding-top: 0;
//								padding-bottom: 5px;
////								padding-left: 2em;
//								width: 100%;
////								display: none;
////								.color-5-gray;
////								.background-color-5-gray;
//							    border-bottom-left-radius: 5px;
//
//								a {
//										text-decoration: none;
//										color: black;
//	        					}
//
//								// Menu : Home / Einstellungen / usw..
//								#egw_fw_topmenu_items {
//
//														float: left;
//														padding-top: 10px;
//
//														ul {
//																padding: 10px;
//
//																li{
//
//																		.color-5-gray;
//																		padding-right: 1em;
//																		padding: 0.5em 1em;
//																		.border-color-50-gray;
//
//																		a {
//																			.color-5-gray;
//																			height: 30px;
//																			padding: 0.2em;
//																			}
//																		a:hover {
//																			.color-5-gray;
//																			.border-color-50-gray;
//																			}
//																	}
//
//
//
//																li:hover{
////																	.background-color-15-gray;
//																	.border-color-50-gray;
//
//																}
//
//
//																// Zeichen
//																li:first-child{
//																			padding-left: 1.5em;
//																			padding-right: 4em;
//
//																			margin-right: 5px;
//										   									margin-top: 0px;
//										   									margin-left: -28px;
//										   									height: 30px;
//
////																			// Das Symbol für das Ausklappen
////																			:before {
////																				content: "+";
//////																				color: red;
////																				color: @egw_color_1;
////																				font-size: 2em;
////																				.Complete_Button_hinweis;
////																			}
//
//																		}
//
//														} // Ende ul
//
//
//
//
//														select {
//																	margin-top: 0;
//																}
//
//													} // Ende items
//								} // Ende


				// Navigation wird sichtbar
	#egw_fw_topmenu{
									display:block;
									-webkit-transition: all 1s linear;
									-moz-transition: all 1s linear;
									-o-transition: all 1s linear;
									-ms-transition: all 1s linear;
									transition: all 1s linear;

									.color-100-gray;

//									.background-color-10-gray;

									-webkit-border-bottom-left-radius: none;
									-moz-border-radius-bottomleft: none;
									border-bottom-left-radius: none;



									#egw_fw_topmenu_items {
														float: left;
														padding-top: 10px;
//														height: 30px;

														ul {
//															padding: 10px;
//															margin-left: 2em;

															li{
																.color-100-gray;
																.Button_size_square_32;
																padding: 0.3em 0.4em;
																.Complete_Button_normal;

																&:hover{.Complete_Button_hover;.color-100-gray;}

																// Zeichen vor dem Link (klein)
//																:before {
//																	content: "►";
//																	color: @egw_color_1;
//																	font-size: 1em;
//																		}
//
																a {.color-100-gray;}
																a:hover {
																			.color-50-gray;
																			.border-color-50-gray;
																			}
																}

															li:first-child{
																	margin-left: -28px;
																				:before{border: none;}
																				}
															} // Ende ul


										}	// Ende Items






								}	// Ende hover


	}


#egw_fw_topmenu_slide{
//					width: 100%;
					width: auto;
					text-align: center;
					height: 15px;
					float:left;
					position: fixed;
					left: 196px;

				.slidedown{
					background-image: url("images/slidedown.png");
   				 	background-position: center center;
   				 	height: 15px;
   				 	width: 15px;
   				 	display: block;
   				 	margin-left: 40px;
					margin-top: 0px;
//					z-index: 100;
//float:right;
   				 	}
   				 .slideup{
					background-image: url("images/slideup.png");
   				 	background-position: center center;
   				 	height: 15px;
   				 	width: 15px;
   				 	display: block;
					margin-top: 10px;
					margin-left: 40px;

   				 	}
				}
#egw_fw_topmenu_addons{
	// Logout

				#egw_fw_logout {
													background-image: url(../../phpgwapi/templates/pxe/images/logout.png);
													background-size: 16px 16px;
												    background-position: center center;
												    background-repeat: no-repeat;
												    cursor: pointer;
												    display: inline-block;
												    float: right;
												    margin-right: 1em;
												    margin-top: 0px;
												    z-index: 200;
												    .Button_size_square_16;
												    .border_normal;
												    .box_shadow_standard_light;
												    padding: 0.5em;
												    top: 5px;
												    position: fixed;
												    right: 5px;


												    &:hover {.box_shadow_standard_light_hover;}
												}



				// Print

				#egw_fw_print {
													background-image: url(../../phpgwapi/templates/pxe/images/print.png);
													background-size: 16px 16px;
												    background-position: center center;
												    background-repeat: no-repeat;
												    cursor: pointer;
												    display: inline-block;
												    float: right;
												    margin-right: 5px;
												    margin-top: 0px;
												    position: fixed;
												    .Button_size_square_16;
												    .border_normal;
												    .box_shadow_standard_light;
												    padding: 0.5em;
												    top: 5px;
//													position: relative;
												    right: 45px;
												    z-index: 200;
												    &:hover {.box_shadow_standard_light_hover;}

												    &:focus {.box_shadow_standard_light_inset;}

													}
		/* ###################################################################
		 * Topmenu
		 *
		 * Name + Datum + Hinzufügen
		 *
		 *
		 * */

		#egw_fw_topmenu_info_items {

								padding-right: 20px;
								float: right;
								white-space: nowrap;

//								&:hover {.background-color-25-gray;}

								.topmenu_info_item {

//														select{.Complete_Button_select;}


														// Info Bell
														&:nth-child(1) {

																		}

														// Name
														&:nth-child(2) {
																		float: right;
																		margin-top: 0;
																		}
														// ??
														&:nth-child(3) {

																		}
														// Add
														&:nth-child(4) {

																		}



													}





								} // Ende items



				// ########################################
				// quick_add

					span#quick_add{
								position: fixed;
							    right: 88px;
							    top: 0;
								z-index: 200;
								// Button hinzufügen
//								.border-radius (0, 0, 25px, 0);
//								background-color: @egw_color_2_e;
//								border-color: @egw_color_2_a;
								padding: 0 0.8em 0.8em 0.5em;

								&:before {content: "+";font-size: 2em;color: @egw_color_1;}
//								&:hover {background-color: @egw_color_2_a;}

								//.Complete_Button_add;

								select#quick_add_selectbox{
//									    .Button_size_square_16;
												    .border_normal;
												    .box_shadow_standard_light;
									height: 30px;
									padding: 0 0 0 10px;
//									.Complete_Button_select;
//									background-color: @egw_color_2_e;
									font-size: 0.9em;
									line-height: 1.1em;
//									padding: 0;
									 &:hover {.box_shadow_standard_light_hover;}
									 &:focus {.box_shadow_standard_light_inset;}
									 option {
									 	&:first-child{
									 		&:before {content: "+";font-size: 2em;color: @egw_color_1;}

									 	}

									 }
								}

								}


	}


/* ################################################################################################################
 * Sidebar
 * ################################################################################################################
 */

#egw_fw_sidebar {
				position: fixed;
				overflow: hidden;
				top: 57px;
				left: 0px;
				bottom: 20px;
				width: 225px;
				.background-color-5-gray;

				//Menu
				#egw_fw_sidemenu {
								position: absolute;
								top: 0px;
								bottom: 4px;
								left: 4px;
								right: 5px;
								overflow: hidden;
								z-index: 0;
								padding-top: 0.6em;
//								.background-color-0-gray;

								.egw_fw_ui_scrollarea_outerdiv{
																.background-color-5-gray;


																// Alle Tabs
																.egw_fw_ui_sidemenu_entry_header {
																									    cursor: pointer;

																									    display: block;
																									    height: 30px;
																									    margin: 0 0;
																									    padding: 4px 5px 5px 15px;


																									  	.background-color-5-gray;

																									  	background-image: none;

																									    .border-color-10-gray;

																									    border-radius: 5px 5px 5px 5px;
//																									    border-style: solid;
//																									    border-width: 0 1px;

																									    -moz-border-radius:5px;
																										-webkit-border-radius:5px;

																									    &:hover {
																													.background-color-15-gray;
																													}

																									    h1 {
																											     font-size: 1em;
   																												 font-weight: normal;
   																												 margin: 0 0 10px 0;
   																												 padding-top: 0.31em;
   																												 .color-40-gray;

																											}

																									}



																// aktive APP
																// aktiver Tab
																.egw_fw_ui_sidemenu_entry_header_active {
//
																									    cursor: pointer;
																										//background-image: url("images/gradient30blue.png");
																										background-image: none;

																										.background-color-10-gray;

																										border-radius: 27px 0px 0 0;
//																										border-width: medium 1px;

																										border-top: 1px solid #C6CED6;
																										border-left: 1px solid #C6CED6;


																										margin: 0 0 0 0;
																										-moz-border-radius-topright: 5px;
																										-webkit-border-top-right-radius:5px;
																										-moz-border-radius-topleft: 5px;
																										-webkit-border-top-left-radius:27px;


																										border-bottom: none;

																										height: 44px;


																										img {padding-left: 10px; padding-top: 8px;}

																										h1 {text-transform: uppercase; font-size: 1.4em; .color-100-gray; padding-top: 8px;}

																										&:hover {.box_shadow_standard_light_inset;}

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

																												.background-color-25-gray;


																												}

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

																										}


																// Rahmen um APP Einstellungen
																.egw_fw_ui_sidemenu_entry_content {
																								    	display: block;

																										background-image: none;


																									    .border-radius (0, 0, 27px, 0);

																									    .border-color-25-gray;

																									    border-style: solid;
																									    border-width: 0px;
																									    margin: 0 0 2em 0;
//																									    padding:  0 0.3em 2em 0.3em;


																									   > div:nth-of-type(1)  {
																									    	padding:  5px 0.3em 1.5em 0.3em;
																									    	margin: 0 0 10px 0;
																									    	.background-color-25-gray;
																									    	.border-radius (0, 0, 27px, 0);

																									    .border-color-25-gray;
																									    }

																										// Schaltflächen
																										// Normal
																											.egw_fw_ui_category {
																												margin: 10px 5px 0px 5px;
																												padding: 0.5em 1em;
																												cursor: pointer;
//																												border-top: 7px solid;
																												.border-color-25-gray;
																												.background-color-15-gray;
																												.border-radius(3px,3px,3px,3px);


																																 h1 {
																																	margin: 5px 0px 3px 5px;
																																	padding: 0px 0px 0px 15px;
																																	font-size: 9pt;
																																	background-image:url(../images/arrow_left.png);
																																	background-repeat:no-repeat;
																																	background-position:left center;
																																	}
																																}

																											// Hover
																											.egw_fw_ui_category:hover {
																												.background-color-30-gray;
																												padding: 0.5em 1em;
																											}

																											// Active
																											.egw_fw_ui_category_active {
																												border-bottom-width: 0px;
																												margin-top: 0px;
																												.background-color-50-gray;
																												.color-5-gray;

																																		 h1 {
																																			background-image:url(../images/arrow_down.png);

																																				a {
																																					color: #FFF;


																																					img {height: 16px; width: 16px;}
																																				}

																																				a:hover {
																																					padding: 5px 30px 5px 0px;
																																					width: 200px;
																																					.background-color-10-gray;
																																					.color-50-gray;
																																					.Complete_Button_hover;
																																						}
																																			}

																																		}

																										}

																.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: black;
																										}

																.egw_fw_ui_sidemenu_entry_icon {
																									display: inline-block;
																									width: 20px;
																									height: 20px;
																									padding-left: 0;
																									padding-right: 10px;
																									float: left;
																								}
																}


								}

				// Trenner (Splitter)
				#egw_fw_splitter {
								position: absolute;
//								background-color: RGB(200, 200, 255);
								.background-color-25-gray;
								width: 5px;
								top: 61px;
								bottom: 3px;
								right: 0px;

								&:hover {background-color: @egw_color_1;}

								.egw_fw_ui_splitter_vertical {
																background-image: url(images/splitter_vert.png);
																background-position: center;
																background-repeat: no-repeat;
																position: absolute;
																width: 5px;
																height: 100%;
																cursor: col-resize;
																}

								}


// Ende Sidebar
}
// Menu Seite links





// Submenu / Unterpunkte in der Seitenleiste

.egw_fw_ui_category_content {
	.background-color-0-gray;
    border-top-width: 0;
    border-left: 0px solid;
    border-bottom: 0px solid;

//    .border-color-25-gray;

    margin-left: 4px;
    margin-top: 0px;
    padding-bottom: 5px;
    padding-left: 14px;
    padding-top: 14px;
    margin-right: 5px;
    min-height: 50px;

    &:hover {
				.background-color-0-gray;
				.border-color-50-gray;
				}


}




// Sub Sub Menu Item

.egw_fw_ui_sidemenu_listitem {
	display: block;
//	margin-top: 0em;
	margin: 4px 0 5px 6px;
	position: relative;


								img { height: 16px; width: 16px}

								input {
									height: 16px;
									width: 81% !important;
									}
								input[type="image"] {height: 10px; width: 10px !important; margin-left: 1px;} // mehrere Benutzer auswählen

								select { width: 86% !important; }


								// normale Links

								a {
//									.Complete_Button_text;
									padding: 5px 30px 5px 0px;
									text-decoration: none;
									min-width: 5em;
									display: block;

									 &:hover{
										color: #FFF;
										background-color: @egw_color_2_e;
										}

									&:active {
										.box_shadow_standard_light_inset;
									}

								}





								div {

											a:first-child{
//												.Complete_Button_text;
//												padding: 2px;
//												padding: 5px 30px 5px 0px;
												width: 72% !important;
//												background-color: red;
											}

											a:first-child:hover {
//													.Complete_Button_text_hover;
//													.background-color-30-gray;
//													padding: 5px 30px 5px 0px;
//													width: 200px;
												}

											//löschen
											a:nth-child(2){
//															float: left;
															position: absolute;
//															margin-left: 72%;
															right: 0;
															top: 0;

															background: transparent;
//															.Complete_Button_Icon_normal;
//															margin-right: 0.5em;
															padding: 0px 2px 0 2px;
															width: 10px;
															min-width: 5px;

																	img {
																		margin: 0 0 0 0;
																		padding: 0em 0em 0 0em;
																		height: 10px;
																		width: 10px;
																		}
															}

											a:nth-child(2):hover {
																	.background-color-warning;
																	.Complete_Button_Icon_hover ;
																	.color-0-gray;
//																	width: auto;

																}


								}




							} // .egw_fw_ui_sidemenu_listitem


.egw_fw_ui_sidemenu_listitem_icon {
	display: inline;
	margin-left: -16px;
	padding-right: 3px;
	width: 12px;
	height: 12px;
	float: left;
//	padding-top: 4px;
}



// Scrollarea

.egw_fw_ui_scrollarea
{
	overflow: hidden;
	z-index: 0;
}

.egw_fw_ui_scrollarea_button
{
	position: absolute;
	display: block;
	width: 100%;
	height: 12px;
	z-index: 2;
}

.egw_fw_ui_scrollarea_button_up.egw_fw_ui_scrollarea_button_hover,
.egw_fw_ui_scrollarea_button_down.egw_fw_ui_scrollarea_button_hover
{
	background-image:url(../images/scroll_hover.png);
}

.egw_fw_ui_scrollarea_button_disabled
{
	display: none !important;
}

.egw_fw_ui_scrollarea_button_up, .egw_fw_ui_scrollarea_button_down
{
	height: 14px;
	background-image:url(../images/scroll.png);
	background-color: white;
	background-repeat: no-repeat;
	background-position: center;
}

.egw_fw_ui_scrollarea_button_up
{
	top: 0px;
}

.egw_fw_ui_scrollarea_button_down
{
	bottom: 0px;
}

.egw_fw_ui_scrollarea_outerdiv
{
	height: 100%;
}





.egw_fw_content_browser_div {
	display: block;
//	overflow: auto;
/*	background-color: RGB(240, 240, 255);*/
}

.egw_fw_content_browser_div_loading {
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
	width: 16px;
	height: 16px;
	background-image: url(../images/ajax-loader.gif);
	background-position: center;
	background-repeat: no-repeat;
}

/* ###########################################################################################################################################
/* ###########################################################################################################################################
* Main
/* ###########################################################################################################################################
*/

#egw_fw_main {
//				margin: 0;
//				float: left;
				margin: 3px 0em 0em 2em;
//				.background-color-0-gray;
				padding: 0;
				width: auto;





				// ########################################
				// APPS

				#egw_fw_tabs{
//												.box_shadow_dialog;
//												.border_radius_button_lefttop ;
//												border-style: solid;
//												border-width: 2px;
//												border-color: grey;
												position: relative;
//												top: 3px;
//												witdh: 100%;
//												top: 7px;
												background-color: transparent;
				//								margin-top: 0px;
//												margin: 1em 1em 0em 1em;
												float: left;
												width: 100%;



				// ############################################################
				// Tabnavigation


				 // Statusmeldung

				 // definiert in def_messages.less

//				.egw_fw_ui_app_header_container {	}



				// ############################################################
				// #      #      #     #     #     #     #     #     #     ####
				// #      #      #     #     #     #     #     #     #     ####
				// #      #      #     #     #     #     #     #     #     ####
				// #      #      #     #     #     #     #     #     #     ####
				// ############################################################
				// Div um Tabs

				.egw_fw_ui_tabs_header {
										.border-radius(5px,0, 0, 5px);
										margin: 0;

										-moz-border-radius-topright: 5px;
										-webkit-border-top-right-radius: 5px;
										-moz-border-radius-topleft: 5px;
										-webkit-border-top-left-radius: 5px;
										border-top-right-radius: 5px;
										border-top-left-radius: 5px;


										padding: 0px 5px 0px 5px;

										background-position: bottom;
										background-repeat: repeat-x;
											background-color: transparent;


										h1 {
															//				font-size: 8pt;
																			float: left;
																			width: 100%;
																			text-align: center;
																			-webkit-margin-before: 0;
																			-webkit-margin-after: 0;
																			}

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



															// Tab

															// ##########
															// #        #
															// # 16x16  #
															// ##########
															// aktive



										.egw_fw_ui_tab_header {
																					text-align: center;
																					padding-left: 0;
																					padding-right: 0;
																					position: relative;

																					-moz-border-radius-topright:3px;
																					-webkit-border-top-right-radius:3px;
																					-moz-border-radius-topleft:3px;
																					-webkit-border-top-left-radius:3px;
																					border-top-right-radius:3px;
																					border-top-left-radius:3px;

																					.background-color-5-gray;
//																					.background-color-egw-lighter ;
																					display: inline-block;
																					margin: 3px 5px 0px 0px;
																					padding: 2px 10px 2px 10px;
																					cursor: pointer;
																					border-width: 1px;
																					border-style: solid;
																					border-color: #c6ced6;
//																					border-color: @egw_color_1;

//																					background-image:url(../images/tabs_bg.png);
																					background-repeat:repeat-x;

																					height: 49px;

																	&:hover {.background-color-25-gray ;}

																	h1 {font-size: 100%; line-height: 1em; margin-top:0;}
																}

									.egw_fw_ui_tab_header_active {
																border-width: 1px 1px 0px 1px !important;
																padding: 2px 10px 3px 10px !important;
//																background-color: white !important;
																.background-color-25-gray ;
																background-image:none !important;

																&:hover {.background-color-25-gray ;}

																	}
										// Bilder
										img.egw_fw_ui_tab_icon {
																display: inline-block;
																width: 20px;
																height: 20px;
																margin-right: 5px;
																margin-top: 10px;
				//												float: left;
																}







															}

															.egw_fw_ui_tab_close_button {
																							position: absolute;
																							right: 1px;
																							top: 1px;

																							display: inline-block;
																							width: 16px;
																							height: 16px;
																							margin-left: 5px;
																							background-repeat: no-repeat;
																							background-position: center;
																							background-image: url(../images/close_button.png);
																							float: right;

																							:hover {
																										background-image: url(../images/close_button_hover.png);
																									}

																							}


											// Ende Tabs
											}



											// Hover

											.egw_fw_ui_tab_header_hover{
//												background-image:url(../images/tabs_bg_hover.png);
											background-color: transparent;
												}




				// Der eigentliche Inhalt der APP
				// ############################################################
				// #      #      #     #     #     #     #     #     #     ####
				// #      #      #     #     #     #     #     #     #     ####
				// ############################################################
				//
				//    Content / Inhalt
				//
				// ############################################################

				.egw_fw_ui_tab_content {

					border-width: 0px 9px 0px 9px;
					border-style: solid;
					.border-color-25-gray;

//					background-color: white;
//					width: 99.5%;

					div:nth-child(1) {
//						height: 100%;
//						min-height: 400px;

						iframe{
								height: 100%;
								min-height: 99%;
								}

						}
				}


// Ende Main
}

// Dialoge Allgemeine Definition


div.et2_container {

//	.background-color-25-gray;
	padding: 0;

	div{


		table.et2_grid {
//			.background-color-5-gray;

			tbody {

					tr {

						// Select + Inputfelder
						.row {


							td {
								.et2_box_widget {
												select, input {
															height: 20px;
															padding: 0;
															margin: 0px;
															font-size: 0.95em;
															}
												}

							}

						}

						td{

							// Tabs
							.et2_tabbox{

								.et2_tabheader {}
								.et2_tabs {

											table.et2_grid {.background-color-0-gray;}

											}

										}

							// Datum Auswahl

							span.et2_date{} // etemplate2

							} // td


					} // tr




					// Buttonleiste Unten
					 tr.footer-toolbar{
					 	.background-color-50-gray;
					 	.color-0-gray;
						line-height: 5em;

					 	select.et2_selectbox {
										    background-color: #FFFFFF;
										    height: 30px;
										    margin-left: 0;
										    margin-top: -4px;
										    padding: 3px;
										    width: 113px;
											}


					 }




			}



		}



	}


} // Ende Dialog