color selector?

by jpeter06

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div style="background:black;height:60px">
    <div id="out" style="width:200px"></div>
    <div id="css_selector">
    <div class="dark_theme" rel="css/proto_dark.css"></div>
    <div class="clear_theme" rel="css/proto_clear.css"></div>
    <div class="blue_theme" rel="css/proto_blue.css"></div>
    <div class="orange_theme" rel="css/proto_orange.css"></div>
</div></div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}



#css_selector{
    position:relative;
    display:block;
    margin: 0;
    top: 50%;
   transform: translateY( -50%) ; /*rotateY(-20deg);*/
    width:30px;
    height:30px;
    float:right;
    margin-right:113px;
    background-color:#999;
}

#css_selector div{
    position: relative; 
    float:left;
    width:50%;
    height:50%;
    box-sizing: border-box;
    border: 2px solid #999;
}

.dark_theme{ background:#555;}
.clear_theme{ background:#eee;}
.blue_theme{ background:#56e;}
.orange_theme{ background:#fa0;}



#css_selector div:hover{
       color:#FFF;
    border-color: white;
    transition:  border-color 0.3s ease 0s;
}

JavaScript

$(document).ready(function() {
	$("#css_selector div").click(function() {
		$("#out").html($(this).attr('rel'));
		//$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});