/* Tiny Scrollbar */
.helperMSG{
	background-color:#EEDD82;
	float:left;
	position:absolute;
	padding:5px;
	border: solid 1px #DAA520;
	border-radius: 5px;
}
#pageConfigs{
	width: 940px;
	height: 40px;
	float: left;
	background-color: #bbb;
	border: 1px solid #777;
	border-radius: 3px;
	padding: 0;
	margin-left: 15px;
	padding: 0;
	font-size: 16px;
}
#pageConfigs li,#pageConfigs font{
	padding: 0;
	margin-top : 8px;
	list-style: none;
	float: left;
	width: auto;
}
#pageConfigs li{
	margin-left: 15px;
}
.modelo{
	width: 160px;
	margin-top : -2px;
}
.espandido{
	margin-top:-20px;
	position:relative;
	z-index:1;
}
.espandido li{
	background-color: #aaa;
	cursor: pointer;
}
.espandido li:hover{
	background-color: #ddd;
}
input.fundoCor,input.imagemFundo{
	width: 60px;
	height: 25px;
	margin-top: -4px;
	margin-left: 5px;
	border: 1px solid #777;
}
input.imagemFundo{
	width: 120px;
}
.expand{
	width: 20px;
	height: 20px;
    float: right;
	background-color: #ccc;
    border-left: 1px solid #777777;
    border-radius: 0 3px 3px 0;
	margin: -1px 15px 0 -22px;
	text-align: center;
	padding-top: 5px;
	cursor: pointer;
}
.expand font{
	float: left;
    margin: -3px 7px !important;
	rotation: 180deg;
	-moz-transform:rotate(180deg);  
    -webkit-transform:rotate(180deg);  
    -o-transform:rotate(180deg);
}
.expasivel{
	float: left;
	height: auto;
	background-color: #999;
	border: 1px solid #777;
	font-size:13px;
	border-radius: 3px;
}
#pageConfigs .modelo.expasivel li{
	width: 100%;
	height: 25px;
	padding: 2px 5px 5px 5px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	display: none;
	margin: 0;
}
#pageConfigs ul.modelo .itemAtivo{
	display: block;
}
.expasivel .itemAtivo{
	display: none;
}
.editandoArea{
	width: 600px;
	height: 400px;
}
.screen .viewport { height: 348px; overflow: hidden; position: relative; }
.screen .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
.screen .scrollbar{ border-radius: 5px; position: absolute; float: right; width: 15px;
	opacity:0.60;
	-moz-opacity: 0.60;
	filter: alpha(opacity=60);
	z-index: 2;
}
.screen .scrollbar:hover{
	opacity:1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}
.screen .track { height: 100%; width:11px; position: relative; padding: 0 1px; }
.screen .thumb { background: #999;border-radius: 5px; height: 20px; width: 9px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 3px; }
.screen .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 9px; }
.screen .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

