@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;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #0975c0;
}
#centerbox {
	width: 1093px;
	margin: 0 auto 0 auto;
	text-align: left;
}
#whiteboxtopbg2 {
	width: 1043px;
	background: none;
	padding: 0px 16px 0px 14px;
}

#designerbox {
	width: 1041px;
	height: 716px;
	float: left;
	background: #d7d7d7 url(images/designer-bg.jpg) top no-repeat;
	padding-bottom: 0px;
	border: 1px solid #c9c9c9;
	margin: 0px 0px 0px 0px;
	overflow: hidden;
}

#designerbox h2 {
	font-size: 25px;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
}

#designerhead {
	width: 1006px;
	height: 71px;
	float: left;
	padding: 0px 0px 0px 35px;
}

#designerheadl {
	width: auto;
	float: left;
	margin-top: 23px;
}

#designerheadr {
	width: 576px;
	float: right;
}

#designerstep {
	width: 316px;
	height: 58px;
	float: left;
	padding-top: 13px;
	border-right: 1px solid #ffffff;
}

#designercart {
	width: 233px;
	height: 66px;
	float: left;
	padding: 5px 0px 0px 25px;
	border-left: 1px solid #cfcfcf;
}

#designercart .span1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 27px;
	color: #0076bd;
	font-weight: bold;
}

#designercart .span2 {
	color: #032254;
	line-height: 15px;
	width: 100%;
	float: left;
	margin-top:-5px;
}

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

#designercontent {
	width: 977px;
	float: left;
	padding: 20px 32px 15px 32px;
}

#step1top {
	width: 915px;
	float: left;
	background: #f4f4f4;
	padding: 0px 33px 0px 27px;
	border: 1px solid #cbcbcb;
	margin-bottom: 18px;
}

#step1top p {
	color: #a2a2a2;
	margin: 0px;
}

#step1size {
	width: 471px;
	height: 105px;
	float: left;
	padding: 10px 49px 0px 0px;
	border-right: 1px solid #cbcbcb;
}

#step1sizel {
	width: auto;
	float: left;
}

#step1sizer {
	width: auto;
	float: right;
}

#step1sizer table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #636363;
}

#step1sizer td {
	padding-top: 7px;
}

#step1sizer input {
	width: 139px;
	height: 18px;
	font-size: 15px;
	color: #5c5b5b;
	background: #ffffff url(images/step1sizeinput-bg.jpg);
	padding: 9px 10px 9px 10px;
	border: 0px;
	vertical-align: middle;
}

#step1opening {
	width: 349px;
	height: 105px;
	float: left;
	padding: 10px 0px 0px 44px;
	border-left: 1px solid #ffffff;
}

#step1openingl {
	width: auto;
	float: left;
}

#step1openingr {
	width: auto;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #636363;
	margin-top: 35px;
}

#step1openingr input {
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
}

#step1openingr .radio {
	width: 25px;
	height: 26px;
	display: inline-block;
	background: url(images/step1openingcheckbox-bg.jpg) no-repeat;
	clear: left;
	vertical-align: middle;
	cursor: pointer;
}

#step1bot {
	width: 938px;
	float: left;
	background: #f4f4f4;
	padding: 10px 17px 29px 20px;
	border: 1px solid #cbcbcb;
}

#step1bot p {
	color: #a2a2a2;
	margin: 0px 0px 10px 0px;
}

#frameresults {
	width: 938px;
	float: left;
	text-align: center;
	background: #ffffff;
	height: 310px;
	overflow: auto;
}
#frameresults a{
	width: auto;
	/*float: left;*/
	display: inline-block;
	padding: 2px;
	margin: 0 auto 0 auto;
}

#frameresults a img {
	border: 3px solid #ffffff;
	margin-right: 6px;
}

#frameresults .active {
	border-color: #df2236;
}


#designerfooter {
	width: 982px;
	float: left;
	margin: 0px 23px 0px 36px;
}

#designerfooterl {
	width: auto;
	float: left;
	margin-top: 0px;
}

#designerfooterl img {
	width: auto;
	height: auto;
	max-height: 54px;
}

#designerfooternext {
	width: auto;
	float: right;
	margin-top: 3px;
}

#designerfooternext input {
	width: 224px;
	height: 54px;
	font-size: 19px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: -1px;
	text-align: left;
	cursor: pointer;
	background: #022358 url(images/designerfooternext-bg.jpg);
	padding: 0px 0px 8px 25px;
	border: 0px;
}

#designerfooterrestart {
	width: auto;
	float: right;
	margin: 8px 34px 0px 0px;
}

