/*Base template*/

body {font-family: 'Open Sans', sans-serif;}
p {font-family: 'Open Sans', sans-serif;}

#header {background: #414143; margin-top:12px; width:940px; float:left; clear:both;}
#en-logo-replace a {text-indent:-9999em; background: url(/static/img/logo.png) center center no-repeat; height:54px;
                  padding:10px 0 10px 20px; width:262px; display: block;}
#header div.nav {padding-bottom:0; margin-left:150px; margin-bottom:0;}
#header div.nav a {display: block; line-height: 20px; color: #F0F0F0; font-size:17px; 
                width:70px; text-align:left; margin-left:40px; float:left; font-weight:600;}
#header div.nav a:hover {text-decoration: none; color:#FFFFFF}
#header div.nav.top-row {padding-top:12px;}
#header div.nav.bottom-row {padding-top:5px;}

div.footer {margin: 10px 0 20px; clear:both;}
div.footer .row {padding: 15px 0; color: #888888;}
div.footer .row .social-link {display: block; float: left; margin:0 0 0 3px;}
div.footer span.social-icon {height: 28px; width: 29px; background: url(/static/img/socialicons.png) top left no-repeat; 
                          display: block; float: left; margin-top: -5px;}
div.footer span.social-icon.twitter {background-position: top right;}
div.footer .bar {background: #414143; height:17px; border-bottom:1px solid #d0d0d2;}
div.footer ul {margin: 5px auto; display:block; text-align: center; font-size:0;}
div.footer li {display: inline-block; text-decoration: none; border-left: 1px solid #DDDDDD;
            line-height:17px; height:17px;}
div.footer li:first-child {border-left: none;}
div.footer li a {color: #868686; padding: 0 2px; font-size: 12px; line-height: 17px;}
div.footer li:first-child a {padding-left: 0;}

/* More generic */

h3 {color: #666666; font-size: 16px; font-weight:400; padding: 10px 0 0;}

.label-en, .label.active, .echonest-menubar .label:hover { background: #00ACEB;}
.label { text-shadow: none; font-size: 12px; 
            font-weight: 400; line-height: 16px; padding-top:3px; padding-bottom:3px;}
.echonest-menubar {padding-top: 5px;}
.echonest-menubar .label {line-height: 20px; font-size: 16px; padding: 5px 8px;}
.clear {clear:both;}

.carousel-control {padding: 5px 0 20px; margin:0; border:0; top:30%;}
.carousel-control.left {background: url(/static/img/lrarrows.png) left center no-repeat; height: 18px; width:10px;}
.carousel-control.right {background: url(/static/img/lrarrows.png) right center no-repeat; height: 18px; width:10px;}

.no-hover-state:hover {text-decoration: none;}

.no-left-margin {margin-left:0;}

.list-search {margin-top:20px;margin-bottom:20px;}

/*Home Page*/

#mainpage-weknow {padding-top: 10px; padding-bottom:10px; width:940px; float:left;}
#mainpage-weknow h1 {line-height:70px; font-size: 60px; font-weight:700; color: #222; 
            letter-spacing: -4px; float:left; margin-left:5px;}
#mainpage-weknow p {margin-left:0; color: #9E9E9E; width:200px; float:right; 
            font-size: 13px; line-height: 15px;}
#mainpage-weknow #mainpage-subscribe {margin:40px 10px 0 0; display: block; float:right;}
#mainpage-weknow #mainpage-subscribe:hover {text-decoration: none;}


#mainpage-infographic  {height:475px; width:940px; 
background: url(/static/img/homepage.jpg) 1px 0 no-repeat;
-moz-transition: background-position 2000ms;
-webkit-transition: background-position 2000ms;
-o-transition: background-position 2000ms;
-ie-transition: background-position 2000ms;
transition: background-position 2000ms;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ie-transition-timing-function: ease-out;
overflow: hidden;
position: relative;
}

.infographic-text {
  width:940px;
  margin-left: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: white;
  background: rgba(0,0,0,0.6);
  border-bottom: 2px solid rgba(0,0,0,0.2);
  /*color: rgba(255,255,255,0.9);*/
  text-align: center;
  height: 80px;

-moz-transition: margin-top 700ms, opacity 700ms;
-webkit-transition: margin-top 700ms, opacity 700ms;
-o-transition: margin-top 700ms, opacity 700ms;
-ie-transition: margin-top 700ms, opacity 700ms;
transition: margin-top 700ms, opacity 700ms;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.infographic-internal-left {width: 700px; margin: 10px 0 0 30px; float: left; text-align:left;}
.infographic-internal-right {width: 400px; margin: 10px 30px 0 0; float: right; text-align:right;}

#infographic-right
{position: absolute; top:0; left:0; opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
display:none;
}

#mainpage-infographic.slidepic #infographic-left,
#mainpage-infographic #infographic-right
{opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
display: none;
}

#mainpage-infographic #infographic-left,
#mainpage-infographic.slidepic #infographic-right
{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity:1;
  display:block;
}

#mainpage-infographic.slidepic
{background-position: -1980px 0;}



.home-page-number-row {margin-left:0; width: 940px;}
.home-page-number {width: 210px; margin: 2px 1px 0 0;}
.first-home-page-number {margin-left:0; width:307px;}
.last-home-page-number {margin-right:0;}
.home-page-number div {text-align: right;}
.home-page-number .number {
  background: #e2e3e5; font-size: 28px; line-height:41px; font-weight: 700;
width: 200px; 
float: left; 
padding-right:10px; color: #222;
-moz-transition: color 300ms;
-webkit-transition: color 300ms;
-o-transition: color 300ms;
-ie-transition: color 300ms;
transition: color 300ms;
}
.home-page-number .number.updating {color: #000;}
.home-page-number .desc {background: #414143; font-size: 11px; line-height: 18px; 
  color: #DDDDDD; float: left; width: 201px; padding-right:9px;}
.first-home-page-number .number {width: 297px;}
.first-home-page-number .desc {width:298px;}


#mainpage-customer-carousel, #solution-customer-carousel { float: left; margin: 0 0 20px;}
#mainpage-customer-carousel .logo, #solution-customer-carousel .logo { height: 100px; background-position: center center;
  background-repeat: no-repeat;}
#mainpage-customer-carousel .logo:first-child {margin-left: 80px;}
#solution-customer-carousel .logo:first-child {margin-left: 0;}


#mainpage-bottom-box {border: 1px solid #BEBEBE; width: 938px;margin:0 auto;clear:both;}
#mainpage-bottom-box h3 { padding-left: 20px;}
#mainpage-press-highlight-wrapper {position: relative; background: #E2E2E5;
  padding: 10px 40px; width: 460px; margin: 10px 0 0 50px; height:140px;}
#mainpage-press-highlight-wrapper .blurb { 
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  
position: absolute; 
top: 0; left:0;
height:140px; 
width:500px;
z-index: 0;
-moz-transition: opacity 300ms;
-webkit-transition: opacity 300ms;
-o-transition: opacity 300ms;
-ie-transition: opacity 300ms;
transition: opacity 300ms;
}
#mainpage-press-highlight-wrapper .blurb.active { 
opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
z-index: 100;
}
#mainpage-press-highlight-wrapper .blurb p {font-size: 28px; line-height: 28px;
  font-style: italic; width:460px; margin:0; font-weight:500; color: #000;
  height:120px; position: absolute; top:10px; left:40px; background: #E2E2E5;}
#mainpage-press-highlight-wrapper .blurb span {font-size: 21px; line-height: 25px;
  text-align:right; padding-right: 10px; position: absolute;
  right:0; bottom:0;}
