Style: filter_status labels are aligned on a single line
[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 }
12 a, a:active, a:focus {
13     outline: 0;
14     text-decoration:none;
15 }
16
17 h1 {
18     border-bottom:1px solid #DDDDDD;
19     padding:0 0 0 0;
20     margin:15px 0 15px 0;
21     font-size:14pt;
22 }
23 h1 img {
24     vertical-align:middle;
25     margin-bottom:4px;
26     margin-right:10px;
27 }
28 h2 {
29     font-size:14pt;
30     color:#333333;
31 }
32 h3 {
33     font-size:13pt;
34     color:#201E62;
35 }
36 input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, option {
37     min-width:260px;
38     padding:6px;
39     border:1pt solid #22606D;
40     vertical-align:bottom;
41     border-radius:0;
42 }
43
44 textarea {
45     padding:6px;
46     border:1pt solid #22606D !important;
47     border-radius:0 !important;
48 }
49
50 span.label {
51     font-size:11pt;
52     color:gray;
53     font-weight:normal;
54     padding:0;
55 }
56 div.el {
57     padding-bottom:15px;
58 }
59 div.breadcrumbs {
60     margin:15px 0;
61     color:gray;
62     font-size:10pt;
63 }
64 /* buttons */
65 button.btn, input.btn {
66     padding:6px 10px;
67     border-radius:5px;
68     font-size:10pt;
69     font-weight:normal;
70 }
71 button.btn span.glyphicon {
72     margin-right:6px;
73 }
74 button.btn-default {
75     border-bottom:3px solid #cccccc;
76 }
77 button.btn-default:hover {
78     background-color:white;
79     border:1px solid #ADADAD;
80     border-bottom:3px solid #ADADAD;
81 }
82 button.btn-default:active {
83     background-color:white;
84     border:1px solid #ADADAD;
85     border-bottom:1px solid #ADADAD;
86     margin-top:2px;
87     box-shadow:none;
88 }
89 button.btn-primary {
90     border-bottom:3px solid #3071A9;
91 }
92 button.btn-primary:hover {
93     box-shadow:none;
94     background-color:#428bca;
95     border:1px solid #357ebd;
96     border-bottom:3px solid #3071A9;
97 }
98 button.btn-primary:active {
99     box-shadow:none;
100     border-bottom:1px solid #3071A9;
101     margin-top:2px;
102 }
103 button.btn-danger {
104     border-bottom:3px solid #A13F3A;
105 }
106 button.btn-danger:hover {
107     box-shadow:none;
108     background-color:#d9534f;
109     border:1px solid #d43f3a;
110     border-bottom:3px solid #A13F3A;
111 }
112 button.btn-danger:active {
113     border:1px solid #d43f3a;
114     box-shadow:none;
115     margin-top:2px;
116 }
117 button.btn-onelab, input.btn-onelab {
118     border:0;
119     border-bottom:3px solid #760073;
120     background-color:#302562;
121     color:white;
122 }
123 button.btn-onelab:hover, input.btn-onelab:hover {
124     border:0;
125     border-bottom:3px solid #760073;
126     background-color:#302562;
127     color:white;
128 }
129 button.btn-onelab:active, input.btn-onelab:active {
130     box-shadow:none;
131     border-bottom:1px solid #760073;
132     margin-top:2px;
133 }
134
135 .container-resource button {
136     padding:2px 4px;
137     border-radius:3px;
138     font-size:9pt;
139     font-weight:normal;
140 }
141 .container-resource select,.container-resource option, .container-resource input {
142     padding:2px 4px;
143     font-size:9pt;
144 }
145 .badge {
146     font-size:9pt;
147     margin-left:4px;
148 }
149 /***** Notifications *****/
150 .warning {
151     border: 1px solid red;
152     margin: 20px 60px;
153     padding: 10px 20px;
154     color: red;
155     background-color: #f2dbdb;
156     text-align: center;
157 }
158
159 /* HOME DASHBOARD */
160 div#home-dashboard {
161     color:black;
162     margin:0 auto 25px auto;
163 }
164 div#home-dashboard table {
165     margin:25px;
166     width:100%;
167 }
168 div#home-dashboard table td {
169     text-align:center;
170     padding:15px 0;
171     width:33%;
172 }
173 div#home-dashboard table tr:first-child td {
174     font-size:12pt;
175     font-weight:bold;
176     color:#270A5A;
177 }
178 div#home-dashboard table tr:last-child td {
179     vertical-align:top;
180     padding:25px 0;
181 }
182 div#home-dashboard table tr:last-child td.logged-in {
183     border-right:1px solid #DDDDDD;
184     padding:25px;
185 }
186 div#home-dashboard table tr:last-child td.support {
187     border-left:1px solid #DDDDDD;
188     padding:25px;
189 }
190 div#home-dashboard table tr:last-child td:first-child {
191 }
192 div#home-dashboard table tr:last-child td:last-child {
193     border-right:0;
194 }
195 div#home-dashboard table tr:last-child td.logged-in div {
196     text-align:left;
197     padding:25px 0;
198 }
199 div#home-dashboard table tr:last-child td.support div {
200     text-align:left;
201     padding:25px 0;
202 }
203 div#home-dashboard div.login-widget {
204     padding:20px;
205 }
206 div#home-dashboard table td.support {
207 }
208 div#home-dashboard table td.support a {
209 }
210 div#home-dashboard table td.support a:hover {
211     text-decoration:none;
212 }
213
214 div#home-dashboard div#manager {
215     display:none;
216 }
217
218 div#home-dashboard div#home-slice-list {
219     margin:25px 0;
220     padding:0 25px;
221     text-align:left;
222 }
223 div#home-dashboard div#home-slice-list ul {
224     list-style: none;
225     padding:0;
226     margin:0;
227 }
228 div#home-dashboard div#home-slice-list li {
229     
230 }
231
232 /**/
233
234 /**/
235 /* WELL */
236 div.well {
237 }
238 /**/
239 /* TABLE */
240 table.table {
241     margin:0;
242 }
243 table.table thead {
244     padding:0;
245 }
246 table.table tbody {
247     padding:0;
248 }
249 table.table tr {
250     padding:0;
251 }
252 table.table td {
253     padding:0;
254 }
255 /* INSTITUTION */
256 div#institution {
257     color:black;
258 }
259 .form-hint {
260     font-size:11pt;
261     font-style:italic;
262     color:gray;
263 }
264
265
266 .form-hint {
267     font-size:11pt;
268     font-style:italic;
269     color:gray;
270 }
271
272
273
274 /* TICKET REQUEST */
275 div#ticket-request {
276     color:black;
277 }
278 .form-hint {
279     font-size:11pt;
280     font-style:italic;
281     color:gray;
282 }
283 div#ticket-request p {
284     margin:20px 0;
285 }
286
287 ul.nav-tabs {
288     margin:0 0 15px 0;
289 }
290 ul.nav-tabs ul {}
291 ul.nav-tabs li {}
292
293 ul.nav-section li a {
294     color:black;
295     border-bottom:0;
296 }
297 ul.nav-section li:first-child {
298     padding:0;
299 }
300 ul.nav-section li:first-child a {
301 }
302 ul.nav-section li:first-child.active a {
303 }
304
305 ul.nav-resources {
306     margin:15px 0;
307 }
308 ul.nav-resources a {
309     padding: 4px 10px 5px 10px;
310 }
311
312 /* SLICE VIEW */
313 div.container-resource, div.container-slice {
314     padding-right:15px;
315     padding-left:15px;
316 }
317 .table th {
318     border-top:0 !important;
319 }
320 div#slice-view {
321     margin:0;
322 }
323 div.list-group-item {
324     border:0;
325     -moz-border-radius: 0;
326     border-radius: 0;
327     background-color:white;
328     font-weight:bold;
329     padding-left:0;
330 }
331 a.list-group-item {
332     -moz-border-radius: 0;
333     border-radius: 0;
334     border:0;
335     background-color:white;
336     padding:3px 2px 3px 10px;
337     border-left:2pt white solid;
338 }
339 a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
340     -moz-border-radius: 0;
341     border-radius: 0;
342     font-weight: bold;
343     color:black;
344     background-color:#F5F5F5;
345     border-left:2pt blue solid;
346 }
347
348 a.list-group-item:hover {
349     -moz-border-radius: 0;
350     border-radius: 0;
351     border-left:2pt blue solid;
352 }
353 a.list-group-item p.list-group-item-text {
354     -moz-border-radius: 0;
355     border-radius: 0;
356     font-size:9pt;
357     font-style:italic;
358     font-weight: normal;
359     color: black !important;
360 }
361
362 span.sl-resources {
363     font-size:9pt;
364     color:gray;
365 }
366 a.sl-resources, a.sl-resources:hover {
367     font-size:9pt;
368     border:0;
369     padding:2px 4px;
370     -moz-border-radius: 4px;
371     border-radius: 4px;
372     width:125px;
373     text-align: center;
374 }
375 a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
376     border:0;
377     -moz-border-radius: 4px;
378     border-radius: 4px;
379 }
380
381 div#slice-info {
382     margin-top:25px;
383 }
384 div#slice-info table {
385     width:100%;
386     margin:0 auto;
387 }
388 div#slice-info table td:first-child {
389     text-align:right;
390     font-weight:bold;
391     padding-right:15px;
392 }
393 div#slice-info td {
394     padding:5px;
395 }
396
397 /* SLICE VIEW sections */
398 .slice-sections, .slice-pending {
399     margin:0;
400     padding:0;
401 }
402 .slice-sections ul, .slice-pending ul {
403     margin:0;
404     padding:0;
405 }
406 .slice-pending ul {
407     width:400px;
408     margin:0 auto 15px auto;
409 }
410 .slice-sections li {
411     text-align:left;
412     margin:0;
413     padding:0;
414 }
415 .slice-pending li {
416     padding-right:15px;
417 }
418 .slice-sections li a, .slice-pending li a {
419     font-size:14px;
420     color:black;
421     padding:0;
422 }
423 .slice-sections li.active a, .slice-pending li.active a  {
424     color:#201E62;
425     background-color:#EFEFEF;
426     text-decoration:underline;
427     padding:0;
428 }
429 .slice-sections ul.nav-pills li a:hover, .slice-pending ul.nav-pills li a:hover {
430     text-decoration:underline;
431     background-color:#EFEFEF;
432     color:black;
433 }
434 .slice-sections ul.nav-pills li.active, .slice-pending ul.nav-pills li.active {
435
436 }
437 .slice-sections li:first-child, .slice-sections li:first-child a {
438     color:#201E62;
439     font-weight:bold;
440 }
441 .slice-experiment {
442     text-align:right;
443     padding:0;
444 }
445 .slice-experiment button {
446     margin:3px 0 0 0;
447     background-color:#CC4125;
448     color:white;
449 }
450
451 .slice-pending {
452 }
453 .slice-pending button {
454     font-size:9pt;
455     margin:-2px 0 0 0;
456     padding:3px 5px;
457 }
458 .slice-pending button.apply {
459 }
460 .slice-pending button.clear {
461 }
462 tr.active, tr.active td {
463     background-color:#FFFFCC !important;
464 }
465 div.dataTables_filter label{
466     float:left;
467     width:400px;
468 }
469
470 /* HEADER */
471
472
473 .header {
474   -moz-box-shadow:    0 0 1px rgba(82,82,82,0.6);
475   -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6);
476   box-shadow:         0 0 1px rgba(82,82,82,0.6);
477   height:61px;
478   background-color:white;
479 }
480
481 div.navigation {
482     
483 }
484 div.navigation ul {
485     margin:26px 0 0 0;
486     padding:0;
487     display: inline-block;
488     list-style-type: none;
489     white-space: nowrap;
490 }
491
492 div.navigation li {
493     color:#0C0047;
494     font-family:open_sansbold, sans-serif;
495     font-size:9pt;
496     font-weight:normal;
497     line-height:0.8em;
498     letter-spacing:0.4pt;
499     list-style:none;
500     float:left;
501     padding:0 15px;
502     margin:0;
503     text-transform:uppercase;
504 }
505 div.navigation li:hover {
506 }
507 div.navigation li a {
508     color:#0C0047;
509 }
510 div.navigation li a:hover, div.navigation li a.current {
511     color:#760073;
512     text-decoration:none;
513 }
514
515 div.navigation li:last-child {
516     margin-right:0;
517 }
518
519
520 div.navigation .dropdown-menu {
521     color:black;
522     -moz-box-shadow:    1px 1px 0px 0 rgba(58, 48, 100,0.8);
523     -webkit-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8);
524     box-shadow:         1px 1px 0px 0 rgba(58, 48, 100,0.8);
525     border-radius:2px;
526     padding:0 5px 5px 5px;
527     margin-top:5px;
528     margin-left:20px;
529 }
530 div.navigation .dropdown-menu ul {
531     margin:0;
532     padding:15px 5px 5px 5px;
533     display:list-item;
534 }
535 div.navigation .dropdown-menu li {
536     margin:0 10px 0 0;
537     padding:0 0 8px 0;
538     display:list-item;
539     float:none;
540     text-transform: none;
541 }
542
543 div.navigation .dropdown-menu a {
544     font-family:Helvetica,sans-serif;
545     font-size:10pt;
546     color:black;
547 }
548 div.navigation .dropdown-menu li.title {
549     margin-bottom:10px;
550 }
551 div.navigation .dropdown-menu li.title a {
552     font-family:open_sansbold, sans-serif;
553 }
554
555
556 div.navigation .dropdown-menu li:first-child {
557     border-bottom:1px solid white;
558     padding-bottom:5px;
559      
560 }
561
562 div.secondary {
563     text-align:right;
564 }
565
566 div.secondary ul {
567    margin:6px 0 0 0;
568    padding:0;
569 }
570
571 div.secondary li {
572     font-size:9pt;
573     display:inline;
574     list-style:none;
575     margin:0px;
576     padding:0;
577     margin-right:15px;
578     color:#747474;
579     letter-spacing:0.4px;
580 }
581 div.secondary li:last-child {
582     margin-right:0;
583 }
584 div.secondary li a {
585     color:#747474;
586 }
587 div.secondary li a:hover {
588     text-decoration:none;
589 }
590 div.secondary .button {    
591     width:300px;
592     margin-top:15px;
593 }
594 div.secondary .account {
595     margin-top:10px;
596     padding:0;
597     font-size:9pt;
598     color:gray;
599     text-align:right;
600 }
601 div.secondary .account span {
602     font-size:8pt;
603 }
604 div.secondary .account a {
605     color:black;
606 }
607 div.home {
608     font-size:11pt;
609     line-height:1.2em;
610     letter-spacing:0.3pt;
611     min-height:500px;
612     background-image: url('../img/bg-experiment.png');
613     background-repeat:no-repeat;
614     background-size:cover;
615     background-position:center top;
616     background-color:#086274;
617     padding:100px 0;
618 }
619 div.home h2 {
620     color:white;
621     line-height:1.2em;
622     font-size:18pt;
623 }
624 div.home h3 {
625     color:white;
626     line-height:1.4em;
627 }
628 div.dashboard {
629     text-align:center;
630 }
631 div.dashboard div {
632     margin:25px 0;
633 }
634 div.dashboard ul {
635     text-align:left;
636     margin-left:24px;
637     list-style:none;
638 }
639 div.registration-form {
640     padding-top:150px;
641     text-align:center;
642 }
643
644 .login-form input {
645     width:320px;
646 }
647 .login-form input[type=submit] {
648     width:108px;
649 }
650
651 .login-submit {
652     vertical-align:middle;
653     padding:0;
654 }
655 .lost-password {
656     font-size:10pt;
657     color:black;
658     text-align:right;
659     padding:0px;
660 }
661 .lost-password a {
662     color:white;
663     text-shadow:0.5px 0.5px black;
664 }
665 .login-signup {
666     font-size:12pt;
667     color:white;
668     text-shadow:0.5px 0.5px black;
669     margin-top:45px;
670     padding:5px 0 0 4px;
671     
672 }
673 .login-signup a {
674     color:white;
675     text-shadow:0.5px 0.5px black;
676     padding-bottom:2px;
677     border-bottom:2pt solid white;
678 }
679 .login-signup a:hover {
680     text-decoration:none;
681 }
682 .login-signup button {
683     padding:8px;
684     border:0;
685     border-bottom:2px solid #540086;
686     background-color:#302562;
687     color:white;
688     width:100px;
689     border-radius:5px;
690     font-size:12pt;
691 }
692 div.slogan {
693     text-align:center;
694     color:white;
695     padding-top:60px;
696     text-shadow: 1px 1px #013540;
697 }