/* GENERAL */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {-webkit-font-smoothing: antialiased;}
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:720px; background:url("/static/img/kal-pattern.gif") repeat;}
#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:721px; 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:720px;
	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:548px;
	height:1px;
	background:url("/static/img/sprite.png") -240px -550px no-repeat;
	margin-top:60px;
	display:block;
}
#top .tagline h1 {display:none;}
#top .nav {
	position:absolute;
	top:0px;
	left: 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.sofa {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.sofa:hover {background-position: -860px -34px;}
#top .h1 {font-size:20px; line-height:26px; /*color:#9f93ce;*/ color:#FFFFFF; font-weight:normal; margin:50px 0 40px 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:180px;
	margin-right:20px;
	position:relative;
}
#sitenav .tile3 {float:left; width:161px; margin-right:20px;position:relative;}
#sitenav .tile2 {float:left; width:125px; 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;}

/* 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 -370px no-repeat;position:absolute;top:0;left:0;}
#sitenav .top-screenshot-imagescope {width:64px;height:64px;background:url("/static/img/sprite.png") -830px -370px no-repeat;position:absolute;top:0;left:0;}
#sitenav .top-screenshot-workflow {width:64px;height:64px;background:url("/static/img/sprite.png") -900px -370px no-repeat;position:absolute;top:0;left:0;}
#sitenav .top-screenshot-details {width:64px;height:64px;background:url("/static/img/sprite.png") -970px -370px no-repeat;position:absolute;top:0;left:0;}

/* NORMAL BUTTON */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.buttonwrap {float:left;}
.buttonwrap .small {color:#7167a6; font-size:13px; font-weight:bold; font-family:Arial; text-shadow:0px 1px 2px #000; text-align:center; clear:both; margin-left:-13px; line-height:35px;}
.button {
	padding:5px 20px 6px 20px;
	float:left;
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
	margin-right:20px;
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.6);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.6);
	box-shadow: 0 2px 4px rgba(0,0,0,.6);
	cursor:pointer}
