/* =============================================================================
   Polices
   ========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);

@keyframes QIhighlight {
	from {    box-shadow: 0px 0px 10px transparent;  }
	to {    box-shadow: 0px 0px 10px orange;  }
}
@-moz-keyframes QIhighlight {
	from {    box-shadow: 0px 0px 10px transparent;  }
	to {    box-shadow: 0px 0px 10px orange;  }
}
@-webkit-keyframes highlight {
	from {    box-shadow: 0px 0px 10px transparent;  }
	to {    box-shadow: 0px 0px 10px orange;  }
}

#QIall{font-family:'Ubuntu Mono';font-size:0.8em;}
#QIlogs  {font-family:'Verdana',sans-serif;}

#QIall #QImenu{text-transform:lowercase;}

#logsBox {font-size:75%;}
/* ===================
    JQUERY
   =================== */
[data-format="date"] {position:relative;z-index:1000 !important;}
/* ===================
    Interface
   =================== */

#QIall,#QIlogs{color:white;}
#QIall{font-size:0.9em;}
#QIlogs{font-size:0.8em;max-height:100%;overflow:auto;position:fixed;top:0px;right:0px;z-index:10000;width:30%;}
#QIlogs .log {font-weight:bold;opacity:0.9;background:#000;padding:0;border:2px solid white;margin:0.5em;border-radius:0.2em;}
#QIlogs .log div div{padding:0.1em 1em 0.1em 1em;}
#QIall{
	-moz-box-shadow: -0.5em 0em  0.5em  #000;
	-webkit-box-shadow: -0.5em 0em  0.5em  #000;
	box-shadow: -0.5em 0em  0.5em  #000;
}
#QIlogs .log {
	-moz-box-shadow: 0.1em 0.1em  0.5em  #000;
	-webkit-box-shadow: 0.1em 0.1em 0.5em #000;
	box-shadow: 0.1em 0.1em 0.5em #000;
}
#QIlogs .remover{float:right;display:block;width:1em;height:1em;text-align:center;background:#000;color:white;padding:0.1em;}
#QIall{opacity:1;background:#000;z-index:10000;position:fixed;bottom:0px;width:100%;max-height:100%;overflow:auto;}

#QIFilesToolsButton{margin:1em;padding:1em 1em 1em 1em;}

#QIall #QImenu{background:#333;}
#QIbuttonMe, #QIbuttonRefresh, #QIbuttonLogout{float:right;}
#QIall a {color:yellow;}
#QIlogs button, #QIall .button, #QIall button,#QIall input,#QIall textarea{display:inline-block;}
#QIall input,#QIall textarea,#QItoolBar .buttonGroup{border:2px solid #333;background-color:#333;padding:2px;line-height: 1em; color:white;margin:2px;text-decoration:none;border-radius:3px;}

#QIall .button,#QIall button{border:2px solid #333;background-color:#333;padding:2px;line-height: 1em; color:white;margin:2px;text-decoration:none;border-radius:3px;}
#QIall button:hover, #QIall .button:hover{
	transition: all 0.25s ease-in-out 0s;
	box-shadow: 0px 0px 1em orange inset;
	border-color:orange;
}

#QIall button.active, #QIall .active {
	box-shadow: 0px 0px 1em yellow inset;
	background-color:yellow;
	border-color:yellow;
	color:#666;
}
#QIall button.focused, #QIall .focused {background-color:grey;		border-color:yellow;	text-decoration:blink;}
 .loading, #QIall button.loading, #QIall .loading {color:#000;background-image:url('img/loadingBckgrndLight.gif') !important;}

#QIall textarea.large{width:100%;}
#QIall input[type='text'],#QIall input[type='file'],#QIall textarea{border:2px solid #666;background:#fff;color:#666;}

#QIall input.jsonWriter{display:none;width:30%;background:yellow;}

#QIall textarea{height:6em;}
#QIall label {font-weight:bold;}
#QIall #QIsub,#QIall #QItoolBar{clear:both;color:white;border-top:1px solid #666;}
#QItoolBar .buttonGroup {padding:0px;display:inline-block;white-space:nowrap;}
#QIall #QIsub  label {display:inline-block;}
#QIall td{text-align:left;}
#QIall table { border-collapse: collapse; border-spacing: 0; width:100%;}
#QIall tr #QIall td { vertical-align: middle;text-align:left;padding:0 0 0 0;}
#QIall table,#QIall td	{border:1px solid yellow;}

#QIall .box, #QIall #QIsub  ul{
	padding:0.1em;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	margin:0.1em;
}
#QIall #QIsub  ul{
	margin:0 0 0 0;
	list-style-type:none;
	column-rule: 2px solid #333; -webkit-column-rule: 2px solid #333; -moz-column-rule: 2px solid #333;
	column-gap: 1em;	-webkit-column-gap: 1em;	-moz-column-gap: 1em;
}

