@charset "utf-8";
/* CSS Document */
html{
	height: 100%;
}
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #848484;
	margin: 0px;
	background-image: url(images/demo.gif);
	width: 100%;
	height: 100%;
	background-position: 0px -28px;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #3dadd4;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #3dadd4;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #3dadd4;
}

p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #848484;
}

a {
	color: #555555;
	text-decoration: none;
}

input input{
	background: #ffffff url(images/input-bg.jpg) no-repeat;
	width: 291px;
	height: 23px;
	border: 0px;
	padding:6px 4px 0px 4px;
	font-size: 12px;
}

a:hover {
	text-decoration: underline;
}

#designer {
	width: 898px;
	float: left;
	background: #eeeeee;
	border: 1px solid #d5d5d5;
	
}

#centerbox {
	width: 900px;
	height: 716px;
	margin: 0px auto 0px auto;
	border-left: 6px solid #D1D0D0;
	border-right: 6px solid #D1D0D0;
	border-top: 6px solid #D1D0D0;
	border-bottom: 6px solid #D1D0D0;
}


#topbox {
	width: 898px;
	float: left;
	background: url(images/topbox-bg.jpg);
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 7px;
}

#topbox img {

margin-top: 10px;

}

#topbox2 {
	width: auto;
	float: right;
	border-left: 1px solid #d2d2d2;
}

#currentprice {
	width: 277px;
	height: 43px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 33px;
	color: #3d4547;
	font-weight: bold;
	letter-spacing: -1px;
	padding: 0px 11px 0px 8px;
	border-right: 1px solid #d2d2d2;
	border-left: 1px solid #ffffff;
}

#currentprice img {
	vertical-align: middle;
}

#designercart {
	width: 234px;
	height: 37px;
	float: right;
	font-size: 10px;
	line-height: 13px;
	padding: 6px 0px 0px 10px;
	border-left: 1px solid #ffffff;
}

#designercart a {
	color: #3d4547;
}

#designercart a:hover {
	text-decoration: none;
}

#designercart img {
	margin-right: 6px;
}

#designercart .span {
	font-size: 12px;
	font-weight: bold;
}

#glazedsquares {
	width: 877px;
	float: left;
	background: #ffffff;
	border: 1px solid #cacaca;
	margin: 0px 10px 9px 9px;
}

#glazedsquarestop {
	width: 851px;
	height: 29px;
	float: left;
	font-size: 12px;
	color: #787878;
	letter-spacing: -1px;
	background: url(images/glazedsquarestop-bg.jpg) top repeat-x;
	padding: 16px 14px 0px 12px;
	border-bottom: 1px solid #c3c3c3;
}

#glazedsquarestop .img1 {
	margin-top: -3px;
}

#glazedsquaresbottom {
	width: 845px;
	height: 29px;
	float: left;
	font-size: 12px;
	padding: 9px 0px 0px 32px;
}

#glazedsquaresbottom span {
	width: auto;
	float: left;
	margin-right: 5px;
}

#glazedsquaresbottom input {
	width: auto;
	float: left;
	padding: 0px;
	margin: 1px 20px 0px 0px;
}
#glazedsquaresbottom table input {
	width: auto;
	float: left;
	padding: 0px;
	margin: 0px !important;
}
#step1 {
	width: 854px;
	height: 467px;
	float: left;
	background: #ffffff;
	padding: 10px 14px 0px 10px;
	border: 1px solid #cacaca;
	margin: 0px 9px 8px 9px;
}

#thankyou {
	width: 854px;
	height: 562px;
	float: left;
	background: #ffffff;
	padding: 10px 14px 0px 10px;
	border: 1px solid #cacaca;
	margin: 0px 9px 8px 9px;
}

#thankyou h1{

text-align: center;
font-size: 43px;
}

#thankyou p {

text-align: center;
font-size: 15px;
}

#thankyou span {

	margin-left: 307px;
	
}

#thankyou input {

	background: #ffffff url(images/returntosite.png);
	border: 0px;
	width: 230px;
	height: 80px;

}


#step1 a {
	width: 127px;
	height: 84px;
	float: left;
	margin: 2px 20px 6px 20px;
}
#step1 a:hover img{
	border: 3px solid #c1c1c1;
	margin: 0px;
}
#step1 a img {
	border: 1px solid #c1c1c1;
	padding: 3px;
	margin: 2px;
}

