/*** Pembroke Regular ***/
@font-face {
	font-family: 'pemw-rg';
	src: url('https://static.typography.net/woff2/pemw-rg.woff2') format('woff2'), url('https://static.typography.net/woff/pemw-rg.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
.pemw-rg { font-family: 'pemw-rg'; }

/*** Pembroke Bold ***/
@font-face {
	font-family: 'pemw-bd';
	src: url('https://static.typography.net/woff2/pemw-bd.woff2') format('woff2'), url('https://static.typography.net/woff/pemw-bd.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
.pemw-bd { font-family: 'pemw-bd'; }

/*** Pembroke Italic ***/
@font-face {
	font-family: 'pemw-it';
	src: url('https://static.typography.net/woff2/pemw-it.woff2') format('woff2'), url('https://static.typography.net/woff/pemw-it.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
.pemw-bd { font-family: 'pemw-it'; }

strong, b { 
	font-family: 'pemw-bd'; 
	font-weight: normal;
	font-style: normal;
}
em, i { 
	font-family: 'pemw-it'; 
	font-weight: normal;
	font-style: normal;
}

/*** redactor styles ***/
.ot-small, .small, small { /*  small caps - body (black)  */
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 100% !important;
	color: #000 !important;
	-moz-font-feature-settings:"smcp" 1, "c2sc" 1;
	-ms-font-feature-settings:"smcp" 1, "c2sc" 1;
	-o-font-feature-settings:"smcp" 1, "c2sc" 1;
	-webkit-font-feature-settings:"smcp" 1, "c2sc" 1;
	font-feature-settings:"smcp" 1, "c2sc" 1;
}
.ot-small, .samp, samp { /*  small caps - note (grey)  */
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 100% !important;
	color: #999 !important;
	-moz-font-feature-settings:"smcp" 1, "c2sc" 1;
	-ms-font-feature-settings:"smcp" 1, "c2sc" 1;
	-o-font-feature-settings:"smcp" 1, "c2sc" 1;
	-webkit-font-feature-settings:"smcp" 1, "c2sc" 1;
	font-feature-settings:"smcp" 1, "c2sc" 1;
}
.ot-lnum, .lnum, code { /*  oldstyle figures - roman  */
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 100% !important;
	-moz-font-feature-settings:"onum" 1;
	-ms-font-feature-settings:"onum" 1;
	-o-font-feature-settings:"onum" 1;
	-webkit-font-feature-settings:"onum" 1;
	font-feature-settings:"onum" 1;
}
.ot-lnum-it, .lnum-it, cite { /*  oldstyle figures - italic  */
	margin: 0 0 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 100% !important;
	font-style: normal;
	-moz-font-feature-settings:"onum" 1;
	-ms-font-feature-settings:"onum" 1;
	-o-font-feature-settings:"onum" 1;
	-webkit-font-feature-settings:"onum" 1;
	font-feature-settings:"onum" 1;
}

/*** end redactor styles ***/

/*** Jeremy Tankard logo and icons font ***/
@font-face {
	font-family: 'jttypefont';
	src: url('https://static.typography.net/woff2/jttypefont.woff2') format('woff2'), url('https://static.typography.net/woff/jttypefont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}
.jttypefont { font-family: 'jttypefont'; }
	


.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index:-1;
}


html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	font-family: "pemw-rg", Arial, "san-serif" !important;
	font-feature-settings: "kern", "liga", "calt", "locl";
	background-color: #eeeae7;
}

button::-moz-focus-inner {
  border: 0;
}


.dark { background: #bfdadb !important; }
.light { background: #d5e9e9 !important; }
.white { background: #fff !important; }


/*** blue highlight panel - negative margins when used inside a padded div ***/
/*** orange highlight alert  panel - negative margins when used inside a padded div ***/
.highlight,
.highlightAlert {
	margin:  20px 0px -20px;
	padding: 14px 5px 14px 5px;
}
/*.highlightAlert {
	padding: 5px 5px 5px 5px;
}*/
.highlight {
	background-color: #bfdadb;
}
.highlightAlert {
	background: rgba(255, 197, 120, 1.0); 
}

	.highlight span, .highlightAlert span {
		line-height: 36px;
	}
	
	.highlight p,
	.highlightAlert p {
		padding-right: 100px;
	}
	
	.highlight p:first-of-type:before,
	.highlightAlert p:first-of-type:before {
		margin: 0;
		/*margin-top: 3px;*/
		padding: 0 5px 0 0;
		font-family: 'jttypefont';
		content: "!";
		font-size: 30px;
		line-height: 30px;
		font-weight: 300;
		vertical-align: middle;
		color: #000;
		position: absolute !important;
		top: -4px !important;
		left: -35px !important;
		z-index: 10;
	}
	.highlightAlert p:first-of-type:before {
		margin: 0;
		/*margin-top: 3px;*/
		padding: 0 5px 0 0;
		top: 6px !important;
	}
	.highlight p:first-of-type:after,
	.highlightAlert p:first-of-type:after {
		margin: 0;
		padding: 0;
		font-family: 'pemw-rg' !important;
		content: "";
		font-size: 24px;
		line-height: 24px;
		font-weight: 300;
		vertical-align: middle;
		width: 26px;
		height: 26px;
		border-radius: 13px;
		background-color: #fff;
		position: absolute !important;
		top: 1px !important;
		left: -30px !important;
		z-index: 5;
	}
	.highlightAlert p:first-of-type:after {
		margin: 0;
		padding: 0;
		top: 12px !important;
	}
	
	@media only screen and (max-width : 767px) {

		.highlight,
		.highlightAlert {
			margin:  10px 0px -10px;;
			padding: 15px 5px 15px 5px;
		}
		.highlightAlert {
			padding: 5px 5px 5px 5px;
		}
	
		
	}

/*
div:active,div:focus,a:hover,a:active,a:link,a:focus{outline: 0px none !important;border: none !important;}
*/
div.row:active, div.row:focus, a:active, a:link, a:focus {outline: 0px none !important;border: none !important;}

a {
	text-decoration: none;
}
.panel-padded a {color:#000 !important;}
.panel-padded a.underlined {text-decoration: underline !important;}

	#general-panel .leftColumn a,
	#general-panel .rightColumn a,
	#general-panel2 .leftColumn a,
	#general-panel2 .rightColumn a,
	#general-panel3 .leftColumn a,
	#general-panel3 .rightColumn a {
		color: #000;
		text-decoration: underline;
	}
	/* about page override */
	#general-panel .leftColumn li a {text-decoration: none;}
	
html, body {
	margin:0;
	padding:0;
	width: 100% !important;
	height: 100% !important;
	font-family: 'pemw-rg', Arial, 'san-serif' !important;
	font-size: 15px;
}
.header,
.footer {
	margin:0;
	padding:0;
	width:100%;
	z-index:101 !important;
	clear: both;
}
.header .logo {
	margin: 0;
	padding: 17px 15px 17px 30px;
	background: #000;
	height: 38px; /* half of retina height of 76px */
	float: left;
}
	.header .logo img {
		width: auto;
		height: 38px; /* half of retina height of 76px */
	}

.header .orderTotal p,
.header .orderDesktop p,
.header .orderWeb p,
.header .orderApp p {
	margin: 0;
	padding: 5px 5px 5px 30px;
	background: #000;
	float: left;
	width:auto;
	font-family: 'pemw-rg' !important;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	text-align: right;
}

.header #orderIcon {
	margin: 0;
	padding: 5px 10px 5px 18px;
	background: #000;
	float: left;
	width:20px;
	height: 30px;
}

.header #orderIcon div:after {
  font-family: 'jttypefont';
  content: "";
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  vertical-align: top;
  color: #000;
  background: transparent !important;
  margin-left: -1px;
}
.header #orderIcon div.empty:after {
  content: "";
}

	.header #orderIcon img {
		width: 100%;
		height: auto;
	}

.header a {
	color: #fff;
}


.orderTotal p {
		min-width: 30px !important;
		height: 30px;
		/*display: none;*/
	}
	
	#orderIcon {
		width:20px;
		height:24px;
	}
	
	#orderIcon .empty,
	#orderIcon .one,
	#orderIcon .two,
	#orderIcon .three {
		margin: 0;
		padding: 0;
		
	}
	#orderIcon .empty:before,
	#orderIcon .one:before,
	#orderIcon .two:before,
	#orderIcon .three:before {
			padding: 5px 5px 0 0;
			font-family: 'jttypefont';
			color: #fff;
			font-size: 20px;
			line-height: 28px;
	}
	#orderIcon .empty:before {
			content: "0";
	}
	#orderIcon .one:before {
			content: "1";
	}
	#orderIcon .two:before {
			content: "2";
	}

