/* 
    Created on : Jun 30, 2016, 10:28:39 AM
    Author     : samudra
*/
@font-face {
    font-family: 'digital-7regular';
    src: url('../fonts/digital-7-webfont.eot');
    src: url('../fonts/digital-7-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/digital-7-webfont.woff2') format('woff2'),
         url('../fonts/digital-7-webfont.woff') format('woff'),
         url('../fonts/digital-7-webfont.ttf') format('truetype'),
         url('../fonts/digital-7-webfont.svg#digital-7regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/opensans-italic-webfont.eot');
    src: url('../fonts/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-italic-webfont.woff') format('woff'),
         url('../fonts/opensans-italic-webfont.ttf') format('truetype'),
         url('../fonts/opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{ 
    margin: 0; padding: 0;  
     -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
  outline: none;
}
body{ background: #a8a9ad; font-family: open_sansregular; font-size: 18px; line-height: 20px; }
#container{ display: block; width: 980px; height: 680px; margin: 0 auto; background: #fff; border-radius: 5px; position: relative; }

/* content body css */
#contentbody { padding: 2%; position: relative; width: 96%; height: 580px;overflow: hidden; }
#slider-container {
    position: absolute;
    text-align: center;
    top: 20px;
    left: 20px;
    width: 96.5%;
    height: 110px;
    background: url("../images/slider.png") no-repeat scroll 0 0 / cover ;
}
#slider {
    width: 810px;
    margin-left: 58px;
    margin-top: 75px;   
}
#slider-content{
    position: absolute;
    top: 140px;
    height: 430px;
    width: 92.5%;
    padding: 35px 15px 0;
	left: 25px;
	box-shadow: 0px 0px 10px #a8a9ad;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0) url("../images/background.png") no-repeat scroll -1px 0; 
}
.slider-header {
    width: 88%;
    margin: 8px 0;
    cursor: pointer;
}
.slider-header > div {
    display: inline-block;
    vertical-align: middle;
}
.textId {
    border: 1px solid #a8a9ad;
    border-radius: 4px;
    height: 24px;
    margin: 0 10px 0 0;
    text-align: center;
    width: 24px;
    color: #000;
}
.visited{ color: #fff; }
.ui-slider-handle{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    border-radius: 8px !important;
    width: 3em !important;
}
.ui-slider-handle > label {
    background: #e73b26 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 5px #000 inset;
    border-radius: 8px;
    z-index: 9;
    line-height: 26px;
}
.ui-slider-handle .handle-arc {
    background: #e73b26 none repeat scroll 0 0;
    border-bottom: 3px solid #c5c5c5;
    border-right: 3px solid #c5c5c5;
    bottom: -8px;
    box-shadow: 0 0 5px #000 inset;
    display: block;
    height: 10px;
    left: 22px;
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    
    width: 10px;
    z-index: -1;
}
.ui-state-active, .ui-state-focus, .ui-state-hover{ color: #000; }
.ui-state-active > span.handle-arc{
    border-color: #e73b26 !important;
}
.add-set{ text-align: center; }
#newSet {
    border: 2px solid #fff;
    display: table;
    margin: 0 auto;
    padding: 5px 10px;
    box-shadow: 0 0 5px #a8a9ad;
    position: relative;
    width: 80px;
    border-radius: 5px;
    cursor: pointer;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: rgb(254,204,177); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */

}
.display-set {
    position: absolute;
    right: 10px;
    top: 45px;
}
.set{ display: none; margin-bottom: 8px;}
#newSet.disable{ opacity: 0.5; cursor: auto; }
.set > div { display: inline-block; vertical-align: middle; margin: 0 5px; cursor: pointer; }
.set > div.setValues {
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #a8a9ad;
    padding: 5px 10px;
    width: 45px;
    color: #fff;
}
.remove {
    background: rgba(0, 0, 0, 0) url("../images/remove-icon-png-25.png") repeat scroll 0 0 / cover ;
    height: 20px;
    width: 20px;
}
.shadowDrags{
	-moz-box-shadow: 0 0 10px #a8a9ad !important;
	-webkit-box-shadow: 0 0 10px #a8a9ad !important;
	box-shadow: 0 0 10px #a8a9ad !important;
}
.shadowGreen{
        border:2px solid #1F8970 !important;
	-moz-box-shadow: inset 0 0 10px #1F8970 !important;
	-webkit-box-shadow: inset 0 0 10px #1F8970 !important;
	box-shadow:inset 0 0 10px #1F8970 !important;
        background: #fff !important;
}
.shadowRed{
        border: 2px solid #F16560 !important;
	-moz-box-shadow: inset 0 0 10px #F16560 !important;
	-webkit-box-shadow: inset 0 0 10px #F16560 !important;
	box-shadow: inset 0 0 10px #F16560 !important;
        background: #fff !important;
}
/* popup css */

#mask{ position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); border-radius: 5px; }
#popup {
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    border-radius: 5px;
    z-index: 9;
}
#popup-content{
    color: white;
    width: 50%;
    padding: 10px;
    background: #8f6daa none repeat scroll 0 0;
    border: 3px solid #ffe00f;
    border-radius: 5px;
    height: 310px !important;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}
#popup-hedader {
    height: 35px;
    position: relative;
}
#popup-close {
    border: 2px solid #fff;
    border-radius: 100%;
    display: table-cell;
    font-family: open_sansbold;
    font-size: 14px;
    height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: 0 2px #000;
    top: 0;
    vertical-align: middle;
    width: 20px;
    cursor: pointer;
    line-height: 18px;
}
#popup-info{
    width: 34px; 
    height: 34px;
    background: rgba(0, 0, 0, 0) url("../images/btInfoOn@2x.png") no-repeat scroll 0 0 / cover ;
}
#popup-body{ padding: 15px; line-height: 22px; }
#popup-body p { margin-bottom: 20px }

/* footer css */
#footer { border-top: 2px solid #a8a9ad; bottom: 0; display: table-cell; height: 55px; position: absolute; vertical-align: middle; width: 100%; }
#instruction{
    display: block;
    height: 45px;
    left: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    top: 5px;
    width: 775px;
    opacity: 0;
    font-size: 16px;
	font-family: open_sansbold;
}
.single{ top: 16px; }
.double{ top: 8px; }
.fBtn{ position: absolute; top: 10px; width: 34px; height: 34px; }
#submit{ background: rgba(0, 0, 0, 0) url("../images/submitOn.png") no-repeat scroll 0 0 / cover ; right: 135px; cursor: pointer; }
#submit.disable{ background: rgba(0, 0, 0, 0) url("../images/submitOff.png") no-repeat scroll 0 0 / cover ; cursor: auto; }
#info{ background: rgba(0, 0, 0, 0) url("../images/btInfoOn@2x.png") no-repeat scroll 0 0 / cover ; right: 80px; cursor: pointer; }
#info.disable{ background: rgba(0, 0, 0, 0) url("../images/btInfoOff@2x.png") no-repeat scroll 0 0 / cover ; cursor: auto; }
#reset{ background: rgba(0, 0, 0, 0) url("../images/btResetOn@2x.png") repeat scroll 0 0 / cover ; right: 25px; cursor: pointer; }
#reset.disable{ background: rgba(0, 0, 0, 0) url("../images/btResetOff@2x.png") repeat scroll 0 0 / cover ; cursor: auto; }