/********************************************************************
 VRI CSS File
 Design: FORGE
 XHTML/CSS: FORGE
--------------------------------------------------------------------
 CHANGE LOG:
   BDC:  06-15-09          File Creation
   BDC:  06-16-09          Browser testing
                            - FireFox 3.5 (XP, OSX)
                            - Safari 3+ (XP, OSX)
                            - IE 6+ (XP)
                            - Chrome (XP)
   BED:  06-18-09          Final Tweaks/Packaging
********************************************************************/

* {
  margin: 0;
  padding: 0;
}

body {
  font: normal 62.5% "Lucida Sans Unicode", "Lucida Grande", Verdana, Helvetica, sans-serif;
  letter-spacing: .05em;
  background-color: #f5f8fa;
  margin-top: 20px;
}

a {
  text-decoration: none;
}

a.normal{
  text-decoration:underline;
  color:#668CA1;
}

a.normal:visited{
  color:#668CA1;
}

a.normal:hover{
  color:#971F1F;
}

strong, em, i {
  font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#wrapper {
	width: 1006px;
	margin: 0 auto;
  padding-top: 44px;
  background: url(/i/cap-header.png) top left no-repeat;
}

#header, #content, #hero {
  background: #fff url(/i/bg-body.png) top left repeat-y;
  padding-bottom: 6px;
}

.sub-page #content {
  margin-top: 30px;
}

#hero .container {
	background: url(/i/be-safe.png) top left no-repeat;
	padding-top: 155px;
	position: relative;
}

#hero h1 {
	color: #aeb087;
	font-weight: normal;
	font-size: 2em;
	line-height: 1.5em;
	margin-bottom: 10px;

/***********************************************************
 HERO AREA HEADLINE IMAGE REPLACEMENT
 - Comment the following 3 lines to use HTML text
   for your "Hero-Area" headline.
***********************************************************/

	text-indent: -9976px;
	background: url(/i/hero-headline.png) top left no-repeat;
	min-height: 97px;

}

#hero .read-more {
	display: block;
	float: left;
	clear: left;
	margin-left: 456px;
	min-width: 74px;
	min-height: 18px;
	line-height: 1.8em;
	background: #a9bfca url(/i/read-more-bg.png) top left repeat-x;
	color: white;
	text-transform: uppercase;
	font-size: .9em;
	padding: 0 .5em 0 .5em;
	text-align: center;

/***********************************************************
 READ-MORE IMAGE REPLACEMENT
 - Comment the following 3 lines to use HTML text
   for your "Hero-Area" read more link.
***********************************************************/
/*
	text-indent: -9976px;
	background: #a9bfca url(/i/read-more.png) top right no-repeat;
	padding: 0;
*/
}
	

#hero-image {
	position: absolute;
	right: 0;
	bottom: 0;
}

#footer {
  background: url(/i/shoe-footer.png) bottom left no-repeat;
  padding-bottom: 50px;
}

img {
	border: none;
}

#vri-logo {
  display: block;
  margin-top: 6px;
}

#vri-logo-sub {
	display:block;
	margin-top:6px;
}

#site-nav {
  list-style: none;
}

#site-nav li:hover, #site-nav li.current {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#about #site-nav #nav-about {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#products #site-nav #nav-products {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#careCenter #site-nav #nav-center {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#contact #site-nav #nav-contact {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#careers #site-nav #nav-careers {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#news #site-nav #nav-news {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

body#dealers #site-nav #nav-dealers {
  background: #e5edf2 url(/i/bg-site-nav-on.png) top left repeat-x;
}

#site-nav li {
  background: #fafcfd url(/i/bg-site-nav.png) top left repeat-x;
  margin-bottom: 3px;
}

#site-nav a {
  display: block;
  padding: 4px 11px;
  text-transform: uppercase;
  color: #000;
  font-size: 1em;
  letter-spacing: .07em;
}