#orderIcon a { text-decoration: none !important; }


/*** footer icons ***/
.footer .sub-nav .left span {
	margin-right: 20px;
}
/*** 3rd is sitemap ***/
.footer .sub-nav li:nth-child(3) {
	margin-right: 7px;
}
.footer .sub-nav span.icon-twitter:before,
.footer .sub-nav span.icon-instagram:before,
.footer .sub-nav span.icon-mail2:before {
	padding: 0;
	font-family: 'jttypefont';
	color: #000;
	font-size: 22px;
	line-height: 2.5;
}
	.footer .sub-nav span.icon-twitter:before {
		content: "A";
	}
	.footer .sub-nav span.icon-instagram:before {
		content: "B";
	}
	.footer .sub-nav span.icon-mail2:before {
		content: "C";
	}

@media only screen and (max-width: 719px) {

	.footer .sub-nav span.icon-twitter:before,
	.footer .sub-nav span.icon-instagram:before,
	.footer .sub-nav span.icon-mail2:before {
		line-height: 3;
	}
	
}




/*** main navigation ***/

ul.sub-nav {
  *zoom: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid #000;
}
ul.sub-nav:before,
ul.sub-nav:after {
  display: table;
  content: "";
  line-height: 0;
}
ul.sub-nav:after {
  clear: both;
}
ul.sub-nav li {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
  color: white;
  text-align: center;
  height:45px;
}
	ul.sub-nav li a {
		text-decoration: none;
		color: #fff;
	}
	ul.sub-nav li a p {
		margin: 0;
		padding: 8px 10px 11px 10px;
		background: #000;
		font-family: 'pemw-rg'; 
		font-size: 15px;
		line-height: 15px;
		display: block;
	}

	.footer ul.sub-nav li {
		height: auto;
	}
	.footer ul.sub-nav:before,
	.footer ul.sub-nav:after {
	  display: none !important;
	}

		.footer ul.sub-nav li a p,
		.footer ul.sub-nav li p {
			margin: 0;
			/*padding: 20px 15px 10px 0;*/
			padding: 0px;
			background: transparent;
			color: #000;
			font-family: 'pemw-rg'; 
			font-size: 15px;
			line-height: 15px;
			display: block;
		}
		.footer ul.sub-nav li p {
			/*padding: 20px 0 20px 0;*/
			padding: 0px;
		}

