﻿/* CSS Document */

body {
    background-color: #398fb0;
/*    text-align: center;*/
}

p, div, li,  h1, h2, h3, h4, td, input, select, textarea {
    font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    line-height: 18px;
}
h1, h2, h3, h4, p.tagline, legend {
    font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
}
p, h1, h2, h3, h4 {
	margin-bottom: 15px;
}
			
a img, :link img, :visited img {
    border: none
}

ul {
	padding-left: 10px;
}


a:link, a:visited {
    color: #333333;
    text-decoration: underline;
}
a:hover, a:active {
    color: #00A8EE;
    text-decoration: underline;
}
h1 span, h2 span, h3 span {
    display: none;
}
div.clear {
    clear: both;
    overflow: hidden;
    height: 1px;
}

.clear {
    clear: both;
}

.hidden {
	display: none;
}

/***************************************
	COMMON
****************************************/

#top, #main, #content, #bottom, #extra, #footer {
	width: 760px;
	margin: 0 auto;
	text-align: left;
}

a.download-link {
	display: block;
	height: 25px;
	color: #FFF;
	background: #EAEAEA url(/images/menu/menu_bar_thin.jpg) center center repeat-x;
	border: 1px solid #398fb0;
	text-align: center;
	font-size: 100%;
	padding-top: 7px;
	text-decoration: none;
	font-weight: bold;
}


a:hover.download-link {
	color: #26586c;
	background: #EAEAEA url(/images/menu/menu_bar_thin_hover.jpg) center center repeat-x;
}
/***************************************
	TOP
****************************************/
#top-wrapper {
	background: #FFF url(/images/top.jpg) 0 0 repeat-x;
	height: 80px;
}

#top {
	background: #EAEAEA url(/images/top.jpg) repeat-x;
	margin: 0 auto;
	height: 80px;
	width: 950px;
	/*float: inherit;*/
}

/***************************************
	MAIN
****************************************/

#main-wrapper {
/*	background: #EAEAEA url(/images/menu/menu_bar_thin.jpg) repeat-x; height: 50px;*/
}
#main {
	/*background: url(/images/glow.jpg) top right no-repeat;*/
	
}

/***************************************
	TOP NAVIGATION 	
****************************************/

#nav-wrapper {
	background: #EAEAEA url(/images/menu/menu_bar_thin.jpg) repeat-x; height: 50px;
}

#nav {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	background: #EAEAEA url(/images/menu/menu_bar_thin.jpg) repeat-x; height: 50px;
}

#nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 950px;
}

#nav li {
	float: left;
	width: 189px;
	font-size: 16px;
}

#nav li a {
	padding-top: 6px;
	height: 40px;
	background: none;
	line-height: 2em;
	float: left;
	width: 100%;
	font-size: 120%;
	display: block;
	color: #FFF;
	border-left: 0.1em solid #cacad5;
/*	border-left: 0.1em solid #dcdce9;*/	text-decoration: none;
	text-align: center;
	font-weight: bold;
}


#nav li a:hover {
	color: #26586c;
	background: #EAEAEA url(/images/menu/menu_bar_thin_hover.jpg) repeat-x;
}

#nav li a.end {
	border-right: 0.1em solid #dcdce9;
}

/***************************************
	CONTENT
****************************************/
#content-wrapper {
	width: 100%;
	background: #BBB url(/images/layout/content-background.gif) repeat-y top center; 
}

#content {
	width: 930px;
	background-color: #EAEAEA;
	margin: 0 auto;
	padding: 1px 10px 15px 10px;
/*	border-color: #555;*/
/*	border-width: 0 5px; */
}

/***************************************
	FRAMED CONTENT
****************************************/
.blue-frame {
	text-align: center; 
	width: 575px; 
	float: left; 
	background-color: #E1E1E1; 
	border-color: #88BCD1; 

	border-style:solid;
	margin:       15px   0px   15px   0px; 
	padding:      10px  20px   10px  20px; 
	border-width:  0px  35px   0px  35px;
						/*   Top Right   Bot  Left	*/
}

.blue-frame-left {
	width: 575px; 
	float: left; 
	background-color: #E1E1E1; 
	border-color: #88BCD1; 

	border-style:solid;
	margin:       15px   0px   15px   0px; 
	padding:       10px  20px   10px  20px; 
	border-width:  0px  35px   0px  35px;
						/*   Top Right   Bot  Left	*/
}

.paragraph-header{
	color:#449ABD;
	font-size:200%;
	font-weight:bold;
	margin-top:0px;
	padding-top:0px;
	line-height:200%;
}

