/* modules/gallery/css/gallery.css */
/**
 * Gallery 3 core module styles
 *
 * Sheet organization:
 *  1)  End-user
 *  2)  Admin
 *  3)  Right to left language styles
 */

/** *******************************************************************
 * 1) End-user
 **********************************************************************/

/* Uploader ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-add-photos-canvas,
#g-add-photos-status {
  width: 469px;
}

#g-add-photos-canvas {
  border: 1px solid  #ccc;
  height: 200px;
  margin: .5em 0;
  padding: 2.8em 0 0 0;
  overflow: auto;
  position: relative;
}

#g-add-photos-canvas object,
#g-add-photos-button {
  left: 90px;
  margin: .5em 0;
  padding: .4em 1em;
  position: absolute;
  top: 0;
  width: 300px;
}

#g-add-photos-canvas object {
  z-index: 100;
  padding: 0em;
}

#g-add-photos-canvas .uploadifyQueue {
  margin-top: .5em;
}

#g-add-photos-canvas .uploadifyQueueItem {
  margin: 0;
}

#g-add-photos-button {
  z-index: 1;
}

#g-add-photos-status {
  border: 1px solid #ccc;
  height: 125px;
  margin: .4em 0;
  overflow: auto;
}

#g-add-photos-status .g-message-block {
  border: none;
}

#g-add-photos-status #g-action-status li {
  margin: 0 0 1px 0;
  padding-top: .7em;
  width: 433px;
}

#g-add-photos-form .g-breadcrumbs {
  margin: 0;
}

#g-add-photos-form p {
  margin-bottom: 0
}

/* different named form for dropzone uploads */
#gAddPhotosForm .g-breadcrumbs {
  margin: 0;
}

#gAddPhotosForm p {
  margin-bottom: 0
}

#g-add-photos-status-message {
  float: right;
}

/* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-edit-permissions-form {
  clear: both;
}

#g-edit-permissions-form th {
  text-align: center;
}

#g-permissions .g-denied,
#g-permissions .g-allowed {
  text-align: center;
  vertical-align: middle;
}

/* Move items ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-move ul {
  padding-left: 1em;
}

#g-move .selected {
  background: #999;
}

/* In-place edit ~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-in-place-edit-form ul {
  margin: 0;
}

/* User profile ~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-user-profile h1 {
  margin: 1em 0;
}

#g-user-profile .g-avatar {
  margin-right: .6em;
}

#g-user-profile .g-block {
  margin-top: 0;
}

#g-user-profile .g-block-content {
  margin-top: 0;
}

#g-user-profile th,
#g-user-profile td {
  border: none;
}

#g-user-profile th {
  white-space: nowrap;
  width: 1%;
}

/* Unsupported movie download link ~~~~~~~~~~~~~~~~~~~~~~~~~ */

.g-movie-download-link {
  text-align: center;
}

/* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/**
 * Newer Themeroller-based themes do this on their own, but older
 * themes need help ensuring that dialogs and overlays are on top
 */
.ui-front {
  z-index: 1000
}

/* Autocomplete ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.ui-autocomplete {
  text-align: left;
}

.ui-autocomplete-loading {
  background: #e8e8e8 url('https://pupezele.ro/modules/gallery/css/../images/loading-small.gif') no-repeat center center;
}

/** *******************************************************************
 * 2) Admin
 **********************************************************************/

.g-task-log {
  border: 1px solid #000;
  height: 400px;
  margin: .6em 0;
  overflow: auto;
  padding: .4em
}

#g-languages-form table {
  width: 40%;
  margin: 0 3em 1em 0;
}

#g-languages-form input {
  clear: both;
}

#g-translations ol {
  margin: 0 0 1em 2em;
}
#g-translations ol li {
  list-style-type: decimal;
  line-height: 150%;
}

#g-translations .g-button {
  padding: .5em;
  margin-bottom: 1em;
}

/** *******************************************************************
 * 3) Right to left language styles
 **********************************************************************/

.rtl #g-add-photos-status #g-action-status li {
  width: 407px;
}

.rtl #g-block-admin .g-left {
  margin-left: 1em;
  margin-right: 0;
}

.rtl #g-user-profile .g-avatar {
  margin-left: .6em;
}

.rtl #g-languages-form table {
  margin: 0 0 1em 3em;
}

.rtl #g-translations ol {
  margin: 0 2em 1em 0;
}

.rtl #g-add-photos-status-message {
  float: left;
}

/* lib/uploadify/uploadify.css */
/*
Uploadify v2.1.0
Release Date: August 24, 2009

Copyright (c) 2009 Ronnie Garcia, Travis Nickels

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.uploadifyQueueItem {
	font: 11px Verdana, Geneva, sans-serif;
	border: 2px solid #E5E5E5;
	background-color: #F5F5F5;
	margin-top: 5px;
	padding: 10px;
	width: auto;
}
.uploadifyError {
	border: 2px solid #FBCBBC !important;
	background-color: #FDE5DD !important;
}
.uploadifyQueueItem .cancel {
	float: right;
}
.uploadifyProgress {
	background-color: #FFFFFF;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	margin-top: 10px;
	width: 100%;
}
.uploadifyProgressBar {
	background-color: #0099FF;
	width: 1px;
	height: 3px;
}

/* RTL support ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rtl .uploadifyQueueItem .cancel {
	float: left;
}
/* modules/user/css/user.css */
/* User- and group-related form width ~~~~ */

#g-login-form,
#g-add-user-form
#g-edit-user-form,
#g-delete-user-form,
#g-user-admin {
  width: 270px;
}

/* User/group admin ~~~~~~~~~~~~~~~~~~~~~~ */

#g-user-admin {
  width: auto;
  margin-bottom: 4em;
}

#g-group-admin {
}

#g-user-admin-list .g-admin {
  color: #55f;
  font-weight: bold;
}

.g-group {
  display: block;
  border: 1px solid #999;
  margin: 0 1em 1em 0;
  padding: 0;
  width: 200px;
}

.g-group h4 {
  background-color: #eee;
  border-bottom: 1px dashed #ccc;
  padding: .5em 0 .5em .5em;
}

.g-group .g-button {
  padding: 0;
}

.g-group .g-member-list,
.g-group div {
  height: 180px;
  margin: 1px;
  overflow: auto;
}

.g-group p {
  margin-top: 1em;
  padding: .5em;
  text-align: center;
}

.g-group .g-user {
  padding: .2em 0 0 .5em;
}

.g-group .g-user .g-button {
  vertical-align: middle;
}

.g-default-group h4,
.g-default-group .g-user {
  color: #999;
}

.g-group.ui-droppable {
  padding: 0 !important;
}

/* Password strength meter ~~~~~~~~~~~~~~~ */

.g-password-strength0 {
  background: url('https://pupezele.ro/modules/user/css/../images/progressImg1.png') no-repeat 0 0;
  width: 138px;
  height: 7px;
}

.g-password-strength10 {
  background-position:0 -7px;
}

.g-password-strength20 {
  background-position:0 -14px;
}

.g-password-strength30 {
  background-position:0 -21px;
}

.g-password-strength40 {
  background-position:0 -28px;
}

.g-password-strength50 {
  background-position:0 -35px;
}

.g-password-strength60 {
  background-position:0 -42px;
}

.g-password-strength70 {
  background-position:0 -49px;
}

.g-password-strength80 {
  background-position:0 -56px;
}

.g-password-strength90 {
  background-position:0 -63px;
}

.g-password-strength100 {
  background-position:0 -70px;
}

/* modules/comment/css/comment.css */
#g-content #g-comment-form {
  margin-top: 2em;
}

