/* TEXT + FONT
---------------------------------------------------------------- */

body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; color:#000; }

<!--
.container_bg_outside {
	background: #bfd2ee url(http://www.hflsolutions.com/images/bg/gradient_pg_blue.gif) repeat-x scroll 0 0;
}
.container_bg_inside {
	width:900px;
	background-color:#FFF;
	margin:auto;
	border-top:3px solid #5A82B3;
	border-bottom:1px solid #5A82B3;
	border-left:1px solid #AEC0DA;
	border-right:1px solid #AEC0DA;
	text-align:left;
}
-->

P { 
    font-size: 14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.4;
    text-align: justify;
    color:#000;
    text-indent: 25px;
}

H1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size:22pt;
    color:#000;
    
}

H2 {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18pt;
    padding: 2px;
    color:#000;
    
}

H3 {
    font-family: Arial, helvetica, sans-serif;
    font-size:16pt;
    padding: 1.8px;
    color:#000;
    /* position: absolute; left:-1px; top:-1px color:000000 */
    /* border-bottom: 1px solid #aaaaaa 80%; */
    /* margin-bottom: -12px; */
    
}

H4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11pt;
    padding: 1.8px;
    color:#000;
    /* border-bottom: 1px solid #aaaaaa 80%; */
    margin-bottom: -12px;
    
}

.fGeneral { 
    font-size: 14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.4;
    color:#000;
}

.fGeneralLight { 
    font-size: 14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.4;
    color: #FFFFFF;
}

