themes/default/less/sugar.less

   1 /* Body and structure
   2 -------------------------------------------------- */
   3 body {
   4   position: relative;
   5   padding: 47px 0;
   6 }
   7
   8 body#login {
   9         background: #333 url(../img/hixs_pattern_evolution.png);
  10 }
  11
  12 .link {
  13 margin-top: 6px;
  14 display: inline-block;
  15 }
  16
  17 footer {
  18         position: fixed;
  19         bottom: 0;
  20 }
  21
  22 .tcenter {
  23         text-align: center;
  24 }
  25 .tleft {
  26         text-align: left;
  27 }
  28 .tright {
  29         text-align: right;
  30 }
  31
  32 /* Colors */
  33 .black {background-color: @black;}
  34 .grayDarker  {background-color: @grayDarker;}
  35 .grayDark  {background-color: @grayDark;}
  36 .gray {background-color: @gray;}
  37 .grayLight {background-color: @grayLight;}
  38 .grayLighter {background-color: @grayLighter;}
  39 .white {background-color: @white;}
  40 .blueLight  {background-color: @blueLight;}
  41 .blue {background-color: @blue;}
  42 .blueDark {background-color: @blueDark;}
  43 .green {background-color: @green;}
  44 .red {background-color: @red;}
  45 .yellow {background-color: @yellow;}
  46 .orange {background-color: @orange;}
  47 .pink {background-color: @pink;}
  48 .purple {background-color: @purple;}
  49 .infoText {background-color: @infoText;}
  50 .errorText {background-color: @errorText;}
  51 .successText {background-color: @successText;}
  52 .warningText {background-color: @warningText;}
  53 .infoBackground {background-color: @infoBackground;}
  54 .errorBackground {background-color: @errorBackground;}
  55 .successBackground {background-color: @successBackground;}
  56 .warningBackground {background-color: @warningBackground;}
  57
  58 .table-striped tbody tr.odd.thegray td {
  59   background-color: @gray !important;
  60   color: @gray !important;
  61 }
  62
  63 /* Typography */
  64 h1 {font-size: 20px !important; font-weight: normal;}
  65
  66 /* breadcrumbs */
  67 .breadcrumb {
  68         padding: 0;
  69         margin: 0;
  70         background: 0;
  71         border: none;
  72   .border-radius(0px);
  73 }
  74
  75 /* activity and twitter */
  76
  77 article {
  78   position: relative;
  79         display: block;
  80   padding: 10px 30px 10px 10px;
  81   line-height: @baseLineHeight;
  82   border-bottom: 1px solid darken(@grayLighter, 5%);
  83 }
  84
  85 article .avatar {
  86   margin-right: 10px;
  87   .border-radius(3px);
  88 }
  89
  90 article p {
  91         display: block;
  92 }
  93
  94 #activity article.imgs p {
  95   margin-left: 36px;
  96 }
  97
  98 article p:last-child {
  99         margin: 0;
 100 }
 101 article:nth-child(even) {
 102         background-color: lighten(@grayLighter, 1%);
 103 }
 104 .results article:nth-child(even), .results article:nth-child(odd) {
 105         background-color: transparent;
 106         border-bottom-color: @grayDarker;
 107 }
 108
 109 article:hover {
 110         background: #e1f0fa;
 111 }
 112
 113
 114 // Tables
 115 // -----------------
 116 table tbody tr:last-child td:last-child, table tbody tr:last-child td:first-child,
 117 table tfoot tr:last-child td:last-child, table tfoot tr:last-child td:first-child {
 118   .border-radius(0 0 4px 4px)
 119 }
 120 table th { white-space: nowrap;}
 121 table.datatable tbody td { white-space: nowrap; max-width: 100px; overflow-x: hidden;}
 122 table th, table td { position: relative;}
 123
 124 table th { min-width: 20px; color: @tableHeader !important;}
 125 table th .btn-group { margin: 0 0 0 -10px; }
 126 table th .btn input { margin: -2px 0 0 0; }
 127 table th .toggle-all {margin: 10px;}
 128 table td .btn-toolbar { margin: -5px 0 -10px; }
 129 .dblclick input { padding: 3px 3px 2px; position: absolute; top: 1px; width: 80% !important; }
 130 table tfoot td {
 131   font-weight: bold;
 132   border-top: 2px solid @grayLight !important;
 133 }
 134
 135 /* Activity streams */
 136 #stream {position: relative;}
 137 #stream table {margin-top: -15px;}
 138 #stream tr td {padding: 20px 4px }
 139 #stream tbody tr:first-child td {border-top: none;}
 140 #stream tbody tr td:first-child {
 141   width: 40px;
 142 }
 143 #stream tbody tr td:last-child {
 144   width: 75px;
 145   padding-right: 20px;
 146 }
 147
 148 .nav-pills > li > a {
 149     padding: 6px;
 150 }
 151
 152 #colright { position: absolute; top: 0; right: -2px;
 153   background: @grayLight;
 154 }
 155 #colleft { position: absolute; top: 0; left: -2px; }
 156
 157 .navbar .nav .active > a,
 158 .navbar .nav .active > a:hover {
 159   text-decoration: none;
 160   border-bottom: 4px solid darken(@red,15%);
 161   padding-bottom: 13px;
 162   text-shadow: none;
 163   font-weight: bold;
 164 }
 165
 166 .modal .brand, .thumbnail .brand {
 167   background: url(../img/sugar-red.png) 50% 50% no-repeat;
 168   text-indent: -7000px;
 169   margin: 0 auto;
 170   width: 220px;
 171   height: 42px;
 172   -webkit-transition: all .2s linear;
 173      -moz-transition: all .2s linear;
 174           transition: all .2s linear;
 175   }
 176
 177 #folded > div {
 178     width: inherit;
 179 }
 180
 181 #folded .tab-pane#overview {
 182     border-left: none;
 183   }
 184 #folded .tab-pane.active#overview {
 185   border-left: 1px solid darken(@grayLighter, 4%);
 186 }
 187 #dashboard  #folded .tab-pane.active {
 188   position: fixed !important;
 189   top: 47px;
 190   right: 0;
 191   background-image: @textureSecondary;
 192   height: 100%;
 193   width: inherit;
 194   padding: 20px 0;
 195   border-left: 3px solid @grayLight;
 196 }
 197 #folded .tab-pane.active {
 198   position: fixed !important;
 199   top: 93px;
 200   right: 0;
 201   background-image: url(@textureSecondary);
 202   height: 100%;
 203   width: inherit;
 204   padding: 20px 0;
 205   border-left: 1px solid darken(@grayLighter, 4%);
 206 }
 207 #folded .tab-pane .block span.label  {margin: 0 10px 0 0;}
 208 #folded .tab-pane .block {width: 90%; margin-left: 5%;}
 209 #folded [data-toggle="tab"].actions {top: 0; color: @gray;}
 210 #dashboard  #folded .tab-pane.active .thumbnail {margin: 0 20px 20px;}
 211
 212 #searchActivity {margin-top: -12px;}
 213 .subhead {margin-top: 20px;}
 214 .subnav-fixed {
 215   position: fixed;
 216   top: 48px;
 217   left: 0;
 218   right: 0;
 219   z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
 220   border-color: #d5d5d5;
 221   border-width: 0 0 1px; /* drop the border on the fixed edges */
 222   -webkit-border-radius: 0;
 223      -moz-border-radius: 0;
 224           border-radius: 0;
 225   -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 226      -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 227           box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 228   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 229 }
 230 .subnav-fixed .nav {
 231   width: 938px;
 232   margin: 0 auto;
 233   padding: 0 1px;
 234 }
 235
 236 /* Tweak navbar brand link to be super sleek
 237 -------------------------------------------------- */
 238 .cube {
 239   background: url(../img/badge_256g.png) 50% 8px no-repeat;
 240   float: left;
 241   height: 19px;
 242   width: 56px;
 243   margin-left: -20px;
 244   z-index: 2000;
 245   display: block;
 246   -webkit-transition: all .2s linear;
 247      -moz-transition: all .2s linear;
 248           transition: all .2s linear;
 249   filter:  ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/badge_256.png',sizingMethod='scale')";
 250   -ms-filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/badge_256.png',sizingMethod='scale')";
 251   }
 252
 253 .navbar .navbar-inner {
 254   height: 44px;
 255 }
 256 .navbar .cube:hover {
 257   text-decoration: none;
 258   }
 259
 260 .navbar-fixed-top .cube:hover {
 261   text-decoration: none;
 262 }
 263 .navbar .dropdown-menu li, .navbar .dropdown-menu li.divider {
 264   padding: 0;
 265 }
 266 .navbar .dropdown-menu li a {
 267   display: block;
 268   padding: 8px;
 269 }
 270
 271 .avatar img {
 272         .border-radius(3px);
 273         @shadow: 0 2px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(0,0,0,.8) , inset -1px -1px 0 rgba(0,0,0,.8);
 274   .box-shadow(@shadow);
 275 }
 276 .avatar.thumbnail {padding: 3px;}
 277
 278 .navbar .avatar, li li .avatar, .avatar img  {
 279   height: 24px;
 280   width: 24px;
 281 }
 282 .avatar32 img {
 283   height: 32px;
 284   width: 32px;
 285 }
 286 .avatar68 img {
 287 position: absolute;
 288 top: 46px;
 289 right: 0;
 290 z-index: 1;
 291
 292   height: 92px;
 293   width: 92px;
 294 }
 295 .avatar42 img {
 296   height: 42px;
 297   width: 42px;
 298   margin-right: 10px;
 299 }
 300 .pull-left .avatar {margin-right: 10px;}
 301 .navbar .avatar {
 302   margin-right: 10px;
 303         margin-top: -3px;
 304         float: left;
 305         .border-radius(3px);
 306         height: 24px;
 307   width: 24px;
 308   @shadow: 1px 1px 0 rgba(0,0,0,.6), -1px -1px 0 rgba(0,0,0,.6);
 309   .box-shadow(@shadow);
 310 }
 311
 312 .navbar form .btn {
 313         margin-left: -11px;
 314         line-height: 16px;
 315 }
 316
 317 .logo {
 318   background: url(../img/sugar-red-sm.png) 0 0 no-repeat;
 319   display: block;
 320   margin: 14px 0 0 10px;
 321   text-indent: -7000px;
 322   height: 20px;
 323   width: 150px;
 324 }
 325
 326 #sActivity .tab-content {
 327   padding-bottom: 100px;
 328 }
 329
 330
 331 .tabbar .active {
 332         position: relative;
 333 }
 334
 335 .tabbar .active:after, .tabbar .active:before {
 336         border: solid transparent;
 337         content: ' ';
 338         height: 0;
 339         left: 100%;
 340         position: absolute;
 341         width: 0;
 342 }
 343
 344 .tabbar .active:after {
 345         border-width: 7px;
 346         border-bottom-color: #fff;
 347         top: 12px;
 348 }
 349
 350 .tabbar .active:before {
 351         border-width: 7px;
 352         border-bottom-color: #aaa;
 353         top: 10px;
 354 }
 355 .subnav .control-group {
 356   margin: 0;
 357 }
 358 .subnav .control-group .btn-toolbar.pull-right {
 359   margin: 0;
 360 }
 361
 362 input[disabled],
 363 select[disabled],
 364 textarea[disabled],
 365 input[readonly],
 366 select[readonly],
 367 textarea[readonly] {
 368   cursor: not-allowed;
 369   background-color: transparent !important;
 370   border: none !important;
 371 }
 372
 373 /* blocks */
 374 .block {
 375         margin-bottom: 20px;
 376   position: relative;
 377         display: block;
 378 }
 379 .span2 .block {
 380         padding-right: 10px;
 381 }
 382 .block:first-child {border-top: none;}
 383
 384 .block ul.list{
 385   margin: 0 0 20px;
 386   padding: 0;
 387 }
 388 .block .list li, .listed li  {
 389   list-style: none;
 390   margin: 0 0 15px;
 391   position: relative;
 392 }
 393 .listed {margin: 0; padding: 0;}
 394 .listed li {border-bottom: 1px solid @grayLighter; margin: 0; padding: 5px;}
 395
 396 .block .list li.active a {
 397   background: @grayLighter;
 398   color: @textColor;
 399   display: block;
 400   border: none;
 401   padding: 4px;
 402   margin: 0 0 0 -4px;
 403 }
 404 .block.tabs-left {
 405   border: none;
 406 }
 407 .block.tabs-left .nav-tabs {
 408   float: none;
 409   margin: 9px 0;
 410   border: none;
 411 }
 412 .block.thumbnail .nav-tabs {margin: 0; border: none;}
 413
 414 .block.thumbnail .nav-tabs li, .block.tabs-left .nav-tabs li{
 415   border-bottom: 1px solid darken(@grayLighter, 5%);
 416   margin-bottom: 10px;
 417 }
 418
 419 .block.tabs-left .nav-tabs p {
 420   margin: 0 80px 20px 55px;
 421 }
 422
 423 .block.tabs-left .nav-tabs li li .avatar img {
 424   margin: 3px 0 0;
 425 }
 426
 427 .block.tabs-left .nav-tabs li li{
 428   margin: 0;
 429   padding: 10px;
 430   border-top: 1px solid @grayLighter;
 431   border-bottom: none;
 432 }
 433 .block.tabs-left .nav-tabs .commented {
 434   background: @grayLighter;
 435   margin: 10px 0 10px 50px;
 436 }
 437 .commented li {
 438   border-top: 1px solid @white !important;
 439 }
 440
 441 .block.tabs-left .nav-tabs li li p {
 442   margin: 0 0 10px 36px;
 443 }
 444
 445 .block.tabs-left .nav-tabs > li > a:hover, .block.tabs-left .nav-tabs > li > a {
 446   background: none !important;
 447   border: none !important;
 448 }
 449
 450 .block.tabs-left .nav-tabs .on {
 451
 452 }
 453
 454 .bordered .tabs-left .nav-tabs > li > a, .bordered .tabs-left .nav-tabs .on > a, .bordered .tabs-left .nav-tabs .on {
 455   padding: 4px;
 456   margin: 4px -10px 4px 0;
 457 }
 458
 459 .row-fluid > #charts.span12 {margin-left: 0 !important;}
 460 .drawerTrig {font-size: 6px; padding: 6px 5px 2px 4px; z-index: 1010; position: absolute;}
 461 h4 i {color: @grayLight;}
 462 .drawerTrig.pull-right {
 463   .border-radius(0 2px 2px 0);
 464   margin-right: -26px;
 465   position: relative;
 466 }
 467
 468 .drawerTrig.pull-left {
 469   .border-radius(2px);
 470   margin-right: 0;
 471   padding: 4px 4px 0 4px;
 472   position: absolute;
 473   left: 0;
 474   top: 0;
 475 }
 476
 477 .block.tabs-left .nav-tabs li .actions {
 478   display: block;
 479   top: -2px;
 480 }
 481 .block.tabs-left .nav-tabs li .actions a i {
 482   padding: 4px;
 483 }
 484
 485 .block.tabs-left .nav-tabs li.on .actions .icon-eye-open {
 486   color: @grayDark;
 487   .opacity(100);
 488   background: @grayLight;
 489   text-shadow: none;
 490   .border-radius(4px);
 491   padding-right: 100px;
 492   margin-right: -96px;
 493 }
 494
 495 .block .nav-tabs li {
 496   list-style: none;
 497   position: relative;
 498 }
 499 .block h4 {
 500   padding: 0 0 10px;
 501   font-weight: 600;
 502   border-bottom: 1px solid @grayLight;
 503   margin-bottom: 10px;
 504 }
 505
 506 .span2 .block .actions {
 507   position: absolute;
 508   top: 5px;
 509   right: 10px;
 510 }
 511 .block .actions, article .actions, .subnav .actions {
 512   position: absolute;
 513   top: -5px;
 514   right: 0;
 515 }
 516
 517 .thumbnail .table {
 518   margin-bottom: 0px;
 519 }
 520
 521 .block-footer {
 522   padding: 10px;
 523   margin-bottom: 0;
 524   text-align: center;
 525   #gradient > .vertical(@grayLighter, @white);
 526   border-top: 1px solid darken(@grayLighter, 15%);
 527   .border-radius(0 0 6px 6px);
 528   .box-shadow(inset 0 1px 2px rgba(0,0,0,.05));
 529   .clearfix();
 530   .btn {
 531     margin: 0 auto !important;
 532   }
 533   a {
 534     margin: 0 auto !important;
 535     display: block;
 536     cursor: pointer;
 537     color: @textColor;
 538     width: 100%;
 539     height: 100%;
 540   }
 541 }
 542
 543 .span12 .block-footer {
 544   .btn {
 545     margin: 0 auto;
 546     width: 100%;
 547   }
 548 }
 549
 550 .thumbnail .actions {
 551   position: absolute;
 552   top: 3px;
 553   right: 2px;
 554 }
 555
 556 table.datatable tr td .actions {
 557   position: absolute;
 558   top: 8px;
 559   right: 8px;
 560 }
 561 table.datatable tr td .actions a:hover {
 562   color: @grayDark;
 563 }
 564
 565 #stream tr .actions {
 566   position: absolute;
 567   bottom: 2px !important;
 568   left: 0 !important;
 569 }
 570
 571 #activity article {
 572 position: relative;
 573 }
 574
 575 .card2 {
 576   margin: 0 0 20px;
 577 }
 578 .card2 .row-fluid .btn { margin-top: -4px; margin-right: 8px; height: 16px; width: 16px;}
 579 .card2 .row-fluid, .card2 span .row-fluid {
 580   position: relative;
 581   padding: 8px 0 0;
 582 }
 583 #folded .card2 .row-fluid [class*="span"] {padding: 0 0 10px 0;}
 584 .card2 .extend + .row-fluid, .card2 span:last-child .row-fluid {
 585   border-bottom: none;
 586 }
 587
 588 .card2 .input-append .add-on {
 589   margin-top: -2px;
 590 }
 591
 592 .btn-toolbar {padding-left: 20px;}
 593
 594 .actions li {
 595   border-left: darken(@grayLighter, 5%) solid 1px;
 596   padding: 0 1px;
 597 }
 598 .actions li a {
 599  margin: 0;
 600 }
 601 .actions li:first-child {
 602   border: none;
 603 }
 604
 605 article .actions, tr .actions {
 606   display: none;
 607 }
 608 article:hover .actions,  tr:hover .actions {
 609   display: block;
 610 }
 611
 612 .divleft {
 613         border-left: 1px solid darken(@grayLighter, 4%);
 614         padding-left: 2%;
 615         margin-right: -2.3%;
 616 }
 617 .divleft .block {
 618         margin-right: 15px;
 619 }
 620 .bordered {
 621  border-right: @btnBorder 1px solid;
 622  margin-right: -10px;
 623 }
 624 #drawer {
 625         position: relative;
 626 }
 627 #thedrawer {
 628         background: @black;
 629         position: fixed;
 630         z-index: 1020;
 631         top: 46px;
 632         left: 52px;
 633         height: 100%;
 634         padding: 20px;
 635   #gradient > .vertical(lighten(@black, 20%), lighten(@black, 15%));
 636   @shadow: inset 0 -1px 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
 637   .box-shadow(@shadow);
 638 }
 639 #thedrawer h4
 640 {
 641 color: @white;
 642 }
 643
 644 .search-query {
 645   .border-radius(4px);
 646 }
 647
 648 .block ul.list ul {
 649   margin: 10px 0 10px 20px;
 650 }
 651 .block ul.list ul li {
 652   margin: 0 0 5px;
 653 }
 654 .block ul.list [class^="icon-"] {
 655   margin-right: 5px;
 656 }
 657
 658 .control-group .btn-toolbar {
 659   margin: 0 0 0 5px !important;
 660   display: inline;
 661 }
 662
 663 #guages .row-fluid  {
 664   padding: 10px 0 0;
 665   border-bottom: 1px solid @grayLight;
 666 }
 667 #guages, #guages h4  {
 668   border-bottom: 3px solid @grayLight;
 669   margin: 0;
 670 }
 671 #guages {
 672   margin-bottom: 10px;
 673 }
 674 .topline {position: relative;
 675   margin: 0 -12px 0 -20px;
 676 }
 677 .results {position: relative;
 678   margin: 0 -22px 0 0;
 679   padding: 0 10px;
 680 }
 681 .data2 {font-size: 12px;}
 682 .topline h2 {
 683   padding: 0 5px 0 0 !important;
 684   font-size: 20px;
 685   line-height: 28px;
 686     display: inline;
 687 }
 688 .topline .btn {
 689   position: absolute;
 690   right: 10px;
 691   top: 10px;
 692 }
 693 .topline .title {
 694   padding: 0 20px 10px;
 695 }
 696 .topline .datapoint1 {
 697   position: absolute;
 698   right: 110px;
 699   top: 0;
 700   width: 120px;
 701 }
 702 .topline .datapoint2 {
 703   position: absolute;
 704   right: -20px;
 705   top: 0;
 706   width: 120px;
 707 }
 708 .topline .log .title {
 709   padding: 10px 20px 10px;
 710 }
 711 .topline .log .datapoint1 {
 712   position: absolute;
 713   right: 130px;
 714   top: 10px;
 715   width: 120px;
 716 }
 717 .topline .log .datapoint2 {
 718   position: absolute;
 719   right: -20px;
 720   top: 10px;
 721   width: 140px;
 722 }
 723 .topline .log .divider {
 724   border-right: 1px solid  @grayLight;
 725   height: 60px;
 726   width: 1px;
 727   position: absolute;
 728   right: 151px;
 729   top: 0;
 730 }
 731 .topline .divider {
 732   border-right: 1px solid  @grayLight;
 733   height: 60px;
 734   width: 1px;
 735   position: absolute;
 736   right: 130px;
 737   top: 0;
 738 }
 739 .topline .toggle {
 740   position: absolute;
 741   right: 10px;
 742   top: 10px;
 743 }
 744 .topline .log {
 745   position: relative;
 746   overflow: hidden;
 747   height: 36px;
 748   #gradient > .vertical(lighten(@grayLight, 20%), lighten(@grayLight, 15%));
 749   border-top: 2px solid @grayLight;
 750   border-bottom: 2px solid @grayLight;
 751   color: @gray !important;
 752   margin-right: -21px;
 753 }
 754
 755 .topline .extend {
 756   background-color: darken(@gray, 10%);
 757   background-color: darken(@gray, 15%) e("\9");
 758   background-image: none;
 759   color: @grayLighter !important;
 760   text-shadow: 0 1px 1px rgba(0,0,0,.75);
 761   outline: 0;
 762   .box-shadow(~"inset 0 1px 3px rgba(0,0,0,.5)");
 763 }
 764
 765 .topline .row-fluid {
 766   margin: 0;
 767   padding: 0;
 768 }
 769 .topline hr {
 770   margin: 8px 0 -1px;
 771   padding: 0;
 772   border-top: 2px solid @grayLight;
 773 }
 774 .topline table {
 775   margin: 0;
 776 }
 777
 778 .topline .icon-arrow-down:before {
 779     color: @red;
 780 }
 781
 782 .topline .icon-arrow-up:before {
 783     color: @green;
 784 }
 785
 786 #riskPreview .progress {
 787     position: relative;
 788 }
 789
 790 #riskPreview .progress, #riskPreview .progress .bar  {
 791   height: 10px;
 792   line-height: 20px;
 793   text-align: left;
 794 }
 795 .progress .bar b {
 796   color: @gray;
 797   position: absolute;
 798   left: 50%;
 799   top: 8px;
 800   font-weight: normal;
 801 }
 802
 803 /* vcard */
 804 .vcard {
 805         display: inline-block;
 806 }
 807 .vcard span {
 808         margin-left: 70px;
 809 }
 810
 811 .block span.add-on {margin-left:0 !important;}
 812 .span2 .input-prepend input {width: inherit;}
 813
 814 .vcard span {
 815         display: block;
 816 }
 817 .block span.label {
 818         width: 20px;
 819         height: 30px;
 820         margin: -6px 10px 0 -10px;
 821 }
 822 .vcard span.tel,
 823 .vcard span.url,
 824 .vcard span.email,
 825 .vcard span.address {
 826         width: 42px;
 827         padding: 0 4px;
 828         margin: 0 20px 0 0;
 829         font-weight: 400;
 830         float: left;
 831 }
 832 .vcard span.label, .block span.label {
 833         font-weight: 400;
 834         float: left;
 835 }
 836 .vcard p {
 837   margin-bottom: 8px;
 838 }
 839
 840 date {
 841         font-size: 90%;
 842         color: lighten(@gray, 30%);
 843 }
 844
 845 .viz {
 846     min-height: 300px;
 847     float: left;
 848     width: 90%;
 849     margin-left: 5% !important;
 850 }
 851
 852 /* Search Module */
 853
 854
 855
 856 /* Space out sub-sections more
 857 -------------------------------------------------- */
 858 section {
 859   padding-top: 42px;
 860 }
 861
 862 /* Faded out hr */
 863 hr.soften {
 864   height: 1px;
 865   margin: 54px 0;
 866   background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
 867   background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
 868   background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
 869   background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
 870   border: 0;
 871 }
 872
 873 /* Subnav */
 874 .subnav, footer {
 875   width: 100%;
 876   min-height: 44px;
 877   #gradient > .vertical(@white, darken(@grayLighter, 4%));
 878   border-bottom: 1px solid darken(@grayLighter, 8%);
 879   position: relative;
 880   @shadow: 0 1px 0 rgb(255,255,255);
 881   .box-shadow(@shadow);
 882 }
 883 .subnav h1 {
 884   text-shadow: 0 -1px 1px rbga(255,255,255,.1);
 885   font-size: 20px !important;
 886   font-weight: 500;
 887   margin-top: -5px;
 888 }
 889 .subnav {
 890   z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
 891   border: solid @grayLight 1px; /* drop the border on the fixed edges */
 892   .border-radius(4px);
 893   @shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 894   .box-shadow(@shadow);
 895 }
 896 .subnav .nav {margin: 0;}
 897 .subnav .btn-toolbar.pull-right {margin: 9px 20px 0 0;}
 898 .subnav .btn-toolbar.pull-left {margin: 9px 0 0 0;}
 899 .subnav .nav > li {margin: 0; padding: 0;}
 900 .subnav .nav > li a {
 901   color: @gray;
 902   text-shadow: 0 1px 1px rgba(255,255,255,.9);
 903   padding: 8px;
 904   margin: 6px 0 6px 6px;
 905 }
 906 .subnav .nav > li.active a {
 907 background-color: darken(@gray, 10%);
 908 background-color: darken(@gray, 15%) e("\9");
 909 background-image: none;
 910 color: @grayLighter !important;
 911 text-shadow: 0 1px 1px rgba(0,0,0,.75);
 912 outline: 0;
 913 .box-shadow(~"inset 0 1px 3px rgba(0,0,0,.5)");
 914 }
 915
 916 /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
 917 @media (min-width: 980px) {
 918   .subnav-fixed {
 919     position: fixed;
 920     top: 47px;
 921     left: 0;
 922     right: 0;
 923     z-index: @zindexTooltip;
 924     border-width: 0 0 1px; /* drop the border on the fixed edges */
 925   .border-radius(0px);
 926             @shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 927             .box-shadow(@shadow);
 928     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 929   }
 930   .subnav-fixed .actions {left: 10px; top: 10px}
 931   .subnav-fixed .nav {
 932     width: 938px;
 933     margin: 0 auto;
 934     padding: 0 1px;
 935   }
 936 }
 937
 938 .navbar .container-fluid {margin-top: 0;}
 939 .container-fluid {margin-top: 20px;}
 940
 941 /* Quick links
 942 -------------------------------------------------- */
 943 .quick-links {
 944   min-height: 30px;
 945   padding: 5px 20px;
 946   margin: 36px 0;
 947   list-style: none;
 948   text-align: center;
 949   overflow: hide;
 950 }
 951 .quick-links li {
 952   display: inline;
 953   margin: 0 5px;
 954   color: #999;
 955 }
 956 .quick-links .github-btn,
 957 .quick-links .tweet-btn,
 958 .quick-links .follow-btn {
 959   position: relative;
 960   top: 5px;
 961 }
 962
 963
 964 /* Footer
 965 -------------------------------------------------- */
 966 footer {
 967   .border-radius(0);
 968   border: none;
 969   border-top: 1px solid darken(@grayLighter, 8%);
 970         padding: 0;
 971         height: inherit;
 972         position: fixed;
 973         z-index: @zindexFixedNavbar;
 974 }
 975 footer p {
 976   margin-bottom: 0;
 977   color: #555;
 978 }
 979 footer .btn-toolbar.pull-right {margin: 8px 8px 0 0; height: 20px;}
 980 footer .btn-toolbar.pull-left {margin: 8px 0 0 8px; height: 20px;}
 981
 982 /* Editable
 983 --------------*/
 984 .card2 div [class^="span"]  {position: relative;}
 985 .card2 .icon-pencil {position: absolute; left: -4px; top: 4px; padding: 0 2px !important;.opacity(60);}
 986
 987 .card2 form, .card2 input, .card2 select, .card2 textarea {
 988   position: relative;
 989   margin: -2px 0 0 -2px !important;
 990 }
 991 table input {
 992   position: relative;
 993   margin: -5px 0 0 0px !important;
 994 }
 995 .eSelect:hover {}
 996 .editable {margin: 0;}
 997
 998 /* Actions
 999 --------------*/