#designercontent2 {
	width: 1014px;
	float: left;
	padding: 18px 12px 5px 15px;
}

#step2door {
	width: 1004px;
	float: left;
	margin: 0px 6px 15px 4px;
	position: relative;
	height: 340px;
}

#step2options {
	width: 1004px;
	float: left;
	background: #f1f1f1;
	padding-left: 8px;
	border: 1px solid #c9c9c9;
}

#step2framecolour {
	width: 213px;
	height: 186px;
	float: left;
	padding: 0px 3px 0px 0px;
	border-right: 1px solid #cfcfcf;
}

#step2framecolour .optionbox {
	width: 213px;
	float: left;
	margin-top: 5px;
}

#step2framecolour .optionbox p {
	line-height: 17px;
	margin: 0px;
}

#step2framecolour .optionbox .p1 {
	font-size: 12px;
	color: #6b6b6b;
	margin-bottom: 3px;
}

#step2framecolour .optionbox p a {
	color: #959595;
	text-decoration: underline;
}

#step2framecolour .optionbox .img1 {
	background: #ffffff;
	padding: 2px;
	border: 1px solid #c6c6c6;
	margin-right: 7px;
}

#step2framecolour .optionbox .img2 {
	vertical-align: middle;
}

#step2hardware {
	width: 140px;
	height: 186px;
	float: left;
	padding: 0px 5px 0px 5px;
	border-right: 1px solid #cfcfcf;
}

#step2hardware .optionbox {
	width: 140px;
	float: left;
	margin-top: 5px;
}

#step2hardware .optionbox p {
	line-height: 17px;
	margin: 0px;
}

#step2hardware .optionbox .p1 {
	font-size: 12px;
	color: #6b6b6b;
	margin-bottom: 3px;
}

#step2hardware .optionbox p a {
	color: #959595;
	text-decoration: underline;
}

#step2hardware .optionbox .img1 {
	background: #ffffff;
	padding: 2px;
	border: 1px solid #c6c6c6;
	margin-right: 7px;
}

#step2hardware .optionbox .img2 {
	vertical-align: middle;
}

#step2glazing {
	width: 137px;
	height: 186px;
	float: left;
	padding: 0px 15px 0px 12px;
	border-right: 1px solid #cfcfcf;
}

#step2glazing .typebox {
	width: 137px;
	float: left;
	margin-top: 5px;
}

#step2glazing .typebox p {
	font-size: 9px;
	color: #6b6b6b;
	margin: 0px;
}

#step2glazing .typebox .p1 {
	font-size: 12px;
	color: #6b6b6b;
	margin-bottom: 3px;
}

#step2glazing select {
	margin: 3px 0px 5px 0px;
}

#step2glazing .select {
	margin: 3px 0px 5px 0px;
}

#step2glazing .optionbox {
	width: 137px;
	float: left;
	margin-top: 5px;
}

#step2glazing .optionbox p {
	line-height: 17px;
	margin: 0px;
}

#step2glazing .optionbox .p1 {
	font-size: 12px;
	color: #6b6b6b;
	margin-bottom: 3px;
}

#step2glazing .optionbox p a {
	color: #959595;
	text-decoration: underline;
}

#step2glazing .optionbox .img1 {
	background: #ffffff;
	padding: 2px;
	border: 1px solid #c6c6c6;
	margin-right: 7px;
}

#step2glazing .optionbox .img2 {
	vertical-align: middle;
}

#step2extras {
	width: 257px;
	height: 186px;
	float: left;
	padding: 0px 11px 0px 13px;
	border-right: 1px solid #cfcfcf;
}

#step2extras h2 {
	margin-bottom: 5px;
}

#step2extras table {
	font-size: 12px;
}

#step2extras td {
	padding-bottom: 5px;
}

#step2extras input {
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
}

#step2extras .radio {
	width: 14px;
	height: 15px;
	display: inline-block;
	background: url(images/step2extrasradio-bg.jpg) no-repeat;
	clear: left;
	vertical-align: middle;
	cursor: pointer;
}






#step2tricklevents {
	width: 168px;
	height: 186px;
	float: left;
	padding: 0px 9px 0px 8px;
}

#step2tricklevents h2 {
	margin-bottom: 15px;
}

#step2tricklevents #checkboxes {
	float: left;
	text-align: center;
	margin-bottom: 1px;
}

#step2tricklevents .checkboxes8 {
	width: 163px;
	padding: 0px 2px 0px 3px;
}

#step2tricklevents .checkboxes7 {
	width: 143px;
	padding: 0px 12px 0px 13px;
}

