/*
NOTES:
header background colour: #153A6C

    * link - this is the default style for the link
    * visited - after a link has been clicked
    * hover - as a mouse is poised over a link (pre-click)
    * active - right as the link is being clicked
    
    Lord Vader's Former Handle, Aniken (if include a:focus)
    
standard link colours:
a:link	
	color:#0000FF

a:visited
	color:#A2B5CD

a:hover
	color:#EEC900;

a:active
	color:#191970;
	
 p
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
*/

p { 
	padding: .3em .5em 1em .5em;
	margin-left:.5em;
 }
    
/*GENERAL*/
*	{
	margin:0; 
	padding:0;
}

html {
	height:100%;
}

body	{
	min-height:101%;
	margin-left:auto; /*centres for mozilla*/
	margin-right:auto; /*centres for mozilla*/
	text-align:center; /*centres for IE*/
	background:#325988 url('../img/body_bg.jpg') repeat-x top left;
	font-family:"Lucida Grande", verdana;
	font-size:11pt;
	color:#5d5754;
}

h1	{
	font-size:30pt;
	color:#EE3B3B;
	padding-bottom:.3em;
	font-weight:normal;
	margin-left:.5em;
	font-family:"Lucida Sans","sans serif";
	font-weight:lighter;
	font-style:italic;
}

h2	{
	font-size:24pt;
	color:#6495ED;
	margin-bottom:.5em;
	margin-left:0.5em;
	font-weight:normal;
	font-family:"Lucida Sans","sans serif";
	font-weight:lighter;
	font-style:italic;
}

h3	{
	font-size:20pt;
	color:#EE3B3B;
	text-align:left;
	margin-bottom:.5em;
	margin-top:1em;
	font-weight:normal;
	margin-left:0.5em;
	font-family:"Lucida Sans","sans serif";
	font-weight:lighter;
	font-style:italic;
}

h4	{
	color:#8B6914;
	font-size:1em;
}

h5	{
	font-size:1.0em;
	color:#104E8B;
}

h6	{
	color:#8B6914;
	font-size:.8em;
}

/*standard page links*/

a:link	{
	color:#71b520;
	text-decoration:none;
}

a:visited	{
	color:#058741;
}

a:focus, a:hover	{
	color:#fff;
	background:#7ab732;
}

a:active	{	
	color:#71b520;
}

/* --------- HEADER ------ */

#header-wrap	{
	background:#005DAA;
	width:100%;
	height:286px;
	background:transparent url('../img/header-bg.jpg') no-repeat bottom right;
	margin-left:auto; /*centres for mozilla*/
	margin-right:auto; /*centres for mozilla*/
	text-align:center; /*centres for IE*/
}

#header-left	{
	float:left;
	background:transparent;
	width:45%;
	text-align:center;
	margin-top:60px;
}

#header-right	{
	float:right;
	height:100%;
	width:54%;
	color:#ffffff;
	background:transparent;
	padding-right:.5em;
	text-align:right;
	font-family:"Joan", verdana;
	font-size:1.7em;
}

a.logo	{
	text-decoration:none;
	text-align:left;
	float:left;
	margin-left:1em;
}

html>body a.logo, a.logo:hover	{
	margin-top:.3em;
}

/*MAIN PAGE */

#container	{
		width:85%;
		margin-left:auto; /*centres for mozilla*/
		margin-right:auto; /*centres for mozilla*/		
		
}

#page-wrap	{
	float:left;
	width:100%;
	padding-bottom:2.5em;
	background:#fff url('../img/bg-bottom.jpg') repeat-x bottom left;
}

#page-wrap-home	{
	float:left;
	width:100%;
	padding-bottom:2.5em;
	background:transparent;
}

#main-col	{	/*main page area*/
	float:left;
	width:53%;
	padding-left:.5em;
	padding-right:.5em;
	text-align:left;
	margin-bottom:1em;
}

#main-col-home	{	/*main page area*/
	float:left;
	width:100%;
	text-align:left;
	margin-bottom:1em;
}

#main-img	{
background:#fff url('../img/hp-main.jpg') no-repeat;
background-position:center;
margin-left:auto; /*centres for mozilla*/
margin-right:auto; /*centres for mozilla*/	
margin-top:2em;
height:280px;
width:100%;
float:left;
}

