﻿/*----------------------------------------------------------
CSS RESET
----------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align:bottom; 
  background: transparent;
}
body { line-height: 1.25em;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
:focus { outline: 1px dotted #eee; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; }
table { /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: collapse;
  border-spacing: 0;
}
img { border-style: none; }

/* GLOBAL CSS
----------------------------------------------------------*/
html { }

body {
  text-align:center;
    color: #333333;  
    font-family: Arial, Sans-Serif;  
    margin-left: auto;
    margin-right: auto;   
    height:100%;
}

.wrapper {
  width: 960px;
    margin: 0 auto;
    text-align:left;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#content {
  float:left; 
  position:relative; 
  display:inline;
}
  
.hidden {
  display: none;
}
  
#username {
  float:right;
   margin-top:10px;
   color:#666;
}
  
#username li a {
  font-size:0.75em;
   margin:0px 10px;
}


/* Text Styles
----------------------------------------------------------*/
a:link {
    color: #0079c1;
    text-decoration: none;
}

a:visited {
    color: #0079c1;
    text-decoration: none;
}

a:hover {
  color: #0079c1; 
    text-decoration: underline;
}
  
a:active  {
  color: #13b5ea;
}
    
p {
  padding-bottom:20px; 
  line-height:1.8em;
    font-size:12px;
    color:#888;
}
  
ul, 
ol {  
    margin-bottom: 0px;
  line-height:1.8em;
}

.footnote {
  font-size:0.7em;
  color:#aaa;
}
  
.left {
  float:left;
}
.right {
  float:right;
}
.inline {
  display:inline;
}
  
.section ol {
  list-style-type: decimal;
  margin:0px 0px 20px 18px;
}

sup {
  font-size:smaller;
  position:relative;
  top:-10px;
}

sub {
  font-size:smaller;
  position:relative;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  color: #333333;
}
  
h2 {
  margin:20px 0px;
  color:#999;
}

h3 { 
  font-size:0.75em;
  font-weight:bold;
  color:#000;
}
  
h4 {
  font-size:0.9em;
  color:#000;
  font-weight:normal;
}
  
h5 {
  line-height:1.7em; 
  font-size:0.9em;
  margin-bottom:10px;
  color:#00334e;
}
  
h6 
{
  font-size:0.7em;
  color: #00334e;
  font-weight:bold;
}

/* HEADER CSS
----------------------------------------------------------*/

#header {
  float:left;
  text-align:left;
  width:100%;
  height:auto;
  color:#fff;
  font-size:0.9em;
  margin-top:20px;
  /*background-image: url('../../icons/bg.png');
  background-repeat: no-repeat;
  background-position: -80px -400px;
  background-attachment:fixed;*/
}

#header h1,
#header ul,
#header ul li {
  display:inline;
  position:relative;
}

#header h1 {
  background-image: url('../../icons/spritesheet_homepage.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width:161px;
  height:25px;
  display:inline-block;
  float:left;
  text-indent:-9999px;
  margin:0px 0px 15px 0px;
}
  
#header h2 {  
  position:relative;
  float:left;
  display:inline;
  text-indent:-9999px;
  margin:0px;
}

/* NAVIGATION CSS
----------------------------------------------------------*/
#navigation {
  background-image: url('../../icons/navbar_bottom.png');
  background-position:center bottom;
  background-repeat:no-repeat;
  height:40px;
  width:960px;
  margin:0px;
  display:inline;
  float:left;
  position:relative;
}
  
#primary_navigation {
  background-image: url('../../icons/navbar_bg_slice.png');
  background-repeat: repeat-x;
  display:block;
  float:left;
  clear:both;
  min-width:960px;
  height:30px;
  margin-top:7px;
}

#primary_navigation li {
  display:inline-block;
   float:left;
   position:relative;
  height:27px;
  width: 100px;
  padding:0px;
  background-image:url('../../icons/spritesheet_primarynavigation.png');
  background-repeat:no-repeat;
  margin-top:1px;
}

#primary_navigation li a {
  display:block;
  height:27px;
  text-indent:-9999px;
  text-align:left;
}

li#managementconsoleNav  {width:145px}
li a#managementconsoleNav {width:145px}
#managementconsoleNav {background-position: 0px 0px}
#managementconsoleNav:hover { background-position: 0px -27px}
#managementconsoleNav:active { background-position: 0px -54px}

#featuresNav {background-position: -145px 0px}
#featuresNav:hover { background-position: -145px -27px}
#featuresNav:active { background-position: -145px -54px}

