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.

1182 lines
32 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://www.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. .ui.grid {
  15. display: block;
  16. text-align: left;
  17. font-size: 0em;
  18. padding: 0em;
  19. }
  20. .ui.grid:after,
  21. .ui.grid > .row:after {
  22. content: '';
  23. display: block;
  24. height: 0px;
  25. clear: both;
  26. visibility: hidden;
  27. }
  28. /*----------------------
  29. Remove Gutters
  30. -----------------------*/
  31. .ui.grid {
  32. margin-top: -1rem;
  33. margin-bottom: -1rem;
  34. margin-left: -1rem;
  35. margin-right: -1rem;
  36. }
  37. .ui.relaxed.grid {
  38. margin-left: -1.5rem;
  39. margin-right: -1.5rem;
  40. }
  41. .ui[class*="very relaxed"].grid {
  42. margin-left: -2.5rem;
  43. margin-right: -2.5rem;
  44. }
  45. /* Collapse Margins on Consecutive Grids */
  46. .ui.grid + .grid {
  47. margin-top: 1rem;
  48. }
  49. /*-------------------
  50. Columns
  51. --------------------*/
  52. /* Standard 16 column */
  53. .ui.grid > .column:not(.row),
  54. .ui.grid > .row > .column {
  55. position: relative;
  56. display: inline-block;
  57. text-align: left;
  58. font-size: 1rem;
  59. width: 6.25%;
  60. padding-left: 1rem;
  61. padding-right: 1rem;
  62. vertical-align: top;
  63. }
  64. .ui.grid > * {
  65. padding-left: 1rem;
  66. padding-right: 1rem;
  67. }
  68. /*-------------------
  69. Rows
  70. --------------------*/
  71. .ui.grid > .row {
  72. position: relative;
  73. display: block;
  74. width: auto !important;
  75. padding: 0rem;
  76. font-size: 0rem;
  77. padding-top: 1rem;
  78. padding-bottom: 1rem;
  79. }
  80. /*-------------------
  81. Columns
  82. --------------------*/
  83. /* Vertical padding when no rows */
  84. .ui.grid > .column:not(.row) {
  85. padding-top: 1rem;
  86. padding-bottom: 1rem;
  87. }
  88. .ui.grid > .row > .column {
  89. margin-top: 0em;
  90. margin-bottom: 0em;
  91. }
  92. /*-------------------
  93. Content
  94. --------------------*/
  95. .ui.grid > .row > img,
  96. .ui.grid > .row > .column > img {
  97. max-width: 100%;
  98. }
  99. /*-------------------
  100. Loose Coupling
  101. --------------------*/
  102. .ui.grid .row + .ui.divider {
  103. margin: 1rem 1rem;
  104. }
  105. /* remove Border on last horizontal segment */
  106. .ui.grid > .row > .column:last-child > .horizontal.segment,
  107. .ui.grid > .column:last-child > .horizontal.segment {
  108. box-shadow: none;
  109. }
  110. /*******************************
  111. Variations
  112. *******************************/
  113. /*-----------------------
  114. Page Grid
  115. -------------------------*/
  116. .ui.page.grid {
  117. padding-left: 8%;
  118. padding-right: 8%;
  119. width: auto;
  120. }
  121. /* Collapse Margin */
  122. .ui.grid > .ui.grid:first-child {
  123. margin-top: 0em;
  124. }
  125. .ui.grid > .ui.grid:last-child {
  126. margin-bottom: 0em;
  127. }
  128. @media only screen and (max-width: 767px) {
  129. .ui.page.grid {
  130. width: auto;
  131. padding-left: 0em;
  132. padding-right: 0em;
  133. margin-left: 0em;
  134. margin-right: 0em;
  135. }
  136. }
  137. @media only screen and (min-width: 768px) {
  138. .ui.page.grid {
  139. width: auto;
  140. margin-left: 0em;
  141. margin-right: 0em;
  142. padding-left: 4em;
  143. padding-right: 4em;
  144. }
  145. }
  146. @media only screen and (min-width: 992px) {
  147. .ui.page.grid {
  148. width: auto;
  149. margin-left: 0em;
  150. margin-right: 0em;
  151. padding-left: 8%;
  152. padding-right: 8%;
  153. }
  154. }
  155. @media only screen and (min-width: 1400px) {
  156. .ui.page.grid {
  157. width: auto;
  158. margin-left: 0em;
  159. margin-right: 0em;
  160. padding-left: 15%;
  161. padding-right: 15%;
  162. }
  163. }
  164. @media only screen and (min-width: 1920px) {
  165. .ui.page.grid {
  166. width: auto;
  167. margin-left: 0em;
  168. margin-right: 0em;
  169. padding-left: 23%;
  170. padding-right: 23%;
  171. }
  172. }
  173. /*-------------------
  174. Column Count
  175. --------------------*/
  176. /* Assume full width with one column */
  177. .ui.grid > .column:only-child,
  178. .ui.grid > .row > .column:only-child {
  179. width: 100%;
  180. }
  181. /* Grid Based */
  182. .ui[class*="one column"].grid > .row > .column,
  183. .ui[class*="one column"].grid > .column {
  184. width: 100%;
  185. }
  186. .ui[class*="two column"].grid > .row > .column,
  187. .ui[class*="two column"].grid > .column {
  188. width: 50%;
  189. }
  190. .ui[class*="three column"].grid > .row > .column,
  191. .ui[class*="three column"].grid > .column {
  192. width: 33.33333333%;
  193. }
  194. .ui[class*="four column"].grid > .row > .column,
  195. .ui[class*="four column"].grid > .column {
  196. width: 25%;
  197. }
  198. .ui[class*="five column"].grid > .row > .column,
  199. .ui[class*="five column"].grid > .column {
  200. width: 20%;
  201. }
  202. .ui[class*="six column"].grid > .row > .column,
  203. .ui[class*="six column"].grid > .column {
  204. width: 16.66666667%;
  205. }
  206. .ui[class*="seven column"].grid > .row > .column,
  207. .ui[class*="seven column"].grid > .column {
  208. width: 14.28571429%;
  209. }
  210. .ui[class*="eight column"].grid > .row > .column,
  211. .ui[class*="eight column"].grid > .column {
  212. width: 12.5%;
  213. }
  214. .ui[class*="nine column"].grid > .row > .column,
  215. .ui[class*="nine column"].grid > .column {
  216. width: 11.11111111%;
  217. }
  218. .ui[class*="ten column"].grid > .row > .column,
  219. .ui[class*="ten column"].grid > .column {
  220. width: 10%;
  221. }
  222. .ui[class*="eleven column"].grid > .row > .column,
  223. .ui[class*="eleven column"].grid > .column {
  224. width: 9.09090909%;
  225. }
  226. .ui[class*="twelve column"].grid > .row > .column,
  227. .ui[class*="twelve column"].grid > .column {
  228. width: 8.33333333%;
  229. }
  230. .ui[class*="thirteen column"].grid > .row > .column,
  231. .ui[class*="thirteen column"].grid > .column {
  232. width: 7.69230769%;
  233. }
  234. .ui[class*="fourteen column"].grid > .row > .column,
  235. .ui[class*="fourteen column"].grid > .column {
  236. width: 7.14285714%;
  237. }
  238. .ui[class*="fifteen column"].grid > .row > .column,
  239. .ui[class*="fifteen column"].grid > .column {
  240. width: 6.66666667%;
  241. }
  242. .ui[class*="sixteen column"].grid > .row > .column,
  243. .ui[class*="sixteen column"].grid > .column {
  244. width: 6.25%;
  245. }
  246. /* Row Based Overrides */
  247. .ui.grid > [class*="one column"].row > .column {
  248. width: 100% !important;
  249. }
  250. .ui.grid > [class*="two column"].row > .column {
  251. width: 50% !important;
  252. }
  253. .ui.grid > [class*="three column"].row > .column {
  254. width: 33.33333333% !important;
  255. }
  256. .ui.grid > [class*="four column"].row > .column {
  257. width: 25% !important;
  258. }
  259. .ui.grid > [class*="five column"].row > .column {
  260. width: 20% !important;
  261. }
  262. .ui.grid > [class*="six column"].row > .column {
  263. width: 16.66666667% !important;
  264. }
  265. .ui.grid > [class*="seven column"].row > .column {
  266. width: 14.28571429% !important;
  267. }
  268. .ui.grid > [class*="eight column"].row > .column {
  269. width: 12.5% !important;
  270. }
  271. .ui.grid > [class*="nine column"].row > .column {
  272. width: 11.11111111% !important;
  273. }
  274. .ui.grid > [class*="ten column"].row > .column {
  275. width: 10% !important;
  276. }
  277. .ui.grid > [class*="eleven column"].row > .column {
  278. width: 9.09090909% !important;
  279. }
  280. .ui.grid > [class*="twelve column"].row > .column {
  281. width: 8.33333333% !important;
  282. }
  283. .ui.grid > [class*="thirteen column"].row > .column {
  284. width: 7.69230769% !important;
  285. }
  286. .ui.grid > [class*="fourteen column"].row > .column {
  287. width: 7.14285714% !important;
  288. }
  289. .ui.grid > [class*="fifteen column"].row > .column {
  290. width: 6.66666667% !important;
  291. }
  292. .ui.grid > [class*="sixteen column"].row > .column {
  293. width: 6.25% !important;
  294. }
  295. /*-------------------
  296. Column Width
  297. --------------------*/
  298. /* Sizing Combinations */
  299. .ui.grid > .row > [class*="one wide"].column,
  300. .ui.grid > .column.row > [class*="one wide"].column,
  301. .ui.grid > [class*="one wide"].column,
  302. .ui.column.grid > [class*="one wide"].column {
  303. width: 6.25% !important;
  304. }
  305. .ui.grid > .row > [class*="two wide"].column,
  306. .ui.grid > .column.row > [class*="two wide"].column,
  307. .ui.grid > [class*="two wide"].column,
  308. .ui.column.grid > [class*="two wide"].column {
  309. width: 12.5% !important;
  310. }
  311. .ui.grid > .row > [class*="three wide"].column,
  312. .ui.grid > .column.row > [class*="three wide"].column,
  313. .ui.grid > [class*="three wide"].column,
  314. .ui.column.grid > [class*="three wide"].column {
  315. width: 18.75% !important;
  316. }
  317. .ui.grid > .row > [class*="four wide"].column,
  318. .ui.grid > .column.row > [class*="four wide"].column,
  319. .ui.grid > [class*="four wide"].column,
  320. .ui.column.grid > [class*="four wide"].column {
  321. width: 25% !important;
  322. }
  323. .ui.grid > .row > [class*="five wide"].column,
  324. .ui.grid > .column.row > [class*="five wide"].column,
  325. .ui.grid > [class*="five wide"].column,
  326. .ui.column.grid > [class*="five wide"].column {
  327. width: 31.25% !important;
  328. }
  329. .ui.grid > .row > [class*="six wide"].column,
  330. .ui.grid > .column.row > [class*="six wide"].column,
  331. .ui.grid > [class*="six wide"].column,
  332. .ui.column.grid > [class*="six wide"].column {
  333. width: 37.5% !important;
  334. }
  335. .ui.grid > .row > [class*="seven wide"].column,
  336. .ui.grid > .column.row > [class*="seven wide"].column,
  337. .ui.grid > [class*="seven wide"].column,
  338. .ui.column.grid > [class*="seven wide"].column {
  339. width: 43.75% !important;
  340. }
  341. .ui.grid > .row > [class*="eight wide"].column,
  342. .ui.grid > .column.row > [class*="eight wide"].column,
  343. .ui.grid > [class*="eight wide"].column,
  344. .ui.column.grid > [class*="eight wide"].column {
  345. width: 50% !important;
  346. }
  347. .ui.grid > .row > [class*="nine wide"].column,
  348. .ui.grid > .column.row > [class*="nine wide"].column,
  349. .ui.grid > [class*="nine wide"].column,
  350. .ui.column.grid > [class*="nine wide"].column {
  351. width: 56.25% !important;
  352. }
  353. .ui.grid > .row > [class*="ten wide"].column,
  354. .ui.grid > .column.row > [class*="ten wide"].column,
  355. .ui.grid > [class*="ten wide"].column,
  356. .ui.column.grid > [class*="ten wide"].column {
  357. width: 62.5% !important;
  358. }
  359. .ui.grid > .row > [class*="eleven wide"].column,
  360. .ui.grid > .column.row > [class*="eleven wide"].column,
  361. .ui.grid > [class*="eleven wide"].column,
  362. .ui.column.grid > [class*="eleven wide"].column {
  363. width: 68.75% !important;
  364. }
  365. .ui.grid > .row > [class*="twelve wide"].column,
  366. .ui.grid > .column.row > [class*="twelve wide"].column,
  367. .ui.grid > [class*="twelve wide"].column,
  368. .ui.column.grid > [class*="twelve wide"].column {
  369. width: 75% !important;
  370. }
  371. .ui.grid > .row > [class*="thirteen wide"].column,
  372. .ui.grid > .column.row > [class*="thirteen wide"].column,
  373. .ui.grid > [class*="thirteen wide"].column,
  374. .ui.column.grid > [class*="thirteen wide"].column {
  375. width: 81.25% !important;
  376. }
  377. .ui.grid > .row > [class*="fourteen wide"].column,
  378. .ui.grid > .column.row > [class*="fourteen wide"].column,
  379. .ui.grid > [class*="fourteen wide"].column,
  380. .ui.column.grid > [class*="fourteen wide"].column {
  381. width: 87.5% !important;
  382. }
  383. .ui.grid > .row > [class*="fifteen wide"].column,
  384. .ui.grid > .column.row > [class*="fifteen wide"].column,
  385. .ui.grid > [class*="fifteen wide"].column,
  386. .ui.column.grid > [class*="fifteen wide"].column {
  387. width: 93.75% !important;
  388. }
  389. .ui.grid > .row > [class*="sixteen wide"].column,
  390. .ui.grid > .column.row > [class*="sixteen wide"].column,
  391. .ui.grid > [class*="sixteen wide"].column,
  392. .ui.column.grid > [class*="sixteen wide"].column {
  393. width: 100% !important;
  394. }
  395. /*----------------------
  396. Centered
  397. -----------------------*/
  398. .ui.centered.grid,
  399. .ui.centered.grid > .row,
  400. .ui.grid .centered.row {
  401. text-align: center;
  402. }
  403. .ui.centered.grid > .column:not(.aligned),
  404. .ui.centered.grid > .row > .column:not(.aligned),
  405. .ui.grid .centered.row > .column:not(.aligned) {
  406. text-align: left;
  407. }
  408. .ui.grid > .centered.column,
  409. .ui.grid > .row > .centered.column {
  410. display: block;
  411. margin-left: auto;
  412. margin-right: auto;
  413. }
  414. /*----------------------
  415. Relaxed
  416. -----------------------*/
  417. .ui.relaxed.grid > .column:not(.row),
  418. .ui.relaxed.grid > .row > .column,
  419. .ui.grid > .relaxed.row > .column {
  420. padding-left: 1.5rem;
  421. padding-right: 1.5rem;
  422. }
  423. .ui[class*="very relaxed"].grid > .column:not(.row),
  424. .ui[class*="very relaxed"].grid > .row > .column,
  425. .ui.grid > [class*="very relaxed"].row > .column {
  426. padding-left: 2.5rem;
  427. padding-right: 2.5rem;
  428. }
  429. /* Coupling with UI Divider */
  430. .ui.relaxed.grid .row + .ui.divider,
  431. .ui.grid .relaxed.row + .ui.divider {
  432. margin-left: 1.5rem;
  433. margin-right: 1.5rem;
  434. }
  435. .ui[class*="very relaxed"].grid .row + .ui.divider,
  436. .ui.grid [class*="very relaxed"].row + .ui.divider {
  437. margin-left: 2.5rem;
  438. margin-right: 2.5rem;
  439. }
  440. /*----------------------
  441. Padded
  442. -----------------------*/
  443. .ui.padded.grid:not(.vertically):not(.horizontally) {
  444. margin: 0em !important;
  445. }
  446. [class*="horizontally padded"].ui.grid {
  447. margin-left: 0em !important;
  448. margin-right: 0em !important;
  449. }
  450. [class*="vertically padded"].ui.grid {
  451. margin-top: 0em !important;
  452. margin-bottom: 0em !important;
  453. }
  454. /*----------------------
  455. "Floated"
  456. -----------------------*/
  457. .ui.grid [class*="left floated"].column {
  458. float: left;
  459. }
  460. .ui.grid [class*="right floated"].column {
  461. float: right;
  462. }
  463. /*----------------------
  464. Divided
  465. -----------------------*/
  466. .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
  467. .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
  468. box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
  469. }
  470. /* Swap from padding to margin on columns to have dividers align */
  471. .ui[class*="vertically divided"].grid > .column:not(.row),
  472. .ui[class*="vertically divided"].grid > .row > .column {
  473. margin-top: 1rem;
  474. margin-bottom: 1rem;
  475. padding-top: 0rem;
  476. padding-bottom: 0rem;
  477. }
  478. .ui[class*="vertically divided"].grid > .row {
  479. margin-top: 0em;
  480. margin-bottom: 0em;
  481. padding-top: 0em;
  482. padding-bottom: 0em;
  483. }
  484. /* No divider on first column on row */
  485. .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
  486. .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  487. box-shadow: none;
  488. }
  489. /* Divided Row */
  490. .ui.grid > .divided.row > .column {
  491. box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
  492. }
  493. .ui.grid > .divided.row > .column:first-child {
  494. box-shadow: none;
  495. }
  496. /* Vertically Divided */
  497. .ui[class*="vertically divided"].grid > .row {
  498. position: relative;
  499. }
  500. .ui[class*="vertically divided"].grid > .row:before {
  501. position: absolute;
  502. content: "";
  503. top: 0em;
  504. left: 0px;
  505. width: -webkit-calc(100% - 2rem );
  506. width: calc(100% - 2rem );
  507. height: 1px;
  508. margin: 0% 1rem;
  509. box-shadow: 0px -1px 0px 0px rgba(39, 41, 43, 0.15);
  510. }
  511. /* Padded Horizontally Divided */
  512. [class*="horizontally padded"].ui.divided.grid,
  513. .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
  514. width: 100%;
  515. }
  516. /* First Row Vertically Divided */
  517. .ui[class*="vertically divided"].grid > .row:first-child:before {
  518. box-shadow: none;
  519. }
  520. /* Inverted Divided */
  521. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
  522. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
  523. box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.2);
  524. }
  525. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
  526. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  527. box-shadow: none;
  528. }
  529. .ui.inverted[class*="vertically divided"].grid > .row:before {
  530. box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
  531. }
  532. /* Relaxed */
  533. .ui.relaxed[class*="vertically divided"].grid > .row:before {
  534. margin-left: 1.5rem;
  535. margin-right: 1.5rem;
  536. width: -webkit-calc(100% - 3rem );
  537. width: calc(100% - 3rem );
  538. }
  539. .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
  540. margin-left: 5rem;
  541. margin-right: 5rem;
  542. width: -webkit-calc(100% - 5rem );
  543. width: calc(100% - 5rem );
  544. }
  545. /*----------------------
  546. Celled
  547. -----------------------*/
  548. .ui.celled.grid {
  549. display: table;
  550. table-layout: fixed;
  551. width: 100%;
  552. margin: 1em 0em;
  553. box-shadow: 0px 0px 0px 1px #d4d4d5;
  554. }
  555. .ui.celled.grid > .row,
  556. .ui.celled.grid > .column.row,
  557. .ui.celled.grid > .column.row:first-child {
  558. display: table;
  559. table-layout: fixed;
  560. width: 100% !important;
  561. margin: 0em;
  562. padding: 0em;
  563. box-shadow: 0px -1px 0px 0px #d4d4d5;
  564. }
  565. .ui.celled.grid > .column:not(.row),
  566. .ui.celled.grid > .row > .column {
  567. display: table-cell;
  568. box-shadow: -1px 0px 0px 0px #d4d4d5;
  569. }
  570. .ui.celled.grid > .column:first-child,
  571. .ui.celled.grid > .row > .column:first-child {
  572. box-shadow: none;
  573. }
  574. .ui.celled.page.grid {
  575. box-shadow: none;
  576. }
  577. .ui.celled.grid > .column:not(.row),
  578. .ui.celled.grid > .row > .column {
  579. padding: 0.75em;
  580. }
  581. .ui.relaxed.celled.grid > .column:not(.row),
  582. .ui.relaxed.celled.grid > .row > .column {
  583. padding: 1em;
  584. }
  585. .ui[class*="very relaxed"].celled.grid > .column:not(.row),
  586. .ui[class*="very relaxed"].celled.grid > .row > .column {
  587. padding: 2em;
  588. }
  589. /* Internally Celled */
  590. .ui[class*="internally celled"].grid {
  591. box-shadow: none;
  592. }
  593. .ui[class*="internally celled"].grid > .row:first-child {
  594. box-shadow: none;
  595. }
  596. .ui[class*="internally celled"].grid > .row > .column:first-child {
  597. box-shadow: none;
  598. }
  599. /*----------------------
  600. Horizontally Centered
  601. -----------------------*/
  602. /* Left Aligned */
  603. .ui[class*="left aligned"].grid,
  604. .ui[class*="left aligned"].grid > .row > .column,
  605. .ui[class*="left aligned"].grid > .column,
  606. .ui.grid [class*="left aligned"].column,
  607. .ui.grid > [class*="left aligned"].aligned.row > .column {
  608. text-align: left;
  609. }
  610. .ui.grid [class*="left aligned"].column {
  611. text-align: left !important;
  612. }
  613. /* Center Aligned */
  614. .ui[class*="center aligned"].grid,
  615. .ui[class*="center aligned"].grid > .row > .column,
  616. .ui[class*="center aligned"].grid > .column,
  617. .ui.grid > [class*="center aligned"].aligned.row > .column {
  618. text-align: center;
  619. }
  620. .ui.grid [class*="center aligned"].column {
  621. text-align: center !important;
  622. }
  623. /* Right Aligned */
  624. .ui[class*="right aligned"].grid,
  625. .ui[class*="right aligned"].grid > .row > .column,
  626. .ui[class*="right aligned"].grid > .column,
  627. .ui.grid > [class*="right aligned"].aligned.row > .column {
  628. text-align: right;
  629. }
  630. .ui.grid [class*="right aligned"].column {
  631. text-align: right !important;
  632. }
  633. /* Justified */
  634. .ui.justified.grid,
  635. .ui.justified.grid > .row > .column,
  636. .ui.justified.grid > .column,
  637. .ui.grid .justified.column,
  638. .ui.grid > .justified.row > .column {
  639. text-align: justify;
  640. -webkit-hyphens: auto;
  641. -moz-hyphens: auto;
  642. -ms-hyphens: auto;
  643. hyphens: auto;
  644. }
  645. .ui.grid .justified.column {
  646. text-align: justify !important;
  647. -webkit-hyphens: auto !important;
  648. -moz-hyphens: auto !important;
  649. -ms-hyphens: auto !important;
  650. hyphens: auto !important;
  651. }
  652. /*----------------------
  653. Vertically Aligned
  654. -----------------------*/
  655. /* Top Aligned */
  656. .ui[class*="top aligned"].grid,
  657. .ui[class*="top aligned"].grid > .row > .column,
  658. .ui[class*="top aligned"].grid > .column,
  659. .ui.grid [class*="top aligned"].column,
  660. .ui.grid > [class*="top aligned"].aligned.row > .column {
  661. vertical-align: top;
  662. }
  663. .ui.grid [class*="top aligned"].column {
  664. vertical-align: top !important;
  665. }
  666. /* Middle Aligned */
  667. .ui[class*="center aligned"].grid,
  668. .ui[class*="middle aligned"].grid > .row > .column,
  669. .ui[class*="middle aligned"].grid > .column,
  670. .ui.grid > [class*="middle aligned"].aligned.row > .column {
  671. vertical-align: middle;
  672. }
  673. .ui.grid [class*="middle aligned"].column {
  674. vertical-align: middle !important;
  675. }
  676. /* Bottom Aligned */
  677. .ui[class*="bottom aligned"].grid,
  678. .ui[class*="bottom aligned"].grid > .row > .column,
  679. .ui[class*="bottom aligned"].grid > .column,
  680. .ui.grid > [class*="bottom aligned"].aligned.row > .column {
  681. vertical-align: bottom;
  682. }
  683. .ui.grid [class*="bottom aligned"].column {
  684. vertical-align: bottom !important;
  685. }
  686. /*----------------------
  687. Colored
  688. -----------------------*/
  689. .ui.grid > .white.row,
  690. .ui.grid .white.column {
  691. background-color: #ffffff !important;
  692. color: rgba(0, 0, 0, 0.8);
  693. }
  694. .ui.grid > .row > .white.column {
  695. margin-top: -1rem;
  696. margin-bottom: -1rem;
  697. padding-top: 1rem;
  698. padding-bottom: 1rem;
  699. }
  700. .ui.grid > .black.row,
  701. .ui.grid .black.column {
  702. background-color: #1b1c1d !important;
  703. color: #ffffff;
  704. }
  705. .ui.grid > .row > .black.column {
  706. margin-top: -1rem;
  707. margin-bottom: -1rem;
  708. padding-top: 1rem;
  709. padding-bottom: 1rem;
  710. }
  711. .ui.grid > .blue.row,
  712. .ui.grid .blue.column {
  713. background-color: #3b83c0 !important;
  714. color: #ffffff;
  715. }
  716. .ui.grid > .row > .blue.column {
  717. margin-top: -1rem;
  718. margin-bottom: -1rem;
  719. padding-top: 1rem;
  720. padding-bottom: 1rem;
  721. }
  722. .ui.grid > .green.row,
  723. .ui.grid .green.column {
  724. background-color: #5bbd72 !important;
  725. color: #ffffff;
  726. }
  727. .ui.grid > .row > .green.column {
  728. margin-top: -1rem;
  729. margin-bottom: -1rem;
  730. padding-top: 1rem;
  731. padding-bottom: 1rem;
  732. }
  733. .ui.grid > .orange.row,
  734. .ui.grid .orange.column {
  735. background-color: #e07b53 !important;
  736. color: #ffffff;
  737. }
  738. .ui.grid > .row > .orange.column {
  739. margin-top: -1rem;
  740. margin-bottom: -1rem;
  741. padding-top: 1rem;
  742. padding-bottom: 1rem;
  743. }
  744. .ui.grid > .pink.row,
  745. .ui.grid .pink.column {
  746. background-color: #d9499a !important;
  747. color: #ffffff;
  748. }
  749. .ui.grid > .row > .pink.column {
  750. margin-top: -1rem;
  751. margin-bottom: -1rem;
  752. padding-top: 1rem;
  753. padding-bottom: 1rem;
  754. }
  755. .ui.grid > .purple.row,
  756. .ui.grid .purple.column {
  757. background-color: #564f8a !important;
  758. color: #ffffff;
  759. }
  760. .ui.grid > .row > .purple.column {
  761. margin-top: -1rem;
  762. margin-bottom: -1rem;
  763. padding-top: 1rem;
  764. padding-bottom: 1rem;
  765. }
  766. .ui.grid > .red.row,
  767. .ui.grid .red.column {
  768. background-color: #d95c5c !important;
  769. color: #ffffff;
  770. }
  771. .ui.grid > .row > .red.column {
  772. margin-top: -1rem;
  773. margin-bottom: -1rem;
  774. padding-top: 1rem;
  775. padding-bottom: 1rem;
  776. }
  777. .ui.grid > .teal.row,
  778. .ui.grid .teal.column {
  779. background-color: #00b5ad !important;
  780. color: #ffffff;
  781. }
  782. .ui.grid > .row > .teal.column {
  783. margin-top: -1rem;
  784. margin-bottom: -1rem;
  785. padding-top: 1rem;
  786. padding-bottom: 1rem;
  787. }
  788. .ui.grid > .yellow.row,
  789. .ui.grid .yellow.column {
  790. background-color: #f2c61f !important;
  791. color: #ffffff;
  792. }
  793. .ui.grid > .row > .yellow.column {
  794. margin-top: -1rem;
  795. margin-bottom: -1rem;
  796. padding-top: 1rem;
  797. padding-bottom: 1rem;
  798. }
  799. /*----------------------
  800. Equal Height Columns
  801. -----------------------*/
  802. .ui[class*="equal height"].grid {
  803. display: table;
  804. table-layout: fixed;
  805. }
  806. .ui[class*="equal height"].grid > .row,
  807. .ui[class*="equal height"].row {
  808. display: table;
  809. table-layout: fixed;
  810. width: 100% !important;
  811. }
  812. .ui[class*="equal height"].grid > .column,
  813. .ui[class*="equal height"].grid > .row > .column,
  814. .ui.grid > [class*="equal height"].row > .column {
  815. display: table-cell;
  816. }
  817. /*-------------------
  818. Doubling
  819. --------------------*/
  820. /* Tablet Only */
  821. @media only screen and (min-width: 768px) and (max-width: 991px) {
  822. .ui.doubling.grid {
  823. width: 100% !important;
  824. }
  825. .ui.grid > .doubling.row,
  826. .ui.doubling.grid > .row {
  827. margin: 0em !important;
  828. padding: 0em !important;
  829. }
  830. .ui.grid > .doubling.row > .column,
  831. .ui.doubling.grid > .row > .column {
  832. display: inline-block !important;
  833. padding-top: 1rem !important;
  834. padding-bottom: 1rem !important;
  835. margin: 0em;
  836. }
  837. .ui[class*="two column"].doubling.grid > .row > .column,
  838. .ui[class*="two column"].doubling.grid > .column,
  839. .ui.grid > [class*="two column"].doubling.row > .column {
  840. width: 100% !important;
  841. }
  842. .ui[class*="three column"].doubling.grid > .row > .column,
  843. .ui[class*="three column"].doubling.grid > .column,
  844. .ui.grid > [class*="three column"].doubling.row > .column {
  845. width: 50% !important;
  846. }
  847. .ui[class*="four column"].doubling.grid > .row > .column,
  848. .ui[class*="four column"].doubling.grid > .column,
  849. .ui.grid > [class*="four column"].doubling.row > .column {
  850. width: 50% !important;
  851. }
  852. .ui[class*="five column"].doubling.grid > .row > .column,
  853. .ui[class*="five column"].doubling.grid > .column,
  854. .ui.grid > [class*="five column"].doubling.row > .column {
  855. width: 33.33333333% !important;
  856. }
  857. .ui[class*="six column"].doubling.grid > .row > .column,
  858. .ui[class*="six column"].doubling.grid > .column,
  859. .ui.grid > [class*="six column"].doubling.row > .column {
  860. width: 33.33333333% !important;
  861. }
  862. .ui[class*="eight column"].doubling.grid > .row > .column,
  863. .ui[class*="eight column"].doubling.grid > .column,
  864. .ui.grid > [class*="eight column"].doubling.row > .column {
  865. width: 33.33333333% !important;
  866. }
  867. .ui[class*="eight column"].doubling.grid > .row > .column,
  868. .ui[class*="eight column"].doubling.grid > .column,
  869. .ui.grid > [class*="eight column"].doubling.row > .column {
  870. width: 25% !important;
  871. }
  872. .ui[class*="nine column"].doubling.grid > .row > .column,
  873. .ui[class*="nine column"].doubling.grid > .column,
  874. .ui.grid > [class*="nine column"].doubling.row > .column {
  875. width: 25% !important;
  876. }
  877. .ui[class*="ten column"].doubling.grid > .row > .column,
  878. .ui[class*="ten column"].doubling.grid > .column,
  879. .ui.grid > [class*="ten column"].doubling.row > .column {
  880. width: 20% !important;
  881. }
  882. .ui[class*="twelve column"].doubling.grid > .row > .column,
  883. .ui[class*="twelve column"].doubling.grid > .column,
  884. .ui.grid > [class*="twelve column"].doubling.row > .column {
  885. width: 16.66666667% !important;
  886. }
  887. .ui[class*="fourteen column"].doubling.grid > .row > .column,
  888. .ui[class*="fourteen column"].doubling.grid > .column,
  889. .ui.grid > [class*="fourteen column"].doubling.row > .column {
  890. width: 14.28571429% !important;
  891. }
  892. .ui[class*="sixteen column"].doubling.grid > .row > .column,
  893. .ui[class*="sixteen column"].doubling.grid > .column,
  894. .ui.grid > [class*="sixteen column"].doubling.row > .column {
  895. width: 12.5% !important;
  896. }
  897. }
  898. /* Mobily Only */
  899. @media only screen and (max-width: 767px) {
  900. .ui.doubling.grid {
  901. width: 100% !important;
  902. }
  903. .ui.grid > .doubling.row,
  904. .ui.doubling.grid > .row {
  905. display: block !important;
  906. margin: 0em !important;
  907. padding: 0em !important;
  908. }
  909. .ui.grid > .doubling.row > .column,
  910. .ui.doubling.grid > .row > .column {
  911. display: inline-block !important;
  912. padding-top: 1rem !important;
  913. padding-bottom: 1rem !important;
  914. margin: 0em !important;
  915. }
  916. .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
  917. .ui[class*="two column"].doubling:not(.stackable).grid > .column,
  918. .ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
  919. width: 100% !important;
  920. }
  921. .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
  922. .ui[class*="three column"].doubling:not(.stackable).grid > .column,
  923. .ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
  924. width: 50% !important;
  925. }
  926. .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
  927. .ui[class*="four column"].doubling:not(.stackable).grid > .column,
  928. .ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
  929. width: 50% !important;
  930. }
  931. .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
  932. .ui[class*="five column"].doubling:not(.stackable).grid > .column,
  933. .ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
  934. width: 50% !important;
  935. }
  936. .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
  937. .ui[class*="six column"].doubling:not(.stackable).grid > .column,
  938. .ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
  939. width: 50% !important;
  940. }
  941. .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
  942. .ui[class*="seven column"].doubling:not(.stackable).grid > .column,
  943. .ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
  944. width: 50% !important;
  945. }
  946. .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
  947. .ui[class*="eight column"].doubling:not(.stackable).grid > .column,
  948. .ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
  949. width: 50% !important;
  950. }
  951. .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
  952. .ui[class*="nine column"].doubling:not(.stackable).grid > .column,
  953. .ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
  954. width: 33.33333333% !important;
  955. }
  956. .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
  957. .ui[class*="ten column"].doubling:not(.stackable).grid > .column,
  958. .ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
  959. width: 33.33333333% !important;
  960. }
  961. .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
  962. .ui[class*="twelve column"].doubling:not(.stackable).grid > .column,
  963. .ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
  964. width: 33.33333333% !important;
  965. }
  966. .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
  967. .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column,
  968. .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
  969. width: 25% !important;
  970. }
  971. .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
  972. .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column,
  973. .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
  974. width: 25% !important;
  975. }
  976. }
  977. /*-------------------
  978. Stackable
  979. --------------------*/
  980. @media only screen and (max-width: 767px) {
  981. .ui.stackable.grid {
  982. display: block !important;
  983. width: auto;
  984. padding: 0em;
  985. margin-top: 0em;
  986. margin-bottom: 0em;
  987. }
  988. :not(.column) > .ui.stackable.grid {
  989. margin: 0em;
  990. }
  991. .ui.stackable.grid > .row > .wide.column,
  992. .ui.stackable.grid > .wide.column,
  993. .ui.stackable.grid > .column.grid > .column,
  994. .ui.stackable.grid > .column.row > .column,
  995. .ui.stackable.grid > .row > .column,
  996. .ui.stackable.grid > .column {
  997. display: block !important;
  998. width: auto !important;
  999. margin: 0.5rem 0em !important;
  1000. padding: 0.5rem 1rem 0em !important;
  1001. box-shadow: none !important;
  1002. }
  1003. .ui.stackable.celled.grid > .column,
  1004. .ui.stackable.celled.grid > .row > .column,
  1005. .ui.stackable.divided.grid > .column,
  1006. .ui.stackable.divided.grid > .row > .column {
  1007. border-top: 1px solid rgba(39, 41, 43, 0.15);
  1008. box-shadow: none !important;
  1009. margin: 2rem 0em !important;
  1010. padding: 2rem 1rem 0em !important;
  1011. }
  1012. .ui.inverted.stackable.celled.grid > .column,
  1013. .ui.inverted.stackable.celled.grid > .row > .column,
  1014. .ui.inverted.stackable.divided.grid > .column,
  1015. .ui.inverted.stackable.divided.grid > .row > .column {
  1016. border-top: 1px solid rgba(255, 255, 255, 0.2);
  1017. }
  1018. .ui.stackable.grid > .row:first-child > .column:first-child,
  1019. .ui.stackable.grid > .column:first-child {
  1020. margin-top: 0em !important;
  1021. padding-top: 0em !important;
  1022. }
  1023. .ui.stackable.divided.grid > .row:first-child > .column:first-child,
  1024. .ui.stackable.celled.grid > .row:first-child > .column:first-child,
  1025. .ui.stackable.divided.grid > .column:first-child,
  1026. .ui.stackable.celled.grid > .column:first-child {
  1027. border-top: none !important;
  1028. }
  1029. .ui[class*="equal height"].stackable.page.grid {
  1030. display: block !important;
  1031. width: 100% !important;
  1032. }
  1033. /* Remove pointers from vertical menus */
  1034. .ui.stackable.grid .vertical.pointing.menu .item:after {
  1035. display: none;
  1036. }
  1037. }
  1038. /*----------------------
  1039. Only (Device)
  1040. -----------------------*/
  1041. /* These include arbitrary class repetitions for forced specificity */
  1042. /* Mobile Only Hide */
  1043. @media only screen and (max-width: 767px) {
  1044. .ui.tablet:not(.mobile).only.grid.grid.grid,
  1045. .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
  1046. .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
  1047. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
  1048. display: none !important;
  1049. }
  1050. .ui[class*="computer only"].grid.grid.grid:not(.mobile),
  1051. .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
  1052. .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
  1053. .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
  1054. display: none !important;
  1055. }
  1056. }
  1057. /* Tablet Only Hide */
  1058. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1059. .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
  1060. .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
  1061. .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
  1062. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
  1063. display: none !important;
  1064. }
  1065. .ui[class*="computer only"].grid.grid.grid:not(.tablet),
  1066. .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
  1067. .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
  1068. .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
  1069. display: none !important;
  1070. }
  1071. }
  1072. /* Computer Only Hide */
  1073. @media only screen and (min-width: 992px) {
  1074. .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  1075. .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  1076. .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  1077. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
  1078. display: none !important;
  1079. }
  1080. .ui[class*="tablet only"].grid.grid.grid:not(.computer),
  1081. .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
  1082. .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
  1083. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
  1084. display: none !important;
  1085. }
  1086. }
  1087. /*******************************
  1088. Theme Overrides
  1089. *******************************/
  1090. /*******************************
  1091. Site Overrides
  1092. *******************************/