/***********************************************************
 NAVIGATION IMAGE REPLACEMENT
 - Comment the following styles to use HTML text
   for your navigation.
***********************************************************/ 

/*

#site-nav a {
  text-indent: -9976px;
}

#site-nav #nav-about {
  background: url(/i/nav-about.png) left top no-repeat;
}

body#about #site-nav #nav-about {
  background-position:right top;
}

#site-nav #nav-careers {
  background: url(/i/nav-careers.png) left top no-repeat;
}

#site-nav #nav-products {
  background: url(/i/nav-products.png) left top no-repeat;
}

#site-nav #nav-news {
  background: url(/i/nav-news.png) left top no-repeat;
}

#site-nav #nav-center {
  background: url(/i/nav-center.png) left top no-repeat;
}

#site-nav #nav-contact {
  background: url(/i/nav-contact.png) left top no-repeat;
}

#header #site-nav li:hover a {
  background-position: right top;
}

#header #site-nav li.current a {
  background-position: right top;
}

*/






/***********************************************************
 End image-replacement styles
***********************************************************/ 

#phone-number {
  text-indent: -9976px;
  line-height: 3em;
  min-height: 22px;
  background: url(/i/phone-number.png) right top no-repeat;
}

.listing {
  background: #dfe8ef url(/i/bg-listing.png) bottom left repeat-x;
  margin-bottom: 6px;
  position: relative;
  border-bottom: 2px solid #d7dadb;
  min-height: 110px;
}

.listing img {
  position: absolute;
  top: 0;
  left: 0;
}

.item-title {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: .15em;
  border-bottom: 2px solid #d7dadb;
  padding-bottom: .5em;
}

.listing .item-title {
  margin: 12px 12px 0 130px;
}

#news-items .item-title, #feature .item-title {
  margin: 12px 12px 0 12px;
}

#feature .item-title {
  border-bottom-color: #aaa;
}

.item-description {
  display: block;
  font-size: 1.3em;
  letter-spacing: .01em;
  line-height: 1.4em;
  color: #4c4c4c;
}

.listing .item-description {
  margin: 3px 12px 6px 130px;
}

.news-item .item-description, #feature .item-description {
  margin: 3px 12px 6px 12px;
}

#news-items a:hover, #feature a:hover, .listing a:hover {
  text-decoration: underline;
}

#content .read-more {
  color: #971f1f;
  text-transform: uppercase;
  font-size: .9em;
  line-height: 1.3em;
}

.listing .read-more {
  display: block;
  text-align: right;
  padding: .4em 12px .3em 12px;
  background: #fff url(/i/bg-listing-read-more.jpg) bottom right repeat-y;
}

.news-item .read-more {
  display: block;
  padding: 2px 12px 20px 12px;
}

#feature .read-more {
  display: block;
  text-align: right;
  padding: .4em 12px .4em 12px;
  color: #fff;
	  background: #a5c0d5;
}


#news-items {
  background: #fff url(/i/bg-news.jpg) top left repeat-x;
}

.news-item .news-title, .news-item .date {
  margin: 6px 12px 6px 12px;
  font-weight: normal;
  font-size: 1.3em;
}

.news-item a, .news-item .date {
  color: #971f1f;
}

.news-item .news-title {
	font-weight: bold;
}

#feature {
  background: #e1eaf1 url(/i/bg-feature-b.jpg) top left no-repeat;
}

.feature-title {
  margin: 6px 12px;
  font-size: 1.6em;
  font-weight: bold;
}

#footer {
	font-size: 1.1em;
}

#footer .container {
  background: url(/i/bg-footer.jpg) bottom left repeat-x;
  color: #4c4c4c;
  font-size: .9em;
  padding: 1em 0;
/*   min-height: 62px; */
}

#footer-nav {
  list-style: none;
  margin-left: 6px;
}

#footer-nav li {
  float: left;
}