#domainMgt { background-position:-945px 0px}
#domainMgt:hover { background-position:-945px -27px}
#domainMgt:active { background-position:-945px -54px}

#howtosetupNav {  background-position: -245px -0px}  
#howtosetupNav:hover { background-position: -245px -27px}  
#howtosetupNav:active { background-position: -245px -54px}  

#faqNav { background-position: -345px -0px}
#faqNav:hover {  background-position: -345px -27px}
#faqNav:active {background-position: -345px -54px}

#settingsNav { background-position:-445px 0px}
#settingsNav:hover { background-position:-445px -27px}
#settingsNav:active { background-position:-445px -54px}

#adminNav { background-position: -545px 0px}
#adminNav:hover { background-position: -545px -27px}
#adminNav:active { background-position: -545px -54px}

#trythedemoNav {background-position: -645px 0px}
#trythedemoNav:hover { background-position: -645px -27px}
#trythedemoNav:active { background-position: -645px -54px}

#homeNav{background-position: -745px 0px}
#homeNav:hover { background-position: -745px -27px}
#homeNav:active { background-position: -745px -54px}

#pricingNav{background-position: -845px 0px}
#pricingNav:hover { background-position: -845px -27px}
#pricingNav:active { background-position: -845px -54px}

#newsNav{background-position: -1045px 0px}
#newsNav:hover { background-position: -1045px -27px}
#newsNav:active { background-position: -1045px -54px}
 
/* FOOTER CSS
----------------------------------------------------------*/
#footer {
  clear:both;
  width:auto;
  padding:10px 0px 20px 0px; 
  margin-top:10px;
  height:50px;
  overflow:hidden;
  font-size:11px;
}

#footer .footerdetails {
  float:left; 
  position:relative; 
  display:inline; 
  width:600px;
  margin-left:40px;
}

.picnetlogo {
  display:inline-block;
  position:relative; 
  float:left;
  margin-top:3px;
  width:56px;
  height:51px;
  background-image: url('../../icons/spritesheet_homepage.png');
  background-repeat:no-repeat;
  background-position: -416px -117px;
  cursor:pointer;
}
 
 /* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
fieldset label.inline {
  display: inline;
}

legend {
  display:none;
}

#mainform label {
  float:left; 
  margin:0px 20px 0px 0px;
  clear:both;
}
  
#UserPasswordClean, 
#CurrentPassword {
   float:left;
   clear:both;
   margin:5px 0px 10px 0px;
}
   
#mainform a {
  color:#fff;
  }
form.change-password .validation-summary-errors,
form.change-password .positivemessage  
{
  clear:both;
  }
.validation-summary-errors ul li 
{
  color:red;
  font-size:0.8em;
  }
  
form.change-password a.save {
  float:left;
  margin:8px 0px 0px -3px;
  clear:both;
  }
 
/* REGISTER FORM ELEMENTS   
----------------------------------------------------------*/

#registerlabels {
  width: 120px;
  margin: 8px 20px 0px 0px;
  text-align:right;
}
    
#registerlabels li {      
  height:30px;
  margin-bottom:0px;
}

#registerinputs {
  width: 190px;
  margin-top:8px;
}
  
#registerinputs li {
   height:20px;
   margin-bottom:10px;
   }

#registerinputs input {
  border:1px solid #ccc;
  width:160px;
}

#registerinputs input:focus {
  background-color:#f5f5f5;
}
  
#register h6 {
  padding:15px 0px 10px 15px;
}
  
.fineprint {
  clear:both;
   font-size: 0.675em;
  padding:0px 0px 5px 0px;
  color:#999;
}

#register .fineprint {
  margin-left:38px;
}

.registererror li {
  font-size:1.5em;
}

/* MISC  
----------------------------------------------------------*/
.clear {
  clear: both;
}

.positivemessage {
  color:#0079c1;
  font-size:0.8em;
  padding-top:6px;
  }

/* Basic Grid System  
----------------------------------------------------------*/
.feature_column {
  display: inline;
  position: relative;
  float:left;
}

.clearbreak {
  clear:both;
  height:20px;
}


/* Features Page
----------------------------------------------------------*/ 

/* Slider*/

#slider {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 630px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  margin-bottom:20px;
  border-bottom:1px solid #eee;
}

.scroll p.opening {
  font-size:1em; 
  font-weight:normal; 
  color:#666; 
  padding-top:0px;
  font-family: Arial, Sans-Serif;
  margin-top:20px;
}

