/* Stylesheet for product pages (Overview, Features, Benefits, Screenshots */

/* --------------------------------------------------------------------*/
/* Overview Page */
#pp-overview-highlight {
  margin-top: 5px;
  padding: 5px 120px 5px 0;
  background: url('../images/fusion-logo-go-h71.png') right center no-repeat;
  font: normal 25px/140% "GestaLight",sans-serif;
}

#pp-overview-table .left,
#pp-overview-table .right {
  width: 50%;
  vertical-align: top;
}

#pp-overview-table td .container {
  padding: 10px 0 10px 55px;
  background: url('../images/pp-checkmark.png') left 10px no-repeat;
}

#pp-overview-table td.left .container {
  margin-right: 10px;
}

#pp-overview-table td.right .container {
  margin-left: 10px;
}

#pp-overview-table thead tr th h3 {
  margin: 0;
  padding: 0 0 15px 0;
  font: normal 25px/140% "GestaLight",sans-serif;
}

#pp-overview-table thead tr th.right h2 {
  padding-left: 10px;
}

#pp-overview-table tbody h3 {
  margin-top: 0;
}

#pp-overview-table em, div.pp-feat-cnt em { /* style shared with the Features page */
  display: inline-block;
  padding: 0 2px;
  margin: 1px -2px;
  font-style: normal;
  font-weight: normal;
  background-color: #fcf0ad;
  color: #333;
  border-radius: 2px;
}


/* --------------------------------------------------------------------*/
/* Screenshots Page */

table.pp-screenshot-grid {
  width: 100%;
  margin-top: 25px;
}

table.pp-screenshot-grid td {
  text-align: center;
  padding: 0 20px 20px 0;
}

/* Disable the right padding for the last screenshot in the row so that
  the table can really occupy full width. The nopadding class is also
  applied from script for older browsers */
table.pp-screenshot-grid tr td:last-child,
table.pp-screenshot-grid tr td.nopadding {
  padding-right: 0 !important;
}

table.pp-screenshot-grid a {
  display: block;
  width: 207px;
  padding: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #bbb;
  text-align: center;
  background: #f2f2f2; /* Old browsers */
  background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(100%,#EAEAEA)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F6F6F6 0%,#EAEAEA 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F6F6F6 0%,#EAEAEA 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #F6F6F6 0%,#EAEAEA 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#EAEAEA',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #F6F6F6 0%,#EAEAEA 100%); /* W3C */
  -webkit-transition: box-shadow .218s ease, border-color .218s ease;
  -moz-transition: box-shadow .218s ease, border-color .218s ease;
  -o-transition: box-shadow .218s ease, border-color .218s ease;
  transition: box-shadow .218s ease, border-color .218s ease;  
}

table.pp-screenshot-grid a,
table.pp-screenshot-grid a:hover {
  text-decoration: none;
}

table.pp-screenshot-grid a:hover {
  box-shadow: 0 0 10px #ccc;
  border-color: #999;
}

table.pp-screenshot-grid a span {
  -webkit-transition: color .218s ease;
  -moz-transition: color .218s ease;
  -o-transition: color .218s ease;
  transition: color .218s ease;
}

table.pp-screenshot-grid a:hover span {
  color: #777 !important;
}

table.pp-screenshot-grid a img {
  width: 180px;
  height: 180px;
  margin: 15px 0 5px 0;
  background: #fff;
  border: 1px solid #bbb;
}

table.pp-screenshot-grid a span {
  display: block;
  height: 45px;
  padding: 0 15px;
  color: #333;
  font: 11px/150% "Arial",sans-serif;
}

/* --------------------------------------------------------------------*/
/* Shared: Navigation system on the bottom of the page */

#pp-nav-container {
  margin: 0px 0 0 0;
  padding: 10px 0;
  border: 1px dotted #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#pp-navigation {
  width: 100%;
}

#pp-navigation td {
  width: 20%;
  vertical-align: top;
  border-right: 1px dotted #ccc;
}

