/*
* SmoothChrome v1.0
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* Site Styles
================================================== */
body { font-family: 'Open Sans', sans-serif; }
	.theme-color { color: #ff9516; }
	img { max-width: 100%; }
	body {
	background: url('../images/chrome_top_bg.png') top repeat-x #fff;
	
	}
	#head {
	height:90px;
		position: relative;
		margin: 0px 0 0px 0;
	}
	
	#logo {
		float: left;
		width: 200px;
	}
	
	#nav {
		position: absolute;
		float: right;
		font-size: 16px;
		top: 28px;
		right: 0;
		z-index: 200;
		clear: after;
		
	}
	
	#nav a {
		color: #222 !important;
		font-weight: normal !important;
		margin: 0 10px;
	}
	
	#nav a:hover {
		background-color: none !important;
		font-weight: normal !important;
	}
	
	.quartbox, .greyquartbox
{
	width: 25%px;
	display: inline;
	text-align: center;
	float: left;
}
.greyquartbox
{
	text-align: left;
	background-color: #f6f6f6;
	border: 1px solid #e4e4e4;	
	padding: 20px;
	line-height:18px;
	

}

.threequartbox
{
	/* width: 618px; */
	
	text-align: left;
	margin-left: 40px;
}
.fullbox{

	/* line-height: 40px; */
}
.fullbox img, .halfbox img, .quartbox img
{
	margin: 0px;
	padding: 0px;
}
	.inner { background-color: #EBEBEB; }
	.page {
	

	margin-top:0 !important;
	margin-bottom:0 !important;
	  -moz-box-shadow: 1 2px 5px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  }
	.cloud { background: #fff url(/newtemplate/images/cloudbg.jpg) repeat-x; }
	.page-inner { margin: 0px 20px; padding: 10px 0}

	ul#primary-nav ul {
		border: solid 1px #ddd !important;
		border-top: solid 1px #fff !important;
		border-width: 1px 1px 1px 1px !important;
		
	}
	
	ul#primary-nav ul li:hover{
		background-color: #efefef;
	}
	
	#feature-tabs {
		margin: 30px auto;
		text-align: center;
	}
	
	.tab-title {
		margin-top: 4px;
	}
	#feature{
		margin-bottom: 10px;
	}	
	
	#feature-content{
		height: 232px;
	}	
	.product {
		text-align: center;
	}
	
	.product img {
		display:block;
		text-align: center;
		margin: 0 auto;
	}
	#quote {
	
	}
	
	#footer {
		background: #1a1916;
		border: 1px solid #000;
		padding: 30px 0;
		color: #aeaeae;
		margin-top: 20px;
	}
	
	#footer h5 {
		color: #fff;
		margin-bottom: 10px;
	}
	
	.social img { margin: 0 7px; }
	
	#footer-nav {
	
	}
	
	#copyright {
		background: #131313;
		border-top: 1px solid #292929;
		color: #aeaeae;
		padding: 24px 0;
		text-align: center;
		font-size: 12px;
	}
	
	#copyright a{
		color: #aeaeae;
		text-decoration: none;
	}
	
	#copyright a:hover{
		color: #fff;
		text-decoration: underline;
	}
	
	#faq-page p { margin:0; padding:0; margin-bottom:6px; }
	#faq-page h2 { margin:0; padding: 0; padding-top:10px; font-size:26px;}
	#faq-page h5:hover { color: #222; }
	#faq-page h5.active  { color:#ff9516; }
	#faq-page h5 { color:#444; padding-top:5px; margin-bottom:2px; font-size:16px; cursor: pointer;}
	div.toggle { height:0; overflow: hidden; position: relative; }
/* Typography
================================================== */

	h1, .h1 {
		margin: 0;
		padding: 0;
	}
	h2, .h2, h3, .h3 {

		font-weight: 500;
		text-align: center;
	}
	
	h2, .h2 {
		font-size: 36px;
		margin-bottom: 5px;
		padding-top:20px;
	}
	
	h2.head, .h2.head , h2#head{ margin-bottom: 20px; display:block;}
	
	h1 img, h2 img, .h2 img , h3 img, h4 img, h5 img, h6 img{ vertical-align: middle; }
	
	h4, .h4 {
		font-size: 23px;
		line-height: 1.2em;
		font-weight: bold;
	}
	
	h5, .h5 {
		font-size: 20.98px;
		font-weight: bold;
	}
	.subtitle {
		font-size: 20px;
		color: #a4a4a4;
		
	}

	#quotePanelContainer
{
    height: 140px;
    padding-top:0;
}
.quoteText
{

    color: #6c6c6c;
    font-size:20px;
    line-height:120%;   
    text-align:center;   
}
.quoteAuthor
{

    color: #6c6c6c;
    font-size:16pt;  
	 font-style:italic;	
	 font-weight: bold;
	 margin-top:10px;
	 text-align:center;
}
.quoteOthers
{
    color: #6c6c6c;
    font-size:14pt;
    float:left;
    text-transform:uppercase;   
}

#mobile-subtitle { display: none; }

