You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

962 lines
16 KiB

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