Email subscribe Modal Window

dabblet.css

body {
	background: url("http://f.cl.ly/items/1P1B36222g1t462j3W3Q/cd4.png");
}
input[type="text"] {outline: none;}


/* Email subscribe Modal Window */
#modal-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
}
#modal-box {
    background: #728e84 url("http://f.cl.ly/items/3D290L1R160W470M1h0x/semail_sub_bg.png");
    position: fixed;
    z-index: 1001;
    width: 368px;
    height: 305px;
   /* border: 6px solid #f0f0f0; */
    border-top: #414c49 1px solid;
    border-bottom: #78938c 1px solid;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
#subscribeWrap{
	width: 284px;
	height: 30px;
	margin: 235px 0 15px 40px;
	background: #505c58;
	padding: 1px 4px 6px 5px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	border-bottom: #78938c 1px solid;
	border-top: #414c49 1px solid;
}
#subscribeField{
    width: 210px;
    height: 30px;
    border: none;
    background: #505c58;
    font-size: 16px;
    color: #ffffff;
}
#subscribeSubmit{
    width: 70px;
    height: 30px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #494949;
    background: #efefef;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#c6c4c4');
    background: -moz-linear-gradient(top, #efefef 0%, #c6c4c4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#c6c4c4));
    background: -webkit-linear-gradient(top, #efefef 0%,#c6c4c4 100%);
    background: -o-linear-gradient(top, #efefef 0%,#c6c4c4 100%);
    background: -ms-linear-gradient(top, #efefef 0%,#c6c4c4 100%);
    background: linear-gradient(top, #efefef 0%,#c6c4c4 100%);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border-bottom: #3d4643 1px solid;
}
#subscribeSubmit:hover{
    background: #c6c4c4;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6c4c4', endColorstr='#efefef');
    background: -moz-linear-gradient(top, #c6c4c4 0%, #efefef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c4c4), color-stop(100%,#efefef));
    background: -webkit-linear-gradient(top, #c6c4c4 0%,#efefef 100%);
    background: -o-linear-gradient(top, #c6c4c4 0%,#efefef 100%);
    background: -ms-linear-gradient(top, #c6c4c4 0%,#efefef 100%);
    background: linear-gradient(top, #c6c4c4 0%,#efefef 100%);
}

dabblet.html

<div id="modal-mask" style=""></div>
<div id="modal-box">

     <div id="subscribeWrap">
	<form id="subscribe">
	    <input id="subscribeField" type="text" value="Enter your email..." />
	    <input id="subscribeSubmit" type="submit" value="Subscribe" />
	</form>
     </div>

</div>


























<span class="show-modal">Click here to show the modal...</span>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}