body {
  margin: 0;
  padding: 0;
  color: #333;
  font: 14px/1.4em Helvetica, Arial, sans-serif;
  border-top: 8px solid #9EBF51;
  background: #F4F4F4; }

p {
  margin: 1.4em 0 0 0; }

#wrapper {
  width: 880px;
  padding: 0 40px;
  margin: 0 auto; }

#header {
  padding-bottom: 18px; }
  h1#logo {
    margin: 0;
    padding: 26px 0 0 0; }
    h1#logo a {
      display: block;
      width: 230px;
      height: 24px;
      margin: 0 auto;
      text-indent: -9999px;
      background: url(../img/logo.png) no-repeat left top; }

  ul#navi {
    display: none;
    float: right;
    margin: 0;
    padding: 0;
    list-style: none; }
    ul#navi li {
      float: left; }
      ul#navi li a {
        display: block;
        height: 54px;
        text-indent: -9999px;
        outline: none;
        background-image: url(../img/navi.png);
        background-repeat: no-repeat; }
        ul#navi li.active a {
          cursor: default; }
      ul#navi li#navi-apps a {
        width: 85px;
        background-position: 0 0; }
        ul#navi li#navi-apps a:hover {
          background-position: 0 -100px; }
        ul#navi li#navi-apps.active a {
          background-position: 0 -200px; }
      ul#navi li#navi-premise a {
        width: 106px;
        background-position: -150px 0; }
        ul#navi li#navi-premise a:hover {
          background-position: -150px -100px; }
        ul#navi li#navi-premise.active a {
          background-position: -150px -200px; }
      ul#navi li#navi-team a {
        width: 86px;
        background-position: -300px 0; }
        ul#navi li#navi-team a:hover {
          background-position: -300px -100px; }
        ul#navi li#navi-team.active a {
          background-position: -300px -200px; }
      ul#navi li#navi-partners a {
        width: 87px;
        background-position: -450px 0; }
        ul#navi li#navi-partners a:hover {
          background-position: -450px -100px; }
        ul#navi li#navi-partners.active a {
          background-position: -450px -200px; }



