body {		position: relative;
		font-size: 12px;
		font-family:Verdana, Geneva, sans-serif;
}

#wrapper {	width: 1200px;
		height: auto;		
		margin: 0px auto;
		border: 1px solid #000;
		border-radius: 4px;
		box-shadow: 4px 0 4px -4px rgba(31, 73, 125, 0.8), -4px 0 4px -4px rgba(31, 73, 125, 0.8);
}

/*formats the logo on the front page*/
.logo {		border: 0px solid #000;
		width: 190px;
		height: 50px;
		margin-left: 35px;
		margin-top: 30px;
}

/*positions the clock to the top right within the gheader div*/
#clock {	margin: 20px 20px 0px 0px;
		text-align: right;
		width: 200px;
		height: 60px;
		border: 0px solid #bbb;
		background: #ffffff;
		float: right;
}

/*holds the navigation boxes e.g. buttons to all the other pages*/
#navbar {	clear: both;
		padding-top: 0px;
		padding-left: 198px;
		padding-right: 30px;
		margin-top: 20px;
		margin-left: 20px;
		height: 40px;
		width: 950px;
		border: 0px solid #bbb;
}

/*holds the buttons on the payment confirmation download pages*/
.dloadsdiv { 	display: inline-block;
		border: 0px solid #4d759a;
		width: 725px;
		height: auto;
		padding: 0px 0px 0px 425px;}

/*creates the buttons on the payment confirmation download pages*/
.dloads a {	display: block;
		background-color: #4d759a;
		padding: 10px;
		margin: 20px 20px 40px 20px; 
		width: 130px; 
		height: 15px;
		border: 1px solid #4d759a;
		border-radius: 4px;
		color: #ffffff;
		float: left;
		text-decoration: none;
		text-align: center;
		line-height: 14px;
		box-shadow: 1px 1px 1px 0px #4d759a;}

/*holds the heading text for all pages except the color and monochrome gallery*/
.header {	border: 0px solid #bbb;
		width: auto;
		height: auto;
		padding: 10px;
		text-align: center;
		line-height: 16px;
}

/*holds the heading text for the color and monochrome gallery*/
.cm_header {	width: 900px;
		height: auto;
		margin: 0px 0px 0px 135px;
		padding: 5px;
		text-align: justify;
		line-height: 16px;
		border: 0px solid #bbb;
}

/*formats any main heading text on a page*/
h1 {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
}

/*formats any subheading text on a page*/
h2 {		font-family: Verdana, Geneva, sans-serif;
		font-size: 12px;
		font-weight: normal;
		text-align: left;
}

/*div containing the home page image*/
#fimage {	height: 560px;
		width: 885px;
		margin: 0px auto 0px auto;
		border: 0px solid #bbb;	
		padding-top: 40px;
		text-align: center;
		background: #ffffff;
		font-size: 16px;
}