#g-content #g-comments {
  margin-top: 2em;
  position: relative;
}

#g-content #g-comments ul li {
  margin: 1em 0;
}

#g-content #g-comments .g-author {
  border-bottom: 1px solid #ccc;
  color: #999;
  height: 32px;
  line-height: 32px;
}

#g-content #g-comments ul li div {
  padding: 0 8px 8px 43px;
}

#g-content #g-comments .g-avatar {
  height: 32px;
  margin-right: .4em;
  width: 32px;
}

#g-add-comment {
  position: absolute;
  right: 0;
  top: 2px;
}

#g-admin-comments-menu {
  margin: 1em 0;
}

#g-admin-comments-menu a {
  margin: 0;
  padding: .2em .6em;
}

.g-comment-state-unpublished {
  font-style: italic;
  color: #999;
}

/* lib/superfish/css/superfish.css */
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	border-left: 1px solid #fff;
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,.5);
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #13a;
}
.sf-menu li {
	background: #BDD2FF;
	/*
	white-space: nowrap; no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}

/* themes/claude_pupezele_theme_V5/css/themeroller/ui.base.css */
/*! jQuery UI - v1.10.3 - 2013-06-17
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Lucida%20Grande%2CLucida%20Sans%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=gloss_wave&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=inset_hard&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=glass&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=inset_hard&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin-top: 2px;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
	padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 21px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	margin-top: -3px;
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
	/* support: IE10, see #8844 */
	list-style-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.ui-menu .ui-menu-divider {
	margin: 5px -2px 5px -2px;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .4em;
	line-height: 1.5;
	min-height: 0; /* support: IE7 */
	font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}

.ui-menu .ui-state-disabled {
	font-weight: normal;
	margin: .4em 0 .2em;
	line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
	cursor: default;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item a {
	position: relative;
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: .2em;
	left: .2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	position: static;
	float: right;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/animated-overlay.gif');
	height: 100%;
	filter: alpha(opacity=25);
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to overide default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
}
/* vertical centre icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 1em;
}
.ui-widget-content {
	border: 1px solid #a6c9e2;
	background: #fcfdfd url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_inset-hard_100_fcfdfd_1x100.png') 50% bottom repeat-x;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
.ui-widget-header {
	border: 1px solid #4297d7;
	background: #5c9ccc url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png') 50% 50% repeat-x;
	color: #ffffff;
	font-weight: bold;
}
.ui-widget-header a {
	color: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #c5dbec;
	background: #dfeffc url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_glass_85_dfeffc_1x400.png') 50% 50% repeat-x;
	font-weight: bold;
	color: #2e6e9e;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #2e6e9e;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #79b7e7;
	background: #d0e5f5 url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_glass_75_d0e5f5_1x400.png') 50% 50% repeat-x;
	font-weight: bold;
	color: #1d5987;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: #1d5987;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #79b7e7;
	background: #f5f8f9 url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_inset-hard_100_f5f8f9_1x100.png') 50% 50% repeat-x;
	font-weight: bold;
	color: #e17009;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #e17009;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fad42e;
	background: #fbec88 url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_flat_55_fbec88_40x100.png') 50% 50% repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_glass_95_fef1ec_1x400.png') 50% 50% repeat-x;
	color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_469bdd_256x240.png');
}
.ui-widget-header .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_d8e7f3_256x240.png');
}
.ui-state-default .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_6da8d5_256x240.png');
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_217bc0_256x240.png');
}
.ui-state-active .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_f9bd01_256x240.png');
}
.ui-state-highlight .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_2e83ff_256x240.png');
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-icons_cd0a0a_256x240.png');
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 5px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 5px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 5px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 5px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
}
.ui-widget-shadow {
	margin: -8px 0 0 -8px;
	padding: 8px;
	background: #aaaaaa url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/themeroller/images/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
	border-radius: 8px;
}

/* themes/claude_pupezele_theme_V5/css/screen.css */
/**
 * Pupezele theme for Gallery 3.1.x
 *
 * Plain CSS, no build step. Loaded after module CSS, superfish.css and themeroller/ui.base.css.
 *
 * Sheet organization:
 *   1)  Design tokens (edit these to retune the palette)
 *   2)  Base elements (replaces the YUI reset the Wind theme used)
 *   3)  Page layout
 *   4)  Header, navigation, search, login
 *   5)  Album grid, thumbnails, context menus
 *   6)  Photo and movie pages (HTML5 video lives here, see notes)
 *   7)  Paginator and breadcrumbs
 *   8)  Sidebar and blocks
 *   9)  Forms and buttons
 *  10)  Gallery states and messages (legacy class names used by modules)
 *  11)  jQuery UI: dialogs, overlays, full size view
 *  12)  Utilities, motion, print
 *
 * Shape rule: controls (buttons, inputs, menu items) use --pz-radius-sm,
 * surfaces (tiles, media stage, dialogs, menus) use --pz-radius.
 */

/** *******************************************************************
 *  1) Design tokens
 **********************************************************************/

:root {
  /* Neutrals: one cool grey family */
  --pz-bg: #f5f6f8;
  --pz-surface: #fdfdfe;
  --pz-surface-2: #eceef2;
  --pz-surface-3: #e2e5ea;
  --pz-border: #d9dce2;
  --pz-border-strong: #8c929c;  /* 3.1:1 on surface, for input borders */
  --pz-text: #16181d;           /* 17.7:1 on surface */
  --pz-text-muted: #4f5562;     /* 7.4:1 on surface */

  /* One accent. #a3441a is 6.2:1 on surface and with white text on top */
  --pz-accent: #a3441a;
  --pz-accent-strong: #8a3814;
  --pz-accent-soft: #fbeee8;
  --pz-on-accent: #ffffff;
  --pz-focus: #a3441a;

  /* Media stage behind videos */
  --pz-media-bg: #0f1115;
  --pz-media-text: #e9eaee;

  /* Status colours (all at least 6:1 on their backgrounds) */
  --pz-error: #b42318;
  --pz-error-bg: #fdecea;
  --pz-success: #1f6f43;
  --pz-success-bg: #e7f4ec;
  --pz-warning: #7a5300;
  --pz-warning-bg: #fff7e0;
  --pz-info-bg: #eceef2;

  /* Type */
  --pz-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pz-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
                     BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Shape and space */
  --pz-radius: 14px;
  --pz-radius-sm: 8px;
  --pz-gap: clamp(0.75rem, 2vw, 1.5rem);
  --pz-shell: 90rem;
  --pz-gutter: clamp(1rem, 3vw, 2.5rem);
  --pz-sidebar: 17.5rem;
  --pz-tap: 2.75rem;            /* 44px minimum touch target */
  --pz-logo-max-h: 4rem;        /* applies to the default logo image only */

  /* Thumbnail size, overwritten per album from page.html.php */
  --pz-thumb: 200px;

  /* Elevation, tinted to the neutral family */
  --pz-shadow-sm: 0 1px 2px rgb(22 24 29 / 0.06), 0 1px 1px rgb(22 24 29 / 0.04);
  --pz-shadow: 0 12px 32px -8px rgb(22 24 29 / 0.22), 0 2px 6px rgb(22 24 29 / 0.08);

  /* Layers */
  --pz-z-menu: 20;
  --pz-z-skip: 2000;

  --pz-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/** *******************************************************************
 *  2) Base elements
 **********************************************************************/

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

/* jQuery UI 1.10 measures dialogs assuming content-box */
.ui-dialog,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane {
  box-sizing: content-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
html {
  background-color: var(--pz-bg);
  color: var(--pz-text);
  font-family: var(--pz-font);
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pz-text);
  font-family: var(--pz-font-display);
  font-weight: 650;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.05rem;
}

p {
  margin-bottom: 1em;
  max-width: 70ch;
  text-wrap: pretty;
}

em {
  font-style: italic;
}

strong,
b,
th {
  font-weight: 650;
}

img {
  border: 0;
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

caption,
th {
  text-align: start;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--pz-border);
  padding: 0.55em 0.65em;
  vertical-align: top;
}

#g-content table {
  margin: 1em 0;
}

/* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a {
  color: var(--pz-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

a:hover {
  color: var(--pz-accent-strong);
  text-decoration-thickness: 2px;
}

/* Keyboard focus, everywhere */
:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

#g-content:focus {
  outline: none;
}

/* Lists inside text content get their bullets back */
ul.g-text li,
.g-text ul li {
  list-style-type: disc;
}

ol.g-text li,
.g-text ol li {
  list-style-type: decimal;
}

.g-text li {
  margin-inline-start: 1.25em;
}

/** *******************************************************************
 *  3) Page layout
 **********************************************************************/

.pz-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.pz-shell {
  width: 100%;
  max-width: var(--pz-shell);
  margin-inline: auto;
  padding-inline: var(--pz-gutter);
}

.pz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  flex: 1 0 auto;
  padding-block: 1rem 3rem;
}

