/*
 * css for the slides
 *
 * the form for the slides got the class .slide_form
 * simply to change standard elements style only if they are inside the slides
 */

/* round border with shadow, like the standard image but not restricted to size */
.slide_div_shadowborder {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #B3B3B3;
	background-color: #FFFFFF;
	-webkit-box-shadow: #B3B3B3 2px 2px 2px inset;
	-moz-box-shadow: #B3B3B3 2px 2px 2px inset;
	box-shadow: #B3B3B3 2px 2px 2px inset;
}

/* creating a shadow around the element */
.slide_element_focus {
	border-color: rgba(250, 181, 18, 0.8);
	box-shadow: 0 1px 1px rgba(250, 181, 18, 0.075) inset, 0 0 8px rgba(250, 181, 18, 0.6);
	outline: 0 none;
}

/* the container for the blue saving overlay for the slide */
.slide_layer_container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	vertical-align: middle;
}

/* text that is to width gets cut of and ... are shown at the end */
.slide_ellipsis_overflow {
	overflow: hidden; /* no overflow, so we 'cut' the to long stuff */
	text-overflow: ellipsis; /* if text it to long set ... at the end of the visible part */
	white-space: nowrap; /* this prevents text from simply getting a second line when it would be longer than the width of the element */
}

/* gray top and bottom line for a div, so it has a little horizontal boundry */
.slide_simple_div_boundary {
	border-bottom: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
}

/* ================= file upload =========================================== */

/* file input button */
.slide_form .fileinput-button {
	/*
		this is needed for ie,
		because for unknow reasons, at least to me HF
		the '+' and text move up out of the div when clicked on
		setting this styling prevents that, so the button does not move anymore
	*/
	overflow: visible;
}

.slide_form .slide_overflow {
	/*
		this is used to restict the fileinput-button click area
		needed because of the foo hack for the IE -.-
	*/
	overflow: hidden;
}

/* ================= progressbar =========================================== */

/* progressbar position and border */
#slide_overall_progress {
	height: 18px;
	width: 100px;

	position: absolute; /* position is top right corner under the X */
	top: 27px;
	right: 10px;

	background-color: #163970; /* blue */

	/* blue border */
	border-color: #163970;
	border-style: solid;
	border-width: 1px;


	/* round corners */
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

/* progressbar inner bar,  the filling */
#slide_overall_bar {
	height: 100%;
	background: #fab512; /* yellow color for the bar -> to fill the wrapper div */

	/* round corners, otherwise this inner div would stic out  */
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

/* styles the text in the progressbar */
#slide_overall_bar_text {
	height: 100%;
	width: 100%;
	position: absolute; /* absolut because there is the bar div also and we need the same space */
	top: 0px;
	left: 0px;
	color: white; /* #163970 */
	text-align: center;
	font-size: 11px; /* was the biggest size to fit in the bar */
}

/* small progressbar for form actions */
#slide_progress_bar .bar {
	height: 18px;
	width: 0%;
	background: #fab512;
	color: #163970;
}

/* small progress bar text */
#slide_progress_bar_text {
	padding-left: 10px; /* so the percent value is not glued to the left side */
}

/* ================= prognosis slide ======================================== */

/* forecast prognosis table styling */

#slide_prognosis_table {
	width: 100%;
	margin: 0 auto;
	clear: both;

	border-collapse: separate;
	border-spacing: 0;
	border-bottom: 1px solid #111;
}

	/* header row with month names */
	#slide_prognosis_table thead th {
		font-weight: bold;

		padding: 10px 18px;

		border-bottom: 1px solid #111;
	}

	/* cells (hold the input fields) */
	#slide_prognosis_table tbody tr td {
		padding: 8px 10px;

		width: 55px; /* fits 4 digits and 2 decimals */

		border-top: 1px solid #ddd;
		border-right: 1px solid #ddd;

		background-color: white;
	}

	/* first cell of a row (we only have on row) */
	#slide_prognosis_table tbody tr td:first-child {
		border-left: 1px solid #ddd;
	}

	/* the value row does not need a top border because the header already has one (usefull if we add more rows) */
	#slide_prognosis_table tbody tr:first-child td {
		border-top: none;
	}

	/* div with input field inside table that got an error after validation */
	#slide_prognosis_table .slide_input_field_medium.error {
		background-color: #ffcccc; /* light red because otherwise we dont see the error */
	}

	/* just removing standard css for for input fields inside table */
	#slide_prognosis_table .slide_input_field_medium input{
		width: 100%;
		padding: 0;
	}


/* aligns upload bar to tables */
#slide_progress_bar.prognosis_bar {
	padding-left: 0%;
	padding-right: 60%;
}

/* error text */
#slide_csv_error {
	color: red;
}


/* ================= inverter defaults slide ================================ */

/* big container for all checkboxes, enables scrolling */
.standard_form.slide_form .slide_inverter_check_row {
	margin-top: 10px;

	max-height: 240px;

	/* padding for top and bottom space, inner elements have a margin set */
    padding: 10px 0;

	/* scrollbar for y/height if the inner divs need more than the max-height */
	overflow-x: hidden;
    overflow-y: auto;
}

/* big container multi_row css override, same element as above but more precise selector needed */
.standard_form.slide_form .slide_inverter_check_row.multi_col {
	width: inherit; /* overrides the standard mulit_col width, so it stays inside the fancybox */
}

/* checkbox container itself that holds the checkbox square and text */
.standard_form.slide_form .slide_inverter_check_row div.checkbox_container {
	/* creates a little gap between the to columns */
	margin-left: 2%;
    width: 30%;
}

/* text of the checkbox */
#fancybox-wrap .standard_form.slide_form .slide_inverter_check_row .checkbox_container label {
	height: 24px;
	overflow: hidden;

	/* goes right to the end of the container div, so it can fit in 5 Letters (tested with W) and 3 dots */
	padding: 0;
    width: 84%;

	/*
	 * text is in one line, gets not broken, and if it overflows it gets ... bevor the cut of
	 * we dont need to break the word we simply cut it at the div end,
	 * otherwise if a word was to long it would be not shown at all because of the break/new line
	 */
	text-overflow: ellipsis;
    white-space: nowrap;
}

/* tab that got input fields with errors in it */
.slide_form li.error a {
	color: red !important;
}

/* checkbox container that has an error */
.slide_form .slide_inverter_check_row.error_border {
	border-color: red;
}

/* ================= inverter strings slide ================================= */

#fancybox-wrap .slide_form div.form_row label.slide_small_label {
	width: 35px;
}

/* sets the width of a label to match the input_field_small class */
#fancybox-wrap .slide_form div.form_row label.matching_small_input_field {
	width: 78px; /* input field width */
	padding: 0 10px; /* input field padding */
	margin-right: 6px; /* input fields have 2px space but we need 6px to match this, strange but only 6 look right */
}

/* sets the width of a label to match the input_field_medium class */
#fancybox-wrap .slide_form div.form_row label.matching_medium_input_field {
	width: 163px; /* input field width */
	padding: 0 10px; /* input field padding */
	margin-right: 6px; /* input fields have 2px space but we need 6px to match this, strange but only 6 look right */
}

#fancybox-wrap .slide_form div.form_row.slide_inverter_tracker_list{
	max-height: 212px;
	overflow-x: hidden;
	overflow-y: auto;
}