/* @override http://www.chexxinc.com/css/chexx.css */

/* body, html (html req'd for older IE versions) for background images, add
background: #fff url(images/imgname.jpg) no-repeat center top; margin: 0; padding: 0 } */

body, html {
	background: #bcc6df url(../chexx-images/chexx-bkg.gif) no-repeat center top;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* container (or wrapper) set for max width of 810; for IE, use the width expression what basically tests if the page is wider than 810 px; if so, set width to 810; otherwise, let it auto size */

#container {
	position: relative;
	text-align: left;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	background-color: #ffffff;	
	margin-right: auto;
	margin-left: auto;
	padding: 0px 0 0 0;
}

/* Col styles to set margins for items within the container.
Simply add nos. to mainCol style for variations */

	
#mainCol {
	margin-left: 100px; margin-right: 100px;
}

#mainCol2 {
	margin-left: 50px; margin-right: 50px;
}

/* Summary Area: the rectangular area beneath the top masthead and navigation but above the main content */

.summary {height: 235px; background: url(../chexx-images/summary-area-bkg.gif) no-repeat left top;}

.summary h1 {padding: 20px 15px 0px 30px; color: #233347; font: bold 21px/32px Georgia, "Times New Roman", Times, serif;}

.summary h2 {padding: 0px 15px 5px 30px; color: #233347; font: normal 18px/36px Georgia, "Times New Roman", Times, serif;
}

.summary a:link {color: #4a68bd; font: normal 18px/36px Georgia, "Times New Roman", Times, serif;
}

.summary a:hover {color: #707070; font: normal 18px/36px Georgia, "Times New Roman", Times, serif;
}

.summary a:visited {color: #7b90cc; font: normal 18px/36px Georgia, "Times New Roman", Times, serif;
}

/* Main Content Area */

.content {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}

.content h1 {padding: 5px 10px 0px 30px; color: #233347; font: bold 21px/32px Georgia, "Times New Roman", Times, serif;}

.content h2 {padding: 0px 10px 5px 30px; color: #233347; font: normal 18px/36px Georgia, "Times New Roman", Times, serif;
}

.content p {padding: 0px 30px 5px 30px; color: #222222; font: normal 14px/28px Georgia, "Times New Roman", Times, serif;}

.content a:link {color:#4a68bd; font-family: Georgia, "Times New Roman", Times, serif;}

.content a:hover {color:#707070; font-family: Georgia, "Times New Roman", Times, serif;}

.content a:visited {color:#7b90cc; font-family: Georgia, "Times New Roman", Times, serif;}

.content hr {
	border: none 0;
	border-top: 1px solid #735c41;	
	width: 97%;
	height: 1px;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

/* Contact is just a modified version of Content: I created this so the contact form wouldn't have the wide leading like the other content. */

.contact p {padding: 0px 30px 5px 30px; color: #222222; font: normal 14px Georgia, "Times New Roman", Times, serif;}

/* Feature */
.feature {margin: 20px 20px 20px 20px; padding: 20px 20px 20px 10px; background-color: #e7e2d2; border: 1px solid #735c41; height: 120px;}

.feature h1 {padding: 5px 30px 0px 30px; color: #302215; font-size: 14px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.feature p {padding: 0px 15px 15px 15px; font-size: 12px; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif; color: #302215;}

.feature a:link {color:#302215; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.feature a:hover {color:#233347; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.feature a:visited {color:#745c42; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.feature-top1 {
	background: url(../wnp-images/feature-bears.jpg) no-repeat;
	width: 253px;
	height: 150px;
}

.feature-body {
	background: url(../wnp-images/feature-body.jpg) no-repeat;
	width: 253px;
	margin-top: -10px;
}

.feature-btm {
	background: url(../wnp-images/feature-bottom.jpg) no-repeat;
	width: 253px;
	height: 20px;
	margin-top: -12px;
}

.currency {margin: 0px 0px 5px 30px;}

.currency p {padding: 8px; font-size: 11px; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif; color: #000000;}

.shading {background-color: #dddddd;}


/* Address style to change colors to clearly distinguish between North America address-na and Europe address-e */

.address-na {margin: 0px; padding: 0px; background-color: #fcfae1; width: 234px; border: 1px solid #4a68bd;}

.address-na h1 {padding: 5px 30px 0px 30px; color: #302215; font-size: 14px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-na p {padding: 10px 20px 15px 20px; font-size: 12px; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif; color: #302215;}

.address-na a:link {color:#4a68bd; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-na a:hover {color:#707070; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-na a:visited {color:#7b90cc; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


.address-e {margin: 0px; padding: 0px; background-color: #bcc6df; width: 234px; border: 1px solid #4a68bd;}

.address-e h1 {padding: 5px 30px 0px 30px; color: #302215; font-size: 14px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-e p {padding: 10px 20px 15px 20px; font-size: 12px; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif; color: #302215;}

.address-e a:link {color:#302215; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-e a:hover {color:#4a68bd; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.address-e a:visited {color:#4a68bd; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* Contact for changing background color to clearly distinguish between North America and Europe contacts on the Contact page*/

.contact-na { background-color: #fcfae1; margin: 0px 10px 10px 30px; border: 1px solid #4a68bd;}

.contact-e { background-color: #bcc6df; margin: 0px 10px 10px 30px; border: 1px solid #4a68bd;}


/* Side Bar */
.side {padding: 20px 10px 20px 10px;}

.side h1 {padding: 0px; color: #555555; font-size: 14px; line-height: 19px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.side p {padding: 0px; color: #555555; font-size: 12px; line-height: 16px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.side a:link {color:#4c8f00; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.side a:hover {color:#ff8c00; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.side a:visited {color:#0e2440; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.side hr {
	border: none 0;
	border-top: 1px solid #4c8f00;	
	width: 90%;
	height: 1px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

.column {
  float: left;
  margin-right: 10px;
}

.span-1   { width: 256px;}

.span-full   { width: 800; margin: 0; float: left;}

.last { float: left; margin-right: 0; }

.quoteleft {
	background: url(../meaco-images/quoteleft.jpg) no-repeat;
	width: 50px;
	height: 38px;
	margin: 0px 0px -35px 0px;
}

.quotecontent { margin: -17px 0px -17px 0px; padding: 0px 20px 0px 0px;}

.quoteright {
	background: url(../meaco-images/quoteright.jpg) no-repeat;
	width: 240px;
	height: 38px;
	margin: -35px 0px 0px 0px;
}

/* address area */

/* footer */
#footer { background-color: #4a68bd; margin: 0px 0px 0px 10px; padding: 10px 0px 0px 0px;}

#footer p {color: #ffffff; font-size: 11px/28px Verdana, Arial, Helvetica, Swiss, sans-serif;}

#footer a:link {color:#ffffff; font: 11px/28px Verdana, Arial, Helvetica, Swiss, sans-serif;
}

#footer a:hover {color:#fffee0; font: 11px/28px Verdana, Arial, Helvetica, Swiss, sans-serif;
}

#footer a:visited {color:#fbaa00; font: 11px/28px Verdana, Arial, Helvetica, Swiss, sans-serif;
}

/* Heading styles */

h1 {padding: 0px 10px 0px 10px; font-size: 14px; line-height: 19px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

h2 {padding: 0px 10px 0px 10px; font-size: 13px; line-height: 18px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

h3 {padding: 0px 10px 0px 10px; font-size: 12px; line-height: 17px;font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

h4 {padding: 0px 10px 0px 10px; font-size: 11px; line-height: 16px; font-weight: bold; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* paragraph styles for main text. Margins and/or padding to be changed as needed for the site. Shorthand property order is top, right, bottom, left  */

p {padding: 0px 10px 0px 10px; font-size: 12px; line-height: 16px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.ovrstrk {text-decoration:line-through; line-height: 16px; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.minmargin {margin: 0px 2px 0px 2px;}

.smlltxt {font-size: 11px; line-height: 15px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

/* White text */

.wht {color: #ffffff;}

/* Indenting blocks of text or other elements. Number indicates how much padding on left or right (if different, we could either use hyphenated nos. or just go by left padding) */

.pad10 {padding: 0px 10px 0px 10px;}

.pad50 {padding: 0px 50px 0px 50px;}

.pad100 {padding: 0px 100px 0px 100px;}

/* Lists styles, generally apply same style to all types */

ul, li, ol {padding: 0px 30px 5px 30px; color: #222222; font: normal 14px/28px Georgia, "Times New Roman", Times, serif;}

ol.alpha {list-style-type: lower-alpha;}

	
/* Highlighting elements such as rules, pull quotes and similar */


hr {
	border: none 0;
	border-top: 1px solid #000000;	
	width: 95%;
	height: 1px;
	margin: 4px 0px 6px 20px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

.quotboxb {border-color: #2C69B6; border-style: double; border-width: 3px; margin-top: 20px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; background-color: #B9CAF5}

.quotbox { margin-top: 10px; margin-bottom: 10px; margin-left: 50px; margin-right: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; background-color: #ff8822; font-size: 12px; font-weight:bold; font-family: Georgia,'Times New Roman',Times, serif}

.quotex {

	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 30px 15px 30px; 
	padding: 10px 10px 10px 10px; 
	background-color: #ffffff; 
	font-size: 14px; 
	font-weight:bold; 
	font-style: italic; 
	font-family: Georgia,'Times New Roman',Times, serif;
}

.quotxt {

	float: right;
	width: 325px;
	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 10px 15px 10px; 
	padding: 10px 10px 10px 10px; 
	font-size: 12px;
	font-style: italic;
}

.pbox {border: 1px solid #a1a5a9; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;}


/* Adds background color to text */

.shablue {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #dce3f5;}

.shagold {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #f7f0ae;}


/* Styles for Mal's e-commerce tables currently in most of my Excel TDF masters; probably should revisit these on site-by-site basis */

.ptcol {text-align: center; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.pthdr1 {text-align: center; font-size: 14px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* Adds nice border and title box around a section. If you use a dotted border, it runs right through the legend on IE, so stick w solid */

.wr_fieldset {
width: 485px; 
margin: 12px 0 12px 30px;
padding: 0; }

.wr_fieldset fieldset {
border: solid 1px #000000; }

.wr_fieldset legend {
color: #333333;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad {
margin: 0;
padding: 8px; }

.tblborder {
	border-left: 1px dotted #722100;
	border-collapse: collapse;
}


/* Styles for tables */

/* Applies global padding and paragraph styles to entire table. Normally used for forms or tabular data within the main layout table so you do not need to add paragraph or other styles to each td */

table.frm td {
	padding: 1px; 
	font-size: 12px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}
	
.tblborder {
	border: 1px solid #338BA6;
	border-collapse: collapse;
}

	
/* Add following as a table class="cellbkgrnd" for applying table cell backgrounds using tablestyle name="Alt Background By Style w/o formatting */

.cellbkgrnd {background-color: #cc0000;}

/* Adding bkground images to table cells or divs for announcement boxes or similar; commented out below until needed */

/* .bg1 {background: white url(images/divheader.gif) no-repeat top left; width: 236px; padding: 48px 10 10 10; border: 1px solid #548dab; border-collapse: collapse; text-align: left;} */

/* Hyperlink styles */

a:link {color:#0091ca; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:hover {color:#ff8c00; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:visited {color:#0e2440; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:link {color:#003399; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:hover{color:#b0cae8;  font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:visited {color:#6699cc; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

/* a.wht:link {color:#ffffff;}

a.wht:hover {color:#f2f2f2;} */

.whtlnk {
color:#ffffff;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
} 

a.whtlnk:link  {
color:#ffffff;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:hover {
color:#ffff66;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:visited {
color:#f1f1f1;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}


/* Floating boxes, good for photos with captions or similar */


div.floatl {
  float: left;
  }
  
div.floatl p {
   text-align: left;
   width: 265px;
   }

div.floatr {
  float: right;
  }
  
div.floatr p {
   text-align: center;
   width: 265px;
   }

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }


/* For image captions; border line not necessary, only the float and width; done as
<div class="figure">
  <p><img src="image.jpg" width="136"
    height="200" alt="My Image">
  <p>This is my image caption
</div>
 */

div.figure {
  float: right;
  width: 50%
  margin: 15px;
  padding: 15px;
}
div.figure p {
  text-align: center;
  line-height: 10px;
  font-size: 9px;
}
img.scaled {
  width: 100%;
}


/* special items as needed */

#scrollbox {
width:400px;
height:300px;
overflow: auto
}


/* for automatic back2top.js script--styles the link */

.bak2top {
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
	font-size: 10px;
	color: #4a68bd;
	background-color: #e3e9dc;
	border: 3px solid;
	border-color: #ffffff;
	padding: 4px;
}


/* css rollover image effect - moves the image up and down within a mask or display box. Adjust for image name and size, as well as whether or not you want overlaid text. Needs further testing, especially for IE.

#navlist { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    list-style:none; 
} 
#navlist a { 
    display:block; 
    width:125px; 
    color:#fff; 
    text-decoration:none; 
    background:url("images-an/download.gif") no-repeat; 
    padding:7px 10px 6px 10px; 
} 
#navlist a:hover { 
    background-position:0 -25px; 
} 

.rollover a { display:block; width:140px;}  
.rollover a:hover { display:block; width:140px; background-color: #000066}


 */