@media (min-width: 64em) {
  .pz-layout.pz-has-sidebar {
    grid-template-columns: minmax(0, 1fr) var(--pz-sidebar);
  }
}

.pz-main {
  min-width: 0;
}

.pz-heading {
  margin-block: 0.25rem 1.5rem;
}

.pz-heading .g-description {
  color: var(--pz-text-muted);
  margin-top: 0.5rem;
  max-width: 70ch;
}

/** *******************************************************************
 *  4) Header, navigation, search, login
 **********************************************************************/

.pz-header {
  background: var(--pz-surface);
  border-bottom: 1px solid var(--pz-border);
}

#g-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.75rem;
  min-height: 4.5rem;
  position: relative;
}

.pz-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The logo is shown as-is. Only very large images are scaled down to fit the screen. */
.pz-brand img {
  display: block;
  max-width: 100%;
  height: auto;
}

#g-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--pz-tap);
  border-radius: var(--pz-radius-sm);
}

#g-logo img {
  max-height: var(--pz-logo-max-h);
  width: auto;
}

.pz-nav-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  min-width: 0;
}

.pz-header-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Menu toggle, small screens only */
.pz-menu-toggle {
  display: none;
}

/* Site menu (superfish) ~~~~~~~~~~~~~~~~~ */

#g-site-menu ul {
  margin-bottom: 0;
}

#g-site-menu .sf-menu {
  display: flex !important;  /* ui.init.js calls .show(), which writes an inline display: block */
  flex-wrap: wrap;
  gap: 0.25rem;
  float: none;
  margin: 0;
}

#g-site-menu .sf-menu > li {
  float: none;
}

#g-site-menu .sf-menu li,
#g-site-menu .sf-menu ul li,
#g-site-menu .sf-menu ul ul li,
#g-site-menu .sf-menu li:hover,
#g-site-menu .sf-menu li.sfHover {
  background: none;
  white-space: nowrap;
}

#g-site-menu .sf-menu a {
  border: 0;
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  display: flex;
  align-items: center;
  font-weight: 550;
  min-height: var(--pz-tap);
  padding: 0.5rem 0.8rem;
  text-decoration: none;
  transition: background-color 0.2s var(--pz-ease), color 0.2s var(--pz-ease);
}

#g-site-menu .sf-menu a:hover,
#g-site-menu .sf-menu li.sfHover > a {
  background: var(--pz-surface-2);
  color: var(--pz-text);
}

#g-site-menu .sf-menu li.g-selected > a {
  color: var(--pz-accent);
}

#g-site-menu .sf-menu ul {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
  min-width: 13rem;
  padding: 0.35rem;
  z-index: var(--pz-z-menu);
}

#g-site-menu .sf-menu ul a {
  font-weight: 450;
}

#g-site-menu .sf-menu ul ul {
  top: -0.35rem;
  inset-inline-start: 100%;
}

#g-site-menu .sf-arrows .sf-with-ul {
  padding-inline-end: 2rem;
}

#g-site-menu .sf-arrows .sf-with-ul::after {
  border: 0;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 0.45em;
  margin-top: -0.35em;
  right: 0.85rem;
  top: 50%;
  transform: rotate(45deg);
  width: 0.45em;
}

#g-site-menu .sf-arrows ul .sf-with-ul::after {
  transform: rotate(-45deg);
}

/* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-login-menu {
  color: var(--pz-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.925rem;
}

#g-login-menu li {
  margin: 0;
  padding: 0;
}

#g-login-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pz-tap);
}

/* Quick search ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-quick-search-form ul {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#g-quick-search-form li {
  float: none;
  padding: 0;
}

#g-quick-search-form input[type="text"] {
  width: 14rem;
  max-width: 100%;
}

/* Small screens: collapse menu, search and login behind a toggle */
@media (max-width: 59.99em) {
  #g-banner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pz-menu-toggle {
    align-items: center;
    background: var(--pz-surface);
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-radius-sm);
    color: var(--pz-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 550;
    gap: 0.6rem;
    min-height: var(--pz-tap);
    padding: 0.5rem 0.9rem;
  }

  .pz-menu-toggle:hover {
    background: var(--pz-surface-2);
  }

  .pz-menu-toggle-icon,
  .pz-menu-toggle-icon::before,
  .pz-menu-toggle-icon::after {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 1.1rem;
  }

  .pz-menu-toggle-icon {
    position: relative;
  }

  .pz-menu-toggle-icon::before,
  .pz-menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .pz-menu-toggle-icon::before {
    top: -6px;
  }

  .pz-menu-toggle-icon::after {
    top: 6px;
  }

  /* One wrapping row: menu items, then search and Go, then login at the right edge */
  .pz-nav-panel {
    align-items: center;
    border-top: 1px solid var(--pz-border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 0.75rem;
  }

  /* Only collapse when JavaScript is running, so the menu is never unreachable */
  .pz-js .pz-nav-panel:not(.pz-open) {
    display: none;
  }

  .pz-site-nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Logged in there are several top level items; give them a line of their own */
  .pz-nav-panel:has(.sf-menu > li + li) .pz-site-nav {
    flex-basis: 100%;
  }

  /* Let the search form and login menu sit in the same row as the menu */
  .pz-header-tools {
    display: contents;
  }

  #g-quick-search-form {
    flex: 1 1 10rem;
    min-width: 10rem;
  }

  #g-quick-search-form li:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  #g-quick-search-form input[type="text"] {
    width: 100%;
  }

  #g-login-menu {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  /* Superfish still opens the first level on tap. The drop-down spans the menu width so it
     never runs off screen; deeper levels are listed inside it, expanded. */
  #g-site-menu .sf-menu {
    position: relative;
  }

  #g-site-menu .sf-menu > li {
    position: static;
  }

  #g-site-menu .sf-menu > li > ul {
    inset-inline: 0;
    min-width: 0;
  }

  #g-site-menu .sf-menu ul ul {
    background: none;
    border: 0;
    border-inline-start: 2px solid var(--pz-border);
    border-radius: 0;
    box-shadow: none;
    display: block !important;
    height: auto !important;
    margin-inline-start: 0.8rem;
    min-width: 0;
    opacity: 1 !important;
    padding: 0 0 0 0.25rem;
    position: static !important;
    visibility: visible !important;
  }

  #g-site-menu .sf-arrows ul .sf-with-ul {
    padding-inline-end: 0.8rem;
  }

  #g-site-menu .sf-arrows ul .sf-with-ul::after {
    display: none;
  }

  #g-site-menu .sf-menu ul li {
    white-space: normal;
  }
}