#mainpage-press-highlights{
  margin-bottom: 20px;
  float: left;
  width:640px;
}
#horizontal-bar {width:1px; height: 305px; margin-top: 20px; border-right: 2px solid #DDD;
                float:left;}
#mainpage-press-highlights .blurb-link { width: 180px; height: 60px;
  background-color: #FFFFFF;
  background-position: center left; background-repeat: no-repeat; display: block;
  cursor: default;
  opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  -moz-transition: opacity 300ms;
  -webkit-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  -ie-transition: opacity 300ms;
  transition: opacity 300ms;
}
#mainpage-press-highlights .blurb-link.active {
  opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#mainpage-highlight {float: left;width:280px;}
#mainpage-highlight .img {background-position: center center; background-scale:contain; 
                            background-repeat: no-repeat; height: 180px;}
#mainpage-highlight .img, #mainpage-highlight p {margin-left: 40px; width:200px;}
#mainpage-highlight .little-more {margin-left: 200px;}
#mainpage-bottom-box .little-more {color: #BBBBBB;}
#mainpage-bottom-box .little-more:hover {color: #222; text-decoration: underline;}
#mainpage-highlight a {color: #999999;}
#mainpage-highlight a:hover {text-decoration: none; color: #222;}
#mainpage-highlight a:hover span {color:#222;}
#mainpage-press-highlights .little-more {margin-left: 545px;}

/* All Standard-Format Pages */
.top-splash h1 {font-size:50px; font-weight:500; margin-top:0; 
                color:#000; letter-spacing:-1px; margin-left:0; margin-bottom:18px;}
.top-splash p, .top-splash li {font-size: 15px; line-height: 19px; margin-left:5px;
                color:#111;}
.top-splash {border-bottom: 2px solid #dedfe1; width:900px;
              padding:25px 20px 25px 20px; margin: 0 0 25px 0;}

/* Company twitter block in the top-splash */
#splash-twitter { margin-top:36px;margin-right:-20px; text-align:right;}
#latest-tweets {padding-top: 7px; min-height: 200px;}
#latest-tweets p {border-bottom: 1px solid #EEEEEE; padding-bottom:9px;}
#splash-twitter p { font-size: 12px; line-height: 15px;}

/* Our Customers page*/
#customer-logo-soup .image {height: 110px; background-position: center center;
      background-repeat: no-repeat;}
#customer-page-verbage p {font-size: 16px; line-height:22px; color:#777777;}
#customer-page-verbage p.pullquote {padding: 10px 10px 0; font-size:23px; text-align: center; 
          color: #333; font-style: italic;}

/* The awesome-sauce Enterprise Solutions Box */
#enterprise-solutions h2 {background:#E2E2E2; width:910px; margin-left:-5px;
                          padding: 2px 15px; font-size: 20px; font-weight: 400;
                        margin-bottom:1px;}
