global.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  1. body {
  2. overflow-x: hidden;
  3. }
  4. a {
  5. text-decoration: none;
  6. }
  7. h1, h2, h3, h4, h5, h6 {
  8. font-weight: 500;
  9. }
  10. h1, h2 {
  11. padding: 5px;
  12. }
  13. h1 {
  14. color: #e4611b;
  15. font-size: 1.6em;
  16. font-weight: 500;
  17. }
  18. h2 {
  19. color: #333333;
  20. font-size: 1.4em;
  21. font-weight: 500;
  22. }
  23. h3 {
  24. color: #333333;
  25. font-size: 1.2em;
  26. font-weight: 500;
  27. }
  28. h4 {
  29. color: #333333;
  30. font-size: 1.2em;
  31. font-weight: 500;
  32. }
  33. h5 {
  34. color: #333333;
  35. font-size: 1em;
  36. font-weight: 500;
  37. }
  38. a {
  39. color: #e4611b;
  40. }
  41. a:hover {
  42. color: #893a10;
  43. text-decoration: underline;
  44. }
  45. p {
  46. padding: 5px;
  47. margin: 0 0 10px;
  48. }
  49. .text-center {
  50. text-align: center;
  51. }
  52. .text-justify {
  53. text-align: justify;
  54. }
  55. .text-right {
  56. text-align: right;
  57. }
  58. table {
  59. border-collapse: collapse;
  60. }
  61. table caption {
  62. padding-top: 8px;
  63. padding-bottom: 8px;
  64. color: #777;
  65. text-align: left;
  66. }
  67. table td, table th {
  68. border: 1px solid #ddd;
  69. padding: 8px;
  70. }
  71. table tr:nth-child(even) {
  72. background-color: #f2f2f2;
  73. }
  74. table th {
  75. padding-top: 12px;
  76. padding-bottom: 12px;
  77. text-align: left;
  78. color: #333333;
  79. }
  80. pre {
  81. display: block;
  82. padding: 9.5px;
  83. margin: 0 0 10px;
  84. font-size: 13px;
  85. border: 1px solid #ccc;
  86. border-radius: 4px;
  87. background-color: #f5f5f5;
  88. word-break: break-all;
  89. word-wrap: break-word;
  90. color: #333333;
  91. }
  92. img {
  93. max-width: 95%;
  94. height: auto;
  95. }
  96. hr {
  97. margin: 15px 5px;
  98. border-color: #BBB;
  99. }
  100. .align-center {
  101. display: flex;
  102. flex-direction: row;
  103. justify-content: center;
  104. }
  105. .ot-structures-frame, .ot-structures-frame-details {
  106. display: -webkit-box;
  107. display: -moz-box;
  108. display: -ms-flexbox;
  109. display: -webkit-flex;
  110. display: flex;
  111. font-family: Arial, serif;
  112. }
  113. .ot-structures-frame header, .ot-structures-frame-details header {
  114. display: flex;
  115. flex-direction: row;
  116. justify-content: flex-start;
  117. width: 100%;
  118. align-items: center;
  119. }
  120. .ot-structures-frame h2, .ot-structures-frame-details h2 {
  121. font-size: 21px;
  122. font-weight: 750;
  123. flex: 1;
  124. text-align: left;
  125. color: #e4611b;
  126. }
  127. .ot-structures-frame header a, .ot-structures-frame-details header a {
  128. padding: 3px;
  129. margin: 2px;
  130. font-weight: 500;
  131. }
  132. .ot-structures-frame input, .ot-structures-frame select, .ot-structures-frame-details input, .ot-structures-frame-details select {
  133. height: 36px;
  134. border: solid 1px #bfbfbf;
  135. border-radius: 0;
  136. }
  137. .ot-structures-frame .structure-col, .ot-structures-frame-details .structure-col {
  138. display: -webkit-box;
  139. display: -moz-box;
  140. display: -ms-flexbox;
  141. display: -webkit-flex;
  142. display: flex;
  143. flex-direction: column;
  144. flex: 1;
  145. max-width: 50%;
  146. padding: 12px;
  147. align-items: center;
  148. }
  149. .ot-structures-frame .btn, .ot-structures-frame-details .btn {
  150. background-color: #e4611b;
  151. border-radius: 4px;
  152. padding: 8px;
  153. font-weight: 750;
  154. color: #ffffff;
  155. text-align: center;
  156. }
  157. .ot-structures-frame .spacer, .ot-structures-frame-details .spacer {
  158. flex: 1;
  159. }
  160. .ot-structures-frame {
  161. flex-direction: row;
  162. flex-wrap: wrap;
  163. }
  164. .ot-structures-frame #structure-map-wrapper {
  165. position: relative;
  166. width: 100%;
  167. padding-bottom: 100%;
  168. float: left;
  169. height: 0;
  170. }
  171. .ot-structures-frame #structure-map {
  172. width: 100%;
  173. height: 100%;
  174. position: absolute;
  175. left: 0;
  176. }
  177. .ot-structures-frame #structure-map a {
  178. text-decoration: none;
  179. }
  180. .ot-structures-frame #structure-map-bar {
  181. margin: 16px 2% 6px 2%;
  182. width: 100%;
  183. }
  184. .ot-structures-frame #structure-map-bar .advice {
  185. color: #262626;
  186. font-weight: 750;
  187. text-align: center;
  188. font-size: 12px;
  189. }
  190. .ot-structures-frame #overseas-provinces-list {
  191. display: -webkit-box;
  192. display: -moz-box;
  193. display: -ms-flexbox;
  194. display: -webkit-flex;
  195. display: flex;
  196. flex-direction: row;
  197. list-style: none;
  198. align-items: center;
  199. justify-content: center;
  200. flex-wrap: wrap;
  201. padding: 0;
  202. width: 100%;
  203. }
  204. .ot-structures-frame #overseas-provinces-list li {
  205. margin: 5px;
  206. min-width: 50px;
  207. width: 75px;
  208. height: 75px;
  209. }
  210. .ot-structures-frame #overseas-provinces-list li img {
  211. border: solid 1px #000000;
  212. max-width: 100%;
  213. width: 100%;
  214. height: 100%;
  215. cursor: pointer;
  216. }
  217. .ot-structures-frame .structure-search {
  218. width: 100%;
  219. }
  220. .ot-structures-frame .structure-search form {
  221. width: 100%;
  222. display: flex;
  223. flex-direction: column;
  224. }
  225. .ot-structures-frame .structure-search-row {
  226. display: flex;
  227. flex-direction: row;
  228. flex-wrap: wrap;
  229. margin-bottom: 8px;
  230. }
  231. .ot-structures-frame .search-bar-wrapper {
  232. display: flex;
  233. flex-direction: row;
  234. height: 30px;
  235. padding: 6px 2%;
  236. border: solid 1px #bfbfbf;
  237. margin: 6px 0;
  238. max-width: 44%;
  239. }
  240. .ot-structures-frame .search-bar-wrapper:not(:last-child) {
  241. margin-right: auto;
  242. }
  243. .ot-structures-frame .search-bar {
  244. flex: 1;
  245. background: none;
  246. outline: none;
  247. height: auto;
  248. font-size: 18px;
  249. border: none;
  250. width: 95%;
  251. min-width: 85%;
  252. }
  253. .ot-structures-frame .search-bar-btn {
  254. display: -webkit-box;
  255. display: -moz-box;
  256. display: -ms-flexbox;
  257. display: -webkit-flex;
  258. display: flex;
  259. flex-direction: column;
  260. justify-content: center;
  261. border: none;
  262. background: none;
  263. width: 5%;
  264. min-width: 24px;
  265. padding: 5px;
  266. font-size: 18px;
  267. cursor: pointer;
  268. min-height: 32px;
  269. }
  270. .ot-structures-frame .search-bar-btn .fas {
  271. color: #8c8c8c;
  272. }
  273. .ot-structures-frame .city-search-dropdown {
  274. min-width: 100%;
  275. position: relative;
  276. display: inline-block;
  277. top: 10px;
  278. left: -100%;
  279. }
  280. .ot-structures-frame .city-search-results, .ot-structures-frame .city-search-no-result, .ot-structures-frame .city-search-loading {
  281. position: absolute;
  282. min-width: 100%;
  283. background: #EEEEEE;
  284. box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  285. z-index: 99;
  286. top: 100%;
  287. }
  288. .ot-structures-frame .city-search-loading img {
  289. padding: 10px;
  290. width: 30px;
  291. }
  292. .ot-structures-frame .city-search-item, .ot-structures-frame .city-search-no-result {
  293. display: block;
  294. padding: 12px 24px;
  295. white-space: nowrap;
  296. }
  297. .ot-structures-frame .city-search-item:hover {
  298. background-color: #d9d9d9;
  299. cursor: pointer;
  300. }
  301. .ot-structures-frame .structure-search select {
  302. color: #e4611b;
  303. padding: 4px 6px;
  304. margin: 3px 2%;
  305. font-weight: 750;
  306. width: 22%;
  307. min-width: 110px;
  308. font-size: 12px;
  309. }
  310. .ot-structures-frame .structure-search select:first-child {
  311. margin-left: 0;
  312. }
  313. .ot-structures-frame .structure-search select:last-child {
  314. margin-right: 0;
  315. }
  316. .ot-structures-frame .structure-search .reset-search {
  317. background: none;
  318. color: #e4611b;
  319. margin: 0 6px 6px 0;
  320. cursor: pointer;
  321. height: 36px;
  322. border: solid 2px #e4611b;
  323. border-radius: 0;
  324. }
  325. .ot-structures-frame .structure-search .submit-search {
  326. background-color: #e4611b;
  327. color: #ffffff;
  328. font-weight: 750;
  329. margin: 0 0 6px 6px;
  330. cursor: pointer;
  331. height: 36px;
  332. border: none;
  333. border-radius: 0;
  334. }
  335. .ot-structures-frame .structure-results .structures-page {
  336. display: flex;
  337. flex-direction: row;
  338. flex-wrap: wrap;
  339. justify-content: center;
  340. }
  341. .ot-structures-frame .structure-card {
  342. display: flex;
  343. flex-direction: column;
  344. width: 42%;
  345. min-width: 200px;
  346. border: solid 1px #cccccc;
  347. border-radius: 4px;
  348. padding: 12px;
  349. margin: 8px 1%;
  350. background-color: #f2f2f2;
  351. }
  352. .ot-structures-frame .structure-poster {
  353. display: flex;
  354. flex-direction: row;
  355. justify-content: center;
  356. margin: 8px;
  357. min-width: 160px;
  358. height: 80px;
  359. }
  360. .ot-structures-frame .structure-poster img {
  361. width: auto;
  362. height: auto;
  363. max-width: 100%;
  364. }
  365. .ot-structures-frame .structure-details {
  366. display: flex;
  367. flex-direction: column;
  368. }
  369. .ot-structures-frame .structure-details > * {
  370. margin: 4px;
  371. }
  372. .ot-structures-frame .structure-practices {
  373. display: flex;
  374. flex-direction: row;
  375. flex-wrap: wrap;
  376. min-height: 18px;
  377. }
  378. .ot-structures-frame .structure-practice {
  379. background-color: #d9d9d9;
  380. color: #262626;
  381. font-size: 11px;
  382. margin: 1px 4px 1px 0;
  383. padding: 1px 5px 3px 5px;
  384. height: 16px;
  385. border-radius: 6px;
  386. }
  387. .ot-structures-frame .structure-name {
  388. font-size: 18px;
  389. font-weight: 750;
  390. width: 100%;
  391. text-align: left;
  392. color: #e4611b;
  393. }
  394. .ot-structures-frame .structure-details-table td {
  395. border: none;
  396. }
  397. .ot-structures-frame .structure-details-entry {
  398. color: #595959;
  399. }
  400. .ot-structures-frame .structure-details-entry .fas {
  401. color: #e4611b;
  402. }
  403. .ot-structures-frame .structure-see {
  404. width: 128px;
  405. max-height: 28px;
  406. padding: 4px;
  407. font-weight: 500;
  408. margin-top: 8px;
  409. }
  410. .ot-structures-frame .structure-see:hover {
  411. text-decoration: none;
  412. color: white;
  413. }
  414. .ot-structures-frame .results-count-message {
  415. width: 100%;
  416. display: flex;
  417. flex-direction: row;
  418. justify-content: flex-start;
  419. color: #666666;
  420. font-size: 0.8em;
  421. padding-left: 12px;
  422. }
  423. .ot-structures-frame .pagination-bar li a {
  424. color: #4d4d4d;
  425. font-weight: 600;
  426. }
  427. .ot-structures-frame .pagination-bar li.current a {
  428. color: #e4611b;
  429. }
  430. .ot-structures-frame.list-view .structure-col-map {
  431. display: none;
  432. }
  433. .ot-structures-frame.list-view .search-bar-wrapper {
  434. flex: 1;
  435. max-width: none;
  436. }
  437. .ot-structures-frame.list-view .search-bar-wrapper:not(:last-child) {
  438. margin-right: 2%;
  439. }
  440. .ot-structures-frame.list-view .structure-search-row.filters {
  441. margin: 0 auto 12px auto;
  442. }
  443. .ot-structures-frame.list-view .search-bar {
  444. flex: 1;
  445. max-width: none;
  446. }
  447. .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
  448. height: 52px;
  449. margin: 3px 0.5%;
  450. }
  451. .ot-structures-frame.list-view .filters .reset-search {
  452. margin-left: 0;
  453. }
  454. .ot-structures-frame.list-view .filters .submit-search {
  455. margin-right: 0;
  456. }
  457. .ot-structures-frame.list-view .filters select {
  458. width: 18.5%;
  459. }
  460. .ot-structures-frame.list-view .filters button {
  461. width: 10.5%;
  462. }
  463. .ot-structures-frame.list-view .structure-col {
  464. align-items: normal;
  465. }
  466. .ot-structures-frame.list-view .structure-col-results {
  467. width: 100%;
  468. max-width: 100%;
  469. }
  470. .ot-structures-frame.list-view .structure-card {
  471. width: 95%;
  472. flex-direction: row;
  473. }
  474. .ot-structures-frame.list-view .structure-card .spacer {
  475. flex: 0;
  476. }
  477. .ot-structures-frame.list-view .structure-details {
  478. flex: 1;
  479. }
  480. .ot-structures-frame.list-view .structure-see {
  481. align-self: flex-end;
  482. }
  483. .ot-structures-frame.map-view .activate-map-view {
  484. font-weight: 750;
  485. }
  486. .ot-structures-frame.list-view .activate-list-view {
  487. font-weight: 750;
  488. }
  489. @media screen and (min-width: 700px) and (max-width: 1048px) {
  490. .ot-structures-frame.map-view #overseas-provinces-list li {
  491. width: 85px;
  492. height: 85px;
  493. margin: 5px 12px;
  494. }
  495. .ot-structures-frame.map-view .structure-search select {
  496. margin: 3px 2%;
  497. width: 46%;
  498. }
  499. .ot-structures-frame.list-view .structure-search-row {
  500. flex-wrap: nowrap;
  501. }
  502. .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
  503. width: 15%;
  504. margin: 1%;
  505. }
  506. }
  507. @media screen and (max-width: 700px) {
  508. .ot-structures-frame {
  509. flex-direction: column;
  510. flex-wrap: nowrap;
  511. }
  512. .ot-structures-frame .structure-col {
  513. max-width: none;
  514. min-width: 100px;
  515. overflow: hidden;
  516. }
  517. .ot-structures-frame .structure-search-row {
  518. flex-direction: column;
  519. }
  520. .ot-structures-frame .search-bar-wrapper {
  521. width: 95%;
  522. max-width: 95%;
  523. margin: 3px auto;
  524. }
  525. .ot-structures-frame .search-bar-wrapper input {
  526. width: auto;
  527. }
  528. .ot-structures-frame .structure-search select {
  529. width: 95%;
  530. margin: 3px auto;
  531. }
  532. .ot-structures-frame .structure-card {
  533. width: 100%;
  534. }
  535. .ot-structures-frame.list-view .search-bar-wrapper {
  536. width: 85%;
  537. }
  538. .ot-structures-frame.list-view .structure-card {
  539. flex-direction: column;
  540. }
  541. .ot-structures-frame.list-view .structure-search-row {
  542. flex-wrap: nowrap;
  543. }
  544. .ot-structures-frame.list-view .structure-search-row.filters {
  545. margin: 0;
  546. }
  547. .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
  548. width: 80%;
  549. margin: 5px auto;
  550. }
  551. }
  552. .ot-structures-frame-details {
  553. flex-direction: column;
  554. }
  555. .ot-structures-frame-details .please-wait {
  556. display: -webkit-box;
  557. display: -moz-box;
  558. display: -ms-flexbox;
  559. display: -webkit-flex;
  560. display: flex;
  561. flex-direction: row;
  562. width: 100%;
  563. height: 100vh;
  564. justify-content: center;
  565. align-items: center;
  566. }
  567. .ot-structures-frame-details .content {
  568. margin: 18px 10%;
  569. max-width: 80%;
  570. }
  571. .ot-structures-frame-details header {
  572. display: -webkit-box;
  573. display: -moz-box;
  574. display: -ms-flexbox;
  575. display: -webkit-flex;
  576. display: flex;
  577. flex-direction: row;
  578. }
  579. .ot-structures-frame-details header .go-back {
  580. margin: 16px;
  581. padding: 4px 8px;
  582. color: #737373;
  583. font-weight: 700;
  584. }
  585. .ot-structures-frame-details header h2 {
  586. font-size: 14px;
  587. flex: 1;
  588. }
  589. .ot-structures-frame-details .structure-header {
  590. display: -webkit-box;
  591. display: -moz-box;
  592. display: -ms-flexbox;
  593. display: -webkit-flex;
  594. display: flex;
  595. flex-direction: row;
  596. align-items: center;
  597. }
  598. .ot-structures-frame-details .structure-header > * {
  599. margin: 12px;
  600. }
  601. .ot-structures-frame-details .structure-header .logo {
  602. height: 60px;
  603. width: auto;
  604. }
  605. .ot-structures-frame-details .structure-header h3 {
  606. font-size: 22px;
  607. color: #e4611b;
  608. font-weight: 750;
  609. flex: 1;
  610. }
  611. .ot-structures-frame-details .structure-header .social {
  612. display: -webkit-box;
  613. display: -moz-box;
  614. display: -ms-flexbox;
  615. display: -webkit-flex;
  616. display: flex;
  617. flex-direction: row;
  618. align-items: center;
  619. }
  620. .ot-structures-frame-details .structure-header .social a {
  621. font-size: 22px;
  622. padding: 4px 6px;
  623. color: #808080;
  624. }
  625. .ot-structures-frame-details .structure-practices {
  626. display: flex;
  627. flex-direction: row;
  628. width: 100%;
  629. margin: 6px auto;
  630. padding-bottom: 6px;
  631. flex-wrap: wrap;
  632. min-height: 18px;
  633. justify-content: center;
  634. border-bottom: solid 1px #a6a6a6;
  635. }
  636. .ot-structures-frame-details .structure-practice {
  637. background-color: #d9d9d9;
  638. color: #262626;
  639. font-size: 11px;
  640. margin: 1px 4px 1px 0;
  641. padding: 1px 5px 3px 5px;
  642. height: 16px;
  643. border-radius: 6px;
  644. }
  645. .ot-structures-frame-details .illustration-container {
  646. display: -webkit-box;
  647. display: -moz-box;
  648. display: -ms-flexbox;
  649. display: -webkit-flex;
  650. display: flex;
  651. flex-direction: row;
  652. margin: 40px 20%;
  653. justify-content: center;
  654. }
  655. .ot-structures-frame-details .illustration-container img {
  656. max-height: 180px;
  657. width: auto;
  658. }
  659. .ot-structures-frame-details .practices-tags {
  660. display: -webkit-box;
  661. display: -moz-box;
  662. display: -ms-flexbox;
  663. display: -webkit-flex;
  664. display: flex;
  665. flex-direction: row;
  666. }
  667. .ot-structures-frame-details .details {
  668. display: -webkit-box;
  669. display: -moz-box;
  670. display: -ms-flexbox;
  671. display: -webkit-flex;
  672. display: flex;
  673. flex-direction: row;
  674. max-width: 100%;
  675. color: #666666;
  676. }
  677. .ot-structures-frame-details .details h4 {
  678. font-size: 18px;
  679. font-weight: 750;
  680. border-bottom: solid 1px #e4611b;
  681. align-self: flex-start;
  682. color: #666666;
  683. margin: 8px 0;
  684. }
  685. .ot-structures-frame-details .details .description {
  686. display: -webkit-box;
  687. display: -moz-box;
  688. display: -ms-flexbox;
  689. display: -webkit-flex;
  690. display: flex;
  691. flex-direction: column;
  692. border-right: solid 2px #e4611b;
  693. width: 45%;
  694. padding-right: 5%;
  695. }
  696. .ot-structures-frame-details .details .contact {
  697. display: -webkit-box;
  698. display: -moz-box;
  699. display: -ms-flexbox;
  700. display: -webkit-flex;
  701. display: flex;
  702. flex-direction: column;
  703. width: 45%;
  704. padding-left: 5%;
  705. }
  706. .ot-structures-frame-details .details .contact td {
  707. background: none;
  708. border: none;
  709. width: 80%;
  710. }
  711. .ot-structures-frame-details .details .contact td:first-child {
  712. width: 20%;
  713. color: #e4611b;
  714. }
  715. .ot-structures-frame-details .spot-on-bar {
  716. display: -webkit-box;
  717. display: -moz-box;
  718. display: -ms-flexbox;
  719. display: -webkit-flex;
  720. display: flex;
  721. flex-direction: row;
  722. }
  723. .ot-structures-frame-details #structure-details-map {
  724. height: 300px;
  725. margin-top: 45px;
  726. }
  727. /*# sourceMappingURL=global.css.map */