/** *******************************************************************
 *  5) Album grid, thumbnails, context menus
 **********************************************************************/

/* themeroller's clearfix pseudo elements would become empty grid items */
#g-album-grid.ui-helper-clearfix::before,
#g-album-grid.ui-helper-clearfix::after,
#g-movie.ui-helper-clearfix::before,
#g-movie.ui-helper-clearfix::after,
.g-paginator.ui-helper-clearfix::before,
.g-paginator.ui-helper-clearfix::after,
#g-view-menu.ui-helper-clearfix::before,
#g-view-menu.ui-helper-clearfix::after {
  content: none;
}

#g-album-grid {
  display: grid;
  gap: var(--pz-gap);
  /* At least two columns on phones, thumbnail-sized columns elsewhere */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--pz-thumb), calc(50% - var(--pz-gap) / 2)), 1fr));
  margin: 0 0 2rem;
  position: relative;
}

/* Each album, photo and video is a card. The whole card opens the item: the title link is
   stretched over it (see "h2 a::after" below), so there is still one link per item for
   keyboards and screen readers. */
#g-album-grid .g-item {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: clamp(0.5rem, 1.5vw, 0.75rem);
  position: relative;
  text-align: start;
  transition: transform 0.35s var(--pz-ease), box-shadow 0.35s var(--pz-ease);
}

#g-album-grid .g-item:hover {
  box-shadow: var(--pz-shadow);
  transform: scale(1.03);
  z-index: 3;  /* above neighbouring cards while enlarged */
}

#g-album-grid .g-item:active {
  transform: scale(1.01);
}

/* A card with its Options menu open stays above the cards its drop-down overlaps */
#g-album-grid .g-item.pz-menu-open {
  z-index: 4;
}

#g-album-grid .g-item h2 a::after {
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* Controls inside the card stay clickable above the card link */
#g-album-grid .g-item .g-context-menu,
#g-album-grid .g-item .g-metadata a {
  position: relative;
  z-index: 2;
}

/* Keyboard focus on the title link outlines the whole card */
@supports selector(:has(a)) {
  #g-album-grid .g-item:has(h2 a:focus-visible) {
    outline: 3px solid var(--pz-focus);
    outline-offset: 2px;
  }

  #g-album-grid .g-item h2 a:focus-visible {
    outline: none;
  }
}

#g-album-grid .pz-empty {
  background: var(--pz-surface);
  border: 1px dashed var(--pz-border-strong);
  border-radius: var(--pz-radius);
  color: var(--pz-text-muted);
  grid-column: 1 / -1;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* Thumbnail space: a square cell with no frame of its own. The thumbnail is centred both
   ways, never cropped and never upscaled. */
.pz-thumb {
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
}

.pz-thumb img.g-thumbnail {
  border-radius: var(--pz-radius-sm);
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

/* Movies get a play mark (CSS only) */
#g-album-grid .g-item.g-movie .pz-thumb::before,
#g-album-grid .g-item.g-movie .pz-thumb::after {
  content: "";
  inset: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
}

#g-album-grid .g-item.g-movie .pz-thumb::before {
  background: rgb(15 17 21 / 0.68);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(253 253 254 / 0.9);
  height: 3rem;
  width: 3rem;
  z-index: 1;
}

#g-album-grid .g-item.g-movie .pz-thumb::after {
  border-bottom: 0.55rem solid transparent;
  border-left: 0.9rem solid #fdfdfe;
  border-top: 0.55rem solid transparent;
  height: 0;
  transform: translateX(0.15rem);
  width: 0;
  z-index: 2;
}

#g-album-grid .g-item h2 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-family: var(--pz-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
}

#g-album-grid .g-item h2 a {
  color: var(--pz-text);
  text-decoration: none;
}

#g-album-grid .g-item:hover h2 a {
  color: var(--pz-accent);
}

#g-album-grid .g-item h2 > span.g-album,
#g-album-grid .g-item h2 > span.g-movie,
#g-album-grid .g-item h2 > span.g-photo {
  display: inline;
}

#g-album-grid .g-metadata {
  color: var(--pz-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0 0.75rem;
  margin: 0;
}

#g-album-grid .g-metadata:empty {
  display: none;
}

#g-album-grid .g-metadata li {
  margin: 0;
  padding: 0;
}

#g-album-grid .g-metadata a {
  color: inherit;
}

/* Search results use a different item markup (<a> wrapping thumb, title and description) */
#g-search-results #g-album-grid .g-item > a::after {
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
}

#g-search-results #g-album-grid .g-item > a {
  color: var(--pz-text);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
}

#g-search-results #g-album-grid .g-item > a > img.g-thumbnail {
  align-self: center;
  border-radius: var(--pz-radius-sm);
  box-shadow: var(--pz-shadow-sm);
  height: auto;
  max-width: 100%;
}

#g-search-results #g-album-grid .g-item > a p {
  font-weight: 600;
  margin: 0;
}

#g-search-results #g-album-grid .g-item > a div {
  color: var(--pz-text-muted);
  font-size: 0.85rem;
}

#g-search-results #g-album-grid .g-item > a:hover p {
  color: var(--pz-accent);
  text-decoration: underline;
}

#g-content #g-search-results {
  margin-top: 1.5rem;
}

#g-search-results > h1 {
  margin-bottom: 0.5rem;
}

#g-search-results > div {
  color: var(--pz-text-muted);
  margin-bottom: 1.5rem;
}

#g-search-form {
  margin-bottom: 1rem;
}

#g-search-form ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#g-search-form li {
  float: none;
}

#g-search-form li:first-child {
  flex: 1 1 16rem;
  max-width: 32rem;
}

/* Context menu ("Options", only rendered for users who can edit) ~~~ */

.g-context-menu {
  position: relative;
}

#g-album-grid .g-context-menu,
html body .g-context-menu li.ui-state-default {
  background: none;
  border: 0;
  margin: 0;
}

/* The drop-down is anchored to the whole tile so it never runs off screen */
.g-context-menu > li {
  position: static;
}

.g-context-menu > li > a.g-button {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text-muted);
  font-size: 0.85rem;
  font-weight: 550;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  width: auto;
}

.g-context-menu > li > a.g-button:hover,
.g-context-menu > li > a.g-button[aria-expanded="true"] {
  background: var(--pz-surface-3);
  border-color: var(--pz-border-strong);
  color: var(--pz-text);
}

.g-context-menu > li > a.g-button .ui-icon {
  display: none;
}

.g-context-menu > li > a.g-button::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin-inline-start: 0.5em;
  transform: translateY(-0.15em) rotate(45deg);
  width: 0.4em;
}

/* Hidden until gallery_context_menu() / ui.init.js slide it open */
.g-context-menu ul {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
  display: none;
  inset-inline: 0;
  padding: 0.35rem;
  position: absolute;
  top: calc(100% + 0.25rem);
  z-index: var(--pz-z-menu);
}

.g-context-menu ul li {
  display: block;
}

html body .g-context-menu ul a.g-button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  display: flex;
  font-size: 0.9rem;
  font-weight: 450;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  text-align: start;
  white-space: normal;
  width: 100%;
}

html body .g-context-menu ul a.g-button:hover,
html body .g-context-menu ul a.g-button:focus-visible {
  background: var(--pz-surface-2);
  color: var(--pz-text);
}

