/**
 * 
 * @package		Livesite
 * @version		1.3.5-beta
 * @author		Bogdan Vojska 
 * @copyright	2011-2020 Bogdan Vojska. All rights reserved.
 * @homepage	www.bogdan-vojska.de
 * @email		mail@bogdan-vojska.de
 *
 */
 
@CHARSET "UTF-8";

/* general */

.frame.extender > .frame {
	padding : 5px;
}
.controlframe {
	width : auto;
	margin : 0;
	border : medium none;
}
.controlframe .label,
.controlarea .label {
	min-width : 150px;
	}

/* form group - selector combination */

#formgroup div.frame {
	height : 655px;
	margin : 0 10px 0 10px;
	border : 1px solid #888888;
}


/* Head */

.frame.formgroup > .headbar {
	padding : 3px;
	margin-bottom : 10px;
	font-weight : bold;
	font-size : 12pt;
	min-height : 40px;
	}
.headbar .title {
	font-weight : bold;
	font-size : 14pt;
	line_height : 140%;
	}
.headbar .subtitle,
.headbar .title .subtitle {
	font-weight : normal;
	font-size : 12pt;
	line_height : 140%;
	}
.headbar.grayout {
	background-color : #aeaeae;
	}

/* commandpanel */
	
.commandpanel,
.frame.formgroup .commandpanel {
	width : 100%;
	margin : 0;
}

.commandpanel > form,
.frame.formgroup .commandpanel > div {
	display : inline-block;
	margin : 0;
	text-align : center;
}

.infobox {
	border : 1px solid #000;
}
.infobox.grayout {
	border : 1px solid #999;
}
.infobox.scroll {
	overflow-y : scroll;
}
.infobox.white {
	background-color : #fff;
}
.infobox.transparent {
	background-color : transparent;
}

.infobox > .grid {
	grid-template-columns : 0.5fr 1fr;
}

.infobox > .headbar {
	font-size : 10pt;
	font-weight : bold;
	padding : 3px;
	height : auto;
}
.infobox > .section,
.infobox > .contentarea,
.infobox > .separator {
	padding : 3px;
	background : none;
	border : none;
}

.infobox > .section,
.infobox > .separator {
	background : none;
	margin : 0 0 10px 0;
}
.infobox > .separator,
.infobox > .separator > p {
	margin : 0;
	color : #666;
	font-weight : bold;
}

/* SPECIFIC FORMS */
	
/* Language Selector */

.languageSelector div {
	color : #000;
	display : inline;
	background : none;
}
.languageSelector .text {
	line-height : 12pt;
	text-decoration : none;
	display : inline;
	background : none;
	border : none;
	width : 140px;
	cursor : pointer;
}
.languageSelector .text:hover {
	color : #fff;
}
.languageSelector .divider {
	color : #000;
}
	
/****** frontend editor must be permanent ******/

form#frm_frontendEditor {
	width : 100%;
	}
#frm_frontendEditor .commandpanel {
	text-align : center;
	}

#frm_frontendEditor textarea.default {
	width : 400px;
	height : 20px;
	}
#frm_frontendEditor textarea {
	max-height : 470px;
	}
#frm_frontendEditor textarea.regular {
	width : 400px;
	height : 20px;
	overflow : auto;
	}
#frm_frontendEditor textarea.medium {
	width : 400px;
	height : 150px;
	overflow : auto;
	}
#frm_frontendEditor textarea.large {
	width : 400px;
	height : 300px;
	overflow : auto;
	}
#frm_frontendEditor textarea.huge {
	width : 400px;
	height : 600px;
	overflow : auto;
	}
	
#frm_frontendEditor .controlarea {
	overflow : hidden;
	max-height : 700px;
	}
#frm_frontendEditor .controlframe {
	height : 100%;
	}
#frm_frontendEditor .controlframe #contentcontrols {
	height : 70%;
	}
#frm_frontendEditor .controlframe #attributescontrols {
	height : 200px;
	overflow-y : auto;
	}
	
#frm_frontendEditor #controlframe input,
#frm_frontendEditor #controlframe textarea {
	width : 100%;
	}
#frm_frontendEditor #controlframe .label {
	margin : 5px 0;
	text-align : left;
	}
	
#frm_frontendEditor .frame.bodymarker {
	border : 1px solid #aaa;
	padding : 0;
	margin: 0 2px 2px 0;
	float : left;
}
#frm_frontendEditor .frame.bodymarker * {
	background : none;
	border : medium none;
	display : inline-block;
}
#frm_frontendEditor .frame.bodymarker > * {
	background-color : #fff;
	margin : 0;
	padding : 2px;
}
#frm_frontendEditor .frame.bodymarker > div:nth-child(1) {
	background-color : #ffaaaa;
}
#frm_frontendEditor .frame.bodymarker > div:hover {
	background-color : #aaa;
}
#frm_frontendEditor .frame.bodymarker img {

}