#step2tricklevents .checkboxes6 {
	width: 122px;
	padding: 0px 23px 0px 23px;
}

#step2tricklevents .checkboxes5 {
	width: 102px;
	padding: 0px 33px 0px 33px;
}

#step2tricklevents .checkboxes4 {
	width: 81px;
	padding: 0px 43px 0px 44px;
}

#step2tricklevents .checkboxes3 {
	width: 61px;
	padding: 0px 53px 0px 54px;
}

#step2tricklevents .checkboxes2 {
	width: 41px;
	padding: 0px 63px 0px 64px;
}

#step2tricklevents #checkboxes div {
	width: 19px;
	float: left;
	margin-right: 1px;
}

#step2tricklevents #checkboxes input {
	padding: 0px;
	margin: 0px;
}

#step2tricklevents #checkboxes .checkbox {
	width: 18px;
	height: 18px;
	display: inline-block;
	background: url(images/step2extrascheckbox-bg.jpg) no-repeat;
	clear: left;
	vertical-align: middle;
	cursor: pointer;
}




#vattxt{
	color: #0076bd;
	font-weight: bold;
	width: auto;
	float: right;
	line-height: auto;
	margin-top: -8px;
	padding-right: 4px;
}






#step2tricklevents #step2doortype {
	width: 168px;
	float: left;
}

#step2options select {
	width: 137px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6b6b6b;
}

#step2options .select {
	width: 112px;
	height: 16px;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6b6b6b;
	background: url(images/step2select-bg.jpg) no-repeat;
	padding: 3px 19px 0 6px;
	overflow: hidden;
}
.colorborder{
	width: 32px;
	height: 32px;
	float: left;
	padding: 2px;
	border: 1px solid #c6c6c6;
	margin-right: 7px;
}
.colorborder span{
	width: 32px;
	height: 32px;
	float: left;
}
.handlecolorborder{
	width: 32px;
	height: 32px;
	float: left;
	padding: 2px;
	border: 1px solid #c6c6c6;
	margin-right: 7px;
}
.handlecolorborder span{
	width: 32px;
	height: 32px;
	float: left;
}
#step2title{
	font-size: 20px;
	color: #0975c0;
	letter-spacing: -1px;
	text-align:center;
	font-family: arial;
	margin-bottom: 5px;
	line-height: 18px;
}
#step2title span{
	font-size: 19px;
	color: #898989;
}

.extcolbox {
	width: 21px;
	height: 21px;
	margin-left: 5px;
	margin-bottom: 5px;
	float: left;
	border: 1px solid #c6c6c6;
}

.blindcolbox{
	width: 55px;
	height: 55px;
	margin-left: 5px;
	margin-bottom: 5px;
	float: left;
	border: 1px solid #c6c6c6;
}
.handlecolbox{
	width: 55px;
	height: 55px;
	margin-left: 20px;
	margin-bottom: 20px;
	float: left;
	border: 1px solid #c6c6c6;
}
.glasscolbox{
	width: 39px;
	height: 39px;
	margin-left: 5px;
	margin-bottom: 5px;
	float: left;
	border: 1px solid #c6c6c6;
}


#hardwarecolours {
	width: 400px;
	float: left;
}

#hardwarecolours h2 {
	width: 392px;
	float: left;
	font-size: 23px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dedede;
	margin: 0px 0px 5px 8px;
}

#hardwarecolours p {
	font-size: 12px;
	margin: 0px 0px 30px 8px;
}
#hardwarecoloursl {
	width: 318px;
	height: 299px;
	margin: 0px auto 0px auto;
}

#hardwarecoloursl div {
	width: 106px;
	height: 116px;
	float: left;
	text-align: center;
}

#hardwarecoloursl span {
	width: 55px;
	height: 55px;
	display: inline-block;
	border: 1px solid #a3a3a3;
	margin: 0px 8px 5px 8px;
}
#hardwarecoloursl a {
	color: #808080;
	text-decoration: none;
}


#addonoptions {
	width: 400px;
	float: left;
}
#addonoptions h2 {
	width: 392px;
	float: left;
	font-size: 23px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dedede;
	margin: 0px 0px 5px 8px;
}

#addonoptions p {
	font-size: 12px;
	margin: 0px 0px 30px 8px;
}
#addonoptionsl {
	width: 318px;
	margin: 0px auto 0px auto;
}
#addontable td{
	text-align:center;
}







#blindcolours {
	width: 500px;
	float: left;
}

