/* RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END RESET */

@link-color: #fff;
@link-hover-color: darken(@link-color, 10);

// Grays
@white: #fff;
@gray-lighter: #ccc;
@gray-light: #777;
@gray: #555;
@gray-dark: #333;
@black: #000;

// Accent Colors
@blue: #00b3ee;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
  
  
// Clearfix for clearing floats like a boss
.clearfix {
  zoom: 1;
	&:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: ".";
	}
}

// Font Stacks
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: @size;
  font-weight: @weight;
  line-height: @lineheight;
}
.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
  font-family: "Georgia", Times New Roman, Times, sans-serif;
  font-size: @size;
  font-weight: @weight;
  line-height: @lineheight;
}
.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
  font-family: "Monaco", Courier New, monospace;
  font-size: @size;
  font-weight: @weight;
  line-height: @lineheight;
}

// Grid System
@grid_columns: 16;
@grid_column_width: 40px;
@grid_gutter_width: 20px;
.container {
  width: (@grid_column_width * @grid_columns) + (@grid_gutter_width * (@grid_columns - 1));
  .clearfix;
}
.columns(@column_span: 1) {
  display: inline;
  float: left;
  width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
  margin-left: @grid_gutter_width;
  &:first-child {
    margin-left: 0;
  }
}
// Border Radius
.border-radius(@radius: 5px) {
  -moz-border-radius: @radius;
  border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	transition: @transition;
}
// CSS3 Content Columns
.content-columns(@column_count, @column_gap: 20px) {
	-webkit-column-count: @column_count;
	-webkit-column-gap: @column_gap;
	-moz-column-count: @column_count; 
	-moz-column-gap: @column_gap;
	column-count: @column_count; 
	column-gap: @column_gap;
}
// Buttons
.button(@color: #f5f5f5, @text_color: #333, @text_shadow: 0 1px 1px rgba(255,255,255,.75), @font_size: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
  display: inline-block;
  #gradient > .vertical(@color,darken(saturate(@color,10),10));
  padding: @padding;
  text-shadow: @text_shadow;
  color: @text_color;
  line-height: 20px;
  .border-radius(@rounded);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
  .box-shadow(@shadow);
  &:hover {
    background-position: 0 -15px;
    color: @text_color;
    text-decoration: none;
  }
}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
	}
	.border(@color: @white, @alpha: 1) {
		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
		background-clip: padding-box;
	}
}
// Gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
    background-image: -moz-linear-gradient(right center, @startColor, @endColor);
    background-image: -o-linear-gradient(left,  @startColor,  @endColor);
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @endColor);
    background-image: -moz-linear-gradient(@startColor, @endColor);
    background-image: -o-linear-gradient(top,  @startColor,  @endColor);
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
    background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
  }
}
/**/
@page_width: 780px;
@grid_columns: 16;
@grid_column_width: 30px;
@grid_gutter_width: 20px;
div.grid {
  .container;
  div.span1 { .columns(1); }
  div.span2 { .columns(2); }
  div.span3 { .columns(3); }
  div.span4 { .columns(4); }
  div.span5 { .columns(5); }
  div.span6 { .columns(6); }
  div.span7 { .columns(7); }
  div.span8 { .columns(8); }
  div.span9 { .columns(9); }
  div.span10 { .columns(10); }
  div.span11 { .columns(11); }
  div.span12 { .columns(12); }
  div.span13 { .columns(13); }
  div.span14 { .columns(14); }
  div.span15 { .columns(15); }
  div.span16 { .columns(16); }
}

body, html {
  .sans-serif;
  background-color: #6f7074;
  padding:20px 0 20px 0;
  color:#fff;
}
a {
  color:#fff;
  text-decoration: none;
}
a:hover {
/*  text-decoration: underline;*/
}
p {
  color:#fff;
  strong {
    font-weight: bold; 
  }
}
h3 {
  font-size: 1.2em;
  font-weight: bold; 
  margin-bottom: 20px;
}
table {
  td, th {
    padding:10px;
  }
}
ul {
  margin:30px 0;
  li {
    list-style: disc inside;
  }
}
.centered {
  width:860px;
  margin:0 auto;
  padding:0 115px;
  background: #6f7074 url('/images/bg.png') no-repeat top right;
  min-height:400px;
}
.pannel {
  background-color: #000;
}
.header {
  position:relative;
  height:36px;
  position:relative;
  padding-top:51px;
  .page-title-image {
    position:absolute;
    right:5px;
    bottom:-5px;
  }
}
#logo {
  position:absolute;
  top:0;
  left:10px;
}
#nav {
  .box-shadow(0 1px 10px rgba(0,0,0,1));
  background-color: #000;
  height:36px;
  line-height:36px;
  padding-left:120px;
  a {
    margin-right:20px;
    text-transform: uppercase;
  }
}
.body {
  .box-shadow(0 1px 10px rgba(0,0,0,1));
  padding:30px 30px 1px 30px;
  .videos {
    overflow:auto;
    margin:0 0 0 10px;
    .video {
      @margin:20px;
      display:block;
      width:142px;
      height:200px;
      float:left;
      margin:0 16px 20px 0;
      font-size: 0.8em;
      line-height:1.4em;
      color: #999;
      img {
        width:120px;
        height:90px;
      }
      h5, h6 {
        color:#666;
      }
      &:hover {
        color: #fff;
        h5, h6 {
          color:#fff;
        }
      }
    }
  }
  .video {
    overflow:auto;
    margin:0 0 20px 0;
    iframe {
      float:left;
    }
    .poster {
      float:left;
      margin:0 0 0 20px;
      width:350px;
      img {
        width:350px;
      }
      .info {
        position:relative;
        background-color: #DDD;
        background: #ddd url('/images/info-bg.png') repeat-x center center;
        height:62px;
        padding:10px;
        font-size: 0.8em;
        line-height:1.4em;
        color:#333;
        padding-right:132px;
        width:208px;
        strong {
          font-weight: bold;
        }
        .socialbtns {
          position:absolute;
          bottom:37px;
          right:10px;
          width:100px;
/*          height:40px;*/
        }
        .itunes {
          position:absolute;
          bottom:5px;
          right:10px;
          width:100px;
          height:29px;
          img {
            width:100px;
            height:29px;
          }
        }
      }
    }
  }
}
#main-container {
  padding-top:10px;
}
.footer {
  .box-shadow(0 1px 10px rgba(0,0,0,1));
  position:relative;
  padding:0 30px 0 21px;
  .icons {
    position:absolute;
    right:30px;
    bottom:6px;
  }
}
.copyright {
  text-align: center;
  font-size: 0.8em;
  color:#494949;
}