@import "grid.css";
@import "formsframework.css";

/* =RESET STYLES
   ----------------------------------------------------*/
   
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
  margin:0; 
  padding:0; 
} 
table { 
  border-collapse:collapse; 
  border-spacing:0; 
} 
fieldset,img { 
  border:0; 
} 
address,caption,cite,code,dfn,strong,th,var { 
  font-style:normal; 
  font-weight:normal; 
} 
ol,ul { 
  list-style:none; 
} 
caption,th { 
  text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
  font-size:100%; 
  font-weight:normal; 
} 
q:before,q:after { 
  content:''; 
} 
abbr,acronym {
  border:0; 
}
   
/* =TYPOGRAPHIC STYLES
   ----------------------------------------------------*/


h1 {
  font: bold 26px Helvetica, Arial, sans-serif;
  color: #4c4c4c;
  padding: 10px 0;
}

  h1 span {
    font-weight: normal;
    color: #a6c9e0;
  }
  
  #b_blog h1 a {
    color: #fff;
    text-decoration: none;
  }
  
    #b_blog h1 a span {color: #a6c9e0;}
      #b_blog h1 a:hover span {color: #FFDD55;}

h2 {
  font: bold 34px Helvetica, Arial, sans-serif;
  color: #333;
  text-shadow: 1px 1px 0px #EAE5E2;
  padding: 0;
}


h3 {
  font: bold 18px Helvetica, Arial, sans-serif;
  color: #222;
  padding: 5px 0 0 0;
}

h4 {
  font: bold 14px Helvetica, Arial, sans-serif;
  color: #5F5F5F;
  padding: 5px 0;
}

h5 {
  font: bold 14px Helvetica, Arial, sans-serif;
  color: #6f6f6f;
  padding: 5px 0;
}

p {
  font: normal 13px/22px Helvetica, Arial, sans-serif;
  color: #737373;
  margin: 10px 0;
}
  p.intro {
    font-size: 18px;
    line-height: 25px;
    color: #386781;
    font-style: italic;
    margin: 5px 0 10px 0;
  }

    p.intro.gray {
      color: #737373;
      font-style: normal;
    }

  p.flash {
    color:#333333;
    margin-bottom:20px;
    padding: 3px 10px;
  }

  p.flash.error {
    background-color:#FFCC66;
  }

a {
    font: inherit;
    color: #319bdc;
}
  a:hover {color: #10445a;}

strong {font-weight: bold;}
em {font-style: italic;}

ul {
  list-style: outside disc;
  font-size: inherit;
  margin: 10px 0 10px 15px;
}

  #content ul {
    font-size: 13px;
    line-height: 25px;
  }

ol {
  list-style: outside decimal;
  font-size: inherit;
  margin: 10px 0 10px 40px;
}

  #content ol {
    font-size: 13px;
    line-height: 25px;
  }
  
  ol.list {
    font-size: 14px;
    line-height: 16px;
  }
    ol.list li {margin-bottom: 10px;}

abbr, acronym {border-bottom: 1px dotted #000;}

/* =LAYOUT STYLES (header, content, footer, etc.)
   ----------------------------------------------------*/

body {
  font: normal 12px Helvetica, Arial, sans-serif;
  color: #737373;
  background: #fff;
  margin: 0;
  padding: 0;
}

  body.win {
    font-family: arial, sans-serif;
  }


#headerWrapper {
    width: 100%;
    background: #fff url(../i/top_flaps.png) 0 0 repeat-x;
    margin: 0 auto;
}

#header {
  position: relative;
    width: 940px;
  height: 107px;
  background: transparent url(../i/header_bg.png) 437px bottom no-repeat;
  padding: 49px 10px 0 10px;
  margin: 0 auto;
}

#topNav {
  position: absolute;
  top: 67px;
  right: 64px;
  background: transparent url(../i/n_toplinks.png) 0 0 no-repeat;
}

  #topNav ul {
    height: 18px;
    list-style: none;
    background: transparent url(../i/n_toplinks_right.png) 100% 0 no-repeat;
    margin: 0;
    padding: 0 5px;
  }
  
    #topNav ul li {
      float: left;
        display: block;
      height: 18px;      
      margin-left: 10px;  
    }
    
      #topNav ul li#n_myaccount {
        background: transparent url(../i/icon_lock.png) 0 50% no-repeat;
      }
      
        #topNav ul li a {
          display: block;
          height: 18px;
          color: #d3f3fd;
          font-weight: normal;
          font-size: 11px;
          line-height: 20px;
          text-decoration: none;        
          padding: 0 10px 0 12px;
        }
        #topNav ul li a:hover {
          color: #fff;
        }