/* #Tabs (activate in tabs.js)
================================================== */
	ul.tabs {
		display: block;
		margin: 0 auto 20px auto;
		padding: 0;
		width:321px;
		 }
	ul.tabs li {
		display: block;
		width: auto;
		height: 40px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a {
		display: block;
		text-decoration: none;
		width: 105px;
		height: 39px;
		padding: 0;
		line-height: 30px;
		border: solid 1px #ddd;
		border-width: 1px 1px 1px 0;
		margin: 0;
		background: url('../images/grey-bg.jpg') top repeat-x #f5f5f5;
		font-size: 18px; }
	ul.tabs li a:hover {
		background: url('../images/dark_grey-bg.jpg') top repeat-x; }
	ul.tabs li a.active {
		background: url('../images/purple-bg.jpg') top repeat-x;
		border-left-width: 1px;
		color: #fff;
		
		/*
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px;
*/		}
	ul.tabs li a.active:hover {
		background: url('../images/purple-bg.jpg') top repeat-x;
		cursor: default;
		}
	ul.tabs li:first-child a.active {
		margin-left: 0; }
	ul.tabs li:first-child a {
		border-width: 1px;
		/*
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; */}
	ul.tabs li:last-child a {
	/*
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; */}

	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }

	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }

table#price {
	border: solid #a0a0a0 1px;
	text-align: right;
}
table#price td{ padding: 10px; border: solid #a0a0a0 1px;}
table#price td.left{text-align:left; font-weight: bold;}
table#price tr{font-size: 14px; border: solid #a0a0a0 1px;}
table#price td.bold{ font-weight: bold; }
table#price td.boldB{ font-weight: bold; color:#1657a6 }
table.subject {
	border: solid #a0a0a0 1px;
	display: inline-block;
	margin-right: 20px;
	margin-left: 20px;
	vertical-align:top;
}
table.subject td{ padding: 10px; border: solid #a0a0a0 1px; }
table.subject td.head{ font-weight: bold; color:#1657a6 }
table.subject td.subject_head{ font-weight: bold; text-decoration: underline; font-size: 16px; }

.info{
    position:relative;
    z-index:99;
    text-decoration:none; cursor: pointer;}

.info:hover{z-index:100; cursor: pointer;}

.info span{
    display: none;
    cursor: pointer;
    }

.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    width: 100px;
    left:-3em;
    background-color:#171717;
    color:#fff;
    text-align: center;
    padding:5px;
    font-size: 13px;
    line-height: 16px;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    }
.info-wide span{ width: 200px !important; top: 1.5em !important; left: 20px !important;}

/* #Buttons
================================================== */

	a.login
	{
		font-weight: bold;
		color: #fff;
		display: inline-block;
		text-decoration: none;
		cursor: pointer;
		font-size: 14px;
		padding: 5px 8px;
		}

	a.login:hover{
		background: #ddd;
		}

	a.login:active{

	}

	a.button
	{
		background: #ef3f8d;
		color: #fff;		
		text-align: center;
	 }
	 
	 a.blue {
		background: #1e82d8;
		border-top: 1px solid #63a9e4;
		border-right: 1px solid #63a9e4;
		border-left: 1px solid #63a9e4;
		border-bottom: none;
	 }
	 
	 a.blue:hover { background-color: #186bbc; }
	 
	  a.green {
		background: #81b300;
		border-top: 1px solid #a8cb4f;
		border-right: 1px solid #a8cb4f;
		border-left: 1px solid #a8cb4f;
		border-bottom: none;
	 }
	 
	 a.green:hover { background-color: #6a9600; }
	 
	  a.magenta {
		background: #975ab0;
		border-top: 1px solid #b78dc8;
		border-right: 1px solid #b78dc8;
		border-left: 1px solid #b78dc8;
		border-bottom: none;
	 }
	 
	 a.magenta:hover { background-color: #7d4a93; }
	 
	  
/* Short Codes
================================================== */
	.tc { text-align: center; }
	.tl { text-align: left; }
	.tr { text-align: right; }
	.tn { text-align: none; }
	.ma { margin-left: auto; margin-right: auto; }
	
	.top-button {
	position: fixed;
	left: 0;
	bottom: 0;
	padding-left: 40px;
	padding-bottom: 30px;
	text-align: center;
	
	
	}
	
/* Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1228px) {
	.top-button h4 { font-size: 16px; }
	.top-button {  padding-left: 10px; padding-bottom: 10px; }
	}
@media only screen and (max-width: 1105px) {
	.top-button {  display: none; }
	}
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	#nav {
		display: block !important;
		position: relative;
		clear: both;
		top:0;
		float: none;
		height:100px;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	.social { text-align: left !important; }
	#customer_quotes { display: none !important; }
	a#live_help-button { display: none; }
	#nav {
		margin: 0 auto;
		float: none;
		font-size: 14px;
height: 30px;
overflow: hidden;	

		}
		#main-title { margin-top: 10px; }
		#newsletter-panel, #contact-panel { display: none; }
		#social_media-panel { text-align: center !important; margin: 0 auto; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#logo { text-align: center;}
		#footer { padding: 10px 0 !important; }
		#customer_quotes { display: none !important; }
		
		#wide-subtitle { display: none; }
		#nav ul li { margin-bottom: 5px; }
		#nav ul li.last, #nav ul li.first {
			margin-right: 0;
		}
		#main-title { display: none; }
		a#live_help-button { display: none; }
		#newsletter-panel, #contact-panel { display: none; }
		#logo { margin-left: 35px; margin-right: auto; float:none; }
		#nav {
		margin: 0 auto;
		float: none;
		font-size: 12.4px;
height: 30px;
overflow: hidden;
text-align: center;	display: none !important;		
		}
		#nav a {
		color: #222 !important;
		font-weight: normal !important;
		margin: 0 0px;
		text-align: center;
	
	}
	
	#nav ul li a:hover {
		background-color: transparent !important;
		font-weight: normal !important;
	}
	}

/* PRINT 
***********/
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }  
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
  #nav, #footer, .noprint { display: none; }
  .page { box-shadow: none; -mox-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; }
}

/* Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/