/**
 * Standard tags and global styles
 */
 
.clear { clear:both; }
.cleft { clear:left; }
.cright { clear:right; }
.clear,.cleft,.cright { line-height:1px;height:1px; font-size:1px;}
 
html{
	background: url(../images/page-bg.gif) repeat;
}
h1{
	font-size: 36px;
	color: #fff;
	text-shadow: 0 1px 1px #004f82;
}
h1.sitetitle{
	text-indent: -9000px;
	height: 0;
	font-size: 0px;
}
h2{
	font: bold 16px  Helvetica, Arial, sans-serif;
	color: #333;
	margin-bottom: 10px;
}
h3{
	font: bold 14px  Helvetica, Arial, sans-serif;
	color: #727272;
	margin: 10px 0;
}
p,ol{
	font: 12px  Helvetica, Arial, sans-serif;
	line-height: 18px !important;
	color: #727272;
}
a, a:active, a:link, a:visited{
	font: bold 12px  Helvetica, Arial, sans-serif;
	color: #333;
	text-decoration: none;
}
a:hover{
	color: #727272;
	text-decoration: none;
}

option,select{
	background:#f8f8f8;
	font: 12px Helvetica, Arial, sans-serif;
	color: #727272;
	color: #000000;
}

select.chrome, select.smallfield.chrome{
	background: none;
	border: 2px solid #B7B7B7;
	border-radius: 5px;
}

select{
	height:38px;
	padding:10px 7px 10px 3px;
	width:292px;
	background:transparent url(../images/forms/signup-field.png) no-repeat 0px center;
	border:0;
	line-height:35px;
}
select.smallfield{
	width: 70px;
	height: 38px;
	padding: 10px 7px 10px 3px;
	background: url(../images/forms/signup-field-small.png) top no-repeat;
}

/** Error styles **/
.error-message{
	width: 250px;
	color: #9F0000;
	margin-bottom: 10px;
}
.error-message-box{
	color: #D8000C;
    background-color: #FFBABA;
	border: 2px solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px;
	width: 94%;
}
input.error, textarea.error{
	color: #9F0000 !important;
}
div.qtip{
	font: 12px  Helvetica, Arial, sans-serif;
}
p.thanks{
	color: #4F8A10;
	background-color: #DFF2BF;
	border: 1px solid;
	padding: 10px;
}
.errors-panel{
	margin: 65px 0 0 30px;
}

/** Few generic fix styles **/
.clearfix{
	clear: both;
}
.pagebreak{
	clear: left;
	height: 20px;
}
.bigpagebreak{
	clear: left;
	height: 70px;
}

/*
 * Structure of the site, layout, panels etc
 */
#wrapper{
	width: 960px;
	position: static;
	margin: 0 auto;
	padding: 0 10px;
	background: url(../images/page-bg-dark.gif) repeat;
}
#navigation{
	width: 960px;
	height: 44px;
	border-bottom: 1px solid #54aee7;
	background: url(../images/navigation-bg.jpg) top repeat-x;
}
#main-panel{
	width: 960px;
	height: 271px;
	background: url(../images/main-panel-bg.jpg) top no-repeat;
}
#features-panel{
	width: 960px;
	height: 271px;
	background: url(../images/features-panel-bg.jpg) top no-repeat;
}
.packages-panel{
	width: 960px;
	height: 271px;
	background: url(../images/packages-panel-bg.jpg) top no-repeat;
}
.packages-panel.discountpacks{
	background: url(../images/packages-panel-bg-discount.jpg) top no-repeat; 
}
#sidebar{
	width: 307px; /*296px;*/
	float: right;
	position: relative;
	top: -257px;
	left: -12px;
}
#page-sidebar{
	width: 307px;
	float: right;
	margin-top: 25px;
}
#signup-panel{
	width: 307px;
	height: 352px;
	background: url(../images/sign-up-panel-bg.png) top no-repeat;
}
#content-panel{
	width: 960px;
	min-height: 441px;
	background: #fff url(../images/content-panel-bg.jpg) center top no-repeat;
}
#content-panel.features{
	background: #fff;
}
#footer{
	width: 960px;
	height: 65px;
}

/*
 * Navigation
 */