#footer-nav a:hover {
	text-decoration: underline;
}

#footer-nav a {
  display: block;
  float: left;

  text-transform: uppercase;
  color: #4c4c4c;
  padding: 0 6px;
}

#footer .copyright {
	text-align: left;
  display: block;
margin-left:12px;
  width: 200px;
  margin-right: 12px;
  
  
}


#footer .bbbLogos {
	text-align: right;
  display:;
  float:right;
margin-left:12px;

  margin-right: 12px;
  
  
}

#footer .questions {
	margin-left: 12px;
	padding: .5em 0;
}

#footer .questions a:hover {
	text-decoration: underline;
}

#footer .questions a {
	color: #214292;
}

.sub-page .section-title {
	font-size: 1.8em;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: .15em;
	color: #971F1F;
	margin-bottom: .8em;
}

#section-nav {
	list-style: none;
}

#section-nav li {
	display: block;
	border-bottom: 2px solid #eee;
	margin-right: 12px;
}

#section-nav li:hover, #section-nav li.current {
	background: url(/i/bullet.gif) .4em 8px no-repeat;
}


#section-nav li a {
	text-transform: uppercase;
	color: #666;
	display: block;
	padding: .4em 0 .3em 12px;
	letter-spacing: .15em;
}

#section-nav li.last {
	border-bottom-color: transparent;
}

#body {
	padding-top: 1.6em;
}

#body {
	font-size: 1.3em;
	color: #666;
	line-height: 1.4em;
}

#body p {
	padding-bottom: 1em;
}

#body ul, #body ol, #body blockquote, #body li {
	padding-left: 1em;
	padding-right: 2em;
}

#body ul, ol  {
	margin-top: .5em;
	list-style: none;
}

#body li {
	padding-bottom: .8em;
	background: url(/i/bullet.gif) .4em 8px no-repeat;
}

/*#body ol li{

padding-bottom: .8em;
	background:none;

}*/

#body blockquote {
	font-style: italic;
	padding: .8em 2em .8em 2em;
}

#body h2, #body h3, #body h4, #body h5, #body h6 {
	color: #668CA1;
	font-weight: normal;
	padding-bottom: .6em;
}

h2:link{

color:#668CA1;
font-weight:normal;
padding-bottom:0.6em;
text-decoration:underline;

}

h2 a:visited{
  color:#333333;
}

h2 a:hover{
  color:#971F1F;
}

#body h2 { font-size: 1.3em; }
#body h3 { font-size: 1.2em; }
#body h4 { font-size: 1em; text-transform: uppercase; }
#body h5 { font-size: .9em; text-transform: uppercase; }
#body h6 { font-size: .8em; text-transform: uppercase; }

#body img {
	margin: .5em;
	float: right;
}

#body img.align-left {
	float: left;
}

#body img.align-right {
	float: right;
}

#body img.align-none{
  float:none;
}

/*
<em class="price">$72.00/unit</em>
<a class="details" href="#" title='Details about "Product Name"'>Details</a>
*/
.listing .price {
	margin: 0 1em 0 130px;
	font-style: normal;
	font-size: 1.4em;
	line-height: 1.4em;
}

.listing .details {
	text-transform: uppercase;
	color: #971F1F;
	font-size: 1.1em;
	line-height: 1.4em;
}






/* -------------------------------------------------------------- 
   == STRUCTURE: ========================
    * Page width:            906 px
    * Number of columns:     16
    * Column width:          51 px
    * Margin width:          6 px
   ======================================

   By default, the grid is 906px wide, with 16 columns 
   spanning 51px, and a 6px margin between columns.

   If you need fewer or more columns, use this formula to calculate
   the new total width: 

   Total width = (number_of_columns * (column_width + margin_width)) - margin_width

   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 906px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(/i/grid.png);
}

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16 {
  display: block;
  float:left;
  margin-right: 6px;
}

/* The last column in a row needs this class. */
.last { 
  margin-right: 0;
}

