/* Sets element margins, padding, and border to 0 to even out browser differences when adding desired values later. /* this rule comes from the Community MX > CMX CSS Collection > Cheats and Productivity snippets. See http://www.communitymx.com/abstract.cfm?cid=F9B3D */

html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl, dt, dd, td, form, fieldset, a { margin: 0; padding: 0; border: 0; line-height: 1; }


/* forces scrollbars */
html
{
	height: 100%;
	margin-bottom: 1px;
}

/* Body foreground and background colors, fonts, font size. Also centers the design. */ body { background: #FFF; color: #666; font-family: "Lucida Grande", Verdana, sans-serif; font-size: 0.925em; text-align: center; }

/* This class applied to DIVs in each of the various content areas, like header, main-nav, and footer. */ /* The main-content and secondary-content DIVs are wrapped in a DIV with this class. */ .container { width: 725px; margin: 0 auto; text-align: left; }

/* Headings and paragraphs */ /* Note: since we zeroed out all the default margins and padding, we need to explicitly set them as needed. */ h1 { font-size: 2em; margin-bottom: 20px; /* add a little white space under the heading */ }

h2 { font-size: 1.33em; } h3 { font-size: 1.17em; }

h1, h2, h3, h4 { font-family: "Lucida Grande", Candara, "Trebuchet MS", Trebuchet, "Bitstream Vera Sans", Helvetica, sans-serif; font-weight: normal; }

h2, h3, h4, p { margin-bottom: 10px; /* add a little white space under the headings and paragraphs */ }

p, pre { line-height: 1.5em; /* add a little space between lines in paragraphs */ text-align: left; }

p {margin: 0.33em 0 1em 0;}
ul, ol {margin: 1em 0; padding-left: 1.5em;}
dt {margin: 0.5em 0 0;}
dd {margin: 0.25em 0 0.5em 1.5em;}

small {font-size: 85%;}
big {font-size: 115%;}
sup {font-size: smaller; vertical-align: 0.5em; line-height: 1px;}

table#retreat { padding: 20px 0 0 20px; }

caption { margin-top: 4px; line-height: 1.5em; text-align: center; color: #999; }

/* Skip link */ /* absolutely positioned offscreen so it's not visible but screen readers will still read it aloud. */ #skipnav { position: absolute; top: 0; left: -5000px; }

/* Links */

/* This is for all links in the site but notice that links in the main-nav and footer sections have different rules defined that trump these. */

a, a:link, a:visited, a:active { text-decoration: none; } a:hover, a:focus { outline: 0; }

a img, a:link img, a:visited img, a:active img, a:hover img, a:focus img { border: none; outline: 0; }

/* Header section */ #printed-header { display: none; /* the printed-header should only display when the page is printed (see print.css) */ }

#header { float: left; width: 100%; background: #900; color: #FFC; background-image: url("../images/mm_bg_red.gif"); }

#header #logo { float: left; margin-top: 20px; }

/* Main navigation bar */ #main-nav { clear: both; /* needed because the header is floated */ margin-bottom: 0px; /* add a little whitespace under the nav bar */ background-color: #FF080E; border-color: #FC3; border-width: 1px 0 1px 0; border-style: solid; }

#main-nav ul { padding: 0.5em 0; /* adds space above and below the list items in the nav bar */ list-style: none; /* no underline */ }

#main-nav li { display: inline; /* displays the list items horizontally */ margin: 0 0.5em; /* adds space to the left and right of each list item */ font-weight: 600; }

/* Main nav links */ #main-nav a, #main-nav a:link, #main-nav a:visited, #main-nav a:active { color: #FC3; text-decoration: none; padding: 0 0.3em; }

#main-nav a:hover, #main-nav a:focus { color: #FFF; padding: 0 0.3em; background-color: #FF080E; }

/* Wonder Bar content */ #wunderbar { margin-bottom: 10px; /* add a whitespace under the wonderbar */ }

/* Secondary content */

/* This is floated left, has a border and background image. The total width is 200px = 178 + (2x10) + (2x1) = width + padding + border */

#secondary-content { float: left; width: 178px; padding: 10px; margin-top: 0; margin-bottom: 10px; background-color: #FFF; }

#secondary-content h2 { border-bottom: 1px dotted #94D62B; color: #808080; }

#secondary-content ul { margin-left: 0; padding-left: 0.75em; /* add space to the left of the list */ list-style-type: none; }

#secondary-content ul li { background-image: url("../images/bullet-grn.jpg"); background-repeat: no-repeat; background-position: 0 0.75em; padding: 0.5em 0 1em 1.5em; }

/* Main nav links */ #secondary-content a, #secondary-content a:link, #secondary-content a:visited, #secondary-content a:active { color: #ec5f35; text-decoration: none; /* no underline */ }

#secondary-content a:hover, #secondary-content a:focus { color: #94D62B; background: #fff; text-decoration: underline; /* underline */ outline: 0; }

#secondary-content ol { margin-left: 0; padding-top: 0.25em; /* add space to the left of the list */ list-style-type: decimal; list-style-position: outside; }

#secondary-content ol li { margin: 0.5em 1.25em 1.25em 1.5em; }

#secondary-content #panel { margin-top: 20px; margin-bottom: 20px; }

#panel .pix  a { text-decoration: none; border: none; outline: 0; }

#panel .pix  a:before { content: ""; margin-right: 0; }

/* Main content */

/* This is floated left, too. The total width is 500px = 490 + 10 = width + padding */

#main-content
{
	float: left;
	width: 480px;
	margin: 0 0 20px 30px;
	padding-right: 10px;
	color: #666;
	position: relative;
}

#main-content a, #main-content a:link, #main-content a:active { color: #67961E; text-decoration: none; border-bottom: #FFAC99 1px dotted; }

#main-content a:visited { color: #333; border-bottom: #FFAC99 1px dotted; }

#main-content a:hover, #main-content a:focus { color: #DC2B2B; text-decoration: none; border-bottom: #fff 1px solid; background-color: #FFF; }

#main-content p a:before, #main-content li.action a:before { content: "\2192"; margin-right: .3em; }

/* wrap images with captions in a div with this class */ #main-content .image-with-caption { float: left; width: 260px; padding-right: 10px; padding-bottom: 0.5em; /* add a little space below the image */ }

#main-content .image-with-caption p { font-style: italic; /* make the caption italic */ }

#main-content p { text-align: left; margin-top: 0; line-height: 1.7; }

#main-content pre, #main-content blockquote { font-family: Constantia, "Palatino Linotype", Palatino, Georgia, serif; color: #FF9880; font-weight: bold; margin-top: 8px; margin-bottom: 0; font-size: 1.25em; line-height: 1.4em; }

#main-content blockquote { margin-right: 100px; }

#main-content #printform pre { font-family: Verdana, serif; color: #333; font-weight: 500; font-size: 11px; }

#main-content h2 { font-size: 133%; color: #000; font-weight: normal; background: url("../images/heading2_bg.jpg") no-repeat left center; /* Adds the decorative image to the left center background of the main-content h2 text. */ padding-left: 20px; /* Pads the left side of the h2 by 20 pixels so that the text starts to the right of the decorative image. */ margin-top: 10px; /* Adds space above the h2 so that there is breathing room between it and the header. */ margin-bottom: 7px; /* Adds space to the bottom of the h2 so that there is breathing room between it and the paragraphs beneath it. */ }

#main-content h2.zesty { background: url("../images/h2-orange.gif") no-repeat left center; }

#main-content h3 { font-size: 125%; color: #DC2B2B; font-weight: normal; /*  so that it aligns neatly with other div content. */ margin: 3px 20px 7px 0; }

#main-content strong { color: #000; font-weight: normal; }

#main-content  ol { margin-left: 0; padding-top: 0.25em; /* add space to the left of the list */ list-style-type: decimal; list-style-position: outside; }

#main-content .push h3 { border-bottom: #DC2B2B 1px dotted; color: #333; margin-bottom: 1em; }

#main-content .pushy h3 { color: #DC2B2B; font-weight: bold; border-bottom: 1px dotted #94D62B; margin-bottom: 0; }

#main-content h4 { font-size: 116%; color: #333; font-weight: 600; margin: 3px 20px 7px 0; }

#main-content ul, #main-content ol { margin: 1em 0 1em 1em; } 

#main-content li
{
	margin-bottom: 0.5em;
	line-height: 1.33;
}

/* bullets */ #main-content ul.grn li, #main-content ul.gray li { margin: 0; padding: 0 0 1.25em 0; list-style-type: circle; list-style-position: inside; }

#main-content ul.grn li { list-style-image: url("../images/bullet-grn.jpg"); } #main-content ul.gray li { list-style-image: url("../images/bullet-gray.jpg"); }

/* about */ #about #main-content #sub h3 { margin-top: 0; margin-bottom: 0.2em; }

#main-content  #contactInfo { margin: 2em; }

#main-content  li ul li { list-style: square; }

#about #main-content #sub p { margin-bottom: 20px; /* add a little white space under the headings and paragraphs */ }

/* about */ #main-content .indent { margin-left: 1.8em; } CSS #navcontainer { margin-left: 30px; }

/*Fat Erik's Pipelist*/ #navlist { list-style: none; padding: 0; margin: 0; }

#navlist li { display: inline; padding: 0; margin: 0; }

#navlist li:before { content: "| "; } #navlist li:first-child:before { content: ""; }

/*IE workaround*/ /*All IE browsers*/ * html #navlist li { border-left: 1px solid black; padding: 0 0.4em 0 0.4em; margin: 0 0.4em 0 -0.4em; }

/*Win IE browsers - hide from Mac IE\*/ * html #navlist { height: 1%; }

* html #navlist li { display: block; float: left; }

/*End hide*/ /*Mac IE 5*/ * html #navlist li:first-child { border-left: 0; }

/* Footer */ #footer
{
	clear: both;
	/* needed since the main content and secondary content are  floated */
	background-color: #064511;
	color: #fff;
	margin-top: 20px;
	/* add a little space above the footer */
	padding: 1em 0;
	/* adds space above and below the list items in the footer bar */
	height: 7.5em;
	/*75px*/
	font-size: 0.8125em;
	word-spacing: 2px;
	height: 128px;
}

#footer #copyright { float: left; /* floated left so that the footer links can be right-aligned on the same line */ }

#footer ul { text-align: right; padding-right: 10px; }

#footer li
{
	display: inline;
	/* displays the list items horizontally */
	padding-left: 1em;
	/* makes sure that there's space between the copyright and the links but that the links are flush to the right side of the container */
	color: #94C04A;
}

/* Footer links */ #footer a, #footer a:link, #footer a:visited, #footer a:active
{
	color: #A0C069;
	text-decoration: none;
	/* no underline */
	padding: 0 2px;
	margin: 0 4px;
}

#footer a:hover, #footer a:focus { color: #DC2B2B; border-style: none; background-color: #94D62B; }

hr { visibility: hidden; padding: 0.5em 0; }

#survey, #links { margin: 0 20px; }

/*----------------- external links --------------------*/ a[target=_blank]:link, a[target=_blank]:visited, a[rel=external]:link, a[rel=external]:visited { text-decoration: none; border-bottom: 1px dashed; }

/* Feedback form on the form.htm page */ #feedback form { width: 25em; /* need to set the width of the form so that the right aligned elements aren't too far to the right side of the container */ margin-top: -3em; }

#feed form { width: auto; /* need to set the width of the form so that the right aligned elements aren't too far to the right side of the container */ margin-top: -3em; }

#feedback form div { margin: 0.75em 0; /* add a little space above and below the divs in the form so that the lines are not too close together */ text-align: right; }

#feed form div { margin: 1.4em 0; /* add a little space above and below the divs in the form so that the lines are not too close together */ text-align: left; }

#feedback fieldset { padding: 1em; /* adds space around the fieldset, although this design doesn't show the fieldset, it's all ready for you to give it a border or background color or whatever */ margin-bottom: 1em; /* add a little space below the fieldset  */ }

#feed fieldset { padding: 1em 0 0 0; /* adds space around the fieldset, although this design doesn't show the fieldset, it's all ready for you to give it a border or background color or whatever */ margin-bottom: 1em; /* add a little space below the fieldset  */ }

#feedback label, #feed label { font-weight: #600;  display: block; padding-bottom: 3px;} 

#feedback label.comments { line-height: 1.5em; }

#feedback input, #feed input, #feedback textarea { width: 11.4em; /* the form inputs and textarea have the same width so that when right-aligned, everything lines up neatly */ color: #000; border: 1px solid #94d62b; font-size: 1em; font-family: Geneva, Arial, Helvetica, sans-serif; padding: 0 0.1em; /* adds a little space between the left/right edges of the input and textarea and the letters that are typed within those elements */ background-color: #F2EFEC; }

/* shows focus in the form inputs and textarea */ #feedback input:focus, #feed input:focus, #feedback textarea:focus { background-color: #DC2B2B; /*set the background colour of the input and textarea when the cursor is inside*/ color: #fff; /*set the text colour to white*/ }

#feedback .sendbutton, #feed .sendbutton { /* background color of the send button */ background-color: #94d62b; }

#feedback .sendbutton { width: 5em; } #feed .sendbutton { width: 5.5em; }

/* classes */

.peachy { color: #FF9880; } 
.perky { color: #FF7070; } 
.zest { color: #F37A14; }

.new { color: #FC3; font-weight: bold; padding: 0 0.125em; background: #FF080E; margin-right: 0.3em; }

.hilite { background: #FFF68F; font-weight: bold; }

#main-content ul.compact li { margin-bottom: 0.5em; }


 .company { text-transform: uppercase;}

/*vertical-align*/
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.sup { vertical-align: super; }
.sub { vertical-align: sub; }

/*font-size adjust*/
.large { font-size: large; }
.larger { font-size: larger; }
.x-large { font-size: x-large; }
.xx-large { font-size: xx-large; }
.small { font-size: small; }
.smaller { font-size: smaller; }

.plus10 { font-size: 110%; }
.plus20 { font-size: 120%; }
.plus33 { font-size: 133%; }
.plus40 { font-size: 140%; }
.plus50 { font-size: 150%; }
.plus100 { font-size: 200%; }
.plus300 { font-size: 300%; }
.giant { font-size: 700%; }

.eleven { font-size: 11px; }
.twelve { font-size: 12px; }
.thirteen { font-size: 13px; }
.fourteen { font-size: 14px; }
.fifteen { font-size: 15px; }

/*text-decoration*/

.normal { font-style: normal; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.strikethru { text-decoration: line-through; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.camelcase { text-transform: capitalize; }
.smallcaps { font-variant: small-caps; }
.slant { font-style: oblique; }

.sans-serif { font-family: Verdana, Arial, Helvetica, sans-serif; }

.wrap { word-wrap: break-word; white-space: normal; }
.pre { white-space: pre; }

/*display*/

.block { display: block; }
.inline { display: inline; }
.none { display: none; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.collapse { visibility: collapse; }

/* === text-align === */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

/*margin-classes*/
.mg-top { margin-top: 1em; }
.mg-right { margin-right: 1em; }
.mg-bottom { margin-bottom: 1em; }
.mg-b { margin-bottom: 2em; }
.mg-left { margin-left: 1em; }

/*margin-s-classes = (s)mall shims*/
.mg-tops { margin-top: 0.33em; }
.mg-rights { margin-right: 0.33em; }
.mg-bottoms { margin-bottom: 0.33em; }
.mg-lefts { margin-left: 0.33em; }

.shim5 { margin-top: 5px; }

/*negative-margins*/
.top-up { margin-top: -1em !important; }
.topup-3 { margin-top: -3px; }
.topup-6 { margin-top: -6px; }

/*padding-classes*/
.pad-top-sm { padding-top: 0.5em; }
.pad-top { padding-top: 1em; }
.pad-right { padding-right: 1em; }
.pad-bottom { padding-bottom: 1em; }
.pad-bottom-s { padding-bottom: 0.5em; }
.pad-left { padding-left: 1em; }
.pad-all { padding: 0.5em; }
.pad-s-all { padding: 0.125em; }
.pad-m-all { padding: 0.25em; }
.pad-l-all { padding: 1em; }
.pad-r-ten { padding-right: 10%; }
.pad-l-ten { padding-left: 10%; }
.pad-r-twenty { padding-right: 20%; }
.pad-l-twenty { padding-left: 20%; }
.pad-r-third { padding-right: 33%; }
.pad-l-third { padding-left: 33%; }
.pad-hz { padding-right: 1em; padding-left: 1em; }

.big-top
{
	padding-top: 18px;
	padding-bottom: 0;
}

.big-bottom
{
	padding-bottom: 18px;
	padding-top: 0;
}


a.buffer
{
	margin-left: 0.5em;
}

.warning
{
	background: #FFFADB;
	color: #C00;
	border: 2px solid;
	padding: 1em;
	margin: 1em 0 0.5em 0;
}

.alert
{
	background: #FFC;
	color: #C00;
	border: 1px solid #FC6;
	padding: 1em;
	margin: 1em 0 0.5em 0;
}

/* floats */

 .clearright
{
	float: right;
	position: relative;
	margin: 0;
	clear: right;
}

.clearleft
{
	float: left;
	position: relative;
	margin: 0;
	clear: left;
}

.atleft
{
	float: left;
	position: relative;
	margin: 0.25em 1.5em 0.66em 0;
}

.closeleft
{
	float: left;
	position: relative;
	margin: 0.25em 0.9em 0 0;
}

.topleft
{
	float: left;
	position: relative;
	margin: 0 1.5em 0 0;
}

.leftist
{
	float: left;
	position: relative;
	margin: 0.75em 1.5em 0.66em 0;
}

.alright
{
	float: right;
	position: relative;
	margin: 0.25em 0 0.66em 1.5em;
}

.alrighty
{
	float: right;
	position: relative;
	margin: 0.25em 0 0.66em 1.5em;
}

.rightist
{
	float: right;
	position: relative;
	margin: 0.75em 0 0.66em 1.5em;
}

.onright
{
	float: right;
	position: relative;
	margin: 0.33em 0 0.66em 1.5em;
}

.topright
{
	float: right;
	position: relative;
	margin: -0.5em 0 0 0.5em;
}

.iconleft
{
	position: relative;
	top: 0.25em;
	right: 0;
}

/****standalone****/

p.standalone { text-align: center; }

p.standalone img { display: inline; }

/**** img classes ****/

img.standalone
{
	display: block;
	margin: 0.5em auto;
	width: auto;
	max-width: 100%;
}

img.across { margin: 0.25em 0 1.5em 0; }
img.flushleft { margin-left: -20px; }
img.flushright { margin-right: -20px; }

img.pictop
{
	display: block;
	margin: 0;
}

img.picleft
{
	display: block;
	margin: 1em 0 0.5em 0;
}

img.leftalone
{
	display: block;
	margin: 0.5em auto 0.5em 0;
	width: auto;
	max-width: 100%;
}

img.alone
{
	display: block;
	margin: 0.5em auto;
}

img.leftthumb
{
	display: block;
	margin: 0.5em auto 0.5em 0;
}

img.downspaced
{
	display: block;
	margin: 0.5em auto 18px auto;
}

img.upspaced
{
	display: block;
	margin: 18px auto 0.5em auto;
}

/*remove img link borders*/ 

a.imglink, a.imglink:link, a.imglink:visited { border: 0 !important; }
a.imglink:hover, a.imglink:focus, a.imglink:active { background: transparent; border: 0 !important; }

/*----------------- borders --------------------*/
.border-top { border-top: 3px solid #7E9457; width: 24em; }
.border { border: 1px solid #B2B2B2; }
.border1 { border: 1px solid; }
.border1d { border: 1px solid #333; }
.border2 { border: 2px solid; }
.border2d { border: 2px solid #333; }
.border3 { border: 3px solid; }
.border3d { border: 3px solid #333; }
.solid { border: 1px solid; }
.dotted { border: 1px dotted; }
.plain { border: none; }
.double { border: 4px double; }
.inset { border: 1px inset; }
.outset { border: 1px outset; }

/*indents*/
.sub1 { margin-left: 1em; }
.sub2 { margin-left: 1.33em; }
.sub3 { margin-left: 1.5em; }
.sub4 { margin-left: 1.67em; }
.sub5 { margin-left: 2.0em; }
.sub6 { margin-left: 2.5em; }
.sub7 { margin-left: 3.0em; }

.indent { padding-left: 10px; }

.in-1
{
	text-indent: 1.5em;
}

/*outdents*/
.out1 { margin-left: -1em; }
.out2 { margin-left: -2em; }
.outlist { margin-left: -2.5em; }

/*callouts*/

.call-box
{
	background-color: #FFF;
	width: auto;
	border: 10px solid #E8DFBF;
	padding: 20px;
	margin: 20px;
}

.pullquote-2
{
	padding: 1em;
	float: right;
	width: 14em;
	_width: 192px;
	margin: 0.75em 0.75em 0.75em 1.25em;
	font-size: 1.25em;
	_font-size: 1.11em;
	text-align:center;
	line-height: 2;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-style: italic;
	font-weight: normal;
	border-top: 2px solid #391A0E;
	border-bottom: 2px solid #391A0E;
}

.box
{
	margin: 1em 0 2em;
	padding: 0.25em 0.75em 0 0.75em;
}

.box2
{
	margin: 1em  0;
	padding: 1.5em;
}

.hbox
{
	background-color: #FFF;
	padding: 0.25em 0.75em 0 0.75em;
	margin: 0.25em 0 1em 0;
}

.hbox-2
{
	background-color: #FFF;
	padding: 0.25em 0.75em;
	margin: 0.25em 0 1em 0;
}



.colbox 
{
	padding: 0.33em 0.67em;
	margin: 0;
}

.boxhed 
{
	padding: 0 1em 0.67em 1em;
	margin: 0.25em 0;
}

.callout
{
	background-color: #FFF;
	width: 27em;
	border: 6px solid #E8DFBF;
	padding: 0.5em 1.5em;
	margin: 0.5em 0;
}

/*multiclass callboxes*/

.fitbox
{
	padding: 0.33em 0.67em;
	text-align: center;
}

.callbox
{
	width: 27em;
	padding: 0.5em 1em;
}

.callbox2
{
	width: 24em;
	padding: 0.5em 1em;
	text-align: center;
}

.callbox3 
{
	width: 18em;
	padding: 0.5em 1em 0 1em;
	text-align: left;
	margin: 1em auto;
}

.callbox4
{
	width: 21em;
	padding: 0.5em 1em 0 1em;
	text-align: center;
	margin: 1em auto;
}

/*small floated right content box*/
/*for use with non-hanging div class*/
/*size with width classes below */

.callbox5
{
	padding: 0.5em 1em 0 1em;
	text-align: left;
	margin: 0.5em 0 0.25em 1.5em;
	float: right;
	position: relative;
}

/*small floated right content box*/
/*for use with hanging div class*/
/*size with width classes below */

.hangingbox 
{
	padding: 0.75em 2.5em 0.25em 0.25em;
	text-align: left;
	margin: 0.5em 0 0.25em 1.5em;
	float: right;
	position:relative;
}

/*widths*/
.twenty { width: 20%; }
.quarter { width: 25%; }
.third { width: 33%; }
.forty { width: 40%; }
.half { width: 50%; }
.sixty { width: 60%; }
.thirds2 { width: 67%; }
.quarters3 { width: 75%; }
.eighty { width: 80%; }
.full { width: 90%; }
.all { width: auto; }
.hundred { width: 100%; }

.popup { width: 480px; }

/*background classes*/
.bg-a
{
	background: #9EAF81;
	border: 1px #333 solid;
}

.bg-b
{
	background: #E7EBE0;
	border: 1px solid #BFBDAC;
}

.bg-c
{
	background-color: #F0F0F0;
	border: 1px solid #BFBDAC;
}

.bg-d
{
	background-color: #F1EFE2;
	border: 1px solid #BFBDAC;
}

.bg-e
{
	background-color: #FFFADB;
	border: 1px solid #BFBDAC;
}

.bg-f
{
	background-color: #FFF;
	border: 1px solid #686868;
}

.bg-g
{
	background-color: #FFF;
	border: 1px solid #ccc;
}

.bg-h
{
	background-color: #FFF;
	border: 1px solid #ddd;
}