#bubble	{
margin-top:150px;
margin-left:280px;
height:100px;
}

#hp-col-wrap	{
width:100%;
margin-top:2em;
float:left;
margin-left:auto; /*centres for mozilla*/
margin-right:auto; /*centres for mozilla*/	
margin-bottom:2em;
}

.hp-col	{
width:32%;
float:left;
margin-left:auto; /*centres for mozilla*/
margin-right:auto; /*centres for mozilla*/
}

.hp-col:hover	{
background:#e5e8ea;
}

#hp-col-row	{
width:100%;
margin-top:1.5em;
}

#page-title	{
width:100%;
background:url('../img/page-title-bg.jpg') repeat-x bottom left;
text-align:left;
padding-bottom:.5em;
float:left;
margin-bottom:1em;
}

#page-title h1 	{
color:#fff;
font-family:"Lucida Sans","sans serif";
font-weight:lighter;
font-style:italic;
font-size:32pt;
margin-right:3em;
}

#side-col-right	{	/*right side of page*/
/*whether use float left or right mozilla places right-col alongside main-col*/
	float:right;
	width:21%;
	background:#fff;
	height:101%;
}

#side-col-right p	{
	text-align:left;
	margin-left:0;
	}
	
.right-item	{
	width:180px;
	height:200px;
	margin-left:auto; /*centres for mozilla*/
	margin-right:auto; /*centres for mozilla*/		
}

.right-rebate:hover	{
	width:180px;
	height:200px;
}

#side-col-left	{	/*left side of page*/
/*whether use float left or right mozilla places right-col alongside main-col*/
	float:left;
	width:22%;
	background:#fff;
	height:101%;
}

#footer	{	/*page footer*/
	margin-top:1.5em;
	width:85%;
	margin-left:auto; /*centres for mozilla*/
	margin-right:auto; /*centres for mozilla*/
	color:#fff;
	background:transparent;
}

#footer a	{	/*page footer*/
	color:#fff;
}

html>body #footer	{	/*page footer*/ /*position relative, float left and right causes bizarre page behaviour - page container loses background*/
	width:85%;
	text-align:center;
	clear:both; /*forces div to go at bottom*/
}

#footnote	{
	color:#fff;
	font-size:10pt;
	}
	
#footnote a:link	{
	color:#f6b019;
	font-size:10pt;
	background:none;
}

#footnote a:visited	{
	color:#ef9f14;
	font-size:10pt;
	text-decoration:none;
}

#footnote a:focus, #footnote a:hover	{
	color:#EEC900;
	font-size:10pt;
	text-decoration:underline;
	background:none;
}

#footnote a:active	{	
	color:#191970;
	font-size:10pt;
}

#footer-left	{
	float:left;
	width:49%;
	background:#fff url('../img/footer-bg.gif') repeat-x bottom right;
	}
	
#footer-right	{
	float:right;
	width:49%;
	background:#fff url('../img/footer-bg.gif') repeat-x bottom right;
	}

/*------------------ SITEMAP ----------------------*/

a:link.link-title	{
	font-size:1.0em;
	color:#104E8B;
	font-family:arial,verdana,sans-serif;
	text-decoration:none;
}

a:visited.link-title	{
	color:#A2B5CD;
	font-size:1.0em;
	text-decoration:underline;
}

a:focus.link-title, a:hover.link-title	{
	color:#104E8B;
	font-size:1.0em;
	text-decoration:underline;
}

a:active.link-title	{	
	color:#191970;
	font-size:1.0em;
	text-decoration:underline;
}

/*------------- FORM --------*/
#contact	{
	border: solid 1px #b8b8b8;
}

label {
font-weight:bold;
cursor:pointer; }

input	{
	background:url("../img/textbox-bg.gif") repeat-x bottom left;
	border: 1px solid #b8b8b8;
}

/*remove border around radio button*/
input.radio	{
	border: none !important;
}

input[type="radio"], input[type="checkbox"] {
		border:none !important;
}

input:hover	{
	border: 1px solid #000000;
}

textarea	{
	background: #ffffff;
	position: relative;
	padding: .3em;
	border: solid 1px #b8b8b8;
}

