/* 
	- Client: Abergele Interiors
	- Author: Dave Robinson of sypher design (www.sypher-design.co.uk) 
	- Date: 27th June 2009
	- Version: 2.0
	- Comments: Re-design of previous web design firm work.
	
*/

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #B9974F;
	font-family: arial, cursive, serif;
	font-size: 12px;
	background-image: url("images/background.jpg");
	background-repeat: repeat-x;
	background-position: top;
	color: #333;
}

img {
	display: block;
	padding: 0;
	margin: 0;
}

h1,h2,h3,h4,h5,h6 {
	padding: 0;
	margin: 0:
}

p {
	margin: 0;
	padding: 0;
}

a {
	color: #96793D;
	text-decoration: none;
}


a:hover {
	color: #96793D;
	text-decoration: underline;
}

th {
	background-color: #EC2230;
	color: #fff;
	padding: 3px;
}

table caption {
	background-color: #EC2230;
	color: #fff;
	padding: 3px;
	font-weight: bold;
}

td {
	border-bottom: 1px solid #666;
}

tr:hover {
	background-color: #F2F2F2;
}

:focus {
	outline: 0;
}

label, button, input[type="submit"] {
	cursor:pointer;
}

dl { 
	padding: 5px;
}

dt {
	font-weight: bold;
	font-size: 13px;
	background-color: #fff;
	border-right: 1px solid #ccc;
	padding: 4px;
	display: inline;
	color: #333;
}

dd {
	font-weight: bold;
	background-color: #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 4px 4px 4px 10px;;
	margin-bottom: 10px;
	width: 50%;
	color: #666;
}

dd:hover {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}

#container {
	margin: auto;
	padding: 0;
	width: 750px;
}

#header {
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	background-position: top left;
	height: 100px;
}

#topNavigation {
	background-image: url("images/background-navigation.gif");
	background-repeat: no-repeat;
	background-position: right;
	height: 29px;
	text-align: right;
	margin: -8px 0px 18px 0px;
	padding: 5px;
}

#topNavigation ul {
	margin: 0;
	padding: 5px;
	white-space: nowrap;
}

#topNavigation ul li #subNav {
	display: none;
	position: absolute;
	margin-left: 85px;
	background-color: #B9974F;
	border: 1px dotted #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-transform: uppercase;
  	filter: alpha(opacity=50);
  	-moz-opacity: 0.50;
  	opacity: 0.50;
}
#topNavigation ul li #subNav:hover {
	background-color: #F3F3F3;
  	filter: alpha(opacity=100);
  	-moz-opacity: 1.0;
  	opacity: 1.00;
  	border: 1px solid #B9974F;
}

#topNavigation ul li #subNav a {
	color: #fff;
}
#topNavigation ul li #subNav:hover a {
	color: #655127;
}

#topNavigation ul li #subNav li:hover {
	background-image: none;
	background-color: white;
	padding: 2px;
}

#topNavigation ul li:hover #subNav {
	display: block;
}

#topNavigation li {
	list-style-type: none;
	display: inline;
	font-size: 14px;
	font-weight: bold;
	margin-left: 7px;
	padding: 2px 2px 9px 2px;
}

#topNavigation li:hover {
	background-image: url("images/navigation-hover.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
}

#topNavigation li a {
	color: #655127;
	text-decoration: none;
}

#topNavigation li.active {
	background-image: url("images/navigation-hover.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
}

#topNavigation li.active a {
	color: #83540E;
	text-decoration: none;
}

#topNavigation li a:hover {
	color: #655127;
	text-decoration: none;
}

#flash img {
	margin: auto;
}

#contentHeader {
	background-color: #F3F3F3;
	background-image: url("images/background-header.jpg");
	background-position: right;
	background-repeat: no-repeat;
	height: 28px;
	margin-top: 10px;
}

#contentHeader h1 {
	font-size: 20px;
	text-transform: uppercase;
	color: #B9974F;
	padding: 9px 4px 0px 10px;
}

.horizontalRule {
	width: 95%;
	background-color: #DCCBA7;
	height: 1px;
	margin: 7px auto 7px auto;
	clear: both;
}

#contentHeader + .horizontalRule {
	width: 670px;
	margin: 7px 0px 7px 0px;
}

#content {
	line-height: 150%;
	overflow: auto;
}

.content {
	padding: 9px;
	background: #F4F4F4 url("images/background-content.jpg") bottom right no-repeat;
	line-height: 150%;
	overflow: auto;
}

.content p {
	margin-bottom: 10px;
	padding: 5px;
}

.content h2 {
	color: #96793D;
	font-size: 15px;
}

.content ul {
	margin: 5px 5px 5px 20px;
	padding: 3px;
}

.content .contentLeft {
	background-color: #fff;
	width: 510px;
	float: left;
	padding: 8px;
}

#slideshow {
    position:relative;
    height:167px;
    text-align: center;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:15px;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


#footer {
	background: #F3F3F3 url("images/background-footer.jpg") bottom repeat-x;
	border: 1px solid #5B5B5B;
	border-right-width: 0px;
	border-left-width: 0px;
	margin-top: 20px;
	overflow: auto;
	padding: 5px;
}

#footerContainer {
	margin: auto;
	width: 750px;
}

#footerRequest {
	float: right;
	border-left: 1px solid #D0ACAC;
	padding: 4px;
	text-align: center;
	width: 180px;
}