.scrollContainer div.panel {
  padding: 0px;
  /*height:380px;*/
  width: 960px; /* change to 560px if not using JS to remove rh.scroll */
}
ul.slidernavigation li a.sliderselected {
  color:#0079c1;
  background-position:0px -60px;
}
ul.slidernavigation {
  width:960px;
  font-size:0.7em;
  clear:right;
}
ul.slidernavigation li  {
  display:inline-block;
  position:relative;
  float:left;
  background-color:transparent;
}
ul.slidernavigation li a {
  display:block;
  width:137px;
  height:20px;
  position:relative;
  float:left;
  color:#000;
  padding:5px 0px 5px 55px;
  background-color:transparent;
  background-image:url('../../icons/features_navbar_spritesheet.jpg');
}
ul.slidernavigation li a#benefits_nav {
  width:119px;
  padding:5px 0px 5px 73px;
} 
ul.slidernavigation li a#heatmaps_nav {
  width:125px;
  padding:5px 0px 5px 67px;
}
ul.slidernavigation li a:hover {
  background-position:0px -30px;
  text-decoration:none;
  color:#fff;
}
/*End Slider*/
h3#featureheading_benefit1,
h3#featureheading_benefit2,
h3#featureheading_benefit3,
h3#featureheading_benefit4,
h3#featureheading_heatmap1,
h3#featureheading_heatmap2,
h3#featureheading_heatmap3,
h3#featureheading_heatmap4,
h3#featureheading_mousetracking1,
h3#featureheading_mousetracking2,
h3#featureheading_mousetracking3,
h3#featureheading_mousetracking4,
h3#featureheading_pagenavigation1,
h3#featureheading_pagenavigation2,
h3#featureheading_pagenavigation3,
h3#featureheading_pagenavigation4,
h3#featureheading_other1,
h3#featureheading_other2,
h3#featureheading_other3 {
  background-image: url('../../icons/spritesheet_featuresicon_2.png');
  background-repeat:no-repeat;
  display:block;
  height:20px;
  padding:13px 0px 7px 0px;
  border-bottom:2px solid #f5f5f5;
  margin-bottom:10px;
}

h3#featureheading_benefit1{
  background-position:right -0px;
}

h3#featureheading_benefit2{
  background-position:right -40px;
}

h3#featureheading_benefit3{
  background-position:right -80px;
}
  
h3#featureheading_benefit4{
  background-position:right -120px;
}

h3#featureheading_heatmap1{
  background-position:right -160px;
}

h3#featureheading_heatmap2{
  background-position:right -200px;
}

h3#featureheading_heatmap3{
  background-position:right -240px;
}

h3#featureheading_heatmap4{
  background-position:right -280px;
}

h3#featureheading_mousetracking1{
  background-position:right -320px;
}

h3#featureheading_mousetracking2{
  background-position:right -360px;
}
  
h3#featureheading_mousetracking3{
  background-position:right -400px;
}
  
h3#featureheading_mousetracking4{
  background-position:right -440px;
}
  
h3#featureheading_pagenavigation1{
  background-position:right -480px;
}

h3#featureheading_pagenavigation2{
  background-position:right -520px;
}
  
h3#featureheading_pagenavigation3{
  background-position:right -560px;
}
  
h3#featureheading_pagenavigation4{
  background-position:right -600px;
}
h3#featureheading_other1,
h3#featureheading_other2,
h3#featureheading_other3 {
    background-position:right -0px;
}
.column_33 {
  display: inline;
  float: left;
  position: relative;
  width: 311px;
}
.feature_column {
  width:210px;
  height:198px;
  margin:0 20px;
}
.feature_column h4 {
  padding-bottom:7px;
  border-bottom:2px solid #f5f5f5;
  margin-bottom:10px
}  
p.featurenav_previous,
p.featurenav_next {
  display:inline-block;
  position:relative;
}
p.featurenav_previous a,
p.featurenav_next a  {
  font-size:0.9em;
}
p.featurenav_previous {
  float:left;
}
p.featurenav_next {
  float:right;
}
#benefits img, 
#heatmaps img, 
#mousetracking img, 
#pagenavigation img, 
#browsersizes img { 
  float:right;
}
h2.feature_heading {
  font-size:1.75em;
  line-height:1em;
  color:#000;
  font-weight:normal;
  padding-top:30px;
}
#benefits_banner {
  display:inline;
  position:relative;
  float:left;
  width:960px;
  height:381px;
  background-image:url('../../icons/overview_banner.jpg');
}
ul#featuresbuttonbar {
  display:block;
  float:left;
  position:relative;
  margin:285px 0px 0px 50px;
  width:327px;
}
ul#featuresbuttonbar li {
  display:inline-block;
  float:left;
  position:relative;
  margin-top:17px;
  padding:0px;
  width:109px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_prezi,