.imginactive {
}

.imgactive {
	border: 3px solid #3697d9 !important;
	margin: 0px !important;
}

#step1bottom {
	width: 889px;
	height: 69px;
	float: left;
	background: #ffffff url(images/step1bottom-bg.png);
	padding: 12px 4px 0px 7px;
}

#step1bottoml {
	width: 250px;
	float: left;
	
	
}

#contentHeader h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #3dadd4;
}


#sagebottom {
	width: 889px;
	height: 69px;
	float: left;
	margin-top: 276px;
	margin-left: -21px;
	background: #ffffff url(images/step1bottom-bg.png);
	padding: 12px 4px 0px 7px;
}

#sagebottoml {
	width: 250px;
	float: left;
	
	
}

#sage2bottom {
	width: 889px;
	height: 69px;
	float: left;
	margin-top: 276px;
	margin-left: -21px;
	background: #ffffff url(images/step1bottom-bg.png);
	padding: 12px 4px 0px 7px;
}

#sage2bottoml {
	width: 250px;
	float: left;
	
	
}

#ppbottom {
	width: 889px;
	height: 69px;
	float: left;
	margin-top: 276px;
	margin-left: -21px;
	background: #ffffff url(images/step1bottom-bg.png);
	padding: 12px 4px 0px 7px;
}

#ppbottoml {
	width: 250px;
	float: left;
	
	
}

#pp2bottom {
	width: 889px;
	height: 69px;
	float: left;
	margin-top: 342px;
	margin-left: -21px;
	background: #ffffff url(images/step1bottom-bg.png);
	padding: 12px 4px 0px 7px;
}

#pp2bottoml {
	width: 250px;
	float: left;
	
	
}

#needhelp {
	width: 250px;
	float: left;
	margin-bottom: 19px;
}

#companydetails {
	width: 250px;
	float: left;
	color: #ffffff;
}

#companydetails img {
	width: auto;
	float: left;
	margin-right: 5px;
}

#companydetails span {
	width: auto;
	float: left;
	margin-top: 8px;
}

#step1bottomr {
	width: auto;
	float: right;
	margin-top: 6px;
}

#step1bottomr input {
	width: 151px;
	height: 37px;
	background: url(images/start-designing.png);
	border: 0px;
	cursor: pointer;
}

.helpboxes {
	display: none;
}

.helpcontent {
	width: 700px;
}

#step2 {
	width: 880px;
	float: left;
	margin: 0px 9px 6px 9px;
}

#step2left {
	width: 215px;
	float: left;
}

#step2start {
	width: 215px;
	float: left;
	margin-bottom: 1px;
}

.step2leftbox {
	width: 213px;
	float: left;
	background: #fafafa;
	border: 1px solid #cacaca;
	margin-bottom: 5px;
}

.step2leftbox h2 {
	width: 197px;
	height: 24px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #ececec url(images/step2leftboxh2-bgglass.png);
	padding: 10px 6px 0px 10px;
	border-bottom: 1px solid #cacaca;
	margin: 0px 0px 1px 0px;
}

.step2leftbox h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#windowsize {
	width: 203px;
	height: 130px;
	float: left;
	background: url(images/step2leftboxes-bg.jpg) top repeat-x;
	padding: 6px 0px 0px 10px;
}

#windowsize td {
	padding: 0px 1px 9px 1px;
}

#windowsize input {
	width: 43px;
	height: 12px;
	font-size: 11px;
	color: #000000;
	text-align: right;
	padding: 1px;
	border: 1px solid #c9c9c9;
	vertical-align: middle;
}

#windowsize span {
	font-size: 9px;
}

.colours {
	width: 200px;
	height: 50px;
	float: left;
	background: url(images/step2leftboxes-bg.jpg) top repeat-x;
	padding: 7px 6px 0px 7px;
}

#pattern {
	width: 200px;
	height: 54px;
	float: left;
	background: url(images/step2leftboxes-bg.jpg) top repeat-x;
	padding: 8px 6px 0px 7px;
}

#step2right {
	width: 658px;
	float: right;
}

#step2mainimg {
	width: 626px;
	float: left;
	background: #ffffff;
	padding: 16px 16px 3px 13px;
	border: 1px solid #c9c9c9;
	margin: 0px 0px 4px 1px;
}