ul.sub-nav li:hover {
  color: #fff;cursor:pointer;
}
ul.sub-nav li:after {
  font-family: 'jttypefont';
  content: "U";
  font-size: 20px;
  line-height: 22px;
  font-weight: 300;
  vertical-align: top;
  color: transparent;
  background: transparent !important;
}

ul.sub-nav li:hover:after {
  content: "";
}
ul.sub-nav li.active-item:hover:after {
  content: "U";
}

	.footer ul.sub-nav li.left:hover {
	  cursor:default;
	}

	.footer ul.sub-nav li:after,
	.footer ul.sub-nav li.left:after {
	  content: "";
	}

ul.sub-nav li.active-item:after, ul.sub-nav li:hover:after {
  color: #000;
}

ul.sub-nav li.left {
	float: left;
}
ul.sub-nav li.right {
	float: right;
}

/*** end regular navigation ***/





/*** mobile nav accordion ***/

ul.accordion2 {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #d5e9e9; !important;
}
ul.accordion2 .inner {
  margin: 0;
  padding: 0;
  width: 100%;
  /*overflow: hidden;*/
  display: none;
}
ul.accordion2 li div.inner.show {
  /*display: block;*/
  margin: 0;
  padding: 0 !important;
}

	ul.accordion2 li div.inner.show a,
	.tab-content li a,
	.tab-content div p a,
	div p a {
	  color: #000 !important;
	  text-decoration: underline;
	  /*text-decoration: underline !important;*/
	}


ul.accordion2 li {
  margin: 0 0 5px 0;
  padding: 0;
}
ul.accordion2 li:first-of-type {
  border-top: 15px solid #d5e9e9;
}
ul.accordion2 li:last-of-type {
  margin: 0;
  padding: 0 0 8px 0;
  border-bottom: 15px solid #d5e9e9;
}
	ul.accordion2 li.active,
	ul.accordion2 li div.inner.show {
  		margin: 0;
  		padding: 0;
  		background-color: #bfdadb; !important;
  		width: 100%;
	}
		ul.accordion2 li:first-of-type.active {
			margin-top: 0px;
		}
		ul.accordion2 li.active {
			margin-top: 5px;
			padding-top: 10px;
		}
		ul.accordion2 li div.inner.show {
			padding-bottom: 15px !important;
		}


		ul.accordion2 li div.inner.show p {
			margin-top: 12px;
		}
			ul.accordion2 li div.inner.show p:first-of-type {
				margin-top: 0px;
			}


	
ul.accordion2 li p, ul.accordion2 li a p, ul.accordion2 li p a {
  margin: 0;
  color: #000;
  font-size: 15px !important;
  line-height: 22px;
  /*transition: background .3s ease;*/
  text-decoration: none;
}
	ul.accordion2 li.active a p {
		font-family: 'pemw-bd' !important;
		font-weight: normal;
	}
	
ul.accordion2 li a p {
  padding: 5px 10px 0 10px;
}
	ul.accordion2 li.active a p {
		/*margin-left: 5px;*/
	}
	
ul.accordion2 li div.inner p {
	/*margin-left: 5px;*/
	padding: 0 20%;
	color: #d5e9e9;
	/*width: 600px;*/
}
ul.accordion2 li div.inner.show p {
	padding: 0 20%;
	color: #000;
	/*width: 600px;*/
}
/*
	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		margin: 18px auto;
		padding: 0;
		border: 1;
		border-collapse: collapse;
	}	

		ul.accordion2 li div.inner tr,
		ul.accordion2 li div.inner.show tr {
			margin: 0;
			padding: 0 10px;
			
		}	
			ul.accordion2 li div.inner td,
			ul.accordion2 li div.inner.show td {
				margin: 0;
				padding: 3px 5px 7px 5px;
				border-bottom: 1px solid #000;
				color: #000;
			}	
*/

