/* Custom Icons */
.icon{width: 24px; height: 24px; background-position: 0 0; margin: 0 0 2px 0;}
.icon-size{background-image: url(img/size.png);}
.icon-rotate{background-image: url(img/rotate.png);}

#gillyDesigner a,a:link,a:visited{color: #747474;}
#gillyDesigner a:hover{color: #eb5190;}
#gillyDesigner .row{margin-left: 0;}
#gillyDesigner .popover-inner .row{margin-left: -20px;}

#gillyDesigner .error{color: #E02C2C;}


/* Set our slider colors */
#gillyDesigner .slider-selection{
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #F0B889, #D58A4A);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F0B889), to(#D58A4A));
  background-image: -webkit-linear-gradient(top, #F0B889, #D58A4A);
  background-image: -o-linear-gradient(top, #F0B889, #D58A4A);
  background-image: linear-gradient(to bottom, #F0B889, #D58A4A);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffF0B889', endColorstr='#ffD58A4A', GradientType=0);
}
#gillyDesigner .slider-handle{
  background-color: #8f256a;
  background-image: -moz-linear-gradient(top, #D671B3, #7E1D5C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#D671B3), to(#7E1D5C));
  background-image: -webkit-linear-gradient(top, #D671B3, #7E1D5C);
  background-image: -o-linear-gradient(top, #D671B3, #7E1D5C);
  background-image: linear-gradient(to bottom, #D671B3, #7E1D5C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffD671B3', endColorstr='#ff7E1D5C', GradientType=0);
  opacity: 1;
}

/* Set link styles for select dropdown menus */
#gillyDesigner .dropdown-menu a {color: #383838; text-decoration: none}
#gillyDesigner .dropdown-menu a:hover {color: #fff;}

/*.icon-color-picker{background: url(../../../../assets/images/colorpicker.png) no-repeat;}*/

/* Shared popover styles */
#gillyDesigner .popover .close-edit-button{float: right; margin: 10px 0;}
#gillyDesigner .popover{max-width: 497px;}
#gillyDesigner a.colopicker{padding-bottom: 0;}
#gillyDesigner .colorpicker{margin-top: 2px; line-height: 12px; padding-top: 4px;}
#gillyDesigner .colorPreview{height: 20px; width: 20px; border: 1px solid #a7a7a7;}

/* Text edit form */
#gillyDesigner #textEditForm .btn-toolbar{margin: 2px 0 0 0;}
#gillyDesigner #textEditForm #textValue{width: 385px; margin-top: 12px; height: 21px;}

/* Shape edit form */
#gillyDesigner #shapeEditForm .close-edit-button{margin: 10px 0 0 10px;}
#gillyDesigner #shapeEditForm a.colorpicker{margin-left:20px;}
#gillyDesigner #shapeEditForm .slider{width: 150px; margin-top: 4px;}
#gillyDesigner #shapeEditForm .slider-display{line-height: 24px;}
#gillyDesigner #shapeEditForm .colorpicker-container{margin: -5px 0 0 -5px;}

/* Imaged popup editor */
#gillyDesigner .imageedit .row{margin-top: 8px;}
#gillyDesigner .imageedit .sliderLabel{width: 18px;}
#gillyDesigner .imageedit .sliderLabel .rotateLabel{margin-left: -4px;}
#gillyDesigner .imageedit .sliderLabel label{font-size: 12px; opacity: 0.8; font-style: italic; margin: 0;}
#gillyDesigner .imageedit .slider{width: 270px; margin-top: 4px;}
#gillyDesigner .imageedit .slider-display{font-size: 12px; font-weight: bold; width: 45px; display: inline-block; margin: 7px 0 0 0;}
#gillyDesigner .popover .imageedit .close-edit-button{margin: 0;}

#gillyDesigner .modal .message{font-size: 14px; text-align: center; margin:0 0 20px 0;}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  color: #ffffff;
  background-color: #DE761C;
  background-image: -moz-linear-gradient(top, #E7A165, #DE761C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E7A165), to(#DE761C));
  background-image: -webkit-linear-gradient(top, #E7A165, #DE761C);
  background-image: -o-linear-gradient(top, #E7A165, #DE761C);
  background-image: linear-gradient(to bottom, #E7A165, #DE761C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffE7A165', endColorstr='#ffDE761C', GradientType=0);
}

#gillyDesigner{
    margin: 10px -10px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #383838;
    font-size: 13px;
}

#gillyDesigner h2,
#gillyDesigner .accordion-heading a{
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #522E16;
    text-transform: uppercase;
    margin: 0;
    padding: 8px 0;
}

#gillyDesigner .tab-content{border: 1px #D0CCA3 solid; border-top: 0px;}
#gillyDesigner .nav-tabs{margin-bottom: 0; border-color: #D0CCA3;}
#gillyDesigner .nav-tabs a{text-decoration: none; font-size: 16px; padding: 12px 16px;}
#gillyDesigner .nav-tabs li.active a{font-weight: bold; border-color: #D0CCA3; border-bottom-color: transparent; border-radius: 8px 8px 0 0;}
#gillyDesigner .headerSection{background: #f7f7f7; border-bottom: 1px solid #e7e7e7;}

#gillyDesigner .container.row.top{border-bottom: 1px #D0CCA3 solid;}
#gillyDesigner .column{float: left;}
#gillyDesigner .column.left{width: 190px;}
#gillyDesigner .column.center{width: 620px; padding: 5px 10px; text-align: center;}
#gillyDesigner .column.right{width: 230px; float: right;}
#gillyDesigner .container.row.bottom{clear: both; float: none; border: 1px solid #D0CCA3; border-top: 0;}

/* Center preview column */
#centerColumn{height: 600px; position: relative; /* need to do this so we can use position aboslute on spinner */ }

/* Related Designs */
#gillyDesigner .accordion-group{border-radius: 0;}
#gillyDesigner .accordion-heading{background: #F7F7F7;}
#gillyDesigner #sidebar{margin-bottom: 0;}
#gillyDesigner #sidebar .thumbnails{padding: 0; margin: 0; text-align: center;}
#gillyDesigner #sidebar .thumbnails > li{margin: 0;}
#gillyDesigner #sidebar .thumbnail{width: 160px; border: 0; text-decoration: none}
#gillyDesigner #sidebar .accordion-inner{ height: 519px; overflow: auto;}

/* Saved designs */
#saved-designs .thumbnail p{margin: 0; padding: 0;}
#saved-designs .thumbnail .image-label {font-size: 11px;}

/* Save design modal */
#saveDesignModal .progress .bar{
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
#saveDesignModal form sup{
  font-size:9px;
}

/* Uploaded photos */
#gillyDesigner #photos{text-align: center; border-left: 1px solid #D0CCA3;}
#gillyDesigner #photos .noPhotos{ border: 6px dashed #E7E7E7; padding: 25px; color: #CCC; margin: 10px 5px;}
#gillyDesigner #uploadPhotos{margin: 0 8px;}
#gillyDesigner #uploadButton{margin: 10px 0;}

/* Uploaded photo widget */
#gillyDesigner .fileinput-button {position: relative; overflow: hidden;}
#gillyDesigner .fileinput-button input {position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer;}
#gillyDesigner .fileupload-buttonbar .btn, .fileupload-buttonbar .toggle {margin-bottom: 5px;}
#gillyDesigner .progress {display: none;}
#gillyDesigner .progress .bar {line-height: 22px;}
#gillyDesigner .fileupload-loading {float: right; width: 32px; height: 32px; background: url(../img/loading.gif) center no-repeat; background-size: contain; display: none;}
#gillyDesigner .fileupload-processing .fileupload-loading {display: block;}

#gillyDesigner #photos .row{height: 525px; overflow: auto;}
#gillyDesigner #photos .thumbnails{margin-bottom: 0; cursor: pointer;}
#gillyDesigner #photos .thumbnail{width: 160px;}
#gillyDesigner #photos .thumbnails li{margin-bottom: 8px;}
#gillyDesigner #photos .thumbnail:hover {/*width: 190px;*/ margin-left: -10px;}
#gillyDesigner #photos .thumbnail:hover+.instructions {opacity: 0.4;}
#gillyDesigner #photos .instructions {opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s fa-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}

/* Controls */
#gillyDesigner .container.row.bottom div{display: inline-block;}
#gillyDesigner .container.row.bottom .text {width: 790px; padding-left: 10px;}
#gillyDesigner .container.row.bottom .text em{font-weight: bold; font-style: normal;}
#controls .btn-warning{font-weight: bold;}

/* CSS spinner */
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

#spinner{
  position: absolute;
  top: 30%;
  left: 40%;
}

#spinner .loading {
    height: 100px;
    width: 100px;
    border-radius: 100%;
}


#spinner { margin: 40px auto }

.loading {
    border: 4px solid transparent;
    border-color: transparent #eeecec transparent #eeecec;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

#loading-text {
    color: #ccc;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    margin-top: 45px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100px;
}

/* Preview container styles */
#container-preview{width: 1065px; margin: auto;}
#container-preview #gillyDesigner {float: left;}
#container-preview #gillyDesigner .tab-content{border-width: 0px;}