.g-context-menu ul .ui-icon {
  flex: none;
  float: none;
  margin: 0;
}

/* The ThemeRoller sprites are blue; render them neutral so they sit with the palette */
.g-context-menu .ui-icon,
.g-button .ui-icon,
.ui-dialog-titlebar-close .ui-icon {
  filter: grayscale(1) brightness(0.45);
}

/** *******************************************************************
 *  6) Photo and movie pages
 **********************************************************************/

#g-item {
  position: relative;
  width: 100%;
}

/* The space the media sits in; the media is centred in it both ways */
.pz-stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  position: relative;
}

/* Photo: no frame around it, the photo is its own frame */
#g-photo .g-fullsize-link {
  border-radius: var(--pz-radius-sm);
  cursor: zoom-in;
  display: block;
  max-width: 100%;
}

#g-photo img.g-resize {
  border-radius: var(--pz-radius-sm);
  box-shadow: var(--pz-shadow);
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 82vh;
  max-width: 100%;
  width: auto;
}

/*
 * Movie. The markup comes from core movieplayer.html.php:
 *   <div class="g-movie" style="width: {resize_size}px"><video controls autoplay style="max-width: 100%">
 * Rules here only constrain size. Nothing is layered over the <video>, nothing changes
 * pointer events, overflow or stacking, so native controls and playback are left alone.
 */
#g-movie.pz-stage {
  background: var(--pz-media-bg);
  border-radius: var(--pz-radius);
  color: var(--pz-media-text);
  padding: clamp(0.5rem, 2.5vw, 2rem);
}

#g-movie > .g-movie {
  margin-inline: auto;
  max-width: 100%;   /* caps the inline fixed width on narrow screens */
}

#g-movie > .g-movie > video {
  display: block;
  height: auto;
  margin-inline: auto;
  max-height: 80vh;  /* tall portrait clips fit the viewport; aspect ratio is preserved */
  max-width: 100%;
}

/* Fallback when the browser cannot play the file type: core renders a download link */
#g-movie a.g-movie-download-link {
  align-items: center;
  background: var(--pz-surface);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  display: inline-flex;
  font-weight: 600;
  min-height: var(--pz-tap);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
}

#g-movie a.g-movie-download-link:hover {
  background: var(--pz-surface-2);
}

#g-item .pz-pager {
  margin-block: 0.75rem 0;
}

#g-item > .pz-heading {
  margin-block: 1.25rem 0;
}

/* Title line: name on the left, actions (Exif "View more information") at the end of the
   same line, wrapping below the name when both do not fit */
.pz-title-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
}

/* Sized to its own text, so a short name shares the line and a long one pushes the actions down */
.pz-title-row > h1 {
  flex: 1 1 auto;
  min-width: 0;
}

.pz-title-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.pz-title-actions:empty {
  display: none;
}

#pz-title-actions .g-button {
  margin: 0;
  white-space: nowrap;
}

/* Before the script moves it, keep the Exif button out of the sidebar on photo pages */
.pz-js .pz-subtype-photo #g-sidebar #g-exif-data-link {
  display: none;
}

/* Edge-to-edge video on phones */
@media (max-width: 39.99em) {
  #g-movie.pz-stage {
    border-radius: 0;
    margin-inline: calc(var(--pz-gutter) * -1);
    padding: 0;
  }
}

/** *******************************************************************
 *  7) Paginator and breadcrumbs
 **********************************************************************/

.pz-pager {
  margin-top: 1rem;
}

.g-paginator {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto 1fr;
  padding: 0;
  width: 100%;
}

.g-paginator li {
  display: flex;
  float: none;
  gap: 0.4rem;
  width: auto;
}

.g-paginator li.g-first {
  justify-content: flex-start;
}

.g-paginator li.g-text-right {
  justify-content: flex-end;
}

.g-paginator .g-info {
  background: none;
  color: var(--pz-text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

html body .pz-pager .g-button {
  align-items: center;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 550;
  gap: 0.45rem;
  margin: 0;
  min-height: var(--pz-tap);
  min-width: var(--pz-tap);
  justify-content: center;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
}

html body .pz-pager a.g-button:hover {
  background: var(--pz-surface-2);
  border-color: var(--pz-border-strong);
  color: var(--pz-text);
}

html body .pz-pager .g-button.ui-state-disabled {
  color: var(--pz-text-muted);
  opacity: 0.45;
}

/* Chevrons (CSS borders) */
.pz-pager-prev::before,
.pz-pager-first::before,
.pz-pager-next::after,
.pz-pager-last::after {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  display: inline-block;
  height: 0.5em;
  width: 0.5em;
}

.pz-pager-prev::before,
.pz-pager-first::before {
  transform: rotate(45deg);
}

.pz-pager-next::after,
.pz-pager-last::after {
  transform: rotate(-135deg);
}

.pz-pager-first::before,
.pz-pager-last::after {
  box-shadow: -4px 4px 0 -2px currentColor;
}

[dir="rtl"] .pz-pager-prev::before,
[dir="rtl"] .pz-pager-first::before {
  transform: rotate(-135deg);
}

[dir="rtl"] .pz-pager-next::after,
[dir="rtl"] .pz-pager-last::after {
  transform: rotate(45deg);
}

@media (max-width: 39.99em) {
  /* Count on its own row, buttons below: four buttons and the count do not fit in one row */
  .g-paginator {
    grid-template-columns: 1fr 1fr;
  }

  .g-paginator .g-info {
    grid-column: 1 / -1;
    order: -1;
  }

  .pz-pager-first .pz-pager-label,
  .pz-pager-last .pz-pager-label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  html body .pz-pager .g-button {
    padding-inline: 0.65rem;
  }
}

/* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.pz-breadcrumbs {
  padding-top: 1rem;
}

.g-breadcrumbs {
  align-items: center;
  color: var(--pz-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.15rem 0.5rem;
}

.g-breadcrumbs li {
  align-items: center;
  background: none;
  display: inline-flex;
  float: none;
  gap: 0.5rem;
  padding: 0;
}

.g-breadcrumbs li + li::before {
  border-right: 1.5px solid var(--pz-border-strong);
  border-top: 1.5px solid var(--pz-border-strong);
  content: "";
  display: inline-block;
  height: 0.4em;
  transform: rotate(45deg);
  width: 0.4em;
}

[dir="rtl"] .g-breadcrumbs li + li::before {
  transform: rotate(-135deg);
}

.g-breadcrumbs a {
  color: var(--pz-text-muted);
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  text-decoration: none;
}

.g-breadcrumbs a:hover {
  color: var(--pz-accent);
  text-decoration: underline;
}

.g-breadcrumbs .g-active span {
  color: var(--pz-text);
  font-weight: 550;
}

#g-dialog ul.g-breadcrumbs {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

/** *******************************************************************
 *  8) Sidebar and blocks
 **********************************************************************/

.pz-sidebar {
  font-size: 0.925rem;
  min-width: 0;
}

/* Below the desktop breakpoint the sidebar follows the content in two columns */
@media (min-width: 40em) and (max-width: 63.99em) {
  .pz-sidebar {
    column-gap: 2rem;
    columns: 2;
  }

  .pz-sidebar > * {
    break-inside: avoid;
  }
}

/* View menu (slideshow, full size, comments...) ~~~ */

#g-view-menu {
  margin-bottom: 1.25rem;
}

#g-view-menu:empty,
#g-view-menu:not(:has(li)) {
  display: none;
}

#g-view-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#g-view-menu li {
  float: none;
}