#navigation ul li{
	float: left;
}
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:active, #navigation ul li a:visited{
	width: 84px; /*102px;*/
	height: 31px; /*44px;*/
	display: block;
	padding: 13px 0 0 20px;
	border-right: 1px solid #004273;
	border-left: 1px solid #002642;
	
	font: bold 14px  Helvetica, Arial, sans-serif;
	color: #96d2f9;
	text-shadow: 0 -1px 2px #000;
	text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li a.active{
	color: #fff;
}
#navigation ul li a.active{
	background: url(../images/navigation-active.png) bottom center no-repeat;
}
#signin{
	width: 394px;
	height: 44px;
	float: right;
	background: url(../images/sign-in-bg.jpg) repeat;
	border-left: 1px solid #004171; 
}
#signin form input{
	float: left;
	margin: 7px 10px 0 6px; 
}
#signin form input.signin-username, #signin form input.signin-password{
	width: 97px; /*127px;*/
	height: 24px; /*32px;*/
	border: 0;
	padding: 8px 0 0 30px;
	color: #727272;
}

/** Login form **/
#signin form input.signin-username{
	background: url(../images/forms/sign-in-username.png) left no-repeat;
}
#signin form input.signin-password{
	background: url(../images/forms/sign-in-password.png) left no-repeat;
}
#signin form input.signin-button{
	margin: 0;
}

/*
 * Main panel the blue bit with the chap on
 */
#features-panel #promo .copy, .packages-panel #promo .copy, #main-panel-thin #promo .copy{
	width: 615px;
	float: left;
	margin: 16px 0 0 30px;
}
#features-panel #promo .copy p{
	font-size: 13px;
	line-height: 20px !important;
}
#main-panel #promo .copy{
	width: 380px;
	padding: 85px 0 0 20px;
}
#promo img.logo, #main-panel-thin img.logo{
	float: left;
	margin-bottom: 10px;
	padding: 15px 0 0 20px;
	background-repeat: no-repeat;
}
#main-panel #promo span.tagline{
	font-size: 20px;
	text-transform: uppercase;
}
#promo p{
	font: bold 14px Helvetica, Arial, sans-serif;
	text-shadow: 0 1px 2px #004f82;
	color: #fff;
	line-height: 21px !important;
}
#main-panel #promo .signup{
	margin-top: 20px;
	float: left;
}
#main-panel #promo p span.more{
	margin: 29px 0 20px 20px;
	float: left;
	text-shadow: none;
}
#main-panel #promo p span.more a, #main-panel #promo p span.more a:active, #main-panel #promo p span.more a:visited, #main-panel #promo p span.more a:link{
	font: bold 14px Helvetica, Arial, sans-serif;
	color: #fff;
}
#main-panel #promo p span.more a:hover{
	
}

/** The thinner main panel band **/
#main-panel-thin{
	width: 960px;
	height: 110px;
	background: url(../images/main-panel-thin-bg.jpg) top no-repeat;
}

/*
 * Sidebar
 */
#signup-panel h2, #signup-panel2 h2, #getintouch h2{
	color: #727272;
	padding: 16px 0 20px 20px;
}
#signup-panel2 h2{
	padding-top: 11px;
}

/** The signup form **/
#signup-panel form{
	padding-left: 20px;
}
#signup-panel form input.signup-name, #signup-panel form input.signup-email, #signup-panel form input.signup-phone, #signup-panel form input.signup-site,
#signup-panel2 form input.signup-name, #signup-panel2 form input.signup-email, #signup-panel2 form input.signup-phone, #signup-panel2 form input.signup-site,
#getintouch form input.signup-name, #getintouch form input.signup-email, #getintouch form input.signup-phone, #getintouch form input.signup-site
{
	width: 228px; /*258px;*/
	height: 26px; /*38px;*/
	border: 0;
	padding: 12px 0 0 40px;
	color: #727272;
	margin-bottom: 15px;
}
#signup-panel2{
	width: 568px;
	height: 216px;
	background: url(../images/signup-bg.jpg) top no-repeat;
	margin: 20px 0 0 22px;
	float: left;
}
#signup-panel2 .formrow{
	margin-left: 12px;
}
#signup-panel2 .formrow .getstarted{
	float: right;
	margin-right: 23px;
}
#signup-panel form input.signup-name, #signup-panel2 form input.signup-name{
	background: url(../images/forms/signup-yourname.png) top no-repeat;
}
#signup-panel form input.signup-email, #signup-panel2 form input.signup-email{
	background: url(../images/forms/signup-youremail.png) top no-repeat;
}
#signup-panel form input.signup-phone, #signup-panel2 form input.signup-phone{
	background: url(../images/forms/signup-yourphone.png) top no-repeat;
}
#signup-panel form input.signup-site, #signup-panel2 form input.signup-site{
	background: url(../images/forms/signup-yoursite.png) top no-repeat;
}

