#box img.draggable { margin: 10px; position: relative; cursor: move; }
  
.pageImg { 
  margin: 10px; 
  position: relative; 
  float: left; 
  height: 70px;
}


.draggable { float: left; }

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

.border { overflow: hidden;  }

.ui-resizable-helper { border: 2px dotted #00F; }

.dpi_smile {
  width: 35px;
  height: 35px;
  position: absolute;
  right: 5px;
  bottom: 5px;
}

#mainMenu { 
  float: left; 
  width: 310px; 
  height: 440px;
  position: relative; 
}

#mainMenu > div {
  padding: 5px;
}

#mainMenu #guidesMenu {
  width: 100%;
  position: absolute;
  bottom: 0px;
}


#mainMenu #photoMenu {
  position: absolute;
  top: 25%;
  display: none;
  width: 97%;

} 

#mainMenu #textMenu {
  position: absolute;
  top: 25%;
  display: none;
  width: 97%;

} 

#mainMenu #topMenu {
  position: relative;
  top: 0px;
}


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

.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;
}


.borderpicker {
  float: left;
  display: inline;
  width: 49px;
  height: 35px;
  overflow: visible;
  
}

.borderpicker .borderpicker_header {
  width: 25px;
  height: 25px;
  cursor: pointer;
  
}

.borderpicker_header > .colorPreview {  
  margin: 0px auto;
  height: 20px;
  width: 20px;
  border: 3px #000000 solid;
  
}

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

}

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

}

.borderpicker_line {
  height: 18px;
}

.clipart_thumb {
  cursor: move;
  float: left;
  margin: 2px;
  height: 70px;
}

.clipart_thumb > img {
  height: 70px;
}

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

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

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

}
.border_thumb img {
  margin: 10px;

}
.border_thumb > div {
  margin: 10px;

}

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

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

}

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

}

#main_body {
  width: 99%;
  margin: auto; 

}


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

.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%; }

div.box_selected.opacity_100 {
  opacity: 1;
}
   
#container { 
  
  background-color: #FFFFFF; 
  float: left; 
  position: relative; 
  width: 78%; 
  overflow: hidden;
  border: 1px #000000 solid;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#container * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#puzzleMask {
  position: absolute;
  z-index: 1000;
}

#puzzleMask img {
  width: 100%;
  height: 100%;

}

.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(/vprojekt/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: 23px; 
}

.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;

}
  

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.photo_in {
  background-color: transparent;
  opacity: 1;
}

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

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_selected {
  background-color: rgb(250,206,13);

}

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

}

.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;
  

}

.position_thumb {
  cursor: move;
  float: left;
  margin: 2px;
}


.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);

}

#pageOrder { 
  list-style-type: none; 
  margin: 0;
  padding: 0;  
  margin-left: 10px;
  margin-right: 10px;
  
 
  float: left; 

  
  min-width: 200px; 
  min-height: 200px;
}

#pageOrder li { 
  margin: 3px; 
  padding: 0px; 
  float: left;  
  cursor: move;   
}

#photoOrder { 
  list-style-type: none; 
  margin: 0;
  padding: 0;  
  margin-left: 10px;
  margin-right: 10px;
  
 
  float: left; 

  
  min-width: 200px; 
  min-height: 200px;
}

#photoOrder li { 
  margin: 3px; 
  padding: 0px; 
  float: left;  
  cursor: move;   
}