index.css 23 KB

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