html body #g-view-menu a {
  background-color: var(--pz-surface);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  display: block;
  height: var(--pz-tap) !important;
  transition: background-color 0.2s var(--pz-ease), border-color 0.2s var(--pz-ease);
  width: 3.25rem !important;
}

html body #g-view-menu a:hover {
  background-color: var(--pz-surface-2);
  border-color: var(--pz-border-strong);
}

#g-view-menu #g-slideshow-link {
  background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-view-slideshow.png');
}

#g-view-menu .g-fullsize-link {
  background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-view-fullsize.png');
}

#g-view-menu #g-comments-link {
  background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-view-comments.png');
}

#g-view-menu #g-print-digibug-link {
  background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-print.png');
}

/* Blocks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.g-block {
  clear: both;
  margin-bottom: 1.75rem;
}

.g-block h2 {
  background: none;
  font-family: var(--pz-font);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: 0.6rem;
  padding: 0;
}

#g-sidebar .g-block {
  border-top: 1px solid var(--pz-border);
  padding-top: 1rem;
}

#g-sidebar .g-block li {
  margin-bottom: 0.4rem;
}

#g-sidebar #g-image-block {
  overflow: hidden;
}

#g-sidebar img {
  border-radius: var(--pz-radius-sm);
  height: auto;
  max-width: 100%;
}

/* Info block */
#g-sidebar .g-metadata li {
  display: grid;
  gap: 0 0.75rem;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  overflow-wrap: anywhere;
}

#g-sidebar .g-metadata .caption {
  color: var(--pz-text-muted);
  font-weight: 500;
}

/* Tag cloud: one colour family instead of the module's light blues */
#g-tag-cloud ul {
  font-size: 1rem;
  line-height: 1.9;
  text-align: start;
}

#g-tag-cloud ul li {
  display: inline;
  margin-inline-end: 0.5em;
}

#g-tag-cloud ul li.size0 a,
#g-tag-cloud ul li.size1 a,
#g-tag-cloud ul li.size2 a {
  color: var(--pz-text-muted);
  font-weight: 400;
}

#g-tag-cloud ul li.size3 a,
#g-tag-cloud ul li.size4 a {
  color: var(--pz-text);
  font-weight: 550;
}

#g-tag-cloud ul li.size5 a,
#g-tag-cloud ul li.size6 a,
#g-tag-cloud ul li.size7 a {
  color: var(--pz-accent);
  font-weight: 650;
}

#g-tag-cloud ul li a:hover {
  text-decoration: underline;
}

/* Comments (comment.css uses two-id selectors with fixed heights; match them here) */
#g-content #g-comments {
  margin-top: 2rem;
}

#g-content #g-add-comment {
  margin-bottom: 0.75rem;
  position: static;  /* module CSS pins it top-right, where it covers text on narrow screens */
}

#g-content #g-comments ul li {
  border-top: 1px solid var(--pz-border);
  margin: 0;
  padding: 0.85rem 0;
}

#g-content #g-comments li.g-no-comments {
  display: none;  /* empty placeholder that new comments are inserted next to */
}

#g-content #g-comments .g-author {
  align-items: center;
  border-bottom: 0;
  color: var(--pz-text-muted);
  display: flex;
  font-size: 0.85rem;
  gap: 0.6rem;
  height: auto;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

#g-content #g-comments .g-avatar {
  border-radius: var(--pz-radius-sm);
  flex: none;
  height: 2.25rem;
  margin: 0;
  width: 2.25rem;
}

#g-content #g-comments ul li div {
  padding: 0 0 0 2.85rem;
}

#g-content #g-comments .g-no-comments {
  color: var(--pz-text-muted);
}

/* Comments and the random image side by side (ui.init.js builds this on small screens).
   They wrap one under the other when the screen is too narrow for both. */
.pz-pair {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  margin-top: 2rem;
}

#g-content .pz-pair > #g-comments {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}

.pz-pair > #g-image-block {
  border: 0;
  flex: 0 1 clamp(8.5rem, 32%, 12.5rem);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.pz-pair > #g-image-block .g-image-block a {
  display: block;
}

.pz-pair > #g-image-block img {
  border-radius: var(--pz-radius-sm);
  box-shadow: var(--pz-shadow-sm);
  display: block;
  height: auto;
  max-width: 100%;
}

/* "Add a comment" and the view buttons share one wrapping row */
.pz-comment-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pz-comment-actions:empty {
  display: none;
}

#g-content .pz-comment-actions #g-add-comment,
.pz-comment-actions #g-view-menu {
  margin: 0;
}

/* Comment list rules (here and in comment.css) also match the moved view menu's list */
#g-content #g-comments #g-view-menu li {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.pz-footer {
  background: var(--pz-surface);
  border-top: 1px solid var(--pz-border);
  color: var(--pz-text-muted);
  font-size: 0.875rem;
  margin-top: auto;
  padding-block: 1.5rem;
}

.pz-footer .pz-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

.pz-footer a {
  color: var(--pz-text-muted);
}

.pz-footer a:hover {
  color: var(--pz-accent);
}

#g-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

#g-footer #g-credits li {
  margin: 0;
  padding: 0 !important;
}

/** *******************************************************************
 *  9) Forms and buttons
 **********************************************************************/

form {
  margin: 0;
}

fieldset {
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  padding: 0.25rem 1rem 1rem;
}

#g-banner fieldset,
#g-sidebar fieldset,
#g-dialog fieldset,
#g-panel fieldset,
.g-short-form fieldset {
  border: 0;
  padding: 0;
}

legend {
  font-weight: 650;
  margin: 0;
  padding: 0 0.25rem;
}

#g-banner legend,
#g-sidebar legend,
#g-dialog legend,
#g-panel legend,
.g-short-form legend,
.g-short-form label,
input[type="hidden"] {
  display: none;
}

label {
  color: var(--pz-text);
  display: block;
  font-size: 0.9rem;
  font-weight: 550;
  margin-bottom: 0.3rem;
}

form li {
  margin: 0;
  padding: 0 0 0.85rem;
}

form ul ul {
  clear: both;
}

form ul ul li {
  float: left;
}

input,
select,
textarea,
button {
  font: inherit;
}

input.textbox,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border-strong);
  border-radius: var(--pz-radius-sm);
  box-sizing: border-box;
  clear: both;
  color: var(--pz-text);
  display: block;
  max-width: 100%;
  min-height: var(--pz-tap);
  padding: 0.55rem 0.75rem;
  transition: border-color 0.2s var(--pz-ease), box-shadow 0.2s var(--pz-ease);
  width: 32rem;
}

textarea {
  height: 10em;
  line-height: 1.5;
  width: 100%;
}

input.textbox:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--pz-accent);
  box-shadow: 0 0 0 3px rgb(163 68 26 / 0.18);
  outline: none;
}

input[readonly] {
  background-color: var(--pz-surface-2);
}

input.checkbox,
input[type="checkbox"],
input.radio,
input[type="radio"] {
  accent-color: var(--pz-accent);
  float: left;
  height: 1.15rem;
  margin: 0.15rem 0.5rem 0 0;
  width: 1.15rem;
}

#g-dialog input.textbox,
#g-dialog input[type="text"],
#g-dialog input[type="password"],
#g-dialog textarea,
#g-dialog select {
  width: 100%;
}

#g-dialog ul li {
  padding-bottom: 0.85rem;
}

/* Primary buttons ~~~~~~~~~~~~~~~~~~~~~~~
 * :is(#g-page, #g-dialog) lifts these above themeroller's ".ui-widget-content .ui-state-default"
 * (Gallery adds ui-state-default to submits) without resorting to !important. */

