@font-face {
	font-family: 'Exo2';
	src: url('exo2/Exo2-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Exo2Bold';
	src: url('exo2/Exo2-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	background-image: url("images/floor_diffuse.jpg");
	background-color: #505050;
	background-attachment: fixed;
}

div#banner {
	display: flex;
	/* height: 60px; */
	border: 1px solid black;
	background-color: #888888;
	padding: 5px;
}

div#banner img {
	display: flex;
	height: 60px;
	float: left;
	margin: 5px;
}

#banner p {
	line-height: 1.5;
	vertical-align: middle;
	font-family:'Exo2';
	margin: 0;
	padding-left: 5px;
}

div#paint-a-credit {
	float: right;
	height: 100%;
	align-items:center;
	display: flex;
}

div#giant-credit {
	float: left;
	height: 100%;
	align-items:center;
	display: flex;
}

div#pageTitle {
	font-family:'Exo2Bold';
	font-size: 2em;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
	text-align: center;
	flex: 1;
	vertical-align: middle;
	margin: 10px;
}

/* Thumbnail titles */
a.icon div {
	overflow-wrap: break-word;
	font-size: 14px;
}

div#menu {
	text-align: center;
	display: flex;
	align-items: center;
	margin-left: 240px;
}

@media screen and (max-width: 1450px) {
	div#menu {
		margin-top: 60px;
		margin-left: 0px;	}
}


div#menu div {
	margin: 0 auto;
}
div#menu a {
	display: block;
	float: left;
	width: 150px;
	font-family:'Exo2';
	color: #2ac1ed;
	border: 2px solid #2ac1ed;
	margin: 10px;
	padding: 10px;
	font-size: 1.5em;
	text-align: center;
	flex: 1;
	vertical-align: middle;
	text-decoration: none;
	background-color: rgba(27, 39, 49, 0.7);
}

div#menu a:hover {
	color: white;
	border: 2px solid white;
}


.breadcrumb {
	margin: 0;
	padding: 0;
	border-width: 1px;
	border-style: solid;
}
.breadcrumb, .breadcrumb a {
	display: inline-block;
}
.breadcrumb a {
	text-rendering: optimizeLegibility;
	text-decoration: none;
	height: 32px;
	line-height: 32px;
	padding: 0 10px 0 20px;
	position: relative;
	pointer-events: none;
	cursor: default;
}
.breadcrumb a:first-child {
	padding-left: 16px;
}
.breadcrumb a:last-child {
	padding-right: 16px;
	pointer-events: none;
	cursor: default;
}
.breadcrumb a:last-child:after, .breadcrumb a:last-child:before {
	border-left-color: #0c1215; /* arrow bit fill of last child */
}
.breadcrumb a:after, .breadcrumb a:before {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 10px solid transparent;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: 2;
}
.breadcrumb a:before {
	margin-left: 1px;
	z-index: 1;
}

.dark {
	border-color: #2E3031; /* breadcrumb border */
}
.dark a {
		font-family:'Exo2Bold';
		color: #c6c6c6;
		background-color: #18242b; /* parent background */
		text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
		box-shadow: inset 0 1px 0 #21323b; /* parent top border */
}
.dark a:after {
	border-left-color: #18242b; /* arrow bit fill */
}
.dark a:before {
	border-left-color: #25373f; /* arrow bit border */
}
.dark a:last-child {
	background-color: #0c1215; /* last child */
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bdcnt {
	margin: 20px 0;
}

/* Tire Finder div layout */
div.form {
	border: 2px solid green;
	overflow: hidden
}

div.form div.row {
	font-family:'Exo2';
	color: #2ac1ed;
	background-color: rgba(27, 39, 49, 0.7);
	border: 2px solid #2ac1ed;
	/* margin: 0 auto; */
	float: left;
	clear: left;
	display: block;
}

div.form div.row div {
	float: left;
	width: 100px;
	height: 100%;
	border: 1px solid yellow;
}

div.form div.row div input {
	width: 40px;
}

div.form input#submit {
	width: 100px;
	float: left;
	border: 1px solid red;
	height: 40px;
	/* clear: none; */
}

