Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!

main.css

By: Mohammad-Kamal on Feb 3rd, 2014  |  syntax: CSS  |  size: 16.55 KB  |  views: 67  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*
  2. **
  3. ** The file with .less extension has been provided for reference to be used by other developers. Do not touch it if you don't know what it is.
  4. **
  5. ** Main Stylesheet Document of the theme
  6. ** This contains basic Structural Details, Styling of the theme.
  7. */
  8. /* Basic Containers
  9. -------------------------------------------------*/
  10. body {
  11.   font-family: "Roboto", Arial;
  12. }
  13. .container {
  14.   width: 1100px;
  15.   margin: auto;
  16. }
  17. #page {
  18.   position: relative;
  19.   z-index: 999;
  20.   margin: auto;
  21. }
  22. #content {
  23.   background: rgba(230, 225, 196, 0.9);
  24.   padding: 15px;
  25.   word-wrap: break-word;
  26.   -ms-word-wrap: break-word;
  27. }
  28. .blog #content {
  29.   padding-left: 30px;
  30. }
  31. /* Links
  32. ------------------------------------------------- */
  33. a {
  34.   color: #865e18;
  35. }
  36. a:hover,
  37. a:focus,
  38. a:active {
  39.   color: #6e5730;
  40. }
  41. /* HEADER
  42. --------------------------------------------------*/
  43. #header-image {
  44.   width: 100%;
  45.   position: fixed;
  46.   min-height: 400px;
  47.   z-index: 1;
  48. }
  49. #header-image img {
  50.   filter: blur(5px);
  51.   -webkit-filter: blur(5px);
  52.   -moz-filter: blur(5px);
  53.   -o-filter: blur(5px);
  54.   -ms-filter: blur(5px);
  55. }
  56. #header-image:after {
  57.   content: "";
  58.   background: url(../images/overlay.png) repeat;
  59.   top: 0;
  60.   left: 0;
  61.   bottom: 0;
  62.   right: 0;
  63.   position: absolute;
  64.   z-index: 1;
  65.   border-bottom: solid 9px #000000;
  66. }
  67. header {
  68.   text-align: center;
  69.   /* padding: 20px; */
  70.  
  71. }
  72. header .site-title a {
  73.   text-decoration: none;
  74.   font-size: 48px;
  75.   font-family: Roboto, Helvetica, sans-serif;
  76.   font-weight: lighter;
  77.   text-shadow: 0px 0px 10px #888;
  78. }
  79. header .site-description {
  80.   font-size: 18px;
  81.   font-weight: lighter;
  82. }
  83. header #social-icons img {
  84.   width: 40px;
  85.   padding-top: 30px;
  86.   padding-right: 5px;
  87.   transition: all 0.4s ease;
  88.   -webkit-transition: all 0.4s ease;
  89.   -o-transition: all 0.4s ease;
  90. }
  91. header #social-icons img:hover {
  92.   transform: rotate(10deg) scale(1.04);
  93.   -webkit-transform: rotate(10deg) scale(1.1);
  94.   -moz-transform: rotate(10deg) scale(1.1);
  95. }
  96. /* Main Navigation
  97. _______________________________________________*/
  98. #nav-wrapper {
  99.   width: 1100px;
  100.   margin: auto;
  101.   text-align: center;
  102.   margin-top: 100px;
  103. }
  104. .main-navigation {
  105.   display: inline-block;
  106.   background: #100d0a;
  107.   border: solid 3px #211e1b;
  108.   clear: both;
  109.   margin: auto;
  110.   margin-bottom: 20px;
  111.   height: auto;
  112.   text-align: left;
  113. }
  114. .main-navigation a {
  115.   color: #5e5340;
  116.   padding: 25px 15px;
  117. }
  118. .main-navigation a:hover {
  119.   color: #7a5a24;
  120. }
  121. .main-navigation ul ul {
  122.   background: #170d03;
  123.   top: 4em;
  124. }
  125. .main-navigation ul ul a {
  126.   padding: 5px 10px;
  127. }
  128. .main-navigation ul ul a:hover {
  129.   background: #5e5340;
  130.   color: #100d0a;
  131. }
  132. .main-navigation li:hover > a {
  133.   color: #7a5a24;
  134.   background: #100d0a;
  135. }
  136. .main-navigation ul ul :hover > a {
  137.   background: #5e5340;
  138.   color: #100d0a;
  139. }
  140. /* Slider Styles
  141. ------------------------------------------------*/
  142. .slider-parent {
  143.   position: relative;
  144.   top: -30px;
  145. }
  146. .slider-wrapper {
  147.   width: 1100px;
  148.   border-top: solid 4px #5e5340;
  149.   border-bottom: solid 4px #5e5340;
  150.   margin-bottom: -40px;
  151.   background: #111;
  152.   box-shadow: 1px 1px 5px #4a4a4a;
  153. }
  154. .nivo-caption {
  155.   max-width: 550px;
  156.   min-width: 200px;
  157.   overflow: hidden;
  158.   bottom: 15px;
  159.   left: 10px;
  160.   font-family: Roboto, Arial, sans-serif;
  161.   font-weight: lighter;
  162. }
  163. .nivo-caption a {
  164.   text-decoration: none;
  165. }
  166. .nivo-caption a:hover {
  167.   text-decoration: underline;
  168. }
  169. .nivo-html-caption {
  170.   display: none;
  171. }
  172. div.slide-title {
  173.   font-size: 36px;
  174.   display: block;
  175. }
  176. /*Homepage
  177. --------------------------------------------------*/
  178. h2#page-title,
  179. .archive h1.page-title,
  180. .page h1.entry-title {
  181.   font-size: x-large;
  182.   font-family: Helvetica, Arial, sans-serif;
  183.   font-weight: lighter;
  184.   display: inline-block;
  185.   clear: both;
  186.   text-transform: uppercase;
  187.   text-shadow: #fff 1px 0px 1px;
  188.   padding: 10px 20px;
  189.   color: #2a2622;
  190.   box-shadow: #444444 0px 15px 25px -17px #000000;
  191.   border-bottom: solid 1px #2a2622;
  192.   margin-bottom: 25px;
  193. }
  194. h2#page-title:first-letter,
  195. .archive h1.page-title:first-letter,
  196. .page h1.entry-title:first-letter {
  197.   font-size: xx-large;
  198.   text-shadow: #fff 2px 0px 1px;
  199. }
  200. .article-wrapper {
  201.   white-space: 230px;
  202.   float: left;
  203.   display: block;
  204.   height: 230px;
  205. }
  206. .homepage-article {
  207.   background: #2a2622;
  208.   padding: 10px;
  209.   width: 230px;
  210.   float: left;
  211.   margin-right: 25px;
  212.   max-height: 220px;
  213.   word-wrap: break-word;
  214.   -ms-word-wrap: break-word;
  215. }
  216. .homepage-article .featured-image {
  217.   width: 230px;
  218.   height: 140px;
  219.   overflow: hidden;
  220. }
  221. .homepage-article img {
  222.   transition: 1s all ease;
  223.   -webkit-transition: 1s all ease;
  224.   -moz-transition: 1s all ease;
  225.   -o-transition: 1s all ease;
  226. }
  227. .homepage-article img:hover {
  228.   transform: scale(1.1);
  229.   -webkit-transform: scale(1.1);
  230.   -moz-transform: scale(1.1);
  231. }
  232. .homepage-article h1.entry-title {
  233.   padding-top: 4px;
  234.   text-align: center;
  235.   border-top: solid 1px #4f4f4f;
  236. }
  237. .homepage-article h1.entry-title a {
  238.   font-family: Calibri, Arial, Helvetica, sans-serif;
  239.   color: #e7e2c5;
  240.   text-decoration: none;
  241.   font-size: small;
  242. }
  243. .homepage-article h1.entry-title a:hover {
  244.   color: white;
  245.   position: relative;
  246. }
  247. .homepage-article h1.entry-title a[data-title]:hover:after {
  248.   content: attr(data-title);
  249.   padding: 4px 8px;
  250.   color: #eee;
  251.   position: absolute;
  252.   left: -8px;
  253.   top: -7px;
  254.   z-index: 20px;
  255.   -moz-border-radius: 5px;
  256.   -webkit-border-radius: 5px;
  257.   border-radius: 5px;
  258.   -moz-box-shadow: 0px 0px 4px #222;
  259.   -webkit-box-shadow: 0px 0px 4px #222;
  260.   box-shadow: 0px 0px 4px #222;
  261.   background: black;
  262.   overflow: visible;
  263.   word-wrap: break-word;
  264.   width: 220px;
  265.   display: inline-block;
  266. }
  267. /*Articles, Pages and General Content Section Styling
  268. ----------------------------------------------------------*/
  269. /* Floating Details of the Section, which determines the layout is present in the css/layouts folder */
  270. #primary,
  271. #secondary {
  272.   padding: 10px;
  273.   background: #e4e0c6;
  274.   word-wrap: break-word;
  275.   -ms-word-wrap: break-word;
  276. }
  277. .single-post {
  278.   border-bottom: 1px dotted #6e5730;
  279.   padding-bottom: 20px;
  280. }
  281. .single-post h1.entry-title {
  282.   font-size: xx-large;
  283. }
  284. .single-post h1.entry-title a {
  285.   text-decoration: none;
  286. }
  287. .single-post .featured-image-single {
  288.   width: 80%;
  289.   margin: auto;
  290.   clear: both;
  291.   margin-bottom: 15px;
  292. }
  293. .single-post .featured-image-single img {
  294.   border: solid 10px #ece5be;
  295. }
  296. .entry-meta {
  297.   font-size: 11px;
  298.   color: grey;
  299.   font-family: Helvetica, Arial, sans-serif;
  300.   font-weight: lighter;
  301. }
  302. .entry-meta a {
  303.   color: #6e5730;
  304.   text-decoration: none;
  305. }
  306. .entry-meta a:hover {
  307.   text-decoration: underline;
  308. }
  309. #nav-below {
  310.   background: #cec0b1;
  311.   padding: 10px;
  312. }
  313. /* Sidebar
  314. -------------------------------------------------------*/
  315. #secondary a,
  316. #footer-sidebar a {
  317.   color: #665538;
  318.   text-decoration: none;
  319. }
  320. #secondary a:hover,
  321. #footer-sidebar a:hover {
  322.   color: #9e6400;
  323. }
  324. #secondary .widget-title,
  325. #footer-sidebar .widget-title {
  326.   background: #100d0a;
  327.   color: #7e5b20;
  328.   padding: 10px;
  329.   font-size: 18px;
  330.   margin-bottom: 10px;
  331. }
  332. #secondary .widget_tag_cloud a,
  333. #footer-sidebar .widget_tag_cloud a {
  334.   font-size: 14px !important;
  335.   background: #5e5340;
  336.   color: #d5be95;
  337.   padding: 4px 8px;
  338.   text-decoration: none;
  339.   margin-top: 4px;
  340.   display: inline-block;
  341. }
  342. #secondary .widget_tag_cloud a:hover,
  343. #footer-sidebar .widget_tag_cloud a:hover {
  344.   background-color: #6e5730;
  345. }
  346. #secondary ul,
  347. #footer-sidebar ul {
  348.   margin-left: 0px;
  349.   list-style: none;
  350. }
  351. #secondary ul > li,
  352. #footer-sidebar ul > li {
  353.   padding-bottom: 5px;
  354.   border-bottom: dotted 1px #5e5340;
  355. }
  356. #secondary ul > li ul,
  357. #footer-sidebar ul > li ul {
  358.   border-bottom: none;
  359.   margin-left: 20px;
  360.   padding-bottom: none;
  361.   list-style: disc;
  362. }
  363. #secondary ul > li ul li,
  364. #footer-sidebar ul > li ul li {
  365.   padding: 0px;
  366.   border: none;
  367. }
  368. #secondary select,
  369. #footer-sidebar select {
  370.   width: 100%;
  371.   height: 45px;
  372.   outline: none;
  373.   padding: 10px;
  374. }
  375. .widget_search input[type=submit] {
  376.   display: inline;
  377.   background: #4f4f4f;
  378.   color: white;
  379.   box-shadow: none;
  380.   text-shadow: none;
  381. }
  382. .widget_search input[type=search] {
  383.   outline: none;
  384.   background: #dbdacf;
  385.   width: 75%;
  386. }
  387. #footer-sidebar {
  388.   clear: both;
  389. }
  390. #footer-sidebar .footer-column {
  391.   width: 30%;
  392.   float: left;
  393.   margin: 1.5%;
  394. }
  395. /*Comments Section */
  396. .comment {
  397.   background: #f7f5e7;
  398.   border-color: #bbb;
  399. }
  400. /* Modification for Sidebar on Homepage */
  401. .page-template-page-full-width-php #secondary,
  402. .blog #secondary {
  403.   padding-left: 10px;
  404.   float: right;
  405.   margin: auto;
  406.   margin-left: 5px;
  407.   padding-right: 0px;
  408.   width: 339px;
  409.   position: relative;
  410. }
  411. .page-template-page-full-width-php #secondary .widget,
  412. .blog #secondary .widget {
  413.   width: 94%;
  414.   margin-left: 2%;
  415.   margin-right: 1.5%;
  416.   /* float: left; */
  417. }
  418. #primary-home {
  419.   overflow: auto;
  420. }
  421. /* Full width Template
  422. ----------------------------------------------*/
  423. .full-width {
  424.   width: 100% !important;
  425.   padding: 10px;
  426. }
  427. /* Colophon */
  428. #colophon {
  429.   background: #100d0a;
  430.   color: #565148;
  431.   padding: 10px;
  432. }
  433. #colophon a {
  434.   text-decoration: none;
  435.   color: #7e5b20;
  436. }
  437. #colophon .site-info {
  438.   float: left;
  439. }
  440. #colophon #footertext {
  441.   float: right;
  442. }
  443. /* Archive & Search Pages
  444. ---------------------------------------- */
  445. .search .entry-title a,
  446. .archive .entry-title a {
  447.   font-size: x-large;
  448.   text-decoration: none;
  449. }
  450. .search article,
  451. .archive article {
  452.   background: #ece5be;
  453.   padding: 15px;
  454. }
  455. .search h1.entry-title,
  456. .archive h1.entry-title {
  457.   font-size: x-large;
  458.   font-family: Helvetica, Arial, sans-serif;
  459.   font-weight: lighter;
  460.   display: block;
  461.   clear: both;
  462.   text-transform: none;
  463.   text-shadow: #fff 0px 0px 0px;
  464.   padding: 10px 0px;
  465.   word-wrap: break-word !important;
  466.   -ms-word-wrap: break-word;
  467.   color: #2a2622;
  468.   box-shadow: 0px 0px 0px;
  469.   border-bottom: none;
  470.   margin-bottom: 0px;
  471. }
  472. .search h1.entry-title:first-letter,
  473. .archive h1.entry-title:first-letter {
  474.   font-size: x-large;
  475.   text-shadow: #fff 0px 0px 0px;
  476. }
  477. .search .wp-post-image,
  478. .archive .wp-post-image {
  479.   text-align: center;
  480.   display: block;
  481.   margin: auto;
  482.   max-width: 50%;
  483.   border-bottom: solid 4px #865e18;
  484.   box-shadow: 0px -1px 9px #666666;
  485. }
  486. .search .page-title {
  487.   font-size: x-large;
  488.   border-bottom: solid 1px black;
  489.   display: inline-block;
  490.   margin-bottom: 15px;
  491. }
  492. .archive #colophon,
  493. .search #colophon,
  494. .single #colophon {
  495.   margin-bottom: -22px;
  496. }
  497. .category .entry-title a {
  498.   font-size: normal;
  499. }
  500. .category article {
  501.   background: #2a2622;
  502.   padding: 10px;
  503. }
  504. .category h1.entry-title {
  505.   font-size: normal;
  506.   padding: 0px 0px;
  507. }
  508. .category h1.entry-title:first-letter {
  509.   font-size: 13px;
  510.   text-transform: none;
  511. }
  512. .category .wp-post-image {
  513.   max-width: 100%;
  514.   border-bottom: none;
  515.   box-shadow: none;
  516. }
  517. /* Pagination
  518. -----------------------------------------------*/
  519. .pagination {
  520.   margin: 20px 0;
  521.   padding-top: 25px;
  522.   text-align: center;
  523.   width: 100%;
  524.   clear: both;
  525. }
  526. .pagination ul {
  527.   list-style: none;
  528.   display: inline-block;
  529.   text-align: center;
  530.   margin-bottom: 0;
  531.   margin-left: 0px;
  532. }
  533. .pagination ul > li {
  534.   display: inline;
  535. }
  536. .pagination ul > li > a {
  537.   color: #6a5634;
  538.   transition: all 0.4s ease;
  539. }
  540. .pagination ul > li > a:hover {
  541.   color: #5e5340;
  542.   background: #fdf1ad;
  543. }
  544. .pagination .current {
  545.   background: #fff3ab;
  546. }
  547. .pagination ul  > li  > a,
  548. .pagination ul  > li  > span {
  549.   float: left;
  550.   padding: 4px 12px;
  551.   line-height: 20px;
  552.   text-decoration: none;
  553.   background-color: #f1e8ba;
  554.   /*  border: 1px solid desaturate(@default-background, 55%); */
  555.  
  556.   border-left-width: 0;
  557.   display: inline-block;
  558.   color: #665538;
  559. }
  560. .pagination ul  > li:first-child  > a,
  561. .pagination ul  > li:first-child  > span {
  562.   border-left-width: 1px;
  563. }
  564. .pagination ul  > li:last-child  > a,
  565. .pagination ul  > li:last-child  > span {
  566.   border-rigth-width: 1px;
  567. }
  568. /* HTML Markup & Formatting */
  569. .single article h1,
  570. .page article h1 {
  571.   font-size: xx-large;
  572. }
  573. .single article h2,
  574. .page article h2 {
  575.   font-size: x-large;
  576. }
  577. .single article h3,
  578. .page article h3 {
  579.   font-size: large;
  580. }
  581. .single article h4,
  582. .page article h4 {
  583.   font-size: 18px;
  584. }
  585. .single article h5,
  586. .page article h5 {
  587.   font-size: 16px;
  588. }
  589. .single article h6,
  590. .page article h6 {
  591.   font-size: 14px;
  592. }
  593. .single article blockquote,
  594. .page article blockquote {
  595.   background: #eee7bc;
  596.   padding: 10px;
  597.   margin-bottom: 10px;
  598.   padding-bottom: 1px;
  599.   border-bottom: solid 5px #0d0d0d;
  600.   font-family: Georgia, Times, serif;
  601. }
  602. .single article table td,
  603. .page article table td,
  604. .single article table th,
  605. .page article table th {
  606.   padding: 5px;
  607.   background: #f3eab7;
  608. }
  609. .single article table th,
  610. .page article table th {
  611.   border-bottom: solid 3px #100d0a;
  612. }
  613. .single article ul ul,
  614. .page article ul ul {
  615.   list-style: circle;
  616. }
  617. .single article ul ul ul,
  618. .page article ul ul ul {
  619.   list-style: disc;
  620. }
  621. .single article ol ol,
  622. .page article ol ol {
  623.   list-style: lower-roman;
  624. }
  625. .single article ol ol ol,
  626. .page article ol ol ol {
  627.   list-style-type: lower-alpha;
  628. }
  629. .full-width {
  630.   width: 98% !important;
  631. }
  632. /* Responsive Design Begins Below
  633. ---------------------------------------------------*/
  634. @media screen and (max-width: 1100px) and (min-width: 960px) {
  635.   .container,
  636.   #nav-wrapper {
  637.     width: 912px;
  638.   }
  639.   #primary-home {
  640.     padding-left: 68px;
  641.   }
  642.   .home #secondary {
  643.     margin-left: 2%;
  644.   }
  645.   .home #secondary .widget {
  646.     margin-right: 2%;
  647.   }
  648. }
  649. @media screen and (max-width: 960px) and (min-width: 768px) {
  650.   .container,
  651.   #nav-wrapper {
  652.     width: 729.5999999999999px;
  653.   }
  654.   #primary-home {
  655.     padding-left: 88px;
  656.   }
  657.   #footer-sidebar .footer-column {
  658.     width: 70%;
  659.     margin: auto;
  660.     float: none;
  661.   }
  662.   #primary {
  663.     width: 95%;
  664.     float: none;
  665.   }
  666.   #secondary {
  667.     width: 70%;
  668.     float: none;
  669.     margin: auto;
  670.   }
  671. }
  672. @media screen and (max-width: 768px) and (min-width: 480px) {
  673.   .container {
  674.     width: 456px;
  675.   }
  676.   .main-navigation {
  677.     top: 0px;
  678.   }
  679.   #primary {
  680.     width: 95%;
  681.     float: none;
  682.   }
  683.   #secondary {
  684.     width: 95%;
  685.     padding-left: 10px;
  686.   }
  687.   .pagination {
  688.     margin-left: -50px;
  689.   }
  690.   .site-title a {
  691.     font-size: x-large;
  692.   }
  693.   .site-description {
  694.     font-size: x-small;
  695.   }
  696.   #primary-home {
  697.     padding-left: 88px;
  698.   }
  699.   .page-template-page-full-width-php #secondary .widget,
  700.   .home #secondary .widget {
  701.     width: 456px;
  702.   }
  703.   #colophon #footertext {
  704.     float: left;
  705.   }
  706.   div.slide-title {
  707.     font-size: 18px;
  708.     display: block;
  709.   }
  710.   div.slide-description {
  711.     font-size: 12px;
  712.   }
  713.   #footer-sidebar .footer-column {
  714.     width: 80%;
  715.     margin: auto;
  716.   }
  717. }
  718. @media screen and (max-width: 480px) {
  719.   .container {
  720.     width: 320px;
  721.   }
  722.   #primary {
  723.     width: 95%;
  724.     float: none;
  725.   }
  726.   #secondary {
  727.     width: 95%;
  728.     float: left;
  729.   }
  730.   #secondary .widget {
  731.     width: 95%;
  732.   }
  733.   .main-navigation {
  734.     margin-top: 30px;
  735.   }
  736.   .site-title a {
  737.     font-size: x-large;
  738.   }
  739.   .site-description {
  740.     font-size: x-small;
  741.   }
  742.   #primary-home {
  743.     padding-left: 30px;
  744.   }
  745.   .page-template-page-full-width-php #secondary .widget,
  746.   .home #secondary .widget {
  747.     width: 304px;
  748.   }
  749.   #colophon #footertext {
  750.     float: left;
  751.   }
  752.   div.slide-title {
  753.     font-size: 12px;
  754.     display: block;
  755.   }
  756.   div.slide-description {
  757.     display: none;
  758.   }
  759.   .nivo-caption {
  760.     max-width: 320px;
  761.     min-width: 50px;
  762.   }
  763.   #footer-sidebar .footer-column {
  764.     width: 80%;
  765.     margin: auto;
  766.   }
  767. }
  768. /* Responsive Menu Bar
  769. -------------------------------------------------- */
  770. @media screen and (max-width: 767px) {
  771.   .menu-toggle,
  772.   .main-navigation.toggled .nav-menu {
  773.     display: block;
  774.     color: #5e5340;
  775.     font-weight: bold;
  776.     text-transform: uppercase;
  777.     padding: 10px;
  778.     font-size: 20px;
  779.     padding-bottom: 10px;
  780.     position: relative;
  781.     top: -8px;
  782.   }
  783.   .menu-toggle:before {
  784.     content: url('../images/menu.png');
  785.     height: 0;
  786.     width: 0px;
  787.     margin-right: 20px;
  788.     position: relative;
  789.     top: 10px;
  790.   }
  791.   #nav-wrapper {
  792.     width: 90%;
  793.     margin-bottom: 15px;
  794.     text-align: center;
  795.     box-shadow: none;
  796.   }
  797.   .main-navigation ul {
  798.     display: none;
  799.   }
  800.   .main-navigation ul a {
  801.     padding: 5px;
  802.   }
  803.   .main-navigation ul li {
  804.     display: block;
  805.     width: 100%;
  806.     overflow: auto;
  807.     height: auto;
  808.   }
  809.   .main-navigation ul ul {
  810.     display: none;
  811.   }
  812.   #footer-sidebar .footer-column {
  813.     width: 96%;
  814.     margin: auto;
  815.   }
  816. }