#pp-navigation td.last {
  border-right: 0;
}

#pp-navigation a, #pp-navigation a:hover {
  text-decoration: none;
}

#pp-navigation td a {
  display: block;
  padding: 0 10px;
}

#pp-navigation span.header {
  display: block;
  font: normal 19px "GestaRegular",sans-serif;
  color: #484848;
}

#pp-navigation a.inactive span.header {
  color: #999;
}

#pp-navigation span.description {
  display: block;
  margin-top: 10px;
  height: 5em;  
  color: #484848;
  font: normal 13px "GestaRegular",sans-serif;
}

#pp-navigation a.inactive span.description {
  color: #999;
}

#pp-navigation span.icon-next {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: url('../images/pp-next.png') left top no-repeat;
}

#pp-navigation a.inactive span.icon-next {
  background-position: 0 -72px;
}

/* Decoration under the items + the animation */
#pp-navigation span.deco {
  display: block;
  height: 6px;
  line-height: 6px;
  width: 80%;
  margin: 5px 0 5px 0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
	-webkit-transition: width 0.218s ease;
	-moz-transition: width 0.218 ease;
	-o-transition: all 0.218 ease;
	-ms-transition: all 0.218 ease;
	transition: width 0.218 ease;  
}

#pp-navigation a.inactive {
  cursor: default;
}

#pp-navigation td a.inactive span.deco {
  background-color: #ccc;
  width: 100%;
}

#pp-navigation td.overview span.deco { background-color: #0caedc; }
#pp-navigation td.features span.deco { background-color: #77d021; }
#pp-navigation td.benefits span.deco { background-color: #ff5800; }
#pp-navigation td.screenshots span.deco { background-color: #543559; }
#pp-navigation td.pricing span.deco { background-color: #0caedc; }

*#pp-navigation td a.active:hover span.deco { width: 95%; }

#pp-navigation td a.active span.icon-next {
	background-position: 0 -36px;
}

#pp-navigation td a.active:hover span.icon-next {
  background-position: 0 0;
}

#pp-nav-container h4 {
  display: block;
  margin: -10px 0 10px 0;
  padding: 5px 10px 5px 10px;
  background-color: #eaeaea;
  font: normal 20px "GestaRegular",sans-serif;
}

/* --------------------------------------------------------------------*/
/* Shared: Sidebar */

div.pp-sidebar div.text,
div.pp-sidebar div.last-text
{
  padding: 0 28px 20px 28px;
  margin-top: -15px;
  font: normal 13px/150% "Trebuchet MS","Arial",sans-serif;
  color: #999;
}

div.pp-sidebar div.text {
  border-bottom: 1px solid #d2d2d2;
}

div.pp-sidebar span.contact-type {
  font-weight: bold;
  display: block;
}

div.pp-sidebar span.contact {
  display: block;
}

div.pp-sidebar p.small-text {
  font: normal 11px/150% "Trebuchet MS","Arial",sans-serif;
}

div.pp-sidebar a.arrow {
  display: inline-block;
  background: transparent url("../images/tinyarrow.png") right center no-repeat;
  padding-right: 14px;
}

