/**
* GoMage Product Designer
*
* @category     Extension
* @copyright    Copyright (c) 2013 GoMage (http://www.gomage.com)
* @author       GoMage
* @license      http://www.gomage.com/license-agreement/  Single domain license
* @terms of use http://www.gomage.com/terms-of-use
* @version      Release: 1.0
* @since        Available since Release 1.0
*/
/* Layout
-------------------------------------------------- */
.product-designer{
width:100%;
margin:20px auto;
/* float:left; */
  }
  /* .product-designer *{font-family:'LevenimMTBold';  /* text-align: left; } */
  .product-designer-content,.pd_save_container
  {
  margin:0 auto !important;float:none !important;
  }
  .product-designer-header
  {margin:10px auto !important;  float:none !important;
  }
.product-designer-header{
  margin: 0 0 20px;
  }
  .pd_nav_container{
    /* float: right ; */
    }  
	.btns {
    float: right;
    text-align: right;
    width: 100%;
}
  .pd_save_container{
    
	 
	text-align:right;
	margin-bottom:15px;
	
    }
.product-designer-content{
  }
  .product-designer-sidebar{
    width: 40%;
    float: right;
	 margin-top: 18px;
    }
  .product-designer-main-col{
    /*margin-right: 320px;*/
	 float: left;
    width: 58%;/*  border: 1px solid #7092BE; */
	 margin-top: 18px;
    }
    
.pd-box{
  /*  background:  #1D1D1D;
    border: 2px solid #4C3807; */
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
	float:left;
	width:95%;
	display:inline-block;
	border: 1px solid #979494;
	margin-top: 10px;
}
  
#product-zoom-container{
  display: none;
  }
  .dialog #product-zoom-container{
    display: block;
    }
.product-designer .category-products,
.my-designs  .category-products{
  padding: 0;
  }
.product-designer-sidebar h4{
  margin-bottom: 5px; text-align: left;
   border-bottom: 1px solid #2F4350;
  }
    
/* Main col
-------------------------------------------------- */
#pd_container{
  max-width: 100%;border: 1px solid #7092BE;
  }
.pd_bottom_panel{
  text-align: right;
  margin: 10px 0;
  max-width: 100%;
  }
  .pd_bottom_panel .button{
    margin-bottom: 5px;
    }
  
  
/* Sidebar
-------------------------------------------------- */

/* Tabs */
.pd-tab-content{
  display: none;
  position: relative;
  /* margin: 0 0 15px; */
  }
  .tab-help-icon{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 14px;
    padding: 0 0 0 3px;
    font-size: 12px;
    line-height: 14px;
    cursor: help;
    border: 1px solid #ccc;
    border-radius: 100%;
    color: #1F5070;
    background-color: #f4f4f4;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image:    -moz-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image:     -ms-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image:      -o-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image:         linear-gradient(to bottom, #fdfdfd, #eaeaea);
    }
  .tab-help-content{
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0 0 0 5px;
    min-width: 100px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 5px;
    }
    
.pd_sides_list li{
  display: inline-block;
  margin: 0 5px 5px 0;
  }
  
/* Colors panel */
.colors-panel {
  padding: 0 0 5px 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  }
  .color-btn {
    cursor: pointer;
    margin: 5px 2px 0 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 1px solid #ccc;
    overflow: hidden;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip   : padding-box;
    background-clip        : padding-box;
    opacity: .6;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    filter: alpha(opacity=60);
    }
    .color-btn.selected{
      opacity: 1;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      filter: alpha(opacity=100);
      }
      
      
/* Tab design */
.cliparts-list{
  margin: 10px 0;
  overflow: auto;
  max-height: 300px;
  }
  
.products-designer-grid .display-product{
  display: none;
  width: 300px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  border-radius: 5px;
  }
  .products-designer-grid .display-product .product-name{
    font-weight: 700;
    margin-bottom: 5px;
    }
  .products-designer-grid .display-product .product-media{
    float: left;
    margin-right: 10px;
    }
  .products-designer-grid .display-product .product-info{
    overflow: hidden;
    }
    
/* Tab Text */
.text-effect{
  margin: 10px 0;
  padding: 5px;
  width: 100%;
  display: none;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing   : border-box;
  box-sizing        : border-box;
  }
  .panel-cancel-btn{
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    }

