jpeg.org bug

main.css

* {
  margin: 0;
  padding: 0;
  font-family: Calibri, "Trebuchet MS", Helvetica, sans-serif;
  text-decoration: none; }

html {
  min-height: 100%;
  height: 100%; }

body {
  height: 100%;
  text-align: center;
  background-color: #8e8e8e;
  overflow-x: hidden; }

del {
  text-decoration: line-through; }

#body {
  min-height: 100% !important;
  height: auto;
  position: relative;
  background-color: #ffffff;
  text-align: left;
  margin: 0px auto;
  max-width: 100%; }

/* Content */
#content {
  background-color: #ffffff;
  color: #3f3f3f;
  padding: 20px;
  padding-bottom: 140px;
  line-height: 1.3;
  overflow: hidden; }

#content a {
  border-bottom: 1px dotted #7b8b94;
  color: #7b8b94; }

#content a:hover {
  border-bottom: 1px dotted #afc6d2;
  color: #afc6d2; }

#content .meta {
  font-style: italic;
  font-size: 12px; }

#content p {
  text-align: justify;
  padding-bottom: 15px; }

#content h2 {
  font-weight: normal;
  font-size: 30px;
  padding-bottom: 10px; }

#content h3 {
  font-size: 18px;
  font-weight: normal;
  padding-bottom: 10px; }

#content ul, ol {
  padding-left: 40px;
  padding-right: 20px; }

#content li {
  padding-bottom: 10px; }

#content li div:focus {
  outline: none; }

#content table {
  margin-bottom: 10px;
  display: block;
  max-width: 100%;
  overflow-x: auto; }

#content thead {
  background-color: #dddddd; }

#content thead th {
  font-weight: bold;
  padding: 10px; }

#content tbody {
  background-color: #eeeeee; }

#content tbody td {
  padding: 10px; }

.top-logo {
  position: absolute;
  z-index: 1000;
  margin-left: 20px;
  top: 12px;
  float: left;
  width: 70px; }

.centered {
  text-align: center; }

.centered-image {
  margin-left: auto;
  margin-right: auto;
  display: block; }

.image-right {
  float: right;
  padding-left: 20px; }

table.center {
  margin-left: auto;
  margin-right: auto; }

@media screen and (min-width: 980px) {
  #body > div:not(#content) > *:not(img):not(ul) {
    width: 980px;
    transform: translateX(-50%);
    margin-left: 50%; }

  #body > div:not(#content) > img.standard-home-image {
    width: 490px;
    transform: translateX(-490px);
    margin-left: 50%; }

  div#content {
    width: 980px;
    transform: translateX(-50%);
    margin-left: 50%;
    display: block; } }
@media screen and (max-width: 979px) {
  .top-logo {
    width: 50px; } }
/* Top navigation bar */
#topnav {
  text-align: right;
  padding-right: 10px;
  background-color: #414042;
  color: #a6a8ab;
  height: 40px; }

#topnav #hamburger {
  display: none; }

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 10px; }

#topnav li {
  display: inline; }

#topnav li:not(:last-child):after {
  content: " | ";
  padding-left: 5px;
  padding-right: 5px; }

#topnav .selected {
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 12px; }

#topnav a:link, #topnav a:visited {
  color: #a6a8ab;
  text-align: center;
  text-decoration: none;
  font-size: 12px; }

#topnav a:hover {
  color: #ffffff; }

#topnav form {
  float: right;
  margin-top: 4px; }

/* Sub navigation 1st level */
#subnav1.mobile {
  display: none; }

#subnav1.desktop li:last-child ul {
  display: none;
  padding: 20px 0px 6px 0px;
  position: absolute;
  background-color: #58595b;
  width: max-content;
  min-width: 96px;
  right: 0; }

#subnav1.desktop li:last-child:hover ul {
  display: block; }

#subnav1.desktop li:last-child ul .separator {
  display: none; }

#subnav1.desktop li:last-child > ul li {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block; }

#subnav1.desktop {
  z-index: 2;
  position: relative; }

#subnav1 {
  background-color: #58595b;
  color: #eeeeee; }

#subnav1 ul {
  list-style-type: none;
  margin: 0;
  padding: 100px 0px 6px 0px;
  text-align: center; }

#subnav1 li {
  display: inline;
  padding-left: 12px;
  padding-right: 12px; }

#subnav1 .selected {
  border-radius: 5px 5px 0px 0px;
  padding-bottom: 6px;
  padding-top: 6px; }

#subnav1 li .fas {
  display: none; }

#subnav1 a:link, #subnav1 a:visited {
  color: #eeeeee;
  text-align: center;
  text-decoration: none;
  font-size: 14px; }

#subnav1 a:hover {
  color: #ffffff; }

/* Sub navigation 2nd level */
#subnav2 {
  color: #eeeeee; }

#subnav2 ul {
  list-style-type: none;
  margin: 0;
  padding: 10px 0px 10px 0px; }

#subnav2 li {
  display: inline;
  padding-left: 15px;
  padding-right: 15px; }

#subnav2 .selected {
  background-color: #ffffff;
  border-radius: 5px 5px 0px 0px;
  padding-top: 2px;
  padding-bottom: 10px; }

#subnav2 li .fas {
  display: none; }

#subnav2 .selected a:link, #subnav2 .selected a:visited {
  color: #3f3f3f; }

#subnav2 a:link, #subnav2 a:visited {
  color: #eeeeee;
  text-align: center;
  text-decoration: none;
  font-size: 14px; }

#subnav2 a:hover {
  color: #ffffff; }

@media screen and (max-width: 979px) {
  #topnav #hamburger {
    display: block;
    font-size: 26px;
    padding-top: 5px;
    color: #eeeeee; }

  #topnav ul {
    display: none;
    background-color: #414042;
    margin-right: -21px; }

  #topnav:hover ul {
    display: block;
    background-color: #414042;
    height: auto;
    position: sticky;
    width: auto;
    padding-right: 20px;
    padding-bottom: 10px; }

  #topnav li {
    display: block;
    padding: 10px; }

  #topnav .selected {
    color: #ffffff;
    text-align: right;
    font-weight: bold;
    font-size: 16px; }

  #topnav a:link, #topnav a:visited {
    color: #a6a8ab;
    text-align: center;
    text-decoration: none;
    font-size: 16px; }

  #topnav li:not(:last-child):after {
    content: "";
    padding-left: 0px;
    padding-right: 0px; }

  #subnav1.mobile {
    display: block; }

  #subnav1.desktop {
    display: none; }

  #subnav1 ul {
    padding: 60px 0px 6px 20px; }

  #subnav1 li {
    display: none;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px; }

  #subnav1 .selected {
    padding-left: 15px;
    display: inline; }

  #subnav1 .selected-expanded {
    display: block; }

  #subnav1 .selected-expanded a {
    color: #ffffff;
    font-weight: bold; }

  #subnav1 li .fas {
    display: inline;
    color: #eeeeee;
    padding-right: 10px; }

  #subnav1 ul,
  #subnav2 ul {
    width: fit-content; }

  #subnav1 ul:hover li,
  #subnav2 ul:hover li {
    display: block;
    background-color: transparent !important;
    padding-left: 0px; }

  #subnav2 ul:hover i,
  #subnav1 ul:hover i {
    display: none !important; }

  #subnav1 ul:hover li.selected a,
  #subnav2 ul:hover li.selected a {
    pointer-events: none;
    font-weight: bold;
    color: #ffffff; }

  #subnav2 ul {
    padding: 15px 0px 5px 20px; }

  #subnav2 li {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px; }

  #subnav2 .selected {
    display: inline;
    padding-top: 5px; }

  #subnav2 .selected-expanded {
    display: block; }

  #subnav2 .selected-expanded a {
    color: #ffffff;
    font-weight: bold; }

  #subnav2 li .fas {
    display: inline;
    color: #3f3f3f;
    padding-right: 10px; }

  #subnav2 li .selected-expanded .fas {
    display: none; }

  .separator {
    display: none; }

  #subnav1 a:link, #subnav1 a:visited {
    font-size: 16px; }

  #subnav2 a:link, #subnav2 a:visited {
    font-size: 16px; } }
/* Home page style elements */
body#home > #body {
  background-color: #414042; }

/* Standards grid */
#standards-grid {
  background-color: #58595b;
  padding-top: 60px;
  padding-bottom: 40px;
  text-align: center; }

#standards-grid table {
  max-width: 100%; }

#standards-grid td {
  padding: 10px 50px 10px 50px; }

/* News and events */
.container {
  clear: both;
  padding-bottom: 190px;
  padding-top: 20px; }

.container > div {
  display: table-cell;
  width: 50%;
  background-color: #414042; }

#home-news, #home-events {
  width: 490px; }

#home-news h1, #home-events h1 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 21px;
  font-style: italic;
  font-weight: normal;
  padding-left: 30px;
  color: #eeeeee; }

#home-news ul, #home-events ul {
  list-style: none;
  padding: 30px 0px 30px 0px; }

#home-news li, #home-events li {
  padding: 10px 20px 30px 30px; }

#home-news .title, #home-events .title {
  color: #f1f1f1;
  font-size: 17px; }

#home-news .meta, #home-events .meta {
  color: #808080;
  font-size: 13px;
  float: left; }

#home-news .readmore, #home-events .readmore {
  font-size: 11px;
  font-style: italic;
  float: right;
  padding-right: 20px; }

#home-news .readmore a:link, #home-events .readmore a:link, #home-news .readmore a:visited, #home-events .readmore a:visited {
  color: #808080; }

#home-news .readmore a:hover, #home-events .readmore a:hover {
  color: white; }

#home-more-news, #home-more-events {
  text-align: right;
  padding: 0px 40px 20px 20px; }

#home-more-news a:link, #home-more-events a:link, #home-more-news a:visited, #home-more-events a:visited {
  color: #808080;
  font-size: 14px;
  font-style: italic; }

#home-more-news a:hover, #home-more-events a:hover {
  color: white; }

/* Contributors */
#home-contributors {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding-bottom: 120px; }

#home-contributors-inner {
  padding: 20px 0px 20px 0px;
  text-align: center; }

#home-contributors img {
  padding: 0px 5px 0px 5px; }

@media screen and (max-width: 979px) {
  #standards-grid img.jpeg-logo {
    width: 40px; }

  #standards-grid td {
    padding: 10px 20px 10px 20px;
    display: inline-block; }

  #standards-grid tr {
    display: inline; }

  #home-news, #home-events {
    max-width: 100%;
    min-width: 100%;
    display: block; }

  #home-contributors {
    padding-bottom: 80px;
    position: unset;
    margin-top: -190px; }

  #home-contributors-inner {
    padding-top: 40px; }

  #home-contributors-inner a {
    display: block;
    height: 80px; } }
/* Footer */
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #58595b;
  padding: 20px 10px 20px 10px; }

#footer img {
  float: left;
  width: 60px; }

#footer a:link, #footer a:visited {
  color: #a6a8ab; }

#footer a:hover {
  color: white; }

#footer a.selected:link, #footer a.selected:visited {
  color: #ffffff; }

#footer table {
  font-size: 12px;
  margin-left: 80px; }

#footer td {
  padding: 5px 30px 5px 30px;
  vertical-align: top; }

@media screen and (max-width: 979px) {
  #footer table {
    display: none; }

  #footer img {
    width: 40px; } }
/* Layout elements of generic pages */
#pagetitlebar {
  background-color: #00a89c;
  padding: 4px 20px 4px 20px;
  font-style: italic;
  font-size: 18px;
  color: #eeeeee; }

#pagetitlebar a, #pagetitlebar a:visited {
  color: #eeeeee; }

#pagetitlebar a:hover {
  color: #ffffff; }

#pagetitlebar {
  background-color: #00a89c;
  padding: 4px 20px 4px 20px;
  font-style: italic;
  font-size: 18px;
  color: #eeeeee; }

#pagetitlebar .news-title {
  float: left; }

#pagetitlebar .pressrelease-title {
  margin-left: 535px; }