ul.accordion2 li div.inner table,
ul.accordion2 li div.inner.show table {
    /*margin: 18px 20%;*/
    padding: 0;
    border-collapse: collapse;
    /*width: 60%;*/
}

	ul.accordion2 li div.inner th, ul.accordion2 li div.inner td,
	ul.accordion2 li div.inner.show th, ul.accordion2 li div.inner.show td {
		padding: 8px 20px 8px 0;
		text-align: left;
		border-bottom: 1px solid #bfdadb;
		color: #000;
	}
		ul.accordion2 li div.inner td a,
		ul.accordion2 li div.inner.show td a {
			color: #000;
		}

	#fontlist .header { background: none !important; height: auto !important; cursor: pointer; }
	#fontlist th { cursor: pointer; }

/*** end mobile nav accordion ***/


	.header, 
	.footer, 
	#banner-panel,
	#fontlist-panel,
	#gallery-panel, 
	#info-panel,
	#buy-panel,
	#related-panel, 
	#title-panel,
	#order-panel,
	#publicationslist-panel, 
	#general-panel, #general-panel2, #general-panel3,  
	#main-accordion, 
	#secondary-accordion, 
	#contact, 
	.rowContainer, 
	.panel {
		margin: 0 auto; 
	}
		.footer {
			margin-top: 120px;
			margin-bottom: 10px;
			font-size: 14px;
		}

	#page {
	margin: 0 auto;
	padding: 0 0 30px 0;
	position: relative; /* Set the position property so z-index will apply */
	z-index: 200 !important; /* Make sure this is higher than #menu */
	background: transparent;
	clear: both;		
	}



	/*** tabs for desktop, webfont & apps ***/
	.tabs ul.horizontal {
		list-style: outside none none;
		margin: 0;
		padding: 10px;
	}
	
	
	@media only screen and (max-width : 767px) {
	
		/*.tabs ul.horizontal {
			padding-bottom: 5px;
		}*/
	
	}
	
	
	
		/* span before tab buttons */
		.tabs ul.horizontal span {
			margin-right: 6px;
			line-height: 36px;
		}
		.tabs li {
			margin: 0;
			padding: 0;
			display:inline-block;
		}
			.tabs li a {
				display: block;
				font-size: 15px;
				line-height: 18px;
				padding: 7px 10px 9px 10px;
				text-decoration:none;
				color: #000;
			}
				/*** added :not(.can-touch) for hover on download tiles ***/
				.tabs li.active a,
				.tabs li:hover a,
				html:not(.can-touch) .downloads li:hover a,
				li a.pure-button:hover,
				a.pure-button:hover {
					background:#111 !important;
					color: #fff !important;
				}
				
				a.disabled-button:hover {
					cursor: default;
				}
				

	/* below padding bottom is overriden in main.css for responsive **/
	.tab-content {
		margin: 0;
		padding: 0;
		background: #d5e9e9;
	}

	
	/*** p tags should not appear inside the ordered list inside the tab content ***/
	/*.tab-content p {
		font-size: 0;
	}*/
	
	/*.tab-content ol, .tab-content p {
		padding: 0 ;
	}*/
	
		.tab-content li {
			/*list-style: decimal;
			display: list-item;*/
			padding-bottom: 18px;
		}
		.tab-content li:before,
		.tab-content li b {
			font-family: 'pemw-bd';
			font-weight: normal;
			font-style: normal;
		}

		.tab-content ol li ol, .tab-content ol li ol li ol {
			padding: 0;
		}

			.tab-content li ol li {
				/*list-style: lower-roman;
				display: list-item;*/
				margin-left: 0px;
				padding-bottom: 0px;
			}

				.tab-content li ol li ol li {
					/*list-style: lower-roman;
					display: list-item;*/
					margin-left: 0px;
					padding-bottom: 0px;
				}
		
		ol {
			counter-reset: item;
		}
		ol li, ol li ol li { display: block; }

		ol li:before {
			content: counter(item, decimal) ". ";
			counter-increment: item;
			font-family: 'pemw-bd';
					font-weight: normal;
					font-style: normal;
		}

		ol li ol li:before {
			content: counter(item, lower-alpha) ". ";
			counter-increment: item;
			font-family: 'pemw-bd';
					font-weight: normal;
					font-style: normal;
		}

		ol li ol li ol li:before {
			content: counter(item, lower-roman) ". ";
			counter-increment: item;
			font-family: 'pemw-bd';
					font-weight: normal;
					font-style: normal;
		}
		
		.tab-content span {
			line-height: 36px;
		}

		#clientLogin div {
			padding-top: 14px;
		}
		#clientLogin span {
			margin: 0 10px 0 0;
			padding: 0;vertical-align: top;
			line-height: 36px !important;
			display: inline-block;
		}

	/*** end tabs for desktop, webfont & apps ***/



/* grid for tiles */

.gridder{margin:0px;padding:0px;list-style-type:none;font-size:0}

.gridder-list, .gridder-list-two, .gridder-list-full, .gridder-show{font-size:15px}

.gridder-list, .gridder-list-two, .gridder-list-full {display:inline-block;vertical-align:top}

.gridder-show{display:block;float:left;width:100%;position:relative;}

.gridder-content{display:none}

