.ui-widget-content {
	width: 150px;
	height: 150px;
	padding: 0.5em;
}

/* set defaults here to be inherited */
html, body { 				 
	height: 1450px;
	width: 100%;
	margin: 0;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-size: 1.0em;
	font-weight: normal;
	background-color: white;

	/* 	preventing annoying blue overlay	*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
}

#layout	{
	display: block;
	height: 1400px;
	position: relative;
}
#layout > .ui-resizable-handle {
	display: none!important;
} /* effectively disables resizable for layout only */
.contentBox, .contentBoxEditor {
	border: 1px solid lightgrey;
	display: inline-block;
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: absolute;
}
.contentBox img {
	height: 100%;
	width: 100%;
}
.hidden {
	display: none!important;
}
.contentBoxz:hover {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	background-color: grey;
	transition: transform 2s;
	-webkit-transition: -webkit-transform 2s;
}
div.codetext {
    font-family: monospace, Courier, sans-serif;
}
.ui-state-disabled {
	opacity: 1;
}

/*===============================================================================================================*/
/*                                                 EDITOR                                                        */				
/*===============================================================================================================*/
#editor	{
	background-color: #1a7b92;
	font-family: 'Ubuntu', Arial, sans-serif;
	padding: 1em;
	position: fixed;
	float: right;
	top: 0;
	right: 0;
	height: auto;
	z-index: 5000;
	border-style: none;
	color: black;
	font-size: 14px;
	width: 22em;
}
#editor.size1 {
	font-size: 10px;
}
#editor.size2 {
	font-size: 12px;
}
#editor.size3 {
	font-size: 14px;
}
#editor.size4 {
	font-size: 16px;
}
#editor.size5 {
	font-size: 17px;
}
#editor.size6 {
	font-size: 19px;
}
#editor.size7 {
	font-size: 21px;
}
#editor.size8 {
	font-size: 23px;
}
#editor.size9 {
	font-size: 25px;
}
#editor.size10{
	font-size: 27px;
}
#editor table {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
}
#editor textarea {
	color: black;
}
#editUserStylesheet textarea {
	font: 0.8em Courier;
}
#editor td:nth-child(1) { 
	background-color: lightgrey; 		
	overflow: hidden;
	width: 30%;
}
#editor td:nth-child(2){
	background-color: #EEEEEE; 		
	width: 70%;
}
#editor td {
    padding: 0 2px 0 2px;
}
#editor button {
	font-family: 'Ubuntu', Arial, sans-serif;
	font-size: 0.9em;
	padding: 1px 2px 3px 2px;
	min-width: 5em;
	margin: 3px 0 2px 0;
	border-radius: 3px;
	color: black;
}
#editor td div		{
	white-space: nowrap;      /* CSS3 */   
	overflow: hidden;
	text-overflow: ellipsis;
	/*width: 100px;*/
				}
#editorClose {
    top: 0;
    height: 15px;
    position: absolute;
    right: 0;
    width: 15px;
}
#editorHandle {
	height: 10px;
	/* width: 50px; */
	background-color: lightgrey;
}
.wordwrap { 
	white-space: pre-wrap;      /* CSS3 */   
	white-space: -moz-pre-wrap; /* Firefox */    
	white-space: -pre-wrap;     /* Opera less than 7 */   
	white-space: -o-pre-wrap;   /* Opera 7 */    
	word-wrap: break-word;      /* IE */
}
#editTextContent {
	border: none;
	background-color: inherit;
	z-index: 5000;
}
#editTextContent textarea {
    font: 1em Arial,sans-serif;
    width: 98%;
}
.smallEditor {
	background-color: inherit;
	color: white;
	padding-top: 3px;
}
.smallEditor label {
    font-size: inherit;
    display: inline-block;
    width: 25%;
}
.smallEditor input {
    font-size: inherit;
    width: 75%;
}
.smallEditor textarea {
    font-size: inherit;
    width: 95%;
}

#editor .smallEditor .parametertable {
	width: 100%;
    color: black;
}
#editor .smallEditor .parametertable td:nth-child(1) {
	font-size: inherit;
	width: 30%;
}
#editor .smallEditor .parametertable td:nth-child(2) {
	font-size: inherit;
	width: 70%;
}
#editor .smallEditor .parametertable td:nth-child(2) input {
    border-style: none;
    font-size: inherit;
    width: 100%;
}
#editor .smallEditor .parametertable td:nth-child(2) textarea {
    border-style: none;
    font-size: inherit;
    width: 100%;
}
#editor #info, #editor .csstable {
    margin-top: 0;
}
#editor .csstable {
    margin-bottom: 0.2em;
}

audio {z-index: 100;}
#fontlist  {
	background-color: #392540;
	color: white;
	font-size: 1em;
	height: 100%;
	overflow: auto;
	padding: 5px;
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	z-index: 5000;
}
#fontlist ul  {
	list-style: none;
	margin: 0;
	padding: 0;
}
#fontlist li.commercialFont { color: yellow;}
#fontlist li:hover { color: pink; }					
#fontlistClose {
	position: fixed;
	top: 0;
	left: 220px;
	height: 15px;
	width: 15px;
}
#fontfamilySelectz {
						float: right;
						height: 10px;
						width: 10px;
}
#editor td img {
	float: right;
	height: 10px;
	width: 10px;
}
.ui-selected {
	border-color: purple!important;
	border-width: 1px!important;
	border-style: solid!important;
}
.selectedz.locked {
	border-color: red!important;
	border-width: 1px!important;
	border-style: solid!important;
}
#editor tr {
	line-height: 1.2em;
}
.sectionBar td {
	background-color:#545454!important;
	color:white;
}
.sectionBar.open td {
	font-style: italic;
}
#editor .infoLabel {
	width: 15%;
	display: inline-block;
	color: lightgrey;
    margin: 0 0 5px 0;
}

/*===============================================================================================================*/
/*                                                   PRINT                                                       */	
/*===============================================================================================================*/
@media print {
	body,html	{
		background-color: white!important;
	}
	#layout {
		-webkit-print-color-adjust: exact;
	}
}
/* these javascript items appear on print preview if not hidden here */
.colorpicker {display:none}
#sm2-container {display:none}
/*===============================================================================================================*/
/*                                         FRAME TO SHOW SELECTIONS                                              */	
/*===============================================================================================================*/
#frameCornertlh,#frameCornertrh,#frameCornerblh,#frameCornerbrh {
	height: 1px;
	width: 100%;
}
#frameCornertlv,#frameCornertrv,#frameCornerblv,#frameCornerbrv {
	height: 100%;
	width: 1px;
}
.frameCorner {
	border-style: none;
	background-color: orange;
	display: inline-block;
	position: absolute;
	z-index: 1000;
}
.frameCorner.locked {
	background-color: red!important;
}
/*===============================================================================================================*/
/*                                         IE<9 compatibility                                                    */	
/*===============================================================================================================*/
.pie {
	/* border-radius: 15px; */
	behavior: url(css/pie/PIE.htc);
}
/*===============================================================================================================*/
/*                                         basic pages                                                           */	
/*===============================================================================================================*/
table.general {
	font-family: Arial, sans-serif;
	font-size: 1em;
}
table.general td {
	padding: 2px 5px 2px 5px;
}
table.general  tr.section-heading {
	height: 2em;
}
table.general  tr.section-heading td:first-child {
	background-color: grey;
	color: white;
}
textarea.codetext {
	width: 100%;
	height: 100%;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: scroll;
	font-family: monospace, sans-serif;
	font-size: 10pt;
}
button.submitcode {
	position: relative;
	top: -48px;
	float: right;
	right: 15px;
}