.ui-widget-header .ui-icon { 
     background-image: url(jquery-ui/images/ui-icons_444444_256x240.png);
 }




/*---------------clear-------------*/
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display:inline-block;}
/* Hide from IE Mac \*/
.clear { display:block; }
/* End hide from IE Mac */
* html .clear {height:1px;}
/*---------------clear-------------*/

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.inlineblock {
	display: inline-block;
}


.pointer {
	cursor: pointer;
}

.inline {
	display: inline;
}

/* ################## MAIN ################## */



* {
/*	position: relative;  */
	padding: 0; margin: 0;
}

html {
	height: 100%;
	width: 100%;
}

body {
	background-color: #333;
}

a {
   outline: 0;
}

body, h1, h2, h3, h4, h5, h6 {
	margin: 0; padding: 0;

/*	font-family: "Nitti-Light", "Menlo", 'Andale Mono', monospace; */
	font-weight: normal;
	line-height: 130%;
/*	word-spacing: -3px; */
/*	color: #333; */

}

.disabledAnchor {
       pointer-events: none !important;
       cursor: default;
       color:Gray !important;
/*       background-color:Gray; */
/*visibility: hidden;*/
}

.iconBody {
	fill: #999;
}
.smallIcon {
	top:3px; 
	margin-right:5px;
}


h1, h2, h3, h4, h5, h6, p {
	margin-top: 20px;
	margin-bottom: 10px;
	padding: none;
	margin-left: -2px;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 185%;
}

h3 {
	font-size: 170%;
}

h4 {
	font-size: 155%;
}

h5 {
	font-size: 140%;
}

h6 {
	font-size: 125%;
}


a {
	text-decoration: none;
	cursor: pointer;
}

#action {
	display: none;
}

/*
em, strong {
	font-weight: normal;
}
*/

em {
	padding-left: 3px;
	padding-right: 2px;
}

/* ### ALERT ### */

#alert {
	position: fixed;
	top: 0px;
	color: #555;
	display: none;
	height: 120px;
	width: 100%;
	font-size: 11pt;
	z-index: 4000;
	font-weight: normal; 
}

#alert #inner {
	width: 800px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;

	/* vertical align */
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#alert #text {
	width: 700px;
	max-width: 80%;
	float: left;
	overflow: auto;
	padding-left: 15px;
}

#alert #closebutton {
	font: 16pt ynUIRegular;
	float: right;
	margin-top: -3px;
	margin-right: 15px;
}



.logMessage {
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;
	padding: 10px;
	background-color: #434343;
	margin-bottom: 10px;
	color: white;
	box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, .2);
}

.logMessage .metadata {
	color: #999;
}

.info {
	background-color: #e5ff7f;
	color: #555;
}

.warning,.error {
	background-color: #ff8746;
	color: #555;
}

.logMessage.error .metadata em {
	color: white;
}

.logMessage.info .metadata em {
	color: black;
}

.logMessage.error .metadata {
	color: #777;
}



/* ################## BUSY WIDGET ################## */

#busy {
	display: none;
	position: fixed;
	left:400px;
	top:300px;
	background-color: #272727;
	z-index:1000;
	border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px;
	padding: 50px;
	opacity: 0.9;
}



/* ################## CONTENT ################## */

#content {
}

#action {
	display: none;
}


/* ################## NAVIGATION ################## */

.admin {
	display: none;
}

.loggedIn {
	display: none;
}

.notLoggedIn {
	display: none;
}

#locales img {
	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;
}


/* ################## STAGE ################## */


#stage {
	margin-top: 0px;
}

#stage_left {
	float: none;
}

#stage_right {
	float: none;
	padding: 15px;
}

.navi_right a {
	-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;

}



.area {
/*	float: left; */
	background-color: #BBB;
	width: 100%;
	margin-bottom: 1px;
	padding-top: 1px;
	padding-bottom: 2px;
/*	margin-right: 13px;
*/

}