#getintouch form input.signup-name, #getintouch form input.signup-email, #getintouch form input.signup-phone, #getintouch form input.signup-site{
	width: 180px; /*217px;*/
	height: 25px; /*36px;*/
	margin-right: 5px;
}

/** Get in Touch form on contact page **/
#getintouch .formrow{
	margin-left: 28px;
}
#getintouch form input.signup-name{
	background: url(../images/forms/getintouch-yourname.png) top no-repeat;
}
#getintouch form input.signup-email{
	background: url(../images/forms/getintouch-youremail.png) top no-repeat;
}
#getintouch form input.signup-phone{
	background: url(../images/forms/getintouch-yourphone.png) top no-repeat;
}
#getintouch form input.signup-site{
	background: url(../images/forms/getintouch-yoursite.png) top no-repeat;
}
#getintouch form textarea.contact-message{
	border: none;
	font: 14px Helvetica,Arial,sans-serif;
	color: #727272;
	background: url(../images/forms/contact-message.png) top no-repeat;
	height:95px;
	padding:6px 3px 5px 40px;
	width:406px;
}
#getintouch form .send{
	margin: 10px 20px 0 0;
	float: right;
}
div.lostpassword .send{
	width: 55px;
	height: 31px;
	background: none;
	padding: 0;
}

/** The intellichat demo **/
#intellichatembed{
	margin-top: 12px;
}

/*
 * Content panel
 */

/** Shared styles **/
#content-panel .features-panel .feature.rowend, #content-panel .setup-panel .step.rowned{
	margin-right: 0;
}

/** The 4 main feature parts **/
#content-panel div.features-panel{
	width: 610px;
	padding: 4px 0 0 16px; 
}
.privacy div.features-panel{
	width: auto !important;
	padding: 0 !important;
}
#content-panel .features-panel .feature{
	width: 283px;
	float: left;
	margin-right: 20px;
	padding: 13px 0 17px 0;
	border-bottom: 1px dotted #b1b1b1;
}
#content-panel .features-panel .feature img{
	float: left;
}
#content-panel .features-panel .feature h2, #content-panel .features-panel .feature p{
	margin-left: 57px;
}
	
/** The Three setup stages **/
#content-panel .setup-panel h2{
	font-size: 14px;
}
#content-panel .setup-panel{
	width: 610px;
	padding: 0 0 0 16px;
	float: left;
}
#content-panel .setup-panel .step{
	width: 190px;
	float: left;
	margin: 20px 15px 0 0;
}

/**
 * Features page
 */
.feature-copy{
	width: 187px; /*219px;*/
	margin-left: 14px;
	padding: 19px 16px 0 16px;
	background:#E2E2E2 url(../images/feature-copy-bg.jpg) no-repeat scroll center bottom;
	border-top:1px solid #FFFFFF;
	float:left;
	height:215px;
}
.feature-copy.first{
	margin-left: 21px !important;
}
.features-cpanel{
	width: 300px;
	float: left;
	margin: 20px 0 0 20px;
}
.privacy .features-cpanel{
	margin: 20px 0 0 0 !important;
}

/**
 * Packages page
 */
#content-panel.packages{
	background: #fff none;
}
.package-copy{
	width: 220px;
	height: 152px;
	background: url(../images/package-copy-bg.jpg) top no-repeat;
	float: left;
	margin-left: 14px;
}
.package-copy.first{
	margin-left: 19px !important;
}
.package-copy ul li{
	width: 120px;
	background: url(../images/icons/green-tick.png) left no-repeat;
	margin: 15px 0 0 43px;
	padding-left: 23px;
	font: 12px Helvetica, Arial, sans-serif;
	color: #333;
}
.package-copy .buypackage{
	margin: 73px 0 0 43px;
}
.features-cpanel .enquirenow{
	float: right;
}
.package-copy a.signup-package{
    width: 123px;
    height: 48px;
    display: block;
    background: url(../images/select-button.png) 0 -48px no-repeat;
    margin: 69px 0 0 50px;
}

/**
 * Contact us page
 */