/* Tab Upload Image */
.pd_more_info_link{
  margin: 0 0 10px;
  }
#uploadedImages{
  margin-bottom: 5px;
  }
#upload-image-error{
  margin: 5px 0;
  color: #f00;
  font-weight: 700;
  }
  #upload-image-error p{
    margin: 0;
    }
#license-agreements-link{
  cursor: help;
  }
.pd-license-agreements-popup {
  position: absolute;
  z-index: 1001;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  width: 250px;
  }
#image-conditions{
  margin-top: 5px;
  }
.pd-upload-input{
  margin-bottom: 5px;
  overflow: hidden;
  height:40px;
  line-height:40px;
  }
 
/* Fields
-------------------------------------------------- */
.product-designer .form-list .input-box{
  width: 100%;
  }
  .product-designer .form-list select,
  .product-designer .form-list input.input-text,
  .product-designer .form-list textarea{
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
    width: 100%;
	
    }
  .product-designer .form-list textarea{
    resize: vertical;
    }
.product-designer .form-list .fields .field{
  width: 48%;
  float: left;
  clear: none;
  }
  .product-designer .form-list .fields .field + .field{
    margin-left: 4%;
    }
.product-designer .control label{
  vertical-align: middle;
  }
.product-designer .control-rights label{
  text-align: left;
  width: auto;
  float: none;
  }
  
  
/* Price
-------------------------------------------------- */
.product-designer-price{
  text-align: right;
  }
#price-more-info{
  margin-top: 5px;
  }
  #price-more-info .price{
    font-weight: 700;
    color: #C76200;
    }
    
/* Designer Buttons
-------------------------------------------------- */
.category-products .products-grid .gpd-button{
  margin: 5px 0;
  }
.category-products .products-grid li.item{
  padding-bottom: 100px;
  }
.add-to-cart button.btn-design{
  margin-left: 5px;
  }
  
/* My Saved Designs
-------------------------------------------------- */
.my-designs .products-grid .actions .button{
  margin-bottom: 5px;
  }
.gomage-designer-customer-designs .products-grid .item{
  max-width: 158px;
  }
  
/* Clears
-------------------------------------------------- */
.product-designer-header:after,
.product-designer-content:after,
#pd_container:after{
  content: '';
  clear: both;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
}


/* Old styles //To Delete
-------------------------------------------------- */
#additional_panels {
    position: relative;
    /* width: 300px; */
    z-index: 1099;
}

#pd_tabs {
/*     width: 300px; */
    position: relative;
    z-index: 1100;
}

#navigation_panel .pages {
    margin: auto;
}
.clipart-image {
    width: 60px;
    height: 60px;
	  margin-bottom: 6px;
    margin-right: 12px;
    cursor: pointer;
}


/* Maybe leave it */

.pd-element-wrapper {
     float: left;
    margin-bottom: 6px;
    margin-top: 5px;
    width: 100%;
}

#product-designer .content {
    float: left;
}

/* Other styles */

#pd_container .pd-design-area {
    border: 0px dashed #333;
}

#pd_container .outside-warning {
    border: 1px solid #FF0000;
}
#pd_save_container li {
    float: left;
}

.pd-panel {
    position: absolute;
    background-color:#fff;
    border: 1px solid #ccc;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    width: 200px;
    height: 500px;
    overflow: auto;
    z-index: 1100;
    padding: 5px;
}

.pd-panel .pd-panel-header,
.pd-panel .pd-panel-footer {
    height: 22%;
    border: 1px solid #ccc;
}

.pd-panel .pd-panel-content {
    height: 50%;
    overflow: auto;
    border: 1px solid #ccc;
    margin: 5px 0;
}

.panel-btn {
    font-size: 12pt;
    padding: 3px;
    min-width: 30px;
    margin: 0 2px;
}

.panel-btn[disabled] {
    color : #ccc;
}

fieldset[disabled] button,
fieldset[disabled] input,
fieldset[disabled] select {
    color: #ccc;
}

.font-size-selector {
    font-size: 10pt;
    min-width: 30px;
    margin: 0 2px;
}

