/*SETTINGS PANEL*/
      
.slide-out-div {padding: 0 20px 20px; width: 250px; height: 100%; background: #3a3a3a; z-index: 1001; top: 0!important;}

.slide-out-div h1, .slide-out-div h2, .slide-out-div h3, .slide-out-div h4, .slide-out-div h5, .slide-out-div h6, .slide-out-div p {color: #fff !important; line-height: 1;}
.slide-out-div h3 {font-size: 20px}
.slide-out-div h4 {font-size: 17px;}
.slide-out-div h5 {font-size: 15px; margin-left: 25px;}

.handle {top: 200px!important; background:url(graphics/demo_only/features_tab.png) top left no-repeat !important;}
.handle:hover {background:url(graphics/demo_only/features_tab.png) bottom left no-repeat !important;}

.setting {clear: both; margin-top: 20px;}

.setting p {margin: 0; font-size: 13px;}
.setting ul {margin-top: 0; margin-left: 5px; font-size: 13px;}
.setting li {color: #fff;}

.setting a {color: #eee !important; text-decoration: underline;}
.setting a:hover {text-decoration: none; border-bottom: 1px solid #eee;}

.color-selector.setting a.styleswitch {
    display: block;
    float: left;
    margin: 4px; 
    border-radius: 35px;
    -webkit-border-radius: 35px;
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    overflow: hidden;
    border: none;
}

/* Other Demo Styles */

.countdown.top #countdown-bar {bottom: auto; top: 0;}
.wrapper.top {margin-top: 80px;}

.footer-logo-img {display: none;}
.footer-logo {
	display: block;
	width: 100%;
	height: 100px;
	margin-top: 35px;
	background-repeat: no-repeat;
	background-size: contain !important;
}

.value-icons img {display:none;}
.value-icons {
	display: block;
	width: 100%;
	height: 125px;
	background-repeat: no-repeat;
	background-size: contain !important;
}

.features-wrapper {overflow-y: auto;} /* The height of this is dynamically generated from the settings slideout JS file */

.acc h4{cursor:pointer; margin-top:5px; padding-left:14px; background-image: url("graphics/demo_only/trianle-forward.png"); background-repeat: no-repeat; background-position:0 5px; background-size:8px;}
.acc h4:hover{text-decoration:underline;}
.acc h4.current{background-image: url("graphics/demo_only/triangle-down.png"); background-repeat: no-repeat; background-position:0 5px; background-size:8px;}

.mobile-preview { margin-top: 50px; text-align: left; font-size: 12px;}
.mobile-preview a{color: #eee !important; text-decoration: underline;}
.mobile-preview a:hover{text-decoration: none; border-bottom:1px solid #eee;}

.demo-layouts .columns {margin-bottom: 25px;}

/* yBox - Reveal Modal */
#yboxDemo {max-width: 700px; margin: auto; border-radius: 10px; -webkit-border-radius: 10px;}

/* ySite Builder */
#ysite-builder {border: 1px solid #ddd;}
#ysite-builder img {border-radius: 0; -webkit-border-radius: 0;}

/* emmbership rates */
.membership-icon {display: block; width: 100%; height: 50px; background-repeat: no-repeat; background-size: contain !important;}
.membership-icon img{display: none;}