div.pp-sidebar a.vbspam {
  display: block;
  width: 74px;
  height: 111px;
  background: transparent url("../images/vbspam-verified-pp-sidebar.png") 0 0 no-repeat;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------*/
/* Features Page */

.pp-feat-cnt {
  margin-right: 10px;
  padding: 10px 0 10px 70px;
  background: url('../images/pp-plus.png') left 10px no-repeat;
}

.pp-feat-cnt h3 {
  margin-top: 0;
}

/* Table of contents */
.pp-feat-toc {
  margin: 10px 0 50px 0;
  background: #f6f6f6;
  padding: 20px;
  border: 1px dotted #ccc;  
  border-radius: 5px;  
  clear: both;
  zoom: 1; /* IE hasLayout fix */
}

.pp-feat-toc h4 {
  margin: 0;
  padding: 0;
  line-height: 48px;
}

.pp-feat-toc h4.top {
  height: 24px;
  margin: 6px 0 12px 0;
  line-height: 100%;  
}

.pp-feat-toc ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.pp-feat-toc ul.headless {
  margin-top: 12px;
}

.pp-feat-toc li {
  display: block;
  margin: 0;
  padding: 4px 0 4px 16px;
  font: 14px/16px "GestaMedium",sans-serif;
  background: url('../images/tinyarrow-down.png') left 9px no-repeat;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.pp-feat-toc li:hover {
  margin-left: -5px;
  padding-left: 21px;
  background: #0caedc url('../images/tinyarrow-down-white.png') 5px 9px no-repeat;
  color: #fff;
  border-radius: 3px;
}

.pp-feat-toc li:hover a {
  color: #fff;
  text-shadow: 0 0 0;
  text-decoration: none;
}

.pp-feat-toc .column {
  float: left;
  width: 200px;
}

.pp-feat-toc .c1 { width: 180px; padding: 0 20px 0 0; }
.pp-feat-toc .c2 { width: 180px; padding: 18px 20px 0 20px; }
.pp-feat-toc .c3 { width: 180px; padding: 0 0 0 20px; }

.pp-feat-toc .column-separator {
  float: left;
  height: 335px;
  width: 1px;
  margin: -20px 0 -20px 0;  
  border-left: 1px dotted #ccc;
}

.pp-feat-cnt a.top {
  display: inline-block;
  font: 11px/16px "Arial",sans-serif;
  background: transparent url("../images/top-link.png") left center no-repeat;
  width: 12px;
  height: 12px;
}

/* Tooltip for the product pages */
.pp-tooltip {
  display: inline-block;
  border-bottom: 1px dashed #999;
  cursor: help;  
}

.pp-tooltip-element {
  max-width: 300px;
  padding: 12px 12px 0 12px;
  background: #DCF4FA;
  border: 1px solid #D6EDF3;
  border-radius: 5px;
  color: #555;
  font: normal 12px/1.5em "Arial",sans-serif;
  z-index: 250;
}

.pp-tooltip-element .arrow {
  position: absolute;  
  left: 50%;
  font: normal 20px "Arial",sans-serif;
  bottom: -0.9em;
  color: #DCF4FA;
}


/* Benefits page */

#pp-top-list-container {
  margin: 20px 0 60px 0;
  padding: 40px 0;
  background: -moz-linear-gradient(top, #f6f6f6 0%, #f0f0f0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6f6f6 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6f6f6 0%,#f0f0f0 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #f6f6f6 0%,#f0f0f0 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #f6f6f6 0%,#f0f0f0 100%); /* W3C */  
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px rgba(50, 50, 50, 0.1);
  zoom: 1; /* IE hasLayout trigger */
}

#pp-top-list-container h2 {
  margin: 0 0 30px 0;
  padding: 0;
  font: normal 34px "GestaRegular",sans-serif;
  text-shadow: 1px 1px 1px #eee;
  color: #555;
  text-transform: uppercase;
  text-align: center;
}

#pp-top-list td {
  vertical-align: top;
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
}

#pp-top-list tr.first td {
  border-top: 1px dotted #ccc;
}

#pp-top-list tr.last td {
  padding-bottom: 0;
  border-bottom: none;
}

#pp-top-list tr.last td p {
  margin-bottom: 0;
  padding-bottom: 0;
}

#pp-top-list td.number {
  padding-right: 40px;
  padding-left: 40px;  
  font: normal 80px/100% "GestaLight",sans-serif;  
  color: #ccc;
  text-shadow: 1px 1px 1px #fff;
  text-align: center;  
}

#pp-top-list td.item {
  padding-right: 80px;
}

#pp-top-list td.item h3 {
  margin-top: 7px;
  color: #0caedc;
  font: 24px "GestaMedium",sans-serif;
}

.pp-u {
  text-decoration: underline;
}