#blindcolours h2 {
	width: 492px;
	float: left;
	font-size: 23px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dedede;
	margin: 0px 0px 5px 8px;
}

#blindcolours p {
	font-size: 12px;
	margin: 0px 0px 30px 8px;
}
#blindcoloursl {
	width: 460px;
	height: 299px;
	margin: 0px auto 0px auto;
}

#blindcoloursl div {
	width: 92px;
	height: 95px;
	float: left;
	text-align: center;
}

#blindcoloursl span {
	width: 55px;
	height: 55px;
	display: inline-block;
	border: 1px solid #a3a3a3;
	margin: 0px 8px 5px 8px;
}
#blindcoloursl a {
	color: #808080;
	text-decoration: none;
}

#glasspatterns {
	width: 500px;
	float: left;
}

#glasspatterns h2 {
	width: 492px;
	float: left;
	font-size: 23px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dedede;
	margin: 0px 0px 5px 8px;
}

#glasspatterns p {
	font-size: 12px;
	margin: 0px 0px 30px 8px;
}
#glasspatternsl {
	width: 480px;
	margin: 0px auto 0px auto;
}

#glasspatternsl div {
	width: 80px;
	height: 84px;
	float: left;
	text-align: center;
}

#glasspatternsl span {
	width: 39px;
	height: 39px;
	display: inline-block;
	border: 1px solid #a3a3a3;
	margin: 0px 8px 5px 8px;
}
#glasspatternsl a {
	color: #808080;
	text-decoration: none;
}


#bifoldcolours {
	width: 656px;
	float: left;
}

#bifoldcolours h2 {
	width: 648px;
	float: left;
	font-size: 23px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dedede;
	margin: 0px 0px 5px 8px;
}

#bifoldcolours p {
	font-size: 12px;
	margin: 0px 0px 30px 8px;
}

#bifoldcoloursl {
	width: 401px;
	height: 299px;
	float: left;
	overflow: auto;
	padding: 4px 11px 0px 0px;
	margin-left: 1px;
}

#bifoldcoloursl div {
	width: 64px;
	height: 77px;
	float: left;
	text-align: center;
}

#bifoldcoloursl span {
	width: 46px;
	height: 46px;
	display: inline-block;
	border: 1px solid #a3a3a3;
	margin: 0px 8px 5px 8px;
}

#bifoldcoloursl a {
	color: #808080;
	text-decoration: none;
}

#bifoldcoloursr {
	width: 195px;
	height: 249px;
	float: right;
	font-size: 12px;
	line-height: 19px;
	text-align: center;
	background: url(images/bifoldcoloursr-bg.jpg);
	padding: 22px 7px 0px 2px;
}

/*###########################################################################################*/
/*#################################### Image changes ########################################*/
/*###########################################################################################*/

#imageChanger{
	position: absolute;
}
#profileimg{
	position: absolute;
	z-index:1;
}
.hingeimgs div{
	width: 4px;
	height: 340px;
	float: left;
}
#hinge21{ left: 376px;position: absolute;z-index:2;}
#hinge22{ left: 500px;position: absolute;z-index:2;}
#hinge23{ left: 622px;position: absolute;z-index:2;}

#hinge31{ left: 314px;position: absolute;z-index:2;}
#hinge32{ left: 438px;position: absolute;z-index:2;}
#hinge33{ left: 562px;position: absolute;z-index:2;}
#hinge34{ left: 684px;position: absolute;z-index:2;}

#hinge41{ left: 253px;position: absolute;z-index:2;}
#hinge42{ left: 377px;position: absolute;z-index:2;}
#hinge43{ left: 501px;position: absolute;z-index:2;}
#hinge44{ left: 625px;position: absolute;z-index:2;}
#hinge45{ left: 747px;position: absolute;z-index:2;}

#hinge51{ left: 190px;position: absolute;z-index:2;}
#hinge52{ left: 314px;position: absolute;z-index:2;}
#hinge53{ left: 438px;position: absolute;z-index:2;}
#hinge54{ left: 562px;position: absolute;z-index:2;}
#hinge55{ left: 687px;position: absolute;z-index:2;}
#hinge56{ left: 810px;position: absolute;z-index:2;}

#hinge61{ left: 128px;position: absolute;z-index:2;}
#hinge62{ left: 252px;position: absolute;z-index:2;}
#hinge63{ left: 376px;position: absolute;z-index:2;}
#hinge64{ left: 500px;position: absolute;z-index:2;}
#hinge65{ left: 625px;position: absolute;z-index:2;}
#hinge66{ left: 749px;position: absolute;z-index:2;}
#hinge67{ left: 871px;position: absolute;z-index:2;}

