@import url(textstyles.css);

#bgcolor {
	background-color:#F0F0D3;
	margin-top:40px;
}

.banner {
	margin-right:auto;
	margin-left:auto;
	width:746px;
}

.nav {
	position:absolute;
	padding-left:208px;
	padding-top:15px;
}
.nav .dropdown {
    display: none;
    position: relative;
    z-index: 5;
    width: 140px;
    margin: 0;
    padding: 10px;
    list-style: none;
    border: solid 1px #c4b281;
    background: #fff;
}
.nav .dropdown.products {
    top: 0;
    left: 155px;
}
.item-products:hover ~ .dropdown.products,
.nav .dropdown.products:hover {
    display: block;
}
.leftarea {
	position:relative;
	top:62px;
	width:200px;
}

.rightarea {
	position:relative;
	left:208px;
	width:510px
}

.footer {
	margin-right:auto;
	margin-left:auto;
	width:746px;
	text-align:center;
	color:#415682;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:20px;
}

.footer a {
	color:#A6A6A6;
	text-decoration:none;
}

.footer a:hover {
	color:#EA8935;
}

.container {
	/* margin auto is used to keep div positioned centre */
	margin-right:auto;
	margin-left:auto;
	width:743px;
	background-color:#FFFFFF;
	border:1px solid #8F8A7D;
	background-image: url(/templates/indx/images/dots.gif);
	background-repeat: no-repeat;
	background-position: 0px 52px;
}


/* Product rollovers done with the CSS below */

/* setting the products... Inside class is used to fix a flicker bug in IE 6, IE 6 takes too long to swap to the hover state and doesn't cache background image, so placing another copy behind avoids this flicker */

.product_item1, .inside1 {background: url(/images/products/product1.gif) no-repeat;}
.product_item2, .inside2 {background: url(/images/products/product2.gif) no-repeat;}
.product_item3, .inside3 {background: url(/images/products/product3.gif) no-repeat;}
.product_item4, .inside4 {background: url(/images/products/product4.gif) no-repeat;}
.product_item5, .inside5 {background: url(/images/products/product5.gif) no-repeat;}
.product_item6, .inside6 {background: url(/images/products/product6.gif) no-repeat;}
.product_item7, .inside7 {background: url(/images/products/product7.gif) no-repeat;}
.product_item8, .inside8 {background: url(/images/products/product8.gif) no-repeat;}

/* position the background 'fallback' images in correct places */

.inside1, .inside2, .inside3, .inside4, .inside5, .inside6, .inside7, .inside8 {
	padding:-5px;
	background-position:6px;
}

/* setting the a state to include border etc */

a.product_item1, a.product_item2, a.product_item3, a.product_item4, a.product_item5, a.product_item6, a.product_item7, a.product_item8
{
	border:1px solid #CCCCCC;
	margin:5px;
	width:159px;
	height:69px;
	display:block;
}

/* Hover state has a thicker border so div width reduced to make sure border is contained within same area */

a:hover.product_item1, a:hover.product_item2, a:hover.product_item3, a:hover.product_item4, a:hover.product_item5, a:hover.product_item6, a:hover.product_item7, a:hover.product_item8
{
	background-position:-2px;
	border:3px solid #DE883D;
	margin:5px;
	width:154px;
	height:65px;
	display:block;
}

.product_item_noroll {
	border:1px solid #CCCCCC;
	margin:5px;
}

/* New Product table styles */

table.product-table td {
	padding-bottom: 5px;
}

table.product-table img {
	border: 1px solid #CCCCCC;
}


.cols-2 .col-1,
.cols-2 .col-2 {
    width: 245px;
}
.cols-2 .col-1 { float: left; }
.cols-2 .col-2 { float: right; }