Creative Commons – Attribution (CC BY 3.0)
Thanks a lot for icons from
The Noun Project collection.
Here's the list of all used icons:
Piggy Bank designed by Jezmael Basilio
Arrow designed by Jardson A.
Wallet designed by Luis Prado
Analytics designed by Aneeque Ahmed
Piggy Bank designed by Michelle Ann
Light Bulb designed by Chris Brunskill
Speech Bubble designed by Cengiz SARI
Bag designed by Agus Purwanto
Analytics designed by Luboš Volkov
College Tuition designed by Rediffusion
Marijuana designed by Gareth
Stroller designed by Edward Boatman
Television designed by Piero Borgo
Island designed by Bohdan Burmich
Light Bulb designed by Rémy Médard
Shirt designed by Megan Sheehan
Telephone designed by Ian Mawle
Shopping Cart designed by Megan Sheehan
Gas designed by Jon Testa
================================================
FILE: gateway/src/main/resources/static/css/animation.css
================================================
/* ZOOM AVATAR */
@-webkit-keyframes zoomavatar {
0% {
-webkit-transform: scale(0.1);
}
60% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes zoomavatar {
0% {
-moz-transform: scale(0.1);
}
80% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes zoomavatar {
0% {
-o-transform: scale(0.1);
}
60% {
-o-transform: scale(1.3);
}
100% {
-o-transform: scale(1);
}
}
@-ms-keyframes zoomavatar {
0% {
-ms-transform: scale(0.1);
}
60% {
-ms-transform: scale(1.3);
}
100% {
-ms-transform: scale(1);
}
}
@keyframes zoomavatar {
0% {
transform: scale(0.1);
}
60% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
/* UNZOOM AVATAR */
@-webkit-keyframes unzoomavatar {
0% {
-webkit-transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(0.1);
}
}
@-moz-keyframes unzoomavatar {
0% {
-moz-transform: scale(1);
}
40% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(0.1);
}
}
@-o-keyframes unzoomavatar {
0% {
-o-transform: scale(1);
}
40% {
-o-transform: scale(1.3);
}
100% {
-o-transform: scale(0.1);
}
}
@-ms-keyframes unzoomavatar {
0% {
-ms-transform: scale(1);
}
40% {
-ms-transform: scale(1.3);
}
100% {
-ms-transform: scale(0.1);
}
}
@keyframes unzoomavatar {
0% {
transform: scale(1);
}
40% {
transform: scale(1.3);
}
100% {
transform: scale(0.1);
}
}
/* GO LEFT */
@-webkit-keyframes goleft {
0% {
right: 100px; left:0%;
}
60% {
right: 300px; left:-20%;
}
100% {
right: 300px; left:-18%;
}
}
@-moz-keyframes goleft {
0% {
right: 100px; left:0%;
}
60% {
right: 300px; left:-20%;
}
100% {
right: 300px; left:-18%;
}
}
@-o-keyframes goleft {
0% {
right: 100px; left:0%;
}
60% {
right: 300px; left:-20%;
}
100% {
right: 300px; left:-18%;
}
}
@-ms-keyframes goleft {
0% {
right: 100px; left:0%;
}
60% {
right: 300px; left:-20%;
}
100% {
right: 300px; left:-18%;
}
}
@keyframes goleft {
0% {
right: 100px; left:0%;
}
60% {
right: 300px; left:-20%;
}
100% {
right: 300px; left:-18%;
}
}
/* GO RIGHT */
@-webkit-keyframes goright {
0% {
right: -100px; left:0%;
}
60% {
right: -300px; left:20%;
}
100% {
right: -300px; left:18%;
}
}
@-moz-keyframes goright {
0% {
right: -100px; left:0%;
}
60% {
right: -300px; left:20%;
}
100% {
right: -300px; left:18%;
}
}
@-o-keyframes goright {
0% {
right: -100px; left:0%;
}
60% {
right: -300px; left:20%;
}
100% {
right: -300px; left:18%;
}
}
@-ms-keyframes goright {
0% {
right: -100px; left:0%;
}
60% {
right: -300px; left:20%;
}
100% {
right: -300px; left:18%;
}
}
@keyframes goright {
0% {
right: -100px; left:0%;
}
60% {
right: -300px; left:20%;
}
100% {
right: -300px; left:18%;
}
}
/* GO DOWN */
@-webkit-keyframes godown {
0% {
bottom:20%;
}
60% {
bottom:4%;
}
100% {
bottom:8%;
}
}
@-moz-keyframes godown {
0% {
bottom:20%;
}
60% {
bottom:4%;
}
100% {
bottom:8%;
}
}
@-o-keyframes godown {
0% {
bottom:20%;
}
60% {
bottom:4%;
}
100% {
bottom:8%;
}
}
@-ms-keyframes godown {
0% {
bottom:20%;
}
60% {
bottom:4%;
}
100% {
bottom:8%;
}
}
@keyframes godown {
0% {
bottom:20%;
}
60% {
bottom:4%;
}
100% {
bottom:8%;
}
}
/* PLUS */
@-webkit-keyframes plus {
0% {
-webkit-transform: scale(0.85);
}
8% {
-webkit-transform: scale(1);
}
80% {
-webkit-transform: scale(0.85);
}
100% {
-webkit-transform: scale(0.85);
}
}
@-moz-keyframes plus {
0% {
-moz-transform: scale(0.85);
}
8% {
-moz-transform: scale(1);
}
80% {
-moz-transform: scale(0.85);
}
100% {
-moz-transform: scale(0.85);
}
}
@-o-keyframes plus {
0% {
-o-transform: scale(0.85);
}
8% {
-o-transform: scale(1);
}
80% {
-o-transform: scale(0.85);
}
100% {
-o-transform: scale(0.85);
}
}
@-ms-keyframes plus {
0% {
-ms-transform: scale(0.85);
}
8% {
-ms-transform: scale(1);
}
80% {
-ms-transform: scale(0.85);
}
100% {
-ms-transform: scale(0.85);
}
}
@keyframes plus {
0% {
transform: scale(0.85);
}
8% {
transform: scale(1);
}
80% {
transform: scale(0.85);
}
100% {
transform: scale(0.85);
}
}
/* SLIDER */
@-webkit-keyframes endoflist {
0% {
-webkit-transform: translateY(0px);
}
20% {
-webkit-transform: translateY(-60px);
}
100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes endoflist {
0% {
-moz-transform: translateY(0px);
}
20% {
-moz-transform: translateY(-60px);
}
100% {
-moz-transform: translateY(0px);
}
}
@-o-keyframes endoflist {
0% {
-o-transform: translateY(0px);
}
20% {
-o-transform: translateY(-60px);
}
100% {
-o-transform: translateY(0px);
}
}
@-ms-keyframes endoflist {
0% {
-ms-transform: translateY(0px);
}
20% {
-ms-transform: translateY(-60px);
}
100% {
-ms-transform: translateY(0px);
}
}
@keyframes endoflist {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-60px);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes startoflist {
0% {
-webkit-transform: translateY(0px);
}
20% {
-webkit-transform: translateY(60px);
}
100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes startoflist {
0% {
-moz-transform: translateY(0px);
}
20% {
-moz-transform: translateY(60px);
}
100% {
-moz-transform: translateY(0px);
}
}
@-o-keyframes startoflist {
0% {
-o-transform: translateY(0px);
}
20% {
-o-transform: translateY(60px);
}
100% {
-o-transform: translateY(0px);
}
}
@-ms-keyframes startoflist {
0% {
-ms-transform: translateY(0px);
}
20% {
-ms-transform: translateY(60px);
}
100% {
-ms-transform: translateY(0px);
}
}
@keyframes startoflist {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(60px);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes frameanimate {
0% {
-webkit-transform: translateY(-284px);
}
50% {
-webkit-transform: translateY(50px);
}
100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes frameanimate {
0% {
-moz-transform: translateY(-284px);
}
50% {
-moz-transform: translateY(100px);
}
100% {
-moz-transform: translateY(0px);
}
}
@-o-keyframes frameanimate {
0% {
-o-transform: translateY(-284px);
}
50% {
-o-transform: translateY(100px);
}
100% {
-o-transform: translateY(0px);
}
}
@-ms-keyframes frameanimate {
0% {
-ms-transform: translateY(-284px);
}
50% {
-ms-transform: translateY(100px);
}
100% {
-ms-transform: translateY(0px);
}
}
@keyframes frameanimate {
0% {
transform: translateY(-284px);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0px);
}
}
/*MODAL WINDOWS*/
/* MODAL FORWARD */
@-webkit-keyframes modalforward {
0% {
-webkit-transform: scale(0.4);
}
60% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes modalforward {
0% {
-moz-transform: scale(0.4);
}
80% {
-moz-transform: scale(1.1);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes modalforward {
0% {
-o-transform: scale(0.4);
}
60% {
-o-transform: scale(1.1);
}
100% {
-o-transform: scale(1);
}
}
@-ms-keyframes modalforward {
0% {
-ms-transform: scale(0.4);
}
60% {
-ms-transform: scale(1.1);
}
100% {
-ms-transform: scale(1);
}
}
@keyframes modalforward {
0% {
transform: scale(0.4);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* UNZOOM REVERSE */
@-webkit-keyframes modalreverse {
0% {
-webkit-transform: scale(1);
}
40% {
-webkit-transform: scale(1.06);
}
100% {
-webkit-transform: scale(0.6);
}
}
@-moz-keyframes modalreverse {
0% {
-moz-transform: scale(1);
}
40% {
-moz-transform: scale(1.06);
}
100% {
-moz-transform: scale(0.6);
}
}
@-o-keyframes modalreverse {
0% {
-o-transform: scale(1);
}
40% {
-o-transform: scale(1.06);
}
100% {
-o-transform: scale(0.6);
}
}
@-ms-keyframes modalreverse {
0% {
-ms-transform: scale(1);
}
40% {
-ms-transform: scale(1.06);
}
100% {
-ms-transform: scale(0.6);
}
}
@keyframes modalreverse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.06);
}
100% {
transform: scale(0.6);
}
}
/* MODAL VALUE ERROR */
@-webkit-keyframes modalvalueerror {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes modalvalueerror {
0% {
-moz-transform: scale(1);
}
40% {
-moz-transform: scale(1.5);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes modalvalueerror {
0% {
-o-transform: scale(1);
}
40% {
-o-transform: scale(1.5);
}
100% {
-o-transform: scale(1);
}
}
@-ms-keyframes modalvalueerror {
0% {
-ms-transform: scale(1);
}
40% {
-ms-transform: scale(1.5);
}
100% {
-ms-transform: scale(1);
}
}
@keyframes modalvalueerror {
0% {
transform: scale(1);
}
40% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* NEW ITEM ADDED */
@-webkit-keyframes newitemadded {
20% {
background-color: #f2f2f2;
}
70% {
background-color: #f2f2f2;
}
100% {
background-color: white;
}
}
@-moz-keyframes newitemadded {
30% {
background-color: #f2f2f2;
}
70% {
background-color: #f2f2f2;
}
100% {
background-color: white;
}
}
@-o-keyframes newitemadded {
30% {
background-color: #f2f2f2;
}
70% {
background-color: #f2f2f2;
}
100% {
background-color: white;
}
}
@-ms-keyframes newitemadded {
30% {
background-color: #f2f2f2;
}
70% {
background-color: #f2f2f2;
}
100% {
background-color: white;
}
}
@keyframes newitemadded {
30% {
background-color: #f2f2f2;
}
70% {
background-color: #f2f2f2;
}
100% {
background-color: white;
}
}
/* BUBBLE */
@-webkit-keyframes bubble {
5% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
10% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
40% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
80% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
90% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
95% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
100% {
opacity: 1;
background-position: -280px 0;
top: 21px; right: 10px;
}
}
@-moz-keyframes bubble {
5% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
10% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
40% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
80% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
90% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
95% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
100% {
opacity: 1;
background-position: -280px 0;
top: 21px; right: 10px;
}
}
@keyframes bubble {
5% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
10% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
40% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
80% {
opacity: 1;
background-position: -240px 0;
top: 12px; right: 12px;
}
90% {
opacity: 0;
background-position: -240px 0;
top: 12px; right: 12px;
}
95% {
opacity: 0;
background-position: -280px 0;
top: 21px; right: 10px;
}
100% {
opacity: 1;
background-position: -280px 0;
top: 21px; right: 10px;
}
}
@-webkit-keyframes spincircle {
0% {
-webkit-transform: rotate(0deg);
}
95% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(370deg);
}
}
@-moz-keyframes spincircle {
0% {
-moz-transform: rotate(0deg);
}
95% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(370deg);
}
}
@-o-keyframes spincircle {
0% {
-o-transform: rotate(0deg);
}
95% {
-o-transform: rotate(360deg);
}
100% {
-o-transform: rotate(370deg);
}
}
@-ms-keyframes spincircle {
0% {
-ms-transform: rotate(0deg);
}
95% {
-ms-transform: rotate(360deg);
}
100% {
-ms-transform: rotate(370deg);
}
}
@keyframes spincircle {
0% {
transform: rotate(0deg);
}
95% {
-transform: rotate(360deg);
}
100% {
transform: rotate(370deg);
}
}
================================================
FILE: gateway/src/main/resources/static/css/launch.css
================================================
#createaccount, #enter, #secondenter, #info, #backlogin, #backpassword, #plusavatar, .columnimage {
background: url("../images/1pagesprites.png") no-repeat;
background-size: 650px 197px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
#createaccount, #enter, #secondenter, #info, #backlogin, #backpassword, #plusavatar, .columnimage {
background: url("../images/1pagesprites@2x.png") no-repeat;
background-size: 650px 197px;
}
}
/*========================== CARDS WRAPPER ===========================*/
#loginpage {
top:0; bottom: 0; left:0; right: 0;
position: absolute;
margin: auto;
width: 300px;
height: 500px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
display: none;
}
.CCattribution {
position: relative;
top: 50px;
text-align: center;
font-family: "Helvetica", "Arial";
font-size: 12px;
line-height: 30px;
color: #525252;
padding-bottom: 90px;
}
.CCattribution a {
color: #7ba1b4;
}
#loginpage, .front, .back {
width: 300px;
height: 500px;
}
#flipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transition: 1000ms;
-moz-transition: 1000ms;
-ms-transition: 1000ms;
-o-transition: 1000ms;
transition: 1000ms;
position: relative;
overflow: visible;
}
.flippedcardinfo {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.FRONTCARD, .BACKCARD {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
overflow: visible;
top:0; bottom: 0; left:0; right: 0;
position: absolute;
text-align: center;
width: 300px;
}
.fliptext {
position: absolute;
text-transform: uppercase;
left: 0px; right: 0px; bottom: -10px;
height: 30px;
font-size: 11px;
color: #6e6e6e;
line-height: 0.95em;
display: inline-block;
font-family: Arial;
background-color: white;
}
.fliptext a{
color: #96bcce;
text-decoration: none;
border-bottom: 1px dashed #96bcce;
}
.fliptext a:hover{
color: #7ba1b4;
text-decoration: none;
border-bottom: 1px dashed #7ba1b4;
}
/*================================= FIRST CARD =================================*/
.FRONTCARD {
z-index: 2;
height: 450px;
background-color: white;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.auto-shake{
-webkit-animation: 1s auto-shake ease-out;
-moz-animation: 1s auto-shake ease-out;
-o-animation: 1s auto-shake ease-out;
-ms-animation: 1s auto-shake ease-out;
animation: 1s auto-shake ease-out;
}
.hover-shake{
-webkit-animation: 1.6s hover-shake ease-out;
-moz-animation: 1.6s hover-shake ease-out;
-o-animation: 1.6s hover-shake ease-out;
-ms-animation: 1.6s hover-shake ease-out;
animation: 1.6s hover-shake ease-out;
}
.loadingspin{
-webkit-animation: 2s loadingspin;
-moz-animation: 2s loadingspin;
-o-animation: 2s loadingspin;
-ms-animation: 2s loadingspin;
animation: 2s loadingspin;
}
#piggy {
display: block;
background: url("../images/piggy_large.gif") no-repeat;
background-size: 178px 178px;
width: 178px;
height: 178px;
position: relative;
margin: auto;
z-index: 50;
}
#enter, #secondenter {
-webkit-animation: enterarrow 2s infinite;
-moz-animation: enterarrow 2s infinite;
-o-animation: enterarrow 2s infinite;
-ms-animation: enterarrow 2s infinite;
animation: enterarrow 2s infinite;
background-position: -190px -60px;
margin-left: 222px;
margin-top: 18px;
width: 52px;
height: 12px;
position: absolute;
cursor: pointer;
display: none;
z-index: 7;
}
#secondenter{
position: absolute;
bottom: 85px;
z-index: 4;
}
#preloader{
background: url("../images/preloader.gif") center no-repeat;
background-size: 18px 18px;
margin-left: 210px;
bottom: 69px;
position: absolute;
display: none;
width: 52px;
height: 46px;
z-index: 5;
}
/*FLIP BUTTON*/
#wrapper {
display: block;
font-size: 13px;
color: black;
position: absolute;
top: 335px;
width: 300px;
height: 46px;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-ms-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
-ms-transform: rotated3(1,0,0,0);
-webkit-transform-origin: 50% 46px 0;
-moz-transform-origin: 50% 46px 0;
-ms-transform-origin: 50% 46px 0;
-o-transform-origin: 50% 46px 0;
transform-origin: 10% 46px 0;
z-index: 3;
}
#cube {
position: absolute;
width: 300px;
height: 46px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);
-moz-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);
-ms-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);
-o-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);
transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);
}
.flippedform{
-webkit-transform-origin: 0 46px -46px;
-moz-transform-origin: 0 46px -46px;
-ms-transform-origin: 0 46px -46px;
-o-transform-origin: 0 46px -46px;
transform-origin: 0 46px -46px;
-webkit-transform: rotate3d(1,0,0,90deg);
-moz-transform: rotate3d(1,0,0,90deg);
-ms-transform: rotate3d(1,0,0,90deg);
-o-transform: rotate3d(1,0,0,90deg);
transform: rotate3d(1,0,0,90deg);
}
.side {
outline: 3px double #a6ccd9;
text-indent: 15px;
width: 300px;
height: 46px;
line-height: 48px;
position: absolute;
}
#backlogin, #backpassword {
display: block;
position: absolute;
left: 66px;
top: 12px;
border-color: 1px solid;
width: 22px;
height: 20px;
}
#backlogin {
background-position: -250px -24px;
}
#backpassword {
background-position: -250px 0;
}
#side1 {
background-position: -250px -24px;
background-color: white;
width: 300px;
height: 46px;
}
#side2 {
background-color: white;
-webkit-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);
-moz-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);
-ms-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);
-o-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);
transform: translateZ(-23px) translateY(23px) rotateX(-90deg);
}
/* END OF FLIP BUTTON */
#logotext {
background: url("../images/logotext_large.gif") no-repeat;
background-size: 172px 65px;
width: 172px;
height: 65px;
position: relative;
margin: auto;
margin-top: 36px;
}
#info {
background-position: -190px 0;
cursor: pointer;
width: 49px;
height: 49px;
position: absolute;
margin: auto;
top:-10px;
right: -20px;
}
/* FIRST CARD FORMS */
input[class="frontforms"]{
border: 0px solid;
position: relative;
color: #4c4c4c;
font-family: Arial;
font-size: 15px;
}
input[id="frontloginform"]{
margin-left: 20px;
height: 25px;
width: 110px;
}
input[id="frontpasswordform"]{
margin-left: 25px;
height: 25px;
width: 95px;
}
.ghostform {
display: none;
}
input[class="backforms"]:focus { outline: none; }
input[class="backforms"]::-webkit-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
input[class="backforms"]:-ms-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
input[class="backforms"]:-moz-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
input[type="text"]:focus, input[type="password"]:focus { outline: none; }
input[class="frontforms"]::-webkit-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
input[class="frontforms"]:-ms-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
input[class="frontforms"]:-moz-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}
/*================================= SECOND CARD =================================*/
.BACKCARD {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background-color: white;
z-index: 1;
height: 500px;
}
#franklin{
border: 1px solid #b9d6dc;
-webkit-border-radius: 90px;
-ms-border-radius: 90px;
-o-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
top:0; left: 0; right: 0; bottom: 0;
position: relative;
margin: auto;
width: 162px;
height: 162px;
}
#plusavatar {
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
transition: 0.4s;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
width: 180px;
height: 180px;
position: absolute;
top:10px; left:0; right: 0;
background-position: 0 -40px;
margin: auto;
z-index: 2;
}
.avataranimation {
-webkit-animation: 2.5s plusavatar;
-moz-animation: 2.5s plusavatar;
-o-animation: 2.5s plusavatar;
-ms-animation: 2.5s plusavatar;
animation: 2.5s plusavatar;
}
.infiniteavataranimation {
-webkit-animation: 1.5s infinite plusavatar;
-moz-animation: 1.5s infinite plusavatar;
-o-animation: 1.5s infinite plusavatar;
-ms-animation: 1.5s infinite plusavatar;
animation: 1.5s infinite plusavatar;
}
#createaccount {
background-position: -190px -80px;
width: 134px;
height: 44px;
position: relative;
margin: auto;
margin-top: 24px;
}
.inputWrapper {
top:-335px; left: 0; right: 0; bottom: 0;
margin: auto;
overflow: hidden;
position: absolute;
cursor: pointer;
width: 180px;
height: 180px;
z-index: 3;
}
.hidden {
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
.upload {
-webkit-animation: plus 2s infinite;
-moz-animation: plus 2s infinite;
-o-animation: plus 2s infinite;
-ms-animation: plus 2s infinite;
animation: plus 2s infinite;
}
#mailform {
position: absolute;
top: 190px;
margin: auto;
right:-120px;
text-transform: uppercase;
width: 540px;
height: 330px;
font-size: 13px;
display: block;
opacity: 0.9;
display: none;
}
.mailforminfo {
position: relative;
text-transform: none;
top:-60px;
font-family: "Museo-500";
font-size: 12px;
color: #525252;
}
.mailforminfosmall {
font-size: 11px;
position: relative;
top: 30px;
line-height: 1.7;
}
#skipmail a {
position: relative;
text-transform: uppercase;
left: 0px; right: 0px; bottom: -193px;
font-size: 11px;
font-family: Arial;
color: #96bcce;
text-decoration: none;
border-bottom: 1px dashed #96bcce;
}
#skipmail a:hover{
color: #7ba1b4;
text-decoration: none;
border-bottom: 1px dashed #7ba1b4;
}
/* SECOND CARD FORMS */
#registrationforms {
position: relative;
top: 36px;
line-height: 3.3em;
}
input[class="backforms"]{
text-align: center;
border: 1px solid #a6ccd9;
color: #4c4c4c;
font-family: Arial;
font-size: 15px;
height: 30px;
width: 296px;
}
input[id="backmailform"] {
position: relative;
text-align: center;
border: 1px solid #a6ccd9;
color: #4c4c4c;
font-family: Arial;
font-size: 15px;
height: 30px;
width: 296px;
top: 140px;
}
.regbutton, .demobutton, .mailbutton {
cursor: pointer;
position: relative;
background-color: white;
border: 0px solid;
outline: 3px double #a6ccd9;
text-transform: uppercase;
text-shadow: 1px 1px 1px white;
color: #6e6e6e;
}
.regbutton:hover, .demobutton:hover, .mailbutton:hover {
background-color: #f4f9fb;
}
.regbutton:active, .demobutton:active, .mailbutton:active {
background-color: #ecf3f6;
}
.regbutton {
height: 34px;
width: 195px;
top:18px;
font-size: 11px;
}
.demobutton {
letter-spacing: 3px;
height: 50px;
width: 300px;
top: 436px;
font-size: 12px;
}
.mailbutton {
position: relative;
height: 34px;
width: 195px;
top: 178px;
font-size: 11px;
}
/* THIRD CARD */
.flipinfo, .frominfo {
cursor: pointer;
}
.infoflipback {
position: absolute;
top: -12%;
width: 100%;
height: 500px;
cursor: pointer;
}
#infopage {
margin-left: -290px;
margin-top: -90px;
height: 660px;
width: 870px;
background-color: white;
z-index: 4;
display: none;
position: absolute;
color: #525252;
}
#regpage {
display: block;
}
#infosubtitle, #infotitle, #infofooter, #iconsfooter {
cursor: pointer;
font-family: "Museo-500";
position: absolute;
left: 0; right: 0;
margin: auto;
width: 100%;
}
#infosubtitle {
text-transform: uppercase;
font-size: 11px;
top: 0;
height: 30px;
}
#infotitle {
text-transform: uppercase;
font-size: 27px;
top: 35px;
height: 40px;
}
a#infofooter {
background-image: url("../images/github.gif");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: center;
color: #757575;
text-decoration: none;
display: block;
line-height: 120px;
font-size: 12px;
bottom: 30px;
margin: auto;
width: 20%;
height: 25px;
}
a#iconsfooter {
background-position: center;
color: #757575;
text-decoration: none;
font-size: 10px;
bottom: -30px;
}
#infoline {
position: relative;
width: 610px;
display: block;
margin: auto;
top: 425px;
border-top: 1px solid #b8d9e1;
}
#infolinetext {
font-family: "Museo-500";
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
line-height: 30px;
position: relative;
width: 245px;
height: 30px;
display: block;
margin: auto;
top: 410px;
background-color: white;
}
.infocolumn {
position: absolute;
top: 150px;
margin: auto;
display: block;
width: 286px;
height: 236px;
overflow: hidden;
}
#infoleft {
left:0;
}
#inforight {
right:0;
}
#infocenter {
left:0; right:0;
}
.columnimage {
width: 104px;
height: 104px;
position: absolute;
margin: auto;
left:0; right: 0; top: 30px;
}
#leftcolumn > .columnimage {
background-position: -546px 0;
}
#rightcolumn > .columnimage {
background-position: -330px 0;
}
#centercolumn > .columnimage {
background-position: -436px 0;
}
#leftcolumn, #rightcolumn, #centercolumn {
-moz-transition: 0.8s;
-o-transition: 0.8s ease-out;
-ms-transition: 0.8s ease-out;
-webkit-transition: 0.8s;
transition: 0.8s;
font-family: "Museo-500";
font-size: 12px;
width: 100%;
height: 200%;
position: absolute;
padding-top: 157px;
text-align: center;
top: 0%;
}
#leftcolumn:hover, #rightcolumn:hover, #centercolumn:hover {
top:-100%;
}
.columnfooter {
position: relative;
top: 150px;
font-size: 11px;
line-height: 17px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
#piggy {
background-image: url("../images/piggy_large@2x.gif");
}
#logotext {
background-image: url("../images/logotext_large@2x.gif");
}
}
/* ANIMATION */
/* SPIN THAT SHIT */
@-webkit-keyframes auto-shake {
0% {
-webkit-transform: rotate(0deg);
}
35% {
-webkit-transform: rotate(55deg);
}
50% {
-webkit-transform: rotate(-35deg);
}
70% {
-webkit-transform: rotate(20deg);
}
90% {
-webkit-transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes auto-shake {
0% {
-moz-transform: rotate(0deg);
}
35% {
-moz-transform: rotate(55deg);
}
50% {
-moz-transform: rotate(-35deg);
}
70% {
-moz-transform: rotate(20deg);
}
90% {
-moz-transform: rotate(-10deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@-o-keyframes auto-shake {
0% {
-o-transform: rotate(0deg);
}
35% {
-o-transform: rotate(55deg);
}
50% {
-o-transform: rotate(-35deg);
}
70% {
-o-transform: rotate(20deg);
}
90% {
-o-transform: rotate(-10deg);
}
100% {
-o-transform: rotate(0deg);
}
}
@-ms-keyframes auto-shake {
0% {
-ms-transform: rotate(0deg);
}
35% {
-ms-transform: rotate(55deg);
}
50% {
-ms-transform: rotate(-35deg);
}
70% {
-ms-transform: rotate(20deg);
}
90% {
-ms-transform: rotate(-10deg);
}
100% {
-ms-transform: rotate(0deg);
}
}
@keyframes auto-shake {
0% {
transform: rotate(0deg);
}
35% {
transform: rotate(55deg);
}
50% {
transform: rotate(-35deg);
}
70% {
transform: rotate(20deg);
}
90% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
/* SPIN AGAIN */
@-webkit-keyframes hover-shake {
0% {
-webkit-transform: rotate(0deg);
}
30% {
-webkit-transform: rotate(-30deg);
}
50% {
-webkit-transform: rotate(20deg);
}
70% {
-webkit-transform: rotate(-10deg);
}
90% {
-webkit-transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes hover-shake {
0% {
-moz-transform: rotate(0deg);
}
30% {
-moz-transform: rotate(-30deg);
}
50% {
-moz-transform: rotate(20deg);
}
70% {
-moz-transform: rotate(-10deg);
}
90% {
-moz-transform: rotate(5deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@-o-keyframes hover-shake {
0% {
-o-transform: rotate(0deg);
}
30% {
-o-transform: rotate(-30deg);
}
50% {
-o-transform: rotate(20deg);
}
70% {
-o-transform: rotate(-10deg);
}
90% {
-o-transform: rotate(5deg);
}
100% {
-o-transform: rotate(0deg);
}
}
@-ms-keyframes hover-shake {
0% {
-ms-transform: rotate(0deg);
}
30% {
-ms-transform: rotate(-30deg);
}
50% {
-ms-transform: rotate(20deg);
}
70% {
-ms-transform: rotate(-10deg);
}
90% {
-ms-transform: rotate(5deg);
}
100% {
-ms-transform: rotate(0deg);
}
}
@keyframes hover-shake {
0% {
transform: rotate(0deg);
}
30% {
ransform: rotate(-30deg);
}
50% {
transform: rotate(20deg);
}
70% {
transform: rotate(-10deg);
}
90% {
transform: rotate(5deg);
}
100% {
transform: rotate(0deg);
}
}
/*LOADING SPIN*/
@-webkit-keyframes loadingspin {
0% {
-webkit-transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(70deg);
}
70% {
-webkit-transform: rotate(-400deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@-moz-keyframes loadingspin {
0% {
-moz-transform: rotate(0deg);
}
20% {
-moz-transform: rotate(70deg);
}
70% {
-moz-transform: rotate(-400deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
@-o-keyframes loadingspin {
0% {
-o-transform: rotate(0deg);
}
20% {
-o-transform: rotate(70deg);
}
70% {
-o-transform: rotate(-400deg);
}
100% {
-o-transform: rotate(-360deg);
}
}
@-ms-keyframes loadingspin {
0% {
-ms-transform: rotate(0deg);
}
20% {
-ms-transform: rotate(70deg);
}
70% {
-ms-transform: rotate(-400deg);
}
100% {
-ms-transform: rotate(-360deg);
}
}
@keyframes loadingspin {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(70deg);
}
70% {
transform: rotate(-400deg);
}
100% {
transform: rotate(-360deg);
}
}
/* ENTER ARROW */
@-webkit-keyframes enterarrow {
0% {
left: 0px;
}
5% {
left: -5px;
}
15% {
left: 0px;
}
20% {
left: -5px;
}
35% {
left: 0px;
}
100% {
left: 0px;
}
}
@-moz-keyframes enterarrow {
0% {
left: 0px;
}
5% {
left: -5px;
}
15% {
left: 0px;
}
20% {
left: -5px;
}
35% {
left: 0px;
}
100% {
left: 0px;
}
}
@-o-keyframes enterarrow {
0% {
left: 0px;
}
5% {
left: -5px;
}
15% {
left: 0px;
}
20% {
left: -5px;
}
35% {
left: 0px;
}
100% {
left: 0px;
}
}
@-ms-keyframes enterarrow {
0% {
left: 0px;
}
5% {
left: -5px;
}
15% {
left: 0px;
}
20% {
left: -5px;
}
35% {
left: 0px;
}
100% {
left: 0px;
}
}
@keyframes enterarrow {
0% {
left: 0px;
}
5% {
left: -5px;
}
15% {
left: 0px;
}
20% {
left: -5px;
}
35% {
left: 0px;
}
100% {
left: 0px;
}
}
/*PLUS AVATAR*/
@-webkit-keyframes plusavatar {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes plusavatar {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes plusavatar {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes plusavatar {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes plusavatar {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
================================================
FILE: gateway/src/main/resources/static/css/style.css
================================================
@font-face {
font-family: 'Museo-100';
src: url('../fonts/museo-100/museo-100.eot');
src: local('@%@'),
url('../fonts/museo-100/museo-100.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo-100/museo-100.woff') format('woff'),
url('../fonts/museo-100/museo-100.svg') format('svg'),
url('../fonts/museo-100/museo-100.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Museo-300';
src: url('../fonts/museo-300/museo-300.eot');
src: local('@%@'),
url('../fonts/museo-300/museo-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo-300/museo-300.woff') format('woff'),
url('../fonts/museo-300/museo-300.svg') format('svg'),
url('../fonts/museo-300/museo-300.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Museo-500';
src: url('../fonts/museo-500/museo-500.eot');
src: local('@%@'),
url('../fonts/museo-500/museo-500.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo-500/museo-500.woff') format('woff'),
url('../fonts/museo-500/museo-500.svg') format('svg'),
url('../fonts/museo-500/museo-500.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Museo-300", Arial;
-webkit-font-smoothing: antialiased;
margin: auto;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
overflow: hidden;
}
.toppage, .bottompage {
-webkit-transition: all 0.6s cubic-bezier(0.94, 0.06, 0.05, 0.95);
-moz-transition: all0.6s cubic-bezier(0.77, 0, 0.175, 1);
-ms-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.toppage {
top:0;
width: 100%;
height: 100%;
display: block;
}
.bottompage {
top:100%;
width: 100%;
height: 100%;
display: none;
z-index: 600;
}
.sectionup {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.sectionDown {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
input::-ms-clear {
display: none;
}
input[type="text"], input[type="password"], textarea {
-webkit-appearance: none;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
::-moz-selection {
background: rgb(255, 221, 45);
}
::selection {
background: rgb(255, 221, 45);
}
*:focus {outline:0px none transparent;}
#bubble, #indicator, #save, #piggyicon, #rublesign, .arrowup, .arrowdown, .incomes-sprite-title, .close-sign, .modal-save-icon, #modaldeletecross, .initicons-arrow, .expenses-sprite-title, .savings-sprite-title, .triangle, .noUi-handle, .noUi-handle:after {
background-size: 538px 84px;
}
#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {
background-image: url("../images/icons.png");
background-size: 1031px 42px;
width: 42px;
height: 42px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {
background-image: url("../images/icons@2x.png");
}
}
.selectbox .select {
width: 55px;
height: 24px;
padding: 0 45px 0 10px;
font: 12px/24px Arial;
border: 1px solid #ccc;
}
.selectbox .dropdown {
top: 25px;
width: 110px;
margin: 0;
padding: 0 0;
background: #FFF;
border: 1px solid #ccc;
font: 12px Arial;
}
.selectbox .select .text {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.selectbox {
color: #333;
vertical-align: middle;
cursor: pointer;
margin-bottom: 26px;
}
.selectbox .trigger .arrow {
position: absolute;
top: 11px;
right: 10px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #a1a1a1;
width: 0;
height: 0;
overflow: hidden;
}
.selectbox .select:active {
background: #f8f8f8;
}
.selectbox li {
padding: 5px 10px 6px;
}
.selectbox li.selected {
background: #f6f6f6;
}
.selectbox li:hover {
background: #f6f6f6;
}
#lastlogo {
-webkit-perspective: 1000;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000;
position: absolute;
top: 8%; left: 0; right: 0;
margin: auto;
z-index: 1000;
width: 172px;
height: 204px;
display: none;
}
#lastlogoflipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
position: relative;
overflow: visible;
}
#logo_greeting, #logo_settings {
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
background: url("../images/logo_large.gif") no-repeat;
background-size: 137px 204px;
background-position: center;
width: 172px;
height: 204px;
position: absolute;
margin: auto;
left: 0; right: 0;
display: none;
z-index: 600;
}
#logo_greeting {
position: absolute;
display: none;
top: 8%;
}
#logo_settings, #logo_statistic {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
overflow: visible;
position: absolute;
cursor: pointer;
}
#logo_statistic {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: url("../images/logotext_large.gif") no-repeat;
background-size: 172px 65px;
width: 172px;
height: 65px;
position: absolute;
cursor: pointer;
z-index: 3000;
}
#settings_hat {
position: absolute;
width: 100%;
height: 36%;
background-color: white;
display: none;
z-index: 500;
}
#logoclickplace {
width: 100%;
height: 100%;
}
#bubble {
position: absolute;
top:-20px;
right: -60px;
background-position: -180px 0;
width: 57px;
height: 57px;
cursor: pointer;
display: none;
}
#indicator {
position: absolute;
background-position: -280px 0;
top: 21px; right: 10px;
width: 31px;
height: 31px;
}
.bubble-animation {
-webkit-animation: 1s bubble ease-out;
-moz-animation: 1s bubble ease-out;
-o-animation: 1s bubble ease-out;
-ms-animation: 1s bubble ease-out;
animation: 1s bubble ease-out;
}
input {
-webkit-font-smoothing: antialiased;
}
#centerbox {
top:0; left: 0; right: 0; bottom: 0;
position: absolute;
width: 250px;
height: 250px;
margin: auto;
display: none;
}
#avatarcontainer {
font-family: "Museo-100";
border: 1px solid #b9d6dc;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
top:0; left: 0; right: 0; bottom: 0;
position: absolute;
cursor: pointer;
width: 162px;
height: 162px;
margin: auto;
}
.forward {
-webkit-animation: 0.4s zoomavatar ease-out;
-moz-animation: 0.4s zoomavatar ease-out;
-o-animation: 0.4s zoomavatar ease-out;
-ms-animation: 0.4s zoomavatar ease-out;
animation: 0.4s zoomavatar ease-out;
}
.reverse {
-webkit-animation: 0.5s unzoomavatar ease-out;
-moz-animation: 0.6s unzoomavatar ease-out;
-o-animation: 0.4s unzoomavatar ease-out;
-ms-animation: 0.4s unzoomavatar ease-out;
animation: 0.5s unzoomavatar ease-out;
}
.avatar {
background: url("../images/userpic.jpg") center center no-repeat;
position: absolute;
box-shadow:0px 0px 0px 5px white inset;
width: 100%;
height: 100%;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
background-size: 100% 100%;
}
#lefttitle, #righttitle {
text-transform: uppercase;
font-family: "Museo-300", Arial;
font-size: 22px;
position: absolute;
text-align: center;
display: none;
width: 250px;
height: 20px;
margin: auto;
}
#lefttitle {
-webkit-animation: 0.6s goleft ease-out;
-moz-animation: 0.6s goleft ease-out;
-o-animation: 0.6s goleft ease-out;
-ms-animation: 0.6s goleft ease-out;
animation: 0.6s goleft ease-out;
top:0; left: -18%; right: 300px; bottom: 0;
}
#righttitle {
-webkit-animation: 0.6s goright ease-out;
-moz-animation: 0.6s goright ease-out;
-o-animation: 0.6s goright ease-out;
-ms-animation: 0.6s goright ease-out;
animation: 0.6s goright ease-out;
top:0; left: 18%; right: -300px; bottom: 0;
}
#bottombuttons {
font-family: "Museo-500";
-webkit-animation: 0.6s godown ease-out;
-moz-animation: 0.6s godown ease-out;
-o-animation: 0.6s godown ease-out;
-ms-animation: 0.6s godown ease-out;
animation: 0.6s godown ease-out;
position: absolute;
left: 0; right: 0; bottom: 8%;
margin: auto;
display: none;
width: 90px;
height: 25%;
}
#plus {
text-align: center;
text-transform: uppercase;
font-size: 11px;
color: #a6cbd4;
position: absolute;
cursor: pointer;
margin: auto;
width: 90px;
height: 90px;
}
#plus:hover {
color: #9cbac2;
}
#plusborder {
-webkit-animation: plus 2s infinite;
-moz-animation: plus 2s infinite;
-o-animation: plus 2s infinite;
-ms-animation: plus 2s infinite;
animation: plus 2s infinite;
position: absolute;
border: 2px solid #cfe6ec;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
top:0; left: 0; right: 0; bottom: 0;
margin: auto;
width: 80%;
height: 80%;
}
#plusone, #plustwo {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
background-color: #cfe6ec;
}
#plusone {
width: 2px;
height: 50%;
}
#plustwo {
width: 50%;
height: 2px;
}
#plustext {
font-family: Arial;
position: absolute;
left: 0; right: 0; bottom: -15px;
margin: auto;
}
#minus {
top: 70%; left: 0; right: 0;
margin: auto;
text-transform: uppercase;
font-size: 10px;
color: #c8c2c4;
position: absolute;
cursor: pointer;
width: 35px;
height: 35px;
}
#minus:hover {
color: #a39b9d;
}
#minusborder {
position: absolute;
border: 1px solid #c8c2c4;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
top:0; left: 0; right: 0; bottom: 0;
margin: auto;
width: 80%;
height: 80%;
}
#minusone {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
background-color: #c8c2c4;
width: 50%;
height: 1px;
}
#minustext {
width: 70px;
text-align: center;
font-family: Arial;
left: -18px; right: 0; bottom: -17px;
margin: auto;
position: absolute;
}
.bluetext {
color: #a6d1d6;
}
#settingspage {
display: none;
}
#swipefield {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
/* =============== S L I D E R S =============== */
.incomes-sprite-title, .expenses-sprite-title, .savings-sprite-title {
background-size: 538px 84px;
position: absolute;
cursor: pointer;
top:-4px;
}
.incomes-sprite-title {
background-position: 0 -60px;
width: 108px;
height: 24px;
left: 35%;
cursor: pointer;
}
.expenses-sprite-title {
background-position: -114px -60px;
width: 114px;
height: 24px;
left: 35%;
cursor: pointer;
}
.savings-sprite-title {
background-position: -233px -60px;
width: 164px;
height: 24px;
left: 30%;
}
.zoomplus:hover ~ .plusitem {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.zoomplus:active ~ .plusitem {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.blueline {
background-color: #b8d9e1;
position: absolute;
top:47px;
width: 100%;
height: 1px;
}
.brownline {
background-color: #a6989c;
position: absolute;
top:47px;
width: 12px;
height: 1px;
}
.columns {
text-transform: uppercase;
position: absolute;
display: block;
margin: auto;
height: 390px;
}
#savebutton {
position: absolute;
left: 0; right: 0;
display: block;
cursor: pointer;
width: 100%;
height: 60px;
bottom: 2%;
overflow: hidden;
}
#savebutton:hover > #leftborder, #savebutton:hover > #rightborder, #savebutton:hover > #centerborder {
background-color: #fafcfc;
}
#savebutton:active > #leftborder, #savebutton:active > #rightborder, #savebutton:active > #centerborder {
background-color: #f3f7f8;
}
#leftborder, #rightborder, #centerborder {
border-top: 1px solid #b8d9e1;
position: absolute;
margin:auto;
height: 100%;
display: block;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.saveaction {
background-color: #eff6f8;
}
#leftborder {
left: -21%; right: 490px;
width: 340px;
}
#rightborder {
left: 21%; right: -490px;
width: 340px;
}
#centerborder {
left: 0; right: 0;
width: 40%;
}
#save {
margin: auto;
position: absolute;
bottom:15px; left: 25px; right: 0;
width: 138px;
height: 24px;
background-position: -400px -60px;
}
/* =============== SAVINGS SLIDER =============== */
#piggyicon {
background-position: -100px 0;
background-size: 538px 84px;
position: absolute;
display: block;
width: 46px;
height: 38px;
left: 25px;
top: 70px;
}
#topsavingsline {
position: relative;
display: block;
width: 100%;
height: 190px;
border-bottom: 1px solid #e2e2e2;
}
#bottomsavingsline {
position: relative;
display: block;
width: 100%;
height: 92px;
border-bottom: 1px solid #e2e2e2;
}
#savingsvalue{
display: inline-block;
border: 0px solid;
background-color: transparent;
position: absolute;
top: 125px;
left: 30%;
font-family: "Museo-100";
font-size: 38px;
padding: 0;
}
#rublesign {
cursor: pointer;
background-size: 538px 84px;
display: inline-block;
width: 22px;
height: 31px;
position: relative;
z-index: 1000;
}
#rublebox {
top: 135px;
width: 30%;
height: 40px;
left: 0;
position: relative;
display: inline-block;
}
#percentvalue{
display: inline-block;
border: 0px solid;
position: relative;
top: 48px;
left: 125px;
font-family: "Museo-300";
font-size: 22px;
color: #9e9e9e;
background-color: white;
}
/* TOGGLES */
#deposit + label.button{
position: absolute;
top:16px;
}
#capitalization + label.button{
position: absolute;
bottom:-42px;
}
input#deposit, input#capitalization {
max-height: 0;
max-width: 0;
display: none;
}
input#deposit + label.button, input#capitalization + label.button{
display: block;
position: absolute;
right:32px;
box-shadow: inset 0 0 0px 1px #e3e3e3;
height: 21px;
width: 33px;
border-radius: 15px;
}
input#deposit + label.button:before, input#capitalization + label.button:before {
content: "";
position: absolute;
display: block;
height: 21px;
width: 21px;
top: 0;
left: 0;
border-radius: 15px;
-moz-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
input#deposit + label.button:after, input#capitalization + label.button:after {
content: "";
position: absolute;
display: block;
height: 21px;
width: 21px;
top: 0;
left: 0px;
border-radius: 15px;
background: white;
box-shadow: inset 0 0 0 1px #e0e0e0, 1px 1px 2px #ebebeb;
-moz-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
/* END OF TOGGLES */
input#deposit:checked + label.button:before, input#capitalization:checked + label.button:before {
width: 33px;
height: 21px;
background: #e7f6f8;
box-shadow: inset 0 0 0px 1px #b4d6da;
}
input#deposit:checked + label.button:after, input#capitalization:checked + label.button:after {
left: 13px;
box-shadow: inset 0 0 0 1px #b4d6da, 1px 1px 1px #ebebeb;
}
#deposit:checked ~ .savingscapital, #deposit:checked ~ .savingspercent, #deposit:checked ~ input#percentvalue {
color: #4b4b4b;
}
.savingstitle14 {
font-family: "Museo-300";
font-size: 14px;
color: #4b4b4b;
position: absolute;
left: 30%;
top: 70px;
}
.savingstitle12 {
font-family: "Museo-300";
font-size: 13px;
color: #a2c1c6;
font-style: italic;
position: absolute;
left: 30%;
top: 94px;
}
.savingsdeposit {
font-family: "Museo-300";
font-size: 12px;
color: #4b4b4b;
position: absolute;
left: 25px;
top:20px;
}
.savingscapital, .savingspercent {
font-family: "Museo-300";
font-size: 12px;
color: #b5b5b5;
position: absolute;
}
.savingscapital {
left: 25px;
bottom:-40px;
}
.savingspercent {
left: 25px;
bottom:20px;
}
/* =============== INCOMES SLIDER =============== */
#noincomes, #noexpenses {
width: 160px;
height: 160px;
position: absolute;
display: block;
top: 30%; left: 0; right: 0;
margin: auto;
cursor: pointer;
z-index: 10;
}
.hoverplace {
display: block;
width: 100%;
height: 100%;
}
.hoverplace:hover ~ .plusitemtitle, .majorplusitem:hover ~ .plusitemtitle, .plusitemtitle:hover {
color: #a2c1c6;
}
.majorplusitem {
top:0; bottom:0; left: 0; right: 0;
margin: auto;
position: absolute;
display: block;
width: 75px;
height: 75px;
-webkit-transition: 150ms;
-moz-transition: 150ms;
-o-transition: 150ms;
-ms-transition: 150ms;
transition: 150ms;
}
.majorplusitem:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.majorplusitem:active {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.plusitemtitle {
text-align: center;
width: 100%;
font-family: "Museo-300";
font-size: 14px;
color: #4b4b4b;
position: absolute;
bottom: 0;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
transition: 0.25s;
}
.plusitemitalic {
text-align: center;
width: 100%;
font-family: "Museo-300";
font-size: 13px;
color: #a2c1c6;
font-style: italic;
position: absolute;
top: 0;
}
.arrowup, .arrowdown {
position: absolute;
background-size: 538px 84px;
width: 21px;
height: 12px;
}
.arrowup {
background-position: -30px 0;
}
.arrowdown {
background-position: 0 0;
}
#incomeup, #incomedown {
font-family: "Museo-300";
font-size: 12px;
color: #a2c1c6;
font-style: italic;
position: absolute;
bottom: 0px;
margin: auto;
width: 90px;
height: 12px;
cursor: pointer;
text-align: center;
}
#incomeup {
left: 63%;
}
#incomedown {
left: 35%;
}
#incomeslider {
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
transition: 0.25s;
position: absolute; /*RELATIVE!*/
bottom: 0px;
margin: auto;
width: 100%;
}
/* =============== EXPENSE SLIDER =============== */
.plusitem {
top: -8px; left: 9%;
margin: auto;
position: absolute;
cursor: pointer;
width: 33px;
height: 33px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
-webkit-transition: 150ms;
-moz-transition: 150ms;
-o-transition: 150ms;
-ms-transition: 150ms;
transition: 150ms;
}
.plusitemborder {
position: absolute;
border: 1px solid #aad6df;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
top:0; left: 0; right: 0; bottom: 0;
margin: auto;
}
.plusitem:hover {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.plusitem:active {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.plusitemone, .plusitemtwo {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
background-color: #aad6df;
}
.plusitemone {
width: 50%;
height: 1px;
}
.plusitemtwo {
width: 1px;
height: 50%;
}
#expenseup, #expensedown {
font-family: "Museo-300";
font-size: 12px;
color: #a2c1c6;
font-style: italic;
position: absolute;
bottom:0px;
margin: auto;
width: 90px;
height: 12px;
cursor: pointer;
text-align: center;
}
#expenseup {
left: 63%;
}
#expensedown {
left: 35%;
}
.frame {
text-align: left;
overflow: hidden;
position: absolute;
top:50px; left: 0; right: 0; bottom: 0;
width: 100%;
height: 284px;
}
.wrapper {
position: absolute;
top:0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
}
#expenseslider {
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
transition: 0.25s;
display: none;
position: absolute; /*RELATIVE!*/
bottom: 0px;
margin: auto;
width: 100%;
}
.itembackground {
display: block;
position: relative;
top: -26px;
left: 25px;
}
.incomeitem, .expenseitem {
-webkit-transition: 350ms ease-out;
-moz-transition: 350ms ease-out;
-o-transition: 350ms ease-out;
-ms-transition: 350ms ease-out;
transition: 350ms ease-out;
background-position: 25px center;
background-repeat: no-repeat;
background-size: 42px 42px;
border-bottom: 1px solid #e2e2e2;
width: 100%;
height: 70px;
z-index: 500;
cursor: pointer;
overflow: hidden;
}
.incomeitem:hover, .expenseitem:hover {
background-color: #fbfbfb;
}
.incomeitem:active, .expenseitem:active {
background-color: #f7f7f7;
}
.newitemadded {
-webkit-animation: 4s newitemadded ease-out;
-moz-animation: 4s newitemadded ease-out;
-o-animation: 4s newitemadded ease-out;
-ms-animation: 4s newitemadded ease-out;
animation: 4s newitemadded ease-out;
}
.title11museo300 {
font-family: "Museo-100";
font-size: 14px;
color: #676767;
position: relative;
left: 35%;
top:12px;
}
.title9museo300 {
font-family: "Museo-300";
font-size: 9px;
color: #676767;
position: relative;
left: 35%;
top:20px;
}
.bolddigit20 {
font-family: "Museo-500";
font-size: 20px;
color: #111;
}
.lightdigit20 {
font-family: "Museo-100";
font-size: 20px;
color: #111;
}
.lighttitle20 {
height: 40px;
font-family: "Museo-100";
font-size: 20px;
color: #4b4b4b;
position: absolute;
left: 35%;
cursor: pointer;
}
/* ITEMS AND FRAMES ANIMATION */
.sliderup {
-webkit-transform: translateY(71px);
-moz-transform: translateY(71px);
-o-transform: translateY(71px);
-ms-transform: translateY(71px);
transform: translateY(71px);
}
.sliderdown {
-webkit-transform: translateY(-71px);
-moz-transform: translateY(-71px);
-o-transform: translateY(-71px);
-ms-transform: translateY(-71px);
transform: translateY(-71px);
}
.endoflist {
-webkit-animation: 0.5s endoflist ease-out;
-moz-animation: 0.5s endoflist ease-out;
-o-animation: 0.5s endoflist ease-out;
-ms-animation: 0.5s endoflist ease-out;
animation: 0.5s endoflist ease-out;
}
.startoflist {
-webkit-animation: 0.5s startoflist ease-out;
-moz-animation: 0.5s startoflist ease-out;
-o-animation: 0.5s startoflist ease-out;
-ms-animation: 0.5s startoflist ease-out;
animation: 0.5s startoflist ease-out;
}
#expenseslider, #incomeslider {
-webkit-animation: 1s frameanimate ease-out;
-moz-animation: 0.8s frameanimate ease-out;
-o-animation: 0.8s frameanimate ease-out;
-ms-animation: 0.8s frameanimate ease-out;
animation: 0.8s frameanimate ease-out;
}
/* NOTES WINDOW */
#add-notes {
visibility: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
width: 465px;
height: 530px;
z-index: 2000;
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1300;
-o-perspective: 1300px;
-ms-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300;
}
#add-notes >.modal-content {
height: 610px;
}
.notes-title {
font-weight: 900;
font-family: "Museo-500";
font-size: 18px;
color: #242424;
position: absolute;
width: 240px;
height: 20px;
margin: auto;
right: 0; left: 0; top: 20px;
}
.notes-save {
display: block;
position: absolute;
width: 100%;
height: 42px;
bottom: 20px;
background-color: #cce5ec;
cursor: pointer;
line-height: 30px;
}
.notes-save:hover, .modal-save:hover {
background-color: #d6ebf1;
}
.notes-save:active, .modal-save:active {
background-color: #e0edf0;
}
.notes-input {
line-height: 20px;
display: none;
resize: none;
vertical-align: top;
border: 1px solid #ccc;
background-color: white;
position: absolute;
top: 78px; left: 0; right: 0;
margin: auto;
font-family: "Museo-300";
font-size: 13px;
padding: 20px;
padding-top: 30px;
width: 360px;
height: 60%
}
/* MODAL WINDOWS */
#overlay {
display: none;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
top: 0; left: 0;
z-index: 1000;
opacity: 0;
background: rgba(0,0,0,0.65);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#add-modal {
visibility: hidden;
position: absolute;
top:50px; left: 0; right: 0; bottom: 0;
margin: auto;
width: 465px;
height: 530px;
z-index: 2000;
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1300px;
-o-perspective: 1300px;
-ms-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.modal-content {
display: none;
visibility: hidden;
text-align: center;
text-transform: uppercase;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
position: relative;
height: 480px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-60deg);
-moz-transform: rotateY(-60deg);
-ms-transform: rotateY(-60deg);
transform: rotateY(-60deg);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.modal-show {
opacity: 1;
visibility: visible;
}
.modal-show .modal-content {
visibility: visible;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
#overlay.modal-show {
opacity: 1;
visibility: visible;
}
.close-sign {
background-position: 0 -22px;
background-size: 538px 84px;
position: absolute;
width: 16px;
height: 16px;
top: 20px; right: 26px;
}
.modal-close {
position: absolute;
width: 86px;
height: 62px;
top: 0; right: 0;
cursor: pointer;
z-index: 3500;
}
.modal-title {
font-weight: 900;
font-family: "Museo-500";
font-size: 18px;
color: #242424;
position: absolute;
width: 240px;
height: 20px;
margin: auto;
right: 0; left: 0; top: 20px;
}
.modal-save {
display: block;
position: absolute;
width: 100%;
height: 42px;
top: 415px;
background-color: #cce5ec;
cursor: pointer;
line-height: 30px;
}
.modal-save-icon {
background-position: -60px 0;
background-size: 538px 84px;
position: absolute;
width: 30px;
height: 30px;
left: 32%; top: 6px;
}
.modal-save-text {
position: absolute;
display: inline-block;
margin: auto;
top:0; bottom:0; left: 32%;
width: 210px;
height: 30px;
font-family: "Museo-500";
vertical-align: middle;
font-size: 18px;
color: white;
}
.modal-delete {
-webkit-transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
display: none;
position: absolute;
width: 56px;
height: 42px;
top: 415px; right: 0;
background-color: #d9ebf0;
border-left: 2px solid white;
cursor: pointer;
line-height: 30px;
overflow: hidden;
}
.modal-delete:hover {
width: 380px;
background-color: #facece;
}
.modal-delete:active {
background-color: #ffe3e3;
}
#modaldeletecross {
position: absolute;
width: 30px;
height: 30px;
background-position: -320px 0;
margin-top: 6px;
margin-left: 13px;
}
.modal-delete-text {
background-position: -320px 0;
position: absolute;
display: inline-block;
margin: auto;
top:0; bottom:0; left: 13px;
width: 190px;
height: 30px;
font-family: "Museo-500";
vertical-align: middle;
font-size: 18px;
color: white;
}
.modalvalue {
text-align: center;
display: none;
border: 0px solid;
background-color: transparent;
position: absolute;
top: 78px; left: 0; right: 0;
margin: auto;
font-family: "Museo-500";
font-size: 86px;
padding: 0;
width: 370px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.modalvalueerror {
color: #ffdd33;
-webkit-animation: 0.5s modalvalueerror ease-out;
-moz-animation: 0.5s modalvalueerror ease-out;
-o-animation: 0.5s modalvalueerror ease-out;
-ms-animation: 0.5s modalvalueerror ease-out;
animation: 0.5s modalvalueerror ease-out;
}
.modaltitle {
display: none;
text-transform: uppercase;
position: absolute;
top: 345px; left: 0; right: 0;
margin: auto;
text-align: center;
border: 1px solid #ccc;
color: #4c4c4c;
font-family: "Museo-300", Arial;
font-size: 14px;
height: 30px;
width: 296px;
letter-spacing: 1px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.modaltitleerror {
background-color: #ffdd33;
}
.modalselects {
z-index: 2000;
text-transform: lowercase;
text-align: left;
display: block;
position: absolute;
top: 200px; left: 0; right: 0;
margin: auto;
width: 260px;
height: 30px;
}
* {
margin: 0;
padding: 0;
}
.modalselects .selectbox {
color: #333;
vertical-align: middle;
cursor: pointer;
margin: 5px;
}
.modalselects .selectbox .select {
width: 60px;
height: 24px;
padding: 0 45px 0 10px;
font: 12px/24px Arial;
border: 1px solid #ccc;
}
.modalselects .selectbox .select .text {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.modalselects .selectbox .trigger .arrow {
position: absolute;
top: 11px;
right: 10px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #a1a1a1;
width: 0;
height: 0;
overflow: hidden;
}
.modalselects .selectbox .dropdown {
top: 25px;
width: 115px;
margin: 0;
padding: 0 0;
background: #FFF;
border: 1px solid #ccc;
font: 12px Arial;
}
.initicons-arrow {
background-position: -32px -24px;
background-size: 538px 84px;
position: absolute;
width: 15px;
height: 9px;
right: 0; top: 18px;
}
.initicons {
cursor: pointer;
width: 75px;
height: 42px;
position: absolute;
text-align: left;
top: 270px; left: 0; right: 0;
margin: auto;
}
.initicons img {
width: 42px;
height: 42px;
}
.initicons:hover {
opacity: 0.8;
}
.initicons:active {
-webkit-transform: scale(0.92);
-moz-transform: scale(0.92);
-o-transform: scale(0.92);
-ms-transform: scale(0.92);
transform: scale(0.92);
}
.modalincomessurface {
position: absolute;
z-index: 3000;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
display: none;
}
.modalexpensessurface {
z-index: 3000;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
display: none;
}
#modalexpensetable {
text-align: center;
background-color: white;
position: absolute;
top: 14%; left: 42px;
}
#modalincomestable {
text-align: center;
background-color: white;
position: absolute;
top: 30%; left: 42px;
}
.modaltable tr, .modaltable-low tr {
background-color: #ddeef1;
}
.modaltable td, .modaltable-low td {
cursor: pointer;
width: 86px;
height: 86px;
}
.imgbox {
background-color: white;
border: 2px solid white;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
-ms-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
width: 86px;
height: 86px;
}
.imgbox:hover {
border: 2px solid #ddeef1;
}
.modalborderwhite {
border: 2px solid white;
}
.iconbox {
background-color: white;
position: absolute;
margin:22px;
}
.auto {background-position: -989px 0;}
.gas {background-position: -602px 0;}
.home {background-position: -473px 0;}
.baby {background-position: -946px 0;}
.cart {background-position: -903px 0;}
.clothes {background-position: -817px 0;}
.phone {background-position: -258px 0;}
.utilities {background-position: -43px 0;}
.island {background-position: -430px 0;}
.earth {background-position: -731px 0;}
.meal {background-position: -387px 0;}
.sport {background-position: -129px 0;}
.medical {background-position: -344px 0;}
.tv {background-position: -86px 0;}
.smoking {background-position: -172px 0;}
.other {background-position: -301px 0;}
.edu {background-position: -688px 0;}
.graphs {background-position: -516px 0;}
.wallet {background-position: 0 0;}
.case {background-position: -860px 0;}
.rub {background-position: -215px 0;}
.euro {background-position: -645px 0;}
.doll {background-position: -774px 0;}
.gbp {background-position: -559px 0;}
#chooseicon {
position: absolute;
left: 0; top: 0;
}
.imgbox:active {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.modalforward {
-webkit-animation: 0.4s modalforward ease-out;
-moz-animation: 0.4s modalforward ease-out;
-o-animation: 0.4s modalforward ease-out;
-ms-animation: 0.4s modalforward ease-out;
animation: 0.4s modalforward ease-out;
}
.modalreverse {
-webkit-animation: 0.3s modalreverse ease-out;
-moz-animation: 0.5s modalreverse ease-out;
-o-animation: 0.5s modalreverse ease-out;
-ms-animation: 0.5s modalreverse ease-out;
animation: 0.3s modalreverse ease-out;
}
/* ============= STATISTIC PAGE STYLES =============*/
/* MAIN BLOCK */
#mainblock {
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
width: 1370px;
height: 680px;
position: absolute;
margin: auto;
left:0; right:0; top:22%;
}
.flag {
height: 19px;
border: 1px solid #c7dade;
font-family: "Museo-100";
font-size: 11px;
color: #242424;
text-transform: uppercase;
font-style: italic;
line-height: 20px;
padding-left: 20px;
left: 0;
}
#deltatitle {
position: absolute;
top: -10px;
width: 130px;
}
#savingstitle {
position: absolute;
bottom: 240px;
width: 90px;
}
.triangle {
position: absolute;
bottom: -14px;
left: -1px;
width: 15px;
height: 13px;
background-position: -523px 0;
}
/* SAVINGS CHART */
#savingschart {
position: absolute;
width: 504px;
height: 222px;
bottom: 50px;
right: 0;
}
#horizontal, #chartline {
position: absolute;
}
#month0 {
position: absolute;
left:0;
bottom: 0;
display: block;
margin-right: -4px;
width: 0;
height: 68px;
border-left: 1px solid #cdc6c6;
}
#month0 .small-month-circle, #month0 .month-name {
display: block;
}
#month0 .month-name {
bottom: 32%;
}
#month12 .month-name {
width: 20px;
height: 16px;
}
.months {
position: relative;
display: inline-block;
margin-right: -4px;
width: 42px;
height: 100%;
}
.in-month {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
}
.small-month-circle {
position: absolute;
right: -5px;
top: -4px;
width: 7px;
height: 7px;
border: 1px solid #b9b2b4;
border-radius: 20px;
background-color: white;
}
.large-month-circle {
position: absolute;
right: -10px;
top: -10px;
width: 17px;
height: 17px;
border: 1px solid #b9b2b4;
border-radius: 20px;
background-color: white;
display: block;
}
.bluedot {
position: absolute;
right: 3px;
top: 3px;
width: 11px;
height: 11px;
border-radius: 20px;
background-color: #d5e4e7;
}
.large-month-val {
text-transform: uppercase;
text-align: right;
position: absolute;
top: -34px; right: 5px;
width: 160px;
height: 20px;
font-family: "Museo-500";
font-size: 22px;
color: #333;
}
.large-month-val .curr {
font-family: "Museo-100";
font-size: 12px;
}
.month-val {
text-transform: uppercase;
text-align: center;
position: absolute;
bottom: -32px; left: -18px;
width: 120px;
height: 14px;
font-family: "Museo-300";
font-size: 15px;
color: #333;
display: none;
background-color: white;
}
.month-val .curr {
font-family: "Museo-100";
font-size: 10px;
}
.month-name {
position: absolute;
bottom: 40%; right: -11px;
font-family: "Museo-300";
text-transform: uppercase;
text-align: center;
font-size: 10px;
color: #948b8e;
background-color: white;
height: 21px;
width: 25px;
line-height: 21px;
display: none;
}
#month6, #month12{
border-right: 1px solid #cdc6c6;
}
#month6 .small-month-circle, #month6 .month-name, #month12 .month-name {
display: block;
}
.months:hover .in-month {
border-right: 1px solid #cdc6c6;
}
.months:hover .small-month-circle, .months:hover .month-name, .months:hover .month-val {
display: block;
}
/* SAVINGS SLIDER */
#savings-slider-container {
width: 260px;
height: 50px;
position: absolute;
bottom: 70px; left: 40px;
}
.savings-slider {
text-transform: uppercase;
position: absolute;
top: -90px;
font-family: "Museo-300";
font-size: 11px;
color: #5e5e5e;
}
#savingsTip0, #savingsTip100 {
position: absolute;
width: 100%;
height: 35px;
font-family: "Museo-300";
font-style: italic;
font-size: 11px;
color: #a59b9e;
display: none;
}
#savingsTip0 {
bottom: -5px; left: 38px;
}
#savingsTip100 {
bottom: -5px;
}
.noUi-target,.noUi-target *
{
-webkit-touch-callout:none;
-webkit-user-select:none;
-ms-touch-action:none;
-ms-user-select:none;
-moz-user-select:none;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.noUi-base {
width:100%;
height:100%;
position:absolute;
}
.noUi-origin {
position:absolute;
right:0;
top:0;
}
.noUi-handle {
content: "";
position:relative;
z-index:1;
border: 1px solid #c4d5d9;
cursor:default;
-webkit-border-radius: 23px;
-ms-border-radius: 23px;
-o-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
background-position: -516px -17px;
}
.noUi-handle-upper {
width: 3px;
}
.noUi-stacking .noUi-handle {
z-index:10
}
.noUi-stacking+.noUi-origin {
z-index:-1
}
.noUi-state-tap .noUi-origin {
-webkit-transition:left .3s,top .3s;
transition:left .3s,top .3s
}
.noUi-state-drag * {
cursor:inherit!important
}
.noUi-horizontal {
height: 4px
}
.noUi-horizontal .noUi-handle {
width:23px;
height:23px;
left:-12px;
top:-9px
}
.noUi-background {
background:#d9e7ea;
border-left: 2px solid #a39a9d;
border-right: 2px solid #a39a9d;
}
.noUi-dragable
{
cursor: w-resize
}
.noUi-vertical .noUi-dragable {
cursor:n-resize;
}
.noUi-active {
border: 1px solid #95b4b8;
}
.noUi-handle:after {
content: attr(percent);
text-align: center;
display:block;
position:absolute;
width: 30px; height: 30px;
left: 4px; top: -38px;
font-family: "Museo-300";
font-size: 11px;
color: #2f2f2f;
background-position: -414px 0;
line-height: 18px;
}
.noUi-handle:before {
content: attr(value);
text-align: center;
display:block;
position:absolute;
height:1px;
width:180px;
height: 15px;
left: -80px; top: 35px;
font-family: "Museo-100";
font-size: 16px;
color: #2f2f2f;
}
[disabled] .noUi-connect,[disabled].noUi-connect {
background:#B8B8B8
}
[disabled] .noUi-handle {
cursor:not-allowed
}
/* SAVINGS CIRCLE */
#savingscircles {
text-align: center;
width: 385px;
height: 385px;
position: absolute;
left: 390px; bottom: 30px;
z-index: 800;
}
#after-savings, #before-savings {
border: 1px solid #c9dadd;
-webkit-border-radius: 350px;
-ms-border-radius: 350px;
-o-border-radius: 350px;
-moz-border-radius: 350px;
border-radius: 350px;
}
#after-savings {
width: 82%;
height: 82%;
position: absolute;
right:0; top:0;
}
#before-savings {
width: 46%;
height: 46%;
position: absolute;
left:0; bottom:0;
}
.savings-circle-title {
font-size: 12px;
position: absolute;
margin: auto;
top: 30%; left:0; right:0;
}
.savings-circle-currency {
font-size: 11px;
position: absolute;
margin: auto;
bottom: 22%; left:0; right:0;
}
#before-savings-value {
position: absolute;
width: 130%;
height: 100%;
margin: auto;
left:-15%; right: 0;
text-align: center;
line-height: 165px;
font-size: 30px;
top: 8%;
}
#after-savings-value {
width: 130%;
height: 100%;
position: absolute;
margin: auto;
left:-15%; right: 0;
top:7%;
text-align: center;
line-height: 290px;
}
/* LINES CONTAINER */
#incomes-lines-container, #expenses-lines-container {
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
background-color: white;
width: 270px;
height: 300px;
position: absolute;
left: 375px; top: 0;
z-index: 200;
padding-top: 65px;
padding-left: 30px;
}
#incomes-lines-container {
display: none;
}
.lines-title {
cursor: pointer;
position: absolute;
width: 400px;
top: 35px;
text-transform: uppercase;
font-family: "Museo-300";
font-size: 13px;
color: black;
}
.lineitemtitle {
position: absolute;
top: 15px;
width: 280px;
height: 70px;
}
.lineitemvalue {
font-family: "Museo-300";
font-size: 25px;
position: absolute;
top: 15px;
left: 64px; top:50px;
width: 180px;
}
.lineitemcurr {
font-size: 11px;
}
.lineitempercent {
font-family: "Museo-500";
font-size: 10px;
color: #928588;
position: absolute;
top: -8px;
left: -27px;
}
.grey {
color: #adadad;
}
.greysmall {
font-size: 9px;
}
.itemline {
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
font-size: 13px;
cursor: pointer;
position: relative;
height: 9px;
border-top: 2px solid #d5e4e7;
overflow: hidden;
background-color: white;
width: 1%;
}
.itemlinebackground {
position: absolute;
top: 36px; left:0;
width: 42px;
height: 42px;
}
.leftpoint {
width: 2px;
height: 2px;
background-color: #a39a9d;
position: absolute;
top:-2px; left:0;
}
.activeline {
border-top: 4px solid #a39a9d;
height: 88px;
overflow: visible;
}
/* LINES CURSOR */
#expense-cursor {
-webkit-transform: rotate(68deg);
-moz-transform: rotate(68deg);
-ms-transform: rotate(68deg);
-o-transform: rotate(68deg);
transform: rotate(68deg);
width: 310px;
height: 310px;
position: absolute;
left: 225px; top: -106px;
z-index: 100;
display: none;
cursor: pointer;
}
#incomes-cursor {
-webkit-transform: rotate(52deg);
-moz-transform: rotate(52deg);
-ms-transform: rotate(52deg);
-o-transform: rotate(52deg);
transform: rotate(52deg);
width: 370px;
height: 370px;
position: absolute;
left: 227px; top: -120px;
z-index: 100;
display: none;
cursor: pointer;
}
.cursorline {
width: 1px;
height: 50%;
position: absolute;
bottom: 0; left: 149px;
background-color: #727272;
}
.cursorpoint {
position: absolute;
bottom: -3px; left: 147px;
width: 6px;
height: 6px;
border-radius: 10px;
background-color: #727272;
}
/* LARGE CIRCLE */
#outermaindiv {
color: black;
position: absolute;
width: 265px;
height: 265px;
position: absolute;
top: 50px; left:10px;
z-index: 0;
cursor: pointer;
}
#innermaindiv {
position: absolute;
width: 100%;
height: 100%;
top:0; left:0;
margin: 21px;
}
#outermaincursordiv {
position: absolute;
width: 100%;
height: 100%;
top:0;
z-index: 500;
margin: -19px;
}
.linesbackground {
position: absolute;
width: 100%;
height: 100%;
background-image: url("../images/linesbackground.png");
background-repeat: repeat;
}
.topmaincircletitle {
width: 100px;
height: 30px;
text-align: center;
position: absolute;
margin: auto;
left: 0; right: 0; top:84px;
font-size: 15px;
font-style: italic;
}
.bottommaincircletitle {
width: 100px;
height: 30px;
text-align: center;
position: absolute;
margin: auto;
left: 0; right: 0; bottom:60px;
font-size: 13px;
}
#outer-circle-value {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
margin: auto;
line-height: 265px;
top: 5px;
font-size: 48px;
}
.lightcircletitle {
font-family: "Museo-100";
text-transform: uppercase;
}
.boldcircletitle {
font-family: "Museo-500";
text-transform: uppercase;
}
#maincircle100percent {
width: 30px;
height: 15px;
position: absolute;
top: 50px; right: 100px;
font-size: 12px;
}
#maincircleline {
width: 1px;
height: 27px;
position: absolute;
top: 17px; right: 131px;
background-color: #898989;
box-shadow: -1px 0 1px #acacac;
}
#outer-circle-percent {
display: none;
width: 30px;
height: 30px;
position: absolute;
left: 0; right: 0; top: 0;
font-size: 11px;
z-index: 1000;
}
/* PENDANTS */
#firstpendant {
overflow: visible;
z-index: -100;
position: absolute;
bottom: 0; left:60px;
width: 60px;
height: 100px;
}
#firstpendant > .pendant-circle {
bottom: 77px;
border: 2px solid #d3d8ce;
}
#firstpendant > .pendantline {
bottom: 90px;
background-color: #d3d8ce;
}
#firstpendant > .pendantfont {
bottom: 50px;
}
#secondpendant {
overflow: visible;
z-index: -100;
position: absolute;
bottom: 0; left:282px;
width: 45px;
height: 100px;
}
#secondpendant > .pendant-circle {
bottom: 57px;
border: 2px solid #b9b2b4;
}
#secondpendant > .pendantline {
bottom: 70px;
background-color: #b9b2b4;
}
#secondpendant > .pendantfont {
bottom: 30px;
}
#thirdpendant {
overflow: visible;
z-index: -100;
position: absolute;
bottom: 0; right:60px;
width: 45px;
height: 100px;
}
#thirdpendant > .pendant-circle {
bottom: 37px;
border: 2px solid #abb1bf;
}
#thirdpendant > .pendantline {
bottom: 50px;
background-color: #abb1bf;
}
#thirdpendant > .pendantfont {
bottom: 10px;
}
.pendant-circle {
position: absolute;
left: 17px;
width: 8px;
height: 8px;
border-radius: 20px;
}
.pendantfont {
position: absolute;
text-align: center;
width: 70px;
font-size: 11px;
font-style: italic;
left: -12px;
}
.pendantline {
position: absolute;
left: 22px;
width: 1px;
height: 120%;
}
/* SMALL CIRCLES */
#movingcircle-1, #movingcircle-2, #movingcircle-3 {
-webkit-animation: 1s spincircle ease-out infinite;
-moz-animation: 1s spincircle ease-out infinite;
-o-animation: 1s spincircle ease-out infinite;
-ms-animation: 1s spincircle ease-out infinite;
animation: 1s spincircle ease-out infinite;
}
.flippedcard {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flippedcardinfo {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#small-circles-container {
position: absolute;
right: 0; top: 40px;
width: 608px;
height: 290px;
overflow: visible;
}
#firstcirclediv, #secondcirclediv, #thirdcirclediv {
-webkit-perspective: 1000;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
cursor: pointer;
position: relative;
top: 0;
width: 200px;
height: 180px;
display: inline-block;
background-color: white;
}
/* Backfaces */
.circlesselect {
z-index: 2000;
text-transform: uppercase;
text-align: center;
display: block;
position: absolute;
top: 94px; left: 0; right: 20px;
margin: auto;
width: 136px;
height: 80px;
}
.circlesselect > .selectbox .select {
position: absolute;
margin: auto;
width: 136px;
height: 22px;
padding: 0 10px 0 10px;
font: 10px/23px "Museo-500";
border: 1px solid #ccc;
}
.circlesselect > .selectbox .dropdown {
top: 23px;
width: 156px;
max-height: 220px;
margin: 0;
padding: 0 0;
background: #FFF;
border: 1px solid #ccc;
font-family: "Museo-300";
font-size: 10px;
}
#circle-select-1-back, #circle-select-2-back, #circle-select-3-back {
position: absolute;
margin: auto;
left: 0; right: 0; top: 30px;
width: 42px;
height: 42px;
}
.flippedcircle {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.frontcircle, .backcircle {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
overflow: visible;
position: absolute;
}
.frontcircle {
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
position: absolute;
margin: auto;
right: 0; left: 0;
z-index: 2;
width: 165px;
height: 165px;
}
.backcircle {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 1;
position: absolute;
top: -30px;
left: 0; right: 0;
width: 200px;
height: 200px;
}
.backcircle .circletoptitle {
width: 170px;
height: 50px;
line-height: 14px;
bottom: -85px;
}
#firstcirclediv {
left: -16px;
}
#secondcirclediv {
left: 0;
}
#thirdcirclediv {
left: 16px;
}
#firstcircledivflipper, #secondcircledivflipper, #thirdcircledivflipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 1000ms;
-moz-transition: 1000ms;
-ms-transition: 1000ms;
-o-transition: 1000ms;
transition: 1000ms;
position: relative;
overflow: visible;
}
.frontcircle:active {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.cursordiv {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 600;
margin: -12px;
}
.circletoptitle {
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
text-align: center;
overflow: hidden;
font-style: italic;
font-size: 10px;
position: absolute;
width: 120px;
height: 12px;
margin: auto;
left: 0; right: 0; top: 52px;
}
.circlevalue {
position: absolute;
width: 100%;
height: 100%;
top: 4px;
text-align: center;
line-height: 165px;
font-size: 31px;
}
.bottomcircletitle {
width: 100px;
height: 30px;
text-align: center;
position: absolute;
margin: auto;
left: 0; right: 0; top: 110px;
font-size: 10px;
}
#first-circle-percent, #second-circle-percent, #third-circle-percent {
display: none;
width: 30px;
height: 30px;
position: absolute;
left: 0; right: 0; top: 0;
font-size: 11px;
}
.circle100percent {
width: 30px;
height: 15px;
position: absolute;
top: 30px; right: 52px;
font-size: 9px;
}
.circleline {
width: 1px;
height: 17px;
position: absolute;
top: 11px;
right: 82px;
background-color: #898989;
}
#setcurrency {
right: -18px;
top: -15%;
position: absolute;
width: 170px;
height: 42px;
}
#rubcurr, #eurcurr, #usdcurr {
vertical-align: top;
text-align: center;
position: relative;
font-size: 11px;
text-transform: uppercase;
color: #444;
display: inline-block;
width: 42px;
height: 42px;
border-radius: 42px;
margin-right: 7px;
line-height: 43px;
}
#rubcurr:hover, #eurcurr:hover, #usdcurr:hover {
border: 2px solid #f6f6f6;
}
.currunchecked {
cursor: pointer;
font-family: "Museo-100";
border: 2px solid white;
}
.currchecked {
cursor: default;
font-family: "Museo-500";
border: 2px solid #e8e8e8;
}
/* ============== CONDITIONS FOR DIFFERENT SCREEN SIZES ============== */
@media screen and (max-height: 870px) {
#mainblock {
height: 620px; top:19%;
}
#savingschart {
bottom: 10px;
}
#savingscircles {
bottom: 0px;
}
#savings-slider-container {
bottom: 20px;
}
#savingstitle {
bottom: 190px;
}
#small-circles-container {
height: 274px;
}
}
@media screen and (max-height: 780px) {
#mainblock {
height: 590px; top:17%;
}
#savingschart {
bottom: 20px;
}
#savingscircles {
bottom: 25px;
}
#savings-slider-container {
bottom: 30px;
}
#savingstitle {
bottom: 200px;
}
#logo_statistic {
top: -25px;
-webkit-transform: rotateY(180deg) scale(0.8);
-moz-transform: rotateY(180deg) scale(0.8);
-ms-transform: rotateY(180deg) scale(0.8);
-o-transform: rotateY(180deg) scale(0.8);
transform: rotateY(180deg) scale(0.8);
}
#small-circles-container {
height: 274px;
}
#setcurrency {
top: -12%;
}
#infopage {
height: 610px;
margin-top: -70px;
}
#infosubtitle {
top: 40px;
}
#infotitle {
top: 75px;
}
}
@media screen and (max-height: 700px) {
.month-val {
bottom: 5px;
}
#mainblock {
height: 582px; top:14%;
}
#savingschart {
bottom: 20px;
}
#savingscircles {
bottom: 10px;
}
#savings-slider-container {
bottom: 30px;
}
#savingstitle {
bottom: 200px;
}
#logo_statistic {
top: -35px;
-webkit-transform: rotateY(180deg) scale(0.7);
-moz-transform: rotateY(180deg) scale(0.7);
-ms-transform: rotateY(180deg) scale(0.7);
-o-transform: rotateY(180deg) scale(0.7);
transform: rotateY(180deg) scale(0.7);
}
#small-circles-container {
height: 270px;
}
#setcurrency {
top: -10%;
}
}
@media screen and (max-width: 1100px) {
.columns {
width: 300px; top:24%;
}
#savings {
left: 20%; right: -450px; bottom: 0;
}
#incomes {
left: -20%; right: 450px; bottom: 0;
}
#expenses {
left: 0; right: 0; bottom: 0;
}
}
@media screen and (min-width: 1100px) {
.columns {
width: 340px; top:24%;
}
#savings {
left: 21%; right: -490px; bottom: 0;
}
#incomes {
left: -21%; right: 490px; bottom: 0;
}
#expenses {
left: 0; right: 0; bottom: 0;
}
}
@media screen and (max-height: 850px) {
#logo_greeting, #logo_settings {
background: url("../images/logo_large.gif") no-repeat;
background-position: top center;
background-size: 137px 204px;
z-index: 1000;
width: 172px;
height: 204px;
top: 5%;
}
#settings_hat {
height: 28%;
}
.columns {
top:16%;
}
#logo_settings {
height: 130px;
top: 8%;
}
#savebutton {
bottom: 3%;
}
#incomeup, #incomedown, #expenseup, #expensedown {
bottom: 20px;
}
}
@media screen and (max-height: 700px) {
#settings_hat {
height: 22%;
}
#add-notes >.modal-content {
height: 530px;
}
.notes-input {
height: 56%
}
#logo_greeting, #logo_settings {
background: url("../images/logo.gif") no-repeat;
background-size: 114px 145px;
width: 114px;
height: 145px;
top: 8%;
}
.columns {
top:16%;
}
#logo_settings {
height: 100px;
}
#bubble {
right: -70px;
}
#savebutton {
bottom: 1%;
}
#incomeup, #incomedown, #expenseup, #expensedown {
bottom: 20px;
}
#piggy {
background: url("../images/piggy.gif") no-repeat;
background-size: 149px 149px;
width: 149px;
height: 149px;
}
#logotext {
background: url("../images/logotext.gif") no-repeat;
size: 163px 67px;
width: 163px;
height: 67px;
margin-top: 24px;
}
#wrapper {
top: 305px;
}
#secondenter{
bottom: 115px;
}
#preloader{
bottom: 99px;
}
}
/* STATISTIC PAGE CONDITIONS */
@media screen and (max-width: 1500px) {
#mainblock {
width: 1250px;
}
#incomes-lines-container, #expenses-lines-container {
left: 315px; width: 210px;
}
#savingscircles {
left: 330px;
}
#savingscircles {
left: 355px;
width: 345px;
height: 345px;
}
#after-savings-value {
top: 2%;
}
#before-savings-value {
top: 0;
}
}
@media screen and (max-width: 1200px) {
#mainblock {
width: 1060px;
}
#incomes-lines-container, #expenses-lines-container {
left: 350px; width: 260px;
padding-top: 72px;
}
#savingschart {
width: 396px;
height: 222px;
}
.months {
width: 33px;
}
#savingscircles {
left: 345px;
width: 300px;
height: 300px;
}
#after-savings-value {
top:-5%;
}
#before-savings-value {
top:-7%;
}
#firstcirclediv, #firstpendant {
opacity: 0;
}
#small-circles-container {
height: 260px;
}
#before-savings-value {
font-size: 24px;
}
}
/*================ @2x IMAGES FOR RETINA DISPLAYS ================ */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
#logo_greeting, #logo_settings {
background-image: url("../images/logo_large@2x.gif");
}
#logo_statistic {
background: url("../images/logotext_large@2x.gif");
background-size: 172px 65px;
}
.imgbox:hover {
border: 2px solid white;
}
}
================================================
FILE: gateway/src/main/resources/static/index.html
================================================