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