/* Options Framework Admin Styles */

.updated{max-width:764px;margin-bottom:0!important}
#optionsframework{position:relative;z-index:0;background:#F5F5F5}
#optionsframework h3{cursor:default;height:25px;padding:11px 0;font-family:Arial,Helvetica,sans-serif;color:#FFF;height:auto;font-size:20px;text-align:center;text-shadow:0 1px #000000;background:#0cb9e4;text-shadow:none;text-transform:uppercase}
#optionsframework p{margin-bottom:0;padding-bottom:10px;line-height:1.4em}
#optionsframework .section{padding:10px 10px 0 15px}
#optionsframework .group{background:url(../images/d5logo.png) no-repeat scroll center bottom transparent;padding-bottom:90px;min-height:1000px}
#optionsframework .section .heading{border-bottom: 1px solid #dfdfdf; font-size: 14px; margin: 10px 0; padding: 10px 0;}
#optionsframework .section .controls{float:left;min-width:350px;width:54%;padding-right:2%}
#optionsframework .section .explain{max-width:38%;float:left;font-size:12px;line-height:16px;color:#777}
#optionsframework .section-checkbox .controls{width:98%}
#optionsframework .section-checkbox .explain{max-width:94%}
#optionsframework .of-input{width:100%}
#optionsframework .controls select,#optionsframework .controls textarea{margin-bottom:10px;width:100%}
#optionsframework .section-radio label,#optionsframework .section-multicheck label{float:left;max-width:90%;line-height:16px;margin-bottom:5px}
#optionsframework input.checkbox,#optionsframework input.of-radio{width:30px;margin-top:2px;float:left;clear:both}
#optionsframework .section-typography .controls{float:none;width:auto}
#optionsframework .wp-picker-input-wrap .button { min-height: 29px; margin: 0 0 0 3px; }

#optionsframework .controls .of-typography-size, #optionsframework .controls .of-typography-unit, #optionsframework .controls .of-typography-cface, #optionsframework .controls .of-typography-face, #optionsframework .controls .of-typography-style, #optionsframework .controls .of-typography-align, #optionsframework .controls .of-typography-weight, #optionsframework .controls .of-typography-color { width: auto; margin: 0 10px 10px 0; float: left; }

#optionsframework .controls .of-typography-cface{width:250px;padding: 4px 5px 5px; background: #f1f1f1; font-size: 11px; }
#optionsframework .controls .of-typography-cface:focus{background: #ffffff;}
#optionsframework .section-typography .wp-color-result.wp-picker-open { vertical-align: top; }

