style.css

.outlineElement {
  position: relative;
  outline: 1px solid #2ECC71; }

.outlineElement .inside-after, .inside-after {
  content: "";
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(46, 204, 113, 0.25);
  outline: 1px solid #2ECC71; }

.moveDown {
  margin-top: 4em; }

.ctrl {
  /* START Reset CSS */
  /* HTML5 display-role reset for older browsers */
  /* END Reset CSS */ }
  .ctrl body, .ctrl div, .ctrl span, .ctrl applet, .ctrl object, .ctrl iframe,
  .ctrl h1, .ctrl h2, .ctrl h3, .ctrl h4, .ctrl h5, .ctrl h6, .ctrl p, .ctrl blockquote, .ctrl pre,
  .ctrl a, .ctrl abbr, .ctrl acronym, .ctrl address, .ctrl big, .ctrl cite, .ctrl code,
  .ctrl del, .ctrl dfn, .ctrl em, .ctrl img, .ctrl ins, .ctrl kbd, .ctrl q, .ctrl s, .ctrl samp,
  .ctrl small, .ctrl strike, .ctrl strong, .ctrl sub, .ctrl sup, .ctrl tt, .ctrl var,
  .ctrl b, .ctrl u, .ctrl center,
  .ctrl dl, .ctrl dt, .ctrl dd, .ctrl ol, .ctrl ul, .ctrl li,
  .ctrl fieldset, .ctrl form, .ctrl label, .ctrl legend,
  .ctrl table, .ctrl caption, .ctrl tbody, .ctrl tfoot, .ctrl thead, .ctrl tr, .ctrl th, .ctrl td,
  .ctrl article, .ctrl aside, .ctrl canvas, .ctrl details, .ctrl embed,
  .ctrl figure, .ctrl figcaption, .ctrl footer, .ctrl header, .ctrl hgroup,
  .ctrl menu, .ctrl nav, .ctrl output, .ctrl ruby, .ctrl section, .ctrl summary,
  .ctrl time, .ctrl mark, .ctrl audio, .ctrl video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  .ctrl article, .ctrl aside, .ctrl details, .ctrl figcaption, .ctrl figure,
  .ctrl footer, .ctrl header, .ctrl hgroup, .ctrl menu, .ctrl nav, .ctrl section {
    display: block; }
  .ctrl body {
    line-height: 1; }
  .ctrl ol, .ctrl ul {
    list-style: none; }
  .ctrl blockquote, .ctrl q {
    quotes: none; }
  .ctrl blockquote:before, .ctrl blockquote:after,
  .ctrl q:before, .ctrl q:after {
    content: '';
    content: none; }
  .ctrl table {
    border-collapse: collapse;
    border-spacing: 0; }
  .ctrl .hidden {
    display: none; }
  .ctrl .shown {
    display: block; }
  .ctrl #topbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    height: 4em;
    /*margin-top: -4em;*/
    width: 100%;
    background-color: #ECF0F1;
    box-sizing: border-box; }
  .ctrl #upKey {
    margin-left: 0.4em; }
  .ctrl .slideDown {
    top: 4em !important; }
  .ctrl .ctrl-popup {
    position: fixed;
    z-index: 990;
    width: 480px;
    height: 432px;
    top: 20vh;
    left: 25vw;
    background-color: white;
    background-image: url("http://wrist-control.herokuapp.com/images/pebble-long.svg");
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 20px -160px;
    padding: 36px 36px 36px 200px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    box-shadow: 0 0 12px #7F8386;
    border-radius: 12px;
    transform: scale(1, 1);
    transition: all 0.1s; }
    .ctrl .ctrl-popup.pick-mode {
      transform: scale(3, 3);
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s; }
  .ctrl .ctrl-popup p, .ctrl .ctrl-popup h1, .ctrl .ctrl-popup h2, .ctrl .ctrl-popup h3, .ctrl .ctrl-popup h4, .ctrl .ctrl-popup h5, .ctrl .ctrl-popup h6 {
    font-family: inherit; }
  .ctrl .ctrl-popup .ctrl-preview {
    position: absolute;
    width: 100px;
    height: 116px;
    top: 198px;
    left: 50px;
    background-color: #FFFFFF;
    border-radius: 2px;
    overview: hidden; }
  .ctrl .ctrl-popup .ctrl-preview-button-left {
    position: absolute;
    top: 200px;
    left: 15px;
    border-radius: 6px 0 0 6px;
    height: 54px;
    width: 12px;
    background-color: #222222; }
  .ctrl .ctrl-popup .ctrl-preview-button-top {
    position: absolute;
    top: 177px;
    left: 173px;
    height: 53px;
    width: 12px;
    border-radius: 0 6px 6px 0;
    background-color: #222222; }
  .ctrl .ctrl-popup .ctrl-preview-button-main {
    position: absolute;
    top: 240px;
    left: 173px;
    height: 34px;
    width: 12px;
    border-radius: 0 6px 6px 0;
    background-color: #222222; }
  .ctrl .ctrl-popup .ctrl-preview-button-bottom {
    position: absolute;
    top: 283px;
    left: 173px;
    height: 53px;
    width: 12px;
    border-radius: 0 6px 6px 0;
    background-color: #222222; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-header {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #222222;
    color: #FFFFFF;
    width: 100px;
    height: 12px;
    font-size: 8px;
    text-align: center;
    border-radius: 2px 2px 0 0; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-header .ctrl-preview-header-time {
    font-size: 8px;
    height: 12px; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-actionbar {
    position: absolute;
    top: 16px;
    left: 84px;
    background-color: #222222;
    color: #FFFFFF;
    width: 16px;
    height: 96px;
    font-size: 12px;
    text-align: center;
    border-radius: 2px 0 0 2px; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-actionbar p:nth-child(1) {
    position: absolute;
    top: -8px;
    width: 100%;
    text-align: center;
    font-size: 28px; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-actionbar p:nth-child(2) {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 30px;
    font-size: 18px; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-actionbar p:nth-child(3) {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 70px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-main {
    position: absolute;
    top: 50px;
    left: 4px;
    width: 76px;
    font-weight: 600;
    line-height: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
  .ctrl .ctrl-popup .ctrl-preview .selectable:hover {
    color: #9DBDC6;
    cursor: pointer; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-bottom {
    position: absolute;
    top: 96px;
    left: 4px;
    width: 76px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .ctrl .ctrl-popup .ctrl-preview .ctrl-preview-top {
    position: absolute;
    top: 16px;
    left: 4px;
    width: 76px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .ctrl .ctrl-popup .ctrl-input {
    width: 100%;
    background-color: #DAEAEF;
    box-shadow: none;
    outline: none;
    border: none;
    padding: 0.5em;
    font-size: 1.5em;
    border-radius: 0.25em;
    margin-top: 0.25em;
    font-family: 'Open Sans', sans-serif; }
  .ctrl .ctrl-popup .ctrl-close {
    position: absolute;
    right: 1em;
    bottom: 1em;
    width: 3em;
    height: 3em;
    border: 2px solid #FF3D2E;
    color: #FF3D2E;
    text-align: center;
    border-radius: 1000px; }
  .ctrl .ctrl-popup .ctrl-close i, .ctrl .ctrl-popup .ctrl-submit i {
    transform: none;
    top: 0.25em;
    position: relative; }
  .ctrl .ctrl-popup .ctrl-close:hover {
    background-color: #FF3D2E;
    color: #FFFFFF; }
  .ctrl .ctrl-popup .ctrl-submit {
    position: absolute;
    right: 5em;
    bottom: 1em;
    width: 3em;
    height: 3em;
    border: 2px solid #2ECC71;
    color: #2ECC71;
    text-align: center;
    border-radius: 1000px; }
  .ctrl .ctrl-popup .ctrl-submit:hover {
    background-color: #2ECC71;
    color: #FFFFFF; }
  .ctrl .ctrl-popup .ctrl-submit.disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none; }
  .ctrl .ctrl-popup .ctrl-submit.disabled:hover {
    background: none;
    color: #2ECC71; }
  .ctrl .ctrl-popup h1 {
    font-size: 2em;
    font-weight: 300;
    color: #9DBDC6; }
  .ctrl .ctrl-popup h1 .elementName {
    font-weight: 600;
    font-style: italic;
    color: #272F32;
    display: block; }
  .ctrl .ctrl-popup .pebble-button-list {
    position: absolute;
    top: 184px;
    left: 200px;
    width: 25vw;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .ctrl .ctrl-popup .pebble-button-list p .ctrl-pebble-button-label {
    position: relative;
    background: none;
    border: none;
    font-size: 1em;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    overflow: visible;
    width: auto;
    left: 0;
    transition: all 0.1s; }
  .ctrl .ctrl-popup .pebble-button-list p .ctrl-pebble-button-label .accent {
    color: #FF3D2E;
    font-style: italic; }
  .ctrl .ctrl-popup .pebble-button-list p .ctrl-pebble-button-label:hover {
    cursor: pointer;
    color: #9DBDC6;
    left: -6px;
    transition: all 0.1s; }
  .ctrl .ctrl-popup .pebble-button-list p {
    margin-top: 24px;
    font-size: 22px;
    height: 32px;
    overflow: visible; }
  .ctrl .ctrl-popup .pebble-button-list p .action {
    line-height: 1em;
    font-size: 18px;
    font-style: italic;
    color: #9DBDC6;
    display: block;
    overflow: visible; }
  .ctrl .ctrl-popup .pebble-button-list p:first-child {
    margin-top: 0; }
  .ctrl .ctrl-popup-bg {
    position: fixed;
    z-index: 980;
    width: 100vw;
    height: 100vh;
    background-color: #272F32;
    opacity: 0.6;
    top: 0;
    left: 0; }
  .ctrl .ctrl-button.ctrl-button-big {
    font-size: 1em; }
  .ctrl .ctrl-button {
    cursor: pointer;
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    background: none;
    transition: all 0.25s; }
  .ctrl .ctrl-button:focus {
    outline: none; }
  .ctrl .ctrl-button.ctrl-button-dark {
    border: 2px solid #272F32;
    color: #272F32; }
  .ctrl .ctrl-button.ctrl-button-dark:hover {
    background-color: #272F32;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-dark-inverse {
    border: 2px solid #272F32;
    background-color: #272F32;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-dark-inverse:hover {
    background: none;
    color: #272F32; }
  .ctrl .ctrl-button.ctrl-button-medium {
    border: 2px solid #9DBDC6;
    color: #9DBDC6; }
  .ctrl .ctrl-button.ctrl-button-medium:hover {
    background-color: #9DBDC6;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-medium-inverse {
    border: 2px solid #9DBDC6;
    background-color: #9DBDC6;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-medium-inverse:hover {
    background: none;
    color: #9DBDC6; }
  .ctrl .ctrl-button.ctrl-button-white {
    border: 2px solid #FFFFFF;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-white:hover {
    background-color: #FFFFFF;
    color: #272F32; }
  .ctrl .ctrl-button.ctrl-button-white-inverse {
    border: 2px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-white-inverse:hover {
    background: none;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-accent {
    border: 2px solid #FF3D2E;
    color: #FF3D2E; }
  .ctrl .ctrl-button.ctrl-button-accent:hover {
    background-color: #FF3D2E;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-accent-inverse {
    border: 2px solid #FF3D2E;
    background-color: #FF3D2E;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-accent-inverse:hover {
    background: none;
    color: #FF3D2E; }
  .ctrl .ctrl-button.ctrl-button-light {
    border: 2px solid #DAEAEF;
    color: #DAEAEF; }
  .ctrl .ctrl-button.ctrl-button-light:hover {
    background-color: #DAEAEF;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-light-inverse {
    border: 2px solid #DAEAEF;
    background-color: #DAEAEF;
    color: #FFFFFF; }
  .ctrl .ctrl-button.ctrl-button-light-inverse:hover {
    background: none;
    color: #DAEAEF; }
  .ctrl .ctrl-buttons {
    position: relative;
    width: 100%;
    padding: 0 1em;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em auto 0;
    font-family: 'futura-pt';
    font-weight: 300;
    text-align: center; }
  .ctrl .ctrl-buttons button, .ctrl .ctrl-buttons a {
    margin-right: 1em; }
  .ctrl .ctrl-buttons button:last-child, .ctrl .ctrl-buttons a:last-child {
    margin-right: 0; }
  .ctrl .ctrl-buttons:first-of-type {
    height: 38px; }
  .ctrl #ctrl-marketplace {
    width: 100%;
    float: left;
    -webkit-transition: all .25s;
    -webkit-transition-delay: 0.25s; }
  .ctrl #ctrl-build {
    float: left;
    opacity: 0;
    width: 100px;
    -webkit-transition: all .25s; }
  .ctrl .developer-mode #ctrl-marketplace {
    width: 172px;
    -webkit-transition: all .25s; }
  .ctrl .developer-mode #ctrl-build {
    opacity: 1;
    -webkit-transition: all .25s;
    -webkit-transition-delay: 0.25s; }
  .ctrl .ctrl-checkbox {
    width: 1em;
    height: 1em;
    border: 1px solid #272F32;
    display: inline-block; }
  .ctrl .ctrl-checkbox-label {
    display: inline-block; }
  .ctrl .ctrl-checkbox:hover {
    cursor: pointer; }
  .ctrl .ctrl-checkbox.ctrl-unchecked .ctrl-check {
    opacity: 1;
    transform: scale(1, 1);
    -webkit-animation: checkOut 0.25s forwards; }
  .ctrl .ctrl-checkbox.ctrl-checked .ctrl-check {
    opacity: 0;
    transform: scale(4, 4);
    -webkit-animation: checkIn 0.25s forwards; }
@-webkit-keyframes checkIn {
  from {
    transform: scale(4, 4);
    opacity: 0; }
  to {
    transform: scale(1, 1);
    opacity: 1; } }
@-webkit-keyframes checkOut {
  from {
    transform: scale(1, 1);
    opacity: 1; }
  to {
    transform: scale(0, 0);
    opacity: 0; } }
  .ctrl .ctrl-menu {
    font-family: "futura-pt", sans-serif;
    width: 20em;
    box-sizing: border-box;
    text-align: center; }
  .ctrl .ctrl-menu h1 {
    font-size: 1.2em;
    font-weight: 600;
    color: #272F32;
    padding: 2em 0;
    border-bottom: 1px solid #ECF0F1; }
  .ctrl .ctrl-menu h1 .code {
    color: #9DBDC6; }
  .ctrl .ctrl-menu .plugin-list {
    position: relative;
    height: 11em;
    width: 100%;
    border-bottom: 1px solid #ECF0F1; }
  .ctrl .ctrl-menu .plugin-list::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5em;
    bottom: 0;
    right: -5em;
    box-shadow: inset 0 0 1em #ECF0F1;
    pointer-events: none; }
  .ctrl .ctrl-menu .plugin-list .scrollable {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: scroll; }
  .ctrl .ctrl-menu .plugin-list li {
    padding: 1em;
    text-align: left;
    border-bottom: 1px solid #ECF0F1; }
  .ctrl .ctrl-menu .plugin-list li button {
    float: right;
    margin-top: -0.5em; }
  .ctrl .ctrl-menu h2 {
    font-size: 1em;
    letter-spacing: 0.5em;
    font-family: "futura-pt", sans-serif;
    color: #272F32;
    margin: 1em 0 0.25em; }
  .ctrl .ctrl-menu h2.sub {
    font-size: 0.4em;
    letter-spacing: 0.5em;
    font-family: "futura-pt", sans-serif;
    color: #DAEAEF;
    margin: 0 0 2em; }
  .ctrl .t-accent {
    color: #FF3D2E; }
  .ctrl .tight {
    letter-spacing: -2px; }
  .ctrl .loose {
    letter-spacing: 2px; }

/*# sourceMappingURL=style.css.map */