html {background: #151515 url(../img/bg-body.png) 50% top repeat;;}
body {background: none; font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400; font-style: normal;}
label, input, select, textarea {font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
h2 {font-size:40px;}
h3 {font-size:32px;}
h1,h2,h3 {font-family: 'Gotham Cond A', 'Gotham Cond B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal;}
strong {font-weight:700;}
em, .em {font-family:Georgia, "Times New Roman", serif; font-style:italic;}

.desktop {display: block !important;}
.mobile {display: none !important;}
.above-below15 {margin:15px 0;}
.above-below30 {margin:30px 0;}
.above0 {margin-top:0;}
.alignc {text-align:center;}
.alignr {text-align:right;}
.linear-list {list-style:none; margin:0;}
.linear-list li {display:inline-block; margin:0 5px 0 0;}
.floatl {float:left;}
.floatr {float:right;}
.border-bottom {border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:10px;}
.clear {clear: both;}
hr {border:0; height:0; border-top:1px solid #bababa; border-bottom:1px solid #ececec; margin:30px 0 -80px 0;}

.no-sidebar .content {margin:0;}
.no-content-padding {padding:0 !important;}
.container-fluid {padding-left:7%; padding-right:7%; max-width:1300px; margin: 0 auto;}
.topbar {position: relative; z-index: 100;}
#main-content {position: relative; z-index: 10;}
.topbar-inner, .topbar .fill {background-color:none; -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.topbar-inner {background: none; background-color: #000; height: 62px;}
.topbar-inner .container-fluid {position:relative;}
input.xxlarge, textarea.xxlarge, select.xxlarge {width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input {height: auto; padding: 8px 12px;}
.btn {text-transform: uppercase;}
.btn.primary {background-color: #c7550e; background-image: -webkit-linear-gradient(#dd5f10, #c7550e); border: 1px solid #b8500d; background-image: -moz-linear-gradient(#dd5f10, #c7550e); border: 1px solid #b8500d; background-image: -ms-linear-gradient(#dd5f10, #c7550e); border: 1px solid #b8500d; background-image: linear-gradient(#dd5f10, #c7550e); border: 1px solid #b8500d;}
.btn:hover {background-image: none;}
.size1of2 {width:49%;}

#av-flash-block {height:0; max-width: 1300px; margin: 0 auto; padding: 0 7%; min-width: 940px; position:relative; z-index:10;}
ul.av-flash {margin:0 0 -38px 125px; padding:8px 20px 6px 20px;}
#av-flash-errors {background-color: #fab7b7; box-shadow:0 6px 6px -4px rgba(0,0,0,.8) inset;}
#av-flash-block li {display:block; padding:5px 0 5px 0; list-style:none; color:#680300; font-size:16px; line-height:24px;}

#account-nav {margin-top:10px;}
#account-nav a.menu{padding-right: 0; outline:none;}
#account-nav .open a.menu:after, #account-nav a.menu:hover:after {border-top-color:#fff;}
.topbar a {text-shadow: none;}
a:hover, .topbar div > ul a:hover, .nav a:hover {color: #fff;}
.menu-dropdown:after {content:""; height: 5px; width: 9px; background: url(../img/bubble-arrow2.png) top left no-repeat; position: absolute; top: -8px; right: 10px;}
.topbar ul .menu-dropdown li {text-align: right;}
.topbar ul .menu-dropdown li.no-link {padding: 8px 15px;}
.topbar ul .menu-dropdown li a {display:block; padding: 8px 15px;}
.topbar ul .menu-dropdown li a:hover {background-color: rgba(0, 0, 0, .1);}
.menu-dropdown li {border-top: 1px solid rgba(0, 0, 0, .1);}
.menu-dropdown li:first-child {border-top: none;}
.menu-dropdown li:last-child {border-top: 2px solid rgba(0, 0, 0, .8);}
#account-nav a span {display:block;}
#account-nav a span, #account-nav li {color: #333; font-weight: bold;}
#account-nav li li a {color: #eb7b36;}
.menu-dropdown {max-width: 310px; padding: 0;}


.topbar .brand {background: url(../img/wavelength.png) top left no-repeat; text-indent: -9999px; display:block; width:108px; height: 108px; position: absolute; margin: 0; padding: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.8); box-shadow:0 0 5px rgba(0, 0, 0, 0.8);}
#setup .brand {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

#similar .container-fluid, #screenshots .container-fluid, #home #main-content, #setup #main-content {padding-left:0 !important; padding-right:0 !important; max-width:none;}
#similar .topbar-inner, #screenshots .topbar-inner {padding:0 30px;}
#similar footer, #screenshots footer {margin: 0 30px; border-top: none; -webkit-box-shadow: none; -moz-shadow: none; box-shadow: none;}
.screenshot-info h1 {font-size: 36px; color: #111;}
.list-archive {padding-top:40px;}
#campaign-list .screenshots-intro {width:500px;}
#campaign-list .screenshots-intro h1 {font-size:40px;}
.screenshots-intro .list-archive h3 {font-size:16px; margin-bottom: 0;}
.list-archive ul {list-style: none; margin: 0;}
.list-archive li {width: 100%; font-size: 14px; font-weight:700; padding:5px 0; margin: 0 !important;}

/* Skin */
.content {position:relative;}
#home {min-height:1000px;}
.description {width: 36%; margin-right: 4%;}
.example {width: 60%; height: 374px;}
#home .hero-unit { background-color: transparent; margin:100px auto; padding:0; width:75%;}
#home h3 {font-size:32px; margin: 0 0 20px 0; color: #ebebeb; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}
#home .content {padding: 105px 0 75px 0; width:100%; overflow:hidden; background: url(../img/bg-wood3.jpg) top left repeat; border-top:1px solid #72462b;   box-shadow:0 -250px 200px -120px rgba(0, 0, 0, .5) inset;}
#home .content p {font-size: 16px; line-height: 1.4em; margin-bottom: 20px; color: #ebebeb; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}
#home .content .btn {padding:15px 25px; font-size:15px;}
.overview {margin:40px auto; padding:30px; width:400px; background:rgba(255,255,255,0.9);}

#setup .content {margin-top: 80px;}
#setup footer {margin-top: 60px; max-width:none; padding: 30px 7% 0 7% !important;}
#setup .footer-inner {max-width: 1300px; margin: 0 auto;}


/* General styles for all screenshot sidescrolling */
.visualization-outer {background: url(../img/bg-wood3.jpg) top left repeat; width:100%; padding:75px 0 0 0; position:relative; border-top:1px solid #72462b; box-shadow:0 -250px 200px -120px rgba(0, 0, 0, .5) inset;}
.visualization-inner {background: url(../img/bg-wave.png) -20px 45% repeat-x; width:100%; overflow-x:scroll; outline:none !important;}
ul.screenshots {height:520px; overflow:hidden;}
ul.screenshots li {display:inline-block; float:left; margin: 0 30px; vertical-align:top;}
li.item {display: inline-block; position: relative;  height: 480px; width: 380px;  margin: 0 20px 40px 0; overflow: hidden; background:rgba(0,0,0,0.5) url(/img/loader.gif) no-repeat center center; -webkit-box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.75); -moz-box-shadow:0px 15px 25px rgba(0, 0, 0, 0.75); box-shadow:0px 15px 25px rgba(0, 0, 0, 0.75);}
li.item .list-name {position: absolute; top: 70px; right: -380px; background:#222; background: rgba(0, 0, 0, .85); padding: 20px 10px 25px 20px; width:350px; -webkit-transition: right .1s ease-out; -moz-transition: right .1s ease-out;}
li.item:hover .list-name {right:0;}
li.item p {font-size: 20px; line-height:26px; color: #ebebeb; padding:0; margin-bottom: 15px; font-weight:700;}
li.item p .meta {display:block; font-size:16px; font-weight:normal; margin-bottom:3px;}
li.item img {width:100%;}
li.item div.inner {position: absolute; top: 0; left: 0; overflow: hidden;}
li.item iframe {overflow:hidden; pointer-events:none; display: block; width: 1000px; height: 1260px; position: absolute; top:-390px; left: -310px; display: none;}

/* loading page */
.loading .visualization-inner {overflow: hidden; height:520px;-webkit-animation: loading 2s infinite linear; -moz-animation: loading 2s infinite linear;}
.loading h2 {color: #ebebeb; margin: 220px 0 0 30px; }
.loading h4 {color: #ebebeb; margin: 0 0 0 30px; }
@-webkit-keyframes loading {
	from { background-position: -20px 45%; }
	to { background-position: -183px 45%; }
}
@-moz-keyframes loading {
	from { background-position: -20px 45%; }
	to { background-position: -183px 45%; }
}
.loading.nodata .visualization-inner {-webkit-animation:none; -moz-animation:none; background:none; height:auto;}
.loading.nodata h2 {margin: 50px 0 100px 30px; line-height:1.1em;}


/* Screenshots intro */
ul.screenshots {width:4985px;}
ul.screenshots li.screenshots-intro {width: 500px; margin-right: 0 !important; padding-top: 50px;}
.screenshots-intro h3, .screenshots-intro h1 {color: #ebebeb; font-size: 60px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); margin-bottom: 20px;}
.screenshots-intro h3 {text-transform:capitalize;}
.screenshots-intro p {font-size:20px; line-height:1.3em; color: #ebebeb; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}
.back-nav {display:inline-block; margin-top: 40px; font-size: 16px;}

/* jScrollPane CSS - Customized for Wavelength */
.jspContainer{overflow:hidden; position:relative;}
.jspPane{position:absolute;}
.jspHorizontalBar{position:absolute; bottom:0; left:0; width:100%; height:40px; background:#a2562c url("../img/bg-wood-scroll.jpg");}
.jspHorizontalBar *{margin:0; padding:0;}
.jspCap{display:none; float:left;}
.jspTrack,.jspDrag{float:left; position:relative;}
.jspTrack, .jspNoTrack {background:#341902; height:18px; position:relative; border-radius:10px; margin-top:10px; padding:2px 0 0 0;}
.jspNoTrack {text-align:center; color:#a55c34; margin:5px 40px 0 40px; padding:0; height:28px; font-size:15px; line-height:28px;}
.jspDrag{background:#dadada; height:14px; position:relative; top:0; left:0; cursor:pointer; border-radius:8px; margin-left:2px; border:1px solid #dadada; box-shadow:0 -6px 1px #BBBBBB inset;}
.jspDrag.jspHover{background:#eee;border-color:#eee;}
.jspArrow{position:relative; background:url(../img/jscroll-arrow-sprite.png) 0 0; text-indent:-20000px; display:block; cursor:pointer; width:32px; float:left; height:32px; top:5px;}
.jspArrow.jspDisabled{cursor:default; background-position:0 -32px;}
.jspArrowRight {position:absolute; right:0; float:none; background-position:-32px 0;}
.jspArrowRight.jspDisabled{background-position:-32px -32px;}
.jspCorner, .jspVerticalBar {display:none;}

/* Home CSS3 anim example */
.example {background: url(../img/wave-band-left.png) left 116px no-repeat; position:relative;}
.example:after {content: ""; display: block; height: 64px; width: 2000px; background: url(../img/wave-band-tile.png) left top repeat-x; position: absolute; top: 116px; left: 95px; z-index: 1;}
.example-you, .example-them {float:left; position:relative; z-index: 2;}
.example-you {margin-left:35px; background: url(../img/you.png) 50% bottom no-repeat; padding-bottom: 53px;}
.example-you img, .example-them img {border:none; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .8);}
.example-them {position:absolute; top:0; left:250px; list-style: none; margin-left:70px; height: 316px; width: 232px; background: url(../img/like-you.png) 75px bottom no-repeat; padding-bottom: 58px;}
.example-them li {position:absolute; top: 0; left: 0; -webkit-perspective: 1000;}
.email3 {-webkit-transform: rotate(-3deg); -webkit-transition: -webkit-transform .4s ease;
	-moz-transform: rotate(-3deg); -moz-transition: -moz-transform .4s ease; z-index:10;}
.email2 {-webkit-transform: rotate(4deg); -webkit-transition: -webkit-transform .4s ease;
	-moz-transform: rotate(4deg); -moz-transition: -moz-transform .4s ease; z-index:20;}
.email1 {-webkit-transform: rotate(1deg); -webkit-transition: -webkit-transform .4s ease;
	-moz-transform: rotate(1deg); -moz-transition: -moz-transform .4s ease; z-index:30;}
.example:hover .email1 { -webkit-transform: translate(0, 0) rotate(0);
	-moz-transform: translate(0, 0) rotate(0);}
.example:hover .email2 { -webkit-transform: translate(250px, 0) rotate(0);
	-moz-transform: translate(250px, 0) rotate(0);}
.example:hover .email3 { -webkit-transform: translate(500px, 0) rotate(0);
	-moz-transform: translate(500px, 0) rotate(0);}

/*
#slider-outer {width:320px; line-height:10px; color:#666; margin:8px 0 0 0;}
#slider {width:200px; margin:auto;}
.slider-label:first-of-type {margin:0 5px 0 15px;}
.slider-label:last-of-type {margin:0 5px 0 25px;}
*/

/*#location #slider-outer {width:285px;}
#location #slider {margin:0 0 0 55px;}
#map {width:100%; height:1000px; margin:10px 0 0 0;}
#map h5 {line-height:18px;}
#map > div {opacity:0.7;}*/

.ContentFlow {margin:-40px 0 0 0; padding:10px; background:#333;}
/*
.list-desc {list-style:none; margin:20px 0;}
.list-desc > li {padding:5px 0; margin:10px 0; overflow:hidden;}
.list-desc .list-value {font-size:15px; color:#333;}
.list-desc .list-label {color:#999; font-size:12px;}
*/



footer {margin-top: 50px; border-top: none;}
footer a:hover {color: #000;}

/* forms */
input, select, textarea {background:none; background-color: #fff; -webkit-box-shadow: none; border-radius: 0; vertical-align: top;}
.customStyleSelectBox {background: #fff url(../img/select.png) no-repeat right 50%; padding:0 0 0 15px; margin:0 0 20px 0; width:500px; height:34px; line-height:34px; color:#7D7D7D;}
.customSelect select {width:515px;}
textarea#description {width: 517px;}
span.invalid-error {display: block; background-color: #fab7b7; padding: 8px 5px;}

@media only screen and (max-width: 760px) {
	footer .alignr {clear:both; text-align:left;}
}

@media only screen and (max-width: 1200px) {
	.example:hover .email3 { -webkit-transform: translate(100px, -45px) rotate(3deg); -moz-transform: translate(100px, -45px) rotate(3deg);}
	.example:hover .email2 { -webkit-transform: translate(-50px, -40px) rotate(-3deg); -moz-transform: translate(-50px, -40px) rotate(-3deg);}
	.example:hover .email1 { -webkit-transform: translate(25px, 70px) rotate(-1deg); -moz-transform: translate(25px, 70px) rotate(-1deg);}
}
 
@media only screen and (max-width: 480px) {
  .desktop {display: none !important;}
  .mobile {display: block !important;}
  .container-fluid, #setup .container-fluid {min-width: 0; max-width:480px; padding-right: 10px !important; padding-left: 10px !important;}
  .topbar {min-width: 0; max-width:480px;}
  .topbar-inner {height: 44px !important;}
  .topbar .brand {background: url(../img/wavelength-small.png) top left no-repeat; background-size: 79px 79px; width:79px; height: 79px;}
  #similar .container-fluid, #screenshots .container-fluid, #home #main-content, #setup #main-content {padding-left:0 !important; padding-right:0 !important; max-width:480px;}
  /*.topbar-inner {height:31px;}
  .topbar .brand {background: url(../img/wavelength.png) top left no-repeat; text-indent: -9999px; display:block; width:56px; height: 56px;}
  fieldset .size1of2 {width:100%;}*/
  #home {min-height: 0;}
  #home .content {padding:55px 0 35px 0;}
  #home h3 {font-size: 28px; line-height: 31px;}
  #home .description {float: none; width: auto;}
  #home .description p.em {padding-top: 245px;}
  #home .content .btn {padding: 15px 5px; width: 100%; text-align: center;}

  /* Home CSS3 anim example */
  .example {background: none; position:relative; position: absolute; top: 125px; left: 0;}
  .example:after {display: none;}
  .example-you, .example-them {float:left; position:relative; z-index: 2;}
  .example-you {margin-left:15px; background: url(../img/you.png) 50% bottom no-repeat; background-size: 70px 37px; padding-bottom: 52px; width: 117px; height: 158px;}
  .example-you img, .example-them img {border:none; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .8); width: 100%;}
  .example-them {position:absolute; top:0; left:150px; list-style: none; margin-left:30px; height: 158px; width: 127px; background: url(../img/like-you.png) 15px bottom no-repeat; background-size: 115px 42px; padding-bottom: 58px; overflow:visible;}
  .example-them li {position:absolute; top: 0; left: 0; -webkit-perspective: 1000; width: 117px;}
  .example:hover .email3 { -webkit-transform: translate(50px, -23px) rotate(3deg); -moz-transform: translate(50px, -23px) rotate(3deg);}
  .example:hover .email2 { -webkit-transform: translate(-25px, -20px) rotate(-3deg); -moz-transform: translate(-25px, -20px) rotate(-3deg);}
  .example:hover .email1 { -webkit-transform: translate(13px, 35px) rotate(-1deg); -moz-transform: translate(13px, 25px) rotate(-1deg);}

  /* menu */
  #account-nav {margin-top: 0;}
  a.settings {height: 44px; width: 24px; padding: 0 !important;}
  a.settings, .topbar div > ul a.menu:hover, .topbar div > ul li.open .menu {background: url(../img/icon-settings.png) 50% 50% no-repeat; text-indent: -9999px; background-size: 24px 24px;}
  .topbar div > ul .menu-dropdown, .nav .menu-dropdown {right: -5px; top: 50px;}
  
  fieldset .above-below30 {margin: 15px 0;}
  .customStyleSelectBox, .customSelect select {width:280px;}
  textarea#description {width: 295px;}
  #setup button {width: 100%;}
  
 .loading h2 {margin: 80px 10px 0 10px; font-size: 28px; line-height: 33px;}
 .loading .visualization-inner {background: url(../img/bg-wave.png) -20px 52px repeat-x;-webkit-animation: loading-mobile 2s infinite linear; -moz-animation: loading-mobile 2s infinite linear;}
  @-webkit-keyframes loading-mobile {
	from { background-position: -20px 57px; }
	to { background-position: -183px 57px; }
  }
  @-moz-keyframes loading-mobile {
	from { background-position: -20px 52px; }
	to { background-position: -183px 52px; }
  }
  .loading.nodata .visualization-inner {-webkit-animation:none; -moz-animation:none; background:none;}
  .loading.nodata h2 {margin: 30px 10px 0 10px; }

  .screenshots-intro h3 {font-size:30px; margin-bottom: 15px;}
  #similar .screenshots-intro h3 {display: none;}
  .screenshots-intro p {font-size:18px;}
  .visualization-outer {padding-top: 15px;}
  .visualization-inner {background: none;}
  #similar .topbar-inner, #screenshots .topbar-inner {padding:0 10px;}
  ul.screenshots.linear-list {display:inline;}
  ul.screenshots {height: auto;}
  ul.screenshots li.screenshots-intro {width: 300px; margin: 0 10px 45px 10px;}
  ul.screenshots li.item {margin: 0 10px 60px 10px; width: 300px; height: auto; -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.75); -moz-box-shadow:0px 5px 25px rgba(0, 0, 0, 0.75); box-shadow:0px 5px 25px rgba(0, 0, 0, 0.75);}
  li.item .list-name {position:static; padding: 10px 20px 20px; width: auto; background: rgba(0, 0, 0, .7);}
  li.item img {vertical-align:top;}

  a.back-nav {position: absolute; top: -30px; right: 10px;}

  footer {padding:20px 0 10px 0;}
  footer p {font-size: 10px; margin-bottom: 0; float: none !important; text-align: center !important;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .topbar .brand {background-image: url(../img/wavelength-small@2x.png);}
  a.settings, .topbar div > ul a.menu:hover, .topbar div > ul li.open .menu {background-image: url(../img/icon-settings@2x.png);}
  .example-you {background-image: url(../img/you@2x.png);}
  .example-them {background-image: url(../img/like-you@2x.png);}
}