/* VERSIONS SITE 2.0 ################################################### */ :root { color-scheme: light dark; supported-color-schemes: light dark; --tint-color: rgb(80, 191, 57); --tint-color-background: rgba(80,191,57,0.15); --darker-text-color: rgba(0,0,0,0.85); --tint-color-alpha: rgba(80,191,57,0.5); --button-top: rgba(0,0,0,0); --button-bottom: rgba(0,0,0,0.1); --button-hover-top: rgba(0,0,0,0.05); --button-hover-bottom: rgba(0,0,0,0.15); --button-active-top: rgba(0,0,0,0.1); --button-active-bottom: rgba(0,0,0,0.05); --blue-color: rgb(0, 97, 145); --blue-color-disabled: rgba(0, 97, 145,0.5); --blue-color-fill: rgba(0, 97, 145, 0.1); --stepper-border: #e0e0e0; --h2-top: #ffc958; --h2-bottom: #ecb03f; } body { font-family: system, -apple-system, helvetica, Arial, verdana, sans-serif; font-size: 12pt; line-height: 1.35em; margin: 0; padding: 0; position: relative; box-sizing: border-box; color: #aaaaaa; background-repeat: repeat-x; background-color: black; } h1, h2, h3, h4, h5 { color:white; font-weight:normal; margin:0; } strong { color:white; font-weight:bold; } h1 { font-size:20px; padding-bottom:20px; } h2 { font-size:19px; line-height:31px; } h3 { font-size:15px; } h4 { font-size:14px; font-weight:bold; display:inline; } h5 { font-size:16px; } h6 { font-size:12px; color:#646566; } hr { border:none; border-bottom:1px solid #333; margin-bottom:2em; } a {color:#eee; text-decoration:none; border-bottom:1px solid #222; padding:0 0 1px 0;} a, button {outline:none; -moz-outline:none} a::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0;} a:hover {border-bottom:1px solid #777; color:white;} a:focus, button:focus {outline:none; -moz-outline:none} p { -webkit-hyphens: auto; } .svn-lighted-green span { color:#badb9d; text-shadow:0px 1px 1px rgba(0,0,0,.1); } .lighted-green span { background-color:#1d4508; color:#badb9d; text-shadow:0px 1px 1px rgba(0,0,0,.1); padding: 0 2px 2px 2px; border-radius: 3px; } .lighted-blue span { background-color:#1c3a68; color:#aacdf0; text-shadow:0px 1px 1px rgba(0,0,0,.1); padding: 0 2px 2px 2px; border-radius: 3px; } #shine { height:247px; min-width:980px; background-image:url("/media/images11/shine-2x.jpg"); background-size: 1430px 247px; background-position:center top; background-repeat:no-repeat; } #glow-big { background-image:url("/media/images11/sprite-glow-2x.jpg"); background-size: 916px 384px; position:absolute; width:917px; height:235px; z-index:-150; top:160px; left:-240px; background-position:left top; } /* SPINNER ################################################### */ .animation {position:absolute;top:45%;left:50%; margin-left:-16px;} /* BUTTONS ################################################### */ .button-big, .button-small, .button-step-small { display:block; border:none; position:relative; cursor:pointer; -webkit-user-select:none; } .button-big::after, .button-small::after, .button-step-small::after { content: ""; clear: both; } .button-big { border-radius:8px; width:205px; height:44px; } .button-small, .button-step-small { border-radius:6px; width:140px; height:32px; } .button-big:active, .button-small:active, .button-step-small:hover, .button-big:hover, .button-small:hover { border:none; } button { padding: 0; } .button-big .icon { float:left; height:32px; width:32px; margin:6px 8px 6px 8px; } .button-big .smallicon { float:left; height:16px; width:16px; margin:14px 10px 14px 10px; } .button-small .title, .button-big .title, .button-step-small .title { text-shadow:0px 0.5px 0.5px rgba(0,0,0,.2); color:white; } .button-small .title { text-align: center; margin: 0 auto; font-size: 16px; padding: 5px 6px 5px 6px; } .button-step-small .title { float:left; font-size: 16px; margin: 6px 6px 6px 2px; } .button-big .title { height: 24px; font-size: 18px; font-weight: 500; margin: 11.5px 8px 8.5px 8px; } .smallicon + .title { padding-right: 26px; } .green { background:var(--tint-color); background-image: linear-gradient( var(--button-top), var(--button-bottom) ); } .green:hover { background:var(--tint-color); background-image: linear-gradient( var(--button-hover-top), var(--button-hover-bottom) ); } .green:active { background:var(--tint-color); background-image: linear-gradient( var(--button-active-top), var(--button-active-bottom)) ; } .blue { background:#25487f; background-image: linear-gradient( var(--button-top), var(--button-bottom) ); } .blue:hover { background:#345790; background-image: linear-gradient( var(--button-hover-top), var(--button-hover-bottom) ); } .blue:active { background:#1a3c6e; background-image: linear-gradient( var(--button-active-top), var(--button-active-bottom)) ; } .black { background:#21252f; background-image: linear-gradient( var(--button-top), var(--button-bottom) ); } .black:hover { background:#1d212b; background-image: linear-gradient( var(--button-hover-top), var(--button-hover-bottom) ); } .black:active { background:#1d212b; background-image: linear-gradient( var(--button-active-top), var(--button-active-bottom)) ; } .grey { background:#52596d; background-image: linear-gradient( var(--button-top), var(--button-bottom) ); } .grey:hover { background:#52596d; background-image: linear-gradient( var(--button-hover-top), var(--button-hover-bottom) ); } .grey:active { background:#52596d; background-image: linear-gradient( var(--button-active-top), var(--button-active-bottom)) ; } /* INTRODUCTION ################################################### */ #menu-wrapper { height:40px; width:940px; padding:0 20px; margin:0 auto; } #top-menu { float:right; } #top-menu a { float:right; text-shadow:0 0.5px 0.5px rgba(0,0,0,.1); padding:15px 0 0 0px; display:block; color:white; font-size:15px; text-decoration:none; border-bottom:none; margin-left:30px; opacity: 0.75; } #top-menu a:hover, #top-menu a.active { opacity: 1.0; } #top-menu a.active { } #top-menu a span { display:block; float:left; margin:2px 5px 0 0; border-color:transparent; width:18px; height:18px; background-size: 100%; } #download span { background-image:url("/media/images20/Navigation/Download.svg"); } #top-menu-buy span { background-image:url("/media/images20/Navigation/Buy.svg"); } #top-menu-support span { background-image:url("/media/images20/Navigation/Support.svg"); } #top-menu-releasenotes span { background-image:url("/media/images20/Navigation/ReleaseNotes.svg"); } #top-menu-home span { background-image:url("/media/images20/Navigation/Home.svg"); } #top { min-width:980px; background-image:url("/media/images11/sprite-2x.jpg"); background-size: 1603px 889px; background-position:center -283px; background-repeat:no-repeat; position:relative; z-index:50; } #versions-icon { background-image:url("/media/images20/flower-index.png"); background-size: 100%; width:217px; height:208px; margin:45px auto 0 auto; } #header-wrapper { clear:both; width: 940px; height: 100px; margin: 20px auto 0 auto; } #header-wrapper h1, #header-wrapper h2 { line-height: normal; text-align: center; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; shadow: rgba(0,0,0,.8) 0 2px 10px; } #header-wrapper h1 { font-size: 56pt; font-weight: 500; background-image: linear-gradient( #ffffff, #aaaaaa ); } #header-wrapper h2 { margin-top: -20px; font-size: 15pt; font-weight: 600; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); } #intro { clear:both; width: 940px; height: 70px; margin: 100px auto 0 auto; /* border: 1px solid #336699; */ } #intro p { font-size: 14pt; line-height: 1.3em; } #intro-wrapper { position:relative; float:left; } #intro-wrapper .left-column { width:450px; float:left; } #intro-wrapper .right-column { width:450px; float:right; position:relative; padding-top:10px; } #intro-wrapper .green { float:left; } #intro-wrapper .blue { float:right; } .button-big .download { background-image:url("/media/images20/Button/Download.svg"); } .button-big .buy { background-image:url("/media/images20/Button/Buy.svg"); } #MacBookAir { margin-top: 60px; min-width: 980px; background-image: url("/media/images20/MacBookAir.jpg"); background-position: center 20px; background-repeat: no-repeat; background-size: 1134px 667px; } #MacBookAir #spacer { height: 450px; } #MacBookAir #cover { background-image: linear-gradient( rgba(0,0,0,0.75), rgba(0,0,0,1.0) 50% ); } #Interface { clear: both; width:940px; height:200px; margin: 0 auto; padding: 20px 0 40px 0; box-shadow: 0px -10px 10px rgba(0,0,0,0.5); border-top: 1px solid #333; } #Interface h2 { text-align: center; } #Interface .left-column { width:450px; float:left; padding-right: 40px; } #Interface .right-column { width: 450px; float:right; position:relative; } #Interface ul { list-style-type:none; margin: 10px 0 0 0; padding:0; } #Interface ul li { padding-top: 20px; } #Interface ul li h5 { clear:left; background-repeat: no-repeat; padding-left: 40px; background-size: 32px 32px; line-height: 32px; padding-right: 8px; } #Interface ul li.developers h5 { background-image: url("/media/images20/Interface/Developers.svg"); } #Interface ul li.designers h5 { background-image: url("/media/images20/Interface/Designers.svg"); } #Interface ul li.managers h5 { background-image: url("/media/images20/Interface/Managers.svg"); } #Interface ul li.editors h5 { background-image: url("/media/images20/Interface/Editors.svg"); } #Interface li span { display: block; line-height: 24px; } #NoobsAndExperts { clear: both; width:940px; height:128px; margin: 60px auto 0 auto; } #NoobsAndExperts .left-column { width:450px; float:left; } #NoobsAndExperts .right-column { width:450px; float:right; position:relative; } #NewIn2 { clear: both; width:940px; height:344px; margin: 80px auto 0 auto; border: 1px solid #252627; } #NewIn2 .titlewrapper { margin: -12px auto 0 auto; width:220px; height:20px; background-color: black; position:relative; } #NewIn2 > .title { margin:-20px auto 0 auto; width:320px; height:40px; position:relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); text-align: center; text-transform: uppercase; font-size: 15pt; font-weight: 600; } #NewIn2 .back { width:920px; height:310px; background-image: linear-gradient( black, black 30%, hsl(224, 22%, 15%) ); margin: 0 7px 7px 7px ; } #NewIn2 .feature { width:276px; float:left; padding: 0 10px; margin-top: 10px; margin-right: 15px; } #NewIn2 .feature:last-child { margin-right: 0; } #NewIn2 .feature p { text-align: left; font-size: 14px; /* color: #99a; text-shadow: 0 1px rgba(0,0,0,.5);*/ hyphens: auto; } #NewIn2 h3 { text-align: center; margin: 20px 0 15px 0; font-size: 17px; } #NewIn2 img { display: block; align: center; margin: 0 auto; width: 276px; height: 124px; padding: 0; } #screens { width:940px; height: 1500px; clear: both; margin: 100px auto 0 auto; overflow: visible; } #screens #screen2, #screens #screen3 { clear:both; padding-top: 80px; overflow: visible; } #screens #screen1 .left , #screens #screen3 .left { width:300px; } #screens #screen2 .right { width: 300px; overflow: visible; } #screens .screenshot { width: 600px; height: 450px; background-size: 100%; background-position: center; background-repeat:no-repeat; } #screen1 .screenshot { height: 456px; background-image: url("/media/images20/Screenshot/WorkingCopy~Dark.jpg"); animation-name: screen1-out; animation-duration: 0.5s; animation-fill-mode: both; animation-direction: alternate; } #screen1 .screenshot:hover { background-image: url("/media/images20/Screenshot/WorkingCopy~Light.jpg"); animation-name: screen1-in; } #screen2 .screenshot { background-image: url("/media/images20/Screenshot/Timeline~Dark.jpg"); animation-name: screen2-out; animation-duration: 0.5s; animation-fill-mode: both; animation-direction: alternate; } #screen2 .screenshot:hover { background-image: url("/media/images20/Screenshot/Timeline~Light.jpg"); animation-name: screen2-in; } #screen3 .screenshot { background-image: url("/media/images20/Screenshot/Repository~Dark.jpg"); animation-name: screen3-out; animation-duration: 0.5s; animation-fill-mode: both; animation-direction: alternate; } #screen3 .screenshot:hover { background-image: url("/media/images20/Screenshot/Repository~Light.jpg"); animation-name: screen3-in; } /* Preloading images using CSS */ body::after{ position: absolute; width:0; height:0; overflow:hidden; z-index:-1; /* hide images */ content: url("/media/images20/Screenshot/WorkingCopy~Light.jpg") url("/media/images20/Screenshot/Timeline~Light.jpg") url("/media/images20/Screenshot/Repository~Light.jpg"); /* load images */ } @keyframes screen1-out { from { transform: scale(1.03); background-image: url("/media/images20/Screenshot/WorkingCopy~Light.jpg"); } to { transform: scale(1.0); background-image: url("/media/images20/Screenshot/WorkingCopy~Dark.jpg"); } } @keyframes screen1-in { from { transform: scale(1.0); background-image: url("/media/images20/Screenshot/WorkingCopy~Dark.jpg"); } to { transform: scale(1.03); background-image: url("/media/images20/Screenshot/WorkingCopy~Light.jpg"); } } @keyframes screen2-out { from { transform: scale(1.03); background-image: url("/media/images20/Screenshot/Timeline~Light.jpg"); } to { transform: scale(1.0); background-image: url("/media/images20/Screenshot/Timeline~Dark.jpg"); } } @keyframes screen2-in { from { transform: scale(1.0); background-image: url("/media/images20/Screenshot/Timeline~Dark.jpg"); } to { transform: scale(1.03); background-image: url("/media/images20/Screenshot/Timeline~Light.jpg"); } } @keyframes screen3-out { from { transform: scale(1.03); background-image: url("/media/images20/Screenshot/Repository~Light.jpg"); } to { transform: scale(1.0); background-image: url("/media/images20/Screenshot/Repository~Dark.jpg"); } } @keyframes screen3-in { from { transform: scale(1.0); background-image: url("/media/images20/Screenshot/Repository~Dark.jpg"); } to { transform: scale(1.03); background-image: url("/media/images20/Screenshot/Repository~Light.jpg"); } } #screens h2 { background-repeat: no-repeat; background-size: 32px 32px; padding-left: 40px; line-height: 32px; margin-bottom: 10px; } #screen1 h2 { background-image: url("/media/images20/WorkingCopy.svg"); } #screen2 h2 { background-image: url("/media/images20/Timeline.svg"); } #screen3 h2 { background-image: url("/media/images20/Repository.svg"); } #screens .left { float: left; } #screens .right { float: right; } #screens ul { line-height: 20pt; } #screens li { font-size: 12pt; } #screens li span { font-style:normal; color:#555; display:block; font-size:15px; } #main-features { float:left; font-size:13px; line-height:20px; width:940px; } #main-features li { float:left; position:relative; } #main-features li span { padding-left:0px; } li#main-feature-integration { margin-left:45px; width:210px; } li#main-feature-batteries { margin-left:35px; width:210px; } #main-feature-integration div, #main-feature-batteries div { background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; width:40px; height:40px; margin:10px 10px 0 0; float:left; } #main-feature-integration div { background-position:-83px -21px; width:45px; } #main-feature-batteries div { background-position:-145px -21px; } /* WORKING WITH SUBVERSION ################################################### */ #how-it-works { clear:both; margin-top:100px; height:530px; background-image:url("/media/images11/sprite-2x.jpg"); background-size: 1603px 889px; background-position: center 250px; background-repeat:no-repeat; /* border: 1px solid #666; */ } #svnsteps-wrapper {margin:0px auto; padding:0 20px; position:relative; height:450px; width:940px; border-top:4px double #252627;} #svnsteps-wrapper .titlewrapper { margin:-13px auto 0 auto; width:320px; height:20px; background-color: black; position:relative; } #svnsteps-wrapper > .title { margin:-20px auto 0 auto; width:320px; height:20px; position:relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); text-align: center; text-transform: uppercase; font-size: 15pt; font-weight: 600; /*color: #ffc958; */ } #svnsteps { height:350px;background:black; position:relative; float:left; width:200px; margin:30px 0 0 -10px;padding:10px; border-radius:8px; } #svnsteps .svnstep {margin:0 0 0px 0;} #svnsteps #svnstep-4 {margin-bottom:0;} #svnsteps .spacer {height:5px; font-size:0; line-height:0; float:none; clear:both; } #svnsteps .svnstep p { padding:0px 2px 0px 2px; line-height:20px; display:none; overflow:hidden; height:167px; margin:0 0 0; top:6px; position:relative; } /*#svnsteps .svnstep .button-step-small { margin-bottom:0px; } */ #svnsteps .svnstep .button-step-small { width: 200px; } #svnsteps .svnstep .button-step-small span { background-color: rgba(0,0,0,.5); border-radius: 6px; width:24px; height:23px; float:left; margin:4px 4px 0 4px; font-size:12px; text-align:center; padding: 1px 0 0 0; box-shadow: inset 0 0 1px rgba(0,0,0,.2); } /*.button-step-small .title { padding-top: 2px; }*/ #svnsteps-wrapper #svnsteps .svnstep .black span {background-position:-28px -400px; color:#5F6572; display:block;} #svnsteps-wrapper #svnsteps .svnstep .green span {background-position:-28px -365px; color:#acce8a; display:block;} #svnsteps-wrapper .image-wrapper {float:right; width:630px; height:380px; margin:70px 0 0 20px;} #svnsteps-wrapper img { width:596px; height:312px; } #svnsteps-wrapper .animation {margin-left:148px;} /* BOTTOM ################################################### */ #bottom {padding:0 20px; margin:0 auto; width:940px;} #info-wrapper {float:left; padding:100px 0 0 0;} #info-wrapper ul { list-style-type:none; margin:0; padding:0; } #info-wrapper .left-column { float:left; width:450px; margin-right: 40px; } #info-wrapper .right-column { float:left; width:450px; } #info-wrapper .first-column {float:left; width:330px;} #info-wrapper .second-column {float:left; width:260px; margin:5px 0 0 50px;} #info-wrapper .third-column {float:left; width:260px; margin:5px 0 0 40px;} #info-wrapper .first-column ul {margin-top:26px;} #info-wrapper .first-column ul li {padding:5px 0 7px 5px; line-height:22px;} #info-wrapper .first-column ul li span {padding-left:0px;} #info-wrapper .first-column ul li div {width:42px; margin-right:25px; float:left; background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; } #info-wrapper .first-column ul li.developers div {background-position:-27px -76px; height:42px; margin-top:-4px;} #info-wrapper .first-column ul li.designers div { background-position:-87px -89px; height:30px; margin-top:7px;} #info-wrapper .first-column ul li.managers div {background-position:-144px -88px; height:30px; margin-top:6px;} #info-wrapper .first-column ul li.editors div {background-position:-204px -90px;height:30px; margin-top:7px;} #info-wrapper span.versatile-icon {float:right; background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; background-position:-38px -228px; width:100px; height:103px; margin:-33px 5px 0 10px; display:block; background-color:transparent;} #info-wrapper span.powerful-icon {float:right; background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; background-position:-169px -242px; width:76px; height:85px; margin:-15px 20px 0 10px; display:block; background-color:transparent;} /* AWARDS & CUSTOMERS */ #promo-wrapper {float:left; width:100%; border:1px solid #252627; margin:100px 0 0 0; background-repeat:repeat-x; background-position:left bottom; position:relative;} #promo-wrapper .titlewrapper {margin:0px auto 0 auto; width:272px; height:20px; position:relative; top:-10px; background:black; } #promo-wrapper .title { margin:-30px auto 0 auto; width:320px; height:20px; position:relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); text-align: center; text-transform: uppercase; font-size: 15pt; font-weight: 600; } #promo .img { height:373px; background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; background-position:20px -510px; background-repeat:no-repeat; padding:20px 0 0 0px; } #promo .quote { position:absolute; width:305px; height:100px; bottom:30px; left:55px; font-style:italic; text-shadow:0px 1px 2px rgba(0,0,0,.8); color:#fff; font-size:13px; line-height:18px; } #promo .quote .begin, #promo .quote .end { color:#535c6c; font-size:32px; line-height:16px; position:relative; font-family:"times"; } #promo .quote .begin {margin:0 0px 0 -20px; top:8px;} #promo .quote .end {margin-right:0 -20px 0 0px; top:8px;} #promo .quote h6 {font-style:normal; color:#717989; display:inline-block; margin-top:7px;} #promo .quote h6 span {color:#535c6c;} #promo .quote h6 a {color:#717989; text-decoration:none; border-bottom:none;} #promo .quote h6 a:hover {color:#eee;} #promo { height:420px; margin:7px; background:#131720; background: linear-gradient( black, #282e3e ); } /* ADVERTISEMENT */ #externals-wrapper { list-style-type: none; width: 700px; height: 140px; margin: 100px auto 0 auto; padding: 0 0 0 0; font-size: 11px; line-height: 16px; border: none; } #externals-wrapper li { width:286px; height:120px; float:left; z-index:-100; border: none; } #externals-wrapper li.right { float:right; } #externals-wrapper li a.link { display:block; position:relative; width:286px; height:120px; left:0; background-image:url("/media/images20/sprite@2x.png"); background-size: 1041px 1093px; z-index:0; border:none; } #externals-wrapper li#kal-wrapper a.link { background-size: 286px 120px; background-image:url("/media/images20/Kaleidoscope/Kaleidoscope@2x.png"); background-repeat: no-repeat; background-position: top left; } #externals-wrapper li span { display:block; float:left; position:absolute; left:20px; z-index:100; text-shadow:0 1px 1px rgba(0,0,0,.8); } #externals-wrapper li span strong { color:white; font-weight:bold; } #kal-wrapper span { margin-top:60px; width:160px; color:#bc9bff; } #sub-wrapper span { margin-top:57px; width:167px; color:#87a0b3; } #sub-wrapper a.link { background-position:-672px -970px; } #kal-wrapper { border: 1px solid #40246c; background:#341862; background: linear-gradient( #472186, #241044 ); } #kal-wrapper:hover { border:1px solid #4a257f; background:#3c0b77; background: linear-gradient( #511b99, #290556 ); } #sub-wrapper { border:1px solid #0d1d2c; margin-left:38px; background:#071625; background: linear-gradient( #0b2134, #04111d ); } #sub-wrapper:hover { border:1px solid #042339; margin-left:38px; background:#021e35; background: linear-gradient( #002843, #000f27 ); } /* FEATURES */ #feature-wrapper { margin:100px 0 0 0; float:left; } #feature-wrapper ul {vmargin-bottom:40px; } #feature-wrapper h3 { margin-bottom:20px; } #feature-wrapper li { padding:0 0 8px 24px; margin-left:25px; background-image:url("/media/images20/List/Leaf.svg"); background-position: top left; background-repeat:no-repeat; background-size: 15px 15px; list-style-position:outside; list-style: none; font-size:12px; line-height:18px; } #feature-wrapper li span { font-style:normal; color:#444; display:block; font-size:11px;} #feature-wrapper .first-column {float:left; width:286px;} #feature-wrapper .second-column {float:left; width:286px; margin-left:40px;} #feature-wrapper .third-column {float:left; width:286px; margin-left:40px;} #feature-wrapper .first-column div, #feature-wrapper .second-column div, #feature-wrapper .third-column div { width:40px; height:40px; float:left; margin:-8px 10px 0 0px; background-position: center; background-repeat: no-repeat; } #feature-wrapper .connectivity { background-image: url("/media/images20/Bottom/Connectivity.svg"); } #feature-wrapper .more { background-image: url("/media/images20/Bottom/More.svg"); } #feature-wrapper .setup { background-image: url("/media/images20/Bottom/Setup.svg"); } #feature-wrapper .requirements { background-position:-145px -150px; } /* DOWNLOAD */ #download-wrapper { width:917px; margin:60px auto; text-align:center; position:relative; height:210px; } #download-wrapper b { color:#fff; font-weight:normal; } #download-wrapper h2 { margin-bottom:20px; } #download-wrapper .button-big { margin:0 auto 62px auto; text-align:left; z-index:50;} #download-wrapper .button-big .title { padding-top: 11px; } #download-wrapper a.twitter { margin:0 auto; width:200px; cursor:pointer; display:block; border:none; font-size:12px; font-weight:bold; color:#dcdcdc; z-index:50; position:relative;} #download-wrapper a.twitter span { display:block; float:left; width: 22px; height: 22px; background-color: #66a4d3; border-radius: 3px; background-image:url("/media/images20/SmallButton/Twitter.svg"); } #download-wrapper a.twitter:hover {color:white;} #download-wrapper a.twitter:hover span { } #download-wrapper .glow { width:917px; height:150px; position:absolute; bottom:0px; left:0px; z-index:10; background:url("/media/images11/sprite-glow-2x.jpg"); background-size: 916px 384px; background-position:center -229px; } /* BUY PAGE */ #buy-page-wrapper { width:740px; padding:0 20px; margin:70px auto 0 auto; background:black; height:500px; border-radius:5px; } /*-----------------------------------*/ /*THIS IS THE END OF THE MAIN PAGE*/ /*-----------------------------------*/ /* download popup */ #dlpop a { border-color:#303542; text-shadow:0px 1px 1px rgba(0,0,0,.4); } #dlpop { width:330px; height:230px; position:fixed; top:45%; left:47%; color:#687284; margin:-112px 0 0 -141px; padding:20px; z-index:500; text-align:center; display:none; border:2px solid #898c94; border-radius:12.5px; box-shadow:0 10px 20px rgba(0,0,0,.4); background-color:#21293d; background: linear-gradient(black, #21293d ); } #dlpop h1 { margin-top:20px; } #dlpop .icon { margin:5px auto 20px auto; width:64px; height:64px; background:url("/media/images20/Download.svg"); } #dlbutton { margin:20px auto 0 auto; } #backdrop { left:0px; right:0px; background:black; width:100%; height:100%; position:fixed; z-index:199; opacity:0.7; display:none; } /* individual release notes, shown in app */ #releasenote { margin:0; padding:15px; background:#fff; color:#000; font-size:12px;} #releasenote a { color:#3C9112; border-bottom:1px solid #C4EA91;} #releasenote a:hover { text-decoration:none; border-bottom:1px solid #3C9112;} #releasenote h2 { color:#000; font-weight:bold;} #releasenote h2 span { font-size:11px; font-weight:normal;} #releasenote h3 { color:#000; font-weight:bold; font-size:12px; margin:7px 0; text-transform:none;} #releasenote ul { padding:0px 0px 10px 25px; margin:0; list-style-image: url('/media/images/bullet_leaf.png');} #releasenote li { margin-bottom:0.8em; list-style-position:outside;} #releasenote li { margin-bottom:0.8em; list-style-position:outside;} #releasenote ul li { margin:0; padding:1px; color:#000;} #releasenote ul ul { padding:0 15px; list-style-image: url('/media/images/bullet_leaf_grey.png');} #releasenote ul ul li { padding:0px; color:#666;} #releasenote i { background:#DAE8B7; padding:0 4px; color:#263E0F; font-style:normal;} /* used to warn people of os/hardware incompatibility */ #releasenote #warning { border:1px solid #c16868; background:#fff2f2; padding:5px 10px; margin-bottom:15px; border-radius:3px; } #releasenote #warning b { color:#260000; font-size:1.1em; } #releasenote #warning strong { color:#260000; font-weight:bold; } /* releasenotes, shown on website */ #releasenotes { width:740px; margin:0px auto; } #releasenotes h1 { margin:5px 0px 25px 0; font-size:2em; } #releasenotes h2 { color:#eee; margin:35px 0 5px 0; } #releasenotes h2 span { font-size:11px; font-weight:normal; text-transform:uppercase; color:#575859; } #releasenotes h3 { color:#fff; font-weight:normal; font-size:12px; margin:7px 0; } #releasenotes ul { padding:0px 0px 10px 25px;font-size:12px; line-height:24px; margin:0; list-style:none; } #releasenotes ul li { margin:0; padding:1px; padding-left: 24px; list-style-image:none; background-image:url("/media/images11/leaf-2x.gif"); background-position: top left; background-repeat:no-repeat; background-size: 14px 16px; color:#a6a6a6; } #releasenotes li { margin-bottom:0.8em;list-style-position:outside; } #releasenotes ul ul { padding:0 17px; list-style-image: url('/media/images11/bullet_leaf_white.png'); } #releasenotes ul ul li { padding:0px; color:#626262; padding-left: 24px; list-style-image:none; background-image:url("/media/images11/bullet_leaf_grey-2x.png"); background-position: top left; background-repeat:no-repeat; background-size: 14px 16px; } #releasenotes i { background:#253b05; padding:0 4px; color:#fff; font-style:normal; } /* eula */ div.eulatext .icon {background:url("/media/images20/AppIcon_128@2x.png"); background-repeat:no-repeat; background-size: 100%; height:128px; width:128px; margin:0 auto 10px auto;} div.eulatext {width:910px; position:relative; margin:00px auto 0 auto; padding:0 30px;} div.eulatext h1 { line-height: normal; text-align: center; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; shadow: rgba(0,0,0,.8) 0 2px 10px; font-size: 20pt; font-weight: 600; margin-bottom: 20px; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); } div.eulatext p {margin-bottom:2.5em; text-align:justify;} /* footer */ #footer {width:600px; text-align:center; color:#333; font-size:11px; line-height:18px; margin:60px auto 50px auto;} #footer a {color:#444; border-color:#222;} #footer a:hover {color:#999;border-color:#444;} /* ==================== Support Section ==================== */ /* SUPPORT PAGE ################################################### */ #navigation { height:170px; background-image:url("/media/images11/sprite-2x.jpg"); background-size: 1041px 1093px; background-position:center -145px; background-repeat:no-repeat; margin-bottom:30px; } #support_wrapper {width:940px; position:relative; margin:0px auto 40px auto;} #support_wrapper h1 {font-size:19px;} #support_tabs {width:450px; float:left; } /* support tabs */ ul.tabs {margin:0; padding:0; float:left; list-style:none; width:100%;} ul.tabs h1 {margin:0; padding:2px 0 5px 0;} ul.tabs li {float:left; margin:0 0 -1px 0; padding:6px 0 3px 0; position:relative; width:146px; text-align:center; border-width:1px 1px 0 1px; border-color:transparent; border-style:solid; z-index:10; } ul.tabs li a {text-decoration:none;border:none;} ul.tabs li a h4 {color:#555; text-decoration:none;} ul.tabs li a:hover h4 {color:#fff; text-decoration:none;} ul.tabs li.active a h4 {color:#fff;} ul.tabs li.active {background:#121314; color:#fff; border-color:#1c1c1d; border-width:1px 1px 0 1px; border-style:solid; } /* faq & help */ .tab_container {clear:both; float:left; width:530px; border:1px solid #1c1c1d; background:#121314; position:relative;} .tab_content {width:530px; } .tab_content iframe.ifaq {height:900px; width:530px; } #support_tabs #faq {width:530px; padding:10px 0 0 0; overflow:hidden; } #faq dl { padding: 0 15px; } #faq dt::before { content: "Q: "; font-size: 12pt; display: block; width: 22px; float: left; color: var(--tint-color); } #faq dd::before { content: "A: "; font-size: 12pt; display: block; width: 22px; float: left; color: white; } #faq dt { margin-top: 15px; margin-bottom: 5px; line-height: 120%; padding-left: 22px; color: white; text-indent: -22px; } #faq dd { font-size: 13px; line-height: 150%; padding-left: 22px; text-indent: -22px; } #faq dd ul { margin: 0; text-indent: 0; } #faq dd li { margin: 0; padding: 0; } #faq_help { display: block; text-align:center; width:100%; font-size: 13px; border-bottom: 0; color:#a6a6a6; background-color:#121314; margin-top: 20px; height:26px; padding-top:8px; border-top:1px solid #1c1d1e;} #faq_help:hover { color:#FFF;} #help_window {display:block; text-align:center; color:#a6a6a6; background-color:#121314; height:45px; padding-top:23px; border-top:1px solid #1c1d1e; cursor:pointer;} #help_window:hover {background:#0e0f10; color:#FFF;} /* contact + email_sent */ .tab_content iframe.icontact {height:720px; width:530px; overflow:hidden;} #contact {height:675px; font-size:0.9em; width:480px; padding:25px 0px 0 25px;} #contact input, #contact select {margin:2px 0 15px 0; padding:2px; font-size:1.1em;} #contact input {border:0px solid white; border-radius:3px; padding:7px 0 8px 5px;/* background-color:#262729;*/} #contact .name, #contact .email, #contact .subject {width:355px; } #contact select {font-size:1.2em; width:200px;} #contact label {margin:0 0 0 5px;} #contact button {width:150px;} #contact textarea {width:470px; border:none; border-radius:3px; height:250px; resize:none; font-size:1.1em; padding:5px; margin:2px 0 15px 0; /*background-color:#2b2e33;*/} #contact .error {background-color:#6E0000; color:#FFABAB; font-size:0.8em; padding:1px 3px; margin-left:3px;} #contact_email_address {position:absolute; bottom:0; left:0; text-align:center; width:100%; border-bottom:0; color:#a6a6a6; background-color:#121314; height:45px; padding-top:23px; border-top:1px solid #1c1d1e; } #contact_email_address:hover {background:#0e0f10; color:#fff; border-bottom:0;} /* right column */ #support_right {width:340px; float:right; margin-left:30px;} #support_right h1 {padding-bottom:2px;} #support_right p {font-style:italic;} #support_right h4 {margin-bottom:2px;} #support_right p a:hover {text-decoration:underline;} #support_right form {height:30px;} #support_right input {width:245px; border:0px solid white; border-radius:3px; padding:7px 0 8px 5px; float:left;} #lost_license {margin-top:6px;} #lost_license form {margin:15px 0 0 0;} #versions1 { clear: both; margin-top: 40px; } /*submit button used in contact & lost license*/ #lost_license form button { margin:0; text-align:center; height:32px; padding:0 0 0 0; color:#FFF; text-shadow:0px 1px 2px rgba(0,0,0,.5); font-size:16px; width:80px; border:none; border-radius:5px; } #lost_license form button:hover {color:#FFF; background-color:#535353;} #lost_license form button:active {color:#BEBEBE; background-color:#454545;} /* discussions */ #group {margin-top:50px;} #group form {margin:15px 0 0 0;} #group h1 {position:relative;} #group h1 a {display:block; position:absolute; top:7px; right:75px; height:11px; width:12px; z-index:10; background-image:url("/media/images11/feed.gif"); border:none; background-repeat:no-repeat;} #group h1 a:hover {background-image:url("/media/images11/feed-active.gif"); } /* recent tweets */ #tweets {margin-top:40px;} #twitter {margin:5px 0 0 0;} #twitter a {white-space:nowrap; border-width:0 0 0px 0; color:#575859;} #twitter span a {color:#a6a6a6; border-width:0 0 1px 0px;} #twitter ul {margin:0; padding:0; list-style:none;} #twitter li {margin:0; padding:15px 0px 4px 23px; font-size:12px; line-height:22px; background:url('/media/images11/bullet_tweet.gif') no-repeat left 21px;} #twitter li:hover a {} /* MESSAGE PAGES */ #versions-icon-64 { width:64px; height:64px; margin:0 auto 20px auto; background-image:url("/media/images11/versions_64_white-2x.png"); background-size: 64px 64px; } /* email sent messages */ #sup_email_sent {text-align:center; height:120px; width:400px; margin:100px 0 0 -200px; position:absolute; top:40%; left:50%;} #license_email {width:380px; margin:40px auto 250px auto; } #license_email.sorry {width:420px; margin:40px auto 250px auto; } .message {text-align:center;} .message h4 {margin-bottom:5px;} .message p {} .message a {font-size:16px;} .message a.button-small {width:160px; margin:30px auto 0 auto;} .message.feedback a {width:190px;} #license_thanks {width:358px; margin:200px auto 125px auto;} #license_thanks h1 { line-height:30px;} #license_thanks .info {border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a; margin:50px 0; padding:20px 0 30px 0; } #license_thanks p.note {font-size:11px; line-height:18px; color:#444; margin-top:20px;} #license_thanks #license_title {background-image:url("/media/images11/sprite-thankyou.png"); background-repeat:no-repeat; height:100px;} #license_thanks.free #license_title {background-image:url("/media/images11/sprite-thankyou.png"); background-repeat:no-repeat; height:48px;} #kal-button { display:block; border-radius:5px; background-color:#111216; border:1px solid #16171b; padding:12px; color:#848688; font-size:14px; margin:0 0 40px; line-height:20px; text-align:left;} #kal-button:hover { background-color:#16171c; border:1px solid #1c1d21; } #kal-button #kal-icon-small { background-image:url("/media/images11/sprite-thankyou.png"); background-repeat:no-repeat; background-position:-5px -292px; margin:0 15px 0 5px ; width:41px; height:39px; float:left;} #kal-button b {color:white;} /* apple_3d_party */ #apple_3d_party {width:416px; margin:50px auto 125px auto;} #apple_3d_party .info {border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a; margin:50px 0; padding:20px 0 30px 0; } #apple_3d_party p {color:white; margin-bottom:20px;} #apple_3d_party p.note {font-size:11px; line-height:18px; color:#444; margin-top:40px; margin-bottom:0px;} #apple_3d_party #apple_title {background-image:url("/media/images11/sprite-thankyou.png"); background-repeat:no-repeat; height:100px; background-position:0 -154px;} #apple_3d_party button {width:100px; margin:0; height:31px; float:right; margin-right:40px; padding:0px 0 0 0; line-height:10px;} #apple_3d_party input{ margin:1px 0 0 25px; width:220px; padding:5px 0 6px 5px; background-color:#f8f8f9; border:1px solid #dedfe0; border-radius:4px; box-shadow:0px -1px 0px #adb1b7; } /* =========== Retina =========== */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #group h1 a {background-image:url("/media/images11/feed-2x.gif"); background-size: 12px 12px} #group h1 a:hover {background-image:url("/media/images11/feed-active-2x.gif"); background-size: 12px 12px} #twitter li {background:url('/media/images11/bullet_tweet-2x.gif'); background-size: 13px 12px} #license_thanks #license_title {background-image:url("/media/images11/sprite-thankyou-2x.png"); background-size: 414px 344px} #license_thanks.free #license_title {background-image:url("/media/images11/sprite-thankyou-2x.png"); background-size: 414px 344px} #kal-button #kal-icon-small {background-image:url("/media/images11/sprite-thankyou-2x.png"); background-size: 414px 344px} #apple_3d_party #apple_title {background-image:url("/media/images11/sprite-thankyou-2x.png"); background-size: 414px 344px} } /* ==================== Store Section ==================== */ /* STORE PAGE ################################################### */ #store-form { color: #737373; } #store-form h1, #store-form h2, #store-form h3, #store-form h4, #store-form h5, #store-form h6 { color: black; } #store-form .panel-clipview { display: block; overflow: hidden; width: 100%; } #store-form .panel-documentview { width: 150%; height: 100%; display: flex; /* Align all children in a row */ transition: 500ms ease-in-out; } #store-form .panel-documentview.payment { transform: translateX(-33%); } #store-form .panel-documentview div.panel { flex: 1; /* Evenly divide width between children */ margin: 0 15px 0 5px; /* For the store contact input we set 5px so we don't cut off the inputs focus outline */ line-height: 1.3em; } #store-form.special-store .panel-documentview { width: 100%; } /* form basics */ #store-form fieldset input, #store-form fieldset select { font-size:14px; width:318px; color: black; } #store-form legend, #store-form h3 { font-size:14px; color:#555555; margin:0; padding:0; } #store-form legend span, #store-form h3 span { font-size:12px;font-weight:normal; color:#a0a3a7; } /* explanatory text */ #store-form input.error, #store-form select.error { background:url('/media/images20/InputWarning.svg') no-repeat; background-position: -webkit-calc(100% - 4px) center; } #store-form { margin:0 auto; width:710px; background:white; padding:35px 45px; border-radius:12.5px; } #store-form.special-store { width: 350px; } #store-form a { color:#0559b0; border-color:#97b4da; } #store-form p { margin-block-start: 1em; margin-block-end: 1em; } #store-form fieldset { border:none; margin:0 0 10px 0; padding:0; } #store-form input[type="text"], #store-form input[type="email"], #store-form input[type="number"], #store-form select { margin: 6px 2px 6px 0; padding: 5px; background-color:#fff; border:1px solid #ebebeb; box-shadow: 0 0.5px 0.5px rgba(0,0,0,.18); } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } #store-form select { -webkit-appearance:none; border-radius: 0; background:url('/media/images20/ChevronDown.svg') no-repeat; background-position: 98% center; background-position: -webkit-calc(100% - 5px) center; } /* product amount selector */ #store-form #product { border:2px solid var(--blue-color); background:var(--blue-color-fill); height:76px; position:relative; margin:40px 0; border-radius:12px; color: var(--darker-text-color); } #store-form .p_icon { left:4px; top:6px; position:absolute;} #store-form .p_name { font-size:16px; left:70px; top:27px; position:absolute;} #store-form .p_pricing { width:180px; top:22px; right:236px; position:absolute; text-align:right; line-height: 18px; } #store-form .p_amount { height:76px; right:136px; position:absolute; border-right:1px solid var(--blue-color) } #store-form .p_license { color: var(--darker-text-color); } #store-form .p_discount { font-size:11px; color:var(--tint-color); } #store-form .p_pricing .disabled { color:var(--tint-color-alpha); } #store-form .stepper_wrap { width: 62px; position: relative; margin: 22px 20px 22px 12px; } #store-form #product_quantity { font-size:20px; text-align:center; height:33px; width:42px; margin: 0; padding: 0; position:absolute; font-weight:bold; box-shadow: 0 0 0 transparent; border:1px solid var(--stepper-border); color: black; font-family: ui-rounded, system-ui, sans-serif; -moz-appearance:textfield; } #store-form #product_quantity:read-only { border: 0; box-shadow:0px -1px 0px transparent; border-radius: 6px; } #store-form #product_quantity:focus { outline: none; } #store-form .stepper { border: 1px solid var(--stepper-border); position:absolute; right: -1px; top: 0; background-color: rgba(255,255,255,.8); overflow: hidden; } #store-form .stepper .step { width:18px; height:16px; cursor:pointer; } #store-form #product_up { background:url('/media/images20/ChevronUp.svg') center no-repeat; } #store-form #product_up:hover, #product_down:hover { background-color: rgba(0,0,0,.1); } #store-form #product_up:active, #product_down:active { background-color: rgba(0,0,0,.3); } #store-form #product_down { border-top: 1px solid var(--stepper-border); background:url('/media/images20/ChevronDown.svg') center no-repeat; } #store-form .p_totals { width:130px; top:22px; right:0px; position:absolute; color:var(--darker-text-color); font-family: ui-rounded system-ui, sans-serif; text-align:center; line-height:18px; } #store-form .p_total { font-weight:bold; font-size:17px; } #store-form .p_ex { color:var(--tint-color-alpha); text-align:center; font-size:10px; } #store-form #contact { padding-left: 4px; } /* special field sizes */ #store-form #firstName { width:109px; } #store-form #middleName { width:60px; } #store-form #lastName { width:112px; } #store-form #country { width: 240px; } #store-form #zipcode { width: 70px; } /* bottom half */ #store-form .panel h2 {border-bottom:1px solid #dfe0e2; margin-bottom:20px; } #store-form #payment h2 { margin-bottom: unset; } #store-form #deliverables ul { margin:20px 0 0 0.5em; padding: 0; font-size:13px; line-height:18px; list-style: none; } #store-form #deliverables li { margin:0 0 0 1em; padding: 0.5em; color: #555555; text-indent: -2em; } #store-form #deliverables li.license::before { font-size: 15px; content: "๐Ÿ”‘ "; } #store-form #deliverables li.receipt::before { font-size: 15px; content: "๐Ÿงพ "; } #store-form #deliverables li.support::before { font-size: 15px; content: "๐Ÿ“จ "; } #store-form #totals { margin-top: 20px; } #store-form #totals table { text-align:right; font-size:13px; width:100%; } #store-form thead {color:var(--tint-color); font-weight:bold; font-size:16px; } #store-form thead td { padding:0 20px 0px 0; border-bottom:1px solid #ccc; } #store-form thead span { display:block; font-weight:normal; font-size:11px; color:#777; } #store-form tbody td { padding:10px 0px 10px; } #store-form tbody tr:last-child td { border:none; padding:0px 0 35px; } /* remove double line above totals footer */ #store-form tfoot { color:#000; font-weight:bold; font-size:18px; } #store-form tfoot td { padding:15px 0px 0 0; border-top:4px double #d4d5d8; } #store-form tfoot tr td span {/*float:left;*/} #store-form tfoot td.support_total { font-size:14px; } #store-form .amount { font-family: ui-rounded, system-ui, sans-serif; font-variant-numeric: tabular-nums; } /* BOTTOM BUTTONS */ #store-form #process { margin: 40px auto 20px auto; width: 80%; height: 44px; } #store-form #process .next { background-image:url("/media/images20/Button/Next.svg"); background-size: 100%; } #store-form #process.progress .next { background: url('/media/images20/ProgressSpinner.svg') center no-repeat; background-size: 100%; filter: invert(1.0); animation: spinner 0.75s steps(1) infinite; } @keyframes spinner { 0% { transform:rotate(0deg) } 12.5% { transform: rotate(45deg) } 25% { transform: rotate(90deg) } 37.5% { transform: rotate(135deg) } 50% { transform: rotate(180deg) } 62.5% { transform: rotate(225deg) } 75% { transform: rotate(270deg) } 87.5% { transform: rotate(315deg) } 100% { transform: rotate(360deg) } } #store-form #reset { height:auto; background:none; color:#0559b0; display:block; text-align:center; margin:10px auto 0 auto; color:#0559b0; border-bottom:1px solid #C4D7EB; padding:0 0 1px 0; border-left:none; border-right:none; border-top:none; } #store-form #reset:hover { border-bottom:1px solid #0559b0; } /* paddle content */ #store-form iframe { overflow: visible; } #store-form .checkout-container { padding: 4px; } /* STORE BOTTOM INFO */ #store-bottom-info {margin:0 auto; width:800px; padding:35px 0px 0 0 ; height:400px;} #store-bottom-info a {color:#979899; border-bottom:1px solid #343536;} #store-bottom-info a:hover {color:white; border-color:#646566;} #store-edu_volume {padding:20px 0 0 0; color:#646566;} #store-edu_volume .left {float:left; width:370px; } #store-edu_volume .right {float:right; width:370px; } #store-edu_volume p {margin:0 0 30px 0;} #store-edu_volume h1 {color:white;} /* VS1 to VS2 */ #vs1-to-vs2 { width:710px; margin: 0 auto;} #vs1-to-vs2 h1, #vs1-to-vs2 h2 { text-align: center; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: normal; shadow: rgba(0,0,0,.8) 0 2px 10px; } #vs1-to-vs2 h1 { font-size: 56pt; font-weight: 500; background-image: linear-gradient( #ffffff, #d9e3d6 ); } #vs1-to-vs2 h2 { font-size: 21pt; font-weight: 600; background-image: linear-gradient( var(--h2-top), var(--h2-bottom) ); padding: 0 0 20px 0; margin-top: -20px; } #vs1-to-vs2 h2 span { text-transform: none; font-size: 15pt; font-style: italic; } #vs1-to-vs2 .info {padding:20px 0 30px 0; } #vs1-to-vs2 p {color:white; margin-bottom:20px;} #vs1-to-vs2 p.note {font-size:11px; line-height:18px; color:#444; margin-top:20px; } #vs1-to-vs2 #apple_title {background-image:url("/media/images11/sprite-thankyou.png"); background-repeat:no-repeat; height:100px; background-position:0 -154px;} #vs1-to-vs2 button { display: flex; align-items: center; width: unset; margin: 0 10px; padding: 0 10px; } #vs1-to-vs2 button:disabled { background: var(--tint-color-alpha); } #vs1-to-vs2 button .smallicon { height:16px; width:16px; margin:0 2px; } #vs1-to-vs2 button .next { background-image:url("/media/images20/Button/Next.svg"); background-size: 100%; } #vs1-to-vs2 button.progress .next { background: url('/media/images20/ProgressSpinner.svg') center no-repeat; background-size: 100%; filter: invert(1.0); animation: spinner 0.75s steps(1) infinite; } #vs1-to-vs2 button .title { color: #FFF; text-shadow:0px 0.5px 0.5px rgba(0,0,0,.2); font-size: 16px; white-space: nowrap; } #vs1-to-vs2 input { margin:1px 0 0 0; width:250px; padding:5px 0 6px 5px; background-color:#f8f8f9; border:1px solid #dedfe0; color: black; border-radius:4px; box-shadow:0px -1px 0px #adb1b7; } #upgrade-form-fields .message, #store-form.special-store #malformed { background-color: #FEFAE9; border: 2px solid #DEBC7C; border-radius: 7px; padding: 10px; } #upgrade-form-fields .message a { color:#0559b0; border-color:#97b4da; } #upgrade-form-fields .message { color: #000; } #upgrade-load-form { display: flex; flex-direction: column; margin: 60px 0; } #upgrade-load-form h3 { margin: 20px 0; font-weight:bold; } #upgrade-load-form #progress { width: 64px; height: 64px; background: url('/media/images20/ProgressSpinner.svg') center no-repeat; background-size: 100%; filter: invert(1.0); animation: spinner 0.75s steps(1) infinite;