.gridder-list, .gridder-list-two {width:15.83333%}
	/*.gridder-list-full {width:100.00000%}*/

.gridder-list:nth-child(n){margin-bottom:1%;margin-right:1%}

.gridder-list:nth-of-type(6n){margin-right:0;margin-bottom:0}

.bottom-space {height:20px !important;clear:both;}


/* start grid of tiles */

ul.gridder {
	margin: 0;
	margin-left: -20px;
	padding: 0;
}
	ul.gridder li.gridder-list {
		margin: 20px 0 0 20px;
		padding: 0;
		/*width: 140px;
		height: 170px;*/
		border-bottom: 1px solid #000;
		background: #fff;
		position: relative;
		/*cursor:pointer;*/
	}
		#documents li.gridder-list,
		#documents2 li.gridder-list,
		#publications li.gridder-list {
			background: #000;
		}
	
	ul.gridder li {
		overflow:hidden;
	}

	ul.gridder li div.one, ul.gridder li div.two {
		margin: 0;
		padding: 0;
		/*height: 180px;*/
		width: 100%;
		color: #111 !important;
		display: inline-block;
	}
		ul.gridder li div.selectedItem,
		ul.gridder li div.selectedFamily,
		ul.gridder li div.selectedTile {
			/*background: #ffe7cb !important;*/ /* selected color shows added to order */
			width: 100%;
		}

			
			#fontlist-panel ul.gridder li div.two a {
				color: #111;
			}


	div.two div.static,
	div.one div.tcycle {
		margin: 0;
		padding: 0;
		width: 100%;
		left: 0;
	}
	div.one div.tcycle div {
		margin: 0;
		padding: 0;
		position: relative;
		right: 50%;
		text-align: center;
	}
		div.two div.static div {
			margin: 0;
			padding: 0;
			position: relative;
			right: 50%;
			text-align: center;	
		}
	
	div.two div.static p,
	div.one div.tcycle p {
		width: 0 auto;
		display: inline-block;
		margin-top: 0px;
		margin-right: -100%;
		text-align: center;
		top:0;
		padding-top:10px;
		padding-bottom: 10px;
		-webkit-user-select: none; /* Chrome/Safari */        
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+ */
	}


	div.two div.strapline,
	div.one div.strapline {
		display: inline-block;
		padding: 0;
		color: #111;
		position: absolute;
		bottom: 34px;
		left: 0;
		width: 100%;
	}
			
		div.two div.strapline p,
		div.one div.strapline p {
			margin: 0;
			padding: 10px;
			text-align: left;
			font-weight: normal !important;
		}

	div.two div.buy,
	div.one div.buy,
	div.two div.view,
	div.one div.view {
		margin: 0;
		padding: 0;
		display: inline-block;
		/*background: #ffc47e;*/
		color: #111;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100% !important;
		height: 34px !important;
	}

	div.two div.description,
	div.one div.description {
		margin: 0;
		padding: 0;
		display: inline-block;
		background: rgba(190, 218, 219, 1);
		color: #111;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100% !important;
		height: 34px !important;
	}
		div.two:hover div.description {
			/*background: rgba(144, 187, 189, 1.0);*/
		}

		li[data-status='pending'] div.two div.description,
		li[data-status='pending'] div.one div.description {
			background: rgba(255, 51, 51, 1);
		}

		#general-panel2 .downloads .gridder li.gridder-list[data-status="pending"] div.two div.description p, 
		#general-panel2 .downloads .gridder li.gridder-list[data-status="pending"] div.one div.description p {
			background: rgba(255, 51, 51, 1) !important;
			line-height: 18px !important;
		}

		div.two div.buy p,
		div.one div.buy p,
		div.two div.view p,
		div.one div.view p,
		div.two div.description p,
		div.one div.description p {
			margin: 0 auto;
			padding: 8px 5px;
			text-align: center;
		}

		.selectedItem div.buy,
		.selectedTile div.buy {
			/*background: #df8731;*/
			/*background: #df8731 !important;*/
			color: #fff !important;
		}

	.downloads ul.gridder {
		padding-bottom: 20px;
	}
	
	.downloads ul.gridder li.gridder-list {
		margin: 20px 0 0 20px;
	}


	#documents .one,
	#documents2 .one {
		background: rgba(0,0,0,0.5);
	}
				
/* end grid */



/**** used for accordion and open close buttons ***/

.rowContainer {
	width: 100%;
}
.row {
	margin: 0;
	padding: 8px 10px 11px 10px;
	width:auto;
	background: rgba(0, 0, 0, 1.0);
	color: #fff;
	font-size: 15px !important;
	line-height: 18px;
	transition: background .3s ease;
	text-decoration: none;
	display: inline-block;
	/*cursor: pointer;*/
}
	.row a {
		background: rgba(0, 0, 0, 1.0);
		color: #fff;
		transition: background .3s ease;
		text-decoration: none;
	}

	#fontlist-panel .static div[data-status='pending'] div.row,
	#fontlist-panel .static div[data-status='disabled'] div.row {
		background: rgba(255, 51, 51, 1);
	}