.pd-btn-add-text {
    width: 50px;
}

.pd-btn-bold {
    font-weight: bold;
}

.pd-btn-italic {
    font-style: italic;
}

.pd-btn-underline {
    text-decoration: underline;
}
#pd_sides img {
    border: 1px solid #ccc;
    margin: 0 5px;
    cursor: pointer;
}

#pd_undo_btn,
#pd_redo_btn,
#pd_duplicate_btn,
#pd_zoom_btn,
#pd_print_btn {
    margin: 0 10px;
    font-weight: bold;
    cursor: pointer;
}


#pd_undo_btn.active,
#pd_redo_btn.active {
    color: #000;
}

#pd_undo_btn.disabled,
#pd_redo_btn.disabled,
#pd_duplicate_btn.disabled {
    color: #ccc;
}

#pd_container .cliparts-panel-title {
    width: 100%;
    border-bottom: 1px solid #ccc;
    font-size: 12pt;
}

#pd_container .cliparts-panel-categories,
#pd_container .cliparts-panel-subcategories {
    width: 45%;
    margin: 0 5px;
}

#pd_container .cliparts-panel-search {
    width: 45%;
    margin: 5px 5px;
}

#pd_container  .cliparts-panel-search-btn {
    margin: 5px 5px;
}

#pd_container .cliparts-panel-flipv-btn,
#pd_container .cliparts-panel-fliph-btn,
#pd_container .cliparts-panel-align-btn   {
    /* cliparts panel buttons */
}

#pd_container .layers-panel-title,
#pd_container .notes-panel-title {
    font-size: 12pt;
}

.layers-manager-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.layers-manager-list li {
    background-color: #9FF781;
    margin: 5px 5px;
    border: 1px solid #ccc;
    padding: 5px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    cursor: pointer;
}


li.layer-type-text .layer-icon {
    height: 32px;
    padding: 3px 5px;
    margin: 0 5px;
    text-align: center;
    border: 1px solid #000;
    background-color: #fff;
}

.layer-remove-btn,
.layer-up-btn,
.layer-down-btn,
.layer-label  {
    display: inline-block;
    margin-top: 5px;
}

.layer-label {
    width: 50%;
    padding-left: 5px;
}

.layer-up-btn,
.layer-down-btn,
.layer-remove-btn {
    padding: 1px 2px;
    font-size: 10pt;
    font-weight: bold;
    margin: 0 1px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #ccc;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.layer-remove-btn {
    color: #FF0000;
}

.layers-manager-list li.outside {
    border-color: #FF0000;
    background-color: #FE2E2E!important;
}

.layers-manager-list li.active {
    border-color: #FF0000;
    background-color: #F3F781;
}

.curved-text-config legend,
.shadow-config legend,
.outline-config legend {
    display: block;
}

.color-picker {
    cursor: pointer;
    border: 1px solid #ccc;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px
	 margin-top: 10px;
}

.font-picker {
  width: 60%;
  height:26px;
  padding:4px 0;
}

.pd-textarea {
  width: 60%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing   : border-box;
  box-sizing        : border-box;
  height:28px;
  line-height:28px;
}

.notes-panel-textarea {
    width: 95%;
    height: 200px;
}

.pd-social-icons img {
    margin : 5px;
    cursor : pointer;
}

.products-designer-grid {
    overflow: hidden;
}
.products-designer-grid .item {
    float: left;
    padding: 10px;
}


.product-designer-price .regular-price .price {
    font-size: 26px;
}
#add_text_btn_underline, #add_text_btn_italic, #add_text_btn_vert_out,
 #pd_zoom, #pd_flip_horizontal, #pd_flip_vertical, #pd_allign_by_center,
 #design_price_container
{
	display:none;
}

#price-more-info-switcher
{
color:#fff !important;
}
#txt_label, #font_label, #size_label
{
    float: left;
    height: 28px;
    line-height: 28px;
    width: 38% !important;
}
#pd_save_design{
	display:none;
}

.pd-upload-input > input {
    color: #FFFFFF;
}


@media screen and (max-width:700px)
{
.product-designer-main-col{width:98%; margin-left:1%;}
.product-designer-sidebar{width:98%; margin-left:1%;}
}