#optionsframework .of-background-properties{clear:both;margin-top:18px}
#optionsframework .controls .of-background-repeat{width:125px;height:auto;margin-right:5px;float:left}
#optionsframework .controls .of-background-position{width:125px;height:auto;margin-right:5px;float:left}
#optionsframework .controls .of-background-attachment{width:125px;height:auto;margin-right:5px;float:left}
#optionsframework .section-background .wp-picker-container{margin-bottom:10px}
#optionsframework .controls .of-radio-img-img{border:3px solid #f9f9f9;margin:0 5px 10px 0;display:none;cursor:pointer;float:left}
#optionsframework .controls .of-radio-img-selected{border:3px solid #0cb9e4}
#optionsframework .controls .of-radio-img-img:hover{opacity:.8}
#optionsframework .controls .of-border-width{width:80px;float:left}
#optionsframework .controls .of-border-style{width:120px;float:left}
#optionsframework .hide{display:none}
#optionsframework .of-option-image{max-width:340px;margin:3px 0 18px}
#optionsframework .mini .controls select,#optionsframework .section .mini .controls{width:140px;height:auto}
#optionsframework .mini .controls input,#optionsframework .mini .controls{min-width:140px;width:140px}
#optionsframework .mini .explain{max-width:74%}
#optionsframework .section-editor .explain{max-width:98%;float:none;margin-bottom:5px}
#optionsframework .controls input.upload{width:80%}
#optionsframework .controls input.upload_button{float:right;border-color:#BBBBBB;cursor:pointer}
#optionsframework .controls input.upload_button:hover{border-color:#666666;color:#000}
#optionsframework .screenshot{float:left;margin-left:1px;position:relative;width:344px;margin-top:3px}
#optionsframework .screenshot img{background:#FAFAFA;border-color:#ccc #eee #eee #ccc;border-style:solid;border-width:1px;float:left;max-width:334px;padding:4px;margin-bottom:10px}
#optionsframework .screenshot .remove-image{background:url(../images/ico-delete.png) no-repeat;border:medium none;bottom:4px;display:block;float:left;height:16px;padding:0;position:absolute;left:-4px;text-indent:-9999px;width:16px}
#optionsframework .screenshot .no_image .file_link{margin-left:20px}
#optionsframework .screenshot .no_image .remove-button{bottom:0}
#optionsframework .reset-button{cursor:pointer;float:left;font-size:15px;height:40px}
#optionsframework-submit{padding:7px 10px;border-top:1px solid #ECECEC;background-color:#F1F1F1;background-image:-moz-linear-gradient(center top,#F9F9F9,#ECECEC)}
#optionsframework .button-primary{float:right;font-size:15px;height:40px}
#optionsframework .section:after{content:"";display:table;clear:both}
#optionsframework .donation{font-size:15px;line-height:1.5}
#optionsframework .donation a{text-decoration:none;color:#14aafd}
#optionsframework .featured-area-title{color:#0EC2EA;float:left;font-size:19px;font-weight:bold;margin-top:20px;padding:0 100px 10px 0;text-shadow:-1px 1px 1px #FFFFFF; text-transform: uppercase;}
#optionsframework textarea,#optionsframework input[type="text"],#optionsframework input[type="password"],#optionsframework input[type="file"],#optionsframework input[type="email"],#optionsframework input[type="number"],#optionsframework input[type="search"],#optionsframework input[type="tel"],#optionsframework input[type="url"],#optionsframework select{border-color:#CCCCCC;padding:5px;line-height:1.5; box-shadow: none; border-radius: 3px;}
#optionsframework a.extendlink{float:right;height:50px;width:290px}
#optionsframework-metabox.metabox-holder{float:right;padding:0;width:850px;box-shadow:none}
#wpbody-content #optionsframework.postbox{box-shadow:none;margin:0}
.icon32.icon-appearance,#icon-themes{display:none}
#optionsframework-wrap{background:#DDDDDD;display:block;overflow:hidden;width:1070px;border-radius:10px;box-shadow:0 0 3px 1px #AAAAAA;margin:20px 0}
#optionsframework-wrap h2{min-height:60px;background:url(../images/d5logo.png) no-repeat scroll 30px center #cccccc;background:url(../images/d5logo.png) no-repeat scroll 30px center,-moz-linear-gradient(top,#cccccc 0%,#f7f7f7 38%,#f2f2f2 55%,#f5f5f5 100%);background:url(../images/d5logo.png) no-repeat scroll 30px center,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#cccccc),color-stop(38%,#f7f7f7),color-stop(55%,#f2f2f2),color-stop(100%,#f5f5f5));background:url(../images/d5logo.png) no-repeat scroll 30px center,-webkit-linear-gradient(top,#cccccc 0%,#f7f7f7 38%,#f2f2f2 55%,#f5f5f5 100%);background:url(../images/d5logo.png) no-repeat scroll 30px center,-o-linear-gradient(top,#cccccc 0%,#f7f7f7 38%,#f2f2f2 55%,#f5f5f5 100%);background:url(../images/d5logo.png) no-repeat scroll 30px center,-ms-linear-gradient(top,#cccccc 0%,#f7f7f7 38%,#f2f2f2 55%,#f5f5f5 100%);background:url(../images/d5logo.png) no-repeat scroll 30px center,linear-gradient(to bottom,#cccccc 0%,#f7f7f7 38%,#f2f2f2 55%,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#f5f5f5',GradientType=0);border-bottom:1px solid #f4f4f4;color:#00C7EF;float:right;font-size:40px;font-weight:700;padding:40px 10px 0;text-align:right;text-shadow:1px 1px 0 #FFFFFF;width:100%}
#optionsframework-wrap div.updated p,#optionsframework-wrap div.error p{background:#0376b8;border-radius:5px;color:#FFFFFF;font-size:20px;left:370px;margin:0 auto;padding:5px 10px;position:absolute;top:30px}
#optionsframework-wrap .nav-tab-wrapper{width:201px;margin-top:143px;position:absolute;z-index:100;background:transparent;border:none;text-align:left;padding:0;margin-right:850px}
#optionsframework-wrap h2 .nav-tab{width:100%;border:none;border-top:1px solid #AAAAAA;border-bottom:1px solid #EEEEEE;color:#00C7EF}
#optionsframework-wrap h2 .nav-tab:hover,#optionsframework-wrap h2 .nav-tab-active{border:none;border-top:1px solid #EEEEEE;border-bottom:1px solid #AAAAAA;color:#08718c;background:#F5F5F5;z-index:100}
#optionsframework-wrap h2 .nav-tab{padding:10px;font-size:17px;color:#555555;font-weight:500}
#optionsframework-wrap h2 .nav-tab:hover,#optionsframework-wrap h2 .nav-tab-active{background:#0CB9E4;color:#FFFFFF;text-shadow:none}
#optionsframework-wrap h2 .nav-tab-active:after{border:11px solid transparent;content:" ";height:0;pointer-events:none;position:absolute;width:0;border-right-color:#F5F5F5;margin:2px -20px 0 0;margin-top:2px;right:0}
#optionsframework .sub-item{border-bottom:3px solid #0EC2EA}
#optionsframework .featured-area-sub-title{background:#555555;color:#EEEEEE;display:block;font-size:20px;font-weight:bold;padding:10px;text-align:center;width:97%; margin-top: 30px; }
#optionsframework-wrap .nav-tab{margin:0}
#optionsframework-wrap form{margin:-20px 0 0}
#optionsframework .button{min-height:31px;margin-top:1.3px}
.infohead{background:#333333;border:3px solid #14AAFD;border-radius:10px;color:#EEEEEE;padding:10px;text-shadow:-1px -1px 0 #000000;transition:all .75s;-moz-transition:all .75s;-o-transition:all .75s;-webkit-transition:all .75s;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif}
.infohead:hover{background:#111111;border:3px solid #ee510c}
a.extendlink{float:right;height:50px;width:290px}
#optionsframework-wrap .speciald5op { background: #FFF; padding: 10px; border-left: 5px solid #0CF; }
#optionsframework-wrap .speciallf { font-size: 15px; line-height: 2;  }

#optionsframework-wrap #optionsframework select {  -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f1f1f1 url("../images/select.png") no-repeat scroll right center; padding: 3px 30px 3px 3px ; }
#optionsframework-wrap #optionsframework select option { background: #ffffff; }
#optionsframework .wp-color-result { height: 26px; }
#optionsframework .wp-color-result:after { line-height: 26px; }
#optionsframework  .wp-color-picker { border: 1px solid #cccccc; border-radius: 3px; width: 100px; }

#optionsframework .shorterobject { background: #eeeeee; border: 1px solid #dddddd;  border-radius: 5px; margin: 0; padding: 20px; }
#optionsframework .sorterli { background: #555555; border-radius: 5px; color: #ffffff; cursor: move; font-size: 15px; font-weight: bold; list-style: outside none none; margin: 10px auto; padding: 13px 20px; text-align: center; width: 250px; }
#optionsframework .sorterli:hover { background: #777777; }
#optionsframework .of-sorter { display: none; }
#optionsframework .typoshow { background: #f7f7f7; border: 1px solid #dddddd; border-radius: 5px; margin: 10px auto; padding: 10px; font-size: 19px; line-height: 1.3; float: left; }

.onoffswitch { position: relative; width: auto; min-width: 100px; display: inline-block; vertical-align: top; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; z-index: -1; }
#optionsframework .onoffswitch-checkbox { display: none; }
.onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 1px solid #dddddd; border-radius: 20px; }
.onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; }
.onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 35px; padding: 0; line-height: 35px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }
.onoffswitch-inner:before { content: "ON"; padding-left: 10px; background-color: #0ec2ea; color: #FFFFFF; }
.onoffswitch-inner:after { content: "OFF"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; }
.onoffswitch-switch { display: block; width: 23px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; right: calc( 100% - 38px );
    border: 2px solid #cccccc; border-radius: 20px; transition: all 0.3s ease-in 0s; }
.onoffswitch-checkbox:checked +  .onoffswitch-label .onoffswitch-inner { margin-left: 0px; }
.onoffswitch-checkbox:checked +  .onoffswitch-label .onoffswitch-switch { right: 0px; }
#optionsframework .explainswitch { z-index: 11; width: 100%; height: 50px; margin-top: -50px; display: block; }

#optionsframework .ofnote { background: #0376b8; color: #ffffff; margin: 5px 0; padding: 10px; text-align: center; }

#optionsframework .section-radio label, #optionsframework .section-checkbox label, #optionsframework .section-multicheck label { background: #e5e5e5; margin: 3px auto; max-width: 90%; padding: 10px 15px 10px 0; width: 90%; border-radius: 3px; vertical-align: middle; border-left: 5px solid #e5e5e5; }
#optionsframework .section-radio label::before, #optionsframework .section-checkbox label::before, #optionsframework .section-multicheck label::before { content: "\f159"; font-family: dashicons; vertical-align: middle; font-size: 17px; position: absolute; }
#optionsframework .section-radio label.ui-state-active, #optionsframework .section-checkbox label.ui-state-active, #optionsframework .section-multicheck label.ui-state-active { background: #ffffff; }
#optionsframework .section-radio label .ui-button-text, #optionsframework .section-checkbox label .ui-button-text, #optionsframework .section-multicheck label .ui-button-text { width: calc(100% - 25px); float: right; }
#optionsframework .section-radio label.ui-state-active::before, #optionsframework .section-checkbox label.ui-state-active::before, #optionsframework .section-multicheck label.ui-state-active::before { content: "\f147"; font-family: dashicons; vertical-align: middle; font-size: 17px; color: #0ec2ea; position: absolute; margin-left: 3px; border: 1px solid #0ec2ea; line-height: 1; }
#optionsframework .section-checkbox label { width: auto; min-width: 300px; }