option.optional {
  color: #CCC;
}

.contentbox ul {
  padding: 0.5em 1em;
}

.download-info header {
  position: relative;
  font-size: 14px;
  background: #FFF9A0;
  box-shadow: 0 0 1px 0px #CCC;
  display: grid;
  grid-template-columns: auto 5em;
  margin-bottom: 1em;
}

.download-info header.by-user {
  grid-template-columns: auto 10em;
}

.download-info header.admin {
  grid-template-columns: auto 15em;
}

.download-info h2 {
  font-size: 2em;
  padding: 0.25em;
  margin-top: 0.2em;
}

.download-info h2 .byline {
  display: block;
  margin-top: 0.5em;
  font-size: 14px;
  font-weight: normal;
}

.download-info h2 .byline img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}

.download-info header .header-buttons {
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 1px;
}

.download-info header.by-user .header-buttons {
  grid-template-columns: 50% 50%;
}

.download-info header.admin .header-buttons {
  grid-template-columns: 33% 33% 34%;
}

.download-info header .header-buttons li {
  display: block;
  height: 100%;
  width: 100%;
  background: #FFEA84;
  font-weight: bold;
  text-align: center;
}

.download-info header .header-buttons li.button-like a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.download-info header .header-buttons li:not(:last-child) {
  border-right: 1px solid #FFF9A0;
}

.download-info header .header-buttons span {
  display: block;
  text-align: center;
  line-height: 1.15em;
  font-size: 0.8em;
  padding-top: 0.9em;
}

.download-info header .header-buttons span.rating {
  font-size: 2.5em;
  padding-top: 0;
}

.download-info .metadata, .download-info aside {
  font-size: 14px;
  display: inline-block;
  vertical-align:top;
}

.download-info .metadata, .download-info aside > div {
  background: #FEFFCF;
  box-sizing: border-box;
  margin-bottom: 1em;
}

.download-info aside .file-statistics {
  font-size: 0.8em;
  text-align: center;
}

.download-info aside .file-statistics li {
  display: inline-block;
}

.download-info .metadata {
  background: #FEFFCF;
  margin-top: 1em;
  box-shadow: 0 0 1px 0px #CCC;
  width: 100%;
}

.download-info .metadata h3, .download-info aside h3 {
  padding: 0.5em;
  background: #FFF9A0;
  font-weight: bold;
}

.download-info .metadata div {
  padding: 1em;
  line-height: 1.25em;
}

.download-info .metadata p:not(:last-child) {
  margin-bottom: 1em;
}

.download-info .metadata p img {
  display: inline-block;
  vertical-align: bottom;
}

.download-info .oldnotice img {
  float: right;
  margin-right: 10px;
  position: relative;
  top: -1em;
}

.download-info .download {
  padding: 0.5em;
  box-shadow: 0 0 1px 0px #CCC;
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-info .download .download-buttons {
  display: grid;
  grid-template-columns: 70% 30%;
  margin-bottom: 0.25em;
}

.download-info .download .download-buttons > * {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-info .download .download-button {
  font-size: 1.25em;
  margin-right: 0.25em;
}

.download-info .download .download-buttons .liked {
  background: #FFCD47;
}

.like-thumb {
  position: relative;
  top: 3px;
}

.download-info .download p {
  margin: 0.5em 0;
  font-size: 0.9em;
  text-align: center;
  margin-top: 1em;
}

#downloadcontents {
  width: 100%;
  max-height: 0;
  transition: 0.25s;
}

#downloadcontents.expand {
  max-height: auto;
}

#downloadcontents td {
  padding: 0.25em;
}

#downloadcontentsheader i, .toggle {
  font-style: normal;
}

#downloadcontentsheader i {
  font-size: 0.8em;
}

#downloadcontentsheader:not(.expanded) {
  border-bottom: 2px solid #FEFFCF;
}


tr.notice {
  display: none;
}

#downloadcontents img {
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
  margin-right: 0.5em;
}

.download-info aside > div.screenshots {
  background: transparent;
}

.screenshots {
  text-align: center;
  margin-top: 1em;
  display: grid;
  grid-template-columns: auto 25%;
  grid-column-gap: 1em;
  width: 95%;
  margin: 0 auto;
}

.screenshots > ul {
  vertical-align: top;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
  box-sizing: content-box;
}

.screenshots > ul > li {
  box-shadow: 0 0 1px 0px #CCC;
  width: 187px;
  height: 140px;
}

.screenshots .placeholder {
  font-size: 5em;
  color: #CCC;
}

.screenshots .placeholder a {
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screenshots .placeholder:hover {
  background: #FFE26A;
  color: #B62700;
}

.screenshot {
  height: 100%;
  object-fit: cover;
  width: 187px;
}

.highslide-wrapper {
  background: #FFE26A;
}

.highslide-caption {
  box-sizing: border-box;
  padding: 0.5em;
  text-align: center;
}

#musicplayer-control {
  cursor: pointer;
}

/** review form **/
p.login-warning {
  text-align: center;
  margin: 0.75em auto;
}

.review-form {
  width: 100%;
  display: grid;
  grid-template-columns: auto 10em;
  
}

.review-form textarea {
  width: 100%;
  font: inherit;
  height: 5em;
}

.review-form label {
  display: block;
  margin-bottom: 0.5em;
}
.wrap-review, .wrap-rating {
  display: inline-block;
  vertical-align: top;
}

.review-form select {
  width: 100%;
}

.review-form select, .review-form textarea {
  padding: 0.5em;
}

.download-info .metadata .review-form .submit {
  padding-top: 0;
}

.download-info .metadata .review-form .recommend {
  padding: 1em 0 0 0;
}

.review-form .recommend * {
  display: inline-block;
  vertical-align: top;
}


.wrap-rating input {
  width: 100%;
  margin: 0 auto;
  padding: 0.5em;
  margin-top: 0.75em;
}

.wrap-rating.no-rating input:nth-child(2) {
  margin-top: 0;
}

.wrap-rating input[type=submit] {
  padding: 0.65em 0.5em;
  
}


/** tags **/
.tags {
  box-shadow: 0 0 1px 0px #CCC;
}

.tag-list {
  margin: 0 auto;
  padding: 1em 0 0 0;
  width: 95%;
}

.tag-list li {
  padding: 0.4em 0.4em 0 0.5em;
  height: 1.35em;
  margin-bottom: 0.5em;
  display: inline-block;
  vertical-align: middle;
  line-height: 0.9em;
}

.tag-list li:not(.add-tag) {
  background: #FFEA84 url('/media/icons/tag_blue.png') no-repeat 0.4em 0.3em;
  text-indent: 1.3em;
}


.tag-list li.add-tag {
  height: 1.75em;
  padding: 0;
}

.tag-list .add-tag input, .tag-list .add-tag button {
  background: #FFEA84;
  border: 0;
  display: inline-block;
  vertical-align: top;
  color: #000;
  padding: 0.3em 0.5em;
}

.tag-list .add-tag input {
  width: 55%;
  background: #FFEA84 url('/media/icons/tag_blue_add.png') no-repeat 0.4em 0.3em;
  border-right: 1px solid #FEFFCF;
  text-indent: 1.3em;
}

.tag-list .add-tag button:hover {
  cursor: pointer;
}

.tag-list li img {
  display: inline-block;
}

.download-info button, .download-info input[type=submit], a.button-like, div.button-like {
  background-color: #FFEA84;
  border: 0;
  color: #6F1700;
  font-weight: bold;
  
}

.download-info button:hover, .download-info input[type=submit]:hover, a.button-like:hover {
  background-color: #FFCD47;
  border: 0;
  cursor: pointer;
}



/** reviews **/
.download-reviews {
  margin-top: 1em;
}

#pagecontent > h2.reviews-header {
  width: 100%;
  clear: both;
  display: block;
  text-align: center;
  margin-bottom: 1em;
  font-weight:bold;
  font-size:1.5em;
  border-bottom: 1px solid #B62700;
  padding-bottom: 0.25em;
}

.download-reviews header {
  position: relative;
  display: grid;
  grid-template-columns: 40px auto 3em;
  grid-column-gap: 1px;
}

.download-reviews .has-rating header, .download-reviews .featured header, .download-reviews .can-edit header {
  grid-template-columns: 40px auto 3em 4em;
}

.download-reviews .featured.has-rating header, .download-reviews .featured.can-edit header {
  grid-template-columns: 40px auto 6em 3em 4em;
}
  
.download-reviews .can-edit.has-rating header {
  grid-template-columns: 40px auto 3em 4em 5.25em;
}

.download-reviews .featured.has-rating.can-edit header {
  grid-template-columns: 40px auto 6em 3em 4em 5.25em;
}

.download-reviews .featured header.can-edit {
  grid-template-columns: 40px auto 6em 3em 4em 5.25em;
}

.download-reviews header > img:first-child {
  width: 100%;
  height: 40px;
}

.download-reviews .rating, .download-reviews a.button-like, .download-reviews .badge {
  font-weight: bold;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-reviews .rating {
  background-color: #FFEA84;
  font-size: 1.5em;
}

.download-reviews .badge {
  background-color: #FFEA84;
  color: #B62700;
  text-transform: uppercase;
}

.download-reviews .featured {
  background-color: #FFF9A0;
}

.download-reviews .featured h3 {
  background-color: #FFEA84;
}

.download-reviews .featured .rating, .download-reviews .featured .badge, .download-reviews .featured .button-like {
  background-color: #FFCD47;
}

.download-reviews .date {
  font-size: 0.64em;
  font-weight: normal;
}

.download-reviews header > img, .download-reviews h3 {
  display: inline-block;
  vertical-align: top;
  font-size: 1.25em;
}

.download-reviews h3 {
  padding-left: 0.5em;
}

.download-reviews header {
  background: #FFF9A0;
}

.download-reviews .rating span.number img {
  height: 0.7em;
  margin-left: 0.25em;
  margin-top: 0.1em;
}

.download-reviews footer p:last-child {
  padding-bottom: 0.5em;
}

.download-reviews footer p {
  font-size: 0.8em;
  text-align: center;
  padding: 0;
}

.download-review-form.contentbox textarea {
  height: 15em;
}