/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin:0;
    padding:0;
}
h2 {
	font:bold 1.25em/2.0 "Lucida Bright", Georgia, Times, serif;
	color:#115588;
}
h3 {
	font:bold 1.20em/2.0 "Lucida Bright", Georgia, Times, serif;
	color:#990099;
}
/* links */
a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}

/** end global **/

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
  background:#F7F7F7 left bottom;
	font-size:90%;
}

/********
the #container div is the key element to the flexibility of this design.
By setting maximum and minimum widths in 'em', whilst the width is set in '%', 
we effectively create the perfect combination of 'fluid' and 'elastic' layouts.
Javscript is used to add support for min/max width in IE

Any elements inside #container that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #container div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
#container {
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	border:10px solid #fff;
	border-width:0 10px;
    background:#fff;
}

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
#container:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #content, * html form, * html form div {
	height:1%;
}

/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}


/** Title **/
#page-header { 
	background:#FFFFFF url(http://www.fonevalue.com/images/fonevalue-small.gif) no-repeat top left;
	border:0px;
	height: 78px;
	width : 100%;
}

#page-header h1 { 
	color:#c0c0c0;
  font: 8pt verdana, sans-serif;
	text-decoration:none;
	text-align: center;
  width : 80%;
	float: right;
	overflow: hidden;
  }

#page-header h1 span {
	display: inline;
	}
#page-header h2 {
  font: 14pt verdana;
	color: #0066cc; 
	text-align: center;
	width: 80%; 
	overflow : hidden;
	}
#page-header h2 span {
	display: inline;
	}

#page-header-menu {
  width : 80%;
	text-align: bottom center;
	float: right;
}
img.img-right {
	float:right;
}
img.img-center {
	float:center;
}

/** Content Containers **/

#page-text-content { 
	width:74%;
	float:left;
	position:relative;
	background: #ffffff;
  font: 14px/150% Trebuchet MS;
  font-size: 14px;
	word-spacing:.1em;
  color: #555753;
	margin: 0px; 
}
#page-text-content p {
	margin:.5em 2% .5em 0;
}

#sidebar {
	width:20%;
	float:right;
  font: 0.9em/1.2 sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#sidebar h2 {
	font: bold 1.0em;
	color:#663399;
}

/** Menus - offers etc **/
.menuList {
	border:1px solid #C8DCC2;
	margin:1em 0;
}
.menuList h2 {
	margin:.1em 2%;
}
.menuList ul {
	margin:.1em 2%;
	list-style:none;
}
.menuList ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(http://www.fonevalue.com/images/bullet.gif) no-repeat 2px 50%;
}

/** Forms **/
form {
	margin:1em 0;
}
legend {
	font:bold 1.1em/1.5 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#3A4F3B;
}
input.txt {
	width:98%;
	margin:0 auto .5em;
	border:2px solid #A5ACB2;
	background:#fff;
}
input.btn {
	background:#BED2B8;
	padding:.1em;
	width:7em;
	float:right;
	color:#fff;
	font:bold 1em/1.4 "Lucida Bright", Georgia, Times, serif;
	cursor:pointer;
}
input:focus, input.focus {
	border-style:inset;
}
label {
	display:block;
	margin-top:.5em;
}

/* subscribe */
#subscribe {
	background:#F6F4F8;
	border:1px solid #B2A9B9;
}
#subscribe div {
	margin:.3em .5em;
}
#subscribe h2 {
	color:#845697;
}

/** Footer **/

#page-footer {
	clear:both;
  background:#FFFFFF;
	border:0px;
	margin-top:1em;
	font:.9em/1 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
	width:100%;
}

#page-footer h1 { 
 	text-align: left;
	font: 8pt verdana;
}

#smallmenu {
	FONT-SIZE: 11px;
	COLOR: #000000;
	FONT-FAMILY: tahoma, helvetica, sans-serif;
	TEXT-DECORATION: none;
	FONT-WEIGHT: normal;
}

A.smallmenu:link {
	FONT-SIZE: 11px;
	COLOR: #330099;
	FONT-FAMILY: tahoma, helvetica, sans-serif;
	TEXT-DECORATION: none;
	FONT-WEIGHT: normal;
}
A.smallmenu:visited {
	FONT-SIZE: 11px;
	COLOR: #705a99;
	FONT-FAMILY: tahoma, helvetica, sans-serif;
	TEXT-DECORATION: none;
	FONT-WEIGHT: normal;
}
A.smallmenu:hover {
	FONT-SIZE: 11px;
	COLOR: #993333;
	FONT-FAMILY: tahoma, helvetica, sans-serif;
	TEXT-DECORATION: none;
	FONT-WEIGHT: normal;
}
A.smallmenu:active {
	FONT-SIZE: 11px;
	COLOR: #330099;
	FONT-FAMILY: tahoma, helvetica, sans-serif;
	TEXT-DECORATION: none;
	FONT-WEIGHT: normal;
}