/* GENERAL */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ body {font:14px/26px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color:#111;} * {margin:0; padding:0;} img {border:none;} a:active {outline:none; -moz-outline-style:none;} a:focus {outline:none; -moz-outline-style:none;} .clear {clear:both;} /* TOP */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #top {min-width:960px; height:740px; background:url("/static/img/kal-pattern.gif") repeat; position: relative; -webkit-user-select: none; overflow: hidden;} #top .content {width:940px; margin:0 auto; padding:0 10px; position:relative;} #top .content .content_float {float:left;width:940px;position:relative;padding-bottom:150px;} #top .spikes {height:741px; background:url("/static/img/spikes-top.png") bottom left repeat-x;} #top .gradient-loading {height:720px; background:#0C0719;} #top .gradient-disabled {height:720px; background:#0C0719;} #top .gradient { height:740px; background-image:-webkit-gradient(radial, center 40%, 700, center 40%, 0, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0))); background-image:-moz-radial-gradient(rgba(0, 0, 0, 0), #111);} #top .tagline {width:567px; height:228px; background:url("/static/img/header-tagline.png") no-repeat; margin-top:60px; display:block; position:relative; margin-left: -14px;} #top .tagline h1 {display:none;} #top .nav {position:absolute; top:16px; right:10px;} #top .nav a {line-height:24px; font-size:16px; color:#9583db; margin-right:20px; font-weight:bold; text-decoration:none; border-bottom:1px solid #534283; position:relative; float:right;} #top .nav a:hover {border-bottom:1px solid #8e7bc5; color:#fff;} #top .nav a.bpxl {border:none; display:inline-block; float:right; margin-top:3px; width:30px; height:22px; background:url("/static/img/sprite.png") -860px -10px no-repeat;float:right;} #top .nav a.bpxl:hover {background-position: -860px -34px;} #top .h1 {font-size:20px; line-height:26px; color:#9f93ce; font-weight:normal; margin:18px 0 32px 3px; width:480px; text-shadow:0px 2px 2px #000;float:left;line-height:30px;} #top .h1 strong {color:#e1dcf3;} #top .top-buttons {float:left;clear:both;} #sitenav {position:absolute;z-index:100;bottom:0px;left:0;} #sitenav h2 {font-size:20px; color:#e1dcf3; padding:0 0 30px 3px; text-shadow:0px 1px 2px #000;} #sitenav .tile {float:left; width:215px; margin-right:20px;position:relative;} #sitenav .tile .wrap {margin-left:76px; margin-top:-5px;} #sitenav .tile span {color:#fff; font-size:16px; font-weight:bold; text-decoration:none; border-bottom:1px solid #534283; padding-bottom:3px; text-shadow:0px 1px 2px #000;} #sitenav .tile span:hover {border-bottom:1px solid #fff; cursor:pointer} #sitenav .tile p {color:#8f84bc; font-size:16px; line-height:20px; text-shadow:0px 1px 2px #000; margin-top:1px;} #sitenav .screenshot {float:left; position:absolute; cursor:pointer;} #sitenav .screenshot.last {cursor:default;} /* update badge + message */ #top .nav #update_message {display:none; width:184px; height:38px; background:url("/static/img/sprite.png") -760px -341px no-repeat; position:absolute; top:22px; left:5px; z-index:999; padding: 20px 10px 7px 50px; color:#231180; line-height:16px; font-size:12px;} #top .nav div#update_message a {color:#231180; font-weight:bold; border-bottom:1px solid #a797d8; text-decoration:none; font-size:12px; display:inline; line-height:16px; margin:none; float:none;} /* SCREENSHOT ICONS */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #sitenav .tile .roundbutton {position:absolute;left:-2px;top:-1px;} #sitenav .top-screenshot-zoom {width:16px;height:16px;background:url("/static/img/sprite.png") -900px -10px no-repeat;} #sitenav .top-screenshot-textscope {width:64px;height:64px;background:url("/static/img/sprite.png") -760px -410px no-repeat;position:absolute;top:0;left:0;} #sitenav .top-screenshot-imagescope {width:64px;height:64px;background:url("/static/img/sprite.png") -970px -410px no-repeat;position:absolute;top:0;left:0;} #sitenav .top-screenshot-folderscope {width:64px;height:64px;background:url("/static/img/sprite.png") -830px -410px no-repeat;position:absolute;top:0;left:0;} #sitenav .top-screenshot-workflow {width:64px;height:64px;background:url("/static/img/sprite.png") -900px -410px no-repeat;position:absolute;top:0;left:0;} #sitenav .top-screenshot-details {width:64px;height:64px;background:url("/static/img/sprite.png") -970px -410px no-repeat;position:absolute;top:0;left:0;} /* TEXT SCOPE */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #text {background:url("/static/img/text-pattern-band.png") repeat-x 0 95px;} #text .wrap {background:url("/static/img/text-pattern.gif") repeat; width:960px; margin:70px auto 24px auto; height:1060px;} #text .tagline {width:1065px; height:198px;background:url("/static/img/sprite.png") -10px -780px no-repeat;margin-top:-13px; margin-left:-90px; margin-bottom:49px;display:inline-block;} #text .tagline h1 {display:none;} #text .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/sprite.png") -360px -190px no-repeat; margin-top:32px; margin-left:890px;} #text .back-top:hover {background-position: -360px -207px; cursor:pointer;} #text .container {margin:0 auto; padding:0 10px;} #text .container .buttonwrap {float:right; margin-top:8px;} #text .container .buttonwrap .button {-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);} #text h1 {float:left; font-size:20px; line-height:25px; color:#111; font-weight:normal; margin-left:18px; width:480px;} #text .green-text {color:#2fb32a; font-weight:bold;} #text .red-text {color:#e82d27; font-weight:bold;} #text .purple-text {color:#6b53e0; font-weight:bold;} #text .keyvisual {margin-top:0px; margin-left:0px; margin-bottom:0px;} #text .intro-list {float:left; margin-left:18px; width:410px;} #text .intro-list h2 {font-size:20px; line-height:26px; font-weight:normal;} #text .intro-list ul {margin-top:26px; color:#757575;} #text .intro-list ul span {color:#4d872a; background-color:#d3f3c0; padding:0 2px;} #text .intro-list ul strong {color:#111;} #text .intro-list ul li {list-style-image: url("/static/img/icon-checkmark.png");} #text .intro-list .text-circle {width:118px;height:35px;background:url("/static/img/sprite.png") -920px -10px no-repeat;display:inline;position:absolute;margin-left:-100px; margin-top:-4px;} #text .text-block {float:right; width:220px; margin-left:25px;} #text .text-block h3 {font-size:15px; text-transform:uppercase; margin-top:1px;} #text .text-block p {margin-top:1px; color:#757575;} #text .text-block p span {color:#6d5dc5; background-color:#e3deff; padding:0 2px;} #text .text-block img {float:right; margin-top:9px; padding-left:21px;} #text #readable-icon {margin-right:20px; margin-top:11px; margin-left:10px; background:url("/static/img/sprite.png") -990px -480px no-repeat; width:61px; height:65px; float:right;} #text #versatile-icon {margin-right:10px; margin-top:17px; margin-left:10px; background:url("/static/img/sprite.png") -780px -480px no-repeat; width:69px; height:57px; float:right;} #text .clearboth { clear:both; } #text #whitespace_container { /* border:1px solid #ff0000; */ padding-top:0px; margin-top: 53px; /**/ margin-bottom: 49px; padding-bottom:5px; clear:both; background: white; width: 100%; text-align: center; font:18px "Helvetica Bold", Arial, Helvetica, Geneva, sans-serif; color:#818181; } #text #whitespace_container table.onoffswitch_container{ margin-right: auto; margin-left:auto; margin-bottom: 10px; } #text #whitespace_container table.onoffswitch_container td{ /* border: 1px solid green; */ white-space:nowrap; } #text #whitespace_container table.onoffswitch_container td.onoffswitch_container{ /* border: 1px solid green; */ padding-top:3px;; } /* SCREENSHOT */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #whitespace_screenshot{ position:relative; height:313px; width:960px; margin:0 auto; } #whitespace_screenshot div { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #whitespace_screenshot div.transparent { opacity:0; } #whitespace_toggle_img_off {width:960px; height:313px; background:url("/static/img/whitespace-on-screenshot.png") top left no-repeat; background-size: 960px 313px;} #whitespace_toggle_img_on {width:960px; height:313px; background:url("/static/img/whitespace-off-screenshot.png") top left no-repeat; background-size: 960px 313px;} /* ON/OFF SWITCH */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ .onoffswitch { position: relative; width: 59px; height: 32px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; } #onoffswitch-inner-bottom { position:absolute; background: url("/static/img/whitespace-toggle-on.png") top left no-repeat; background-size: 59px 32px; left: 0px; top: 0px; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; height: 32px; width: 59px; padding: 0; } #onoffswitch-inner-top{ position:absolute; background: url("/static/img/whitespace-toggle-off.png") top left no-repeat; background-size: 59px 32px; left: 0px; top: 0px; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; height: 32px; width: 59px; padding: 0; } #onoffswitch-inner-bottom.transparent{ opacity:0; } #onoffswitch-inner-top.transparent{ opacity:0; } .onoffswitch-switch { width: 30px; height: 32px; background: url("/static/img/whitespace-toggle-button.png") top left no-repeat; position: absolute; top: 0; bottom: 0; right: 1px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } #knob-preload { background: url("/static/img/whitespace-toggle-button-pressed.png") no-repeat -9999px -9999px; } #knob.pressed { background: url("/static/img/whitespace-toggle-button-pressed.png") top left no-repeat; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 1; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 28px; } /* IMAGE SCOPE */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #image {height:960px; background:url("/static/img/image-pattern.jpg") top left repeat;} #image .spikes {background:url("/static/img/spikes-bottom.png") repeat-x;} #image .content {width:940px; margin:0 auto; padding:0 10px;} #image .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/sprite.png") -320px -190px no-repeat;margin-top:30px; margin-left:890px;} #image .back-top:hover {background-position: -320px -207px; cursor:pointer;} #image .tagline {width:520px; height:174px;background:url("/static/img/sprite.png") -240px -10px no-repeat;margin:60px 0 50px 0;margin:40px auto;} #image .tagline h1 {display:none;} #image .band-wrap {min-width:960px; margin-bottom:60px;} #image .band-wrap table {width:100%; border:0; padding:0;height:83px;} #image .band {background:url("/static/img/image-band-pattern.png") repeat-x;height:83px; background-position:left -2px;} #image .band-left {width:218px;height:83px;background:url("/static/img/sprite.png") -802px -580px no-repeat;} #image .band-left span {display:none;} #image .band-text {width:460px;height:83px;} #image .band-right {width:226px;height:83px;background:url("/static/img/sprite.png") -800px -670px no-repeat;} #image .band-right span {display:none;} #image h1 {font-size:20px; line-height:25px; color:#111; font-weight:normal; text-align:center;} #image .illustration {float:left;width:224px;height:154px;margin-right:14px;} #image #one {background:url("/static/img/sprite.png") -10px -80px no-repeat;} #image #two {background:url("/static/img/sprite.png") -10px -240px no-repeat;} #image #three {background:url("/static/img/sprite.png") -10px -400px no-repeat;height:214px;margin-top:-30px;} #image #four {background:url("/static/img/sprite.png") -10px -620px no-repeat;margin-right:0px;} #image .zoom {float:left; margin-top:-20px; width:940px; text-align:center; margin-bottom:40px;} #image .zoom .one, .two, .three {float:left; width:224px; margin-right:14px;} #image .zoom span {text-decoration:none; color:#a4947b; font-size:15px; display:inline-block; background:url("/static/img/icon-image-zoom.png") left 5px no-repeat; padding-left:25px;} #image .zoom span:hover {color:#7b6e59; background-position: 0 -27px; cursor:pointer;} #image .intro-list {float:left; margin-left:18px; width:410px;} #image .intro-list h2 {font-size:20px; line-height:26px; font-weight:normal;} #image .intro-list ul {margin-top:21px; color:#69655e; float:left;} #image .intro-list ul span {color:#f5efe7; background-color:#a79983; padding:0 2px;} #image .intro-list ul strong {color:#111;} #image .intro-list ul li {list-style-image: url("/static/img/icon-checkmark-white.png");} #image .intro-list ul li img {} #image .intro-list .image-circle {width:118px;height:35px;background:url("/static/img/sprite.png") -920px -50px no-repeat;display:inline;position:absolute;margin-left:-100px; margin-top:-4px;} #image .buttonwrap {margin-top:26px; margin-bottom:20px; width:410px;} #image .buttonwrap .button {-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);} #image .text-block {float:right; width:220px; margin-left:25px;} #image .text-block h3 {font-size:15px; text-transform:uppercase; margin-top:1px;} #image .text-block p {margin-top:1px; color:#69655e;} #image .text-block p span {color:#f5efe7; background-color:#a79983; padding:0 2px;} #image .text-block img {float:right; margin-top:3px; margin-right:3px; padding-left:10px;} #image #speed-icon {margin-top:10px; width:58px; height:67px; background:url("/static/img/sprite.png") -820px -140px no-repeat; float:right;} #image #bullseye-icon {margin-left:15px; width:64px; height:74px; background:url("/static/img/sprite.png") -710px -480px no-repeat; float:right;} /* FOLDER SCOPE */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #folder {height:1040px; background:url("/static/img/folder-pattern.png") top left repeat-x; } /*#folder .wrap {width:960px; margin:70px auto 70px auto; height:1px; }*/ #folder .divider {background:url("/static/img/folder-dividerpattern.png") repeat-x; height:60px;} #folder .divider .tab {background:url("/static/img/folder-dividertab.png") no-repeat; height:44px; width:256px; position: relative; top:16px; left: 10%;} #folder .content {width:940px; margin:0 auto; padding:0 10px;} #folder .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/sprite.png") -240px -190px no-repeat;margin-top:-50px; margin-left:20px;} #folder .back-top:hover {background-position: -240px -207px; cursor:pointer;} #folder .tagline {width:780px; height:208px; background:url("/static/img/folder-title.png") no-repeat; margin-left: auto; margin-right: auto;} #folder .tagline h1 {display:none;} #folder .band-wrap {min-width:960px; margin-bottom:30px; margin-top: 34px;} #folder .band-wrap table {width:100%; border:0; padding:0;} #folder .band {background:url("/static/img/folder-band-pattern.png") repeat-x;height:83px; background-position:left 94px;} #folder .band-text {width:660px;height:208px;} #folder .text-container {width:575px;height:83px; margin: 0px auto 18px auto;} #folder .blue-text {color:hsla(226,77%,54%,1); font-weight:bold;} #folder .purple-text {color:#6b53e0; font-weight:bold;} #folder h1 {font-size:20px; line-height:25px; color:#111; font-weight:normal; text-align:center;} #folder .illustration {float:left;width:380px;height:290px;margin-right:10px;} #folder #one {background:url("/static/img/folder-diagram-left-side.png") no-repeat; position: absolute; left: 0px;} #folder #two {background:url("/static/img/folder-diagram-right-side.png") no-repeat; position: absolute; right: 0px;} #folder #one .arrowshaft{background: url("/static/img/folder-diagram-left-arrow-shaft.png"); height:290px; position: absolute; right: -20px;} #folder #one .arrowhead{background: url("/static/img/folder-diagram-left-arrow-head.png"); height:290px; width: 40px; position: absolute; right: -60px;} #folder #two .arrowshaft{background: url("/static/img/folder-diagram-right-arrow-shaft.png"); height:290px; position: absolute; left: -20px;} #folder #two .arrowhead{background: url("/static/img/folder-diagram-right-arrow-head.png"); height:290px; width: 40px; position: absolute; left: -60px;} #folder .zoom {float:left; margin-top:-20px; width:940px; text-align:center; margin-bottom:40px;} #folder .zoom .one, .two, .three {float:left; width:224px; margin-right:14px;} #folder .zoom span {text-decoration:none; color:#a4947b; font-size:15px; display:inline-block; background:url("/static/img/icon-image-zoom.png") left 5px no-repeat; padding-left:25px;} #folder .zoom span:hover {color:#7b6e59; background-position: 0 -27px; cursor:pointer;} #folder .intro-list {float:right; margin-left:18px; width:410px;} #folder .intro-list h2 {font-size:20px; line-height:26px; font-weight:normal; width: 412px;} #folder .intro-list ul {margin-top:20px; color:hsla(226,8%,38%,1); float:left;} #folder .intro-list ul span {color:hsla(226,31%,95%,1); background-color:hsla(226,68%,65%,1); padding:0 2px;} #folder .intro-list ul strong {color:#111;} #folder .intro-list ul li {list-style-image: url("/static/img/icon-checkmark-white.png");} #folder .intro-list ul li img {} #folder .intro-list .image-circle {width:118px;height:35px;background:url("/static/img/sprite.png") -920px -50px no-repeat;display:inline;position:absolute;margin-left:-100px; margin-top:-4px;} #folder .buttonwrap {margin-top:26px; margin-bottom:20px; width:410px;} #folder .buttonwrap .button {-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);} #folder .text-block {float:left; width:220px; margin-left:25px;} #folder .text-block h3 {font-size:15px; text-transform:uppercase; margin-top:1px;} #folder .text-block p {margin-top:1px; color:hsla(226,8%,38%,1);} #folder .text-block p span {color:hsla(226,31%,95%,1); background-color:hsla(226,68%,65%,1); padding:0 2px;} #folder .text-block img {float:right; margin-top:3px; margin-right:3px; padding-left:10px;} #folder #speed-icon {margin-top:10px; width:58px; height:67px; background:url("/static/img/sprite.png") -820px -140px no-repeat; float:right;} #folder #bullseye-icon {margin-left:15px; width:64px; height:74px; background:url("/static/img/sprite.png") -710px -480px no-repeat; float:right;} /* WORKFLOW */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #workflow {height:830px; background:url("/static/img/workflow-pattern.gif") top left repeat; border-top:1px solid #e7decf;} #workflow .top-gradient {height:20px; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image:-moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));} #workflow .content {width:940px; margin:0 auto 70px auto; padding:0 10px; position:relative;} #workflow .tagline {width:463px; height:188px;background:url("/static/img/sprite.png") -240px -350px no-repeat; margin-top:40px;} #workflow .tagline h1 {display:none;} #workflow .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/sprite.png") -280px -190px no-repeat; margin-top:30px; margin-left:890px;} #workflow .back-top:hover {background-position: -280px -207px; cursor:pointer;} #workflow h1 {font-size:20px; line-height:25px; color:#939bbb; font-weight:normal; width:440px; text-shadow:0px 2px 2px #000; position:absolute; top:75px; right:0;} #workflow h1 span {font-weight:bold; color:#fff;} #workflow .content .button {position:absolute; top:145px; right:240px;} #workflow .arrows {min-width:960px;} #workflow .arrows table {margin-top:40px; width:100%; border:0; padding:0;} #workflow .green-tail {background:url("/static/img/workflow-green-band.png") top left repeat-x;} #workflow .green-arrow {width:410px; height:108px;background:url("/static/img/sprite.png") -240px -230px no-repeat;padding-right:5px;} #workflow .blue-arrow {width:386px; height:108px;background:url("/static/img/sprite.png") -660px -230px no-repeat;} #workflow .blue-tail {background:url("/static/img/workflow-blue-band.png") top left repeat-x;} #workflow .arrow-labels {min-width:960px; margin-top:-45px; color:#fff; font-weight:bold; font-size:15px; text-shadow:0px 2px 2px #000;} #workflow .arrow-labels table {width:100%; margin-bottom:60px;} #workflow .label-1 {width:480px; text-align:center;} #workflow .label-2 {width:480px; text-align:center;} #workflow .label-2 span {font-weight:normal; color:#6b7188;} #workflow .intro-list {float:left; margin-left:18px; width:410px;} #workflow .intro-list h2 {font-size:20px; line-height:26px; font-weight:normal; color:#BEC4D9;} #workflow .intro-list h2 strong {color:#fff;} #workflow .intro-list ul {margin-top:27px; color:#878fad; float:left;} #workflow .intro-list ul span {color:#cfd2e5; background-color:#373a4f; padding:0 2px; text-shadow:0px 1px 0px #111;} #workflow .intro-list ul strong {color:#fff;} #workflow .intro-list ul li {list-style-image: url("/static/img/icon-checkmark-white.png");} #workflow .intro-list ul li img {} #workflow .intro-list .work-circle {width:160px;height:35px;background:url("/static/img/sprite.png") -920px -92px no-repeat;display:inline;position:absolute;margin-left:-100px; margin-top:-4px;} #workflow .text-block {float:right; width:220px; margin-left:25px;} #workflow .text-block h3 {font-size:15px; text-transform:uppercase; margin-top:1px;} #workflow .text-block p {margin-top:1px; color:#7b8197;} #workflow .text-block p span {color:#cfd2e5; background-color:#373a4f; padding:0 2px; text-shadow:0px 1px 0px #111;} #workflow .text-block img {float:right; margin-top:3px; margin-right:3px; padding-left:10px;} #workflow .text-block a {color:#cfd2e5; text-shadow:0px 1px 0px #111; text-decoration:none; border-bottom:1px solid #63697d; padding-bottom:1px;} #workflow .text-block a:hover {color:#fff; border-bottom:1px solid #cfd2e5;} #workflow #vcs-icon {margin-top:-20px; margin-right:16px; padding-left:5px; background:url("/static/img/sprite.png") -900px -140px no-repeat; width:37px; height:82px; float:right;} #workflow #files-icon {margin-right:12px; background:url("/static/img/sprite.png") -850px -480px no-repeat; width:65px; height:67px; float:right;} #workflow #ksdiff {margin:25px 0 0 475px; width:465px; color:#7B8197;} #workflow #ksdiff a {color:#cfd2e5; text-shadow:0px 1px 0px #111; text-decoration:none; border-bottom:1px solid #63697d; padding-bottom:1px;} #workflow #ksdiff a:hover {color:#fff; border-bottom:1px solid #cfd2e5;} /* DETAILS */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #details {height:920px; background:url("/static/img/details-pattern.jpg") top left repeat; border-top:1px solid #fff;} #details .content {width:940px; margin:0 auto; padding:0 10px; position:relative;} #details .tagline {width:169px; height:59px;background:url("/static/img/sprite.png") -10px -10px no-repeat;margin:60px 0 50px 0;} #details .tagline h1 {display:none;} #details .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/sprite.png") -240px -190px no-repeat;margin-top:20px; margin-left:890px;} #details .back-top:hover {background-position: -240px -207px; cursor:pointer;} #details .block, #details table td {width:215px; float:left; margin-right:20px;} #details .block.last {margin-right:0;} #details .block .wrap {width:220px; float:left; margin-bottom:20px;} #details .block .icon {float:left;} #details .block #icon_general {width:32px; height:31px;background:url("/static/img/sprite.png") -400px -190px no-repeat;} #details .block #icon_text {width:32px; height:31px;background:url("/static/img/sprite.png") -440px -190px no-repeat;} #details .block #icon_image {width:32px; height:31px;background:url("/static/img/sprite.png") -480px -190px no-repeat;} #details .block #icon_folder {width:32px; height:31px;background:url("/static/img/sprite.png") -560px -190px no-repeat;} #details .block #integration {width:32px; height:31px;background:url("/static/img/sprite.png") -520px -190px no-repeat;} #details .block h3 {color:#111; text-shadow:0px 1px 0px #fff; float:left; margin:2px 0 0 10px; text-transform:uppercase;} #details ul {float:left;} #details .block ul {font-size:14px; color:#505258; line-height:19px; list-style-type:none; padding:0; margin:0;} #details .block ul li {font: 14px;"Helvetica Regular",Helvetica,Arial,Geneva,sans-serif; margin:0; padding:0; margin-bottom:10px; background:url("/static/img/details-bullet.png") no-repeat; background-position: 0 7px; padding-left:10px;} #details .block ul li span {font-size:12px; color:#898c98;} #details .block h4 {font-size:14px; margin-bottom:0px; color:#505258;} #details .block .requirements ul {line-height:16px;} #details .block .requirements li {color:#898c98; font-size:12px; margin-bottom:5px;} #details .spin {text-align:center;} #details .spin .button-placeholder {width:250px; margin:0 auto;} #details .spin h3 {margin:24px 0 6px 0; color:#111; text-shadow:0px 1px 0px #fff;} #details .spin .button {margin:0 auto; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);} #details .block.top {width:940px; margin-right:0px; margin-bottom: 30px;} #details .block.top ul li {margin-right:15px; padding:0; margin-bottom:10px; width: 220px; background:url("/static/img/details-bullet.png") no-repeat; background-position: 0 7px; padding-left:10px; display: inline; float: right;} /* FOOTER */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #footer {margin-top:68px; text-align:center;} #footer small {font-size:12px; line-height:18px; color:#898c98;} #footer small a {color:#505258; text-decoration:none; border-bottom:1px solid #b0b3bf; padding-bottom:1px;} #footer small a:hover {color:#111; border-bottom:1px solid #505258;} /* LOGO ANIMATION */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– #logo_mask {margin:0; padding:0; width:460px; height:460px; -webkit-mask-box-image:url("/static/img/ks_mask.png") 460 stretch; position:absolute;} */ #top #appicon_static {position:absolute; left:500px; top:120px; background:url('/static/img/ks_fullcolor.png'); height:460px; width:460px;} #top #version_num {position:absolute; left:555px; top:84px; background:url('/static/img/badge-2.1.png'); height:83px; width:83px; z-index:1;} #top #appicon_animated {position:absolute; left:500px; top:120px; z-index:1;} #logo_mask {margin:0; padding:0; width:460px; height:460px; -webkit-mask-image:url("/static/img/ks_mask.png"); position:absolute;} #logo_shading {position:absolute; width: 460px; height: 460px; background: url("/static/img/ks_shading.png");} #logo_color{height: 460px; width: 460px; background:url("/static/img/ks_color.png");} /* EXTERNAL PAGES – 404, 500, SUPPORT */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #external-pattern {height:100%; width:100%; position:absolute; z-index:-100; background:url("/static/img/top-pattern.gif");} #external-gradient {height:100%; width:100%; position:absolute; z-index:-100; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(top, #111, rgba(0, 0, 0, 0));} #external-wrap {padding:0 10px; margin:0 auto; width:940px; background-color:red; height:100px;} /* SPECIALS */ /* ––––––––––––––––––––––––––––––––––––––––––––––––––– */ #beta{ height: 58px; background:url("/static/img/betabanner-bg.png") center center; text-align: center; position: fixed; left: 0px; right: 0px; z-index: 1000; box-shadow: 0px 1px 5px #333; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #top {background:url("/static/img/kal-patternat2x.png") repeat; background-size: 60px 44px;} #top .spikes {background:url("/static/img/spikes-topat2x.png") bottom left repeat-x; background-size: 6px 12px;} #top .tagline {background:url("/static/img/header-taglineat2x.png") no-repeat; background-size: 567px 228px;} #top .nav a.bpxl {background:url("/static/img/spriteat2x.png") -860px -10px no-repeat; background-size: 1090px 990px;} #top .nav #update_message {background:url("/static/img/spriteat2x.png") -760px -341px no-repeat; background-size: 1090px 990px;} #top #version_num {background:url('/static/img/badge-2.12x.png'); height:83px; width:83px; z-index:1;} #onoffswitch-inner-bottom{ position:absolute; background: url("/static/img/whitespace-toggle-on2x.png") top left no-repeat; background-size: 59px 32px; left: 0px; top: 0px; height: 32px; width: 59px; padding: 0; } #onoffswitch-inner-top{ position:absolute; background: url("/static/img/whitespace-toggle-off2x.png") top left no-repeat; background-size: 59px 32px; left: 0px; top: 0px; height: 32px; width: 59px; padding: 0; } #knob { width: 30px; height: 32px; background: url("/static/img/whitespace-toggle-button2x.png") top left no-repeat; background-size: 30px 32px; position: absolute; top: 0; bottom: 0; } #knob.pressed { width: 30px; height: 32px; background: url("/static/img/whitespace-toggle-button-pressed2x.png") top left no-repeat; background-size: 30px 32px; position: absolute; top: 0; bottom: 0; } #sitenav .top-screenshot-zoom {width:16px;height:16px;background:url("/static/img/spriteat2x.png") -900px -10px no-repeat;background-size: 1090px 990px;} #sitenav .top-screenshot-textscope {width:64px;height:64px;background:url("/static/img/spriteat2x.png") -760px -410px no-repeat;background-size: 1090px 990px;} #sitenav .top-screenshot-imagescope {width:64px;height:64px;background:url("/static/img/spriteat2x.png") -970px -410px no-repeat;background-size: 1090px 990px;} #sitenav .top-screenshot-folderscope {width:64px;height:64px;background:url("/static/img/spriteat2x.png") -830px -410px no-repeat;background-size: 1090px 990px;} #sitenav .top-screenshot-workflow {width:64px;height:64px;background:url("/static/img/spriteat2x.png") -900px -410px no-repeat;background-size: 1090px 990px;} #sitenav .top-screenshot-details {width:64px;height:64px;background:url("/static/img/spriteat2x.png") -970px -410px no-repeat; background-size: 1090px 990px;} #text {background:url("/static/img/text-pattern-bandat2x.png") repeat-x 0 95px; background-size: 1px 70px;} #text .wrap {background:url("/static/img/text-patternat2x.png") repeat; background-size: 1px 26px;} #text .tagline {width:1065px; height:198px;background:url("/static/img/spriteat2x.png") -10px -780px no-repeat; background-size: 1090px 990px;} #text .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/spriteat2x.png") -360px -190px no-repeat;background-size: 1090px 990px;} #text .intro-list ul li {background:url("/static/img/icon-checkmarkat2x.png") left 7px no-repeat; background-size:14px 12px; padding-left: 18px; list-style: none; margin-left: -18px;} #text .intro-list .text-circle {width:118px;height:35px;background:url("/static/img/spriteat2x.png") -920px -10px no-repeat;background-size: 1090px 990px;} #text #readable-icon {margin-right:20px; margin-top:11px; margin-left:10px; background:url("/static/img/spriteat2x.png") -990px -480px no-repeat; background-size: 1090px 990px;} #text #versatile-icon {margin-right:10px; margin-top:17px; margin-left:10px; background:url("/static/img/spriteat2x.png") -780px -480px no-repeat; background-size: 1090px 990px;} #whitespace_toggle_img_off {width:960px; height:313px; background:url("/static/img/whitespace-on-screenshot2x.png") top left no-repeat; background-size: 960px 313px;} #whitespace_toggle_img_on {width:960px; height:313px; background:url("/static/img/whitespace-off-screenshot2x.png") top left no-repeat; background-size: 960px 313px;} #image {height:960px; background:url("/static/img/image-patternat2x.png") top left repeat; background-size: 207px 203px;} #image .spikes {background:url("/static/img/spikes-bottomat2x.png") -3px left repeat-x; background-size: 6px 10px;} #image .back-top {position:absolute; width:35px; height:15px; background:url("/static/img/spriteat2x.png") -320px -190px no-repeat;background-size: 1090px 990px;} #image .tagline {width:520px; height:174px;background:url("/static/img/spriteat2x.png") -240px -10px no-repeat;background-size: 1090px 990px;} #image .band {background:url("/static/img/image-band-patternat2x.png") repeat-x; background-size: 1px 84px; background-position: left -2px;} #image .band-left {width:218px;height:83px;background:url("/static/img/spriteat2x.png") -802px -580px no-repeat; background-size: 1090px 990px;} #image .band-right {width:226px;height:83px;background:url("/static/img/spriteat2x.png") -800px -670px no-repeat; background-size: 1090px 990px;} #image #one {background:url("/static/img/spriteat2x.png") -10px -80px no-repeat;background-size: 1090px 990px;} #image #two {background:url("/static/img/spriteat2x.png") -10px -240px no-repeat;background-size: 1090px 990px;} #image #three {background:url("/static/img/spriteat2x.png") -10px -400px no-repeat;background-size: 1090px 990px;} #image #four {background:url("/static/img/spriteat2x.png") -10px -620px no-repeat;background-size: 1090px 990px;} #image .zoom span {background:url("/static/img/icon-image-zoomat2x.png") left 5px no-repeat; background-size: 16px 48px;} #image .intro-list ul li {background:url("/static/img/icon-checkmark-whiteat2x.png") left 7px no-repeat; background-size:14px 12px; padding-left: 18px; list-style: none; margin-left: -18px;} #image .intro-list .image-circle {width:118px;height:35px;background:url("/static/img/spriteat2x.png") -920px -50px no-repeat;background-size: 1090px 990px;} #image #speed-icon {margin-top:10px; width:58px; height:67px; background:url("/static/img/spriteat2x.png") -820px -140px no-repeat; background-size: 1090px 990px;} #image #bullseye-icon {margin-left:15px; width:64px; height:74px; background:url("/static/img/spriteat2x.png") -710px -480px no-repeat; background-size: 1090px 990px;} #folder {background:url("/static/img/folder-patternat2x.png") top left repeat; background-size: 256px 1042px;} #folder .divider {background:url("/static/img/folder-dividerpatternat2x.png") repeat-x; background-size: 9px 60px;} #folder .divider .tab {background:url("/static/img/folder-dividertabat2x.png") no-repeat; background-size: 256px 44px; top: 15px;} #folder .back-top {background:url("/static/img/spriteat2x.png") -240px -190px no-repeat;background-size: 1090px 990px;} #folder .tagline {background:url("/static/img/folder-titleat2x.png") no-repeat; background-size: 780px 208px;} #folder .band {background:url("/static/img/folder-band-patternat2x.png") repeat-x;background-size: 1px 84px; background-position-y: 94px;} #folder #one {background:url("/static/img/folder-diagram-left-sideat2x.png") no-repeat; background-size:380px 290px;} #folder #two {background:url("/static/img/folder-diagram-right-sideat2x.png") no-repeat; background-size:380px 290px;} #folder #one .arrowshaft{background: url("/static/img/folder-diagram-left-arrow-shaftat2x.png"); background-size:64px 290px;} #folder #one .arrowhead{background: url("/static/img/folder-diagram-left-arrow-headat2x.png"); background-size:40px 290px;} #folder #two .arrowshaft{background: url("/static/img/folder-diagram-right-arrow-shaftat2x.png"); background-size:64px 290px;} #folder #two .arrowhead{background: url("/static/img/folder-diagram-right-arrow-headat2x.png"); background-size:40px 290px;} #folder .zoom span {background:url("/static/img/icon-image-zoomat2x.png") left 5px no-repeat; background-size: 16px 48px;} #folder .intro-list ul li {background:url("/static/img/icon-checkmark-whiteat2x.png") left 7px no-repeat; background-size:14px 12px; padding-left: 18px; list-style: none; margin-left: -18px;} #folder .intro-list .image-circle {width:118px;height:35px;background:url("/static/img/spriteat2x.png") -920px -50px no-repeat;background-size: 1090px 990px;} #folder #speed-icon {background:url("/static/img/spriteat2x.png") -820px -140px no-repeat;background-size: 1090px 990px;} #folder #bullseye-icon {background:url("/static/img/spriteat2x.png") -710px -480px no-repeat;background-size: 1090px 990px;} #workflow .tagline {width:463px; height:188px;background:url("/static/img/spriteat2x.png") -240px -350px no-repeat; background-size: 1090px 990px;} #workflow {background:url("/static/img/workflow-patternat2x.png") top left repeat; background-size: 14px 28px;} #workflow .back-top {background:url("/static/img/spriteat2x.png") -280px -190px no-repeat;background-size: 1090px 990px;} #workflow .green-tail {background:url("/static/img/workflow-green-bandat2x.png") top left repeat-x;background-size: 1px 93px;} #workflow .green-arrow {background:url("/static/img/spriteat2x.png") -240px -230px no-repeat;background-size: 1090px 990px;} #workflow .blue-arrow {background:url("/static/img/spriteat2x.png") -660px -230px no-repeat;background-size: 1090px 990px;} #workflow .blue-tail {background:url("/static/img/workflow-blue-bandat2x.png") top left repeat-x;background-size: 1px 93px;} #workflow .intro-list ul li {background:url("/static/img/icon-checkmark-whiteat2x.png") left 7px no-repeat; background-size:14px 12px; padding-left: 18px; list-style: none; margin-left: -18px;} #workflow .intro-list .work-circle {background:url("/static/img/spriteat2x.png") -920px -92px no-repeat;background-size: 1090px 990px;} #workflow #vcs-icon {background:url("/static/img/spriteat2x.png") -900px -140px no-repeat;background-size: 1090px 990px;} #workflow #files-icon {background:url("/static/img/spriteat2x.png") -850px -480px no-repeat;background-size: 1090px 990px;} #details {background:url("/static/img/details-patternat2x.png") top left repeat;background-size: 132px 132px;} #details .tagline {background:url("/static/img/spriteat2x.png") -10px -10px no-repeat;background-size: 1090px 990px;} #details .back-top {background:url("/static/img/spriteat2x.png") -240px -190px no-repeat;background-size: 1090px 990px;} #details .block #icon_general {background:url("/static/img/spriteat2x.png") -400px -190px no-repeat;background-size: 1090px 990px;} #details .block #icon_text {background:url("/static/img/spriteat2x.png") -440px -190px no-repeat;background-size: 1090px 990px;} #details .block #icon_image {background:url("/static/img/spriteat2x.png") -480px -190px no-repeat;background-size: 1090px 990px;} #details .block #icon_folder {background:url("/static/img/spriteat2x.png") -560px -190px no-repeat;background-size: 1090px 990px;} #details .block #integration {background:url("/static/img/spriteat2x.png") -520px -190px no-repeat;background-size: 1090px 990px;} #details .block ul li {background:url("/static/img/details-bulletat2x.png") 0px 8px no-repeat; background-size: 4px 4px;} #details .block.top ul li {background:url("/static/img/details-bulletat2x.png") 0px 8px no-repeat; background-size: 4px 4px;} #logo_mask {-webkit-mask-image:url("/static/img/ks_maskat2x.png"); -webkit-mask-size: 460px 460px;} #logo_shading {background: url("/static/img/ks_shadingat2x.png"); background-size: 460px 460px;} #logo_color{background:url("/static/img/ks_colorat2x.png"); background-size: 460px 460px;} #top #appicon_static {background:url('/static/img/ks_fullcolorat2x.png');background-size: 460px 460px;} #top #version_num {background:url('/static/img/badge-2.12x.png');background-size: 83px 83px;} #external-pattern {height:100%; width:100%; position:absolute; z-index:-100; background:url("/static/img/top-pattern.gif");} }