#navigation {
  position: absolute;
  top: 85px;
  right: 64px;
  background: transparent url(../i/n_left.png) 0 0 no-repeat;
}
    #navigation ul {
        height: 30px;
        list-style-type: none;
        background: transparent url(../i/n_right.png) top right no-repeat;
        margin: 0;
        padding: 0 5px;
    }
        #navigation ul li {
          float: left;
          display: block;
          height: 30px;
          position: relative;
        }
            #navigation ul li a {
              display: block;
              height: 30px;
              color: #fff;
              text-shadow: 1px 1px 0px #000;
              font: normal 15px/30px Helvetica, Arial, sans-serif;
              text-decoration: none;        
              padding: 0 10px;
            }
        #navigation ul li a:hover {
          color: #fef274;
          text-shadow: 3px 3px 1px #000;
        }

        #navigation ul ul {  
            position:absolute;   
            left: 5px;
            top: 30px;
            height: auto;
            width: auto;
            list-style:none;
            display: none;
            background-color: #222;
            background-image: none;
            -moz-border-radius-bottomleft: 10px;
            -moz-border-radius-bottomright: 10px;
            -webkit-border-bottom-left-radius: 10px;
            -webkit-border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            z-index: 999;
            margin: 0;   
            padding: 0;   
        }

          #navigation ul ul.last {
            -moz-border-radius-topright: 10px;
            -webkit-border-top-right-radius: 10px;
            border-top-right-radius: 10px;
          }
          
        #navigation ul ul li {
            display: block;
            width: 100%;
            line-height: 14px;
            white-space: nowrap;
            height: auto;
            color: #ccc;
            border-top: 1px solid #333;
            border-bottom: 1px solid #000;
            margin: 0;
            padding: 0;
        }

          #navigation ul ul li.first {
            border-top: none;
          }
          #navigation ul ul li.last {
            border-bottom: none;
          }
          
        #navigation ul ul a {  
            display: block;
            height: auto;
            color: #ccc;
            line-height: 14px;
            font-size: 12px;
            text-shadow: none; 
            padding: 5px 10px;
            margin: 0;
        }  

    #b_home #navigation li#n_home a {color: #C3EFFD;}
      #b_home #navigation li#n_home a:hover {color: #8BAEC4;}

    #b_about #navigation li#n_about a {color: #C3EFFD;}
      #b_about #navigation li#n_about a:hover {color: #8BAEC4;}
      
    #b_help #navigation li#n_help a {color: #C3EFFD;}
      #b_help #navigation li#n_help a:hover {color: #8BAEC4;}
      
    #b_blog #navigation li#n_blog a {color: #C3EFFD;}
      #b_blog #navigation li#n_blog a:hover {color: #8BAEC4;}
      
    #b_try #navigation li#n_try a {color: #C3EFFD;}
      #b_try #navigation li#n_try a:hover {color: #8BAEC4;}


a#buyNow {
  position: absolute;
  right: 8px;
  top: 85px;
  width: 51px;
  height: 32px;
  background: transparent url(../i/n_buy.png) 0 0 no-repeat;  
  color: #333;
  text-shadow: 1px 1px 0px #fff;
  text-align: center;
  font-weight: normal;
  font-size: 15px;
  line-height: 30px;
  text-decoration: none;
}
  a#buyNow:hover {
    color: #000;
    text-shadow: -1px -1px 0 #fff;
    background-position: 0 100%;
  }

p#welcome {
  position: absolute;
  top: 110px;
  right: 74px;
  text-align: right;
  font-size: 12px;
  color: #535353;
}


/* --------------- Home Page ---------------- */
/* ---- Top Content (area with blue background) ---- */

#topContentWrapper {
  width: 100%;
  background: transparent url(../i/topcontent_wrapper_bg.png) 0 0 repeat-x;
}
 
#introContent {
  position: relative;
  width: 100%;
  height: 253px;
  background: transparent url(../i/intro_bg.jpg) 50% 0 no-repeat;
}

#topContent {
  position: relative;
  width: 960px;
  background: transparent url(../i/topcontent_bg.jpg) 0 0 no-repeat;
  padding: 0 0 0 0;
  margin: 0 auto;
}

  #topContent h1 {
    color: #fff;
    text-shadow: 2px 2px 1px #062640;
    padding: 10px 0 10px 10px;
  }

    #b_home #topContent {height: 350px;}    

      #b_home #topContent h1 {
        display: block;
        font-size: 30px;
        padding: 0;
        margin-bottom: 6px;
      }
        .win #b_home #topContent h1 {
          font-size: 30px;
        }

    #b_home .col6 {padding-top: 48px;}
    
    #b_home #topCol2 {
      float: left;
      width: 400px;
      padding: 26px 0 0 0;
    }


  #topContent p {
    font-size: 14px;
    color: #d9f1ff;
    margin: 10px 0 20px 0;
  }
  
  #topContent .col6 ul {
    color: #d9f1ff;
    list-style-type: none;
    list-style-position: 2px;
    font-size: 13px;
    margin: 20px 0 0 0;
  }
  
    #topContent .col6 ul li {
      float: left;
      width: 220px;
      line-height: 22px;
      background: transparent url(../i/tick_blue.png) 0 1px no-repeat;
      padding-left: 20px;
    }
    
    #topContent .col6 ul li.item1 {
      width: 180px;
    }
  
  a#tourButton {
    position: absolute;
    left: 10px;
    bottom: 25px;
    display: block;
    width: 155px;
    height: 37px;
    background: transparent url(../i/button_tour.png) 0 0 no-repeat;
    margin-right: 10px;
  }
    a#tourButton:hover {background-position: left bottom;}
    
  a#downloadButton {
    position: absolute;
    left: 172px;
    bottom: 25px;
    display: block;
    width: 155px;
    height: 37px;
    background: transparent url(../i/button_download.png) 0 0 no-repeat;
  }
    a#downloadButton:hover {background-position: left bottom;}
    
h3#shelfScreen {
  display: block;
  float: right;
  width: 169px;
  height: 121px;
  font-size: 12px;
  text-align: center;
  margin-top: 68px;
  padding: 0;
}

h3#shelfScreen a {
  text-decoration: none;
}

#shelfScreen #playLink {
  position: absolute;
    right: 50px;
    top: 142px;
    width: 107px;
}
  #shelfScreen #playButton {
    position: absolute;
    top: 88px;
    right: 79px;
    display: block;
    width: 51px;
    height: 51px;
    background: transparent url(../i/btn_video_play.gif) 0 0 no-repeat;
  }
  
  #shelfScreen:hover #playButton {
    background-position: 0 -51px;
  }

  #shelfScreen #playLink {
    color: #fff;
    font-size: 11px;
  }
  
 /* h3#shelfScreen {
    position: absolute;
    right: 50px;
    top: 142px;
    width: 107px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    padding: 0;
    margin: 0;
  }*/

.twitterPopup {
  position: absolute;
  right: 67px;
  bottom: 16px;
  width: 49px;
  height: 48px;
}

.trigger {
  position: absolute;
}

.popup {
  width: 200px;
  height: 58px;
  position: absolute;
  display: none; /* keeps the popup hidden if no JS available */
  background: transparent url(../i/twitterpopup.gif) 0 0 no-repeat;
  color: #333;
  padding: 16px 16px 35px 15px;
}

.popup ul {
  list-style-type: none;
  font-size: 11px;
  line-height: 13px;
  font-style: italic;
  margin: 0;
  padding: 0;
}

.popup ul li a {color: #319bdc; text-decoration: none;}

  .popup ul li a:hover {color: #10445a;}

.popup ul li span {
  display: block;
  font-size: 10px;
  margin-bottom: 2px;
}

.popup .jta-tweet-timestamp {
  color: #999;
}

#b_home #content {
  padding-top: 10px;
}

#introInner {
  width: 960px;
  margin: 0 auto;
}

  #introInner .col4 {
    width: 280px;
    padding: 30px 20px 10px 20px;
}

  #introInner h2 {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    font-size: 16px;
}

#introInner p {
  color: #b4b4b4;
  text-shadow: 1px 1px 1px #000;
}

.thumbWrap a {
  display: block;
  float: left;
  background-color: #000;
  text-decoration: none;
  border: 1px solid #6a6a6a;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  opacity: 0.6;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  padding: 2px;
  margin-right: 6px;
}

  .thumbWrap a.last {
    margin: 0;
  }

  .thumbWrap a:hover {
    border-color: #fff;
    -webkit-box-shadow: 0 1px 15px rgba(255,255,255,.5);
    -moz-box-shadow: 0 1px 15px rgba(255,255,255,.5);
    box-shadow: 0 1px 15px rgba(255,255,255,.5);
    opacity: 1;
  }

.thumbWrap img {
  display: block;
  background-color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 0;
  margin: 0;
}

.introBottom {
  position: absolute;
  bottom: 0;
  height: 46px;
}

  #introInner .introBottom .col9 p {
    text-shadow: none;
    color: #666;
    background: transparent url(../i/icon_speaker.png) 0 2px no-repeat;
    padding-left: 30px;
  }
  #introInner .introBottom .col9 p strong {
    color: #000;
  }

  .introBottom .col3 {
    text-align: right;
  }

    .introBottom .col3 a {
      color: #c3edfc;
      font-size: 18px;
      text-decoration: none;
      line-height: 46px;
      text-shadow: 1px 1px 0 #000;
      padding-right: 30px;
  }

    .introBottom .col3 a:hover {
      color: #fff06b;
    }

.features ul {
  list-style-image: url(../i/bullet_blue.gif);
}

.features ul li {
  font-size: 12px;
}

.testimonials blockquote p {
  font-family: Georgia, serif;
  font-style: italic;
}

.separator {
  height: 52px;
  background: transparent url(../i/separator_home.png) 0 0 no-repeat;
  overflow: hidden;
  margin: 20px 0;
}

.separator p {
  line-height: 52px;
  color: #dadada;
  margin: 0;
}

  .win .separator p {
    font-size: 13px;
  }

.separator p strong {
  color: #fff;
}

.separator p a {
  text-decoration: none;
}

.separator p a:hover {
  color: #fff;
  text-decoration: underline;
}

.separator .awesome {
  float: right;
  border: 1px solid #11a4ef!important;
  margin: 8px 0 0 10px;
}

.separator .col4 a:nth-child(2) {
  margin-left: 0;
}

#content .blogPosts img {
  float: left;
  vertical-align: text-bottom;
  margin-right: 5px;
}

  .webkit #content .blogPosts img {
    margin-top: 3px;
  }

#content .blogPosts h3 {
  padding-top: 0;
}

/* --- Homepage Blog Section --- */

.latestPost {
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px 0;
  margin: 20px 0;
}

  .latestPost h4, .latestPost p.postDetails {
    display: inline;
  }

.latestPost p.description {
  margin: 0;
}

ul.blogList {
  list-style-type: none;
  font-size: inherit;
}

  ul.blogList h4 {
    display: inline;
    font-size: inherit;
  }

ul.otherPosts {
  list-style: none;
  margin: 0;
}

  ul.otherPosts li {
    display: block;
    float: left;
    background: transparent url(../i/bullet_blue.gif) 0 10px no-repeat;
    width: 285px;
    padding-left: 15px
  }

    ul.otherPosts li.left {
      margin-right: 10px;
    }

    ul.otherPosts h5 {
      display: inline;
      font-size: 11px;
      font-weight: normal;
    }

    ul.otherPosts li span {
      font-size: 12px;
  }

#content ul.blogList li span {
  font-size: .786em;
}

ul.blogList li {
  margin: 10px 0;
}

/* ---- Homepage Sidebar ---- */


.sidebar {
  width: 298px;
}

.follow {
  float: left;
  margin: 20px 0;
}

.follow h3 {
  float: left;
}

.follow img {
  float: left;
  margin-left: 10px;
}
/* ---- Main Content ---- */


#contentWrapper {
  width: 100%;
  background-color: #fff;
  margin-top: 1px;
}

#content {
  width: 960px;
  padding: 40px 0;
  margin: 0 auto;
}

#mainContent {
  float: left;
  width: 640px;
}


  .col1 p {
    clear: both;
    margin: 0 0 20px 0;
  }
  
  .col1 h3 {
    padding: 0;
  }


.contentJacket {
  width: 960px;
  overflow: hidden;
  margin-bottom: 20px;
}


img.left {
  float: left;
  padding-top: 40px;
  margin-right: 20px;
}

img.right {
  float: right;
  padding-top: 40px;
  margin-left: 20px;
}


/* ---- Blog Components ---- */

#blogCol {
  float: left;
  width: 620px;
  padding: 0 10px;
}

#blogCol h2 a {text-decoration: none;}

  #blogCol h2 a:hover {text-decoration: underline;}

p.postDetails {
  font-size: 12px;
  color: #989898;
  margin: 0;
}

p.postFooter {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #ddd;
  padding: 5px 0;
  margin-bottom: 20px;
}

p.postFooter a {
  background: transparent url(../i/icon_comment.png) 0 0 no-repeat;
  padding-left: 20px;
}

img.iconLeft {
  float: left;
}

#twitterBox {
  width: 300px;
  padding: 10px
  margin: 40px 0;
}

  #twitterBox ul.jta-tweet-list {
    list-style-type: none;
    font-style: italic;
    font-size: 12px;
    background-color: #f3f9fa;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #c3edfc;
    padding: 10px;
    margin: 0 0 20px 0;
    line-height: 150%;
  }

  #twitterBox .jta-tweet-list-item:last-child {
    padding-bottom: 0;
  }

.roundBox.gray {
  background-color: #f6f6f6;
  border: 1px solid #c5c5c5;
}
  
    #twitterBox ul li a {color: #000;}
    #twitterBox ul li span a {color: #319bdc!important;}

/* ---- Blog Comment Form ---- */

.commentsWrap h3 {
  color: #BB1427;
  font-size: 20px;
  line-height: 24px;
  padding: 0;
}

.commentsWrap .addComment a {
  font-size: 13px;
  line-height: 24px;
}

.comment {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #ddd;
}

.comment.author {background-color: #FEFEE2;}

.comment h4 {font-size: 13px; margin-bottom: 5px}

.comment span {display:block; font-size:11px; line-height:130%; margin-bottom:5px;}

.addCommentForm {margin-top: 20px;}

.addCommentForm h3 {margin-bottom: 20px;}

  .addCommentForm dl {width: 620px; float: left;}

    .addCommentForm form label {
      font-size: 12px;
      font-weight: bold;
    }

      .addCommentForm form .checkbox label {color: #1a79b1;}


    .addCommentForm form dd.text input {
      height: 22px;
      width: 606px;
      font-size: 13px;
      color: #262626;
      padding: 10px 5px 5px 5px;
    }
    
    .addCommentForm form dd {
      margin-bottom: 10px;
    }
    
    .addCommentForm form dt {
      clear: both;
    }

    .addCommentForm form textarea {
      height: 100px;
      width: 606px;
      max-width: 606px;
      font-family: "myriad pro", Helvetica, Calibri, Arial, sans-serif;
      color: #262626;
      font-size: 13px;
      padding: 10px 5px 5px 5px;
    }
    
    
    .addCommentForm form dt.checkbox {
      float: left;
      width: 600px;
      text-align: right;
    }

  .addCommentForm form dd.checkbox {
        float: left;
        width: 20px;
        text-align: right;
      }
    
    input#postComment {
      float: right;
    }

/* ---- Blog Post Styles ---- */

.blogFloatRight {
  float: right;
  margin: 10px 0 10px 10px;
}

.blogFloatLeft {
  float: left;
  margin: 10px 10px 10px 0;
}

#b_blog .col8 img {
  border: 1px solid #bfbfbf;
  -moz-box-shadow: 0px 0px 10px #bfbfbf;
  -webkit-box-shadow: 0px 0px 10px #bfbfbf;
}

img.noShadow {
  -moz-box-shadow: none!important;
  -webkit-box-shadow: none!important;
  border: none!important;
}
img.fixShadowPadding {
  padding: 15px;
}

img.centered {
  display: block;
  margin: 0 auto;
}


#b_blog blockquote {
  margin: 10px 0 20px;
}

#b_blog blockquote p {
  font-family: Georgia, "Times New Roman", Serif;
  font-style: italic;
  border-left: 4px solid #cbf0fd;
  padding: 5px 10px;
  margin: 0;
}

#b_blog blockquote p.quoteSource {
  border-left-color: #444;
  font-family: "myriad pro", Helvetica, Calibri, Arial, sans-serif;
  font-style: normal;
}

#b_blog blockquote.pullQuote {
  float: right;
  width: 200px;  
  border-left: 4px solid #FBEA37;
  padding: 0 10px;
  margin: 5px 0 5px 10px;
}

#b_blog blockquote.pullQuote p {
  font: italic 1.2em/1.6em Georgia, "Times New Roman", Serif;
  color: #393939;
  margin: 0 0 10px 0;
}

#b_blog blockquote.pullQuote p strong {
  font-style: bold;
}

/* ---- Blog Sidebar ---- */

.blogSidebar .cats ul {
  list-style-type: none;
  margin: 10px 0 20px;
}

.blogSidebar .cats ul li {
  border-bottom: 1px solid #eee;;
}

.blogSidebar .cats a {
  text-decoration: none;
  display: block;
}


.facebookBox {
  background-color: #F3FAFA;
  border: 1px solid #679BCF;
  padding: 10px;
  margin-bottom: 20px;
}

  .facebookBox p {
    font-size: 1.2em;
    margin: 0;
  }
  
.facebookBox img {
  float: left;
  margin-right: 10px;
}

/* ---- Tour Page ---- */

#b_tour .wrap12 {
  margin-bottom: 40px;
}

#b_tour .col6 img {
  border: 1px solid #bfbfbf;
  -moz-box-shadow: 0px 0px 15px #bfbfbf;
  -webkit-box-shadow: 0px 0px 15px #bfbfbf;
}

#b_tour h2 {
  padding: 0px;
}

#b_tour p.intro {
  margin: 0 0 15px 0;
}

a.featureList {
  font-size: 1.2em;
  text-decoration: none;
}

a.featureList img {
  float: left;
  margin: -2px 0 0 0;
}

.benefits img {
  float: left;
  margin: 6px 5px 0 0;
}


/* ---- Demo Components ---- */


.padding10 {
  padding: 10px;
}

.demoBox {
  width: 280px;
  height: 160px;
  background: #333 url(/resources/i/demobox_bg.png) 0 0 no-repeat;
  color: #fff;
  text-align: center;
  margin: 30px 0 20px 0;
}

.demoBox h3 {
  font-size: 2.6em;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  padding: 0;
}

.demoBox p {
  color: #F1F1F1;
  text-shadow: 1px 1px 2px #000;
  margin: 0;
}


.demoStorefront, .demoAdmin {
  float: left;
  width: 300px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.demoStorefront {
  margin-right: 20px;
}

/* ---- Try page ---- */

.try_page_column {
  min-height: 120px;
}

/* --------------- Buy Pages ---------------- */

.buyIntro {
  margin-bottom: 20px;
}

.paySteps {
  float: left;
  width: 940px;
  margin-left: 10px;
  height: 40px;
  border: 1px solid #d2d2d2;
  background: transparent url(../i/progress_indicator/indicator-bg.png) repeat-x left top;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 25px;
  color: #999;
}

.paySteps.last_is_current {
  background: transparent url(../i/progress_indicator/indicator-bg-last-current.png) no-repeat left top;
}

.paySteps ul {
  margin: 0;
  padding: 0;
}

.paySteps ul li {
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  float: left;
  list-style: none;
  padding-left: 16px;
  background: transparent url(../i/progress_indicator/start.png) no-repeat left top;  
  color: #000;
  font-weight: bold;
  text-shadow: 1px -1px 1px #fff;
}

.paySteps ul li strong {
  display: block;
  height: 26px;
  width: 26px;
  line-height: 27px;
  text-align: center;
  border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  box-shadow: 1px 1px 0 rgba(200, 200, 200, .1);
  -webkit-box-shadow: 1px 1px 0 rgba(200, 200, 200, .1);
  -moz-box-shadow: 1px 1px 0 rgba(200, 200, 200, .1);
  text-shadow: -1px -1px 0 #fff;
  background-color: #eee;
  border: 1px solid #fff;
  color: #666;
  float: left;
  font-size: 18px;
  margin: 7px 10px 7px 0;
}

  .gecko .paySteps ul li strong {line-height: 28px; margin-top: 6px;}

.paySteps ul li.current strong {
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .7);
  text-shadow: 1px 1px 0 #000;
  background-color: #032b40;
  border: 1px solid #3d7998;
  color: #fff;
}

.paySteps ul li.first {
  background: transparent;
  font-size: 18px;
  color: #666;
}

.paySteps ul li.first span {
  padding-left: 0;
}

.paySteps ul li span {
  height: 40px;
  display: block;
  color: #666666;
  font-weight: normal;
  padding: 0 10px;
  background: transparent url(../i/progress_indicator/indicator-bg.png) repeat-x left top;
}

.paySteps ul li.current {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  background: transparent url(../i/progress_indicator/start-current.png) no-repeat left top;
}

.paySteps ul li.current span {
  color: #fff;
  background: transparent url(../i/progress_indicator/current-bg.png) repeat-x left top;
}

.paySteps ul li.prev-current {
  background: transparent url(../i/progress_indicator/start-prev-current.png) no-repeat left top;  
}

.devFaq {
  background-color: #fcfcfc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #f2f2f2;
  margin-top: 40px;
}

.devFaq h3 {
  margin: 10px 0 20px 0;
}

/* ---- Footer ---- */

#footer {
  position: relative;
  margin-top: -152px; /* negative value of footer height */
  height: 72px;
  padding-top: 80px;
  background: transparent url(../i/footer_bg.png) 0 0 repeat-x;
  clear:both;
}

  #footer p {
    font-size: 12px;
    color: #808080;
  }

  #footerContent {
    width: 960px;
    margin: 0 auto;
  }
  
  p#copyright {float: left;}
  p#siteby {float: right;}
  
  #footer a {color: #63addb; text-decoration: none;}
  #footer a:hover {color: #fff;}


#footer ul {
  width: 640px;
  float: left;
  line-height: 14px;
  list-style-type: none;
  font-size: 12px;
  margin: 0
}

#footer ul li {
  display: inline;
}

#footer .payments {
  float: right;
  width: 160px;
}

#footer .payments img {
  float: right;
  margin-left: 5px;
}


/* =Tables
   ----------------------------------------------------*/

table {
  width: 100%;
  font-size: 12px;
  margin: 10px 0 20px 0;
}


table th {
  font-weight: bold;
  color: #fff;
  border: 1px solid #555;
  background-color: #333;
  padding: 5px;
}

table td {
  border: 1px solid #ddd;
  background-color: #eee;
  padding: 8px 5px;
}

table tr.even td {
  background-color: #f9f9f9;
}

table.clickable tr:hover {
  cursor: pointer;
}

table.clickable tr:hover td {
  background-color: #fff;
}

table a {
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
}

/* =My Account
   ----------------------------------------------------*/


 .sidebarNav {
  margin: 0 0 20px 0;
}

.sidebarNav.roundBox {
  padding: 0;
}
  .sidebarNav ul {
    list-style: none;
    margin: 0;
  }

  .sidebarNav li {
    height: 32px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #dae8ef;
    line-height: 32px;
    padding: 0 10px;
    margin: 0;
  }
  
    .sidebarNav li.first {
      border-top: none;
    }
    .sidebarNav li.last {
      border-bottom: none;
    }

    .sidebarNav li img {
      display: block;
      float: left;
      margin: 6px 4px 0 0;
    }
  
  .sidebarNav li a {
    color: #333;
    text-shadow: 1px 1px 0px #fff;
    text-decoration: none;
  }
  
    .sidebarNav li:hover a, .sidebarNav li a:hover {
      color: #319bdc;
    }

    .sidebarNav li:hover {
      cursor: pointer;
    }

#referralCode.roundBox {
  width: auto;
  padding: 10px;
  margin: 20px 0;
}

   #referralCode.roundBox p {
     font-size: 12px;
  }

/* =Buttons
   ----------------------------------------------------*/

.buttons {
  line-height: 1;
}

.awesome, .awesome:visited {
  display: inline-block; 
  padding: 5px 10px 6px; 
  color: #fff; 
  text-decoration: none;
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.55);
  line-height: 1;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
}

.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited { font-weight: bold; line-height: 1.4em; text-shadow: 0 -1px 1px rgba(0,0,0,0.45); }
.large.awesome, .large.awesome:visited { font-size: 16px; line-height: 1.6em; padding: 8px 14px 9px; }
.medium.awesome, .medium.awesome:visited { font-size: 14px; line-height: 1.6em; padding: 6px 10px 6px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; }

