/*
Demo - Slide Out 
*/
/* 
    Created on : 19-Nov-2015, 10:40:45
    Author     : Angry Frog
*/

#slideout {
    position: fixed;
    width: 40px;
    height: 40px;
    top: 80px;
    right: -1px;
    padding: 6px;
    font-size: 12px;
    background-color: #3399FF;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
    z-index: 2222;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #FFFFFF;
}
#slideout #slider-cog {
    text-align: center;
    font-size: 22px;
}
#slideout_header {
    position: fixed;
    width: 250px;
    height: 40px;
    top: 80px;
    right: -250px;
    padding: 5px;
    margin-left: 40px;
    font-size: 22px;
    background-color: #3399FF;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}
#slideout_inner {
    position: fixed;
    width: 250px;
    top: 120px;
    right: -250px;
    padding: 16px;
    background-color: rgba(79, 82, 83, 1);
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}
 
#slideout:hover {
    right: 250px;
}
#slideout:hover #slideout_inner,
#slideout:hover #slideout_header {
    right: 0px;
}
#slideout .option-title {
    font-size: 12px;
    margin-bottom: 4px;
}

.demo-color-list {
    padding: 0;
    text-align: left;
    margin: 0;
}
.demo-color-list li span, 
.demo-color-list li {
    height: 20px;
    width: 20px;
    display: inline-block;
}

.demo-color-list li:hover, .demo-color-list li span:hover {
    cursor: pointer;
}

/* Coloured Buttons */
.demo-color-list .demo-theme-default {
    background-color: rgba(51, 152, 254, 1);
    border: 5px solid rgba(59, 63, 64, 1);
    border-top: 5px solid rgba(242, 242, 243, 1);
    border-bottom: 5px solid rgba(51, 152, 254, 1);
    border-right: 5px solid rgba(51, 152, 254, 1);
}
.demo-color-list .demo-theme-darkblue {
    background-color: rgba(51, 152, 254, 1);
    border: 5px solid rgba(59, 63, 64, 1);
    border-bottom: 5px solid rgba(51, 152, 254, 1);
    border-right: 5px solid rgba(51, 152, 254, 1);
}
.demo-color-list .demo-theme-darknight {
    background-color: rgba(96, 102, 103, 1);
    border: 5px solid rgba(59, 63, 64, 1);
    border-bottom: 5px solid rgba(96, 102, 103, 1);
    border-right: 5px solid rgba(96, 102, 103, 1);
}
.demo-color-list .demo-theme-purplehaze {
    background-color: rgba(168, 117, 161, 1);
    border: 5px solid #412A3E;
    border-top: 5px solid rgba(242, 242, 243, 1);
    border-bottom: 5px solid rgba(168, 117, 161, 1);
    border-right: 5px solid rgba(168, 117, 161, 1);
}
.demo-color-list .demo-theme-greywind {
    background-color: rgba(87,87,87, 1);
    border: 5px solid rgba(115, 118, 120, 1);
    border-top: 5px solid rgba(242, 242, 243, 1);
    border-bottom: 5px solid rgba(87,87,87, 1);
    border-right: 5px solid rgba(87,87,87, 1);
}
.demo-color-list .demo-theme-bluebreeze {
    background-color: rgba(12, 60, 91, 1);
    border: 5px solid rgba(41, 82, 109, 1);
    border-top: 5px solid rgba(242, 242, 243, 1);
    border-bottom: 5px solid rgba(12, 60, 91, 1);
    border-right: 5px solid rgba(12, 60, 91, 1);
}
.demo-color-list .demo-theme-redmist {
    background-color: #800A2B;
    border: 5px solid #9A334F;
    border-bottom: 5px solid #800A2B;
    border-right: 5px solid #800A2B;
}



.demo-color-list .demo-default-blue {
    background-color: #3399FF;
}
.demo-color-list .demo-blue {
    background-color: #1F7BB6;
}
.demo-color-list .demo-purple {
    background-color: #986291;
}
.demo-color-list .demo-theme-purple {
    background-color: #a975a2;
}
.demo-color-list .demo-green {
    background-color: #0E9E0E;
}
.demo-color-list .demo-theme-green {
    background-color: #44ce44;
}
.demo-color-list .demo-dark {
    background-color: #3B3F40;
}
.demo-color-list .demo-lightgrey {
    background-color: #F3F3F4;
}