#footerRequest:hover {
	background-color: #F3F3F3;
}

#footerRequest img {
	margin: auto;
}

#footerContact {
	float: left;
	width: 550px;
	padding: 5px;
}

#footerContact #phoneNumber {
	font-size: 35px;
	font-weight: bold;
	margin-left: 25px;
	color: #747474;
	padding-left: 50px;
	background-image: url("images/icon-phone.jpg");
	background-repeat: no-repeat;
	background-position: left;
}

#footerContact #openHours {
	font-size: 17px;
	font-weight: bold;
	margin-left: 25px;
}

.colorText {
	color: #997B3E;
}

#footerContact #footerNav {
	font-size: 11px;
	color: #747474;
	background-color: #EAEAEA;
	margin: 50px auto 5px auto;
	padding: 8px;
	font-weight: bold;
}

#footerContact #footerNav:hover {
	background-color: #F5F5F5;
}

#footerContact #footerNav a:first-child{
	margin-left: 15px;
}

#footerContact #copyright {
	font-size: 9px;
	text-align: right;
}

#containerstep12 {
	width: 65%;
	float: left;
}

.subHeader {
	margin: 5px;
	background-color: white;
	padding: 10px;
	text-align: right;
	text-transform: uppercase;
}

.subHeader h2 {
	font-weight: bold;
	color: #B9974F;
	font-size: 23px;
}

#productHeadings h5 {
	font-weight: bold;
	color: #B9974F;
	font-size: 23px;
}

#productHeadings a h5 {
	text-decoration: none;
}

#productHeadings a:hover h5 {
	text-decoration: none;
}

#productHeadings div {
	margin: 5px;
	background-color: white;
	padding: 10px;
	text-align: right;
	text-transform: uppercase;
	height: 30px;
	border: 1px solid #fff;
	
}

#productHeadings div:hover {
	border: 1px solid #B9974F;
	cursor: pointer;
}

.bathroomsHeader {
	background: url("images/background-product-bathrooms.jpg") left no-repeat;
}

.assistedHeader {
	background: url("images/background-product-assisted.jpg") left no-repeat;
}

.kitchensHeader {
	background: url("images/background-product-kitchens.jpg") left no-repeat;
}

.tilesHeader {
	background: url("images/background-product-tiles.jpg") left no-repeat;
}

.mirrorsHeader {
	background: url("images/background-product-mirrors.jpg") left no-repeat;
}

.rampsHeader {
	background: url("images/background-product-ramps.jpg") left no-repeat;
}

#step1 {
	cursor:pointer;
	float: left;
	width: 217px;
	height: 217px;
	background: #fff url("images/step-1.jpg") no-repeat;
	border: 1px solid #5E512E;
	margin: 5px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	vertical-align: text-bottom;
	text-indent: -5000px;
}

#step1:hover {
	border: 1px solid #fff;
}

#step2 {
	cursor:pointer;
	float: right;
	width: 217px;
	height: 217px;
	background: #fff url("images/step-2.jpg") no-repeat;
	border: 1px solid #5E512E;
	margin: 5px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	text-indent: -5000px;
}

#step2:hover {
	border: 1px solid #fff;
}

#containerstep3 {
	width: 33%;
	float: right;
}

#step3 {
	cursor:pointer;
	width: 217px;
	height: 217px;
	background: #fff url("images/step-3.jpg") no-repeat;
	border: 1px solid #5E512E;
	margin: 5px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	text-indent: -5000px;
}

#step3:hover {
	border: 1px solid #fff;
}

.tiles {
	background-color: #665738;
	padding: 5px;
	text-align: center;
}

.tiles span img {
	display: inline;
	border: 1px dotted #000;
	background-color: none;
	margin: 2px;
	padding: 4px;
}

.tiles span img:hover {
	background-color: #7E6B45;
	border: 1px dotted #B9974F;
}

#preview {
	position:absolute;
	border:2px solid #463C26;
	background: url("images/background-tile.jpg") center no-repeat;
	padding:5px;
	display:none;
	color: #7E6B45;
	text-align: center;
	font-weight: bold;
	}
	
#preview img {
	border: 1px solid #000;
}

.productImages {
	background-color: #665738;
	padding: 3px;
	margin: 3px 3px 3px 9px;
	float: right;
	text-align: center;
}

.productImages img {
	padding: 2px;
	display: inline;
	border: 0;
}

.success {
	padding: 5px;
	color; white;
	background-color: #26AE86;
	border: 1px solid #69DEBB;
	text-align: center;
}

.error {
	padding: 5px;
	color; white;
	background-color: #B32222;
	border: 1px solid #691414;
}

.contactForm {
	display: inline;
	float: right;
	width: 330px;
	background-color: #987A3D;
	font-weight: bold;
	color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 3px;
}

.contactForm form {
	margin: 2px;
	padding: 1px;
}

.contactForm form input,textarea {
	padding: 2px;
	border: 1px solid #77602F;
	color: #77602F;
	font-weight: bold;
}

.contactForm form fieldset {
	border: 0;
}

.contactForm form fieldset:hover {
	background-color: #8D7238;
}

.contactForm form legend {
	background-color: #77602F;
	color: #fff;
	padding: 3px;
	text-align: center;
}

.contactForm p:first-child {
	text-align: center;
}