ul#featuresbuttonbar li a#featuresbuttonbar_signup,
ul#featuresbuttonbar li a#featuresbuttonbar_demo {
  display:inline-block;
  position:relative;
  float:left;
  width:109px;
  height:28px;
  background-image:url('../../icons/spritesheet_featuresbutton.png');
  background-repeat:no-repeat;
  text-indent:-9999px;
  margin:0px;
  padding:0px;  
}
ul#featuresbuttonbar li a#featuresbuttonbar_prezi {
  background-position:0px 0px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_signup {
  background-position:-109px 0px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_demo {
  background-position:-218px 0px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_prezi:hover {
  background-position:0px -28px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_signup:hover {
  background-position:-109px -28px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_demo:hover {
  background-position:-218px -28px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_prezi:active {
  background-position:0px -56px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_signup:active {
  background-position:-109px -56px;
}
ul#featuresbuttonbar li a#featuresbuttonbar_demo:active {
  background-position:-218px -56px;
}    
.page-break,
.visibility {
  display:none;
}
.feature-timelapse {
  width: 400px;
  height: 130px;
  padding: 20px;
  position: absolute;
  top: 180px;
  left: 515px;
  background-image:url('../../icons/transparent_bg.png');
}
.feature-timelapse h3,
.feature-timelapse h4, 
.feature-timelapse p {
  color: #fff;
}
.feature-timelapse p {
  clear: both;
}
.feature-timelapse h3,
.feature-timelapse h4 {
  font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
}
.feature-timelapse h3 {
  font-size: 1.5em;
  font-weight: normal;
  margin-bottom: 20px;
}
.feature-timelapse h4 {
  font-size: 0.7em;
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: 5px;
  text-shadow:#000 0px 1px 2px;
}
.feature-timelapse h3 {
  display: inline;
  float: left;
  position: relative;
}
a#feature-timelapse-demo {
  border: 1px solid #999;
  float: right;
  color: #fff;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  font-size: 0.75em;
  padding:3px 8px 3px 34px;
  background-image:url('../../icons/timelapse_icon.png');
  background-repeat: no-repeat;
  background-position: 3px 2px;
}
a#feature-timelapse-demo:hover {
  text-decoration: none;
  border: 1px solid #fff;
  background-position: 3px -22px;
} 
a#feature-timelapse-demo:active {
  
} 
/* Setup Page
----------------------------------------------------------*/ 

#setupsteps {
  height:160px;
  border:1px solid #dadada;
  display:inline;
  position:relative;
  float:left;
  margin-bottom:40px;
}

#setupsteps p {
  font-size:0.7em;
}

.setupstepscolumn, 
.setupstepscolumnbg {
  display:inline;
  position:relative;
  float:left;
  padding: 20px 20px 20px 0px;
  width:188px;
  height:120px;
}
  
.setupstepscolumn {
  padding-left:20px;
}
    
.setupstepscolumnbg {
  background-image:url('../../icons/arrowcolumn.jpg');
  background-repeat:no-repeat;
  background-position: -30px 0px;
  padding: 20px 10px 20px 45px;
}

/*Pricing Page
----------------------------------------------------------*/ 
ul.pricing li {
  height:40px;
  padding-top:15px;
  }
ul.pricing#labels,
ul.pricing#trial,
ul.pricing#saas10,
ul.pricing#saas20 {
  display:inline;
  float:left;
  position:relative;
  width:200px;
  font-size:0.8em;
}
ul.pricing#trial li,
ul.pricing#saas10 li,
ul.pricing#saas20 li 
{
  display:inline-block;
  float:left;
  position:relative;
  clear:both;
  width:251px;
  }
ul.pricing#trial,
ul.pricing#saas10,
ul.pricing#saas20 {
  width:251px;
  margin-left:1px;
  text-align:center;
  padding-left:0px;
}
ul.pricing#labels {
  margin-top:182px;
  text-align:right;
}
ul.pricing#labels li {
  padding-right:40px;
}
ul.pricing#trial li,
ul.pricing#saas10 li,
ul.pricing#saas20 li {
  border-top:1px solid #fff;
  border-bottom:1px solid #ddd;
}

ul.pricing#trial li:nth-child(2n+1),
ul.pricing#saas10 li:nth-child(2n+1),
ul.pricing#saas20 li:nth-child(2n+1) {
  background-color:#eeeeee;
}
ul.pricing#trial li:nth-child(2n),
ul.pricing#saas10 li:nth-child(2n),
ul.pricing#saas20 li:nth-child(2n) {
  background-color:#f5f5f5;
}