#enterprise-solutions ul {background: #EBEBEB; margin-bottom: 1px; margin-left:-5px;
                          padding: 25px 0;
list-style-type: none;
                      }
#enterprise-solutions li {font-size:14px; line-height: 25px; letter-spacing:-1px;
  color: #444;
  padding-left: 10px; width:370px;
background-image: url(/static/img/dot.png);
background-position:center left;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wGBxIFOYZvsL4AAAAXSURBVAjXYygvL2dgYICQMADh7dq1CwBVXAZeuEWgtgAAAABJRU5ErkJggg==);
}
#enterprise-solutions div.row {background:#E2E2E2; clear:both; margin-top:1px;
  width:940px; margin-left:-5px; font-size: 16px; line-height: 36px;}

#solutions-content {margin-top: 30px; margin-bottom: 50px;}
#solutions-content p {font-size: 15px; line-height: 20px;}
#solutions-content .solutions-icon {height: 100px; width:100px; float:left; margin: 0 20px 20px; background-position: center center; background-repeat: no-repeat;}
#solutions-content h2 a {color:#222;}
#solutions-content h2 a:hover {text-decoration:none;}
#solutions-content p { max-width: 650px; margin-left: 140px;}
.solutions-content-row {margin-bottom: 10px;}
/* CMS content */

.cms-content {padding-top: 20px; padding-bottom: 20px; clear: both;}
.cms-content h1 { color: #222;}
.cms-content h2 { color: #333;}
.cms-content h3 { color: #444;}
.cms-content h4 { color: #555;}
.cms-content h5 { color: #666;}
.cms-content h6 { color: #777;}

.cms-content h2, .cms-content h3, .cms-content h4, .cms-content h5, .cms-content h6 
  {padding-left: 20px;}
.cms-content p, .cms-content ul, .cms-content ol, .cms-content blockquote { padding-left: 40px; font-size: 15px; line-height:20px;}
.cms-content blockquote {border-left: none; font-weight: 600;}

.cms-content, .cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4, .cms-content h5, .cms-content h6, .cms-content p, .cms-content ul, .cms-content ol, .cms-content blockquote {
  max-width: 700px;
}

.lone-cms-content {padding-top: 40px;}

#press-release h2 {margin-bottom: 20px;}

/* Company Page */
#person-list .img { height: 150px; background-position: center center;
  background-repeat: no-repeat; background-scale: contain; margin-top:50px;}
#person-list h4 {margin-top: 10px;}
#person-list .span5 {border-bottom: 1px solid #EEEEEE; padding-bottom: 12px;}
.company-news-item { border-bottom: 1px solid #eeeeee; display: block; float:left;
padding-bottom: 16px; text-align:right;}
.no-bottom-border {border-bottom: none;}

#company-news-items {margin-left:0;}
#company-news-items h1 {text-align: right;}

/* News Page */
.event-img {height:170px; background-size: contain; background-position: center center; background-repeat: no-repeat;}

/* Showcase page */
#news-carousel, #showcase-carousel { border-bottom: 2px solid #EEEEEE; margin-left:0; 
                      padding-bottom: 20px; margin-bottom: 20px;}
.showcase-description {max-height: 200px; font-size: 15px; line-height: 20px; overflow: hidden; color: #777;
padding-top: 8px;}
a:hover .showcase-description {color: #222;}
#showcase-carousel h2 {color: #222;}
#showcase-carousel h4 {color: #444;}
.app-row h3 {color: #444; font-weight: 900;}
.app-row h4 {color: #666; font-weight: normal;}
.app-row p {color: #777;}
.app-row {display: block; border-bottom: 1px solid #EEEEEE;}
.app-row-img {height: 80px; background-position: top center; background-repeat: no-repeat;}
.showcase-item-img {height: 380px; background-position: center center; background-repeat: no-repeat;}
/* App page */
#app-page-highlight {border-bottom: 2px solid #EEEEEE; margin-bottom: 10px; 
padding-bottom: 20px; float:left; width:940px;}

/* news & events */
#news-carousel .img {background-size: contain; background-position: center center; background-repeat: no-repeat;
                      min-height: 320px;}
.news-list-item {border-bottom: 1px solid #EEEEEE; padding: 0 0 5px; color: #555;}
.news-list-item:hover {text-decoration: none;}
.news-item-source-img {height: 90px; background-position: center; background-repeat: no-repeat;}
.news-item {border-bottom: 1px solid #EEEEEE; display:block;}
.news-item h3 {color: #222;}
.news-item h5 {color: #777;}

.pager {margin-top: 10px; margin-bottom: 20px;}
.pager a {border: none;}

/* Contact us page */
#contact-us-map { margin: 0 0 10px; padding: 0 0 25px; border-bottom: 2px solid #DEDFE1;}
html { overflow-y: scroll; }