django-ram/ram/driver/static/wt/css/themes/metallic.css

.rendered-form{
  background-image: url("../../images/pattern.png");
  background-size: 50%;
  background-repeat: repeat; 
}
.btn-speed {
    border: 1px solid #dcdcdc;
    background: linear-gradient(to bottom,#e2e2e2, #cfd0da);
    color: rgb(59, 59, 59);
    border: 1px solid #9e9e9e;
    text-shadow: 0px 1px 0px #fafafa;
    box-shadow: 0px 1px 1px 1px #b3b3b3;
}
.btn-speed:hover{
  background-color: #c7c7c7;
  background: linear-gradient(to bottom, #e2e2e2, #cfd0da);
  color: rgb(59, 59, 59);
}
.btn-speed:active{
  box-shadow: 0 1px 2px 1px #b3b3b3 inset;
  background: linear-gradient(to bottom,#cfd0da, #e2e2e2);
  border: 1px solid #9e9e9e;
}
.dir-toggle:before{
    width: 40px;
    height: 70px;
}
.dir-btn span.arrow-up,
.dir-btn span.arrow-down{
  color: #4d4d4d;
}
.dir-btn span.stop{
  background: #4d4d4d;
}
.dir-btn.selected span.stop{
  background: #da0000;
  box-shadow: 0px 0px 4px #da0000;
}
.dir-btn.selected span.arrow-up,
.dir-btn.selected span.arrow-down{
  color: #00bcd6;
  text-shadow: 0px 0px 4px #29d6ec;
}
.dir-toggle.forward:before, .dir-toggle.stop:before, .dir-toggle.backward:before{
  box-sizing: border-box;
  border: 1px solid #f9f9f9;
  background-color: #efefef;
  background: linear-gradient(to bottom,#efefef, #e2e2e2);
}
.em-btn button.em-stop{
    padding: 12px;
    background: linear-gradient(to bottom,#e2e2e2, #cfd0da);
    border: 1px solid #9e9e9e;
    text-shadow: 0px 1px 0px #fafafa;
    box-shadow: 0px 1px 1px 1px #b3b3b3;
}
.fn-button.field-button-fn .btn, .save-fn, .btn-grey, 
.fn-button.field-button-fn .btn.press{
    color: rgb(59, 59, 59);
    border: 1px solid #9e9e9e;
    border-bottom: 4px solid #9e9e9e;
    text-shadow: 0px 1px 0px #fafafa;
    background-color: #efefef;
    background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#e2e2e2));
    background: -moz-linear-gradient(top, #efefef, #e2e2e2);
    box-shadow: -1px 2px 4px 2px #c7c7c7; /* 0 0 0px 4px #d8d8d8, 0 0 0px 1px #ddd;*/
    background: linear-gradient(to bottom,#efefef, #e2e2e2);
    height: 30px;
    box-sizing: border-box;
    cursor: pointer;
}

.fn-button.field-button-fn button[aria-pressed="true"].btn, 
.fn-button.field-button-fn button[aria-pressed="true"].btn.press,
.save-fn:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#cfd0da), to(#e2e2e2));
    background: -moz-linear-gradient(top, #bfbfbf, #dcdcdc);
    box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid #9e9e9e;
}
.fn-button.field-button-fn .btn.press {
  color: #005a69;
}

.formbuilder-button .btn, .server-button .btn, .fn-button .btn, .dropbtn{
  border: 1px solid #007a8a;
  border-bottom: 4px solid #007a8a;
  background: -webkit-gradient(linear, left top, left bottom, from(#00b2ca), to(#00A3B9));
  background: -moz-linear-gradient(top, #00b2ca, #00A3B9);
  background: linear-gradient(to bottom,#00b2ca, #00A3B9);
  box-shadow: -1px 2px 4px 2px #c7c7c7; /* 0 0 0px 4px #d8d8d8, 0 0 0px 1px #ddd;*/
  vertical-align: middle;
  box-sizing: border-box;
  text-shadow: 0px 0px 1px #444444;
}
.formbuilder-button .btn:active ,  
.server-button .btn:active, .dropbtn:active{
  background: -webkit-gradient(linear, left top, left bottom, from(#0299ad), to(#00A3B9));
  background: -moz-linear-gradient(top, #0299ad, #00A3B9);
  background: linear-gradient(to bottom,#0299ad, #00A3B9);
  box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid #007a8a;
  height: 28px;
} 
 
.dropbtn{
    padding: 5px 8px;
} 
.dropbtn:active{
    padding: 6px 8px;
} 
.server-button .btn, .fn-button .btnm, 
input.form-control, select.form-control, textarea.form-control {
  padding: 7px 8px;
  vertical-align: middle;
}
input.form-control:active, select.form-control:active, textarea.form-control:active,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus{
  background: #ffffff;
} 
.formbuilder-button  .btn.acq-loco-btn,
.server-button .btn,
.formbuilder-button  .add-loco-btn,
.formbuilder-button  .btn.acq-loco-btn:active,
.server-button .btn:active,
.formbuilder-button  .add-loco-btn:active{
  height: 34px;
}
.select-control{
  height: 30px;
  border: 1px solid #9e9e9e;
  box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  background: #fafafa;
}
.select-control.select-xl{
    height: 36px;
    margin-top: 1px;
}

.btn-grey{
    padding: 7px;
    padding-top: 5px;
    height: 30px;
    margin-top: 1px;
}


/* Acquire loco heading Styles*/
.loco-board{
    display: inline-block;
    border-radius: 20px;
    background: linear-gradient(to bottom,#e2e2e2, #cfd0da);
    color: rgb(59, 59, 59);
    border: 1px solid #9e9e9e;
    border-bottom: 4px solid #9e9e9e;
    text-shadow: 0px 1px 0px #fafafa;
    box-shadow: inset 0px 1px 1px #f5f5f5;
    padding: 7px 11px;
    min-width: 270px;
}

.nut-effect{
    border-radius: 16px;
    padding: 5px;
    background: #dededd;
    height: 5px;
    width: 5px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #737373;
}
.nut-effect:after{
    content: "";
    display: inline-block;
    background: #b9b9b9;
    height: 15px;
    width: 1px;
    position: relative;
    top: -5px;
    left: 0;
}
.nut-effect.l{
    margin-left: 10px;
    margin-right: 16px;
}
.nut-effect.r{
    margin-left: 16px;
    margin-right: 10px;
}
.nut-effect.l:after{
    transform: rotate(135deg);
}
.nut-effect.r:after{
    transform: rotate(15deg);
}

.rs-control .rs-bg-color {
  background-color: #ddd;
  background-image: url(../../images/pattern.png);
  background-size: 900%;
  opacity: 0.9;
} 
.rs-overlay.rs-transition.rs-bg-color{
  background: #dcdcdc;
  opacity: 1;
}