/* Standards custom background colors */
.bg-jpeg {
  background-color: #7b8b94; }

.bg-jpsearch {
  background-color: #9274b2; }

.bg-jpeg2000 {
  background-color: #44c6f3; }

.bg-jbig {
  background-color: #d14141; }

.bg-jpegsystems {
  background-color: #e9c818; }

.bg-jpegxr {
  background-color: #bdd53a; }

.bg-jpegls {
  background-color: #eeb05e; }

.bg-aic {
  background-color: #0071bb; }

.bg-jpegxt {
  background-color: #3ab065; }

.bg-jpegxs {
  background-color: #C062A2; }

.bg-jpegpleno {
  background-color: #d44b65; }

.bg-jpegxl {
  background-color: #3bb6b3; }

.bg-jpegai {
  background-color: #c8ad00; }

.bg-explor {
  background-color: #00a89c; }

/* Standards custom text colors */
.tc-jpeg, .content-jpeg h3 {
  color: #7b8b94; }

.tc-jpsearch, .content-jpsearch h3 {
  color: #9274b2; }

.tc-jpeg2000, .content-jpeg2000 h3 {
  color: #44c6f3; }

.tc-jbig, .content-jbig h3 {
  color: #d14141; }

.tc-jpegsystems, .content-jpegsystems h3 {
  color: #e9c818; }

.tc-jpegxr, .content-jpegxr h3 {
  color: #bdd53a; }

.tc-jpegls, .content-jpegls h3 {
  color: #eeb05e; }

.tc-aic, .content-aic h3 {
  color: #0071bb; }

.tc-jpegxt, .content-jpegxt h3 {
  color: #3ab065; }

.tc-jpegxs, .content-jpegxs h3 {
  color: #C062A2; }

.tc-jpegpleno, .content-jpegpleno h3 {
  color: #d44b65; }

.tc-jpegxl, .content-jpegxl h3 {
  color: #3bb6b3; }

.tc-jpegai, .content-jpegai h3 {
  color: #c8ad00; }

.tc-explor, .content-explor h3 {
  color: #00a89c; }

/* Standard pages */
.standard-home-image {
  padding-right: 20px;
  width: 490px;
  max-width: 110%;
  float: left; }

.standard table#parts {
  border-collapse: separate;
  border-spacing: 0px 10px;
  padding: 0px 20px 0px 0px;
  table-layout: fixed; }

.standard table#parts tbody {
  background-color: #ffffff !important; }

.standard table#parts td {
  border-right: 1px solid #5f604b;
  padding: 5px 20px 5px 20px;
  vertical-align: top;
  font-size: 14px;
  color: #5f604b;
  width: 25%; }

.standard table#parts td:last-child {
  border-right: none; }

.standard table#parts tr.separating_line td {
  border-bottom: 1px solid #5f604b;
  padding: 0px !important; }

@media screen and (max-width: 979px) {
  .standard-home-image {
    margin-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
    width: 100%; }

  .standard table#parts {
    display: block;
    max-width: 100%; }

  .standard table#parts td {
    display: inline-block;
    width: 100%;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid #5f604b; }

  .standard table#parts tr:last-child td:last-child {
    border-bottom: none; }

  .standard table#parts tr.separating_line {
    display: none; } }
/* News & Press releases */
.news-list {
  float: left;
  width: 480px;
  padding-right: 10px;
  margin-left: -20px;
  text-align: left; }

.more-icon {
  float: right; }

.news-highlight {
  float: left;
  text-align: left;
  width: 223px;
  height: 300px;
  border-right: 1px solid #00a89c;
  border-left: 1px solid #00a89c;
  padding: 10px; }

.news-highlight img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  text-align: left; }

.press-list {
  float: right;
  width: 455px;
  padding-left: 10px;
  margin-right: -20px; }

.news-list ul, .press-list ul {
  list-style-type: none; }

.news-list li {
  border-bottom: 1px solid #00a89c;
  padding: 10px 10px 10px 20px; }

.press-list li {
  border-bottom: 1px solid #00a89c;
  padding: 10px 20px 10px 10px; }

.news-list li:last-child, .press-list li:last-child {
  border-bottom: none; }

.news-list .title, .press-list .title, .news-highlight .title {
  color: #00a89c;
  font-size: 17px;
  font-weight: bold; }

.news-highlight .title {
  padding-bottom: 1px; }

.news-list .meta, .press-list .meta, .news-highlight .meta {
  font-style: italic;
  font-size: 12px; }

.news-list .readmore, .press-list .readmore {
  float: right; }

/* Events */
.events-list ul {
  list-style-type: none; }

.events-list li {
  padding-bottom: 20px; }

.events-list .title {
  color: #00a89c;
  font-size: 17px;
  font-weight: bold; }

.events-list .meta {
  font-style: italic;
  font-size: 12px; }

.events-list li {
  border-bottom: 1px solid #00a89c;
  padding: 10px 10px 10px 20px; }

.events-list li:last-child {
  border-bottom: none; }

.tox-progress {
  position: relative; }
  .tox-progress .radial-outer,
  .tox-progress .radial-inner {
    border-radius: 50%; }
  .tox-progress .radial-inner,
  .tox-progress .radial-mask-1,
  .tox-progress .radial-mask-2,
  .tox-progress .radial-mask-3,
  .tox-progress .tox-progress-content {
    position: relative; }
  .tox-progress .radial-mask-1,
  .tox-progress .radial-mask-2,
  .tox-progress .radial-mask-3 {
    transform-origin: bottom center; }
  .tox-progress .radial-mask-1,
  .tox-progress .radial-mask-3 {
    transform: rotate(90deg); }
  .tox-progress .radial-mask-2 {
    transform: rotate(270deg); }

screenshot_jpeg_website.png