/*  NetPro Customizable Site Styes (C) Copyright 2008 NaturaeMed LLC - All Rights Reserved  */

/* 
SITE COLOR CUSTOMIZATION: Customize by replacing the following colors in this template 
COLOR1 : #584A64 - Main Color #584A64
COLOR2 : #958D9C - Dark Accent #958D9C
COLOR3 : #ACA6B2 - Light Accent #ACA6B2
*/
test {color:#958D9C}

/* Body and Tag Definitions */
body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
body, p, table, td, th, div {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
p, td, div, li {font-size:12px;}


td {border: #FFFFFF;}
hr {color: #958D9C;background-color: #584A64; height:1px;}
th { background-color:#958D9C; color:#ffffff; font-weight:bold; text-align:left;}
th h1, th h2, th h3, th h4, th h5, th h6 { color:#fff; font-weight:bold;}

h1, h2, h3, h4, h5, h6 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:5px; margin-top:5px;}
h1, h3, h5 {color: #584A64;}
h2, h4, h6 {color:#958D9C;}
h1, h2 {margin-top:8px;	padding-top:8px;}
h5, h6 {margin:0px;}
h1{ font-size:24px;}
h2{ font-size:18px;}
h3{ font-size:16px;}
h4{ font-size:14px;}
h5{ font-size:13px;}
h6{ font-size:12px;}

 
.HeadBennefit {font-size:11px; width:150px;}
.HeadLink {font-size:10px; width:150px; text-align:right; text-decoration:underline;}
.HeadLink ul, .HeadBennefit ul {padding:0px;margin:0px;}

.ProductNavQuote {padding-right:40px; color:#584A64; font-size:14px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; width:250px;}

#ChartProNav .HeadLink a:link { color:#584A64;font-size:10px;}
#ChartProNav .HeadLink a:hover { color:#584A64;font-size:10px;}
#ChartProNav .HeadLink a:visited { color:#584A64;font-size:10px;} 
#ChartProNav .HeadLink a:active { color:#584A64;font-size:10px;} 

.HeadLink a:link { color:#FFF;}
.HeadLink a:hover { color:#FFF;}
.HeadLink a:visited { color:#FFF;} 
.HeadLink a:active { color:#FFF;} 


tr.RowEven strong {color:#545454;}
tr.RowOdd strong {color:#545454;}

.FeatureTitle {padding-left:20px;}
th.FeatureTitle {padding-left:4px;}

	/* Header and Text Oriented Class Definitions */
	.Header1, .Header2, .Header3, .Header4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }
	.Header1 {font-size: 16px;font-weight: bold;color: #958D9C;font-style: italic;}
	.Header2 {font-size:14px;	font-weight: bold;color: #584A64;}
	.Header3 {font-size: 14px;}
	.Header4 {font-size: 14px;font-weight: bold;color: #FFFFFF;}
	
	.paragraph {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}
	.small {font-family: Arial, Helvetica, sans-serif;font-size: 10px;}
	
	/* Link Definitions */
	a:link {color: #584A64;margin:0px;padding:0px;}
	a:hover {}
	a:visited {color: #958D9C;}
	s:active {text-decoration:none;color:#ACA6B2;margin:0px;padding:0px;}
	
	#FooterArea a:link {text-decoration: none;color: #FFFFFF;margin:0px;padding:0px;}
	#FooterArea a:hover {text-decoration:underline;font-weight:bold;color:#FFFFFF;margin:0px;padding:0px;}
	#FooterArea a:visited {text-decoration:none;color: #FFFFFF;margin:0px;padding:0px;}
	#FooterArea a:active {text-decoration:underline;color:#FFFFFF;margin:0px;padding:0px;}


/* ID Oriented Page Layout Definitions */
#Page{width:748px;clear:both;margin-left:auto;margin-right:auto;}
	#Header{}
	#Main{ background-color:#FFFFFF; width:748px;}
		#LeftCol{}
		#MainContent{margin-right:20px; margin-left:5px; font-family:Arial, Helvetica, sans-serif;margin-top:0px;}
	#Footer {border-top:1px solid #958D9C;padding:2px;font-size:10px;font-family:Arial, Helvetica, sans-serif;color:#958D9C;}

#SideArea { padding:12px;}

#Side .Box {width:220px;}

 
/* Box Definitions  */
	.Box {
	border:1px solid #999999;
	padding:0px;
}
		.BoxHeader {font:14px Arial, Helvetica, sans-serif;font-weight:bold; color:#584A64; font-weight:bold; background-image:url(/DESIGN/images/NavBG.gif); padding:4px;}
		.BoxContent { font-size:12px; font-family:Arial, Helvetica, sans-serif;}
		.BoxListItem{ font-size:12px;}
		.BoxShade {	background-color:#ACA6B2; }
	.BlockBox { background:#FFFFFF;}
		.BlockBox .BoxHeader { background:#CCCCCC;border-bottom:1px solid #584A64;}
	#Pop { margin:0px; width:100%; background-color:#ffffff; height:100%; padding:20px;}	
	#Pop .Box { border:1px solid #584A64; background-color:#FFFFFF;}
		#Pop .BoxHeader {font:14px Arial, Helvetica, sans-serif;font-weight:bold;color: #FFFFFF; background-color:#584A64; padding:2px;}
		#Pop .BoxContent { font-size:12px; font-family:Arial, Helvetica, sans-serif; padding:10px;}
	
	.AlertBox {
	margin-top:6px;
	margin-bottom:10px;
	border-bottom:1px dashed #958D9C;
	border-top:1px dashed #958D9C;
	background-color:#ACA6B2;
	margin-left:5px;
	margin-right:5px;
	padding:5px;
	color: #FFF;
}	


/* Navigation Oriented Definitions */
#TextNav.MenuBox .MenuItem { margin:0px; padding:2px; border-left:0px solid #584A64; }
#TextNav {margin:2px;}
.MenuBox td {margin:0px; padding:0px; border:0px;}
.MenuBox td a {margin:0px; padding:0px; border:0px; display:inline;}

.MainMenu {margin:0px; padding:0px; border:0px;}


/* Application Oriented Styles */
	/* Services Styles */
	#ServicesList {width:90%;}

	/* Gallery Styles */
	#Gallery {}
	
	.GalleryCategory {margin: 6px;padding: 6px;border: 1px dotted #cccccc; background-color:#CDC8D2;}
	.GalleryImageBox { text-align:center; border:1px Solid #CCCCCC; margin:4px; background-color:#FFFFFF;float:left; width:240px; height:172px;}
	.GalleryImage {}
	.ImageName { font-family:Arial, Helvetica, sans-serif; font-size:2em; font-weight:bold;}
	.ImageCaption {}
	
	.GalleryCategory h2 { border-bottom:1px dotted #cccccc; background-color:#FFFFFF; color:#ffffff; padding:4px; margin:-6px -6px 4px -6px;}





/* Miscellaneous Layout & Image Oriented Definitions */
.FloatLeft{float:left; width:59%;}
.FloatRight{float:right; width:40%; text-align:right;}

.RowEven {background-color:#ddd;}
.RowOdd {background-color:#eee;}

#NoBg {	background-color:none;}



/* MaxWidth and MaxHeight Class Definitions */
/* MaxWidth */
* html .MaxWidth50 {width: expression( document.body.clientWidth > 49 ? "50px" : "auto" ); /* sets max-width for IE */}
.MaxWidth50 {max-width: 50px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth100 {width: expression( document.body.clientWidth > 99 ? "100px" : "auto" ); /* sets max-width for IE */}
.MaxWidth100 {max-width: 100px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth150 {width: expression( document.body.clientWidth > 149 ? "150px" : "auto" ); /* sets max-width for IE */}
.MaxWidth150 {max-width: 150px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth200 {width: expression( document.body.clientWidth > 199 ? "200px" : "auto" ); /* sets max-width for IE */}
.MaxWidth200 {max-width: 200px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth250 {width: expression( document.body.clientWidth > 249 ? "250px" : "auto" ); /* sets max-width for IE */}
.MaxWidth250 {max-width: 250px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth300 {width: expression( document.body.clientWidth > 299 ? "300px" : "auto" ); /* sets max-width for IE */}
.MaxWidth300 {max-width: 300px; /* this sets the max-width value for all standards-compliant browsers */ }
   
* html .MaxWidth400 {width: expression( document.body.clientWidth > 399 ? "400px" : "auto" ); /* sets max-width for IE */}
.MaxWidth400 {max-width: 400px; /* this sets the max-width value for all standards-compliant browsers */ }

* html .MaxWidth500 {width: expression( document.body.clientWidth > 499 ? "500px" : "auto" ); /* sets max-width for IE */}
.MaxWidth500 {max-width: 500px; /* this sets the max-width value for all standards-compliant browsers */ }


/* MaxHeight */
* html .MaxHeight50 {Height: expression( document.body.clientHeight > 49 ? "50px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight50 {max-Height: 50px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight100 {Height: expression( document.body.clientHeight > 99 ? "100px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight100 {max-Height: 100px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight150 {Height: expression( document.body.clientHeight > 149 ? "150px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight150 {max-Height: 150px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight200 {Height: expression( document.body.clientHeight > 199 ? "200px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight200 {max-Height: 200px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight250 {Height: expression( document.body.clientHeight > 249 ? "250px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight250 {max-Height: 250px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight300 {Height: expression( document.body.clientHeight > 299 ? "300px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight300 {max-Height: 300px; /* this sets the max-Height value for all standards-compliant browsers */ }
   
* html .MaxHeight400 {Height: expression( document.body.clientHeight > 399 ? "400px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight400 {max-Height: 400px; /* this sets the max-Height value for all standards-compliant browsers */ }

* html .MaxHeight500 {Height: expression( document.body.clientHeight > 499 ? "500px" : "auto" ); /* sets max-Height for IE */}
.MaxHeight500 {max-Height: 500px; /* this sets the max-Height value for all standards-compliant browsers */ }






 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 
.LargeText {
	font-size: 36px;
}
#Footer a {
	color: #FFF;
}
#PageHead {
	position:relative;top: -1px;
}
.ActiveSection {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #584A64;
}
.Section {
	font-size: 24px;
	font-weight: bolder;
	color: #584A64;
}
#Register fieldset .FieldName strong {
	font-size: 12px;
	color: #666;
	font-style: italic;
}


.TOS {
	margin: 6px;
	padding: 10px;
	height: 200px;
	width: 100%;
	border: 1px solid #999;
	overflow: auto;
}
fieldset legend {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #584A65;
}
fieldset {padding:16px;}
#Landing h1 {
	font-size: 30px;
}
#Landing h2 {
	font-size: 22px;
}


.button {
   border-top: 1px solid #c2c2c2;
   background: #584a64;
   background: -webkit-gradient(linear, left top, left bottom, from(#94889e), to(#584a64));
   background: -webkit-linear-gradient(top, #94889e, #584a64);
   background: -moz-linear-gradient(top, #94889e, #584a64);
   background: -ms-linear-gradient(top, #94889e, #584a64);
   background: -o-linear-gradient(top, #94889e, #584a64);
   padding: 14.5px 29px;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 21px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #584a64;
   background: #584a64;
   color: #ccc;
   }
.button:active {
   border-top-color: #645e69;
   background: #645e69;
   }

/* Product Navigation CSS  - 9/6/2010 TSM */

.NavBox td img {display: block;}
#NavRotator { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px;}
#NavRotator a:link {color:#FFF;}
#NavRotator h1 { font-size:24px; }
#OfficePro_Nav, #NetPro_Nav, #ChartPro_Nav  { position:relative;}

#OfficePro_Info, #NetPro_Info, #ChartPro_Info, #BillPro_Info  {position:absolute; left:460px; top: 85px; width:340px; height:230px; text-align:right; }
#ChartPro_Info, #NetPro_Info ,#ChartPro_Info H1, #NetPro_Info h1 {color:#584A64;}
#OfficePro_Info, #OfficePro_Info h1 {color:#FFF;}
 
.GalleryImage {width: 180px; float: left; height: 200px; padding:10px;}

.ProdNavIcons {text-align:left; width:140px; margin-left:0px; margin-right:auto; position:absolute; z-index:100; top:300px; left:480px;}
