docs/template/tizen/styles/docfx.css

   1 /* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
   2 html,
   3 body {
   4   font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
   5   height: 100%;
   6 }
   7 button,
   8 a {
   9   color: #337ab7;
  10   cursor: pointer;
  11 }
  12 button:hover,
  13 button:focus,
  14 a:hover,
  15 a:focus {
  16   color: #23527c;
  17   text-decoration: none;
  18 }
  19 a.disable,
  20 a.disable:hover {
  21   text-decoration: none;
  22   cursor: default;
  23   color: #000000;
  24 }
  25
  26 h1, h2, h3, h4, h5, h6, .text-break {
  27     word-wrap: break-word;
  28     word-break: break-word;
  29 }
  30
  31 h1 mark,
  32 h2 mark,
  33 h3 mark,
  34 h4 mark,
  35 h5 mark,
  36 h6 mark {
  37   padding: 0;
  38 }
  39
  40 .inheritance .level0:before,
  41 .inheritance .level1:before,
  42 .inheritance .level2:before,
  43 .inheritance .level3:before,
  44 .inheritance .level4:before,
  45 .inheritance .level5:before {
  46     content: '↳';
  47     margin-right: 5px;
  48 }
  49
  50 .inheritance .level0 {
  51     margin-left: 0em;
  52 }
  53
  54 .inheritance .level1 {
  55     margin-left: 1em;
  56 }
  57
  58 .inheritance .level2 {
  59     margin-left: 2em;
  60 }
  61
  62 .inheritance .level3 {
  63     margin-left: 3em;
  64 }
  65
  66 .inheritance .level4 {
  67     margin-left: 4em;
  68 }
  69
  70 .inheritance .level5 {
  71     margin-left: 5em;
  72 }
  73
  74 span.parametername,
  75 span.paramref,
  76 span.typeparamref {
  77     font-style: italic;
  78 }
  79 span.languagekeyword{
  80     font-weight: bold;
  81 }
  82
  83 svg:hover path {
  84     fill: #ffffff;
  85 }
  86
  87 .hljs {
  88   display: inline;
  89   background-color: inherit;
  90   padding: 0;
  91 }
  92 /* additional spacing fixes */
  93 .btn + .btn {
  94   margin-left: 10px;
  95 }
  96 .btn.pull-right {
  97   margin-left: 10px;
  98   margin-top: 5px;
  99 }
 100 .table {
 101   margin-bottom: 10px;
 102 }
 103 table p {
 104   margin-bottom: 0;
 105 }
 106 table a {
 107   display: inline-block;
 108 }
 109
 110 /* Make hidden attribute compatible with old browser.*/
 111 [hidden] {
 112   display: none !important;
 113 }
 114
 115 h1,
 116 .h1,
 117 h2,
 118 .h2,
 119 h3,
 120 .h3 {
 121   margin-top: 15px;
 122   margin-bottom: 10px;
 123   font-weight: 400;
 124 }
 125 h4,
 126 .h4,
 127 h5,
 128 .h5,
 129 h6,
 130 .h6 {
 131   margin-top: 10px;
 132   margin-bottom: 5px;
 133 }
 134 .navbar {
 135   margin-bottom: 0;
 136 }
 137 #wrapper {
 138   min-height: 100%;
 139   position: relative;
 140 }
 141 /* blends header footer and content together with gradient effect */
 142 .grad-top {
 143   /* For Safari 5.1 to 6.0 */
 144   /* For Opera 11.1 to 12.0 */
 145   /* For Firefox 3.6 to 15 */
 146   background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
 147   /* Standard syntax */
 148   height: 5px;
 149 }
 150 .grad-bottom {
 151   /* For Safari 5.1 to 6.0 */
 152   /* For Opera 11.1 to 12.0 */
 153   /* For Firefox 3.6 to 15 */
 154   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
 155   /* Standard syntax */
 156   height: 5px;
 157 }
 158 .divider {
 159   margin: 0 5px;
 160   color: #cccccc;
 161 }
 162 hr {
 163   border-color: #cccccc;
 164 }
 165 header {
 166   position: fixed;
 167   top: 0;
 168   left: 0;
 169   right: 0;
 170   z-index: 1000;
 171 }
 172 header .navbar {
 173   border-width: 0 0 1px;
 174   border-radius: 0;
 175 }
 176 .navbar-brand {
 177   font-size: inherit;
 178   padding: 0;
 179 }
 180 .navbar-collapse {
 181   margin: 0 -15px;
 182 }
 183 .subnav {
 184   min-height: 40px;
 185 }
 186
 187 .inheritance h5, .inheritedMembers h5{
 188   padding-bottom: 5px;
 189   border-bottom: 1px solid #ccc;
 190 }
 191
 192 article h1, article h2, article h3, article h4{
 193   margin-top: 25px;
 194 }
 195
 196 article h4{
 197   border-bottom: 1px solid #ccc;
 198 }
 199
 200 article span.small.pull-right{
 201   margin-top: 20px;
 202 }
 203
 204 article section {
 205   margin-left: 1em;
 206 }
 207
 208 /*.expand-all {
 209   padding: 10px 0;
 210 }*/
 211 .breadcrumb {
 212   margin: 0;
 213   padding: 10px 0;
 214   background-color: inherit;
 215   white-space: nowrap;
 216 }
 217 .breadcrumb > li + li:before {
 218   content: "\00a0/";
 219 }
 220 #autocollapse.collapsed .navbar-header {
 221   float: none;
 222 }
 223 #autocollapse.collapsed .navbar-toggle {
 224   display: block;
 225 }
 226 #autocollapse.collapsed .navbar-collapse {
 227   border-top: 1px solid transparent;
 228   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 229 }
 230 #autocollapse.collapsed .navbar-collapse.collapse {
 231   display: none !important;
 232 }
 233 #autocollapse.collapsed .navbar-nav {
 234   float: none !important;
 235   margin: 7.5px -15px;
 236 }
 237 #autocollapse.collapsed .navbar-nav > li {
 238   float: none;
 239 }
 240 #autocollapse.collapsed .navbar-nav > li > a {
 241   padding-top: 10px;
 242   padding-bottom: 10px;
 243 }
 244 #autocollapse.collapsed .collapse.in,
 245 #autocollapse.collapsed .collapsing {
 246   display: block !important;
 247 }
 248 #autocollapse.collapsed .collapse.in .navbar-right,
 249 #autocollapse.collapsed .collapsing .navbar-right {
 250   float: none !important;
 251 }
 252 #autocollapse .form-group {
 253   width: 100%;
 254 }
 255 #autocollapse .form-control {
 256   width: 100%;
 257 }
 258 #autocollapse .navbar-header {
 259   margin-left: 0;
 260   margin-right: 0;
 261 }
 262 #autocollapse .navbar-brand {
 263   margin-left: 0;
 264 }
 265 .collapse.in,
 266 .collapsing {
 267   text-align: center;
 268 }
 269 .collapsing .navbar-form {
 270   margin: 0 auto;
 271   max-width: 400px;
 272   padding: 10px 15px;
 273   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
 274 }
 275 .collapsed .collapse.in .navbar-form {
 276   margin: 0 auto;
 277   max-width: 400px;
 278   padding: 10px 15px;
 279   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
 280 }
 281 .navbar .navbar-nav {
 282   display: inline-block;
 283 }
 284 .docs-search {
 285   background: white;
 286   vertical-align: middle;
 287 }
 288 .docs-search > .search-query {
 289   font-size: 14px;
 290   border: 0;
 291   width: 120%;
 292   color: #555;
 293 }
 294 .docs-search > .search-query:focus {
 295   outline: 0;
 296 }
 297 .search-results-frame {
 298   clear: both;
 299   display: table;
 300   width: 100%;
 301 }
 302 .search-results.ng-hide {
 303   display: none;
 304 }
 305 .search-results-container {
 306   padding-bottom: 1em;
 307   border-top: 1px solid #111;
 308   background: rgba(25, 25, 25, 0.5);
 309 }
 310 .search-results-container .search-results-group {
 311   padding-top: 50px !important;
 312   padding: 10px;
 313 }
 314 .search-results-group-heading {
 315   font-family: "Open Sans";
 316   padding-left: 10px;
 317   color: white;
 318 }
 319 .search-close {
 320   position: absolute;
 321   left: 50%;
 322   margin-left: -100px;
 323   color: white;
 324   text-align: center;
 325   padding: 5px;
 326   background: #333;
 327   border-top-right-radius: 5px;
 328   border-top-left-radius: 5px;
 329   width: 200px;
 330   box-shadow: 0 0 10px #111;
 331 }
 332 #search {
 333   display: none;
 334 }
 335
 336 /* Search results display*/
 337 #search-results {
 338   max-width: 960px !important;
 339   margin-top: 120px;
 340   margin-bottom: 115px;
 341   margin-left: auto;
 342   margin-right: auto;
 343   line-height: 1.8;
 344   display: none;
 345 }
 346
 347 #search-results>.search-list {
 348   text-align: center;
 349   font-size: 2.5rem;
 350   margin-bottom: 50px;
 351 }
 352
 353 #search-results p {
 354   text-align: center;
 355 }
 356
 357 #search-results p .index-loading {
 358   animation: index-loading 1.5s infinite linear;
 359   -webkit-animation: index-loading 1.5s infinite linear;
 360   -o-animation: index-loading 1.5s infinite linear;
 361   font-size: 2.5rem;
 362 }
 363
 364 @keyframes index-loading {
 365     from { transform: scale(1) rotate(0deg);}
 366     to { transform: scale(1) rotate(360deg);}
 367 }
 368
 369 @-webkit-keyframes index-loading {
 370     from { -webkit-transform: rotate(0deg);}
 371     to { -webkit-transform: rotate(360deg);}
 372 }
 373
 374 @-o-keyframes index-loading {
 375     from { -o-transform: rotate(0deg);}
 376     to { -o-transform: rotate(360deg);}
 377 }
 378
 379 #search-results .sr-items {
 380   font-size: 24px;
 381 }
 382
 383 .sr-item {
 384   margin-bottom: 25px;
 385 }
 386
 387 .sr-item>.item-href {
 388   font-size: 14px;
 389   color: #093;
 390 }
 391
 392 .sr-item>.item-brief {
 393   font-size: 13px;
 394 }
 395
 396 .pagination>li>a {
 397   color: #47A7A0
 398 }
 399
 400 .pagination>.active>a {
 401   background-color: #47A7A0;
 402   border-color: #47A7A0;
 403 }
 404
 405 .fixed_header {
 406   position: fixed;
 407   width: 100%;
 408   padding-bottom: 10px;
 409   padding-top: 10px;
 410   margin: 0px;
 411   top: 0;
 412   z-index: 9999;
 413   left: 0;
 414 }
 415
 416 .fixed_header+.toc{
 417   margin-top: 50px;
 418   margin-left: 0;
 419 }
 420
 421 .sidenav, .fixed_header, .toc  {
 422   background-color: #f1f1f1;
 423 }
 424
 425 .sidetoc {
 426   position: fixed;
 427   width: 320px;
 428   top: 150px;
 429   bottom: 0;
 430   overflow-x: hidden;
 431   overflow-y: auto;
 432   background-color: #f1f1f1;
 433   border-left: 1px solid #e7e7e7;
 434   border-right: 1px solid #e7e7e7;
 435   z-index: 1;
 436 }
 437
 438 .sidetoc.shiftup {
 439   bottom: 70px;
 440 }
 441
 442 body .toc{
 443   background-color: #f1f1f1;
 444   overflow-x: hidden;
 445 }
 446
 447 .sidetoggle.ng-hide {
 448   display: block !important;
 449 }
 450 .sidetoc-expand > .caret {
 451   margin-left: 0px;
 452   margin-top: -2px;
 453 }
 454 .sidetoc-expand > .caret-side {
 455   border-left: 4px solid;
 456   border-top: 4px solid transparent;
 457   border-bottom: 4px solid transparent;
 458   margin-left: 4px;
 459   margin-top: -4px;
 460 }
 461 .sidetoc-heading {
 462   font-weight: 500;
 463 }
 464
 465 .toc {
 466   margin: 0px 0 0 10px;
 467   padding: 0 10px;
 468 }
 469 .expand-stub {
 470   position: absolute;
 471   left: -10px;
 472 }
 473 .toc .nav > li > a.sidetoc-expand {
 474   position: absolute;
 475   top: 0;
 476   left: 0;
 477 }
 478 .toc .nav > li > a {
 479   color: #666666;
 480   margin-left: 5px;
 481   display: block;
 482   padding: 0;
 483 }
 484 .toc .nav > li > a:hover,
 485 .toc .nav > li > a:focus {
 486   color: #000000;
 487   background: none;
 488   text-decoration: inherit;
 489 }
 490 .toc .nav > li.active > a {
 491   color: #337ab7;
 492 }
 493 .toc .nav > li.active > a:hover,
 494 .toc .nav > li.active > a:focus {
 495   color: #23527c;
 496 }
 497
 498 .toc .nav > li> .expand-stub {
 499   cursor: pointer;
 500 }
 501
 502 .toc .nav > li.active > .expand-stub::before,
 503 .toc .nav > li.in > .expand-stub::before,
 504 .toc .nav > li.in.active > .expand-stub::before,
 505 .toc .nav > li.filtered > .expand-stub::before {
 506     content: "-";
 507 }
 508
 509 .toc .nav > li > .expand-stub::before,
 510 .toc .nav > li.active > .expand-stub::before {
 511     content: "+";
 512 }
 513
 514 .toc .nav > li.filtered > ul,
 515 .toc .nav > li.in > ul {
 516   display: block;
 517 }
 518
 519 .toc .nav > li > ul {
 520   display: none;
 521 }
 522
 523 .toc ul{
 524   font-size: 12px;
 525   margin: 0 0 0 3px;
 526 }
 527
 528 .toc .level1 > li {
 529   font-weight: bold;
 530   margin-top: 10px;
 531   position: relative;
 532   font-size: 14px;
 533 }
 534 .toc .level2 {
 535   font-weight: normal;
 536   margin: 5px 0 0 15px;
 537   font-size: 14px;
 538 }
 539 .toc-toggle {
 540   display: none;
 541   margin: 0 15px 0px 15px;
 542 }
 543 .sidefilter {
 544   position: fixed;
 545   top: 90px;
 546   width: 320px;
 547   background-color: #f1f1f1;
 548   padding: 15px;
 549   border-left: 1px solid #e7e7e7;
 550   border-right: 1px solid #e7e7e7;
 551   z-index: 1;
 552 }
 553 .toc-filter {
 554   border-radius: 5px;
 555   background: #fff;
 556   color: #666666;
 557   padding: 5px;
 558   position: relative;
 559   margin: 0 5px 0 5px;
 560 }
 561 .toc-filter > input {
 562   border: 0;
 563   color: #666666;
 564   padding-left: 20px;
 565   width: 100%;
 566 }
 567 .toc-filter > input:focus {
 568   outline: 0;
 569 }
 570 .toc-filter > .filter-icon {
 571   position: absolute;
 572   top: 10px;
 573   left: 5px;
 574 }
 575 .article {
 576   margin-top: 120px;
 577   margin-bottom: 115px;
 578 }
 579
 580 #_content>a{
 581   margin-top: 105px;
 582 }
 583
 584 .article.grid-right {
 585   margin-left: 340px;
 586 }
 587
 588 .inheritance hr {
 589   margin-top: 5px;
 590   margin-bottom: 5px;
 591 }
 592 .article img {
 593   max-width: 100%;
 594 }
 595 .sideaffix {
 596   margin-top: 50px;
 597   font-size: 12px;
 598   max-height: 100%;
 599   overflow: hidden;
 600   top: 100px;
 601   bottom: 10px;
 602   position: fixed;
 603 }
 604 .sideaffix.shiftup {
 605   bottom: 70px;
 606 }
 607 .affix {
 608   position: relative;
 609   height: 100%;
 610 }
 611 .sideaffix > div.contribution {
 612   margin-bottom: 20px;
 613 }
 614 .sideaffix > div.contribution > ul > li > a.contribution-link {
 615   padding: 6px 10px;
 616   font-weight: bold;
 617   font-size: 14px;
 618 }
 619 .sideaffix > div.contribution > ul > li > a.contribution-link:hover {
 620   background-color: #ffffff;
 621 }
 622 .sideaffix ul.nav > li > a:focus {
 623   background: none;
 624 }
 625 .affix h5 {
 626   font-weight: bold;
 627   text-transform: uppercase;
 628   padding-left: 10px;
 629   font-size: 12px;
 630 }
 631 .affix > ul.level1 {
 632   overflow: hidden;
 633   padding-bottom: 10px;
 634   height: calc(100% - 100px);
 635   margin-right: -20px;
 636 }
 637 .affix ul > li > a:before {
 638   color: #cccccc;
 639   position: absolute;
 640 }
 641 .affix ul > li > a:hover {
 642   background: none;
 643   color: #666666;
 644 }
 645 .affix ul > li.active > a,
 646 .affix ul > li.active > a:before {
 647   color: #337ab7;
 648 }
 649 .affix ul > li > a {
 650   padding: 5px 12px;
 651   color: #666666;
 652 }
 653 .affix > ul > li.active:last-child {
 654   margin-bottom: 50px;
 655 }
 656 .affix > ul > li > a:before {
 657   content: "|";
 658   font-size: 16px;
 659   top: 1px;
 660   left: 0;
 661 }
 662 .affix > ul > li.active > a,
 663 .affix > ul > li.active > a:before {
 664   color: #337ab7;
 665   font-weight: bold;
 666 }
 667 .affix ul ul > li > a {
 668   padding: 2px 15px;
 669 }
 670 .affix ul ul > li > a:before {
 671   content: ">";
 672   font-size: 14px;
 673   top: -1px;
 674   left: 5px;
 675 }
 676 .affix ul > li > a:before,
 677 .affix ul ul {
 678   display: none;
 679 }
 680 .affix ul > li.active > ul,
 681 .affix ul > li.active > a:before,
 682 .affix ul > li > a:hover:before {
 683   display: block;
 684   white-space: nowrap;
 685 }
 686 .codewrapper {
 687   position: relative;
 688 }
 689 .trydiv {
 690   height: 0px;
 691 }
 692 .tryspan {
 693   position: absolute;
 694   top: 0px;
 695   right: 0px;
 696   border-style: solid;
 697   border-radius: 0px 4px;
 698   box-sizing: border-box;
 699   border-width: 1px;
 700   border-color: #cccccc;
 701   text-align: center;
 702   padding: 2px 8px;
 703   background-color: white;
 704   font-size: 12px;
 705   cursor: pointer;
 706   z-index: 100;
 707   display: none;
 708   color: #767676;
 709 }
 710 .tryspan:hover {
 711   background-color: #3b8bd0;
 712   color: white;
 713   border-color: #3b8bd0;
 714 }
 715 .codewrapper:hover .tryspan {
 716   display: block;
 717 }
 718 .sample-response .response-content{
 719   max-height: 200px;
 720 }
 721 footer {
 722   position: absolute;
 723   left: 0;
 724   right: 0;
 725   bottom: 0;
 726   z-index: 1000;
 727 }
 728 .footer {
 729   border-top: 1px solid #e7e7e7;
 730   background-color: #f8f8f8;
 731   padding: 15px 0;
 732 }
 733 @media (min-width: 768px) {
 734   #sidetoggle.collapse {
 735     display: block;
 736   }
 737   .topnav .navbar-nav {
 738     float: none;
 739     white-space: nowrap;
 740   }
 741   .topnav .navbar-nav > li {
 742     float: none;
 743     display: inline-block;
 744   }
 745 }
 746 @media only screen and (max-width: 768px) {
 747   #mobile-indicator {
 748     display: block;
 749   }
 750   /* TOC display for responsive */
 751   .article {
 752     margin-top: 30px !important;
 753   }
 754   header {
 755     position: static;
 756   }
 757   .topnav {
 758     text-align: center;
 759   }
 760   .sidenav {
 761     padding: 15px 0;
 762     margin-left: -15px;
 763     margin-right: -15px;
 764   }
 765   .sidefilter {
 766     position: static;
 767     width: auto;
 768     float: none;
 769     border: none;
 770   }
 771   .sidetoc {
 772     position: static;
 773     width: auto;
 774     float: none;
 775     padding-bottom: 0px;
 776     border: none;
 777   }
 778   .toc .nav > li, .toc .nav > li >a {
 779     display: inline-block;
 780   }
 781   .toc li:after {
 782     margin-left: -3px;
 783     margin-right: 5px;
 784     content: ", ";
 785     color: #666666;
 786   }
 787   .toc .level1 > li {
 788     display: block;
 789   }
 790
 791   .toc .level1 > li:after {
 792     display: none;
 793   }
 794   .article.grid-right {
 795     margin-left: 0;
 796   }
 797   .grad-top,
 798   .grad-bottom {
 799     display: none;
 800   }
 801   .toc-toggle {
 802     display: block;
 803   }
 804   .sidetoggle.ng-hide {
 805     display: none !important;
 806   }
 807   /*.expand-all {
 808     display: none;
 809   }*/
 810   .sideaffix {
 811     display: none;
 812   }
 813   .mobile-hide {
 814     display: none;
 815   }
 816   .breadcrumb {
 817     white-space: inherit;
 818   }
 819
 820   /* workaround for #hashtag url is no longer needed*/
 821   h1:before,
 822   h2:before,
 823   h3:before,
 824   h4:before {
 825       content: '';
 826       display: none;
 827   }
 828 }
 829
 830 /* For toc iframe */
 831 @media (max-width: 320px) {
 832   .toc .level2 > li {
 833     display: block;
 834   }
 835
 836   .toc .level2 > li:after {
 837     display: none;
 838   }
 839 }
 840
 841 /* For code snippet line highlight */
 842 pre > code .line-highlight {
 843   background-color: #ffffcc;
 844 }
 845
 846 /* Alerts */
 847 .alert h5 {
 848     text-transform: uppercase;
 849     font-weight: bold;
 850     margin-top: 0;
 851 }
 852
 853 .alert h5:before {
 854     position:relative;
 855     top:1px;
 856     display:inline-block;
 857     font-family:'Glyphicons Halflings';
 858     line-height:1;
 859     -webkit-font-smoothing:antialiased;
 860     -moz-osx-font-smoothing:grayscale;
 861     margin-right: 5px;
 862     font-weight: normal;
 863 }
 864
 865 .alert-info h5:before {
 866     content:"\e086"
 867 }
 868
 869 .alert-warning h5:before {
 870     content:"\e127"
 871 }
 872
 873 .alert-danger h5:before {
 874     content:"\e107"
 875 }
 876
 877 /* For Embedded Video */
 878 div.embeddedvideo {
 879     padding-top: 56.25%;
 880     position: relative;
 881     width: 100%;
 882 }
 883
 884 div.embeddedvideo iframe {
 885     position: absolute;
 886     top: 0;
 887     left: 0;
 888     right: 0;
 889     bottom: 0;
 890     width: 100%;
 891     height: 100%;
 892 }
 893
 894 /* For printer */
 895 @media print{
 896   .article.grid-right {
 897     margin-top: 0px;
 898     margin-left: 0px;
 899   }
 900   .sideaffix {
 901     display: none;
 902   }
 903   .mobile-hide {
 904     display: none;
 905   }
 906   .footer {
 907     display: none;
 908   }
 909 }
 910
 911 /* For tabbed content */
 912
 913 .tabGroup {
 914   margin-top: 1rem; }
 915   .tabGroup ul[role="tablist"] {
 916     margin: 0;
 917     padding: 0;
 918     list-style: none; }
 919     .tabGroup ul[role="tablist"] > li {
 920       list-style: none;
 921       display: inline-block; }
 922   .tabGroup a[role="tab"] {
 923     color: #6e6e6e;
 924     box-sizing: border-box;
 925     display: inline-block;
 926     padding: 5px 7.5px;
 927     text-decoration: none;
 928     border-bottom: 2px solid #fff; }
 929     .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus, .tabGroup a[role="tab"][aria-selected="true"] {
 930       border-bottom: 2px solid #0050C5; }
 931     .tabGroup a[role="tab"][aria-selected="true"] {
 932       color: #222; }
 933     .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus {
 934       color: #0050C5; }
 935     .tabGroup a[role="tab"]:focus {
 936       outline: 1px solid #0050C5;
 937       outline-offset: -1px; }
 938   @media (min-width: 768px) {
 939     .tabGroup a[role="tab"] {
 940       padding: 5px 15px; } }
 941   .tabGroup section[role="tabpanel"] {
 942     border: 1px solid #e0e0e0;
 943     padding: 15px;
 944     margin: 0;
 945     overflow: hidden; }
 946     .tabGroup section[role="tabpanel"] > .codeHeader,
 947     .tabGroup section[role="tabpanel"] > pre {
 948       margin-left: -16px;
 949       margin-right: -16px; }
 950     .tabGroup section[role="tabpanel"] > :first-child {
 951       margin-top: 0; }
 952     .tabGroup section[role="tabpanel"] > pre:last-child {
 953       display: block;
 954       margin-bottom: -16px; }
 955
 956 .mainContainer[dir='rtl'] main ul[role="tablist"] {
 957   margin: 0; }