#general-panel .panel, #general-panel2 .panel, #general-panel3 .panel {
/*	background: #bfdadb;*/
}

#general-panel div.panel-title,
#general-panel2 div.panel-title,
#general-panel3 div.panel-title {
	margin: 0;
	padding: 1px 10px 2px 10px;
}

/*** accordion inside a panel ***/
#general-panel .rowContainer .row, #general-panel .rowContainer .row2,
#general-panel2 .rowContainer .row, #general-panel2 .rowContainer .row2,
#general-panel3 .rowContainer .row, #general-panel3 .rowContainer .row2 {
	margin: 0;
	padding: 0 10px;
	width: auto;
	background: transparent;
	color: #000;
	font-size: 15px !important;
	line-height: 18px;
	transition: background .3s ease;
	text-decoration: none;
	display: inline-block;
}
#general-panel .rowContainer .row2,
#general-panel2 .rowContainer .row2,
#general-panel3 .rowContainer .row2 {
	margin-top: 0px;
}
	#general-panel .row a, #general-panel .row2 p,
	#general-panel2 .row a, #general-panel2 .row2 p,
	#general-panel3 .row a, #general-panel3 .row2 p {
		background: transparent;
		color: #000;
		transition: background .3s ease;
		text-decoration: none;
		cursor: pointer;
	}
	


	
/**** end ***/


.input {
	background-color: transparent;
	border:none !important;
	outline:none !important;
	/*margin: 0 0 0 -25px !important;
	padding: 10px 10px 10px 25px !important;*/
	margin: 0 0 0 -10px !important;
	padding: 7px 7px 9px 7px;
	width: 100%;overflow:hidden;
	white-space: nowrap;    
}
[contenteditable="true"]:active,
[contenteditable="true"]:focus {
	border:none !important;
	outline:none !important;
}


.thirtySix {font-size: 36px;}
.fortyEight {font-size: 48px;}
.sixtyFour {font-size: 64px;}
.ninetySix {font-size: 96px;}
.oneTwentyEight {font-size: 128px;}
.oneSeventyTwo {font-size: 172px;}
.twoFiftySix {font-size: 256px;}