.areainner {
	margin: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.area .area {
	margin-top: 20px;
	margin-bottom: 15px;
	background-color: #333;
	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;
	width: 100%;
}

.area .hints {
	margin-top: 10px;
	margin-bottom: 15px;
}

.area .hints .hint {
	margin-bottom: 10px;
}


@media only screen and (min-width: 800px) {
	.area {
/*		width: 800px;*/
		border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px;
		margin-bottom: 15px;
		border-bottom: none;
	}

	.areainner {
		margin-bottom: 20px;
	}
}

.headline {
	margin-top: 0px;
	margin-bottom: 15px;
}

.headline span {
/*	color: #333; */
	line-height: 130%;
	background-color: #0cbaec;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
}


input, textarea, select {
	font-family: 'Nitti Light', 'Andale Mono', monospace;
	font-weight: normal;
	font-size: inherit;
	line-height: 120%;
	color: #444;
	padding: 3px;
	padding-left: 6px;
	padding-bottom: 5px;
	width: 97%;
/*	word-spacing: -3px; */
	margin-top: 2px;
	margin-bottom: 9px;
	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;
	border: none;
}


textarea {
	height: 120px;
}

select {
	font-family: 'Nitti Light', 'Andale Mono', monospace;
	font-weight: normal;
	font-size: 11pt;
	line-height: 130%;
	color: #444;
	padding: 3px;
	width: 97%;
	margin-bottom: 10px;
	margin-right: 3px;
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px;
	border: none;
	padding-left: 5px;

	background: rgba(255, 255, 255, .3);
    border: 1px solid rgba(0, 0, 0, .4);
}

input[type=checkbox] {
	width: 20px;
}

.checkbox {
	margin-top: 6px;
	margin-bottom: 0px;
}
.checkbox input {
	width: 25px; 
	float: left;
}

input[type=file] {
	padding: 10px;
	background-color: #999;
	margin-right: 10px;
}

input[type=button],input[type=submit],.button {
	width: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 8px;
	margin-left: 0px;
/*	margin-bottom: -5px; */
	margin-right: 0px;
	cursor: pointer;
	background-color: #58585A;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px;
	-webkit-appearance: none;
	font-family: inherit;
	color: #FFF;
	display: inline-block;
}

input[type=button]+input[type=button], input[type=button]+input[type=submit], input[type=button]+.button,
input[type=submit]+input[type=submit], input[type=submit]+input[type=button], input[type=submit]+.button,
.button+.button, .button+input[type=button], .button+input[type=submit],

.no-print input[type=button]+.no-print input[type=button], .no-print input[type=button]+input[type=submit], .no-print input[type=button]+.button,
input[type=submit]+input[type=submit], input[type=submit]+.no-print input[type=button], input[type=submit]+.button,
.button+.button, .button+.no-print input[type=button], .button+input[type=submit]

 {
	margin-left: 10px; 
}

.button.secondary, a.button.secondary, input[type=button].secondary {
	background-color: rgba(0, 0, 0, .2) !important;
	color: rgba(0, 0, 0, .2) !important;
}

input[type=button].important,input[type=submit].important,.button.important {
	background-color: #ff8746;
	color: #333;
}

.buttonWrapper {
	/*padding-bottom: 20px;*/
	margin-bottom: 10px;
}

.required {
	font-size: inherit;
	color: #0cbaec;
	padding-left: 6px;
	top: -3px;
}

input.requiredmissing {
	background-color: #ff8746 !important;
}

div.requiredmissing {
	background-color: #ff8746 !important;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px;
	padding: 5px;
}


input {
/*    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; */
}

.aroundCheckbox {
	padding-right: 10px;
}

.aroundCheckbox.complainable.requiredmissing {
	background-color: #ff8746;

padding-right: 0px;
padding-bottom: 0px;
margin-right: 5px;

/*	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px;

	padding: 5px;
	max-width: 21px;
	height: 20px;
	padding-left: 2px;
	padding-bottom: 4px;
	margin-bottom:-23px;
	margin-top: -6px;
	margin-right: 10px; */

}

select.requiredmissing {
	border: 6px solid #ff8746;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
}

li {
	margin-left: 2rem;
}



.verticalCenter {
	/* vertical align */
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.horizontalCenter {
    margin-left: auto;
    margin-right: auto;
}


/* ################## LONG DESCRIPTION ################## */

.descriptionLayer {
	display: none; 
	position: fixed;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	z-index:3000;
}

.descriptionLayer img {
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;
}

.descriptionLayer.background {
	background-color: #272727;
	opacity: 0.9;
}

.descriptionLayerContainer {
	height: 100%;
	width: 100%;
	overflow-y: auto;
}

.descriptionLayer input[type=button], .descriptionLayer input[type=submit], .descriptionLayer .button {
	background-color: #000;
}


#longDescription {
	text-shadow: #111 0px 0px 10px;
	padding: 15px;
	color: #FFF;
}

@media only screen and (min-width: 850px) {
	#longDescription {
		font-size: 18pt;
		line-height: 130%;
		word-spacing: -5pt;
		letter-spacing: -.05em;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}


#longDescription p {
	margin-top: 0px;
	margin-bottom: 18px;
}