textarea:hover	{
	border: 1px solid #000000;
}

.formbutton{
	cursor:pointer;
	background:url("../img/header_bground.gif") repeat-x left top;
	color:#fff;
	padding: 1px 2px;
	margin-top:1em;
}

.formbutton:hover{
	cursor:pointer;
	background:url("../img/header_bground.gif") repeat-x left bottom;
	color:#fff;
	padding: 1px 2px;
}

.searchbutton{
	cursor:pointer;
	background:url("../img/header_bground.gif") repeat-x left top;
	color:#fff;
	padding: 1px 2px;
}

.searchbutton:hover{
	cursor:pointer;
	background:url("../img/header_bground.gif") repeat-x left bottom;
	color:#fff;
	padding: 1px 2px;
}

form {  
	text-align:left;
	font-size:.9em;
	margin-top:1em;
	margin-left:1em;
}

legend	{
	font-size:1.4em;
	color:#8B2323;
	}

fieldset	{
	background:#EBECE4 /*url("../img/leftcol_bg2.gif") repeat-y left top*/;
	width:95%;
	border:solid 1px #9AC0CD;
	margin-bottom:1em;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-left:.5em;
	}

fieldset:hover	{
	border:solid 1px #8B0000;
	background-color:#ECF1EF;
	}

img	{
	border:none;
}

#header	{
	background:#006400 url('../img/header.jpg');
	width:100%;
	height:100px;
	
}
/*-------------------------FOOTER NAVIGATION--------------------------*/
#nav-bottom	{
	text-align:right;
}

#nav-bottom	a:link	{
	text-decoration:none;
	background:none;
	color:#fff
}

#nav-bottom	a:visited	{
	text-decoration:none;
	background:none;
	color:#fff
}

#nav-bottom	a:focus,#nav-bottom	a:hover	{
	text-decoration:underline;
	background:none;
	color:#fff
}

#nav-bottom	a:active	{
	text-decoration:none;
	background:none;
	color:#fff
}

/* RANDOM/SUGGESTED LINKS */
.suggested-link	{
	width:100%;
	color:#000;
	height:4em;
	margin-top:1em;
	margin-bottom:1em;
	border-top:dashed 1px #C1CDC1;
	clear:both;/*added 2007-04-09 to enforce divs go under eachother when more than one 'suggested link' div*/
}

html>body .suggested-link	{
	width:100%;
	color:#000;
	height:6em;
	margin-top:1em;
	margin-bottom:3em;
	border-top:dashed 1px #C1CDC1;
}

.suggested-link li	{
	list-style:none;
}

.suggested-link img	{
	border:1px solid #ccc;
}

.suggested-link li.r1 {
	float:left;
	padding:.2em;
}

.suggested-link li.r2 {
	float:right;
	padding:.2em;
}

.suggested-link li.a2 {
	float:left;
	padding:.2em;
}


/*------------------ NAVIGATION ----------------------*/

#nav	{	/*top nav menu*/
	height:60px;	
	width:85%;
	background:transparent; /*background of all nav div*/

}

html>body #nav	{	/*top nav menu*/
	background:transparent; /*background of all nav div*/
}

#navlist img {
	display:inline;
	margin-top:1em;
	background:#eee;
}

#navlist {
	width:99%;
	background:transparent;
	padding:0;
	height:60px;
	line-height:normal;
	display:inline;
	float:left;
}

/*mozilla hack*/
html>body #navlist	{
	list-style:none; /*removes bullets from mozilla display*/
	height:100%;
}

#navlist ul {
	float:right;
	margin:0;
	list-style:none;
	height:100%; /*req'd to get large menu in mozilla*/
	display:inline;
}
#navlist li {
	display:inline;
	margin:0;
	padding:0;
	height:100%;
}

#navlist li:hover{ /*required for hover background for IE7*/
	display:inline;
	margin:0;
	padding:0;
	background: url("../img/hover.png") no-repeat bottom center;
}
/*
*	For the next two rules:	
*	1. A single image is used for the two doors, rather than one.
*	2. Ascetically, the 'font-weight:bold' was removed to closely mimic the www.digital-web.com tabs.
*	3. The padding was modified for personal preference.
*/
#navlist a {
	float:left;
	background:transparent/*url("../img/tab-o.png") no-repeat left top*/;
	padding:6px 0 5px 6px;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	height:100%;
	
	padding-left:1em;
	padding-right:1em;
}
#navlist a span {
	float:left;
	display:inline;
	height:100%;
	background:transparent /*url("../img/sliding-doors-mountaintops-1.png") no-repeat right top*/;
	padding:0 10px 3px 6px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navlist a span {float:none;}
