/**********************/
/*** GENERAL STYLES ***/
/**********************/

*, html, body {
	padding: 0;
	margin: 0;
}

body {
	background: url(../images/topbarbg.gif) repeat-x top;
}

#main-container {
	width: 980px;
	margin: 0 auto 0 auto;
}

button::-moz-focus-inner {
  border: 0;
}

button:focus, button:active { 
    outline: none; 
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lightgrey {color: #999999;}
.grey {color: #666666;}
.darkgrey {color: #444444;}
.brown {color: #660000;}
.blue {color: #0066cc;}
.hide {display: none;}
.show {display: block;}
.clear{clear:both;}
.floatleft{float: left;}

#errmsg {
	width: 438px;
	float: left;
}

.errorBox-red {
	background: #fdf0eb;
	border: 1px #ff4a4a solid;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 12px auto 0 auto;
	clear:both;
	text-align: center;
}

.errorBox-blue {
	background: #eefbff;
	border: 1px #0093d2 solid;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 12px 0 0 0;
	clear:both;
	text-align: center;
}

.error-heading-red {
	font-size: 16px;
	font-weight: bold;
	color: #ff4a4a;
	text-align: center;
	padding: 10px 0 10px 0;
}

.error-heading-blue {
	font-size: 16px;
	font-weight: bold;
	color: #0093d2;
	text-align: center;
	padding: 10px 0 10px 0;
}

/**************/
/*** HEADER ***/
/**************/

.header {
	height: 48px;
}

.storewidediscount {
	background: #ed1c24;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	margin: 5px 0 0 0;
	padding: 9px;
	float: right;
	display: inline;
	color: #ffffff;
	border: 1px #990000 solid;
}

.storewidediscount a {
	text-decoration: none;
	color: #ffffff;
}

.storewidediscount a:hover {
	
	color: #ffffff;
	text-decoration:underline;
}

#dk_container_countries, #countries {
	float: right;
	margin: 6px 20px 0 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	background: #FFFFFF;
}

.mostpopular
{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#666;
float: right;
margin-right:70px;
margin-top:10px;

}

/***************************/
/*** HEADER PHONE NUMBER ***/
/***************************/

.phone-number {
	float: right;
	margin: 4px 10px 0 0;
}

/*******************/
/*** LEFT COLUMN ***/
/*******************/

.leftcol {
	width: 394px;
	float: left;
	padding: 0 0 0 11px;
	display: inline;
}

.logo {
	width: 220px;
	height: 128px;
	background: url(../ticons/logo.png) no-repeat;
	float: left;
	display: inline;
	margin: -25px 0 0 0;
	position: relative;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff;
	border: 0;
	z-index: 1;
}

.nav-bg {
	width: 220px;
	height: 153px;
	background: url(../ticons/nav-background.jpg) no-repeat;
	float: left;
	clear: both;
	display: inline;
	margin: 60px 0 0 0;
}

.leftcol-pic-container {
	width: 326px;
	height: 358px;
	float: left;
	clear: both;
	position: relative;
	display: inline;
	margin: -230px 0 0 43px;
	z-index: 2;
}

#finishPic {
	width: 250px;
	height: 170px;
	float: left;
	position: absolute;
	top: 115px;
	left: 30px;
}

#navigation {
	float: left;
	clear: both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: -24px 0 0 18px;
	display: inline;
	position: relative;
	z-index: 998;
}

#navigation ul {
	width: 280px;
	list-style: none;
	margin: 0 0 20px 0;
}

#navigation ul li {
	font-weight: bold;
	padding: 3px 0 3px 0;
}

#navigation a {
	color: #009900;
}

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

/********************/
/*** RIGHT COLUMN ***/
/********************/

.rightcol {
	width: 553px;
	float: left;
	padding: 0 0 0 22px;
	display: inline;
}

#progressbar {
	width: 487px;
	background: url(../ticons/progressbar-bg.gif) repeat;
	height: 9px;
	margin: 20px 0 0 0;
	line-height: 1px;
	font-size: 1px;
}

#progressbar .ui-progressbar-value {
	height: 9px;
	background-color: #0093d2;
	line-height: 1px;
	font-size: 1px;
}

