/*this version uses absolute/relative positioning between the side columns and their respective faux column containers. */
/* se notes on min and max width above
/* the content is first in the markup followed by the two side columns*/
/* this "content-first" markup is good for accessability and search engine optimization */
* {margin:0; padding:0;} /* removes defaults of all elements */
body {font: 14px  arial, sans-serif;  /* overal font and sizing */
	text-align:center; /* centers the layout in IE */
	color:black;
        background-color:#dedbd8;
	}

div#mainwrap {width:774px;
	margin-left:auto; margin-right:auto; /* centers the layout in SCBs */
	text-align:left; /* stops elements inheriting the body's text-center */
	}
div#header { height:100px; text-align:center; background-image:url(../images/logo.jpg);
                  background-repeat: no-repeat; font-size:10pt;  background-color:#fff;
			} /* tempoarary placeholder styles for header */

div#header h1 {font-size:12pt; color: #161616; padding-top:20px;}
div#header img {float:left;}
div#header a:hover {color:#f58017;}
div#header p{margin-top:30px; margin-left:10px; font-weight:bold; font-size:14px; color:black;text-align:left; float:left;}
div#header p span {  font-size:16px; color:#f69d29; padding-left:20px; } 


/* the horizontal menu starts here */
div#listmenu {
	width:100%; 	/* makes the div full width */
	float:left; /*makes the div enclose the list */
	border-top:1px solid white;	/* draws line on top edge of div */
	border-bottom:1px solid white;	 /* draws line on bottom edge of div */
	border-right:1px solid white;	
	font-size:9pt;	/* SET FONT-SIZE HERE */
	background-color: #333333; /* colors the div */
	font-family:arial;
	}
div#listmenu ul {margin: 0 0 0 0px;/* indents ul from edge of container In IE See how to do it below*/
	}
div#listmenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
        position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	
	border-right:1px solid white; /* creates dividing lines between the li elements */
	}
div#listmenu li:first-child {
	border-left:1px solid white; /*the first vertical line on the menu For IE see how to do it below*/
	}
div#listmenu a:hover { 
	background-color:#91cff6; /*sets the background of the menu items */
	color:black;
	}
div#listmenu a {
        display:block;
	padding:2px 22px; /*creates space each side of menu item's text */
        color:white; 
        font-weight:bold;
	}


/* the horizontal menu ends here */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid black; /* adds the rightmost menu vertical line to the ul */
       
	margin-left:0px; /* IE doubles the given value above - why? */
	}
* html a {display:block;} /* makes IE5 & 5.5 accept the padding on the link */
/* end of hack zone */
/* END OF LIST-BASED MENU */
/***************** End of Header Styling*************************************/



a {text-decoration:none; color:black;}

a:hover{color:#f58017;}



div#contentarea { background-color:#FFF; /* ensures bg is white if faux graphic doesn't load */
	
	position:relative; /* set positioning context  for left sidebar div */
	}
div#contentarea2 {background-color:#FFF; /* ensures bg is white if faux graphic doesn't load */
       
	position:relative; /* set positioning context  for right sidebar div */
	}
div#column1 {width:150px; /* left col width */
	position: absolute; /* contextual positioning in contentarea container */
	top:0px; left:0px; /*positions col within contentarea container */
        /* background-color:#CCC;  left col bg color - (change color to see divs is position : ) You can uncomment it But then remember to put start of comment before right*/
       	overflow:hidden; /* prevents overlarge elements breaking out of column */
        font-size:9pt;
	color:black;
	}

div#column2 {background-color:#FFF; 
	margin:0 150px 0 150px; /* left and right margins to make room for sidebars */
		
	width:444px;
	padding-top:10px;
        position:relative;      
	}
div#column3 {width:150px; 
	position:absolute;  /* contextual positioning in contentarea container */
	top:0px; right:0px; /*positions col within contentarea container */
	/* background-color:#DDD;  right col bg color - (change color to see divs is position : )  You can uncomment it But then remember to put start fo comment before right*/
	overflow:hidden; /* prevents overlarge elements breaking out of column */
	color:black;
	}


div#column1  p {font-size:10pt; font-weight:bolder; margin:20px 0px  0px; }

div#column1  p.category {background-color:#333333; color:white; padding:4px;}
div#column1 p a{color:white;}
div#column1 p a:hover {background-color:#6f6d6d;}
div#column1 ul {border-top:2px dotted black; margin: 10px 10px 0 26px;list-style-type:none;} 
div#column1 li {border-bottom:2px dotted black; margin:0; padding:.5em 0; text-align:center;}
div#column1 li:first-child {border-top:2px dotted black;}

div#column1 a {color:black; font-weight:bold;}
div#column1 a:hover {color: white; background-color:#333333;}

/* a hack for IE Win only \*/	
* html div#column1 ul {border-top:2px dotted black;}
/*end of hack */



h1 {font-size:20px; margin:0px 10px;}

div#column3 p {font-size:9pt; margin: 10px 5px 0px 10px;} 

div#footer {
background-color:#333333; text-align:center; padding-top:6px; color: white; } /* temp footer styles */

/* FOOTER LINKS */
div#footerlistmenu {
	width:100%; 	/* makes the div full width */
	float:left; /*makes the div enclose the list */
	font-size:9pt;	/* SET FONT-SIZE HERE */
	
	font-family:arial;
	}
div#footerlistmenu ul {margin: 0 0 0 0px;/* indents ul from edge of container In IE See how to do it below*/
	}
div#footerlistmenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	list-style-type:none;	/* removes the bullet off each list item */
	
	border-right:1px solid black; /* creates dividing lines between the li elements */
	}
div#footerlistmenu li:first-child {
	border-left:1px solid black; /*the first vertical line on the menu For IE see how to do it below*/
	}
div#footerlistmenu a:hover { 
	background-color:#91cff6; /*sets the background of the menu items */
	color:black;
	}
div#footerlistmenu a {
	padding:0 3px; /*creates space each side of menu item's text */
        font-weight:bold;
        color:white;
	}



/* the horizontal menu ends here */
/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#footerlistmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid black; /* adds the rightmost menu vertical line to the ul */
       
	margin-left:0px; /* IE doubles the given value above - why? */
	}

/* end of hack zone */
/* END OF FOOTER LINKS */


/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
    display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */ /* I changed inline-block to block value as CSS validator was givign error*/

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */
* html a {display:block;}

img {border-style:none;}


span	{
	font-weight:bold;
	}

span.emphasize { font-size:13.5px;}

span.emphasizeRed {color:red; font-size: 14px}


#moneyback a {color:black; font-size:20px;}

#column3 .signup { margin-left:10px; margin-top:15px; padding-top:15px; padding-left:5px; padding-right:3px; padding-bottom:5px;background-image:url(../images/signup.gif);
                  background-repeat: no-repeat;}

#column3 .signup p {margin-top:15px; margin-left:5px; margin-right:5px; color:black;}

#column3 a { color:black;}
#column3 p {color:black;}