/* End IE5-Mac hack */

/*
*	1. At this point many things are simplified. The hover and background colors are set,
*	and no positions are used because we aren't swapping images
*	2. 'padding-bottom:4px;' on the current span pushes that tab 1px higher than the others, 
*	exposing 1px of the background color of #header and giving the effect of an underline.
*/

#navlist #active a span {
	padding-bottom:4px;
	background:transparent;
}

#navlist a:hover 	{/*background of nav button*/
	background: url("../img/hover.png") repeat-x top left;
	cursor:pointer;
	}
	
#navlist a:hover span { /*basically the nav text*/
	background:transparent;/*set this was so hover element visible*/
	background: url("../img/hover.png") repeat-x top left;
	color:#000;
	font-weight:bold;
	cursor:pointer;
	}

#navlist #active	{ /*select tab - current active page*/
	float:left;
	display:inline;
	background: url("../img/nav-on.jpg") repeat-x top right;
	padding:4px 12px 11px 15px;
	font-weight:bold;
}

#navlist #active a span, #navlist #active a {
	background: url("../img/nav-on.jpg") repeat-x top left;
	font-weight:bold;
}

/*------------------LEFT SIDE NAVIGATION ----------------------*/

#navlistSide img {
	display:block;
	margin-top:1em;
	background:#eee;
}

#navlistSide {
	float:left;
	background:#fff url("../img/nav") repeat-x left top;
	padding:0;
	padding-left:5px;
	line-height:normal;
	width:87%;
}

/*mozilla hack*/
html>body #navlistSide	{
	list-style:none; /*removes bullets from mozilla display*/
	margin-bottom:1em;
}

#navlistSide ul {
	margin:0;
	list-style:none;
	display:block;
	width:99%;
}
#navlistSide li {
	display:inline;/* for IE5 and IE6 */
	margin:0;
	padding:0;
	width:99%;
	
	text-align:left;/*align links to left - firefox*/
}

#navlistSide li:hover{ /*required for hover background for IE7*/
	margin:0;
	padding:0;
	width:100%;
	background:#ffffff;
	display:inline;
	width:99%;
}
/*
*	For the next two rules:	
*	1. A single image is used for the two doors, rather than one.
*	2. Ascetically, the 'font-weight:bold' was removed to closely mimic the www.digital-web.com tabs.
*	3. The padding was modified for personal preference.
*/
#navlistSide a {
	float:left;
	background:transparent;
	text-decoration:none;
	color:#71b520;
	display:inline;
	width:99%;
	text-align:left;/*IE needs this statement to align non-active link to left*/
	padding-top:.5em;
	padding-bottom:.5em;
	padding-left:.5em;
	font-size:11pt;
}
#navlistSide a span {
	float:left;
	display:inline;
	background:transparent /*url("../img/sliding-doors-mountaintops-1.png") no-repeat right top*/;
	width:99%;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navlistSide a span {float:none;}
/* End IE5-Mac hack */

/*
*	1. At this point many things are simplified. The hover and background colors are set,
*	and no positions are used because we aren't swapping images
*	2. 'padding-bottom:4px;' on the current span pushes that tab 1px higher than the others, 
*	exposing 1px of the background color of #header and giving the effect of an underline.
*/

#navlistSide #active a span {
	background:transparent;
	display:block;
	width:99%;
}

#navlistSide a:hover 	{/*background of nav button*/
	background:#ffffff url("../img/side_menu_hover.jpg") no-repeat right bottom;
	display:block;
	width:99%;
	cursor:pointer;
	}
	
#navlistSide a:hover span { /*basically the nav text*/
	background:transparent;/*set this was so hover element visible*/
	color:#000;
	display:block;
	width:99%;
	cursor:pointer;
	}