#progressbar .ui-progressbar-pencil {
	width: 17px;
	height: 16px;
	background: url(../ticons/pencil.png) no-repeat;
	float: right;
	position: relative;
	margin: -10px -20px 0 0;
	display: inline;
}

.rightcol .content {
	width: 490px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 60px 0 0 20px;
	float: left;
	display: inline;
}

#artworkTemplate, #uploadArtwork {
	width: 280px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#artworkTemplate i {
	margin: 0 0 0 15px;
}

/****************************/
/*** MEASUREMENT DROPDOWN ***/
/****************************/

#material {
	z-index: 999;
}

#convertdrop {
	z-index: 998;
}

#convertdrop, #material {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
	padding-right: 1px;
}

#convertdrop .dd-selected, #material .dd-selected {
	outline: 1px #3399ff solid;
}

#convertdrop .dd-selected, #convertdrop .dd-option {
	padding: 2px 2px 2px 5px;
	font-weight: bold;
}

#material .dd-selected, #material .dd-option {
	padding: 2px 0 2px 5px;
	font-weight: bold;
}

#material .dd-selected .dd-selected-image {
	margin: 4px 5px 0 0;
}

.material-desc {
	width: 391px;
}

#convertdrop .dd-option-selected, #convertdrop .dd-option:hover, #material .dd-option-selected, #material .dd-option:hover {
	background-color: #0084c7;
	border-bottom-color: #0073ad;
	color: #fff;
	text-decoration: none;
	text-shadow: rgba(0, 0, 0, .5) 0 1px 0;
}

#material .dd-selected-text {
	line-height: 40px;
}

#convertdrop .dd-pointer, #material .dd-pointer {
	width:23px;
	height:28px;
	position:absolute;
	right:3px;
	top:50%;
	margin-top:-14px;
}

#convertdrop .dd-pointer-down, #material .dd-pointer-down {
	background: url(../../ticons/arrow-down-lrg.gif) no-repeat;
}

#convertdrop .dd-pointer-up, #material .dd-pointer-up {
	background: url(../../ticons/arrow-up-lrg.gif) no-repeat;
}

#matPicContainer {
	min-height: 300px;
}

/************************/
/*** MEASUREMENT FORM ***/
/************************/

#quantity {
	width: 84px;
	border: 1px #3399ff solid;
	padding: 10px;
	font-weight: bold;
	font-size: 21px;
}

#width, #height {
	width: 84px;
	border: 1px #3399ff solid;
	padding: 10px;
	font-weight: bold;
	font-size: 21px;
}

.widthlbl {
	width: 70px;
	background:url(../ticons/width-arrows.png) no-repeat top left;
	float: left;
	padding: 13px 0 13px 5px;
}

.heightlbl {
	width: 60px;
	background:url(../ticons/height-arrows.png) no-repeat right;
	float: left;
	padding: 13px 0 13px 5px;
}

.x {
	padding: 7px 24px 0 0;
	font-size: 21px;
	font-weight: bold;
	float: right;
}

#btnBack {
	width: 120px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 6px;
	margin: 10px 35px 0 4px;
	float: left;
}

#btnBack i {
	margin: 0 14px 0 0;
}

#btnNext, #btnNext1, #btnNext2 {
	width: 120px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 6px;
	margin: 10px 4px 0 0;
}

#btnNext i, #btnNext1 i, #btnNext2 i {
	float: right;
	margin: 2px 10px 0 0;
}



/*******************/
/*** SUMMARY BOX ***/
/*******************/

#summary-box {
	width: 460px;
	border: 2px #0066cc solid;
	float: left;
	clear: both;
	margin: 35px 0 0 0;
	padding: 120px 15px 25px 15px;
	z-index: 400;
}

#summary-box .btndownload {
	width: 380px; 
	float: left;
	padding: 20px 0 20px 0;
	margin: 0 0 0 35px;
}

#summary-box .btndownload .btnInfoTemplate {
	width: 130px;
	height: 46px;
	float: left;
	display: inline;
}

#summary-box .btndownload .btnTemplate {
	width: 130px;
	height: 46px;
	float: left;
	display: inline;
}

#summary-box .btndownload .plus{
	float: left; 
	padding: 10px 20px; 
	font-size: 20px;
}