@media only screen and (min-width: 800px) {	#QIall #QIsub  ul{column-count: 2;	-webkit-column-count: 2;	-moz-column-count: 2;}	}
@media only screen and (min-width: 1160px) {	#QIall #QIsub  ul{column-count: 3;	-webkit-column-count: 3;	-moz-column-count: 3;}	}

#QIall ul li {
	display:block;
   column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
    -webkit-break-inside: avoid-column;
    -moz-break-inside: avoid-column;
}
body #QITools{
	visibility:hidden;
}
body.edit #QITools{
	visibility:normal;
}
#QIFilesTools,#QIAttributesTools{
	max-width:500px;
	display:block;padding:1em;background:#000;z-index:1010;position:fixed;top:0.5em;max-height:100%;overflow:auto;border:2px solid white;
	z-index:1005;
	-moz-box-shadow: 0.1em 0.1em  0.5em  #000;
	-webkit-box-shadow: 0.1em 0.1em 0.5em #000;
	box-shadow: 0.1em 0.1em 0.5em #000;
}
#QIFilesTools{left:0.5em;}
#QIAttributesTools{right:0.5em;width:400px;}
#QIall .legend{display:block;text-align:center;color:yellow;font-weight:bold;text-transform:uppercase;border-bottom:3px solid yellow;}
#QIall .legend	{text-align:right;}
#QIall .toolBox .menu {background:#666;padding:0.2em;text-align:center;border-radius:0.2em;}

#QIall ul li {list-style-type:none;}
#QIall   ul li label{display:inline-block;}

#QIall ul  li .key,#QIall ul  li label{display:inline-block;text-align:right;min-width:5em;border-right:1px solid grey;}

#QIall ul li .value{margin-left:2px;padding-left:2px;text-align:left;}

#QImain ul li span.buttons{display:block;text-align:right;}
#QImain ul li input,#QImain li textarea{width:70%;}

#QImain ul li.jsonWriterKeyValue{display:inline-block;}

#QIall #QIhider {clear:both;cursor:pointer;display:block;background:green;color:white;font-size:150%;position:fixed;left:-0.5em;bottom:-0.5em;padding:0.5em;border-none;border-radius:0 2em 0 0 ;}
#QIall #QImenu{padding-left:2.5em;}

html, iframe, object{border:none;overflow:auto;}
.editable iframe{width:100%;min-height:400px;}
img,object{max-width:100%;}
img{display:inline-block;}
mark, .mark{background-color:yellow;}
.editable mark,.editable  .mark{display:none;}
[contenteditable=true] mark, [contenteditable=true] .mark {display:block;}
object[data-loading] {display:inline-block;border:2px solid transparent;}
body.edit [contenteditable=true] object  {min-height:1em;min-width:1em;border:2px solid orange;border-top:10px solid orange;border-radius:10px;}
body.edit [contenteditable=true] img{
	min-height:1em;min-width:1em;border:2px solid blue;border-top:10px solid blue;
}
body.edit [data-selected=true]{
	border-color:orange !important;
	box-shadow: 0px 0px 10px orange;
	animation-duration: 1s;
	animation-name: QIhighlight;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-moz-animation-duration: 1s;
	-moz-animation-name: QIhighlight;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: QIhighlight;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}
body.edit img[data-selected=true]{
	outline: thin dotted;
}


[data-editing]:empty{display:none;}
[data-file]:empty{display:none;}
input[type='text'][data-editing]:empty{display:inline-block;}

/*[contenteditable=true] {opacity:0.7;}*/
[contenteditable=true], .editable {border:2px solid transparent;}
[contenteditable="true"]:hover,
[contenteditable="true"]:active,
[contenteditable="true"]:focus{
	border:none;
	outline:none;
	opacity:1;
    }
body.edit [contenteditable=true], body.edit [data-file]{display:block;min-height:1em;border:2px solid yellow !important;}
body.edit [data-label]:empty:before { content: attr(data-label)"...";}
body.edit .not-edit{display:none;}

.modified, body.edit [contenteditable=true].modified{min-height:1em;border:2px solid orange !important;}
.droppable, body.edit [contenteditable=true].droppable{border-color:green;}

body.edit [contenteditable=true] .loading{border-color:grey;}