.widget {
  padding: 25px 0 35px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc; }
  .widget h2 {
    margin: 0;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -1px; }
  .widget p {
    margin: 7px 0;
    color: #666; }
  .widget a.widget-go {
    display: block;
    margin: 14px 0;
    padding: 0 0 0 8px;
    color: #fff;
    line-height: 32px;
    text-decoration: none;
    background: url(../img/button-left.png) no-repeat left top; }
    .widget a.widget-go span {
      display: block;
      padding-right: 40px;
      background: url(../img/button-right.png) no-repeat right top; }
    .widget a.widget-go:hover,
    .widget a.widget-go:focus {
      background-position: 0 -50px; }
      .widget a.widget-go:hover span,
      .widget a.widget-go:focus span {
        background-position: 100% -50px; }
    .widget a.widget-go:active {
      background-position: 0 -100px; }
      .widget a.widget-go:active span {
        background-position: 100% -100px; }
  .widget a.widget-appstore-tag {
    position: absolute;
    bottom: 0;
    right: -173px;
    display: block;
    width: 180px;
    height: 50px;
    text-indent: -9999px;
    background: url(../img/appstore.png) no-repeat left top;
    display: none; }
  .widget .widget-example {
    position: relative;
    float: left;
    width: 316px; }
    .widget .widget-example .widget-shadow {
      position: absolute;
      bottom: -26px;
      left: 50%;
      margin-left: -200px; }
    .ie6 .widget .widget-example .widget-shadow {
      display: none; }
  .widget .widget-example-inner {
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #bbb;
    background: #E6E6E6; }
    .widget .widget-example .widget-example-header {
      padding: 0 7px;
      line-height: 30px;
      border-bottom: 1px solid #bbb; }
      .widget .widget-example .widget-example-header h3 {
        float: left;
        margin: 0;
        color: #666;
        font-size: 16px; }
      .widget .widget-example .widget-example-header ul.widget-navi {
        float: right;
        margin: 0;
        padding: 0 36px 0 0;
        list-style: none; }
        .widget .widget-example .widget-example-header ul.widget-navi li {
          float: left;
          padding: 7px 0; }
          .widget .widget-example .widget-example-header ul.widget-navi li a {
            display: block;
            width: 16px;
            height: 16px;
            text-indent: -9999px;
            outline: none;
            background: url(../img/widget-bullets.png) no-repeat left top; }
          .widget .widget-example .widget-example-header ul.widget-navi li a:hover,
          .widget .widget-example .widget-example-header ul.widget-navi li a:focus,
          .widget .widget-example .widget-example-header ul.widget-navi li a:active {
            background-position: 0 -20px; }
          .widget .widget-example .widget-example-header ul.widget-navi li a.active {
            background-position: 0 -40px; }
        .widget .widget-example .widget-example-header ul.widget-navi li.next {
          position: absolute;
          top: -1px;
          right: -1px;
          padding: 0; }
          .widget .widget-example .widget-example-header ul.widget-navi li.next a {
            width: 36px;
            height: 32px;
            background-image: url(../img/widget-next.png); }
          .widget .widget-example .widget-example-header ul.widget-navi li.next a:hover,
          .widget .widget-example .widget-example-header ul.widget-navi li.next a:focus {
            background-position: 0 -50px; }
          .widget .widget-example .widget-example-header ul.widget-navi li.next a:active {
            background-position: 0 -100px; }
    .widget .widget-example .widget-example-content {
      min-height: 250px;
      padding: 7px; }
  .widget .widget-description {
    position: relative;
    margin-left: 335px; }

.widget.first {
  padding-top: 0;
  border-top: none; }
.widget.last {
  padding-bottom: 0;
  border-bottom: none; }

.widget.even {}
  .widget.even .widget-example {
    float: right; }
  .widget.even .widget-description {
    margin-left: 0;
    margin-right: 335px; }
  .widget.even a.widget-appstore-tag {
    left: -173px;
    right: auto;
    background-image: url(../img/appstore-left.png); }

.widget .widget-shadow {
  z-index: 1; }
.widget .widget-example-inner {
  z-index: 2; }
.widget .widget-appstore-tag {
  z-index: 3; }



#main {
  padding: 25px 0; }
  #content {
    float: left;
    width: 655px;
    padding-right: 24px;
    border-right: 1px solid #ccc; }
  #sidebar {
    float: right;
    width: 176px;
    padding-left: 24px; }
    #sidebar .widget {}
      #sidebar .widget .widget-example {
        width: 176px; }
        #sidebar .widget .widget-example .widget-shadow {
          margin-left: -125px; }
        #sidebar .widget .widget-example .widget-example-header h3 {
          font-size: 13px; }
    

#intro {
  height: 210px;
  border-bottom: 1px solid #799438;
  background: #A2C157; }
  #intro-container {
    overflow: hidden;
    height: 210px;
    border-bottom: 1px solid #799438;
    background: url(../img/fallingapart.png) no-repeat right top; }
    #intro-container .intro-content {
      height: 160px;
      margin-bottom: 40px;
      padding: 25px;
      color: #fff; }
      #intro-container .intro-content h2 {
        width: 500px;
        margin: -8px 0 0 0;
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -1px; }
      #intro-container .intro-content p {
        width: 500px;
        margin: 16px 0 0 0;
        color: #F4F5E7;
        font-size: 16px; }
        #intro-container .intro-content p strong {
          color: #fff; }


#footer {
  margin: 10px 0 25px 0;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #ccc; }
  #footer-inner {
    padding-top: 7px;
    border-top: 1px solid #fff; }
  #footer a {
    color: #666; }
    #footer a:hover {
      color: #333; }
  #footer p {
    text-align: center;
    margin: 0; }
  #footer ul {
    display: none;
    float: right;
    margin: 0;
    padding: 0;
    list-style: none; }
    #footer ul li {
      float: left;
      margin-left: 8px; }


#page-home {
  background-image: url(../img/header-bg.png);
  background-position: 0 -60px;
  background-repeat: repeat-x; }
  #page-home #wrapper {
    background: url(../img/intro-reflection.png) no-repeat 50% 280px; }
  
  
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }
.ie .clearfix {
  zoom: 1; }