Removed user menu and fixed css to display the logo correctly
[pithos-web-client] / src / gr / grnet / pithos / web / public / pithos.css
1 /*
2  * Copyright 2011-2012 GRNET S.A. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or
5  * without modification, are permitted provided that the following
6  * conditions are met:
7  *
8  *   1. Redistributions of source code must retain the above
9  *      copyright notice, this list of conditions and the following
10  *      disclaimer.
11  *
12  *   2. Redistributions in binary form must reproduce the above
13  *      copyright notice, this list of conditions and the following
14  *      disclaimer in the documentation and/or other materials
15  *      provided with the distribution.
16  *
17  * THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18  * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24  * USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28  * POSSIBILITY OF SUCH DAMAGE.
29  *
30  * The views and conclusions contained in the software and
31  * documentation are those of the authors and should not be
32  * interpreted as representing official policies, either expressed
33  * or implied, of GRNET S.A.
34  */
35 body {
36         color: black;
37         font: 13px Verdana, 'PT Sans', sans-serif;
38         margin: 8px;
39         margin-top: 3px;
40         background-color: transparent;
41 }
42
43 table td {
44         font: 13px Verdana, 'PT Sans', sans-serif;
45 }
46
47 .pithos-outer {
48         background: url(images/background.png) repeat-x;
49 }
50
51 a {
52         color: white;
53         text-decoration: none;
54 }
55
56 a:hover {
57         color: white;
58 }
59
60 a:visited {
61         color: white;
62 }
63
64 a.info {
65         position: relative; /*this is the key*/
66         z-index: 24;
67         color: black;
68         text-decoration: none
69 }
70
71 a.info:hover {
72         z-index: 25;
73         background-color: yellow;
74 }
75
76 a.info div {
77         display: none
78 }
79
80 a.info:hover span {
81         cursor: pointer;
82 }
83
84 /* The span will only display on :hover state. */
85 a.info:hover div {
86         display: block;
87         position: absolute;
88         bottom: 2em;
89         right: 1em;
90         width: 10em;
91         border: 1px solid lightblue;
92         background-color: #D0E4F6;
93         color: black;
94         text-align: center
95 }
96
97 .pithos-DialogBox .inner form {
98         margin: 0px;
99         clip: 
100 }
101
102 .pithos-dialogbox .inner form input,
103 .pithos-dialogbox .inner form textarea
104 {
105     border: 1px solid #aaa;
106     padding:4px;
107 }
108
109 .pithos-DialogBox .button {
110         background: none;
111         background-color: #4085A5;
112         color: white;
113         padding: 5px 6px;
114         white-space: nowrap;
115 }
116
117 .pithos-DialogBox .Caption {
118         color: white;
119         background-color: #4085a5;
120         padding: 20px;
121         border-bottom: 1px solid white;
122 }
123
124 .pithos-DialogBox .close {
125         background: url(images/close-popup.png) no-repeat;
126         cursor: pointer;
127         position: absolute;
128         width: 13px;
129         height: 13px;
130         top: 12px;
131         right: 7px;
132 }
133
134 .pithos-DialogBox .dialogMiddleCenter {
135         background: url(images/popup-bg.png) repeat-x;
136         background-color: white;
137         padding: 3px;
138 }
139
140 .pithos-DialogBox .dialogBottomCenter {
141         border-bottom: 5px solid #4085A5;
142 }
143
144 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
145   background-position: 0px -55px;
146 }
147 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
148   background-position: -6px -55px;
149 }
150 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
151         background: #D0E4F6;
152 }
153 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft,
154 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter,
155 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
156         background: #D0E4F6;
157         color:#d45500;
158 }
159 .pithos-TabPanelBottom {
160         border: none;
161 }
162
163 table.pithos-permList {
164         border-spacing: 3px;
165         border-collapse: collapse;
166
167 }
168
169 table.pithos-permList td {
170         padding: 5px 5px 5px 5px;
171         font-size:80%;
172 }
173
174 table.pithos-permList.props-labels {
175         font-weight: bold;
176 }
177
178 .props-labels {
179         font-size: 80%;
180         font-weight: bold;
181 }
182
183 .props-toplabels {
184         font-size: 80%;
185         font-weight: bold;
186         font-style: italic;
187 }
188
189 .props-values {
190         font-size: 80%;
191 }
192
193 .hidden-link {
194         text-decoration: none !important;
195         color: black !important;
196 }
197
198 .hidden-link:visited {
199         text-decoration: none !important;
200         color: black !important;
201 }
202
203 .pithos-topPanel {
204         background-color: #4085a5;
205         font-size: 75%;
206         height: 59px;
207         border-bottom: 1px solid white;
208 }
209
210 .gwt-MenuBar-vertical {
211         background: #D0E3ED;
212 }
213
214 .gwt-MenuBarPopup .menuPopupTopLeft {
215         background: none;
216         background-color: #D0E3ED;
217 }
218
219 .gwt-MenuBarPopup .menuPopupTopCenter {
220         background: none;
221         background-color: #D0E3ED;
222 }
223
224 .gwt-MenuBarPopup .menuPopupTopRight {
225         background: none;
226         background-color: #D0E3ED;
227 }
228
229 .gwt-MenuBarPopup .menuPopupMiddleLeft {
230         background: none;
231         background-color: #D0E3ED;
232 }
233
234 .gwt-MenuBarPopup .menuPopupMiddleRight {
235         background: none;
236         background-color: #D0E3ED;
237 }
238
239 .gwt-popuppanel {
240     border: 3px solid #D0E3ED;
241     padding: 3px;
242     background: #D0E3ED;
243     border-image: initial;
244 }
245
246 .gwt-MenuBar .gwt-MenuItem {
247         border-bottom: 1px solid #EFEFEF;
248 }
249
250 .gwt-MenuBar .gwt-MenuItem-selected {
251         background-color: #E1EFF6;
252 }
253
254 .gwt-MenuBarPopup .menuPopupBottomLeft {
255         background: none;
256         background-color: #D0E3ED;
257 }
258
259 .gwt-MenuBarPopup .menuPopupBottomCenter {
260         background: none;
261         background-color: #D0E3ED;
262 }
263
264 .gwt-MenuBarPopup .menuPopupBottomRight {
265         background: none;
266         background-color: #D0E3ED;
267 }
268
269 .pithos-sessionExpired {
270         width: 24em;
271         /* Restore the padding we remove when overriding the gwt-DialogBox style */
272         padding: 3px;
273 }
274
275 .pithos-statusbar {
276         background-color: #4085a5;
277         border: none;
278         font-size: 90%;
279         vertical-align: middle;
280         font-weight: normal;
281         height:119px;
282         color: white;
283 }
284
285 .pithos-FileListContainer {
286     padding-left: 10px;
287 }
288
289 .pithos-List {
290         cursor: default;
291         border-collapse: collapse;
292         /* prevents selecting text in table with shift and ctrl*/
293         -moz-user-select: none;
294 }
295
296 .pithos-errorMessage {
297         font-size: 90%;
298         background-color: #880000;
299         color: #fff;
300         cursor: pointer;
301 }
302
303 .pithos-errorMessage td {
304         font-size: 90%;
305 }
306
307 .pithos-warnMessage {
308         font-size: 90%;
309         background-color: #eeee99;
310         cursor: pointer;
311 }
312
313 .pithos-infoMessage {
314         font-size: 90%;
315         background-color: #ccffcc;
316         cursor: pointer;
317 }
318
319 .pithos-clearMessage {
320         font-size: 90%;
321         font-weight: bold;
322         text-decoration: none;
323         color: black;
324         padding-left: 5px;
325 }
326
327 .pithos-clearMessage:visited {
328         font-size: 90%;
329         font-weight: bold;
330         text-decoration: none;
331         color: black;
332 }
333
334 .pithos-readForAllNote {
335         width: 240px;
336         text-align: justify;
337         font-style: italic;
338         font-size: 12px;
339         padding-left: 4;
340 }
341
342 .pithos-treeHeader {
343         background-color: #74aec9;
344         height: 25px;
345     width: 100%;
346 }
347
348 .pithos-statistics {
349         color: white;
350         padding: 5px;
351 }
352
353 .pithos-splitPanel {
354         background: url(images/white50.png) transparent;
355         margin-bottom: 34px;
356 }
357
358 .pithos-splitPanel-noframe {
359         margin-bottom: 0;
360 }
361
362 /* Use the background color for the splitter. */
363 .gwt-HorizontalSplitPanel .hsplitter {
364         cursor: move;
365         border: 0px;
366         background: url(images/background.png) repeat-x;
367 }
368
369 .pithos-tag {
370         display:inline;
371 }
372
373 .pithos-uploadButton {
374     background: none;
375     background-color: #ff7f2a;
376     font-size: 120%;
377     text-align: center;
378     height: auto;
379     padding: 8px;
380     width: 146px;
381     border: none;
382 }
383
384 .pithos-uploadButton:HOVER {
385     background-color: #f95;
386 }
387
388 .pithos-rightSide {
389     vertical-align: middle;
390     width: 100%;
391     padding-left: 7px;
392 }
393 .pithos-parentButton {
394     background: none;
395     background-color: #a1c8da;
396 }
397
398 .pithos-folderStatistics {
399     background-color: #a1c8da;
400     text-align: center;
401     color: white;
402     height: 32px;
403         padding: 5px 15px;
404         margin-right: 10px;
405         margin-left: 10px;
406 }
407
408 .grnet-sign {
409         color: #72ADC8;
410 }
411
412 .pithos-logo {
413         position: absolute;
414         top: 65px;
415 }
416
417 .pithos-header {
418         background: url(images/white50.png);
419         margin-top: 34;
420         height: 60px;
421 }
422
423 .pithos-header-noframe {
424         margin-top: 0;
425 }
426
427 /*.cellTreeWidget-selectedTree {
428     background-color: #BCD7E3;
429 }*/
430
431 .pithos-list thead th img {
432     top: 5px !important;
433 }
434
435 .effectPanel-inner {
436         background-color: #4085A5;
437         margin: 10px;
438 }
439
440 .clearfix {
441         display: block;
442         width: auto;
443         zoom: 1;
444 }
445
446 div#toolbar {
447         clear: both;
448         color: white;
449         float: right;
450 /*      position: absolute;
451         right: 15px;
452         top: 15px;*/
453 }
454
455 div#toolbar a {
456         display: block;
457         float: left;
458 }
459
460 .pithos-toolbarItem {
461         text-decoration: none;
462         font-size: 0.8em;
463         padding: 4px;
464         padding-right: 8px;
465         color: white;
466         margin-left: 5px;
467         background-repeat: no-repeat;
468         background-color: #A1C8DB;
469 }
470
471 .pithos-toolbarItem:HOVER {
472         background-color: #74aec9;
473 }
474
475
476 .pithos-toolbarItem span {
477         float: left;
478         padding-top: 2px;
479 }
480
481 .pithos-toolbarItem span.ico {
482         width: 16px;
483         height: 16px;
484         margin-right: 5px;
485         background-repeat: no-repeat;
486 /*      background-position: -36px 0;*/
487 }
488
489 #tools-button span.ico {
490         background-image: url(images/advancedsettings.png);
491 }
492
493 #refresh-button span.ico {
494         background-image: url(images/refresh.png);
495 }
496
497 #newFolder-button span.ico {
498         background-image: url(images/folder_new.png);
499 }
500
501 #shareFolder-button span.ico {
502         background-image: url(images/myshared22.png);
503 }
504
505 /*move background from inner to centerinner to wrap action buttons too*/
506 .dialogMiddleCenterInner.dialogContent  {
507     background: url(images/white50.png); 
508     margin: 7px;
509     padding: 15px;
510     /*border: 1px solid #aaa;*/
511     -moz-box-shadow: 0 0 1px 1px #888;
512     -webkit-box-shadow: 0 0 1px 1px #888;
513     box-shadow: 0 0 1px 1px #888;
514 }
515
516 .pithos-dialogbox .outer {
517     width: 600px;
518 }
519
520 /*remove background/padding from .inner*/
521 .pithos-dialogbox .inner {
522     background: none;
523     padding:0;
524     width: 100%;
525 }
526
527 /*button position within the overlay content*/
528 .dialogMiddleCenterInner .button {
529     margin-left: 2px;
530     border: none;
531     padding: 7px 20px;
532     margin-top: 10px;
533     float: right;
534     margin-right: 4px;
535 }
536
537 /* fix placement of overlay paragraphs */
538 .pithos-credentialstext {
539     padding: 0 0 10px 0;
540 }
541
542 /* overlay styles */
543 .pithos-dialogbox {
544     background-color: white;
545     border: 2px solid #444;
546     text-align: left;
547     -moz-box-shadow: 0 0 90px 5px #000;
548     -webkit-box-shadow: 0 0 90px 5px #000;
549     box-shadow: 0 0 90px 5px #000;
550         clip: inherit !important;
551 }
552
553 /* hide overlay dialogue unneeded side elements */
554 .dialogMiddleRight, .dialogBottomRight, .dialogTopRight,
555 .dialogMiddleLeft, .dialogBottomLeft, .dialogTopLeft,
556 .dialogBottomCenter {
557     display: none;
558 }
559
560 /* fix dialogbox caption padding and font-size */
561 .pithos-dialogbox .caption {
562     padding: 10px !important;
563     font-size: 1.1em;
564 }
565
566
567 /* form input styling */
568 .dialogMiddleCenterInner input {
569     border: 1px solid #aaa;
570     padding: 4px;
571 }
572
573 /* fix tag color */
574 a.pithos-tag {
575     color: #4085a5;
576 }
577
578 .pithos-invitationsLeft {
579     padding: 0 0 10px 0;
580         border-bottom: 1px solid #4085A5;
581 }
582
583 .pithos-leftInvitationsNumber {
584         background-color: #4085A5;
585         padding: 3px;
586         color: white;
587         font-weight: bold;
588 }
589
590 .pithos-sendInvitationsPanel {
591         margin-top: 10px;
592         border-right: 1px solid #4085A5;
593         padding-right: 5px;
594 }
595
596 .pithos-sendInvitationsTitle {
597         font-weight: bold;
598         color: #4085A5;
599         margin-right: 10px;
600 }
601
602 .pithos-addInvitationImg {
603         background-color: #4085A5;
604         padding: 5px;
605         cursor: pointer;
606 }
607
608 .pithos-invitationResponse {
609         background-color: green;
610         color: white;
611         padding: 5px;
612 }
613
614 .pithos-invitationResponseError {
615         background-color: #880000;
616         color: #fff;
617         padding: 5px;
618 }
619
620 .pithos-invitationResponse .user {
621         font-weight: bold;
622 }
623
624 .props-labels .eg {
625         font-weight: normal;
626         color: gray;
627 }
628
629 .pithos-invitationsSplitPanel {
630         width:100%;
631 }
632
633 .pithos-invitationDeleteImg {
634         cursor: pointer;
635 }
636
637 .pithos-invitationFormRow {
638         border-top: 1px solid gray;
639 }
640
641 .pithos-sendInvitationButton {
642     background: none;
643     background-color: #ff7f2a;
644     text-align: center;
645     height: auto;
646     padding: 8px;
647     border: none;
648     color: white;
649 }
650
651 .pithos-sentInvitationsPanel {
652         margin-top: 10px;
653         padding-left: 5px;
654         width: 100%;
655 }
656
657 .pithos-sentInvitationsTitle {
658         font-weight: bold;
659         color: #4085A5;
660 }
661
662 .pithos-sentInvitationsTable {
663         width: 100%;
664 }
665
666 .pithos-invitedEmail {
667         color: #ff7f2a;
668         font-weight: bold;
669 }
670
671 .pithos-invitedEmailBorder {
672         border-bottom: 1px solid #4085A5;
673 }
674
675 .pithos-resendInvitation {
676         cursor: pointer;
677 }
678
679 .pithos-pagerButton {
680         background: none;
681         background-color: transparent;
682         border: 1px solid gray;
683         color: gray;
684         padding: 0px 2px 0px 2px;
685         font-size: 80%;
686 }
687
688 .pithos-pagerButton:HOVER {
689         background-color: #4085A5;
690         color: white;
691 }
692
693 .pithos-pagerButtonCurrent {
694         background-color: #4085A5;
695         color: white;
696 }
697
698 .pithos-metaTitle {
699         font-weight: bold;
700 }
701
702 .pithos-addMetaImg {
703         background-color: #4085A5;
704         padding: 5px;
705         cursor: pointer;
706 }
707
708 .pithos-metaDeleteImg {
709         cursor: pointer;
710 }
711
712 .pithos-metaName {
713         width: 7em;
714 }
715
716 .pithos-metaValue {
717         width: 7em;
718 }