/****** cssEditor ******

#frm_cssFrontendEditor {
	max-width : 950px;
}
#cssFrontendEditor_positionframe {
	position : relative;
	max-height : 80vh;
	min-width : 900px;
	overflow-y : auto;
}
#frm_cssFrontendEditor .subtitle.headbar {
	font-size : 12pt;
	font-weight : bold;
	height : auto;
	color : #444;
}

#frm_cssunitselector {
	position : absolute;
}

.cssunitselector {
	float: left;
    border: medium none;
    height: 14pt;
    width: 14pt;
    background-color: rgb(200,150,150);
    color : #fff;
    cursor: pointer;
    margin: 0 5px;
    z-index : 100;
    text-align: center;
}

.cssunitselector.pencil {
	background-image : url("../images/system/pencil_16px.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#displayframe_csseditortabarea .headbar {
	color : #fff;
	background-color : #aaa;
}

#frm_cssFrontendEditor > #displayframe_csseditortabarea div.controlframe > div.displayframe {
	max-height : 300px;
	overflow-y : auto;
	background-color : #eee;
}

#frm_cssFrontendEditor .colorpicker.frame {
	padding : 0;
	float : left;
}

.infobox.fontface {
	margin-left : 15px;
	width : 400px;
	height : 70pt;
	overflow : hidden;
	background-color : #fff;
	padding : 5px;
	float : left;
}

.infobox.fontface p {
	line-height : 110%;
}

.infobox.fontface.enlarged {
	height : auto;
}

.infobox.fontface p.maxi {
	font-size : 24pt;
}

.infobox.fontface p.mini {
	font-size : 9pt;
}

#selectorbox {
	position: absolute;
	top: 0;
	right: 0;
	z-index : 10;
}
#selectorbox_controlarea .separator {
	border-top : 1px solid #eee;
	border-bottom : 1px solid #eee;
	color : #444;
	padding: 3px 5px;
	background-color : #ddd;
	box-shadow : -10px 10px 6px #888;
}
#selectorbox_controlarea .separator:hover {
	color : #fff;
}
#selectorbox_controlarea .textbutton {
	background-color : #fff;
	color : #666;
	box-shadow : -10px 10px 6px #888;
}
#selectorbox_controlarea .textbutton:hover {
	background-color : #eee;
}
#selectorbox_controlarea .textbutton.active {
	color : #222;
	background-color : #dd3;
}

	
/****** Dependencies ******/

#dependencies_displayframe .label {
	width : 170px;
	float : left;
	margin : 2px 5px 2px 0;
}
#dependencies_displayframe {
	min-width : 600px;
	border : 1px solid #999;
	overflow-y : auto;
}
#dependencies_displayframe .cell {
	float : left;
	margin : 2px 5px 2px 0;
}
#dependencies_displayframe .row {
	border-bottom : 1px solid #999;
}
#dependencies_displayframe .row:first-child {
	border-top : 2px solid #999;
}

/****** AJAX Language Editor for formgroups ******/

#frm_languageEditor {
	border : 1px solid #aaa;
}

#frm_languageEditor .headbar {
	background-color : #aeaeae;
	height : 25px;
}
#frm_languageEditor .headbar > span {
	font-size : 10pt;
	margin : 3px;
}

#frm_languageEditor .controlarea {
	padding : 5px;
}

#frm_languageEditor .commandpanel {
	text-align : right;
}
#frm_languageEditor .commandpanel .textbutton {
	margin : 0;
}

#frm_languageEditor .controlarea > .input {
	width : 100%;
}

/****** QueryTool - text input form. Needed for frontend ******/

#frm_queryInput {
	height: 22pt;
	margin : 0;
	}
#frm_queryInput {
	display : flex;
	justify-content : flex-end;
	align-items: center;
	overflow : visible;
}
#frm_queryInput > .frame > .gobutton {
	cursor : pointer;
}
#frm_queryInput > .searchinput {
	position : relative;
	display : flex;
	flex-grow: 1;
	align-items: center;
	order : 1;
}
#frm_queryInput > .searchinput.hidden {
	display : none;
	order : 2;
}
#frm_queryInput > .frame.iconbutton {
	flex: 0 30px;
	order : 1;
}
#frm_queryInput > .searchinput > .frame.datalist {
	position: absolute;
    top: 2px;
    left: 30px;
    height: calc(100% - 2px);
    width : calc(100% - 30px);
	flex-grow: 1;
	order : 2;
}

#frm_queryInput img {
	height : 20px;
	margin : 3px 3px;
}
#frm_queryInput > .searchinput > img.closebutton {
	flex-grow: 0;
	order : 1;
}
#frm_queryInput .frame.datalist > input {
	font-size : 12pt;
	border : medium none;
	height : inherit;
}
#frm_queryInput .datalistoptions.frame.block {
	box-shadow: 5px 5px 5px #888;
}