#feedback {
	width: 370px;
	background: #ffffff;
	font-size: 13px;
	font-weight: bold;
	float: left;
	clear: both;
	display: inline;
	position: relative;
	margin: -135px 0 0 10px;
	padding: 5px 10px 5px 10px;
	z-index: 500;
}

.free-help {
	margin: 12px 0 0 20px;
}

#feedback .nonbold {
	font-weight:normal;
}

.hr {
	width: 100%;
	height: 1px;
	background: #CCCCCC;
	margin: 30px 0 30px 0;
	overflow: hidden;
	font-size: 1px;
	line-height: 1px;
	float: left;
	clear: both;
}

#startAgain, #startAgain:hover, #startAgain:active, #startAgain:visited {
	float: right;
	clear: both;
	margin: 18px 0 0 0;
	color: #0033ff;
}

#startAgain:hover {
	text-decoration: none;
}

/*********************/
/*** FINISHES LIST ***/
/*********************/

.finish-instructions {
	float: left;
	position: relative;
	margin-top: 54px;
}

.eyeoptions-instructions {
	float: left;
	position: relative;
	margin: 0 0 15px 0;
}

#finishes .ui-selecting, #orientation .ui-selecting, #suboption1 .ui-selecting, #suboption2 .ui-selecting, #eyeoptions .ui-selecting, #eyespacing .ui-selecting {
	background: #FECA40;
}

#finishes .ui-selectee, #orientation .ui-selectee, #suboption1 .ui-selectee, #suboption2 .ui-selectee, #eyeoptions .ui-selectee, #eyespacing .ui-selectee {
	background:url(../ticons/radio-unselected.gif) no-repeat left;
	position: relative;
}

#finishes .ui-selected, #orientation .ui-selected, #suboption1 .ui-selected, #suboption2 .ui-selected, #eyeoptions .ui-selected, #eyespacing .ui-selected {
	background: url(../ticons/radio-selected.gif) no-repeat left;
}

#orientation {
	list-style-type: none;
	padding: 0;
	width: 490px;
	float: left;
	clear: both;
	margin: 40px 0 0 0;
}

#orientation li {
	width: 460px;
	padding: 0 0 0 30px;
	font-size: 13px;
	font-weight: bold;
	float:left;
	clear:both;
	position: relative;
	margin: 0 0 60px 0;
}

#orientation li.portrait .width {
	background: none;
	float: left;
	position: absolute;
	top: 82px;
	left: 46px;
	font-weight: normal;
	font-size: 10px;
}

#orientation li.portrait .height {
	background: none;
	float: left;
	position: absolute;
	top: 34px;
	left: 101px;
	font-weight: normal;
	font-size: 10px;
	z-index: 999;
}

#orientation li.landscape .width {
	background: none;
	float: left;
	position: absolute;
	top: 68px;
	left: 46px;
	font-weight: normal;
	font-size: 10px;
}

#orientation li.landscape .height {
	background: none;
	float: left;
	position: absolute;
	top: 34px;
	left: 112px;
	font-weight: normal;
	font-size: 10px;
	z-index: 999;
}

#orientation li a.ui-selectee {
	width:253px;
	background: none;
	padding: 32px 0 32px 40px;
	margin: 0 0 0 80px;
	float: left;
	position: relative;
	color:#000000;
	text-decoration: none;
}

#orientation li a.ui-selectee:hover {
	background-color: #f4f4f4;
	text-decoration: underline;
}

#orientation .ui-selected a.ui-selectee {
	color: #0066cc;
}

#orientation li img.ui-selectee {
	width: 72px;
	height: 72px;
	background: none;
	margin: 10px 0 0 8px;
	float: left;
	border: none;
}

#finishes {
	list-style-type: none;
	margin: -78px 0 0 0;
	padding: 0;
	width: 490px;
	float: left;
	clear: both;
}

#finishes li {
	width: 460px;
	padding: 0 0 0 30px;
	font-size: 13px;
	font-weight: bold;
	float:left;
	clear:both;
}

#finishes .list-split {
	margin: 40px 0 0 0;
}

#finishes li a.ui-selectee {
	width:388px;
	background: none;
	padding: 18px 0 18px 10px;
	margin: 0 0 0 15px;
	float: left;
	position: relative;
	color:#000000;
	text-decoration: none;
}

