/* CSS Document */
@font-face {font-family:'Erass'; src: url(../fonts/ERASMD.TTF);}
 



.text_primary{width:200px; height:46px; float:left; margin-left:calc((100% - 200px)/2); xbackground-color:#09F; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:18px; color:#FFF; text-align:center; line-height:46px; cursor:pointer; }

#img_drop_frame{width:340px; height:80px; margin:0px auto; padding:0px auto; margin-top:100px;}



.outer_container{width:100%; max-width:1108px; height:auto; margin:0px auto; padding:0px auto; overflow:hidden;   xbackground-color:yellow;}
#inner_container{width:100%;  height:auto; margin:0px auto; padding:0px auto;   float:left;  xbackground-color:aqua;  }

#graphic_container{width:560px; height:auto; margin-left:0px;  float:left; overflow:hidden; display:block; clear:right;}


#image_title_holder{width:100%; height:40px; margin:0px auto; padding:0px auto; display:none;}
.image_title_inner{width:100%; height:auto; float:left; xbackground-color:orange;}
#image_name{width:100%; height:auto; float:left; padding-top:8px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; display:none; }
.image_title{width:auto; height:auto; float:left;   font-family:'Erass'; font-size:20px; xdisplay:none;}
#showinputsize{width:auto; height:auto; float:left;}
#showoutputsize{width:auto; height:auto; float:right;}


#xxximage_container_frame{width:100%;  xheight:auto;  height:1200px; margin:0px auto; padding:0px auto; float:none;}
#imagecontainer{width:100%; height:auto;  margin:0px auto; padding:0px auto; float:none;  margin-top:5px;}

#show_leftimage{width:50%;overflow:hidden;  xdisplay:none;}
#show_rightimage{overflow:hidden; cursor:auto;  }
#leftimage{width:100px; height:auto; float:left;}



#control_frame{width:340px; height:auto; float:right; margin-right:0px; xbackground-color:blue; clear:top;}

#edit_title{width:340px; height:40px; margin:0px auto; padding:0px auto;  background-color:black; text-align:center; color:white; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:42px; margin-top:6px; margin-bottom:6px;  display:none;}



#color_editor_frame{width:340px; height:auto; margin:0px auto; padding:0px auto;     margin-bottom:40px;  display:none; overflow:hidden; }
#color_editor_inner{width:338px; height:auto; float:left; background-color:#f8f9fa; padding-top:40px; border:1px solid; border-color:#e0e0e0; border-radius:5px;}
#brightness_editor_frame{width:49.5%; height:260px; float:left; background-color:#f8f9fa;}
#contrast_editor_frame{width:49.5%; height:260px; float:right;   background-color:#f8f9fa;}


#xxxdowloader_frame{width:340px; height:100px; margin:0px auto; padding:0px auto; float:none; xbackground-color:pink; margin-top:40px;}
#download_frame_outer{width:100%; max-width:1108px; height:100px; margin:0px auto; padding:0px auto; xfloat:left; xbackground-color:pink; xmargin-top:40px;}
#dowloader_frame{width:100%; max-width:340px; height:60px; margin:0px auto; padding:0px auto;  float:right; xbackground-color:linen;  margin-top:30px;}





















@media screen and (max-width: 1114px) {
.outer_container{width:100%; xheight:430px; height:auto; margin:0px auto; padding:0px auto;  xbackground-color:lime;}
#inner_container{width:100%; height:auto; margin:0px auto; padding:0px auto; float:none;  }
#xgraphic_container{width:100%; height:auto; margin:0px auto; padding:0px auto; float:none;}

#ximage_name{display:block;}
#ximage_title_holder{width:340px;}

#xcontrol_frame{float:none;}


#xedit_title{width:340px; height:40px; margin:0px auto; padding:0px auto;  background-color:black; text-align:center; color:white; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:42px; margin-top:6px; margin-bottom:6px; xdisplay:none; xmargin-top:254px;}

}
@media screen and (max-width: 960px) {
.outer_container{ xheight:430px; height:auto; xbackground-color:violet;}
#graphic_container{ width:54%;}
}
 
@media screen and (max-width: 810px) {
.outer_container{width:100%; height:auto; margin:0px auto; padding:0px auto;}
#inner_container{width:340px; height:auto; margin:0px auto; padding:0px auto; float:none;  }
#graphic_container{width:100%; height:auto; margin:0px auto; padding:0px auto; float:none;}

#image_title_holder{width:340px; background-color:black;}
.image_title_inner{width:340px;}
#image_name{width:330px; padding-left:5px; padding-right:5px; display:block; background-color:black; color:white; white-space: pre-wrap; word-wrap: break-word;}
.image_title{ display:none;}

#showinputsize{ display:none;}
#showoutputsize{ display:none;}

#control_frame{float:none;}


#edit_title{width:340px; height:40px; margin:0px auto; padding:0px auto;  background-color:black; text-align:center; color:white; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:42px; margin-top:6px; margin-bottom:6px; xdisplay:none; xmargin-top:254px;}

}