#step2options {
	width: 656px;
	height: 140px;
	float: left;
	background: #fafafa url(images/step2extras-bg.jpg) top repeat-x;
	border: 1px solid #cacaca;
	margin-bottom: 5px;
}

#step2addons {
	width: 147px;
	float: left;
}

#step2addons h2 {
	width: 131px;
	height: 24px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #ececec url(images/step2leftboxh2-bgsillsaddon.png);
	padding: 10px 7px 0px 8px;
	border-right: 1px solid #cacaca;
	border-bottom: 1px solid #cacaca;
	margin: 0px 0px 1px 0px;
}

#step2addons h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#step2addons div {
	width: 132px;
	height: 90px;
	float: left;
	padding: 3px 3px 0px 11px;
	border-right: 1px dotted #b5b5b5;
	margin-top: 7px;
}

#step2sills {
	width: 80px;
	float: left;
}

#step2sills h2 {
	width: 61px;
	height: 24px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #ececec url(images/step2leftboxh2-bgsills.png);
	padding: 10px 7px 0px 10px;
	border-right: 1px solid #cacaca;
	border-bottom: 1px solid #cacaca;
	border-left: 1px solid #fcfcfc;
	margin: 0px 0px 1px 0px;
}

#step2sills h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#step2sills div {
	width: 68px;
	height: 90px;
	float: left;
	padding: 3px 5px 0px 5px;
	border-right: 1px dotted #b5b5b5;
	border-left: 1px dotted #cecece;
	margin-top: 7px;
}

#step2extras {
	width: 250px;
	float: left;
}

#step2extras h2 {
	width: 230px;
	height: 24px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #ececec url(images/step2leftboxh2-bgex.png);
	padding: 10px 7px 0px 11px;
	border-right: 1px solid #cacaca;
	border-bottom: 1px solid #cacaca;
	border-left: 1px solid #fcfcfc;
	margin: 0px 0px 1px 0px;
}

#step2extras h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#step2extras div {
	width: 243px;
	height: 93px;
	float: left;
	padding: 0px 0px 0px 5px;
	border-right: 1px dotted #b5b5b5;
	border-left: 1px dotted #cecece;
	margin-top: 7px;
}

#step2extras div table {
	font-size: 11px;
}

#step2notes {
	width: 169px;
	float: left;
}

#step2notes h2 {
	width: 168px;
	height: 24px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #ececec url(images/step2leftboxh2-bg.png);
	padding: 10px 0px 0px 10px;
	border-bottom: 1px solid #cacaca;
	border-left: 1px solid #fcfcfc;
	margin: 0px 0px 1px 0px;
}

#step2notes h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#step2notes div {
	width: 160px;
	height: 90px;
	float: left;
	padding: 3px 8px 0px 10px;
	border-left: 1px dotted #cecece;
	margin-top: 7px;
}

#step2notes div textarea {
	width: 148px;
	height: 72px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000000;
	padding: 5px;
	border: 1px solid #d3d3d3;
}

#step2bottomr {
	width: 360px;
	float: right;
	margin-top: 6px;
}

#step2bottomr .another input {
	width: 141px;
	height: 42px;
	float: left;
	background: url(images/designanother-btn.jpg);
	border: 0px;
	margin-top: 10px;
	cursor: pointer;
}

#step2bottomr .addcart input {
	width: 151px;
	height: 37px;
	float: right;
	background: url(images/addtocart-btn.png);
	border: 0px;
	cursor: pointer;
}

#step3 {
	width: 877px;
	height: 568px;
	float: left;
	background: #eeeeee;
	border: 1px solid #c5c5c5;
	margin: 0px 10px 11px 10px;
}

#step3 h2 {
	width: 851px;
	height: 28px;
	float: left;
	font-size: 13px;
	color: #787878;
	background: #e8e8e8 url(images/step3head-bg.jpg);
	padding: 16px 14px 0px 12px;
	border-bottom: 1px solid #c5c5c5;
	margin: 0px 0px 19px 0px;
}

#step3 h2 a {
	width: auto;
	float: right;
	margin-top: -2px;
}

#summarybox {
	width: 806px;
	height: 368px;
	float: left;
	background: url(images/summarybox-bg.jpg);
	padding: 18px 16px 0px 19px;
	margin: 10px 20px 28px 16px;
}

#summarylistbox {
	width: 800px;
	height: 302px;
	float: left;
	overflow: auto;
	padding-right: 0px;
	margin: 0px 6px 5px 0px;
}

