portal html css js resource

docs.css 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065
  1. /* Add additional stylesheets below
  2. -------------------------------------------------- */
  3. /*
  4. Bootstrap's documentation styles
  5. Special styles for presenting Bootstrap's documentation and examples
  6. */
  7. /* Body and structure
  8. -------------------------------------------------- */
  9. body {
  10. position: relative;
  11. padding-top: 40px;
  12. }
  13. /* Code in headings */
  14. h3 code {
  15. font-size: 14px;
  16. font-weight: normal;
  17. }
  18. /* Tweak navbar brand link to be super sleek
  19. -------------------------------------------------- */
  20. body > .navbar {
  21. font-size: 13px;
  22. }
  23. /* Change the docs' brand */
  24. body > .navbar .brand {
  25. padding-right: 0;
  26. padding-left: 0;
  27. margin-left: 20px;
  28. float: right;
  29. font-weight: bold;
  30. color: #000;
  31. text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
  32. -webkit-transition: all .2s linear;
  33. -moz-transition: all .2s linear;
  34. transition: all .2s linear;
  35. }
  36. body > .navbar .brand:hover {
  37. text-decoration: none;
  38. text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
  39. }
  40. /* Sections
  41. -------------------------------------------------- */
  42. /* padding for in-page bookmarks and fixed navbar */
  43. section {
  44. padding-top: 30px;
  45. }
  46. section > .page-header,
  47. section > .lead {
  48. color: #5a5a5a;
  49. }
  50. section > ul li {
  51. margin-bottom: 5px;
  52. }
  53. /* Separators (hr) */
  54. .bs-docs-separator {
  55. margin: 40px 0 39px;
  56. }
  57. /* Faded out hr */
  58. hr.soften {
  59. height: 1px;
  60. margin: 70px 0;
  61. background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  62. background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  63. background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  64. background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  65. border: 0;
  66. }
  67. /* Jumbotrons
  68. -------------------------------------------------- */
  69. /* Base class
  70. ------------------------- */
  71. .jumbotron {
  72. position: relative;
  73. padding: 40px 0;
  74. color: #fff;
  75. text-align: center;
  76. text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  77. background: #B13938; /* Old browsers */
  78. background: -moz-linear-gradient(45deg, #B13938 0%, #C47F3E 100%); /* FF3.6+ */
  79. background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#B13938), color-stop(100%,#C47F3E)); /* Chrome,Safari4+ */
  80. background: -webkit-linear-gradient(45deg, #B13938 0%,#C47F3E 100%); /* Chrome10+,Safari5.1+ */
  81. background: -o-linear-gradient(45deg, #B13938 0%,#C47F3E 100%); /* Opera 11.10+ */
  82. background: -ms-linear-gradient(45deg, #B13938 0%,#C47F3E 100%); /* IE10+ */
  83. background: linear-gradient(45deg, #B13938 0%,#C47F3E 100%); /* W3C */
  84. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B13938', endColorstr='#C47F3E',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  85. -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  86. -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  87. box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  88. }
  89. .jumbotron h1 {
  90. font-size: 80px;
  91. font-weight: bold;
  92. letter-spacing: -1px;
  93. line-height: 1;
  94. }
  95. .jumbotron p {
  96. font-size: 24px;
  97. font-weight: 300;
  98. line-height: 1.25;
  99. margin-bottom: 30px;
  100. }
  101. /* Link styles (used on .masthead-links as well) */
  102. .jumbotron a {
  103. color: #fff;
  104. /*color: rgba(255,255,255,.5);*/
  105. -webkit-transition: all .2s ease-in-out;
  106. -moz-transition: all .2s ease-in-out;
  107. transition: all .2s ease-in-out;
  108. }
  109. .jumbotron a:hover {
  110. color: #fff;
  111. text-shadow: 0 0 10px rgba(255,255,255,.25);
  112. }
  113. /* Download button */
  114. .masthead .btn {
  115. padding: 19px 24px;
  116. font-size: 24px;
  117. font-weight: 200;
  118. color: #fff; /* redeclare to override the `.jumbotron a` */
  119. border: 0;
  120. -webkit-border-radius: 6px;
  121. -moz-border-radius: 6px;
  122. border-radius: 6px;
  123. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  124. -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  125. box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  126. -webkit-transition: none;
  127. -moz-transition: none;
  128. transition: none;
  129. }
  130. .masthead .btn:hover {
  131. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  132. -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  133. box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  134. }
  135. .masthead .btn:active {
  136. -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
  137. -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
  138. box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
  139. }
  140. /* Pattern overlay
  141. ------------------------- */
  142. .jumbotron .container {
  143. position: relative;
  144. z-index: 2;
  145. }
  146. .jumbotron:after {
  147. content: '';
  148. display: block;
  149. position: absolute;
  150. top: 0;
  151. right: 0;
  152. bottom: 0;
  153. left: 0;
  154. background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
  155. opacity: .8;
  156. }
  157. @media
  158. only screen and (-webkit-min-device-pixel-ratio: 2),
  159. only screen and ( min--moz-device-pixel-ratio: 2),
  160. only screen and ( -o-min-device-pixel-ratio: 2/1) {
  161. .jumbotron:after {
  162. background-size: 150px 150px;
  163. }
  164. }
  165. /* Masthead (docs home)
  166. ------------------------- */
  167. .masthead {
  168. padding: 70px 0 80px;
  169. margin-bottom: 0;
  170. color: #fff;
  171. }
  172. .masthead h1 {
  173. font-size: 120px;
  174. line-height: 1;
  175. letter-spacing: -2px;
  176. }
  177. .masthead p {
  178. font-size: 40px;
  179. font-weight: 200;
  180. line-height: 1.25;
  181. }
  182. /* Textual links in masthead */
  183. .masthead-links {
  184. margin: 0;
  185. list-style: none;
  186. }
  187. .masthead-links li {
  188. display: inline;
  189. padding: 0 10px;
  190. color: rgba(255,255,255,.25);
  191. }
  192. /* Social proof buttons from GitHub & Twitter */
  193. .bs-docs-social {
  194. padding: 15px 0;
  195. text-align: center;
  196. background-color: #f5f5f5;
  197. border-top: 1px solid #fff;
  198. border-bottom: 1px solid #ddd;
  199. }
  200. /* Quick links on Home */
  201. .bs-docs-social-buttons {
  202. margin-left: 0;
  203. margin-bottom: 0;
  204. padding-left: 0;
  205. list-style: none;
  206. }
  207. .bs-docs-social-buttons li {
  208. display: inline-block;
  209. padding: 5px 8px;
  210. line-height: 1;
  211. *display: inline;
  212. *zoom: 1;
  213. }
  214. /* Subhead (other pages)
  215. ------------------------- */
  216. .subhead {
  217. text-align: left;
  218. border-bottom: 1px solid #ddd;
  219. }
  220. .subhead h1 {
  221. font-size: 60px;
  222. }
  223. .subhead p {
  224. margin-bottom: 20px;
  225. }
  226. .subhead .navbar {
  227. display: none;
  228. }
  229. /* Marketing section of Overview
  230. -------------------------------------------------- */
  231. .marketing {
  232. text-align: center;
  233. color: #5a5a5a;
  234. }
  235. .marketing h1 {
  236. margin: 60px 0 10px;
  237. font-size: 60px;
  238. font-weight: 200;
  239. line-height: 1;
  240. letter-spacing: -1px;
  241. }
  242. .marketing h2 {
  243. font-weight: 200;
  244. margin-bottom: 5px;
  245. }
  246. .marketing p {
  247. font-size: 16px;
  248. line-height: 1.5;
  249. }
  250. .marketing .marketing-byline {
  251. margin-bottom: 40px;
  252. font-size: 20px;
  253. font-weight: 300;
  254. line-height: 1.25;
  255. color: #999;
  256. }
  257. .marketing-img {
  258. display: block;
  259. margin: 0 auto 30px;
  260. max-height: 145px;
  261. }
  262. /* Footer
  263. -------------------------------------------------- */
  264. .footer {
  265. text-align: center;
  266. padding: 30px 0;
  267. margin-top: 70px;
  268. border-top: 1px solid #e5e5e5;
  269. background-color: #f5f5f5;
  270. }
  271. .footer p {
  272. margin-bottom: 0;
  273. color: #777;
  274. }
  275. .footer-links {
  276. margin: 10px 0;
  277. }
  278. .footer-links li {
  279. display: inline;
  280. padding: 0 2px;
  281. }
  282. .footer-links li:first-child {
  283. padding-left: 0;
  284. }
  285. /* Special grid styles
  286. -------------------------------------------------- */
  287. .show-grid {
  288. margin-top: 10px;
  289. margin-bottom: 20px;
  290. }
  291. .show-grid [class*="span"] {
  292. background-color: #eee;
  293. text-align: center;
  294. -webkit-border-radius: 3px;
  295. -moz-border-radius: 3px;
  296. border-radius: 3px;
  297. min-height: 40px;
  298. line-height: 40px;
  299. }
  300. .show-grid:hover [class*="span"] {
  301. background: #ddd;
  302. }
  303. .show-grid .show-grid {
  304. margin-top: 0;
  305. margin-bottom: 0;
  306. }
  307. .show-grid .show-grid [class*="span"] {
  308. margin-top: 5px;
  309. }
  310. .show-grid [class*="span"] [class*="span"] {
  311. background-color: #ccc;
  312. }
  313. .show-grid [class*="span"] [class*="span"] [class*="span"] {
  314. background-color: #999;
  315. }
  316. /* Mini layout previews
  317. -------------------------------------------------- */
  318. .mini-layout {
  319. border: 1px solid #ddd;
  320. -webkit-border-radius: 6px;
  321. -moz-border-radius: 6px;
  322. border-radius: 6px;
  323. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
  324. -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
  325. box-shadow: 0 1px 2px rgba(0,0,0,.075);
  326. }
  327. .mini-layout,
  328. .mini-layout .mini-layout-body,
  329. .mini-layout.fluid .mini-layout-sidebar {
  330. height: 300px;
  331. }
  332. .mini-layout {
  333. margin-bottom: 20px;
  334. padding: 9px;
  335. }
  336. .mini-layout div {
  337. -webkit-border-radius: 3px;
  338. -moz-border-radius: 3px;
  339. border-radius: 3px;
  340. }
  341. .mini-layout .mini-layout-body {
  342. background-color: #dceaf4;
  343. margin: 0 auto;
  344. width: 70%;
  345. }
  346. .mini-layout.fluid .mini-layout-sidebar,
  347. .mini-layout.fluid .mini-layout-header,
  348. .mini-layout.fluid .mini-layout-body {
  349. float: left;
  350. }
  351. .mini-layout.fluid .mini-layout-sidebar {
  352. background-color: #bbd8e9;
  353. width: 20%;
  354. }
  355. .mini-layout.fluid .mini-layout-body {
  356. width: 77.5%;
  357. margin-left: 2.5%;
  358. }
  359. /* Download page
  360. -------------------------------------------------- */
  361. .download .page-header {
  362. margin-top: 36px;
  363. }
  364. .page-header .toggle-all {
  365. margin-top: 5px;
  366. }
  367. /* Space out h3s when following a section */
  368. .download h3 {
  369. margin-bottom: 5px;
  370. }
  371. .download-builder input + h3,
  372. .download-builder .checkbox + h3 {
  373. margin-top: 9px;
  374. }
  375. /* Fields for variables */
  376. .download-builder input[type=text] {
  377. margin-bottom: 9px;
  378. font-family: Menlo, Monaco, "Courier New", monospace;
  379. font-size: 12px;
  380. color: #d14;
  381. }
  382. .download-builder input[type=text]:focus {
  383. background-color: #fff;
  384. }
  385. /* Custom, larger checkbox labels */
  386. .download .checkbox {
  387. padding: 6px 10px 6px 25px;
  388. font-size: 13px;
  389. line-height: 18px;
  390. color: #555;
  391. background-color: #f9f9f9;
  392. -webkit-border-radius: 3px;
  393. -moz-border-radius: 3px;
  394. border-radius: 3px;
  395. cursor: pointer;
  396. }
  397. .download .checkbox:hover {
  398. color: #333;
  399. background-color: #f5f5f5;
  400. }
  401. .download .checkbox small {
  402. font-size: 12px;
  403. color: #777;
  404. }
  405. /* Variables section */
  406. #variables label {
  407. margin-bottom: 0;
  408. }
  409. /* Giant download button */
  410. .download-btn {
  411. margin: 36px 0 108px;
  412. }
  413. #download p,
  414. #download h4 {
  415. max-width: 50%;
  416. margin: 0 auto;
  417. color: #999;
  418. text-align: center;
  419. }
  420. #download h4 {
  421. margin-bottom: 0;
  422. }
  423. #download p {
  424. margin-bottom: 18px;
  425. }
  426. .download-btn .btn {
  427. display: block;
  428. width: auto;
  429. padding: 19px 24px;
  430. margin-bottom: 27px;
  431. font-size: 30px;
  432. line-height: 1;
  433. text-align: center;
  434. -webkit-border-radius: 6px;
  435. -moz-border-radius: 6px;
  436. border-radius: 6px;
  437. }
  438. /* Misc
  439. -------------------------------------------------- */
  440. /* Make tables spaced out a bit more */
  441. h2 + table,
  442. h3 + table,
  443. h4 + table,
  444. h2 + .row {
  445. margin-top: 5px;
  446. }
  447. /* Example sites showcase */
  448. .example-sites {
  449. xmargin-left: 20px;
  450. }
  451. .example-sites img {
  452. max-width: 100%;
  453. margin: 0 auto;
  454. }
  455. .scrollspy-example {
  456. height: 200px;
  457. overflow: auto;
  458. position: relative;
  459. }
  460. /* Fake the :focus state to demo it */
  461. .focused {
  462. border-color: rgba(82,168,236,.8);
  463. -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
  464. -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
  465. box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
  466. outline: 0;
  467. }
  468. /* For input sizes, make them display block */
  469. .docs-input-sizes select,
  470. .docs-input-sizes input[type=text] {
  471. display: block;
  472. margin-bottom: 9px;
  473. }
  474. /* Icons
  475. ------------------------- */
  476. .the-icons {
  477. margin-left: 0;
  478. list-style: none;
  479. }
  480. .the-icons li {
  481. float: left;
  482. width: 25%;
  483. line-height: 25px;
  484. }
  485. .the-icons i:hover {
  486. background-color: rgba(255,0,0,.25);
  487. }
  488. /* Example page
  489. ------------------------- */
  490. .bootstrap-examples p {
  491. font-size: 13px;
  492. line-height: 18px;
  493. }
  494. .bootstrap-examples .thumbnail {
  495. margin-bottom: 9px;
  496. background-color: #fff;
  497. }
  498. /* Bootstrap code examples
  499. -------------------------------------------------- */
  500. /* Base class */
  501. .bs-docs-example {
  502. position: relative;
  503. margin: 15px 0;
  504. padding: 39px 19px 14px;
  505. *padding-top: 19px;
  506. background-color: #fff;
  507. border: 1px solid #ddd;
  508. -webkit-border-radius: 4px;
  509. -moz-border-radius: 4px;
  510. border-radius: 4px;
  511. }
  512. /* Echo out a label for the example */
  513. .bs-docs-example:after {
  514. content: "Example";
  515. position: absolute;
  516. top: -1px;
  517. left: -1px;
  518. padding: 3px 7px;
  519. font-size: 12px;
  520. font-weight: bold;
  521. background-color: #f5f5f5;
  522. border: 1px solid #ddd;
  523. color: #9da0a4;
  524. -webkit-border-radius: 4px 0 4px 0;
  525. -moz-border-radius: 4px 0 4px 0;
  526. border-radius: 4px 0 4px 0;
  527. }
  528. /* Remove spacing between an example and it's code */
  529. .bs-docs-example + .prettyprint {
  530. margin-top: -20px;
  531. padding-top: 15px;
  532. }
  533. /* Tweak examples
  534. ------------------------- */
  535. .bs-docs-example > p:last-child {
  536. margin-bottom: 0;
  537. }
  538. .bs-docs-example .table,
  539. .bs-docs-example .progress,
  540. .bs-docs-example .well,
  541. .bs-docs-example .alert,
  542. .bs-docs-example .hero-unit,
  543. .bs-docs-example .pagination,
  544. .bs-docs-example .navbar,
  545. .bs-docs-example > .nav,
  546. .bs-docs-example blockquote {
  547. margin-bottom: 5px;
  548. }
  549. .bs-docs-example .pagination {
  550. margin-top: 0;
  551. }
  552. .bs-navbar-top-example,
  553. .bs-navbar-bottom-example {
  554. z-index: 1;
  555. padding: 0;
  556. height: 90px;
  557. overflow: hidden; /* cut the drop shadows off */
  558. }
  559. .bs-navbar-top-example .navbar-fixed-top,
  560. .bs-navbar-bottom-example .navbar-fixed-bottom {
  561. margin-left: 0;
  562. margin-right: 0;
  563. }
  564. .bs-navbar-top-example {
  565. -webkit-border-radius: 0 0 4px 4px;
  566. -moz-border-radius: 0 0 4px 4px;
  567. border-radius: 0 0 4px 4px;
  568. }
  569. .bs-navbar-top-example:after {
  570. top: auto;
  571. bottom: -1px;
  572. -webkit-border-radius: 0 4px 0 4px;
  573. -moz-border-radius: 0 4px 0 4px;
  574. border-radius: 0 4px 0 4px;
  575. }
  576. .bs-navbar-bottom-example {
  577. -webkit-border-radius: 4px 4px 0 0;
  578. -moz-border-radius: 4px 4px 0 0;
  579. border-radius: 4px 4px 0 0;
  580. }
  581. .bs-navbar-bottom-example .navbar {
  582. margin-bottom: 0;
  583. }
  584. form.bs-docs-example {
  585. padding-bottom: 19px;
  586. }
  587. /* Images */
  588. .bs-docs-example-images img {
  589. margin: 10px;
  590. display: inline-block;
  591. }
  592. /* Tooltips */
  593. .bs-docs-tooltip-examples {
  594. text-align: center;
  595. margin: 0 0 10px;
  596. list-style: none;
  597. }
  598. .bs-docs-tooltip-examples li {
  599. display: inline;
  600. padding: 0 10px;
  601. }
  602. /* Popovers */
  603. .bs-docs-example-popover {
  604. padding-bottom: 24px;
  605. background-color: #f9f9f9;
  606. }
  607. .bs-docs-example-popover .popover {
  608. position: relative;
  609. display: block;
  610. float: left;
  611. width: 260px;
  612. margin: 20px;
  613. }
  614. /* Dropdowns */
  615. .bs-docs-example-submenus {
  616. min-height: 180px;
  617. }
  618. .bs-docs-example-submenus > .pull-left + .pull-left {
  619. margin-left: 20px;
  620. }
  621. .bs-docs-example-submenus .dropup > .dropdown-menu,
  622. .bs-docs-example-submenus .dropdown > .dropdown-menu {
  623. display: block;
  624. position: static;
  625. margin-bottom: 5px;
  626. *width: 180px;
  627. }
  628. /* Responsive docs
  629. -------------------------------------------------- */
  630. /* Utility classes table
  631. ------------------------- */
  632. .responsive-utilities th small {
  633. display: block;
  634. font-weight: normal;
  635. color: #999;
  636. }
  637. .responsive-utilities tbody th {
  638. font-weight: normal;
  639. }
  640. .responsive-utilities td {
  641. text-align: center;
  642. }
  643. .responsive-utilities td.is-visible {
  644. color: #468847;
  645. background-color: #dff0d8 !important;
  646. }
  647. .responsive-utilities td.is-hidden {
  648. color: #ccc;
  649. background-color: #f9f9f9 !important;
  650. }
  651. /* Responsive tests
  652. ------------------------- */
  653. .responsive-utilities-test {
  654. margin-top: 5px;
  655. margin-left: 0;
  656. list-style: none;
  657. overflow: hidden; /* clear floats */
  658. }
  659. .responsive-utilities-test li {
  660. position: relative;
  661. float: left;
  662. width: 25%;
  663. height: 43px;
  664. font-size: 14px;
  665. font-weight: bold;
  666. line-height: 43px;
  667. color: #999;
  668. text-align: center;
  669. border: 1px solid #ddd;
  670. -webkit-border-radius: 4px;
  671. -moz-border-radius: 4px;
  672. border-radius: 4px;
  673. }
  674. .responsive-utilities-test li + li {
  675. margin-left: 10px;
  676. }
  677. .responsive-utilities-test span {
  678. position: absolute;
  679. top: -1px;
  680. left: -1px;
  681. right: -1px;
  682. bottom: -1px;
  683. -webkit-border-radius: 4px;
  684. -moz-border-radius: 4px;
  685. border-radius: 4px;
  686. }
  687. .responsive-utilities-test span {
  688. color: #468847;
  689. background-color: #dff0d8;
  690. border: 1px solid #d6e9c6;
  691. }
  692. /* Sidenav for Docs
  693. -------------------------------------------------- */
  694. .bs-docs-sidenav {
  695. width: 228px;
  696. margin: 30px 0 0;
  697. padding: 0;
  698. background-color: #fff;
  699. -webkit-border-radius: 6px;
  700. -moz-border-radius: 6px;
  701. border-radius: 6px;
  702. -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
  703. -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
  704. box-shadow: 0 1px 4px rgba(0,0,0,.065);
  705. }
  706. .bs-docs-sidenav > li > a {
  707. display: block;
  708. width: 190px \9;
  709. margin: 0 0 -1px;
  710. padding: 8px 14px;
  711. border: 1px solid #e5e5e5;
  712. }
  713. .bs-docs-sidenav > li:first-child > a {
  714. -webkit-border-radius: 6px 6px 0 0;
  715. -moz-border-radius: 6px 6px 0 0;
  716. border-radius: 6px 6px 0 0;
  717. }
  718. .bs-docs-sidenav > li:last-child > a {
  719. -webkit-border-radius: 0 0 6px 6px;
  720. -moz-border-radius: 0 0 6px 6px;
  721. border-radius: 0 0 6px 6px;
  722. }
  723. .bs-docs-sidenav > .active > a {
  724. position: relative;
  725. z-index: 2;
  726. padding: 9px 15px;
  727. border: 0;
  728. text-shadow: 0 1px 0 rgba(0,0,0,.15);
  729. -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  730. -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  731. box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  732. }
  733. /* Chevrons */
  734. .bs-docs-sidenav .icon-chevron-right {
  735. float: right;
  736. margin-top: 2px;
  737. margin-right: -6px;
  738. opacity: .25;
  739. }
  740. .bs-docs-sidenav > li > a:hover {
  741. background-color: #f5f5f5;
  742. }
  743. .bs-docs-sidenav a:hover .icon-chevron-right {
  744. opacity: .5;
  745. }
  746. .bs-docs-sidenav .active .icon-chevron-right,
  747. .bs-docs-sidenav .active a:hover .icon-chevron-right {
  748. background-image: url(../img/glyphicons-halflings-white.png);
  749. opacity: 1;
  750. }
  751. .bs-docs-sidenav.affix {
  752. top: 40px;
  753. }
  754. .bs-docs-sidenav.affix-bottom {
  755. position: absolute;
  756. top: auto;
  757. bottom: 270px;
  758. }
  759. /* Responsive
  760. -------------------------------------------------- */
  761. /* Desktop large
  762. ------------------------- */
  763. @media (min-width: 1200px) {
  764. .bs-docs-container {
  765. max-width: 970px;
  766. }
  767. .bs-docs-sidenav {
  768. width: 258px;
  769. }
  770. .bs-docs-sidenav > li > a {
  771. width: 230px \9; /* Override the previous IE8-9 hack */
  772. }
  773. }
  774. /* Desktop
  775. ------------------------- */
  776. @media (max-width: 980px) {
  777. /* Unfloat brand */
  778. body > .navbar-fixed-top .brand {
  779. float: left;
  780. margin-left: 0;
  781. padding-left: 10px;
  782. padding-right: 10px;
  783. }
  784. /* Inline-block quick links for more spacing */
  785. .quick-links li {
  786. display: inline-block;
  787. margin: 5px;
  788. }
  789. /* When affixed, space properly */
  790. .bs-docs-sidenav {
  791. top: 0;
  792. width: 218px;
  793. margin-top: 30px;
  794. margin-right: 0;
  795. }
  796. }
  797. /* Tablet to desktop
  798. ------------------------- */
  799. @media (min-width: 768px) and (max-width: 979px) {
  800. /* Remove any padding from the body */
  801. body {
  802. padding-top: 0;
  803. }
  804. /* Widen masthead and social buttons to fill body padding */
  805. .jumbotron {
  806. margin-top: -20px; /* Offset bottom margin on .navbar */
  807. }
  808. /* Adjust sidenav width */
  809. .bs-docs-sidenav {
  810. width: 166px;
  811. margin-top: 20px;
  812. }
  813. .bs-docs-sidenav.affix {
  814. top: 0;
  815. }
  816. }
  817. /* Tablet
  818. ------------------------- */
  819. @media (max-width: 767px) {
  820. /* Remove any padding from the body */
  821. body {
  822. padding-top: 0;
  823. }
  824. /* Widen masthead and social buttons to fill body padding */
  825. .jumbotron {
  826. padding: 40px 20px;
  827. margin-top: -20px; /* Offset bottom margin on .navbar */
  828. margin-right: -20px;
  829. margin-left: -20px;
  830. }
  831. .masthead h1 {
  832. font-size: 90px;
  833. }
  834. .masthead p,
  835. .masthead .btn {
  836. font-size: 24px;
  837. }
  838. .marketing .span4 {
  839. margin-bottom: 40px;
  840. }
  841. .bs-docs-social {
  842. margin: 0 -20px;
  843. }
  844. /* Space out the show-grid examples */
  845. .show-grid [class*="span"] {
  846. margin-bottom: 5px;
  847. }
  848. /* Sidenav */
  849. .bs-docs-sidenav {
  850. width: auto;
  851. margin-bottom: 20px;
  852. }
  853. .bs-docs-sidenav.affix {
  854. position: static;
  855. width: auto;
  856. top: 0;
  857. }
  858. /* Unfloat the back to top link in footer */
  859. .footer {
  860. margin-left: -20px;
  861. margin-right: -20px;
  862. padding-left: 20px;
  863. padding-right: 20px;
  864. }
  865. .footer p {
  866. margin-bottom: 9px;
  867. }
  868. }
  869. /* Landscape phones
  870. ------------------------- */
  871. @media (max-width: 480px) {
  872. /* Remove padding above jumbotron */
  873. body {
  874. padding-top: 0;
  875. }
  876. /* Change up some type stuff */
  877. h2 small {
  878. display: block;
  879. }
  880. /* Downsize the jumbotrons */
  881. .jumbotron h1 {
  882. font-size: 45px;
  883. }
  884. .jumbotron p,
  885. .jumbotron .btn {
  886. font-size: 18px;
  887. }
  888. .jumbotron .btn {
  889. display: block;
  890. margin: 0 auto;
  891. }
  892. /* center align subhead text like the masthead */
  893. .subhead h1,
  894. .subhead p {
  895. text-align: center;
  896. }
  897. /* Marketing on home */
  898. .marketing h1 {
  899. font-size: 30px;
  900. }
  901. .marketing-byline {
  902. font-size: 18px;
  903. }
  904. /* center example sites */
  905. .example-sites {
  906. margin-left: 0;
  907. }
  908. .example-sites > li {
  909. float: none;
  910. display: block;
  911. max-width: 280px;
  912. margin: 0 auto 18px;
  913. text-align: center;
  914. }
  915. .example-sites .thumbnail > img {
  916. max-width: 270px;
  917. }
  918. /* Do our best to make tables work in narrow viewports */
  919. table code {
  920. white-space: normal;
  921. word-wrap: break-word;
  922. word-break: break-all;
  923. }
  924. /* Examples: dropdowns */
  925. .bs-docs-example-submenus > .pull-left {
  926. float: none;
  927. clear: both;
  928. }
  929. .bs-docs-example-submenus > .pull-left,
  930. .bs-docs-example-submenus > .pull-left + .pull-left {
  931. margin-left: 0;
  932. }
  933. .bs-docs-example-submenus p {
  934. margin-bottom: 0;
  935. }
  936. .bs-docs-example-submenus .dropup > .dropdown-menu,
  937. .bs-docs-example-submenus .dropdown > .dropdown-menu {
  938. margin-bottom: 10px;
  939. float: none;
  940. max-width: 180px;
  941. }
  942. /* Examples: modal */
  943. .modal-example .modal {
  944. position: relative;
  945. top: auto;
  946. right: auto;
  947. bottom: auto;
  948. left: auto;
  949. }
  950. /* Tighten up footer */
  951. .footer {
  952. padding-top: 20px;
  953. padding-bottom: 20px;
  954. }
  955. }