.monitor

btn.css

/*

/--------------------------- |                           |
|       I'm lovin' it!      |
|                           |
\---------------------------/

/--------------------------- |                           |
|       I'm lovin' it!      |     (.fat)
|                           |
\---------------------------/
\---------------------------/

*/
/*
 * Common properties
 */
/*
 * Specific properties
 */
/*
 * Pre-defined styles
 *
 *   - mango (or <none>): Default
 *   - supradine:         vitamin C
 *   - golf:              grass
 *   - eelv:              Eva Jolie
 *   - barbie:            "Hi Barbie! — Hi Ken!"
 *   - leather:           100%
 *   - sky:               in the clouds
 *   - blueberry:         for the color
 *   - radium:            Marie Curie
 */
.btn,
.btn .mango {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid;
  border-radius: 0.35em;
  cursor: pointer;
  font-family: "Arial Black", sans-serif;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -ms-transition: background-color 0.3s;
  transition: background-color 0.3s;
/*&:hover*/
  background-color: #ffc502;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,157,4,0.00)), color-stop(1, #ff9d04));
  background-image: -webkit-linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: -moz-linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ffc502;
/*
   * Fat
   */
}
.btn.fat,
.btn .mango.fat {
  margin-bottom: 0.35em;
}
.btn.fat.active:not(.disabled):not([disabled]),
.btn .mango.fat.active:not(.disabled):not([disabled]),
.btn.fat:active:not(.disabled):not([disabled]),
.btn .mango.fat:active:not(.disabled):not([disabled]) {
  position: relative;
  top: 0.24999999999999997em;
}
.btn.disabled,
.btn .mango.disabled,
.btn[disabled],
.btn .mango[disabled] {
  background-color: #ccc !important;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(143,143,143,0.00)), color-stop(1, #8f8f8f)) !important;
  background-image: -webkit-linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  background-image: -moz-linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  background-image: linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  color: text-color;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30) !important;
  border-color: #ccc !important;
  cursor: not-allowed !important;
}
.btn.disabled.fat,
.btn .mango.disabled.fat,
.btn[disabled].fat,
.btn .mango[disabled].fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #646464, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50) !important;
}
.btn:hover:not(.disabled):not([disabled]),
.btn .mango:hover:not(.disabled):not([disabled]) {
  background-color: #ffdc67;
}
.btn.active:not(.disabled):not([disabled]),
.btn .mango.active:not(.disabled):not([disabled]),
.btn:active:not(.disabled):not([disabled]),
.btn .mango:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,157,4,0.00)), color-stop(1, #ff9d04));
  background-image: -webkit-linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: -moz-linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
}
.btn.fat,
.btn .mango.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #985101, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.fat.active:not(.disabled):not([disabled]),
.btn .mango.fat.active:not(.disabled):not([disabled]),
.btn.fat:active:not(.disabled):not([disabled]),
.btn .mango.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.supradine {
  background-color: #ff8e01;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,92,1,0.00)), color-stop(1, #ff5c01));
  background-image: -webkit-linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: -moz-linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ff8e01;
/*
   * Fat
   */
}
.btn.supradine:hover:not(.disabled):not([disabled]) {
  background-color: #ffbb67;
}
.btn.supradine.active:not(.disabled):not([disabled]),
.btn.supradine:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,92,1,0.00)), color-stop(1, #ff5c01));
  background-image: -webkit-linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: -moz-linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
}
.btn.supradine.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #832f01, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.supradine.fat.active:not(.disabled):not([disabled]),
.btn.supradine.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.golf {
  background-color: #8ec301;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(107,146,1,0.00)), color-stop(1, #6b9201));
  background-image: -webkit-linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: -moz-linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #8ec301;
/*
   * Fat
   */
}
.btn.golf:hover:not(.disabled):not([disabled]) {
  background-color: #cbfe44;
}
.btn.golf.active:not(.disabled):not([disabled]),
.btn.golf:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(107,146,1,0.00)), color-stop(1, #6b9201));
  background-image: -webkit-linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: -moz-linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
}
.btn.golf.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #3d5207, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.golf.fat.active:not(.disabled):not([disabled]),
.btn.golf.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.donation,
.btn.eelv {
  background-color: #c6e005;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,186,4,0.00)), color-stop(1, #9cba04));
  background-image: -webkit-linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: -moz-linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #c6e005;
/*
   * Fat
   */
}
.btn.donation:hover:not(.disabled):not([disabled]),
.btn.eelv:hover:not(.disabled):not([disabled]) {
  background-color: #e8fb5a;
}
.btn.donation.active:not(.disabled):not([disabled]),
.btn.eelv.active:not(.disabled):not([disabled]),
.btn.donation:active:not(.disabled):not([disabled]),
.btn.eelv:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(156,186,4,0.00)), color-stop(1, #9cba04));
  background-image: -webkit-linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: -moz-linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
}
.btn.donation.fat,
.btn.eelv.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #547002, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.donation.fat.active:not(.disabled):not([disabled]),
.btn.eelv.fat.active:not(.disabled):not([disabled]),
.btn.donation.fat:active:not(.disabled):not([disabled]),
.btn.eelv.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.barbie {
  background-color: #fa04bd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(194,20,151,0.00)), color-stop(1, #c21497));
  background-image: -webkit-linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: -moz-linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ba1ac2;
/*
   * Fat
   */
}
.btn.barbie:hover:not(.disabled):not([disabled]) {
  background-color: #fd68d8;
}
.btn.barbie.active:not(.disabled):not([disabled]),
.btn.barbie:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(194,20,151,0.00)), color-stop(1, #c21497));
  background-image: -webkit-linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: -moz-linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
}
.btn.barbie.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #790e5e, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.barbie.fat.active:not(.disabled):not([disabled]),
.btn.barbie.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.leather,
.btn.alert {
  background-color: #dc4109;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(152,55,22,0.00)), color-stop(1, #983716));
  background-image: -webkit-linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: -moz-linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #dc4109;
/*
   * Fat
   */
}
.btn.leather:hover:not(.disabled):not([disabled]),
.btn.alert:hover:not(.disabled):not([disabled]) {
  background-color: #f8865d;
}
.btn.leather.active:not(.disabled):not([disabled]),
.btn.alert.active:not(.disabled):not([disabled]),
.btn.leather:active:not(.disabled):not([disabled]),
.btn.alert:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(152,55,22,0.00)), color-stop(1, #983716));
  background-image: -webkit-linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: -moz-linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
}
.btn.leather.fat,
.btn.alert.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #441906, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.leather.fat.active:not(.disabled):not([disabled]),
.btn.alert.fat.active:not(.disabled):not([disabled]),
.btn.leather.fat:active:not(.disabled):not([disabled]),
.btn.alert.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.publication,
.btn.sky {
  background-color: #10c5fa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(49,171,194,0.00)), color-stop(1, #31abc2));
  background-image: -webkit-linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: -moz-linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #10c5fa;
/*
   * Fat
   */
}
.btn.publication:hover:not(.disabled):not([disabled]),
.btn.sky:hover:not(.disabled):not([disabled]) {
  background-color: #70dcfc;
}
.btn.publication.active:not(.disabled):not([disabled]),
.btn.sky.active:not(.disabled):not([disabled]),
.btn.publication:active:not(.disabled):not([disabled]),
.btn.sky:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(49,171,194,0.00)), color-stop(1, #31abc2));
  background-image: -webkit-linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: -moz-linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
}
.btn.publication.fat,
.btn.sky.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #043d48, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.publication.fat.active:not(.disabled):not([disabled]),
.btn.sky.fat.active:not(.disabled):not([disabled]),
.btn.publication.fat:active:not(.disabled):not([disabled]),
.btn.sky.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.blueberry {
  background-color: #5f78ab;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(64,82,120,0.00)), color-stop(1, #405278));
  background-image: -webkit-linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: -moz-linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #5f78ab;
/*
   * Fat
   */
}
.btn.blueberry:hover:not(.disabled):not([disabled]) {
  background-color: #9faecd;
}
.btn.blueberry.active:not(.disabled):not([disabled]),
.btn.blueberry:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(64,82,120,0.00)), color-stop(1, #405278));
  background-image: -webkit-linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: -moz-linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
}
.btn.blueberry.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #232c41, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.blueberry.fat.active:not(.disabled):not([disabled]),
.btn.blueberry.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.radium {
  background-color: #4ce229;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(57,170,54,0.00)), color-stop(1, #39aa36));
  background-image: -webkit-linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: -moz-linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #4ce229;
/*
   * Fat
   */
}
.btn.radium:hover:not(.disabled):not([disabled]) {
  background-color: #94ee7f;
}
.btn.radium.active:not(.disabled):not([disabled]),
.btn.radium:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(57,170,54,0.00)), color-stop(1, #39aa36));
  background-image: -webkit-linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: -moz-linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
}
.btn.radium.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #194802, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.radium.fat.active:not(.disabled):not([disabled]),
.btn.radium.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}