1000 tr .dropdown.hide {
1001   display: none;
1002 }
1003 tr:hover .dropdown.hide {
1004   display: block;
1005   white-space: nowrap;
1006   position: absolute;
1007   right:3px;
1008   top: 3px;
1009 }
1010
1011 /* Misc
1012 -------------------------------------------------- */
1013 .modal-body .tab-content {
1014   overflow: auto;
1015   height: 310px;
1016 }
1017 .modal-body textarea {text-align: left}
1018
1019 .drag:hover {cursor: move;}
1020
1021 img.pull-right {margin: 0 0 8px 8px;}
1022 img.pull-left {margin: 0 8px 8px 0;}
1023
1024 .ui-sortable-helper {
1025   .opacity(30);
1026 }
1027 .ui-sortable .ui-sortable-placeholder:first-child {margin:0;}
1028 .ui-sortable .ui-sortable-placeholder {
1029 visibility: visible !important;
1030 height: 320px !important;
1031 background: @grayLighter;
1032 @shadow: inset 0 3px 5px rgba(0,0,0,.1), inset 2px 2px 0 rgba(0,0,0,.05), inset -2px -2px 0 rgba(0,0,0,.05);
1033 .box-shadow(@shadow);
1034 }
1035 .ui-sortable-placeholder * { visibility: hide; }
1036
1037 .titlebar {
1038   .buttonBackground(@white, @grayLight);
1039   .border-radius(3px 3px 0 0);
1040 }
1041  .dataTables_filter {display: none;}
1042   .dataTables_filter input {width: 100%;}
1043 .form-search, .form-addit, .dataTables_filter {
1044 position: relative;
1045 margin: 0;
1046 text-align: center;
1047 padding: 5px;
1048 #gradient > .vertical(darken(@grayLighter, 4%), @grayLighter);
1049 @shadow: inset 0 1px 0 rgba(0,0,0,.2), inset 0 -1px 0 rgba(0,0,0,.1);
1050 .box-shadow(@shadow);
1051 z-index: 1000;
1052 }
1053 .form-search {
1054   margin: -11px 0 20px;
1055   z-index: 0;
1056 }
1057
1058 .block .tab-content {
1059   margin-top: -18px;
1060   padding: 10px;
1061   background: @white;
1062   border: 1px solid @grayLight;
1063   border-top: none;
1064   @shadow: 0 1px 3px rgba(0,0,0,.1);
1065   .box-shadow(@shadow);
1066 }
1067
1068 .thumbnail {
1069   position: relative;
1070   margin-bottom: 20px !important;
1071   background: #fff;
1072 }
1073 .thumbnail h2,
1074 .thumbnail p {
1075   padding: 0 5px;
1076   margin: 0;
1077 }
1078
1079 .thumbnail h4, .thumbnail h1 {
1080   font-size: 14px !important;
1081   line-height: @baseLineHeight;
1082   #gradient > .vertical(@white, @grayLighter);
1083   .border-radius(4px 4px 0 0);
1084   @shadow: inset 0 -1px 0 rgba(0,0,0,.25);
1085   .box-shadow(@shadow);
1086   font-weight: 600;
1087   border-bottom: 2px solid @grayLight;
1088   padding: 7px 80px 7px 10px;
1089 }
1090 .thumbnail h4 a, .thumbnail h1 a {
1091   color: @textColor;
1092 }
1093
1094 .thumbnail .actions a:hover {
1095   color: @white;
1096 }
1097
1098 .thumbnail h1 small{
1099   font-size: 12px;
1100 }
1101
1102 .thumbnail .btn.loading {
1103   .center-block();
1104   .clearfix();
1105   width: 200px;
1106   float: none;
1107   margin-bottom: 20px;
1108 }
1109
1110 .thumbnail .scroll {
1111   overflow: auto;
1112   min-height: 280px;
1113 }
1114
1115 .browser-support {
1116   max-width: 100%;
1117 }
1118
1119 /* Make tables spaced out a bit more */
1120 h2 + table,
1121 h3 + table,
1122 h4 + table,
1123 h2 + .row {
1124   margin-top: 5px;
1125 }
1126
1127 /* Example sites showcase */
1128 .example-sites img {
1129   max-width: 100%;
1130   margin: 0 auto;
1131 }
1132 .marketing-byline {
1133   margin: -18px 0 27px;
1134   font-size: 18px;
1135   font-weight: 300;
1136   line-height: 24px;
1137   color: #999;
1138   text-align: center;
1139 }
1140
1141 .scrollspy-example {
1142   height: 200px;
1143   overflow: auto;
1144   position: relative;
1145 }
1146
1147 /* Remove bottom margin on example forms in wells */
1148 form.well {
1149   padding: 14px;
1150 }
1151
1152 /* Tighten up spacing */
1153 .well hr {
1154   margin: 18px 0;
1155 }
1156
1157 /* Fake the :focus state to demo it */
1158 .focused {
1159   border-color: rgba(82,168,236,.8);
1160   -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
1161      -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
1162           box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
1163   outline: 0;
1164 }
1165
1166 /* For input sizes, make them display block */
1167 .docs-input-sizes select,
1168 .docs-input-sizes input[type=text] {
1169   display: block;
1170   margin-bottom: 9px;
1171 }
1172
1173 /* Icons
1174 ------------------------- */
1175 [class^="icon-"] {
1176   font-size: 15px;
1177 }
1178 .actions [class^="icon-"] {
1179   .opacity(50);
1180 }
1181 .actions a [class^="icon-"] {color: @black;}
1182 .actions a.btn.active [class^="icon-"] {color: @white;}
1183
1184 a [class^="icon-"] {
1185   .opacity(80);
1186 }
1187 a:hover [class^="icon-"]{
1188   .opacity(90);
1189 }
1190
1191 a.active [class^="icon-"]{
1192   .opacity(100);
1193 }
1194
1195 table [class^="icon-star"] {
1196   margin: 0 16px
1197 }
1198
1199 table .icon-star, .subnav .icon-star {
1200   color: @grayLight;
1201 }
1202 table .active .icon-star, .subnav .active .icon-star  {
1203   color: @orange;
1204 }
1205 /*
1206 .active .icon-ban-circle, .active .icon-exclamation-sign {
1207 color: @red;
1208 } */
1209
1210 .the-icons {
1211   margin-left: 0;
1212   list-style: none;
1213 }
1214 .the-icons i:hover {
1215   background-color: rgba(255,0,0,.25);
1216 }
1217
1218 .control-group {
1219     clear: both;
1220 }
1221
1222 .navbar a [class^="icon-"] {
1223   color: @white !important;
1224     font-size: 14px;
1225 }
1226 .navbar .advanced {
1227   position: absolute;
1228   top: -9px;
1229   right: -1px;
1230 }
1231 .navbar .advanced .btn {
1232   line-height: 19px;
1233   height: 18px;
1234 }
1235 .navbar .advanced .dropdown-menu {
1236   right: 35px;
1237 }
1238 .navbar .advanced.dropdown-toggle {
1239   right: 40px;
1240   top: 11px;
1241 }
1242
1243 .navbar .nav > li > a.btn {
1244   padding: 4px 8px;
1245   margin-top: 8px;
1246 }
1247
1248 .btn-small .caret  {
1249   margin-top: 6px;
1250 }
1251
1252 .btn-fixed {
1253   width: 178px;
1254   margin-right: 10px;
1255 }
1256 .wide {
1257   width: 98%;
1258   text-align: center;
1259 }
1260 #dynamic {margin-right: -20px;}
1261 .thumbnav {
1262 #gradient > .vertical(lighten(@black, 20%), lighten(@black, 15%));
1263 @shadow: inset -2px 0 2px rgba(0,0,0,1),  0 -1px 0 rgba(0,0,0,1);
1264 .box-shadow(@shadow);
1265 height: 100% !important;
1266 position: fixed;
1267 z-index: 10;
1268 top: 49px;
1269 left: 0;
1270 width: 72px !important;
1271 }
1272
1273 .thumbnav ul {
1274   list-style: none !important;
1275   padding: 0;
1276   margin: 0;
1277
1278 }
1279 .thumbnav ul li {
1280   display: block;
1281   margin: 0;
1282 }
1283 .thumbnav ul li i {
1284   font-size: 26px;
1285   padding-top: 16px
1286 }
1287 .thumbnav ul li a {
1288   font-size: 11px;
1289   color: @white;
1290   width: 70px;
1291   height: 72px;
1292   display: block;
1293   text-align: center;
1294   vertical-align: middle;
1295   #gradient > .vertical(lighten(@black, 20%), lighten(@black, 15%));
1296   @shadow: inset 0 -1px 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
1297   .box-shadow(@shadow);
1298 }
1299 .thumbnav ul li a:hover {
1300   font-size: 11px;
1301   color: @white;
1302   width: 72px;
1303   height: 72px;
1304   display: block;
1305   text-align: center;
1306   vertical-align: middle;
1307   text-decoration: none;
1308   @shadow: inset 0 0 20px rgba(0,0,0,1);
1309   .box-shadow(@shadow);
1310 }
1311 .thumbnav ul li a.active{
1312   #gradient > .vertical(lighten(@black, 10%), lighten(@black, 15%));
1313   @shadow: inset 0 -1px 20px rgba(0,0,0,1), inset 0 -12px 0 @red, inset 0 1px 0 rgba(255,255,255,.1);
1314   .box-shadow(@shadow);
1315 }
1316
1317 .topline {
1318   margin-top: 20px;
1319 }
1320 .content {
1321   padding-left: 72px;
1322   position: relative;
1323 }
1324 .content .btn-toolbar {margin: 0 0 8px !important;}
1325 .content .vcard2 {
1326   z-index: 0;
1327   position: relative;
1328 }
1329 #moduleActivity .avatar {
1330   margin: 0;
1331   padding: 0;
1332 }
1333
1334 .omnibar input.sayit  {  position: relative; z-index: 1; border: dashed 1px @grayLight;  min-height: 42px !important;}
1335 .omnibar.active input.sayit {border: solid 1px @grayLight;  min-height: 42px !important;}
1336 .omnibar .inputactions {margin: -14px 0 0 52px;}
1337 .omnibar .inputactions {
1338   background: @grayLighter;
1339   padding: 10px 4px 4px 4px;
1340   z-index: 0;
1341   position: relative;
1342   border: solid 1px @grayLight;
1343   .border-radius(3px);
1344 }
1345 .omnibar .inputactions a i {
1346   color: @gray;
1347   padding: 4px 8px 0;
1348   font-size: 18px;
1349 }
1350
1351 /* Progress
1352 ------------------------- */
1353 .progress {margin: 5px 0 0;}
1354 .progress, .progress .bar {
1355         height: 8px;
1356 }
1357
1358 /* Responsive Docs
1359 -------------------------------------------------- */
1360 @media (max-width: 480px) {
1361
1362 .span2 .block > *, footer, .nav-collapse .nav li, .thumbnav a b {
1363   display: none !important;
1364 }
1365 .nav-collapse .nav li:first-child {
1366   display: block !important;}
1367   .nav-collapse .nav li:first-child a{
1368   margin-left: 0 !important;
1369 }
1370 .thumbnav {width: 42px !important;}
1371 .thumbnav a {width: 42px !important; height: 42px !important;}
1372 .thumbnav a i {font-size: 16px !important; padding-top: 12px !important; }
1373 .cube {width: 18px !important; height: 19px !important;}
1374
1375
1376 table th:gt(3), table td:gt(3)  {
1377   display: none !important;
1378 }
1379
1380 .span2 .block > h4 {
1381   display: block !important;
1382 }
1383
1384 #dashboard #folded .tab-pane.active {
1385   position: relative !important;
1386 }
1387
1388   /* Change up some type stuff */
1389   h2 {
1390     margin-top: 27px;
1391   }
1392   h2 small {
1393     display: block;
1394     line-height: 18px;
1395   }
1396   h3 {
1397     margin-top: 18px;
1398   }
1399
1400   /* Don't space out quick links so much */
1401   .quick-links {
1402     margin: 40px 0 0;
1403   }
1404   /* hide the bullets on mobile since our horizontal space is limited */
1405   .quick-links .divider {
1406     display: none;
1407   }
1408
1409   table code {
1410     white-space: normal;
1411     word-wrap: break-word;
1412     word-break: break-all;
1413   }
1414
1415   /* Modal example */
1416   .modal-example .modal {
1417     position: relative;
1418     top: auto;
1419     right: auto;
1420     bottom: auto;
1421     left: auto;
1422   }
1423
1424
1425
1426 }
1427