styles.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. /*
  2. * Original Template Name: Developer
  3. * Original Author: Xiaoying Riley
  4. * Twitter: @3rdwave_themes
  5. * Website: http://themes.3rdwavemedia.com/
  6. * Modified by: HTMLy Team
  7. */
  8. /* ======= Base ======= */
  9. body {
  10. font-family: 'Lato', arial, sans-serif;
  11. color: #434343;
  12. background: #dae3e7;
  13. font-size: 16px;
  14. -webkit-font-smoothing: antialiased;
  15. -moz-osx-font-smoothing: grayscale;
  16. }
  17. h1,
  18. h2,
  19. h3,
  20. h4,
  21. h5,
  22. h6 {
  23. font-family: 'Montserrat', sans-serif;
  24. font-weight: 700;
  25. color: #5f6b77;
  26. }
  27. .h1, h1 {
  28. font-size: 24px;
  29. }
  30. .h2, h2 {
  31. font-size: 20px;
  32. }
  33. .h3, h3 {
  34. font-size: 18px;
  35. }
  36. .h4, h4 {
  37. font-size: 16px;
  38. }
  39. .h5, h5 {
  40. font-size: 14px;
  41. }
  42. .h6, h6 {
  43. font-size: 12px;
  44. }
  45. p {
  46. margin:1em 0;
  47. }
  48. .aside p, .related p {
  49. margin: 0 0 10px 0;
  50. }
  51. blockquote {
  52. margin:1em 0;
  53. font-size:20px;
  54. font-family: "Source Sans",sans-serif;
  55. }
  56. blockquote p{
  57. margin: 0;
  58. }
  59. img {
  60. display: block;
  61. height: auto;
  62. max-width: 100%;
  63. }
  64. img:hover {
  65. opacity:0.8;
  66. }
  67. a {
  68. color: #337ab7;
  69. -webkit-transition: all 0.4s ease-in-out;
  70. -moz-transition: all 0.4s ease-in-out;
  71. -ms-transition: all 0.4s ease-in-out;
  72. -o-transition: all 0.4s ease-in-out;
  73. }
  74. a:hover {
  75. text-decoration: underline;
  76. }
  77. a:focus {
  78. text-decoration: none;
  79. }
  80. .btn,
  81. a.btn {
  82. -webkit-transition: all 0.4s ease-in-out;
  83. -moz-transition: all 0.4s ease-in-out;
  84. -ms-transition: all 0.4s ease-in-out;
  85. -o-transition: all 0.4s ease-in-out;
  86. font-family: 'Montserrat', arial, sans-serif;
  87. padding: 5px 10px;
  88. font-size:12px;
  89. }
  90. .btn .fa,
  91. a.btn .fa {
  92. margin-right: 5px;
  93. }
  94. .btn:focus,
  95. a.btn:focus {
  96. color: #fff;
  97. }
  98. a.btn-cta-primary,
  99. .btn-cta-primary {
  100. background: #54ba4e;
  101. border: 1px solid #54ba4e;
  102. color: #fff;
  103. text-transform: uppercase;
  104. font-size:12px;
  105. }
  106. a.btn-cta-primary:hover,
  107. .btn-cta-primary:hover {
  108. background: #49ac43;
  109. border: 1px solid #49ac43;
  110. color: #fff;
  111. }
  112. a.btn-cta-secondary,
  113. .btn-cta-secondary {
  114. background: #479fc8;
  115. border: 1px solid #479fc8;
  116. color: #fff;
  117. text-transform: uppercase;
  118. font-size:12px;
  119. }
  120. a.btn-cta-secondary:hover,
  121. .btn-cta-secondary:hover {
  122. background: #3893bd;
  123. border: 1px solid #3893bd;
  124. color: #fff;
  125. }
  126. .text-highlight {
  127. color: #32383e;
  128. }
  129. .label-theme {
  130. background: #3893bd;
  131. font-size: 12px;
  132. }
  133. a.dotted-link {
  134. border-bottom: 1px dotted #778492;
  135. color: #778492;
  136. }
  137. a.dotted-link:hover {
  138. text-decoration: none;
  139. color: #49515a;
  140. }
  141. pre {
  142. margin:1em 0;
  143. }
  144. .tags {
  145. margin-right:5px;
  146. }
  147. .tags a {
  148. background-color: #f9f2f4;
  149. border-radius: 4px;
  150. color: #c7254e;
  151. padding: 2px 4px;
  152. }
  153. /*-------------------------
  154. Table
  155. --------------------------*/
  156. table {
  157. border: none;
  158. width: 100%;
  159. color: #333333;
  160. border: 1px solid #ddd;
  161. margin: 1em 0;
  162. white-space: pre-wrap;
  163. word-wrap: break-word;
  164. }
  165. th, td {
  166. padding: 5px 10px;
  167. border: none;
  168. }
  169. th {
  170. border-bottom: 1px solid #ddd;
  171. border-right: 1px solid #ddd;
  172. font-size: 16px;
  173. }
  174. td {
  175. border: 1px solid #ddd;
  176. border-top: none;
  177. border-left: none;
  178. }
  179. /*
  180. iframe {
  181. .header {
  182. padding: 0;
  183. }
  184. }
  185. .iframe-wrapper {
  186. overflow: auto;
  187. -webkit-overflow-scrolling:touch;
  188. }
  189. */
  190. /* ======= Header ======= */
  191. .header {
  192. padding: 30px 0;
  193. background: #f5f5f5;
  194. border-top: 10px solid #778492;
  195. }
  196. .header .btn {
  197. margin-top: 60px;
  198. font-weight: bold;
  199. }
  200. .header .logo {
  201. width:150px;
  202. height:150px;
  203. overflow:hidden;
  204. margin-right:20px;
  205. border-radius: 75px;
  206. }
  207. .header .logo-image {
  208. width:150px;
  209. height:150px;
  210. }
  211. .header .branding .name {
  212. color: #49515a;
  213. font-size: 34px;
  214. margin-bottom: 5px;
  215. margin-top: 15px;
  216. }
  217. .header .branding .name a {
  218. color: #49515a;
  219. }
  220. .header .branding .desc {
  221. color: #778492;
  222. font-family: "Lato", arial, sans-serif;
  223. font-weight: 400;
  224. font-size: 20px;
  225. margin-top: 0;
  226. margin-bottom: 10px;
  227. }
  228. .header .branding .social a {
  229. background: #b0b7bf;
  230. width: 36px;
  231. height: 36px;
  232. display: inline-block;
  233. -webkit-border-radius: 50%;
  234. -moz-border-radius: 50%;
  235. -ms-border-radius: 50%;
  236. -o-border-radius: 50%;
  237. border-radius: 50%;
  238. -moz-background-clip: padding;
  239. -webkit-background-clip: padding-box;
  240. background-clip: padding-box;
  241. color: #fff;
  242. text-align: center;
  243. }
  244. .header .branding .social a:hover {
  245. background: #778492;
  246. }
  247. .header .branding .social a .fa {
  248. font-size: 20px;
  249. padding-top: 8px;
  250. }
  251. .header .menu .nav a {
  252. color: #778492;
  253. }
  254. .header .menu .nav li.active {
  255. background-color:#eee;
  256. }
  257. /*--------------------
  258. Menu and search
  259. --------------------*/
  260. .header .navbar-collapse {
  261. box-shadow: none;
  262. }
  263. .header .main-nav .navbar-toggle {
  264. margin-right: 0;
  265. margin-top: 8px;
  266. padding: 0;
  267. }
  268. .header .main-nav button {
  269. background: rgba(0, 0, 0, 0) none repeat scroll 0 0 padding-box;
  270. border-radius: 0;
  271. color: #fff;
  272. }
  273. .header .main-nav button:focus {
  274. outline: 0 none;
  275. }
  276. .header .main-nav button:hover {
  277. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  278. }
  279. .header .main-nav button .icon-bar {
  280. background-color: #6f7581;
  281. height: 3px;
  282. }
  283. .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
  284. background-color: #eee;
  285. color: #434343;
  286. outline: 0 none;
  287. text-decoration: none;
  288. }
  289. .dropdown-menu.searchbox {
  290. position: absolute;
  291. right: 0;
  292. text-align: center;
  293. margin: auto;
  294. }
  295. .navbar-form {
  296. padding: 5px 25px;
  297. border: none;
  298. width: 250px;
  299. }
  300. .navbar-form.search .form-control {
  301. height: 35px;
  302. background: #fff;
  303. color: #666666;
  304. font-size: 11px;
  305. }
  306. .navbar-form.search .btn-submit {
  307. width: 35px;
  308. height: 35px;
  309. border: none;
  310. background: #A8BEE3;
  311. border-radius:0 4px 4px 0;
  312. }
  313. .navbar-form.search .btn-submit:hover {
  314. background: #658BCD;
  315. }
  316. .navbar-form.search .btn {
  317. font-weight: bold;
  318. margin-top: 0px;
  319. }
  320. .search-wrapper {
  321. padding-right:15px;
  322. padding-left:15px;
  323. }
  324. /* ======= Sections======= */
  325. .sections-wrapper {
  326. padding-top: 60px;
  327. padding-bottom: 30px;
  328. }
  329. .section {
  330. margin-bottom: 30px;
  331. }
  332. .comment-wrapper.section {
  333. margin-bottom: 30px;
  334. }
  335. .section .section-inner {
  336. background: #fff;
  337. padding: 30px;
  338. }
  339. .section .heading {
  340. margin-top: 0;
  341. margin-bottom: 20px;
  342. color: #5f6b77;
  343. font-size: 20px;
  344. }
  345. .section .content .more-link .fa {
  346. margin-right: 5px;
  347. font-size: 14px;
  348. }
  349. .breadcrumb {
  350. background-color: #fff;
  351. border-radius: 0px;
  352. list-style: outside none none;
  353. margin-bottom: 20px;
  354. padding: 10px 30px;
  355. font-family: "Source Sans",sans-serif;
  356. }
  357. /* About Section */
  358. /* Latest Section */
  359. .post .item {
  360. margin-bottom: 10px;
  361. }
  362. .post .item .title .label {
  363. margin-left: 5px;
  364. font-size: 12px;
  365. }
  366. .post .item .title a {
  367. color: #778492;
  368. }
  369. .post .item .title a:hover {
  370. color: #5f6b77;
  371. }
  372. .post .item .project-image:hover {
  373. -webkit-opacity: 0.8;
  374. -moz-opacity: 0.8;
  375. opacity: 0.8;
  376. }
  377. .post .item .title {
  378. margin-bottom: 10px;
  379. font-size: 24px;
  380. margin-top: 0;
  381. }
  382. .post .item .meta{
  383. color: #778492;
  384. font-family: "Source Sans",sans-serif;
  385. font-size: 16px;
  386. font-weight: 400;
  387. margin:0;
  388. }
  389. .post .item img {
  390. margin: 1em 0px;
  391. }
  392. .post .featured-image img {
  393. margin-top:0;
  394. }
  395. .post .item .info, .post .item .desc {
  396. margin-bottom: 1em;
  397. }
  398. .inpost .post .item .desc {
  399. margin:0;
  400. }
  401. .post .featured {
  402. margin-bottom: 1em;
  403. }
  404. .post .featured-image {
  405. position: relative;
  406. }
  407. .item .quote .fa-quote-left {
  408. color: #337ab7;
  409. margin-right: 15px;
  410. }
  411. .item .quote .fa-quote-right {
  412. color: #337ab7;
  413. margin-left: 15px;
  414. }
  415. .featured-quote blockquote {
  416. font-size: 26px;
  417. margin:0;
  418. border:none;
  419. }
  420. .featured-link {
  421. font-size:26px;
  422. font-family: "Source Sans",sans-serif;
  423. }
  424. .featured-link .fa {
  425. margin-right:5px;
  426. }
  427. .tab {
  428. margin-bottom: 20px;
  429. }
  430. .pager {
  431. margin-top:0px;
  432. margin-bottom: 30px;
  433. }
  434. .in-profile .pager {
  435. margin-bottom:0px;
  436. }
  437. /* share section */
  438. .share{
  439. padding-top:0;
  440. }
  441. .in-post .share {
  442. padding-top:0;
  443. }
  444. .share a{
  445. color: #479fc8;
  446. padding:4px;
  447. vertical-align: middle;
  448. display:inline-block;
  449. line-height: 1.42857;
  450. margin-bottom: 0
  451. }
  452. /* recent-posts Section */
  453. .recent-posts .item {
  454. margin-bottom: 20px;
  455. }
  456. .recent-posts .item .title {
  457. font-size: 16px;
  458. line-height: 1.3;
  459. }
  460. .recent-posts .item .title a {
  461. color: #778492;
  462. }
  463. .recent-posts .item .title a:hover {
  464. color: #5f6b77;
  465. }
  466. .recent-posts .item:last-child {
  467. margin-bottom: 0;
  468. }
  469. /* archive Section */
  470. ul.archivegroup {
  471. margin: 0;
  472. padding: 0;
  473. }
  474. .archivegroup .expanded ul {
  475. display: block;
  476. }
  477. .archivegroup .collapsed ul {
  478. display: none;
  479. }
  480. .archivegroup li.expanded, .archivegroup li.collapsed {
  481. list-style: outside none none;
  482. }
  483. ul.month {
  484. list-style:none;
  485. padding:0;
  486. margin: 0.25em 0 0.25em 1.3em;
  487. }
  488. /* Category list section */
  489. .category-list ul {
  490. padding-left:20px;
  491. }
  492. /* Tag section */
  493. .tag-cloud a {
  494. background: #fafafa;
  495. border: 1px solid #f0f0f0;
  496. border-radius: 4px;
  497. font-size: 14px;
  498. line-height: 37px;
  499. padding: 5px 10px;
  500. margin-right:5px;
  501. color:#778492;
  502. }
  503. .tag-cloud a:hover {
  504. color: #49515a;
  505. }
  506. /* Related section */
  507. .related .item {
  508. margin-bottom: 0px;
  509. }
  510. .related .item .title {
  511. font-size: 16px;
  512. margin-top: 0;
  513. }
  514. .related .item .title .label {
  515. font-size: 12px;
  516. margin-left: 5px;
  517. }
  518. .related .item .title a {
  519. color: #778492;
  520. }
  521. .related .item .title a:hover {
  522. color: #5f6b77;
  523. }
  524. .related .item .project-image:hover {
  525. opacity: 0.8;
  526. }
  527. .related .divider {
  528. margin-bottom: 60px;
  529. }
  530. /* List section */
  531. .list ul li {
  532. margin-bottom: 10px;
  533. }
  534. .list ul li .fa {
  535. margin-right: 5px;
  536. }
  537. .list ul li a {
  538. color: #778492;
  539. }
  540. .list ul li a:hover {
  541. color: #49515a;
  542. }
  543. /* ======= Footer ======= */
  544. .footer {
  545. background: #32383e;
  546. color: #fff;
  547. padding: 10px 0;
  548. font-size: 14px;
  549. }
  550. .footer .copyright {
  551. line-height: 1.6;
  552. color: #a1aab4;
  553. font-size: 14px;
  554. }
  555. .footer p {
  556. margin:0;
  557. color: #a1aab4;
  558. }
  559. .footer a {
  560. color: #fb866a;
  561. }
  562. .footer .fa-heart {
  563. color: #fb866a;
  564. }
  565. /* Extra small devices (phones, less than 768px) */
  566. @media (max-width: 767px) {
  567. .header {
  568. text-align: center;
  569. }
  570. .header .logo {
  571. float: none !important;
  572. margin: 0 auto;
  573. }
  574. .header .branding {
  575. float: none !important;
  576. text-align: center;
  577. }
  578. .header .btn {
  579. margin-top: 30px;
  580. float: none !important;
  581. }
  582. .sections-wrapper {
  583. padding-top: 30px;
  584. padding-bottom: 0px;
  585. }
  586. .project-image {
  587. margin-bottom: 15px;
  588. }
  589. .main-nav .navbar-toggle, #navbar {
  590. float:none!important;
  591. text-align: center;
  592. }
  593. }
  594. /* Small devices (tablets, 768px and up) */
  595. /* Medium devices (desktops, 992px and up) */
  596. /* Large devices (large desktops, 1200px and up) */
  597. /* Ex-Large devices (large desktops, 1200px and up) */
  598. @media (min-width: 1400px) {
  599. .container {
  600. width: 1360px;
  601. }
  602. }
  603. .pagination {
  604. margin-top:0;
  605. margin-bottom:15px;
  606. }
  607. .feed-link {
  608. display:inline;
  609. margin:0 0 0 10px;
  610. float:right;
  611. }
  612. #more {
  613. display:block;
  614. height:1rem;
  615. margin-top:-1rem;
  616. box-shadow: none;
  617. border: none;
  618. }
  619. .social-logo a:before {
  620. padding-top:6px;
  621. }