ul.pricing#saas10 li.pricing-head,
ul.pricing#saas20 li.pricing-head {
  background-image: url('../../icons/mgmtconsole_bgslice.png');
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom:none;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  height:160px;
}
ul.pricing#trial li.pricing-head {
  height:175px;
  border-bottom: none;
  padding-top:0px;
    background-color:#5990b0;
      border-top-left-radius: 8px; 
  border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
}
ul.pricing#trial li.pricing-head a.pricing-signup {
  background-color:#5990b0;
  height:175px;
  display:block;
  background-image: url('../../icons/mgmtconsole_bgslice.png');
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom:none;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  }
ul.pricing#trial li.pricing-head a.pricing-signup:hover {
  text-decoration:none;
  background-color: #0079c1;
}
ul.pricing#saas10 li.pricing-head {
  background-color:#aaa;
}
ul.pricing#saas20 li.pricing-head {
  background-color:#888;
}
ul.pricing#trial li.pricing-head h4,
ul.pricing#trial li.pricing-head h5,
ul.pricing#trial li.pricing-head p {
  color:#fff;
  text-shadow:#000 0px -1px 0px;  
}
ul.pricing#saas10 li.pricing-head h4,
ul.pricing#saas10 li.pricing-head h5,
ul.pricing#saas10 li.pricing-head p {
  color:#fff;
  text-shadow:#555 0px -1px  0px;
}
ul.pricing#saas20 li.pricing-head h4,
ul.pricing#saas20 li.pricing-head h5,
ul.pricing#saas20 li.pricing-head p {
  color:#fff;
  text-shadow:#333 0px -1px  0px;
}
ul.pricing#trial li.pricing-head h4 {
  font-size:1.8em;
  padding:1.8em 0em 1em 0em;
}
ul.pricing#saas10 li.pricing-head h4,
ul.pricing#saas20 li.pricing-head h4 {
  font-size:1.8em;
  padding:1em 0em;
}
ul.pricing#labels {
  background-color:#fff;
}
ul.pricing li.even {
  background-color:#eeeeee;
}
ul.pricing li.odd {
  background-color:#f5f5f5;
}


ul.plan_features {
  font-size:0.7em;
  color:#999;
  margin-top:15px;
  padding-top:15px;
  border-top:1px dotted #eee;
  list-style:url('../../icons/list_arrow.png')
}
ul.plan_features li {
  padding: 0px 0px 5px 5px;
  margin-left:10px;
}
/* Settings Page
----------------------------------------------------------*/ 
.section {
  height:auto;
  padding:20px;
  clear:both;
  border-top:1px solid #eeeeee;
}

.clear {
  clear:both;
}

.clear_space {
  clear:both;
  padding-bottom:20px;
}

.savemessage {
  margin-bottom:20px;
}
  
div.ui-datepicker {
  font-size:10px;
}

.err, 
.deletemessage {
  color:red;
  font-size:0.75em;
}
  
.msg {
  color:#0079c1;
  font-size:0.75em;
}

.settings-controls {
  position:relative;
}

#exclusionfilters,
#deletefrom {
  border:1px solid #ccc;
  width:320px;
}

#exclusionfilters:focus,
#deletefrom:focus {
  background-color:#f5f5f5;
}
  
#exclusionfilters {
  width:240px;
  height:40px;
}
  
#exclusionfiltersmessage {
  display:block;
}

.save,
#delete {
  background-color:transparent;
  background-image:url('../../icons/spritesheet_upgradepage.png');
  background-position:0px 0px;
  font-size:0.9em;
  display:inline-block;
  position:relative;
  float:right;
}

a.save, 
a#delete {
  font-size:0.75em;
  text-decoration:none;  
}

.save {
  width:62px;
  height:27px;
  padding-top:7px;
  padding-left: 33px;
}

#delete {
  width:66px;
  height:27px;
    padding-top:7px;
    padding-left: 29px;
  margin-bottom:0px;
}

.save:hover, 
#delete:hover  {
  background-position:0px -34px;
}

.save:active, 
#delete:active  {
  background-position:0px -68px;
  color:#0079c1;
}

#deletefrom {
  display:inline-block;
  float:left; 
  position:relative;
}
  
#deletemessage {
  display:block; 
  clear:both;
}

.alternate {
  background-color:#f5f5f5;
}

/*Upgrade Page
----------------------------------------------------------*/ 
.upgradesection,
#userDomains,
#openingMsg,
#saasdiv,
#trial,
#saas10,
#saas20,
#selfhosted,
#durationDiv,
#right_panel,
#receipt,
#duration,
.duration,
#durationExtendDiv,
#totalAmount,  
#divMonthsSelect,
#addNewDomain label,
#addNewDomain input,
#addNewDomain button {
  display:inline;
  position:relative;
  float:left;
}