dabblet.css

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
body {background:url(https://three-iscool.iscoolcdn.com/assets/prod/bundles/core/look/back_general_2.6588390d20c53e62152cc383e827e7b6.jpg) center;}

.monitor img {width:100%;}

.monitor .btn {font-size:50%; position:absolute; top:100%; right:0; margin-top:1em;}

/*
 * .monitor
 *
 * $color = black
 */

.monitor {display:inline-block; position:relative; z-index:0;}
.monitor .screen {
  background-color:white; border-radius:.5em; padding:.8em; box-sizing:border-box; box-shadow:0 0 2em rgba(0,0,0,.25), inset 0 0 .5em rgba(0,0,0,.2); position:relative; text-align:center;
  background-image:-webkit-linear-gradient(125deg, rgba(0, 0, 0, .1), transparent);background-image:-moz-linear-gradient(125deg, rgba(0, 0, 0, .1), transparent);background-image:-ms-linear-gradient(125deg, rgba(0, 0, 0, .1), transparent);background-image:linear-gradient(125deg, rgba(0, 0, 0, .1), transparent);




}
.monitor .screen:before {content:"KIWY"; display:inline-block; width:3em; position:absolute; bottom:0; left:50%; margin-left:-1.5em; margin-bottom:.25em; font-size:50%; color:silver; font-family:"Arial Black";}
.monitor .screen > .in {display:block; width:16em; height:9em; background-color:white; overflow:hidden; box-shadow:inset 0 0 .3em rgba(0,0,0,.3); border:1px inset rgba(255,255,255,.5);}
.monitor .base {display:block; margin:0 auto; width: 5em; height:2.5em; background-color: white; border-radius:5em 5em 0% 0%; position:relative; margin-top:.15em; box-shadow:0 -.125em 2em rgba(0,0,0,.15), inset .5em 0 2em rgba(0,0,0,.2); z-index:-1; border-bottom:1px inset rgba(0,0,0,.3);}
.monitor .base:before {content:" "; display:inline-block; width:.25em; height:3em; background-color: white; position:absolute; left:50%; bottom:100%; margin-left:-.125em; box-shadow:inset 0 .1em .2em rgba(0,0,0,.15);}

.monitor {font-size:250%;}

/*
 * btn
 */


/*

/--------------------------- |                           |
|       I'm lovin' it!      |
|                           |
\---------------------------/

/--------------------------- |                           |
|       I'm lovin' it!      |     (.fat)
|                           |
\---------------------------/
\---------------------------/

*/
/*
 * Common properties
 */
/*
 * Specific properties
 */
/*
 * Pre-defined styles
 *
 *   - mango (or <none>): Default
 *   - supradine:         vitamin C
 *   - golf:              grass
 *   - eelv:              Eva Jolie
 *   - barbie:            "Hi Barbie! — Hi Ken!"
 *   - leather:           100%
 *   - sky:               in the clouds
 *   - blueberry:         for the color
 *   - radium:            Marie Curie
 */
.btn,
.btn .mango {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid;
  border-radius: 0.35em;
  cursor: pointer;
  font-family: "Arial Black", sans-serif;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -ms-transition: background-color 0.3s;
  transition: background-color 0.3s;
/*&:hover*/
  background-color: #ffc502;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,157,4,0.00)), color-stop(1, #ff9d04));
  background-image: -webkit-linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: -moz-linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: linear-gradient(top, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ffc502;
/*
   * Fat
   */
}
.btn.fat,
.btn .mango.fat {
  margin-bottom: 0.35em;
}
.btn.fat.active:not(.disabled):not([disabled]),
.btn .mango.fat.active:not(.disabled):not([disabled]),
.btn.fat:active:not(.disabled):not([disabled]),
.btn .mango.fat:active:not(.disabled):not([disabled]) {
  position: relative;
  top: 0.24999999999999997em;
}
.btn.disabled,
.btn .mango.disabled,
.btn[disabled],
.btn .mango[disabled] {
  background-color: #ccc !important;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(143,143,143,0.00)), color-stop(1, #8f8f8f)) !important;
  background-image: -webkit-linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  background-image: -moz-linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  background-image: linear-gradient(top, rgba(143,143,143,0.00) 0%, #8f8f8f 100%) !important;
  color: text-color;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30) !important;
  border-color: #ccc !important;
  cursor: not-allowed !important;
}
.btn.disabled.fat,
.btn .mango.disabled.fat,
.btn[disabled].fat,
.btn .mango[disabled].fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #646464, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50) !important;
}
.btn:hover:not(.disabled):not([disabled]),
.btn .mango:hover:not(.disabled):not([disabled]) {
  background-color: #ffdc67;
}
.btn.active:not(.disabled):not([disabled]),
.btn .mango.active:not(.disabled):not([disabled]),
.btn:active:not(.disabled):not([disabled]),
.btn .mango:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,157,4,0.00)), color-stop(1, #ff9d04));
  background-image: -webkit-linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: -moz-linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
  background-image: linear-gradient(bottom, rgba(255,157,4,0.00) 0%, #ff9d04 100%);
}
.btn.fat,
.btn .mango.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #985101, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.fat.active:not(.disabled):not([disabled]),
.btn .mango.fat.active:not(.disabled):not([disabled]),
.btn.fat:active:not(.disabled):not([disabled]),
.btn .mango.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.supradine {
  background-color: #ff8e01;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,92,1,0.00)), color-stop(1, #ff5c01));
  background-image: -webkit-linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: -moz-linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: linear-gradient(top, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ff8e01;
/*
   * Fat
   */
}
.btn.supradine:hover:not(.disabled):not([disabled]) {
  background-color: #ffbb67;
}
.btn.supradine.active:not(.disabled):not([disabled]),
.btn.supradine:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,92,1,0.00)), color-stop(1, #ff5c01));
  background-image: -webkit-linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: -moz-linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
  background-image: linear-gradient(bottom, rgba(255,92,1,0.00) 0%, #ff5c01 100%);
}
.btn.supradine.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #832f01, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.supradine.fat.active:not(.disabled):not([disabled]),
.btn.supradine.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.golf {
  background-color: #8ec301;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(107,146,1,0.00)), color-stop(1, #6b9201));
  background-image: -webkit-linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: -moz-linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: linear-gradient(top, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #8ec301;
/*
   * Fat
   */
}
.btn.golf:hover:not(.disabled):not([disabled]) {
  background-color: #cbfe44;
}
.btn.golf.active:not(.disabled):not([disabled]),
.btn.golf:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(107,146,1,0.00)), color-stop(1, #6b9201));
  background-image: -webkit-linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: -moz-linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
  background-image: linear-gradient(bottom, rgba(107,146,1,0.00) 0%, #6b9201 100%);
}
.btn.golf.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #3d5207, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.golf.fat.active:not(.disabled):not([disabled]),
.btn.golf.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.donation,
.btn.eelv {
  background-color: #c6e005;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,186,4,0.00)), color-stop(1, #9cba04));
  background-image: -webkit-linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: -moz-linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: linear-gradient(top, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #c6e005;
/*
   * Fat
   */
}
.btn.donation:hover:not(.disabled):not([disabled]),
.btn.eelv:hover:not(.disabled):not([disabled]) {
  background-color: #e8fb5a;
}
.btn.donation.active:not(.disabled):not([disabled]),
.btn.eelv.active:not(.disabled):not([disabled]),
.btn.donation:active:not(.disabled):not([disabled]),
.btn.eelv:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(156,186,4,0.00)), color-stop(1, #9cba04));
  background-image: -webkit-linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: -moz-linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
  background-image: linear-gradient(bottom, rgba(156,186,4,0.00) 0%, #9cba04 100%);
}
.btn.donation.fat,
.btn.eelv.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #547002, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.donation.fat.active:not(.disabled):not([disabled]),
.btn.eelv.fat.active:not(.disabled):not([disabled]),
.btn.donation.fat:active:not(.disabled):not([disabled]),
.btn.eelv.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.barbie {
  background-color: #fa04bd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(194,20,151,0.00)), color-stop(1, #c21497));
  background-image: -webkit-linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: -moz-linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: linear-gradient(top, rgba(194,20,151,0.00) 0%, #c21497 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #ba1ac2;
/*
   * Fat
   */
}
.btn.barbie:hover:not(.disabled):not([disabled]) {
  background-color: #fd68d8;
}
.btn.barbie.active:not(.disabled):not([disabled]),
.btn.barbie:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(194,20,151,0.00)), color-stop(1, #c21497));
  background-image: -webkit-linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: -moz-linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
  background-image: linear-gradient(bottom, rgba(194,20,151,0.00) 0%, #c21497 100%);
}
.btn.barbie.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #790e5e, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.barbie.fat.active:not(.disabled):not([disabled]),
.btn.barbie.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.leather,
.btn.alert {
  background-color: #dc4109;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(152,55,22,0.00)), color-stop(1, #983716));
  background-image: -webkit-linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: -moz-linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: linear-gradient(top, rgba(152,55,22,0.00) 0%, #983716 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #dc4109;
/*
   * Fat
   */
}
.btn.leather:hover:not(.disabled):not([disabled]),
.btn.alert:hover:not(.disabled):not([disabled]) {
  background-color: #f8865d;
}
.btn.leather.active:not(.disabled):not([disabled]),
.btn.alert.active:not(.disabled):not([disabled]),
.btn.leather:active:not(.disabled):not([disabled]),
.btn.alert:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(152,55,22,0.00)), color-stop(1, #983716));
  background-image: -webkit-linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: -moz-linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
  background-image: linear-gradient(bottom, rgba(152,55,22,0.00) 0%, #983716 100%);
}
.btn.leather.fat,
.btn.alert.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #441906, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.leather.fat.active:not(.disabled):not([disabled]),
.btn.alert.fat.active:not(.disabled):not([disabled]),
.btn.leather.fat:active:not(.disabled):not([disabled]),
.btn.alert.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.publication,
.btn.sky {
  background-color: #10c5fa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(49,171,194,0.00)), color-stop(1, #31abc2));
  background-image: -webkit-linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: -moz-linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: linear-gradient(top, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #10c5fa;
/*
   * Fat
   */
}
.btn.publication:hover:not(.disabled):not([disabled]),
.btn.sky:hover:not(.disabled):not([disabled]) {
  background-color: #70dcfc;
}
.btn.publication.active:not(.disabled):not([disabled]),
.btn.sky.active:not(.disabled):not([disabled]),
.btn.publication:active:not(.disabled):not([disabled]),
.btn.sky:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(49,171,194,0.00)), color-stop(1, #31abc2));
  background-image: -webkit-linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: -moz-linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
  background-image: linear-gradient(bottom, rgba(49,171,194,0.00) 0%, #31abc2 100%);
}
.btn.publication.fat,
.btn.sky.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #043d48, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.publication.fat.active:not(.disabled):not([disabled]),
.btn.sky.fat.active:not(.disabled):not([disabled]),
.btn.publication.fat:active:not(.disabled):not([disabled]),
.btn.sky.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.blueberry {
  background-color: #5f78ab;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(64,82,120,0.00)), color-stop(1, #405278));
  background-image: -webkit-linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: -moz-linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: linear-gradient(top, rgba(64,82,120,0.00) 0%, #405278 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #5f78ab;
/*
   * Fat
   */
}
.btn.blueberry:hover:not(.disabled):not([disabled]) {
  background-color: #9faecd;
}
.btn.blueberry.active:not(.disabled):not([disabled]),
.btn.blueberry:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(64,82,120,0.00)), color-stop(1, #405278));
  background-image: -webkit-linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: -moz-linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
  background-image: linear-gradient(bottom, rgba(64,82,120,0.00) 0%, #405278 100%);
}
.btn.blueberry.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #232c41, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.blueberry.fat.active:not(.disabled):not([disabled]),
.btn.blueberry.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.radium {
  background-color: #4ce229;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(57,170,54,0.00)), color-stop(1, #39aa36));
  background-image: -webkit-linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: -moz-linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: linear-gradient(top, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.30), 0 0px 1px rgba(255,255,255,0.30);
  border-color: #4ce229;
/*
   * Fat
   */
}
.btn.radium:hover:not(.disabled):not([disabled]) {
  background-color: #94ee7f;
}
.btn.radium.active:not(.disabled):not([disabled]),
.btn.radium:active:not(.disabled):not([disabled]) {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(57,170,54,0.00)), color-stop(1, #39aa36));
  background-image: -webkit-linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: -moz-linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
  background-image: linear-gradient(bottom, rgba(57,170,54,0.00) 0%, #39aa36 100%);
}
.btn.radium.fat {
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.30), 0 0.24999999999999997em 0 0 #194802, 0 0.35em 0 0 rgba(0,0,0,0.80), 0 0.35em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}
.btn.radium.fat.active:not(.disabled):not([disabled]),
.btn.radium.fat:active:not(.disabled):not([disabled]) {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.80), 0 0em 0.24999999999999997em 0em rgba(0,0,0,0.50);
}

dabblet.html

<div class="monitor">
  <div class="screen">
    <div class="in">
      <img src="http://10.5.0.105:8080/B016A/1440x900_marin.jpg">
    </div>
    <div class="btn fat">Download</div>
  </div>
  <div class="base"></div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
screenWidth  = window.screen.width;
screenHeight = window.screen.height;
screenRatio  = screenWidth / screenHeight;

(function ($screen) {
  console.log($screen);
  $screen.width($screen.height() * screenRatio);
}($('.monitor .screen > .in')))
</script>

settings.json

{"view":"behind","prefixfree":"1","page":"css"}