Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

dustinschau.com new css

By: a guest on May 26th, 2012  |  syntax: CSS  |  size: 11.50 KB  |  hits: 33  |  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. html, body {
  2.         margin: 0;
  3.         padding: 0;
  4.         height: auto;
  5. }
  6.  
  7. body {
  8.         font-family: "museo-sans", 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  9.         position: relative;
  10.         min-height: 750px;
  11. }
  12.  
  13. ::-moz-selection {
  14.         color: #fff;
  15.         color: rgba(255, 255, 255, .85);
  16.         text-shadow: none;
  17.         background: #434f59;
  18. }
  19.  
  20. ::selection {
  21.         color: #fff;
  22.         color: rgba(255, 255, 255, .85);
  23.         text-shadow: none;
  24.         background: #434f59;
  25. }
  26.  
  27. #container {
  28.         width: 924px;
  29.         margin-left: auto;
  30.         margin-right: auto;
  31.         padding-left: 25px;
  32.         padding-right: 25px;
  33. }
  34.  
  35. #ribbon {
  36.         background-color: #434f59;
  37.         height: 3px;
  38. }
  39.  
  40. /* @group Nav */
  41.  
  42. #nav {
  43.         height: 58px;
  44.         margin-top: 25px;
  45.         border-bottom: 1px solid #AAAAAA;
  46.         margin-bottom: 0;
  47.        
  48. }
  49.  
  50. #nav a {
  51.         text-decoration: none;
  52. }
  53.  
  54. #nav ul {
  55.         list-style-type: none;
  56.         float: right;
  57.         margin-top: 34px;
  58.         position: relative;
  59.         bottom: 109px;
  60. }
  61.  
  62. @-moz-document url-prefix() {
  63.         #nav li {
  64.                 position: relative;
  65.                 bottom: 2px;
  66.         }
  67. }
  68.  
  69. #nav li {
  70.         display: inline;
  71.         padding-left: 30px;
  72.         font-size: 20px;
  73.        
  74. }
  75.  
  76. #nav li a {
  77.         color: #AAAAAA;
  78.         text-decoration: none;
  79.        
  80. }
  81.  
  82. #nav li a:hover {
  83.         color: #434f59;
  84.         border-bottom: 1px solid #434f59;
  85. }
  86.  
  87. #nav li a.active {
  88.         color: #434f59;
  89.         border-bottom: 1px solid #434f59;
  90. }
  91.  
  92. #nav h1 {
  93.         font-size: 60px;
  94.         text-align: left;
  95.         font-family: "museo", serif;
  96.         font-weight: 100;
  97.         float: left;
  98.         margin-top: -3px;
  99.         text-transform: uppercase;
  100. }
  101.  
  102. #nav h1 a {
  103.         color: #434f59;
  104. }
  105.  
  106. #nav h1 a.active, #nav h1 a:hover{
  107.         background: url(../images/underline.png) repeat-x 0 61px;
  108. }
  109.  
  110. #nav h1 b {
  111.         font-weight: 300;
  112. }
  113.  
  114. /* @end */
  115.  
  116. #content {
  117.         margin: 0;
  118. }
  119.  
  120. #works {
  121.         margin-top: 125px;
  122.         margin-bottom: 125px;
  123. }
  124.  
  125. #portfolio img {
  126.         -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .3);
  127.         -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .3);
  128.         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .3);
  129. }
  130.  
  131. /* @group Contact */
  132.  
  133. #alert {
  134.         width: 360px;
  135.         padding-top: 20px;
  136.         padding-bottom: 20px;
  137.         background-color: #a8ffae;
  138.         border: 1px solid #4fb756;
  139.         text-align: center;
  140. }
  141.  
  142. #emailWarning, #messageWarning, #nameWarning {
  143.         width: 360px;
  144.         padding-top: 5px;
  145.         padding-bottom: 5px;
  146.         background-color: #fbdfdf;
  147.         border: 1px solid #bf6262;
  148.         text-align: center;
  149. }
  150.  
  151. #contactForm input, textArea {
  152.         width: 360px;
  153.         border: 1px dashed #808080;
  154.         height: 36px;
  155.         font-size: 14px;
  156.         font-family: 'museo-sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  157.         margin-bottom: 10px;
  158.         margin-top: 3px;
  159.         border-radius: 3px;
  160.         -moz-border-radius: 3px;
  161.         -webkit-border-radius: 3px;
  162.         background-color: #EEE;
  163.         -webkit-transition: all 0.25s linear;
  164.         -moz-transition: all 0.25s linear;
  165.         -o-transition: all 0.25s linear;
  166.         outline: none;
  167. }
  168.  
  169. #contactForm #alert {
  170.         text-align: center;
  171.         font-size: 16px;
  172.         margin-top: 25px;
  173. }
  174.  
  175. #contactForm input:hover, textArea:hover {
  176.         background-color: #FFF;
  177. }
  178.  
  179. #contactForm input:focus, textArea:focus {
  180.         background-color: #FFF;
  181.         border: 1px solid #434f59;
  182. }
  183.  
  184. #contactForm textarea {
  185.         resize: vertical;
  186.         height: 250px;
  187. }
  188.  
  189. #contactForm {
  190.         width: 360px;
  191.         font-size: 14px;
  192.         margin-bottom: 50px;
  193.         padding-left: 20px;
  194.         padding-right: 20px;
  195.         padding-bottom: 20px;
  196.         background-color: #cbcbcb;
  197.         float: right;
  198.         position: relative;
  199.         -webkit-border-radius: 0px 20px 20px 0px;
  200.         -moz-border-radius: 0px 20px 20px 0px;
  201.         border-radius: 0px 20px 20px 0px;
  202. }
  203.  
  204. #contact, #leftBox {
  205.         width: 484px;
  206.         background-color: #434f59;
  207.         color: #FFF;
  208.         padding: 20px;
  209.         -webkit-border-radius: 20px 0px 0px 20px;
  210.         -moz-border-radius: 20px 0px 0px 20px;
  211.         border-radius: 20px 0px 0px 20px;
  212.         float:left;
  213. }
  214.  
  215. #contact h1, #leftBox h1 {
  216.         font-size: 36px;
  217. }
  218.  
  219. #contact p, #leftBox p {
  220.         font-size: 26px;
  221. }
  222.  
  223. #contactContainer {
  224.         margin-top: 75px;
  225.         display: block;
  226.         width: 924px;
  227. }
  228.  
  229. #contactForm {
  230.         margin-bottom: 100px;
  231. }
  232.  
  233. #contactForm #button {
  234.         background-color: #808080;
  235.         border: none;
  236.         color: #FFF;
  237.         font-size: 22px;
  238.         -webkit-transition: all 0.25s linear;
  239.         -moz-transition: all 0.25s linear;
  240.         -o-transition: all 0.25s linear;
  241. }
  242.  
  243. #contactForm #button:hover {
  244.         background-color: #434f59;
  245. }
  246.  
  247. #contactForm .ampersand {
  248.         font-family: Baskerville;
  249.         font-weight: italic;
  250. }
  251.  
  252. #contactForm i {
  253.         color: #AAAAAA;
  254. }
  255.  
  256. /* @end */
  257.  
  258. #contactForm h3, #about h3 {
  259.         margin: 5px 0 0;
  260.         color: #FFF;
  261.         background-color: #434f59;
  262.         padding: 5px;
  263.         margin-bottom: 10px;
  264.         -webkit-border-radius: 3px;
  265.         -moz-border-radius: 3px;
  266.         border-radius: 3px;
  267.         display: inline-block;
  268.         position: relative;
  269.         right: 5px;
  270. }
  271.  
  272. /* @group About */
  273.  
  274. #leftBox, #about {
  275. }
  276.  
  277. #about {
  278.         margin-bottom: 125px;
  279. }
  280.  
  281. #about {
  282.         width: 400px;
  283.         float: right;
  284.         background-color: #cbcbcb;
  285.         -webkit-border-radius: 0px 20px 20px 0px;
  286.         -moz-border-radius: 0px 20px 20px 0px;
  287.         border-radius: 0px 20px 20px 0px;
  288. }
  289.  
  290. #about .link {
  291.         background-color: #434f59;
  292.         color: #FFF;
  293.         padding: 1px;
  294.         margin: 0;
  295.         text-decoration: none;
  296.         -webkit-border-radius: 2px 2px 2px 2px;
  297.         -moz-border-radius: 2px 2px 2px 2px;
  298.         border-radius: 2px 2px 2px 2px;
  299.         -webkit-transition: all 0.25s linear;
  300.         -moz-transition: all 0.25s linear;
  301.         -o-transition: all 0.25s linear;
  302. }
  303.  
  304. #about .link:hover {
  305.         background-color: #566f83;
  306. }
  307.  
  308. #about p {
  309.         padding-left: 20px;
  310.         padding-right: 20px;
  311.         line-height: 20px;
  312. }
  313.  
  314. /* @end */
  315.  
  316. /* @group Favorites */
  317.  
  318. #favorites {
  319.         width: 400px;
  320.         margin: 0 auto;
  321. }
  322.  
  323. #favorites li img {
  324.         border: 0;
  325.         -webkit-transition: all 0.25s linear;
  326.         -moz-transition: all 0.25s linear;
  327.         -o-transition: all 0.25s linear;
  328. }
  329.  
  330. #favorites li img:hover {
  331.         opacity: 0;
  332. }
  333.  
  334. #favorites ul {
  335.         list-style-type: none;
  336.         margin: 0 auto;
  337.         padding: 0;
  338.         margin-left: 4px;
  339. }
  340.  
  341. #favorites li {
  342.         width: 128px;
  343.         display: inline-block;
  344.         background: url(../images/info.png) no-repeat 38px 38px;
  345. }
  346.  
  347. #favorites li:hover {
  348.         background: url(../images/infohover.png) no-repeat 38px 38px;
  349. }
  350.  
  351. #link {
  352.         margin: 0;
  353.         display: block;
  354. }
  355.  
  356. /* @end */
  357.  
  358. /* @group Slideshow */
  359.  
  360. .nivoSlider {
  361.         position: relative;
  362.         width: 924px;
  363.         /*
  364.  
  365. Change this to your images width */
  366.     height: 400px;
  367.         /
  368.  
  369. * Change this to your images height */
  370.     background: url(../images/loading.gif) no-repeat 50% 50%;
  371. }
  372.  
  373. .nivoSlider img {
  374.         position: absolute;
  375.         top: 0px;
  376.         left: 0px;
  377.         display: none;
  378. }
  379.  
  380. .nivoSlider a {
  381.         border: 0;
  382.         display: block;
  383. }
  384.  
  385. #slider .nivo-controlNav {
  386.         position: absolute;
  387.         bottom: -70px
  388.  
  389. ;
  390. /* Put the nav below the slider */
  391. }
  392.  
  393. #slider .nivo-controlNav img {
  394.         display: inline;
  395.  
  396. /* Unhide the thumbnails */
  397.         position: relative;
  398.         margin-right: 10px;
  399. }
  400.  
  401. /* @end */
  402.  
  403. /* @group Portfolio */
  404.  
  405. #portfolio {
  406.         margin: 0;
  407.         color: #808080;
  408.         margin-bottom: 100px;
  409. }
  410.  
  411. #portfolio .info h1 {
  412.         font-weight: 100;
  413.         color: #595959;
  414.         margin-bottom: 5;
  415. }
  416.  
  417. #portfolio .info h1 b {
  418.         font-weight: 300;
  419. }
  420.  
  421. .left {
  422.         float: left;
  423. }
  424.  
  425. .date {
  426.         float: right;
  427. }
  428.  
  429. #portfolio .info p {
  430.         clear: both;
  431.         padding-bottom: 15px;
  432.         font-size: 16px;
  433.         text-align: justify;
  434.         line-height: 20px;
  435. }
  436.  
  437. /*#portfolio .appStore::after {content: " (App Store link)";}*/
  438.  
  439. #portfolio .appStore {
  440.         background: url(../images/iTunes.png) no-repeat left center;
  441.         padding-left:19px;
  442. }
  443.  
  444.  
  445. #portfolio .info p a {
  446.         color: #808080;
  447. /*      background-color: #808080;
  448.         padding: 2px;
  449.         border-radius: 2px;
  450.         -moz-border-radius: 2px;
  451.         -webkit-border-radius: 2px;*/
  452.         border-bottom: 1px dotted #808080;
  453.         text-decoration: none;
  454.         -webkit-transition: all 0.25s linear;
  455.         -moz-transition: all 0.25s linear;
  456.         -o-transition: all 0.25s linear;
  457. }
  458.  
  459. #portfolio .info p a:hover {
  460.         background-color: #808080;
  461.         color: #FFF;
  462.         border-radius: 2px;
  463.         -moz-border-radius: 2px;
  464.         -webkit-border-radius: 2px;
  465. }
  466.  
  467. #portfolio .info p a:active {
  468.         background-color: #000;
  469.         color: #FFF;
  470. }
  471.  
  472. #pagination {
  473.         height: 20px;
  474. }
  475.  
  476. /* @end */
  477.  
  478. /* @group Footer */
  479.  
  480. #footer {
  481.         background: url('../images/footer.png') repeat 0 bottom;
  482.         position: absolute;
  483.         bottom: 0;
  484.         width: 100%;
  485. }
  486.  
  487. #footer .info {
  488.         color: #FFF;
  489.         margin: 0 auto;
  490.         padding-bottom: 10px;
  491. }
  492.  
  493. #footer p {
  494.         color: #FFF;
  495. }
  496.  
  497. p.copyright {
  498.         text-align: center;
  499. }
  500.  
  501. #footer ul {
  502.         list-style-type: none;
  503.         text-align: center;
  504.         padding: 0;
  505.         margin: 0;
  506.         padding-top: 10px;
  507. }
  508.  
  509. #footer li {
  510.         line-height: 24px;
  511.         text-align: right;
  512.         display: inline-block;
  513. }
  514.  
  515. #footer a {
  516.         color: #FFF;
  517.         text-decoration: none;
  518. }
  519.  
  520. .twitter {
  521.         font-weight: bold;
  522.         background-color: #33ccff;
  523.         padding: 4px;
  524. }
  525.  
  526. .twitter:hover {
  527.         color: #33ccff;
  528.         background-color: transparent;
  529. }
  530.  
  531. .facebook {
  532.         font-weight: bold;
  533.         background-color: #335795;
  534.         padding: 4px;
  535. }
  536.  
  537. .facebook:hover {
  538.         background-color: transparent;
  539.         color: #335795;
  540. }
  541.  
  542. .dribbble {
  543.         font-weight: bold;
  544.         background-color: #ea4c88;
  545.         padding: 4px;
  546. }
  547.  
  548. .dribbble:hover {
  549.         background-color: transparent;
  550.         color: #ea4c88;
  551. }
  552.  
  553. .reddit {
  554.         font-weight: bold;
  555.         background-color: #ff4500;
  556.         padding: 4px;
  557. }
  558.  
  559. .reddit:hover {
  560.         background-color: transparent;
  561.         color: #ff4500;
  562. }
  563.  
  564. /* @end */
  565.  
  566. /* @group Resume */
  567.  
  568. #bar {
  569.         background: url(../images/bar.png) repeat-x scroll 0 top;
  570.         height: 36px;
  571.         -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
  572.         -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
  573.         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
  574. }
  575.  
  576. #bar .pdf {
  577.         background: url(../images/pdf.gif) no-repeat left center;
  578.         padding-left: 18px;
  579. }
  580.  
  581. .back {
  582.         float: left;
  583. }
  584.  
  585. .right {
  586.         float: right;
  587. }
  588.  
  589. #bar ul {
  590.         list-style-type: none;
  591.         position: relative;
  592.         top: 6px;
  593.         width: 750px;
  594.         margin: 0 auto;
  595.         padding: 0;
  596.         padding-left: 4px;
  597.         padding-right: 4px;
  598. }
  599.  
  600. #bar li {
  601.         display: inline-block;
  602.         margin-top: 5px;
  603.         margin-right: 10px;
  604.         font-size: 12px;
  605. }
  606.  
  607. #bar a {
  608.         background-color: rgba(0,0,0,0.6);
  609.         color: #FFF;
  610.         padding: 4px;
  611.         padding-left: 6px;
  612.         padding-right: 6px;
  613.         -webkit-border-radius: 4px;
  614.         -moz-border-radius: 4px;
  615.         border-radius: 4px;
  616.         text-decoration: none;
  617.         -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .3);
  618.         -moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .3);
  619.         box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .3);
  620. }
  621.  
  622. #bar a:hover {
  623.         background-color: rgba(255,255,255,0.1);
  624. }
  625.  
  626. #bar a:active {
  627.         background-color: rgba(0,0,0,0.8);     
  628. }
  629.  
  630. #print {
  631.         width: 150px;
  632.         margin: 0 auto;
  633.         position: absolute;
  634.         bottom: 0;
  635.         margin-bottom: 25px;
  636.         margin-left: 300px;
  637. }
  638.  
  639. #print a {
  640.         color: #FFF;
  641.         padding: 8px;
  642.         font-size: 14px;
  643.         background-color: rgba(0,0,0,0.6);
  644.         -webkit-border-radius: 4px;
  645.         -moz-border-radius: 4px;
  646.         border-radius: 4px;
  647.         text-decoration: none;
  648. }
  649.  
  650. #print a:hover {
  651.         background-color: rgba(0,0,0,0.5);     
  652. }
  653.  
  654. #print a:active {
  655.         background-color: rgba(0,0,0,0.8);     
  656. }
  657.  
  658. #resume {
  659.         width: 750px;
  660.         margin:  0 auto;
  661.         padding-bottom: 25px;
  662. }
  663.  
  664. #resume #header p {
  665.         margin:  0;    
  666. }
  667.  
  668. #resume #header h1 {
  669.         color: #434f59;
  670. }
  671.  
  672.  
  673. #resume #header b {
  674.         text-transform: uppercase;
  675.         color: #434f59;
  676. }
  677.  
  678. #resume .right {
  679.         float: right;
  680. }
  681.  
  682. #header h1, .section h3 {
  683.         color: #434f59;
  684.         font-family: "museo", serif;
  685.         margin-bottom: 0;
  686.         font-weight: bold;
  687. }
  688.  
  689. #header {
  690.         margin-bottom: 100px;
  691. }
  692.  
  693. /* @group Section */
  694. .section h4 {
  695.         font-weight: 300;
  696. }
  697.  
  698. .section h4 b {
  699.         font-weight: 700;
  700. }
  701.  
  702. .section h4 {
  703.         margin-bottom: 5px;
  704. }
  705.  
  706. .section p {
  707.         clear: both;
  708.         margin-bottom: 0;
  709. }
  710.  
  711. .section h3 {
  712.         color: #434f59;
  713.         font-size: 16px;
  714.         clear: both;
  715.         margin-bottom: 0;
  716.         padding-bottom: 0;
  717. }
  718.  
  719. .section ul {
  720.         list-style-type: none;
  721.         margin: 0;
  722.         padding: 0;
  723.         margin-top: 10px;
  724. }
  725.  
  726. /* @end */
  727.  
  728. .left {
  729.         float: left;
  730. }
  731.  
  732. .date {
  733.         font-weight: 700;
  734.         float: right;
  735. }
  736.  
  737. /* @end */
create a new version of this paste RAW Paste Data