base.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. /*
  2. A CSS framework by David Pennington
  3. Copyright 2011, MIT License
  4. http://xeoncross.com
  5. */
  6. /* Master Reset */
  7. *{vertical-align:baseline}
  8. html,body,div,form,fieldset,input,textarea,th,td,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
  9. article,aside,figure,figcaption,hgroup,footer,header,nav,section,video,object{display:block}
  10. th,td{text-align:left;vertical-align:top;padding:.5em;border:1px solid}
  11. table{border-collapse:collapse;border-spacing:0;width:100%}
  12. abbr,acronym{cursor:help;border-bottom:1px dotted}
  13. fieldset,img{border:0}
  14. pre{width:100%;white-space:pre;overflow:auto}
  15. .reset,.reset *{font-weight:inherit;font-family:inherit;font-style:inherit;font-size:1em;border:0;outline:0;padding:0;margin:0}
  16. /* Form Reset (IE7+) */
  17. input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],html>body textarea
  18. {
  19. width:100%;
  20. padding:.5em;
  21. margin:0 0 1.5em 0;
  22. -webkit-box-sizing:border-box; /* Safari/Chrome, other WebKit */
  23. -moz-box-sizing:border-box; /* Firefox, other Gecko */
  24. box-sizing:border-box; /* Opera/IE 8+ */
  25. }
  26. /* 12 Column Grid System */
  27. /* 1024px, 1152px, & 1280 screens */
  28. .grid_1{width:50px}
  29. .grid_2{width:130px}
  30. .grid_3{width:210px}
  31. .grid_4{width:290px}
  32. .grid_5{width:370px}
  33. .grid_6{width:450px}
  34. .grid_7{width:530px}
  35. .grid_8{width:610px}
  36. .grid_9{width:690px}
  37. .grid_10{width:770px}
  38. .grid_11{width:850px}
  39. .grid_12{width:930px}
  40. .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12
  41. {margin-left:30px;float:left;display:inline;/*overflow:hidden;*/}
  42. .container{width:930px;margin:0 auto;/*overflow:hidden;*/}
  43. .container .first, .container .grid_12{margin-left:0;clear:left}
  44. /* +1400px screens */
  45. @media only screen and (min-width:1400px){
  46. .grid_1{width:70px}
  47. .grid_2{width:170px}
  48. .grid_3{width:270px}
  49. .grid_4{width:370px}
  50. .grid_5{width:470px}
  51. .grid_6{width:570px}
  52. .grid_7{width:670px}
  53. .grid_8{width:770px}
  54. .grid_9{width:870px}
  55. .grid_10{width:970px}
  56. .grid_11{width:1070px}
  57. .grid_12{width:1170px}
  58. .container{width:1170px}
  59. }
  60. /* Mobile Devices */
  61. @media only screen and (max-width:700px){
  62. .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12
  63. {width:100%;margin-left:0px}
  64. .container{width:auto;margin:0 2em}
  65. }
  66. /* Vertical Rhythm - Auto-ajusting Font/Line-Height Ratio */
  67. body{font-size:100%;line-height:1.5em;font-family:Georgia,serif;}/*IE*/
  68. html>body{font-size:1em}
  69. p{margin:0 0 1.5em 0;padding:0}
  70. h1,h2,h3,h4{font-weight:normal;line-height:1.5em}
  71. h1{font-size:4em}
  72. h2{font-size:3em}
  73. h3{font-size:1.5em;line-height:2em}
  74. h4{font-size:1em;font-weight:bold}
  75. table{margin:1em 0}
  76. th,td{border:1px solid;padding:.5em}
  77. blockquote{margin:1.5em;font-style:italic}
  78. ul,ol,dl{margin:1.5em;padding:0}
  79. ul ul,ol ol{margin:0 2em}
  80. pre{margin:1.5em 0;line-height:1.5em}
  81. input,select{font-family:inherit;font-size:1em;/*line-height:1.5em;height:1.5em;*/}
  82. textarea{margin:0 0 1.5em 0;height:9em;font-family:inherit;font-size:1em;}