Advertisement
lewapkon

style.css

Apr 15th, 2014
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.54 KB | None | 0 0
  1. body
  2. {
  3.     background-color: #f7efeb;
  4.     padding: 1.25em; /* 20 */
  5. }
  6.  
  7. #nav
  8. {
  9.     width: 60em; /* 1000 */
  10.     font-family: 'Open Sans', sans-serif;
  11.     font-weight: 400;
  12.     position: relative;
  13.     top: 25%;
  14.     left: 50%;
  15.     margin-left: -30em; /* 30 480 */
  16. }
  17.  
  18.     #nav > a
  19.     {
  20.         display: none;
  21.     }
  22.  
  23.     #nav li
  24.     {
  25.         position: relative;
  26.     }
  27.         #nav li a
  28.         {
  29.             color: #fff;
  30.             display: block;
  31.         }
  32.         #nav li a:active
  33.         {
  34.             background-color: #c00 !important;
  35.         }
  36.  
  37.     #nav span:after
  38.     {
  39.         width: 0;
  40.         height: 0;
  41.         border: 0.313em solid transparent; /* 5 */
  42.         border-bottom: none;
  43.         border-top-color: #efa585;
  44.         content: '';
  45.         vertical-align: middle;
  46.         display: inline-block;
  47.         position: relative;
  48.         right: -0.313em; /* 5 */
  49.     }
  50.  
  51.     /* first level */
  52.  
  53.     #nav > ul
  54.     {
  55.         height: 3.75em; /* 60 */
  56.         background-color: #e15a1f;
  57.     }
  58.         #nav > ul > li
  59.         {
  60.             width: 25%;
  61.             height: 100%;
  62.             float: left;
  63.         }
  64.             #nav > ul > li > a
  65.             {
  66.                 height: 100%;
  67.                 font-size: 1.5em; /* 24 */
  68.                 line-height: 2.5em; /* 60 (24) */
  69.                 text-align: center;
  70.             }
  71.                 #nav > ul > li:not( :last-child ) > a
  72.                 {
  73.                     border-right: 1px solid #cc470d;
  74.                 }
  75.                 #nav > ul > li:hover > a,
  76.                 #nav > ul:not( :hover ) > li.active > a
  77.                 {
  78.                     background-color: #cc470d;
  79.                 }
  80.  
  81.  
  82.         /* second level */
  83.  
  84.         #nav li ul
  85.         {
  86.             background-color: #cc470d;
  87.             display: none;
  88.             position: absolute;
  89.             top: 100%;
  90.         }
  91.             #nav li:hover ul
  92.             {
  93.                 display: block;
  94.                 left: 0;
  95.                 right: 0;
  96.             }
  97.                 #nav li:not( :first-child ):hover ul
  98.                 {
  99.                     left: -1px;
  100.                 }
  101.                 #nav li ul a
  102.                 {
  103.                     font-size: 1.25em; /* 20 */
  104.                     border-top: 1px solid #e15a1f;
  105.                     padding: 0.75em; /* 15 (20) */
  106.                 }
  107.                     #nav li ul li a:hover,
  108.                     #nav li ul:not( :hover ) li.active a
  109.                     {
  110.                         background-color: #e15a1f;
  111.                     }
  112.  
  113.  
  114. @media only screen and ( max-width: 62.5em ) /* 1000 */
  115. {
  116.     #nav
  117.     {
  118.         width: 100%;
  119.         position: static;
  120.         margin: 0;
  121.     }
  122. }
  123.  
  124. @media only screen and ( max-width: 40em ) /* 640 */
  125. {
  126.     html
  127.     {
  128.         font-size: 75%; /* 12 */
  129.     }
  130.  
  131.     #nav
  132.     {
  133.         position: relative;
  134.         top: auto;
  135.         left: auto;
  136.     }
  137.         #nav > a
  138.         {
  139.             width: 3.125em; /* 50 */
  140.             height: 3.125em; /* 50 */
  141.             text-align: left;
  142.             text-indent: -9999px;
  143.             background-color: #e15a1f;
  144.             position: relative;
  145.         }
  146.             #nav > a:before,
  147.             #nav > a:after
  148.             {
  149.                 position: absolute;
  150.                 border: 2px solid #fff;
  151.                 top: 35%;
  152.                 left: 25%;
  153.                 right: 25%;
  154.                 content: '';
  155.             }
  156.             #nav > a:after
  157.             {
  158.                 top: 60%;
  159.             }
  160.  
  161.         #nav:not( :target ) > a:first-of-type,
  162.         #nav:target > a:last-of-type
  163.         {
  164.             display: block;
  165.         }
  166.  
  167.  
  168.     /* first level */
  169.  
  170.     #nav > ul
  171.     {
  172.         height: auto;
  173.         display: none;
  174.         position: absolute;
  175.         left: 0;
  176.         right: 0;
  177.     }
  178.         #nav:target > ul
  179.         {
  180.             display: block;
  181.         }
  182.         #nav > ul > li
  183.         {
  184.             width: 100%;
  185.             float: none;
  186.         }
  187.             #nav > ul > li > a
  188.             {
  189.                 height: auto;
  190.                 text-align: left;
  191.                 padding: 0 0.833em; /* 20 (24) */
  192.             }
  193.                 #nav > ul > li:not( :last-child ) > a
  194.                 {
  195.                     border-right: none;
  196.                     border-bottom: 1px solid #cc470d;
  197.                 }
  198.  
  199.  
  200.         /* second level */
  201.  
  202.         #nav li ul
  203.         {
  204.             position: static;
  205.             padding: 1.25em; /* 20 */
  206.             padding-top: 0;
  207.         }
  208. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement