/* RESET: Resets default browser CSS.
-------------------------------------------------------------- */
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
 
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
 
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
 
/* Remove annoying border on linked images. */
a img { border: none; }


/* TYPOGRAPHY
-------------------------------------------------------------- */
 
/* Default font settings. 
   This is all based on a baseline grid of 20px */

html {
  background-color: #555; /* #ededed; */
}

body { 
  font-size: 16px;
  line-height: 24px;
  color: #76797c; 
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  background-repeat: repeat-x;
  background-image: url('../img/page_background.png');
  background-color: #ededed;
}

/* Headings
-------------------------------------------------------------- */
 
h1,h2,h3,h4,h5,h6 { 
  font-weight: normal; 
  color: #999; 
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  }
 
h1 { font-size: 36px; line-height: 48px; margin: 24px 0; }
/* h2 { font-size: 36px; line-height: 24px; padding: 12px 0; color: #1a1718; font-weight: normal; } */
h2 { font-size: 28px; line-height: 24px; padding: 12px 0; color: #1a1718; font-weight: normal; }
h3 { font-size: 22px; line-height: 24px; padding: 6px 0; color: #555; }
h4 { font-size: 18px; line-height: 24px; padding: 6px 0;}
h5 { font-size: 14px; font-weight: bold; }
h6 { font-size: 12px; font-weight: bold; text-transform: uppercase;}

/* Text elements
-------------------------------------------------------------- */
 
p           { margin: 0 0 24px 0; }

a:focus, 
a:hover     { color: #158207; }
a           { 
              font-weight: bold;
              color: #1ba509; 
              text-decoration: none; 
              -webkit-transition-property: color,;
              -webkit-transition-duration: .2s;
              -webkit-transition-timing-function: ease-in;
            }

 
blockquote  { font-family: Georgia, serif; margin: 24px 0; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }
 
abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 24px 0; font-family: "Georgia", serif; font-style: italic; }
del         { color: #999; }
 
pre,code    { margin: 24px 0; white-space: pre; }
pre,code,tt { font: 12px Consolas, 'Andale Mono', 'Lucida Console', Monospace; } 
 
/* Lists
-------------------------------------------------------------- */
 
li ul, 
li ol       { margin: 0 24px; }
ul, ol      { margin: 0 0 24px 0; }
 
ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

li          { margin-bottom: 12px; margin-left: 20px; }
 
dl          { margin: 0 0 24px 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 24px;}

/* Tables
-------------------------------------------------------------- */
 
table       { margin: 0 0 24px 0; width:100%; }
th          { font-weight: bold; }
th,td       { padding: 5px;}
tr.even td  { background: #f4f4f4; }
th.numeric,
td.numeric  { text-align: center; }
tfoot       { font-style: italic; }
caption     { }
 
 
/* Misc classes
-------------------------------------------------------------- */

.hide       { display: none; }
.invisible  { visibility: hidden; }
 
.weak       { color: #999; }
.highlight  { background: #ff0; }
 
.first      { margin-left:0 !important; padding-left:0; }
.last       { margin-right:0 !important; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.clickable  { cursor: pointer; }

.right      { float: right; margin-left: 10px; }
.left       { float: left; margin-right: 10px; }

.subhead2    { font-family: "Georgia", serif; font-style: italic; font-size: 18px; line-height: 24px; padding: 0; margin-bottom: 24px; color: #999; }
.subhead a  { font-weight: normal; }

.subhead    { font-family: "Helvetica Neue", Arial, sans-serif;  font-style: italic; font-size: 18px; line-height: 24px; padding: 0; margin-bottom: 24px; color: #666; }
.subhead a  { font-weight: normal; }

/* Indentation
------------------------------------------------------------- */
.dquo { margin-left: -.5em; }

.small {
  font-size: 0.8333em;
  line-height: 1.6;
}
.caps { 
  font-variant: small-caps; 
  text-transform: lowercase; 
  font-size:1.4em;
  line-height:1%;
}


/* GRIDS: Sets up an easy-to-use grid of 24 columns.
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 950px;
  margin: 0 auto;
}

.containerad {
  width: 750px;
  padding: 0px 0px 0px 150px;
}

/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: left;
  margin-right: 10px;
}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
.span-5   { width: 190px; }
.span-6   { width: 230px; }
.span-7   { width: 270px; }
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
.span-11  { width: 430px; }
.span-12  { width: 470px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 590px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 750px; }
.span-20  { width: 790px; }
.span-21  { width: 830px; }
.span-22  { width: 870px; }
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 40px; }  
.append-2   { padding-right: 80px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 40px; }  
.prepend-2   { padding-left: 80px; } 
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1  { float: left; margin-bottom: 20px; margin-left: -40px; }
.pull-2  { float: left; margin-bottom: 20px; margin-left: -80px; }
.pull-3  { float: left; margin-bottom: 20px; margin-left: -120px; }
.pull-4  { float: left; margin-bottom: 20px; margin-left: -160px; }
.pull-5  { float: left; margin-bottom: 20px; margin-left: -200px; }
.pull-6  { float: left; margin-bottom: 20px; margin-left: -240px; }
.pull-7  { float: left; margin-bottom: 20px; margin-left: -280px; }
.pull-8  { float: left; margin-bottom: 20px; margin-left: -320px; }
.pull-9  { float: left; margin-bottom: 20px; margin-left: -360px; }
.pull-10  { float: left; margin-bottom: 20px; margin-left: -400px; }
.pull-11  { float: left; margin-bottom: 20px; margin-left: -440px; }
.pull-12  { float: left; margin-bottom: 20px; margin-left: -480px; }

.push-1  { float: right; margin-bottom: 20px; margin-right: -40px; }
.push-2  { float: right; margin-bottom: 20px; margin-right: -80px; }
.push-3  { float: right; margin-bottom: 20px; margin-right: -120px; }
.push-4  { float: right; margin-bottom: 20px; margin-right: -160px; }
.push-5  { float: right; margin-bottom: 20px; margin-right: -200px; }
.push-6  { float: right; margin-bottom: 20px; margin-right: -240px; }
.push-7  { float: right; margin-bottom: 20px; margin-right: -280px; }
.push-8  { float: right; margin-bottom: 20px; margin-right: -320px; }
.push-9  { float: right; margin-bottom: 20px; margin-right: -360px; }
.push-10  { float: right; margin-bottom: 20px; margin-right: -400px; }
.push-11  { float: right; margin-bottom: 20px; margin-right: -440px; }
.push-12  { float: right; margin-bottom: 20px; margin-right: -480px; }


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
 
.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}
 
/* Regular clearing
   apply to column that should drop below previous ones. */
 
.clear { clear:both; }




/* HEADER LOGO
-------------------------------------------------------------- */

h1 {
  margin: 0;
  height: 153px;
  background-image: url('../img/skygrid_logo2.png');
  background-repeat: no-repeat;
}

h1 a {
  display: block;
  width: 350px;
  height: 0;
  padding-top: 153px;
  overflow: hidden;
}


/* PRIMARY NAVIGATION
-------------------------------------------------------------- */

#primary-nav { list-style-type: none; }

#primary-nav li {
  height: 153px;
  width: 70px;
  margin-left: 14px;
  margin-bottom: 0;
}

body#touchtv #primary-nav li#nav-touchtv,
body#groups #primary-nav li#nav-groups,
body#mobile #primary-nav li#nav-mobile,
body#ipad #primary-nav li#nav-ipad,
body#iphone #primary-nav li#nav-iphone,
body#android #primary-nav li#nav-android,
body#about #primary-nav li#nav-about,
body#partners #primary-nav li#nav-partners,
body#press #primary-nav li#nav-press,
body#team #primary-nav li#nav-team,
body#blog #primary-nav li#nav-blog { background-image: url('../img/primary-nav/active_background.png'); }

/*#primary-nav li:hover { background-image: url('../img/primary-nav/active_background.png'); }
*/
#primary-nav li a {
  display: block;
  height: 0;
  padding-top: 153px;
  overflow: hidden;
  background-position: top center;
}

#primary-nav li#nav-touchtv a { background-image: url('../img/primary-nav/touchtv.png'); }
#primary-nav li#nav-groups a { background-image: url('../img/primary-nav/groups.png'); }
#primary-nav li#nav-mobile a { background-image: url('../img/primary-nav/mobile.png'); }
#primary-nav li#nav-ipad a { background-image: url('../img/primary-nav/ipad.png'); }
#primary-nav li#nav-iphone a { background-image: url('../img/primary-nav/iphone.png'); }
#primary-nav li#nav-android a { background-image: url('../img/primary-nav/android.png'); }
#primary-nav li#nav-about a { background-image: url('../img/primary-nav/about.png'); }
#primary-nav li#nav-partners a { background-image: url('../img/primary-nav/partners.png'); }
#primary-nav li#nav-press a { background-image: url('../img/primary-nav/press.png'); }
#primary-nav li#nav-team a { background-image: url('../img/primary-nav/team.png'); }
#primary-nav li#nav-blog a { background-image: url('../img/primary-nav/blog.png'); }

/* FOOTER
-------------------------------------------------------------- */

#dlbuttons {
  margin-top: 5px;
  margin-bottom: -35px;
  padding-top: 2px;
  text-align: center;
}

#footer {
  margin-top: 39px;
  margin-bottom: 40px;
  padding-top: 10px;
  border-top: 1px solid #d2d3d3;
  text-align: center;
}

#footer p {
  color: #76797c;
  font-size: 12px;
  text-align: left;
}

#footer a {
  color: #76797c;
  font-weight: normal;
}

#footer a:hover {
  color: #1ba509;
}

#footer img {
  display: inline-block;
}

#secondary-nav {
  font-size: 12px;
  list-style-type: none;
}

#secondary-nav li {
  float: left;
  margin: 0;
  margin-right: 10px;
}


/* GENERAL LAYOUT
-------------------------------------------------------------- */
.sidebar {
  padding-top: 48px;
}



/* HOMEPAGE
-------------------------------------------------------------- */

#promo {
  height: 0;
  padding-top: 560px;
/*
  overflow: hidden;
  background-image: url('../img/homepage/ipad_iphone_promo.png');
  background-repeat: no-repeat;
*/
}


/* iPad PAGE
-------------------------------------------------------------- */
#skygrid-ipads {
  margin-top: 5px;
  margin-left: 50px;
}

#skygrid-android {
  margin-top: 5px;
  margin-left: 30px;
  margin-right: 10px;
}

.screenshot {
  float: left;
  width: 220px;
  margin-right: 20px;
  margin-top: 0px;
}

.screenshot img {
  width: 220px;
}

.screenshot h4 {
  text-align: center;
}

#app-store-button {
  margin: 24px 0;
  text-align: center;
}

/* TEAM PAGE
-------------------------------------------------------------- */

ul#team-grid {
  margin-bottom: 48px;
}

ul#team-grid li {
  float: left;
  width: 70px;
  height: 70px;
  margin: 0;
  margin-right: 10px;
  margin-bottom: 10px;
  list-style-type: none;
}

ul#team-grid li {
  background-image: url('../img/team/Chris.jpg');
  background-position: center center;
}

ul#team-grid li#aaron-avatar { background-image: url('../img/team/avatars/aaron.png'); }
ul#team-grid li#april-avatar { background-image: url('../img/team/avatars/April.jpg'); }
ul#team-grid li#ariel-avatar { background-image: url('../img/team/avatars/ariel-tn.png'); }
ul#team-grid li#ashesh-avatar { background-image: url('../img/team/avatars/Ashesh.jpg'); }
ul#team-grid li#bear-avatar { background-image: url('../img/team/avatars/bear.jpg'); }
ul#team-grid li#brett-avatar { background-image: url('../img/team/avatars/brett.png'); }
ul#team-grid li#brian-avatar { background-image: url('../img/team/avatars/brians.jpg'); }
ul#team-grid li#burcu-avatar { background-image: url('../img/team/avatars/Burcu.jpg'); }
ul#team-grid li#chris-avatar { background-image: url('../img/team/avatars/Chris.jpg'); }
ul#team-grid li#dan-avatar { background-image: url('../img/team/avatars/Dan.jpg'); }
ul#team-grid li#ed-avatar { background-image: url('../img/team/avatars/Ed.jpg'); }
ul#team-grid li#edison-avatar { background-image: url('../img/team/avatars/edison-tn.png'); }
ul#team-grid li#eunice-avatar { background-image: url('../img/team/avatars/Eunice.jpg'); }
ul#team-grid li#fei-avatar { background-image: url('../img/team/avatars/Fei.jpg'); }
ul#team-grid li#igor-avatar { background-image: url('../img/team/avatars/igor.jpg'); }
ul#team-grid li#jie-avatar { background-image: url('../img/team/avatars/Jie.jpg'); }
ul#team-grid li#john-avatar { background-image: url('../img/team/avatars/John.jpg'); }
ul#team-grid li#jon_pic-avatar { background-image: url('../img/team/avatars/jon_pic.jpg'); }
ul#team-grid li#karen-avatar { background-image: url('../img/team/avatars/karen.jpg'); }
ul#team-grid li#kat-avatar { background-image: url('../img/team/avatars/Kat.jpg'); }
ul#team-grid li#kelley-avatar { background-image: url('../img/team/avatars/kelley-tn.png'); }
ul#team-grid li#kevin-avatar { background-image: url('../img/team/avatars/Kevin.jpg'); }
ul#team-grid li#lancy-avatar { background-image: url('../img/team/avatars/Lancy.jpg'); }
ul#team-grid li#ling-ling-avatar { background-image: url('../img/team/avatars/ling-ling-tn.png'); }
ul#team-grid li#marek-avatar { background-image: url('../img/team/avatars/Marek.png'); }
ul#team-grid li#oscar-avatar { background-image: url('../img/team/avatars/Oscar.jpg'); }
ul#team-grid li#peter_pan-avatar { background-image: url('../img/team/avatars/Peter_Pan.jpg'); }
ul#team-grid li#puneith-avatar { background-image: url('../img/team/avatars/Puneith.jpg'); }
ul#team-grid li#ritesh-avatar { background-image: url('../img/team/avatars/Ritesh.jpg'); }
ul#team-grid li#rok-avatar { background-image: url('../img/team/avatars/rok.jpg'); }
ul#team-grid li#sarah-avatar { background-image: url('../img/team/avatars/sarah-tn.jpg'); }
ul#team-grid li#sophia-avatar { background-image: url('../img/team/avatars/sophia.jpg'); }
ul#team-grid li#zeynep-avatar { background-image: url('../img/team/avatars/zeynep.png'); }


#timeline-container {
  margin: 48px 0;
}

#timeline-container h3 {
  padding-left: 120px;
}

#timeline {
  margin-top: 168px;
}

#timeline th {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #999;
}

#timeline td {
  margin: 0;
  padding: 0;
//  width: 118px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-image: url('../img/team/timeline_td_background.png');
  background-repeat: repeat-x;
}

#timeline td:first-child {
  width: 109px;
  border-left: none;
}

#timeline td:last-child {
  width: 109px;
  border-left: none;
  border-right: none;
  background-image: url('../img/team/timeline_last_td_background.png');
  background-repeat: no-repeat;
  background-position: top right;
}

#timeline td#y2010 {
/*  border-right: none;*/
}

#timeline ul {
  float: left;
/*  width: 108px; */
  width: 350px;
/* border: 1px #000000 solid; */
  margin: 0 5px;
  height: 41px;
  padding: 0;
  list-style-type: none;
}

#timeline ul li {
  margin: 0;
  padding: 0;
  height: 41px;
  line-height: 41px;
  float: left;
  width: 27px;
  text-align: center;
  position: relative;
  font-size: 18px;
}

#timeline ul li span {
  display: block;
  position: relative;
  top: -42px;
  left: 2px;
  width: auto;
  white-space: nowrap;
  font-size: 12px;
  line-height: 12px;
  font-weight: bold;
  color: #999;
  text-align: left;
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transition-property: color,;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: ease-in;
}

#timeline ul li:hover span {
  color: #333;
}

#timeline ul li a:hover {
  color: #ff6600;
}

.qtip img {
  float: right;
  width: 96px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 3px;
}

.qtip h4 {
  font-weight: bold;
  color: #1ba509;
  margin: 2px 0 0 0;
  padding-top: 0;
}

.qtip p {
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 5px 0;
}


/* CARRERS PAGE
-------------------------------------------------------------- */

#slider {
  margin-bottom: 48px;
}

#slider {
  position:relative;
}

#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display: none;
}

#open-positions {
  background-color: none;
  margin-bottom: 24px;
  top:0px;
  left:0px;
}

#open-positions td {
  white-space: nowrap;
  margin-right: 20px;
  padding-right: 30px;
  vertical-align: top;
  border-top: 1px solid #dfdfdf;
}

#open-positions td.job {
  color: #1ba509;
  white-space: normal;
  font-weight: bold;
}

#open-positions #open-jobs-link {
  float: right;
}

#careers ul li {
  line-height: 16px;
}

/* CONTACT PAGE
------------------------------------------------------------------- */
#addr {
  padding-top: 98px;
}


/* PRESS PAGE
------------------------------------------------------------------- */
#press-items li {
  color: #000;
  list-style-type: none;
  margin-left: 0;
  font-size: 18px;
  padding: 20px;
  background-color: #ffffff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

#press-items li p {
  color: #1ba509;
  margin: 0 0 4px 0;
}

#press-items li h3 {
  text-align: left;
  font-size: 15px;
  padding: 10px 0px 0px 0px;
}

#press-items li img {
  float: left;
  top: 0px;  
  right: 0px; 
  text-align: left;
  font-size: 14px;
}

#press-items li h3 a {
  font-weight: normal;
  font-size: 15px;
  color: #AAAAAA;

/*
  color: #1ba509;
*/
}

#press-items li.no-quote h3 {
  text-align: left;
}

#press-items li.no-quote h3 a {
  color: #1ba509;
}

#iphone-promo-container {
  position: relative;
}

#iphone-promo {
  position: relative;
  left: 90px;
  top: -20px;
  margin-bottom: 10px;
  width: 750px;
  height: 428px;

/*
  position: absolute;
  right: 110px;
  top: 150px;
  width: 240px;
  height: 360px;
  background-image: url('../img/homepage/ipad_iphone_promo.png');
  background-repeat: no-repeat;
*/
}

#adwords {
  left: 110px;
  width: 640px;
}

a.video_link, a.video_link:link, a.video_link:visited, a.video_link:active {
        font-weight: bold;
        text-decoration: none;
        color: blue;
        font-size: 18px;
}

a.video_link:hover {
        font-weight: bold;
        text-decoration: underline;
        color: blue;
        font-size: 18px;
}