/* Use these classes to set the width of a column. */
.span-1  { width: 51px;}
.span-2  { width: 108px;}
.span-3  { width: 165px;}
.span-4  { width: 222px;}
.span-5  { width: 279px;}
.span-6  { width: 336px;}
.span-7  { width: 393px;}
.span-8  { width: 450px;}
.span-9  { width: 507px;}
.span-10 { width: 564px;}
.span-11 { width: 621px;}
.span-12 { width: 678px;}
.span-13 { width: 735px;}
.span-14 { width: 792px;}
.span-15 { width: 849px;}
.span-16, div.span-16 { width: 906px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 57px;}
.append-2  { padding-right: 114px;}
.append-3  { padding-right: 171px;}
.append-4  { padding-right: 228px;}
.append-5  { padding-right: 285px;}
.append-6  { padding-right: 342px;}
.append-7  { padding-right: 399px;}
.append-8  { padding-right: 456px;}
.append-9  { padding-right: 513px;}
.append-10 { padding-right: 570px;}
.append-11 { padding-right: 627px;}
.append-12 { padding-right: 684px;}
.append-13 { padding-right: 741px;}
.append-14 { padding-right: 798px;}
.append-15 { padding-right: 855px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 57px;}
.prepend-2  { padding-left: 114px;}
.prepend-3  { padding-left: 171px;}
.prepend-4  { padding-left: 228px;}
.prepend-5  { padding-left: 285px;}
.prepend-6  { padding-left: 342px;}
.prepend-7  { padding-left: 399px;}
.prepend-8  { padding-left: 456px;}
.prepend-9  { padding-left: 513px;}
.prepend-10 { padding-left: 570px;}
.prepend-11 { padding-left: 627px;}
.prepend-12 { padding-left: 684px;}
.prepend-13 { padding-left: 741px;}
.prepend-14 { padding-left: 798px;}
.prepend-15 { padding-left: 855px;}



/* Border on right hand side of a column. */
div.border {
  padding-right:2px;
  margin-right:3px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:51px;
  margin-right:48px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -57px;}
.pull-2 { margin-left: -114px;}
.pull-3 { margin-left: -171px;}
.pull-4 { margin-left: -228px;}
.pull-5 { margin-left: -285px;}
.pull-6 { margin-left: -342px;}
.pull-7 { margin-left: -399px;}
.pull-8 { margin-left: -456px;}
.pull-9 { margin-left: -513px;}
.pull-10 { margin-left: -570px;}
.pull-11 { margin-left: -627px;}
.pull-12 { margin-left: -684px;}
.pull-13 { margin-left: -741px;}
.pull-14 { margin-left: -798px;}
.pull-15 { margin-left: -855px;}
.pull-16 { margin-left: -912px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16 {float:left;position:relative;}


.push-1 { margin: 0 -57px 1.5em 57px;}
.push-2 { margin: 0 -114px 1.5em 114px;}
.push-3 { margin: 0 -171px 1.5em 171px;}
.push-4 { margin: 0 -228px 1.5em 228px;}
.push-5 { margin: 0 -285px 1.5em 285px;}
.push-6 { margin: 0 -342px 1.5em 342px;}
.push-7 { margin: 0 -399px 1.5em 399px;}
.push-8 { margin: 0 -456px 1.5em 456px;}
.push-9 { margin: 0 -513px 1.5em 513px;}
.push-10 { margin: 0 -570px 1.5em 570px;}
.push-11 { margin: 0 -627px 1.5em 627px;}
.push-12 { margin: 0 -684px 1.5em 684px;}
.push-13 { margin: 0 -741px 1.5em 741px;}
.push-14 { margin: 0 -798px 1.5em 798px;}
.push-15 { margin: 0 -855px 1.5em 855px;}
.push-16 { margin: 0 -912px 1.5em 912px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16 {float:right;position:relative;}



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

.ui-tabs .ui-tabs-hide {
     display: none
}

 .headline{
	background-image:url(../i/bg-headline.jpg);
	background-repeat:repeat-x;
	
}

.home .headline{min-height:350px; position:relative}

.home .headline p{line-height:1.2}



.pretty-hover{
	cursor: pointer;
	background-image:url(../i/bg-headline-on.jpg);
	
}

.learn-more{
	height:40px;
	width: 120px;
	background-image:url(../i/home-learn-more-btn.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	position:absolute;
	bottom:0;
	margin-left: 75px;
}

.learn-more-hover{
	background-image:url(../i/home-learn-more-btn-hover.png);
}

#tabs{
	padding:0px;
	margin:0px;
	min-height:140px;
}

#tabs ul{
	padding:0px;
	margin:0px;
	float:right;
}

#tabs ul li{
	margin:0px;
	display:inline;
	}
	