#hinge71{ left: 66px;position: absolute;z-index:2;}
#hinge72{ left: 190px;position: absolute;z-index:2;}
#hinge73{ left: 314px;position: absolute;z-index:2;}
#hinge74{ left: 438px;position: absolute;z-index:2;}
#hinge75{ left: 563px;position: absolute;z-index:2;}
#hinge76{ left: 687px;position: absolute;z-index:2;}
#hinge77{ left: 811px;position: absolute;z-index:2;}
#hinge78{ left: 933px;position: absolute;z-index:2;}

#hinge81{ left: 4px;position: absolute;z-index:2;}
#hinge82{ left: 128px;position: absolute;z-index:2;}
#hinge83{ left: 252px;position: absolute;z-index:2;}
#hinge84{ left: 376px;position: absolute;z-index:2;}
#hinge85{ left: 501px;position: absolute;z-index:2;}
#hinge86{ left: 625px;position: absolute;z-index:2;}
#hinge87{ left: 749px;position: absolute;z-index:2;}
#hinge88{ left: 873px;position: absolute;z-index:2;}
#hinge89{ left: 996px;position: absolute;z-index:2;}

.handleimgs div{
	width: 38px;
	height: 61px;
	float: left;
}

#handleleft{
	margin-right: 4px;
}
#handle2{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: 338px;
}
#handle3{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: 151px;
}
#handle4{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: 215px;
}
#handle5{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: 28px;
}
#handle6{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: 90px;
}
#handle7{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: -96px;
}
#handle8{
	position: absolute;
	z-index:3;
	top: 134px;
	margin-left: -33px;
}

.blindimgs div{
	width: 99px;
	height: 166px;
	float: left;
}


#blind21{ left: 390px;top: 18px;position: absolute;z-index:2;}
#blind22{ left: 514px;top: 18px;position: absolute;z-index:2;}

#blind31{ left: 328px;top: 18px;position: absolute;z-index:2;}
#blind32{ left: 452px;top: 18px;position: absolute;z-index:2;}
#blind33{ left: 576px;top: 18px;position: absolute;z-index:2;}

#blind41{ left: 267px;top: 18px;position: absolute;z-index:2;}
#blind42{ left: 391px;top: 18px;position: absolute;z-index:2;}
#blind43{ left: 515px;top: 18px;position: absolute;z-index:2;}
#blind44{ left: 639px;top: 18px;position: absolute;z-index:2;}

#blind51{ left: 204px;top: 18px;position: absolute;z-index:2;}
#blind52{ left: 328px;top: 18px;position: absolute;z-index:2;}
#blind53{ left: 452px;top: 18px;position: absolute;z-index:2;}
#blind54{ left: 577px;top: 18px;position: absolute;z-index:2;}
#blind55{ left: 701px;top: 18px;position: absolute;z-index:2;}

#blind61{ left: 142px;top: 18px;position: absolute;z-index:2;}
#blind62{ left: 266px;top: 18px;position: absolute;z-index:2;}
#blind63{ left: 390px;top: 18px;position: absolute;z-index:2;}
#blind64{ left: 515px;top: 18px;position: absolute;z-index:2;}
#blind65{ left: 639px;top: 18px;position: absolute;z-index:2;}
#blind66{ left: 763px;top: 18px;position: absolute;z-index:2;}

#blind71{ left: 80px;top: 18px;position: absolute;z-index:2;}
#blind72{ left: 204px;top: 18px;position: absolute;z-index:2;}
#blind73{ left: 328px;top: 18px;position: absolute;z-index:2;}
#blind74{ left: 453px;top: 18px;position: absolute;z-index:2;}
#blind75{ left: 577px;top: 18px;position: absolute;z-index:2;}
#blind76{ left: 701px;top: 18px;position: absolute;z-index:2;}
#blind77{ left: 825px;top: 18px;position: absolute;z-index:2;}

#blind81{ left: 18px;top: 18px;position: absolute;z-index:2;}
#blind82{ left: 142px;top: 18px;position: absolute;z-index:2;}
#blind83{ left: 266px;top: 18px;position: absolute;z-index:2;}
#blind84{ left: 391px;top: 18px;position: absolute;z-index:2;}
#blind85{ left: 515px;top: 18px;position: absolute;z-index:2;}
#blind86{ left: 639px;top: 18px;position: absolute;z-index:2;}
#blind87{ left: 763px;top: 18px;position: absolute;z-index:2;}
#blind88{ left: 887px;top: 18px;position: absolute;z-index:2;}