#guidat { font: 9px Monaco, monospace; color: #fff; position: fixed; width: 250px; z-index: 200; opacity: 0.95; top: 0; left: 100%; margin-left: -270px; background-color: #fff; -moz-transition: margin-top .2s ease-out; -webkit-transition: margin-top .2s ease-out; transition: margin-top .2s ease-out; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } #guidat-controllers { height: 300px; overflow-y: auto; background-color: #eee; } #guidat-toggle { text-decoration: none; cursor: pointer; color: #fff; background-color: #222; text-align: center; display: block; padding: 5px; } #guidat-toggle:hover { background-color: #000; } .guidat-controller { padding: 5px; height: 23px; clear: left; border-bottom: 1px solid #444; background-color: #111; } .guidat-controller input { float: right; clear: both; border: 0; padding: 2px; } .guidat-controller.number input[type=number] { width: 55px; } .guidat-controller.string { border-left-color: #0af; } .guidat-controller:nth-child(even) { background-color: #1a1a1a; } .guidat-controller:last-child { -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); } .guidat-propertyname { padding: 5px; display: inline-block; }