/*** new tile colours to differentiate between desktop, webfont and app ***/

	html:not(.can-touch) #fontlist-panel ul.gridder li.gridder-list:hover {
		background: #e1efef; /* selected color shows added to order */
	}
		html:not(.can-touch) #fontlist-panel ul.gridder li.gridder-list.banner-six:hover  {
			background: transparent; /* selected color shows added to order */
		}
	#fontlist-panel div.two div.description {
    	background: rgba(190, 218, 219, 1);
	}

	/*** following styles override for pending and disabled fonts ***/
	html:not(.can-touch) #fontlist-panel ul.gridder li.gridder-list[data-status='pending']:hover {
		background: #e1efef; /* selected color shows added to order */
	}
		#fontlist-panel li[data-status='pending'] div.two div.description {
			background: rgba(255, 51, 51, 1);
		}
	html:not(.can-touch) #fontlist-panel ul.gridder li.gridder-list[data-status='disabled']:hover {
		background: #e1efef; /* selected color shows added to order */
	}
		#fontlist-panel li[data-status='disabled'] div.two div.description {
			background: rgba(255, 51, 51, 1);
		}
	
	/*** NEW TOUCH SENSITIVE METHOD ***/
	/*
	html.can-touch #fontlist-panel ul.gridder li.gridder-list:hover {
		background: #fff;
	}
		html.can-touch #fontlist-panel ul.gridder li.gridder-list.banner-six:hover  {
			background: transparent;
		}
	*/
	/*** END NEW TOUCH SENSITIVE METHOD ***/


	#desktop ul.gridder li div.two,
	#desktop ul.gridder li div.one {
		background: rgba(255, 255, 255, 1.0); /* selected color shows added to order */
	}

	html:not(.can-touch) #desktop ul.gridder li div.two:hover,
	html:not(.can-touch) #desktop ul.gridder li div.one:hover,
	#desktop ul.gridder li div.two.selectedItem,
	#desktop ul.gridder li div.one.selectedItem,
	#desktop-fonts ul.gridder li div.selectedItem /* order page */ {
		background: rgba(255, 225, 188, 1.0); /* selected color shows added to order */
	}
			html:not(.can-touch) #fontlist-panel ul.gridder li.desktop div.two:hover {
				background: rgba(255, 225, 188, 1.0); /* selected color shows added to order */
				width: 100%;
			}

		html:not(.can-touch) #desktop ul.gridder li div.two.includedItem:hover,
		html:not(.can-touch) #desktop ul.gridder li div.one.includedItem:hover {
			background: rgba(255, 255, 255, 1.0) !important;
			cursor: default !important;
		}

		#desktop ul.gridder li div.one.disabled,
		#desktop ul.gridder li div.two.disabled {
			opacity: 0.6;
			cursor: not-allowed !important;
		}
		html:not(.can-touch) #desktop ul.gridder li div.one.disabled:hover,
		html:not(.can-touch) #desktop ul.gridder li div.two.disabled:hover {
			background: rgba(255, 255, 255, 1.0);
			opacity: 0.6;
			cursor: not-allowed !important;
		}

	/*** related tile hover ***/
	html:not(.can-touch) ul#related li div.two:hover {
		background: rgba(213, 233, 233, 0.5) !important; /* selected color shows added to order */
		cursor: pointer;
	}
	/* updated as shouldn't be buy but view instead */
	ul#related li div.two div.buy,
	ul#related li div.two div.view {
    	background: rgba(190, 218, 219, 1) !important;
	}

	#desktop div.two div.buy, #desktop div.one div.buy {
    	background: rgba(255, 197, 120, 1.0);
	}
		#desktop-fonts .removingItem div.buy { /*** order page only ***/
			background: rgba(255, 197, 120, 1.0) !important;
		}
	#desktop .includedItem div.buy,
	#desktop .selectedItem div.buy {
		background: rgba(225, 135, 34, 1.0) !important;
		color: #fff !important;
	}
	#desktop-fonts .includedItem div.buy,
	#desktop-fonts .selectedItem div.buy /* order page */ {
		background: rgba(225, 135, 34, 1.0) !important;
		color: #fff !important;
	}	
	
	/* disabled tiles state work in progress... */

	html:not(.can-touch) #desktop ul.gridder li.disabled div.two:hover {
		background: rgba(255, 255, 255, 1.0); /* disabled state no color change */
		cursor: not-allowed;
	}
	html:not(.can-touch) #desktop ul.gridder li.disabled:hover,
	#desktop ul.gridder li.disabled {
		opacity: 0.7; /* disabled state opacity 70% */
	}

		html:not(.can-touch) #desktop ul.gridder li.disabled div.two:hover,
		html:not(.can-touch) #desktop ul.gridder li.disabled div.two.selectedItem,
		html:not(.can-touch) #desktop ul.gridder li.disabled div.two.selectedItem:hover {
			background: rgba(255, 255, 255, 1.0); /* disabled state no color change */
			cursor: not-allowed;
		}
		html:not(.can-touch) #desktop ul.gridder li.disabled:hover,
		#desktop ul.gridder li.disabled {
			opacity: 0.7; /* disabled state opacity 70% */
		}

	#desktop .disabled div.two.selectedItem div.buy /* order page - disabled */ {
		background: rgba(255, 197, 120, 1.0) !important;
		color: #000 !important;
	}	





	html:not(.can-touch) #webfont ul.gridder li div.two:hover,
	html:not(.can-touch) #webfont ul.gridder li div.one:hover,
	#webfont ul.gridder li div.two.selectedItem,
	#webfont ul.gridder li div.one.selectedItem,
	#web-fonts ul.gridder li div.selectedItem /* order page */  {
		background: rgba(206, 238, 181, 1.0) !important; /* selected color shows added to order */
	}
			html:not(.can-touch) #fontlist-panel ul.gridder li.webfont div.two:hover {
				background: rgba(206, 238, 181, 1.0); /* selected color shows added to order */
				width: 100%;
			}

		html:not(.can-touch) #webfont ul.gridder li div.two.includedItem:hover,
		html:not(.can-touch) #webfont ul.gridder li div.one.includedItem:hover {
			background: rgba(255, 255, 255, 1.0) !important;
			cursor: defaut !important;
		}
		
		#webfont ul.gridder li div.one.disabled,
		#webfont ul.gridder li div.two.disabled {
			opacity: 0.6;
			cursor: not-allowed !important;
		}
		html:not(.can-touch) #webfont ul.gridder li div.one.disabled:hover,
		html:not(.can-touch) #webfont ul.gridder li div.two.disabled:hover {
			background: rgba(255, 255, 255, 1.0);
			opacity: 0.6;
			cursor: not-allowed !important;
		}

	#webfont div.two div.buy, #webfont div.one div.buy {
    	background: rgba(157, 221, 105, 1.0);
	}
		#web-fonts .removingItem div.buy { /*** order page only ***/
			background: rgba(157, 221, 105, 1.0) !important;
		}
	#webfont .includedItem div.buy,
	#webfont .selectedItem div.buy {
		background: rgba(110, 167, 62, 1.0) !important;
		color: #fff !important;
	}
	#web-fonts .includedItem div.buy,
	#web-fonts .selectedItem div.buy /* order page */ {
		background: rgba(110, 167, 62, 1.0) !important;
		color: #fff !important;
	}	



	html:not(.can-touch) #app ul.gridder li div.two:hover,
	html:not(.can-touch) #app ul.gridder li div.one:hover,
	#app ul.gridder li div.two.selectedItem,
	#app ul.gridder li div.one.selectedItem,
	#app-fonts ul.gridder li div.selectedItem /* order page */  {
		background: rgba(227, 211, 240, 1.0) !important; /* selected color shows added to order */
	}
			html:not(.can-touch) #fontlist-panel ul.gridder li.app div.two:hover {
				background: rgba(227, 211, 240, 1.0); /* selected color shows added to order */
				width: 100%;
			}

		html:not(.can-touch) #app ul.gridder li div.two.includedItem:hover,
		html:not(.can-touch) #app ul.gridder li div.one.includedItem:hover {
			background: rgba(255, 255, 255, 1.0) !important;
			cursor: default !important;
		}

		#app ul.gridder li div.one.disabled,
		#app ul.gridder li div.two.disabled {
			opacity: 0.6;
			cursor: not-allowed !important;
		}
		html:not(.can-touch) #app ul.gridder li div.one.disabled:hover,
		html:not(.can-touch) #app ul.gridder li div.two.disabled:hover {
			background: rgba(255, 255, 255, 1.0);
			opacity: 0.6;
			cursor: not-allowed !important;
		}

	#app div.two div.buy, #app div.one div.buy {
    	background: rgba(199, 169, 225, 1.0);
	}
		#app-fonts .removingItem div.buy { /*** order page only ***/
			background: rgba(199, 169, 225, 1.0) !important;
		}
	#app .includedItem div.buy,
	#app .selectedItem div.buy {
		background: rgba(143, 102, 176, 1.0) !important;
		color: #fff !important;
	}	
	#app-fonts .includedItem div.buy,
	#app-fonts .selectedItem div.buy /* order page */ {
		background: rgba(143, 102, 176, 1.0) !important;
		color: #fff !important;
	}	


	/*** 6.04.17 - below added for included tiles ***/
	
	#desktop ul.gridder li div.two.includedItem,
	#desktop ul.gridder li div.one.includedItem,
	#desktop-fonts ul.gridder li div.includedItem, /* order page */
	#webfont ul.gridder li div.two.includedItem,
	#webfont ul.gridder li div.one.includedItem,
	#web-fonts ul.gridder li div.includedItem, /* order page */
	#app ul.gridder li div.two.includedItem,
	#app ul.gridder li div.one.includedItem,
	#app-fonts ul.gridder li div.includedItem /* order page */  {
		cursor: default !important;
	}

