/************************************************************************ 
This design built for demonstration purposes 
by Andrew Krespanis, Feb. 2005 - http://leftjustified.net/

Images used under license or by permission of the owner for educational purposes only. 
Images may not be re-used under any circumstance.

Browser support for this file does not include IE/mac or Netscape < 5. 
IE mac support is possible, time restraints ruled it out for this presentation.
Netscape 4.x should not download the file due to the import method used.

version 1.0 
*************************************************************************/


/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin:0;
    padding:0;
}
h2 {
	font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#845697;
}
/* 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 url(img/body.jpg) repeat-x left bottom;
	font-size:90%;
}

/********
the #outer 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 #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
#outer {
    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 */
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}
/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}

/** Title **/
#header {
	background:#EBEBE9 url(img/banner-bg.jpg) repeat-x left bottom;
	border:1px solid #BBD6B2;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#845697;
    background: transparent url(img/banner.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#845697;
	text-decoration:none;
}
/** Navigation **/
ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#fff;
   	padding-bottom:2px;
   	border-top:2px solid #D7E7D3;
   	border-bottom:2px solid #845697;
}
#nav li {
    list-style:none;
    width:25%;
    float:left;
	display:block;
    text-align:center;
	background:#EAF0E6 url(img/mnu-btm.gif) repeat-x left bottom;
}
* html #nav li {
	/** IE/PC hack due to haphazard line breaks when combined widths = 100% **/
	\width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#845697;
	margin:1px;
	background:transparent url(img/mnu-top.gif) repeat-x left top;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}
/** current menu item **/
ul#nav li#active {
	background:#F6F4F8;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000;
	text-decoration:underline;
}


/** Content Containers **/
#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:74%;
	float:left;
	position:relative;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#center {
	width:65%;
	float:right;
}
#left {
	width:33%;
	float:left;
	/* the following 3 declarations are for design purposes only - not required for layout */
	padding:220px 0 10px;
	background:transparent url(img/eye.jpg) no-repeat right top;
	border-bottom:9px solid #845697;
}
#right {
	width:25%;
	float:right;
}
 
 /** Main Col Contents **/
#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}

/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}
a.serviceBtn {
	display:block;
	clear:right;
	padding:.1em 2%;
	margin:.5em 0;
	text-align:center;
	text-decoration:none;
	color:#845697;
	font:bold 1em/2 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	background:#F6F4F8 url(img/btn-purple.gif) repeat-x left bottom;
	border:2px outset #845697;
}
a.serviceBtn:focus, a.serviceBtn:hover, a.serviceBtn:active {
	text-decoration:underline;
	border-style:inset;
}

/** Right Col Contents **/
#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** New Products Special offers **/
.offerList {
	background:#EEFAEA;
	border:1px solid #C8DCC2;
	margin:1em 0;
}
.offerList h2 {
	color:#3A4F3B;
	margin:.1em 2%;
}
.offerList ul {
	margin:.1em 2%;
	list-style:none;
}
.offerList ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/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 url(img/btn.gif) repeat-x;
	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;
}
/* search */
#search fieldset {
	border:1px solid #C8DCC2;
	padding:.3em .5em;
}
/* subscribe */
#subscribe {
	background:#F6F4F8;
	border:1px solid #B2A9B9;
	
}
#subscribe div {
	margin:.3em .5em;
}
#subscribe h2 {
	color:#845697;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font:.9em/1 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
}
#footer p {
	margin:1em 1em 1em 0;
	float:right;
	width:30%;
	text-align:right;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}