/*===========================================================================

Coolfront Colors:

#005955 QSP Green
#c39909 QSP Gold
5ba8dd

#75AADB Primary Blue
#0084C9 Hilite Blue
#3F6075 Dark Blue
#BAD80A Hilite Green
#1EB53A Dark Green
#D62828 Red
#717174 Gray


/*===========================================================================
  General Styles
===========================================================================*/
html {
    /* Prevent font scaling in landscape */
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
body   { margin:0; padding:0; font:14px arial; background: none;}
input  { font-size:inherit; padding:2px 4px; }
select { font-size:1.2em; padding:4px; }

html{
  min-height:100%;
  background: #F0F9FC; /* Old browsers */
  background: -moz-linear-gradient(top,  #F0F9FC 5%, #BCD3E5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#F0F9FC), color-stop(100%,#BCD3E5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #F0F9FC 5%,#BCD3E5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #F0F9FC 5%,#BCD3E5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #F0F9FC 5%,#BCD3E5 100%); /* IE10+ */
  background: linear-gradient(top,  #F0F9FC 5%,#BCD3E5 100%); /* W3C */
}


/*===========================================================================
  Page
===========================================================================*/
.page {
  position: relative;
  margin: auto;
  min-height: 100%;
  top: 0;
}


/* BIG SCREENS */
@media screen and (min-device-width: 1025px) {

  html {
    /* Allow scaling on computers */
    -webkit-text-size-adjust: auto;
    -ms-text-size-adjust: auto;
  }

  .page{
    border: 1px solid #888;
    border-top: 0;
   /* -moz-box-shadow:     0 1px 10px 0px black;
    -webkit-box-shadow:  0 1px 10px 0px black;
    box-shadow:          0 1px 10px 0px black;*/
  }

}


.page{
  background: #fff;
}

.pageBackground{
  width:100%;
  height:100%;
  background:#fff;
  position:absolute;
  top:0;
  left:0;
}

.page hr {
  border: 0;
  border-top: 1px solid #ccc;
}

.page{
  min-height: 480px
}


/*===========================================================================
  Buttons
===========================================================================*/
.button{
  white-space:      nowrap;
  display:          inline-block;
  padding:          8px 16px;
  margin:           0;
  font-weight:      bold;
  text-align:       center;
  text-decoration:  none;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -ms-user-select:      none;
  -moz-user-select:     none;
  -webkit-user-select:  none;
  user-select:          none;
  border-radius:    4px;
  cursor:           pointer;

  color:              #fff;
  border:             1px solid #33C;
  border-top:         1px solid #77F;
  border-bottom:      1px solid #003;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        0 -1px 2px #003;

  background: #0084C9; /* Old browsers */
  background: -moz-linear-gradient(top,  #0084C9 0%, #1B3B90 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0084C9), color-stop(100%,#1B3B90)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #0084C9 0%,#1B3B90 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #0084C9 0%,#1B3B90 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #0084C9 0%,#1B3B90 100%); /* IE10+ */
  background: linear-gradient(top,  #0084C9 0%,#1B3B90 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084C9', endColorstr='#1B3B90',GradientType=0 ); /* IE6-9 */
}

.button:active,
.button:active{
  background: #728cff; /* Old browsers */
  background: -moz-linear-gradient(top,  #0038b2 0%, #728cff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0038b2), color-stop(100%,#728cff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #0038b2 0%,#728cff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #0038b2 0%,#728cff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #0038b2 0%,#728cff 100%); /* IE10+ */
  background: linear-gradient(top,  #0038b2 0%,#728cff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0038b2', endColorstr='#728cff',GradientType=0 ); /* IE6-9 */
}


.graybutton{
  white-space:      nowrap;
  display:          inline-block;
  padding:          8px 16px;
  margin:           0;
  font-weight:      bold;
  text-align:       center;
  text-decoration:  none;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -ms-user-select:      none;
  -moz-user-select:     none;
  -webkit-user-select:  none;
  user-select:          none;
  border-radius:    4px;
  cursor:           pointer;

  color:              #777777;
  border:             1px solid #b0b0b0;
  border-top:         1px solid #b0b0b0;
  border-bottom:      1px solid #b0b0b0;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        1px 1px 0px #ebe8eb;

  background: #ededed; /* Old browsers */
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background: -moz-linear-gradient(top,  #e0dde0 0%, #cccccc 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0dde0), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #e0dde0 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #e0dde0 0%,#cccccc 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #e0dde0 0%,#cccccc 100%); /* IE10+ */
  background: linear-gradient(top,  #e0dde0 0%,#cccccc 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0dde0', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}


.footerLinks{
  text-align:center;
  margin:16px auto;
  color: #717174;
}

.footerLinks a {
  padding: 8px;
  text-decoration :none;
  color: #0084C9;
}

.footerLinks a:hover {
  color:#00f;
  text-decoration: underline;
}

/*===========================================================================
  Marketing/Home page
===========================================================================*/
body {
  font-family: Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
}

h2{
  margin-top: 16px;
  margin-bottom: 8px;
  color: #274196;
}

.footer h2{
  margin-top: 16px;
  margin-bottom: 8px;
  color: #ffffff;
}

a.home {
  text-decoration: none;
  color: #75AADB;
}

a.home:hover {
  text-decoration: underline;
  color: #00f;
}

ol, ul{
  color: #717174;
  font-size: 1.0em;
 }

.page, .footerLinks{
  max-width: 800px;
}

.banner{
  background: url('../images/clouds.jpg') no-repeat center bottom;
  height: 400px;
  position:relative;
  border-top: 6px solid #5ba8dd;
}

.banner{
  border-bottom: 6px solid #5ba8dd;
}

.footer .footerDivider{
  border-top: 6px solid #5ba8dd;
  margin-top:10px;
}

.banner .byline{
  font-size: 1.3em;
  font-weight: normal;
  font-style: italic;
  position:absolute;
  top: 0;
  left: 0;
  -moz-border-bottom-right-radius: 12px;
  -webkit-border-bottom-right-radius:12px;
}


.banner .byline, .banner .trades{
  position:absolute;
  margin:0;
  padding:0.7em 1.2em;
  background:#5ba8dd;
}

.banner .byline{ padding-top:     4px; }
.banner .trades{ padding-bottom:  4px; }


.banner .byline, .banner .byline a, .banner .trades{
  color: #ffffff;
}

.banner .byline a {
  text-decoration: none;
}

.banner .byline a:hover {
  text-decoration: underline;
}

.block  a{
    text-decoration: none;
    color: #ffffff;
  }

  .block  a:hover{
    text-decoration: underline;
  }

  .block ul{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.0em;
  }

  .block li{
    padding-bottom: 15px;
    margin-left: 1em;
    color: #ffffff;
  }

.banner .byline .psi {
  font-weight: bold;
  text-transform:uppercase;
}

#logo{
 margin-left: 12em;
  text-align: center;
}

.banner .tagline{
  color:#717174;
  font-size: 2.0em;
  font-weight: normal;
  margin:0;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 0;
  text-align: center;
  text-transform:uppercase;
}

.banner .trades {
  white-space: nowrap;
  font-weight: normal;
  bottom:0;
  right:0;
  -moz-border-top-left-radius: 12px;
  -webkit-border-top-left-radius:12px;
}

.content{
  padding: 8px;
}

.login {
  position: absolute;
  top:    12px;
  right:  6px;
}

.stats, .embeddedVideo, .columnText  {
  float:left;
  min-width: 280px;
  width: 45%;
}

.stats, .embeddedVideo, .videoList, .block, .columnText, .singleColumn {
  margin: 0 18px;
}

.stats, .embeddedVideo, .videoList, .columnText {
  margin-bottom:16px;
  min-width: 280px;
}

 .columnText p, .singleColumn p{
  color: #717174;
  font-size: 1.2em;
 }

.block {
  margin-top:8px;
  margin-bottom:8px;
  float:left;
  width: 40%;
}

.block table {
  border-collapse: collapse;
  border-spacing: 0;
}

.block table td {
  vertical-align: top;
}

.block img {
  margin-right:8px;
}

.stats{
  color: #777;
  font-weight: bold;
}

.stats table{
  margin-left:22px;
}

.stats td{
  padding: 2px 4px;
  font-size: 1.1em;
}

.whatsIncluded td{
  color: #717174;
}

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

.signupbottom {
  padding:10px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

.signuptop h3, .signupbottom h3 {
  display: inline-block;
  margin: 8px 0;
  position: relative;
  top: 2px;
}

.videoList .title{
  color: #0084C9;
  padding-bottom:6px;
  font-size: 1.1em;
  font-weight: bold;
}

.videoList p{
  border-bottom: 1px solid #ddd;
  min-height: 72px;
  margin: 0;
}

.videoList p span{
  display:block;
}

.videoList a {
  text-decoration: none;
  color: #717174;
  padding:8px;
  padding-left: 98px;
  display: block;
  min-height: 75px;
  background: url('../images/play-video.png') 8px 8px no-repeat;
  outline:none;
}

.videoList a:hover{
  color: #0084C9;
  background: url('../images/play-video-hover.png') 8px 8px no-repeat #F0F9FC;
}

.faq .question{
  color: #000000;
  font-size: 1.1em;
  font-weight: bold;
}

.faq .answer{
  color: #717174;
  font-size: .9em;
  margin-bottom: 25px;
  margin-left: 20px;
}

.coolFact, .footer{
  clear:both;
}

.coolFact h2{
  color: #BAD80A;
  background-color:#3F6075;
  float:left;
  font-weight: normal;
  margin: 0;
  margin-right: 8px;
  -moz-border-top-left-radius:        12px;
  -webkit-border-top-left-radius:     12px;
  -moz-border-bottom-left-radius:     12px;
  -webkit-border-bottom-left-radius:  12px;
}

.coolFact .fact{
  background:#BAD80A;
  color: #3F6075;
  margin-left:92px;
  -moz-border-top-right-radius:       12px;
  -webkit-border-top-right-radius:    12px;
  -moz-border-bottom-right-radius:    12px;
  -webkit-border-bottom-right-radius: 12px;
  -moz-border-bottom-left-radius:     12px;
  -webkit-border-bottom-left-radius:  12px;
}

.coolFact h2, .coolFact .fact{
  font-size: 1em;
  font-style: italic;
  padding: 8px 20px;
}

.coolFact{
  margin: 16px;
}

.signuptop, .signupbottom{
  clear:both;
}

.footer {
   position:relative;
   bottom:0;
   width:100%;
   min-height:200px;   /* Height of the footer */
   background:#32434a;
}

.footer .copyright {
  display: inline-block;
  margin-top:10px;
  margin-left:10px;
  text-align: left;
  padding: 8px;
  color: #aaaaaa;
  font-size: .8em;
}

.footer .phone {
  padding: 0;
  font-weight: bold;
  color: #5ba8dd;
}

.footer .email {
  float: right;
  font-family: Helvetica,Arial,sans-serif;
  padding: 8px;
}

.testimonial  {
  width:75%;
  margin:15px;
  padding:10px;
  border-bottom: 1px #c3c3c3 dashed;
}

.endorsement  {
  font-size: 1em;
}

.endorser  {
  font-family: Helvetica,Arial,sans-serif;
  color: #c3c3c3;
  font-size: .9em;
  margin-left:10px;
  margin-top:10px;
}

@media (max-width: 760px) {
  .stats, .embeddedVideo, .columnText  {
    width: 95%;
  }
}

@media (max-width: 600px) {
  .stats, .embeddedVideo, .videoList, .block, .columnText, .singleColumn {
    margin-left: 8px;
    margin-right: 8px;
  }

  .block {
    margin-left: 12px;
    margin-right: 12px;
  }

  .coolFact{
    margin: 8px;
  }

  .signup h3 {
    font-size: 1em
  }

}

@media (max-width: 350px) {
  .signup h3 {
  }
}

@media (max-width: 700px) { .banner { font-size:80%; height: 350px; } }
@media (max-width: 600px) { .banner { font-size:70%; height: 250px; } }
@media (max-width: 350px) { .banner { font-size:65%; height: 200px; }
  .content{ padding:0; }
  .banner .trades{ font-size:125% };
  .footerLinks a { padding: 8px 4px; }
  .embeddedVideo { width:300px; }
}

/*===========================================================================
  Marketing Assets
===========================================================================*/

.asset {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
background-color: #fafafa;
padding: 10px 10px 10px 10px;
min-height:100px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 20px;
margin-right: 20px;
}

.asset .assetContent {
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom:15px;
}

.asset img
{
 float:left;
 margin-right: 15px;
 margin-bottom: 15px;
}

.asset .assetDesc {
 display:inline;
}

.asset .assetDesc .callToAction{
 display: block;
 padding: 10px 0 10px 0;
}

.asset h2{
 color: #3F6075;
}



/*===========================================================================
  404 pageNotFound page
===========================================================================*/

.toolbar{
  height:         43px;
  position:       relative;
  top:            0;
  left:           0;
  right:          0;
  text-align:     center;

  border-bottom: 1px solid #000;

  background: #919191; /* Old browsers */
  background: -moz-linear-gradient(top,  #919191 5%, #515151 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#919191), color-stop(100%,#515151)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #919191 5%,#515151 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #919191 5%,#515151 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #919191 5%,#515151 100%); /* IE10+ */
  background: linear-gradient(top,  #919191 5%,#515151 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#515151',GradientType=0 ); /* IE6-9 */
}


.toolbar .title, .toolbar h1{
  color:            #fff;
  font-size:        1.2em;
  display:          inline-block;
  padding-top:      11px;
  text-shadow:      0 -1px 0 #000;
  margin: 0;
}

#pageNotFound {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#pageNotFound form {
  padding: 10px;
}

#pageNotFound .submit{
  text-align: center;
}

#pageNotFound form .button {
  width: auto;
}


.signupBanner .clouds{
  width:100%;
  border-bottom: 1px solid #717174;
  -moz-box-shadow:     0 3px 10px -3px black;
  -webkit-box-shadow:  0 3px 10px -3px black;
  box-shadow:          0 3px 10px -3px black;
}

.signupBanner .logo{
  position:absolute;
  right:0;
  margin:4px
}