#corpo ul{
	clear: both;
}
body{
	/*overflow-x: hidden;*/
}
.recolhe{
	z-index: 5000;
}
#conteudo{
	width: 100%;
	height: auto;
	float: left;
}
#device1 .screen .scrollbar{
	margin-left: 235px;
}
#device1{
	float: left;
	margin-left: 0;
	background-image: url('/application/third_party/xsystem/images/smart_phone_icon.png');
	height: 469px;
    width: 284px;
}
#device1  .screen{
	float: left;
    margin: 45px 0 0 16px !important;
    width: 248px;
	height: 348px;
	border: 2px solid #777;
	border-radius: 2px;
	background-color: #fff;
}
/*
.screen::-webkit-scrollbar {
	width: 8px;
}
.screen::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
.screen::-webkit-scrollbar-track {
	background:none;
	border: skinny plain lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
.screen::-webkit-scrollbar-thumb {
	background:#999;
	border: skinny plain gray;
	border-radius:10px;
}
.screen::-webkit-scrollbar-thumb:hover {
	background: #999;
}
#device1 .normalMobile{
	margin: 47px 0 0 18px !important;
	width: 250px;
	height: 349px;
}*/

					#addElementos{
						width: 35px;
						height: 90px;
						float: left;
						background-color: #bbb;
						border: 1px solid #777;
						border-radius: 5px;
						margin: 0 15px 10px 15px;
						position: relative;
						padding: 0;
					}	
					#estrutural{
						display: none;
					}
					#addElementos li{
						width: 20px;
						height: 20px;
						float: left;
						margin: 2px 8px;
						font-size: 22px;
						list-style: none;
						cursor: pointer;
						padding: 0 1px 6px 3px;
					}
					#addElementos li:hover{
						background-color: #eee;
						border: 1px solid #ccc;
						border-radius: 2px;
						margin: 1px 6px;
					}
					#addElementos li.texto{
						font-family: "Times New Roman", Times, serif;
						color: #009;
					}
					#addElementos li.imagem{
						width: 20px;
						height: 20px;
						background-image: url(../images/imageIcon.jpg);
						padding: 0;
					}
					#addElementos li.imagem:hover{
						border: none;
						background-position: 20px 0;
					}
					/*---Fim MEnu insert----*/
					#footer{
						width: 101%;
						height: 50px;
						float: left;
						background-color: #bbb;
						border-top: 1px solid #777;
						position: fixed;
						bottom: 0;
						z-index: 2;
						margin-left: -28px;
					}
					#footer .center{
						width: 80px;
						margin: auto;
					}
					#footer #salvar{
						width: 80px;
						height: 30px;
						float: left;
						margin-top: 10px;
						background-color: #ddd;
						border: 1px solid #ccc;
						border-radius: 5px;
						color: #999;
						cursor: pointer;
					}
					#footer #salvar:hover{
						border-color: #999;
					}
					#corpo{
						float: left;
						width: 100%;
						height: auto;
						padding-bottom: 80px;
					}					
					
					/*---MEnu de edicao----*/
					.resizeble{
                        border: 1px dashed #ccc;
                    }
                    .movimentar{
                        cursor: move;
                    }
                    .menuEdicao {
						float: left;						
						font-size: 12px;						
						height: 20px;						
						margin: -20px -250px 0 0;						
						position: absolute;						
						width: 100%;						
						z-index: 1;					
					}										
                    .menuEdicao .itens{
                        float: left;
                        width: 193px;
                        height: 20px;
                        border-radius: 5px;
                        background-color: #eee;
                        padding: 5px 10px;
                        border: 1px solid #ddd;
                        cursor: default;
                    }
                    .menuEdicao .itens li{
                        width: 20px;
                        height: 20px;
                        float: left;
                        list-style: none;
                        cursor: pointer;
                        margin-right: 5px;						margin-left:0;
                    }
                    .menuEdicao .itens .seletor, .menuEdicao .itens .seletorBack{
                        width: 18px;
                        height: 18px;
                        float: left;
                        border: 1px solid #ddd;
						position: relative;
						z-index: 1;
                    }
					.menuEdicao li.textoSize{
						width: 42px;
						margin-right: -6px;
						color: #888;
					}
					.menuEdicao li.textoSize input{
						width: 20px;
						height: 16px;
						padding: 3px;
					}
					.semFundo{
						background-image: url(../images/semFundo.gif);
					}
					.menuEdicao .itens .seletorBack{
						margin-top: 5px;
						margin-left: -15px;
						z-index: 0;
					}
					.formUpload input.novaImagem{
						width: 250px;
						height: 25px;
						background-color: #ddd;
						border: 1px solid #999;
						border-radius: 3px;
						margin-left: 0;
					}
                    .menuEdicao .itens .config{
                        background-image: url('../images/engrenagem.png');
                        background-size: 100%; 
                    }
                    .menuEdicao input.coresRapidas{
                        width: 50px;
                        height: 20px;
                        margin-top: 10px;
                        outline: 0;
                        border: solid 1px #ddd;
                        display: none;
						visibility: hidden;
                    }
                    .menuEdicao input.coresRapidas:focus{
                        outline: solid 1px aqua;
                    }
					.menuEdicao li.fonte{
						font-size: 18px;
						font-family: "Times New Roman", Times, serif;
						margin-left: 7px;
						width: 80px;
					}
					li.fonte .fontes{
						  float: left;
						  margin-top: 1px;
						  width: 80px;
					}
					.menuEdicao li.fonte ul{
						float: left;
						width: 60px;
						height: 20px;
						font-size: 12px;
						margin-left: 0;
						padding: 0;
					}
					.menuEdicao li.fonte ul li{
						width: 100%;
						float: left;
						font-size: 18px;
						background-color: #eee;
						padding: 5px;
					}
					.imageEditItem{
						-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
						-moz-box-sizing: border-box;    /* Firefox, other Gecko */
						box-sizing: border-box;         /* Opera/IE 8+ */
					}
					.imageEditItem .menuEdicao .itens{
						width: auto;
						padding: 3px;
						opacity:0.65;
						-moz-opacity: 0.65;
						filter: alpha(opacity=65);
					}
					.imageEditItem .menuEdicao .itens:hover{
						opacity:1;
						-moz-opacity: 1;
						filter: alpha(opacity=100);
					}
					.imageEditItem .menuEdicao .itens .config{
						margin-right: 0;
					}
					.imageEditItem .progress.bar{
						width: 120px;
						height: 10px;
						float: left;
					}
					.imageEditItem .progress.porcent{
						width: 20px;
						height: auto;
						float: left;
					}
					.imageEditItem .progress{
						display: none;
					}
					textarea{
						background: #ffffff;
						resize: none;
						border: none;
						/*overflow: hidden;*/
						/*width: 100%;
						height: 100%;*/
						border:1px solid #b1b1b1;
					}
					/*deletable*/
					
					.deletableItem.selected{
						border: solid 1px aqua;
					}
					.formUpload{
						width: auto;
						height: auto;
						float: left;
						margin: 20px 5px 20px 20px;
					}
					.formUpload span{
						width: 100%;
						height: auto;
						float: left;
						margin-bottom: 10px;
					}
					.formUpload .esquerda{
						width: 327px;
						float: left;
					}
					.formUpload span.linha{
						width: 100%;
						float: left;
					}
					.formUpload span.preview{
						float: right;
						width: 120px;
					}
					.formUpload input{
						margin-left: 13px;
						color: #999;
						float: left;
					}
					.formUpload .urlInput{
						width: 200px;
						height: 25px;
						background-color: #fff;
						border: 1px solid #999;
						border-radius: 3px;
					}
					.formUpload label{
						width: 100px;
						float: left;
					}
					.formUpload .uploadFile{
						width: 200px;
						height: 30px;
						background-color: #ddd;
						color: #555;
						border: 2px solid #999;
						border-radius: 5px;
						cursor: pointer;
					}
					.formUpload .uploadFile:hover{
						background-color: #eee;
					}
					.formUpload .arquivo{
						display: none;
					}
					.formUpload .imageDisplay{
						height: 80px;
						width: 100px;
						margin-top: -5px;
					}
					#conteudoGaleria .imagemMini{
						width: 98px;
						height: 82px;
						float: left;
						text-align: center;
						margin: 0 5px 5px 0;
					}
					#conteudoGaleria .imagemMini img{
						max-width: 98px;
						height: 82px;
						margin: auto;
						float: none;
						cursor: pointer;
						position: relative;
						z-index: 0;
					}
					.imagemMini .loading{
						width: 98px;
						height: 82px;
						float: left;
						background: #fff url('../images/loading.gif') center no-repeat;
						background-position: 26px 26px;
						position: relative;
						z-index:1;
						margin-bottom: -82px;
						padding: 3px;
						opacity:0.45;
						-moz-opacity: 0.45;
						filter: alpha(opacity=45);
					}
					#conteudoGaleria .imagemMini img:hover, #conteudoGaleria .imagemMini img.actived{
						-webkit-box-shadow: 0px 0px 4px 0px #000000; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
						box-shadow: 0px 0px 4px 0px #000000; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
					}
					/*jAlert*/
					.jAlertBack{
						width: 100%;
						height: 100%;
						float: left;
						background-image: url(../images/fundo.png);
						position: fixed;
						z-index: 9999;
						top: 0;
						left: 0;
					}
					.jContent{
						float: left;
						cursor: pointer;
						background-color: #fff;
						border: 2px solid #999;
						border-radius: 8px;
						color: #999;
						padding: 10px;
					}
					.jContent .blob{
						width: 35px;
						height: 35px;
						font-size: 30px;
						color: #aaa;
						font-family: 'Bubblegum Sans', cursive, "Comic Sans MS", cursive;
						background-color: #efefef;
						border: 2px solid #999;
						border-radius: 19px;
						padding: 0;
						text-align: center;
						line-height: 32px;
						float: right;
						margin: -34px -31px -8px 0;
						position: relative;
						z-index: 1;
					}
					.jContent .btNs{
						width: 100%;
						height: auto;
						float: left;
						text-align: center;
					}
					.jContent .confirmButton:hover{
						background-color: #eee;
					}
					.jContent .confirmButton{
						width: auto;
						height: auto;
						padding: 10px;
						background-color: #ddd;
						color: #555;
						border: 2px solid #999;
						border-radius: 5px;
						cursor: pointer;
						text-align: center;
					}

					
			/*Templates*/
			#templatesDemo{
				display: none;
			}
			span.emailFormularioContato{
				width: 230px;
				height: auto;
				float: left;
				margin-left: 20px;
				display: none;
			}
			span.emailFormularioContato font{
				font-size: 21px;
				color: #999;
				float: left;
				margin-bottom: 10px;
			}
			input.emailFormularioContato{
				width: 100%;
				height: 35px;
				float: left;
				background-color: #eee;
				border: 1px solid #999;
				border-radius: 5px;
				color: #999;
			}