@charset "utf-8";
/* CSS Document */

HTML 		{overflow-y:scroll; background-color:#FFFFFF;}
/*BODY		{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}*/ 
A			{
	text-decoration:none;
	cursor:pointer;
	outline:none;
	color:#6D4886;
}
H1			{font-size:15px; color:#181818;margin:0px;padding:0px 0px 5px 0px;}
H2			{margin:0px; padding:5px 0px; font-size:13px;}
H3			{margin:0px; padding:0px; font-size:14px;}
TD			{border-collapse:collapse;}
TABLE		{border-collapse:collapse; /*font-family:Verdana, Arial, Helvetica, sans-serif;*/}
INPUT		{background:#fff; border:1px solid #818181;}
/*A:hover		{text-decoration:underline;}*/
:focus 		{ -moz-outline-style:none;}
.infoBoxButton { background: #307191; /*font-family: 'kelson_sanslight';*/ text-transform: uppercase; margin-bottom: 5px; text-align: center; padding: 3px 6px; color:#fff; }
a.infoBoxButton, .infoBoxButton a, a .infoBoxButton, .infoBoxButton a:visited { text-transform: uppercase; text-decoration: none; color: #fff; padding: 3px 6px; display: inline-block; margin-top: 6px;}
.infoBoxButton input { padding:0; text-transform: uppercase; /*font-family: 'kelson_sanslight';*/ background: none; border: none; color: #fff; margin:0; }
.infoBoxButton:hover, a .infoBoxButton:hover, .infoBoxButton a:hover, .infoBoxButton input:hover { cursor: pointer; }
#pickfiles { color: #fff !important;padding: 6px 20px; font-weight: 700; }
#wrapper1 	{position:relative; text-align:left; width:960px; margin: 0 auto;}
#wrapper2 	{position:relative; text-align:left; width:960px;}
#header 	{margin: 0 auto; width:960px; height:141px; background-repeat:no-repeat;}
#maincol 	{position:relative;	margin:0;	padding:10px 0px;}
#leftcol 	{position:relative;	top:0px; left:0px; float:left; width:191px;	margin:0; z-index:100; padding-bottom:7px;}
#rightcol 	{position:relative;	top:0px; right:0px; float:right; width:191px; margin:0;	z-index:99;}
#centercol 	{position:relative;	margin:auto;}

.red			{color:#a83131;}
.blue			{color:#4b8faf;}
.white			{color:white;}
.grey			{color:#666666;}
.kelson			{/*font-family:'kelson_sanslight';*/ font-size:18px;}

#pickfiles { font-weight: 400!important;}

/******* GENERAL LAYOUT ***********/
.five		{position:relative; width:960px; overflow:hidden; clear:both}
.two_one	{position: relative;
    float: left;
    width: 477px;
    overflow: auto;
    margin: 2px;}
.three_one	{position:relative; float:left; width:318px; margin-right:2px; overflow:auto;}
.nomr { margin-right: 0; }
.pageHeading {
font-weight: 700;
font-size: 16px;
}

/******* HOMEPAGE BANNER **********/
.banner-container { position: relative; }
.banner-container .top-decoration { position: absolute; top: 12px; z-index: 99; }
.banner-container .bottom-decoration { position: absolute; bottom: -8px;z-index: 99; }

/***********TILE BUILDER***********/

#orientation-select input[type="radio"] {
    display:none;
}

#orientation-select input[type="radio"] + label {
}

#vertical-size {
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
position: absolute;
right: -42px;
top: 279px;
}

#orientation-select input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

#orientation-select input[type="radio"]:checked + label span {
    background:url(check_radio_sheet.png) -57px top no-repeat;
}
.draggable {
	width: 90px;
	height: 90px;
	float: left;
}
.sbHolder { outline: none; }
.draggable3 {
	width:60px;
	height:60px;
	padding:0px;
	margin:0px
}
#containment-wrapper {
	border:1px solid #ccc;
	float: right;
}
/*.container {
	float:left;
}*/
.container2 {
	overflow:hidden;
}
.remove {
	cursor:pointer;
}
.recrop {
	cursor:pointer;
}
.album-photos {
	overflow:auto;
	background:none;
	padding-bottom:15px;
}
.fbalbum {
	cursor:pointer
}
.options {
	clear:both;
	background-color:#276F92;
	border:1px solid #ccc;
	padding:3px;
	z-index:99990;
	position:absolute;
	top:0;
	width:39px;
	white-space:nowrap;
	color:white;
}
.options a {
	color:white;
}
.arrow {
	background-image: url(images/navarrow-right.png);
	background-repeat: no-repeat;
	background-position: 240px 7px;
}
.arrowdown {
	background-image: url(images/navarrow-down.png);
	background-repeat: no-repeat;
	background-position: 240px 7px;
}
.fileUploaderBtn {
	margin:0 auto;
	text-align:center;
	background-image: url(uploadify/collage.png);
	background-repeat:no-repeat;
	background-position: 0px 0px;
}
.album_title {
	border-bottom:1px dotted #276F92;
	cursor:pointer;
	padding:3px 0px;
	margin:3px 0px;
	clear:both
}
.plupload, #container form {
	height:35px !important;
	top:0 !important;
}
.purple {
	color: #276F92;
}
.ui-draggable-dragging {
	z-index:99999;
}
.dropped {
	overflow: hidden;
	cursor:move;
}
.pointer {
	cursor:pointer !important;
}
.ui-widget-header {
	background:#276E92;
}
.dropped .error, .dropped .warning {
	position:absolute;
	display:none;
	z-index:1000;
}
.error {
	background: #f2dede;
	opacity: 0.8;
	border: 1px solid red;
	width: 100%;
	border-left: 5px solid red
}
.error img, .warning img {
	position: absolute;
	left: 10px;
	top: 7px;
	height: 20px;
}
.error span {
	text-align: left !important;
	display: block;
	padding-left: 40px;
	color: #b94a48;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	padding-top: 10px;
	padding-bottom: 10px;
}
.warning {
	background-color: #fcf8e3;
	border: 1px solid #fdbb29;
	opacity: 0.8;
	width: 100%;
	border-left: 5px solid #fdbb29;
}
.warning span {
	text-align: left !important;
	display: block;
	padding-left: 40px;
	color: #222;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	padding-top: 10px;
	padding-bottom: 10px;
}
.autopop-button {
	background: #276f92;
	padding: 6px 11px;
	color: #fff !important;
	display: block;
	width: 100px;
	text-align: center;
	float: right;
}
.canvas-loader {
	position: absolute;
left: 39%;
top: 39%;	
}
.category-image {
	float: left;
margin-right: 5px;
margin-bottom: 3px;
}
.instagram_album {
	overflow-y: scroll;
	max-height: 447px;
}
.preuploaded small { cursor:pointer; }
.fileUploadQueueItem {
	border: 1px solid #dddedd;
	margin-top: 2px;
	padding: 0px;
	width: 200px;
}
.fileUploadQueueItem .cancel {
	float: right;
}
.fileUploadProgress {
	background-color: #8a386d;
	border:none;
	margin-top: 3px;
	width: 100%;
}
.collage-size-table {
	float: left;
	cursor: pointer;
	margin: 5px;
}
.collage-size-table td {
	border: 1px solid #e9e9e9;
	background: #a9a9a9;
	
}
.collage-size-table.active td, .collage-size-table.selected td {
	border-color: #7bacc4;
	
}
.instagram-step .step-title {
	background: #989489;
	color: #fff;
	padding: 13px 10px;
	font-family: arial, Helvetica, sans-serif;
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 12px;	
}
.instagram-step {
	clear: both;	
}
.size {
	background : #999;
	color: #fff;
	text-align: right;
	padding-left:35px;
	padding-top:55px;
	padding-right:5px;
	padding-bottom: 5px;
	display: inline-block;
}
.tickbox, .size:hover{ background: #307191; text-decoration: none; }
.size a { color: #fff !important; }
#mainh1	{position: relative;top: -380px;left: 30px;font-size: 65px !important;padding-left: 5px;font-weight: normal;line-height: 68px;}
#ilogo	{position: relative;top: -661px;left: 254px; width:65px;}
#wayouge	{position: relative;top: -386px; left:-35px; background: rgba(72,62,57,0.9);display: inline-block;padding: 10px;border-radius: 10px; color:white; font-size:13px}
#wayouge ul	{padding:0; margin:0}
#wayouge li	{list-style:none}

#canvas-options { width: 340px; float: left; overflow:hidden; padding-top: 14px; }
#add-to-cart, #delete_btn  { float:right; border: 1px solid #999; background: none; color: #fff; padding: 3px 9px; margin-right: 14px; padding: 10px 15px;  border-radius: 300px;}
#add-to-cart:hover, #delete_btn:hover  { cursor: pointer;     opacity: 0.8; }
/*#delete_btn { float:right; border: 1px solid #999; background: #307191; color: #fff; padding: 3px 9px; margin-right: 14px; padding: 10px 15px;}*/
#delete_btn:hover { cursor: pointer; }
/*#order-buttons { padding-bottom: 20px; overflow: hidden;}*/
#order-summary.orderSummary_designTile {
    float: right;
    padding-right: 15px;
    width: 100%;
    padding-bottom: 8px;
    text-align: right;
}
#order-buttons {
    padding-bottom: 20px;
    overflow: visible;
    float: left;
    width: 100%;
    padding-left: 22px;
}
#order-summary { position:relative; float: left; left: 12px; top: 15px;}
#canvas-container { width: 604px; float: right; }
.tile-finish {background: #999;
/*font-family: 'kelson_sanslight';*/
color: #fff;
padding: 7px 14px;
font-size: 18px;
}
.tile-finish.ticked { background: #307191; }
.productListing-heading {
background: #307191;
color: #fff;
font-family: kelson_sanslight;
}

/******CREATE ACCOUNT******/
#create-account td.main { width: 220px; }

/****TILE SIZES*******/
a.size:nth-child(1) {
	padding-left: 17px;
	padding-right: 5px;
	padding-top: 33px;
	padding-bottom: 5px;
}
a.size:nth-child(2) {
	padding-left: 2px;
	padding-right: 4px;
	padding-top: 56px;
	padding-bottom: 5px;
}
a.size:nth-child(3) {
	padding-left: 59px;
	padding-right: 4px;
	padding-top: 74px;
	padding-bottom: 5px;
}
/******* CHECKOUT *******/
.infoBoxlb			{-webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px; border:1px solid #cccccc; padding:2px; margin:0px 2px; padding:10px;}


/****** FOOTER *******/
/*footer {
	background: #307191;
	width: 960px;
	margin: auto;
	border-top-left-radius: 5px;
	height: 53px;
	border-top-right-radius: 5px;
	margin-top: 30px;
}
#footer a { color: #fff; font-size: 10px; float: right; margin: 5px; line-height: 42px;}
#footer .social-icon { float: left; position: relative; top: 7px; left:20px;} */


#horizontal-size, #vertical-size { display: none; }


/****** cross sell ajax ********/
#cross-sell-promotions h3 {
display: block;
/*font-family: 'kelson_sanslight';*/
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
font-size: 18px;
}
#cross-sell-promotions {
background: #fff;
padding: 30px;
border-radius: 17px;
}
#cross-sell-promotions form { position: relative; }
#cross-sell-promotions label {
position: absolute;
top: 0;
right: 20px;
}
.cross-sell-name {/*font-family: 'kelson_sanslight';*/ font-size: 17px; font-weight: 700;}
.cross-sell-price {/*font-family: 'kelson_sanslight';*/ font-size: 14px; font-weight: 700;}
.cross-sell-image { height: 150px; width: 150px; float: left;}
.cross-sell-image img { width: 100%; }
.cross-sell-description { margin-left: 20px; float: left; width: 290px; }
#cross-sell-promotions p { margin: 0; }
.cross-sell-text { font-size: 12px; margin-top: 10px !important;}
#add-cross-sells {
width: 120px;
clear: both;
position: absolute;
right: 147px;
bottom: 0;
}
.cross-sell-product {
overflow: hidden;
}

#refuse-cross-sells {
clear: both;
width: 100px;
position: absolute;
right: 21px;
bottom: 0;
}
/* 15 feb 2023 */
.fullscreen-container {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

#popdiv {
  position: absolute;
            top: 34%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: auto;
            text-align: center;
            background-color: #fff;
            border:#ffff;
            box-sizing: border-box;
            padding: 10px;
            z-index: 100;
            border-radius: 15px;
    		-moz-border-radius: 15px;
    		font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 12px;
           /* display: none; */
		   padding:30px;
		   text-align:left;
		   font-size: 11px;
           line-height: 20px; 
} 
#close_btn{
	position: relative;
            right: 0;
            top: 0;
            background-color: #285fd8;
            color: white;
           /* border-radius: 50%; */
            padding: 10px;
			float:right;
			margin-top:35px;
			font-weight: bold;
            padding: 10px 20px;
            border-radius: 5px;
            text-transform: uppercase;
}
#popdiv a{
	color:#0161e0;
	font-weight: bold;
}

/* colour picker design */
  .color-label {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff; /* White label text on black page */
  }

  /* Tooltip container */
  .tooltip-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    background: #f5f5f5; /* Light background for contrast */
    font-weight: bold;
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
  }

  /* Tooltip text */
  .tooltip-tile .tooltip-tile-text {
    visibility: hidden;
    width: 220px;
    background-color: #f5f5f5; /* Light tooltip background */
    color: #000; /* Dark text for readability */
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(255,255,255,0.3);
  }

  /* Show tooltip on hover */
  .tooltip-tile:hover .tooltip-tile-text {
    visibility: visible;
    opacity: 1;
  }

  /* Arrow for tooltip */
  .tooltip-tile .tooltip-tile-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #f5f5f5 transparent transparent transparent;
  }