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

/* Common control styles */

.showCheckbox {
	border : 1px solid #aaa;
}

.textInput {
	line-height : 11pt;
	height : 14pt;
	font-size : 9pt;
	padding-left : 5px;
	background-color : #fff;
	border : 1px solid #aaa;
	width : 255px;
}
.textInput.markedyellow,
.markedyellow ,
.marked.yellow {
	background-color : #dd3;
	color: #000;
}
.textInput.markedred,
.markedred {
	background-color : #d22;
	color : #fff;
	font-weight : bold;
	font-size : 9pt;
	padding : 3px;
}

.textInput.markedblue,
.markedblue  {
	background-color : #332eb1;
	color : #fff;
	font-weight : bold;
	font-size : 9pt;
}


.textButton {
	line-height: 15px;
	font-size: 12px;
	color: #555;
	background-color : #eee;
	border: 1px solid #888;
	border-radius : 4px;
	padding: 0px 3px;
	margin : 0px 5px;
	display: inline-block;
	cursor: pointer;
}

.textbutton {
	line-height: 15px;
	font-size: 12px;
	width: auto;
	padding : 0 3px;
	border: 1px solid #888;
	border-radius : 4px;
	display: inline-block;
	cursor: pointer;
}
.textbutton.gray {
	color: #555;
	background-color : #eee;
}

.cmdButton,
.commandbutton {
    border : 1px solid #aaa;
    background-color : #DCDAD5;
    color : #666666;
    border-radius : 11px;
    font-weight : 700;
    font-size : 10pt;
    line-height : 14pt;
    padding : 0 8px;
    text-align : center;
    text-decoration : none;
    height : 22px;
    margin : 5px;
    min-width : 140px;
    display : inline-block;
    cursor : pointer;
}

.iconbutton {
	margin : 2px;
	cursor : pointer;
}

.iconbutton img {
	vertical-align : top;
}

.iconbutton.alterimage {
	width : 16px;
	height : 16px;
	position : relative;
	top : 25px;
	left : 7px;
	display : block;
	opacity : 0.5;
}
.iconbutton.alterimage:hover {
	opacity : 1;
}

.iconbutton.enlarger {
	margin : 5px;
}

.caption {
	min-height : 22px;
	margin : 0px 5px;
	font-size : 18x;
	font-weight: normal;
	line-height : 22px;
}

p.label {
	margin : 0px 5px;
	font-weight: normal;
}
	
div.label {
	min-height : 22px;
	margin : 0px 5px;
	font-size : 18x;
	font-weight: normal;
	text-align: right;
	line-height : 22px;
	float : left;
}
div.textInput {
	font-size : 9pt;
	line-height : 13pt;
	min-height : 13pt;
}
input.textInput {
	line-height : 11pt;
	height : 14pt;
}

select.textInput {
	line-height : 11pt;
	height : 14pt;
}
select.selectmultiple {
	padding : 0 0 0 0;
	border : 1px solid #aaa;
	min-height : 90px;
}
.selectbox {
	background-color : #fff;
	border : 1px solid #aaa;
	width : 255px;
}


.textarea {
	max-height : 470px;
	border : 1px solid #aaa;
	}	
.textarea.default {
	width : 400px;
	height : 20px;
	}
.textarea.regular {
	width : 400px;
	height : 20px;
	overflow : auto;
	}
.textarea.medium {
	width : 400px;
	height : 150px;
	overflow : auto;
	}
.textarea.large {
	width : 400px;
	height : 300px;
	overflow : auto;
	}
.textarea.huge {
	width : 400px;
	height : 600px;
	overflow : auto;
	}

/* Form tab classes */

.tabControl {
	border-width : 3px 1px 0 1px;
	border-color : #666;
	border-style : solid solid none solid;
	background-color : #f9f9f9;
	padding: 2px 5px 2px 5px;
	text-align: center;
	display : inline-block;
}
.tabControl:hover {
	border-top : 3px solid #00cc00;
	background-color : #ddd;
	text-align: center;
	cursor: pointer;
}
.tabControl.active {
	border-top : 3px solid #00cc00;
	background-color : #f9f9f9;
	text-align: center;
}
.tabControl.block {
	display : inline-block;
}
.tabControl.hidden {
	display : none;
}

