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