.content-section-header{
	color:#449ABD;
	font-size:200%;
	font-weight:bold;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:10px;
	line-height:120%;
}

.product-content-text{
  /*            Top Right   Bot  Left	*/
  clear: both;
	margin-top:   10px;
	padding:      10px  25px   15px  0px; 
}

/***************************************
	FOOTER
****************************************/
#footer-wrapper {
	background: #398fb0 url(/images/layout/footer.gif) repeat-x; 
	clear: both;
}

#footer {
	width: 950px;
/*	height: 90px;*/
	padding: 15px 0 15px 0; 
	background: #398fb0 url(/images/layout/footer.gif) repeat-x; 
}

#footer-menu {
/*	width: 500px;*/
	float: left;
	text-align: left;
	margin-top: 10px;
	font-size: 12px;
}

#footer-menu a{
	color: #FFF;
	text-decoration: none;
}

.footer-contact-info {
	width: 275px;
	float: right;
}

.footer-contact-info .row {
	width: 100%;
	/* border-bottom: 1px dotted #DDD; */
	/*  height: 40px; */
	color: #FFF;
}

.footer-contact-info .row div {
	float: left;
	padding: 2px 0px;
	color: #FFF;
	font-size: 110%;
}

.footer-contact-info .row .label {
	padding: 0px;
	width: 30%;
}

.footer-contact-info .row .info {
	width: 65%;
}

#footer .branding {
	float: left;
	text-align: center;
	color: #FFF;
}

#footer .branding img.logo {
	/*
	width: 75px;
	height: 75px;
	margin: 0 auto;
	*/
	text-align: left;
	margin: 5px 00px 0px 5px;
}

/***************************************
	PAGE HEADER
****************************************/
#page-header-wrapper {
	background: #398fb0 url(/images/layout/page-header.gif) repeat-x; 
	clear: both;
}

#page-header {
	width: 950px;
/*	height: 90px;*/
	padding: 15px 0 15px 0; 
	background: #398fb0 url(/images/layout/page-header.gif) repeat-x; 
}

#page-header-menu {
/*	width: 500px;*/
	float: left;
	text-align: left;
	margin-top: 10px;
	font-size: 12px;
}

#page-header-menu a{
	color: #FFF;
	text-decoration: none;
}

.page-header-contact-info {
	width: 275px;
	float: right;
}

.page-header-contact-info .row {
	width: 100%;
	/* border-bottom: 1px dotted #DDD; */
	/*  height: 40px; */
	color: #FFF;
}

.page-header-contact-info .row div {
	float: left;
	padding: 2px 0px;
	color: #FFF;
	font-size: 110%;
}

.page-header-contact-info .row .label {
	padding: 0px;
	width: 30%;
}

.page-header-contact-info .row .info {
	width: 65%;
}

#page-header .branding {
	float: left;
	text-align: center;
	color: #FFF;
}

#page-header .branding img.logo {
	/*
	width: 75px;
	height: 75px;
	margin: 0 auto;
	*/
	text-align: left;
	margin: 5px 00px 0px 5px;
}

/***************************************
	BREADCRUMBS
****************************************/
	
.breadcrumbs {
	margin: 5px 0 20px 0;
	float: left;
}

.breadcrumbs a {
	color: #398fb0;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: #24b1e9;
	text-decoration: underline;
}


/***************************************
	QUOTES
****************************************/

.quote-wrapper {
	width: 70%;
	margin: 10px auto 20px auto;
	text-align: center;
	
}

.quote {
	font-size: 150%;
    font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-style: italic;
	font-weight: bold;
	line-height: 120%;
/*    "Palatino", "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;*/
}



/***************************************
	FRONT PAGE
****************************************/

.product-wrapper {
	margin-top: 20px;
}

.front-page h1 {
	font-size: 200%;
	margin-top: 20px;
	font-weight: bold;
/*    border-top: 4px solid #398fb0;*/
    padding-top: 10px;
    color: #398fb0;
}

.front-page .product {
	float: left;
	width: 300px;
	margin-right: 5px;
	margin-left: 5px;
}

.front-page .product-body {
	background-color: #CCC;
	padding: 15px;
	width: 270px;
	height: 100%;
}

.front-page .product-body img {
	float: left;
	width: 75px;
	height: 75px;
}

.front-page .product-header {
	width: 100%;
	height: 30px;
	text-align: center;
	background: #EAEAEA url(/images/front_page/product_header.gif) no-repeat;
}