#noActiveDomainMsg {
  color:red; 
  font-weight:bold;
  display:block;
  padding: 10px;
  text-align:left;
  text-indent:15px;
  margin-bottom:20px;
  background-color:#f5f5f5;
  font-size:12px;
}
#noActiveDomainMsg .warning-icon 
{
  display:inline;
  float:left;
  position:relative;
  width:22px;
  height:22px;
  background-image:url(../../icons/spritesheet_managementconsole_2.png);
  background-position:0px -151px;
}
#saasdiv #selfhosted {
  margin-top:20px;
  width:570px;
  height:22px;
}

.upgradesection h3 {
  font-size:1.2em;
  font-weight:normal;
  color:#777;
  border-bottom:1px solid #eee;
  margin-bottom:20px;
}

#openingMsg {
  font-size:1.5em;
  color:#ccc;
  position:absolute;
  top:50%;
  margin:40px 0px 0px 40px;
  height:40px;
}
  
.leftpadding { 
  padding-left:300px;
  width:600px;
}
  
h3#domainName {
  display:none;
}
  
.upgradesection {
  width:960px;
  min-height:200px;
  height:auto;
  display:inline;
  position:relative;
  float:left;
  margin-bottom:20px;
  padding-bottom:20px;
  border:1px solid #ddd;
  background-image:url('../../icons/upgradesection_bgslice.gif');
  background-repeat:repeat-y;
}
  
 .headerActive {
  background-color:#f5f5f5;
  width:260px;
  padding:10px 20px;
  margin-bottom:20px;
  height:34px;
  font-size:0.8em;
}
  
 .headerDisable {
  background-color:#fff;
  width:260px;
  padding:10px 20px;
  margin-bottom:20px;
  height:34px;
  font-size:0.8em;
  border:1px solid #eee;
}

#addNewDomainHeader.headerDisable span {
  color:#bbb
}
  
#addNewDomain {
  float:right; 
  display:none;
}

#addNewDomain label {
  margin:6px 10px 0px 0px;
}
  
#addNewDomain input {
  margin:7px 10px 0px 0px;
  border:1px solid #ccc;
}

.alpha {
  margin-left:0px;
}
.omega {
  margin-right:0px;
}
#duration {
  width:400px;
}
.duration {
  width:auto;
  padding-top:10px;
  padding-bottom:10px;
  font-size:0.8em;
} 
.duration label {
  width:100px;
  padding:10px;
  padding-left:15px;
  padding-right:13px;
  margin-right:10px;
  background-color:transparent;
  border:none;
  background-image:url('../../icons/spritesheet_upgradepage.png');
  font-size:0.9em;
} 
.durationClicked {
    background-position:-95px 0px;
    color:#fff;
} 
  
.duration input {
    display:none;
} 
#durationExtendDiv{
    padding:10px 10px 10px 0px;
    font-weight:bold;
    margin-right:3px;
  font-size:0.8em;
    }
#divMonthsSelect {
    width:auto;
  padding:10px;
  font-size:0.8em;
}
#monthsSelect {
    height:20px;
    }
#userDomains {
  width:300px;
  height:100%;
  border-right:1px solid #eee;
  background-repeat:repeat-y;
  background-position:right;
  z-index:2;
}
#userDomains div p {
  padding:0px;
}
#userDomains div p span {
    white-space:pre-wrap;  
}
#userDomains .active {
  cursor:pointer;
  padding:15px 20px;
  max-height:67px;
  border-bottom:1px solid #ddd;
  background-image:url('../../icons/domains_horizontal_bgslice.png');
  background-repeat:repeat-x;
  background-position:bottom;
  color:#888;
  background-color:#f5f5f5;
  z-index:0;
}
 #userDomains .active:hover {
  cursor:pointer;
  background-image:url('../../icons/domains_horizontal_bgslice_hover.png');
  background-color:#fff;
}
 #userDomains .active:active {
  background-image:url('../../icons/domains_horizontal_bgslice_active.png');
  background-color:#f0f0f0;
}
#userDomains .disabled2 {
  cursor:pointer;
  padding:15px 20px;
  border-bottom:1px solid #ddd;  
  background-position:bottom;
  z-index:0;
  cursor:auto;
}
  
#userDomains .disabled2 p {
  color:#bbb;
}

#userDomains div.currentSelectedDomain.disabled2 p {
  color:#777;
}

 #userDomains .disabled2 p .domainstatus_name {
  color:#999;
}
  