.tabframe {
	border: 1px solid #777;
	padding : 3px;
}
.tabframe.hidden {
	display : none;
}
.tabframe.block {
	display : block;
}


/* Form vertical slider section control */

#opener {
	margin : 3px 0;
}
#opener * {
	display : inline;
}
#opener > span {
	margin-left : 3px;
}
#opener img {
	height : 10px;
	width : 10px;
}
#opener.targetframe {
	display : none;
}
#opener.label {
	margin : 0px 5px;
	display : inline
}
.opener {
	margin : 3px 0;
}
.opener * {
	display : inline;
}
.opener > span {
	margin-left : 3px;
}
.opener img {
	height : 10px;
	width : 10px;
}
.opener.targetframe {
	display : none;
}
.opener.label {
	margin : 0px 5px;
	display : inline
}

/* Optionselector - The detailed style for select controls */

.optionselector {
	border : 1px solid #aaa;
	max-height : 600px;
}
.optionselector option.selected {
	background-color : #ff0;
}
.optionselector option.label {
	color : #444;
	background-color : #eee;
	border-top : medium none;
}
.optionselector option.separator {
	border-top : 2px solid #666;
	color : #fff;
	height : 22px;
}

/* Radiogroup */

.radiogroup.trigger {
	min-width : 200px;
	text-align : left;
}

.radiogroup.trigger > div {
	width : 50%;
}

.radiogroup.trigger .caption {
	min-width : calc( 50% - 40px);
	text-align : left;
}

/* Separator */

.cn-article.separator {
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: #5e7786;
    background-color: inherit;
}

.separator.topline {
	background-color : inherit;
	color : inherit;
}
.separator.bottomline {
	background-color : transparent;
	border-bottom : 2px solid #aaa;
	color : #666;
}
.separator.noborder {
	border : medium none;
}

/* Spacer */

.spacer {
	float : left;
	height : 20px;
}

/* colorpicker */
.colorpicker > .colorbox {
	height : 14pt;
	width : 14pt;
	margin : 0 5px 0 0;
	background : transparent;
	border : 1px solid #999;
}

.colorpicker > textbox {
	height : 14pt;
}

/* datalist control */

#datalistframe {
	position : relative;
}
#datalistframe .datalistinput {
	border : medium none;
	background-color : #fff;
}

#datalistoptions {
	position : absolute;
	background-color : #fff;
	border-top : 2px solid #aaa;
	left : 0px;
	top: 20px;
	height : auto;
	box-sizing: unset;
	-moz-box-sizing: unset;
	-webkit-box-sizing: unset;
}
#datalistoptions > * {
	display: block;
	height : auto;
}

#datalistoptions .option {
	padding : 1px 0 1px 2px;
}

#datalistoptions .option:hover {
	background-color : #eaeaea;
}

#datalistoptions.frame.hidden {
	display : none;
}
#datalistoptions.frame.block {
	display : block;
}

/** paginator **/

#paginator {
	float : left;
	margin : 5px 0 5px 0;
}
#paginator > * {
	text-align: center;
	border : medium none;
	display : inline-block;
	min-width : 15px;
	min-height : 15px;
	padding : 1px;
	margin : 2px;
}
#paginator > form {
	width : auto;
	cursor : pointer;
}
#paginator > .pgnbutton.first {
	background-image : url(../images/system/arrow_boxedGreyLeft_15px.png);
	background-repeat : no-repeat;
}
#paginator > .pgnbutton.last {
	background-image : url(../images/system/arrow_boxedGreyRight_15px.png);
	background-repeat : no-repeat;
}
#paginator > form.first,
#paginator > form.last {
	float : left;
}
#paginator > div.range,
#paginator > form.range,
#paginator > .paginator_legend {
	float : left;
}