style.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. @import url("font-awesome.min.css");
  2. @import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
  3. /*
  4. Solarize by TEMPLATED
  5. templated.co @templatedco
  6. Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
  7. */
  8. /* Basic */
  9. body {
  10. background: #222222;
  11. }
  12. body.loading * {
  13. -moz-transition: none !important;
  14. -webkit-transition: none !important;
  15. -o-transition: none !important;
  16. -ms-transition: none !important;
  17. transition: none !important;
  18. -moz-animation: none !important;
  19. -webkit-animation: none !important;
  20. -o-animation: none !important;
  21. -ms-animation: none !important;
  22. animation: none !important;
  23. }
  24. body, input, select, textarea {
  25. color: #555555;
  26. font-family: 'Open Sans', sans-serif;
  27. font-size: 12pt;
  28. font-weight: 300;
  29. line-height: 1.65em;
  30. }
  31. a {
  32. color: #82b440;
  33. text-decoration: underline;
  34. }
  35. strong, b {
  36. font-weight: 700;
  37. }
  38. em, i {
  39. font-style: italic;
  40. }
  41. p, ul, ol, dl, table, blockquote {
  42. margin: 0 0 2em 0;
  43. }
  44. p {
  45. line-height: 1.8em;
  46. }
  47. p.medium {
  48. font-size: 1.4em;
  49. }
  50. h1, h2, h3, h4, h5, h6 {
  51. color: inherit;
  52. font-weight: 700;
  53. }
  54. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  55. color: inherit;
  56. text-decoration: none;
  57. }
  58. h2 {
  59. font-size: 1.5em;
  60. }
  61. h3 {
  62. font-size: 1.25em;
  63. }
  64. sub {
  65. font-size: 0.8em;
  66. position: relative;
  67. top: 0.5em;
  68. }
  69. sup {
  70. font-size: 0.8em;
  71. position: relative;
  72. top: -0.5em;
  73. }
  74. hr {
  75. border-top: solid 1px #82b440;
  76. border: 0;
  77. margin-bottom: 1.5em;
  78. }
  79. blockquote {
  80. border-left: solid 0.5em #82b440;
  81. font-style: italic;
  82. padding: 1em 0 1em 2em;
  83. }
  84. section.special, article.special {
  85. text-align: center;
  86. }
  87. header.major {
  88. padding-bottom: 3em;
  89. text-align: center;
  90. text-transform: uppercase;
  91. }
  92. header.major h2 {
  93. font-size: 2.6em;
  94. font-weight: 700;
  95. }
  96. header.major .byline {
  97. display: block;
  98. padding-top: 1em;
  99. letter-spacing: 1px;
  100. font-size: 1.4em;
  101. }
  102. footer > :last-child {
  103. margin-bottom: 0;
  104. }
  105. footer.major {
  106. padding-top: 3em;
  107. }
  108. /* Form */
  109. input[type="text"],
  110. input[type="password"],
  111. input[type="email"],
  112. textarea {
  113. -moz-appearance: none;
  114. -webkit-appearance: none;
  115. -o-appearance: none;
  116. -ms-appearance: none;
  117. appearance: none;
  118. background: none;
  119. border: solid 1px #82b440;
  120. color: inherit;
  121. display: block;
  122. outline: 0;
  123. padding: 0.75em;
  124. text-decoration: none;
  125. width: 100%;
  126. }
  127. input[type="text"]:focus,
  128. input[type="password"]:focus,
  129. input[type="email"]:focus,
  130. textarea:focus {
  131. border-color: #82b440;
  132. }
  133. input[type="text"],
  134. input[type="password"],
  135. input[type="email"] {
  136. line-height: 1em;
  137. }
  138. ::-webkit-input-placeholder {
  139. color: inherit;
  140. opacity: 0.5;
  141. position: relative;
  142. top: 3px;
  143. }
  144. :-moz-placeholder {
  145. color: inherit;
  146. opacity: 0.5;
  147. }
  148. ::-moz-placeholder {
  149. color: inherit;
  150. opacity: 0.5;
  151. }
  152. :-ms-input-placeholder {
  153. color: inherit;
  154. opacity: 0.5;
  155. }
  156. .formerize-placeholder {
  157. color: rgba(85, 85, 85, 0.5) !important;
  158. }
  159. /* Image */
  160. .image {
  161. border: 0;
  162. position: relative;
  163. }
  164. .image.fit {
  165. display: block;
  166. }
  167. .image.fit img {
  168. display: block;
  169. width: 100%;
  170. }
  171. .image.feature {
  172. display: block;
  173. margin: 0 0 2em 0;
  174. }
  175. .image.feature img {
  176. display: block;
  177. width: 100%;
  178. }
  179. /* Icon */
  180. .icon {
  181. position: relative;
  182. }
  183. .icon:before {
  184. content: "";
  185. -moz-osx-font-smoothing: grayscale;
  186. -webkit-font-smoothing: antialiased;
  187. font-family: FontAwesome;
  188. font-style: normal;
  189. font-weight: normal;
  190. text-transform: none !important;
  191. }
  192. .icon > .label {
  193. display: none;
  194. }
  195. /* Lists */
  196. ol.default {
  197. list-style: decimal;
  198. padding-left: 1.25em;
  199. }
  200. ol.default li {
  201. padding-left: 0.25em;
  202. }
  203. ul.default {
  204. margin: 0;
  205. padding: 0;
  206. list-style: none;
  207. }
  208. ul.default li {
  209. padding: 0.40em 0em;
  210. }
  211. ul.icons {
  212. cursor: default;
  213. padding-bottom: 2em;
  214. }
  215. ul.icons li {
  216. display: inline-block;
  217. line-height: 1em;
  218. padding: 0.5em 1em;
  219. }
  220. ul.icons li:first-child {
  221. padding-left: 0;
  222. }
  223. ul.icons li span {
  224. display: none;
  225. }
  226. ul.icons li a {
  227. text-decoration: none;
  228. font-size: 2em;
  229. color: inherit;
  230. opacity: 0.2;
  231. -moz-transition: all 0.35s ease-in-out;
  232. -webkit-transition: all 0.35s ease-in-out;
  233. -o-transition: all 0.35s ease-in-out;
  234. -ms-transition: all 0.35s ease-in-out;
  235. transition: all 0.35s ease-in-out;
  236. }
  237. ul.icons li a:hover {
  238. color: inherit;
  239. opacity: 1;
  240. }
  241. ul.actions {
  242. cursor: default;
  243. }
  244. ul.actions:last-child {
  245. margin-bottom: 0;
  246. }
  247. ul.actions li {
  248. display: inline-block;
  249. padding: 0 0 0 1.5em;
  250. }
  251. ul.actions li:first-child {
  252. padding: 0;
  253. }
  254. ul.actions.vertical li {
  255. display: block;
  256. padding: 1.5em 0 0 0;
  257. }
  258. ul.actions.vertical li:first-child {
  259. padding: 0;
  260. }
  261. ul.special-icons {
  262. margin: 0em;
  263. padding: 0em;
  264. }
  265. ul.special-icons > li {
  266. position: relative;
  267. padding: 0.50em 0em 0.50em 0em;
  268. }
  269. ul.special-icons > li:before {
  270. position: absolute;
  271. left: 0;
  272. top: 2em;
  273. display: block;
  274. background: none;
  275. font-size: 2em;
  276. border-radius: 5px;
  277. }
  278. ul.special-icons > li:first-child {
  279. border-top: none;
  280. }
  281. ul.special-icons h3 {
  282. margin-bottom: 0.80em;
  283. line-height: 2em;
  284. text-transform: uppercase;
  285. font-weight: 700;
  286. font-size: 1.2em;
  287. }
  288. ul.special-icons span {
  289. line-height: 190%;
  290. }
  291. ul.special-icons .fa {
  292. float: left;
  293. display: inline-block;
  294. padding-right: 1em;
  295. font-size: 1.4em;
  296. color: #82b440;
  297. }
  298. ul.special-icons p {
  299. padding-left: 2.7em;
  300. }
  301. /* Tables */
  302. table {
  303. width: 100%;
  304. }
  305. table.default {
  306. width: 100%;
  307. }
  308. table.default tbody tr {
  309. border-bottom: solid 1px #82b440;
  310. }
  311. table.default td {
  312. padding: 0.5em 1em 0.5em 1em;
  313. }
  314. table.default th {
  315. font-weight: 700;
  316. padding: 0.5em 1em 0.5em 1em;
  317. text-align: left;
  318. }
  319. table.default thead {
  320. background: #555555;
  321. color: #fff;
  322. }
  323. /* Button */
  324. input[type="submit"],
  325. input[type="reset"],
  326. input[type="button"],
  327. .button {
  328. -moz-appearance: none;
  329. -webkit-appearance: none;
  330. -o-appearance: none;
  331. -ms-appearance: none;
  332. appearance: none;
  333. background: none;
  334. border-radius: none;
  335. border: 2px solid;
  336. border-color: #82b440;
  337. color: #82b440;
  338. cursor: pointer;
  339. display: inline-block;
  340. padding: 0.90em 1.2em;
  341. letter-spacing: 1px;
  342. text-align: center;
  343. text-decoration: none;
  344. text-transform: uppercase;
  345. font-size: 1.4em;
  346. -moz-transition: all 0.35s ease-in-out;
  347. -webkit-transition: all 0.35s ease-in-out;
  348. -o-transition: all 0.35s ease-in-out;
  349. -ms-transition: all 0.35s ease-in-out;
  350. transition: all 0.35s ease-in-out;
  351. }
  352. input[type="submit"]:hover,
  353. input[type="reset"]:hover,
  354. input[type="button"]:hover,
  355. .button:hover {
  356. background: #82b440;
  357. color: white;
  358. }
  359. input[type="submit"].alt,
  360. input[type="reset"].alt,
  361. input[type="button"].alt,
  362. .button.alt {
  363. border-color: inherit;
  364. color: inherit;
  365. }
  366. input[type="submit"].alt:hover,
  367. input[type="reset"].alt:hover,
  368. input[type="button"].alt:hover,
  369. .button.alt:hover {
  370. background: white;
  371. color: #82b440;
  372. }
  373. input[type="submit"].fit,
  374. input[type="reset"].fit,
  375. input[type="button"].fit,
  376. .button.fit {
  377. width: 100%;
  378. }
  379. input[type="submit"].small,
  380. input[type="reset"].small,
  381. input[type="button"].small,
  382. .button.small {
  383. font-size: 0.8em;
  384. }
  385. /* Wrapper */
  386. .wrapper {
  387. padding: 6em 0em 4em 0em;
  388. }
  389. .wrapper.style1 {
  390. padding: 0em;
  391. background: #222222 url('images/banner.jpg') no-repeat;
  392. background-size: cover;
  393. }
  394. .wrapper.style2,
  395. .wrapper.evenpart {
  396. background: #f2f2f2;
  397. }
  398. .wrapper.style2 .major,
  399. .wrapper.evenpart .major {
  400. text-align: left !important;
  401. }
  402. .wrapper.style2 .major h2,
  403. .wrapper.evenpart .major h2 {
  404. display: block;
  405. margin-bottom: 0.70em;
  406. letter-spacing: 1px;
  407. line-height: 1.4em;
  408. text-transform: uppercase;
  409. font-size: 1.8em;
  410. font-weight: 400;
  411. }
  412. .wrapper.style2 .major .byline,
  413. .wrapper.evenpart .major .byline {
  414. letter-spacing: normal;
  415. line-height: 1.6em;
  416. text-transform: capitalize;
  417. font-size: 1.4em;
  418. }
  419. .wrapper.style2 h3,
  420. .wrapper.evenpart h3 {
  421. display: block;
  422. margin-bottom: 1em;
  423. letter-spacing: 1px;
  424. line-height: 1.4em;
  425. text-transform: uppercase;
  426. font-size: 1.6em;
  427. font-weight: 400;
  428. }
  429. .wrapper.style3,
  430. .wrapper.cta {
  431. padding-bottom: 6em;
  432. background: #82b440;
  433. text-align: center;
  434. color: white;
  435. }
  436. .wrapper.style3 .container,
  437. .wrapper.cta .container {
  438. padding-left: 6em;
  439. padding-right: 6em;
  440. }
  441. .wrapper.style3 p,
  442. .wrapper.cta p {
  443. font-size: 1.6em;
  444. }
  445. .wrapper.style4,
  446. .wrapper.plain {
  447. background: white;
  448. }
  449. .wrapper.style5,
  450. .wrapper.portals {
  451. background: #82b440;
  452. text-align: center;
  453. color: white;
  454. }
  455. .wrapper.style5 .image,
  456. .wrapper.portals .image {
  457. display: block;
  458. width: 60%;
  459. margin: 0em auto 2em auto;
  460. }
  461. .wrapper.style5 .image img,
  462. .wrapper.portals .image img {
  463. border-radius: 50%;
  464. border: 10px solid;
  465. border-color: white;
  466. }
  467. /* Header */
  468. #header {
  469. color: white;
  470. height: 4em;
  471. background: rgba(0, 0, 0, 0.5);
  472. }
  473. #header .container {
  474. position: relative;
  475. }
  476. .homepage #logo {
  477. display: none;
  478. }
  479. .homepage #nav {
  480. position: static;
  481. right: none;
  482. text-align: center;
  483. }
  484. #logo {
  485. line-height: 2em;
  486. letter-spacing: 2px;
  487. text-transform: uppercase;
  488. font-size: 2em;
  489. font-weight: 400;
  490. }
  491. #logo h1 {
  492. display: inline-block;
  493. margin: 0;
  494. padding: 0;
  495. }
  496. #logo a {
  497. color: inherit;
  498. }
  499. #nav {
  500. position: absolute;
  501. top: 0;
  502. right: 0;
  503. }
  504. #nav > ul {
  505. margin: 0;
  506. }
  507. #nav > ul > li {
  508. border-radius: 4px;
  509. display: inline-block;
  510. margin-left: 0.5em;
  511. padding: 0 0.5em;
  512. }
  513. #nav > ul > li a {
  514. color: inherit;
  515. line-height: 4em;
  516. letter-spacing: 2px;
  517. text-decoration: none;
  518. text-transform: uppercase;
  519. font-weight: 400;
  520. font-size: 1em;
  521. }
  522. #nav > ul > li:first-child {
  523. margin-left: 0;
  524. }
  525. #nav > ul > li.active a {
  526. color: white;
  527. }
  528. #nav > ul > li > ul {
  529. display: none;
  530. }
  531. /* Dropotron */
  532. .dropotron {
  533. top: 2em;
  534. background: rgba(32, 32, 32, 0.75);
  535. border-radius: 4px;
  536. color: inherit;
  537. min-width: 12em;
  538. padding: 1em 0;
  539. color: white;
  540. }
  541. .dropotron > li {
  542. line-height: 2em;
  543. padding: 0 1em;
  544. }
  545. .dropotron > li > a {
  546. color: inherit;
  547. letter-spacing: 2px;
  548. text-decoration: none;
  549. text-transform: uppercase;
  550. }
  551. .dropotron > li.active > a, .dropotron > li:hover > a {
  552. color: inherit;
  553. }
  554. .dropotron.level-0 {
  555. border-radius: 0 0 4px 4px;
  556. font-size: 1em;
  557. margin-left: -0.5em;
  558. }
  559. /* Banner */
  560. #banner {
  561. padding: 6em 0em 3em 0em;
  562. text-align: center;
  563. text-transform: uppercase;
  564. color: white;
  565. }
  566. #banner .container {
  567. padding: 0em 8em;
  568. }
  569. #banner h2 {
  570. display: inline-block;
  571. padding: 0.50em 0.30em;
  572. background: #82b440;
  573. font-size: 3em;
  574. font-weight: 400;
  575. }
  576. #banner span, #banner p {
  577. display: block;
  578. letter-spacing: 1px;
  579. text-transform: uppercase;
  580. font-size: 1.6em;
  581. font-weight: 300;
  582. }
  583. #banner span {
  584. padding: 1em 0em;
  585. }
  586. /* Main */
  587. #main {
  588. padding: 4em 0;
  589. }
  590. #main #content .major, #main #sidebar .major {
  591. text-align: left;
  592. }
  593. #main #sidebar section {
  594. margin-top: 4em;
  595. }
  596. #main #sidebar section:first-child {
  597. margin-top: 0;
  598. }
  599. #main #sidebar .major {
  600. padding-bottom: 2em;
  601. }
  602. #main #sidebar .major h2 {
  603. font-size: 1.8em;
  604. }
  605. /* Footer */
  606. #footer {
  607. padding: 6em 0 2em 0;
  608. text-align: center;
  609. color: white;
  610. }
  611. #footer hr {
  612. border-bottom: 1px solid;
  613. border-color: inherit;
  614. opacity: .05;
  615. }
  616. #footer .major h2 {
  617. color: inherit;
  618. }
  619. #footer .major .byline {
  620. color: inherit;
  621. opacity: .4;
  622. }
  623. #footer .copyright {
  624. margin-top: 3em;
  625. text-align: center;
  626. }
  627. /* Copyright */
  628. #copyright {
  629. position: relative;
  630. text-transform: uppercase;
  631. text-align: center;
  632. padding: 3em 0em 3em 0em;
  633. color: inherit;
  634. opacity: .40;
  635. }
  636. #copyright a {
  637. text-decoration: none;
  638. color: inherit;
  639. }
  640. /* Extra */
  641. #extra1 h2 {
  642. display: block;
  643. margin-bottom: 1em;
  644. letter-spacing: 1px;
  645. line-height: 1.4em;
  646. text-transform: uppercase;
  647. font-size: 1.8em;
  648. font-weight: 400;
  649. }
  650. #extra1 h3 {
  651. display: block;
  652. margin-bottom: 1em;
  653. letter-spacing: 1px;
  654. line-height: 1.4em;
  655. text-transform: uppercase;
  656. font-size: 1.6em;
  657. font-weight: 400;
  658. }
  659. /* Team */
  660. #team h3 {
  661. margin-bottom: 0.50em;
  662. letter-spacing: 2px;
  663. text-transform: uppercase;
  664. font-weight: 700;
  665. }