Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2014
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.55 KB | None | 0 0
  1.  
  2. /* Page Styles
  3. ================================ */
  4.  
  5. * {
  6.     box-sizing: border-box;
  7. }
  8. html,
  9. body {
  10.  height: 100%;
  11. }
  12. body {
  13.     font: normal 1.1em/1.5 sans-serif;
  14.     color: #222;
  15.     background-color: #edeff0;
  16. }
  17.  
  18. /* Layout Element Colors
  19. ================================ */
  20.  
  21. .main-header       { background-color: #384047; }
  22. .main-logo a       { background-color: #5fcf80; }
  23. .main-nav a        { background-color: #3f8abf; }
  24. .primary-content   { background-color: #caebf6; }
  25. .secondary-content { background-color: #bfe3d0; }
  26. .main-footer       { background-color: #b7c0c7; }
  27.  
  28. /* Header, Banner and Footer Layout
  29. ================================ */
  30.  
  31. .main-header {
  32.     padding: 15px;
  33.     min-height: 100px;
  34. }
  35. .main-nav li {
  36.     margin-top: 15px;
  37. }
  38. .main-logo a,
  39. .main-nav a {
  40.     display: block;
  41.     color: white;
  42.     text-decoration: none;
  43.     text-align: center;
  44.     padding: 5px 15px;
  45.     border-radius: 5px;
  46. }
  47. .main-footer {
  48.     text-align: center;
  49.     padding-top: 5px;
  50.     padding-bottom: 5px;
  51. }
  52.  
  53. /* Column Layout
  54. ================================ */
  55.  
  56. .col {
  57.     padding: 20px;
  58. }
  59. .extra-content,
  60. .main-banner {
  61.     display: none;
  62. }
  63.  
  64. /* Imagery
  65. ================================ */
  66.  
  67. .feat-img {
  68.     width: 100%;
  69.     margin-top: 10px;
  70.     margin-bottom: 10px;
  71.     border: solid 1px;
  72.     padding: 5px;
  73. }
  74.  
  75. /* Float Clearfix
  76. ================================ */
  77.  
  78. .group:after {
  79.   content: " ";
  80.   display: table;
  81.   clear: both;
  82. }
  83.  
  84. /* Media Queries
  85. ================================ */
  86.  
  87. @media (min-width: 769px) {
  88.  
  89.     .main-wrapper,
  90.     .content-row,
  91.     .col {
  92.      height: 100%;
  93.     }
  94.  
  95. /*  .main-wrapper {
  96.         width: 95%;
  97.         margin: auto;
  98.     }
  99. */
  100.     /* Header, Banner and Footer Layout
  101.     ================================ */
  102.  
  103.         .main-header {
  104.             position: relative;
  105.         }
  106.         .main-logo,
  107.         .main-nav {
  108.             position: absolute;
  109.         }
  110.         .main-logo {
  111.             width: 150px;
  112.             top: 20px;
  113.             left: 20px;
  114.         }
  115.         .main-nav {
  116.             bottom: 30px;
  117.             right: 25px;
  118.         }
  119.     .main-nav li {
  120.         margin-right: 6px;
  121.         margin-left: 6px;
  122.         display: inline-block;
  123.     }
  124.     .main-banner {
  125.         background: #dfe2e4;
  126.         text-align: center;
  127.         padding: 50px 15px;
  128.     }
  129.  
  130.     /* Column Layout
  131.     ================================ */
  132.  
  133.     .extra-content,
  134.     .main-banner {
  135.         display: block; /* Unhide from mobile view */
  136.     }
  137.  
  138.     .content-row {
  139.         position: relative;
  140.     }
  141.     .col {
  142.         width: 30%;
  143.         position: absolute;
  144.     }
  145.     .primary-content {
  146.         width: 40%;
  147.         left: 30%;
  148.     }
  149.     .secondary-content {
  150.         right: 0;
  151.     }
  152.  
  153.     /* Imagery
  154.     ================================ */
  155.  
  156.     .feat-img {
  157.         width: 50%;
  158.         float: left;
  159.         margin-right: 25px;
  160.     }
  161. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement