/*
 * Copyright (C) 2000 - 2024 Silverpeas
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * As a special exception to the terms and conditions of version 3.0 of
 * the GPL, you may redistribute this Program in connection with Free/Libre
 * Open Source Software ("FLOSS") applications as described in Silverpeas's
 * FLOSS exception.  You should have received a copy of the text describing
 * the FLOSS exception, and it is also available here:
 * "http://www.silverpeas.org/docs/core/legal/floss_exception.html"
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
#subTopics {
  width: 100%;
  padding-bottom: 0.5em;
}

#subTopics ul {
  list-style-type: none;
  padding: 0;
  margin: 0.5em 1em;
  display: flex;
  flex-wrap: wrap;
}

#subTopics ul li {
  margin:0 0.5em 0.5em 0;
  max-width:calc( 25% - 0.5em - 2px ); 
  flex-grow: 1;
  position: relative;
  background-color: var(--bgColor-dossier);
  border-radius:var(--radius-dossier);
  max-height: 102px;
  overflow: hidden;
}
#subTopics ul li:hover {
  background-color: var(--bgColor-dossier-hover);
}

#subTopics ul li a {
  background: url("../icons/pack_big_icons.gif") 3px 5px no-repeat;
  display: block;
  height:calc(100% - 1em);
  min-height: 42px;
  padding: 0.5em 0.5em 0.5em 50px;
  line-height: 100%;
  border-radius:var(--radius-dossier);
}

#subTopics ul li a strong {
  display: block;
  padding:0 3em 0.25em 0;
}

#subTopics ul li a strong span {
  background: url("../icons/icon-photo.gif") top right no-repeat;
  display: block;
  height: 20px;
  width: 25px;
  position: absolute;
  right: 10px;
  top: 8px;
  padding: 1px 19px 0 0;
  text-align: right;
}

#subTopics ul li a:hover {
  background: var(--bgColor-dossier-hover) url("../icons/pack_big_icons.gif") 3px -95px no-repeat;
}

#subTopics ul li a span {
  display: block;
  font-size: 0.9em;
  font-weight: normal;
}


#subTopics ul li a > span {
  color:var(--color-text-description);
}
#topicDescription {
  color:var(--color-text-description);
}

#albumList {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color:var(--color-text);
  text-decoration: none;
}

ul#albumList li.ui-state-highlight {
  background-image: none;
  background-color:var(--bgColor-dossier);
}

#footer {
  text-align: center;
  margin-top: 0.5em;
}

/* Slider */
.gallery-slider-player-buttons {
  z-index: 10;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  opacity: 0.7;
  position: absolute;
  filter: alpha(opacity=70);
}

.gallery-slider-player-buttons:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

/** FICHE **/
.gallery-fiche-media .fileName {
  text-align: center;
  font-size:1.3em;
  padding: 0 0 0.25em 0;
  color:var(--color-text);
  font-weight: bold;
}

.gallery-fiche-media .fileName a {
  font-size:1em;
  color:var(--color-text);
}

.gallery-fiche-media .rightContent .fileCharacteristic {
  background-color: #efefef;
  background-image: url();
  margin-bottom: 1em;
}

.gallery-fiche-media .rightContent b {
  display: block;
}

.gallery-fiche-media .rightContent .fileCharacteristic .header h4 {
  height: 16px;
}

.gallery-fiche-photo .rightContent .fileCharacteristic .header h4 {
  background: url("../icons/icon-photo.gif") no-repeat scroll right top transparent;
}

.gallery-fiche-video .rightContent .fileCharacteristic .header h4 {
  background: url("../icons/icon-video.png") no-repeat scroll right top transparent;
}

.gallery-fiche-sound .rightContent .fileCharacteristic .header h4 {
  background: url("../icons/icon-sound.png") no-repeat scroll right top transparent;
}

.gallery-fiche-streaming .rightContent .fileCharacteristic .header h4 {
  background: url("../icons/icon-streaming.png") no-repeat scroll right top transparent;
}

.gallery-fiche-media .rightContent .fileCharacteristicDuration {
  float: left;
  background: transparent url(../icons/duration.png) no-repeat 0 0;
  padding: 0 0 0 24px;
  width: 100px;
}

.gallery-fiche-media .rightContent .fileCharacteristic a.download-link {
  display: block;
  background-color: #FFF;
  border-bottom: 1px solid #cdcdcd;
  border-top: 1px solid #cdcdcd;
  margin: 0.5em 0;
  padding: 0.25em 0;
  text-align: center;
  text-align: center;
}

.gallery-fiche-media .rightContent .fileCharacteristic a.download-link img {
  border: 0;
  vertical-align: middle;
}

.gallery-fiche-media .rightContent .fileCharacteristicSize {
  float: left;
  background: transparent url(../icons/size.png) no-repeat 0 0;
  padding: 0 0 0 24px;
  width: 100px;
}

.gallery-fiche-media .rightContent .fileCharacteristicWeight {
  float: left;
  background: transparent url(../icons/weight.png) no-repeat 0 0;
  padding: 0 0 0 24px;
  width: 100px;
}

.gallery-fiche-media .rightContent .periode .header h4 {
  background: url("../../../util/icons/calendar_2.gif") no-repeat scroll right top transparent;
  height: 16px;
}

.gallery-fiche-media .rightContent .periode_visibility, .gallery-fiche-media .rightContent .periode_download {
  width: 120px;
  float: left;
}

.gallery-fiche-media .rightContent .fileCharacteristic b {
  display: block;
}

br.clear {
  clear: both
}

.commentaires {
  border-top: 2px dotted #cecece;
  clear: left;
  margin-top: 15px;
  overflow: auto;
  width: 100%;
}

.gallery-fiche-media .hautFrame {
  padding-top: 0;
}

.gallery-fiche-media .hautFrame form {
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
}

.principalContent #pagination,
.principalContent .fondPhoto,
.principalContent .fondPhotoNotVisible {
  text-align: center;
}

.contentMedia .mediaTitle {
  margin: 0;
  padding: 0;
}

.contentMedia .mediaTitle,
.contentMedia .motsClefs {
  display: inline-block;
  vertical-align: middle;
}

.contentMedia .description {
  border-left: 6px solid #e4e4e4;
  padding: 8px;
  margin: 1em 0;
}

.gallery-fiche-media #pagination {
  display: block;
  float: right;
  height: 30px;
  line-height: 31px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100px;
}

.gallery-fiche-media #pagination .txtnav {
  font-size: 10pt;
}

.gallery-fiche-media .currentPage {
  opacity: 0.6;
}

.gallery-fiche-media #pagination img {
  border: 0;
  vertical-align: middle;
}

.gallery-fiche-media #backToSearch {
  height: auto;
  left: calc(100% - var(--right-side-width));
  position: absolute;
}

.gallery-fiche-media #backToSearch a.button {
  background: var(--bgColor-btn-secondaire);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-color-btn-secondaire);
  color: var(--color-text-btn-secondaire);
  font-size: 1em;
  padding: 0.5em 1em;
  display: inline-block;
}

.gallery-fiche-media #backToSearch a.button span {
  background: url("../../../util/icons/back.png") no-repeat scroll 0 0 transparent;
  display: block;
  font-weight: bold;
  line-height: 16px;
  padding: 0 0 0 24px;
  text-align: center;
}

.principalContent #pagination img, .principalContent .contentMedia img {
  border: 0;
}

.principalContent .cadrePhoto {
  width: auto;
  display: inline-block;
  margin: 0 auto 1em;
}

.motsClefs a {
  background-color:var(--bgColor-etiquette);
  border-radius:var(--radius-etiquette);
  color:var(--color-text-etiquette);
  font-size: 0.9em;
  line-height: 1em;
  margin: 0 0.25em 0.15em 0;
  padding: 0.35em 0.5em;
  position: relative;
  z-index: 10;
}

.motsClefs a:hover {
  background-color:var(--bgColor-hover-etiquette);
  color:var(--color-text-hover-etiquette);
}

.validateNotAvailable {
  opacity: 0.5;
}

/******** pour fieldset *************/
#urlArea, #titleArea, #descriptionArea, #downloadArea,  #fileArea, #authorArea, #keywordArea, #generalArea, #fileNameArea {
  width: 100%;
}

#downloadArea {
  height: 2em;
}

#photoOptions #downloadArea {
  height: 3em;
}

.legend {
  padding-left: 15px;
  clear: both;
}

.legende {
  display: none;
}

#allInfo legend {
  background: transparent url("../../../util/icons/component/gallerySmall.gif") 11px 0 no-repeat;
}

#photoInfo legend {
  background: transparent url("../icons/icon-photo.gif") 11px 0 no-repeat;
}

#videoInfo legend {
  background: transparent url("../icons/icon-video.png") 11px 0 no-repeat;
}

#soundInfo legend {
  background: transparent url("../icons/icon-sound.png") 11px 0 no-repeat;
}

#streamingInfo legend {
  background: transparent url("../icons/icon-streaming.png") 11px 0 no-repeat;
}

#allOptions legend,
#photoOptions legend,
#videoOptions legend,
#soundOptions legend,
#streamingOptions legend {
  background: transparent url("../../../util/icons/cog.png") 11px 0 no-repeat;
}

#formInfo legend {
  background: transparent url("../../../util/icons/component/formsOnlineSmall.gif") 11px 0 no-repeat;
}

.editMedia #metadata {
  width: 300px;
  margin: 1em auto 0;
}

.editMedia #metadata b {
  display: block;
}

#fileNameArea {
  display: none;
}

.editMedia #fileNameArea {
  display: block;
  clear: left;
  padding-top: 0
}

.editMedia #fileNameArea label {
  display: none;
}

#beginDownloadDateArea,
#beginDateArea {
  width: 276px;
}

#beginDateArea {
  clear: both;
}

#endDateArea,
#endDownloadDateArea {
  width: 150px;
}

#endDateArea label,
#endDownloadDateArea label {
  width: 50px;
}

#beginDownloadDateArea .txtnote,
#endDownloadDateArea .txtnote,
#endDateArea .txtnote,
#beginDateArea .txtnote {
  font-size: 80%;
}

#endDateArea .champs,
#endDownloadDateArea .champs {
  margin-left: 50px;
}

/************ inline message folder empty **********/
#folder-empty ul {
  width: 50%;
  text-align: left;
  margin: 1em auto;
  min-width: 300px;
}

/************ listing des media dans un album **********/
.a-media.aff-list.vignette {
  width: 300px;
}

.a-media.aff-list.checkbox {
  width: 22px;
}

.a-media .fondPhoto,
.a-media .fondPhotoNotVisible {
  text-align: center;
  padding: 0 0 18px;
}

.a-media .fondPhotoNotVisible .cadrePhoto {
  background-color: #ff9933;
}

.a-media .fondPhotoNotVisible {
  background-color: transparent;
}

.a-media .cadrePhoto {
  margin: 0 auto;
  display: inline-block;
}

.a-media.aff-small,
.a-media.aff-list.details {
  vertical-align: top;
}

.a-media.aff-tiny {
  vertical-align: bottom;
}

.a-media.aff-small .cadrePhoto {
  height: 133px;
}

.a-media.aff-tiny .txtlibform,
.a-media.aff-small .txtlibform {
  padding: 0;
  text-align: center;
}

/*********************** Specific advanced search CSS *********************/

#searchFormId .sp_button,
#searchFormId button {
  font-size: 90% !important;
  height: 18px;
  line-height: 18px;
  padding-bottom: 0;
  padding-top: 0;
  vertical-align: top;
}

#generalFieldset {
  min-height: 20px;
}

#generalArea .sp_button {
  display: inline-block;
  height: 17px;
}

#generalArea input {
  width: 62%;
}

#metadataFieldset legend {
  background: transparent url("../../../util/icons/cog.png") 11px 0 no-repeat;
}

.formulaire legend {
  background: transparent url("../../../util/icons/component/formulairesSmall.gif") 11px 0 no-repeat;
}

#pdcFieldset legend {
  background: transparent url("../../../util/icons/component/pdcPeasSmall.gif") 11px 0 no-repeat;
}

#pdcFieldset .field {
  clear: both;
}

#pdcFieldset label img {
  margin-right: 0.5em;
}

.noty_text ul {
  margin: 0 2em;
  padding: 0;
  text-align: left;
}

/* liste des emplacement **/
#pathsId ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#pathsId ul li {
  padding: 0;
  margin: 0;
}

#pathsId ul ul {
  padding-left: 2em;
}

.locations {
  margin-bottom: 1em;
  max-height: 400px;
  overflow: auto;
}

.cadrePhoto {
position: relative;
}

.type-media {
  position:absolute;
  border: 0;
  top:-14px;
  left:-14px;
}

#searchFormId {
  text-align: center;
}

#searchFormId table {
  margin: 0 auto;
}