Advertisement
Guest User

Untitled

a guest
May 26th, 2015
218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 40.28 KB | None | 0 0
  1. /*
  2. Theme Name: Delphic
  3. Author: elemis
  4. Author URI: http://themeforest.net/user/elemis/portfolio
  5. Version: 1.0
  6. Description: HTML Portfolio & Blog
  7.  
  8. 0.  RESET
  9. 1.  FONT-FACE
  10. 2.  GENERAL
  11. 3.  LAYOUT
  12. 4.  MENU
  13. 5.  SLIDERS
  14. 6.  COLUMNS
  15. 7.  HOME INTRO
  16. 8.  HOME ABOUT
  17. 9.  PAGE
  18. 10. PORTFOLIO
  19. 11. SINGLE PORTFOLIO
  20. 12. VERTICAL TAB
  21. 13. BLOG
  22. 14. BLOG COMMENTS
  23. 15. NEWS LIST
  24. 16. CONTACT
  25. 17. TOGGLE & TABS
  26. 18. CAROUSEL
  27.  
  28. -----------------------------------------------------------------------------------*/
  29.  
  30.  
  31. /*-----------------------------------------------------------------------------------*/
  32. /*  0.  RESET
  33. /*-----------------------------------------------------------------------------------*/
  34.  
  35. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  36.     margin:0;
  37.     padding:0;
  38.     border:0;
  39.     outline:0;
  40.     font-size:100%;
  41.     vertical-align:baseline;
  42.     background:transparent
  43. }
  44. body {
  45.     line-height:1
  46. }
  47. ol, ul {
  48.     list-style:none
  49. }
  50. blockquote, q {
  51.     quotes:none
  52. }
  53. blockquote:before, blockquote:after, q:before, q:after {
  54.     content:'';
  55.     content:none
  56. }
  57. :focus {
  58.     outline:0
  59. }
  60. ins {
  61.     text-decoration:none
  62. }
  63. del {
  64.     text-decoration:line-through
  65. }
  66. table {
  67.     border-collapse:collapse;
  68.     border-spacing:0
  69. }
  70. .clear {
  71.     clear:both;
  72.     display:block;
  73.     overflow:hidden;
  74.     visibility:hidden;
  75.     width:0;
  76.     height:0
  77. }
  78. .clearfix:after {
  79.     clear:both;
  80.     content:' ';
  81.     display:block;
  82.     font-size:0;
  83.     line-height:0;
  84.     visibility:hidden;
  85.     width:0;
  86.     height:0
  87. }
  88. .clearfix {
  89.     display:inline-block
  90. }
  91. * html .clearfix {
  92.     height:1%
  93. }
  94. .clearfix {
  95.     display:block
  96. }
  97.  
  98.  
  99. /*-----------------------------------------------------------------------------------*/
  100. /*  1.  FONT-FACE
  101. /*-----------------------------------------------------------------------------------*/
  102.  
  103.  @font-face {
  104.  font-family: 'Puritan20Italic';
  105.  src: url('style/type/puritan/puritan_italic-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_italic-webfont.woff') format('woff'),  url('style/type/puritan/puritan_italic-webfont.ttf') format('truetype'),  url('style/type/puritan/puritan_italic-webfont.svg#webfontZMWmRIPG') format('svg');
  106.  font-weight: normal;
  107.  font-style: normal;
  108. }
  109.  @font-face {
  110.  font-family: 'Puritan20Normal';
  111.  src: url('style/type/puritan/puritan_regular-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_regular-webfont.woff') format('woff'),  url('style/type/puritan/puritan_regular-webfont.ttf') format('truetype'),  url('style/type/puritan/puritan_regular-webfont.svg#webfontJ25dHiGv') format('svg');
  112.  font-weight: normal;
  113.  font-style: normal;
  114. }
  115.  
  116. /*-----------------------------------------------------------------------------------*/
  117. /*  2.  GENERAL
  118. /*-----------------------------------------------------------------------------------*/
  119.  
  120. body {
  121.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  122.     background-color: #282828;
  123.     color: #666666;
  124.     font-size: 13px;
  125.     overflow-y: auto;
  126.     overflow-x: hidden;
  127. }
  128.  
  129. html, body {
  130.     height: 100%;
  131. }
  132.  
  133. #container {
  134.     min-height: 100%;
  135.     height: auto !important;
  136.     height: 100%;
  137.     margin: 0 auto -145px; /* the bottom margin is the negative value of the footer's height */
  138. }
  139.  
  140. #footer-wrapper, .push {
  141.     height: 145px; /* .push must be the same height as .footer */
  142. }
  143.  
  144. p {
  145.     line-height: 20px;
  146.     margin-bottom: 20px;
  147. }
  148.  
  149. a {
  150.     text-decoration: none;
  151.     color: #a5a5a5;
  152. }
  153.  
  154. a:hover {
  155.     text-decoration: none;
  156. }
  157.  
  158. a.more {
  159.     display: inline-block;
  160. }
  161.  
  162. a.more:hover {
  163.     text-decoration: underline;
  164. }
  165.  
  166. pre {
  167.     margin-bottom: 20px;
  168.     font-size: 11px;
  169.     background-color: #202020;
  170.     padding: 0 10px;
  171. }
  172.  
  173. .highlight {
  174.     color: #a5a5a5;
  175.     border-bottom: 1px dotted #a5a5a5;
  176. }
  177.  
  178. .highlight2 {
  179.     background-color: #666666;
  180.     padding: 0px 4px;
  181.     color: #222222;
  182. }
  183.  
  184. .highlight3 {
  185.     color: #a5a5a5;
  186. }
  187.  
  188. h1, h2, h3, h4, h5, h6 {
  189.     font-family: 'Puritan20Normal';
  190.     font-weight: normal;
  191.     color: #a5a5a5;
  192.     margin-bottom: 10px;
  193.     text-shadow: 0px 1px 1px #161616;
  194. }
  195.  
  196. h1 {
  197.     font-size: 28px;
  198. }
  199.  
  200. h2 {
  201.     font-size: 25px;
  202. }
  203.  
  204. h3 {
  205.     font-size: 22px;
  206.     line-height: 26px;
  207. }
  208.  
  209. h4 {
  210.     font-size: 17px;
  211. }
  212.  
  213. h5 {
  214.     font-size: 15px;
  215. }
  216.  
  217. h6 {
  218.     font-size: 14px;
  219. }
  220.  
  221. .divider, .divider2, .divider3 {
  222.     background: transparent url(style/images/line.png) repeat-x bottom center;
  223.     height: 2px;
  224.     display: block;
  225.     margin: 30px 0;
  226. }
  227.  
  228. .divider2 {
  229.     margin-top:10px;
  230. }
  231.  
  232. .divider3 {
  233.     margin-bottom:10px;
  234. }
  235.  
  236. img.left {
  237.     top: 0px;
  238.     float:left;
  239.     display: block;
  240.     margin:0;
  241.     padding:0;
  242.     margin-right:20px;
  243. }
  244.  
  245. img.right {
  246.     top: 0px;
  247.     float:right;
  248.     display: block;
  249.     margin:0;
  250.     padding:0;
  251.     margin-left:20px;
  252. }
  253.  
  254. em {
  255.     font-family: Georgia, Times, "Times New Roman", serif;
  256.     font-size: 11px;
  257.     color: #666666;
  258. }
  259.  
  260. .button, .button:link, .button:visited {
  261.     display: block;
  262.     position: relative;
  263.     padding: 0 0 0 15px;
  264.     height: 32px;
  265.     line-height: 30px;
  266.     text-align: center;
  267.     background-position: 0 0;
  268.     background-repeat: no-repeat;
  269.     font-size: 14px;
  270.     font-weight: normal;
  271.     color: #1f1f1f;
  272.     cursor: pointer;
  273.     font-family: 'Puritan20Normal';
  274. }
  275. .button span {
  276.     display: block;
  277.     position: absolute;
  278.     top: 0px;
  279.     right: -15px;
  280.     width: 15px;
  281.     height: 32px;
  282.     background-position: right top;
  283. }
  284. .button.light-blue, .button.light-blue span {
  285.     background-image: url(style/images/button-light-blue.png);
  286.     float: left;
  287. }
  288. .button.light-purple, .button.light-purple span {
  289.     background-image: url(style/images/button-light-purple.png);
  290.     float: left;
  291. }
  292. .button.light-pink, .button.light-pink span {
  293.     background-image: url(style/images/button-light-pink.png);
  294.     float: left;
  295. }
  296. .button.light-brown, .button.light-brown span {
  297.     background-image: url(style/images/button-light-brown.png);
  298.     float: left;
  299. }
  300. .button.light-teal, .button.light-teal span {
  301.     background-image: url(style/images/button-light-teal.png);
  302.     float: left;
  303. }
  304. .button.lime, .button.lime span {
  305.     background-image: url(style/images/button-lime.png);
  306.     float: left;
  307. }
  308. .button.red, .button.red span {
  309.     background-image: url(style/images/button-red.png);
  310.     float: left;
  311. }
  312. .button.orange, .button.orange span {
  313.     background-image: url(style/images/button-orange.png);
  314.     float: left;
  315. }
  316. .button.yellow, .button.yellow span {
  317.     background-image: url(style/images/button-yellow.png);
  318.     float: left;
  319. }
  320. .button.green, .button.green span {
  321.     background-image: url(style/images/button-green.png);
  322.     float: left;
  323. }
  324. .button.teal, .button.teal span {
  325.     background-image: url(style/images/button-teal.png);
  326.     float: left;
  327. }
  328. .button.turqoise, .button.turqoise span {
  329.     background-image: url(style/images/button-turqoise.png);
  330.     float: left;
  331. }
  332. .button.blue, .button.blue span {
  333.     background-image: url(style/images/button-blue.png);
  334.     float: left;
  335. }
  336. .button.purple, .button.purple span {
  337.     background-image: url(style/images/button-purple.png);
  338.     float: left;
  339. }
  340. .button.pink, .button.pink span {
  341.     background-image: url(style/images/button-pink.png);
  342.     float: left;
  343. }
  344. .button.gray, .button.gray span {
  345.     background-image: url(style/images/button-gray.png);
  346.     float: left;
  347. }
  348.  
  349. .dropcap {
  350.     display:block;
  351.     float:left;
  352.     font-size:45px;
  353.     padding:0;
  354.     margin: 0;
  355.     margin:10px 8px 3px 0;
  356.     font-family: 'Puritan20Normal';
  357. }
  358.  
  359. table {
  360.     width: 100%;
  361.     font-size:13px;
  362.     border-collapse: collapse;
  363.     border-bottom:1px solid #363636;
  364.     border-top:1px solid #363636;
  365.     margin-bottom: 20px;
  366. }
  367.  
  368. table td {
  369.     padding: 8px 10px;
  370.     border-right:1px solid #363636;
  371. }
  372.  
  373. table td:hover {
  374.     background-color: #2c2c2c;
  375. }
  376.  
  377. table th {
  378.     padding: 10px;
  379.     font-size:18px;
  380.     color:#a5a5a5;
  381.     text-align: left;
  382.     border-right:1px solid #363636;
  383.     font-family: 'Puritan20Normal';
  384.     font-weight: normal;
  385. }
  386.  
  387. table td.center {
  388.     text-align: center;
  389. }
  390.  
  391. table td.last {
  392.     background: none;
  393. }
  394.  
  395. table th.center {
  396.     text-align: center;
  397. }
  398.  
  399. table th.last {
  400.     background: none;
  401. }
  402.  
  403. table tr {
  404.     border-left:1px solid #363636;
  405.     border-top:1px solid #363636;
  406. }
  407.  
  408. table tr.caption {
  409.     border-left:1px solid #363636;
  410. }
  411.  
  412. table.price td {
  413.     text-align: center;
  414. }
  415.  
  416. table.price td.left {
  417.     text-align: left;
  418. }
  419.  
  420. table.price td.right {
  421.     text-align: right;
  422. }
  423.  
  424. table.price td h2 {
  425.     margin:0;
  426.     font-size: 22px;
  427. }
  428. table.price td h2 span {
  429.     display: block;
  430.     font-size: 18px;
  431.     color: #747474;
  432. }
  433.  
  434. table.price td h2 sup {
  435.     padding-left: 5px;
  436.     line-height: 20px;
  437. }
  438.  
  439. .quote-right, .quote-left {
  440.     color:#a5a5a5;
  441.     border-left:2px solid #a5a5a5;
  442.     float:right;
  443.     letter-spacing:0px;
  444.     line-height:23px;
  445.     margin-left:20px;
  446.     margin-top:10px;
  447.     margin-bottom:5px;
  448.     padding:0px;
  449.     padding-left:10px;
  450.     padding-right:10px;
  451.     font-family: Georgia, "Times New Roman", Times, serif;
  452.     font-style: italic;
  453.     width:25%;
  454. }
  455.  
  456. .quote-left {
  457.     border: none;
  458.     border-right:2px solid #a5a5a5;
  459.     float:left;
  460.     padding:0;
  461.     padding-right:5px;
  462.     margin-bottom:0;
  463.     margin-left: 0;
  464.     margin-right:20px;
  465. }
  466.  
  467. /*-----------------------------------------------------------------------------------*/
  468. /*  3.  LAYOUT
  469. /*-----------------------------------------------------------------------------------*/
  470.  
  471. #wrapper ul {
  472.     padding: 0 0 20px 0;
  473.     display: block;
  474.     overflow: hidden;
  475. }
  476.  
  477. #wrapper ul li {
  478.     line-height: 20px;
  479.     list-style: none;
  480.     display: block;
  481.     background: transparent url(style/images/bullet.jpg) no-repeat left 8px;
  482.     padding-left: 20px;
  483. }
  484.  
  485. #wrapper ul.check-list {
  486.     padding: 0 0 20px 0;
  487.     display: block;
  488.     overflow: hidden;
  489. }
  490.  
  491. #wrapper ul.check-list li {
  492.     line-height: 20px;
  493.     list-style: none;
  494.     display: block;
  495.     background: transparent url(style/images/check.png) no-repeat left 0px;
  496.     padding-left: 30px;
  497. }
  498.  
  499. #wrapper {
  500.     width: 960px;
  501.     margin: 0 auto;
  502.     padding-top: 0;
  503.     line-height: 20px;
  504. }
  505.  
  506. #header-wrapper {
  507.     min-width: 960px;
  508.     height: 88px;
  509.     background: transparent url(style/images/header-bg.png) repeat-x center bottom;
  510. }
  511.  
  512. #header {
  513.     width: 960px;
  514.     height: 88px;
  515.     margin: 0 auto;
  516.     position: relative;
  517.     z-index: 999;
  518. }
  519.  
  520. #page-top {
  521.     padding-bottom: 70px;
  522. }
  523.  
  524. #logo {
  525.     float: left;
  526.     position: absolute;
  527.     bottom: 15px;
  528.     left: 0;
  529. }
  530.  
  531. #menu-wrapper {
  532.     float: right;
  533.     position: absolute;
  534.     bottom: 23px;
  535.     right: 0;
  536. }
  537. #footer-wrapper {
  538.     height: 45px;
  539.     padding-top:100px;
  540. }
  541.  
  542. #footer {
  543.     min-width: 960px;
  544.     height: 45px;
  545.     background: transparent url(style/images/footer-bg.png) repeat-x top center;
  546. }
  547.  
  548. #footer-content {
  549.     width: 960px;
  550.     height: 45px;
  551.     margin: 0 auto;
  552.     position: relative;
  553. }
  554.  
  555. #copyright {
  556.     float: left;
  557.     position: absolute;
  558.     top: 15px;
  559.     left: 0;
  560. }
  561.  
  562. #copyright p {
  563.     font-size: 11px;
  564.     margin: 0;
  565. }
  566.  
  567. #socials {
  568.     float: right;
  569.     position: absolute;
  570.     top: 16px;
  571.     right: 0;
  572. }
  573.  
  574. #socials ul li {
  575.     float: left;
  576.     margin-left: 10px;
  577.     background: none;
  578. }
  579.  
  580. /*-----------------------------------------------------------------------------------*/
  581. /*  4.  MENU
  582. /*-----------------------------------------------------------------------------------*/
  583.  
  584. .ddsmoothmenu {
  585.     font-family: 'Puritan20Normal';
  586.     font-size: 17px;
  587.     z-index: 1000;
  588.     position: relative;
  589. }
  590.  
  591. .ddsmoothmenu ul {
  592.     margin: 0;
  593.     padding: 0;
  594.     list-style-type: none;
  595. }
  596.  
  597. /*Top level list items*/
  598. .ddsmoothmenu ul li {
  599.     position: relative;
  600.     display: inline;
  601.     float: left;
  602.     clear: none;
  603.     margin-left: 20px;
  604.     padding-left: 10px;
  605. }
  606.  
  607. /*Top level menu link items style*/
  608. .ddsmoothmenu ul li a {
  609.     display: block; /*background of menu items (default state)*/
  610.     text-decoration: none;
  611.     position: relative;
  612.     text-shadow: 0px 1px 1px #0f0f0f;
  613. }
  614.  
  615. * html .ddsmoothmenu ul li a { /*IE6 hack to get sub menu links to behave correctly*/
  616.     display: inline-block;
  617. }
  618.  
  619. .ddsmoothmenu ul li a, .ddsmoothmenu ul li a:visited {
  620.     color: #666666;
  621. }
  622.  
  623. .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
  624.     color: #a5a5a5;
  625. }
  626.  
  627. .ddsmoothmenu ul li a:hover {
  628.     color: #a5a5a5;
  629. }
  630.  
  631. /*1st sub level menu*/
  632. .ddsmoothmenu ul li ul {
  633.     background: none;
  634.     font-family: 'Puritan20Normal';
  635.     position: absolute;
  636.     padding: 20px 0 0 0;
  637.     left: 0;
  638.     display: block; /*collapse all sub menus to begin with*/
  639.     visibility: hidden;
  640. }
  641.  
  642. /*Sub level menu list items (undo style from Top level List Items)*/
  643. .ddsmoothmenu ul li ul li {
  644.     margin-left:0;
  645.     padding-left: 0;
  646.     display: list-item;
  647.     float: none;
  648.     background-color: #151515;
  649.     opacity: .95;
  650.     /* For IE 5-7 */
  651.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
  652.     /* For IE 8 */
  653.     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  654. }
  655.  
  656. /*All subsequent sub menu levels vertical offset after 1st level sub menu */
  657. .ddsmoothmenu ul li ul li ul {
  658.     top: 0;
  659.     padding-top: 0;
  660. }
  661.  
  662. /* Sub level menu links style */
  663. .ddsmoothmenu ul li ul li a {
  664.     font-size: 13px;
  665.     width: 140px; /*width of sub menus*/
  666.     padding: 7px 12px;
  667.     margin: 0;
  668.     line-height: 1;
  669. }
  670.  
  671. /* Sub level menu links style */
  672. .ddsmoothmenu ul li ul li ul li a {
  673.     font-size: 13px;
  674. }
  675.  
  676. .ddsmoothmenu ul li ul li:first-child {
  677.     padding-top: 5px;
  678. }
  679.  
  680. .ddsmoothmenu ul li ul li:last-child {
  681.     padding-bottom: 6px;
  682. }
  683.  
  684. .ddsmoothmenu ul li ul li ul li:first-child {
  685.     padding-top: 4px;
  686. }
  687.  
  688. .ddsmoothmenu ul li ul li ul li:last-child {
  689.     padding-bottom: 5px;
  690. }
  691.  
  692. /* Holly Hack for IE \*/
  693. * html .ddsmoothmenu {
  694.     height: 1%;
  695. } /*Holly Hack for IE7 and below*/
  696.  
  697. /*-----------------------------------------------------------------------------------*/
  698. /*  5.  SLIDERS
  699. /*-----------------------------------------------------------------------------------*/
  700.  
  701. /* CYCLE */
  702.  
  703. #cycle-wrapper {
  704.     position: relative;
  705.     width:960px;
  706.     height: 380px;
  707.     margin: 0 auto 90px;
  708. }
  709.  
  710. #sliderholder-cycle {
  711.     width:960px;
  712.     height: 380px;
  713.     overflow: hidden;
  714.     background:transparent;
  715.     -webkit-box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  716.     -moz-box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  717.     box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  718. }
  719.  
  720. .slidernav {
  721.     padding: 0;
  722.     margin: 18px 0 0 0;
  723.     list-style: none;
  724.     text-align: center;
  725. }
  726.  
  727. .slidernav a {
  728.     cursor: pointer;
  729.     background-color: #191919;
  730.     overflow: hidden;
  731.     width: 10px;
  732.     height: 10px;
  733.     margin: 0 3px;
  734.     text-indent: -99999px;
  735.     display: inline-block;
  736. }
  737.  
  738. .slidernav a:hover, .slidernav .activeSlide {
  739.     background-color: #101010;
  740. }
  741.  
  742. .sliderprev, .slidernext {
  743.     display:block;
  744.     width:35px;
  745.     height:35px;
  746.     background:url(style/images/slider-arrows.jpg) no-repeat;
  747.     text-indent:-9999px;
  748.     border:0;
  749.     cursor: pointer;
  750.     position: absolute;
  751.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  752.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  753.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  754. }
  755.  
  756. .slidernext {
  757.     background-position: right top;
  758.     right: -60px;
  759.     top: 46%;
  760. }
  761.  
  762. .slidernext:hover {
  763.     background-position: right bottom;
  764. }
  765.  
  766. .sliderprev {
  767.     background-position: left top;
  768.     left: -60px;
  769.     top: 46%;
  770. }
  771.  
  772. .sliderprev:hover {
  773.     background-position: left bottom;
  774. }
  775.  
  776. /* PIECEMAKER */
  777.  
  778. #piecemaker-container {
  779.     display:block;
  780.     height:460px;
  781.     overflow:hidden;
  782.     margin: -10px auto 40px;
  783.     width: 960px;
  784. }
  785.  
  786. /*-----------------------------------------------------------------------------------*/
  787. /*  6.  COLUMNS
  788. /*-----------------------------------------------------------------------------------*/
  789.  
  790. .one-half {
  791.     width:48%;
  792. }
  793.  
  794. .one-third {
  795.     width:30.66%;
  796. }
  797.  
  798. .two-third {
  799.     width:65.33%;
  800. }
  801.  
  802. .one-fourth {
  803.     width:22%;
  804. }
  805.  
  806. .three-fourth {
  807.     width:74%;
  808. }
  809.  
  810. .one-fifth {
  811.     width:16.8%;
  812. }
  813.  
  814. .two-fifth {
  815.     width:37.6%;
  816. }
  817.  
  818. .three-fifth {
  819.     width:58.4%;
  820. }
  821.  
  822. .four-fifth {
  823.     width:67.2%;
  824. }
  825.  
  826. .one-sixth {
  827.     width:13.33%;
  828. }
  829.  
  830. .five-sixth {
  831.     width:82.67%;
  832. }
  833.  
  834. .one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {
  835.     position:relative;
  836.     margin-right:4%;
  837.     float:left;
  838. }
  839.  
  840. .last {
  841.     margin-right:0 !important;
  842.     clear:right;
  843. }
  844.  
  845. /*-----------------------------------------------------------------------------------*/
  846. /*  7.  HOME INTRO
  847. /*-----------------------------------------------------------------------------------*/
  848.  
  849. .intro h1 {
  850.     line-height: 28px;
  851.     font-size: 22px;
  852.     text-align: center;
  853.     font-weight: normal;
  854.     font-family: 'Puritan20Italic';
  855.     color: #666666;
  856.     text-shadow: 0px 1px 1px #161616;
  857. }
  858.  
  859. .intro {
  860.     margin-top: -10px;
  861.     margin-bottom:60px;
  862. }
  863.  
  864. /*-----------------------------------------------------------------------------------*/
  865. /*  8.  HOME ABOUT
  866. /*-----------------------------------------------------------------------------------*/
  867.  
  868. #about .one-fourth img {
  869.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  870.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  871.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  872.     display: block;
  873.     margin-bottom: 20px;
  874. }
  875.  
  876. #about .one-fourth p {
  877.     margin-bottom: 15px;
  878. }
  879.  
  880. /*-----------------------------------------------------------------------------------*/
  881. /*  9.  PAGE
  882. /*-----------------------------------------------------------------------------------*/
  883.  
  884. .content {
  885.     background-color: #1c1c1c;
  886.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  887.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  888.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  889.     padding: 20px 20px 0 20px;
  890.     display: block;
  891.     overflow: hidden;
  892.     margin-bottom: 20px;
  893. }
  894.  
  895. #wrapper ul.social {
  896.     margin-top: 10px;
  897. }
  898.  
  899. #wrapper ul.social li {
  900.     float: left;
  901.     background: none;
  902.     margin-right: 10px;
  903.     padding: 0;
  904. }
  905.  
  906. /*-----------------------------------------------------------------------------------*/
  907. /*  10. PORTFOLIO
  908. /*-----------------------------------------------------------------------------------*/
  909.  
  910. #portfolio ul li {
  911.     background: none;
  912.     padding: 0;
  913. }
  914.  
  915. #wrapper ul.grid {
  916.     width: 985px;
  917.     overflow: hidden;
  918.     margin:0 auto;
  919.     margin-left:-20px;
  920.     padding: 0;
  921. }
  922.  
  923. ul.grid:after {
  924.     content: "";
  925.     display: block;
  926.     height: 0;
  927.     overflow: hidden;
  928.     clear: both;
  929. }
  930.  
  931. ul.grid li {
  932.     width: 225px;
  933.     margin: 0;
  934.     margin-left: 20px;
  935.     margin-bottom: 20px;
  936.     float: left;
  937.     overflow: hidden;
  938.     background: none;
  939.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  940.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  941.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  942. }
  943.  
  944. ul.grid li a {
  945.     outline:0;
  946. }
  947.  
  948. ul.grid li img {
  949.     display: block;
  950.     width:225px;
  951.     height:150px;
  952. }
  953.  
  954. ul.gallerynav {
  955.     width:960px;
  956.     margin:0 auto 22px;
  957.     height: 14px;
  958.     background-color: #1c1c1c;
  959.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  960.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  961.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  962. }
  963.  
  964. ul.gallerynav li {
  965.     float:left;
  966. }
  967.  
  968. ul.gallerynav li a {
  969.     float:left;
  970.     font-family: 'Puritan20Normal';
  971.     color: #666666;
  972.     margin: 0 15px;
  973.     font-size: 15px;
  974.     line-height: 18px;
  975.     padding: 8px 0;
  976. }
  977.  
  978. ul.gallerynav li a:hover {
  979.     text-decoration: none;
  980.     color: #a5a5a5;
  981. }
  982.  
  983. ul.gallerynav li.selected-1 a {
  984.     color: #a5a5a5;
  985. }
  986.  
  987. .hidden {
  988.     display: none;
  989. }
  990.  
  991. /*-----------------------------------------------------------------------------------*/
  992. /*  11. SINGLE PORTFOLIO
  993. /*-----------------------------------------------------------------------------------*/
  994.  
  995. #portfolio-single .image {
  996.     width: 660px;
  997.     float: left;
  998.     margin-right: 20px;
  999.     overflow: hidden;
  1000.     padding: 3px 5px 0 0;
  1001. }
  1002.  
  1003. #portfolio-single .image img {
  1004.     margin-bottom: 15px;
  1005.     -webkit-box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  1006.     -moz-box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  1007.     box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.7);
  1008. }
  1009.  
  1010. #portfolio-single .text {
  1011.     width: 235px;
  1012.     padding: 20px;
  1013.     margin: 2px 0 0 0;
  1014.     float: right;
  1015.     background-color: #1c1c1c;
  1016.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1017.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1018.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1019.     overflow: hidden;
  1020. }
  1021.  
  1022. #portfolio-single a:hover {
  1023.     text-decoration: underline;
  1024. }
  1025.  
  1026. a.p-project, a.n-project {
  1027.     font-family: Georgia, "Times New Roman", Times, serif;
  1028.     font-style: italic;
  1029.     font-size: 12px;
  1030.     color: #666666;
  1031.     line-height: 1;
  1032.     float: left;
  1033. }
  1034.  
  1035. a.n-project {
  1036.     float: right;
  1037. }
  1038.  
  1039. #portfolio-single a.p-project:hover, #portfolio-single a.n-project:hover {
  1040.     text-decoration: none;
  1041.     color: #a5a5a5;
  1042. }
  1043.  
  1044. /*-----------------------------------------------------------------------------------*/
  1045. /*  12. VERTICAL TAB
  1046. /*-----------------------------------------------------------------------------------*/
  1047.  
  1048. ul#tab-menu {
  1049.     float:left;
  1050.     width: 230px;
  1051.     background-color: #1c1c1c;
  1052.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1053.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1054.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1055.     margin:0 20px 0 0;
  1056.     padding: 0 10px;
  1057.     list-style:none;
  1058.     font-family: 'Puritan20Normal';
  1059.     font-size: 17px;
  1060. }
  1061.  
  1062. ul#tab-menu li {
  1063.     background: transparent url(style/images/line.png) bottom repeat-x;
  1064.     cursor: pointer;
  1065.     padding: 20px 10px;
  1066.     margin: 0;
  1067.     text-shadow: 0px 1px 1px #161616;
  1068. }
  1069.  
  1070. ul#tab-menu li:hover, ul#tab-menu li.selected {
  1071.     color: #a5a5a5;
  1072. }
  1073.  
  1074. ul#tab-menu li img {
  1075.     vertical-align: middle;
  1076.     padding-right: 10px;
  1077. }
  1078.  
  1079. ul#tab-menu li:last-child {
  1080.     background: none;
  1081.  
  1082. }
  1083.  
  1084. .tab-wrapper {
  1085.     width:960px;
  1086.     position: relative;
  1087. }
  1088.  
  1089. .tab-content {
  1090.     background-color: #1c1c1c;
  1091.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1092.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1093.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1094.     width: 650px;
  1095.     float:left;
  1096.     padding: 20px 20px 0 20px;
  1097. }
  1098.  
  1099. .tab-content div.tab {
  1100.     display:none;
  1101.     padding: 0;
  1102. }
  1103.  
  1104. .tab-content div.tab.show {
  1105.     display:block;
  1106. }
  1107.  
  1108. .tab-content div.tab p {
  1109.     width:650px;
  1110.     overflow: hidden;
  1111.     padding: 0;
  1112.     margin: 0 0 20px 0;
  1113. }
  1114.  
  1115. .tab-content div.tab div p {
  1116.     width:100%;
  1117. }
  1118.  
  1119. /*-----------------------------------------------------------------------------------*/
  1120. /*  13. BLOG
  1121. /*-----------------------------------------------------------------------------------*/
  1122.  
  1123. #post-wrapper {
  1124.     width: 640px;
  1125.     float: left;
  1126.     margin-right: 20px;
  1127. }
  1128.  
  1129. .post {
  1130.     background-color: #1c1c1c;
  1131.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1132.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1133.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1134.     width: 600px;
  1135.     padding: 20px;
  1136.     margin-bottom: 20px;
  1137. }
  1138.  
  1139. .post a:hover {
  1140.     text-decoration: underline;
  1141. }
  1142.  
  1143. h2.title {
  1144.     margin-bottom: 8px;
  1145. }
  1146.  
  1147. .title a:hover {
  1148.     color: #cdcdcd;
  1149.     text-decoration: none;
  1150. }
  1151.  
  1152. .post img, .post .video {
  1153.     margin-bottom: 10px;
  1154. }
  1155.  
  1156. .date {
  1157.     display: inline;
  1158.     color: #a5a5a5;
  1159. }
  1160.  
  1161. .top-border {
  1162.     background: transparent url(style/images/line.png) repeat-x;
  1163.     height: 2px;
  1164.     padding: 8px 0 0 0;
  1165. }
  1166.  
  1167. .post .meta {
  1168.     background: transparent url(style/images/line.png) center bottom repeat-x;
  1169.     padding: 10px 0;
  1170.     font-family: Georgia, "Times New Roman", Times, serif;
  1171.     font-size: 12px;
  1172.     font-style: italic;
  1173.     margin-bottom: 21px;
  1174. }
  1175.  
  1176. .post .meta a:hover {
  1177.     text-decoration: underline;
  1178. }
  1179.  
  1180. .post .tags {
  1181.     line-height: 12px;
  1182. }
  1183.  
  1184. .post .tags a {
  1185.     font-family: Georgia, "Times New Roman", Times, serif;
  1186.     font-size: 12px;
  1187.     font-style: italic;
  1188.     line-height: 12px;
  1189. }
  1190.  
  1191. .post .tags a:hover {
  1192.     text-decoration: underline;
  1193. }
  1194.  
  1195. #wrapper ul.page-navi {
  1196.     padding: 2px;
  1197.     margin-left: -2px;
  1198.     margin-bottom: 20px;
  1199. }
  1200.  
  1201. #wrapper ul.page-navi li {
  1202.     padding: 0;
  1203.     float:left;
  1204.     margin-right: 10px;
  1205.     background: none;
  1206. }
  1207.  
  1208. #wrapper ul.page-navi li a {
  1209.     background-color: #1c1c1c;
  1210.     -moz-box-shadow: 0px 1px 2px #0c0c0c;
  1211.     -webkit-box-shadow: 0px 1px 2px #0c0c0c;
  1212.     box-shadow: 0px 1px 2px #0c0c0c;
  1213.     height: 24px;
  1214.     width: 24px;
  1215.     display: block;
  1216.     text-align: center;
  1217.     line-height: 24px;
  1218.     font-size: 13px;
  1219.     font-weight: normal;
  1220.     color: #666666;
  1221. }
  1222.  
  1223. #wrapper ul.page-navi li a:hover, #wrapper ul.page-navi li a.current {
  1224.     background-color: #191919;
  1225.     color: #a5a5a5;
  1226. }
  1227.  
  1228. #sidebar {
  1229.     width: 300px;
  1230.     float: right;
  1231. }
  1232.  
  1233. .sidebox {
  1234.     background-color: #1c1c1c;
  1235.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1236.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1237.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1238.     width: 260px;
  1239.     padding: 20px;
  1240.     margin-bottom: 20px;
  1241. }
  1242.  
  1243. #searchform input {
  1244.     background: #2c2c2c url(style/images/search.png) no-repeat 230px center;
  1245.     width: 240px;
  1246.     padding: 5px 10px;
  1247.     height: 25px;
  1248.     border: 0;
  1249.     font-family: Georgia, "Times New Roman", Times, serif;
  1250.     font-size: 13px;
  1251.     font-style: italic;
  1252.     color: #666666;
  1253. }
  1254.  
  1255. #wrapper .sidebox ul {
  1256.     padding: 0;
  1257.     margin: 0;
  1258. }
  1259.  
  1260. #wrapper .sidebox ul li a:hover {
  1261.     color: #cdcdcd;
  1262.     text-decoration: none;
  1263. }
  1264.  
  1265. #wrapper .sidebox ul.post-list li {
  1266.     background: none;
  1267.     background: transparent url(style/images/line.png) bottom center repeat-x;
  1268.     padding: 10px 0 12px 0;
  1269.     margin: 0;
  1270.     clear: both;
  1271.     overflow: hidden;
  1272.     height: 60px;
  1273. }
  1274.  
  1275. #wrapper .sidebox ul.post-list li:last-child {
  1276.     padding: 12px 0 0 0;
  1277.     background: none;
  1278. }
  1279.  
  1280. #wrapper .sidebox ul.post-list.archive {
  1281.     padding: 0;
  1282.     margin: 0;
  1283. }
  1284.  
  1285. #wrapper .sidebox ul.post-list.archive li {
  1286.     padding: 5px 0 5px 0;
  1287.     height: 20px;
  1288.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  1289.     font-size: 13px;
  1290. }
  1291.  
  1292. #wrapper .sidebox ul.post-list.archive li:last-child {
  1293.     padding: 5px 0 0 0;
  1294. }
  1295.  
  1296. #wrapper .sidebox ul.post-list li h4 {
  1297.     width: 180px;
  1298.     display: block;
  1299.     margin: 0;
  1300.     overflow: hidden;
  1301.     font-size: 15px;
  1302. }
  1303.  
  1304. #wrapper .sidebox ul.post-list li span.info {
  1305.     width: 180px;
  1306.     display: block;
  1307.     font-family: Georgia, "Times New Roman", Times, serif;
  1308.     font-size: 12px;
  1309.     font-style: italic;
  1310.     overflow: hidden;
  1311.     color: #666666;
  1312. }
  1313.  
  1314. #wrapper .sidebox ul.post-list li span.info a {
  1315.     color: #666666;
  1316. }
  1317.  
  1318. #wrapper .sidebox ul.post-list li span.info a:hover {
  1319.     text-decoration: underline;
  1320. }
  1321.  
  1322. .sidebox ul.post-list li img {
  1323.     width: 60px;
  1324.     height: 60px;
  1325.     float: left;
  1326.     margin-right: 15px;
  1327. }
  1328.  
  1329. ul.tags {
  1330.     margin: 0;
  1331.     padding: 0;
  1332. }
  1333.  
  1334. #wrapper ul.tags li {
  1335.     margin: 0;
  1336.     padding: 0;
  1337.     background: none;
  1338.     list-style: none;
  1339.     float:left;
  1340. }
  1341.  
  1342. #wrapper ul.tags li a {
  1343.     padding: 3px 8px;
  1344.     float: left;
  1345.     margin: 5px 5px 0 0;
  1346.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  1347.     font-style: normal;
  1348.     background-color: #171717;
  1349.     font-size: 11px;
  1350.     text-transform: uppercase;
  1351. }
  1352.  
  1353. #wrapper ul.tags li a:hover {
  1354.     text-decoration:none;
  1355.     background-color: #121212;
  1356. }
  1357.  
  1358. ul.flickr {
  1359.     width:270px;
  1360.     margin-right:-10px;
  1361.     padding: 0;
  1362.     margin: 0;
  1363. }
  1364.  
  1365. #wrapper ul.flickr li {
  1366.     background: none;
  1367.     margin: 10px 10px 0 0;
  1368.     float:left;
  1369.     padding: 0;
  1370.     width:80px;
  1371.     height:80px;
  1372. }
  1373.  
  1374. ul.ads {
  1375.     width:270px;
  1376.     margin-right:-10px;
  1377.     padding: 0;
  1378.     margin: 0;
  1379. }
  1380.  
  1381. #wrapper ul.ads li {
  1382.     background: none;
  1383.     margin: 10px 10px 0 0;
  1384.     float:left;
  1385.     padding: 0;
  1386.     width:125px;
  1387.     height:125px;
  1388. }
  1389.  
  1390. #comment-wrapper {
  1391.     margin-top: 40px;
  1392. }
  1393.  
  1394. #comment-wrapper h3 {
  1395.     margin-bottom: 20px;
  1396. }
  1397.  
  1398. /*-----------------------------------------------------------------------------------*/
  1399. /*  14. BLOG COMMENTS
  1400. /*-----------------------------------------------------------------------------------*/
  1401.  
  1402. #comments {
  1403.     margin-top: 10px;
  1404. }
  1405.  
  1406. #comments ol.commentlist .message p {
  1407.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  1408.     font-size: 13px;
  1409.     line-height: 18px;
  1410.     font-style: normal;
  1411.     clear: both;
  1412.     padding: 0;
  1413. }
  1414.  
  1415. #comments ol.commentlist {
  1416.     list-style:none;
  1417.     margin:0;
  1418. }
  1419.  
  1420. #comments ol.commentlist li {
  1421.     margin: 0;
  1422.     margin-bottom: 20px;
  1423.     list-style:none;
  1424.     background: none;
  1425.     padding: 20px;
  1426.     background-color: #1c1c1c;
  1427.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1428.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1429.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1430. }
  1431.  
  1432. #comments .user {
  1433.     float:left;
  1434.     width:60px;
  1435.     text-align: center;
  1436.     height: 80px;
  1437. }
  1438.  
  1439. .avatar {
  1440.     width: 60px;
  1441.     height: 60px;
  1442.     padding: 0;
  1443.     padding-bottom: 3px;
  1444.     float:left;
  1445.     display:block;
  1446. }
  1447.  
  1448. #comments .message .info .date {
  1449.     float:left;
  1450.     font-style: italic;
  1451.     font-family: Georgia, "Times New Roman", Times, serif;
  1452.     font-size: 12px;
  1453.     color: #666666;
  1454.     margin-left: 5px;
  1455.     line-height: 17px;
  1456. }
  1457.  
  1458. #comments .info a {
  1459.     font-size:11px;
  1460.     float:left;
  1461.     text-decoration: none;
  1462. }
  1463.  
  1464. #comments a.reply-link {
  1465.     width: 60px;
  1466.     text-decoration:none;
  1467.     font-size:9px;
  1468.     text-transform: uppercase;
  1469.     font-style: normal;
  1470.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  1471. }
  1472.  
  1473. #comments a.reply-link:hover {
  1474.     text-decoration: underline;
  1475. }
  1476.  
  1477. #comments .message {
  1478.     background:none;
  1479.     width:500px;
  1480.     float:right;
  1481.     font-size:13px;
  1482.     line-height:20px;
  1483.     position:relative;
  1484.     padding:0 0 0px 20px;
  1485.     background: transparent url(style/images/line-v.png) left repeat-y;
  1486.     margin: 0;
  1487. }
  1488.  
  1489. #comments .message p {
  1490.     margin: 0;
  1491. }
  1492.  
  1493. #comments .info {
  1494.     margin: 0 0 3px 0;
  1495. }
  1496.  
  1497. #comments .info a:hover {
  1498.     color: #cdcdcd;
  1499. }
  1500.  
  1501. #comments ul.children {
  1502.     margin:0;
  1503.     padding:0 0 0 40px;
  1504. }
  1505.  
  1506. #comments ol.commentlist ul.children li {
  1507.     padding:20px 0 0 0;
  1508.     margin: 18px 0 0 0;
  1509.     background: none;
  1510.     background: transparent url(style/images/line.png) top center repeat-x;
  1511.     -moz-box-shadow: none;
  1512.     -webkit-box-shadow: none;
  1513.     box-shadow: none;
  1514. }
  1515.  
  1516. #comments ol.commentlist ul.children li .message {
  1517.     width:460px;
  1518. }
  1519.  
  1520. #comments ol.commentlist ul.children ul li .message {
  1521.     width:420px;
  1522. }
  1523.  
  1524. #comments ol.commentlist ul.children ul ul li .message {
  1525.     width:380px;
  1526. }
  1527.  
  1528. #comments ol.commentlist ul.children ul ul ul li .message {
  1529.     width:340px;
  1530. }
  1531.  
  1532. #comments ol.commentlist ul.children ul ul ul ul li .message {
  1533.     width:300px;
  1534. }
  1535.  
  1536. #comments ol.commentlist ul.children ul ul ul ul ul li .message {
  1537.     width:260px;
  1538. }
  1539.  
  1540. #comments .info h3 {
  1541.     margin: 0;
  1542.     padding: 0;
  1543.     line-height: 18px;
  1544.     display: inline;
  1545. }
  1546.  
  1547. #comments .info h3 a {
  1548.     font-size: 15px;
  1549.     font-style: normal;
  1550. }
  1551.  
  1552. #comment-form {
  1553.     background-color: #1c1c1c;
  1554.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1555.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1556.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1557.     padding: 20px;
  1558. }
  1559.  
  1560. .comment-form h3 {
  1561.     margin-bottom: 20px;
  1562. }
  1563.  
  1564. .comment-form input {
  1565.     display: block;
  1566.     width: 230px;
  1567.     height: 22px;
  1568.     height: 16px\0/;
  1569.     text-align: left;
  1570.     border: 0;
  1571.     padding: 5px 10px;
  1572.     padding: 8px 10px\0/;
  1573.     margin-bottom: 20px;
  1574.     background-color: #2c2c2c;
  1575.     color: #a5a5a5;
  1576.     font-size: 12px;
  1577. }
  1578.  
  1579. .comment-input {
  1580.     width: 250px;
  1581.     float: left;
  1582.     margin-right: 20px;
  1583. }
  1584.  
  1585. .comment-textarea {
  1586.     width: 330px;
  1587.     float: left;
  1588. }
  1589.  
  1590. .comment-form textarea {
  1591.     display: block;
  1592.     width: 310px;
  1593.     height: 106px;
  1594.     clear: both;
  1595.     border: 0;
  1596.     padding: 10px 10px 20px 10px;
  1597.     background-color: #2c2c2c;
  1598.     color: #a5a5a5;
  1599.     font-size: 12px;
  1600.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  1601. }
  1602.  
  1603. .comment-form textarea:hover {
  1604.     border:none;
  1605. }
  1606.  
  1607. .comment-form input#submit-button {
  1608.     clear:both;
  1609.     float: right;
  1610.     margin:0px;
  1611.     text-align: center;
  1612.     margin: -34px 10px 0 0;
  1613.     width: auto;
  1614.     position: relative;
  1615.     z-index: 9999;
  1616.     background: transparent url(style/images/submit.png) no-repeat;
  1617.     color: #1f1f1f;
  1618.     padding: 5px 12px;
  1619.     font-size: 14px;
  1620.     height: 32px;
  1621.     width: 120px;
  1622.     cursor: pointer;
  1623. }
  1624.  
  1625. .comment-form p {
  1626.     position: relative;
  1627.     margin: 0;
  1628.     padding: 0;
  1629. }
  1630.  
  1631. .comment-form p label {
  1632.     position: absolute;
  1633.     top: 0;
  1634.     left: 0;
  1635.     padding: 6px 10px;
  1636.     font-size: 12px;
  1637.     color: #494c4f;
  1638. }
  1639.  
  1640. .comment-form p br {
  1641.     display: none;
  1642. }
  1643.  
  1644. /*for FireFox*/
  1645.     input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner {
  1646.  border : 0px;
  1647. }
  1648.  
  1649. /*for IE8 */
  1650.     input[type="submit"]:focus, input[type="button"]:focus {
  1651.     outline : none;
  1652. }
  1653.  
  1654. /*-----------------------------------------------------------------------------------*/
  1655. /*  15. NEWS LIST
  1656. /*-----------------------------------------------------------------------------------*/
  1657.  
  1658. .jcarousel-container {
  1659.     float:left;
  1660.     display: block;
  1661.     position: relative;
  1662.     margin:0;
  1663.     padding:0;
  1664. }
  1665.  
  1666. .jcarousel-container-vertical {
  1667.     width:  962px;
  1668.     height: 535px;
  1669. }
  1670.  
  1671. .jcarousel-clip-vertical {
  1672.     height: 535px;
  1673. }
  1674.  
  1675. .jcarousel-item {
  1676.     height: 60px;
  1677.     overflow: hidden;
  1678.     position: relative;
  1679.     display: block;
  1680.     z-index: 1;
  1681. }
  1682.  
  1683. #newslist ul li {
  1684.     width:  928px;
  1685.     background: none;
  1686.     margin: 2px 0 18px 2px;
  1687.     background-color: #1c1c1c;
  1688.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1689.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1690.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1691.     padding: 15px;
  1692.     display: block;
  1693.     overflow: hidden;
  1694. }
  1695.  
  1696. #newslist p {
  1697.     margin: 0;
  1698. }
  1699.  
  1700. #newslist h4 {
  1701.     margin-bottom: 3px;
  1702.     line-height: 1;
  1703. }
  1704.  
  1705. #newslist h4 span {
  1706.     font-style: italic;
  1707.     font-family: Georgia, "Times New Roman", Times, serif;
  1708.     font-size: 12px;
  1709.     color: #666666;
  1710.     padding-left: 5px;
  1711. }
  1712.  
  1713. #news h2 {
  1714.     float: left;
  1715.     margin-top: 10px;
  1716. }
  1717.  
  1718. #scroll {
  1719.     overflow: hidden;
  1720.     width: 80px;
  1721.     height: 30px;
  1722.     margin: 20px auto;
  1723.     padding: 2px;
  1724. }
  1725.  
  1726. #newslist-next {
  1727.     cursor: pointer;
  1728.     top:0px;
  1729. }
  1730.  
  1731. #newslist-prev {
  1732.     cursor: pointer;
  1733.     outline: 0;
  1734. }
  1735.  
  1736. a.jbutton, a.jbutton:link, a.jbutton:visited {
  1737.     display: block;
  1738.     padding: 0;
  1739.     height: 30px;
  1740.     width: 30px;
  1741.     background: transparent url(style/images/gallery-arrows.jpg) no-repeat;
  1742.     -moz-box-shadow: 0px 1px 2px #0c0c0c;
  1743.     -webkit-box-shadow: 0px 1px 2px #0c0c0c;
  1744.     box-shadow: 0px 1px 2px #0c0c0c;
  1745.     text-indent: -99999px;
  1746. }
  1747.  
  1748. a#newslist-prev.jbutton, a#prev.jbutton {
  1749.     background-position: top left;
  1750.     float: left;
  1751.     height: 30px;
  1752.     width: 30px;
  1753. }
  1754.  
  1755. a#newslist-next.jbutton, a#next.jbutton {
  1756.     background-position: top right;
  1757.     float: right;
  1758.     height: 30px;
  1759.     width: 30px;
  1760. }
  1761.  
  1762. a#newslist-prev.jbutton:hover {
  1763.     background-position: left -30px;
  1764.     text-decoration: none;
  1765. }
  1766.  
  1767. a#newslist-next.jbutton:hover {
  1768.     background-position: right -30px;
  1769.     text-decoration: none;
  1770. }
  1771.  
  1772. /*-----------------------------------------------------------------------------------*/
  1773. /*  16. CONTACT
  1774. /*-----------------------------------------------------------------------------------*/
  1775.  
  1776. #wrapper ul.info li {
  1777.     background: none;
  1778.     padding: 0 0 0 35px;
  1779.     margin-bottom: 15px;
  1780. }
  1781.  
  1782. #wrapper ul.info li img {
  1783.     vertical-align: top;
  1784. }
  1785.  
  1786. #wrapper ul.info li.home {
  1787.     background: transparent url(style/images/icon-home.png) no-repeat 0 2px;
  1788. }
  1789.  
  1790. #wrapper ul.info li.phone {
  1791.     background: transparent url(style/images/icon-phone.png) no-repeat 0 2px;
  1792. }
  1793.  
  1794. #wrapper ul.info li.email {
  1795.     background: transparent url(style/images/icon-email.png) no-repeat 0 4px;
  1796. }
  1797.  
  1798. #twitter-wrapper {
  1799.     float: none;
  1800.     clear: both;
  1801.     margin: 0 0 60px 0;
  1802.     position: relative;
  1803. }
  1804.  
  1805. #twitter {
  1806.     font-style: italic;
  1807.     font-size:12px;
  1808.     padding: 10px 0;
  1809.     background: #202020 url(style/images/twitter.png) no-repeat 20px center;
  1810.     min-height: 28px;
  1811. }
  1812.  
  1813. #twitter ul {
  1814.     padding: 0;
  1815.     margin: 0;
  1816. }
  1817.  
  1818. #twitter ul li {
  1819.     background: none;
  1820.     padding: 5px 10px 5px 80px;
  1821.     line-height: 16px;
  1822. }
  1823.  
  1824. #twitter ul li a {
  1825.     color: #a5a5a5;
  1826.     text-decoration: none;
  1827. }
  1828.  
  1829. #twitter ul li a:hover {
  1830.     text-decoration: underline;
  1831. }
  1832.  
  1833. .username {
  1834.     background: transparent url(style/images/twitter-arrow.png) no-repeat center top;
  1835.     position: absolute;
  1836.     padding: 15px 0 0 0;
  1837.     right: 0;
  1838.     bottom:-35px;
  1839.     font-size: 12px;
  1840. }
  1841.  
  1842. #wrapper .contact-social ul {
  1843.     margin: 20px 0 0 0;
  1844. }
  1845.  
  1846. #wrapper .contact-social ul li {
  1847.     background: none;
  1848.     float: left;
  1849.     padding: 0;
  1850.     margin: 0 10px 0 0;
  1851. }
  1852.  
  1853. /*-----------------------------------------------------------------------------------*/
  1854. /*  17. TOGGLE & TABS
  1855. /*-----------------------------------------------------------------------------------*/
  1856.  
  1857. .toggle {
  1858.     width: 100%;
  1859.     margin-bottom: 20px;
  1860. }
  1861.  
  1862. .toggle-wrapper {
  1863.     padding-bottom:5px;
  1864. }
  1865.  
  1866. h2.trigger {
  1867.     width:100%;
  1868.     clear:both;
  1869.     font-size: 20px;
  1870.     margin:0px;
  1871.     display: block;
  1872.     color: #a5a5a5;
  1873.     cursor: pointer;
  1874. }
  1875.  
  1876. h2.trigger:hover {
  1877.     color: #cdcdcd;
  1878. }
  1879.  
  1880. .togglebox {
  1881.     width:920px;
  1882.     height: auto;
  1883.     background: #202020;
  1884.     overflow: hidden;
  1885.     margin: 10px 0;
  1886. }
  1887.  
  1888. .togglebox div {
  1889.     padding: 20px;
  1890. }
  1891.  
  1892. .togglebox p {
  1893.     line-height: 22px;
  1894. }
  1895.  
  1896. .togglebox p {
  1897.     line-height: 22px;
  1898. }
  1899.  
  1900. .tabbed-content {
  1901.     width: 100%;
  1902.     overflow: hidden;
  1903.     padding-bottom: 20px;
  1904. }
  1905.  
  1906. #wrapper ul.tabs {
  1907.     margin: 0;
  1908.     padding: 0;
  1909.     float: left;
  1910.     list-style: none;
  1911.     width: 100%;
  1912. }
  1913.  
  1914. #wrapper ul.tabs li {
  1915.     float: left;
  1916.     margin: 0 7px 0 0;
  1917.     padding: 0px;
  1918.     background: none;
  1919.     overflow: hidden;
  1920.     position: relative;
  1921.     font-family: 'Puritan20Normal';
  1922. }
  1923.  
  1924. #wrapper ul.tabs li a {
  1925.     text-decoration: none;
  1926.     display: block;
  1927.     font-size: 15px;
  1928.     line-height: 35px;
  1929.     padding: 0 15px 3px 15px;
  1930.     height: 35px;
  1931.     background-color: #181818;
  1932.     color: #a5a5a5;
  1933. }
  1934.  
  1935. #wrapper ul.tabs li a:hover {
  1936.     color: #cdcdcd;
  1937. }
  1938.  
  1939. #wrapper ul.tabs li.active a {
  1940.     background-color: #202020;
  1941.     position: relative;
  1942.     z-index: 999;
  1943.     color: #cdcdcd;
  1944. }
  1945.  
  1946. #wrapper ul.tabs li.active a, #wrapper ul.tabs li.active a:hover {
  1947.     position: relative;
  1948.     border-bottom: black;
  1949. }
  1950.  
  1951. .tab_container {
  1952.     clear: both;
  1953.     float: left;
  1954.     width: 100%;
  1955.     margin-top: -3px;
  1956.     background-color: #202020;
  1957.     z-index: 999;
  1958.     position: relative;
  1959. }
  1960.  
  1961. .tab_content {
  1962.     padding: 20px 20px 0 20px;
  1963. }
  1964.  
  1965. /*-----------------------------------------------------------------------------------*/
  1966. /*  18. CAROUSEL
  1967. /*-----------------------------------------------------------------------------------*/
  1968.  
  1969. #wrapper .d-carousel ul li {
  1970.     background: none;
  1971.     background-color: #1c1c1c;
  1972.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1973.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1974.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  1975.     padding: 15px;
  1976.     width: 175px;
  1977. }
  1978.  
  1979. .jcarousel-direction-rtl {
  1980.     direction: rtl;
  1981. }
  1982.  
  1983. .d-carousel h4 {
  1984.     margin: 5px 0 5px 0;
  1985. }
  1986.  
  1987. .d-carousel .jcarousel-container {
  1988.     display: block;
  1989.     overflow: hidden;
  1990.     margin-bottom: 20px;
  1991. }
  1992.  
  1993. .d-carousel .jcarousel-item {
  1994.     width: 190px;
  1995.     height: 290px;
  1996. }
  1997.  
  1998. .d-carousel .jcarousel-container-horizontal {
  1999.     width: 870px;
  2000.     height: 325px;
  2001.     padding: 0 45px;
  2002. }
  2003.  
  2004. .d-carousel.sgrid .jcarousel-container {
  2005.     display: block;
  2006.     overflow: hidden;
  2007.     margin-bottom: 20px;
  2008.     height: 156px;
  2009. }
  2010.  
  2011. .d-carousel.sgrid .jcarousel-clip-horizontal {
  2012.     width:  870px;
  2013.     height: 156px;
  2014. }
  2015.  
  2016. .d-carousel.sgrid .jcarousel-item {
  2017.     width: 190px;
  2018.     height: 120px;
  2019. }
  2020.  
  2021. .d-carousel .jcarousel-item-horizontal {
  2022.     margin-left: 3px;
  2023.     margin-bottom: 3px;
  2024.     margin-top: 3px;
  2025.     margin-right: 11px;
  2026. }
  2027.  
  2028. .d-carousel .jcarousel-next-horizontal {
  2029.     position: absolute;
  2030.     top: 149px;
  2031.     right: 0;
  2032.     margin-right: 3px;
  2033.     width: 25px;
  2034.     height: 25px;
  2035.     cursor: pointer;
  2036.     background: transparent url(style/images/blog-arrows.jpg) no-repeat top right;
  2037.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2038.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2039.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2040. }
  2041.  
  2042. .d-carousel.sgrid .jcarousel-next-horizontal {
  2043.     position: absolute;
  2044.     top: 60px;
  2045.     right: 0;
  2046.     margin-right: 3px;
  2047.     width: 25px;
  2048.     height: 25px;
  2049.     cursor: pointer;
  2050.     background: transparent url(style/images/blog-arrows.jpg) no-repeat top right;
  2051.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2052.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2053.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2054. }
  2055.  
  2056. .d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal {
  2057.     left: 5px;
  2058.     right: auto;
  2059.     background-image: url(style/images/blog-arrows.jpg);
  2060. }
  2061.  
  2062. .d-carousel .jcarousel-next-horizontal:hover {
  2063.     background-position: bottom right;
  2064. }
  2065.  
  2066. .d-carousel .jcarousel-prev-horizontal {
  2067.     position: absolute;
  2068.     top: 149px;
  2069.     left: 0;
  2070.     margin-left: 3px;
  2071.     width: 25px;
  2072.     height: 25px;
  2073.     cursor: pointer;
  2074.     background: transparent url(style/images/blog-arrows.jpg) no-repeat top left;
  2075.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2076.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2077.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2078. }
  2079.  
  2080. .d-carousel.sgrid .jcarousel-prev-horizontal {
  2081.     position: absolute;
  2082.     top: 60px;
  2083.     left: 0;
  2084.     margin-left: 3px;
  2085.     width: 25px;
  2086.     height: 25px;
  2087.     cursor: pointer;
  2088.     background: gray url(style/images/blog-arrows.jpg) no-repeat top left;
  2089.     -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2090.     -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2091.     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.7);
  2092. }
  2093.  
  2094. .d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal {
  2095.     left: auto;
  2096.     right: 5px;
  2097.     background-image: url(style/images/blog-arrows.jpg);
  2098. }
  2099.  
  2100. .d-carousel .jcarousel-prev-horizontal:hover {
  2101.     background-position: bottom left;
  2102. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement