/*@import "rich-buttons.less";*/

/*Less*/
@basefontsize: 14px;
@smallfontsize: 12px;
@mediumfontsize: 16px;
@largefontsize: 20px;
@xlargefontsize: 24px;

@basefont: 14px "Helvetica Neue",Arial,Verdana,sans-serif;
/*@basefont: 14px/160% "Helvetica Neue",Arial,Verdana,sans-serif;*/
@basefontcolor: #4C4C4C;

@baselinkcolor: #008FE6;
@basehovercolor: #0061a7;

@titlecolor: #333333;
@borderradius: 5px;

@tablethbg: #DCE9EF;
@tabletdbg: #F5F9FB;
@tabletdaltbg: #E6EFF4;
@tableborder: #BAD2DE;

@windowbg: #F5F9FB;
@windowborder: #BAD2DE;
@windowheaderbg: #DCE9EF;

@windownoticebg: #FFF8F3;
@windownoticeborder: #E2BFA7;

.rounded_corners (@radius: @borderradius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.shadow (@hoff: 3px, @voff: 3px, @blurr: 5px, @spreadr:5px, @col:#999999) {
  -moz-box-shadow: @hoff @voff @blurr @spreadr @col;
  -webkit-box-shadow: @hoff @voff @blurr @spreadr @col;
  box-shadow: @hoff @voff @blurr @spreadr @col;
}

.transition(@prop:all, @speed:.1s, @ease:linear){
  -webkit-transition: @prop @speed @ease;
	-moz-transition: @prop @speed @ease;
	transition: @prop @speed @ease;
}

/*End less*/
h1,h2,h3,h4,h5,h6, .title {
  color: @titlecolor;
}
h1.title {
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: bold;
} 
h2.title {
  margin-bottom: 10px;
  font-size: 23px;
  font-weight: bold;
}
h3.title {
  margin-bottom: 7px;
  font-size: @mediumfontsize;
  font-weight: bold;
}
h4.title {
  margin-bottom: 0px;
  font-size: @basefontsize;
  font-weight: bold;
}

.whiteTitle{
  color: #fff;
}

body {
  background: transparent url(/images/bg_repeat.png) top left repeat-x;
  font: @basefont;
  color: @basefontcolor;
  line-height: 160%;
  -webkit-text-stroke: 1px transparent;
  
  a, a:focus, a:hover, a:active, a.visited {
    color: @baselinkcolor;
    .transition(color, .1s, linear);
    text-decoration: none;
  }
  
  a:active, a:focus{
    outline: none;
  }

  a:hover{
    color: @basehovercolor;
  }
  
  a.darklink {
    a {
      text-decoration: none;
      font-weight: bold;
      color: #009FFF;
    }
    
    a:hover {
      color: #4bbbff;
    }
  }
}

/* menu */
#header .menu {
    position: relative;
    float: right;
    right: 0;
    margin: 0;
    line-height: 27px;
    font-size: @basefontsize;
    
    .btn_div {
      float: left;
      position: relative;
      top: 2px;
    }
    
    .larger_links {
      overflow: hidden;
      font-size: 17px;
      float:left;
      margin-right: 10px;
      
      a {
        background: url("/images/divLines_topNav.png") no-repeat scroll left center transparent;
        display: inline-block;
        margin-left: -1px;
        padding: 0 6px 0 10px;
        line-height: 18px;
        text-decoration: none;
        font-weight: bold;
        color: #009FFF;
      }
      
    a.active {
        color: #fff;
    }
    
    a:hover {
      color: #4bbbff;
    }
  }
}

/*Header*/

div#header {
  width: 100%;
  height: 75px;
  background: transparent url(/images/bg-header.png) top left repeat-x scroll;
  
  div.container div.wrap {
    padding-top: 30px;
  }
  
  #rich_logo {
    a {
      display: block;
      height: 27px;
      width: 125px;
      background: transparent url(/images/logo-rich-medium.png) top right no-repeat;
    }
  }
  
  #menu {
    line-height: 120%;
    padding-top: 5px;
    
    ul {
      list-style: none;
      display: block;
      float: right;
      margin: 0px;
      
      li {
        display: block;
        height: 18px;
        float: left;
        margin-right: 10px;
        padding-left: 10px;
        
        a {
/*          font-size: 18px;*/
          font-weight: bold;
        }
      }

      li.txt {
        padding-top: 5px;
      }
      
      li.br {
        margin-right: 0px;
        padding-right: 10px;
        border-right: 1px solid #353535;
      }
    }
  }
}

/*Feature area*/

div#feature_area {
  text-align: center;
  
  #title {
    margin-top: 25px;
    
    h1 {
      font-size: 3em;
      color: #333333;
      margin-bottom: 5px;
    }

    p {
      font-size: 1.3em;
      margin-bottom: 0;
    }
  }
  
  div#screenshots_top {
    height: 384px;
    background: transparent url(/images/featureArea_top.png) top center no-repeat;
    position: relative;
    
    div#watch_the_video {
      width: 412px;
      height: 338px;
      
      position:absolute;
      left:268px;
      top:30px;      
    }
    
    div#watch_the_video.hover {
      background: transparent url(/images/watch_video.png) top left no-repeat;
      cursor: pointer;
    }    
  }

  div#screenshots_bottom {
    height: 65px;
    background: transparent url(/images/featureArea_bottom.png) top center no-repeat;
  }
  
  div#signup {
    padding-left: 395px;
    margin-top: 5px;
    
    p {
      color: #777777;
      float:left;
      font-size:14px;
      line-height:36px;
      padding-left:10px;
    }
  }
}

div#gradient_under_feature_area {
  height: 25px;
  border-top: 1px solid #bdbdbd;
  background: white url(/images/gradient_under_featureArea.png) top center no-repeat;
  text-align: center;
  color: #787878;
  font-size: 14px;
  padding-top: 5px;
  margin-bottom: 15px;
  
  img {
    margin-left: 5px;
    margin-right: 5px;
  }
}

div#tour_teaser {
  h4 {
    color: #333333;
    margin-bottom: 5px;
  }
  
  div.item {
    width: 200px;
    padding-left: 15px;
  }
  
  #tour_cta {
    font-size: 1.4em;
    margin-top: 1.5em;

    div {
      padding-left: 375px;
      
      p {
        float: left;
        font-size: 15px;
        line-height: 36px;
        padding-left: 10px;
      }
    }
  }
}

div#awards {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

div#bottom_area {
  width: 100%;
  background-color: white;
}

div#footer {
  background-color: #000000;
  padding-top: 20px;
  text-shadow: 0 1px 1px #20201F;
  width: 100%;
  
  height: 150px;
  position: relative;

  div.burt-overview {
    width: 130px;
    float: left;
    margin-right: 20px;
    
    h5 {
      color: white;
      margin: 0px;
      margin-bottom: 0px;
      padding-bottom: 0px;
      font-weight: normal;
    }

    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
    }

    a {
      font-weight: normal;
    }
  }
  div.burt-chat {
    color: #777;
    width: 310px;
    float: left;
    margin-right: 20px;
    
    h5 {
      color: white;
      margin: 0px;
      margin-bottom: 0px;
      padding-bottom: 0px;
      font-weight: normal;
    }

    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
    }

    a {
      font-weight: normal;
    }
  }
  
  div.copy {
    margin-top: 45px;
    text-align: right;
  }
}

/*Contact*/

#overlay_contact {
  width: 450px;
  padding: 40px;
  
  h1 {
    color: #4C4C4C;
    font-weight: bold;
  }
  
  p {
    font-size: 120%;
  }
}

div.overlay {
  display: none; 
  z-index: 10000;
  background-image: url(/images/blank.gif) !important; 
  text-align: left;
  
  h1 {
    margin-left: 0; font-size: 22px
  }
  
  .loading {
    background-color: #000;
    height: 200px;
    display: block;
  }
  
  .close {
    background-image: url(/images/overlay/icon-cross.png);
    position: absolute;
    right: -2px;
    top: -3px;
    cursor: pointer;
    height: 27px;
    width: 27px;
  }
  
  .wrap {
    background-color: #000;
    border: 1px solid #474747;
  }
  
  div#video_signup {
    padding-left: 250px;
  }
}


/*Tour*/

body#richmetrics {
  div.padded {
    padding-top: 18px;
  }
  h1 {
    font-size: 23px;
    font-weight: bold;
  }
  
  h2 {
    font-size: 16px;
    font-weight: bold;
  }
}


/*Header shadow*/

#shadow_header {
    background: url("/images/gradient_under_header.png") no-repeat scroll top center white;
    border-top: 1px solid #BDBDBD;
    height: 18px;
}

/*
*   Pagebar
*/
#pagebar {
    background: url("/images/bg_pagebar_bottom.png") repeat-x scroll left bottom transparent;
    position: relative;
    padding-bottom: 15px;
    color: #707070;
}
#pagebar h1.title {
    margin: 20px 0 5px;
    font-size: 30px;
    font-weight: bold;
}

#tour_content {
  h2 {
    color: #4C4C4C;
    font-weight: bold;
  }
  
  p {
    font-size: 1.2em;
  }
  
  .usp {
    background-color: white;
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    
    .text {
      padding-left: 20px;
    }
    
    .picture {
      text-align: right;
      padding-right: 20px;
    }
  }
  
  div#tour_signup {
    height: 30px;
    margin-bottom: 50px;
    padding-left: 255px;
    
    p {
      line-height: 36px;
      padding-left:10px;
      float: left;
    }
  }
}


//Not all used but grabbed from rich-reports.css from rich3
/*
*   Reports
*/
#left_column_subnav {
    background: url("/images/bg_left_column_subnav.png") no-repeat scroll right top transparent;
    margin-top: -18px;
    padding-top: 18px;
    padding-bottom: 250px;
    margin-right: 20px;
}
.title.reports {
    background: url("/images/icon_reports.png") no-repeat scroll left center transparent;
    padding-left: 23px;
    line-height: 21px;
}
#left_column_subnav .nav {
    background: url("/images/bg_left_column_subnav_separator.png") no-repeat scroll left bottom transparent;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#left_column_subnav .nav ul {
    list-style: none;
    margin: 0;
        padding-left: 0px;
}
#left_column_subnav .nav ul li {
    padding-left: 0px;
}
#left_column_subnav .nav ul li a {
    display: block;
    height: 24px;
    width: 220px;
    line-height: 24px;
    font-weight: bold;
}
#left_column_subnav .nav ul li.active a {
    background: url("/images/subnav_active.png") no-repeat scroll 0 0 transparent;
    padding-left: 10px;
    color: #333333;
    cursor: default;
}
#left_column_subnav .nav ul li.focus a {
  outline: none;
}

/* links */
#left_column_subnav .links a {
    display: block;
}
.icon_ti {
    background: url("/images/icon_instructions.png") no-repeat scroll left center transparent;
    padding-left: 23px;
}
.icon_mc.active, .icon_ti.active {
  background: url("/images/subnav_active.png") no-repeat scroll left center transparent;
  padding-left: 10px;
  color: #333333;
  cursor: default;
  font-weight: bold;
  width: 229px;
}
.icon_mc {
    background: url("/images/icon_manage.png") no-repeat scroll left center transparent;
    padding-left: 23px;
}
.icon_faq {
    background: url("/images/icon_faq.png") no-repeat scroll left center transparent;
    padding-left: 23px;
}
.icon_doc {
    background: url("/images/icon_docu.png") no-repeat scroll left center transparent;
    padding-left: 23px;
}

/*
* Rich buttons Styles
*/

/*Less Variables*/
@btn_main_color:#007bc5;
@btn_main_hover:@btn_main_color - #111; 

@btn_fontsize: 13px;
@btn_fontsize_s: 11px;
@btn_fontsize_m: 13px;
@btn_fontsize_l: 20px;

@btn_font_color: #ffffff;

@btn_disabled_color:#cdcdcd;

.btn_shadow{
  .shadow(0px, 1px, 3px, 0px, #999999);
}

.padding(@top: 2px, @right: 2px, @btm: 2px, @left:2px){
    padding: @top @right @btm @left;
}

.btn_padding{
  .padding(4px, 9px, 5px, 9px);
}

/*End Less Variables*/

.btn {
	margin-bottom: 0px;
	text-decoration: none;
  font-size: @btn_fontsize;
  font-weight: bold;
  line-height: 14px;
  background: url("/images/awesome-overlay.png") repeat-x scroll 0 @btn_main_color;
  display: inline-block;
  color: @btn_font_color;
  .rounded_corners;
  .btn_shadow;
  .btn_padding;
	.transition(background-color, .15s, linear);
  border-bottom: 1px solid #0272be;
  position: relative;
  cursor: pointer;
  float: left;
}

.darkBg {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-bottom: none;
}

a:focus.btn {
  color: @btn_font_color;
}
a:hover.btn {
	color: @btn_font_color;
  border-bottom: 1px solid #045189;
  background-color: @btn_main_hover;
 .transition(background-color, .15s, linear);
  margin-bottom: 0px;
}
a:visited.btn {
  color: @btn_font_color;
}
a:active.btn {
  color: @btn_font_color;
  border-bottom: none;
  margin-bottom: 1px;
}
.small {
  font-size: @btn_fontsize_s;
}
.medium {
  font-size: @btn_fontsize_m;
}
.large {
  font-size: @btn_fontsize_l;
  line-height: 26px;
  .padding(4px, 15px, 5px, 15px);
}

.btn.disabled {
  background-color: @btn_disabled_color;
  border-bottom: 1px solid #cdcdcd;
  text-shadow: none;
  .shadow(0px, 1px, 3px, 0px, #cdcdcd);
  cursor: default;
  
  :active {
    top: 0px;
  }
  
  :hover {
    border-bottom: 1px solid #CDCDCD;
  }
}


/*Tour*/

.tour_box {
  margin-bottom: 18px;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.end {
    border-bottom: none;
}

.tour_image {
  float: right;
  border: 1px solid #DEDEDE;
  .rounded_corners;
  padding: 1px;
  margin: 2px 0px 20px 20px;
}

.tour_image_header{
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/*Price plan*/
.window {
  background-color: #f5f9fb;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid #bad2de;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 1px 5px 0px #bad2de;
  -webkit-box-shadow: 0px 1px 5px 0px #bad2de;
  box-shadow: 0px 1px 5px 0px #bad2de;
}

#your_plan {
  margin-bottom: 20px;
  .window.free {
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    
    .headerBg{
      background-color: #eeeeee;
      border-bottom: 1px solid #dfdfdf;
    }
  }
  .window.basic {
    .headerBg{
      background-color: #cddee4;
    }
  }
  .window.pro {
    .headerBg{
      background-color: #d9e7eb;
    }
  }
  position: relative;
  .headerBg {
    padding-top: 10px;
    top: 0px;
    margin-top: -10px;
    -webkit-border-top-left-radius: @borderradius;
    -webkit-border-top-right-radius: @borderradius;
    -moz-border-radius-topleft: @borderradius;
    -moz-border-radius-topright: @borderradius;
    border-top-left-radius: @borderradius;
    border-top-right-radius: @borderradius;
    background-color: #e7f1f5;
    height: 70px;
    border-bottom: 1px solid #d5e3eb;
  }
  .misc_features {
    margin: 10px 0 10px;
    p {
      margin:0 0 0 0;
    }
  }
  .imp_features {
     padding-top: 10px;
      h4 {
        margin-bottom: 0px;
      strong {
        font-size: @basefontsize+5;
      }
    }
  }
  .price {
    font-size: @basefontsize;
    display: block;
    margin-top: -11px;
    margin-bottom: 9px;
    strong {
      font-size: @basefontsize+6;
    }
  }
  .item {
    padding: 10px 0px 15px 0px;
    text-align: center;
    height: 280px;
    position: relative;
    .transition(background-color, .1s, linear);

    .title {
      font-size: 36px;
      margin-bottom: 13px;
    }
 }
}

.spacer {
  float: right;
  height: 40px;
  margin-bottom: 20px;
}

.span-less {
  width: 220px;
}