.blue.awesome, .blue.awesome:visited {
  background-color: #00517a;
  background: -moz-linear-gradient(top, #128cca, #00517a);
  background: -webkit-gradient(linear, left top, left bottom, from(#128cca), to(#00517a));
  color: #fff!important;
  border: 1px solid #003e5e;
}
.blue.awesome:hover {
  background-color: #046ca0;
  background: -moz-linear-gradient(top, #11a4ef, #00517a);
  background: -webkit-gradient(linear, left top, left bottom, from(#11a4ef), to(#00517a));
  border: 1px solid #000;
}
.yellow.awesome, .yellow.awesome:visited {
  background-color: #ffc900;
  background: -moz-linear-gradient(top, #ffea7b, #ffc900);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffea7b), to(#ffc900));
  border: 1px solid #d1a100;
  color: #444;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.85);
}
.yellow.awesome:hover {
  background-color: #deac05;
  color: #000;
  background: -moz-linear-gradient(top, #ffea7b, #fdad00);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffea7b), to(#fdad00));
}
.white.awesome, .white.awesome:visited {
  background-color: #00517a;
  background: -moz-linear-gradient(top, #fff, #eee);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  border: 1px solid #CCC;
  color: #666;
  text-shadow:0 1px 1px #FFFFFF;
}
.white.awesome:hover {
  background-color: #046ca0;
  background: -moz-linear-gradient(top, #fff, #c8c8c8);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c8c8c8));
  border: 1px solid #adadad;
  color: #444;
  text-shadow: 1px 1px 0 #FFFFFF;
}

/*
 * Round button
 */

.round_button {
  font: bold 13px/1 Arial,Helvetica,Verdana,sans-serif;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

  border:1px solid rgba(0, 0, 0, 0.25);
  padding:0;
  
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  color: #FFFFFF !important;
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  width: auto;
}

.round_button.small {
  font-size: 11px;
}

.round_button span {
  border-top:1px solid rgba(255, 255, 255, 0.2);
  display:block;
  line-height:1;
  padding:4px 15px 6px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
}

.round_button.small span {
  font-weight:normal;
  padding: 2px 10px 4px;
}

.round_button.white {
  background: -moz-linear-gradient(top, #fff, #eee);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  color:#666666 !important;
  text-shadow:0 1px 1px #FFFFFF;
}

.round_button.white:hover {
  background: -moz-linear-gradient(top, #e6e6e6, #c8c8c8);
  background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#c8c8c8));
  color: #444444!important;
}

.round_button.white hover span {
  border-top: none;
}

.round_button.green {
  background-color: #91BD09;
  background: -moz-linear-gradient(top, #9fc01b, #82a400);
  background: -webkit-gradient(linear, left top, left bottom, from(#9fc01b), to(#82a400));
}

.round_button.green:hover {
  background: -moz-linear-gradient(top, #86a419, #688600);
  background: -webkit-gradient(linear, left top, left bottom, from(#86a419), to(#688600));
}

/* =MISC. STYLES
   ----------------------------------------------------*/

.marginTop {
  margin-top: 20px;
}

.introBlock {
  margin: 10px 0 20px 0;
}

.roundBox {
  background-color: #f3f9fa;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #c3edfc;
  padding-top: 10px;
}

.roundBox.gray {
  background-color: #f6f6f6;
  border: 1px solid #c5c5c5;
}

.info {
  background-color: #F3F9FA;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #c3edfc;
  padding: 5px 10px;
  margin-bottom: 10px;
}

  .info img {
    float: left;
    margin: 2px 10px 0 0;
  }
  
  .info p {
    color: #09486B;
    font-size: 1.2em;
    margin: 0;
  }

#shelfScreen span#playButton,
form input#subscribeButton,
a#tourButton,
a#downloadButton,
#b_home #topContent h2 {      /*----Add image replaced element here----*/
    letter-spacing: -10000em;
    text-indent: -99999em;
    overflow: hidden;
}


.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ~~~~~~~~~~~ STICKY FOOTER ~~~~~~~~~~~ */

* {margin:0;padding:0;} 

html, body, #wrapper {height: 100%;}

body > #wrapper {height: auto; min-height: 100%;}

#contentWrapper {padding-bottom: 161px;}  /* must be same height as the footer */

/* ---- Pagination ---- */


div.pagination {
  padding-top: 1em;
}

div.pagination p {
  padding-bottom: 0.2em;
  margin: 0;
  color: #666666;
  text-align: center;
}

div.pagination strong {
  color: #333;
}

div.pagination p.pages {
  color: #ccc;
  margin-top: -0.5em;
}

div.pagination a {
  text-decoration: none;
}

div.pagination span.numbers {
  color: #333;
}

div.pagination span.arrow {
  font-family: Helvetica,Arial,Tahoma,Verdana,Helvetica,sans-serif;
}

/*
 * Popup boxes
 */

.popupbox {
  border: 3px solid #6699CC;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: white;
}

  .popupbox h4 {
    font: normal 20px/100% Helvetica, Arial, sans-serif;
    padding: 10px;
    color: #333;
    border-bottom: 1px dotted #666;
  }
  
  .popup_content {
    padding: 10px 14px 10px 10px;
  }
  
.fancy-bg {
  display: none;
}

#fancybox-outer {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);  
}