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