body,input { font-family: Lato, sans-serif; font-size: 16px; font-weight: 400 }
body { background-color: #f0f0f0; background-image: url(Background.png); margin: 0 0 }
p { margin: 6px 0 }
table { border-collapse: collapse; border-spacing: 0 }
th, td { padding: 0px }
h1 { color: #444444; font-size: 48px; font-weight: 400; text-align: center }
h2 { color: #444444; font-size: 24px; font-weight: 400; margin: 0 0 }
h3 { color: #0576b2; font-size: 16px; font-weight: 700; margin: 0 0 }
a { color: #0000cc }
a img { border: none }

table.ol { border-spacing: 0; padding-top: 6px }
table.ol td { vertical-align: top; padding-bottom: 6px }
table.ol td:first-child { padding-right: 5px }

a.button {
	background-color: #444444;
	border-radius: 3px;
	color: #ffffff;
	padding: 8px 16px;
	text-decoration: none
	}

.whitebox {
	background-color: #fdfdfd;
	border-bottom: 1px solid #dddddd;
	border-left: 1px solid #eeeeee;
	border-radius: 5px;
	border-right: 1px solid #eeeeee;
	border-top: 1px solid #ffffff
	}

div.headItems > a {
	border-radius: 3px;
	color: #444444;
	font-size: 12px;
	padding: 4px 9px;
	text-decoration: none
	}

div.headItems > a:hover {
	background-color: #f0f0f0
	}

div.headItems > a.selected {
	background-color: #444444;
	color: #ffffff
	}

.logoViolet { color: #9d0780 }
.logoOrange { color: #ff3200 }
.logoYellow { color: #ffa000 }
.logoBlue { color: #0576b2 }

.downloadButton {
	background: linear-gradient(to bottom, #ffc477, #fb9e25);
	background-color: #ffc477;
	border-bottom: 1px solid #cc9f52;
	border-radius: 5px;
	border-top: 1px solid #fce2c1;
	box-shadow: 0 0 6px #cccccc;
	color: white;
	cursor: pointer;
	padding: 8px 18px;
	text-decoration: none;
	text-shadow: 0 0 2px #cc9f52
	}

.downloadButton:active {
	background: linear-gradient(to bottom, #fb9e25, #ffc477);
	background-color: #fb9e25
	}

.downloadButtonDisabled {
	background: #dddddd;
	border-bottom: 1px solid #cccccc;
	border-radius: 5px;
	border-top: 1px solid #e7e7e7;
	box-shadow: 0 0 6px #cccccc;
	color: white;
	cursor: pointer;
	padding: 6px 18px;
	text-decoration: none;
	text-shadow: 0 0 2px #cccccc
	}

span.key { background-color: #555555; border: 1px solid white; border-radius: 2px; box-shadow: 0 1px 1px #222222; display: inline-block; font-size: 12px; height: 16px; text-align: center; width: 16px }
span.longKey { background-color: #555555; border: 1px solid white; border-radius: 2px; box-shadow: 0 1px 1px #222222; display: inline-block; font-size: 12px; height: 16px; text-align: center; width: 36px }

span#dominantColorList span { display: inline-block; height: 13px; margin: 3px 0 0 0; vertical-align: top }
table#dominantColorTable { border-collapse: collapse; color: #999; font-size: 12px }
table#dominantColorTable tr {  }
table#dominantColorTable td:first-child { min-width: 25px }
table#dominantColorTable td:nth-child(2) { padding-left: 10px; text-align: right }
table#dominantColorTable td { padding: 10px 5px; text-align: left; white-space: nowrap }

div.footer { color: #cccccc; font-size: 10pt }
div.footer a { color: #cccccc; text-decoration: none }
div.footer a:hover { color: #ffffff; text-decoration: none }

/* Large screens */
@media (min-width: 481px) {
	#largeScreen { display: block }
	#smallScreen { display: none }
}

/* Small screens */
@media (max-width: 480px) {
	#largeScreen { display: none }
	#smallScreen { display: block }
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), local('Lato-Regular'), url(/lato-regular.woff) format('woff')
	}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: local('Lato Bold'), local('Lato-Bold'), url(/lato-bold.woff) format('woff')
	}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 900;
	src: local('Lato Black'), local('Lato-Black'), url(/lato-black.woff) format('woff')
	}