CSS: myslice.css is generic, the CSS for each theme will only override the colors
[unfold.git] / portal / static / css / myslice.css
1 @import url("../fonts/opensans_bold_macroman/stylesheet.css");
2
3 .myslice-message {
4     position:relative;
5     left:-491px;
6     width:980px;
7     margin:0 auto;
8     box-shadow: 10px 10px 5px #888888;
9     margin-bottom: 15px;
10 }
11
12 html { height: 100% }
13
14 body {
15     background-color:white;
16     color:black;
17     margin:0;
18     padding:0;
19     height: 100%;
20     letter-spacing:0.3px;
21 }
22 a, a:active, a:focus {
23     outline: 0;
24     text-decoration:none;
25     color:#760073;
26 }
27 a:hover {
28     color:#0D0049;
29 }
30
31 a.current {
32     text-decoration:underline;
33     color:#333333;
34 }
35 p.command {
36     padding:15px;
37     margin:15px 0;
38     color:#890000;
39     background-color:#E0E0E0; 
40     font-family:Courier, monospace;
41 }
42 h1 {
43     border-bottom:1px solid #DDDDDD;
44     padding:0 0 0 0;
45     margin:15px 0 15px 0;
46     font-size:14pt;
47 }
48 h1 img {
49     vertical-align:middle;
50     margin-bottom:4px;
51     margin-right:10px;
52 }
53 h2 {
54     margin:0 0 15px 0;
55     font-size:14pt;
56     color:#333333;
57 }
58 h3 {
59     margin:0 0 5px 0;
60     font-size:13pt;
61     color:#201E62;
62 }
63 h4 {
64     margin:0 0 5px 0;
65     font-size:12pt;
66     color:#333333;
67 }
68 label {
69     font-weight:normal;
70     font-size:13px;
71     color:#201E62;
72 }
73 .sublabel {
74     color:gray;
75     font-style:italic;
76     font-weight:normal;
77 }
78 span.subtitle {
79     color:#454545;
80     font-size:9pt;
81     font-weight:normal;
82     text-transform:uppercase;
83 }
84 span.small {
85     font-size:9pt;
86 }
87 span.gray {
88     color:gray;
89 }
90 span.type {
91     color:#201E62;
92     font-weight:bold;
93     font-size:9pt;
94 }
95 span.htitle {
96     color:#454545;
97     font-size:9pt;
98     font-weight:normal;
99 }
100 span.version {
101     font-size:8pt;
102     color:#888888;
103 }
104 input[type=checkbox] {
105   min-width:5px !important;
106   margin-left:0 !important;
107 }
108 input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, option {
109     min-width:260px;
110     padding:6px;
111     border:1pt solid #22606D;
112     vertical-align:bottom;
113     border-radius:0;
114 }
115
116 textarea {
117     padding:6px;
118     border:1pt solid #22606D !important;
119     border-radius:0 !important;
120 }
121
122 span.label {
123     font-size:11pt;
124     color:gray;
125     font-weight:normal;
126     padding:0;
127 }
128 div.el {
129     padding-bottom:15px;
130 }
131 div.breadcrumbs {
132     margin:15px 0;
133     color:gray;
134     font-size:10pt;
135 }
136 div.breadcrumbs a {
137     color:gray;
138 }
139 div.breadcrumbs a:hover {
140     text-decoration:underline;
141 }
142 .tab-pane {
143     padding-top:15px;
144 }
145 /* buttons */
146 button.btn, input.btn {
147     padding:6px 10px;
148     border-radius:5px;
149     font-size:10pt;
150     font-weight:normal;
151 }
152 button.btn span.glyphicon {
153     margin-right:6px;
154 }
155 button.btn-default {
156     border-bottom:3px solid #cccccc;
157 }
158 button.btn-default:hover {
159     background-color:white;
160     border:1px solid #ADADAD;
161     border-bottom:3px solid #ADADAD;
162 }
163 button.btn-default:active {
164     background-color:white;
165     border:1px solid #ADADAD;
166     border-bottom:1px solid #ADADAD;
167     margin-top:2px;
168     box-shadow:none;
169 }
170 button.btn-primary {
171     border-bottom:3px solid #3071A9;
172 }
173 button.btn-primary:hover {
174     box-shadow:none;
175     background-color:#428bca;
176     border:1px solid #357ebd;
177     border-bottom:3px solid #3071A9;
178 }
179 button.btn-primary:active {
180     box-shadow:none;
181     border-bottom:1px solid #3071A9;
182     margin-top:2px;
183 }
184 button.btn-danger {
185     border-bottom:3px solid #A13F3A;
186 }
187 button.btn-danger:hover {
188     box-shadow:none;
189     background-color:#d9534f;
190     border:1px solid #d43f3a;
191     border-bottom:3px solid #A13F3A;
192 }
193 button.btn-danger:active {
194     border:1px solid #d43f3a;
195     box-shadow:none;
196     margin-top:2px;
197 }
198 button.btn-onelab, input.btn-onelab {
199     border:0;
200     border-bottom:3px solid #4cae4c;
201     background-color:#5cb85c;
202     color:white;
203     width: 150px;
204     height: 30px;
205 }
206 button.btn-onelab:hover, input.btn-onelab:hover {
207     border:0;
208     border-bottom:3px solid #47a447;
209     background-color:#398439;
210     color:white;
211 }
212 button.btn-onelab:active, input.btn-onelab:active {
213     box-shadow:none;
214     border-bottom:1px solid #760073;
215     margin-top:2px;
216 }
217
218 .container-resource button {
219     padding:2px 4px;
220     border-radius:3px;
221     font-size:9pt;
222     font-weight:normal;
223 }
224 .container-resource select,.container-resource option, .container-resource input {
225     padding:2px 4px;
226     font-size:9pt;
227 }
228 .badge {
229     font-size:9pt;
230     margin-left:4px;
231 }
232 /***** Notifications *****/
233 .warning {
234     border: 1px solid red;
235     margin: 20px 60px;
236     padding: 10px 20px;
237     color: red;
238     background-color: #f2dbdb;
239     text-align: center;
240 }
241 div#menu-slice-list{
242     display:none;
243     position:absolute;
244     background-color:orange;
245     padding:15px;
246     left:-15px;
247     z-index:10;
248 }
249 div.dashboard div.projects-tree {
250     margin-left:49px;
251 }
252 /* HOME DASHBOARD */
253 div#home-dashboard {
254     color:black;
255     margin:0 auto 25px auto;
256 }
257 div#home-dashboard table {
258     margin:25px;
259     width:100%;
260 }
261 div#home-dashboard table td {
262     text-align:center;
263     padding:15px 0;
264     width:33%;
265 }
266 div#home-dashboard table tr:first-child td {
267     font-size:12pt;
268     font-weight:bold;
269     color:#270A5A;
270 }
271 div#home-dashboard table tr:last-child td {
272     vertical-align:top;
273     padding:25px 0;
274 }
275 div#home-dashboard table tr:last-child td.logged-in {
276     border-right:1px solid #DDDDDD;
277     padding:25px;
278 }
279 div#home-dashboard table tr:last-child td.support {
280     border-left:1px solid #DDDDDD;
281     padding:25px;
282 }
283 div#home-dashboard table tr:last-child td:first-child {
284 }
285 div#home-dashboard table tr:last-child td:last-child {
286     border-right:0;
287 }
288 div#home-dashboard table tr:last-child td.logged-in div {
289     text-align:left;
290     padding:25px 0;
291 }
292 div#home-dashboard table tr:last-child td.support div {
293     text-align:left;
294     padding:25px 0;
295 }
296 div#home-dashboard div.login-widget {
297     padding:20px;
298 }
299 div#home-dashboard table td.support {
300 }
301 div#home-dashboard table td.support a {
302 }
303 div#home-dashboard table td.support a:hover {
304     text-decoration:none;
305 }
306
307 div#home-dashboard div#manager {
308     display:none;
309 }
310
311 div#home-dashboard div#home-slice-list {
312     margin:25px 0;
313     padding:0 25px;
314     text-align:left;
315 }
316 div#home-dashboard div#home-slice-list ul {
317     list-style: none;
318     padding:0;
319     margin:0;
320 }
321 div#home-dashboard div#home-slice-list li {
322     
323 }
324
325 /**/
326
327 /**/
328 /* WELL */
329 div.well {
330 }
331 /**/
332 /* TABLE */
333 table.table {
334     margin:0;
335 }
336 table.table thead {
337     padding:0;
338 }
339 table.table tbody {
340     padding:0;
341 }
342 table.table tr {
343     padding:0;
344 }
345 table.table td {
346     padding:0;
347 }
348 /* INSTITUTION */
349 div#institution {
350     color:black;
351 }
352 .form-hint {
353     font-size:11pt;
354     font-style:italic;
355     color:gray;
356 }
357
358
359 .form-hint {
360     font-size:11pt;
361     font-style:italic;
362     color:gray;
363 }
364
365
366
367 /* TICKET REQUEST */
368 div#ticket-request {
369     color:black;
370 }
371 .form-hint {
372     font-size:11pt;
373     font-style:italic;
374     color:gray;
375 }
376 div#ticket-request p {
377     margin:20px 0;
378 }
379
380 ul.nav-tabs {
381     margin:0 0 15px 0;
382 }
383 ul.nav-tabs ul {}
384 ul.nav-tabs li {}
385
386 ul.nav-section li a {
387     color:black;
388     border-bottom:0;
389 }
390 ul.nav-section li:first-child {
391     padding:0;
392 }
393 ul.nav-section li:first-child a {
394 }
395 ul.nav-section li:first-child.active a {
396 }
397
398 ul.nav-resources {
399     margin:15px 0;
400 }
401 ul.nav-resources a {
402     padding: 4px 10px 5px 10px;
403 }
404
405 /* SLICE VIEW */
406 div.container-resource, div.container-slice {
407     padding-right:15px;
408     padding-left:15px;
409 }
410 .table th {
411     border-top:0 !important;
412 }
413 div#slice-view {
414     margin:0;
415 }
416
417 div.sl-filter-facilities {
418     padding:0 5px;
419 }
420 div.sl-filter-facilities h4 {
421     margin-bottom:15px;
422     
423 }
424 img.sl-image {
425     margin:0 5px 5px 0;
426     padding:0;
427     vertical-align:middle;
428 }
429 a.sl-facility {
430     color:gray;
431     text-decoration:none;
432 }
433 a.sl-facility:hover {
434     color:#342961;
435 }
436 a.sl-facility.active {
437     color:black;
438     text-decoration:none;
439 }
440 a.sl-facility::before {
441     content: " ";
442 }
443 div.sl-facilities {
444     border-bottom:#CCCCCC 1px solid;
445     padding-bottom:15px;
446     margin-bottom:15px;
447 }
448 div.sl-facilities:last-child {
449     border:0;
450 }
451 a.sl-testbed {
452     color:gray;
453     text-decoration:none;
454     margin-left:25px;
455     margin-bottom:5px;
456 }
457 a.sl-testbed:hover {
458     color:#342961;
459 }
460 a.sl-testbed.active {
461     color:black;
462 }
463 div.sl-filter-resources {
464     margin:0 0 10px 0;
465     text-align:center;
466 }
467 span.sl-resources {
468     font-size:9pt;
469     color:gray;
470 }
471 a.sl-resources {
472     font-size:9pt;
473     border:0;
474     padding:2px 8px;
475     margin:0 5px;
476     -moz-border-radius: 2px;
477     border-radius: 2px;
478     text-align: center;
479 }
480 a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
481     border:0;
482     padding:2px 8px;
483     -moz-border-radius: 2px;
484     border-radius: 2px;
485     background-color:#E7A6E7;
486     color:#000000;
487 }
488 a.sl-resources:first-child {
489 }
490 button.btn-apply {
491     font-size:13px;
492     padding:2px 8px;
493     margin:0 5px;
494     -moz-border-radius: 2px;
495     border-radius: 2px;
496     text-align: center;
497 }
498 div#slice-info {
499     margin-top:25px;
500 }
501 div#slice-info table {
502     width:100%;
503     margin:0 auto;
504 }
505 div#slice-info table td:first-child {
506     text-align:right;
507     font-weight:bold;
508     padding-right:15px;
509 }
510 div#slice-info td {
511     padding:5px;
512 }
513
514 /* SLICE VIEW sections */
515 .slice-sections, .slice-pending {
516     margin:0;
517     padding:0;
518 }
519 .slice-sections ul, .slice-pending ul {
520     margin:0;
521     padding:0;
522 }
523 .slice-pending ul {
524     width:400px;
525     margin:0 auto 15px auto;
526 }
527 .slice-sections li {
528     text-align:left;
529     margin:0;
530     padding:0;
531 }
532 .slice-pending li {
533     padding-right:15px;
534 }
535 .slice-sections li a, .slice-pending li a {
536     font-size:14px;
537     color:black;
538     padding:0;
539 }
540 .slice-sections li.active a, .slice-pending li.active a  {
541     color:#201E62;
542     background-color:#EFEFEF;
543     text-decoration:underline;
544     padding:0;
545 }
546 .slice-sections ul.nav-pills li a:hover, .slice-pending ul.nav-pills li a:hover {
547     text-decoration:underline;
548     background-color:#EFEFEF;
549     color:black;
550 }
551 .slice-sections ul.nav-pills li.active, .slice-pending ul.nav-pills li.active {
552
553 }
554 .slice-sections li:first-child, .slice-sections li:first-child a {
555     color:#201E62;
556     font-weight:bold;
557 }
558 .slice-experiment {
559     text-align:right;
560     padding:0;
561 }
562 .slice-experiment button {
563     margin:3px 0 0 0;
564     background-color:#CC4125;
565     color:white;
566 }
567
568 .slice-pending {
569 }
570 .slice-pending button {
571     font-size:9pt;
572     margin:-2px 0 0 0;
573     padding:3px 5px;
574 }
575 .slice-pending button.apply {
576     font-size:14px;
577     padding:2px 5px;
578 }
579 .slice-pending button.clear {
580 }
581 tr.active, tr.active td {
582     background-color:#FFFFCC !important;
583 }
584 div.dataTables_filter label{
585     float:left;
586     width:400px;
587 }
588
589 /* HEADER */
590
591
592 .header {
593   -moz-box-shadow:    0 0 1px rgba(82,82,82,0.6);
594   -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6);
595   box-shadow:         0 0 1px rgba(82,82,82,0.6);
596   height:61px;
597   background-color:white;
598 }
599
600 div.navigation {
601     
602 }
603 div.navigation ul {
604     margin:26px 0 0 0;
605     padding:0;
606     display: inline-block;
607     list-style-type: none;
608     white-space: nowrap;
609 }
610
611 div.navigation li {
612     color:#0C0047;
613     font-family:open_sansbold, sans-serif;
614     font-size:9pt;
615     font-weight:normal;
616     line-height:0.8em;
617     letter-spacing:0.4pt;
618     list-style:none;
619     float:left;
620     padding:0 15px;
621     margin:0;
622     text-transform:uppercase;
623 }
624 div.navigation li:hover {
625 }
626 div.navigation li a {
627     color:#0C0047;
628 }
629 div.navigation li a:hover, div.navigation li a.current {
630     color:#760073;
631     text-decoration:none;
632 }
633
634 div.navigation li:last-child {
635     margin-right:0;
636 }
637
638
639 div.navigation .dropdown-menu {
640     color:black;
641     -moz-box-shadow:    1px 1px 0px 0 rgba(58, 48, 100,0.8);
642     -webkit-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8);
643     box-shadow:         1px 1px 0px 0 rgba(58, 48, 100,0.8);
644     border-radius:2px;
645     padding:0 5px 5px 5px;
646     margin-top:5px;
647     margin-left:20px;
648 }
649 div.navigation .dropdown-menu ul {
650     margin:0;
651     padding:15px 5px 5px 5px;
652     display:list-item;
653 }
654 div.navigation .dropdown-menu li {
655     margin:0 10px 0 0;
656     padding:0 0 8px 0;
657     display:list-item;
658     float:none;
659     text-transform: none;
660 }
661
662 div.navigation .dropdown-menu a {
663     font-family:Helvetica,sans-serif;
664     font-size:10pt;
665     color:black;
666 }
667 div.navigation .dropdown-menu li.title {
668     margin-bottom:10px;
669 }
670 div.navigation .dropdown-menu li.title a {
671     font-family:open_sansbold, sans-serif;
672 }
673
674
675 div.navigation .dropdown-menu li:first-child {
676     border-bottom:1px solid white;
677     padding-bottom:5px;
678      
679 }
680
681 div.secondary {
682     text-align:right;
683 }
684
685 div.secondary ul {
686    margin:6px 0 0 0;
687    padding:0;
688 }
689
690 div.secondary li {
691     font-size:9pt;
692     display:inline;
693     list-style:none;
694     margin:0px;
695     padding:0;
696     margin-right:15px;
697     color:#747474;
698     letter-spacing:0.4px;
699 }
700 div.secondary li:last-child {
701     margin-right:0;
702 }
703 div.secondary li a {
704     color:#747474;
705 }
706 div.secondary li a:hover {
707     text-decoration:underline;
708 }
709 div.secondary .button {    
710     width:300px;
711     margin-top:15px;
712 }
713 div.secondary .account {
714     margin-top:10px;
715     padding:0;
716     font-size:9pt;
717     color:gray;
718     text-align:right;
719 }
720 div.secondary .account span {
721     font-size:8pt;
722 }
723 div.secondary .account a {
724     color:black;
725 }
726
727
728 div.footer {
729     padding-top:15px;
730 }
731 div.footer div.bottom {
732     position:absolute;
733     bottom:0;
734 }
735 div.footer ul {
736    margin:6px 0 0 0;
737    padding:0;
738 }
739
740 div.footer li {
741     font-size:9pt;
742     display:inline;
743     list-style:none;
744     margin:0px;
745     padding:0;
746     margin-right:15px;
747     color:#747474;
748     letter-spacing:0.4px;
749 }
750
751 div.footer li a {
752     color:#747474;
753 }
754 div.footer li a:hover {
755     text-decoration:underline;
756 }
757 div.copy {
758     font-size:8pt;
759     color:gray;
760     padding-top:15px;
761     padding-bottom:15px;
762 }
763
764 div.home {
765     font-size:11pt;
766     line-height:1.2em;
767     letter-spacing:0.3pt;
768     min-height:500px;
769     background-image: url('../img/bg-experiment.jpg');
770     background-repeat:no-repeat;
771     background-size:cover;
772     background-position:center top;
773     background-color:#086274;
774     padding:100px 0;
775 }
776 div.home h2 {
777     color:white;
778     line-height:1.2em;
779     font-size:18pt;
780 }
781 div.home h3 {
782     color:white;
783     line-height:1.4em;
784 }
785 /*
786 div.dashboard {
787     text-align:center;
788 }
789 div.dashboard div {
790     margin:25px 0;
791 }
792 div.dashboard ul {
793     text-align:left;
794     margin-left:24px;
795     list-style:none;
796 }
797 div.home {
798     padding-top:50px;
799 }
800 div.home h1 {
801     font-size:22pt;
802     border:0;
803 }
804 div.home h3, div.home h4 {
805     color:#424242;
806     line-height:1.4em;
807 }
808
809 div.home h3 a {
810     color:#FD6D2C;
811 }*/
812 div.dashboard {
813 }
814 div.dashboard a {
815     color:#206090;
816 }
817
818 div.dashboard a:hover {
819     text-decoration:underline;
820 }
821 div.dashboard div.projects-tree {
822     margin-left:49px;
823 }
824 div.dashboard ul {
825     list-style-type:disc;
826     list-style-position:inside;
827     text-align:left;
828     margin:0 0 15px 0;
829     padding:0;
830     
831 }
832 div.dashboard ul ul {
833     margin:5px 0 15px 25px;
834     list-style:none;
835 }
836 div.dashboard li {
837     margin:0 0 5px 0;
838     padding:0;
839 }
840 div.dashboard ul ul li {
841     margin:0;
842 }
843 div.dashboard ul ul a {
844 }
845 div.dashboard h3 {
846     border-bottom:1px solid #E0E0E0;
847     margin-right:15px;
848     margin-bottom:25px;
849 }
850 div.dashboard h3 a {
851      color:#201E62;
852 }
853 div.dashboard h3 img {
854     margin:15px 15px 15px 0;
855 }
856 div.dashboard span.glyphicon {
857     text-align:center;
858     width:45px;
859     height:25px;
860 }
861 div.dashboard-create-slice {
862     display:none;
863 }
864
865 div.registration-form {
866     padding-top:150px;
867     text-align:center;
868 }
869 div.registration-form {
870     padding-top:150px;
871     text-align:center;
872 }
873
874 .login-form input {
875     width:320px;
876 }
877 .login-form input[type=submit] {
878     width:108px;
879 }
880
881 .login-submit {
882     vertical-align:middle;
883     padding:0;
884 }
885 .lost-password {
886     font-size:10pt;
887     color:black;
888     text-align:right;
889     padding:0px;
890 }
891 .lost-password a {
892     color:white;
893     text-shadow:0.5px 0.5px black;
894 }
895 .login-signup {
896     font-size:12pt;
897     color:white;
898     text-shadow:0.5px 0.5px black;
899     margin-top:45px;
900     padding:5px 0 0 4px;
901     
902 }
903 .login-signup a {
904     color:white;
905     text-shadow:0.5px 0.5px black;
906     padding-bottom:2px;
907     border-bottom:2pt solid white;
908 }
909 .login-signup a:hover {
910     text-decoration:none;
911 }
912 .login-signup button {
913     padding:8px;
914     border:0;
915     border-bottom:2px solid #540086;
916     background-color:#302562;
917     color:white;
918     width:100px;
919     border-radius:5px;
920     font-size:12pt;
921 }
922 div.slogan {
923     text-align:center;
924     color:white;
925     padding-top:60px;
926     text-shadow: 1px 1px #013540;
927 }
928
929 th {
930     border:0 !important;
931 }
932
933 div.monitor {
934     padding:40px 0 25px 0;
935 }
936 div.monitor h1 {
937     margin-bottom:25px;
938 }
939 div.s-monitor {
940     padding-bottom:25px;
941 }
942 span#stats-period-txt {
943     text-transform:lowercase;
944 }
945
946 // resource info modal
947 a.resource-info:hover {
948     cursor:pointer;
949 }
950 table.modal-resource-info tr td:first-child {
951     font-weight:bold;
952     text-align:right;
953 }
954 table.modal-resource-info tr:first-child td {
955     border-top:0;
956     text-align:center;
957 }
958 table.modal-resource-info tr:last-child td {
959     border-bottom:0;
960     text-align:center;
961 }