1@import "iconset.css";
2/**
3 * Menubar
4 */
5#menubar {
6	float: left;
7	margin: 0 0 10px 1em;
8	padding: 0;
9	display: inline;
10	width: 18em;
11}
12
13#menubar DL, #menubar DT, #menubar DD {
14	margin: 0; padding: 0; display: block;
15}
16
17.menubarFilter {
18	float: right;
19	margin: -4px 0 0;
20}
21
22/* H2 properties copied here */
23#menubar DT {
24	font-weight: bold;
25	padding: 5px;
26	font-size: 120%;
27	text-align: center;
28}
29
30#menubar UL,
31#menubar FORM,
32#menubar P {
33	font-size: 92%;
34	margin: 10px 0 10px 5px;
35}
36#menubar UL {
37	list-style-type: square;
38	list-style-position: inside;
39	padding: 0 0 0 2px;
40}
41#menubar UL UL {
42	font-size: 100%;
43	margin-top: 0;
44	margin-bottom: 0;
45}
46
47/*IE6 needs override because of > selector*/
48#menubar LI.selected>A {
49	font-weight: bold;
50}
51
52#menubar .menuInfoCatByChild {
53	font-size: 80%;
54	font-style: italic;
55}
56
57#mbCategories IMG {
58	vertical-align: bottom; /*otherwise line height changes*/
59}
60
61#menubar INPUT {
62	text-indent: 2px;
63}
64
65/* quickconnect form */
66
67#quickconnect FIELDSET {
68	margin: 0 5px 0 0;
69	padding: 0; /*IE6 requires padding 0*/
70}
71
72#quickconnect DIV {
73	margin: 8px 5px;
74	padding: 0;
75}
76
77#menuTagCloud {
78	text-align: center;
79	margin: 5px 0;
80}
81
82#menuTagCloud SPAN {
83	white-space: nowrap;
84	margin-right: 5px;
85}
86
87/**
88 * Content
89 */
90.contentWithMenu {
91	margin-left: 20em;  /* = #menubar width + 2em */
92}
93
94.content .navigationBar, .content .additional_info, .content .calendarBar {
95	margin: 8px 4px;
96	text-align: center;
97}
98
99.content .pageNumberSelected {
100	font-style: italic;
101	font-weight: bold;
102}
103
104.content .additional_info {
105	font-size: 110%;
106}
107
108.content .titrePage {
109	padding: 0 0 3px;
110}
111
112.content .notification {
113  padding:0 25px;
114}
115
116#menubar .badge {
117  margin-left:5px;
118}
119
120.badge::before {
121  content: '[';
122}
123
124.badge::after {
125  content: ']';
126}
127
128.badge.badgeCategories::before {
129  content:"(";
130}
131.badge.badgeCategories::after {
132  content:")";
133}
134
135/* A nicer (more modern) way to present badge, with a background color and no brackets */
136
137/*
138.badge::before, .badge::after {
139  content:none;
140}
141
142.badge {
143  display: inline-block;
144  min-width: 5px;
145  padding: 3px 7px;
146  color: #eee;
147  line-height: 1;
148  vertical-align: middle;
149  white-space: nowrap;
150  text-align: center;
151  background-color: #666;
152  border-radius: 10px;
153}
154*/
155
156/* category and tag results paragraphs on a quick search */
157.search_results {
158  font-size: 16px;
159  margin: 10px 16px;
160}
161
162/* actions */
163.categoryActions {
164	margin: 0 2px;
165	width: auto;
166	padding: 0;
167	text-indent: 0;
168	list-style: none;
169	text-align: center;
170	float: right;
171}
172
173.categoryActions LI {
174	display: inline;
175}
176
177/* begin chronology/calendar elements*/
178.calendarViews {
179	float: right;
180	margin: 5px 5px 0 0;
181}
182
183.calItem {
184	font-weight: bold;
185	margin: 0 1px;
186	padding: 0 1px;
187	border: 1px solid gray;
188}
189
190.calendarCalBar {
191	margin: 10px;
192}
193
194.calCalHead {
195	font-weight: bold;
196	font-size: 110%;
197	margin: 0 2px;
198}
199
200.calCal { margin: 0 2px; }
201
202/* nice looking month calendar*/
203TABLE.calMonth {
204	border: 0;
205	border-collapse: collapse;
206	margin-bottom: 10px;	/*<-IE ignores this */
207}
208
209TD.calDayCellFull, TD.calDayCellEmpty {
210	vertical-align: top;
211	font-weight: bold;
212	font-size: 18px;
213	border: 1px solid gray;
214}
215
216.calBackDate {
217	padding-left: 4px;
218	padding-top: 0;
219	z-index: 2;
220	position: absolute;
221	vertical-align: top;
222	color: #000;
223}
224
225.calForeDate {
226	padding-left: 5px;
227	padding-top: 1px;
228	z-index: 3;
229	position: absolute;
230	vertical-align: top;
231	color: #fff;
232}
233
234/* Category thumbnails on main page, CSS code inspired from MOD subcatify */
235.thumbnailCategories {
236	margin: 0;
237	padding: 0;
238	list-style: none;
239	overflow: hidden;
240	width: 100%;
241}
242
243.thumbnailCategories LI {
244	margin: 0;
245	padding: 0;
246	float: left;
247	width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/
248}
249
250.thumbnailCategory {
251	display:block;
252	padding: 2px 0 0 2px;
253	margin: 5px;
254}
255
256.thumbnailCategory .description {
257	font-size: 90%;
258	overflow: auto;
259	/*width: inherit;*/
260}
261
262.thumbnailCategory .description H3 {
263	text-align: left;
264	margin: 0;
265	padding: 0.1em;
266	font-size: 120%;
267}
268
269.thumbnailCategory .description P {
270	margin: 0;
271}
272
273.illustration {/*also used by comment lists*/
274	text-align: left;
275	margin: 2px 0 0 2px;
276	float: left;
277}
278
279/* Loader gif new in 2.5 */
280.loader {
281  display: none;
282  position: fixed;
283  right: 0;
284  bottom: 0;
285}
286
287/* User comments */
288#comments {
289	padding-left: 5px;
290	padding-right: 5px;
291}
292
293.commentsList {
294	margin: 0;
295	padding: 0;
296	list-style: none;
297	overflow: hidden;
298	width: 100%;
299}
300
301.commentElement {
302	border-radius: 5px;
303	margin: 5px;
304	padding: 2px 0 0 2px;
305	float: left;
306	width:99%;
307}
308
309.commentElement .description {
310	overflow: auto;
311	/*width: inherit;*/
312}
313
314/* Thumbnails */
315
316/* Thumbnail "elastic" layout */
317.thumbnails {
318	margin: 0;
319	padding: 0;
320	list-style: none;
321	text-align: center;	/* to center the whole collection in .content */
322}
323.thumbnails LI { display: inline }
324
325.thumbnails .wrap1 {
326	margin: 0 7px 5px 7px;
327	display: table-cell; display: inline-table;
328	display: inline-block;/* Why 3 display option ??? */
329	vertical-align: top;	/* OK with Opera and IE6 not Geko */
330	text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
331}
332.thumbnails .wrap2 {
333	margin: 0;			/* important reset the margins */
334	display: table-cell;/* block prevents vertical-align here */
335	vertical-align: middle;/* Ok with Opera and Geko not IE6 */
336	border-radius: 4px;	/* round corners with CSS3 compliant browsers */
337}
338
339.thumbnails .wrap2 A {
340	display: block;
341	border-bottom: 0;
342}
343.thumbnails IMG {
344	vertical-align: middle;
345}
346
347.thumbnails SPAN.thumbLegend {
348	overflow: hidden;/* oversized legend is clipped */
349	display: block;  /* display: none; if you don't want legend */
350	height: 4em;    /* legend height (don't set auto to be Gecko friendly)*/
351}
352
353/**
354 * Picture
355 */
356#imageHeaderBar {
357	padding-top: 2px;
358	padding-bottom: 2px;
359	overflow: hidden;
360	width: 100%;
361}
362
363#imageHeaderBar .browsePath {
364	float: left;
365	margin-left: 10px;
366}
367
368#imageToolBar .imageNumber {
369	float: right;
370	margin:-20px 9px 0 0;
371}
372
373#imageHeaderBar H2 {
374	display: inline;
375	text-align: center;
376	padding: 0;
377}
378
379#imageToolBar {
380	text-align: center;
381	margin-bottom: 2px;
382	padding: 0;
383	height: 28px;
384}
385
386#imageToolBar .actionButtons { float: left; }
387#imageToolBar .navigationButtons   { float: right; }
388#imageToolBar .pwg-button {width:42px;}
389
390.switchBox {
391	padding: 0.5em 5px;
392	border-radius: 4px;
393	z-index: 100;
394	text-align:left;
395	display: none;
396	position: absolute;
397	left: 0; top: 0; /*left, right set through js*/
398}
399
400.switchBoxTitle {
401  border-bottom:1px solid #ccc;
402  padding-bottom:5px;
403  margin-bottom:5px;
404}
405
406#downloadSwitchBox ul {
407  margin:0;
408  padding:0;
409  list-style-type:none;
410}
411
412#theImage {
413	text-align: center;
414}
415
416#imageInfos {
417	position: relative; /*for IE7 positioning of "who can see this photo"*/
418	min-height: 120px;
419}
420
421#linkPrev {
422	float: left;
423	margin: 5px 10px 0 5px;
424}
425
426#linkNext {
427	float: right;
428	margin: 5px 5px 0 10px;
429  text-align: right;
430}
431
432
433DIV.thumbHover{ /*only first & last holders are divs*/
434  width: 108px;
435	height: 118px;
436	border: 1px solid gray;
437	padding: 0 5px;
438  line-height: 1.2;
439}
440
441.imageInfoTable UL { /*this is the album list*/
442	margin: 0;
443	padding: 0 0 0 1em;
444	list-style-type: square;
445}
446
447.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
448	padding:0;
449	border:0;
450	color:inherit;
451	background-color:transparent !important;	/* Konqueror doesn't accept transparent here */
452}
453
454.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
455	cursor: pointer;
456}
457
458.rateButtonSelected {
459	font-weight:bold;
460	font-size:120%;
461}
462
463.rateButtonStarFull {
464	background: url('icon/rating-stars.gif') no-repeat -16px center; width:16px;
465}
466
467.rateButtonStarEmpty {
468	background: url('icon/rating-stars.gif') no-repeat 0 center; width:16px;
469}
470
471/**
472 * Default Layout
473 */
474BODY {
475	margin: 5px;
476	padding: 0;
477	font-size: 0.8em;
478	font-family: Arial,Helvetica,sans-serif;
479	min-width: 60em;  /* ~ 3* #menubar width; width of the page before getting a scrollbar; IE6 doesn't get that*/
480}
481
482IMG {
483	border: 0; /*IE<=9 adds border for linked images*/
484}
485
486#thePopuphelpPage {
487	min-width: 0; /*reset the min width*/
488}
489
490
491H1 {
492	text-align: center;
493	font-size: 150%;
494	font-weight: bold;
495	padding: 0;
496	margin: 0.5em 0 1em 0;
497}
498
499H2 {
500	margin: 0;
501	padding: 5px 0.5em;
502	text-align: left;
503	font-size: 120%;
504}
505
506A {
507	text-decoration:none;
508}
509A:hover {
510	border-bottom: 1px solid #858460;
511}
512A.pwg-state-default:hover {
513	border-bottom: 0; /*reset above for icons*/
514}
515
516#copyright {
517	clear: both;
518	font-size: 83%;
519	text-align: center;
520	margin: 0 0 10px 0;
521}
522
523INPUT, SELECT {
524	margin: 0;
525	font-size: 1em;	/* <= some browsers don't set it correctly */
526}
527
528TABLE {	/* horizontaly centered */
529	margin-left: auto;
530	margin-right: auto;
531}
532
533
534FORM { padding: 0; margin: 0; }
535
536FORM P {
537	text-align: center;
538	margin-top: 2em;
539	margin-bottom: 2em;
540}
541
542
543/**
544 * Filter forms are displayed label by label with the input (or select...)
545 * below the label. Use an UL to make a group (radiobox for instance).
546 * Use a SPAN to group objects in line
547 */
548FIELDSET {
549	padding: 1em;
550	margin: 1em;
551}
552
553.filter UL {
554	display: block;
555	float: left;
556	margin: 0 1em 1em 0;
557	padding: 0;
558}
559
560.filter LI {
561	list-style: none;
562	margin-bottom: 0.5em;
563}
564
565.filter FIELDSET {
566  padding-bottom:0;
567}
568
569.filter P {
570  text-align:left;
571  margin:0 0 15px 0;
572  line-height:20px;
573}
574
575.filter input[name="search_allwords"], .filter #authors, .filter #tags {
576  width:500px;
577}
578
579.filter P input[type="checkbox"], .filter P input[type="radio"] {
580  vertical-align:middle;
581  margin-top:-4px;
582}
583
584.filter input[type="submit"] {
585  margin-left:1em;
586}
587
588.filter P LABEL {
589  margin-right:1em;
590}
591
592
593
594.properties UL {
595	list-style-type: none;
596	margin: 0;
597	padding: 0;
598}
599
600.properties LI {
601	margin-bottom: 0.5em;
602	padding: 0;
603	line-height: 1.8em;
604	clear: left;
605}
606
607.properties SPAN.property {
608	font-weight: bold;
609	float: left;
610	width: 50%;
611	text-align: right;
612	margin: 0;
613	padding: 0 0.5em 0 0;
614}
615
616#fullTagCloud {
617	font-size: 120%;
618	text-align: justify;
619	padding: 0;
620	margin: 1em;
621}
622
623#fullTagCloud SPAN {
624	white-space: nowrap;
625	margin: 0 2px;
626}
627
628
629.tagLevel5 { font-size: 150% !important; }
630.tagLevel4 { font-size: 140% !important; }
631.tagLevel3 { font-size: 120% !important; }
632.tagLevel2 { font-size: 100% !important; }
633.tagLevel1 { font-size: 90%  !important; }
634
635
636/* Popup help page */
637#thePopuphelpPage #copyright {
638	display: none;
639}
640
641#thePopuphelpPage P {
642	padding: 0.5em;
643}
644
645#thePopuphelpPage DL  {
646	margin: 0 25px 25px;
647}
648
649TR.tagLine {
650	border-bottom: 1px solid #ddd;
651}
652TD.nbEntries {
653	text-align: right;
654	font-style: italic;
655	font-size: 90%;
656}
657
658FIELDSET.tagLetter {
659	border: 1px solid #d3d3d3;
660	width: 200px;
661	margin: 0.5em;
662	padding: 10px;
663}
664
665LEGEND.tagLetterLegend {
666	border: 1px solid #d3d3d3;
667	font-size:120%;
668	font-weight: bold;
669	padding: 0 5px;
670	font-style: normal;
671}
672
673TABLE.tagLetterContent {
674	width:100%;
675	font-size:80%;
676	border-collapse : collapse;
677}
678
679#theHeader {text-align: center;}
680
681/* jQuery datepicker */
682IMG.ui-datepicker-trigger {
683	cursor : pointer;
684}
685
686
687/**
688 * Default colors
689 */
690
691 /* So that non-links are slightly greyed out */
692.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty {
693	color: #b0b0b0;
694}
695
696/* Tables & forms */
697/* IE <= 6 is so bad with this that you can't merge with the following rule */
698INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
699INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
700	color: #000;
701	background-color: #d3d3d3;	/* lightgrey */
702}
703
704SELECT, TEXTAREA {
705	color: #000;
706	background-color: #d3d3d3;	/* lightgrey */
707}
708
709INPUT:focus, SELECT:focus, TEXTAREA:focus {
710	background-color: #f5f5f5;	/* whitesmoke */
711}
712
713/* some theme set a border on INPUT  which is not pretty for radio/checkbox */
714INPUT[type="radio"], INPUT[type="checkbox"] {
715	border: none;	/* <= Opera needs this */
716}
717
718
719.content.messages {
720  padding:0;
721  background:none;
722  border:none;
723}
724
725.errors { /* Errors display */
726	color: red;
727	font-weight: bold;
728	margin: 5px;
729	border: 1px solid red;
730	background: #ffe1e1 url(icon/errors.png) no-repeat center right;
731	padding: 10px 50px 10px 10px;
732}
733
734/* Informations box */
735.infos {
736	color: #002000;
737	background: #98fb98 url(icon/infos.png) no-repeat center right;
738	margin: 5px;
739	padding: 10px 50px 10px 10px;
740}
741
742/* Header message like upgrade*/
743.header_msgs {
744	text-align:center;
745	font-weight: bold;
746	color:#696969;	/* dimgray */
747	background-color: #d3d3d3;
748	margin: 1px;
749	padding: 1px;
750}
751
752/* Header notes box */
753.header_notes {
754	border: 1px solid #aaa;
755	text-align: center;
756	background-image: url(icon/note.png);
757	background-repeat: no-repeat;
758	background-position: top left;
759	font-weight: bold;
760	margin: 14px;
761	padding: 5px 0 0 0;
762}
763
764LEGEND {
765	font-style: italic;
766	color: inherit; /*for IE*/
767}
768
769#piwigoAbout {width:600px;margin:0 auto;}
770#linkToPiwigo {text-align:center;}
771
772.message {
773  background-color: lightyellow;
774  color:#333;
775  margin-bottom:1em;
776  padding: 12px;
777  -moz-border-radius: 3px;
778  -khtml-border-radius: 3px;
779  -webkit-border-radius: 3px;
780  border-radius: 3px;
781}
782
783#lostPassword p {
784  text-align: left;
785  margin: 1.5em 0;
786  line-height: 1.5em;
787}
788
789/* image comments rules */
790
791#commentAdd, #pictureCommentList 	{ width: 48%; padding: 0 1%;}
792#commentAdd  						{ float: left; }
793#pictureCommentList 					{ float: right; }
794
795#commentAdd input[type="text"],
796#comments TEXTAREA {
797	max-width: 99%;
798	width: 99%;
799}
800
801.commentAuthor {
802	font-weight: bold;
803}
804
805.commentDate {
806	font-style: italic
807}
808
809#pictureCommentList .commentsOrder	{ float: left; margin-bottom: 5px;}
810#pictureCommentList .navigationBar	{ float: right; margin-bottom: 5px;}
811#pictureComments h4					{ margin: 0;}
812#comments FORM P	 {
813	margin: 5px 0; text-align: left;
814}
815
816/* image info table */
817
818.imageInfoTable {display:table; margin: auto;}
819.imageInfo {display:table-row; line-height:20px;}
820.imageInfo dt {display:table-cell; text-align:right; font-weight:bold; padding-right:0.5em;}
821.imageInfo dd {display:table-cell; text-align:left; font-weight:normal;}
822
823/* Selectize */
824.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
825    padding: 0px 5px !important;
826}
827
828
829#TagsGroupRemoveTag span{
830  display:none;
831}
832