/*
@import url('https://fonts.googleapis.com/css?family=Roboto');	

*/
	@font-face {
		font-family: 'Roboto',sans-serif;
		src: url('../font/Roboto-Light.ttf');
		font-weight: 300;
	}
	@font-face {
		font-family: 'Roboto',sans-serif;
		src: url('../font/Roboto-Regular.ttf');
		font-weight: 400;
	}
	@font-face {
		font-family: 'Roboto',sans-serif;
		src: url('../font/Roboto-Medium.ttf');
		font-weight: 500;
	}
	
	*{box-sizing:border-box;}
	
	body{
		background-color:#d7d7d7;
		margin: 10px;
		}
		
	body, select, select option,.search input[type='text'], input[type='submit']{
		font-family: monospace;
		font-family: Arial, sans-serif;
		font-family:'Roboto', sans-serif;
		}	
		
	div, form {box-sizing: border-box;display:flex;}
	form#registerForm {flex-direction: column;}
	a {color:#000;text-decoration:none;}
	a:hover {color:#000;text-decoration:underline;}
	a:hover span {text-decoration:underline;}

	hr {border-bottom: dotted 1px #ccc;border-top: none;}
	a h3 {color:black;}
	p{padding:0;margin:0 0 10px 0;}	
	
	span {display: inline-flex;}	
	h2 {margin-top:0;}
	h2 a{
    margin: 0 5px;
}
	h2 a, h2 a:hover{text-decoration:none;}
	p a {text-decoration:underline;}
	p a:hover {}
	ul {margin:0;padding:0;}


	main#home p{
		font-weight:300;
		}

	#articles ul li {font-size: 13px;}	
	.table{flex-direction: column;}

	h1, #articleTitle {
		font-size:26px;
		font-weight: 400;
		}
	h2 , h2 a{
		font-size: 24px;
		font-weight: 400;
		line-height: 25px;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		margin-bottom: 10px;
	}
	
	h3{
		font-size:14px;
		font-weight: 400;
		text-transform: uppercase;
	}
	p span.inline-heading{text-transform:uppercase;font-weight:400;}
	#home h2{
		/*font-family: 'Clarendon';*/
		font-size:62px;
		margin: 0 0 10px 0;
		line-height: 50px;
		text-transform: uppercase;
		font-weight: 300;
	}
	#home2 h2{
		font-size: 32px;
		margin: 0 0 10px 0;
		font-weight: 300;
		text-transform: uppercase;	
	}	

	#articles ul li,
	ul.leftMenu,
	#articles,
	.detail,
	.detail ul li,
	ul li,
	p,
	a{
		font-size: 14px;
		}
	
	.small, .small a, .small li{
		font-size: 12px!important;
	}	
	tel{font-weight:bold;}

	/* layout */
	
	main {
		padding: 0;

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		min-height: 300px;
		/* width: 100%; */
		}	
	.pad40{padding-top:40px;flex-direction: column;}
	nav ul {
		padding: 0;
		margin: auto;
		}
	
			
	header{    
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20px;
	}
	header section{    
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	header section div,header section span,header section a {    
		display: flex;
		align-items:center;
		color: #999;
		}	
	header .search{    
		display: flex;
		justify-content: flex-end;
		}
	header #logo {}	
	header #logo img {width: 150px;}	
	
	header ul#personal{display:flex;flex-direction:row;height:fit-content;text-transform: uppercase;}
	header ul#personal li{display: flex;align-items:center;margin-left:10px;color:#999;user-select: none;}
	header ul#personal li a{align-items: flex-start;color:#999;}
	header ul#personal li a:hover{align-items: flex-start;color:#222;text-decoration:none;}
	header ul#personal li span.li-space{width:10px;}
	header ul#personal li#collections span#collection-sprite{width:20px;height:20px;background-image:url('../img/collection-sprite.svg');background-position:left;}
	header ul#personal li#collections a{align-items: center;}
	header ul#personal li#collections a:hover span#collection-sprite{background-position:right;text-decoration:none;}
	header ul#personal li#collections a:hover{text-decoration:none;}
	header ul#personal li#collections a:hover span{color:#222;text-decoration:none;}
	
	.wrapper{
		margin:auto;
		/* min-width: 976px; */
		max-width: 1280px;
		background-color:#fcfcfc;
		display: flex;
		flex-direction: column;
		width: 100%;
	}


	
	.dash{flex-direction: column;}
	.col-1{width:33%;}
	.col-2{width:66%;}
	.col-1 img, .col-2 img{width:100%;}
	.col-1,.col-2{
		display:flex;
		flex-direction:column;
		padding: 30px;
	}
	#home .col-1, #home .col-2{		justify-content: center;}
	.flex-row {flex-direction:row;}
	.flex-col {flex-direction:column;}
	
	#articles{width: 75%;margin-bottom: 20px;}			
	#articles, .detail{
		display: flex;
		flex-direction: column;
		}
	.detail{
			/* min-width: 620px; */
			/* margin-left: 20px; */
			width: 70%;
		}	


		
	#articles ul, .detail ul{ 
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;	
		margin: 0;
		font-size:0;
		}
	#articles ul li, .detail ul li {
		display: flex;
		flex-direction: column;
		padding: 0 20px 15px 0;
		justify-content: space-between;
		}
	#articles ul li img {height:auto;width: 100%;}
	#articles ul li .articleName{margin-bottom:5px;    display: inline;}
	#articles.search{width: 70%;}
	#articles.search ul li:nth-child(3n), #articles ul li:nth-child(3n) {margin-right:0;}	
	#articles ul li, .detail ul li{width: 33%; position: relative;}
	#articles li a{color:#000;text-decoration:none;margin-bottom: 5px;}

	ul#collectionArray li {width: 178px;}
	ul#collectionArray li:nth-child(4n) {}
	ul#collectionArray .checkbox{padding-right:5px;}
	
	img#article  {max-width: 620px;/* width: 49%; */}	
	#articleName{text-transform:capitalize;}
	#articleTitle{
	    padding-left: 20px;	
		font-size: 32px;
		margin: 0 ;
		font-weight: 300;
	}
	#articles .articleThumbWrapper{flex-direction:column;    position: relative;}
	
	main.no-nav {
		flex-direction: column;
		align-items: flex-start;
		padding: 0 40px;
		justify-content: flex-start;
		}
		
	.standout{margin-bottom:10px;margin-right: 40px;}
	span.standout{display:inline;    line-height: 15px;}
	.standout a{
		text-transform:uppercase;
		background-color:black;
		color:white;
		display:inline;
		font-family: 'Roboto', sans-serif;
		font-size: 15px;
		}
	.standout a:hover{text-decoration:none;background-color:#dce6ee;color:black;}	
	.note{}
	nav ul {}
	pre{}  

	#mobileMenuToggle{display:none;}
		
	
	/* general classes */
	
	.hide{visibility:hidden;}	

	.fix{position:fixed;top:0;}
	.test{display:none;}	


	#orderArticles .hidden {display:none;display: none!important;}

	
	/* ------------ BUTTON --------------- */	
	.button {
		-webkit-appearance: push-button;
		padding: 3px 6px;
		background-color:#ddd;
		border:solid 1px;
		display:inline-block;
		text-align: center;
		}
	.button a{text-decoration:none;}




	/* ------------ BREADCRUMB --------------- */	
	#breadcrumb {
		margin-bottom:30px;
		padding-left: 20px;
		text-transform: capitalize;
		}	
	#breadcrumb a {display: flex;}
	#breadcrumb a:hover span{color:black;}
	#breadcrumb .slash {padding:0 5px;}
	#breadcrumb, #breadcrumb a {align-items: center;    user-select: none;}	
	#breadcrumb span{
		letter-spacing: 3px;
		color: #777;
		}
	#breadcrumb a:nth-of-type(1) span{padding-left:10px;}
	.centre{
		text-align: center;
		}

	.centre .search{float:none;margin-top: 50px;}
	.centre .search form{top:-1px;position:relative;display: none;}
	.centre .search form img{top:5px;position:relative;}

	.page-counter:nth-of-type(2){
		padding-top: 50px;
		border-top: dotted 1px #ccc;
		margin-top: 20px;
	}


	/* footer */	
	footer {    
		display: flex;
		padding: 30px 40px;
		width:100%;
		justify-content:  space-between;
		border-top: dotted 1px #ccc;
		align-items: center;
		}
	
	footer  img.icon {height:25px;}
	footer ul li{display: inline-flex;margin-bottom: 10px;}
	footer ul{display: flex;text-align: center;    flex-direction: column;align-items: flex-start;    margin: 0;width: 33%;}
	footer ul.horiz{    flex-direction: row;}
	footer ul.horiz li{    margin-right:20px;}
	footer ul li span ,footer ul li a{display:inline;}
	footer ul:nth-child(2){    justify-content: center;}
	


	/* MENU STYLES */
	ul li {list-style:none;display:flex;}
	ul.bullet li{list-style: disc;margin-left: 15px;}
	nav a:hover, nav a:hover span{text-decoration:none;}
	nav ul {
		display:flex;
		flex-direction:row;
		width:100%;
		margin-bottom: 20px;
		border-bottom: solid 1px #ccc;
		flex-wrap: wrap;
		}
	nav ul li a{font-size:14px;width: 100%;} 
	nav ul li.on span:hover,nav ul a.categoryButtonOn{color:#fff;background-color:#000;}
	nav ul li.off span{cursor:default;} 
	
	nav ul li:nth-child(8) {   /* border-right: solid 1px;*/}
	nav ul li {
    text-align: center;
    width: 25%;
    margin: 0px;
    box-sizing: border-box;
    height: 50px;
	display: flex;
    font-size: 12px;
    vertical-align: top;
    border-right: solid 1px #ccc;
	flex-grow: 1;
   /*  flex-basis: 0;*/
	}
	nav ul li.off {display: none!important;}
	
	nav ul li span {
    width: 100%;
    padding: 5px;
    height: 50px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 2.5px;
	color:#ccc;
	cursor: default;
	font-weight: 400;
	}
	nav ul li.on span {
		color:#000;
		cursor: pointer;
	}


	nav ul li.on a.categoryButtonOn span{
			color:#fff;
		}

	/*********** MENU ***********/

	section#leftMenu
	{
		display: flex;
		flex-direction: column;
		width: 25%;
		text-transform: capitalize;
		padding-left: 20px;
	}

	section#leftMenu ul{
		display: flex;
		flex-direction:column;
		padding: 0;
		margin:0;
		width:100%;
		padding-bottom: 10px;
	}
	section#leftMenu ul h3, h3{margin:5px 0;}
	section#leftMenu ul li{margin:0 0 5px 5px;flex-direction: column;}
	section#leftMenu ul hr{margin:15px 0;}
	section#leftMenu ul li.selected a{font-weight:500;color:black;}
	section#leftMenu #menu-top{
			height: 30px;
			display: flex;
			align-items: center;
			margin: 0;
			font-size:13px;
			color: #999;
		}
		
	section#leftMenu ul li a{color:#666;text-decoration:none;display: flex;}
	section#leftMenu ul li a span{margin-right: 5px;}
	section#leftMenu ul li a:hover{color:#000;text-decoration:underline;}

	main#search section#leftMenu ul{
			flex-direction: row;
			flex-wrap: wrap;
			padding-right: 40px;
		}

	#leftMenu .tag a{font-size:12px;text-transform:uppercase;}
	#detail #leftMenu{margin-top: 35px;}
	#leftMenu hr{margin-bottom: 15px;}
	
	section#leftMenu ul#tagsList, .detail ul#tagsList{
		    flex-direction: row;
			flex-wrap: wrap;
	}
	
	section#leftMenu ul#tagsList li, .detail ul#tagsList li{
			width: fit-content;
			margin: 0;
			padding: 2px;
		}

	.search #leftMenu ul{margin: 0 20px 0 0;width:200px;}
	.search #leftMenu ul li {
		margin: 0 5px 5px 0;
	}

	.right{text-align: right;}
	.grey{color:#aaa;}
	.collection li.order a, .collection li.order a:hover{color:#fff;}
	
	main.order input[type='submit']{
		text-transform: uppercase;
		padding: 5px 10px;
		margin-left: 10px;
	}
	main.order select{text-transform: capitalize;}
	
	#articles li a:hover{color:#000;text-decoration:underline;}
	#articles li a .articleName:hover{color:#ffffff;background-color:#000000;}
	.search {}
	.search input[type='text']{    
		border: solid 1px #ccc;
		padding: 6px;
		background-color: transparent;
		color: #ccc;
		}
	.search.desktop form img{margin-left: 5px;}	

	.page-counter {
		height:30px;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		text-transform: uppercase;
		padding-right: 20px;
	}
	
	.search .page-counter{margin-bottom: 10px;}	
	.search hr{margin-bottom: 10px;}
	.page-counter span{padding:0;    align-items: center;}

	.page-counter span#next,.page-counter span#prev{margin-right: 0;margin-left: 10px;}
	.page-counter span#sort, .page-counter span#limit{}
	.page-counter a{
		text-decoration:none;
		padding: 0 3px;}

	.page-counter select{margin-right: 3px;text-transform: uppercase;}
	
	.page-counter span#next a img,
	.page-counter span#prev a img{
		height: 15px;
		width: auto;
		}
	
	



	.alert{color:blue;}
	.underline{text-decoration:underline;}
	.note{color: blue;
    display: block;
    text-align: right;}
	.highlight, .highlight a{color:blue;}
	input[type='submit'].highlight{color:white;background-color:black;}
	ul a.highlight{color:blue;    align-items: center;}
	.highlight img{vertical-align: bottom;margin-left:10px;}

	main ul.list{display:flex;flex-direction:column;}
	main ul.edit{align-items:start;}
	section#leftMenu ul.edit li{    
		padding: 5px 0 5px 20px;
		background-repeat: no-repeat;
		margin: 0;
		text-indent: 5px;
		width: 100%;
		font-weight: 500;
		align-items: center;
	}
	section#leftMenu ul.edit li{background-image: url(../img/edit.svg);    align-items: flex-start;}
	section#leftMenu ul.edit li.print{background-image: url(../img/print.svg);}
	section#leftMenu ul.edit li.edit-tag{background-image: url(../img/edit-tag.svg);}

	#articles span.checkbox img, #leftMenu span.checkbox img{
		height:20px;
		width:20px;
		background-image: url(../img/check.svg);
		background-position:right;
		}
	#articles.collection span.checkbox img {background-position:left;}
	#articles.collection a.right {float:right;}	
	
	#collectionTemp{flex-direction: column;padding-right: 40px;}
	.collections  img.thumb {width:200px;padding-left:10px;}
	#articles .openCollectionIcon {display:inline-block;}
	#articles .openCollectionIcon img{width:20px;height:20px}

	#articles .openCollectionIcon{}
	#leftMenu .openCollectionIcon{display: none;}
	
	#articles li .grey a{color:#999;}
	
	#articles .dots{
		flex-direction: row-reverse;		
		position: absolute;
		right: 0;
		top: 5px;
	}
	
	#articles .dots .dot{
		width: 10px;
		height: 10px;

		}
	.dots img{margin-right:5px;width: 15px;}
	#articles ul li img.dot{width:20px;height:20px;}
	
	.leftMenu .dot{}
	a span, span a  {
		cursor:pointer;
		display: flex;
		align-items:center;
		}
	
	#articles a.articleLink{display: flex;justify-content:space-between;    margin-bottom: 5px;flex-direction: row;}
	#articles a.articleLink.remove{display:none;}
	#article .articleLink .openCollectionIcon img{width:22px;height:22px}	
	
	section#leftMenu ul#collectionMenu li{
		margin: 0 0 5px 25px;
		width: fit-content;
		list-style-image: url(../img/collection.svg);
		display: list-item;
		}
	
	section#leftMenu ul#collectionMenu li span{
		padding: 2px 10px;
		display:flex;
		align-items:center;
		background-color:#fff;
		border-radius: 15px;
		}
	
	section#leftMenu ul#collectionMenu li span.on{
		color:white;
		background-color:black;
		
		
		}
	
	.collection .thumb img {display:inline-block;width:150px;}
	.collection form{padding-bottom:10px;}
	.collection input[type='text'].grey{
		background:#ccc;
		border: none;
		margin: 1px;
		width: 50px;
		}
	ul.collectionLinks{padding:0;}
	ul.collectionLinks li{margin:0 0 10px 0;}
	ul.collectionLinks li a{display: flex;align-items: center;justify-content: space-between;}
	ul.collectionLinks li span.checkbox{display:block;margin-right: 5px;}
	ul.collectionLinks li span.openCollectionIcon img{width: 22px;}
	
	.section h3 {text-align:center;display:inline-block;}
	.columns{
		display: block;
		-webkit-columns: auto 2; /* Chrome, Safari, Opera */
		-moz-columns: auto 2; /* Firefox */
		columns:auto 4;
	    text-align: left;
		}
		
	.space{width:60px;background-image:url('../img/transp.gif');display: inline-block;}
	ul.grey a {color:#ccc;}
	.detail ul.detailThumbs li img{height:100px;    min-width: 90px;}
	.detail ul.detailThumbs li {
		width: auto;   
		height: 100px;
		overflow: hidden;
		}
		
		
	.instance{    
		background-image: url(../img/instance.svg);
		height: 20px;
		width: 20px;
		display: inline-block;
		background-size:20px;
		background-repeat: no-repeat;
	}
	#detailPic{
	    position: relative;
		margin: 0;
		padding: 0;
		overflow: hidden;
		align-items:center;
	    flex-direction: column;
		display: flex;
		width: min-content;
	}	
	#navButtons span{padding-left:10px;user-select: none;}
	#navButtons{
		position: absolute;
		right:0;
		margin:0;    
		padding:0;    
		height: 100%;
		width: 100%;
		}
	#navButtons a {width:50%;height:100%;display: flex;    text-decoration: none;}
	#navButtons a:hover span{
		/*background-color:#ffffff75;*/
		text-decoration:none;
	}	
	#navButtons a.right {
		justify-content: flex-end;	
		}
	#navButtons a.left {
		justify-content: flex-start;
	
		}
	#navButtons a:hover.right span{
		background-image:url('../img/forward.svg');
		background-position:right;
		background-repeat: no-repeat;
		width: 50px;
    	background-size: contain;
	}	
	#navButtons a:hover.left span{
		background-image:url('../img/prev.svg');
		background-position:left;
		background-repeat: no-repeat;	
		width: 50px;
    	background-size: contain;
	}	
	#imageCounter{
		height: 40px;
		padding-bottom: 5px;
		justify-content: flex-end;
		}
	
	#imageCounter p{
		margin: 0;
		align-items: center;
		display: flex;
		}
	#imageCounter span{padding:0 3px;}

	#instanceButtons {
		font-size:0;
		align-items: center;
	}
	#instanceButtons a {margin-left: 5px;}
	#instanceButtons a:hover span{text-decoration:none;}

	#articles ul li img.icon{width:22px;position: relative;top: 4px;}

	
	.orderBut,input[type='submit'].orderBut
	{    
		background-color: white;
		padding: 10px 15px;
		border-radius: 15px;
		text-align: center;
		border:none;
		min-width: 170px;
		border: solid 3px black;
		text-transform:uppercase;
	}
	.orderBut a,input[type='submit'].orderBut{
		color: black;
		text-decoration:none;
		}
	.orderBut a:hover,input[type='submit'].orderBut:hover{background-color:black;color:white;}

	#idNums{display:none;}
	.left-column{min-width:360px;}

	/*  ---------------------------------------------------------- */
	/*  ----------------------- FORMS ----------------------------- */
	/*  ----------------------------------------------------------- */

	
	.full form{
		display:flex;
		flex-direction:column;
		align-items: center;
	}
	.full form > div, .full form > p{margin-bottom:10px;}

	.full form label{margin-right:10px;}

	
	input[type='submit']{
		font-size: inherit;
		text-align: center;
		}
		

	input[type='submit'].orderBut:hover{}
	
	input[type='password'] {
		min-width: 170px;
		}
		
	label{display: inline-flex;align-items: center;min-width: 120px;}
	
		
	#articles label, .collection label {min-width: 160px;}
	


	/* --- collections --- */
	
	#collectionTemp select, input[type='text']{min-width:170px;}
	#collectionTemp input:read-only{min-width:auto;}
	
	
	/* --------- editing --------- */
	form.tag input[type='submit']{
		background-color: transparent;
		border: none;
		}
	.columnBlock{
		break-inside: avoid-column;
		-webkit-column-break-inside:avoid-column;
		justify-content: flex-end;
		align-items: center;
			}
	.columnBlock form{margin-right:3px;}		
	.edit form.tag{
		display: inline-block;
		margin: 5px 0;
		text-align:left;
		
		}
	.add form.tag{display:block;}	
	.edit a img {vertical-align:middle;}
	
	main.editTag{}
	main.editTag label {margin-bottom:10px;}

	.edit form.tag.editTag {display:inline-flex;min-width:250px;}		
	.tag {display:inline-block;margin: 0 5px 5px 0;}		
	.tag span	{
		display: inline-block;
		background-color:#dce6ee;
		padding: 6px;
		border-radius: 15px;
	}
	.alphabet {    
		justify-content: flex-start;
		flex-wrap: wrap;
	    max-width: 500px;
		}
	.alphabet .letter a{
		padding:0 10px;
		text-transform: uppercase;
		margin: 0 0 5px 0;
		background-color: #ddd;
		font-size:20px;
		}
	
	.toggleMergeTag{
		background-image:url('../img/check.svg');
		background-position:right;
		width: 20px;
		height: 20px;
	}	
	.changeTag{   
		background-color: #ccc;
		padding: 5px;
		border-radius: 10px;
		width: fit-content;
		}
	#tagno0{display:none;}
	main.basic{flex-direction:column;justify-content: flex-start;padding-left: 40px;}
	main.full{flex-direction:column;justify-content: flex-start;    align-items: center;}
	main.full p{}

	input[type='checkbox'],input[type="radio"]{width: 30px;height: 30px;}

	main.edit a.sortBut{border:solid 1px #000; padding:5px;text-decoration:none;background-color:#ccc;}
	
	.table.orders p.tableRow span.narrow.colourCode {justify-content: center;}
	.table.orders p.tableRow span.narrow.colourCode.hire {background-color:gold ;}
	.table.orders p.tableRow span.narrow.colourCode.shop {background-color: green;}
	.table.orders p.tableRow span.narrow.colourCode.blank {background-color: #fafad2;}
	.table.orders p.tableRow span.narrow.colourCode.sale {background-color:orangered ;}
	
	.desktop{display:flex!important;}
	.mobile{display:none!important;}

	#subdom{    
		
		color: white;
		display: inline-flex;
		padding: 0;
		margin: 0;
		width: fit-content;
		position: fixed;
	}
	#subdom.staging{background-color: blue;}
	#subdom.localhost{background-color: red;}

	#cookie-bar{    
		justify-content: center;
		align-items: center;
		font-size: 12px;
		letter-spacing: 1px;
		color: #777;
		position:absolute;
		width:98%;
		width: calc(100% - 20px);
		display:none;
		}
	#cookie-bar #cookie-bar-inner{
		padding-top: 5px;
		width: fit-content;
		justify-content: center;
		align-items: center;
	}
	
	#cookie-bar a{
		cursor:pointer;
		color:white;
		padding:0 5px;
		background-color:black;
		}