#summarylistbox h1 {

	text-align: center;
	margin-top: 161px;

}

.summarylist {
	width: 780px;
	float: left;
	margin-bottom: 21px;
}

.summarylist .box1 {
	width: 159px;
	float: left;
}

.summarylist .box1 img {
	padding: 3px;
	border: 1px solid #c4c4c4;
}

.summarylist .box2 {
	width: 539px;
	float: left;
	margin-top: 27px;
}

.summarylist .box2 span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #787878;
	text-align: center;
	font-weight: bold;
	margin-right: 3px;
}

.summarylist .box2 .dimensions {
	width: 167px;
	height: 30px;
	float: left;
	background: #ececec;
	padding: 6px 5px 0px 5px;
}

.summarylist .box2 .colour {
	width: 150px;
	height: 30px;
	float: left;
	background: #ececec;
	padding: 6px 5px 0px 5px;
}

.summarylist .box2 .price {
	width: 77px;
	height: 30px;
	float: left;
	background: #ececec;
	padding: 6px 5px 0px 5px;
}

.summarylist .box2 .delete {
	width: 17px;
	height: 23px;
	float: left;
	background: #ececec;
	padding: 6px 7px 7px 7px;
}
.summarylist .box2 .qty {
	width: 61px;
	height: 30px;
	float: left;
	background: #ececec;
	padding: 6px 3px 0px 3px;
	font-size: 12px;
}
.qtyc {
	border: 1px solid #dcdcdc;
	background-color: #ffffff;
	width:20px;
	text-align: center;
}
.summarylist .box3 {
	width: 82px;
	float: left;
	margin-top: 29px;
}

.textarea textarea {

	font-family: Arial;
	font-size: 11px;
	color: #848484;
}


#step3designanother {
	width: 806px;
	float: left;
	text-align: right;
}



#step3buttons {
	width: 850px;
	float: left;
	margin: 0px 0px 0px 0px;
}

#step3buttons .continue {

	margin-left: 192px;

}

#step3buttons .continue input {
	width: 256px;
	height: 61px;
	float: left;
	background: url(images/step3-continue.jpg);
	border: 0px;
	cursor: pointer;
}

#step3buttons .checkout input {
	width: 271px;
	height: 61px;
	float: center;
	background: url(images/step3-checkout.jpg);
	border: 0px;
	cursor: pointer;
}

#step3buttons .another input {
	width: 271px;
	height: 61px;
	margin-left: 20px;
	float: right;
	background: url(images/step3-continue.jpg);
	border: 0px;
	cursor: pointer;
}
#step3buttons .another span {

margin-left: 20px;
	
}

#framecolour.jcarousel-skin-colour{ 
	background:url(images/ajax-loader-price.gif) center center no-repeat; 
	width:200px; 
	height:52px; 
} 
#framecolour.jcarousel-skin-colour li{ 
  	display:none; 
} 

#handlecolour.jcarousel-skin-colour{ 
	background:url(images/ajax-loader-price.gif) center center no-repeat; 
	width:200px; 
	height:52px; 
} 
#handlecolour.jcarousel-skin-colour li{ 
  	display:none; 
} 

#glasspattern.jcarousel-skin-colour{ 
	background:url(images/ajax-loader-price.gif) center center no-repeat; 
	width:200px; 
	height:52px; 
} 
#glasspattern.jcarousel-skin-colour li{ 
  	display:none; 
} 
#step3buttons .continue{
	margin-top: 0px !important;
}
/*############################################################################*/
/*########################### Image change divs ############################# */
/*############################################################################*/
#holderbox {
	position: relative;
}
#bigimg {
	width: 626px;
	height: 404px;
	float: left;
	display: inline;
}
#layering1 { /* glass */
	position: absolute;
	top: 1px;
	left: 1px;
	width: 624px;
	height: 403px;
	float: left;
	z-index: 1;
}
#layering2 { /* frame */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 626px;
	height: 404px;
	float: left;
	z-index: 2;
}
#layering3 { /* refresh button */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 626px;
	height: 404px;
	text-align: right;
	z-index: 3;
}
#layering4 { /* viewed from outside */
	position: absolute;
	top: 0px;
	left: 195px;
	width: auto;
	height: 40px;
	z-index: 4;
	color: #000000;
	font-family: Arial;
	margin-top: -16px;
	font-size: 12px;
	text-align:center;
}