/* Tire Finder table layout */
table#radiusSearch, table#colourConverter, table#wheelSearch {
	font-family:'Exo2';
	color: #2ac1ed;
	border-collapse: collapse;
	margin: 0 auto;
	
}

@media screen and (max-width: 800px) {
	table#radiusSearch {
		margin-top: 50px;
	}
}

@media screen and (max-width: 950px) {
	table#colourConverter {
		margin-top: 50px;
	}
}

table#radiusSearch tr, table#colourConverter tr, table#wheelSearch tr {
	border: 3px solid #2ac1ed;
}

table#radiusSearch td, table#radiusSearch th, table#colourConverter td, table#colourConverter th, table#wheelSearch td, table#wheelSearch th {
	background-color: rgba(27, 39, 49, 0.7);
	padding: 5px;
}

table#wheelSearch td, table#wheelSearch th  {
	text-align: center;
}

table#radiusSearch th, table#wheelSearch th {
	font-size: 1.5em;
}

table#radiusSearch th small, table#wheelSearch th small {
	font-size: 0.5em;
	overflow-wrap: break-word;
	color: #b3b3b4;
}

table#radiusSearch tr td:nth-child(4) {
	border-right: 3px solid #2ac1ed;
}

table#radiusSearch input, table#colourConverter input {
	width: 40px;
}

table#wheelSearch input {
	width: 50px;
}

table#wheelSearch input#filenameSearch {
	width: 350px;
}

table#wheelSearch tr td:nth-child(6) {
	border-right: 3px solid #2ac1ed;
}


table#radiusSearch input:focus, table#colourConverter input:focus, table#wheelSearch input:focus {
	border: 2px solid #2ac1ed;
}

table#radiusSearch input#submit, table#wheelSearch input#submit {
	width: 100px;
	height: 50px;
	color: #2ac1ed;
	border: 2px solid #2ac1ed;
	background-color: rgba(27, 39, 49, 0.7);
	border-radius: 7px;
	font-size: 1.4em;
}

table#radiusSearch input#submit:hover, table#radiusSearch input#submit:focus, table#wheelSearch input#submit:hover, table#wheelSearch input#submit:focus {
	color: white;
	border: 2px solid white;
}

table.matches {
	background-color: rgba(27, 39, 49, 0.7);
	border: 2px solid #2ac1ed;
	font-family:'Exo2';
	color: white;
	border-collapse: collapse;
	margin: 0 auto;
}

table.matches th {
	font-size: 2em;
}

table.matches th small {
	font-size: 0.5em;
}


table.matches td {
	border: 1px solid #2ac1ed;
	padding-left: 10px;
}

table.matches td.image {
	padding: 0;
}

table.matches tr:first-child, table.matches tr.bottom {
	border-bottom: 3px solid #2ac1ed;
}

table.matches div.hint {
	color: #777777;
	float: right;
}


div#nav, div#navCC {
	position: absolute;
	padding-top: 5px;
}

div#nav a, div#navCC a {
	border: 2px solid #2ac1ed;
	background-color: rgba(27, 39, 49, 0.7);
	border-radius: 7px;
	text-decoration: none;
	font-size: 1em;
	color: #2ac1ed;
	padding: 10px;
	margin: 5px;
	float: left;
	width: 95px;
	text-align: center;
}

@media screen and (min-width: 800px) {
	div#nav {
		white-space: pre;
	}
}

@media screen and (min-width: 950px) {
	div#navCC {
		white-space: pre;
	}
}

div#nav a:hover, div#navCC a:hover {
	color: white;
	border: 2px solid white;
}

div.warning {
	font-family:'Exo2Bold';
	font-size: 1.5em;
	width: 400px;
	margin: 0 auto;
	border: 2px solid red;
	text-align: center;
	background-color: yellow;
	padding: 10px;
}