.domainstatus_name {
  padding-top:2px; 
  color:#00334e;
}  
.domainstatus_favicon {
  margin-right:5px;
  height:18px;
  width:18px;
} 
.domainstatus_plan {
  margin-right:10px;
}    
.domainstatus_expiry {
  margin-right:10px;
}  
.domainstatus_state {
}
.domainstatus_plan,
.domainstatus_expiry,
.domainstatus_state {
  display:inline-block;
  font-size:0.9em;
  margin-top:5px;
} 
.license-domains-table th, 
.licenses-table th {
  border:1px solid #fff;
  background-color:#eee;
  background-image:url('../../icons/receipthead_horizontal_bgslice.png');
  background-repeat:repeat-x;
  background-position:bottom;
  padding:2px 20px 2px 20px;
  font-size:11px;
  font-weight:bold;
}
.licenses-table td { 
  border:1px solid #fff;
}
.edit-license,
.delete-license,
.edit-domain,
.delete-domain,
.save-license,
.cancel-license,
.save-domain,
.cancel-domain,
.commit-license {
  vertical-align:top;
  padding-left:3px;
  padding-right:3px;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
  color:#0079c1;
  font-weight:bold;
}
.commit-license {
  width:40px;
}
.add-new-license,
.add-new-domain {
  font-weight:normal;
  background-color:White;
}
.cancel-license:hover,
.save-license, 
.edit-license,
.delete-license,
.edit-domain,
.delete-domain,
.commit-license,
.add-new-domain,
.add-new-license,
.save-domain,
.cancel-domain {
  cursor:pointer;
}
.data-edit-license,
.data-edit-domain {
  vertical-align:top;
  padding-left:3px;
  padding-right:3px;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
  color:#333;
  font-weight:normal;
}
.edit-domain-control,
#date-expire {
  width:77px;
}
.edit-domain-control-ddl {
  width:81px;
}
.edit-domain-control-name {
  width:180px;
}
.edit-license,
.delete-license, 
.data-edit-license, 
.license-domain, 
.save-license, 
.cancel-license, 
.license-edit-details {
  border-top:2px solid #777;
  vertical-align:top;
}
.edit-domain {
  vertical-align:top;
  padding-left:3px;
  padding-right:3px;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
}
.edit-domain-td {
  vertical-align:top;
  padding-left:3px;
  padding-right:3px;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
  color:#333;
  border:0;
}
.license-edit-details {
  vertical-align:top;
  padding-bottom:5px;
  padding-left:10px;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
  color:Black;
  font-weight:bold;
}
.message {
  color:Red;
  font-family: Arial, Sans-Serif;  
  font-size:12px;
  line-height:100%;
}
th {
  background-color:White;
}

#saasdiv {
  display:none;
  margin:20px 20px 0px 20px;
}
.cancel {
  margin-bottom:20px; 
  background-position:-101px -428px;
}
.cancel:hover {
  background-position:-101px -452px;
}
#saasdiv div {
  margin-right:20px;
  padding:20px;
    height:200px;
  border:2px solid #ddd;
  width:142px;
  color:#888;
    }
#saasdiv div h4 {
  color:#777;
  font-weight:bold;
}
  
#saasdiv div:hover {
  cursor: pointer;
  border:2px solid #0079c1;
}

.disabled {
    }
    
.disabled ul.plan_features, 
#trial.disabled h4 {
  color:#dddddd;
}
  
#trial.disabled {
  border:2px solid #f5f5f5;
}

#trial.disabled:hover {
  cursor:default;
  border:2px solid #f5f5f5;
}
#saasdiv #selfhosted:hover {
  cursor:default;
  border:2px solid #ddd;  
}

 #userDomains div.currentSelectedDomain {
  border:2px solid #0079c1;
  background-image:url('../../icons/domains_horizontal_bgslice.png');
  background-repeat:repeat-x;
  background-color:#f5f5f5;
}

 #userDomains div.currentSelectedDomain p .domainstatus_name {
  color:#0079c1;      
 }
  
#userDomains div.currentSelectedDomain .domainstatus_name {
  color:#00334e;
}  

#saasdiv div.currentSelectedPlan {
  border:2px solid #0079c1;
  color:#333;
  -webkit-box-shadow:#ddd 0px 1px 6px;
  -moz-box-shadow:#ddd 0px 1px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

#saasdiv div.currentSelectedPlan h4{
  color:#0079c1;
  font-weight:bold;
}

#right_panel {
  height:100%;
  width:659px;
}
  