.button:hover {text-decoration:none;}
.button:active {position:relative; top:1px;}
.button .img {margin-bottom:-5px; margin-left:8px;display:inline-block;background-image:url("/static/img/sprite.png");background-repeat:no-repeat;}
.button span {font-weight:normal; color:#c4b8fe;}

/* BUTTON ICONS */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon-arrow {display:inline-block;width:18px;height:19px;background-position:-830px -10px;}
.icon-heart {display:inline-block;width:20px;height:18px;background-position:-800px -10px;}
.icon-play {display:inline-block;width:20px;height:20px;background-position:-900px -70px;}
.icon-zoom {display:inline-block;width:19px;height:19px;background-position:-860px -60px;}

/* ROUNDED BUTTON */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.roundbutton {
	text-decoration:none;
	padding:4px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	border-radius:100px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	box-shadow: 0 1px 3px rgba(0,0,0,.6);
	float:left;
	position:absolute;
	display:inline-block;
	margin:-5px 0 0 -5px;
	cursor:pointer;}
.roundbutton:active {margin-top:-4px;}
.roundbutton.active {margin-top:-4px;}

/* GREEN */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.green {
	color:#fff;
	background:#4ea61b;
	background: -webkit-gradient(linear, left top, left bottom, from(#70ce31), to(#2b6a0a));
	background: -moz-linear-gradient(top, #70ce31, #296d07);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70ce31", endColorstr="#2b6a0a");}
.green:hover {
	background: #296d07;
	background: -webkit-gradient(linear, left top, left bottom, from(#5ca62a), to(#225b06));
	background: -moz-linear-gradient(top, #5ca62a, #225b06);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5ca62a", endColorstr="#225b06");}
.green.hover {
	background: #296d07;
	background: -webkit-gradient(linear, left top, left bottom, from(#5ca62a), to(#225b06));
	background: -moz-linear-gradient(top, #5ca62a, #225b06);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5ca62a", endColorstr="#225b06");}
.green:active {
	background: #1c4e03;
	background: -webkit-gradient(linear, left top, left bottom, from(#2a6909), to(#3e8116));
	background: -moz-linear-gradient(top, #2a6909, #3e8116);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a6909", endColorstr="#3e8116");}

/* PURPLE */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.purple {
	color:#fff;
	background:#826de5;
	background: -webkit-gradient(linear, left top, left bottom, from(#9986f9), to(#5644ac));
	background: -moz-linear-gradient(top, #9986f9, #5644ac);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9986f9", endColorstr="#5644ac");}
.purple:hover {
	background: #4c3c98;
	background: -webkit-gradient(linear, left top, left bottom, from(#8474ce), to(#4c3c98));
	background: -moz-linear-gradient(top, #8474ce, #4c3c98);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8474ce", endColorstr="#4c3c98");}
.purple:active {
	background: #6a5bb0;
	background: -webkit-gradient(linear, left top, left bottom, from(#51419e), to(#6a5bb0));
	background: -moz-linear-gradient(top, #51419e, #6a5bb0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#51419e", endColorstr="#6a5bb0");}

/* RED */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
.red {
	color:#fff;
	background:#e60d00;
	background: -webkit-gradient(linear, left top, left bottom, from(#fd1900), to(#a90100));
	background: -moz-linear-gradient(top,  #fd1900,  #a90100);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fd1900", endColorstr="#a90100");}
.red:hover {
	background: #cd0b00;
	background: -webkit-gradient(linear, left top, left bottom, from(#e21b05), to(#8b0000));
	background: -moz-linear-gradient(top, #e21b05, #8b0000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e21b05", endColorstr="#8b0000");}
.red:active {
	background: #8B0600;
	background: -webkit-gradient(linear, left top, left bottom, from(#8b0000), to(#e21b05));
	background: -moz-linear-gradient(top, #8b0000, #e21b05);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8b0000", endColorstr="#e21b05");}

/* 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 70px auto; height:1000px;}
#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:54px; margin-left:-10px; margin-bottom:50px;}
#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 -460px 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 -460px no-repeat; width:69px; height:57px; float:right;}

/* IMAGE SCOPE */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
#image {height:960px; background:url("/static/img/image-pattern.jpg") top left repeat;}
#image .spikes {background:url("/static/img/spikes-bottom.png") -3px left 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") -2px left repeat-x;height:83px;}
#image .band-left {width:218px;height:83px;background:url("/static/img/sprite.png") -802px -550px 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 -640px 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 -460px no-repeat; float:right;}

/* WORKFLOW */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
#workflow {
	height:100px;
	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; 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:105px; right:0;}
#workflow h1 span {font-weight:bold; color:#fff;}
#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 .text-block {width:292px; float:left; margin-right:30px; text-shadow:0px 2px 2px #000;}
#workflow .text-block img {float:right;}
#workflow .text-block.last {margin-right:0;}
#workflow .text-block h3 {font-size:15px; text-transform:uppercase;}
#workflow .text-block p {color:#7b8197;}
#workflow .text-block p span {color:#cfd2e5; background-color:#373a4f; padding:0 2px; text-shadow:0px 1px 0px #111;}
#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 #ksdiff-icon {margin-right:20px; margin-top:10px; background:url("/static/img/sprite.png") -920px -460px no-repeat; width:63px; height:57px; float:right;}
#workflow #files-icon {margin-right:12px;  background:url("/static/img/sprite.png") -850px -460px no-repeat; width:65px; height:67px; float:right;}

/* DETAILS */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
#details {
	height:100px;
	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 {width:220px; 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 #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 {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);}

/* 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 */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––– */
#top #appicon_static {position:absolute;left:500px;top:120px;}
#top #appicon_animated {position:absolute;left:500px;top:120px; z-index:1;}
#logo_mask {margin:0; padding:0; width:460px; height:460px; -webkit-mask-box-image:url(/static/img/ks_mask.png) 460 stretch; position:absolute;}
#logo_shading {position:absolute;}


/* 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;}