.front-page .product-header span {
	color: #000;
	position: relative;
	top: 7px;
	font-weight: bold;
	font-size: 110%;
	text-align: center;
}

.front-page .product h2 {
    font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    color: #398fb0;
}

.front-page .product-text {
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	float: right;
	width: 68%;
	color: #000;	
}

.front-page ul.product-features {
	text-align: left;
	margin: 10px 0;
	padding-left: 15px;
	margin-right: 0;
}

.front-page ul.product-features li {
	color: #000;
}

.front-page ul.product-features li a {
	color: blue;
	font-weight: bold;
}
.front-page a.product-link {
	text-align: right;	
}

/***************************************
	CONTENT HEADER
****************************************/
#superheader{
	width:700px;
	color:#398FB0;
	font-size:300%;
	font-weight:bold;
	margin-top:0px;
	padding-top:25px;
	border-width:1px;
}

#customer-quote {
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: right;
	line-height: 15px;
	height:10px;
	width: 90%;
}

/* Taken from h1 */
#tagheader {
	font-size: 250%;
	font-weight: bold;
  color: #398fb0;
}
/* Taken from h2 */
#tagline {
	font-size: 150%;
	font-weight: bold;
  color: #000;
}

/***************************************
	COLUMNS
****************************************/

#one-Col{
  clear: both;
	float: left;
	margin-top: 20px;
	width: 742px;
}
		
#left-Col{
  	clear: both;
	float: left;
	width: 180px;
}
#right-Col{
	float:left;
	width: 700px;
}
#right-Col ul {
	list-style-type: disc;
}
#right-Col li{
	list-style-position: outside;
	margin: 0 0 0 00px;
	line-height: inherit;
}

.monospaced{	font-family: Courier }

.center {text-align:center;} 

/* P.left, P.right {width: 10em; padding: 1em; margin: 0;} */

#content.right {width: 10em; padding: 1em; margin: 0;}

/***************************************
	Product List Page
****************************************/
#product-list { width:700px; font-family:Georgia, Times, serif; font-size:15px; }
#product-list ul { list-style: none; }
#product-list ul li { h-align: center }
#product-list ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #CCCCCC;
	padding-left: 10px;
	cursor: pointer;
	vertical-align: middle;
}
#product-list ul li a:hover { color:#FFFFFF; background-image:url(/images/hover2.png); background-repeat:repeat-x; }
#product-list ul li a strong {
	margin-right: 10px;
	vertical-align: baseline;
}
#product-list ul li ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#product-list ul li ul li {
	display: inline;
	/*color: #808080;*/
}

.prod-name {
	font-weight: bold;    
	width:190px;
	padding-left:5px;
	margin:0px;
	border: 0px solid #000;
	float:left;
	/*color: #008080;*/
}

/***************************************
	CSS
	.Class
	# id
	html object
****************************************/

/***************************************
	PRODUCTS-MAIN - CAN BE DELETED!!!
****************************************/
.products {
	clear: both;
}

.products h1 {
	font-size: 250%;
	font-weight: bold;
  color: #398fb0;
}

.products h2 {
	font-size: 150%;
	font-weight: bold;
  color: #000;
}

.left-head{
  clear: both;
  float: left;
	margin-top: 0px;
	margin-bottom: 0px;
  width: 500px;
}		

.right-head{
  float: right;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 305px;
	vertical-align: middle;
}

/***************************************
	PRODUCTS-UNDERLINE
****************************************/
.underline {
	margin: 0;
	padding: 0;
	width: 100%;
	clear: both;
}

.underline h1 {
	font-size: 28px;
	color: #333333;
	margin-top: 25px;
}

.underline h2 {
	font-size: 16px;
	line-height: 24px;
	color: #000000;  
	margin-bottom: 6px;
}

.underline h3 {
	font-size: 13px;
	line-height: 19px;
	color: #000000;  
}

.underline p, .underline li {
	line-height: 24px;
}

/***************************************
	PRODUCTS-LEFT COLUMN
****************************************/

.left-column {
  	clear: both;
	float: left;
	
	width: 180px;
}

.right-column {
/* TODO - need to see if we need both this and right-Col */
	float:left;
	width: 700px;
	margin-left: 40px;
}
.right-column ul {
	list-style-type: disc;
}
.right-column li {
	list-style-position: outside;
	margin: 0 0 0 20px;
	line-height: inherit;
}

.left-column a.download-link {
	width: 170px;
}