.fColorDark { color:#000000 }

.fGeneralLRG { 
    font-size: 16px; 
    font-family: Arial, helvetica, sans-serif;
    line-height: 1.4;
}
.fGeneralLRGlight { 
    font-size: 15px; 
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    line-height: 1.4;
    color: #FFFFFF;
}

.fGeneralXLRG { 
    font-size: 18px; 
    font-family: arial, sans-serif;
    line-height: 1.3;
}
.fGeneralXXXLRG { 
    font-size: 24px; 
    font-family: arial, sans-serif;
    font-weight: bolder;
    line-height: 1.4;
}
.fGeneralXXXLRGlight { 
    font-size: 22px; 
    font-family: arial, sans-serif;
    font-weight: bolder;
    line-height: 1.4;
    color: #FFFFFF;
}

.fGeneralMED { 
    font-size: 12px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.4;
}
.fGeneralMEDLight { 
    font-size: 12px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.4;
    color: #FFFFFF;
}

.fGeneralSML { 
    font-size: 11px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.3;
}
.fGeneralSMLlight { 
    font-size: 11px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.3;
    color: #FFFFFF;
}
.fGeneralXSML { 
    font-size: 10px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.3;
}
.fGeneralXSMLlight { 
    font-size: 10px; 
    font-family: arial, helvetica, sans-serif;
    line-height: 1.3;
    color: #FFFFFF;
}

.fSEO {
    display:none;
}

.fSpecificCourierNew { 
    font-size: 12px; 
    font-family:"Courier New", Courier, monospace;
}

.fSpecificCourierNewWhite { 
    font-size: 12px; 
    font-family: "Courier New"; 
    color: #FFFFFF;
}

.fTestimonials { 
    font-size: 11px; 
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
	color:#000;
    font: italic;
	background-color:#E4F1FB;
	border:1px solid #7AC1FC;
}
.testimonial_header {
   width:100%; 
   padding-top: 2px; 
   padding-bottom: 2px;
   /*background-color: #cccccc;*/
   background-color:#7AC1FC;
   margin-bottom:3px; 
   
   color: #666666;
   text-align: center;
   font-size:12px; 
   font-family:arial, sans-serif;
   letter-spacing: 2px;
}

.indent { padding-left: 30px; }

.hilite { background-color: #FFFF66; }
.hiliteText { color:#000000; }

.listprice { font-family: arial,verdana,helvetica,sans-serif; text-decoration: line-through; font-size:12px; }



/* LINKS
---------------------------------------------------------------- */

a, a:visited { color: #0066CC; background:none; text-decoration:none; padding: 3px 1px 0 1px; border-bottom: 1px solid #CCCCCC; }       
a:hover { color: #E90000; background:none; text-decoration:none; padding: 3px 1px; border-bottom: 0; }

a.icon, a.icon:hover, a.icon:visited        
    { text-decoration:none; padding:none; background:none; border: 0; }


a.textHEADER, a.textHEADER:visited { color: #0066CC; text-decoration:none; padding: 3px 1px 0 1px; border-bottom: 1px dashed #CCCCCC; }     
a.textHEADER:hover { color: #666666; text-decoration:none; padding: 3px 1px; background:none; border: 0; border-bottom: 0; }

a.textLIST, a.textLIST:visited { color: #0066CC; text-decoration:none; border: 0; }     
a.textLIST:hover { color: #666666; text-decoration:none; background:none; border-bottom: 1px solid #0066CC; }

a.textGREY, a.textGREY:visited 
    { color: #333; text-decoration:none; background: none; border:none; }
a.textGREY:hover { color: #0066CC; text-decoration:none; background:none; border:none; }

a.textNONE, a.textNONE:visited, a.textNONE:hover 
    { background: none; color:#000000; border: none; padding: 0px; text-decoration: none; }

a.textWHITE, a.textWHITE:visited
    { background: none; color:#FFFFFF; border: none; padding: 0px; text-decoration: none; }
a.textWHITE:hover 
    { background: none; color:#007EFF; border: none; padding: 0px; text-decoration: none; }

a.textBLACK, a.textBLACK:visited
    { color:#000; text-decoration:none; padding: 0px; border: none;}
a.textBLACK:hover 
    { color: #0066CC; text-decoration:underline; padding: 0px; border: none;}



/* GENERAL [home.css]
---------------------------------------------------------------- */

#g_highlightBox {
    padding:10px;
    background-color:#E4F1FB;
    border:2px solid #7AC1FC; 
}
#g_bullets { }
#g_bullets li {     
    padding: 7px 0px 7px 0px;
    text-align: left;
    margin: 0px 20px 0px 20px;
}


.g_pictureframe { 
   border:5px solid #E5E5E5;
   padding: 1px;
   background-color: #ffffff;
}
#hr {
        height: 1px; 
        color: #EBEBEB;       
        background-color: #EBEBEB;     
        border: none;
        text-align: center;
}
#home_hr {
        height: 1px; 
        color: #EBEBEB;       
        background-color: #EBEBEB;     
        border: none;
        text-align: center;
}


/* ############################### picture mouse over viewer ##################################### */
/* http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ */

.thumbnail{
    position: relative;
    border: 0;
    text-decoration:none;
    padding:none;
    z-index: 0;
}

.thumbnail:hover{
    background-color: #FFFFFF;
    z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #FFFFFF;
    padding: 15px;
    right; 100px;
    /*left: -1000 px;*/
    border:5px solid #E5E5E5;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
    display:block;
    visibility: visible;
    bottom: 0px;
    right: 100px; /*position where enlarged image should offset horizontally */
}


/*#################### version 2 ########## */
/* http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/ */

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
	/*float: left;*/
	clear: none; /* set to left or right if needed */
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.ienlarger span img {
	/*border:5px solid #E5E5E5;*/ /* adds a border around the image */
	margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display:none;
	color: #FFCC00; /* caption text colour */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* caption text size */
	background-color: #FFFFFF;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
	border:5px solid #E5E5E5;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	bottom: -120px; /* means the pop-up's top is 50px away from thumb's top */
	right: 90px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
	/* enter desired thumb width here --- put it INTO the sytle sheet on web page*/
	height : auto;
}

/* smart image enlarger ends here */


/* BUTTONS [buttons.css]
---------------------------------------------------------------- */

          /* ########## Buttons ########## */ 

input.shop-btn {
    font-weight: bold;
    color: #000;
    background: #fc3;
    border-width: 1px;
    border-style: solid;
    border-top-color:#fc3;
    border-left-color:#fc3;
    border-right-color:#762;
    border-bottom-color:#762;
    cursor: pointer;
    padding: 4px;
    display: block;
}

input.shop-btn-hover {
    color: #363;
    background: #eb2;
    border-top-color:#393;
    border-left-color:#393;
    border-right-color:#060;
    border-bottom-color:#060;
}

.Button {
   border-left: 1 solid #a0a0a0; 
   border-top: 1 solid #a0a0a0; 
   border-right: 1 solid #000000; 
   border-bottom: 1 solid #000000; 
   padding: 2 2 2 2; 
   /* outline: #a0a0a0 solid 2px; */
}

.button_form {
   font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
   /*background-color: #D7E5F2;*/
   background-color:#3670A7;
   /*color: #102132;*/
   color:#FFFFCC;
   margin-bottom: 5px;
   margin-top: 20px;
   padding: 6px;
   display: block;
   font-weight:bold;
   cursor:pointer;
}

.button_general {
   font-weight: bold;
   text-align: center;
   margin: 5px;
}

/* ########## solid buttons, no hover ########## */

/* ### Grey ### */
.button_GREY {
   background-color: #cccccc;
   color: #000000;
   font: 12px Arial, Helvetica, sans-serif;
   font-weight: bold;
   
   padding: 8px;
   display: block;
   margin: 0px;
   cursor:pointer;
} 

/* ### Green ### */
.button_GREEN {
   background-color: #00cc00;
   color: #FCFBEC;   
   font: 12px Arial, Helvetica, sans-serif;
   font-weight: bold;

   padding: 8px;
   display: block;
   margin: 0px;
   cursor:pointer;
}


/* ### Red ### */
.button_RED {
   background-color: #E40323;
   color: #FCFBEC;
   font: 12px Arial, Helvetica, sans-serif;
   font-weight: bold;

   padding: 8px;
   display: block;
   margin: 0px;
   cursor:pointer;
}

.button_REDbig {
   background-color: #E40323;
   color: #FCFBEC;
   font: 15px Arial, Helvetica, sans-serif;
   font-weight: bold;

   padding: 6px;
   display: block;
   margin-bottom: 5px;
   margin-top: 20px;
   cursor:pointer;
}

/* ### orange ### */
.button_ORANGE {
   background-color: #FFAC28;
   color:#000000;
   font: 13px Arial, Helvetica, sans-serif;
   font-weight: bold;

   padding: 8px;
   display: block;
   margin: 0px;
   cursor:pointer;
}

.button_ORANGEbig {
   background-color: #FFAC28;
   color:#000099;
   font: 15px Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-align:center;

   padding: 6px;
   display: block;
   margin-bottom: 5px;
   margin-top: 20px;
   cursor:pointer;
}

/* ########## buttons setup for all ROLLOVERS (works for LINKS, not general input buttons ########## */

.button_HIGHLITEgeneral,
.button_GREENgeneral,
.button_GREYgeneral,
.button_GREYLIGHTgeneral,
.button_ORANGElarge, 
.button_REDgeneral,
.button_REDlarge {
   font-weight: bold;
   text-align: center;
   margin: 5px;
}

/* ########## HIGH LIGHT ########## */

.button_HIGHLITEgeneral a,
.button_HIGHLITEgeneral a:visited {
   color: #000000;
   font-size: 10px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #FFFF00;
   border-top: 2px #FFFF8A solid;    /* ligher color */
   border-left: 2px #FFFF8A solid;   /* ligher color */
   border-bottom: 2px #AAAA00 solid; /* darker color */
   border-right: 2px #AAAA00 solid;  /* darker color */
}


/* ########## GREEN ########## */

.button_GREENgeneral a,
.button_GREENgeneral a:visited {
   color: #FCFBEC;
   font-size: 10px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #00cc00;
   border-top: 2px #00f400 solid;    /* ligher color */
   border-left: 2px #00f400 solid;   /* ligher color */
   border-bottom: 2px #009a00 solid; /* darker color */
   border-right: 2px #009a00 solid;  /* darker color */
}


/* ########## GREY ########## */


.button_GREYgeneral a,
.button_GREYgeneral a:visited {
   color: #FCFBEC;
   font-size: 10px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #666666;
   border-top: 2px #AAAAAA solid;    /* ligher color */
   border-left: 2px #AAAAAA solid;   /* ligher color */
   border-bottom: 2px #444444 solid; /* darker color */
   border-right: 2px #444444 solid;  /* darker color */
}

.button_GREYLIGHTgeneral a,
.button_GREYLIGHTgeneral a:visited {
   color: #666666;
   font-size: 10px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #e1e1e1;
   border-top: 2px #f5f5f5 solid;    /* ligher color */
   border-left: 2px #f5f5f5 solid;   /* ligher color */
   border-bottom: 2px #cccccc solid; /* darker color */
   border-right: 2px #cccccc solid;  /* darker color */
}


/* ########## RED ########## */

.button_REDgeneral a,
.button_REDgeneral a:visited {
   color: #FCFBEC;
   font-size: 10px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #E40323;
   border-top: 2px #FE8B9C solid;    /* ligher color */
   border-left: 2px #FE8B9C solid;   /* ligher color */
   border-bottom: 2px #AE021C solid; /* darker color */
   border-right: 2px #AE021C solid;  /* darker color */
}


.button_REDlarge a,
.button_REDlarge a:visited {
   color: #FCFBEC;
   font-size: 14px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
   display: block;
   background-color: #E40323;
   border-top: 2px #FE8B9C solid;    /* ligher color */
   border-left: 2px #FE8B9C solid;   /* ligher color */
   border-bottom: 2px #AE021C solid; /* darker color */
   border-right: 2px #AE021C solid;  /* darker color */
}

/* ########## ORANGE ########## */

.button_ORANGElarge a,
.button_ORANGElarge a:visited {
   color: #000099;
   font-size: 15px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 6px 5px 6px 5px;
   display: block;
   background: #fc3;
   border-top: 1px #fc3 solid;    /* ligher color */
   border-left: 1px #fc3 solid;   /* ligher color */
   border-bottom: 1px #762 solid; /* darker color */
   border-right: 1px #762 solid;  /* darker color */
   cursor: pointer;
}
.button_ORANGElarge a:hover {
   color: #363;
   font-size: 15px; 
   font-family: Arial, "trebuchet MS", helvetica, sans-serif;
   text-decoration: none;
   padding: 6px 5px 6px 5px;
   display: block;
   background: #eb2;
   border-top: 1px #393 solid;    /* ligher color */
   border-left: 1px #393 solid;   /* ligher color */
   border-bottom: 1px #060 solid; /* darker color */
   border-right: 1px #060 solid;  /* darker color */
   cursor: pointer;
}

/* ########## a:hover for all ########## */

.button_HIGHLITEgeneral a:hover,
.button_GREENgeneral a:hover, 
.button_GREYgeneral a:hover, 
.button_GREYLIGHTgeneral a:hover, 
.button_REDgeneral a:hover,
.button_REDlarge a:hover {
   color: #FCFBEC;
   padding: 4px;
   display: block;
   background-color: #999999;
   border-top: 2px #666666 solid;     /* darker color */
   border-left: 2px #666666 solid;    /* darker color */
   border-bottom: 2px #CCCCCC solid;  /* ligher color */
   border-right: 2px #CCCCCC solid;   /* ligher color */
} 






/* TABLES [tables.css]
---------------------------------------------------------------- */


.infobox, .infoboxsmall, .infobox_body, .infobox_head, .infobox_head h1{
    background: transparent url(/images/borders/tables/infobox.gif) no-repeat  bottom right;
}

.infobox {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body img{
    border: 0px;
}

.infobox_head  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid purple;
}

.infobox_head h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}
.infobox_head h4 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body {
    background-position: bottom left;
    margin-right: 1px; /* interior-padding right */
    padding: 0px 15px 20px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}

/* Info Box Red outline
   ------------------------------------ */

.infobox_red, .infoboxsmall_red, .infobox_body_red, .infobox_head_red, .infobox_head_red h1{
    background: transparent url(/images/borders/tables/infobox_red.gif) no-repeat  bottom right;
}

.infobox_red {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body_red img{
    border: 0px;
}

.infobox_head_red  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid red;
}

.infobox_head_red h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body_red {
    background-position: bottom left;
    margin-right: 1px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}


/* Info Box Green outline
   ------------------------------------ */

.infobox_green, .infoboxsmall_green, .infobox_body_green, .infobox_head_green, .infobox_head_green h1{
    background: transparent url(/images/borders/tables/infobox_green.gif) no-repeat  bottom right;
}

.infobox_green {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body_green img{
    border: 0px;
}

.infobox_head_green  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid green;
}

.infobox_head_green h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body_green {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid green;
}



/* Info Box Orange outline
   ------------------------------------ */

.infobox_orange, .infoboxsmall_orange, .infobox_body_orange, .infobox_head_orange, .infobox_head_orange h1{
    background: transparent url(/images/borders/tables/infobox_orange.gif) no-repeat  bottom right;
}

.infobox_orange {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body_orange img{
    border: 0px;
}

.infobox_head_orange  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid orange;
}

.infobox_head_orange h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body_orange {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}


/* Info Box Purple outline
   ------------------------------------ */

.infobox_purple, .infoboxsmall_purple, .infobox_body_purple, .infobox_head_purple, .infobox_head_purple h1{
    background: transparent url(/images/borders/tables/infobox_purple.gif) no-repeat  bottom right;
}

.infobox_purple {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body_purple img{
    border: 0px;
}

.infobox_head_purple  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid purple;
}

.infobox_head_purple h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}
.infobox_head_purple h4 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body_purple {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */ 
    border: 0px solid red;
}


/* Info Box Blue outline
   ------------------------------------ */
.infobox_blue, .infoboxsmall_blue, .infobox_body_blue, .infobox_head_blue, .infobox_head_blue h1{
    background: transparent url(/images/borders/tables/infobox_blue.gif) no-repeat  bottom right;
}

.infobox_blue {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infobox_body_blue img{
    border: 0px;
}

.infobox_head_blue  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid blue;
}

.infobox_head_blue h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infobox_body_blue {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}



/* ########################## begin background section ######################## */


/* Info Box RED BackGround
   ------------------------------------ */

.infoboxRED, .infoboxREDsmall, .infoboxRED_body, .infoboxRED_head, .infoboxRED_head h1{
    background: transparent url(/images/borders/tables/infobox_BGred.png) no-repeat  bottom right;
}

.infoboxRED {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infoboxRED_body img{
    border: 0px;
}

.infoboxRED_head  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid purple;
}

.infoboxRED_head h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infoboxRED_body {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 10px 15px 30px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}



/* Info Box GREEN
   ------------------------------------ */

.infoboxGREEN, .infoboxGREENsmall, .infoboxGREEN_body, .infoboxGREEN_head, .infoboxGREEN_head h1{
    background: transparent url(/images/borders/tables/infobox_BGgreen.png) no-repeat  bottom right;
}

.infoboxGREEN {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infoboxGREEN_body img{
    border: 0px;
}

.infoboxGREEN_head  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid purple;
}

.infoboxGREEN_head h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infoboxGREEN_body {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 0px 15px 20px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}

/* Info Box BLUE
   ------------------------------------ */

.infoboxBLUE, .infoboxBLUEsmall, .infoboxBLUE_body, .infoboxBLUE_head, .infoboxBLUE_head h1{
    background: transparent url(/images/borders/tables/infobox_BGblue.png) no-repeat  bottom right;
}

.infoboxBLUE {
    padding-right: 5px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px 0px 10px 0px; /* use to position the box */
}

.infoboxBLUE_body img{
    border: 0px;
}

.infoboxBLUE_head  {
    background-position: top right;
    margin-right: -5px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
    border: 0px solid purple;
}

.infoboxBLUE_head h1 {
    background-position: top left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 10px 0px 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    white-space: nowrap;
}

.infoboxBLUE_body {
    background-position: bottom left;
    margin-right: 10px; /* interior-padding right */
    padding: 0px 15px 20px 15px; /* mirror .cssbox_head right/left */
    border: 0px solid red;
}


/* TOOL TIPS
---------------------------------------------------------------- */

.tooltips_bodyG {
	width:250px;
	padding:10px;
	background-color:#FFFFFF;
	color:#666666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:justify;
	border-left:2px solid #54A4DE;
    border-right:2px solid #54A4DE;
    border-bottom:2px solid #54A4DE;
}
.tooltips_headerGblue {
	width:250px;
	padding:5px 10px 5px 10px;
	background-color:#54A4DE;
	color:#EBF4FA;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
	text-align:center;
}