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