#finishes li a.ui-selectee:hover {
	background-color: #f4f4f4;
	text-decoration: underline;
}

#finishes .ui-selected a.ui-selectee {
	color: #0066cc;
}

#finishes li img.ui-selectee {
	width: 32px;
	height: 32px;
	background: none;
	margin: 10px 0 0 15px;
	float: left;
	border: none;
}

.suboptions-instructions {
	width: 100%;
	float: left;
}

.lbl-container {
	width: 100%;
	float: left;
	clear: both;
	margin: 20px 0 8px 0;
}

.col1-lbl {
	width: 215px;
	float: left;
	clear: both;
}

.col2-lbl {
	width: 200px;
	float: left;
}

#suboption-container {
	width: 100%;
	float: left;
	clear: both;
}

#suboption1, #suboption2 {
	list-style-type: none;
	padding: 0;
	float: left;
}

#suboption1 {
	width: 212px;
	border-right: 3px #0099FF solid;
	margin: 10px 0 0 0;
}

#suboption2 {
	width: 205px;
	margin: 10px 0 0 40px;
}

#suboption1 li, #suboption2 li {
	width: 185px;
	padding: 0 0 0 30px;
	font-size: 13px;
	font-weight: bold;
	float:left;
	clear:both;
}

#suboption1 .list-split, #suboption2 .list-split {
	margin: 40px 0 0 0;
}

#suboption1 li a.ui-selectee, #suboption2 li a.ui-selectee {
	width: 157px;
	background: none;
	padding: 18px 0 18px 10px;
	margin: 0 0 0 15px;
	float: left;
	position: relative;
	color:#000000;
	text-decoration: none;
}

#suboption1 li a.ui-selectee img, #suboption2 li a.ui-selectee img {
	margin: 0 0 0 10px;
	background: none;
}

#suboption1 li a.ui-selectee:hover, #suboption2 li a.ui-selectee:hover {
	background-color: #f4f4f4;
	text-decoration: underline;
}

#suboption1 .ui-selected a.ui-selectee, #suboption2 .ui-selected a.ui-selectee {
	color: #0066cc;
}

#eyeoptions {
	list-style-type: none;
	margin: -78px 0 0 0;
	padding: 0;
	width: 490px;
	float: left;
	clear: both;
}

#eyeoptions li {
	width: 460px;
	padding: 0 0 0 30px;
	font-size: 13px;
	font-weight: bold;
	float:left;
	clear:both;
}

#eyeoptions .list-split {
	margin: 40px 0 0 0;
}

#eyeoptions li a.ui-selectee {
	width:388px;
	background: none;
	padding: 18px 0 18px 10px;
	margin: 0 0 0 15px;
	float: left;
	position: relative;
	color:#000000;
	text-decoration: none;
}

#eyeoptions li a.ui-selectee:hover {
	background-color: #f4f4f4;
	text-decoration: underline;
}

#eyeoptions .ui-selected a.ui-selectee {
	color: #0066cc;
}

#eyeoptions a.ui-selectee .fitoption, #eyeoptions a.ui-selectee .ui-selectee {
	background: none;
	background-repeat: no-repeat;
	font-size: 9px;
}

#eyeoptions li img.ui-selectee {
	width: 32px;
	height: 32px;
	background: none;
	margin: 10px 0 0 15px;
	float: left;
	border: none;
}

#eyespacing {
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0;
	width: 490px;
	float: left;
	clear: both;
}

#eyespacing li {
	width: 460px;
	padding: 0 0 0 30px;
	font-size: 13px;
	font-weight: bold;
	float:left;
	clear:both;
}

#eyespacing .list-split {
	margin: 40px 0 0 0;
}

#eyespacing li a.ui-selectee {
	width:388px;
	background: none;
	padding: 18px 0 18px 10px;
	margin: 0 0 0 15px;
	float: left;
	position: relative;
	color:#000000;
	text-decoration: none;
}

#eyespacing li a.ui-selectee:hover {
	background-color: #f4f4f4;
	text-decoration: underline;
}

#eyespacing .ui-selected a.ui-selectee {
	color: #0066cc;
}

