@import url(https://fonts.googleapis.com/css?family=Coda+Caption:800|PT+Serif:400,400italic,700,700italic|PT+Serif+Caption:400,400italic|PT+Sans:400,700,700italic,400italic|PT+Sans+Narrow:400,700);
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

/*************************/
/* Custom Signage Layout */
/*************************/

/* Columns */

div#csign_title_overlay
{
	background-image: url('../images/prodtitle_grad.png');
	background-repeat: repeat-x;
	background-position: top left;
	
	
	position: absolute;
	top: 10px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/* Gallery */

#gallery_captionbox
{
	margin-top: 18px;
	width: 632px;
}

#gallery_previewbox_container
{
	float: left;
	
	cursor: hand;
	cursor: pointer;
	
	margin-right: 14px;
}

#gallery_previewbox
{
	background-image: none;
	background-repeat: no-repeat;
	background-position: center center;
	
	width: 632px;
	height: 632px;
}

#gallery_controlbox_container
{
	float: left;
	width: 314px;
}

#gallery_pagination_container
{
	display: table;
	margin: 0px auto;
}

#gallery_thumbox_container
{
	
	margin-bottom: 7px;
	
	width: 314px;
	height: 635px;
	overflow: hidden;
}

.gallery_thumbnail_pagecontainer
{
	width: 321px; /* 314px + 7px */
	height: 642px; /* 635px + 7px */
}

.gallery_thumbnail_container
{
	width: 100px;
	height: 100px;
	
	float: left;
	
	position: relative;
	
	cursor: hand;
	cursor: pointer;
	
	margin-right: 7px;
	margin-bottom: 7px;
}

.gallery_thumbnail_container_overlay_over
{
	background-image: url('../images/thumboverlay_over.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
}

.gallery_thumbnail_container_overlay_down
{
	background-image: url('../images/thumboverlay_down.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
}

/* Cardinal box container */

.csign_cardbox_NW
{
	background-image: url('../images/prodblock_qtybar-NW.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 13px;
	height: 13px;
}

.csign_cardbox_NE
{
	background-image: url('../images/prodblock_qtybar-NE.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 13px;
	height: 13px;
}

.csign_cardbox_SW
{
	background-image: url('../images/prodblock_qtybar-SW.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	bottom: 0px;
	left: 0px;
	
	width: 13px;
	height: 13px;
}

.csign_cardbox_SE
{
	background-image: url('../images/prodblock_qtybar-SE.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	position: absolute;
	bottom: 0px;
	right: 0px;
	
	width: 13px;
	height: 13px;
}

/* Cardinal box container */

.csign_icon_size, .csign_icon_size_error
{
	background-image: url('../images/icon_size-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_size_error { background-image: url('../images/icon_size-red.png'); }

.csign_icon_printer, .csign_icon_printer_error
{
	background-image: url('../images/icon_printer-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_printer_error { background-image: url('../images/icon_printer-red.png'); }

.csign_icon_paper, .csign_icon_paper_error
{
	background-image: url('../images/icon_paper-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_paper_error { background-image: url('../images/icon_paper-red.png'); }

.csign_icon_packing, .csign_icon_packing_error
{
	background-image: url('../images/icon_packing-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 38px;
}

.csign_icon_packing_error { background-image: url('../images/icon_packing-red.png'); }

.csign_icon_mail
{
	background-image: url('../images/icon_mail-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_contact, .csign_icon_contact_error
{
	background-image: url('../images/icon_contact-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_contact_error { background-image: url('../images/icon_contact-red.png'); }

.csign_icon_color, .csign_icon_color_error
{
	background-image: url('../images/icon_color-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 32px;
}

.csign_icon_color_error { background-image: url('../images/icon_color-red.png'); }

.csign_icon_artwork, .csign_icon_artwork_error
{
	background-image: url('../images/icon_artwork-normal.png');
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	width: 32px;
	height: 33px;
}

.csign_icon_artwork_error { background-image: url('../images/icon_artwork-red.png'); }

/* --------------------------------------------------
/* FONTS */

.csign_A
{
	font-family: "Coda Caption", "Georgia", sans;
	font-size: 38px;
	color: #000000;
	text-shadow: none;
	
	font-weight: 800;
}

.csign_B
{
	/*font-family: "PT Serif Caption", "Georgia", serif;*/
	font-family: 'Zilla Slab', Georgia, serif;
	font-size: 18px;
	color: #000000;
	text-shadow: none;
	font-style: italic;
	
	font-weight: 400;
}

.csign_C
{
	/*font-family: "PT Sans", "Arial", sans;*/
	font-family: "Nunito Sans", arial, sans-serif;
	font-size: 20px;
	color: #000000;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_D
{
	/*font-family: "PT Serif", "Georgia", serif;*/
	font-family: 'Zilla Slab', Georgia, serif;
	font-size: 24px;
	color: #000000;
	text-shadow:0px 1px 0px #ffffff;
	
	font-weight: 700;
}

.csign_E
{
	/*font-family: "PT Sans", "Arial", sans;*/
	font-family: "Nunito Sans", arial, sans-serif;
	font-size: 16px;
	color: #000000;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_F
{
	/*font-family: "PT Sans", "Arial", sans;*/
	font-family: "Nunito Sans", arial, sans-serif;
	font-size: 16px;
	color: #1ea6f9;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_G, .csign_G_2
{
	/*font-family: "PT Serif", "Georgia", serif;*/
	font-family: 'Zilla Slab', Georgia, serif;
	font-size: 18px;
	color: #000000;
	text-shadow: none;
	
	font-weight: 700;
}

.csign_G_2 { color: #ff2a4f; }

.csign_H, .csign_H_2
{
	font-family: "PT Sans Narrow", "Arial Narrow", sans;
	font-size: 16px;
	color: #000000;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_H_2 { color: #ff2a4f; }

.csign_I, .csign_I_2, .csign_I_3
{
	/*font-family: "PT Sans", "Arial", sans;*/
	font-family: "Nunito Sans", arial, sans-serif;
	font-size: 16px;
	color: #8a8a8a;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_I_2 { color: #4088ed; }
.csign_I_3 { color: #0b439d; }

.csign_J, .csign_J_2, .csign_J_3, .csign_J_4
{
	font-family: "PT Sans Narrow", "Arial Narrow", sans;
	font-size: 16px;
	color: #8a8a8a;
	text-shadow: none;
	
	font-weight: 400;
}

.csign_J_2 { color: #4088ed; }
.csign_J_3 { color: #0b439d; }
.csign_J_4 { color: #ff2a4f; }

.csign_K
{
	/*font-family: "PT Serif", "Georgia", serif;*/
	font-family: 'Zilla Slab', Georgia, serif;
	font-size: 16px;
	color: #000000;
	text-shadow: none;
	font-style: italic;
	
	font-weight: 400;
}

.csign_L, .csign_L_2
{
	font-family: "PT Sans Narrow", "Arial Narrow", sans;
	font-size: 16px;
	color: #8a8a8a;
	text-shadow: none;
	
	font-weight: 700;
}

.csign_L_2 { color: #ff2a4f; }
