From feb0eedbea39c69e7cd7408c845018d586950c2c Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 21 Aug 2014 13:08:11 -0300
Subject: [PATCH] added css in new location

---
 css/src/main.css   | 1198 ++++++++++++++++++++++++++++++++++++++++++++
 css/src/mobile.css |  131 +++++
 2 files changed, 1329 insertions(+)
 create mode 100644 css/src/main.css
 create mode 100644 css/src/mobile.css

diff --git a/css/src/main.css b/css/src/main.css
new file mode 100644
index 000000000..f7e34e300
--- /dev/null
+++ b/css/src/main.css
@@ -0,0 +1,1198 @@
+/*
+ *
+ * Copay main CSS
+ *
+ */
+
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(../font/ubuntu-light.woff) format('woff');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Ubuntu'), url(../font/ubuntu.woff) format('woff');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(../font/ubuntu-bold.woff) format('woff');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(../font/ubuntu-bold-italic.woff) format('woff');
+}
+
+@keyframes rotateThis {
+  from { transform: scale( 1 ) rotate( 0deg );   }
+  to   { transform: scale( 1 ) rotate( 360deg ); }
+}
+
+@-webkit-keyframes rotateThis {
+  from { -webkit-transform: scale( 1 ) rotate( 0deg );   }
+  to   { -webkit-transform: scale( 1 ) rotate( 360deg ); }
+}
+
+@-webkit-keyframes yellow-flash {
+  0% {
+    background-color: #FFFFE0;
+    opacity:1;
+  }
+  22% {
+    background-color: #FFFFE0;
+  }
+  100% {
+    background-color: none;
+  }
+}
+
+::-webkit-input-placeholder {
+   color: #7A8C9E;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+   color: #7A8C9E;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+   color: #7A8C9E;
+}
+
+:-ms-input-placeholder {  
+   color: #7A8C9E;
+}
+
+#qr-canvas { display: none; }
+#qrcode-scanner-video {
+  display: block;
+  margin: 0 auto;
+}
+
+* {
+  font-family: 'Ubuntu', Helvetica, sans-serif !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #2C3E50;
+}
+
+h1 {
+  font-weight: 100;
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: 100;
+}
+
+h3 {
+  font-weight: 300;
+  font-size: 16px;
+}
+
+h4 {
+  font-size: 0.875rem;
+}
+
+body, html{
+  height:100%;
+  width:100%;
+  color: #2C3E50;
+}
+
+header {
+  padding: 15px 20px 5px;
+}
+
+.off-canvas-wrap, .inner-wrap{
+    height:100%;   
+}
+
+.tab-bar {
+  display: none;
+}
+
+a {
+  color: #3498DB;
+}
+
+input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+}
+
+.join label, 
+.open label, 
+.setup label {
+  font-size: 0.875rem;
+  color: #fff;
+  font-weight: 100;
+}
+
+.setup .comment {
+  font-size: 0.875rem;
+  color: #7A8C9E !important;
+}
+
+a:hover {
+  color: #2980b9;
+}
+
+.open input, 
+.join input, 
+.setup input,
+.import input,
+.settings input {
+  background: #2C3E50 !important;
+  -moz-box-shadow:    inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
+  box-shadow:         inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
+  border: 0 !important;
+  color: #7A8C9E !important;
+}
+
+.open select, 
+.join select, 
+.setup select,
+.import select,
+.settings select {
+  background: #2C3E50 !important;
+  border: 0 !important;
+  color: #7A8C9E !important;
+}
+
+.page, .main {
+  height:100%;
+  overflow-y: auto;
+  overflow-x: none;
+  background-color: #2C3E50;
+}
+
+.sidebar {
+  height:100%;
+  overflow-y: auto;
+  overflow-x: none;
+}
+
+.sidebar {
+  position: fixed;
+  width: 250px;
+  background-color: #2C3E50;
+  color: #fff;
+  line-height: 24px;
+}
+
+.sidebar a {
+  color: #fff;
+}
+
+.sidebar ul.copayer-list {
+  list-style-type: none;
+  padding:0; margin:0;
+}
+
+.sidebar ul.copayer-list li {
+  margin-top: 15px;
+  font-weight: 100;
+  font-size: 12px;
+  color: #C9C9C9;
+}
+
+.sidebar ul.copayer-list img {
+  width: 30px;
+  height: 30px;
+}
+
+.button.small.side-bar {
+  padding: 0rem 0.4rem;
+}
+
+.waiting {
+  border: 2px solid #fff;
+}
+
+
+.online {
+  border: 2px solid #1ABC9C;
+}
+
+.offline {
+  border: 2px solid gray;
+  opacity: 0.4;
+}
+
+.main {
+  margin-left: 250px;
+  padding: 1.5rem;
+  background-color: #F8F8FB;
+}
+
+.home, .open, .join, .waiting-copayers, .setup, .import, .settings {
+  margin-top: 15%;
+  color: #fff;
+}
+
+.import fieldset, .settings fieldset {
+  border: 1px solid #3C5269;
+}
+
+.import fieldset legend, .settings fieldset legend {
+  background: transparent;
+  color: #fff;
+  font-weight: normal;
+}
+
+.import input[type="file"], 
+.import label, 
+.import label small,
+.settings label, 
+.settings label small {
+  color: #fff;
+}
+
+.logo-setup {
+  text-align: center;
+  margin-top: 9%;
+}
+
+.box-setup {
+  padding: 20px 30px;
+  background: #34495E;
+  margin-bottom: 20px;
+}
+
+.box-setup label small.has-error {
+  font-size: 11px;
+  color: #FFA59B;
+}
+
+.last-transactions {
+  margin-bottom: 2rem;
+  background-color: #E8EAEF;
+}
+
+.last-transactions-header {
+  padding: 1rem 0;
+  height: 50px;
+}
+
+.last-transactions-footer {
+  padding: 1rem 0;
+  overflow: hidden;
+}
+
+.last-transactions-content {
+  overflow: hidden;
+  padding: 1rem;
+  background: #CED3DB;
+}
+
+.last-transactions-content .box-status {
+  font-size: 13px;
+  width: 35px;
+}
+
+.last-transactions-content .box-copayer {
+  width: 100px;
+  margin-right: 20px;
+  float: left;
+  text-align: center;
+}
+
+.last-transactions-content .copayer-ico {
+  width: 45px;
+  height: 45px;
+  border: 2px solid #7A8C9B;
+}
+
+.last-transactions-content .box-copayer .icon-active {
+  color: #fff;
+}
+
+.last-transactions-content .box-copayer .icon-active-check {
+  background-color: #3FBC9C;
+  color: #fff;
+}
+
+.last-transactions-content .box-copayer .icon-active-x {
+  background-color: #C0392B;
+  color: #fff;
+}
+
+.input-note {
+  margin-top: -10px;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.send-note {
+  font-style: italic;
+  color: gray;
+  background-color: #EDEDF5;
+  padding: 1.5rem;
+  width: 400px;
+}
+
+.box-note {
+  text-align: center;
+  clear: both;
+  font-style: italic;
+  color: gray;
+  margin-bottom: 10px;  
+}
+
+.button-setup a {
+  display: block;
+  padding: 20px 30px;
+  background: #34495E;
+  margin-bottom: 20px;
+  font-weight: 100;
+  font-size: 24px;
+}
+
+.button-setup a:hover {
+  background: #3C4E60;
+}
+
+.footer-setup {
+  overflow: hidden;
+}
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}
+
+.dn {display: none;}
+.pr {position: relative;}
+.pa {position: absolute;}
+.m0 {margin: 0;}
+.db {display: block;}  
+.size-12 { font-size: 12px; }      
+.size-14 { font-size: 14px; }
+.size-16 { font-size: 16px; }
+.size-18 { font-size: 18px; }
+.size-21 { font-size: 21px; }
+.size-24 { font-size: 24px; }
+.size-36 { font-size: 36px; }
+.size-48 { font-size: 48px; }
+.size-60 { font-size: 60px; }
+.size-72 { font-size: 72px; }
+.m5t {margin-top: 5px;}
+.m10t {margin-top: 10px;}
+.m5b {margin-bottom: 5px;}
+.m5r {margin-right: 5px;}
+.m10b {margin-bottom: 10px;}
+.m15b {margin-bottom: 20px;}
+.m10r {margin-right: 10px;}
+.m15l {margin-left: 15px;}
+.m15t {margin-top: 15px;}
+.m20r {margin-right: 20px;}
+.m15r {margin-right: 15px;}
+.m20t {margin-top: 20px;}
+.m10 {margin: 10px;}
+.m15 {margin: 15px;}
+.m15h {margin: 0 15px;}
+.p10t {padding-top: 10px;}
+.p0r {padding-right: 0;}
+.p70r {padding-right: 70px;}
+.p70l {padding-left: 70px;}
+.p5h {padding: 0 5px;}
+.p20h {padding: 0 20px;}
+.p15 {padding:15px;}
+.p20 {padding:20px;}
+.p10 {padding:10px;}
+.m30v {margin: 30px 0;}
+.m10h {margin:0 10px;}
+.m10v {margin:10px 0;}
+.m30a {margin: 30px auto;}
+.m-negative-l {margin-left: -0.9375rem;}
+.br100 {border-radius: 100%;}
+.lh {line-height: 0;}
+.oh {overflow:hidden;}
+.lh {line-height: 0;}
+
+.small {
+  font-size: 60%;
+  line-height: inherit;
+}
+
+.line-dashed-setup-v {
+  border-left: 1px dashed #415970;
+}
+
+.line-dashed-v {
+  border-right: 1px dashed #E3E3E3;
+}
+
+.line-dashed-h {
+  border-bottom: 1px dashed #E3E3E3;
+}
+
+.line {
+  border-top: 1px solid #f2f2f2;
+  margin: 0.5rem 0 1rem;
+}
+
+.line-sidebar {
+  border-top: 1px solid #34495E;
+  margin: 0.7rem 0;
+}
+
+.line-sidebar-t {
+  border-top: 1px solid #3C5269;
+  padding-top: 0.5rem;
+}
+
+.line-sidebar-b {
+  border-bottom: 1px solid #3C5269;
+  padding-bottom: 0.5rem;
+}
+
+.line-dashed {
+  border-top: 1px dashed #ccc;
+  margin: 1rem 0;
+  padding: 1rem 0;
+  overflow: hidden;
+}
+
+.name-wallet {
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.box-livenet {
+  background: #213140;
+  padding: 0rem 0.5rem 0.2rem;
+  color: #7A8C9E;
+}
+
+.founds {
+  font-weight: 100;
+  color: #7A8C9E;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+/* Turn Off Number Input Spinners */
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+}
+
+.icon-rotate {
+  animation-name: rotateThis;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  -webkit-animation-name: rotateThis;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+.spinner {
+  display:inline-block; 
+  width: 1em; 
+  text-align:center; 
+  line-height:1em; 
+  vertical-align:middle;
+}
+
+.highlight{
+  -webkit-animation-name: yellow-flash;
+  -webkit-animation-duration: 400ms;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-timing-function: linear;
+  -moz-animation-name: yellow-flash;
+  -moz-animation-duration: 400ms;
+  -moz-animation-iteration-count: 1;
+  -moz-animation-timing-function: linear;
+}
+
+/* notifications */
+
+.dr-notification-container {
+  position: absolute;
+  z-index: 10000;
+}
+
+.dr-notification-container.bottom {
+  bottom: 20px;
+}
+
+.dr-notification-container.right {
+  right: 0;
+}
+
+.dr-notification-container.left {
+  left: 20px;
+}
+
+.dr-notification-container.top {
+  top: 20px;
+}
+
+.dr-notification-container.center {
+  left: 50%;
+  margin-left: -190px;
+}
+
+.dr-notification-wrapper {
+  width: 360px;
+  position: relative;
+  margin: 10px 0;
+}
+
+.dr-notification {
+  width: 360px;
+  clear: both;
+  height: 90px;
+  overflow: hidden;
+}
+
+.dr-notification-close-btn {
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  border-radius: 20px;
+  display: inline-block;
+  padding: 5px;
+  font-size: 12px;
+  position: absolute;
+  right: 350px;
+  top: -8px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.dr-notification-close-btn:hover {
+  -webkit-transform: scale3d(1.25, 1.25, 1);
+  -moz-transform: scale3d(1.25, 1.25, 1);
+  -ms-transform: scale3d(1.25, 1.25, 1);
+  transform: scale3d(1.25, 1.25, 1);
+}
+
+.dr-notification-image {
+  width: 80px;
+  height: 90px;
+  float: left;
+  display: block;
+  font-size: 40px;
+  color: white;
+  text-align: center;
+  border-right: 1px dashed #415970;
+}
+.dr-notification-image i {
+  display: block;
+  width: 100%;
+  padding-top: 20px;
+}
+.dr-notification-image img {
+  margin: 15px;
+  max-width: 70px;
+  min-width: 48px;
+}
+
+.dr-notification-content {
+  padding-left: 90px;
+  padding-right: 10px;
+  padding-top: 5px;
+}
+
+.dr-notification-title {
+  color: white;
+  padding: 0px;
+  font-size: 18px;
+  margin-top: 0;
+}
+
+.dr-notification {
+  background-color: #34495E;
+  color: #eee;
+  border: 1px solid #2C3E50;
+  opacity: 0.9;
+
+}
+.dr-notification-close-btn {
+  background-color: #34495E;
+  color: #fff;
+  border: 1px solid #3C5269;
+}
+
+.dr-notification-image.dr-notification-type-info {
+  color: #FFF;
+}
+
+.dr-notification-image.dr-notification-type-warning {
+  color: #FFA226;
+}
+
+.dr-notification-image.dr-notification-type-error {
+  color: #FF4B4F;
+}
+
+.dr-notification-image.dr-notification-type-success {
+  color: #1ABC9C;
+}
+
+.dr-notification-image.success {
+  color: #1ABC9C;
+}
+
+.success { 
+  color: #1ABC9C;
+}
+
+.label.success { 
+  background-color: #1ABC9C;
+}
+
+.label.alert {
+  background-color: #C0392A;
+  padding: 0.3rem 0.4rem;
+  font-weight: 700;
+}
+
+.dr-notification-text {
+  font-size: 12px;
+  line-height: 120%;
+}
+
+.ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+ul.pagination li.current a {
+  background: #1ABC9C;
+}
+
+ul.pagination li.current a:hover, ul.pagination li.current a:focus {
+  background: #16A085;
+}
+
+.tooltip { 
+  background: #1ABC9C; 
+  color: #fff; 
+  font-weight: normal; 
+  font-size: 14px; 
+  padding: 3px 5px;
+  -webkit-border-radius: 3px; 
+  -moz-border-radius: 3px; 
+  border-radius: 3px; 
+  border: 1px solid #16A085;
+}
+
+.tooltip>.nub {
+  border-color:transparent transparent #16A085 transparent;
+}
+.tooltip.tip-top>.nub {
+  border-color:#16A085 transparent transparent transparent;
+}
+.tooltip.tip-right>.nub {
+  border-color:transparent #16A085 transparent transparent;
+}
+.tooltip.tip-left>.nub {
+  border-color:transparent transparent transparent #16A085;
+}
+
+.has-tip {
+  color: #7A8C9E;
+  border-color: #7A8C9E;
+}
+
+.logo {
+  background: transparent url('../img/logo-negative-beta.svg') no-repeat;
+  background-size: 130px 51px;
+}
+
+button.radius, .button.radius {
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+/* SECONDARY */
+button.secondary, 
+.button.secondary { 
+  background-color: #4A90E2;
+  color: #fff;
+}
+button.secondary:hover, 
+button.secondary:focus, 
+.button.secondary:hover, 
+.button.secondary:focus {
+  background-color: #2980B9;
+  color: #fff;
+}
+button.disabled.secondary, 
+button[disabled].secondary, 
+.button.disabled.secondary, 
+.button[disabled].secondary,
+button.disabled.secondary:hover, 
+button.disabled.secondary:focus, 
+button[disabled].secondary:hover, 
+button[disabled].secondary:focus, 
+.button.disabled.secondary:hover, 
+.button.disabled.secondary:focus, 
+.button[disabled].secondary:hover, 
+.button[disabled].secondary:focus {
+  background-color: #95a5a6;
+  color: #E6E6E6;
+}
+
+/* PRIMARY */
+button.primary, 
+.button.primary { 
+  background-color: #1ABC9C;
+  color: #fff;
+}
+button.primary:hover, 
+button.primary:focus, 
+.button.primary:hover, 
+.button.primary:focus {
+  background-color: #16A085;
+  color: #fff;
+}
+button.disabled.primary, 
+button[disabled].primary, 
+.button.disabled.primary, 
+.button[disabled].primary,
+button.disabled.primary:hover, 
+button.disabled.primary:focus, 
+button[disabled].primary:hover, 
+button[disabled].primary:focus, 
+.button.disabled.primary:hover, 
+.button.disabled.primary:focus, 
+.button[disabled].primary:hover, 
+.button[disabled].primary:focus {
+  background-color: #95a5a6;
+  color: #E6E6E6;
+}
+
+/* WARNING */
+button.warning, 
+.button.warning { 
+  background-color: #C0392A;
+  color: #fff;
+}
+button.warning:hover, 
+button.warning:focus, 
+.button.warning:hover, 
+.button.warning:focus {
+  background-color: #82251A;
+  color: #e6e6e6;
+}
+
+button.disabled.warning, 
+button[disabled].warning, 
+.button.disabled.warning, 
+.button[disabled].warning,
+button.disabled.warning:hover, 
+button.disabled.warning:focus, 
+button[disabled].warning:hover, 
+button[disabled].warning:focus, 
+.button.disabled.warning:hover, 
+.button.disabled.warning:focus, 
+.button[disabled].warning:hover, 
+.button[disabled].warning:focus {
+  background-color: #95a5a6;
+  color: #E6E6E6;
+}
+
+/* WHITE */
+button.white, 
+.button.white { 
+  background-color: #fff;
+  color: #2C3E50;
+}
+button.white:hover, 
+button.white:focus, 
+.button.white:hover, 
+.button.white:focus {
+  background-color: #E0E0E0;
+  color: #2C3E50;
+}
+
+button.disabled.white, 
+button[disabled].white, 
+.button.disabled.white, 
+.button[disabled].white,
+button.disabled.white:hover, 
+button.disabled.white:focus, 
+button[disabled].white:hover, 
+button[disabled].white:focus, 
+.button.disabled.white:hover, 
+.button.disabled.white:focus, 
+.button[disabled].white:hover, 
+.button[disabled].white:focus {
+  background-color: #95a5a6;
+  color: #E6E6E6;
+}
+
+/* BLACK */
+button.black, 
+.button.black { 
+  background-color: #2C3E50;
+  color: #fff;
+}
+button.black:hover, 
+button.black:focus, 
+.button.black:hover, 
+.button.black:focus {
+  background-color: #213140;
+  color: #fff;
+}
+
+button.disabled.black, 
+button[disabled].black, 
+.button.disabled.black, 
+.button[disabled].black,
+button.disabled.black:hover, 
+button.disabled.black:focus, 
+button[disabled].black:hover, 
+button[disabled].black:focus, 
+.button.disabled.black:hover, 
+.button.disabled.black:focus, 
+.button[disabled].black:hover, 
+.button[disabled].black:focus {
+  background-color: #95a5a6;
+  color: #E6E6E6;
+}
+
+/* GRAY */
+button.gray, 
+.button.gray { 
+  background-color: #A9B2B8;
+  color: #2C3E50;
+}
+button.gray:hover, 
+button.gray:focus, 
+.button.gray:hover, 
+.button.gray:focus {
+  background-color: #E0E5E5;
+  color: #2C3E50;
+}
+
+button, .button, p {
+  margin: 0;
+}
+
+.side-nav {padding: 0;}
+
+.side-nav li {
+  font-size: 16px;
+  line-height: 40px;
+  font-weight: 100;
+}
+
+.side-nav li.active>a:first-child:not(.button) {
+  color: #2C3E50;
+  background-color: #F8F8FB;
+}
+
+.side-nav li>a:first-child:not(.button), .side-nav li a:not(.button) {
+  color: #fff;
+}
+
+.side-nav li>a:first-child:not(.button) i {
+  opacity: 0.6;
+}
+
+.side-nav li.active>a:first-child:not(.button) i {
+  opacity: 1;
+}
+
+.side-nav li.active:hover a {
+  background-color: #F8F8FB;
+}
+
+.side-nav li:hover a {
+  background-color: #3C4E60;
+}
+
+.addresses ul {
+  margin-left: 0;
+}
+
+.addresses .list-addr i {
+  position: absolute;
+  top: -25px;
+  left: 6px;
+  cursor: pointer;
+}
+
+.addresses .list-addr contact {
+  margin-left: 42px;
+  cursor: text;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.video-box {
+  width: 70px;
+  text-align: center;
+  margin-right: 20px;
+  padding-bottom: 5px;
+  float: left;
+}
+
+.video-small {
+  width: 50px;
+  height: 50px;
+}
+
+.icon-input {
+  position: absolute;
+  top: 11px;
+  right: 20px;
+  font-size: 16px;
+  color: #fff;
+}
+
+.icon-input .fi-check {
+  background-color: #1ABC9C;
+  padding: 0.2rem 0.4rem;
+}
+
+.icon-input .fi-x {
+  background-color: #C0392A;
+  padding: 0.2rem 0.4rem;
+}
+
+.box-status {
+  float: right;
+}
+
+.icon-status { 
+  background-color: #34495E;
+  color: #7A8C9E;
+  border-radius: 100%;
+  padding: 0.17rem 0.3rem;
+  float: left;
+  margin-bottom: 0.2rem;
+}
+
+.has-error {
+  color: #C0392A;
+}
+
+.is-valid {
+  color: #1ABC9C;
+}
+
+input.ng-invalid-match, input.ng-invalid-match:focus {
+  border-color: red;
+}
+
+.copayers h3, .copayers h4, .waiting-copayers h4 {
+  color: #fff;
+  font-weight: 100;
+}
+
+.copayers {
+  width: 100%;
+  background-color: #213140;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+  border-top: 1px solid #475065;
+  overflow-y: hidden;
+}
+
+.copayers i {
+  opacity: 0.6;
+}
+
+.black {
+  background-color: #2C3E50;
+}
+
+.text-light {font-weight: 100;}
+.text-gray {color: #8597A7;}
+.text-black {color: #2C3E50;}
+.text-primary {color: #1ABC9C;}
+.text-secondary {color: #3498DB;}
+.text-white {color: #fff;}
+.text-warning {color: #CA5649;}
+
+.footer-setup a.text-gray:hover {color: #fff;}
+a.text-gray:hover {color: #2C3E50;}
+a.text-black:hover {color: #213140;}
+a.text-primary:hover {color: #50E3C2;}
+a.text-secondary:hover {color: #4A90E2;}
+a.text-white:hover {color: #ccc;}
+a.text-warning:hover {color: #FD7262;}
+
+.box-setup-copayers {
+  background: #2C3E50;
+  -moz-box-shadow:    0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
+  box-shadow:         0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
+  margin-bottom: 5px;
+}
+
+.box-setup-copay-required {
+  border: 3px solid #1ABC9C;
+  opacity: 1;
+}
+
+.loading-screen {
+  text-align: center;
+  background-color: #1ABC9C;
+  width: 100%;
+  position: absolute;
+  top: 40%;
+}
+
+.box-setup .panel {
+  background-color: #2C3E50;
+  padding: 1rem;
+  border: 0;
+}
+
+.box-setup h3 {
+  color: #fff;
+}
+
+.joyride-tip-guide {
+  width: 150px;
+  background: #213140;
+  top: -20px !important;
+  left: 50px !important;
+  -moz-box-shadow:    1px 1px 3px 0px rgba(0,0,0,0.40);
+  box-shadow:         1px 1px 3px 0px rgba(0,0,0,0.40);
+}
+
+.joyride-tip-guide .joyride-nub.left {
+  border-color: #213140 !important;
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.joyride-content-wrapper {
+  padding: 0.8rem
+}
+
+.joyride-tip-guide p {
+  margin: 0;
+  color: #8597A7;
+}
+
+.panel qrcode {
+  float: left;
+  width: 160px;
+  height: 160px;
+  padding: 5px 0 0 5px;
+  background-color: white;
+}
+
+.panel qrcode canvas {
+  width: 150px;
+  height: 150px;
+}
+
+.panel .secret {
+  line-height: 1.3rem;
+  padding-top: 4rem;
+  float: left;
+  margin-left: 2rem;
+  overflow-wrap: break-word;
+  width: 55%;
+  text-align: left;
+}
+
+/**** Copy to clipboard ****/
+
+.btn-copy {
+  color: #9b9b9b;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  outline: none;
+  vertical-align: sub;
+  background: transparent url('../img/icons/copy.png') center center no-repeat;
+}
+
+.btn-copied {
+  display: inline-block;
+  width: auto;
+  color: #16A085; 
+  font-weight: bold; 
+  font-size: 11px; 
+}
+
+.btn-copy.zeroclipboard-is-hover { color: #000; }
+.btn-copy.zeroclipboard-is-active { opacity: 1; }
+
+.copayer-list-small-height {
+  display: none;
+}
+
+@media only screen and (min-width: 40.063em) {
+  dialog.tiny, .reveal-modal.tiny {
+    width: 50%;
+    margin-left: -25%;
+  }
+}
+
+@media (max-height: 610px) {
+  .copayer-list {
+    display: none;
+  }
+
+  .copayer-list-small-height {
+    display: block;
+  }
+
+  .sidebar .copayer-list-small-height {
+    list-style-type: none;
+    padding:0; margin:0;
+  }
+
+  .sidebar .copayer-list-small-height li {
+    margin-top: 15px;
+    font-weight: 100;
+    font-size: 12px;
+    color: #C9C9C9;
+  }
+
+  .sidebar .copayer-list-small-height img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .copayers {
+    padding: 10px 20px;
+  }
+
+  .side-bar h3 {
+    margin-top: 0;
+  }
+
+  .side-nav li {
+    line-height: 30px;
+  }
+}
+
+.wide-page {
+  background-color: #2C3E50;
+  margin: 5% 0;
+  padding: 50px;
+}
+
+
+/*-----------------------------------------------------------------*/
diff --git a/css/src/mobile.css b/css/src/mobile.css
new file mode 100644
index 000000000..9049147ea
--- /dev/null
+++ b/css/src/mobile.css
@@ -0,0 +1,131 @@
+/*
+ *
+ * Copay mobile CSS
+ *
+ */
+
+@media (max-width: 1024px) {
+
+  .line-dashed-setup-v, 
+  .line-dashed-v,
+  .line-dashed-h {
+    border: none;
+  }
+
+  .logo-setup {
+    margin: 20px 0;
+  }
+
+  .home, .open, .join, .waiting-copayers, .setup, .import, .settings {
+    margin-top: 0;
+  }
+
+  .sidebar {
+    display: none;
+  }
+
+  .page, .main {
+    height: auto;
+  }
+
+  .main {
+    height: 100%;
+    margin-top: 40px;
+    margin-left: 0;
+    margin-bottom: -40px;
+    padding-bottom: 60px;
+  }
+
+  .tab-bar {
+    display: block;
+    position: fixed;
+    width: 100%;
+    z-index: 5;
+    background: #3C4E60;
+  }
+
+  .left-off-canvas-menu {
+    background: #2C3E50;
+  }
+
+  .off-canvas-wrap,.inner-wrap{
+    height:100%;   
+  }
+
+  .page{
+    height:100%;   
+  }
+  
+  .copayers {
+    position: relative;
+    padding: 0;
+    overflow-y: none;
+  }
+
+  ul.copayer-list img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .tab-bar-section {
+    text-align: left;
+  }
+
+  .setup-page {
+    height: 100%;
+  }
+
+  .hide-tab-bar {
+    display: none;
+  }
+
+
+  .tab-bar h1 {
+    font-weight: 100;
+  }
+
+  ul.off-canvas-list li a {
+    border-bottom: 1px solid #425568;
+    padding: 0.66667rem 1rem;
+    color: #fff;
+  }
+
+  ul.off-canvas-list li a i {
+    opacity: 0.6;
+  }
+
+  .box-founds {
+    background-color: #213140;
+  }
+
+  .left-small {
+    border-right: 1px solid #425568;
+  }
+
+  .panel .secret {
+    padding-top: 0.5rem;
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    text-align: center;
+  }
+
+  .panel qrcode {
+    display: block;
+    float: none;
+    margin: 0 auto;
+    width: 210px;
+    height: 210px;
+  }
+
+  .panel qrcode canvas {
+    width: 200px;
+    height: 200px;
+  }
+
+  .btn-copy {
+    display: none;
+  }
+
+}
+