.contact-details{
	width: 420px;
	float: left;
	padding-left: 20px;
}
.contact-details .detail{
	width: 205px;
	float: left;
	margin-top: 20px;
}
.contact-details .detail img{
	float: left;
	margin-top: 3px;
}
.contact-details .detail h2, .contact-details .detail p{
	margin-left: 30px;
}
.hiring{
	width: 420px;
	float: left;
	clear: left;
	margin-left: 20px;
}
.hiring hr{
	border-top: 1px solid #c0c0c0;
	border-right: none;
	border-bottom: none;
	border-left: none;
	padding: 10px 0;
}
.hiring img{
	float: left;
}
.hiring p{
	margin-left: 63px;
}

#getintouch{
	width: 493px;
	height: 337px;
	float: right;
	background: url(../images/get-in-touch-bg.png) top no-repeat;
	margin: 20px 13px 0 0;
}

/**
 * Generic pages
 */
#page-content{
	width: 600px;
	padding: 26px 0 0 23px;
}
#page-content.legal
{
	width:850px;
}
#page-content img{
	float: right;
	margin: -10px 0 10px 10px;
	margin:3px 0 10px 7px;
}

/**
 * Signup page
 */
#signup h2{
	padding: 12px 0 ;
	clear: left;
}
#signup .formrow{
	margin: 10px 0;
	clear: left;
}
#signup .formrow fieldset, .lostpassword fieldset{
	float: left;
	margin-right: 3px;
}
#signup input, div.lostpassword input{
	width: 288px;
	height: 30px;
	border: 0;
	padding: 10px 0 5px 5px;
	background: url(../images/forms/signup-field.png) top no-repeat;
	color: #727272;
}
#signup label{
	font: 12px Helvetica, Arial, sans-serif;
	color: #727272;
}
#signup div.agreeterms input{
	width: auto;
	height: auto;
}
#signup .completesignup{
	width: 261px;
	height: 56px;
	background: none;
	float: right;
	margin-right: 12px;
}
#packageinfo{
	float: none !important;
}
img#packageinfo{
	margin-top:0;
	margin-bottom:-5px;
}
.formrow .cvvhelp{
	width: 70px;
	padding:0 0 5px 0px;
	cursor: pointer;
}

.cvvhelp{
	display:inline;
}

.cvvhelp img{
	margin:0 10px 0 0;
}

ul.packageinfo, ul.packageinfo{
	display: none;
	list-style-type: none;
}
#signup .agreeterms{
	margin-left: 350px;
}

/**
 * Login page
 */
#login-panel{
	width: 307px;
	height: 371px;
	background: url(../images/login-panel.png) top no-repeat;
	margin: 0 auto;
}
#login-panel form{
	padding: 151px 0 0 23px;
}
#login-panel form input{
	margin: 10px 0;
	font: 12px Helvetica, Arial, sans-serif;
	color: #727272;
}
#login-panel form .login-username, #login-panel form .login-password{
	width: 226px;
	height: 26px;
	border: 0;
	padding: 12px 0 0 30px;
}
#login-panel form .login-username{
	background: url(../images/forms/login-username.png) top no-repeat;
}
#login-panel form .login-password{
	background: url(../images/forms/login-password.png) top no-repeat;
}

/*
 * Footer panel
 */

/** Footer bottom **/
#footer-bottom{
	width: 960px;
	min-height: 60px;
	margin: 0 auto;
	padding: 0 10px;
	background: url(../images/footer-bottom.png) top no-repeat;
}
#footer-bottom ul{
	padding-top: 33px;
}
#footer-bottom ul li{
	float: left;
}
#footer-bottom ul li a, #footer-bottom ul li a:link, #footer-bottom ul li a:active, #footer-bottom ul li a:visited{
	margin-right: 10px;
	font: 11px  Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #333;
}
#footer-bottom ul li a.active{
	font-weight: bold;
}
#footer-bottom p.credits{
	width: 180px;
	float: right;
}
#footer-bottom p.credits.home{
	margin-right: -320px;
}





#page-content.legal p {
	margin: 10px;
	margin-bottom:20px;
}
#page-content.legal ol {
	margin: 25px;
}
#page-content.legal li {
	margin-top: 5px;
	margin-bottom:10px;
}

div.discount{
	width: 270px;
	height: 23px;
	float: right;
	background-color: #DFF2BF;
	color: #4F8A10;
	border: 1px solid;
	padding: 8px 5px 3px 5px;
	margin: 1px 0 0 10px;
}
div.discount p{
	color: #4F8A10;
	font-weight: bold;
}