.left-column h3 {
	height: 30px;
	width: 170px;
	background: #EAEAEA url(/images/layout/header_background_corner.gif) center right no-repeat;
	color: #000;
	font-weight: bold;
	margin-bottom: 0px;	
}

.left-column h3 span {
	display: block;
	height: 25px;
	width: 145px;
	background: transparent url(/images/layout/header_background_thin.gif) repeat-x;
	padding-left: 5px;
	padding-top: 5px;
	color: #000;
	font-weight: bold;
	
}

.left-column ul {
	padding: 0;
	margin: 0;
	list-style-type: none;	
}

.left-column li a {
	display: block;
	background-color: #A7A7A7;
	border-bottom: 1px dotted #777;
/*	background: url(/images/layout/header_background_gray_thin.gif) repeat-x;*/
	height: 25px;
	width: 165px;
	color: #151515;
	text-decoration: none;
	font-weight: bold;
	padding-top: 5px;
	padding-left: 5px;
}

.left-column li a:hover {
	background: url(/images/layout/header_background_gray_thin.gif) repeat-x;
}

/***************************************
	PRODUCTS-LEFT COLUMN
****************************************/
.bar-list ul { 
	color:#808080; 
	font-size:18px; 
	font-family:Georgia, Times, serif; 
	text-align:center;
	padding: 0;
	margin: 0;
	margin-bottom: 10;
}
.bar-list ul li { display: inline; }
.bar-list ul li:after { content: " | "; }
.bar-list ul li.last:after { content: ". "; }

/***************************************
	PRODUCT-PAGES
***************************************/
/*
.feature-list ul { 
	clear: both;
	width:600px; 
	color:#808080; 
	font-size:18px; 
	font-family:Georgia, Times, serif; 
	text-align:left;
	padding: 0;
	margin: 50;
	border: 5;
	border-color:blue;
}
.feature-list li    { margin: 5; }
.feature-list ul li { 
	display: inline; 	
	border: 5;
	border-color:blue;
	
}
.feature-list ul li.description { margin: 5; 	width:400px; }
.feature-list ul li.price       { margin: 5; 	width:200px; }
*/

.feature-list {
	display: table;
	width:96%;
	border-width:  2px  2px   2px  2px;
	padding:       5px  5px   5px  5px; 
}

.feature-list .row  {
    display: table-row;
 
}

.feature-list .row .description-header {
	text-align:left;
	width:80%; 
	display: table-cell;
	border-style:solid;
	border-color: black;
	background-color: #429CBF;
	padding:       5px  5px   5px  5px; 
	border-width:  2px  2px   2px  2px;
	font-weight: bold;
	color:white;
}

.feature-list .row .price-header {
	text-align:center;
	width:20%; 
	display: table-cell;
	border-style:solid;
	border-color: black;
	background-color: #429CBF;
	padding:       5px  5px   5px  5px; 
	border-width:  2px  2px   2px  0px;
	font-weight: bold;
}

.feature-list .row .description {
	text-align:left;
	width:80%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  0px  2px   2px  2px;
	font-weight: bold;
}

.feature-list .row .description-center {
	text-align:left;
	width:80%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  0px  2px   2px  2px;
	font-weight: bold;
	font-size:125%;
	vertical-align: middle;
}
/*style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"*/


.feature-list .row .singlecell-header {
	text-align:center;
	width:100%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  2px  2px   2px  2px;
	font-weight: bold;
}

.feature-list .row .singlecell {
	text-align:center;
	width:100%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  0px  2px   2px  2px;
	font-weight: bold;
}

.feature-list .row .details {
	text-align:right;
	width:80%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  0px  2px   2px  2px;
	font-style: italic;

}

.feature-list .row .price {
	text-align:center;
	width:20%; 
	display: table-cell;
	border-style:solid;
	border-color: #429CBF;
	background-color: white;
	padding:       5px  5px   5px  5px; 
	border-width:  0px  2px   2px  0px;
}

.product-image
{
	float: right;
	
}
/***************************************
	Product List Page
****************************************/
#product-list { width:700px; font-family:Georgia, Times, serif; font-size:15px; }
#product-list ul { list-style: none; }
#product-list ul li { h-align: center }
#product-list ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #CCCCCC;
	padding-left: 10px;
	cursor: pointer;
	vertical-align: middle;
}
#product-list ul li a:hover { color:#FFFFFF; background-image:url(/images/hover2.png); background-repeat:repeat-x; }
#product-list ul li a strong {
	margin-right: 10px;
	vertical-align: baseline;
}
#product-list ul li ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#product-list ul li ul li {
	display: inline;
	/*color: #808080;*/
}