/* ---------------------------------------------------------------------- h -->none prognosi (c) john paizis 1.2 08/10/13 ---------------------------------------------------------------------- */ /* framework ---------------------------------------------------------------------- */ div[visible="false"] { display: none; } .clear { clear: both; width: 100%; height: 0px; } html { font-smoothing: antialiased; overflow: hidden; } @media screen and (min-width: 1000px) { html { overflow-y: scroll; } html[type="pub"] { background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB) fixed; background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } html[type="web"] { background:#ccc; } } @media not screen and (min-width: 1000px) { html { } } /* body ---------------------------------------------------------------------- */ body { margin:0; padding:0; left:0px; top:0px; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); font-family:Helvetica,Arial,sans-serif; font-size:13px; overflow: hidden; } @media screen and (min-width: 1000px) { body { -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; } body[type="web"] { background: url(res/back.jpg) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body[type="pub"] { } } @media not screen and (min-width: 1000px) { body { position:absolute; top:0; bottom:0; left:0; right:0; } } @keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } /* exc ---------------------------------------------------------------------- */ .exc { padding: 12px 12px 12px 12px; background: #FFD2D2; background: linear-gradient(to right, #fff, #FFD2D2 , #fff); margin: 6px 24px 6px 24px; color: #D8000C; font-size: 20px; } /* msg ---------------------------------------------------------------------- */ .msg { padding: 12px 12px 12px 12px; background: #DFF2BF; background: linear-gradient(to right, #fff, #DFF2BF , #fff); margin: 6px 24px 6px 24px; color: #4F8A10; font-size: 20px; } /* inf ---------------------------------------------------------------------- */ .inf { padding: 12px 12px 12px 12px; margin: 6px 24px 6px 24px; color: #444; font-size: 20px; } /* txt ---------------------------------------------------------------------- */ .txt { padding: 12px 12px 12px 12px; background: #BDE5F8; background: linear-gradient(to right, #fff, #BDE5F8 , #fff); margin: 6px 24px 6px 24px; color: #00529B; font-size: 20px; } /* wrn ---------------------------------------------------------------------- */ .wrn { padding: 12px 12px 12px 12px; background: #FEEFB3; background: linear-gradient(to right, #fff, #FEEFB3 , #fff); margin: 6px 24px 6px 24px; color: #9F6000; font-size: 20px; } /* mm ---------------------------------------------------------------------- */ .mm { position:relative; width:100%; height:54px; top:0; left:0; display:inline-block; z-index:994; } .mm-links { display:inline-block; float:left; margin-top:40px; padding-bottom:12px; width:580px; background-color: rgba(255,255,255,0.4); } .mm-links a[visible="false"] { display:none; } .mm-offset { height:56px; } @media not screen and (min-width: 1000px) { .mm { background-color:#444; opacity:0.8; } } @media not screen and (min-width: 1000px) { .mm { position:fixed; } .mm-links { margin-top:0px; padding-bottom:0px; width:inherit; float:none; display:inline; position:absolute; overflow:hidden; padding-left:0px; background:-webkit-linear-gradient(left, rgba(255,255,255,0.0), rgba(255,255,255,0.4)); left:160px; right:60px; top:8px; height:36px; } } @media not screen and (min-width: 652px) { .mm-links { } } .mm .jump { float:left; margin-left:20px; margin-right:0px; margin-top:10px; font-weight1:bold; font-size:24px; color:#fff; text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } .mm .logo-small1 { float:left; height:54px; width:92px; margin-top:0px; display:none; } @media not screen and (min-width: 1000px) { .mm .jump { display:inline; margin-top:2px; margin-left:8px; } .mm .logo-small1 { display:inline; } } .mm .logo { float:left; height:114px; width:192px; margin-top:0px; margin-left:16px; padding:16px 8px 16px 0px; } @media not screen and (min-width: 1000px) { .mm .logo { float:left; height:57px; width:96px; margin-top:0px; padding-top:0px; margin-left:8px; } } .mm .many { float:right; position:relative; width:24px; height:24px; left:10px; top:0px; color:#fff; background:#00ffff; background:#ff0000; font-size:18px; border-radius:50%; border:2px solid #fff; } /* user ---------------------------------------------------------------------- */ .user { height:80px; background-color:#eee; } .user-status { float:right; position:relative; width:24px; height:24px; line-height:24px; left:-4px; top:6px; color:#fff; background:#ccc; font-size:18px; border-radius:50%; border:2px solid #fff; } .user-status[status="0"] { background:red; display:none; } .user-status[status="1"] { background:green; display:none; } .user-xxname[ok="1"] { text-shadow: -1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff; color: green; } .user-xxname[ok="0"] { color: white; } @media not screen and (min-width: 652px) { } /* face ---------------------------------------------------------------------- */ .face { height:150px; margin-top:-54px; z-Index:2; } @media not screen and (min-width: 1000px) { .face { margin-top:0px; } } @media not screen and (min-width: 652px) { .face { } } .face span { padding-left:38px; font-size:18px; padding-top:42px; color:#fff; opacity:0.7; -shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; height:40px; display:block; max-width:960px; margin:0; text-align:left; } .face .homepage { padding-left:40px; font-size:28px; padding-top:0px; color:#fff; text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; height:40px; display:none; margin:0; text-align:left; } .face .homepage a{ color:#fff; } .face .homepage a:visited{ color:#fff; } /* bars ---------------------------------------------------------------------- */ .bars { float:left; margin:auto; position:relative; width:45px; height:54px; margin-top:48px; padding-left:15px; display: inline-block; cursor: pointer; } @media not screen and (min-width: 1000px) { .bars { margin-top:8px; padding-left:8px; } } @media screen and (min-width: 652px) { .bars { } } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #ccc; margin: 6px 0; transition: 0.4s; } .bar1[nos="1"] { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .bar1[nos="0"] { -webkit-transform: 0 ; transform: 0 ; } .change1 .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .change1 .bar2 { opacity: 0; } .bar2[nos="1"] { opacity:0; } .bar2[nos="0"] { opacity:1; } .change1 .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } .bar3[nos="1"] { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } .bar3[nos="0"] { -webkit-transform: 0 ; transform: 0 ; } /* xn ---------------------------------------------------------------------- */ .xn { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 998; background:#000; display:none; z-index:98; } .xn1 { display:none; left:0; margin-top:52px; background:#444; width:100%; border-top:2px solid #ccc; overflow:hidden; z-index:98; } .xn[vis="1"] { display:inline; } .xn ul { position: absolute; margin-top:0; margin-bottom:0; padding-top:52px; top:0; left:0; right:0; bottom:0; list-style: none; -webkit-padding-start:0; line-height:30px; background:#444; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; } .xn ul a{ color:#fff; text-decoration: none; } .xn ul li { text-align:left; font-size:18px; padding:4px 24px 4px 24px; overflow:hidden; } .xn ul li:hover{ background:#777; } .xn ul li img{ margin-top:4px; position:relative; float:left; } /* attr ---------------------------------------------------------------------- */ .attr { width:100%; border:0px solid #ffffff; } .attr-box { padding-top:6px; height:64px; max-width:960px; background: #BDC3C7; background: linear-gradient(to right, #fff, #BDC3C7 , #fff); overflow:hidden; } @media not screen and (min-width: 1000px) { .attr-box { border-radius:0px; border-left:0px; border-right:0px; } } @media not screen and (min-width: 652px) { .attr-box { border-radius:0px; border-left:0px; border-right:0px; } } .live { width:30px; margin-left:10px; margin-top:10px; float:left; color:#444; } .attr-1 { width:170px; margin-left:30px; float:left; color:#444; } .attr-1 .hdr { margin-top:6px; } .attr-1 .dat { font-size:30px; } .attr-1 .dat[closed="1"] { color:red; } @media not screen and (min-width: 652px) { .attr-1 { margin-left:24px; } } .attr-2 { width:100px; float:left; color:#444; } .attr-2 .hdr { margin-top:6px; } .attr-2 .dat { font-size:30px; } .attr-3 { width:100px; float:left; color:#444; } .attr-3 .dat[live="1"] { color:green; } .attr-3 .hdr { margin-top:6px; } .attr-3 .dat { font-size:30px; } .attr-4 { float:left; margin-left:16px; color:#444; } .attr-4 .hdr { margin-top:6px; } .attr-4 img { float:left; } .attr-4 img[type="card"] { height:24px; border-radius:6px; margin-top:4px; margin-left:4px; padding:2px 2px 2px 2px; } .attr-4 img[type="cash"] { height:24px; border-radius:6px; margin-top:4px; margin-left:4px; padding:2px 10px 2px 10px; } /* live ---------------------------------------------------------------------- */ .live .sp { left:14px; position:relative; float:left; padding: 4px 8px 4px 8px; margin-left: 2px; margin-right: 2px; width: 36px; height: 36px; } .live .sp > div { width: 24px; height: 24px; background-color: #eee; border: 2px solid #fff; border-radius: 100%; display: inline-block; opacity:0.7; } .live .sp[nr="3"] > div { background-color: #ccc; } .live .sp[nr="4"] > div { background-color: #444; } .live .sp[nr="0"] > div { background-color: #ff0000; } .live .sp[nr="1"] > div { background-color: green; -webkit-animation: live-delay 1.4s infinite ease-in-out both; animation: live-delay 1.4s infinite ease-in-out both; } .live .sp[nr="2"] > div { background-color: #00ff00; } .live .sp .status { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } @-webkit-keyframes live-delay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes live-delay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /* tool ---------------------------------------------------------------------- */ .title { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; top:0; } .title[fixed="yes"] { position:fixed; } .title h1 { --left: 0px; --position: absolute; --width: 0px; text-align: center; position:absolute; margin: 0; left:0; right:0; Z-INDEX : -1; padding: 14px 6px 6px 6px; font-size: 18px; font-weight: bold; color: #000000; } a.tool { padding: 0 6px; line-height: 44px; height: 40px; font-family: inherit; font-size: 18px; } a.tool[shape="back"] { margin: 4px 5px 5px 7px; padding-top: 4px; float: left; left: 6px; } a.tool[touch="yes"] { opacity: 0.5; } a.tool[shape="back"]:active1 { opacity: 0.5; } a.tool[disabled="yes"] { opacity: 0.3; } a.tool span { font-size: 46px; color: #3e78b3; } a.tool text { margin-left:16px; margin-top:-5px; padding-left: 2px; padding-right: 6px; top:10px; font-size: 18px; color: #3e78b3; float: right; } a.tool[shape="tool"] { margin-top: -1px; margin-left: 4px; margin-right: 4px; padding-left: 6px; padding-right: 6px; float: right; height:44px; } a.tool[shape="exec"] img{ margin-top: 5px; } a.tool[shape="exec"] { margin-top: -1px; margin-left: 4px; margin-right: 4px; padding-left: 6px; padding-right: 6px; float: left; height:44px; } a.tool[shape="tool"] img{ margin-top: 5px; } .tools { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; bottom:0; } .scroll { bottom: 55px; right:0; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .error { font-size: 18px; font-weight: normal; margin: 6px 6px 6px 6px; padding: 8px 8px 8px 8px; } /* load ---------------------------------------------------------------------- */ .load { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:#000; opacity:0.4; display:none; } .load[loading="yes"] { display:inline; z-index: 999; } .loadspin { margin:auto; position: relative; top:50%; width: 70px; text-align: center; width:200px; height:200px; } .loadspin > div { width: 44px; height: 44px; background-color: #eee; border: 2px solid #aaa; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .loadspin .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loadspin .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } /* send ---------------------------------------------------------------------- */ .send { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; display:none; } .send[sending="yes"] { display:inline; z-index: 999; } .sendspin { margin:auto; position: relative; top:50%; width: 70px; text-align: center; width:200px; height:200px; } .sendspin > div { width: 44px; height: 44px; background-color: #55acee; border: 2px solid #aaa; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .sendspin .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .sendspin .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /* fade ---------------------------------------------------------------------- */ .fade { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:#000; opacity:0.0; display:none; transition: opacity 2s; -webkit-transition: opacity 2s; } .fade[fade="yes"] { display:inline; opacity:0.6; transition: opacity 2s; -webkit-transition: opacity 2s; z-index: 997; } /* sleep ---------------------------------------------------------------------- */ .sleep { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:rgba(0,0,0,0,2); display:none; } .sleep[sleeping="yes"] { display:inline; z-index: 999; } .spinner2 { width: 30px; height: 30px; background-color: #333; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } .dialog { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; background:#666666; display:inline; opacity:0.5; } /* pc ---------------------------------------------------------------------- */ .pc { height:40px; margin-top:0px; background:#bbbbbb; float:left; width:640px; display:none; } .pc .menu{ float:left; width:151px; height:28px; padding-top:12px; padding-left:12px; text-align:left; background:#bbbbbb; } .pc .menu img { float:left; margin-top:-8px; margin-left:2px; } .pc .modu{ float:left; width:159px; height:28px; padding-top:12px; background:#eeeeee; } .pc .modu[sel="yes"] { background:#0000ff; color:#ffffff; } /* bots ---------------------------------------------------------------------- */ .ftr { clear:both; background:#ccc; opacity:0.9; z-Index:2; max-width:960px; margin:0; margin-bottom:60px; margin-top:-20px; display:none; } @media not screen and (min-width: 1000px) { .ftr { display:none; } } .adv { margin-top:12px; margin-bottom:12px; display:inline-block; background: linear-gradient(to right, #fff, #ccc, #fff); padding:12px 24px; 12px 24px; } .appdownload { display:block; font-size:16px; color:#444; padding:0px 0px 16px 0px; } .qrcode { float:left; width:90px; height:90px; padding:8px 8px 8px 8px; background:#fff; margin-top:16px; margin-right:24px; border-radius:8px; border:2px solid #ccc; } .bots { padding-bottom:24px; margin-top:4px; } @media not screen and (min-width: 652px) { .bots { padding-bottom:12px; } } .bots a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#444; font-size:14px; } .bots a:hover { text-decoration: underline; } .comm { padding-bottom:24px; margin-top:16px; } @media not screen and (min-width: 652px) { .comm { margin-top:4px; padding-bottom:16px; } } .comm a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#ffffff; font-size:17px; } .comm a:hover { text-decoration: underline; } .links { padding-bottom:24px; margin-top:8px; } @media not screen and (min-width: 652px) { .links { display:none; } } .links a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#444; height:24px; font-size:14px; white-space: nowrap; } .links a:hover { text-decoration: underline; } .bank { padding-top:8px; padding-bottom:16px; } @media not screen and (min-width: 652px) { .links { padding-top:0px; } } .bank img[type="card"] { width:50px; border-radius:6px; } /* tracker ---------------------------------------------------------------------- */ .tracker { height:56px; } .tracker .stage { margin-left:4px; margin-top:0px; float:left; height:36px; width:100px; background:#aaaaaa; } .tracker .stage[state="1"] { background:#0000ff; } .tracker .stage[state="2"] { background:#2ecc71; } .tracker .stage span { display:inline-block; margin-top:10px; font-size: 12px; font-weight: bold; color:#eeeeee; } .tracker .stage .triangle { float:right; width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 18px solid #aaaaaa; background:#eeeeee; } .tracker .stage[state="1"] .triangle { border-left: 18px solid #0000ff; } .tracker .stage[state="2"] .triangle { border-left: 18px solid #2ecc71; } .tracker .stage[type="s"] { width:110px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="k"] { width:160px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="p"] { width:80px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="d"] { width:212px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .global { left: 0; right:0; max-width: 960px; background: #fff; margin: 0; padding: 0; position:relative; bottom:0; max-width: 960px; } @media screen and (min-width: 1000px) { .global { box-shadow: 0 0 24px #000; margin-bottom:36px; min-height:100vh; } } @media not screen and (min-width: 1000px) { .global { position:absolute; overflow:hidden; top:54px; min-height:8px; bottom:0; } } /* home ---------------------------------------------------------------------- */ .home-scan { background-color:#eee; background-image: url(img/qrscan.png); background-repeat: no-repeat; background-size: auto 80px; background-position: center 10px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width:424px; height:100px; cursor: pointer; } .home-scan span { height:100px; line-height:100px; text-align:center; font-size:24px; font-weight: bold; color:#444; text-shadow: -1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff; } .home-line { font-size:16px; color:#444; white-space: normal; } .home-demo span { display: inline-block; font-size:16px; color:#444; margin:12px 0px 24px 0px; padding:4px 4px 4px 4px; border:2px solid #55acee; width:200px; height:24px; line-height:24px; color:#55acee; } .home-demo span:hover { background:#ccc; } .home-demo a { color:#55acee; text-decoration: none; } .home-demo a:visited { color:#55acee; } .home-text { padding:8px 8px 8px 8px; } .home-text input { border: 4px solid #dddddd; padding: 0px 24px 0px 24px; border-radius: 24px; font-size:16px; height:36px; } .home-step { text-align: left; font-size:16px; color:#444; padding:12px 8px 12px 48px; white-space: normal; line-height:24px; border-top:1px #ccc dotted; } .home-step .step { border-radius:50%; border:2px solid #000; font-size:20px; margin-top:-4px; margin-right:8px; width:28px; height:28px; line-height:28px; float:left; text-align:center; } /* page ---------------------------------------------------------------------- */ .page { left: 0; right:0; top:0; width: 100%; background: #fff; opacity:0.99; height:100%; padding: 0; overflow:hidden; } @media screen and (min-width: 1000px) { .page { min-height:100vh; } } @media not screen and (min-width: 1000px) { .page { overflow-y: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; position:absolute; bottom:0; } } .page1[home="1"] { margin-top:0px; } .page .tool { height: 70px; line-height: 70px; top: 0; background: #BDC3C7; background: linear-gradient(to right, #fff, #BDC3C7 , #fff); white-space: nowrap; --Z-INDEX : 100; } .page .tool[fixed="yes"] { position:fixed; } .page .tool h1 { padding-left:16px; white-space: nowrap; font-size: 24px; font-weight: normal; margin-right:116px; text-align: center; text-overflow: ellipsis; color: #444; padding-top:0px; margin-top:0px; display:inline-block; top:0; } .page .tool h1 img { float:left; width:48px; margin-top:10px; display:inline; } .page .tool h1 img[round="1"] { width:36px; padding:6px 6px 6px 6px; border-radius:50%; border:2px solid #aaa; } .page .tool h1 span { padding-left:8px; text-overflow: ellipsis; } .page .tool .back { float:left; font-size:36px; width:76px; position:relative; cursor:pointer; color:#fff; text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } .page .tool .exit { float:right; font-size:36px; width:76px; position:relative; cursor:pointer; color:#fff; text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } @media not screen and (min-width: 1000px) { .page .tool .back { width:58px; } } /* main ---------------------------------------------------------------------- */ .main1 { background:#eee; min-height:140px; max-width: 960px; height:100%; position:relative; margin-top:240px; } .main { left: 0px; max1-width: 960px; margin-top:180px; padding: 0; overflow:hidden; background:#eee; } @media not screen and (min-width: 652px) { .main { } } /* advs ---------------------------------------------------------------------- */ .advs { position:relative; margin-top:32px; } .advs .row { height:280px; width:424px; background:#fff000; margin-bottom:32px; } .advs .box { height:200px; padding:12px 1px 12px 1px; margin-bottom:16px; width:200px; background:#ff0000; float:left; } .advs .hdr { background:#fff; color:#444; height:24px; font-size:16px; font-weight:bold; } .advs .pho { height:160px; background:#ccc; } .advs .pho img { width:100%; height:100%; } .advs .des { height:64px; font-size:16px; background:#fff; color:#444; } .advs .spr { height:36px; font-size:20px; background:#fff; color:#444; font-weight:bold; } /* full ---------------------------------------------------------------------- */ .full { } /* cont ---------------------------------------------------------------------- */ .cont { float:left; width:642px; background:#fff; } @media not screen and (min-width: 1000px) { .cont { width:100%; } } /* mbox ---------------------------------------------------------------------- */ .mbox { display:table; } @media not screen and (min-width: 652px) { .mbox { display:inline-block; width:100%; } } /* vert ---------------------------------------------------------------------- */ .vert { background:-webkit-linear-gradient(left, #fff, #fff); display:table-cell; white-space: nowrap; width:180px; min-width:180px; } @media not screen and (min-width: 652px) { .vert { display:block; background:#fff; height:46px; width:100%; border-top:2px solid #444; border-bottom:2px solid #444; } } /* form ---------------------------------------------------------------------- */ .form { margin-top: 12px; margin-bottom: 0px; padding:0px 16px 0px 16px; max-width:620px; } @media not screen and (min-width: 492px) { .form { padding-left:8px; padding-right:8px; } } .form .button { display: inline-block; margin-top:6px; padding: 12px 8px 12px 8px; height: 24px; line-height: 24px; text-align:center; font-size: 16px; background: #7c91ac; color: #ffffff; cursor: pointer; background-color: #55acee; width: 406px; } @media not screen and (min-width: 492px) { .form .button { padding-left:0px; padding-right:0px; width:100%; } } .form .button:hover { background-color: #6FC6FF; } .form .button[type="r"] { background: #e74c3c; } .form .button[type="r"]:hover { background: #FF6656; } .form .button[type="r"] { background: #e74c3c; } .form .button[type="r"]:hover { background: #FF6656; } .form .button[type="u"] { background: #9b59b6; } .form .button[type="u"]:hover { background: #B573D0; } .form .button[type="g"] { background: #2ecc71; } .form .button[type="g"]:hover { background-color: #48E68B; } .form .button[type="s"] { background: #ff8040; } .form .button[type="s"]:hover { background-color: #ff8040; } .form .button[type="text"] { background: #eeeeee; color: #444444; } .form .button[type="text"]:hover { background: #cccccc; } .form .button[type="login"] { background:green; color:#fff; } .form .button[type="facebook"] { background:#3d5b99; color:#fff; } .form .button:active { background: #55acee; color: #ffffff; } .form .button[disabled="yes"] { background: #777777; color: #ffffff; } .form .button[disabled="yes"]:hover { background: #777777; color: #ffffff; } .form .button[disabled="yes"]:active { background: #777777; color: #ffffff; } .form .note { border: 2px solid #eeeeee; padding: 12px 12px 12px 12px; font-size: 14px; color:#666666; background:#ffffee; } .form .none { margin: 2px 2px 2px 2px; height:8px; border: 0px; clear: both; } .form H1 { padding: 24px 6px 4px 6px; margin-top: 2px; margin-bottom: 0px; font-size:24px; font-weight: normal; text-align:left; color:#444; } .form H2 { padding: 24px 0px 12px 94px; margin-top: 2px; margin-bottom: 12px; margin-left: 8px; margin-right: 8px; font-size:18x; font-weight: bold; text-align:left; color:#444; border-bottom:4px solid #ccc; } .form H2[visible="false"] { display: none; } @media not screen and (min-width: 492px) { .form H2 { padding-left: 16px; margin-left: 0px; margin-right: 0px; } } .form H2 .step { width:36px; height:36px; line-height:36px; float:left; border-radius:50%; border: 2px solid #ff8040; color: #ff8040; font-size:20px; font-weight:bold; text-align:center; margin-top:-8px; margin-left:-10px; margin-right:8px; } .form .tabs { padding: 24px 0px 12px 0px; margin-top: 2px; margin-bottom: 16px; margin-left: 24px; margin-right: 24px; box-shadow: 0px 15px 10px -15px #777; } .form .vspc { height:12px; } .form .tab-button { display:inline-block; border-width: 0px; width:120px; height:18px; margin-left:4px; margin-bottom:2px; padding: 10px 16px 6px 16px; background:#eeeeee; color:#444444; } .form .tab-button[visible="false"] { display: none; } .form .tab-button[sel="1"] { background:#eeeeee; border-bottom: 8px solid #bbbbbb; color:#444444; } .form .tabs .page[visible="false"] { display: none; } /* link ---------------------------------------------------------------------- */ .link { display: inline-block; padding: 12px 8px 12px 8px; height: 20px; line-height: 20px; text-align:left; font-size: 16px; background: #eee; color: #444; cursor: pointer; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width: 100%; } .link:hover { background:#55acee; color:#fff; } .link[disabled="yes"] { background: #ccc; color:#444; cursor: inherit; } .link[top1="0"] { border-top:1px solid #eee; } .link[top1="0"]:hover { border-top:1px solid #55acee; } .link span { float:right; font-size:20px; margin-right:16px; color:#ccc; } .link img { float:left; width:32px; height:32px; margin-right:6px; margin-top:-6px; } /* data ---------------------------------------------------------------------- */ .data { padding: 0px 0px 12px 0px; } .data[color="green"] { background: #008000; } .data[color="red"] { background: #ff0000; } .data li { list-style-type: none; border-width: 0px; width:424px; padding:0px 2px 4px 2px; overflow:hidden; height:58px; } .data li[lnk="1"] { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; height:56px; } .data li[txt="1"] { height:28px; } .data li[visible="false"] { display: none; } @media not screen and (min-width: 492px) { .data li { width:100%; padding-left:0px; padding-right:0px; } } .data li[color="green"] { background: #008000; } .data li[color="red"] { background: #ff0000; } .data li:last-child { border-bottom-width:0; } .data li label { padding: 4px 4px 2px 4px; margin-right: 8px; margin-top: 2px; font-size:14px; float:left; display:inline-block; position:relative; margin-left:12px; top:-60px; z-index:99; text-align:left; color:#444; background:#fff; border-radius:6px; } .data li label[__link="yes"] { text-decoration: underline; } .data li text { color:#444; text-align:left; font-size:14px; padding:6px 0px 16px 12px; float:left; } .data li space { padding: 6px 6px 6px 0px; margin-left: 24px; margin-right: 8px; margin-top: 6px; float:left; width:170px; } .data li info { border: 2px solid #dddddd; padding: 6px 6px 6px 6px; margin-top: 4px; font-size:16px; float:left; width:320px; text-align:left; color:#606060; } .data li info[type="full"] { width:600px; } .data input { border: 1px solid #55acee; margin: 2px 0px 2px 0px; margin-top:12px; padding:10px 8px 6px 12px; font-size:16px; height:24px; float:left; display: inline; overflow: hidden; width:402px; color:#000088; outline: none; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } .data input[readonly="yes"] { border: 1px solid #ccc; } .data input[disabled="yes"] { border: 1px solid #777; } @media not screen and (min-width: 492px) { .data input { border-left: 0px; border-right: 0px; width:100%; } } .data input:focus { -moz-box-shadow: 0 0 8px #55acee; -webkit-box-shadow: 0 0 8px #55acee; box-shadow: 0 0 8px #55acee; border: 1px solid #55acee; } .data input:focus[readonly="yes"] { -moz-box-shadow: 0 0 8px #ccc; -webkit-box-shadow: 0 0 8px #ccc; box-shadow: 0 0 8px #ccc; border: 1px solid #ccc; } .data input[type="password"] { } .data input[type="text"] { } .data input[type="edit"][kind="address"] { } .data li .payment { border: 1px solid #ccc; margin: 2px 0px 2px 0px; margin-top:8px; padding:24px 8px 6px 12px; font-size:16px; border-radius: 6px; -webkit-border-radius: 6px; float:left; display: inline; overflow: hidden; padding-top:16px; padding-left:6px; width:408px; height:30px; cursor: pointer; color:#000088; } .data li[disabled="yes"] .payment { background: #ccc; color:#444; } .data li .payment span { float:left; padding-top:2px; } .data li .payment img { width:58px; height:36px; margin-top:-8px; margin-right:4px; border:1px solid #ccc; border-radius:8px; float:left; } .data li .round { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px #000; width: 18px; height: 18px; top:0px; float:left; margin-left:12px; margin-right:8px; position:relative; background:#fff; z-index:99; cursor: pointer; } .data li[checked="yes"] .round { background:#55acee; } .data input[readonly="yes"]{ color:#444; } .data input[sel="yes"]{ color:#000000; background:#00ffff; } .data input[red="yes"]{ border: 1px solid #ff0000; } .data textarea { border: 2px solid #dddddd; margin: 4px 4px 4px 4px; font-size:16px; width:96%; height:86px; } .data textarea[readonly="yes"]{ color:#606060; background:#eeeeee; } .data select { border: 1px solid #ccc; margin: 2px 0px 2px 0px; margin-top:8px; padding:10px 8px 6px 12px; font-size:16px; height:24px; display: inline; overflow: hidden; width:402px; color:#000088; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; background: #ffffff; outline: none; } .data select{ background:#eeeeee; } .data select[readonly="yes"]{ color:#444; } .data select[red="yes"]{ color:#ffffff; background:#ff0000; } .data select option{ color:#000088; background: #ffffff; } .data .title { padding: 6px 6px 6px 6px; border-bottom: 2px solid #dddddd; margin-top: 4px; margin-left: 16px; font-size:24px; text-align:left; color:#000000; } .data .disp { font-size:16px; text-align:left; line-height:1.4; margin-top:6px; margin-bottom:6px; padding: 12px 12px 12px 12px; margin-left: 8px; margin-right: 8px; text-align:center; background:#eee; word-break:break-all; } .data .disp[type="err"] { background:#FFD2D2; color:#D8000C; } .data .disp[type="inf"] { background:#BDE5F8; color:#00529B; } .data .disp[type="mes"] { background:#DFF2BF; color:#4F8A10; } .data .disp[type="txt"] { background:#ccc; color:#444; } .data .disp img { float:left; width:32px; height:32px; margin-top:-6px; } /* list ---------------------------------------------------------------------- */ .list { } .list li { height: 44px; list-style-type: none; border-bottom-color: #dddddd; border-width: 0px; border-bottom-width: 2px; border-style: solid; font-size: 15px; font-weight: normal; overflow: hidden; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; } .list li[sel="yes"] { background: #ff00ff; } .list li:first-child { border-top-color: #dddddd; border-top-width: 2px; } .list li:active { background: #0000ff; color: #ffffff; } .list li li { margin-top: 3px; margin-bottom: 4px; padding-top: 2px; padding-left: 6px; border: 0px; float: left; --display: block; height: 32px; --overflow: hidden; } .list li li[xal=""] { float: left; --background: #00ff00; } .list li li[xal="top"] { --background: #666666; display: inline; } .list li li[xal="bottom"] { font-size: 15px; height:16px; --background: #aaaaaa; position:absolute; } .list li img { margin: 0px; padding: 0; display: inline; } .list li tool { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .list li img { float: left; padding: 6px 6px 6px 6px; border-style: none; } .list goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: -8px; margin-right: 16px; float:right; } /* cats ---------------------------------------------------------------------- */ .cats { margin-top:48px; color:#444; float:left; position:relative; width:180px; z-Index:0; } .cats[fix="1"] { position:fixed; } @media not screen and (min-width: 1000px) { .cats { position:fixed; } } @media not screen and (min-width: 652px) { .cats { float:none; display:inline-block; width:100%; margin-top:0px; height:42px; position:absolute; overflow-x: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } } .cats li { height: 24px; list-style-type: none; border-bottom: 1px solid #eee; padding-left:12px; padding-right:12px; margin-top:4px; margin-bottom:4px; margin-right:8px; padding-top:8px; text-align: right; font-size: 14px; overflow: hidden; white-space:nowrap; color:#222; -webkit-tap-highlight-color:#0000ff; } @media not screen and (min-width: 652px) { .cats li { display:inline-block; margin-top:0px; margin-bottom:0px; padding:0px 4px 0px 4px; height:42px; line-height:42px; text-align:center; border-bottom: 0px; } } .cats[disabled="yes"] li { color:#ccc; } .cats li[link="0"] { font-weight: bold; border-bottom: 2px solid #ccc; background:#fff; } .cats li[link="1"] { cursor: pointer; } .cats[disabled="yes"] li[link="1"] { cursor: auto; } .cats li[link="1"]:hover { background: #ccc; } .cats[disabled="yes"] li[link="1"]:hover { background: #fff; } .cats li img { float: right; padding: 6px 0px 6px 0px; margin-top:-14px; } @media not screen and (min-width: 652px) { .cats li img { float: none; } } .cats li text { float: right; } @media not screen and (min-width: 652px) { .cats li text { float: none; } } .cats a { text-decoration: none; } .cats a:hover, .x-cats a:visited, .x-cats a:link, .x-cats a:active { text-decoration: none; color:#444; } .cats1 goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: -8px; margin-right: 16px; float:right; } /* opts ---------------------------------------------------------------------- */ .opts { color:#444; position:relative; display:inline; top:0; width:100%; } @media1 not screen and (min-width: 652px) { .opts { float:none; position:relative; display:inline; top:0; width:100%; } } .opts li { height: 24px; list-style-type: none; border-bottom: 1px solid #eee; padding-left:12px; padding-right:12px; margin-top:4px; margin-bottom:4px; margin-right:8px; padding-top:8px; text-align: right; font-size: 14px; overflow: hidden; white-space:nowrap; color:#222; float:left; -webkit-tap-highlight-color:#0000ff; } @media1 not screen and (min-width: 652px) { .opts li { float:left; } } .opts li:hover[link="1"] { background: #ccc; } .opts li[type="txt"] { } @media not screen and (min-width: 652px) { .opts li[type="txt"] { float:left; margin-top:24px; margin-left:24px; margin-right:12px; font-size:16px; color:#444; } } .opts li[type="qua"] { } @media not screen and (min-width: 652px) { .opts li[type="qua"] { float:left; width:36px; margin-top:12px; text-align:center; font-size:16px; } } .opts li[type="plu"] { } @media not screen and (min-width: 652px) { .opts li[type="plu"] { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } } .opts li[type="les"] { } @media not screen and (min-width: 652px) { .opts li[type="les"] { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } } .opts li[type="bck"] { background:#777; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="bck"] { display:none; } } .opts li[type="add"] { background:#55acee; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="add"] { float:left; margin: 4px 6px 16px 16px; padding: 8px 8px 8px 8px; height: 18px; width:48px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #55acee; box-shadow: 0px 5px 0px 0px #3C93D5; } } .opts li[type="upd"] { background:#55acee; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="upd"] { float:left; margin: 4px 6px 16px 16px; padding: 8px 8px 8px 8px; height: 18px; width:108px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #e67e22; box-shadow: 0px 5px 0px 0px #CD6509; } } .opts li[link="0"] { font-weight: bold; border: 1px solid #ccc; } .opts li[link="1"]:hover { } .opts li img { float: right; padding: 6px 6px 6px 6px; margin-top:-14px; } .opts a { text-decoration: none; } .opts a:hover, { text-decoration: none; color:#444; } /* nav ---------------------------------------------------------------------- */ .nav { } .nav .button { padding: 8px 8px 8px 8px; margin: 8px 4px 8px 0px; height: 18px; text-align:center; font-size: 16px; font-weight: bold; background: #bbbbbb; color: #ffffff; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; border: 0px; width:40px; float:left; } .nav .button:active { background: #0000ff; color: #ffffff; } .nav .viewer { padding: 8px 8px 8px 8px; margin: 8px 4px 8px 0px; height: 18px; text-align:center; font-size: 16px; font-weight: bold; background: #bbbbbb; color: #ffffff; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; border: 0px; width:80px; float:left; } /* mx ---------------------------------------------------------------------- */ .mx { } .mx li { height: 48px; width: 132px; float: left; position:absolute; background: #ffffff; background: -webkit-linear-gradient(#ECF0F1, #A3ABB1); background: -o-linear-gradient(#ECF0F1, #A3ABB1); background: -moz-linear-gradient(#ECF0F1, #A3ABB1); background: linear-gradient(#ECF0F1, #A3ABB1); list-style-type: none; border-color: #BDC3C7; border-width: 2px; border-style: solid; border-radius: 8px; font-weight: normal; padding: 4px 0px 4px 0px; margin: 6px 6px 6px 6px; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .mx li[type__="sys"] { background: #747474; color: #ffffff; } .mx li[type__="folder"] { background: #ffffff; } .mx li[type__="record"] { background: #d9e9d9; } .mx li:active { background: #0000ff; color: #ffffff; } .mx li span { font-size: 15px; font-weight: bold; margin-top: 8px; position: absolute; left:10px; top:28px; } .mx li img { float: left; padding: 6px 6px 6px 6px; margin-left: 4px; margin-right: 2px; width: 32px; height: 32px; left:0px; top:0px; position: absolute; } .mx goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: 14px; margin-right: 16px; float:right; } /* menu... ---------------------------------------------------------------------- */ .pos-menu { border-left:1px solid #ccc; width:432px; vertical-align:top; margin-top:16px; margin-bottom:24px; padding-left:16px; display:table-cell; background: #ffffff; padding-right:16px; padding-top: 12px; padding-bottom: 48px; } @media not screen and (min-width: 652px) { .pos-menu { display:inline-block; padding-right:0px; padding-left:0px; width:100%; } } .pos-menu li { height: 40px; list-style-type: none; border-bottom-color: #eeeeee; border-width: 0px; border-bottom-width: 0px; border-style: dotted; font-size: 18px; font-weight: normal; padding-top: 0px; padding-left: 2px; overflow: hidden; position: relative; margin-right:8px; } @media not screen and (min-width: 652px) { .pos-menu li[dis="0"] { display:none; } } .pos-menu li[visible="false"] { display:none; } .pos-menu li[kind="itm"]:before1 { top:15px; left:12px; content: "........................................................................................................"; white-space: nowrap; font-size: 14px; position: absolute; } .pos-menu li[kind="itm"] { border-bottom: 1px solid #ccc; cursor:pointer; } .pos-menu li[kind="itm"]:hover { background: #eee; } .pos-menu li[kind="cat"] { height:50px; padding-top: 40px; } .pos-menu li[kind="rel"] { height:50px; padding-top: 40px; } .pos-menu li[kind="img"] { height:120px; margin-bottom: 12px; } .pos-menu li[kind="cob"] { border-bottom: 1px solid #ccc; margin-top:12px; margin-bottom:12px; border: 2px solid #6FC6FF; border-radius:12px; cursor:pointer; } .pos-menu li[kind="cob"]:hover { background: #eee; } .pos-menu li[kind="inf"] { margin-top:12px; display:block; border-bottom:2px solid #ccc; padding-bottom:0px; padding-left:4px; margin-left:2px; margin-right:10px; text-align:left; color:#222; font-size:14px; font-weight:bold; overflow:hidden; cursor: pointer; } .pos-menu li[kind="inf"] img { float: left; width:32px; } .pos-menu li[kind="inf"] img span { float:left; } .pos-menu li[kind="apply"] { border-bottom: 1px solid #ccc; background:green; margin-top:32px; margin-bottom:12px; cursor:pointer; } .pos-menu li[kind="apply"][disabled="yes"] { background: #777; cursor: auto; } .pos-menu li[kind="apply"] span { color:#fff; } .pos-menu li[kind="abort"] { border-bottom: 1px solid #ccc; background:red; margin-top:12px; margin-bottom:12px; cursor:pointer; } .pos-menu li[kind="abort"] span { color:#fff; } .pos-menu li[exists="1"] { background: #00ff00; } .pos-menu li[disabled="yes"] { } .pos-menu li .cb1 { background : url(img/cb1.png); background-size:100%; width:32px; height:32px; float:left; margin-top:4px; margin-left:2px; } .pos-menu li span { padding: 12px 8px 8px 8px; font-size:14px; float: left; display: inline; color:#000; } .pos-menu li itm { padding: 12px 8px 8px 8px; font-size:15px; float: left; display: inline-block; position: relative; z-index: 10; color:#444; } .pos-menu li[rq="red"] itm { color:#ff0000; } .pos-menu li[disabled="yes"] itm { text-decoration: line-through; } .pos-menu li[touch="yes"] { } .pos-menu li cob { padding: 12px 8px 8px 8px; font-size:15px; float: left; display: inline-block; position: relative; z-index: 10; color:#444; } .pos-menu li[kind="cob"][sel="1"] cob { color:#555555; background:#ffffff; } .pos-menu li mat { padding: 12px 8px 8px 8px; margin-left:48px; font-size:18px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li not { padding: 12px 8px 8px 8px; margin-left:48px; font-size:18px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li price { padding: 12px 8px 8px 0px; font-size:15px; float:right; display: inline-block; position: relative; width:60px; text-align:right; float: right; color:#444; z-index: 10; } .pos-menu li count { margin: 11px 24px 0px 4px; font-size:18px; font-weight:bold; float:right; color:#3e78b3; } .pos-menu li cat { padding: 8px 0px 8px 0px; font-size:24px; text-align:center; background:#eee; width:100%; display: inline-block; } .pos-menu li rel { padding: 8px 0px 8px 0px; font-size:24px; text-align:center; background:#eee; width:100%; display: inline-block; } .pos-menu li rel img { float:left; margin-left:8px; width:32px; height:32px; } .pos-menu li[kind="rel"][ok="0"] rel { } .pos-menu li[kind="rel"][ok="1"] rel { } .pos-menu li next { margin: 5px 5px 5px 5px; float: right; width:40px; height:40px; top:0px; } .pos-menu li add { width:36px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-menu li del { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-menu li more { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .pos-menu li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 18px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; height: 14px; color:#999999; padding: 0px 8px 8px 56px; } .pos-menu li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-menu div img { width: 100%; border: none; } /* builder ---------------------------------------------------------------------- */ .pos-menu-builder { width:100%; background: #fff; margin-bottom:32px; } .pos-menu-builder li { height: 44px; background: #fff; list-style-type: none; font-size: 14px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .pos-menu-builder li[kind="group"]{ color:#444; margin-top:16px; height: 32px; line-height: 32px; vertical-align: middle; text-align:left; font-size:16px; padding-left:112px; } .pos-menu-builder li[kind="option"]{ } .pos-menu-builder li[kind="input"]{ } .pos-menu-builder li .button{ float:left; width:100px; } .pos-menu-builder li .quantity{ float:left; width:60px; display:block; height:26px; text-align:right; font-size:26px; color:#3e78b3; padding-top:0px; border-bottom: 2px solid #cccccc; margin-right:12px; } .pos-menu-builder li .tool { margin-right:8px; width:36px; display:block; height: 36px; background: #eeeeee; border: 2px solid #cccccc; float:left; } .pos-menu-builder .txt { padding-left:16px; font-size: 14px; text-align:left; color:#777777; } .pos-menu-builder .img { padding: 8px 16px 8px 16px; } .pos-menu-builder li .tool img{ margin-top:-8px; margin-left:-2px; } .pos-menu-builder li .text { text-overflow: ellipsis; overflow: hidden; width:auto; text-overflow: ellipsis; } .pos-menu-builder li .price { height: 32px; line-height: 32px; vertical-align: middle; float:right; color:#444; padding-right:8px; } .pos-menu-builder li[kind="input"][valid="yes"] .price{ color : #0080ff; } .pos-menu-builder li input1{ height:40px; text-align:right; padding-right: 4px; margin-right: 4px; background:#ffffff; color:#3e78b3; height: 24px; } .pos-menu-builder li .input { height: 32px; line-height: 32px; vertical-align: middle; text-align:left; display:block; text-overflow: ellipsis; width:auto; margin: 4px 16px 4px 100px; border:2px solid #ddd; border-radius:4px; background:#eee; font-size: 15px; font-weight:bold; color:#444; padding-left:8px; } .pos-menu-builder li[kind="input"][embed="yes"] .input{ border:2px solid green; color : green; } .pos-menu-builder li[kind="input"][embed="not"] .input{ border:2px solid red; color : red; } .pos-menu-builder li[kind="input"][valid="yes"] .input{ border:2px solid #0080ff; color : #0080ff; } .pos-menu-builder li[kind="input"][valid="not"] .input{ border:2px solid red; color : red; } .pos-menu-builder li input { height: 32px; line-height: 32px; vertical-align: middle; text-align:left; display:block; width:auto; margin: 4px 16px 4px 100px; border:2px solid #ddd; border-radius:4px; background:#eee; font-size: 15px; font-weight:bold; color:#444; padding-left:8px; } .pos-menu-builder li[kind="input"][valid="yes"] input{ border:2px solid #0080ff; color : #0080ff; } .pos-menu-builder li input[type="edit"] { background:#ffffff; margin-left:114px; height:30px; margin-top:4px; } .pos-menu-builder .textarea { padding-left:100px; padding-right:36px; height:76px; } .pos-menu-builder textarea { background:#f0f0d2; left:0; top:0; height:76px; min-height:76px; max-height:76px; font-size:16px; font-weight:bold; padding:4px 8px 8px 8px; width:100%; min-width:100%; max-width:100%; outline: none; border:2px solid #ddd; border-radius:4px; background:#eee; } .pos-menu-builder textarea[valid="yes"]{ border:2px solid #0080ff; color : #0080ff; } .pos-menu-builder li button { width: 64px; height:100%; background: #00ff00; float:left; text-align:center; font-size: 20px; font-weight: bold; margin: 2px 2px 2px 2px; } .pos-menu-builder li select { width: 84px; height:28px; float:left; text-align:center; font-size: 16px; font-weight: bold; margin: 8px 2px 2px 6px; border: solid 1px #ccc; color:#444; z-Index:998; } .pos-menu-builder li select option { color:#444; font-size: 16px; font-weight: bold; } .pos-menu-builder li input[valid="yes"] { } .pos-menu-builder li input[type="radio"] { } .pos-menu-builder li input[type="radio"]:checked { background: #99d9ea; } .pos-menu-builder li input[type="checkbox"] { } .pos-menu-builder li input[type="checkbox"]:checked { background: #00ff00; } .pos-menu-builder .button { margin: 16px 6px 16px 6px; padding: 8px 8px 8px 8px; height: 20px; width:160px; text-align:center; font-size: 20px; font-weight: bold; -webkit-border-radius: 8px; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 8px; } .pos-menu-builder .button:active { transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); box-shadow: 0px 1px 0px 0px; } .pos-menu-builder .button[kind="a"] { color: #ffffff; background-color: #55acee; box-shadow: 0px 5px 0px 0px #3C93D5; } .pos-menu-builder .button[kind="a"]:hover { background-color: #6FC6FF; } .pos-menu-builder .button[kind="u"] { color: #ffffff; background-color: #e67e22; box-shadow: 0px 5px 0px 0px #CD6509; } .pos-menu-builder .button[kind="u"]:hover { background-color: #FF983C; } .pos-menu-builder .button[kind="d"] { color: #ffffff; background: #e74c3c; box-shadow: 0px 5px 0px 0px #CE3323; } .pos-menu-builder .button[kind="d"]:hover { background: #FF6656; } /* builder... ---------------------------------------------------------------------- */ .detail { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; display:inline; background-color: rgba(0,0,0,0.7); } .builder-box { margin: auto; position: absolute; top: 32px; bottom: 32px; margin-left:-280px; left:50%; width:560px; background-color: #fff; z-Index:999; box-shadow: 0 0 24px #000; } @media not screen and (min-width: 560px) { .builder-box { top:0; bottom:0; margin-left:0; left:0; width:100%; } } .builder-top { position: absolute; top: 8px; left: 0; width: 100%; height:104px; z-Index:999; } .builder-dat { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; position: absolute; top:132px; bottom:54px; left:12px; right:12px; z-Index:998; } @media not screen and (min-width: 560px) { .builder-dat { left:0; right:0; } } .builder-bot { position: absolute; bottom: 8px; left: 0; width: 100%; height:40px; } .builder-pho { position: absolute; top: 8px; left: 16px; width: 154px; height: 112px; } @media not screen and (min-width: 560px) { .builder-pho { display:none; } } .builder-pho img{ width: 154px; height: 112px; } .builder-hdr { position:absolute; top:12px; margin-left:24px; left:0; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; text-align:left; height:24px; right:0; font-size:16px; color:#444; padding-left:10px; padding-right:48px; font-weight:bold; } @media not screen and (min-width: 560px) { .builder-hdr { margin-left:4px; padding-right:12px; } } .builder-txt { position:absolute; left:186px; top:40px; height:36px; text-overflow: ellipsis; overflow:hidden; padding-right:8px; color:#777; font-size:14px; text-align:left; } @media not screen and (min-width: 560px) { .builder-txt { left:14px; } } .builder-les { position:absolute; top:84px; left:186px; border: 2px solid #0080ff; border-top-left-radius: 8px; border-bottom-left-radius: 8px; width:48px; height:28px; line-height:26px; font-size:24px; font-weight:bold; color:#0080ff; cursor: pointer; } .builder-les[disabled="yes"] { border: 2px solid #777; background:#ccc; color:#777; } @media not screen and (min-width: 560px) { .builder-les { left:14px; } } .builder-les:hover { background-color: #ccc; } .builder-plu { position:absolute; top:84px; left:236px; border: 2px solid #0080ff; border-top-right-radius: 8px; border-bottom-right-radius: 8px; width:48px; height:28px; line-height:26px; font-size:24px; font-weight:bold; color:#0080ff; cursor: pointer; } .builder-plu[disabled="yes"] { border: 2px solid #777; background:#ccc; color:#777; } @media not screen and (min-width: 560px) { .builder-plu { left:64px; } } .builder-plu:hover { background-color: #ccc; } .builder-qua { position:absolute; top:88px; left:320px; font-size:20px; font-weight:bold; } @media not screen and (min-width: 560px) { .builder-qua { left:140px; } } .builder-spr { position:absolute; top:82px; left:360px; right:0; padding-right:48px; height:32px; font-size: 15px; font-weight:bold; } @media not screen and (min-width: 560px) { .builder-spr { left:180px; padding-right:36px; } } .builder-spr span { float:right; height: 32px; line-height: 32px; vertical-align: middle; float:right; color:#0080ff; padding-right:8px; } .builder-add { position:absolute; margin: auto; height: 32px; line-height: 32px; width:120px; left:50%; margin-left:-120px; text-align:center; font-size: 16px; font-weight: bold; color: #0080ff; cursor: pointer; } .builder-add:hover { background-color: #ccc; } .builder-bck { position:absolute; margin: auto; height: 32px; line-height: 32px; width:120px; left:50%; margin-left:0px; text-align:center; font-size: 16px; font-weight: bold; color: #444; cursor: pointer; } .builder-bck:hover { background-color: #ccc; } .builder-upd { position:absolute; margin: auto; height: 32px; line-height: 32px; width:120px; left:50%; margin-left:-120px; text-align:center; font-size: 16px; font-weight: bold; color: #0080ff; cursor: pointer; } .builder-upd:hover { background-color: #ccc; } @media1 not screen and (min-width: 1652px) { .builder-box { bottom: 132px; top: 132px; padding:0; margin:0; margin: auto; position: absolute; border:0px; width:600px; display:inline; position: fixed; background:#ff00ff; overflow:hidden; bottom:0px; } .builder-top { top:0px; overflow:hidden; height: 50px; margin-top: 0px; height: 54px; border-bottom:2px solid #444; background:#00ff00; width:100%; } .builder-dat { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; position: fixed; top: 52px; width:400px; margin-top:62px; margin-bottom:54px; bottom:54px; } .builder-bot { height:54px; width: 432px; border-top:2px solid #444; overflow:hidden; z-Index:998; bottom:0px; overflow:hidden; height: 54px; bottom: 0; background:#ff0000; width:100%; } .builder-set { display:none; } } .builder-abort { position:relative; top:8px; float:left; margin-top:8px; margin-right:-10px; background:#eee; border:1px solid #ccc; width:40px; height:40px; display:none; } @media not screen and (min-width: 1652px) { .builder-abort { display:inline; } } .builder-abort:hover { background:#ccc; } .builder-abort img { margin-top:8px; margin-left:2px; } .builder-title { float:left; margin-top:24px; margin-left:24px; margin-right:12px; font-size:16px; color:#444; } .builder-plus { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } .builder-plus:hover { background-color: #eee; } .builder-plus img{ margin-top:-6px; } .builder-quantity { float:left; width:36px; margin-top:12px; text-align:center; font-size:16px; } .builder-less { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } .builder-less:hover { background-color: #eee; } .builder-less img{ margin-top:-6px; } /* menu-selector ---------------------------------------------------------------------- */ .pos-menu-selector { width:320px; } .pos-menu-selector li { height: 50px; background: #ffffff; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: dotted; font-size: 18px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; } /* order... ---------------------------------------------------------------------- */ .pos-panel { margin-left:638px; position:fixed; padding:0; top:240px; width:314px; z-Index:998; padding-left:0px; transition-property: top; transition-duration: 0.4s; transition-delay: 0s; } .pos-panel[hid="1"] { display:none; } .pos-panel[mobile="1"] { top:0px; bottom:0px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 1000px) { } @media not screen and (min-width: 1000px) { .pos-panel[min="1"] { display:none; } } .usr-icon { display:none; float:right; width:40px; height:40px; margin-top:6px; margin-right:32px; background:url(img/user.png) no-repeat; background-size: 100%; } .usr-icon[visible="false"] { display:none; } .pos-show { float:right; width:40px; height:40px; margin-top:46px; margin-right:32px; background:url(img/basket.png) no-repeat; background-size: 100%; } .pos-show[visible="false"] { display:none; } .pos-hide { display:none; float:left; margin-top:12px; margin-left:12px; } @media not screen and (min-width: 1000px) { .pos-panel1 { margin-top:24px; margin-bottom:24px; width:652px; position:static; margin-left:0px; } .pos-show { display:inline; margin-right:16px; margin-top:6px; } .pos-hide { display:inline; } } .pos-link { float:left; width:40px; height:40px; margin-top:8px; margin-left:8px; background:url(img/menu.png) no-repeat; background-size: 100%; } @media not screen and (min-width: 1000px) { .pos-panel { margin-left:0px; background: #eee; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; margin-top:0; top: 0; left: 0; width: 100%; height: 100%; padding:12px 12px 12px 12px; position: fixed; } .pos-panel[disabled="yes"] { background: #ccc; } } .pos-order { padding: 8px 6px 8px 6px; background: #f8f3dc; background: #eee; min-height:400px; overflow:hidden; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; } .pos-order:before, .pos-order:after { content:""; position:absolute; z-index:-1; box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; border-radius:100px / 10px; } .pos-order:after { right:10px; left:auto; transform:skew(8deg) rotate(3deg); } .pos-order[disabled="yes"] { background: #ccc; } @media not screen and (min-width: 1000px) { .pos-order { max-width:560px; vertical-align:top; padding-left:16px; padding-right:16px; margin-top:0px; box-shadow:0px 0px 0px; border-radius:0px; border:0px; } } @media not screen and (min-width: 652px) { .pos-order { left:0px; display:inline-block; width:100%; padding-left:0px; padding-right:0px; border:0px; overflow:hidden; } } .pos-order li { height: 28px; list-style-type: none; border-top-color: #cccccc; border-width: 0px; border-top-width: 1px; border-style: solid; text-align:left; font-size: 15px; font-weight: normal; padding-top: 10px; overflow: hidden; white-space:nowrap; } .pos-order li:first-child { border-top-width: 0px; } .pos-order li[kitok="0"] { } .pos-order li[voided="1"] { background: #f0c0c0; } .pos-order li[xxx="1"] { background:#ffffff; } .pos-order li[sel1="yes"] { background:#00ff00; color:#000000; } .pos-order li[visible="false"] { display:none; } .pos-order li[kind="X"] { background:#ffffff; } .pos-order li[kind="X"] img { float: left; width:16px; padding-left: 8px; padding-right: 3px; } .pos-order li[kind="X"] { padding-top: 4px; padding-bottom: 6px; padding-left: 8px; } .pos-order li[kind="X"] span { display:inline-block; margin-top: 0px; margin-left: 30px; padding-top: 7px; text-align:center; height:23px; width:216px; font-size: 15px; font-weight: normal; color:#ffffff; -webkit-border-radius: 8px; } .pos-order li[kind="X"] span[clr="g"] { background:green; } .pos-order li[kind="X"] span[clr="r"] { background:red; } .pos-order li[kind="F"] { padding-left: 108px; } .pos-order li[kind="B"] { color: #800080; } .pos-order li[kind="B"]:active1 { background: #0000ff; color: #ffffff; } .pos-order li[kind="D"] { color:#000080; } .pos-order li[kind="A"] { color:#ff0000; } .pos-order li[kind="Y"] { color:#008000; } .pos-order li[kind="E"] { cursor:pointer; padding-left: 8px; border-style: solid; background: #55acee; color: #fff; } .pos-order li[kind="E"][disabled="yes"] { cursor:auto; background: #777; color: #fff; } .pos-order li[kind="I"] { cursor:pointer; } .pos-order li[kind="I"]:hover { background:#eee; } .pos-order li[kind="L"] { cursor:pointer; padding-left: 8px; color: #0000ff; } .pos-order li[kind="R"] { padding-left: 8px; color: #ff0000; } .pos-order li[kind="G"] { padding-left: 8px; color: #288028; } .pos-order li[kind="T"] { padding-left: 8px; font-weight:bold; } .pos-order li[kind="W"] { padding-left: 38px; } .pos-order li[kind="H"] { padding-left: 8px; background: #f8f3dc; color: #000; } .pos-order li[kind="P"] { padding-left: 8px; color: #0000ff; } .pos-order li[kind="P"][type="bank"] { background: green; color: #fff; } .pos-order[order="yes"] li:last-child { border-bottom-width:0; } .pos-order li .text { text-overflow: ellipsis; padding-left:8px; overflow: hidden; width:auto; text-overflow: ellipsis; } .pos-order li img { float: left; width:16px; padding-left: 8px; padding-right: 8px; } .pos-order li value { float:right; margin-right:22px; width:60px; text-align:right; } .pos-order li .line[dis="1"] { background:#000080; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[crg="1"] { background:#ff0000; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[pay="1"] { background:#008000; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[cob="1"] { background:#800080; position:absolute; margin-top:-28px; left:8px; width:6px; height:36px; } .pos-order li .line[xxx="1"] { background:#eeeeee; position:absolute; margin-top:-28px; left:8px; width:6px; height:40px; } .pos-order li .price { float:right; width:60px; text-align:right; } .pos-order li .close { float:right; width:24px; height:24px; border-radius: 50%; border:2px solid #444; margin-right:8px; cursor:pointer; } @media screen and (min-width: 1000px) { .pos-order li .close { display:none; } } .pos-order li .close img { margin-top:4px; margin-left:-3px; position:relative; } .pos-order li count { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-order li .quantity { float:right; width:42px; min-width:42px; font-weight:bold; text-align:right; color:#3e78b3; } .pos-order li .del { float:right; width:24px; min-width:24px; text-align:center; color:#ff0000; cursor: pointer; } .pos-order li .del:hover { text-decoration: underline; } .pos-order li nil { float:left; width:32px; text-align:right; } .pos-order li sep { position:relative; left:54px; width:2px; height:46px; float:left; top: -12px; border-left-color: #666666; border-width: 2px; border-left-style: solid; } .pos-order li cat { padding: 8px 8px 8px 8px; font-size:24px; font-weight:bold; } .pos-order li add { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-order li del { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-order li[kind="M"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 12px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="O"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="C"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="Z"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="S"] { height:4px; border-top:4px solid #800080; } .pos-order li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 56px; } .pos-order li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-order li[kind="A"] { padding-top: 4px; padding-bottom: 8px; padding-left: 8px; color: #288028; } .pos-order li select { width: 100%; height:32px; text-align:center; font-size: 14px; -webkit-border-radius: 8px; border: solid 2px rgb(170,170,170); } .pos-order li select[red="yes"] { border: solid 2px #ff0000; } .pos-order li[disabled="yes"] { } .pos-bevel { position:fixed; top:0px; right:0px; width:294px; z-Index:996; background: #f8f3dc; background: #eee; display:none; } .pos-bevel[disabled="yes"] { background: #ccc; } @media not screen and (min-width: 652px) { .pos-bevel { width:100%; } } .pos-extra { position:absolute; width:32px; height:32px; background:#ff0000; margin-left:760px; z-Index:999; display:none; } /* pos-preview ---------------------------------------------------------------------- */ .pos-preview { padding: 8px 6px 8px 6px; background: #eee; overflow:hidden; border: 1px solid #ccc; width:412px; min-height:200px; max-height:200px; overflow:hidden; overflow-y:scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; margin-bottom:12px; } @media not screen and (min-width: 652px) { .pos-preview { left:0px; display:inline-block; width:100%; padding-left:0px; padding-right:0px; border:0px; overflow:hidden; } } .pos-preview[disabled="yes"] { background: #ccc; } .pos-preview li { height: 28px; list-style-type: none; border-top-color: #cccccc; border-width: 0px; border-top-width: 1px; border-style: solid; text-align:left; font-size: 15px; font-weight: normal; padding-top: 10px; overflow: hidden; white-space:nowrap; } .pos-preview li:first-child { border-top-width: 0px; } .pos-preview li[voided="1"] { background: #f0c0c0; } .pos-preview li[xxx="1"] { background:#ffffff; } .pos-preview li[sel1="yes"] { background:#00ff00; color:#000000; } .pos-preview li[visible="false"] { display:none; } .pos-preview li[kind="X"] { background:#ffffff; } .pos-preview li[kind="X"] img { float: left; width:16px; padding-left: 8px; padding-right: 3px; } .pos-preview li[kind="X"] { padding-top: 4px; padding-bottom: 6px; padding-left: 8px; } .pos-preview li[kind="X"] span { display:inline-block; margin-top: 0px; margin-left: 30px; padding-top: 7px; text-align:center; height:23px; width:216px; font-size: 15px; font-weight: normal; color:#ffffff; -webkit-border-radius: 8px; } .pos-preview li[kind="X"] span[clr="g"] { background:green; } .pos-preview li[kind="X"] span[clr="r"] { background:red; } .pos-preview li[kind="F"] { padding-left: 108px; } .pos-preview li[kind="B"] { color: #800080; } .pos-preview li[kind="B"]:active1 { background: #0000ff; color: #ffffff; } .pos-preview li[kind="D"] { color:#000080; } .pos-preview li[kind="A"] { color:#ff0000; } .pos-preview li[kind="Y"] { color:#008000; } .pos-preview li[kind="E"] { cursor:pointer; padding-left: 8px; border-style: solid; background: #55acee; color: #fff; } .pos-preview li[kind="E"][disabled="yes"] { cursor:auto; background: #777; color: #fff; } .pos-preview li[kind="I"] { cursor:pointer; } .pos-preview li[kind="I"]:hover { background:#eee; } .pos-preview li[kind="L"] { cursor:pointer; padding-left: 8px; color: #0000ff; } .pos-preview li[kind="R"] { padding-left: 8px; color: #ff0000; } .pos-preview li[kind="G"] { padding-left: 8px; color: #288028; } .pos-preview li[kind="T"] { padding-left: 8px; font-weight:bold; } .pos-preview li[kind="W"] { padding-left: 38px; } .pos-preview li[kind="H"] { padding-left: 8px; background: #f8f3dc; color: #000; } .pos-preview li[kind="P"] { padding-left: 8px; color: #0000ff; } .pos-preview li[kind="P"][type="bank"] { background: green; color: #fff; } .pos-preview[order="yes"] li:last-child { border-bottom-width:0; } .pos-preview li .text { text-overflow: ellipsis; padding-left:8px; overflow: hidden; width:auto; text-overflow: ellipsis; } .pos-preview li img { float: left; width:16px; padding-left: 8px; padding-right: 8px; } .pos-preview li value { margin: 0px 10px 0px 4px; float:right; margin-right:22px; width:60px; text-align:right; } .pos-preview li .line[dis="1"] { background:#000080; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[crg="1"] { background:#ff0000; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[pay="1"] { background:#008000; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[cob="1"] { background:#800080; position:absolute; margin-top:-28px; left:8px; width:6px; height:36px; } .pos-preview li .line[xxx="1"] { background:#eeeeee; position:absolute; margin-top:-28px; left:8px; width:6px; height:40px; } .pos-preview li .price { float:right; width:60px; text-align:right; } .pos-preview li count { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-preview li .quantity { float:right; width:42px; min-width:42px; font-weight:bold; text-align:right; color:#3e78b3; } .pos-preview li .del { float:right; width:24px; min-width:24px; text-align:center; color:#ff0000; cursor: pointer; } .pos-preview li .del:hover { text-decoration: underline; } .pos-preview li nil { float:left; width:32px; text-align:right; } .pos-preview li sep { position:relative; left:54px; width:2px; height:46px; float:left; top: -12px; border-left-color: #666666; border-width: 2px; border-left-style: solid; } .pos-preview li cat { padding: 8px 8px 8px 8px; font-size:24px; font-weight:bold; } .pos-preview li add { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-preview li del { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-preview li[kind="M"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 12px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="O"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="C"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="Z"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="S"] { height:4px; border-top:4px solid #800080; } .pos-preview li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 56px; } .pos-preview li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-preview li[kind="A"] { padding-top: 4px; padding-bottom: 8px; padding-left: 8px; color: #288028; } .pos-preview li select { width: 100%; height:32px; text-align:center; font-size: 14px; -webkit-border-radius: 8px; border: solid 2px rgb(170,170,170); } .pos-preview li select[red="yes"] { border: solid 2px #ff0000; } .pos-preview li[disabled="yes"] { } /* framework ---------------------------------------------------------------------- */ .user-menu { height:32px; margin-bottom:32px; } .user-item { float:left; width:24%; height:100%; padding-top:16px; background:#ccc; } .user-item[sel="1"] { background:#fff; } /* edit ---------------------------------------------------------------------- */ .edit-panel { position: relative; z-index: 1; display: inline-block; margin-top: 10px; padding-left: 8px; padding-right: 8px; background:#fff; width: 340px; vertical-align: top; } .edit-field { position: relative; display: block; float: left; padding-top: 6px; padding-bottom: 0px; padding-left: 1px; font-size:18px; width: 60%; border: none; border-radius: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; z-index: 10; width: 100%; background: transparent; color: #444; } .edit-field:focus { outline: none; } .edit-label { display: inline-block; float: right; width: 40%; color: #6a7989; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; padding: 0; width: 100%; color: #777; text-align: left; } .edit-label::before { content: ''; position: absolute; top: 0; width: 100%; height: 3px; background: #fff; -webkit-transform: scale3d(1, 0.4, 1); transform: scale3d(1, 0.4, 1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .edit-label::after { content: attr(data-content); position: absolute; top: 0; left: 0; padding: 4px 1px; color: #da7071; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); pointer-events: none; } .edit-field:focus + .edit-label::before { background-color: #da7071; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .edit-field:focus + .edit-label { pointer-events: none; } .edit-field:focus + .edit-label::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .edit-descr { position: relative; display: block; padding: 16px 0; width: 100%; padding: 4px 1px; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .edit-field:focus + .edit-label .edit-descr { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } /* legal ---------------------------------------------------------------------- */ .legal { padding:16px 64px 16px 64px; text-align:left; } .legal H1 { font-size:36px; color:#444; padding-bottom:12px; border-bottom:2px solid #444; } .legal H2 { font-size:28px; color:#444; padding-bottom:12px; } .legal H3 { font-size:20px; color:#444; padding-bottom:8px; padding-top:8px; } .legal p { font-size:15px; line-height:20px; color:#444; padding-bottom:8px; } .legal p[up="1"] { font-size:15px; line-height:20px; color:#444; padding-bottom:0px; padding-left:16px; margin-top:-16px; } .legal p[ns="1"] { border-top:1px solid #444; padding-top:8px; } .legal img { width:48px; } .legal ul { margin-top:-8px; font-size:15px; } .legal ul li { color:#444; margin-left:-8px; padding:6px 6px 6px 6px; background:#eee; margin-bottom:2px; } /* popup ---------------------------------------------------------------------- */ .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index:999; } .overlay[vis="1"] { visibility: visible; opacity: 1; } .popup { margin: -80px auto; padding: 20px; top:50%; background: #fff; border-radius: 5px; width: 600px; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; font-size:18px; } .pac-item { height:36px; vertical-align: middle; font-size:16px; } .pac-item-query { vertical-align: middle; font-size:16px; } /* progress ---------------------------------------------------------------------- */ .progress-bar { background-color: #1a1a1a; height: 32px; padding: 4px 4px 4px 4px; margin: 14px 24px 6px 24px; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; float:left; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; } .blue span { background-color: #34c2e3; } .stripes span { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); animation: animate-stripes 1s linear infinite; } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } /* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ /* ============================================== slideDown ============================================== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } .slideDown1{ animation-name: slideDown1; -webkit-animation-name: slideDown1; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown1 { 0% { transform: translateY(-12%); } 100%{ transform: translateY(0%); } } @-webkit-keyframes slideDown1 { 0% { -webkit-transform: translateY(-12%); } 100%{ -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(100%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(100%); opacity:0; } 100% { -webkit-transform: translateX(0%); opacity:1; } } /* ============================================== slideRight ============================================== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideZero ============================================== */ .slideZero{ animation-name: slideZero; -webkit-animation-name: slideZero; animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; position:absolute; visibility: visible !important; } @keyframes slideZero { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes slideZero { 0% { opacity:1; } 100% { opacity:0; } } /* ============================================== slideHide ============================================== */ .slideHide{ animation-name: slideHide; -webkit-animation-name: slideHide; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; position:absolute; visibility: visible !important; } @keyframes slideHide { 0% { transform: translateX(0%); opacity:1; } 100% { transform: translateX(-100%); opacity:0; } } @-webkit-keyframes slideHide { 0% { -webkit-transform: translateX(0%); opacity:1; } 100% { -webkit-transform: translateX(-100%); opacity:0; } } /* ============================================== slideNone ============================================== */ .slideNone{ position:absolute; visibility: visible !important; } /* ============================================== slideLeft2 ============================================== */ .slideLeft2{ animation-name: slideLeft2; -webkit-animation-name: slideLeft2; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft2 { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft2 { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight2 ============================================== */ .slideRight2{ animation-name: slideRight2; -webkit-animation-name: slideRight2; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight2 { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight2 { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== Entrance ============================================== */ .Entrance{ animation-name: Entrance; -webkit-animation-name: Entrance; animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes Entrance { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes Entrance { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== Shrink ============================================== */ .Shrink{ animation-name: Shrink; -webkit-animation-name: Shrink; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes Shrink { 0% { transform: scale(1) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(0) translateX(25%) translateY(25%); opacity: 0.2; } } @-webkit-keyframes Shrink { 0% { -webkit-transform: scale(1) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(0) translateX(25%) translateY(25%); opacity: 0.2; } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .counter { width:100px; height:100px; background:#ccc; overflow:hidden; } .numbers{ width:auto; white-space:nowrap; -webkit-animation: countNumber 0.5s; -webkit-animation-fill-mode:forwards; -webkit-animation-timing-function: steps(8); } .numbers div { float:left; text-align:center; width:100px; height:100px; line-height:100px; display:inline-block; } @-webkit-keyframes countNumber { 0% { margin-left:0px } 100% { margin-left:-800px } }