html body input[type="submit"],
html body input[type="reset"],
html body .ui-dialog-buttonpane button,
:is(#g-page, #g-dialog) input[type="submit"],
:is(#g-page, #g-dialog) input[type="reset"] {
  align-items: center;
  background: var(--pz-accent);
  border: 1px solid var(--pz-accent);
  border-radius: var(--pz-radius-sm);
  clear: none;
  color: var(--pz-on-accent);
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: var(--pz-tap);
  padding: 0.55rem 1.1rem;
  transition: background-color 0.2s var(--pz-ease), transform 0.1s var(--pz-ease);
  width: auto;
}

html body input[type="submit"]:hover,
html body input[type="reset"]:hover,
html body .ui-dialog-buttonpane button:hover,
:is(#g-page, #g-dialog) input[type="submit"]:hover,
:is(#g-page, #g-dialog) input[type="submit"].ui-state-hover,
:is(#g-page, #g-dialog) input[type="reset"]:hover {
  background: var(--pz-accent-strong);
  border-color: var(--pz-accent-strong);
  color: var(--pz-on-accent);
}

:is(#g-page, #g-dialog) input[type="submit"]:active,
html body .ui-dialog-buttonpane button:active {
  transform: translateY(1px);
}

:is(#g-page, #g-dialog) input[type="submit"][disabled],
:is(#g-page, #g-dialog) input[type="submit"].ui-state-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Cancel button that gallery.dialog.js adds next to the submit button */
#g-dialog button.g-cancel {
  align-items: center;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  cursor: pointer;
  display: inline-flex;
  float: left;
  font-weight: 600;
  margin: 0;
  min-height: var(--pz-tap);
  padding: 0.55rem 1.1rem;
}

#g-dialog button.g-cancel:hover,
#g-dialog button.g-cancel.ui-state-hover {
  background: var(--pz-surface-2);
  border-color: var(--pz-border-strong);
  color: var(--pz-text);
}

form input[type="submit"],
form input[type="reset"] {
  float: left;
  margin-inline-end: 0.5rem;
}

/* Secondary buttons (generic .g-button) ~~~ */

.g-button,
html body a.g-button.ui-state-default {
  align-items: center;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
  cursor: pointer;
  display: inline-flex;
  font-weight: 550;
  gap: 0.4rem;
  margin: 0 0.25rem 0 0;
  min-height: var(--pz-tap);
  padding: 0.45rem 0.9rem;
  text-decoration: none;
}

.g-button:hover,
html body a.g-button.ui-state-hover {
  background: var(--pz-surface-2);
  border-color: var(--pz-border-strong);
  color: var(--pz-text);
  text-decoration: none;
}

.g-buttonset {
  padding-inline-start: 0;
}

.g-buttonset li {
  float: left;
}

.g-buttonset .g-button {
  margin: 0;
}

.ui-icon-left .ui-icon {
  float: left;
  margin-inline-end: 0.2em;
}

.ui-icon-right .ui-icon {
  float: right;
  margin-inline-start: 0.2em;
}

/* Rotate icon, ThemeRoller only provides one of these */
.ui-icon-rotate-ccw {
  background-position: -192px -64px;
}

.ui-icon-rotate-cw {
  background-position: -208px -64px;
}

/* Short forms (search, inline tag form) ~~ */

.g-short-form li {
  float: left;
  margin: 0 !important;
  padding: 0.25rem 0;
}

.g-short-form .textbox,
.g-short-form input[type="text"] {
  color: var(--pz-text-muted);
  width: 100%;
}

.g-short-form .textbox:focus,
.g-short-form input[type="text"]:focus {
  color: var(--pz-text);
}

:is(#g-page, #g-dialog) .g-short-form input[type="submit"] {
  background: var(--pz-surface-2);
  border-color: var(--pz-border);
  color: var(--pz-text);
  float: none;
  margin: 0;
}

:is(#g-page, #g-dialog) .g-short-form input[type="submit"]:hover,
:is(#g-page, #g-dialog) .g-short-form input[type="submit"].ui-state-hover {
  background: var(--pz-surface-3);
  color: var(--pz-text);
}

.g-short-form .textbox.g-error {
  border-color: var(--pz-error);
  color: var(--pz-error);
  padding-inline-start: 1.75rem;
}

.g-short-form .g-cancel {
  display: block;
  margin: 0 0.8rem;
  padding: 0.3rem 0.6rem;
}

#g-sidebar .g-short-form li {
  padding-inline: 0;
}

/** *******************************************************************
 *  10) Gallery states and messages
 **********************************************************************/

.g-text-small {
  font-size: 0.85em;
}

.g-text-big {
  font-size: 1.2em;
}

.g-text-right {
  text-align: end;
}

.g-active,
.g-enabled,
.g-available,
.g-selected,
.g-highlight {
  font-weight: 650;
}

.g-inactive,
.g-disabled,
.g-unavailable,
.g-uneditable,
.g-locked,
.g-deselected,
.g-understate {
  color: var(--pz-text-muted);
  font-weight: normal;
}

.g-editable {
  border-radius: 4px;
  padding: 0.15em 0.3em;
}

.g-editable:hover {
  background-color: var(--pz-warning-bg);
  cursor: text;
}

.g-error,
.g-info,
.g-success,
.g-warning {
  padding-inline-start: 2.1rem;
}

.g-error,
.g-denied,
tr.g-error td.g-error,
#g-add-photos-status .g-error {
  background: var(--pz-error-bg) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-error.png') no-repeat 0.6rem 50%;
  color: var(--pz-error);
}

.g-info {
  background: var(--pz-info-bg) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-info.png') no-repeat 0.6rem 50%;
}

.g-success,
.g-allowed,
#g-add-photos-status .g-success {
  background: var(--pz-success-bg) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-success.png') no-repeat 0.6rem 50%;
  color: var(--pz-success);
}

.g-warning,
tr.g-warning td.g-warning {
  background: var(--pz-warning-bg) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-warning.png') no-repeat 0.6rem 50%;
  color: var(--pz-warning);
}

tr.g-success {
  background-image: none;
}

tr.g-success td.g-success {
  background-image: url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/ico-success.png');
}

form li.g-error,
form li.g-info,
form li.g-success,
form li.g-warning {
  background-color: transparent;
  background-image: none;
  color: inherit;
  padding: 0 0 0.85rem;
}

form .g-error,
form p.g-error {
  background: none;
  color: var(--pz-error);
  font-size: 0.875rem;
  margin: 0.35rem 0 0;
  padding: 0;
}

.g-short-form li.g-error {
  padding: 0.3rem 0;
}

form.g-error input[type="text"],
li.g-error input[type="text"],
form.g-error input[type="password"],
li.g-error input[type="password"],
form.g-error textarea,
li.g-error textarea,
form.g-error select,
li.g-error select {
  border: 2px solid var(--pz-error);
}

.g-installed {
  background-color: var(--pz-surface-2);
}

.g-default {
  background-color: var(--pz-accent-soft);
  font-weight: 650;
}

.g-draggable {
  cursor: move;
}

.g-draggable:hover {
  outline: 1px dashed var(--pz-border-strong);
}

.ui-sortable .g-target,
.ui-state-highlight {
  background-color: var(--pz-warning-bg);
  border: 2px dashed var(--pz-border-strong);
  height: 2em;
  margin: 1em 0;
}

.g-even {
  background-color: var(--pz-surface);
}

.g-odd {
  background-color: var(--pz-surface-2);
}

/* Status and validation messages ~~~~~~~ */

.g-message-block {
  border: 0;
  padding: 0;
}

#g-action-status {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

#g-action-status li,
p#g-action-status,
div#g-action-status,
#g-site-status li {
  border-radius: var(--pz-radius-sm);
  padding: 0.7rem 1rem 0.7rem 2.25rem;
}

#g-site-status li {
  border-radius: 0;
  margin: 0;
}