#longDescription div {
	margin-top: 0px;
	margin-bottom: 50px;
}

#longDescription h1, #longDescription h2, #longDescription h3, #longDescription h4, #longDescription h5, #longDescription h6, #longDescription p {
	font-size: inherit;
	background-color: inherit;
	color: inherit;
	padding: inherit;
	/*
	margin-bottom: inherit;
	*/
}

#dialogContent {
/*	min-width: 400px; */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 100px;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 3000;
}

#dialogContent img {
	max-width: 100%;
}


.dialogContent.closebutton {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}


@media only screen and (max-width: 800px) {
	#dialogContent {
		padding-top: 0px;
	}
}

code {
/*	font-family: 'Nitti', monospace;
	font-size: 14px; */
	background-color: rgba(0, 0, 0, .1);
}



.descriptionLayer {
	display: none;
}

.dialog .area {
	box-shadow: 0 10px 30px -10px black;
}

.editProperty {
	
}

.showDataUnit, .showDataUnit div.content {
	background-color: rgba(0,0,0,.3);
/*	margin: -6px;
	margin-left: -6px;
	margin-right: -6px;
	padding: 6px;
	padding-left: 6px;
	padding-right: 6px;*/

	
}

.showDataUnit {
/*	
	margin: -6px;
	margin-left: -6px;
	margin-right: -6px;
	padding: 6px;
	padding-left: 6px;
	padding-right: 6px;
*/
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px;
	
}

.editProperty img.editButton {
}

.dataUnit .buttons {
	margin-left: 5px;
	top: 5px;
	margin-top: -7px;
}

.padding20 {
	padding: 20px;
}

#dialogSpinningWheel img {
	top: 3px;
}


/* Sortable */

#sortable {
	list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.sortableItem {
	cursor: ew-resize;
}

.sortableItemPlaceholder {
	
	width: 200px;
	background-color: rgba(0,0,0,.15);
}


table, th, td {
   border: 1px solid black;
}


/* ####################################################################################################################### */



.splitview {

	width: 900px;
	max-width: 100%;
	padding-top: 60px;
}




.stage_left {

	width: 200px;

}

.stage_left div.wrapper {


	width: 100%;


}

.stage_left div.wrapper div {

	margin: 7px;
	margin-left: 11px;

}

.stage_right {

	width: 700px;
	max-width: 100%;
	min-height: 300px;


/*	padding: 5px; */



}


.stage_right div.content {

	margin: 50px;
	margin-bottom: 70px;

}


.stage_left div.hilight {

	background-color: white;
	color: black;

}

.stage_left div.hilight a {

	color: black;

}

@media only screen and (max-width: 900px) {
	.stage_left {
		width: 700px;
		max-width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.splitview {
		padding-top: 0px;
		width: 700px;
		max-width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	.stage_right div.content {

		margin: 20px;

	}
}




/* ################### Tabs ################### */

.tabs {

	width: 900px;
	max-width: 100%;
	padding-top: 60px;
}

.tab {
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 5px;
	background-color: rgba(255, 255, 255, .5);
	text-align: center;
	cursor: pointer;
}

.tab.selected {
	padding: 15px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: -5px;
}

.tabs + .splitview {

	padding-top: 0px;
}

.tab.wrapper {
/*	margin-left: 1px; */
	margin-right: 1px;
}

.sidetabs div {
	margin-bottom: 1px; 
}

.tab a {
	color: inherit;
}

/* ####################################################################################################################### */

.separator {
	height: 70px;
}

.smallSeparator {
	height: 11px;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px dotted #e95d0f;
}

table.noborder, table.noborder th, table.noborder td {
    border: 0px dotted #e95d0f;
}

td, th {
    padding: 7px;
}

th {
	font-weight: normal;
	text-align: left;
	background-color: rgba(0, 0, 0, .2);
}

tr.incomplete {
	background-color: rgba(255, 0, 0, .2);
}

tr.complete {
	background-color: rgba(0, 255, 0, .2);
}

tr.highlight {
	background-color: #8d471f;
}


span.box {
	line-height: 130%;
	background-color: rgba(0, 0, 0, .3);
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;

	margin: 3px;

	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;

}



/* ####################################################################################################################### */

@media only screen and (max-width: 400px) {
	.above400px {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	.above500px {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	.above600px {
		display: none;
	}
}

@media only screen and (max-width: 700px) {
	.above700px {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.above800px {
		display: none;
	}
}