div#footer {
	display: inline-block;
	/* height: 60px; */
	border: 1px solid black;
	background-color: #888888;
	padding: 5px;
	position: relative;
	text-align: center;
	align-items: center;
}

div#mad-credit {
	text-align: center;
	display: block;
	position: fixed;
	right: 0;
	bottom: 0;
	margin: 5px;
}

div#mad-credit img {
	height: 42px;
	/* float: left; */
	margin: 5px;
}

div#mad-credit a, div#mad-credit a:visited, div#mad-credit a:active, div#mad-credit a:hover {
	text-decoration: none;
	font-family:'Exo2';
	color: black;
	text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}



.color-picker,
.color-picker::before,
.color-picker::after,
.color-picker *,
.color-picker *::before,
.color-picker *::after {
  box-sizing: border-box;
}

.color-picker {
  position: relative;
  z-index: 9999;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5);
}

.color-picker > div {
  display: flex;
  height: 10em;
  border: 1px solid #000;
  color: #000;
}

.color-picker > div * {
  border-color: inherit;
  color: inherit;
}

.color-picker i {
  font: inherit;
  font-size: 12px;
  /* Measure the color picker control size by measuring the text size */
}

.color-picker\:a,
.color-picker\:h,
.color-picker\:sv {
  background-size: 100% 100%;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.color-picker\:a div,
.color-picker\:h div,
.color-picker\:sv div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.color-picker\:a,
.color-picker\:h {
  width: 20%;
  border-left: 1px solid;
  cursor: ns-resize;
  overflow: hidden;
}

.color-picker\:a i,
.color-picker\:h i {
  display: block;
  height: .5em;
  position: absolute;
  top: -.25em;
  right: 0;
  left: 0;
  z-index: 2;
}

.color-picker\:a i::before,
.color-picker\:h i::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: .25em solid;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.color-picker\:a div {
  z-index: 2;
}

.color-picker\:a div + div {
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
  background-size: .5em .5em;
  background-position: 0 0, .25em .25em;
  z-index: 1;
}

.color-picker\:h div {
  background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.color-picker\:sv {
  width: 80%;
  cursor: crosshair;
  overflow: hidden;
}

.color-picker\:sv div + div {
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.color-picker\:sv div + div + div {
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.color-picker\:sv i {
  display: block;
  width: .75em;
  height: .75em;
  position: absolute;
  top: -.375em;
  right: -.375em;
  z-index: 2;
}

.color-picker\:sv i::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #fff;
  border-radius: 100%;
  box-shadow: 0 0 2px #000;
}

.color-picker.no-alpha .color-picker\:a {
	display: none;
}

.copyButton {
	border: 2px solid #2ac1ed;
	background-color: rgba(27, 39, 49, 0.7);
	border-radius: 7px;
	text-decoration: none;
	font-size: 1em;
	color: #2ac1ed;
	padding: 2px 10px 2px 10px; 
}

.copyButton:hover, .copyButton:focus {
	color: white;
	border: 2px solid white;
}

.copyButton:active {
	border: 2px solid rgba(27, 39, 49, 0.7);
	background-color: #2ac1ed;
	color: #1b2731;
}

table#BrandColors {
	font-family:'Exo2';
	color: #2ac1ed;
	border-collapse: collapse;
	empty-cells: show;
	margin: 0 auto;
	background-color: rgba(27, 39, 49, 0.7);
}

table#BrandColors tr {
	border: 1px solid #2ac1ed;
}

table#BrandColors td {
	padding: 10px;
}

div#colourPickerHEXColour {
	display: none;
}

table#colourConverter td:nth-child(6) {
	border-left: 3px solid #2ac1ed;
	width: 250px;
}

td.close {
	cursor:pointer;
  color: #fff;
  background: #b30000;
  font-size: 31px;
  font-weight: bold;
  line-height: 0px;
	width: 0;
	padding-right: 10px;
	align-items:left;
}