.smooth {opacity:0.5;}
.right,.droite{display:block;float:right;margin-left:1em;margin-bottom:1em;}
.left,.gauche{display:block;float:left;margin-right:1em;margin-bottom:1em;}
.clear{clear:both;}
.justify{text-align:justify;}
.center,.centre{display:block;float:none;text-align:center;margin-left:auto;margin-right:auto;}
.focused{text-decoration:blink;}
.blink{text-decoration:blink;}
.fixed{position:fixed;}
.light{opacity:0.5;}
.pointer{cursor:pointer;}
.shadow{
	-webkit-box-shadow:0 5px 10px #aaa;
	   -moz-box-shadow:0 5px 10px #aaa;
	        box-shadow:0 5px 10px #aaa;}

[data-loading].block,.block{display:block;}
.inline{display:inline;}

.round, .rounded{border-radius:1em;-webkit-border-radius:1em;-moz-border-radius:1em;}

.columns-2, .col2{
	column-count: 2;	-webkit-column-count: 2;	-moz-column-count: 2;
	column-gap: 2em;	-webkit-column-gap: 2em;	-moz-column-gap: 2em;
}
.columns-3, .col3{
	column-count: 3;	-webkit-column-count: 3;	-moz-column-count: 3;
	column-gap: 2em;	-webkit-column-gap: 2em;	-moz-column-gap: 2em;
}

ul.columns,ol.columns{list-style-type:none;}
.columns{column-gap: 2em;	-webkit-column-gap: 2em;	-moz-column-gap: 2em;}
.columns li{display:inline-block;width:100%;
   column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
    -webkit-break-inside: avoid-column;
    -moz-break-inside: avoid-column;
}


@media only screen and (min-width: 640px) {	.columns{column-count: 2;	-webkit-column-count: 2;	-moz-column-count: 2;}	}
@media only screen and (min-width: 1160px) {	.columns{column-count: 3;	-webkit-column-count: 3;	-moz-column-count: 3;}	}

.armenian {list-style-type:armenian;}
.circle {list-style-type:circle;}
.cjk-ideographic {list-style-type:cjk-ideographic;}
.decimal {list-style-type:decimal;}
.decimal-leading-zero {list-style-type:decimal-leading-zero;}
.disc {list-style-type:disc;}
.georgian {list-style-type:georgian;}
.hebrew {list-style-type:hebrew;}
.hiragana {list-style-type:hiragana;}
.hiragana-iroha {list-style-type:hiragana-iroha;}
.inherit {list-style-type:inherit;}
.katakana {list-style-type:katakana;}
.katakana-iroha {list-style-type:katakana-iroha;}
.lower-alpha {list-style-type:lower-alpha;}
.lower-greek {list-style-type:lower-greek;}
.lower-latin {list-style-type:lower-latin;}
.lower-roman {list-style-type:lower-roman;}
.none {list-style-type:none;}
.square {list-style-type:square;}
.upper-alpha {list-style-type:upper-alpha;}
.upper-latin {list-style-type:upper-latin;}
.upper-roman {list-style-type:upper-roman;}

.big{font-size:130%;}
.small{font-size:70%;}
.bordered{border:5px solid #ccc;}
.padded {padding:1em;}
.marged {margin:1em;}
.result .body{color:#ddd;}


textarea.ok{background-color:#ddffdd;}
textarea.error{background-color:#ffdddd;}

.error:before{ content: "\2620  ";color:orange;}

.warning:before{ content: "\26A0  ";color:orange;}
.conf:before, .ok:before{content:"\2713  ";color:green;}
.info:before{content:"\2605  ";color:yellow;}
.help:before{content:"\2139  ";color:blue;}
.status-false:before, .status-0:before, .unknown-status:before 	{content:"☒";}
.status-1:before, .status-6:before, .trash-status:before				{content:"♻";color:red;text-decoration:blink;}
.status-2:before, .draft-status:before				{content:"⚒";}
.status-4:before, .private-status:before			{content:"☢";}
.status-5:before, .public-status:before				{content:"⚑";color:green;}
.status-7:before, .hidden-status:before				{content:"⚐";color:green;}

.editing-only {display:none;}
#QIlogs .ok,#QIlogs .ok:before{background:green;color:white;}
#QIlogs .error,#QIlogs .error:before{color:orange;text-transform:uppercase;text-decoration:blink;}

input.sendError,textarea.sendError{border:2px solid orange;content: "\26A0  ";}
input.sendConf,textarea.sendConf{border:2px solid green;content:"\2713  ";}

body.edit .editing-only {display:block;}


#QIall input.jsonWriter{display:none;width:70%;background:yellow;}
#QIall input.jsonWriterObj{background:green;color:white;}
#QIall input.jsonWriterArray{background:yellow;}
#QIall input.jsonWriterSelect{background:orange;}
#QIall .jsonWriterKey{min-width:5em;}
#QIall .jsonWriterKeyValue{}
#QIall input.jsonWriterRange{width:2em;margin-right:1em;}
#QIall .jsonWriterSlider{width:200px;display:inline-block;}

input[data-label]:empty:after { content: attr(data-label)"...";color:#666;font-family:'Ubuntu Mono';}

/* ===============
    Maximal Width
   =============== */

	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
		margin:0 auto;
	}
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
[data-loading] { content: ""; display: table; }
[data-loading] { clear: both; }
[data-loading] { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
	#QIall,#QIlogs {display:none !important;}
}