#box img.draggable { margin: 10px; position: relative; cursor: move; }
  

.draggable { float: left; }

.border { border: 0px rgb(0,0,0) solid; padding: 0px;  }

.border { overflow: hidden;  }

.ui-resizable-helper { border: 1px solid #00AB00; }

.hover_border {
  border: 1px solid #00FFFF;
}

.colorpicker {
  float: left;
  display: inline;
  width: 35px;
  height: 18px;
  padding: 2px 3px 2px 3px;
  border: 1px #F0F0F0 solid;
  background-color: #FFFFFF;
  overflow: visible;
  
}

#top {
  min-width: 1200px;
}

.colorpicker > .colorpicker_header {
  width: 35px;
  height: 18px;
  cursor: pointer;
  
}

.colorpicker_header > .colorPreview {  
  margin: 0px auto;
  margin-top: 2px;
  height: 14px;
  width: 20px;
  background-color: #000000;
}

.colorpicker_menu {
  display: none;
  position: relative;
  border: 1px #000000 solid;
  background-color: #FFFFFF;
  z-index: 100000;

}

.colorpicker_color {
  float: left;
  width: 18px;
  height: 18px;
  margin: 2px;
  cursor: pointer;

}

.colorpicker_line {
  height: 18px;
}

.categoryButton {
  display: block;
  width: 99%;
  /*padding-top: 20px;
  padding-bottom: 20px;*/
  margin-bottom: 6px;
  border: 1px #000000 solid;
  text-align: center;

}

#right_menu { 
  float: right; 
  width: 300px; 
  height: 440px; 
}

.bg_thumb {
  cursor: click;
  margin: 2px;
  height: 120px;

}
.bg_thumb img {
  margin: 10px;
  height: 100px;
}
.bg_thumb > div {
  margin: 10px;
  height: 100px;
  width: 100px;
}

.top_menu { clear: both; width: 100%; height: 200px; }

#right_menu h3, div {
  font-size: 12px;

}


#main_body {
  margin-top: 10px;
  width: 99%;
  min-width: 1200px;
  margin: auto; 

}


#box { 
  clear: both; 
  padding: 1px;
  height: 100px;
}

.scroll-pane { 
  overflow: auto; 
  width: 100%; 
  float:left; 
}

.scroll-content { 
  height: 100px; 
  float: left; 
}
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */


.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top: 0.2em; height: 1.5em; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }

#textsContent { 
   
  float: left; 
  position: relative; 
  width: 330px;
  height: 400px;
  overflow: auto;
}

#textsContent .textContent > textarea {
  width: 280px;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  height: 18px;
  overflow: hidden;

}

.textContent > textarea.active {
  background-color: rgb(255,255,153);
}
   
#container { 
  
  background-color: #FFFFFF; 
  float: left; 
  position: relative; 
  width: 78%; 
  overflow: hidden;
  border: 1px #000000 solid;
}

#businesscardMenu {
  height: 65px;
  margin-bottom: 10px;
  padding: 10px;
}

#menuEditText {
  width: 50%;
  margin: 0px auto;
}

#menuEditPhoto {
  width: 650px;
  margin: 0px auto;
}

.center_bar {
  background-color: #000000;
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0px;
  left: 50%;
  z-index: 155;
}

.spine_bar {
  background-color: #000000;
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0px;
  left: 50%;
  z-index: 155;
}

.position_drop_area {
  background-color: #FF0000;
  opacity: 0.50;
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  

}

.box_position {
  position: absolute;
  background-color: #D8D8D8;
  z-index: 0;  
  opacity: 0.7;
  /*background-image: url(../images/drag_drop_picture.png);*/
  background-position: center center;
  background-repeat: no-repeat;  
}

.textBox_position {
  position: absolute;
  background-color: #D8D8D8;
  z-index: 101;  
  opacity: 0.5;
  background-image: url(../images/add_text.png);
  background-position: center center;
  background-repeat: no-repeat;  
}