/*** end new tile colours ***/


#demo-font-download-status {
	width: 100%;
	/*min-height: 50px;
	line-height: 50px;*/
	background-color: rgba(255, 197, 120, 1.0);
	margin: 10px -10px -10px -10px;
	padding: 5px 10px;
	/*padding-bottom: 3px;
	margin-top: 10px;
	margin-bottom: -10px;*/
	display: none;
}

#demo-font-download-status.highlightAlert p { margin-left: 30px; }


.ui-state-focus{
    outline: none !important;
}


#info-panel .padded .leftColumn,
#info-panel .padded .rightColumn,
#general-panel .padded.publications .leftColumn,
#general-panel .padded.publications .rightColumn,
#general-panel ol li, 
#general-panel .tab-content p,
#general-panel .about-text,
#general-panel2 .padded.publications .leftColumn,
#general-panel2 .padded.publications .rightColumn,
#general-panel2 ol li, 
#general-panel2 .tab-content p,
#general-panel2 .about-text,
#general-panel3 .padded.publications .leftColumn,
#general-panel3 .padded.publications .rightColumn,
#general-panel3 ol li, 
#general-panel3 .tab-content p,
#general-panel3 .about-text {
	line-height: 22px;
}

#info-panel .leftColumn ul li,
#info-panel .rightColumn ul li,
#general-panel .leftColumn ul li,
#general-panel .middleColumn ul li,
#general-panel .rightColumn ul li,
#general-panel2 .leftColumn ul li,
#general-panel2 .middleColumn ul li,
#general-panel2 .rightColumn ul li,
#general-panel3 .leftColumn ul li,
#general-panel3 .middleColumn ul li,
#general-panel3 .rightColumn ul li {
	line-height: 18px;
	margin-bottom: 6px;
}
#info-panel .leftColumn ul li p,
#info-panel .rightColumn ul li p,
#general-panel .leftColumn ul li p,
#general-panel .middleColumn ul li p,
#general-panel .rightColumn ul li p,
#general-panel2 .leftColumn ul li p,
#general-panel2 .middleColumn ul li p,
#general-panel2 .rightColumn ul li p,
#general-panel3 .leftColumn ul li p,
#general-panel3 .middleColumn ul li p,
#general-panel3 .rightColumn ul li p {
	margin: 0;
	padding: 0 0 2px 0;
}



/*** from individual templates - 28.12.2016 ***/

#title-panel div h1 {
    margin: 0;
    padding: 10px 10px 20px;
    font-weight: normal;
    text-align: center !important;
    color: #111;
}

#title-panel .pure-form fieldset {
    padding: 10px 10px 10px 10px;
}

#general-panel div.padded {
    margin: 0;
    padding: 0 10px 20px;
}

#general-panel3.additional div {
    margin: 15px 0 0 0;
    padding: 0;
}
	#general-panel3.additional div div {
		margin: 0;
		padding: 5px 0;
	}
.nested-close-btn, .close-btn {
    margin-right: 10px !important;
}

	#glyphs .nested-close-btn, .close-btn {
		margin-right: 0px !important;
	}