#g-dialog #g-action-status li {
  white-space: normal;
  width: auto;
}

.g-module-status {
  clear: both;
  margin-bottom: 1em;
}

.g-message {
  background-position: 0 50%;
  font-size: 0.9rem;
}

/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */

.g-loading-large,
.g-dialog-loading-large {
  background: var(--pz-surface-2) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/loading-large.gif') no-repeat center center !important;
}

.g-loading-small {
  background: var(--pz-surface-2) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/loading-small.gif') no-repeat center center !important;
}

.ac_loading {
  background: var(--pz-surface) url('https://pupezele.ro/themes/claude_pupezele_theme_V5/css/../images/loading-small.gif') right center no-repeat !important;
}

.g-progress-bar {
  display: inline-block;
  height: 1em;
  margin: 0.5em 0;
  width: 100%;
}

/* In-line editing and permissions ~~~~~~~ */

#g-in-place-edit-message {
  background-color: var(--pz-surface);
}

#g-edit-permissions-form td {
  background-image: none;
}

#g-edit-permissions-form fieldset {
  border: 1px solid var(--pz-border);
}

#g-permissions .g-denied {
  background-color: var(--pz-error-bg);
}

#g-permissions .g-allowed {
  background-color: var(--pz-success-bg);
}

#g-permissions .g-active a {
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-border);
}

/** *******************************************************************
 *  11) jQuery UI: dialogs, overlays, full size view
 **********************************************************************/

html body .ui-widget {
  font-family: var(--pz-font);
  font-size: 1rem;
}

html body .ui-widget input,
html body .ui-widget select,
html body .ui-widget textarea,
html body .ui-widget button {
  font-family: var(--pz-font);
  font-size: 1rem;
}

html body .ui-widget-content {
  background: var(--pz-surface);
  border-color: var(--pz-border);
  color: var(--pz-text);
}

html body .ui-widget-content a {
  color: var(--pz-accent);
}

html body .ui-widget-header {
  background: var(--pz-surface-2);
  border-color: var(--pz-border);
  color: var(--pz-text);
}

html body .ui-widget-header a {
  color: var(--pz-text);
}

html body .ui-widget-overlay {
  background: rgb(15 17 21 / 0.62);
  opacity: 1;
}

html body .ui-dialog {
  border: 0;
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
  max-width: calc(100vw - 1rem);
  padding: 0;
}

html body .ui-dialog .ui-dialog-titlebar {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pz-border);
  border-radius: var(--pz-radius) var(--pz-radius) 0 0;
  padding: 0.9rem 3.5rem 0.9rem 1.25rem;
}

html body .ui-dialog .ui-dialog-title {
  font-size: 1.05rem;
  font-weight: 650;
}

html body .ui-dialog .ui-dialog-titlebar-close {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
  height: 2.25rem;
  margin: -1.125rem 0 0;
  padding: 0;
  right: 0.75rem;
  width: 2.25rem;
}

html body .ui-dialog .ui-dialog-titlebar-close:hover {
  background: var(--pz-surface-2);
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-icon {
  left: 50%;
  margin: -8px 0 0 -8px;
  top: 50%;
}

html body .ui-dialog .ui-dialog-content {
  padding: 1rem 1.25rem;
}

html body .ui-dialog .ui-dialog-buttonpane {
  border-color: var(--pz-border);
  padding: 0.5rem 1.25rem 0.75rem;
}

#g-dialog {
  text-align: start;
}

#g-dialog h1 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

#g-dialog .g-cancel {
  align-items: center;
  display: inline-flex;
  float: left;
  margin: 0 0.3rem;
  min-height: var(--pz-tap);
  padding: 0 0.5rem;
}

#g-panel {
  display: none;
  padding: 1em;
}

/* jQuery UI interaction states outside dialogs */
html body .ui-state-default,
html body .ui-widget-content .ui-state-default,
html body .ui-widget-header .ui-state-default {
  background-image: none;
}

html body .ui-state-hover,
html body .ui-widget-content .ui-state-hover,
html body .ui-widget-header .ui-state-hover,
html body .ui-state-focus,
html body .ui-widget-content .ui-state-focus,
html body .ui-widget-header .ui-state-focus {
  background-image: none;
}

html body .ui-corner-all {
  border-radius: var(--pz-radius-sm);
}

.ui-front {
  z-index: 1000;
}

/*
 * Full size photo overlay (core lib/gallery.show_full_size.js).
 * Core writes inline top/left/width/height that fill the window edge to edge. These rules
 * replace that box with one inset from the screen edges by the same distance as the page
 * title (the .pz-shell content edge), and fit the photo inside it, centred both ways.
 * Any click or key press still closes it (core handler on document).
 */
#g-fullsize-overlay {
  cursor: zoom-out;
}

html body #g-fullsize {
  --pz-edge-x: max(var(--pz-gutter), calc((100% - var(--pz-shell)) / 2 + var(--pz-gutter)));
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  bottom: var(--pz-gutter) !important;
  box-shadow: none;
  display: flex;
  height: auto !important;
  justify-content: center;
  left: var(--pz-edge-x) !important;
  max-width: none;
  padding: 0;
  pointer-events: none;  /* clicks fall through to the overlay, which closes the view */
  position: fixed !important;
  right: var(--pz-edge-x) !important;
  top: var(--pz-gutter) !important;
  width: auto !important;
}

html body #g-fullsize-image {
  border-radius: var(--pz-radius-sm);
  box-shadow: var(--pz-shadow);
  display: block;
  height: auto !important;
  max-height: 100%;
  max-width: 100%;
  width: auto !important;
}

/* Superfish menu sizes inherited from Wind for sub menus on desktop */
.sf-menu ul {
  width: auto;
}

/** *******************************************************************
 *  12) Utilities, motion, print
 **********************************************************************/

.g-left {
  clear: none;
  float: left;
}

.g-right {
  clear: none;
  float: right;
}

.g-one-quarter { width: 25%; }
.g-one-third { width: 33%; }
.g-one-half { width: 50%; }
.g-two-thirds { width: 66%; }
.g-three-quarters { width: 75%; }
.g-whole { width: 100%; }

.g-inline li {
  float: left;
  margin-inline-start: 1.5em;
  padding-inline-start: 0 !important;
}

.g-inline li.g-first,
.g-inline li:first-child {
  margin-inline-start: 0;
}

#g-login-menu.g-inline li,
#g-credits.g-inline li {
  float: none;
  margin-inline-start: 0;
}

/* Visually hidden, still announced by screen readers */
.pz-sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pz-skip-link {
  background: var(--pz-text);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-surface);
  font-weight: 600;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  position: absolute;
  text-decoration: none;
  top: 0.75rem;
  transform: translateY(-200%);
  z-index: var(--pz-z-skip);
}

.pz-skip-link:focus {
  color: var(--pz-surface);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  #g-album-grid .g-item:hover,
  #g-album-grid .g-item:active {
    transform: none;
  }
}

@media print {
  .pz-header,
  .pz-sidebar,
  .pz-footer,
  .pz-pager,
  .pz-skip-link,
  .g-context-menu {
    display: none !important;
  }

  body,
  .pz-stage,
  #g-movie.pz-stage {
    background: none;
    color: #000;
  }

  .pz-layout {
    display: block;
  }
}