忘记密码?

一键登录

草根吧源码论坛

纯CSS3 绘制各种实用的ico小图标

查看: 323|回复: 1

[HTML+CSS+JS特效] 纯CSS3 绘制各种实用的ico小图标

[复制链接]

5760

主题

704

热度

2174

贡献

管理员

Rank: 9Rank: 9Rank: 9

DZ专员

发表于 2014-12-15 16:37:21 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
css3 Monochrome Icon Set
草根吧 纯CSS3 绘制各种实用的ico小图标  PHP技术区 forum

一般在移动端的时候,为了节约资源,用CSS3快捷有效的达到了这个效果!
  1. <style>
  2. body {
  3.     padding: 0;
  4.     margin: 0;
  5. }

  6. h1 {
  7.     font: 700 40px / 25px "Calibri";
  8.     text-align: center;
  9.     color: #333;
  10.     text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
  11.     margin: 50px 0 100px;
  12. }

  13. div.container {
  14.     position: relative;
  15.     width: 590px;
  16.     margin: 0 auto;
  17. }

  18. div.container_d {
  19.     position: relative;
  20.     width: 592px;
  21.     margin: 0 auto;
  22. }

  23. p {
  24.     font-size: 13px;
  25.     line-height: 18px;
  26.     font-family: Arial, Helvetica, sans-serif;
  27. }

  28. hr {
  29.     width: 592px;
  30.     height: 1px;
  31.     background: #888;
  32.     border: none;
  33.     border-bottom: 1px solid #eee;
  34.     outline: none;
  35. }

  36. h3 {
  37.     font-size: 16px;
  38.     line-height: 20px;
  39.     font-family: Arial, Helvetica, sans-serif;
  40.     border-bottom: 1px solid #aaa;
  41.     padding: 8px 0;
  42.     margin: 25px 0 10px;
  43. }

  44. code {
  45.     margin: 0;
  46.     padding: 20px;
  47.     background: #ddd;
  48.     border: 1px solid #fff;
  49.     display: block;
  50.     -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  51.     -moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  52.     box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  53. }

  54. /*##### ICONS #####*/
  55. div.icon {
  56.     height: 32px;
  57.     width: 32px;
  58.     position: relative;
  59.     margin: 15px;
  60.     overflow: hidden;
  61.     display: inline-block;
  62. }

  63. /* Down Arrow */
  64. div.icon div.downArrow {
  65.     height: 0px;
  66.     width: 0px;
  67.     border-width: 16px;
  68.     border-style: solid;
  69.     border-color: #333 transparent transparent transparent;
  70.     position: absolute;
  71.     top: 16px;
  72.     left: 0;
  73. }

  74. div.icon div.downArrow:after {
  75.     content: '';
  76.     width: 12px;
  77.     height: 16px;
  78.     background-color: #333;
  79.     position: absolute;
  80.     bottom: 16px;
  81.     right: -6px;
  82. }

  83. /* Up Arrow */
  84. div.icon div.upArrow {
  85.     height: 0px;
  86.     width: 0px;
  87.     border-width: 16px;
  88.     border-style: solid;
  89.     border-color: transparent transparent #333 transparent;
  90.     position: absolute;
  91.     bottom: 16px;
  92.     left: 0;
  93. }

  94. div.icon div.upArrow:after {
  95.     content: '';
  96.     width: 12px;
  97.     height: 16px;
  98.     background-color: #333;
  99.     position: absolute;
  100.     top: 16px;
  101.     right: -6px;
  102. }

  103. /* Left Arrow */
  104. div.icon div.leftArrow {
  105.     height: 0px;
  106.     width: 0px;
  107.     border-width: 16px;
  108.     border-style: solid;
  109.     border-color: transparent #333 transparent transparent;
  110.     position: absolute;
  111.     right: 16px;
  112.     top: 0;
  113. }

  114. div.icon div.leftArrow:after {
  115.     content: '';
  116.     width: 16px;
  117.     height: 12px;
  118.     background-color: #333;
  119.     position: absolute;
  120.     top: -6px;
  121.     left: 16px;
  122. }

  123. /* Right Arrow */
  124. div.icon div.rightArrow {
  125.     height: 0px;
  126.     width: 0px;
  127.     border-width: 16px;
  128.     border-style: solid;
  129.     border-color: transparent transparent transparent #333;
  130.     position: absolute;
  131.     left: 16px;
  132.     top: 0;
  133. }

  134. div.icon div.rightArrow:after {
  135.     content: '';
  136.     width: 16px;
  137.     height: 12px;
  138.     background-color: #333;
  139.     position: absolute;
  140.     top: -6px;
  141.     right: 16px;
  142. }

  143. /* Home */
  144. div.icon div.home {
  145.     height: 0px;
  146.     width: 0px;
  147.     border-width: 16px;
  148.     border-style: solid;
  149.     border-color: transparent transparent #333 transparent;
  150.     position: absolute;
  151.     bottom: 16px;
  152.     left: 0;
  153. }

  154. div.icon div.home:after {
  155.     content: '';
  156.     width: 5px;
  157.     height: 16px;
  158.     background-color: transparent;
  159.     position: absolute;
  160.     top: 16px;
  161.     right: -11px;
  162.     border-left: 8px solid #333;
  163.     border-right: 8px solid #333;
  164. }

  165. div.icon div.home:before {
  166.     content: '';
  167.     width: 9px;
  168.     height: 6px;
  169.     background-color: #333;
  170.     position: absolute;
  171.     top: 16px;
  172.     right: -5px;
  173. }

  174. div.icon div.chimney {
  175.     width: 4px;
  176.     height: 10px;
  177.     background: #333;
  178.     position: absolute;
  179.     right: 6px;
  180.     top: 3px;
  181. }

  182. /* Disc */
  183. div.icon div.disc:after {
  184.     content: '';
  185.     width: 6px;
  186.     height: 6px;
  187.     background: transparent;
  188.     border-radius: 50px;
  189.     -webkit-border-radius: 50px;
  190.     -moz-border-radius: 50px;
  191.     border: 3px solid #333;
  192.     position: absolute;
  193.     left: -3px;
  194.     top: -3px;
  195. }

  196. div.icon div.disc:before {
  197.     content: '';
  198.     width: 6px;
  199.     height: 6px;
  200.     background: transparent;
  201.     border-radius: 50px;
  202.     -webkit-border-radius: 50px;
  203.     -moz-border-radius: 50px;
  204.     border: 13px solid #333;
  205.     position: absolute;
  206.     left: -13px;
  207.     top: -13px;
  208.     z-index: -1
  209. }

  210. div.icon div.disc {
  211.     width: 6px;
  212.     height: 6px;
  213.     background: transparent;
  214.     border-radius: 50px;
  215.     -moz-border-radius: 50px;
  216.     -webkit-border-radius: 50px;
  217.     border: 10px solid #eee;
  218.     position: absolute;
  219.     left: 3px;
  220.     top: 3px;
  221. }

  222. /* Heart */
  223. div.icon div.heart {
  224.     height: 26px;
  225.     width: 16px;
  226.     background: #333;
  227.     -webkit-border-radius: 100px 100px 0 0;
  228.     -moz-border-radius: 100px 100px 0 0;
  229.     border-radius: 100px 100px 0 0;
  230.     -webkit-transform: rotate(-45deg);
  231.     -moz-transform: rotate(-45deg);
  232.     -ms-transform: rotate(-45deg);
  233.     -o-transform: rotate(-45deg);
  234.     transform: rotate(-45deg);
  235.     position: absolute;
  236.     left: 5px;
  237.     top: 2px;
  238. }

  239. div.icon div.heart:after {
  240.     content: '';
  241.     height: 26px;
  242.     width: 16px;
  243.     background: #333;
  244.     -webkit-border-radius: 100px 100px 0 0;
  245.     -moz-border-radius: 100px 100px 0 0;
  246.     border-radius: 100px 100px 0 0;
  247.     -webkit-transform: rotate(90deg);
  248.     -moz-transform: rotate(90deg);
  249.     -ms-transform: rotate(90deg);
  250.     -o-transform: rotate(90deg);
  251.     transform: rotate(90deg);
  252.     position: absolute;
  253.     right: -5px;
  254.     bottom: -5px;
  255. }

  256. /* Pencil */
  257. div.icon div.pencil {
  258.     height: 23px;
  259.     width: 6px;
  260.     background: #333;
  261.     -webkit-transform: rotate(45deg);
  262.     -moz-transform: rotate(45deg);
  263.     -ms-transform: rotate(45deg);
  264.     -o-transform: rotate(45deg);
  265.     transform: rotate(45deg);
  266.     position: absolute;
  267.     left: 12px;
  268.     top: 6px;
  269. }

  270. div.icon div.pencil:after {
  271.     content: '';
  272.     height: 4px;
  273.     width: 6px;
  274.     background: #333;
  275.     -webkit-border-radius: 2px 2px 0 0;
  276.     -moz-border-radius: 2px 2px 0 0;
  277.     border-radius: 2px 2px 0 0;
  278.     position: absolute;
  279.     top: -5px;
  280.     left: 0px;
  281. }

  282. div.icon div.pencil:before {
  283.     content: '';
  284.     width: 0px;
  285.     height: 0px;
  286.     border-width: 5px 3px 0 3px;
  287.     border-style: solid;
  288.     border-color: #333 transparent transparent transparent;
  289.     position: absolute;
  290.     bottom: -6px;
  291. }

  292. /* Chat Box */
  293. div.icon div.chat {
  294.     width: 32px;
  295.     height: 22px;
  296.     background: #333;
  297.     border-radius: 4px;
  298.     -webkit-border-radius: 4px;
  299.     -moz-border-radius: 4px;
  300. }

  301. div.icon div.chat:after {
  302.     content: '';
  303.     width: 0px;
  304.     height: 0px;
  305.     border-style: solid;
  306.     border-color: #333 transparent transparent transparent;
  307.     border-width: 5px;
  308.     position: absolute;
  309.     top: 16px;
  310.     left: 2px;
  311.     -webkit-transform: rotate(135deg);
  312.     -moz-transform: rotate(135deg);
  313.     -ms-transform: rotate(135deg);
  314.     -o-transform: rotate(135deg);
  315.     transform: rotate(135deg);
  316. }

  317. div.icon div.lines {
  318.     background-color: #eee;
  319.     height: 2px;
  320.     width: 17px;
  321.     left: 5px;
  322.     position: absolute;
  323.     top: 5px;
  324. }

  325. div.icon div.lines:after {
  326.     content: '';
  327.     background-color: #eee;
  328.     height: 2px;
  329.     width: 10px;
  330.     position: absolute;
  331.     top: 5px;
  332. }

  333. div.icon div.lines:before {
  334.     content: '';
  335.     background-color: #eee;
  336.     height: 2px;
  337.     width: 22px;
  338.     position: absolute;
  339.     top: 10px;
  340. }

  341. /* Tick */
  342. div.icon div.tick {
  343.     width: 25px;
  344.     height: 4px;
  345.     background: #333;
  346.     margin: 13px 0 0 6px;
  347.     -webkit-transform: rotate(-45deg);
  348.     -moz-transform: rotate(-45deg);
  349.     -ms-transform: rotate(-45deg);
  350.     -o-transform: rotate(-45deg);
  351.     transform: rotate(-45deg);
  352. }

  353. div.icon div.tick:after {
  354.     content: '';
  355.     width: 12px;
  356.     height: 4px;
  357.     background: #333;
  358.     position: absolute;
  359.     top: -4px;
  360.     left: -4px;
  361.     -webkit-transform: rotate(90deg);
  362.     -moz-transform: rotate(90deg);
  363.     -ms-transform: rotate(90deg);
  364.     -o-transform: rotate(90deg);
  365.     transform: rotate(90deg);
  366. }

  367. /* Cross */
  368. div.icon div.cross {
  369.     width: 25px;
  370.     height: 4px;
  371.     background: #333;
  372.     margin: 15px 0 0 4px;
  373.     -webkit-transform: rotate(-45deg);
  374.     -moz-transform: rotate(-45deg);
  375.     -ms-transform: rotate(-45deg);
  376.     -o-transform: rotate(-45deg);
  377.     transform: rotate(-45deg);
  378. }

  379. div.icon div.cross:after {
  380.     content: '';
  381.     width: 25px;
  382.     height: 4px;
  383.     background: #333;
  384.     position: absolute;
  385.     top: 0px;
  386.     left: 0px;
  387.     -webkit-transform: rotate(90deg);
  388.     -moz-transform: rotate(90deg);
  389.     -ms-transform: rotate(90deg);
  390.     -o-transform: rotate(90deg);
  391.     transform: rotate(90deg);
  392. }

  393. /* User */
  394. div.icon div.user {
  395.     width: 12px;
  396.     height: 13px;
  397.     background: #333;
  398.     border-radius: 5px 5px 0 0;
  399.     margin-left: 10px;
  400.     margin-top: 2px;
  401. }

  402. div.icon div.user:after {
  403.     content: '';
  404.     width: 8px;
  405.     height: 5px;
  406.     background: #333;
  407.     position: absolute;
  408.     margin-top: 13px;
  409.     margin-left: 2px;
  410. }

  411. div.icon div.user:before {
  412.     content: '';
  413.     width: 0px;
  414.     height: 0px;
  415.     position: absolute;
  416.     top: 17px;
  417.     left: 0px;
  418.     border-style: solid;
  419.     border-color: transparent transparent #333 transparent;
  420.     border-width: 0 16px 6px 16px;
  421. }

  422. div.icon div.shoulder {
  423.     width: 32px;
  424.     height: 5px;
  425.     background: #333;
  426.     position: absolute;
  427.     bottom: 4px;
  428. }

  429. /* Search */
  430. div.icon div.search {
  431.     height: 13px;
  432.     width: 13px;
  433.     background: transparent;
  434.     border-radius: 50px;
  435.     -moz-border-radius: 50px;
  436.     -webkit-border-radius: 50px;
  437.     border: 4px solid #333;
  438. }

  439. div.icon div.search:after {
  440.     content: '';
  441.     width: 4px;
  442.     height: 15px;
  443.     background: #333;
  444.     position: absolute;
  445.     bottom: 2px;
  446.     -webkit-transform: rotate(-45deg);
  447.     -moz-transform: rotate(-45deg);
  448.     -ms-transform: rotate(-45deg);
  449.     -o-transform: rotate(-45deg);
  450.     transform: rotate(-45deg);
  451.     right: 8px;
  452. }

  453. /* Search */
  454. div.icon div.searchB {
  455.     width: 32px;
  456.     height: 32px;
  457.     background-color: #333;
  458.     border-radius: 8px;
  459.     -moz-border-radius: 8px;
  460.     -webkit-border-radius: 8px;
  461. }

  462. div.icon div.searchB:before {
  463.     position: absolute;
  464.     content: '';
  465.     height: 6px;
  466.     width: 6px;
  467.     background: transparent;
  468.     border-radius: 50px;
  469.     -moz-border-radius: 50px;
  470.     -webkit-border-radius: 50px;
  471.     border: 3px solid #eee;
  472.     margin: 7px
  473. }

  474. div.icon div.searchB:after {
  475.     content: '';
  476.     width: 3px;
  477.     height: 11px;
  478.     background: #eee;
  479.     position: absolute;
  480.     bottom: 6px;
  481.     -webkit-transform: rotate(-45deg);
  482.     -moz-transform: rotate(-45deg);
  483.     -ms-transform: rotate(-45deg);
  484.     -o-transform: rotate(-45deg);
  485.     transform: rotate(-45deg);
  486.     right: 10px;
  487. }

  488. /* Phone */
  489. div.icon div.phone {
  490.     position: absolute;
  491.     width: 20px;
  492.     height: 32px;
  493.     background-color: #333;
  494.     -webkit-border-radius: 2px;
  495.     -moz-border-radius: 2px;
  496.     border-radius: 2px;
  497.     margin-left: 6px;
  498. }

  499. div.icon div.phone:before {
  500.     position: absolute;
  501.     content: '';
  502.     width: 16px;
  503.     height: 20px;
  504.     background: #eee;
  505.     left: 2px;
  506.     top: 5px;
  507. }

  508. div.icon div.phone:after {
  509.     position: absolute;
  510.     content: '';
  511.     background: #eee;
  512.     width: 3px;
  513.     height: 3px;
  514.     -webkit-border-radius: 50px;
  515.     -moz-border-radius: 50px;
  516.     border-radius: 50px;
  517.     bottom: 2px;
  518.     left: 8px;
  519. }

  520. /* iPod */
  521. div.icon div.ipod {
  522.     width: 18px;
  523.     height: 32px;
  524.     background: #333;
  525.     -webkit-border-radius: 2px;
  526.     -moz-border-radius: 2px;
  527.     border-radius: 2px;
  528.     position: absolute;
  529.     left: 7px;
  530. }

  531. div.icon div.ipod:after {
  532.     content: '';
  533.     position: absolute;
  534.     width: 14px;
  535.     height: 12px;
  536.     background: #ddd;
  537.     left: 2px;
  538.     top: 2px;
  539.     -webkit-border-radius: 1px;
  540.     -moz-border-radius: 1px;
  541.     border-radius: 1px;
  542. }

  543. div.icon div.ipod:before {
  544.     content: '';
  545.     position: absolute;
  546.     width: 6px;
  547.     height: 6px;
  548.     border: 3px solid #ddd;
  549.     left: 3px;
  550.     bottom: 3px;
  551.     -webkit-border-radius: 100px;
  552.     -moz-border-radius: 100px;
  553.     border-radius: 100px;
  554. }

  555. /* Tab */
  556. div.icon div.tab {
  557.     position: absolute;
  558.     width: 28px;
  559.     height: 32px;
  560.     background-color: #333;
  561.     -webkit-border-radius: 2px;
  562.     -moz-border-radius: 2px;
  563.     border-radius: 2px;
  564.     left: 2px;
  565. }

  566. div.icon div.tab:before {
  567.     position: absolute;
  568.     content: '';
  569.     width: 24px;
  570.     height: 23px;
  571.     background: #eee;
  572.     left: 2px;
  573.     top: 2px;
  574. }

  575. div.icon div.tab:after {
  576.     position: absolute;
  577.     content: '';
  578.     background: #eee;
  579.     width: 3px;
  580.     height: 3px;
  581.     -webkit-border-radius: 50px;
  582.     -moz-border-radius: 50px;
  583.     border-radius: 50px;
  584.     bottom: 2px;
  585.     left: 12px;
  586. }

  587. /* Graph 1 */
  588. div.icon div.graph1 {
  589.     width: 28px;
  590.     height: 28px;
  591.     border-radius: 0 0 0 5px;
  592.     -moz-border-radius: 0 0 0 5px;
  593.     -webkit-border-radius: 0 0 0 5px;
  594.     border: solid #333;
  595.     border-width: 0 0 3px 3px;
  596. }

  597. div.icon div.bars {
  598.     width: 5px;
  599.     height: 10px;
  600.     background: #333;
  601.     position: absolute;
  602.     bottom: 5px;
  603.     right: 3px;
  604. }

  605. div.icon div.bars:before {
  606.     position: absolute;
  607.     content: '';
  608.     width: 5px;
  609.     height: 25px;
  610.     background: #333;
  611.     position: absolute;
  612.     right: 6px;
  613.     bottom: 0px;
  614. }

  615. div.icon div.bars:after {
  616.     position: absolute;
  617.     content: '';
  618.     width: 5px;
  619.     height: 18px;
  620.     background: #333;
  621.     position: absolute;
  622.     bottom: 0px;
  623.     right: 12px;
  624. }

  625. /* Screen */
  626. div.icon div.screen {
  627.     width: 28px;
  628.     height: 24px;
  629.     border: 2px solid #333;
  630.     background: #eee;
  631. }

  632. div.icon div.screen:before {
  633.     position: absolute;
  634.     content: '';
  635.     width: 10px;
  636.     height: 3px;
  637.     background: #333;
  638.     bottom: 2px;
  639.     left: 11px
  640. }

  641. div.icon div.screen:after {
  642.     position: absolute;
  643.     content: '';
  644.     width: 22px;
  645.     height: 2px;
  646.     background: #333;
  647.     bottom: 0;
  648.     left: 5px;
  649. }

  650. /* Cloud */
  651. div.icon div.cloud {
  652.     width: 32px;
  653.     height: 12px;
  654.     -webkit-border-radius: 10px;
  655.     -moz-border-radius: 10px;
  656.     border-radius: 10px;
  657.     background: #333;
  658.     margin-top: 14px;
  659. }

  660. div.icon div.cloud:before {
  661.     position: absolute;
  662.     content: '';
  663.     width: 15px;
  664.     height: 15px;
  665.     -webkit-border-radius: 20px;
  666.     -moz-border-radius: 20px;
  667.     border-radius: 20px;
  668.     background: #333;
  669.     top: 7px;
  670.     right: 5px;
  671. }

  672. div.icon div.cloud:after {
  673.     position: absolute;
  674.     content: '';
  675.     width: 10px;
  676.     height: 10px;
  677.     -webkit-border-radius: 20px;
  678.     -moz-border-radius: 20px;
  679.     border-radius: 20px;
  680.     background: #333;
  681.     top: 9px;
  682.     left: 4px;
  683. }

  684. /* Cloud-Up */
  685. div.icon div.cloudUp {
  686.     width: 32px;
  687.     height: 12px;
  688.     -webkit-border-radius: 10px;
  689.     -moz-border-radius: 10px;
  690.     border-radius: 10px;
  691.     background: #333;
  692.     margin-top: 14px;
  693. }

  694. div.icon div.cloudUp:before {
  695.     position: absolute;
  696.     content: '';
  697.     width: 15px;
  698.     height: 15px;
  699.     -webkit-border-radius: 20px;
  700.     -moz-border-radius: 20px;
  701.     border-radius: 20px;
  702.     background: #333;
  703.     top: 7px;
  704.     right: 5px;
  705. }

  706. div.icon div.cloudUp:after {
  707.     position: absolute;
  708.     content: '';
  709.     width: 10px;
  710.     height: 10px;
  711.     -webkit-border-radius: 20px;
  712.     -moz-border-radius: 20px;
  713.     border-radius: 20px;
  714.     background: #333;
  715.     top: 9px;
  716.     left: 4px;
  717. }

  718. div.icon div.cloudUpArrow {
  719.     height: 0px;
  720.     width: 0px;
  721.     border-width: 5px;
  722.     border-style: solid;
  723.     border-color: transparent transparent #ddd transparent;
  724.     position: absolute;
  725.     bottom: 12px;
  726.     left: 11px;
  727. }

  728. div.icon div.cloudUpArrow:after {
  729.     content: '';
  730.     width: 3px;
  731.     height: 5px;
  732.     background-color: #ddd;
  733.     position: absolute;
  734.     top: 4px;
  735.     right: -2px;
  736. }

  737. /* Cloud-Down */
  738. div.icon div.cloudDown {
  739.     width: 32px;
  740.     height: 12px;
  741.     -webkit-border-radius: 10px;
  742.     -moz-border-radius: 10px;
  743.     border-radius: 10px;
  744.     background: #333;
  745.     margin-top: 14px;
  746. }

  747. div.icon div.cloudDown:before {
  748.     position: absolute;
  749.     content: '';
  750.     width: 15px;
  751.     height: 15px;
  752.     -webkit-border-radius: 20px;
  753.     -moz-border-radius: 20px;
  754.     border-radius: 20px;
  755.     background: #333;
  756.     top: 7px;
  757.     right: 5px;
  758. }

  759. div.icon div.cloudDown:after {
  760.     position: absolute;
  761.     content: '';
  762.     width: 10px;
  763.     height: 10px;
  764.     -webkit-border-radius: 20px;
  765.     -moz-border-radius: 20px;
  766.     border-radius: 20px;
  767.     background: #333;
  768.     top: 9px;
  769.     left: 4px;
  770. }

  771. div.icon div.cloudDownArrow {
  772.     height: 0px;
  773.     width: 0px;
  774.     border-width: 5px;
  775.     border-style: solid;
  776.     border-color: #ddd transparent transparent transparent;
  777.     position: absolute;
  778.     bottom: 3px;
  779.     left: 11px;
  780. }

  781. div.icon div.cloudDownArrow:after {
  782.     content: '';
  783.     width: 3px;
  784.     height: 5px;
  785.     background-color: #ddd;
  786.     position: absolute;
  787.     bottom: 4px;
  788.     right: -2px;
  789. }

  790. /* Page */
  791. div.icon div.page {
  792.     width: 20px;
  793.     height: 28px;
  794.     background: #eee;
  795.     margin-left: 4px;
  796.     border: 2px solid #333;
  797. }

  798. div.icon div.page:before {
  799.     position: absolute;
  800.     content: '';
  801.     height: 2px;
  802.     width: 16px;
  803.     background: #333;
  804.     margin: 5px 2px 0 2px;
  805. }

  806. div.icon div.page:after {
  807.     position: absolute;
  808.     content: '';
  809.     height: 2px;
  810.     width: 16px;
  811.     background: #333;
  812.     margin: 9px 2px 0 2px;
  813. }

  814. div.icon div.pageLines {
  815.     height: 2px;
  816.     width: 16px;
  817.     position: absolute;
  818.     left: 8px;
  819.     top: 15px;
  820.     background: #333;
  821. }

  822. div.icon div.pageLines:after {
  823.     position: absolute;
  824.     content: '';
  825.     height: 2px;
  826.     width: 16px;
  827.     background: #333;
  828.     margin: 4px 0 0 0;
  829. }

  830. div.icon div.pageLines:before {
  831.     position: absolute;
  832.     content: '';
  833.     height: 2px;
  834.     width: 16px;
  835.     background: #333;
  836.     margin: 8px 0 0 0;
  837. }

  838. /* RSS */
  839. div.icon div.rss {
  840.     width: 6px;
  841.     height: 6px;
  842.     border-radius: 8px;
  843.     -moz-border-radius: 8px;
  844.     -webkit-border-radius: 8px;
  845.     background: #333;
  846.     position: absolute;
  847.     bottom: 2px;
  848.     left: 2px;
  849. }

  850. div.icon div.rss:after {
  851.     content: '';
  852.     position: absolute;
  853.     width: 13px;
  854.     height: 13px;
  855.     border-radius: 0 60px 0 0;
  856.     -moz-border-radius: 0 60px 0 0;
  857.     -webkit-border-radius: 0 60px 0 0;
  858.     border-style: double;
  859.     border-width: 15px 15px 0 0;
  860.     border-color: #333;
  861.     top: -22px;
  862.     left: 0;
  863. }

  864. /* Battery Full */
  865. div.icon div.batFull {
  866.     width: 23px;
  867.     height: 11px;
  868.     margin-top: 7px;
  869.     border: 3px solid #333;
  870. }

  871. div.icon div.batFull:after {
  872.     content: '';
  873.     position: absolute;
  874.     height: 7px;
  875.     width: 2px;
  876.     background: #333;
  877.     right: 1px;
  878.     top: 5px;
  879.     margin-top: 7px;
  880. }

  881. div.icon div.batFull:before {
  882.     content: '';
  883.     position: absolute;
  884.     height: 9px;
  885.     width: 21px;
  886.     background: #333;
  887.     left: 4px;
  888.     top: 4px;
  889.     margin-top: 7px;
  890. }

  891. /* Battery Medium */
  892. div.icon div.batMed {
  893.     width: 23px;
  894.     height: 11px;
  895.     margin-top: 7px;
  896.     border: 3px solid #333;
  897. }

  898. div.icon div.batMed:after {
  899.     content: '';
  900.     position: absolute;
  901.     height: 7px;
  902.     width: 2px;
  903.     background: #333;
  904.     right: 1px;
  905.     top: 5px;
  906.     margin-top: 7px;
  907. }

  908. div.icon div.batMed:before {
  909.     content: '';
  910.     position: absolute;
  911.     height: 9px;
  912.     width: 10px;
  913.     background: #333;
  914.     left: 4px;
  915.     top: 4px;
  916.     margin-top: 7px;
  917. }

  918. /* Battery Low */
  919. div.icon div.batLow {
  920.     width: 23px;
  921.     height: 11px;
  922.     margin-top: 7px;
  923.     border: 3px solid #333;
  924. }

  925. div.icon div.batLow:after {
  926.     content: '';
  927.     position: absolute;
  928.     height: 7px;
  929.     width: 2px;
  930.     background: #333;
  931.     right: 1px;
  932.     top: 5px;
  933.     margin-top: 7px;
  934. }

  935. div.icon div.batLow:before {
  936.     content: '';
  937.     position: absolute;
  938.     height: 9px;
  939.     width: 3px;
  940.     background: #333;
  941.     left: 4px;
  942.     top: 4px;
  943.     margin-top: 7px;
  944. }

  945. /* Battery Empty */
  946. div.icon div.batEmpty {
  947.     width: 23px;
  948.     height: 11px;
  949.     margin-top: 7px;
  950.     border: 3px solid #333;
  951. }

  952. div.icon div.batEmpty:after {
  953.     content: '';
  954.     position: absolute;
  955.     height: 7px;
  956.     width: 2px;
  957.     background: #333;
  958.     right: 1px;
  959.     top: 5px;
  960.     margin-top: 7px;
  961. }

  962. /* Speaker Volume Full */
  963. div.icon div.speakerVolF {
  964.     width: 10px;
  965.     height: 10px;
  966.     background: #333;
  967.     margin: 12px 0 0 2px;
  968. }

  969. div.icon div.speakerVolF:after {
  970.     content: '';
  971.     position: absolute;
  972.     width: 0;
  973.     height: 0;
  974.     border-style: solid;
  975.     border-color: transparent #333 transparent transparent;
  976.     border-width: 12px 16px 12px 15px;
  977.     left: -13px;
  978.     top: 5px;
  979. }

  980. div.icon div.speakerVolF:before {
  981.     content: '';
  982.     position: absolute;
  983.     width: 5px;
  984.     height: 5px;
  985.     border-style: double;
  986.     border-color: #333;
  987.     border-width: 8px 8px 0 0;
  988.     -webkit-border-radius: 0 50px 0 0;
  989.     -moz-border-radius: 0 50px 0 0;
  990.     border-radius: 0 50px 0 0;
  991.     -webkit-transform: rotate(45deg);
  992.     -moz-transform: rotate(45deg);
  993.     -ms-transform: rotate(45deg);
  994.     -o-transform: rotate(45deg);
  995.     transform: rotate(45deg);
  996.     left: 19px;
  997.     top: 11px;
  998. }

  999. /* Speaker Volume Half */
  1000. div.icon div.speakerVolH {
  1001.     width: 10px;
  1002.     height: 10px;
  1003.     background: #333;
  1004.     margin: 12px 0 0 4px;
  1005. }

  1006. div.icon div.speakerVolH:after {
  1007.     content: '';
  1008.     position: absolute;
  1009.     width: 0;
  1010.     height: 0;
  1011.     border-style: solid;
  1012.     border-color: transparent #333 transparent transparent;
  1013.     border-width: 12px 16px 12px 15px;
  1014.     left: -11px;
  1015.     top: 5px;
  1016. }

  1017. div.icon div.speakerVolH:before {
  1018.     content: '';
  1019.     position: absolute;
  1020.     width: 5px;
  1021.     height: 5px;
  1022.     border-style: solid;
  1023.     border-color: #333;
  1024.     border-width: 3px 3px 0 0;
  1025.     -webkit-border-radius: 0 50px 0 0;
  1026.     -moz-border-radius: 0 50px 0 0;
  1027.     border-radius: 0 50px 0 0;
  1028.     -webkit-transform: rotate(45deg);
  1029.     -moz-transform: rotate(45deg);
  1030.     -ms-transform: rotate(45deg);
  1031.     -o-transform: rotate(45deg);
  1032.     transform: rotate(45deg);
  1033.     left: 21px;
  1034.     top: 13px;
  1035. }

  1036. /* Speaker Volume Mute */
  1037. div.icon div.speakerVolM {
  1038.     width: 10px;
  1039.     height: 10px;
  1040.     background: #333;
  1041.     margin: 12px 0 0 7px;
  1042. }

  1043. div.icon div.speakerVolM:after {
  1044.     content: '';
  1045.     position: absolute;
  1046.     width: 0;
  1047.     height: 0;
  1048.     border-style: solid;
  1049.     border-color: transparent #333 transparent transparent;
  1050.     border-width: 12px 16px 12px 15px;
  1051.     left: -8px;
  1052.     top: 5px;
  1053. }

  1054. /* Play */
  1055. div.icon div.play {
  1056.     width: 0;
  1057.     height: 0;
  1058.     border-style: solid;
  1059.     border-color: transparent transparent transparent #333;
  1060.     border-width: 8px 8px 8px 12px;
  1061.     margin: 8px 0 0 11px;
  1062. }

  1063. /* Pause */
  1064. div.icon div.pause {
  1065.     width: 2px;
  1066.     height: 16px;
  1067.     border: 4px solid #333;
  1068.     border-top: none;
  1069.     border-bottom: none;
  1070.     margin: 8px 0 0 11px;
  1071. }

  1072. /* Forward */
  1073. div.icon div.forward {
  1074.     width: 0;
  1075.     height: 0;
  1076.     border-style: solid;
  1077.     border-color: transparent transparent transparent #333;
  1078.     border-width: 8px 8px 8px 12px;
  1079.     margin: 8px 0 0 5px;
  1080. }

  1081. div.icon div.forward:after {
  1082.     content: '';
  1083.     position: absolute;
  1084.     width: 0;
  1085.     height: 0;
  1086.     border-style: solid;
  1087.     border-color: transparent transparent transparent #333;
  1088.     border-width: 8px 8px 8px 12px;
  1089.     margin: 8px 0 0 17px;
  1090.     left: 0;
  1091.     top: 0
  1092. }

  1093. /* Next */
  1094. div.icon div.next {
  1095.     width: 0;
  1096.     height: 0;
  1097.     border-style: solid;
  1098.     border-color: transparent transparent transparent #333;
  1099.     border-width: 8px 8px 8px 12px;
  1100.     margin: 8px 0 0 2px;
  1101. }

  1102. div.icon div.next:after {
  1103.     content: '';
  1104.     position: absolute;
  1105.     width: 0px;
  1106.     height: 0;
  1107.     border-style: solid;
  1108.     border-color: transparent transparent transparent #333;
  1109.     border-width: 8px 8px 8px 12px;
  1110.     margin: 8px 0 0 14px;
  1111.     left: 0;
  1112.     top: 0
  1113. }

  1114. div.icon div.next:before {
  1115.     content: '';
  1116.     position: absolute;
  1117.     background: #333;
  1118.     width: 4px;
  1119.     height: 16px;
  1120.     left: 0;
  1121.     top: 0;
  1122.     margin: 8px 0 0 26px;
  1123. }

  1124. /* Rewind */
  1125. div.icon div.rewind {
  1126.     width: 0;
  1127.     height: 0;
  1128.     border-style: solid;
  1129.     border-color: transparent #333 transparent transparent;
  1130.     border-width: 8px 12px 8px 8px;
  1131.     margin: 8px 0 0 -5px;
  1132. }

  1133. div.icon div.rewind:after {
  1134.     content: '';
  1135.     position: absolute;
  1136.     width: 0px;
  1137.     height: 0;
  1138.     border-style: solid;
  1139.     border-color: transparent #333 transparent transparent;
  1140.     border-width: 8px 12px 8px 8px;
  1141.     margin: 8px 0 0 7px;
  1142.     left: 0;
  1143.     top: 0
  1144. }

  1145. /* Previous */
  1146. div.icon div.previous {
  1147.     width: 0;
  1148.     height: 0;
  1149.     border-style: solid;
  1150.     border-color: transparent #333 transparent transparent;
  1151.     border-width: 8px 12px 8px 8px;
  1152.     margin: 8px 0 0 -2px;
  1153. }

  1154. div.icon div.previous:after {
  1155.     content: '';
  1156.     position: absolute;
  1157.     width: 0px;
  1158.     height: 0;
  1159.     border-style: solid;
  1160.     border-color: transparent #333 transparent transparent;
  1161.     border-width: 8px 12px 8px 8px;
  1162.     margin: 8px 0 0 10px;
  1163.     left: 0;
  1164.     top: 0
  1165. }

  1166. div.icon div.previous:before {
  1167.     content: '';
  1168.     position: absolute;
  1169.     background: #333;
  1170.     width: 4px;
  1171.     height: 16px;
  1172.     left: 0;
  1173.     top: 0;
  1174.     margin: 8px 0 0 2px;
  1175. }

  1176. /* Stop */
  1177. div.icon div.stop {
  1178.     width: 16px;
  1179.     height: 16px;
  1180.     margin: 8px 0 0 8px;
  1181.     background: #333;
  1182. }

  1183. /* Location */
  1184. div.icon div.location {
  1185.     width: 0px;
  1186.     height: 0px;
  1187.     border-style: solid;
  1188.     border-color: #333 transparent transparent transparent;
  1189.     border-width: 16px 8px 8px 8px;
  1190.     margin: 15px 0 0 8px;
  1191. }

  1192. div.icon div.location:after {
  1193.     content: '';
  1194.     position: absolute;
  1195.     width: 18px;
  1196.     height: 18px;
  1197.     border-radius: 50px;
  1198.     -moz-border-radius: 50px;
  1199.     -webkit-border-radius: 50px;
  1200.     background: #333;
  1201.     left: 7px;
  1202.     top: 2px;
  1203. }

  1204. div.icon div.location:before {
  1205.     content: '';
  1206.     position: absolute;
  1207.     width: 8px;
  1208.     height: 8px;
  1209.     border-radius: 50px;
  1210.     -moz-border-radius: 50px;
  1211.     -webkit-border-radius: 50px;
  1212.     background: #ddd;
  1213.     left: 12px;
  1214.     top: 7px;
  1215.     z-index: 2;
  1216. }

  1217. /* Clock */
  1218. div.icon div.clock {
  1219.     width: 4px;
  1220.     height: 6px;
  1221.     border: solid #333;
  1222.     border-width: 0 0 3px 3px;
  1223.     margin: 9px 0 0 14px
  1224. }

  1225. div.icon div.clock:after {
  1226.     content: '';
  1227.     position: absolute;
  1228.     width: 18px;
  1229.     height: 18px;
  1230.     border: 4px solid #333;
  1231.     border-radius: 50px;
  1232.     top: 3px;
  1233.     left: 3px;
  1234. }

  1235. /* Clock Alt */
  1236. div.icon div.clockAlt {
  1237.     width: 18px;
  1238.     height: 18px;
  1239.     border: 4px solid #333;
  1240.     border-radius: 50px;
  1241.     margin-top: 3px;
  1242.     margin-left: 3px;
  1243. }

  1244. div.icon div.clockAlt:after {
  1245.     content: '';
  1246.     position: absolute;
  1247.     width: 4px;
  1248.     height: 5px;
  1249.     border: solid #ddd;
  1250.     border-width: 0 0 2px 2px;
  1251.     top: 11px;
  1252.     left: 15px;
  1253. }

  1254. div.icon div.clockAlt:before {
  1255.     content: '';
  1256.     position: absolute;
  1257.     width: 16px;
  1258.     height: 16px;
  1259.     background: #333;
  1260.     border-radius: 50px;
  1261.     left: 8px;
  1262.     top: 8px;
  1263. }

  1264. /* Pointer Right */
  1265. div.icon div.pointerRight {
  1266.     width: 10px;
  1267.     height: 10px;
  1268.     border: solid #333;
  1269.     border-width: 6px 6px 0 0;
  1270.     -webkit-transform: rotate(45deg);
  1271.     -moz-transform: rotate(45deg);
  1272.     -ms-transform: rotate(45deg);
  1273.     -o-transform: rotate(45deg);
  1274.     transform: rotate(45deg);
  1275.     margin: 8px 0 0 5px;
  1276. }

  1277. /* Pointer Top */
  1278. div.icon div.pointerTop {
  1279.     width: 10px;
  1280.     height: 10px;
  1281.     border: solid #333;
  1282.     border-width: 6px 6px 0 0;
  1283.     -webkit-transform: rotate(-45deg);
  1284.     -moz-transform: rotate(-45deg);
  1285.     -ms-transform: rotate(-45deg);
  1286.     -o-transform: rotate(-45deg);
  1287.     transform: rotate(-45deg);
  1288.     margin: 10px 0 0 8px;
  1289. }

  1290. /* Pointer Left */
  1291. div.icon div.pointerLeft {
  1292.     width: 10px;
  1293.     height: 10px;
  1294.     border: solid #333;
  1295.     border-width: 6px 6px 0 0;
  1296.     -webkit-transform: rotate(-135deg);
  1297.     -moz-transform: rotate(-135deg);
  1298.     -ms-transform: rotate(-135deg);
  1299.     -o-transform: rotate(-135deg);
  1300.     transform: rotate(-135deg);
  1301.     margin: 8px 0 0 5px;
  1302. }

  1303. /* Pointer Down */
  1304. div.icon div.pointerDown {
  1305.     width: 10px;
  1306.     height: 10px;
  1307.     border: solid #333;
  1308.     border-width: 6px 6px 0 0;
  1309.     -webkit-transform: rotate(135deg);
  1310.     -moz-transform: rotate(135deg);
  1311.     -ms-transform: rotate(135deg);
  1312.     -o-transform: rotate(135deg);
  1313.     transform: rotate(135deg);
  1314.     margin: 5px 0 0 8px;
  1315. }

  1316. /* Signals */
  1317. div.icon div.signal1 {
  1318.     width: 5px;
  1319.     height: 5px;
  1320.     background: #333;
  1321.     position: absolute;
  1322.     bottom: 0;
  1323.     left: 1px
  1324. }

  1325. div.icon div.signal1:after {
  1326.     content: '';
  1327.     position: absolute;
  1328.     width: 5px;
  1329.     height: 9px;
  1330.     background: #333;
  1331.     left: 6px;
  1332.     bottom: 0;
  1333. }

  1334. div.icon div.signal1:before {
  1335.     content: '';
  1336.     position: absolute;
  1337.     width: 5px;
  1338.     height: 14px;
  1339.     background: #333;
  1340.     left: 12px;
  1341.     bottom: 0;
  1342. }

  1343. div.icon div.signal2 {
  1344.     width: 5px;
  1345.     height: 22px;
  1346.     background: #333;
  1347.     position: absolute;
  1348.     bottom: 0;
  1349.     left: 19px
  1350. }

  1351. div.icon div.signal2:after {
  1352.     content: '';
  1353.     position: absolute;
  1354.     width: 5px;
  1355.     height: 32px;
  1356.     background: #333;
  1357.     left: 6px;
  1358.     bottom: 0;
  1359. }

  1360. /* Graph 2 */
  1361. div.icon div.base {
  1362.     width: 5px;
  1363.     height: 8px;
  1364.     background: #333;
  1365.     position: absolute;
  1366.     bottom: 3px;
  1367.     left: 4px
  1368. }

  1369. div.icon div.base:after {
  1370.     content: '';
  1371.     position: absolute;
  1372.     width: 5px;
  1373.     height: 13px;
  1374.     background: #333;
  1375.     left: 6px;
  1376.     bottom: 0;
  1377. }

  1378. div.icon div.base:before {
  1379.     content: '';
  1380.     position: absolute;
  1381.     width: 5px;
  1382.     height: 25px;
  1383.     background: #333;
  1384.     left: 12px;
  1385.     bottom: 0;
  1386. }

  1387. div.icon div.bars2 {
  1388.     width: 5px;
  1389.     height: 18px;
  1390.     background: #333;
  1391.     position: absolute;
  1392.     bottom: 3px;
  1393.     left: 22px
  1394. }

  1395. div.icon div.bars2:after {
  1396.     content: '';
  1397.     position: absolute;
  1398.     width: 32px;
  1399.     height: 2px;
  1400.     background: #333;
  1401.     left: -22px;
  1402.     bottom: 0px;
  1403. }

  1404. /* Ribbon */
  1405. div.icon div.ribbon {
  1406.     width: 12px;
  1407.     height: 20px;
  1408.     background: #333;
  1409.     margin: 2px 0 0 10px
  1410. }

  1411. div.icon div.ribbon:after {
  1412.     content: '';
  1413.     position: absolute;
  1414.     left: 10px;
  1415.     top: 16px;
  1416.     width: 0;
  1417.     height: 0;
  1418.     border: solid #333;
  1419.     border-color: transparent #333 transparent #333;
  1420.     border-width: 6px 6px 8px 6px;
  1421. }

  1422. /* Video Cam */
  1423. div.icon div.videoCam {
  1424.     width: 18px;
  1425.     height: 16px;
  1426.     background: #333;
  1427.     margin: 8px 0 0 3px
  1428. }

  1429. div.icon div.videoCam:after {
  1430.     content: '';
  1431.     position: absolute;
  1432.     left: 14px;
  1433.     top: 10px;
  1434.     width: 0;
  1435.     height: 0;
  1436.     border: solid #333;
  1437.     border-color: transparent #333 transparent transparent;
  1438.     border-width: 6px 8px 6px 6px;
  1439. }

  1440. /* Star */
  1441. div.icon div.star {
  1442.     margin: 13px 0;
  1443.     position: relative;
  1444.     display: block;
  1445.     width: 0px;
  1446.     height: 0px;
  1447.     border-right: 17px solid transparent;
  1448.     border-bottom: 10px solid #333;
  1449.     border-left: 16px solid transparent;
  1450.     -moz-transform: rotate(35deg);
  1451.     -webkit-transform: rotate(35deg);
  1452.     -ms-transform: rotate(35deg);
  1453.     -o-transform: rotate(35deg);
  1454. }

  1455. div.icon div.star:before {
  1456.     border-bottom: 12px solid #333;
  1457.     border-left: 4px solid transparent;
  1458.     border-right: 4px solid transparent;
  1459.     position: absolute;
  1460.     height: 0;
  1461.     width: 0;
  1462.     top: -9px;
  1463.     left: -10px;
  1464.     display: block;
  1465.     content: '';
  1466.     -webkit-transform: rotate(-35deg);
  1467.     -moz-transform: rotate(-35deg);
  1468.     -ms-transform: rotate(-35deg);
  1469.     -o-transform: rotate(-35deg);
  1470. }

  1471. div.icon div.star:after {
  1472.     position: absolute;
  1473.     display: block;
  1474.     top: 0px;
  1475.     left: -17px;
  1476.     width: 0px;
  1477.     height: 0px;
  1478.     border-right: 17px solid transparent;
  1479.     border-bottom: 10px solid #333;
  1480.     border-left: 16px solid transparent;
  1481.     -webkit-transform: rotate(-70deg);
  1482.     -moz-transform: rotate(-70deg);
  1483.     -ms-transform: rotate(-70deg);
  1484.     -o-transform: rotate(-70deg);
  1485.     content: '';
  1486. }

  1487. /* Headphones */
  1488. div.icon div.headphones {
  1489.     width: 26px;
  1490.     border: 3px solid #333;
  1491.     height: 23px;
  1492.     border-radius: 50px 50px 0 0;
  1493.     border-bottom: none;
  1494.     margin: 1px 0 0 0;
  1495. }

  1496. div.icon div.headphones:before {
  1497.     position: absolute;
  1498.     content: '';
  1499.     top: 21px;
  1500.     left: 4px;
  1501.     width: 5px;
  1502.     height: 10px;
  1503.     background: #333;
  1504.     border-radius: 0 2px 2px 0;
  1505. }

  1506. div.icon div.headphones:after {
  1507.     position: absolute;
  1508.     content: '';
  1509.     top: 21px;
  1510.     left: 23px;
  1511.     width: 5px;
  1512.     height: 10px;
  1513.     background: #333;
  1514.     border-radius: 2px 0 0 2px;
  1515. }

  1516. /* Capsule */
  1517. div.icon div.capsule {
  1518.     width: 13px;
  1519.     background: #333;
  1520.     height: 15px;
  1521.     border-radius: 50px 50px 0 0;
  1522.     position: absolute;
  1523.     top: 5px;
  1524.     left: 13px;
  1525.     -webkit-transform: rotate(45deg);
  1526.     -moz-transform: rotate(45deg);
  1527.     -ms-transform: rotate(45deg);
  1528.     -o-transform: rotate(45deg);
  1529. }

  1530. div.icon div.capsule:before {
  1531.     position: absolute;
  1532.     content: '';
  1533.     width: 13px;
  1534.     background: #333;
  1535.     height: 10px;
  1536.     border-radius: 0 0 50px 50px;
  1537.     -webkit-border-radius: 0 0 50px 50px;
  1538.     -moz-border-radius: 0 0 50px 50px;
  1539.     top: 16px;
  1540.     left: 0
  1541. }

  1542. /* Microphone */
  1543. div.icon div.mic {
  1544.     width: 10px;
  1545.     background: #333;
  1546.     height: 10px;
  1547.     border-radius: 50px 50px 0 0;
  1548.     -moz-border-radius: 50px 50px 0 0;
  1549.     -webkit-border-radius: 50px 50px 0 0;
  1550.     position: absolute;
  1551.     top: 2px;
  1552.     left: 11px;
  1553. }

  1554. div.icon div.mic:after {
  1555.     position: absolute;
  1556.     content: '';
  1557.     width: 10px;
  1558.     background: #333;
  1559.     height: 10px;
  1560.     border-radius: 0 0 50px 50px;
  1561.     -webkit-border-radius: 0 0 50px 50px;
  1562.     -moz-border-radius: 0 0 50px 50px;
  1563.     top: 11px;
  1564.     left: 0
  1565. }

  1566. div.icon div.holder {
  1567.     position: absolute;
  1568.     height: 11px;
  1569.     width: 12px;
  1570.     left: 8px;
  1571.     top: 13px;
  1572.     border: 2px solid #333;
  1573.     border-radius: 0 0 50px 50px;
  1574.     -webkit-border-radius: 0 0 50px 50px;
  1575.     -moz-border-radius: 0 0 50px 50px;
  1576.     border-top: none;
  1577. }

  1578. div.icon div.holder:after {
  1579.     content: '';
  1580.     position: absolute;
  1581.     width: 4px;
  1582.     height: 3px;
  1583.     background: #333;
  1584.     top: 13px;
  1585.     left: 4px;
  1586. }

  1587. div.icon div.holder:before {
  1588.     content: '';
  1589.     position: absolute;
  1590.     width: 8px;
  1591.     height: 2px;
  1592.     background: #333;
  1593.     bottom: -6px;
  1594.     left: 2px;
  1595. }

  1596. /* Tower */
  1597. div.icon div.tower {
  1598.     width: 0px;
  1599.     height: 0px;
  1600.     position: absolute;
  1601.     bottom: 1px;
  1602.     left: 13px;
  1603.     border: solid #333;
  1604.     border-color: transparent transparent #333 transparent;
  1605.     border-width: 0px 3px 22px 3px;
  1606. }

  1607. div.icon div.tower:after {
  1608.     position: absolute;
  1609.     content: '';
  1610.     width: 4px;
  1611.     height: 4px;
  1612.     -webkit-border-radius: 50px;
  1613.     -moz-border-radius: 50px;
  1614.     border-radius: 50px;
  1615.     background: #333;
  1616.     left: -2px;
  1617.     top: 0;
  1618. }

  1619. div.icon div.waves {
  1620.     position: absolute;
  1621.     content: '';
  1622.     width: 8px;
  1623.     height: 8px;
  1624.     border-color: #333;
  1625.     border-style: double;
  1626.     border-width: 6px 6px 0 0;
  1627.     -webkit-border-radius: 0 50px 0 0;
  1628.     -moz-border-radius: 0 50px 0 0;
  1629.     border-radius: 0 50px 0 0;
  1630.     left: 17px;
  1631.     top: 4px;
  1632.     -webkit-transform: rotate(45deg);
  1633.     -moz-transform: rotate(45deg);
  1634.     -ms-transform: rotate(45deg);
  1635.     -o-transform: rotate(45deg);
  1636. }

  1637. div.icon div.waves:after {
  1638.     position: absolute;
  1639.     content: '';
  1640.     width: 8px;
  1641.     height: 8px;
  1642.     border-color: #333;
  1643.     border-style: double;
  1644.     border-width: 6px 6px 0 0;
  1645.     -webkit-border-radius: 0 50px 0 0;
  1646.     -moz-border-radius: 0 50px 0 0;
  1647.     border-radius: 0 50px 0 0;
  1648.     left: -11px;
  1649.     top: 5px;
  1650.     -webkit-transform: rotate(180deg);
  1651.     -moz-transform: rotate(180deg);
  1652.     -ms-transform: rotate(180deg);
  1653.     -o-transform: rotate(180deg);
  1654. }

  1655. /* IceCream */
  1656. div.icon div.icecream {
  1657.     width: 20px;
  1658.     height: 25px;
  1659.     background: #333;
  1660.     -webkit-border-radius: 50px 50px 10px 10px;
  1661.     -moz-border-radius: 50px 50px 10px 10px;
  1662.     border-radius: 50px 50px 10px 10px;
  1663.     position: absolute;
  1664.     top: 0;
  1665.     left: 6px;
  1666. }

  1667. div.icon div.icecream:after {
  1668.     content: '';
  1669.     position: absolute;
  1670.     bottom: -7px;
  1671.     left: 8px;
  1672.     width: 4px;
  1673.     height: 7px;
  1674.     background: #333;
  1675. }

  1676. /* Golf */
  1677. div.icon div.golf_stick {
  1678.     width: 2px;
  1679.     height: 25px;
  1680.     background: #333;
  1681.     -webkit-border-radius: 50px 50px 10px 10px;
  1682.     -moz-border-radius: 50px 50px 10px 10px;
  1683.     border-radius: 50px 50px 10px 10px;
  1684.     position: absolute;
  1685.     bottom: 2px;
  1686.     left: 15px;
  1687. }

  1688. div.icon div.golf_stick:after {
  1689.     content: '';
  1690.     position: absolute;
  1691.     bottom: 0px;
  1692.     left: -3px;
  1693.     width: 8px;
  1694.     height: 2px;
  1695.     background: #333;
  1696. }

  1697. div.icon div.golf_ball {
  1698.     position: absolute;
  1699.     left: 9px;
  1700.     top: 2px;
  1701.     width: 14px;
  1702.     height: 14px;
  1703.     background: #333;
  1704.     -webkit-border-radius: 50px;
  1705.     -moz-border-radius: 50px;
  1706.     border-radius: 50px;
  1707. }

  1708. div.icon div.golf_ball:after {
  1709.     content: '';
  1710.     position: absolute;
  1711.     top: 3px;
  1712.     left: 3px;
  1713.     background: #ddd;
  1714.     -webkit-border-radius: 50px;
  1715.     -moz-border-radius: 50px;
  1716.     border-radius: 50px;
  1717.     width: 3px;
  1718.     height: 3px;
  1719. }

  1720. /* PolyBag */
  1721. div.icon div.polybag {
  1722.     width: 32px;
  1723.     height: 16px;
  1724.     background: #333;
  1725.     position: absolute;
  1726.     top: 8px;
  1727.     left: 0;
  1728. }

  1729. div.icon div.polybag:after {
  1730.     content: '';
  1731.     position: absolute;
  1732.     left: 0;
  1733.     bottom: -7px;
  1734.     height: 6px;
  1735.     width: 32px;
  1736.     background: #333;
  1737.     -webkit-border-radius: 0 0 4px 4px;
  1738.     -moz-border-radius: 0 0 4px 4px;
  1739.     border-radius: 0 0 4px 4px;
  1740. }

  1741. div.icon div.polybag:before {
  1742.     content: '';
  1743.     position: absolute;
  1744.     top: -7px;
  1745.     left: 9px;
  1746.     width: 10px;
  1747.     height: 10px;
  1748.     border: 2px solid #333;
  1749.     -webkit-border-radius: 50px;
  1750.     -moz-border-radius: 50px;
  1751.     border-radius: 50px;
  1752. }

  1753. /* BriefCase */
  1754. div.icon div.briefcase {
  1755.     width: 18px;
  1756.     height: 23px;
  1757.     background: #333;
  1758.     position: absolute;
  1759.     top: 7px;
  1760.     left: 7px;
  1761. }

  1762. div.icon div.briefcase:after {
  1763.     content: '';
  1764.     position: absolute;
  1765.     left: -7px;
  1766.     bottom: 0px;
  1767.     height: 23px;
  1768.     width: 6px;
  1769.     background: #333;
  1770.     -webkit-border-radius: 3px 0 0 3px;
  1771.     -moz-border-radius: 3px 0 0 3px;
  1772.     border-radius: 3px 0 0 3px;
  1773. }

  1774. div.icon div.briefcase:before {
  1775.     content: '';
  1776.     position: absolute;
  1777.     right: -7px;
  1778.     bottom: 0px;
  1779.     height: 23px;
  1780.     width: 6px;
  1781.     background: #333;
  1782.     -webkit-border-radius: 0 3px 3px 0;
  1783.     -moz-border-radius: 0 3px 3px 0;
  1784.     border-radius: 0 3px 3px 0;
  1785. }

  1786. div.icon div.briefcase_handle {
  1787.     position: absolute;
  1788.     left: 9px;
  1789.     top: 2px;
  1790.     width: 10px;
  1791.     height: 3px;
  1792.     border: 2px solid #333;
  1793.     -webkit-border-radius: 3px 3px 0 0;
  1794.     -moz-border-radius: 3px 3px 0 0;
  1795.     border-radius: 3px 3px 0 0;
  1796. }

  1797. /* Roller */
  1798. div.icon div.roller_brush {
  1799.     position: absolute;
  1800.     top: 0;
  1801.     left: 0;
  1802.     width: 29px;
  1803.     height: 10px;
  1804.     background: #333;
  1805.     -webkit-border-radius: 3px;
  1806.     -moz-border-radius: 3px;
  1807.     border-radius: 3px;
  1808. }

  1809. div.icon div.roller_brush:after {
  1810.     content: '';
  1811.     position: absolute;
  1812.     right: -3px;
  1813.     top: 3px;
  1814.     height: 6px;
  1815.     width: 15px;
  1816.     border: 2px solid #333;
  1817.     border-left: none;
  1818. }

  1819. div.icon div.roller_handle {
  1820.     position: absolute;
  1821.     width: 4px;
  1822.     position: absolute;
  1823.     left: 14px;
  1824.     bottom: 0;
  1825.     height: 17px;
  1826.     -webkit-border-radius: 2px;
  1827.     -moz-border-radius: 2px;
  1828.     border-radius: 2px;
  1829.     background: #333;
  1830. }

  1831. div.icon div.roller_handle:before {
  1832.     content: '';
  1833.     position: absolute;
  1834.     width: 2px;
  1835.     top: -2px;
  1836.     height: 4px;
  1837.     left: 1px;
  1838.     background: #333;
  1839. }

  1840. /* Magnet */
  1841. div.icon div.magnet {
  1842.     position: absolute;
  1843.     bottom: 2px;
  1844.     left: 2px;
  1845.     width: 16px;
  1846.     height: 15px;
  1847.     border: 6px solid #333;
  1848.     border-top: none;
  1849.     -webkit-border-radius: 0 0 30px 30px;
  1850.     -moz-border-radius: 0 0 30px 30px;
  1851.     border-radius: 0 0 30px 30px;
  1852. }

  1853. div.icon div.magnet:after {
  1854.     content: '';
  1855.     position: absolute;
  1856.     right: -6px;
  1857.     top: -7px;
  1858.     width: 6px;
  1859.     height: 6px;
  1860.     background: #333;
  1861. }

  1862. div.icon div.magnet:before {
  1863.     content: '';
  1864.     position: absolute;
  1865.     left: -6px;
  1866.     top: -7px;
  1867.     width: 6px;
  1868.     height: 6px;
  1869.     background: #333;
  1870. }

  1871. /* Bomb */
  1872. div.icon div.bomb {
  1873.     position: absolute;
  1874.     bottom: 0;
  1875.     left: 4px;
  1876.     width: 24px;
  1877.     height: 24px;
  1878.     background: #333;
  1879.     -webkit-border-radius: 30px;
  1880.     -moz-border-radius: 30px;
  1881.     border-radius: 30px;
  1882. }

  1883. div.icon div.bomb:after {
  1884.     content: '';
  1885.     position: absolute;
  1886.     top: -1px;
  1887.     left: 8px;
  1888.     width: 8px;
  1889.     background: #333;
  1890.     height: 3px;
  1891. }

  1892. div.icon div.bomb:before {
  1893.     content: '';
  1894.     position: absolute;
  1895.     top: 0;
  1896.     left: 0;
  1897.     width: 8px;
  1898.     height: 15px;
  1899.     border: 2px solid #333;
  1900.     border-right: none;
  1901.     -webkit-border-radius: 50px 0 0 50px;
  1902.     -moz-border-radius: 50px 0 0 50px;
  1903.     border-radius: 50px 0 0 50px;
  1904.     left: 11px;
  1905.     top: -8px;
  1906. }

  1907. /* BirdHouse */
  1908. div.icon div.birdhouse {
  1909.     width: 0;
  1910.     height: 0;
  1911.     position: absolute;
  1912.     top: 0;
  1913.     left: 0;
  1914.     border-style: solid;
  1915.     border-color: transparent transparent #333 transparent;
  1916.     border-width: 0 16px 14px;
  1917. }

  1918. div.icon div.birdhouse:after {
  1919.     content: '';
  1920.     position: absolute;
  1921.     top: 14px;
  1922.     left: -12px;
  1923.     border-style: solid;
  1924.     border-color: #333 transparent transparent transparent;
  1925.     border-width: 100px 12px;
  1926. }

  1927. div.icon div.birdhouse_holes {
  1928.     width: 12px;
  1929.     height: 12px;
  1930.     background: #ddd;
  1931.     position: absolute;
  1932.     -webkit-border-radius: 60px;
  1933.     -moz-border-radius: 60px;
  1934.     border-radius: 60px;
  1935.     left: 10px;
  1936.     top: 8px;
  1937. }

  1938. div.icon div.birdhouse_holes:after {
  1939.     content: '';
  1940.     position: absolute;
  1941.     width: 4px;
  1942.     height: 4px;
  1943.     background: #ccc;
  1944.     bottom: -8px;
  1945.     left: 4px;
  1946.     -webkit-border-radius: 60px;
  1947.     -moz-border-radius: 60px;
  1948.     border-radius: 60px;
  1949. }

  1950. /* Woofer */
  1951. div.icon div.woofer {
  1952.     width: 22px;
  1953.     height: 32px;
  1954.     position: absolute;
  1955.     top: 0;
  1956.     left: 5px;
  1957.     background: #333;
  1958.     border-radius: 2px;
  1959.     -webkit-border-radius: 2px;
  1960.     -moz-border-radius: 2px;
  1961. }

  1962. div.icon div.woofer:after {
  1963.     content: '';
  1964.     position: absolute;
  1965.     width: 2px;
  1966.     height: 2px;
  1967.     background: #333;
  1968.     border-radius: 60px;
  1969.     -moz-border-radius: 60px;
  1970.     -webkit-border-radius: 60px;
  1971.     border: 2px solid #ddd;
  1972.     left: 8px;
  1973.     top: 5px;
  1974. }

  1975. div.icon div.woofer:before {
  1976.     content: '';
  1977.     position: absolute;
  1978.     width: 4px;
  1979.     height: 4px;
  1980.     background: #333;
  1981.     border-radius: 60px;
  1982.     -moz-border-radius: 60px;
  1983.     -webkit-border-radius: 60px;
  1984.     border: 5px solid #ddd;
  1985.     left: 4px;
  1986.     top: 14px;
  1987. }

  1988. /* HandBag */
  1989. div.icon div.handbag {
  1990.     position: absolute;
  1991.     top: 13px;
  1992.     left: 1px;
  1993.     height: 0;
  1994.     width: 24px;
  1995.     border-style: solid;
  1996.     border-color: transparent transparent #333 transparent;
  1997.     border-width: 0 3px 16px;
  1998. }

  1999. div.icon div.handbag:after {
  2000.     content: '';
  2001.     position: absolute;
  2002.     left: 0;
  2003.     top: -3px;
  2004.     height: 3px;
  2005.     width: 24px;
  2006.     background: #333;
  2007. }

  2008. div.icon div.handbag:before {
  2009.     content: '';
  2010.     position: absolute;
  2011.     width: 16px;
  2012.     height: 16px;
  2013.     border: 2px solid #333;
  2014.     -webkit-border-radius: 50px;
  2015.     -moz-border-radius: 50px;
  2016.     border-radius: 50px;
  2017.     top: -10px;
  2018.     left: 2px;
  2019. }

  2020. /* Bell */
  2021. div.icon div.belltop {
  2022.     position: absolute;
  2023.     width: 6px;
  2024.     height: 6px;
  2025.     border: 2px solid #333;
  2026.     -webkit-border-radius: 50px;
  2027.     -moz-border-radius: 50px;
  2028.     border-radius: 50px;
  2029.     left: 11px;
  2030. }

  2031. div.icon div.belltop:after {
  2032.     content: '';
  2033.     position: absolute;
  2034.     top: 1px;
  2035.     width: 20px;
  2036.     height: 20px;
  2037.     background: #333;
  2038.     left: -7px;
  2039.     -webkit-border-radius: 50px 50px 0 0;
  2040.     -moz-border-radius: 50px 50px 0 0;
  2041.     border-radius: 50px 50px 0 0;
  2042. }

  2043. div.icon div.belltop:before {
  2044.     content: '';
  2045.     position: absolute;
  2046.     left: -11px;
  2047.     top: 14px;
  2048.     width: 20px;
  2049.     height: 0;
  2050.     border-style: solid;
  2051.     border-color: transparent transparent #333 transparent;
  2052.     border-width: 0 4px 9px;
  2053. }

  2054. div.icon div.bellbottom {
  2055.     position: absolute;
  2056.     bottom: 5px;
  2057.     left: 2px;
  2058.     width: 28px;
  2059.     height: 2px;
  2060.     background: #333;
  2061. }

  2062. div.icon div.bellbottom:after {
  2063.     content: '';
  2064.     position: absolute;
  2065.     width: 6px;
  2066.     height: 3px;
  2067.     background: #333;
  2068.     -webkit-border-radius: 0 0 50px 50px;
  2069.     -moz-border-radius: 0 0 50px 50px;
  2070.     border-radius: 0 0 50px 50px;
  2071.     top: 3px;
  2072.     left: 5px;
  2073. }

  2074. /* SignBoard */
  2075. div.icon div.signboard {
  2076.     position: absolute;
  2077.     top: 3px;
  2078.     left: 2px;
  2079.     width: 28px;
  2080.     height: 18px;
  2081.     background: #333;
  2082. }

  2083. div.icon div.signboard:after {
  2084.     content: '';
  2085.     position: absolute;
  2086.     height: 8px;
  2087.     width: 4px;
  2088.     background: #333;
  2089.     bottom: -8px;
  2090.     left: 12px;
  2091. }

  2092. div.icon div.signboard_arrow {
  2093.     width: 6px;
  2094.     height: 4px;
  2095.     background: #ddd;
  2096.     position: absolute;
  2097.     top: 10px;
  2098.     left: 10px;
  2099. }

  2100. div.icon div.signboard_arrow:after {
  2101.     content: '';
  2102.     position: absolute;
  2103.     width: 0;
  2104.     height: 0;
  2105.     border-style: solid;
  2106.     border-color: transparent transparent transparent #ddd;
  2107.     border-width: 6px;
  2108.     right: -12px;
  2109.     top: -4px;
  2110. }

  2111. /* Music Note */
  2112. div.icon div.musicnote_base {
  2113.     width: 14px;
  2114.     height: 4px;
  2115.     background: #333;
  2116.     position: absolute;
  2117.     top: 5px;
  2118.     left: 12px;
  2119.     -webkit-transform: skew(0, -10deg);
  2120.     -moz-transform: skew(0, -10deg);
  2121.     -ms-transform: skew(0, -10deg);
  2122.     -o-transform: skew(0, -10deg);
  2123.     transform: skew(0, -10deg);
  2124. }

  2125. div.icon div.musicnote_left {
  2126.     position: absolute;
  2127.     top: 8px;
  2128.     left: 12px;
  2129.     width: 2px;
  2130.     height: 16px;
  2131.     background: #333;
  2132. }

  2133. div.icon div.musicnote_right {
  2134.     position: absolute;
  2135.     top: 5px;
  2136.     right: 6px;
  2137.     width: 2px;
  2138.     height: 17px;
  2139.     background: #333;
  2140. }

  2141. div.icon div.musicnote_ovals {
  2142.     position: absolute;
  2143.     width: 8px;
  2144.     height: 6px;
  2145.     background: #333;
  2146.     -webkit-border-radius: 12px / 8px;
  2147.     -moz-border-radius: 12px / 8px;
  2148.     border-radius: 12px / 8px;
  2149.     bottom: 4px;
  2150.     left: 6px;
  2151. }

  2152. div.icon div.musicnote_ovals:after {
  2153.     content: '';
  2154.     position: absolute;
  2155.     width: 8px;
  2156.     height: 6px;
  2157.     background: #333;
  2158.     -webkit-border-radius: 12px / 8px;
  2159.     -moz-border-radius: 12px / 8px;
  2160.     border-radius: 12px / 8px;
  2161.     bottom: 3px;
  2162.     left: 12px;
  2163. }

  2164. /* Key */
  2165. div.icon div.key_base {
  2166.     width: 22px;
  2167.     height: 22px;
  2168.     background: #333;
  2169.     -webkit-border-radius: 50px;
  2170.     -moz-border-radius: 50px;
  2171.     border-radius: 50px;
  2172.     position: absolute;
  2173.     top: 0;
  2174.     left: 0;
  2175. }

  2176. div.icon div.key_base:after {
  2177.     content: '';
  2178.     position: absolute;
  2179.     top: 5px;
  2180.     left: 5px;
  2181.     width: 6px;
  2182.     height: 6px;
  2183.     -webkit-border-radius: 50px;
  2184.     -moz-border-radius: 50px;
  2185.     border-radius: 50px;
  2186.     background: #ddd;
  2187. }

  2188. div.icon div.key_base:before {
  2189.     content: '';
  2190.     position: absolute;
  2191.     height: 12px;
  2192.     width: 5px;
  2193.     border-top: 6px solid #333;
  2194.     border-right: 3px solid #333;
  2195.     -webkit-transform: rotate(315deg);
  2196.     -moz-transform: rotate(315deg);
  2197.     -ms-transform: rotate(315deg);
  2198.     -o-transform: rotate(315deg);
  2199.     transform: rotate(315deg);
  2200.     left: 18px;
  2201.     top: 14px;
  2202. }

  2203. div.icon div.key_squares {
  2204.     width: 6px;
  2205.     height: 6px;
  2206.     background: #333;
  2207.     position: absolute;
  2208.     top: 18px;
  2209.     left: 17px;
  2210. }

  2211. div.icon div.key_squares:after {
  2212.     content: '';
  2213.     width: 6px;
  2214.     height: 6px;
  2215.     background: #333;
  2216.     position: absolute;
  2217.     top: 4px;
  2218.     left: 4px;
  2219. }

  2220. div.icon div.key_squares:before {
  2221.     content: '';
  2222.     width: 6px;
  2223.     height: 6px;
  2224.     background: #333;
  2225.     position: absolute;
  2226.     top: 8px;
  2227.     left: 8px;
  2228. }

  2229. /* Download */
  2230. div.icon div.download {
  2231.     width: 24px;
  2232.     height: 8px;
  2233.     border: 4px solid #333;
  2234.     border-top: none;
  2235.     position: absolute;
  2236.     bottom: 3px;
  2237. }

  2238. div.icon div.download:after {
  2239.     width: 0px;
  2240.     height: 0px;
  2241.     content: '';
  2242.     position: absolute;
  2243.     border-style: solid;
  2244.     border-color: #333 transparent transparent transparent;
  2245.     border-width: 8px;
  2246.     left: 4px;
  2247.     top: -4px;
  2248. }

  2249. div.icon div.download:before {
  2250.     content: '';
  2251.     position: absolute;
  2252.     width: 7px;
  2253.     height: 10px;
  2254.     background: #333;
  2255.     top: -14px;
  2256.     left: 9px;
  2257. }

  2258. /* Upload */
  2259. div.icon div.upload {
  2260.     width: 24px;
  2261.     height: 8px;
  2262.     border: 4px solid #333;
  2263.     border-top: none;
  2264.     position: absolute;
  2265.     bottom: 3px;
  2266. }

  2267. div.icon div.upload:after {
  2268.     width: 0px;
  2269.     height: 0px;
  2270.     content: '';
  2271.     position: absolute;
  2272.     border-style: solid;
  2273.     border-color: transparent transparent #333 transparent;
  2274.     border-width: 8px;
  2275.     left: 4px;
  2276.     top: -22px;
  2277. }

  2278. div.icon div.upload:before {
  2279.     content: '';
  2280.     position: absolute;
  2281.     width: 7px;
  2282.     height: 10px;
  2283.     background: #333;
  2284.     top: -6px;
  2285.     left: 9px;
  2286. }

  2287. /* Reload */
  2288. div.icon div.reload {
  2289.     width: 18px;
  2290.     height: 9px;
  2291.     border-style: solid;
  2292.     border-width: 0px 4px 4px 4px;
  2293.     border-color: #333;
  2294.     -webkit-border-radius: 0 0 50px 50px;
  2295.     -moz-border-radius: 0 0 50px 50px;
  2296.     border-radius: 0 0 50px 50px;
  2297.     position: absolute;
  2298.     top: 18px;
  2299.     left: 2px;
  2300. }

  2301. div.icon div.reload:after {
  2302.     content: '';
  2303.     width: 9px;
  2304.     height: 9px;
  2305.     border-style: solid;
  2306.     border-width: 4px 0 0 4px;
  2307.     border-color: #333;
  2308.     -webkit-border-radius: 50px 0 0 0;
  2309.     -moz-border-radius: 50px 0 0 0;
  2310.     border-radius: 50px 0 0 0;
  2311.     position: absolute;
  2312.     left: -4px;
  2313.     bottom: 9px;
  2314. }

  2315. div.icon div.reload:before {
  2316.     content: '';
  2317.     position: absolute;
  2318.     width: 0;
  2319.     height: 0;
  2320.     border-style: solid;
  2321.     border-width: 6px;
  2322.     border-color: transparent transparent transparent #333;
  2323.     bottom: 14px;
  2324.     left: 9px;
  2325. }

  2326. /* LoopBack */
  2327. div.icon div.loopback_l {
  2328.     width: 10px;
  2329.     height: 5px;
  2330.     border-style: solid;
  2331.     border-width: 0px 3px 3px 3px;
  2332.     border-color: #333;
  2333.     border-radius: 0 0 50px 50px;
  2334.     position: absolute;
  2335.     top: 16px;
  2336.     left: 1px;
  2337. }

  2338. div.icon div.loopback_l:after {
  2339.     content: '';
  2340.     width: 5px;
  2341.     height: 5px;
  2342.     border-style: solid;
  2343.     border-width: 3px 0 0 3px;
  2344.     border-color: #333;
  2345.     border-radius: 50px 0 0 0;
  2346.     position: absolute;
  2347.     left: -3px;
  2348.     bottom: 5px;
  2349. }

  2350. div.icon div.loopback_l:before {
  2351.     content: '';
  2352.     position: absolute;
  2353.     width: 0;
  2354.     height: 0;
  2355.     border-style: solid;
  2356.     border-width: 4px;
  2357.     border-color: transparent transparent transparent #333;
  2358.     bottom: 7px;
  2359.     left: 5px;
  2360. }

  2361. div.icon div.loopback_r {
  2362.     width: 10px;
  2363.     height: 5px;
  2364.     border-style: solid;
  2365.     border-width: 3px 3px 0 3px;
  2366.     border-color: #333;
  2367.     border-radius: 50px 50px 0 0;
  2368.     position: absolute;
  2369.     top: 8px;
  2370.     right: 2px;
  2371. }

  2372. div.icon div.loopback_r:after {
  2373.     content: '';
  2374.     width: 5px;
  2375.     height: 5px;
  2376.     border-style: solid;
  2377.     border-width: 0 3px 3px 0;
  2378.     border-color: #333;
  2379.     border-radius: 0 0 50px 0;
  2380.     position: absolute;
  2381.     left: 5px;
  2382.     top: 5px;
  2383. }

  2384. div.icon div.loopback_r:before {
  2385.     content: '';
  2386.     position: absolute;
  2387.     width: 0;
  2388.     height: 0;
  2389.     border-style: solid;
  2390.     border-width: 4px;
  2391.     border-color: transparent #333 transparent transparent;
  2392.     top: 7px;
  2393.     right: 5px;
  2394. }

  2395. /* Redo */
  2396. div.icon div.redo_l {
  2397.     width: 8px;
  2398.     height: 8px;
  2399.     border-style: solid;
  2400.     border-width: 0px 0px 4px 4px;
  2401.     border-color: #333;
  2402.     -webkit-border-radius: 0 0 0 50px;
  2403.     -moz-border-radius: 0 0 0 50px;
  2404.     border-radius: 0 0 0 50px;
  2405.     position: absolute;
  2406.     bottom: 4px;
  2407.     left: 4px;
  2408. }

  2409. div.icon div.redo_l:before {
  2410.     content: '';
  2411.     position: absolute;
  2412.     width: 0;
  2413.     height: 0;
  2414.     border-style: solid;
  2415.     border-width: 6px;
  2416.     border-color: transparent transparent #333 transparent;
  2417.     bottom: 8px;
  2418.     left: -8px;
  2419. }

  2420. div.icon div.redo_r {
  2421.     width: 8px;
  2422.     height: 8px;
  2423.     border-style: solid;
  2424.     border-width: 4px 4px 0 0;
  2425.     border-color: #333;
  2426.     -webkit-border-radius: 0 50px 0 0;
  2427.     -moz-border-radius: 0 50px 0 0;
  2428.     border-radius: 0 50px 0 0;
  2429.     position: absolute;
  2430.     top: 4px;
  2431.     right: 4px;
  2432. }

  2433. div.icon div.redo_r:before {
  2434.     content: '';
  2435.     position: absolute;
  2436.     width: 0;
  2437.     height: 0;
  2438.     border-style: solid;
  2439.     border-width: 6px;
  2440.     border-color: #333 transparent transparent transparent;
  2441.     top: 8px;
  2442.     right: -8px;
  2443. }

  2444. /* Target */
  2445. div.icon div.target {
  2446.     width: 15px;
  2447.     height: 15px;
  2448.     -webkit-border-radius: 50px;
  2449.     -moz-border-radius: 50px;
  2450.     border-radius: 50px;
  2451.     border: 8px double #333;
  2452.     position: absolute;
  2453.     top: 0px;
  2454.     left: 0px;
  2455. }

  2456. div.icon div.target:after {
  2457.     content: '';
  2458.     position: absolute;
  2459.     -webkit-border-radius: 50px;
  2460.     -moz-border-radius: 50px;
  2461.     border-radius: 50px;
  2462.     width: 11px;
  2463.     height: 11px;
  2464.     background: #333;
  2465.     left: 2px;
  2466.     top: 2px;
  2467. }

  2468. /* Lock Open */
  2469. div.icon div.lockClosed_base {
  2470.     width: 20px;
  2471.     height: 16px;
  2472.     background: #333;
  2473.     position: absolute;
  2474.     left: 6px;
  2475.     top: 12px;
  2476. }

  2477. div.icon div.lockClosed_base:after {
  2478.     content: '';
  2479.     position: absolute;
  2480.     background: #ddd;
  2481.     width: 4px;
  2482.     height: 4px;
  2483.     left: 8px;
  2484.     top: 5px;
  2485.     -webkit-border-radius: 40px;
  2486.     -moz-border-radius: 40px;
  2487.     border-radius: 40px;
  2488. }

  2489. div.icon div.lockClosed_base:before {
  2490.     content: '';
  2491.     position: absolute;
  2492.     background: #ddd;
  2493.     width: 2px;
  2494.     height: 4px;
  2495.     left: 9px;
  2496.     top: 8px;
  2497. }

  2498. div.icon div.lockClosed_handle {
  2499.     width: 10px;
  2500.     height: 7px;
  2501.     border: 2px solid #333;
  2502.     border-bottom: none;
  2503.     -webkit-border-radius: 40px 40px 0 0;
  2504.     -moz-border-radius: 40px 40px 0 0;
  2505.     border-radius: 40px 40px 0 0;
  2506.     position: absolute;
  2507.     left: 9px;
  2508.     top: 3px;
  2509. }

  2510. /* Lock Open */
  2511. div.icon div.lockOpen_base {
  2512.     width: 20px;
  2513.     height: 16px;
  2514.     background: #333;
  2515.     position: absolute;
  2516.     left: 2px;
  2517.     top: 12px;
  2518. }

  2519. div.icon div.lockOpen_base:after {
  2520.     content: '';
  2521.     position: absolute;
  2522.     background: #ddd;
  2523.     width: 4px;
  2524.     height: 4px;
  2525.     left: 8px;
  2526.     top: 5px;
  2527.     -webkit-border-radius: 40px;
  2528.     -moz-border-radius: 40px;
  2529.     border-radius: 40px;
  2530. }

  2531. div.icon div.lockOpen_base:before {
  2532.     content: '';
  2533.     position: absolute;
  2534.     background: #ddd;
  2535.     width: 2px;
  2536.     height: 4px;
  2537.     left: 9px;
  2538.     top: 8px;
  2539. }

  2540. div.icon div.lockOpen_handle {
  2541.     width: 10px;
  2542.     height: 7px;
  2543.     border: 2px solid #333;
  2544.     border-bottom: none;
  2545.     -webkit-border-radius: 40px 40px 0 0;
  2546.     -moz-border-radius: 40px 40px 0 0;
  2547.     border-radius: 40px 40px 0 0;
  2548.     position: absolute;
  2549.     left: 17px;
  2550.     top: 3px;
  2551. }

  2552. /* Weight */
  2553. div.icon div.weight {
  2554.     width: 22px;
  2555.     height: 0;
  2556.     position: absolute;
  2557.     border-style: solid;
  2558.     border-width: 0px 5px 15px 5px;
  2559.     border-color: transparent transparent #333 transparent;
  2560.     top: 14px;
  2561.     left: 0;
  2562. }

  2563. div.icon div.weight:after {
  2564.     content: '';
  2565.     position: absolute;
  2566.     top: -12px;
  2567.     left: 4px;
  2568.     width: 6px;
  2569.     height: 6px;
  2570.     border: 4px solid #333;
  2571.     -webkit-border-radius: 50px;
  2572.     -moz-border-radius: 50px;
  2573.     border-radius: 50px;
  2574. }

  2575. /* Light Bulb */
  2576. div.icon div.bulb_glass {
  2577.     width: 22px;
  2578.     height: 22px;
  2579.     background: #333;
  2580.     -webkit-border-radius: 50px;
  2581.     -moz-border-radius: 50px;
  2582.     border-radius: 50px;
  2583.     position: absolute;
  2584.     left: 5px;
  2585.     top: 1px
  2586. }

  2587. div.icon div.bulb_glass:after {
  2588.     content: '';
  2589.     position: absolute;
  2590.     width: 8px;
  2591.     height: 8px;
  2592.     background: #333;
  2593.     bottom: -2px;
  2594.     left: 7px;
  2595. }

  2596. div.icon div.bulb_holder {
  2597.     width: 8px;
  2598.     height: 1px;
  2599.     background: #333;
  2600.     position: absolute;
  2601.     left: 12px;
  2602.     bottom: 5px;
  2603. }

  2604. div.icon div.bulb_holder:after {
  2605.     content: '';
  2606.     width: 8px;
  2607.     height: 1px;
  2608.     background: #333;
  2609.     position: absolute;
  2610.     top: 2px;
  2611.     left: 0px;
  2612. }

  2613. div.icon div.bulb_holder:before {
  2614.     content: '';
  2615.     width: 4px;
  2616.     height: 1px;
  2617.     background: #333;
  2618.     position: absolute;
  2619.     left: 2px;
  2620.     top: 4px;
  2621. }

  2622. /* Camera */
  2623. div.icon div.camera_body {
  2624.     width: 32px;
  2625.     height: 20px;
  2626.     background: #333;
  2627.     position: absolute;
  2628.     top: 7px;
  2629.     -webkit-border-radius: 2px;
  2630.     -moz-border-radius: 2px;
  2631.     border-radius: 2px;
  2632. }

  2633. div.icon div.camera_body:after {
  2634.     width: 4px;
  2635.     height: 2px;
  2636.     position: absolute;
  2637.     content: '';
  2638.     background: #333;
  2639.     top: -2px;
  2640.     left: 5px;
  2641. }

  2642. div.icon div.camera_body:before {
  2643.     content: '';
  2644.     position: absolute;
  2645.     width: 3px;
  2646.     height: 2px;
  2647.     background: #ddd;
  2648.     right: 3px;
  2649.     top: 3px;
  2650. }

  2651. div.icon div.camera_lens {
  2652.     width: 8px;
  2653.     height: 8px;
  2654.     border: 3px solid #ddd;
  2655.     position: absolute;
  2656.     -webkit-border-radius: 50px;
  2657.     -moz-border-radius: 50px;
  2658.     border-radius: 50px;
  2659.     top: 10px;
  2660.     left: 9px;
  2661. }

  2662. /* EarBuds */
  2663. div.icon div.earbud_left {
  2664.     position: absolute;
  2665.     width: 7px;
  2666.     height: 7px;
  2667.     border: 1px solid #333;
  2668.     background: #ddd;
  2669.     -webkit-border-radius: 50px;
  2670.     -moz-border-radius: 50px;
  2671.     border-radius: 50px;
  2672.     left: 5px;
  2673.     top: 3px;
  2674. }

  2675. div.icon div.earbud_left:after {
  2676.     content: '';
  2677.     position: absolute;
  2678.     width: 3px;
  2679.     height: 5px;
  2680.     background: #333;
  2681.     bottom: -5px;
  2682.     left: 2px;
  2683. }

  2684. div.icon div.earbud_left:before {
  2685.     content: '';
  2686.     position: absolute;
  2687.     width: 1px;
  2688.     height: 6px;
  2689.     background: #333;
  2690.     bottom: -11px;
  2691.     left: 3px;
  2692. }

  2693. div.icon div.earbud_right {
  2694.     position: absolute;
  2695.     width: 7px;
  2696.     height: 7px;
  2697.     border: 1px solid #333;
  2698.     background: #333;
  2699.     -webkit-border-radius: 50px;
  2700.     -moz-border-radius: 50px;
  2701.     border-radius: 50px;
  2702.     right: 5px;
  2703.     top: 10px;
  2704. }

  2705. div.icon div.earbud_right:after {
  2706.     content: '';
  2707.     position: absolute;
  2708.     width: 3px;
  2709.     height: 5px;
  2710.     background: #333;
  2711.     bottom: -5px;
  2712.     left: 2px;
  2713. }

  2714. div.icon div.earbud_right:before {
  2715.     content: '';
  2716.     position: absolute;
  2717.     width: 1px;
  2718.     height: 6px;
  2719.     background: #333;
  2720.     bottom: -11px;
  2721.     left: 3px;
  2722. }

  2723. /* Restricted */
  2724. div.icon div.restricted {
  2725.     width: 22px;
  2726.     height: 22px;
  2727.     border: 4px solid #333;
  2728.     position: absolute;
  2729.     top: 1px;
  2730.     left: 1px;
  2731.     -webkit-border-radius: 50px;
  2732.     -moz-border-radius: 50px;
  2733.     border-radius: 50px;
  2734. }

  2735. div.icon div.restricted:after {
  2736.     content: '';
  2737.     position: absolute;
  2738.     width: 4px;
  2739.     height: 26px;
  2740.     background: #333;
  2741.     -webkit-transform: rotate(45deg);
  2742.     -moz-transform: rotate(45deg);
  2743.     -ms-transform: rotate(45deg);
  2744.     -o-transform: rotate(45deg);
  2745.     transform: rotate(45deg);
  2746.     left: 10px;
  2747.     top: -3px;
  2748. }

  2749. /* Pin */
  2750. div.icon div.pin_middle {
  2751.     width: 12px;
  2752.     height: 10px;
  2753.     background: #333;
  2754.     position: absolute;
  2755.     top: 8px;
  2756.     left: 12px;
  2757.     -webkit-transform: rotate(45deg);
  2758.     -moz-transform: rotate(45deg);
  2759.     -ms-transform: rotate(45deg);
  2760.     -o-transform: rotate(45deg);
  2761.     transform: rotate(45deg);
  2762. }

  2763. div.icon div.pin_middle:after {
  2764.     content: '';
  2765.     position: absolute;
  2766.     width: 0;
  2767.     height: 0;
  2768.     border-style: solid;
  2769.     border-color: transparent transparent #ddd transparent;
  2770.     border-width: 0 2px 8px 0;
  2771.     left: 2px;
  2772.     top: 0px;
  2773. }

  2774. div.icon div.pin_middle:before {
  2775.     content: '';
  2776.     position: absolute;
  2777.     width: 12px;
  2778.     height: 0;
  2779.     bottom: -5px;
  2780.     left: -2px;
  2781.     border-style: solid;
  2782.     border-color: transparent transparent #333 transparent;
  2783.     border-width: 0 2px 6px 2px;
  2784. }

  2785. div.icon div.pin_bottom {
  2786.     width: 14px;
  2787.     height: 2px;
  2788.     background: #333;
  2789.     -webkit-transform: rotate(45deg);
  2790.     -moz-transform: rotate(45deg);
  2791.     -ms-transform: rotate(45deg);
  2792.     -o-transform: rotate(45deg);
  2793.     transform: rotate(45deg);
  2794.     position: absolute;
  2795.     top: 7px;
  2796.     left: 16px;
  2797. }

  2798. div.icon div.pin_bottom:after {
  2799.     content: '';
  2800.     position: absolute;
  2801.     width: 0;
  2802.     height: 0;
  2803.     border-style: solid;
  2804.     border-color: #333 transparent transparent transparent;
  2805.     border-width: 12px 2px 0 2px;
  2806.     top: 19px;
  2807.     left: 5px;
  2808. }

  2809. /* Plus */
  2810. div.icon div.plus {
  2811.     width: 24px;
  2812.     height: 4px;
  2813.     background: #333;
  2814.     position: absolute;
  2815.     left: 4px;
  2816.     top: 14px;
  2817. }

  2818. div.icon div.plus:after {
  2819.     content: '';
  2820.     position: absolute;
  2821.     width: 4px;
  2822.     height: 24px;
  2823.     background: #333;
  2824.     left: 10px;
  2825.     top: -10px;
  2826. }

  2827. /* Minus */
  2828. div.icon div.minus {
  2829.     width: 24px;
  2830.     height: 4px;
  2831.     background: #333;
  2832.     position: absolute;
  2833.     left: 4px;
  2834.     top: 14px;
  2835. }

  2836. /* Flask */
  2837. div.icon div.flask_body {
  2838.     width: 10px;
  2839.     height: 2px;
  2840.     background: #333;
  2841.     position: absolute;
  2842.     left: 11px;
  2843.     top: 2px;
  2844. }

  2845. div.icon div.flask_body:after {
  2846.     content: '';
  2847.     position: absolute;
  2848.     width: 6px;
  2849.     height: 8px;
  2850.     background: #333;
  2851.     left: 2px;
  2852.     top: 2px;
  2853. }

  2854. div.icon div.flask_body:before {
  2855.     content: '';
  2856.     position: absolute;
  2857.     width: 6px;
  2858.     height: 0;
  2859.     border-style: solid;
  2860.     border-color: transparent transparent #333 transparent;
  2861.     border-width: 0 12px 18px 12px;
  2862.     top: 10px;
  2863.     left: -10px;
  2864. }

  2865. div.icon div.flask_liquid {
  2866.     width: 10px;
  2867.     height: 0;
  2868.     border-style: solid;
  2869.     border-color: transparent transparent #ddd transparent;
  2870.     border-width: 0 7px 10px 7px;
  2871.     position: absolute;
  2872.     top: 18px;
  2873.     left: 4px;
  2874. }

  2875. div.icon div.flask_liquid:after {
  2876.     width: 4px;
  2877.     height: 4px;
  2878.     background: #333;
  2879.     content: '';
  2880.     position: absolute;
  2881.     -webkit-border-radius: 50px;
  2882.     -moz-border-radius: 50px;
  2883.     border-radius: 50px;
  2884.     top: 4px;
  2885. }

  2886. div.icon div.flask_liquid:before {
  2887.     width: 2px;
  2888.     height: 2px;
  2889.     background: #333;
  2890.     content: '';
  2891.     position: absolute;
  2892.     -webkit-border-radius: 50px;
  2893.     -moz-border-radius: 50px;
  2894.     border-radius: 50px;
  2895.     top: 2px;
  2896.     left: 6px;
  2897. }

  2898. /* Test Tube */
  2899. div.icon div.testtube_body {
  2900.     width: 14px;
  2901.     height: 2px;
  2902.     background: #333;
  2903.     position: absolute;
  2904.     left: 9px;
  2905.     top: 2px;
  2906. }

  2907. div.icon div.testtube_body:after {
  2908.     content: '';
  2909.     position: absolute;
  2910.     width: 10px;
  2911.     height: 26px;
  2912.     background: #333;
  2913.     left: 2px;
  2914.     top: 2px;
  2915.     -webkit-border-radius: 0 0 50px 50px;
  2916.     -moz-border-radius: 0 0 50px 50px;
  2917.     border-radius: 0 0 50px 50px;
  2918. }

  2919. div.icon div.testtube_body:before {
  2920.     content: '';
  2921.     position: absolute;
  2922.     width: 8px;
  2923.     height: 17px;
  2924.     background: #ddd;
  2925.     left: 3px;
  2926.     top: 10px;
  2927.     -webkit-border-radius: 0 0 50px 50px;
  2928.     -moz-border-radius: 0 0 50px 50px;
  2929.     border-radius: 0 0 50px 50px;
  2930.     z-index: 2;
  2931. }

  2932. div.icon div.testtube_bubbles {
  2933.     position: absolute;
  2934.     width: 5px;
  2935.     height: 5px;
  2936.     background: #333;
  2937.     -webkit-border-radius: 50px;
  2938.     -moz-border-radius: 50px;
  2939.     border-radius: 50px;
  2940.     top: 22px;
  2941.     left: 13px;
  2942.     z-index: 3;
  2943. }

  2944. div.icon div.testtube_bubbles:after {
  2945.     content: '';
  2946.     position: absolute;
  2947.     width: 3px;
  2948.     height: 3px;
  2949.     background: #333;
  2950.     -webkit-border-radius: 50px;
  2951.     -moz-border-radius: 50px;
  2952.     border-radius: 50px;
  2953.     bottom: 6px;
  2954.     left: 3px;
  2955.     z-index: 3;
  2956. }

  2957. div.icon div.testtube_bubbles:before {
  2958.     content: '';
  2959.     position: absolute;
  2960.     width: 2px;
  2961.     height: 2px;
  2962.     background: #333;
  2963.     -webkit-border-radius: 50px;
  2964.     -moz-border-radius: 50px;
  2965.     border-radius: 50px;
  2966.     bottom: 10px;
  2967.     left: 0px;
  2968.     z-index: 3;
  2969. }

  2970. /* DustBin */
  2971. div.icon div.dustbin {
  2972.     width: 16px;
  2973.     height: 20px;
  2974.     background: #333;
  2975.     position: absolute;
  2976.     left: 8px;
  2977.     bottom: 3px;
  2978. }

  2979. div.icon div.dustbin:after {
  2980.     content: '';
  2981.     position: absolute;
  2982.     width: 20px;
  2983.     height: 3px;
  2984.     background: #333;
  2985.     left: -2px;
  2986.     top: -4px;
  2987. }

  2988. div.icon div.dustbin:before {
  2989.     height: 3px;
  2990.     width: 6px;
  2991.     position: absolute;
  2992.     top: -6px;
  2993.     content: '';
  2994.     background: #333;
  2995.     left: 5px;
  2996. }
  2997. </style>
  2998. <h1>CSS3 Monochrome Icon Set</h1>
  2999. <div class="container">
  3000.         
  3001.         <!-- ### Down Arrow ### -->
  3002.         <div class="icon">
  3003.                 <div class="downArrow"></div>
  3004.         </div>
  3005.         
  3006.         <!-- ### Up Arrow ### -->
  3007.         <div class="icon">
  3008.                 <div class="upArrow"></div>
  3009.         </div>
  3010.         
  3011.         <!-- ### Left Arrow ### -->
  3012.         <div class="icon">
  3013.                 <div class="leftArrow"></div>
  3014.         </div>
  3015.         
  3016.         <!-- ### Right Arrow ### -->
  3017.         <div class="icon">
  3018.                 <div class="rightArrow"></div>
  3019.         </div>
  3020.         
  3021.         <!-- ### Home ### -->
  3022.         <div class="icon">
  3023.                 <div class="home"></div>
  3024.                 <div class="chimney"></div>
  3025.         </div>
  3026.         
  3027.         <!-- ### Disc ### -->
  3028.         <div class="icon">
  3029.                 <div class="disc"></div>
  3030.         </div>
  3031.         
  3032.         <!-- ### Heart ### -->
  3033.         <div class="icon">
  3034.                 <div class="heart"></div>
  3035.         </div>
  3036.         
  3037.         <!-- ### Pencil ### -->
  3038.         <div class="icon">
  3039.                 <div class="pencil"></div>
  3040.         </div>
  3041.         
  3042.         <!-- ### Chat Box ### -->
  3043.         <div class="icon">
  3044.                 <div class="chat"></div>
  3045.                 <div class="lines"></div>
  3046.         </div>
  3047.         
  3048.         <!-- ### Tick ### -->
  3049.         <div class="icon">
  3050.                 <div class="tick"></div>
  3051.         </div>
  3052.         
  3053.         <!-- ### Cross ### -->
  3054.         <div class="icon">
  3055.                 <div class="cross"></div>
  3056.         </div>
  3057.         
  3058.         <!-- ### User ### -->
  3059.         <div class="icon">
  3060.                 <div class="user"></div>
  3061.                 <div class="shoulder"></div>
  3062.         </div>
  3063.         
  3064.         <!-- ### Search ### -->
  3065.         <div class="icon">
  3066.                 <div class="search"></div>
  3067.         </div>
  3068.         
  3069.         <!-- ### Search with base ### -->
  3070.         <div class="icon">
  3071.                 <div class="searchB"></div>
  3072.         </div>
  3073.         
  3074.         <!-- ### Phone ### -->
  3075.         <div class="icon">
  3076.                 <div class="phone"></div>
  3077.         </div>
  3078.         
  3079.         <!-- ### iPod ### -->
  3080.         <div class="icon">
  3081.                 <div class="ipod"></div>
  3082.         </div>
  3083.         
  3084.         <!-- ### Tab ### -->
  3085.         <div class="icon">
  3086.                 <div class="tab"></div>
  3087.         </div>
  3088.         
  3089.         <!-- ### Graph1 ### -->
  3090.         <div class="icon">
  3091.                 <div class="graph1"></div>
  3092.                 <div class="bars"></div>
  3093.         </div>
  3094.         
  3095.         <!-- ### Screen ### -->
  3096.         <div class="icon">
  3097.                 <div class="screen"></div>
  3098.         </div>
  3099.         
  3100.         <!-- ### Cloud ### -->
  3101.         <div class="icon">
  3102.                 <div class="cloud"></div>
  3103.         </div>
  3104.         
  3105.         <!-- ### Cloud-Up ### -->
  3106.         <div class="icon">
  3107.                 <div class="cloudUp"></div>
  3108.                 <div class="cloudUpArrow"></div>
  3109.         </div>
  3110.         
  3111.         <!-- ### Cloud-Down ### -->
  3112.         <div class="icon">
  3113.                 <div class="cloudDown"></div>
  3114.                 <div class="cloudDownArrow"></div>
  3115.         </div>
  3116.         
  3117.         <!-- ### Page ### -->
  3118.         <div class="icon">
  3119.                 <div class="page"></div>
  3120.                 <div class="pageLines"></div>
  3121.         </div>
  3122.         
  3123.         <!-- ### RSS ### -->
  3124.         <div class="icon">
  3125.                 <div class="rss"></div>
  3126.         </div>
  3127.         
  3128.         <!-- ### Battery Full ### -->
  3129.         <div class="icon">
  3130.                 <div class="batFull"></div>
  3131.         </div>
  3132.         
  3133.         <!-- ### Battery Medium ### -->
  3134.         <div class="icon">
  3135.                 <div class="batMed"></div>
  3136.         </div>
  3137.         
  3138.         <!-- ### Battery Low ### -->
  3139.         <div class="icon">
  3140.                 <div class="batLow"></div>
  3141.         </div>
  3142.         
  3143.         <!-- ### Battery Empty ### -->
  3144.         <div class="icon">
  3145.                 <div class="batEmpty"></div>
  3146.         </div>
  3147.         
  3148.         <!-- ### Speaker Volume Full ### -->
  3149.         <div class="icon">
  3150.                 <div class="speakerVolF"></div>
  3151.         </div>
  3152.         
  3153.         <!-- ### Speaker Volume Half ### -->
  3154.         <div class="icon">
  3155.                 <div class="speakerVolH"></div>
  3156.         </div>
  3157.         
  3158.         <!-- ### Speaker Volume Mute ### -->
  3159.         <div class="icon">
  3160.                 <div class="speakerVolM"></div>
  3161.         </div>
  3162.         
  3163.         <!-- ### Play ### -->
  3164.         <div class="icon">
  3165.                 <div class="play"></div>
  3166.         </div>
  3167.         
  3168.         <!-- ### Pause ### -->
  3169.         <div class="icon">
  3170.                 <div class="pause"></div>
  3171.         </div>
  3172.         
  3173.         <!-- ### Forward ### -->
  3174.         <div class="icon">
  3175.                 <div class="forward"></div>
  3176.         </div>
  3177.         
  3178.         <!-- ### Next ### -->
  3179.         <div class="icon">
  3180.                 <div class="next"></div>
  3181.         </div>
  3182.         
  3183.         <!-- ### Rewind ### -->
  3184.         <div class="icon">
  3185.                 <div class="rewind"></div>
  3186.         </div>
  3187.         
  3188.         <!-- ### Previous ### -->
  3189.         <div class="icon">
  3190.                 <div class="previous"></div>
  3191.         </div>
  3192.         
  3193.         <!-- ### Stop ### -->
  3194.         <div class="icon">
  3195.                 <div class="stop"></div>
  3196.         </div>
  3197.         
  3198.         <!-- ### Location ### -->
  3199.         <div class="icon">
  3200.                 <div class="location"></div>
  3201.         </div>
  3202.         
  3203.         <!-- ### Clock ### -->
  3204.         <div class="icon">
  3205.                 <div class="clock"></div>
  3206.         </div>
  3207.         
  3208.         <!-- ### Clock Alt ### -->
  3209.         <div class="icon">
  3210.                 <div class="clockAlt"></div>
  3211.         </div>
  3212.         
  3213.         <!-- ### Pointer Right ### -->
  3214.         <div class="icon">
  3215.                 <div class="pointerRight"></div>
  3216.         </div>
  3217.         
  3218.         <!-- ### Pointer Top ### -->
  3219.         <div class="icon">
  3220.                 <div class="pointerTop"></div>
  3221.         </div>
  3222.         
  3223.         <!-- ### Pointer Left ### -->
  3224.         <div class="icon">
  3225.                 <div class="pointerLeft"></div>
  3226.         </div>
  3227.         
  3228.         <!-- ### Pointer Down ### -->
  3229.         <div class="icon">
  3230.                 <div class="pointerDown"></div>
  3231.         </div>
  3232.         
  3233.         <!-- ### Signals ### -->
  3234.         <div class="icon">
  3235.                 <div class="signal1"></div>
  3236.                 <div class="signal2"></div>
  3237.         </div>
  3238.         
  3239.         <!-- ### Graph2 ### -->
  3240.         <div class="icon">
  3241.                 <div class="base"></div>
  3242.                 <div class="bars2"></div>
  3243.         </div>
  3244.         
  3245.         <!-- ### Ribbon ### -->
  3246.         <div class="icon">
  3247.                 <div class="ribbon"></div>
  3248.         </div>
  3249.         
  3250.         <!-- ### Video Cam ### -->
  3251.         <div class="icon">
  3252.                 <div class="videoCam"></div>
  3253.         </div>
  3254.         
  3255.         <!-- ### Star ### -->
  3256.         <div class="icon">
  3257.                 <div class="star"></div>
  3258.         </div>
  3259.         
  3260.         <!-- ### HeadPhones ### -->
  3261.         <div class="icon">
  3262.                 <div class="headphones"></div>
  3263.         </div>
  3264.         
  3265.         <!-- ### Capsule ### -->
  3266.         <div class="icon">
  3267.                 <div class="capsule"></div>
  3268.         </div>
  3269.         
  3270.         <!-- ### Microphone ### -->
  3271.         <div class="icon">
  3272.                 <div class="mic"></div>
  3273.                 <div class="holder"></div>
  3274.         </div>
  3275.         
  3276.         <!-- ### Tower ### -->
  3277.         <div class="icon">
  3278.                 <div class="tower"></div>
  3279.                 <div class="waves"></div>
  3280.         </div>
  3281.         
  3282.         <!-- ### IceCream ### -->
  3283.         <div class="icon">
  3284.                 <div class="icecream"></div>
  3285.         </div>
  3286.         
  3287.         <!-- ### Golf ### -->
  3288.         <div class="icon">
  3289.                 <div class="golf_stick"></div>
  3290.                 <div class="golf_ball"></div>
  3291.         </div>
  3292.         
  3293.         <!-- ### PolyBag ### -->
  3294.         <div class="icon">
  3295.                 <div class="polybag"></div>
  3296.         </div>
  3297.         
  3298.         <!-- ### BriefCase ### -->
  3299.         <div class="icon">
  3300.                 <div class="briefcase_handle"></div>
  3301.                 <div class="briefcase"></div>
  3302.         </div>
  3303.         
  3304.         <!-- ### Roller ### -->
  3305.         <div class="icon">
  3306.                 <div class="roller_brush"></div>
  3307.                 <div class="roller_handle"></div>
  3308.         </div>
  3309.         
  3310.         <!-- ### Magnet ### -->
  3311.         <div class="icon">
  3312.                 <div class="magnet"></div>
  3313.         </div>
  3314.         
  3315.         <!-- ### Bomb ### -->
  3316.         <div class="icon">
  3317.                 <div class="bomb"></div>
  3318.         </div>
  3319.         
  3320.         <!-- ### BirdHouse ### -->
  3321.         <div class="icon">
  3322.                 <div class="birdhouse"></div>
  3323.                 <div class="birdhouse_holes"></div>
  3324.         </div>
  3325.         
  3326.         <!-- ### Woofer ### -->
  3327.         <div class="icon">
  3328.                 <div class="woofer"></div>
  3329.         </div>        
  3330.         
  3331.         <!-- ### HandBag ### -->
  3332.         <div class="icon">
  3333.                 <div class="handbag"></div>
  3334.         </div>
  3335.         
  3336.         <!-- ### Bell ### -->
  3337.         <div class="icon">
  3338.                 <div class="belltop"></div>
  3339.                 <div class="bellbottom"></div>
  3340.         </div>
  3341.         
  3342.         <!-- ### SignBoard ### -->
  3343.         <div class="icon">
  3344.                 <div class="signboard"></div>
  3345.                 <div class="signboard_arrow"></div>
  3346.         </div>
  3347.         
  3348.         <!-- ### Music Note ### -->
  3349.         <div class="icon">
  3350.                 <div class="musicnote_base"></div>
  3351.                 <div class="musicnote_left"></div>
  3352.                 <div class="musicnote_right"></div>
  3353.                 <div class="musicnote_ovals"></div>
  3354.         </div>
  3355.         
  3356.         <!-- ### Key ### -->
  3357.         <div class="icon">
  3358.                 <div class="key_base"></div>
  3359.                 <div class="key_squares"></div>
  3360.         </div>
  3361.         
  3362.         <!-- ### Download ### -->
  3363.         <div class="icon">
  3364.                 <div class="download"></div>
  3365.         </div>
  3366.         
  3367.         <!-- ### Upload ### -->
  3368.         <div class="icon">
  3369.                 <div class="upload"></div>
  3370.         </div>
  3371.         
  3372.         <!-- ### Reload ### -->
  3373.         <div class="icon">
  3374.                 <div class="reload"></div>
  3375.         </div>
  3376.         
  3377.         <!-- ### Redo ### -->
  3378.         <div class="icon">
  3379.                 <div class="redo_l"></div>
  3380.                 <div class="redo_r"></div>
  3381.         </div>
  3382.         
  3383.         
  3384.         <!-- ### LoopBack ### -->
  3385.         <div class="icon">
  3386.                 <div class="loopback_l"></div>
  3387.                 <div class="loopback_r"></div>
  3388.         </div>
  3389.         
  3390.         <!-- ### Target ### -->
  3391.         <div class="icon">
  3392.                 <div class="target"></div>
  3393.         </div>
  3394.         
  3395.         <!-- ### Lock Closed ### -->
  3396.         <div class="icon">
  3397.                 <div class="lockClosed_base"></div>
  3398.                 <div class="lockClosed_handle"></div>
  3399.         </div>
  3400.         
  3401.         <!-- ### Lock Open ### -->
  3402.         <div class="icon">
  3403.                 <div class="lockOpen_base"></div>
  3404.                 <div class="lockOpen_handle"></div>
  3405.         </div>
  3406.         
  3407.         <hr />
  3408.         <h3 style="border: none; color: #333; margin: 0;">New!</h3>
  3409.         <hr />
  3410.         
  3411.         <!-- ### Weight ### -->
  3412.         <div class="icon">
  3413.                 <div class="weight"></div>
  3414.         </div>
  3415.         
  3416.         <!-- ### Light Bulb ### -->
  3417.         <div class="icon">
  3418.                 <div class="bulb_glass"></div>
  3419.                 <div class="bulb_holder"></div>
  3420.         </div>
  3421.         
  3422.         <!-- ### Camera ### -->
  3423.         <div class="icon">
  3424.                 <div class="camera_body"></div>
  3425.                 <div class="camera_lens"></div>
  3426.         </div>
  3427.         
  3428.         <!-- ### EarBuds ### -->
  3429.         <div class="icon">
  3430.                 <div class="earbud_left"></div>
  3431.                 <div class="earbud_right"></div>
  3432.         </div>
  3433.         
  3434.         <!-- ### Restricted ### -->
  3435.         <div class="icon">
  3436.                 <div class="restricted"></div>
  3437.         </div>
  3438.         
  3439.         <!-- ### Pin ### -->
  3440.         <div class="icon">
  3441.                 <div class="pin_middle"></div>
  3442.                 <div class="pin_bottom"></div>
  3443.         </div>
  3444.         
  3445.         <!-- ### Plus ### -->
  3446.         <div class="icon">
  3447.                 <div class="plus"></div>
  3448.         </div>
  3449.         
  3450.         <!-- ### Minus ### -->
  3451.         <div class="icon">
  3452.                 <div class="minus"></div>
  3453.         </div>
  3454.         
  3455.         <!-- ### Flask ### -->
  3456.         <div class="icon">
  3457.                 <div class="flask_body"></div>
  3458.                 <div class="flask_liquid"></div>
  3459.         </div>
  3460.         
  3461.         <!-- ### Test Tube ### -->
  3462.         <div class="icon">
  3463.                 <div class="testtube_body"></div>
  3464.                 <div class="testtube_bubbles"></div>
  3465.         </div>
  3466.         
  3467.         <!-- ### DustBin ### -->
  3468.         <div class="icon">
  3469.                 <div class="dustbin"></div>
  3470.         </div>
  3471.         
  3472.         <!-- END -->
  3473. </div>
复制代码

帖子地址: 

本文来源于草根吧源码论坛 www.caogen8.co,欢迎大家下载。
如果您没有贡献需要充值,可以直接在线充值,点击充值
如果你需要加入本站赞助VIP会员,可以直接在线开通,点击开通
如果找不到您要的资源,请搜索一下,点击搜索
回复

举报

0

主题

5

热度

0

贡献

步入草根

Rank: 1

发表于 2014-12-15 22:45:13 | 显示全部楼层
estoon5.0模板|b2b行业农业网站|绿色模版三农在线农林果木园林

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表