/*creates the link navigation buttons that sit in the header div e.g. Contact Us*/
.links a  {	background-color: #4d759a;
		padding: 10px 10px 10px 10px;
		width: 130px; 
		height: 15px;
		border: 1px solid #bbb;
		border-radius: 4px;
		float: left;
		color: #ffffff;
		text-decoration: none;
		text-align: center;
		line-height: 14px;
		box-shadow: 1px 1px 1px 0px #4d759a;}


/*highlights the button text for current page being diplayed in the pageload div*/
.links a.highlite
	{	background-color: #94acc2;
		color: #ffffff;}

/*creates the 'About' navigation button for information to be diplayed in a popup box on hover.*/
.navbutton {	position: relative;
		padding: 10px; 
		width: 130px;
		height: 15px;
		background-color: #4d759a;
		border: 1px solid #bbb;
		border-radius: 4px;
		text-align: center;
		color: #ffffff;
		cursor: default;
		float: left;
		line-height: 14px;
		box-shadow: 1px 1px 1px 0px #4d759a;}

/*creates buttons for product information to be diplayed in a popup box on hover, e.g. Print Quality.*/
.probutton {	position: relative;
		padding: 10px 0px 10px 0px; 
		width: 90px;
		height: 10px;
		line-height: 10px;
		background-color: #bbbbbb;
		border: 1px solid #bbb;
		border-radius: 5px;
		margin-right: 5px;
		text-align: center;
		color: #36454f;
		cursor: default;
		float: left;
		box-shadow: 0px 0px 0px 1px #bbb;}


/*creates a container to display popup text for 'About' in and sets it to invisible*/
.navpopup {	position: absolute;
		top: 40px;
		left: 10px;
		width: 300px;
		background-color: #4d759a;
		padding: 20px;
		border-radius: 8px;
		border: 1px solid #bbb;
		text-align: left;
		visibility: hidden;
		opacity: 0;
		line-height: 16px;
}

/*creates a container to display the product information popup text in and sets it to invisible e.g.'Print Quality'*/
.propopup {	position: absolute;
		top: 40px;
		left: 10px;
		width: 300px;
		background-color: #ffffff;
		font-weight: normal;
		color: #36454f;
		padding: 20px;
		border-radius: 8px;
		border: 1px solid #bbb;
		text-align: left;
		visibility: hidden;
		opacity: 0;
		line-height: 16px;
}

/*triggers the 'About' navigation button popup box to become visible when hovered over*/
.navbutton:hover .navpopup{visibility: visible; opacity: 1;
		z-index: 1;}

/*triggers the product buttons popup boxes to become visible when they are hovered over e.g. Print Quality*/
.probutton:hover .propopup{visibility: visible; opacity: 1;
		z-index: 1;}

/*holds the chevrons that scroll through the galleries*/
.header_chevron { display: inline-block;
		width: 870px;
		height: auto;
		background-color: #ffffff;
		padding: 25px 0px 25px 0px;
		margin: 0px 0px 0px 135px;
		text-align: center;
		border: 0px solid #bbb;
}

/*creates the arrows that scroll through the galleries*/
.lchevron {
	--s: 50%; /* control the shape (can be percentage) */
	display: inline-block;
	margin: 0px 195px 0px 25px; /*moves chevron left or right*/
	height: 40px;
	float: left;
	aspect-ratio: 4/5;
	clip-path: polygon(100% 0,calc(100% - var(--s)) 0,0 50%,calc(100% - var(--s)) 100%,100% 100%,var(--s) 50%);
	background: #bbbbbb;
}

.rchevron {
	--s: 50%; /* control the shape (can be percentage) */
	display: inline-block;
	margin: 0px 0px 0px 0px; /*moves chevron left or right*/
	height: 40px;
	float: right;
	aspect-ratio: 4/5;
	clip-path: polygon(0 0,var(--s) 0,100% 50%,var(--s) 100%,0 100%,calc(100% - var(--s)) 50%);
	background: #bbbbbb;
}
			
/*container that holds each pages contents in conjunction with the navigation button selected. Height and width are set to auto to enable it to use the height and width
set for each individual page in the 'loadp' script*/
#pageload{	width: auto;
		height: auto;
		border: 0px solid #3aeb34;
		overflow: hidden;
}


/*controls the hover over purchase icons and their placement for the stock images*/
.purchase a.image {			;}
.purchase a .buyicon {			opacity: 0; width:0; height:0; border:0;}
.purchase a.image:hover .buyicon {	display: inline;
					position: relative;
					top: -50px;
					left: 20px;
					float: left;
					opacity: 1;
				   	cursor: default;}


/*The container that holds all content for the color gallery*/
.ccontainer {	width: 860px;
		height: auto;
		background: #ffffff;
		margin: 0px 0px 0px 132px;
		padding: 0px 20px 20px 20px;
		border: 0px ridge #bbb;
}

/*The container that holds all content for the monochrome gallery*/
.mcontainer {	width: 660px;
		height: auto;
		background: #ffffff;
		margin: 0px 0px 0px 132px;
		padding: 0px 120px 40px 120px;
		border: 0px solid #edf1f4;
}

/*The container that holds all other containers to enable auto flexing for different resolutions*/
.container-fluid{width: 1165px;
		height: auto;
		border: 0px solid #2986cc;
}

/*The container that holds all content for the home page*/
.container{	width: 1050px;
		height: auto;
		margin: 0px 0px 0px 70px;
		overflow: hidden;
		border: 0px solid #bbb;
}

/*The container that holds both the search box and search box title*/
.container .search{	justify-content: space-between;
			padding: 10px 0px 10px 0px;
			border: 0px solid #bbb;
			text-align: center;
}

/*The search box title*/
.container .search h1{	width: 50%;
			height: 40px;
			margin: auto;
			letter-spacing: 1px;
}

/*The search box and format of text entered*/
.container .search input{	width: 500px;
				height: 40px;
				margin: auto;
				padding: 5px 16px;
				background: transparent;
				border: 1px solid #000;
				font-size: 12px;
				letter-spacing: 0px;
				outline: none;
}

/*The color and weight of the 'hint' text in the search box*/
.container .search input::placeholder{	color: black;
					font-weight: 500;
}

/*The container that holds all the image boxes for the stock gallery page*/
.sgallery {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4,250px);
	grid-auto-rows: 200px;
}

/*The individual image boxes for the stock gallery page*/
.sgallery .item img {
	display: flex;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*The dimensions for each item image for the stock gallery page*/
   .sgallery .item:first-child { grid-row: span 2; }
   .sgallery .item:nth-child(4n) { grid-row: span 2; }
	
/*The container that holds all the image boxes for the colour gallery page*/
.cgallery {	display: grid;
		grid-row-gap: 10px;
		grid-column-gap: 20px;
		grid-template-columns: repeat(28, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		grid-template-areas:
		"p1  p2  p3  p4  p13 p14 p15 p16  p25 p26 p27 p28  p36 p37 p38 p39  p48 p49 p50 p51  p60 p61 p62 p63  p72 p73 p74 p75"
		"p1  p5  p6  p4  p13 p17 p18 p16  p25 p29 p30 p28  p36 p40 p41 p39  p48 p52 p53 p51  p60 p64 p65 p63  p72 p76 p77 p75"
		"p7  p5  p8  p9  p19 p17 p20 p21  p31 p29 p32 p33  p42 p40 p43 p44  p54 p52 p55 p56  p66 p64 p67 p68  p78 p76 p79 p80"
		"p10 p11 p8 p12  p22 p23 p20 p24  p31 p34 p32 p35  p45 p46 p43 p47  p57 p58 p55 p59  p69 p70 p67 p71  p81 p82 p79 p83";
}

/*The placement for each item image in the colour gallery page*/
.cgallery .item-01 {grid-area: p1;}
.cgallery .item-02 {grid-area: p2;}
.cgallery .item-03 {grid-area: p3;}
.cgallery .item-04 {grid-area: p4;}
.cgallery .item-05 {grid-area: p5;}
.cgallery .item-06 {grid-area: p6;}
.cgallery .item-07 {grid-area: p7;}
.cgallery .item-08 {grid-area: p8;}
.cgallery .item-09 {grid-area: p9;}
.cgallery .item-10 {grid-area: p10;}
.cgallery .item-11 {grid-area: p11;}
.cgallery .item-12 {grid-area: p12;}

.cgallery .item-13 {grid-area: p13;}
.cgallery .item-14 {grid-area: p14;}
.cgallery .item-15 {grid-area: p15;}
.cgallery .item-16 {grid-area: p16;}
.cgallery .item-17 {grid-area: p17;}
.cgallery .item-18 {grid-area: p18;}
.cgallery .item-19 {grid-area: p19;}
.cgallery .item-20 {grid-area: p20;}
.cgallery .item-21 {grid-area: p21;}
.cgallery .item-22 {grid-area: p22;}
.cgallery .item-23 {grid-area: p23;}
.cgallery .item-24 {grid-area: p24;}

.cgallery .item-25 {grid-area: p25;}
.cgallery .item-26 {grid-area: p26;}
.cgallery .item-27 {grid-area: p27;}
.cgallery .item-28 {grid-area: p28;}
.cgallery .item-29 {grid-area: p29;}
.cgallery .item-30 {grid-area: p30;}
.cgallery .item-31 {grid-area: p31;}
.cgallery .item-32 {grid-area: p32;}
.cgallery .item-33 {grid-area: p33;}
.cgallery .item-34 {grid-area: p34;}
.cgallery .item-35 {grid-area: p35;}
.cgallery .item-36 {grid-area: p36;}

.cgallery .item-37 {grid-area: p37;}
.cgallery .item-38 {grid-area: p38;}
.cgallery .item-39 {grid-area: p39;}
.cgallery .item-40 {grid-area: p40;}
.cgallery .item-41 {grid-area: p41;}
.cgallery .item-42 {grid-area: p42;}
.cgallery .item-43 {grid-area: p43;}
.cgallery .item-44 {grid-area: p44;}
.cgallery .item-45 {grid-area: p45;}
.cgallery .item-46 {grid-area: p46;}
.cgallery .item-47 {grid-area: p47;}
.cgallery .item-48 {grid-area: p48;}

.cgallery .item-49 {grid-area: p49;}
.cgallery .item-50 {grid-area: p50;}
.cgallery .item-51 {grid-area: p51;}
.cgallery .item-52 {grid-area: p52;}
.cgallery .item-53 {grid-area: p53;}
.cgallery .item-54 {grid-area: p54;}
.cgallery .item-55 {grid-area: p55;}
.cgallery .item-56 {grid-area: p56;}
.cgallery .item-57 {grid-area: p57;}
.cgallery .item-58 {grid-area: p58;}
.cgallery .item-59 {grid-area: p59;}
.cgallery .item-60 {grid-area: p60;}

.cgallery .item-61 {grid-area: p61;}
.cgallery .item-62 {grid-area: p62;}
.cgallery .item-63 {grid-area: p63;}
.cgallery .item-64 {grid-area: p64;}
.cgallery .item-65 {grid-area: p65;}
.cgallery .item-66 {grid-area: p66;}
.cgallery .item-67 {grid-area: p67;}
.cgallery .item-68 {grid-area: p68;}
.cgallery .item-69 {grid-area: p69;}
.cgallery .item-70 {grid-area: p70;}
.cgallery .item-71 {grid-area: p71;}

.cgallery .item-72 {grid-area: p72;}
.cgallery .item-73 {grid-area: p73;}
.cgallery .item-74 {grid-area: p74;}
.cgallery .item-75 {grid-area: p75;}
.cgallery .item-76 {grid-area: p76;}
.cgallery .item-77 {grid-area: p77;}
.cgallery .item-78 {grid-area: p78;}
.cgallery .item-79 {grid-area: p79;}
.cgallery .item-80 {grid-area: p80;}
.cgallery .item-81 {grid-area: p81;}
.cgallery .item-82 {grid-area: p82;}
.cgallery .item-83 {grid-area: p83;}


/*The individual image boxes for the colour gallery page*/
.cgallery .item img {
	display:grid;
	padding: 7px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}

/*The container that holds all the image boxes for the monochrome gallery*/
.mgallery {	display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(12, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: center;
		overflow-y: hidden;
		overflow-x: auto;
		scroll-behavior: smooth;
		grid-template-areas:
		"m01 m02 m03  m10 m11 m12  m19 m20 m21  m28 m29 m30"
		"m01 m04 m05  m10 m13 m14  m19 m22 m23  m28 m31 m32"
		"m06 m04 m07  m15 m13 m16  m24 m22 m25  m33 m31 m34"
		"m08 m09 m07  m17 m18 m16  m26 m27 m25  m35 m36 m34";
}

/*The placement for each item image in the monochrome gallery*/
.mgallery .mitem-01 {grid-area: m01;}
.mgallery .mitem-02 {grid-area: m02;}
.mgallery .mitem-03 {grid-area: m03;}
.mgallery .mitem-04 {grid-area: m04;}
.mgallery .mitem-05 {grid-area: m05;}
.mgallery .mitem-06 {grid-area: m06;}
.mgallery .mitem-07 {grid-area: m07;}
.mgallery .mitem-08 {grid-area: m08;}
.mgallery .mitem-09 {grid-area: m09;}

.mgallery .mitem-10 {grid-area: m10;}
.mgallery .mitem-11 {grid-area: m11;}
.mgallery .mitem-12 {grid-area: m12;}
.mgallery .mitem-13 {grid-area: m13;}
.mgallery .mitem-14 {grid-area: m14;}
.mgallery .mitem-15 {grid-area: m15;}
.mgallery .mitem-16 {grid-area: m16;}
.mgallery .mitem-17 {grid-area: m17;}
.mgallery .mitem-18 {grid-area: m18;}

.mgallery .mitem-19 {grid-area: m19;}
.mgallery .mitem-20 {grid-area: m20;}
.mgallery .mitem-21 {grid-area: m21;}
.mgallery .mitem-22 {grid-area: m22;}
.mgallery .mitem-23 {grid-area: m23;}
.mgallery .mitem-24 {grid-area: m24;}
.mgallery .mitem-25 {grid-area: m25;}
.mgallery .mitem-26 {grid-area: m26;}
.mgallery .mitem-27 {grid-area: m27;}

.mgallery .mitem-28 {grid-area: m28;}
.mgallery .mitem-29 {grid-area: m29;}
.mgallery .mitem-30 {grid-area: m30;}
.mgallery .mitem-31 {grid-area: m31;}
.mgallery .mitem-32 {grid-area: m32;}
.mgallery .mitem-33 {grid-area: m33;}
.mgallery .mitem-34 {grid-area: m34;}
.mgallery .mitem-35 {grid-area: m35;}
.mgallery .mitem-36 {grid-area: m36;}

/*The individual image boxes for the monochrome gallery*/
.mgallery .mitem img {
	display: grid;
        padding: 14px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera*/
.scroll1::-webkit-scrollbar {display: none;}

/* Hide scrollbar for IE Edge and Firefox*/
.scroll2 {-ms-overflow-style: none; scrollbar-width: none;}

#footer{	clear: both;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		height: 40px;
		width: 1180px;
		line-height: 40px;
		border: 0px solid #f2d2bd;
		text-align: center;
}