body{outline:none !important;font:13px/1.22 Roboto, sans-serif;*font-size:small;*font:x-small;color:#555;line-height:138.5%;background-color:#f3f3f3;margin:0;padding:0px;}/* 13pt */
h1{font-size:174%;}/* 23pt */
h2{font-size:138.5%;line-height:115%;margin:0 0 .2em 0;font-weight:normal;}/* 18pt */
h3{font-size:100%;margin:0 0 .2em 0;font-weight:bold;}/* 18pt */
h4{font-weight:bold;}/* 13pt */
h5{font-size:77%;}/* 10pt */
h6{font-size:77%;font-style: italic;}/* 10pt */
p,fieldset{margin:0 0 1.5em 0;}
a{color: #2C548D;}
a:hover{}
em {font-style:italic;}
strong,b{font-weight:bold;}
blockquote{margin:1em;}
ol{margin-left:3em;}
ul{margin-left:2.5em;}
ol li {list-style: none outside;}
ul li {list-style: none outside;}
table {font-size:inherit;font-family:Roboto,sans-serif;}



#iFrameWrapper{
		position:absolute;
		left:0px;
		right:0px;
		top:26px;
		bottom:0px;

	
}

#imageToolIframe{
	
		/*border:1px solid blue;*/

		display:block;
		position:absolute;
		left:0px;
		right:0px;
		top:0px;
		bottom:0px;
}

.imageToolContainer{


}

.imageToolButtonBar {
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
	background:#eeeeee;
    height:50px;
	border-bottom:1px solid silver;
    margin:0px;
    padding:0px;

	vertical-align: middle;
	z-index: 99999;

}


#imageViewPort{
    position: fixed;
    top:51px;
    left:0px;
    right:320px;
	overflow: auto;
	bottom:0px;

	margin: 0px;
	padding: 0px;

	background:#f3f3f3;
}

#toolBar{
    position: fixed;
    top:48px;
    right:0px;
    width:300px;
    bottom:0px;
	background:#fff;
	padding:20px 10px;
	border-left:1px solid silver;
    overflow:auto;

}

#exif { clear:both; height:2em; }



#showScaleSlider{
	margin:10px auto;
	width:250px; 
	height:20px;
}

#compressionValue{
    margin:10px auto;
    width:250px; 
    height:20px;
}
#compressionValue td{
    border:0px solid silver;
    padding:0px;    
}

#compressionValue{
    margin:10px auto;
    width:250px; 
    height:20px;
}

#saveAsDialog{
	width:350px;
	height:170px;	
}

#saveAsDiaTable{
	margin:auto;
	margin-top:10px;
		
}

#saveAsDiaTable td{
	padding:8px;

}
#saveAsFileExt{
	font-weight:bold;	
}
#cropDim{
	display:none;
}

/* part of the widget: drag handle styles */
.imageDragger {
	/* required: */
	position:absolute;
	/* optional: */
	cursor:move;
	z-index:999;
	background:#fff;
	border:2px dotted #000;
	min-width:50px;
	min-height:50px;

}

#cropSizeBox{
	float:left;
	border:1px solid silver;
	opacity: 1;
	min-width:46px;
	height:20px;
	color:black;
	white-space:nowrap;
}

.textInputClass{
	border:1px solid silver;
	width:46px;
	margin:2px;
    text-align:center;
	height:23px;
}


.baseImageDim{
	width:45px;
	margin:2px;
	height:23px;
	overflow:hidden;
	display:inline-block;
	padding-top:4px;
}


#doCropButton{
	display:none;
}




#filtersUndoDiv{
	text-align:left;
}

#filterListBox{
	width:90%;
    margin-left:auto;
    margin-right:auto;
    border:0px red solid;
}

#filterListDiv{
    border:1px solid #eeeeee;
    height:100px;
	overflow-y:auto;
	height:120px;
	overflow-x:hidden;

}

        
.loader{
      	background:url('/html/js/dotcms/dijit/image/loading.gif') no-repeat center center;
}



#hsbButton {
    transition: .5s ease;
}

#hsbButton:hover{
    box-shadow: 0 0 0 1px rgba(0, 103, 244, 0.5);;
    transition: .5s ease;
}



.filterListItem{
	text-align:left;
	cursor: pointer;
	padding:2px;
	padding-right:20px;
	min-width:50px;
	display:inline-block;
	float:left;
	margin:5px;
	border:1px solid silver;	
	background:url('/html/images/icons/minus-small-circle.png') no-repeat right center ;
}


#controlTable{
	width:100%;
}

        
#controlTable td{
	border:0px solid silver;
	padding:3px 0;
	text-align:center;
	white-space: nowrap;
	vertical-align: middle;
}
#controlTable th{
    padding:3px;    
    padding-left:10px;
    text-align:left;
    white-space: nowrap;

}
#controlTable .leftCol{
  text-align: right;  
  width:30%;
}

#controlTable .rightCol{
  text-align: left;  
}

#controlTable .spacerDiv{
    display:inline-block;
    width:50px;
    text-align: center;
    
}
#controlTable .compressTd{
    display:none;
}

#showScaleSlider td{
	border:0px solid silver;
	padding:0px;	
}

#hsbDialog{
	width:400px;
	height:300px;	
}

#hsbTable{
	border:1px solid silver;	
	width:90%
}
#hsbTable td{
	padding:4px;
	border:1px solid silver;
	height:20px;
	vertical-align: top;
}
#hsbTable .colorSlider td{
	padding:0px;
	border:0px solid silver;
}

.colorSlider{
	width:200px;	
}

#compressTd{
    display:none;
}

#compressionValue{
    width:100%;
}

.smallerThan {
   animation-duration: 1000ms;
   animation-name: smallerThanAnim;
   animation-iteration-count: 1;

}
@keyframes smallerThanAnim {
   from {
     text-shadow: 0 0 10px green;
   }
   to {
    text-shadow: 0 0 0px green;
   }
 }

.biggerThan {
   animation-duration: 1000ms;
   animation-name: biggerThanAnim;
   animation-iteration-count: 1;

}
@keyframes biggerThanAnim {
   from {
     text-shadow: 0 0 10px red;
   }
   to {
     text-shadow: 0 0 0px red;
   }
 }


.thumbnailDiv {
	cursor:pointer;
	padding:3px 15px 3px 15px;
	border:silver 2px dotted;
	min-width:120px;
	min-height:120px;
	position:relative;
	
}
.thumbnailDivHover{
	cursor:pointer;
	padding:3px 15px 3px 15px;
	border:blue 2px dotted;
	position:relative;
	min-width:120px;
}
.editImageText{
	cursor:pointer;
	position:absolute;
	bottom:10px;
	right:10px;
	opacity:.50;
	background:white;
	border:1px solid gray;
	padding:3px;
	width:80px;
	height:50px;
	text-align:center;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

/*********

Resize Handle

********/

.dojoxResizeHandle {
	float: right;
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 13px;
	height: 13px;
	z-index: 20;
	background-image: url('/html/js/dotcms/dijit/image/resize.png');
	line-height: 0px;
}

.dojoxResizeNW {
	cursor: nw-resize;
}

.dojoxResizeNE {
	cursor: ne-resize; 
}

.dojoxResizeW {
	cursor: w-resize; 
}


.dojoxResizeN { 
	cursor: n-resize; 
}

.dojoxResizeHandleClone {
	position:absolute; top:0; left:0; 
	border:1px dashed #666; 
	z-index:999; 
}