#tabs ul li a{
	padding:3px;
	border:1px solid #a4a4a4;
	background-color:#dbdbdb;
	color:#a8bfd3;
	text-decoration:none;
	font-size:95%;
	}

#tabs ul li a:visited{
	color:#a8bfd3;
	}
	
#tabs ul li a:hover{
	color:#fff;
	background-color:#484848;
	}
	
		#tabs li.ui-tabs-selected a{ 
	color:#3e3e3e;
	}

#products .headline h1{font-weight:normal;margin-bottom:13px;font-size:23px;}
#products .prod-hdr h1{font-weight:normal;margin-bottom:13px;font-size:25px;font-weight:bold}
#products .prod-hdr h2{font-weight:normal;margin-bottom:13px;font-size:17px;font-weight:bold}
#products .headline {margin-bottom:10px;}
#products .headline .large {font-size:110%;line-height:125%;}


#products .images{float:right;width:200px;margin-left:20px;text-align:center;font-size:12px;color:#aa3129;}

#products .prod-center{width:100%;text-align:center}
#products .prod-left{float:left;width:50%;}
#products .prod-right{float:left;width:50%;}
#products .select {text-align:center;width:200px;text-align:center;padding-top:15px;clear:both}

#products .headline img {float:none;}

#products #purchase{background:url(/products/i/purchase-bg.png) top center repeat-x;height:59px;margin-top:-10px;padding:8px;}
#products #purchase img{float:none;}
#products #purchase p{padding:0;margin:0;text-align:center;font-size:120%;padding-bottom:3px;}
#products #phone{width:60%;float:left;border-right:1px solid #c7cda8}
#products #phone .number{color:#aa3129;font-weight:bold;}
#products #online{width:39%;float:left;}

#products #facts {padding:20px;padding-right:10px;}
#products #facts .facts {color:#000;font-weight:bold; text-transform:uppercase;}

#products #feature{background:url(/products/i/features-bg.jpg) top center repeat-x}
#products #feature ul{margin-left:30px;margin-top:10px;padding-right:10px;}
#products #feature li{color:;font-size:12px;margin-bottom:7px;}

#products #feature p{padding:10px;font-size:12px;padding-bottom:5px; color: #535353}

#products #select-ma{background:url(/products/i/purchase-bg.png) top center repeat-x;height:59px;padding:18px;text-align:center;position:absolute;bottom:0;width:210px;}
#products #select-ma img {float:none;margin:0;}
#products .choose img{margin-top:-13px;}
#products .choose .large{font-size:120%;}
.choose{float:left;width:49%;background:url(/products/i/choose-bg.jpg) top center repeat-x;min-height:370px;position:relative }
#products .choose p{padding:10px;line-height:1.1em;}
#products .voip{background-color:#aa3129;color:#fff;padding:2px;font-size:12px; text-align:center;clear:both }

.pretty-hover-choose{background-image:url(/products/i/choose-bg-on.jpg);cursor:pointer;}