/*----------------------------left------------------------------*/
#left {
	float: left;
	width: 635px;
}
#nav {
	position: absolute;
	top: -20px;
	width: 625px;
	height: 45px;
}
#nav ul {
	float: left;
	width: 615px;
	height: 43px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: url(../images/bg_nav.png) 0 -43px no-repeat;
}
#nav ul li {
	display: block;
	float: left;
	width: 70px;
	height: 43px;
	margin: 0 12px 0 0;
	padding: 0;
	font-family: Georgia, Garamond, 'Times New Roman', sans;
}
#nav ul li.active {
	background: url(../images/bg_nav.png) 0 0px no-repeat;
	width: 80px;
}
#nav ul li.first.active {
	background-position: -2px 0px;
}
#nav ul li a {
	display: block;
	position: relative;
	left: 10px;
	width: 70px;
	height: 43px;
	color: #555;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}
#nav ul li.active a {
	width: 80px;
}
#nav ul li span {
	display: block;
	position: relative;
	left: 10px;
	width: 70px;
	height: 43px;
	color: #3870b2;
	background: url(../images/bg_nav.png) 100% 0px no-repeat;
	user-select: none;
}
#nav ul li.active span {
	width: 80px;
}
#nav ul li a ins,
#nav ul li span ins {
	display: block;
	position: relative;
	top: 12px;
	left: -10px;
	width: 77px;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
}
#nav ul li a ins,
#nav ul li span ins {
	width: 87px;
}
#nav ul li span ins {
	top: 7px;
	font-size: 18px;
}
#nav ins.rightBorder {
	float: right;
	display: block;
	width: 10px;
	height: 43px;
	background: url(../images/bg_nav.png) 100% -43px no-repeat;
}
#tabsHolder {
	position: relative;
	top: 20px;
	width: 625px;
	height: 295px;
	clear: both;
	background: url(../images/bg_left.jpg) repeat-x;
} /*----------------------------tabs------------------------------*/
.tabContent {
	display: none;
}
#tabcontent_image {
	display: block;
} /* ------------ colors ----------- */
.mobileAccordionHeader {
	display: none;
}
#tabcontent_colors {
	display: flex;
	align-items: flex-start;
}
#colorSamples {
	--color-sample-height: 117px;
	--color-samples-gap: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--color-samples-gap);
	float: left;
	width: 235px;
	height: calc(var(--color-sample-height) * 2 + var(--color-samples-gap));
	margin: 40px 10px 0 20px;
}
#colorSamples div {
	position: relative;
	width: 233px;
	height: var(--color-sample-height);
	font-family: Georgia, Garamond, 'Times New Roman', sans;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: #ddd;
	border: 2px solid transparent;
	box-sizing: border-box;
}
#swapColorsButton {
	position: absolute;
	top: calc(var(--color-sample-height) + (var(--color-samples-gap) / 2) - 22px);
	left: calc(50% - 22px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #b7b7b7;
	border-radius: 999px;
	background: linear-gradient(180deg, #fbfbfb 0%, #e3e3e3 100%);
	box-shadow: 0 1px 0 rgb(255 255 255 / 85%) inset, 0 1px 3px rgb(0 0 0 / 12%);
	cursor: pointer;
	color: #2f5f9b;
}
#swapColorsButton:hover {
	background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%);
}
#swapColorsButton:focus-visible {
	outline: 2px solid #3870b2;
	outline-offset: 2px;
}
.swapColorsIcon {
	display: block;
	width: 22px;
	height: 22px;
}
#colorSamples div.active {
	border-color: #3870b2;
	box-shadow: 0 0 0 2px rgb(56 112 178 / 25%);
}
#fgColorSample {
	background-color: rgb(233, 242, 234);
	cursor: pointer;
	cursor: hand;
}
#bgColorSample {
	background-color: rgb(87, 125, 93);
	cursor: pointer;
	cursor: hand;
	margin-top: 0;
}
#colorSamples div .colorLabel {
	display: inline-block;
	position: relative;
	text-shadow: 1px 1px black;
	top: 26px;
	width: 160px;
	margin: auto;
	color: #ddd;
	font-size: 19px;
	line-height: 1.2;
}
#colorSamples div span.selected {
	display: block;
	position: absolute;
	top: 64px;
	left: 75px;
	width: 82px;
	height: 26px;
	background: url(../images/bg_colorsample_selected.png) no-repeat;
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_colorsample_selected.png',sizingMethod='crop',enabled='true');
}
#colorSamples div span input {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 52px;
	height: 18px;
	font-family: Georgia, Garamond, 'Times New Roman', sans;
	font-size: 12px;
	color: #3870b2;
	text-align: center;
	border: 1px solid #a5acb2;
	background: #fff;
}
#cpHolder {
	float: left;
	margin: 40px 0 0 0;
	width: 310px;
	height: 277px;
}

