<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var class_set = ["wallet_outer","cash_behind","cash_behind_left","cash_behind_cover","cash_front","cash_front_left","cash_front_right","cash_front_cover","leftshade","leftshadecover","rightshade","rightshadecover","cover","cover2","cover3","buckle","buckleshade","buckleshadecover","buckledropshade","clip"];
$(function(){
for( i=0; i<class_set.length; i++ ) {
$("#button"+(i+1))
.attr("type", "button")
.val(class_set[i])
.click(function(){
$(this).css(
{
"background-color":"#404040",
"color":"#FFFFFF",
}
);
$("#"+this.value).addClass(this.value);
});
}
});
for( i=0; i<class_set.length; i++ ) {
document.write("<input id=\"button"+(i+1)+"\"> \n" );
}
</script>
<!-- wallet -->
<div class="container">
<div id="wallet_outer">
<div id="leftshade"></div>
<div id="leftshadecover"></div>
<div id="rightshade"></div>
<div id="rightshadecover"></div>
<div id="cover"></div>
<div id="cover2"></div>
<div id="cover3"></div>
<div id="cash_behind"></div>
<div id="cash_behind_left"></div>
<div id="cash_behind_cover"></div>
<div id="cash_front"></div>
<div id="cash_front_left"></div>
<div id="cash_front_right"></div>
<div id="cash_front_cover"></div>
<div id="buckledropshade"></div>
<div id="buckle">
<div id="buckleshade"></div>
<div id="buckleshadecover"></div>
<div id="clip"></div>
</div>
</div>
</div>
<style>
.container {
margin-top:55px;
}
.wallet_outer {
width:375px;
height:300px;
border:8px solid #111;
border-radius:30px;
background:#74593D;
}
.cash_behind {
border:8px solid #111;
border-radius:40px 40px 0px 0px;
background:#5D7D51;
height:88px;
width:240px;
position:absolute;
margin-top:-35px;
margin-left:58px;
}
.cash_behind_left {
border-radius:30px 0px 0px 0px;
background:#739866;
height:87px;
width:40px;
position:absolute;
margin-top:-26px;
margin-left:67px;
}
.cash_behind_cover {
border-radius:30px 0px 0px 0px;
background:#5D7D51;
height:87px;
width:40px;
position:absolute;
margin-top:-26px;
margin-left:75px;
}
.cash_front {
border:8px solid #111;
border-radius:40px 40px 0px 0px;
background:#739866;
height:61px;
width:240px;
position:absolute;
margin-top:-8px;
margin-left:90px;
}
.cash_front_left {
background:#91B185;
height:61px;
width:30px;
position:absolute;
margin-left:98px;
border-radius:35px 0px 0px 0px;
}
.cash_front_right {
background:#5D7D51;
height:61px;
width:30px;
position:absolute;
margin-left:307px;
border-radius:0px 35px 0px 0px;
}
.cash_front_cover {
border-radius:30px 30px 0px 0px;
background:#739866;
height:61px;
width:222px;
position:absolute;
margin-left:107px;
}
.leftshade {
position:absolute;
height:300px;
width:30px;
background:#806346;
border-radius:26px 0px 0px 26px;
}
.leftshadecover {
position:absolute;
margin-left:13px;
height:300px;
width:30px;
background:#74593D;
border-radius:26px 0px 0px 26px;
}
.rightshade {
position:absolute;
height:300px;
width:44px;
margin-left:331px;
background:#695037;
border-radius:0px 26px 26px 0px;
}
.rightshadecover {
position:absolute;
height:240px;
width:32px;
margin-left:331px;
margin-top:60px;
background:#74593D;
border-radius:0px 26px 26px 0px;
}
.cover {
position:absolute;
margin-top:-7px;
margin-left:20px;
height:60px;
width:30px;
background:#695037;
z-index:3;
border-radius:40px 0px 0px 40px;
border:8px solid #111;
}
.cover2 {
position:absolute;
margin-top:61px;
margin-left:307px;
height:60px;
width:60px;
background:#74593D;
z-index:1;
border-radius:0px 40px 0px 0px;
border:8px solid #111;
}
.cover3 {
position:absolute;
margin-top:69px;
margin-left:300px;
height:31px;
width:30px;
background:#74593D;
z-index:4;
}
.buckle {
margin-top:100px;
margin-left:220px;
width:180px;
height:100px;
background:#957657;
border:8px solid #111;
border-radius:35px 10px 35px 35px;
position:absolute;
z-index:3;
}
.buckleshade {
background:#AE8F71;
height:100px;
width:25px;
position:absolute;
margin-left:0px;
border-radius:40px 0px 0px 40px;
z-index:1;
}
.buckleshadecover {
background:#957657;
height:100px;
width:35px;
position:absolute;
margin-left:10px;
border-radius:20px 0px 0px 20px;
z-index:1;
}
.buckledropshade {
background:#695037;
height:30px;
width:140px;
position:absolute;
margin-left:225px;
margin-top:195px;
border-radius:0px 0px 0px 30px;
z-index:0;
}
.clip {
z-index:2;
border:8px solid #111;
border-radius:55px;
position:absolute;
width:55px;
height:55px;
margin-left:20px;
margin-top:14px;
background: rgba(255,187,0,1);
background: -moz-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,187,0,1)), color-stop(49%, rgba(255,187,0,1)), color-stop(54%, rgba(240,176,0,1)), color-stop(100%, rgba(240,176,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: linear-gradient(135deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb00', endColorstr='#f0b000', GradientType=1 );
}
</style>