#navlistSide #active	{ /*select tab - current active page*/
	float:left;
	display:block;
	background:#ffffff url("../img/side_menu_hover.jpg") no-repeat right bottom;
	width:99%;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-left:.5em;
}

#navlistSide #active a span, #navlistSide #active a {
	background:#fff;
	display:block;
	width:99%;
}

ul#submenu  {
	margin:0;
	list-style:none;
	display:block;
	width:99%;
	background:none;
	
}
ul#submenu li {
	display:inline;/* for IE5 and IE6 */
	margin:0;
	padding:0;
	width:99%;
	background:#eee;
	text-align:left;/*align links to left - firefox*/
	font-size:8pt;
	
}

ul#submenu li  a{
	color:#000;
	background:none;
	margin-left:19px;
	font-size:10pt;
}

ul#submenu li  a:hover{
	color:#000;
	background:none;
	border-left:solid 4px #008ed2;
	margin-left:15px;
}

/*------------------RIGHT SIDE NAVIGATION ----------------------*/

#side-col-right img {
	display:block;
	margin-top:1em;
	background:transparent;
}

#side-col-right	{
	list-style:none; /*removes bullets from mozilla display*/
	margin-bottom:1em;
	background:transparent;
}

#side-col-right ul {
	margin:0;
	list-style:none;
	display:block;
	width:99%;
	}
#side-col-right li {
	display:inline;/* for IE5 and IE6 */
	margin:0;
	padding:0;
	width:99%;
	text-align:left;/*align links to left - firefox*/
	margin-bottom:1em;
}

#side-col-right li:hover{ /*required for hover background for IE7*/
	width:99%;
	background:transparent;
	display:inline;
	width:99%;
}

/*
*	For the next two rules:	
*	1. A single image is used for the two doors, rather than one.
*	2. Ascetically, the 'font-weight:bold' was removed to closely mimic the www.digital-web.com tabs.
*	3. The padding was modified for personal preference.
*/

#side-col-right a {
	float:left;
	background:transparent;
	text-decoration:none;
	color:#0000FF;
	display:inline;
	width:99%;
	text-align:left;/*IE needs this statement to align non-active link to left*/
	padding-top:.5em;
	padding-bottom:.5em;
	padding-left:.5em;
}
#side-col-right a span {
	float:left;
	display:inline;
	background:transparent /*url("../img/sliding-doors-mountaintops-1.png") no-repeat right top*/;
	width:99%;
	
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#side-col-right a span {float:none;}
/* End IE5-Mac hack */

/*
*	1. At this point many things are simplified. The hover and background colors are set,
*	and no positions are used because we aren't swapping images
*	2. 'padding-bottom:4px;' on the current span pushes that tab 1px higher than the others, 
*	exposing 1px of the background color of #header and giving the effect of an underline.
*/

#side-col-right #active a span {
	background:transparent;
	display:block;
	width:99%;
	
}

#side-col-right a:hover 	{/*background of nav button*/
	background:transparent;
	display:block;
	width:99%;
	text-decoration:underline;
	}
	
#side-col-right a:hover span { /*basically the nav text*/
	background:transparent;/*set this was so hover element visible*/
	color:#0000FF;
	display:block;
	width:99%;
	}

#side-col-right #active	{ /*select tab - current active page*/
	float:left;
	display:block;
	background:transparent url("../img/bullet_triangle_red.png") no-repeat left;
	width:99%;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-left:1.4em;
	font-weight:bold;
}

#side-col-right #active a span, #side-col-right #active a {
	background:#fff;
	display:block;
	width:99%;
}
  
/* ----------- UNORDERED LISTS ------------------------- */
ul	{
	margin:0;
	padding:0;
	list-style:disc;
	text-align:left;
	margin-left:.5em;
	margin-bottom:1em;
	}
	
li	{
	margin-left:1.5em;
	list-style:disc;	
}

li ul 	{
	margin-left:.5em;
}

li ul li	{
	padding-left:.7em;
	background: url(../img/carat.gif) no-repeat 0 65%;
}


/* PRODUCTS PAGE*/

div.prod-grp	{
width:100%;
float:left;
}

div.item	{
float:left;
width:150px;
height:200px;
padding:.5em;
}

/*remove a link background when hover over images in moxilla, safari*/
div.item	a 	{
background:none;
}