@media (max-width: 980px) {
	#left {
		float: none;
		width: auto;
	}

	#nav {
		position: static;
		width: auto;
		height: auto;
		padding: 12px 12px 0;
	}

	#nav ul {
		float: none;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
	}

	#nav ul li,
	#nav ul li.active,
	#nav ul li.first.active {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
	}

	#nav ul li a,
	#nav ul li span,
	#nav ul li.active a,
	#nav ul li.active span {
		display: block;
		position: static;
		width: auto;
		height: auto;
		padding: 10px 14px;
		border-radius: 999px;
		background: #f2f2f2;
	}

	#nav ul li.active span {
		background: #dfe8f3;
		color: #2e5f96;
		box-shadow: inset 0 0 0 1px #bfd0e0;
	}

	#nav ul li a ins,
	#nav ul li span ins,
	#nav ul li.active a ins,
	#nav ul li.active span ins {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		font-size: 16px;
		line-height: 1;
	}

	#nav ins.rightBorder {
		display: none;
	}

	#tabsHolder {
		top: 0;
		width: auto;
		height: auto;
		min-height: 295px;
		margin: 0 10px 10px;
		border-radius: 10px;
		background-size: auto 100%;
	}
}

@media (max-width: 640px) {
	#nav {
		display: none;
	}

	#tabsHolder {
		margin: 0;
		min-height: 0;
		border-radius: 0;
		padding-top: 12px;
		background: none;
	}

	.mobileAccordionHeader {
		display: block;
		width: calc(100% - 24px);
		margin: 0 12px 10px;
		padding: 12px 14px;
		border: 1px solid #cfd5dd;
		border-radius: 12px;
		background: linear-gradient(to bottom, #fafafa 0%, #ececec 100%);
		color: #585858;
		font-family: Georgia, Garamond, 'Times New Roman', sans;
		font-size: 19px;
		line-height: 1.1;
		text-align: left;
		box-sizing: border-box;
	}

	.mobileAccordionHeader.active {
		border-color: #b4c5d9;
		background: linear-gradient(to bottom, #eef5fb 0%, #dae6f3 100%);
		color: #2f6297;
		box-shadow: 0 1px 0 rgb(255 255 255 / 65%) inset;
	}

	.mobileAccordionHeader span {
		display: block;
	}

	#colorSamples,
	#cpHolder {
		float: none;
		width: auto;
		margin: 14px 14px 0;
	}

	#tabcontent_colors {
		display: block;
	}

	#colorSamples {
		display: block;
		height: auto;
	}

	#colorSamples div {
		width: 100%;
	}

	#swapColorsButton {
		position: static;
		left: auto;
		top: auto;
		width: 48px;
		height: 48px;
		margin: 12px auto;
	}

	#colorSamples div .colorLabel {
		top: 22px;
		width: auto;
		max-width: calc(100% - 32px);
	}

	#colorSamples div span.selected {
		left: 50%;
		transform: translateX(-50%);
	}

	#cpHolder {
		height: auto;
		min-height: 277px;
		display: flex;
		justify-content: center;
	}
}