#eyespacing li img.ui-selectee {
	width: 32px;
	height: 32px;
	background: none;
	margin: 10px 0 0 15px;
	float: left;
	border: none;
}

/************************/
/*** REFERENCE NUMBER ***/
/************************/

.refcode-container {
	width: 400px;
	float: left;
	clear: both;
	margin: 40px 0 0 0;
	padding: 10px 45px 25px 45px;
	border: 2px #0066cc solid;
}

.refcodelbl {
	width: 280px;
	font-size: 20px;
	float: left;
}

.refcode {
	width: 120px;
	font-size: 20px;
	float: left;
}

.refcode-container p {
	width: 100%;
	float: left;
	clear: both;
	display: inline;
	margin: 20px 0 0 0;
}

/**************/
/*** FOOTER ***/
/**************/

#footer {
	width: 100%;
	height: 148px;
	background: url(../ticons/footer-bg.jpg);
	margin: 80px 0 0 0;
	float: left;
	clear: both;
}

/**************************/
/*** COUNTRIES DROPDOWN ***/
/**************************/

.dk_container {
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
	background: -moz-linear-gradient(top, #fff, #f5f5f5);
	background: -o-linear-gradient(top, #fff, #f5f5f5);
	background-color: #f5f5f5;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
}

.dk_container:focus {
	outline: 0;
}

.dk_container a {
	cursor: pointer;
	text-decoration: none;
}

.dk_toggle {
	background-image: url('../../ticons/arrow-down-lrg.gif');
	background-repeat: no-repeat;
	background-position: 99% center;
	border: 1px solid #cccccc;
	color: #333;
	padding: 9px 45px 9px 10px;
	text-shadow: #fff 1px 1px 0;
	-webkit-transition: border-color .5s;
	-moz-transition: border-color .5s;
	-o-transition: border-color .5s;
	transition: border-color .5s;
}

.dk_toggle:hover {
	border-color: #cccccc;
}

.dk_focus .dk_toggle {
	border-color: #cccccc;
}

.dk_focus .dk_toggle {
	/*box-shadow: 0 0 5px #40b5e2;
	-moz-box-shadow: 0 0 5px #40b5e2;
	-webkit-box-shadow: 0 0 5px #40b5e2;*/
}

.dk_open {
	z-index: 10;
}

.dk_open .dk_toggle {
	background-image: url('../../ticons/arrow-up-lrg.gif');
	background-color: #ffffff;
	border-color: #cccccc;
	color: #0033cc;
}

.dk_options {
	box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
	-moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
}

.dk_options a {
	background-color: #fff;
	border-bottom: 1px solid #cccccc;
	font-weight: bold;
	padding: 8px 10px;
}

.dk_options li:last-child a {
	border-bottom: none;
}

.dk_options a {
	color: #000000;
	font-weight: normal;
}

.dk_options a:hover, 
.dk_option_current a {
	background-color: #f6f6f6;
	border-bottom-color: #cccccc;
	color: #000000;
	text-decoration: none;
}

.dk_options_inner {
	border: 1px solid #cccccc;
	border-bottom-width: 1px;
	border-bottom-color: #cccccc;
	color: #333;
	max-height: 250px;
	text-shadow: #fff 0 1px 0;
}

.dk_options_inner, .dk_touch .dk_options {
	max-height: 250px;
}

.dk_container {
	display: none;
	float: left;
	position: relative;
}

.dk_container a {
	outline: 0;
}

.dk_toggle {
	display: -moz-inline-stack;
	display: inline-block;
	*display: inline;
	position: relative;
	zoom: 1;
	color: #0033cc;
}

.dk_open {
	position: relative;
}

.dk_open .dk_options {
	display: block;
}

.dk_open .dk_label {
	color: inherit;
}

.dk_options {
	display: none;
	margin-top: -1px;
	position: absolute;
	right: 0;
	width: 100%;
}

.dk_options a,
.dk_options a:link,
.dk_options a:visited {
	display: block;
}

.dk_options_inner {
	overflow: auto;
	position: relative;
}

.dk_touch .dk_options {
	overflow: hidden;
}

.dk_touch .dk_options_inner {
	max-height: none;
	overflow: visible;
}

.dk_fouc select {
	position: relative;
	top: -99999em;
	visibility: hidden;
}