.pages { 
  
  margin-top: 3px;
  float: left; 
  position: relative; 
  width: 100%;
  height: 25px; 
}

.page_icon {
  padding: 2px 8px 2px 8px;
  cursor: pointer;
  
}

.page_icon:hover {
  background-color: #FFFF00;

}

.page_icon.active {
  background-color: #FF0000;

}

.current_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  
}

#current_image {
  width: 100%;
  margin-right: 10px;
}

.loading {
    position: absolute;
    display: none;
    border: 1px solid #5c9ccc;
    padding: 2px;
    background-color: #5c9ccc;
    color: #ffffff;
    opacity: 0.90;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 100px;
    height: 50px;
    text-align: center;
    z-index: 100000;
}

DIV#loader {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
DIV#loader.loading {
  background: url(images/ajax-loader.gif) no-repeat center center;
}

#report-pane {
  display: none;
  height: 100%;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10000;
  background-color: #000000;
  opacity: 0.75;

}

.editor {
  display: none;

}

div.v_guide {
  width: 3px;
  background-color: #FFFF00;
  position: absolute;
  z-index: 152;
  cursor: e-resize;
}

div.h_guide {
  height: 3px;
  background-color: #FFFF00;
  position: absolute;
  z-index: 152;
  cursor: n-resize;  
}

div.guide_selected {
  background-color: #FFC800;
}

div.box_selected {
  background-color: #C7FFFF;
}

div.textBox_selected {
  background-color: #D9FFFF;
}

.fontPreview {
  padding: 5px;

}

.fontPreview_selected {
  background-color: rgb(250,206,13);

}

.maskPreview {
  position: relative;
  padding: 5px;
  float: left;


}

.maskPreview img {
    width: 150px;
}

.maskPreview_selected {
  background-color: rgb(250,206,13);

}

.scroll_buttons {
  text-align: center;
  height: 82px;
  margin: 5px;
  float: left;

}

.backgroundUpload_button {
  position: relative;
  display: inline-block;   
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  background-color: #000000;
  height: 120px;
  width: 120px;
  cursor: pointer;
  margin: 2px;
  

}

#layout_list {
  width: 100%;
  text-align: center;
}

.layout_thumb {
  cursor: click;
  margin: 2px;

}
.layout_thumb img {
  margin: 10px;
}


.margin_bar {
  position: absolute;
  z-index: 151;
  border-color: rgb(255,0,0);
  border-style: dotted;  
  border-width: 0px 0px 0px 0px;
}

.margin_bar_gray {
  position: absolute;
  z-index: 151;
  background-color: black;
  opacity: 0.3;
  border-width: 0px 0px 0px 0px;
}

.safeMargin_bar {
  position: absolute;
  z-index: 151;
  border-color: rgb(0,255,0);
  border-style: dotted;
  border-width: 0px 0px 0px 0px;
}

.margin_bar_left {
  height: 100%;
  width: 1px;
  left: 0px;
  top: 0px;
  border-right-width: 1px; 
}

.margin_bar_top {
  width: 100%;
  height: 1px;
  left: 0px;
  top: 0px;
  border-bottom-width: 1px; 
}

.margin_bar_bottom {
  width: 100%;
  height: 1px;
  left: 0px;
  bottom: 0px;
  border-top-width: 1px; 
}

.margin_bar_right {
  height: 100%;
  width: 1px;
  right: 0px;
  top: 0px;
  border-left-width: 1px; 
}

#menu_position {
  position: absolute;
  width: 200px;
  display: none;
  z-index: 10000;
}

.box_unedit {
  position: absolute;
  background-color: #FFFFAA;
  z-index: 150;  
  opacity: 0.7;
}

.calendarPreview {
  position: relative;
  padding: 5px;
  float: left;


}

.calendarPreview img {
    width: 428px;
}

.calendarPreview_selected {
  background-color: rgb(250,206,13);

}

#generateQRCode {
    float: left;
    overflow: auto;
    position: relative;
    width: 330px;
    clear:left;
    margin-top:5px;
}

.textQRremove {
    display:none;
}