#durationDiv {
  width:600px;
  background-color:#f5f5f5;
  margin:20px 0px 0px 20px;
  padding:20px 0px 20px 20px;
    display:none;
  height:auto;
}
  
#totalAmount{
  width:580px;
  background-color:#f5f5f5;
  padding:20px;
  margin:20px 0px;
  font-size:0.8em;
}
  
#confirmtotalAmount{
  background-color:#f5f5f5;
  padding: 10px 0px;
}

#receipt {
  width:620px;
  background-repeat:repeat-x;
  padding:0px 20px 0px 20px;
}  

table#confirm {
  font-size:0.8em;
  width:960px;
}

#confirm thead tr{
   width:100%;
}

#addNewDomainBnt,
#newDomainSave, 
#payNowBtn,
#newDomainCancel, 
#payCancelBtn,
#addNewLicense {
  width:95px;
  height:34px;
  color:#fff;
  background-color:transparent;
  border:none;
  background-image:url('../../icons/spritesheet_upgradepage.png');
  font-size:0.9em;
  display:inline-block;
  position:relative;
 padding: 5px 13px 8px 15px;
}

#addNewDomainBnt,
#newDomainSave, 
#payNowBtn,
#addNewLicense{
  background-position:-95px 0px;
}

#addNewLicense {
  font-size:0.8em;
  padding:5px 0px 0px 10px;
  width:85px;
  height:29px;
}

#addNewDomainBnt {
  float:right;
}

#newDomainCancel, 
#payCancelBtn{
  color:#333;
}

#addNewDomainBnt:hover,
#newDomainSave:hover, 
#newDomainCancel:hover,
#payNowBtn:hover,
#payCancelBtn:hover,
#addNewLicense:hover,
.duration label:hover{
  cursor:pointer;
}

#addNewDomainBnt:hover,
#newDomainSave:hover, 
#payNowBtn:hover,
#addNewLicense:hover{
  background-position:-95px -34px;
}

#newDomainCancel:hover, 
#payCancelBtn:hover {
  background-position:0px -34px;
  color:#0079c1;
}

#addNewDomainBnt:active,
#newDomainSave:active, 
#payNowBtn:active,
#addNewLicense:active{
  background-position:-95px -68px;
}

#newDomainCancel:active, 
#payCancelBtn:active,
.duration label:active {
  background-position:0px -68px;
  color:#0079c1;
}

#payBtns {
  float:right;  
}
#addNewDomainHeader.headerDisable button {
  cursor:auto;
  color:#bbb;
}

#addNewDomainHeader.headerDisable #addNewDomainBnt {  
  background-position:0px 0px;
}

#addNewDomainHeader.headerDisable #addNewDomainBnt:hover {
}

/*Reseller Page
----------------------------------------------------------*/ 
#sideColumn,
#contentColumn,
#resellerContent  {
  display:inline;
  float:left;
  position:relative;
}

#contentColumn ul {
  font-size:0.8em;
  list-style:url('../../icons/tick.png');
}
#contentColumn ul li 
{
  padding-bottom:5px;
}

#resellerContent {
  background-color:#f1f1f1;
  margin-bottom:20px;
}

#sideColumn {
  width:239px;
  padding:40px;
  height:100%;
  border-left:1px solid #eee;
  border-bottom:1px solid #eee;  
  background-color:#f1f1f1;  
}
  
#contentColumn {
  width:554px;
  padding:35px 45px 0px 40px;
  border-bottom:1px solid #eee;
  border-left:1px solid #eee;
  background-color:#fff;
  background-image:url('../../icons/generic_vertical_bgslice.png');
  background-repeat:repeat-y;
  background-position:right;
}

p.testimonial {
  font-size:1em;
  width:180px;
  padding:20px 0px 20px 60px;
  margin-bottom:20px;
  background-image:url('../../icons/testimonial.png');
  background-repeat:no-repeat;
  background-position:27px left;
  border-top:1px dotted #fff;
  border-bottom:1px dotted #fff;
}
  
hr {
  border-top:1px solid #eee;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:none;
  height:1px;
  margin:7px 0px 0px 0px;
}

hr.dotted {
  border-top:1px dotted #ddd;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  padding:0px;
  margin:0px 0px 20px 0px;
  height:1px;
  width:100%;
}

ul.features {
  list-style:url('../../icons/tick.png');
  padding-left:20px;
  color:#888;
}

#errorMsg {
    color:Red;
    font-size:10px;
    } 
    
#newsMain {
  width:620px;
  margin-right:20px;
  }
#newsVideo {
  width:320px;
  } 
#newsDate {
  width:140px;
}