API tools faq
paste
Advertisement
tunnckoCore

MartonBash's Upgraded 960 Grid System (with pixels)

tunnckoCore
Oct 10th, 2012
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 20.57 KB | None | 0 0
raw download clone embed print report
  1. @font-face {
  2.   font-family: Yanone Kaffeesatz;
  3.     src: url('../fonts/YanoneKaffeesatz-Regular.eot');
  4.     src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf');
  5. }
  6.  
  7. @font-face {
  8.   font-family: News Cycle;
  9.     src: url('../fonts/NewsCycle-Regular.eot');
  10.     src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
  11. }
  12.  
  13.  
  14. body {
  15.   font: normal .80em arial, sans-serif;
  16.   background: #eeeeee url(../images/pattern.png);
  17.   color: #444;
  18. }
  19.  
  20. p {
  21.   padding: 0 0 20px 0;
  22.   line-height: 1.7em;
  23.   letter-spacing: 0.22ex;
  24. }
  25.  
  26. img {
  27.   border: 0;
  28. }
  29.  
  30. h1, h2, h3, h4, h5, h6 {
  31.   color: #362C20;
  32.   letter-spacing: 0em;
  33.   padding: 0 0 5px 0;
  34. }
  35.  
  36. h1, h2, h3 {
  37.   font: normal 140% arial, sans-serif;
  38.   margin: 0 0 15px 0;
  39.   padding: 15px 0 5px 0;
  40.   color: #222;
  41. }
  42.  
  43. h2 {
  44.   font-size: 160%;
  45.   padding: 9px 0 5px 0;
  46. }
  47.  
  48. h3 {
  49.   font-size: 140%;
  50.   padding: 5px 0 0 0;
  51. }
  52.  
  53. h4, h6 {
  54.   color: #00AAD5;
  55.   padding: 0 0 5px 0;
  56.   font: normal 160% 'News Cycle', arial, sans-serif;
  57. }
  58.  
  59. h5, h6 {
  60.   color: #555;
  61.   font: italic 95% arial, sans-serif;
  62.   letter-spacing: normal;
  63.   padding: 0 0 15px 0;
  64. }
  65.  
  66. a, a:hover {
  67.   outline: none;
  68.   text-decoration: underline;
  69.   color: #B30303;
  70. }
  71.  
  72. a:hover {
  73.   text-decoration: none;
  74. }
  75.  
  76. blockquote {
  77.   margin: 10px 0;
  78.   padding: 20px 15px;
  79.   border: 1px solid #E5E5DB;
  80.   background: #fff url('../images/quote_big.png') top left no-repeat;
  81. }
  82.  
  83. ul {
  84.   margin: 2px 0 22px 17px;
  85. }
  86.  
  87. ul li {
  88.   list-style-type: circle;
  89.   margin: 0 0 6px 0;
  90.   padding: 0 0 4px 5px;
  91.   line-height: 1.5em;
  92. }
  93.  
  94. ol {
  95.   margin: 8px 0 22px 20px;
  96. }
  97.  
  98. ol li {
  99.   margin: 0 0 11px 0;
  100. }
  101.  
  102.  
  103.  
  104. .clearfix:before, .clearfix:after {
  105.     content: ".";
  106.     display: block;
  107.     clear: both;
  108.     visibility: hidden;
  109.     line-height: 0;
  110.     height: 0;
  111. }
  112.  
  113. /* Containers
  114. ----------------------------------------------------------------------------------------------------*/
  115. .container_12 {
  116.     margin-left: auto;
  117.     margin-right: auto;
  118.     width: 960px;
  119. }
  120. /*--------------------------------------------------------------------------------------------------*/
  121. /* Grid >> Children (Alpha ~ Left, Beta ~ Top, Gama ~ Bottom, Omega ~ Right)
  122. ----------------------------------------------------------------------------------------------------*/
  123. .alpha { margin-left: 0; }
  124. .beta { margin-top: 0; }
  125. .gama { margin-bottom: 0; }
  126. .omega { margin-right: 0; }
  127. /*--------------------------------------------------------------------------------------------------*/
  128. /* Grid >> Global
  129. ----------------------------------------------------------------------------------------------------*/
  130. .grid_1,
  131. .grid_2,
  132. .grid_3,
  133. .grid_4,
  134. .grid_5,
  135. .grid_6,
  136. .grid_7,
  137. .grid_8,
  138. .grid_9,
  139. .grid_10,
  140. .grid_11,
  141. .grid_12 {
  142.     display:inline;
  143.     float: left;
  144.     position: relative;
  145.     margin-top: 10px;
  146.     margin-left: 10px;
  147.     margin-right: 10px;
  148. }
  149. .push_1, .pull_1,
  150. .push_2, .pull_2,
  151. .push_3, .pull_3,
  152. .push_4, .pull_4,
  153. .push_5, .pull_5,
  154. .push_6, .pull_6,
  155. .push_7, .pull_7,
  156. .push_8, .pull_8,
  157. .push_9, .pull_9,
  158. .push_10, .pull_10,
  159. .push_11, .pull_11,
  160. .push_12, .pull_12 {
  161.     position:relative;
  162. }
  163. /*--------------------------------------------------------------------------------------------------*/
  164. /* Grid >> Floating
  165. ----------------------------------------------------------------------------------------------------*/
  166.     .left { float: left; }
  167.     .right { float: right; }
  168.     .auto { margin: 0 auto; }
  169. /*--------------------------------------------------------------------------------------------------*/
  170. /* Grid >> Font/Text Stylesheet
  171. ----------------------------------------------------------------------------------------------------*/
  172.     .boldtext { font-weight: bold; }
  173.     .bold300 { font-weight: 300; }
  174.     .bold500 { font-weight: 500; }
  175.    
  176.     .it { font-style: italic; }
  177.     .normal { font-weight: normal;}
  178.    
  179.     .uline { text-decoration: underline; }
  180.     .decorenone { text-decoration: none;}
  181.     .none { text-decoration: none; color: #444;}
  182.     .adminlink { text-decoration: none; color: blue; }
  183.    
  184.     .red { color: red; }
  185.     .textleft { text-align: left; }
  186.     .textcenter { text-align: center; }
  187.     .hr { border-bottom: 2px solid #ccc; }
  188.    
  189.     .lightBG {
  190.         background: #e3e3e3; /* Show a solid color for older browsers */
  191.         background: -moz-linear-gradient(#f3f3f3, #d3d3d3);
  192.         background: -o-linear-gradient(#f3f3f3, #d3d3d3);
  193.         background: -webkit-linear-gradient(#f3f3f3, #d3d3d3);
  194.     }
  195.  
  196.     .radius_all_5 {
  197.         border-radius: 5px;
  198.         -moz-border-radius: 5px;
  199.         -webkit-border: 5px;
  200.     }
  201.     .radius_all_7 {
  202.         border-radius: 7px;
  203.         -moz-border-radius: 7px;
  204.         -webkit-border: 7px;
  205.     }
  206.     .radius_all_10 {
  207.         border-radius: 10px;
  208.         -moz-border-radius: 10px;
  209.         -webkit-border: 10px;
  210.     }
  211.     .radius_all_15 {
  212.         border-radius: 15px;
  213.         -moz-border-radius: 15px;
  214.         -webkit-border: 15px;
  215.     }
  216.    
  217.     /* Rules:
  218.      * top left, top right, bottom right, bottom left
  219.      *
  220.      * Only top side
  221.      ******/
  222.     .radius_top_5 {
  223.         border-radius: 5px 5px 0 0;
  224.         -moz-border-radius: 5px 0 0 0;
  225.         -webkit-border: 5px 5px 0 0;
  226.     }
  227.     .radius_top_10 {
  228.         border-radius: 10px 10px 0 0;
  229.         -moz-border-radius: 10px 10px 0 0;
  230.         -webkit-border: 10px 10px 0 0;
  231.     }
  232.     .radius_top_15 {
  233.         border-radius: 15px 15px 0 0;
  234.         -moz-border-radius: 15px 15px 0 0;
  235.         -webkit-border: 15px 15px 0 0;
  236.     }
  237. /*
  238.     Only left side
  239.  */
  240.     .radius_left_5 {
  241.         border-radius: 5px 0 0 5px;
  242.         -moz-border-radius: 5px 0 0 5px;
  243.         -webkit-border: 5px 0 0 5px;
  244.     }
  245.     .radius_left_10 {
  246.         border-radius: 10px 0 0 10px;
  247.         -moz-border-radius: 10px 0 0 10px;
  248.         -webkit-border: 10px 0 0 10px;
  249.     }
  250.     .radius_left_15 {
  251.         border-radius: 15px 0 0 15px;
  252.         -moz-border-radius: 15px 0 0 15px;
  253.         -webkit-border: 15px 0 0 15px;
  254.     }
  255. /*
  256.     Only right side
  257.  */
  258.     .radius_right_5 {
  259.         border-radius: 0 5px 5px 0;
  260.         -moz-border-radius: 0 5px 5px 0;
  261.         -webkit-border: 0 5px 5px 0;
  262.     }
  263.     .radius_right_10 {
  264.         border-radius: 0 10px 10px 0;
  265.         -moz-border-radius: 0 10px 10px 0;
  266.         -webkit-border: 0 10px 10px 0;
  267.     }
  268.     .radius_right_15 {
  269.         border-radius: 0 15px 15px 0;
  270.         -moz-border-radius: 0 15px 15px 0;
  271.         -webkit-border: 0 15px 15px 0;
  272.     }
  273. /*
  274.     Only bottom side
  275.  */
  276.     .radius_bottom_5 {
  277.         border-radius: 0 0 5px 5px;
  278.         -moz-border-radius: 0 0 5px 5px;
  279.         -webkit-border: 0 0 5px 5px;
  280.     }
  281.     .radius_bottom_10 {
  282.         border-radius: 0 0 10px 10px;
  283.         -moz-border-radius: 0 0 10px 10px;
  284.         -webkit-border: 0 0 10px 10px;
  285.     }
  286.     .radius_bottom_15 {
  287.         border-radius: 0 0 15px 15px;
  288.         -moz-border-radius: 0 0 15px 15px;
  289.         -webkit-border: 0 0 15px 15px;
  290.     }
  291. /*--------------------------------------------------------------------------------------------------*/
  292. /* Grid >> 12 Columns
  293. ----------------------------------------------------------------------------------------------------*/
  294.     .container_12 .grid_1 { width:60px; }
  295.     .container_12 .grid_2 { width:140px; }
  296.     .container_12 .grid_3 { width:220px; }
  297.     .container_12 .grid_4 { width:300px; }
  298.     .container_12 .grid_5 { width:380px; }
  299.     .container_12 .grid_6 { width:460px; }
  300.     .container_12 .grid_7 { width:540px; }
  301.     .container_12 .grid_8 { width:620px; }
  302.     .container_12 .grid_9 { width:700px; }
  303.     .container_12 .grid_10 { width:780px; }
  304.     .container_12 .grid_11 { width:860px; }
  305.     .container_12 .grid_12 { width:940px; }
  306. /*--------------------------------------------------------------------------------------------------*/
  307. /* Prefix Extra Space >> 12 Columns
  308. ----------------------------------------------------------------------------------------------------*/
  309.     .container_12 .prefix_1 { padding-left:80px; }
  310.     .container_12 .prefix_2 { padding-left:160px; }
  311.     .container_12 .prefix_3 { padding-left:240px; }
  312.     .container_12 .prefix_4 { padding-left:320px; }
  313.     .container_12 .prefix_5 { padding-left:400px; }
  314.     .container_12 .prefix_6 { padding-left:480px; }
  315.     .container_12 .prefix_7 { padding-left:560px; }
  316.     .container_12 .prefix_8 { padding-left:640px; }
  317.     .container_12 .prefix_9 { padding-left:720px; }
  318.     .container_12 .prefix_10 { padding-left:800px; }
  319.     .container_12 .prefix_11 { padding-left:880px; }
  320. /*--------------------------------------------------------------------------------------------------*/
  321. /* Suffix Extra Space >> 12 Columns
  322. ----------------------------------------------------------------------------------------------------*/
  323.     .container_12 .suffix_1 { padding-right:80px; }
  324.     .container_12 .suffix_2 { padding-right:160px; }
  325.     .container_12 .suffix_3 { padding-right:240px; }
  326.     .container_12 .suffix_4 { padding-right:320px; }
  327.     .container_12 .suffix_5 { padding-right:400px; }
  328.     .container_12 .suffix_6 { padding-right:480px; }
  329.     .container_12 .suffix_7 { padding-right:560px; }
  330.     .container_12 .suffix_8 { padding-right:640px; }
  331.     .container_12 .suffix_9 { padding-right:720px; }
  332.     .container_12 .suffix_10 { padding-right:800px; }
  333.     .container_12 .suffix_11 { padding-right:880px; }
  334. /*--------------------------------------------------------------------------------------------------*/
  335. /* Push Space >> 12 Columns
  336. ----------------------------------------------------------------------------------------------------*/
  337.     .container_12 .push_1 { left:80px; }
  338.     .container_12 .push_2 { left:160px; }
  339.     .container_12 .push_3 { left:240px; }
  340.     .container_12 .push_4 { left:320px; }
  341.     .container_12 .push_5 { left:400px; }
  342.     .container_12 .push_6 { left:480px; }
  343.     .container_12 .push_7 { left:560px; }
  344.     .container_12 .push_8 { left:640px; }
  345.     .container_12 .push_9 { left:720px; }
  346.     .container_12 .push_10 { left:800px; }
  347.     .container_12 .push_11 { left:880px; }
  348. /*--------------------------------------------------------------------------------------------------*/
  349. /* Pull Space >> 12 Columns
  350. ----------------------------------------------------------------------------------------------------*/
  351.     .container_12 .pull_1 { left:-80px; }
  352.     .container_12 .pull_2 { left:-160px; }
  353.     .container_12 .pull_3 { left:-240px; }
  354.     .container_12 .pull_4 { left:-320px; }
  355.     .container_12 .pull_5 { left:-400px; }
  356.     .container_12 .pull_6 { left:-480px; }
  357.     .container_12 .pull_7 { left:-560px; }
  358.     .container_12 .pull_8 { left:-640px; }
  359.     .container_12 .pull_9 { left:-720px; }
  360.     .container_12 .pull_10 { left:-800px; }
  361.     .container_12 .pull_11 { left:-880px; }
  362. /*--------------------------------------------------------------------------------------------------*
  363.  * Paddings
  364.  *--------------------------------------------------------------------------------------------------*
  365.     *   Paddings Fourside
  366.     *----------------------------------------*/
  367.         .pall_30 { padding: 30px; }
  368.         .pall_25 { padding: 25px; }
  369.         .pall_20 { padding: 20px; }
  370.         .pall_15 { padding: 15px; }
  371.         .pall_10 { padding: 10px; }
  372.         .pall_5   { padding: 5px; }
  373. /*----------------------------------------
  374.  *  Paddings Top
  375.  *----------------------------------------*/
  376.         .pt_30 { padding-top: 30px; }
  377.         .pt_25 { padding-top: 25px; }
  378.         .pt_20 { padding-top: 20px; }
  379.         .pt_15 { padding-top: 15px; }
  380.         .pt_10 { padding-top: 10px; }
  381.         .pt_5   { padding-top: 5px; }
  382. /*----------------------------------------
  383.  *  Paddings Right
  384.  *----------------------------------------*/
  385.         .pr_30 { padding-right: 30px; }
  386.         .pr_25 { padding-right: 25px; }
  387.         .pr_20 { padding-right: 20px; }
  388.         .pr_15 { padding-right: 15px; }
  389.         .pr_10 { padding-right: 10px; }
  390.         .pr_5   { padding-right: 5px; }
  391. /*----------------------------------------
  392.  *  Paddings Top
  393.  *----------------------------------------*/
  394.         .pt_30 { padding-top: 30px; }
  395.         .pt_25 { padding-top: 25px; }
  396.         .pt_20 { padding-top: 20px; }
  397.         .pt_15 { padding-top: 15px; }
  398.         .pt_10 { padding-top: 10px; }
  399.         .pt_5   { padding-top: 5px; }
  400. /*----------------------------------------
  401.  *  Paddings Left
  402.  *----------------------------------------*/
  403.         .pl_30 { padding-left: 30px; }
  404.         .pl_25 { padding-left: 25px; }
  405.         .pl_20 { padding-left: 20px; }
  406.         .pl_15 { padding-left: 15px; }
  407.         .pl_10 { padding-left: 10px; }
  408.         .pl_5   { padding-left: 5px; }
  409. /*--------------------------------------------------------------------------------------------------*
  410.  * Margins
  411.  *--------------------------------------------------------------------------------------------------*
  412.     *   Margins Fourside
  413.     *----------------------------------------*/
  414.         .mall_30 { margin: 30px; }
  415.         .mall_25 { margin: 25px; }
  416.         .mall_20 { margin: 20px; }
  417.         .mall_15 { margin: 15px; }
  418.         .mall_10 { margin: 10px; }
  419.         .mall_5   { margin: 5px; }
  420. /*----------------------------------------
  421.  *  Margins Top
  422.  *----------------------------------------*/
  423.         .mt_30 { margin-top: 30px; }
  424.         .mt_25 { margin-top: 25px; }
  425.         .mt_20 { margin-top: 20px; }
  426.         .mt_15 { margin-top: 15px; }
  427.         .mt_10 { margin-top: 10px; }
  428.         .mt_5   { margin-top: 5px; }
  429. /*----------------------------------------
  430.  *  Margins Right
  431.  *----------------------------------------*/
  432.         .mr_30 { margin-right: 30px; }
  433.         .mr_25 { margin-right: 25px; }
  434.         .mr_20 { margin-right: 20px; }
  435.         .mr_15 { margin-right: 15px; }
  436.         .mr_10 { margin-right: 10px; }
  437.         .mr_5   { margin-right: 5px; }
  438. /*----------------------------------------
  439.  *  Margins Bottom
  440.  *----------------------------------------*/
  441.         .mt_30 { margin-top: 30px; }
  442.         .mt_25 { margin-top: 25px; }
  443.         .mt_20 { margin-top: 20px; }
  444.         .mt_15 { margin-top: 15px; }
  445.         .mt_10 { margin-top: 10px; }
  446.         .mt_5   { margin-top: 5px; }
  447. /*----------------------------------------
  448.  *  Margins Left
  449.  *----------------------------------------*/
  450.         .ml_30 { margin-left: 30px; }
  451.         .ml_25 { margin-left: 25px; }
  452.         .ml_20 { margin-left: 20px; }
  453.         .ml_15 { margin-left: 15px; }
  454.         .ml_10 { margin-left: 10px; }
  455.         .ml_5   { margin-left: 5px; }
  456.        
  457.        
  458.        
  459. #main {
  460.   background: transparent;
  461. }
  462.  
  463.  
  464. header {
  465.   background: transparent;
  466. }
  467.  
  468. #logo {
  469.   background: transparent;
  470.   color: #888;
  471. }
  472.  
  473. #logo h1, #logo h2 {
  474.   font: normal 320% 'News Cycle', arial, sans-serif;
  475.   border-bottom: 0;
  476.   text-transform: none;
  477.   margin: 0;
  478. }
  479.  
  480. #logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
  481.   padding: 0;
  482.   color: #444;
  483.   text-decoration: none;
  484. }
  485.  
  486. #logo_text h1 a .logo_colour {
  487.   color: #B30303;
  488. }
  489.  
  490. #logo_text a:hover .logo_colour {
  491.   color: #444;
  492. }
  493.  
  494. #logo_text h2 {
  495.   font-size: 140%;
  496.   padding: 0 0 0 0;
  497.   color: #222;
  498. }
  499.  
  500. nav {
  501.   height: 44px;
  502.   color: #444;
  503.   background: transparent;
  504.   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  505.   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  506.   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  507.   border: 1px solid #c3c3c3;
  508. }
  509.  
  510.  
  511.  
  512. .sidebar h3, .content h1 {
  513.   padding: 0 15px 20px 0;
  514.   font: 230% 'News Cycle', arial, sans-serif;
  515.   text-shadow:  #FFF 1px 1px;
  516.   margin: 0 1px;
  517.   color: #444;
  518. }
  519.  
  520. .sidebar h3 {
  521.   color: #444;
  522.   font: 250% 'News Cycle', arial, sans-serif;
  523.   padding: 0 15px 5px 0;
  524. }
  525.  
  526. .sidebar ul {
  527.   margin: 0 0 15px 0;
  528. }
  529.  
  530. .sidebar li a, .sidebar li a:hover {
  531.   color: #555;
  532.   text-decoration: none;
  533. }
  534.  
  535. .sidebar li a:hover {
  536.   text-decoration: underline;
  537. }
  538.  
  539. .sidebar_item, .content_item {
  540.   padding: 15px 0;
  541. }
  542.  
  543. .content {
  544.   text-align: left;
  545.   font-size: 120%;
  546. }
  547.  
  548. .content ul {
  549.   margin: 2px 0 22px 0px;
  550. }
  551.  
  552. .content ul li, .sidebar ul li {
  553.   list-style-type: none;
  554.   background: url(../images/bullet.png) no-repeat;
  555.   line-height: 1.5em;
  556. }
  557.  
  558. footer {
  559.     font: normal 110% arial, sans-serif;
  560.  
  561.     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  562.     -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  563.     box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  564.     border: 1px solid #c3c3c3;
  565. }
  566.  
  567. footer p {
  568.   font-size: 120%;
  569. }
  570.  
  571. footer a {
  572.   color: #222;
  573.   text-decoration: none;
  574. }
  575.  
  576. footer a:hover {
  577.   color: #222;
  578.   text-decoration: underline;
  579. }
  580.  
  581. .form_settings {
  582.   margin: 15px 0 0 0;
  583. }
  584.  
  585. .form_settings p {
  586.   padding: 0 0 4px 0;
  587. }
  588.  
  589. .form_settings span {
  590.   float: left;
  591.   width: 200px;
  592.   text-align: left;
  593. }
  594.  
  595. .form_settings input, .form_settings textarea {
  596.   padding: 5px;
  597.   width: 299px;
  598.   font: 100% arial;
  599.   border: 1px solid #D5D5D5;
  600.   background: #FFF;
  601.   color: #47433F;
  602.   border-radius: 7px 7px 7px 7px;
  603.   -moz-border-radius: 7px 7px 7px 7px;
  604.   -webkit-border: 7px 7px 7px 7px;  
  605. }
  606.  
  607. .form_settings .submit {
  608.   font: 140% 'Yanone Kaffeesatz', arial, sans-serif;
  609.   border: 0;
  610.   width: 99px;
  611.   margin: 0 0 0 212px;
  612.   height: 33px;
  613.   padding: 2px 0 3px 0;
  614.   cursor: pointer;
  615.   background: #ddd; /* Show a solid color for older browsers */
  616.   background: -moz-linear-gradient(#fff, #ddd);
  617.   background: -o-linear-gradient(#fff, #ddd);
  618.   background: -webkit-linear-gradient(#fff, #ddd);
  619.   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  620.   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  621.   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  622.   border: 1px solid #ddd;
  623.   border-radius: 7px 7px 7px 7px;
  624.   -moz-border-radius: 7px 7px 7px 7px;
  625.   -webkit-border: 7px 7px 7px 7px;
  626.   color: #222;
  627.   text-shadow: 1px 1px #FFF;
  628. }
  629.  
  630. .form_settings textarea, .form_settings select {
  631.   font: 100% arial;
  632.   width: 299px;
  633. }
  634.  
  635. .form_settings select {
  636.   width: 310px;
  637. }
  638.  
  639. .form_settings .checkbox {
  640.   margin: 4px 0;
  641.   padding: 0;
  642.   width: 14px;
  643.   border: 0;
  644.   background: none;
  645. }
  646.  
  647. .separator {
  648.   width: 100%;
  649.   height: 0;
  650.   border-top: 1px solid #D9D5CF;
  651.   border-bottom: 1px solid #FFF;
  652.   margin: 0 0 20px 0;
  653. }
  654.  
  655. table {
  656.   margin: 10px 0 30px 0;
  657. }
  658.  
  659. table tr th, table tr td {
  660.   background: #BBB;
  661.   color: #FFF;
  662.   padding: 7px 4px;
  663.   text-align: left;
  664. }
  665.  
  666. table tr td {
  667.   background: #DDD;
  668.   color: #444;
  669.   border-top: 1px solid #FFF;
  670. }
  671.  
  672. /* Image Transitions */
  673. ul#images {
  674.   margin: 0 15px 10px 0;
  675.   padding: 0;
  676.   list-style: none;
  677.   position: relative;
  678. }
  679.  
  680. ul#images li {
  681.   display: block;
  682.   overflow: hidden;
  683.   padding: 0;
  684.   float: left;
  685.   width: 155px;
  686.   height: 300px;
  687. }
  688.  
  689.  
  690.  
  691. /**
  692. Stylesheet for SooperFish by www.SooperThemes.com
  693. Author: Jurriaan Roelofs
  694. **/
  695.  
  696. /* Configuration of menu width */
  697. html body ul.sf-menu ul,html body ul.sf-menu ul li {
  698.   width: 200px;
  699. }
  700.  
  701. html body ul.sf-menu ul ul {
  702.   margin: 0 0 0 200px;
  703. }
  704.  
  705. /* Framework for proper showing/hiding/positioning */
  706. ul.sf-menu,ul.sf-menu * {
  707.   margin: 0;
  708.   padding: 0;
  709. }
  710.  
  711. ul.sf-menu {
  712.   display: block;
  713.   position: relative;
  714. }
  715.  
  716. ul.sf-menu li {
  717.   display: block;
  718.   list-style: none;
  719.   float: left;
  720.   position: relative;
  721. }
  722.  
  723. ul.sf-menu li:hover {
  724.   visibility: inherit; /* fixes IE7 'sticky bug' */
  725. }
  726.  
  727. ul.sf-menu a {
  728.   display: block;
  729.   position: relative;
  730. }
  731.  
  732. ul.sf-menu ul {
  733.   position: absolute;
  734.   left: 0;
  735.   width: 150px;
  736.   top: auto;
  737.   left: -999999px;
  738. }
  739.  
  740. ul.sf-menu ul a {
  741.   zoom: 1; /* IE6/7 fix */
  742. }
  743.  
  744. ul.sf-menu ul li {
  745.   float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  746.   width: 150px;
  747. }
  748.  
  749. ul.sf-menu ul ul {
  750.   top: 0;
  751.   margin: 0 0 0 150px;
  752. }
  753.  
  754. ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
  755. ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
  756. ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
  757. ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
  758.   left: auto;
  759. }
  760.  
  761. ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
  762. ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
  763. ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
  764. ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
  765.   left: -999999px;
  766. }
  767.  
  768. /* autoArrows CSS */
  769. span.sf-arrow {
  770.   width: 7px;
  771.   height: 7px;
  772.   position: absolute;
  773.   top: 20px;
  774.   right: 5px;
  775.   display: block;
  776.   background: url(../images/arrows-black.png) no-repeat 0 0;
  777.   overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  778.   font-size: 1px;
  779. }
  780.  
  781. ul ul span.sf-arrow {
  782.   right: 5px;
  783.   top: 20px;
  784.   background-position: 0 100%;
  785. }
  786.  
  787. /* Theming the menu */
  788. ul#nav {
  789.   float: left;
  790. }
  791.  
  792. ul#nav ul {
  793.   background: #ddd;
  794.   margin-top: 5px;
  795.   padding-bottom: 15px;
  796. }
  797.  
  798. ul#nav li a {
  799.   padding: 9px 25px 6px 25px;
  800.   font: 170% 'Yanone Kaffeesatz', arial, sans-serif;
  801.   text-shadow: 1px 1px #fff;
  802.   text-decoration: none;
  803.   color: #222;
  804.   margin-right: 2px;
  805. }
  806.  
  807. ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
  808.   color: #B30303;
  809.   text-shadow: none;
  810. }
  811.  
  812. ul#nav ul li a {
  813.   color: #222;
  814. }
  815.  
  816. ul#nav ul li a:hover {
  817.   color: #B30303;
  818.   margin-right: 2px;
  819. }
  820.  
  821.  
  822.  
  823. /* Image Transitions */
  824. ul#images {
  825.   margin: 0 15px 10px 0;
  826.   padding: 0;
  827.   position: relative;
  828. }
  829.  
  830. ul#images li {
  831.   display: block;
  832.   overflow: hidden;
  833.   padding: 0;
  834.   float: left;
  835.   width: 85px;
  836.   height: 300px;
  837.   list-style: none;
  838. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!