承接
网站维护 网站升级 数据转换 页面美化 插件二开 BUG修复
热门
插件 板摸 教程 分享 攻略 经验 电脑 服务器
分类
数据转换 网站升级 故障排查 BUG修复 页面美化 插件升级
草根吧»论坛首页 › ∷草根吧扩展区∷ › PHP技术区 › 纯CSS3 绘制各种实用的ico小图标
返回列表 发新帖
查看: 539|回复: 1

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

[复制链接]
小草根

6671

热度

1万

元宝

262

贡献

管理员

DZ专员
发表于 2014-12-15 16:37:21 | 显示全部楼层 |阅读模式
css3 Monochrome Icon Set
纯CSS3 绘制各种实用的ico小图标.jpg

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

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

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

  21. div.container_d {
  22.     position: relative;
  23.     width: 592px;
  24.     margin: 0 auto;
  25. }

  27. p {
  28.     font-size: 13px;
  29.     line-height: 18px;
  30.     font-family: Arial, Helvetica, sans-serif;
  31. }

  33. hr {
  34.     width: 592px;
  35.     height: 1px;
  36.     background: #888;
  37.     border: none;
  38.     border-bottom: 1px solid #eee;
  39.     outline: none;
  40. }

  42. h3 {
  43.     font-size: 16px;
  44.     line-height: 20px;
  45.     font-family: Arial, Helvetica, sans-serif;
  46.     border-bottom: 1px solid #aaa;
  47.     padding: 8px 0;
  48.     margin: 25px 0 10px;
  49. }

  51. code {
  52.     margin: 0;
  53.     padding: 20px;
  54.     background: #ddd;
  55.     border: 1px solid #fff;
  56.     display: block;
  57.     -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  58.     -moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  59.     box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  60. }

  62. /*##### ICONS #####*/
  63. div.icon {
  64.     height: 32px;
  65.     width: 32px;
  66.     position: relative;
  67.     margin: 15px;
  68.     overflow: hidden;
  69.     display: inline-block;
  70. }

  72. /* Down Arrow */
  73. div.icon div.downArrow {
  74.     height: 0px;
  75.     width: 0px;
  76.     border-width: 16px;
  77.     border-style: solid;
  78.     border-color: #333 transparent transparent transparent;
  79.     position: absolute;
  80.     top: 16px;
  81.     left: 0;
  82. }

  84. div.icon div.downArrow:after {
  85.     content: '';
  86.     width: 12px;
  87.     height: 16px;
  88.     background-color: #333;
  89.     position: absolute;
  90.     bottom: 16px;
  91.     right: -6px;
  92. }

  94. /* Up Arrow */
  95. div.icon div.upArrow {
  96.     height: 0px;
  97.     width: 0px;
  98.     border-width: 16px;
  99.     border-style: solid;
  100.     border-color: transparent transparent #333 transparent;
  101.     position: absolute;
  102.     bottom: 16px;
  103.     left: 0;
  104. }

  106. div.icon div.upArrow:after {
  107.     content: '';
  108.     width: 12px;
  109.     height: 16px;
  110.     background-color: #333;
  111.     position: absolute;
  112.     top: 16px;
  113.     right: -6px;
  114. }

  116. /* Left Arrow */
  117. div.icon div.leftArrow {
  118.     height: 0px;
  119.     width: 0px;
  120.     border-width: 16px;
  121.     border-style: solid;
  122.     border-color: transparent #333 transparent transparent;
  123.     position: absolute;
  124.     right: 16px;
  125.     top: 0;
  126. }

  128. div.icon div.leftArrow:after {
  129.     content: '';
  130.     width: 16px;
  131.     height: 12px;
  132.     background-color: #333;
  133.     position: absolute;
  134.     top: -6px;
  135.     left: 16px;
  136. }

  138. /* Right Arrow */
  139. div.icon div.rightArrow {
  140.     height: 0px;
  141.     width: 0px;
  142.     border-width: 16px;
  143.     border-style: solid;
  144.     border-color: transparent transparent transparent #333;
  145.     position: absolute;
  146.     left: 16px;
  147.     top: 0;
  148. }

  150. div.icon div.rightArrow:after {
  151.     content: '';
  152.     width: 16px;
  153.     height: 12px;
  154.     background-color: #333;
  155.     position: absolute;
  156.     top: -6px;
  157.     right: 16px;
  158. }

  160. /* Home */
  161. div.icon div.home {
  162.     height: 0px;
  163.     width: 0px;
  164.     border-width: 16px;
  165.     border-style: solid;
  166.     border-color: transparent transparent #333 transparent;
  167.     position: absolute;
  168.     bottom: 16px;
  169.     left: 0;
  170. }

  172. div.icon div.home:after {
  173.     content: '';
  174.     width: 5px;
  175.     height: 16px;
  176.     background-color: transparent;
  177.     position: absolute;
  178.     top: 16px;
  179.     right: -11px;
  180.     border-left: 8px solid #333;
  181.     border-right: 8px solid #333;
  182. }

  184. div.icon div.home:before {
  185.     content: '';
  186.     width: 9px;
  187.     height: 6px;
  188.     background-color: #333;
  189.     position: absolute;
  190.     top: 16px;
  191.     right: -5px;
  192. }

  194. div.icon div.chimney {
  195.     width: 4px;
  196.     height: 10px;
  197.     background: #333;
  198.     position: absolute;
  199.     right: 6px;
  200.     top: 3px;
  201. }

  203. /* Disc */
  204. div.icon div.disc:after {
  205.     content: '';
  206.     width: 6px;
  207.     height: 6px;
  208.     background: transparent;
  209.     border-radius: 50px;
  210.     -webkit-border-radius: 50px;
  211.     -moz-border-radius: 50px;
  212.     border: 3px solid #333;
  213.     position: absolute;
  214.     left: -3px;
  215.     top: -3px;
  216. }

  218. div.icon div.disc:before {
  219.     content: '';
  220.     width: 6px;
  221.     height: 6px;
  222.     background: transparent;
  223.     border-radius: 50px;
  224.     -webkit-border-radius: 50px;
  225.     -moz-border-radius: 50px;
  226.     border: 13px solid #333;
  227.     position: absolute;
  228.     left: -13px;
  229.     top: -13px;
  230.     z-index: -1
  231. }

  233. div.icon div.disc {
  234.     width: 6px;
  235.     height: 6px;
  236.     background: transparent;
  237.     border-radius: 50px;
  238.     -moz-border-radius: 50px;
  239.     -webkit-border-radius: 50px;
  240.     border: 10px solid #eee;
  241.     position: absolute;
  242.     left: 3px;
  243.     top: 3px;
  244. }

  246. /* Heart */
  247. div.icon div.heart {
  248.     height: 26px;
  249.     width: 16px;
  250.     background: #333;
  251.     -webkit-border-radius: 100px 100px 0 0;
  252.     -moz-border-radius: 100px 100px 0 0;
  253.     border-radius: 100px 100px 0 0;
  254.     -webkit-transform: rotate(-45deg);
  255.     -moz-transform: rotate(-45deg);
  256.     -ms-transform: rotate(-45deg);
  257.     -o-transform: rotate(-45deg);
  258.     transform: rotate(-45deg);
  259.     position: absolute;
  260.     left: 5px;
  261.     top: 2px;
  262. }

  264. div.icon div.heart:after {
  265.     content: '';
  266.     height: 26px;
  267.     width: 16px;
  268.     background: #333;
  269.     -webkit-border-radius: 100px 100px 0 0;
  270.     -moz-border-radius: 100px 100px 0 0;
  271.     border-radius: 100px 100px 0 0;
  272.     -webkit-transform: rotate(90deg);
  273.     -moz-transform: rotate(90deg);
  274.     -ms-transform: rotate(90deg);
  275.     -o-transform: rotate(90deg);
  276.     transform: rotate(90deg);
  277.     position: absolute;
  278.     right: -5px;
  279.     bottom: -5px;
  280. }

  282. /* Pencil */
  283. div.icon div.pencil {
  284.     height: 23px;
  285.     width: 6px;
  286.     background: #333;
  287.     -webkit-transform: rotate(45deg);
  288.     -moz-transform: rotate(45deg);
  289.     -ms-transform: rotate(45deg);
  290.     -o-transform: rotate(45deg);
  291.     transform: rotate(45deg);
  292.     position: absolute;
  293.     left: 12px;
  294.     top: 6px;
  295. }

  297. div.icon div.pencil:after {
  298.     content: '';
  299.     height: 4px;
  300.     width: 6px;
  301.     background: #333;
  302.     -webkit-border-radius: 2px 2px 0 0;
  303.     -moz-border-radius: 2px 2px 0 0;
  304.     border-radius: 2px 2px 0 0;
  305.     position: absolute;
  306.     top: -5px;
  307.     left: 0px;
  308. }

  310. div.icon div.pencil:before {
  311.     content: '';
  312.     width: 0px;
  313.     height: 0px;
  314.     border-width: 5px 3px 0 3px;
  315.     border-style: solid;
  316.     border-color: #333 transparent transparent transparent;
  317.     position: absolute;
  318.     bottom: -6px;
  319. }

  321. /* Chat Box */
  322. div.icon div.chat {
  323.     width: 32px;
  324.     height: 22px;
  325.     background: #333;
  326.     border-radius: 4px;
  327.     -webkit-border-radius: 4px;
  328.     -moz-border-radius: 4px;
  329. }

  331. div.icon div.chat:after {
  332.     content: '';
  333.     width: 0px;
  334.     height: 0px;
  335.     border-style: solid;
  336.     border-color: #333 transparent transparent transparent;
  337.     border-width: 5px;
  338.     position: absolute;
  339.     top: 16px;
  340.     left: 2px;
  341.     -webkit-transform: rotate(135deg);
  342.     -moz-transform: rotate(135deg);
  343.     -ms-transform: rotate(135deg);
  344.     -o-transform: rotate(135deg);
  345.     transform: rotate(135deg);
  346. }

  348. div.icon div.lines {
  349.     background-color: #eee;
  350.     height: 2px;
  351.     width: 17px;
  352.     left: 5px;
  353.     position: absolute;
  354.     top: 5px;
  355. }

  357. div.icon div.lines:after {
  358.     content: '';
  359.     background-color: #eee;
  360.     height: 2px;
  361.     width: 10px;
  362.     position: absolute;
  363.     top: 5px;
  364. }

  366. div.icon div.lines:before {
  367.     content: '';
  368.     background-color: #eee;
  369.     height: 2px;
  370.     width: 22px;
  371.     position: absolute;
  372.     top: 10px;
  373. }

  375. /* Tick */
  376. div.icon div.tick {
  377.     width: 25px;
  378.     height: 4px;
  379.     background: #333;
  380.     margin: 13px 0 0 6px;
  381.     -webkit-transform: rotate(-45deg);
  382.     -moz-transform: rotate(-45deg);
  383.     -ms-transform: rotate(-45deg);
  384.     -o-transform: rotate(-45deg);
  385.     transform: rotate(-45deg);
  386. }

  388. div.icon div.tick:after {
  389.     content: '';
  390.     width: 12px;
  391.     height: 4px;
  392.     background: #333;
  393.     position: absolute;
  394.     top: -4px;
  395.     left: -4px;
  396.     -webkit-transform: rotate(90deg);
  397.     -moz-transform: rotate(90deg);
  398.     -ms-transform: rotate(90deg);
  399.     -o-transform: rotate(90deg);
  400.     transform: rotate(90deg);
  401. }

  403. /* Cross */
  404. div.icon div.cross {
  405.     width: 25px;
  406.     height: 4px;
  407.     background: #333;
  408.     margin: 15px 0 0 4px;
  409.     -webkit-transform: rotate(-45deg);
  410.     -moz-transform: rotate(-45deg);
  411.     -ms-transform: rotate(-45deg);
  412.     -o-transform: rotate(-45deg);
  413.     transform: rotate(-45deg);
  414. }

  416. div.icon div.cross:after {
  417.     content: '';
  418.     width: 25px;
  419.     height: 4px;
  420.     background: #333;
  421.     position: absolute;
  422.     top: 0px;
  423.     left: 0px;
  424.     -webkit-transform: rotate(90deg);
  425.     -moz-transform: rotate(90deg);
  426.     -ms-transform: rotate(90deg);
  427.     -o-transform: rotate(90deg);
  428.     transform: rotate(90deg);
  429. }

  431. /* User */
  432. div.icon div.user {
  433.     width: 12px;
  434.     height: 13px;
  435.     background: #333;
  436.     border-radius: 5px 5px 0 0;
  437.     margin-left: 10px;
  438.     margin-top: 2px;
  439. }

  441. div.icon div.user:after {
  442.     content: '';
  443.     width: 8px;
  444.     height: 5px;
  445.     background: #333;
  446.     position: absolute;
  447.     margin-top: 13px;
  448.     margin-left: 2px;
  449. }

  451. div.icon div.user:before {
  452.     content: '';
  453.     width: 0px;
  454.     height: 0px;
  455.     position: absolute;
  456.     top: 17px;
  457.     left: 0px;
  458.     border-style: solid;
  459.     border-color: transparent transparent #333 transparent;
  460.     border-width: 0 16px 6px 16px;
  461. }

  463. div.icon div.shoulder {
  464.     width: 32px;
  465.     height: 5px;
  466.     background: #333;
  467.     position: absolute;
  468.     bottom: 4px;
  469. }

  471. /* Search */
  472. div.icon div.search {
  473.     height: 13px;
  474.     width: 13px;
  475.     background: transparent;
  476.     border-radius: 50px;
  477.     -moz-border-radius: 50px;
  478.     -webkit-border-radius: 50px;
  479.     border: 4px solid #333;
  480. }

  482. div.icon div.search:after {
  483.     content: '';
  484.     width: 4px;
  485.     height: 15px;
  486.     background: #333;
  487.     position: absolute;
  488.     bottom: 2px;
  489.     -webkit-transform: rotate(-45deg);
  490.     -moz-transform: rotate(-45deg);
  491.     -ms-transform: rotate(-45deg);
  492.     -o-transform: rotate(-45deg);
  493.     transform: rotate(-45deg);
  494.     right: 8px;
  495. }

  497. /* Search */
  498. div.icon div.searchB {
  499.     width: 32px;
  500.     height: 32px;
  501.     background-color: #333;
  502.     border-radius: 8px;
  503.     -moz-border-radius: 8px;
  504.     -webkit-border-radius: 8px;
  505. }

  507. div.icon div.searchB:before {
  508.     position: absolute;
  509.     content: '';
  510.     height: 6px;
  511.     width: 6px;
  512.     background: transparent;
  513.     border-radius: 50px;
  514.     -moz-border-radius: 50px;
  515.     -webkit-border-radius: 50px;
  516.     border: 3px solid #eee;
  517.     margin: 7px
  518. }

  520. div.icon div.searchB:after {
  521.     content: '';
  522.     width: 3px;
  523.     height: 11px;
  524.     background: #eee;
  525.     position: absolute;
  526.     bottom: 6px;
  527.     -webkit-transform: rotate(-45deg);
  528.     -moz-transform: rotate(-45deg);
  529.     -ms-transform: rotate(-45deg);
  530.     -o-transform: rotate(-45deg);
  531.     transform: rotate(-45deg);
  532.     right: 10px;
  533. }

  535. /* Phone */
  536. div.icon div.phone {
  537.     position: absolute;
  538.     width: 20px;
  539.     height: 32px;
  540.     background-color: #333;
  541.     -webkit-border-radius: 2px;
  542.     -moz-border-radius: 2px;
  543.     border-radius: 2px;
  544.     margin-left: 6px;
  545. }

  547. div.icon div.phone:before {
  548.     position: absolute;
  549.     content: '';
  550.     width: 16px;
  551.     height: 20px;
  552.     background: #eee;
  553.     left: 2px;
  554.     top: 5px;
  555. }

  557. div.icon div.phone:after {
  558.     position: absolute;
  559.     content: '';
  560.     background: #eee;
  561.     width: 3px;
  562.     height: 3px;
  563.     -webkit-border-radius: 50px;
  564.     -moz-border-radius: 50px;
  565.     border-radius: 50px;
  566.     bottom: 2px;
  567.     left: 8px;
  568. }

  570. /* iPod */
  571. div.icon div.ipod {
  572.     width: 18px;
  573.     height: 32px;
  574.     background: #333;
  575.     -webkit-border-radius: 2px;
  576.     -moz-border-radius: 2px;
  577.     border-radius: 2px;
  578.     position: absolute;
  579.     left: 7px;
  580. }

  582. div.icon div.ipod:after {
  583.     content: '';
  584.     position: absolute;
  585.     width: 14px;
  586.     height: 12px;
  587.     background: #ddd;
  588.     left: 2px;
  589.     top: 2px;
  590.     -webkit-border-radius: 1px;
  591.     -moz-border-radius: 1px;
  592.     border-radius: 1px;
  593. }

  595. div.icon div.ipod:before {
  596.     content: '';
  597.     position: absolute;
  598.     width: 6px;
  599.     height: 6px;
  600.     border: 3px solid #ddd;
  601.     left: 3px;
  602.     bottom: 3px;
  603.     -webkit-border-radius: 100px;
  604.     -moz-border-radius: 100px;
  605.     border-radius: 100px;
  606. }

  608. /* Tab */
  609. div.icon div.tab {
  610.     position: absolute;
  611.     width: 28px;
  612.     height: 32px;
  613.     background-color: #333;
  614.     -webkit-border-radius: 2px;
  615.     -moz-border-radius: 2px;
  616.     border-radius: 2px;
  617.     left: 2px;
  618. }

  620. div.icon div.tab:before {
  621.     position: absolute;
  622.     content: '';
  623.     width: 24px;
  624.     height: 23px;
  625.     background: #eee;
  626.     left: 2px;
  627.     top: 2px;
  628. }

  630. div.icon div.tab:after {
  631.     position: absolute;
  632.     content: '';
  633.     background: #eee;
  634.     width: 3px;
  635.     height: 3px;
  636.     -webkit-border-radius: 50px;
  637.     -moz-border-radius: 50px;
  638.     border-radius: 50px;
  639.     bottom: 2px;
  640.     left: 12px;
  641. }

  643. /* Graph 1 */
  644. div.icon div.graph1 {
  645.     width: 28px;
  646.     height: 28px;
  647.     border-radius: 0 0 0 5px;
  648.     -moz-border-radius: 0 0 0 5px;
  649.     -webkit-border-radius: 0 0 0 5px;
  650.     border: solid #333;
  651.     border-width: 0 0 3px 3px;
  652. }

  654. div.icon div.bars {
  655.     width: 5px;
  656.     height: 10px;
  657.     background: #333;
  658.     position: absolute;
  659.     bottom: 5px;
  660.     right: 3px;
  661. }

  663. div.icon div.bars:before {
  664.     position: absolute;
  665.     content: '';
  666.     width: 5px;
  667.     height: 25px;
  668.     background: #333;
  669.     position: absolute;
  670.     right: 6px;
  671.     bottom: 0px;
  672. }

  674. div.icon div.bars:after {
  675.     position: absolute;
  676.     content: '';
  677.     width: 5px;
  678.     height: 18px;
  679.     background: #333;
  680.     position: absolute;
  681.     bottom: 0px;
  682.     right: 12px;
  683. }

  685. /* Screen */
  686. div.icon div.screen {
  687.     width: 28px;
  688.     height: 24px;
  689.     border: 2px solid #333;
  690.     background: #eee;
  691. }

  693. div.icon div.screen:before {
  694.     position: absolute;
  695.     content: '';
  696.     width: 10px;
  697.     height: 3px;
  698.     background: #333;
  699.     bottom: 2px;
  700.     left: 11px
  701. }

  703. div.icon div.screen:after {
  704.     position: absolute;
  705.     content: '';
  706.     width: 22px;
  707.     height: 2px;
  708.     background: #333;
  709.     bottom: 0;
  710.     left: 5px;
  711. }

  713. /* Cloud */
  714. div.icon div.cloud {
  715.     width: 32px;
  716.     height: 12px;
  717.     -webkit-border-radius: 10px;
  718.     -moz-border-radius: 10px;
  719.     border-radius: 10px;
  720.     background: #333;
  721.     margin-top: 14px;
  722. }

  724. div.icon div.cloud:before {
  725.     position: absolute;
  726.     content: '';
  727.     width: 15px;
  728.     height: 15px;
  729.     -webkit-border-radius: 20px;
  730.     -moz-border-radius: 20px;
  731.     border-radius: 20px;
  732.     background: #333;
  733.     top: 7px;
  734.     right: 5px;
  735. }

  737. div.icon div.cloud:after {
  738.     position: absolute;
  739.     content: '';
  740.     width: 10px;
  741.     height: 10px;
  742.     -webkit-border-radius: 20px;
  743.     -moz-border-radius: 20px;
  744.     border-radius: 20px;
  745.     background: #333;
  746.     top: 9px;
  747.     left: 4px;
  748. }

  750. /* Cloud-Up */
  751. div.icon div.cloudUp {
  752.     width: 32px;
  753.     height: 12px;
  754.     -webkit-border-radius: 10px;
  755.     -moz-border-radius: 10px;
  756.     border-radius: 10px;
  757.     background: #333;
  758.     margin-top: 14px;
  759. }

  761. div.icon div.cloudUp:before {
  762.     position: absolute;
  763.     content: '';
  764.     width: 15px;
  765.     height: 15px;
  766.     -webkit-border-radius: 20px;
  767.     -moz-border-radius: 20px;
  768.     border-radius: 20px;
  769.     background: #333;
  770.     top: 7px;
  771.     right: 5px;
  772. }

  774. div.icon div.cloudUp:after {
  775.     position: absolute;
  776.     content: '';
  777.     width: 10px;
  778.     height: 10px;
  779.     -webkit-border-radius: 20px;
  780.     -moz-border-radius: 20px;
  781.     border-radius: 20px;
  782.     background: #333;
  783.     top: 9px;
  784.     left: 4px;
  785. }

  787. div.icon div.cloudUpArrow {
  788.     height: 0px;
  789.     width: 0px;
  790.     border-width: 5px;
  791.     border-style: solid;
  792.     border-color: transparent transparent #ddd transparent;
  793.     position: absolute;
  794.     bottom: 12px;
  795.     left: 11px;
  796. }

  798. div.icon div.cloudUpArrow:after {
  799.     content: '';
  800.     width: 3px;
  801.     height: 5px;
  802.     background-color: #ddd;
  803.     position: absolute;
  804.     top: 4px;
  805.     right: -2px;
  806. }

  808. /* Cloud-Down */
  809. div.icon div.cloudDown {
  810.     width: 32px;
  811.     height: 12px;
  812.     -webkit-border-radius: 10px;
  813.     -moz-border-radius: 10px;
  814.     border-radius: 10px;
  815.     background: #333;
  816.     margin-top: 14px;
  817. }

  819. div.icon div.cloudDown:before {
  820.     position: absolute;
  821.     content: '';
  822.     width: 15px;
  823.     height: 15px;
  824.     -webkit-border-radius: 20px;
  825.     -moz-border-radius: 20px;
  826.     border-radius: 20px;
  827.     background: #333;
  828.     top: 7px;
  829.     right: 5px;
  830. }

  832. div.icon div.cloudDown:after {
  833.     position: absolute;
  834.     content: '';
  835.     width: 10px;
  836.     height: 10px;
  837.     -webkit-border-radius: 20px;
  838.     -moz-border-radius: 20px;
  839.     border-radius: 20px;
  840.     background: #333;
  841.     top: 9px;
  842.     left: 4px;
  843. }

  845. div.icon div.cloudDownArrow {
  846.     height: 0px;
  847.     width: 0px;
  848.     border-width: 5px;
  849.     border-style: solid;
  850.     border-color: #ddd transparent transparent transparent;
  851.     position: absolute;
  852.     bottom: 3px;
  853.     left: 11px;
  854. }

  856. div.icon div.cloudDownArrow:after {
  857.     content: '';
  858.     width: 3px;
  859.     height: 5px;
  860.     background-color: #ddd;
  861.     position: absolute;
  862.     bottom: 4px;
  863.     right: -2px;
  864. }

  866. /* Page */
  867. div.icon div.page {
  868.     width: 20px;
  869.     height: 28px;
  870.     background: #eee;
  871.     margin-left: 4px;
  872.     border: 2px solid #333;
  873. }

  875. div.icon div.page:before {
  876.     position: absolute;
  877.     content: '';
  878.     height: 2px;
  879.     width: 16px;
  880.     background: #333;
  881.     margin: 5px 2px 0 2px;
  882. }

  884. div.icon div.page:after {
  885.     position: absolute;
  886.     content: '';
  887.     height: 2px;
  888.     width: 16px;
  889.     background: #333;
  890.     margin: 9px 2px 0 2px;
  891. }

  893. div.icon div.pageLines {
  894.     height: 2px;
  895.     width: 16px;
  896.     position: absolute;
  897.     left: 8px;
  898.     top: 15px;
  899.     background: #333;
  900. }

  902. div.icon div.pageLines:after {
  903.     position: absolute;
  904.     content: '';
  905.     height: 2px;
  906.     width: 16px;
  907.     background: #333;
  908.     margin: 4px 0 0 0;
  909. }

  911. div.icon div.pageLines:before {
  912.     position: absolute;
  913.     content: '';
  914.     height: 2px;
  915.     width: 16px;
  916.     background: #333;
  917.     margin: 8px 0 0 0;
  918. }

  920. /* RSS */
  921. div.icon div.rss {
  922.     width: 6px;
  923.     height: 6px;
  924.     border-radius: 8px;
  925.     -moz-border-radius: 8px;
  926.     -webkit-border-radius: 8px;
  927.     background: #333;
  928.     position: absolute;
  929.     bottom: 2px;
  930.     left: 2px;
  931. }

  933. div.icon div.rss:after {
  934.     content: '';
  935.     position: absolute;
  936.     width: 13px;
  937.     height: 13px;
  938.     border-radius: 0 60px 0 0;
  939.     -moz-border-radius: 0 60px 0 0;
  940.     -webkit-border-radius: 0 60px 0 0;
  941.     border-style: double;
  942.     border-width: 15px 15px 0 0;
  943.     border-color: #333;
  944.     top: -22px;
  945.     left: 0;
  946. }

  948. /* Battery Full */
  949. div.icon div.batFull {
  950.     width: 23px;
  951.     height: 11px;
  952.     margin-top: 7px;
  953.     border: 3px solid #333;
  954. }

  956. div.icon div.batFull:after {
  957.     content: '';
  958.     position: absolute;
  959.     height: 7px;
  960.     width: 2px;
  961.     background: #333;
  962.     right: 1px;
  963.     top: 5px;
  964.     margin-top: 7px;
  965. }

  967. div.icon div.batFull:before {
  968.     content: '';
  969.     position: absolute;
  970.     height: 9px;
  971.     width: 21px;
  972.     background: #333;
  973.     left: 4px;
  974.     top: 4px;
  975.     margin-top: 7px;
  976. }

  978. /* Battery Medium */
  979. div.icon div.batMed {
  980.     width: 23px;
  981.     height: 11px;
  982.     margin-top: 7px;
  983.     border: 3px solid #333;
  984. }

  986. div.icon div.batMed:after {
  987.     content: '';
  988.     position: absolute;
  989.     height: 7px;
  990.     width: 2px;
  991.     background: #333;
  992.     right: 1px;
  993.     top: 5px;
  994.     margin-top: 7px;
  995. }

  997. div.icon div.batMed:before {
  998.     content: '';
  999.     position: absolute;
  1000.     height: 9px;
  1001.     width: 10px;
  1002.     background: #333;
  1003.     left: 4px;
  1004.     top: 4px;
  1005.     margin-top: 7px;
  1006. }

  1008. /* Battery Low */
  1009. div.icon div.batLow {
  1010.     width: 23px;
  1011.     height: 11px;
  1012.     margin-top: 7px;
  1013.     border: 3px solid #333;
  1014. }

  1016. div.icon div.batLow:after {
  1017.     content: '';
  1018.     position: absolute;
  1019.     height: 7px;
  1020.     width: 2px;
  1021.     background: #333;
  1022.     right: 1px;
  1023.     top: 5px;
  1024.     margin-top: 7px;
  1025. }

  1027. div.icon div.batLow:before {
  1028.     content: '';
  1029.     position: absolute;
  1030.     height: 9px;
  1031.     width: 3px;
  1032.     background: #333;
  1033.     left: 4px;
  1034.     top: 4px;
  1035.     margin-top: 7px;
  1036. }

  1038. /* Battery Empty */
  1039. div.icon div.batEmpty {
  1040.     width: 23px;
  1041.     height: 11px;
  1042.     margin-top: 7px;
  1043.     border: 3px solid #333;
  1044. }

  1046. div.icon div.batEmpty:after {
  1047.     content: '';
  1048.     position: absolute;
  1049.     height: 7px;
  1050.     width: 2px;
  1051.     background: #333;
  1052.     right: 1px;
  1053.     top: 5px;
  1054.     margin-top: 7px;
  1055. }

  1057. /* Speaker Volume Full */
  1058. div.icon div.speakerVolF {
  1059.     width: 10px;
  1060.     height: 10px;
  1061.     background: #333;
  1062.     margin: 12px 0 0 2px;
  1063. }

  1065. div.icon div.speakerVolF:after {
  1066.     content: '';
  1067.     position: absolute;
  1068.     width: 0;
  1069.     height: 0;
  1070.     border-style: solid;
  1071.     border-color: transparent #333 transparent transparent;
  1072.     border-width: 12px 16px 12px 15px;
  1073.     left: -13px;
  1074.     top: 5px;
  1075. }

  1077. div.icon div.speakerVolF:before {
  1078.     content: '';
  1079.     position: absolute;
  1080.     width: 5px;
  1081.     height: 5px;
  1082.     border-style: double;
  1083.     border-color: #333;
  1084.     border-width: 8px 8px 0 0;
  1085.     -webkit-border-radius: 0 50px 0 0;
  1086.     -moz-border-radius: 0 50px 0 0;
  1087.     border-radius: 0 50px 0 0;
  1088.     -webkit-transform: rotate(45deg);
  1089.     -moz-transform: rotate(45deg);
  1090.     -ms-transform: rotate(45deg);
  1091.     -o-transform: rotate(45deg);
  1092.     transform: rotate(45deg);
  1093.     left: 19px;
  1094.     top: 11px;
  1095. }

  1097. /* Speaker Volume Half */
  1098. div.icon div.speakerVolH {
  1099.     width: 10px;
  1100.     height: 10px;
  1101.     background: #333;
  1102.     margin: 12px 0 0 4px;
  1103. }

  1105. div.icon div.speakerVolH:after {
  1106.     content: '';
  1107.     position: absolute;
  1108.     width: 0;
  1109.     height: 0;
  1110.     border-style: solid;
  1111.     border-color: transparent #333 transparent transparent;
  1112.     border-width: 12px 16px 12px 15px;
  1113.     left: -11px;
  1114.     top: 5px;
  1115. }

  1117. div.icon div.speakerVolH:before {
  1118.     content: '';
  1119.     position: absolute;
  1120.     width: 5px;
  1121.     height: 5px;
  1122.     border-style: solid;
  1123.     border-color: #333;
  1124.     border-width: 3px 3px 0 0;
  1125.     -webkit-border-radius: 0 50px 0 0;
  1126.     -moz-border-radius: 0 50px 0 0;
  1127.     border-radius: 0 50px 0 0;
  1128.     -webkit-transform: rotate(45deg);
  1129.     -moz-transform: rotate(45deg);
  1130.     -ms-transform: rotate(45deg);
  1131.     -o-transform: rotate(45deg);
  1132.     transform: rotate(45deg);
  1133.     left: 21px;
  1134.     top: 13px;
  1135. }

  1137. /* Speaker Volume Mute */
  1138. div.icon div.speakerVolM {
  1139.     width: 10px;
  1140.     height: 10px;
  1141.     background: #333;
  1142.     margin: 12px 0 0 7px;
  1143. }

  1145. div.icon div.speakerVolM:after {
  1146.     content: '';
  1147.     position: absolute;
  1148.     width: 0;
  1149.     height: 0;
  1150.     border-style: solid;
  1151.     border-color: transparent #333 transparent transparent;
  1152.     border-width: 12px 16px 12px 15px;
  1153.     left: -8px;
  1154.     top: 5px;
  1155. }

  1157. /* Play */
  1158. div.icon div.play {
  1159.     width: 0;
  1160.     height: 0;
  1161.     border-style: solid;
  1162.     border-color: transparent transparent transparent #333;
  1163.     border-width: 8px 8px 8px 12px;
  1164.     margin: 8px 0 0 11px;
  1165. }

  1167. /* Pause */
  1168. div.icon div.pause {
  1169.     width: 2px;
  1170.     height: 16px;
  1171.     border: 4px solid #333;
  1172.     border-top: none;
  1173.     border-bottom: none;
  1174.     margin: 8px 0 0 11px;
  1175. }

  1177. /* Forward */
  1178. div.icon div.forward {
  1179.     width: 0;
  1180.     height: 0;
  1181.     border-style: solid;
  1182.     border-color: transparent transparent transparent #333;
  1183.     border-width: 8px 8px 8px 12px;
  1184.     margin: 8px 0 0 5px;
  1185. }

  1187. div.icon div.forward:after {
  1188.     content: '';
  1189.     position: absolute;
  1190.     width: 0;
  1191.     height: 0;
  1192.     border-style: solid;
  1193.     border-color: transparent transparent transparent #333;
  1194.     border-width: 8px 8px 8px 12px;
  1195.     margin: 8px 0 0 17px;
  1196.     left: 0;
  1197.     top: 0
  1198. }

  1200. /* Next */
  1201. div.icon div.next {
  1202.     width: 0;
  1203.     height: 0;
  1204.     border-style: solid;
  1205.     border-color: transparent transparent transparent #333;
  1206.     border-width: 8px 8px 8px 12px;
  1207.     margin: 8px 0 0 2px;
  1208. }

  1210. div.icon div.next:after {
  1211.     content: '';
  1212.     position: absolute;
  1213.     width: 0px;
  1214.     height: 0;
  1215.     border-style: solid;
  1216.     border-color: transparent transparent transparent #333;
  1217.     border-width: 8px 8px 8px 12px;
  1218.     margin: 8px 0 0 14px;
  1219.     left: 0;
  1220.     top: 0
  1221. }

  1223. div.icon div.next:before {
  1224.     content: '';
  1225.     position: absolute;
  1226.     background: #333;
  1227.     width: 4px;
  1228.     height: 16px;
  1229.     left: 0;
  1230.     top: 0;
  1231.     margin: 8px 0 0 26px;
  1232. }

  1234. /* Rewind */
  1235. div.icon div.rewind {
  1236.     width: 0;
  1237.     height: 0;
  1238.     border-style: solid;
  1239.     border-color: transparent #333 transparent transparent;
  1240.     border-width: 8px 12px 8px 8px;
  1241.     margin: 8px 0 0 -5px;
  1242. }

  1244. div.icon div.rewind:after {
  1245.     content: '';
  1246.     position: absolute;
  1247.     width: 0px;
  1248.     height: 0;
  1249.     border-style: solid;
  1250.     border-color: transparent #333 transparent transparent;
  1251.     border-width: 8px 12px 8px 8px;
  1252.     margin: 8px 0 0 7px;
  1253.     left: 0;
  1254.     top: 0
  1255. }

  1257. /* Previous */
  1258. div.icon div.previous {
  1259.     width: 0;
  1260.     height: 0;
  1261.     border-style: solid;
  1262.     border-color: transparent #333 transparent transparent;
  1263.     border-width: 8px 12px 8px 8px;
  1264.     margin: 8px 0 0 -2px;
  1265. }

  1267. div.icon div.previous:after {
  1268.     content: '';
  1269.     position: absolute;
  1270.     width: 0px;
  1271.     height: 0;
  1272.     border-style: solid;
  1273.     border-color: transparent #333 transparent transparent;
  1274.     border-width: 8px 12px 8px 8px;
  1275.     margin: 8px 0 0 10px;
  1276.     left: 0;
  1277.     top: 0
  1278. }

  1280. div.icon div.previous:before {
  1281.     content: '';
  1282.     position: absolute;
  1283.     background: #333;
  1284.     width: 4px;
  1285.     height: 16px;
  1286.     left: 0;
  1287.     top: 0;
  1288.     margin: 8px 0 0 2px;
  1289. }

  1291. /* Stop */
  1292. div.icon div.stop {
  1293.     width: 16px;
  1294.     height: 16px;
  1295.     margin: 8px 0 0 8px;
  1296.     background: #333;
  1297. }

  1299. /* Location */
  1300. div.icon div.location {
  1301.     width: 0px;
  1302.     height: 0px;
  1303.     border-style: solid;
  1304.     border-color: #333 transparent transparent transparent;
  1305.     border-width: 16px 8px 8px 8px;
  1306.     margin: 15px 0 0 8px;
  1307. }

  1309. div.icon div.location:after {
  1310.     content: '';
  1311.     position: absolute;
  1312.     width: 18px;
  1313.     height: 18px;
  1314.     border-radius: 50px;
  1315.     -moz-border-radius: 50px;
  1316.     -webkit-border-radius: 50px;
  1317.     background: #333;
  1318.     left: 7px;
  1319.     top: 2px;
  1320. }

  1322. div.icon div.location:before {
  1323.     content: '';
  1324.     position: absolute;
  1325.     width: 8px;
  1326.     height: 8px;
  1327.     border-radius: 50px;
  1328.     -moz-border-radius: 50px;
  1329.     -webkit-border-radius: 50px;
  1330.     background: #ddd;
  1331.     left: 12px;
  1332.     top: 7px;
  1333.     z-index: 2;
  1334. }

  1336. /* Clock */
  1337. div.icon div.clock {
  1338.     width: 4px;
  1339.     height: 6px;
  1340.     border: solid #333;
  1341.     border-width: 0 0 3px 3px;
  1342.     margin: 9px 0 0 14px
  1343. }

  1345. div.icon div.clock:after {
  1346.     content: '';
  1347.     position: absolute;
  1348.     width: 18px;
  1349.     height: 18px;
  1350.     border: 4px solid #333;
  1351.     border-radius: 50px;
  1352.     top: 3px;
  1353.     left: 3px;
  1354. }

  1356. /* Clock Alt */
  1357. div.icon div.clockAlt {
  1358.     width: 18px;
  1359.     height: 18px;
  1360.     border: 4px solid #333;
  1361.     border-radius: 50px;
  1362.     margin-top: 3px;
  1363.     margin-left: 3px;
  1364. }

  1366. div.icon div.clockAlt:after {
  1367.     content: '';
  1368.     position: absolute;
  1369.     width: 4px;
  1370.     height: 5px;
  1371.     border: solid #ddd;
  1372.     border-width: 0 0 2px 2px;
  1373.     top: 11px;
  1374.     left: 15px;
  1375. }

  1377. div.icon div.clockAlt:before {
  1378.     content: '';
  1379.     position: absolute;
  1380.     width: 16px;
  1381.     height: 16px;
  1382.     background: #333;
  1383.     border-radius: 50px;
  1384.     left: 8px;
  1385.     top: 8px;
  1386. }

  1388. /* Pointer Right */
  1389. div.icon div.pointerRight {
  1390.     width: 10px;
  1391.     height: 10px;
  1392.     border: solid #333;
  1393.     border-width: 6px 6px 0 0;
  1394.     -webkit-transform: rotate(45deg);
  1395.     -moz-transform: rotate(45deg);
  1396.     -ms-transform: rotate(45deg);
  1397.     -o-transform: rotate(45deg);
  1398.     transform: rotate(45deg);
  1399.     margin: 8px 0 0 5px;
  1400. }

  1402. /* Pointer Top */
  1403. div.icon div.pointerTop {
  1404.     width: 10px;
  1405.     height: 10px;
  1406.     border: solid #333;
  1407.     border-width: 6px 6px 0 0;
  1408.     -webkit-transform: rotate(-45deg);
  1409.     -moz-transform: rotate(-45deg);
  1410.     -ms-transform: rotate(-45deg);
  1411.     -o-transform: rotate(-45deg);
  1412.     transform: rotate(-45deg);
  1413.     margin: 10px 0 0 8px;
  1414. }

  1416. /* Pointer Left */
  1417. div.icon div.pointerLeft {
  1418.     width: 10px;
  1419.     height: 10px;
  1420.     border: solid #333;
  1421.     border-width: 6px 6px 0 0;
  1422.     -webkit-transform: rotate(-135deg);
  1423.     -moz-transform: rotate(-135deg);
  1424.     -ms-transform: rotate(-135deg);
  1425.     -o-transform: rotate(-135deg);
  1426.     transform: rotate(-135deg);
  1427.     margin: 8px 0 0 5px;
  1428. }

  1430. /* Pointer Down */
  1431. div.icon div.pointerDown {
  1432.     width: 10px;
  1433.     height: 10px;
  1434.     border: solid #333;
  1435.     border-width: 6px 6px 0 0;
  1436.     -webkit-transform: rotate(135deg);
  1437.     -moz-transform: rotate(135deg);
  1438.     -ms-transform: rotate(135deg);
  1439.     -o-transform: rotate(135deg);
  1440.     transform: rotate(135deg);
  1441.     margin: 5px 0 0 8px;
  1442. }

  1444. /* Signals */
  1445. div.icon div.signal1 {
  1446.     width: 5px;
  1447.     height: 5px;
  1448.     background: #333;
  1449.     position: absolute;
  1450.     bottom: 0;
  1451.     left: 1px
  1452. }

  1454. div.icon div.signal1:after {
  1455.     content: '';
  1456.     position: absolute;
  1457.     width: 5px;
  1458.     height: 9px;
  1459.     background: #333;
  1460.     left: 6px;
  1461.     bottom: 0;
  1462. }

  1464. div.icon div.signal1:before {
  1465.     content: '';
  1466.     position: absolute;
  1467.     width: 5px;
  1468.     height: 14px;
  1469.     background: #333;
  1470.     left: 12px;
  1471.     bottom: 0;
  1472. }

  1474. div.icon div.signal2 {
  1475.     width: 5px;
  1476.     height: 22px;
  1477.     background: #333;
  1478.     position: absolute;
  1479.     bottom: 0;
  1480.     left: 19px
  1481. }

  1483. div.icon div.signal2:after {
  1484.     content: '';
  1485.     position: absolute;
  1486.     width: 5px;
  1487.     height: 32px;
  1488.     background: #333;
  1489.     left: 6px;
  1490.     bottom: 0;
  1491. }

  1493. /* Graph 2 */
  1494. div.icon div.base {
  1495.     width: 5px;
  1496.     height: 8px;
  1497.     background: #333;
  1498.     position: absolute;
  1499.     bottom: 3px;
  1500.     left: 4px
  1501. }

  1503. div.icon div.base:after {
  1504.     content: '';
  1505.     position: absolute;
  1506.     width: 5px;
  1507.     height: 13px;
  1508.     background: #333;
  1509.     left: 6px;
  1510.     bottom: 0;
  1511. }

  1513. div.icon div.base:before {
  1514.     content: '';
  1515.     position: absolute;
  1516.     width: 5px;
  1517.     height: 25px;
  1518.     background: #333;
  1519.     left: 12px;
  1520.     bottom: 0;
  1521. }

  1523. div.icon div.bars2 {
  1524.     width: 5px;
  1525.     height: 18px;
  1526.     background: #333;
  1527.     position: absolute;
  1528.     bottom: 3px;
  1529.     left: 22px
  1530. }

  1532. div.icon div.bars2:after {
  1533.     content: '';
  1534.     position: absolute;
  1535.     width: 32px;
  1536.     height: 2px;
  1537.     background: #333;
  1538.     left: -22px;
  1539.     bottom: 0px;
  1540. }

  1542. /* Ribbon */
  1543. div.icon div.ribbon {
  1544.     width: 12px;
  1545.     height: 20px;
  1546.     background: #333;
  1547.     margin: 2px 0 0 10px
  1548. }

  1550. div.icon div.ribbon:after {
  1551.     content: '';
  1552.     position: absolute;
  1553.     left: 10px;
  1554.     top: 16px;
  1555.     width: 0;
  1556.     height: 0;
  1557.     border: solid #333;
  1558.     border-color: transparent #333 transparent #333;
  1559.     border-width: 6px 6px 8px 6px;
  1560. }

  1562. /* Video Cam */
  1563. div.icon div.videoCam {
  1564.     width: 18px;
  1565.     height: 16px;
  1566.     background: #333;
  1567.     margin: 8px 0 0 3px
  1568. }

  1570. div.icon div.videoCam:after {
  1571.     content: '';
  1572.     position: absolute;
  1573.     left: 14px;
  1574.     top: 10px;
  1575.     width: 0;
  1576.     height: 0;
  1577.     border: solid #333;
  1578.     border-color: transparent #333 transparent transparent;
  1579.     border-width: 6px 8px 6px 6px;
  1580. }

  1582. /* Star */
  1583. div.icon div.star {
  1584.     margin: 13px 0;
  1585.     position: relative;
  1586.     display: block;
  1587.     width: 0px;
  1588.     height: 0px;
  1589.     border-right: 17px solid transparent;
  1590.     border-bottom: 10px solid #333;
  1591.     border-left: 16px solid transparent;
  1592.     -moz-transform: rotate(35deg);
  1593.     -webkit-transform: rotate(35deg);
  1594.     -ms-transform: rotate(35deg);
  1595.     -o-transform: rotate(35deg);
  1596. }

  1598. div.icon div.star:before {
  1599.     border-bottom: 12px solid #333;
  1600.     border-left: 4px solid transparent;
  1601.     border-right: 4px solid transparent;
  1602.     position: absolute;
  1603.     height: 0;
  1604.     width: 0;
  1605.     top: -9px;
  1606.     left: -10px;
  1607.     display: block;
  1608.     content: '';
  1609.     -webkit-transform: rotate(-35deg);
  1610.     -moz-transform: rotate(-35deg);
  1611.     -ms-transform: rotate(-35deg);
  1612.     -o-transform: rotate(-35deg);
  1613. }

  1615. div.icon div.star:after {
  1616.     position: absolute;
  1617.     display: block;
  1618.     top: 0px;
  1619.     left: -17px;
  1620.     width: 0px;
  1621.     height: 0px;
  1622.     border-right: 17px solid transparent;
  1623.     border-bottom: 10px solid #333;
  1624.     border-left: 16px solid transparent;
  1625.     -webkit-transform: rotate(-70deg);
  1626.     -moz-transform: rotate(-70deg);
  1627.     -ms-transform: rotate(-70deg);
  1628.     -o-transform: rotate(-70deg);
  1629.     content: '';
  1630. }

  1632. /* Headphones */
  1633. div.icon div.headphones {
  1634.     width: 26px;
  1635.     border: 3px solid #333;
  1636.     height: 23px;
  1637.     border-radius: 50px 50px 0 0;
  1638.     border-bottom: none;
  1639.     margin: 1px 0 0 0;
  1640. }

  1642. div.icon div.headphones:before {
  1643.     position: absolute;
  1644.     content: '';
  1645.     top: 21px;
  1646.     left: 4px;
  1647.     width: 5px;
  1648.     height: 10px;
  1649.     background: #333;
  1650.     border-radius: 0 2px 2px 0;
  1651. }

  1653. div.icon div.headphones:after {
  1654.     position: absolute;
  1655.     content: '';
  1656.     top: 21px;
  1657.     left: 23px;
  1658.     width: 5px;
  1659.     height: 10px;
  1660.     background: #333;
  1661.     border-radius: 2px 0 0 2px;
  1662. }

  1664. /* Capsule */
  1665. div.icon div.capsule {
  1666.     width: 13px;
  1667.     background: #333;
  1668.     height: 15px;
  1669.     border-radius: 50px 50px 0 0;
  1670.     position: absolute;
  1671.     top: 5px;
  1672.     left: 13px;
  1673.     -webkit-transform: rotate(45deg);
  1674.     -moz-transform: rotate(45deg);
  1675.     -ms-transform: rotate(45deg);
  1676.     -o-transform: rotate(45deg);
  1677. }

  1679. div.icon div.capsule:before {
  1680.     position: absolute;
  1681.     content: '';
  1682.     width: 13px;
  1683.     background: #333;
  1684.     height: 10px;
  1685.     border-radius: 0 0 50px 50px;
  1686.     -webkit-border-radius: 0 0 50px 50px;
  1687.     -moz-border-radius: 0 0 50px 50px;
  1688.     top: 16px;
  1689.     left: 0
  1690. }

  1692. /* Microphone */
  1693. div.icon div.mic {
  1694.     width: 10px;
  1695.     background: #333;
  1696.     height: 10px;
  1697.     border-radius: 50px 50px 0 0;
  1698.     -moz-border-radius: 50px 50px 0 0;
  1699.     -webkit-border-radius: 50px 50px 0 0;
  1700.     position: absolute;
  1701.     top: 2px;
  1702.     left: 11px;
  1703. }

  1705. div.icon div.mic:after {
  1706.     position: absolute;
  1707.     content: '';
  1708.     width: 10px;
  1709.     background: #333;
  1710.     height: 10px;
  1711.     border-radius: 0 0 50px 50px;
  1712.     -webkit-border-radius: 0 0 50px 50px;
  1713.     -moz-border-radius: 0 0 50px 50px;
  1714.     top: 11px;
  1715.     left: 0
  1716. }

  1718. div.icon div.holder {
  1719.     position: absolute;
  1720.     height: 11px;
  1721.     width: 12px;
  1722.     left: 8px;
  1723.     top: 13px;
  1724.     border: 2px solid #333;
  1725.     border-radius: 0 0 50px 50px;
  1726.     -webkit-border-radius: 0 0 50px 50px;
  1727.     -moz-border-radius: 0 0 50px 50px;
  1728.     border-top: none;
  1729. }

  1731. div.icon div.holder:after {
  1732.     content: '';
  1733.     position: absolute;
  1734.     width: 4px;
  1735.     height: 3px;
  1736.     background: #333;
  1737.     top: 13px;
  1738.     left: 4px;
  1739. }

  1741. div.icon div.holder:before {
  1742.     content: '';
  1743.     position: absolute;
  1744.     width: 8px;
  1745.     height: 2px;
  1746.     background: #333;
  1747.     bottom: -6px;
  1748.     left: 2px;
  1749. }

  1751. /* Tower */
  1752. div.icon div.tower {
  1753.     width: 0px;
  1754.     height: 0px;
  1755.     position: absolute;
  1756.     bottom: 1px;
  1757.     left: 13px;
  1758.     border: solid #333;
  1759.     border-color: transparent transparent #333 transparent;
  1760.     border-width: 0px 3px 22px 3px;
  1761. }

  1763. div.icon div.tower:after {
  1764.     position: absolute;
  1765.     content: '';
  1766.     width: 4px;
  1767.     height: 4px;
  1768.     -webkit-border-radius: 50px;
  1769.     -moz-border-radius: 50px;
  1770.     border-radius: 50px;
  1771.     background: #333;
  1772.     left: -2px;
  1773.     top: 0;
  1774. }

  1776. div.icon div.waves {
  1777.     position: absolute;
  1778.     content: '';
  1779.     width: 8px;
  1780.     height: 8px;
  1781.     border-color: #333;
  1782.     border-style: double;
  1783.     border-width: 6px 6px 0 0;
  1784.     -webkit-border-radius: 0 50px 0 0;
  1785.     -moz-border-radius: 0 50px 0 0;
  1786.     border-radius: 0 50px 0 0;
  1787.     left: 17px;
  1788.     top: 4px;
  1789.     -webkit-transform: rotate(45deg);
  1790.     -moz-transform: rotate(45deg);
  1791.     -ms-transform: rotate(45deg);
  1792.     -o-transform: rotate(45deg);
  1793. }

  1795. div.icon div.waves:after {
  1796.     position: absolute;
  1797.     content: '';
  1798.     width: 8px;
  1799.     height: 8px;
  1800.     border-color: #333;
  1801.     border-style: double;
  1802.     border-width: 6px 6px 0 0;
  1803.     -webkit-border-radius: 0 50px 0 0;
  1804.     -moz-border-radius: 0 50px 0 0;
  1805.     border-radius: 0 50px 0 0;
  1806.     left: -11px;
  1807.     top: 5px;
  1808.     -webkit-transform: rotate(180deg);
  1809.     -moz-transform: rotate(180deg);
  1810.     -ms-transform: rotate(180deg);
  1811.     -o-transform: rotate(180deg);
  1812. }

  1814. /* IceCream */
  1815. div.icon div.icecream {
  1816.     width: 20px;
  1817.     height: 25px;
  1818.     background: #333;
  1819.     -webkit-border-radius: 50px 50px 10px 10px;
  1820.     -moz-border-radius: 50px 50px 10px 10px;
  1821.     border-radius: 50px 50px 10px 10px;
  1822.     position: absolute;
  1823.     top: 0;
  1824.     left: 6px;
  1825. }

  1827. div.icon div.icecream:after {
  1828.     content: '';
  1829.     position: absolute;
  1830.     bottom: -7px;
  1831.     left: 8px;
  1832.     width: 4px;
  1833.     height: 7px;
  1834.     background: #333;
  1835. }

  1837. /* Golf */
  1838. div.icon div.golf_stick {
  1839.     width: 2px;
  1840.     height: 25px;
  1841.     background: #333;
  1842.     -webkit-border-radius: 50px 50px 10px 10px;
  1843.     -moz-border-radius: 50px 50px 10px 10px;
  1844.     border-radius: 50px 50px 10px 10px;
  1845.     position: absolute;
  1846.     bottom: 2px;
  1847.     left: 15px;
  1848. }

  1850. div.icon div.golf_stick:after {
  1851.     content: '';
  1852.     position: absolute;
  1853.     bottom: 0px;
  1854.     left: -3px;
  1855.     width: 8px;
  1856.     height: 2px;
  1857.     background: #333;
  1858. }

  1860. div.icon div.golf_ball {
  1861.     position: absolute;
  1862.     left: 9px;
  1863.     top: 2px;
  1864.     width: 14px;
  1865.     height: 14px;
  1866.     background: #333;
  1867.     -webkit-border-radius: 50px;
  1868.     -moz-border-radius: 50px;
  1869.     border-radius: 50px;
  1870. }

  1872. div.icon div.golf_ball:after {
  1873.     content: '';
  1874.     position: absolute;
  1875.     top: 3px;
  1876.     left: 3px;
  1877.     background: #ddd;
  1878.     -webkit-border-radius: 50px;
  1879.     -moz-border-radius: 50px;
  1880.     border-radius: 50px;
  1881.     width: 3px;
  1882.     height: 3px;
  1883. }

  1885. /* PolyBag */
  1886. div.icon div.polybag {
  1887.     width: 32px;
  1888.     height: 16px;
  1889.     background: #333;
  1890.     position: absolute;
  1891.     top: 8px;
  1892.     left: 0;
  1893. }

  1895. div.icon div.polybag:after {
  1896.     content: '';
  1897.     position: absolute;
  1898.     left: 0;
  1899.     bottom: -7px;
  1900.     height: 6px;
  1901.     width: 32px;
  1902.     background: #333;
  1903.     -webkit-border-radius: 0 0 4px 4px;
  1904.     -moz-border-radius: 0 0 4px 4px;
  1905.     border-radius: 0 0 4px 4px;
  1906. }

  1908. div.icon div.polybag:before {
  1909.     content: '';
  1910.     position: absolute;
  1911.     top: -7px;
  1912.     left: 9px;
  1913.     width: 10px;
  1914.     height: 10px;
  1915.     border: 2px solid #333;
  1916.     -webkit-border-radius: 50px;
  1917.     -moz-border-radius: 50px;
  1918.     border-radius: 50px;
  1919. }

  1921. /* BriefCase */
  1922. div.icon div.briefcase {
  1923.     width: 18px;
  1924.     height: 23px;
  1925.     background: #333;
  1926.     position: absolute;
  1927.     top: 7px;
  1928.     left: 7px;
  1929. }

  1931. div.icon div.briefcase:after {
  1932.     content: '';
  1933.     position: absolute;
  1934.     left: -7px;
  1935.     bottom: 0px;
  1936.     height: 23px;
  1937.     width: 6px;
  1938.     background: #333;
  1939.     -webkit-border-radius: 3px 0 0 3px;
  1940.     -moz-border-radius: 3px 0 0 3px;
  1941.     border-radius: 3px 0 0 3px;
  1942. }

  1944. div.icon div.briefcase:before {
  1945.     content: '';
  1946.     position: absolute;
  1947.     right: -7px;
  1948.     bottom: 0px;
  1949.     height: 23px;
  1950.     width: 6px;
  1951.     background: #333;
  1952.     -webkit-border-radius: 0 3px 3px 0;
  1953.     -moz-border-radius: 0 3px 3px 0;
  1954.     border-radius: 0 3px 3px 0;
  1955. }

  1957. div.icon div.briefcase_handle {
  1958.     position: absolute;
  1959.     left: 9px;
  1960.     top: 2px;
  1961.     width: 10px;
  1962.     height: 3px;
  1963.     border: 2px solid #333;
  1964.     -webkit-border-radius: 3px 3px 0 0;
  1965.     -moz-border-radius: 3px 3px 0 0;
  1966.     border-radius: 3px 3px 0 0;
  1967. }

  1969. /* Roller */
  1970. div.icon div.roller_brush {
  1971.     position: absolute;
  1972.     top: 0;
  1973.     left: 0;
  1974.     width: 29px;
  1975.     height: 10px;
  1976.     background: #333;
  1977.     -webkit-border-radius: 3px;
  1978.     -moz-border-radius: 3px;
  1979.     border-radius: 3px;
  1980. }

  1982. div.icon div.roller_brush:after {
  1983.     content: '';
  1984.     position: absolute;
  1985.     right: -3px;
  1986.     top: 3px;
  1987.     height: 6px;
  1988.     width: 15px;
  1989.     border: 2px solid #333;
  1990.     border-left: none;
  1991. }

  1993. div.icon div.roller_handle {
  1994.     position: absolute;
  1995.     width: 4px;
  1996.     position: absolute;
  1997.     left: 14px;
  1998.     bottom: 0;
  1999.     height: 17px;
  2000.     -webkit-border-radius: 2px;
  2001.     -moz-border-radius: 2px;
  2002.     border-radius: 2px;
  2003.     background: #333;
  2004. }

  2006. div.icon div.roller_handle:before {
  2007.     content: '';
  2008.     position: absolute;
  2009.     width: 2px;
  2010.     top: -2px;
  2011.     height: 4px;
  2012.     left: 1px;
  2013.     background: #333;
  2014. }

  2016. /* Magnet */
  2017. div.icon div.magnet {
  2018.     position: absolute;
  2019.     bottom: 2px;
  2020.     left: 2px;
  2021.     width: 16px;
  2022.     height: 15px;
  2023.     border: 6px solid #333;
  2024.     border-top: none;
  2025.     -webkit-border-radius: 0 0 30px 30px;
  2026.     -moz-border-radius: 0 0 30px 30px;
  2027.     border-radius: 0 0 30px 30px;
  2028. }

  2030. div.icon div.magnet:after {
  2031.     content: '';
  2032.     position: absolute;
  2033.     right: -6px;
  2034.     top: -7px;
  2035.     width: 6px;
  2036.     height: 6px;
  2037.     background: #333;
  2038. }

  2040. div.icon div.magnet:before {
  2041.     content: '';
  2042.     position: absolute;
  2043.     left: -6px;
  2044.     top: -7px;
  2045.     width: 6px;
  2046.     height: 6px;
  2047.     background: #333;
  2048. }

  2050. /* Bomb */
  2051. div.icon div.bomb {
  2052.     position: absolute;
  2053.     bottom: 0;
  2054.     left: 4px;
  2055.     width: 24px;
  2056.     height: 24px;
  2057.     background: #333;
  2058.     -webkit-border-radius: 30px;
  2059.     -moz-border-radius: 30px;
  2060.     border-radius: 30px;
  2061. }

  2063. div.icon div.bomb:after {
  2064.     content: '';
  2065.     position: absolute;
  2066.     top: -1px;
  2067.     left: 8px;
  2068.     width: 8px;
  2069.     background: #333;
  2070.     height: 3px;
  2071. }

  2073. div.icon div.bomb:before {
  2074.     content: '';
  2075.     position: absolute;
  2076.     top: 0;
  2077.     left: 0;
  2078.     width: 8px;
  2079.     height: 15px;
  2080.     border: 2px solid #333;
  2081.     border-right: none;
  2082.     -webkit-border-radius: 50px 0 0 50px;
  2083.     -moz-border-radius: 50px 0 0 50px;
  2084.     border-radius: 50px 0 0 50px;
  2085.     left: 11px;
  2086.     top: -8px;
  2087. }

  2089. /* BirdHouse */
  2090. div.icon div.birdhouse {
  2091.     width: 0;
  2092.     height: 0;
  2093.     position: absolute;
  2094.     top: 0;
  2095.     left: 0;
  2096.     border-style: solid;
  2097.     border-color: transparent transparent #333 transparent;
  2098.     border-width: 0 16px 14px;
  2099. }

  2101. div.icon div.birdhouse:after {
  2102.     content: '';
  2103.     position: absolute;
  2104.     top: 14px;
  2105.     left: -12px;
  2106.     border-style: solid;
  2107.     border-color: #333 transparent transparent transparent;
  2108.     border-width: 100px 12px;
  2109. }

  2111. div.icon div.birdhouse_holes {
  2112.     width: 12px;
  2113.     height: 12px;
  2114.     background: #ddd;
  2115.     position: absolute;
  2116.     -webkit-border-radius: 60px;
  2117.     -moz-border-radius: 60px;
  2118.     border-radius: 60px;
  2119.     left: 10px;
  2120.     top: 8px;
  2121. }

  2123. div.icon div.birdhouse_holes:after {
  2124.     content: '';
  2125.     position: absolute;
  2126.     width: 4px;
  2127.     height: 4px;
  2128.     background: #ccc;
  2129.     bottom: -8px;
  2130.     left: 4px;
  2131.     -webkit-border-radius: 60px;
  2132.     -moz-border-radius: 60px;
  2133.     border-radius: 60px;
  2134. }

  2136. /* Woofer */
  2137. div.icon div.woofer {
  2138.     width: 22px;
  2139.     height: 32px;
  2140.     position: absolute;
  2141.     top: 0;
  2142.     left: 5px;
  2143.     background: #333;
  2144.     border-radius: 2px;
  2145.     -webkit-border-radius: 2px;
  2146.     -moz-border-radius: 2px;
  2147. }

  2149. div.icon div.woofer:after {
  2150.     content: '';
  2151.     position: absolute;
  2152.     width: 2px;
  2153.     height: 2px;
  2154.     background: #333;
  2155.     border-radius: 60px;
  2156.     -moz-border-radius: 60px;
  2157.     -webkit-border-radius: 60px;
  2158.     border: 2px solid #ddd;
  2159.     left: 8px;
  2160.     top: 5px;
  2161. }

  2163. div.icon div.woofer:before {
  2164.     content: '';
  2165.     position: absolute;
  2166.     width: 4px;
  2167.     height: 4px;
  2168.     background: #333;
  2169.     border-radius: 60px;
  2170.     -moz-border-radius: 60px;
  2171.     -webkit-border-radius: 60px;
  2172.     border: 5px solid #ddd;
  2173.     left: 4px;
  2174.     top: 14px;
  2175. }

  2177. /* HandBag */
  2178. div.icon div.handbag {
  2179.     position: absolute;
  2180.     top: 13px;
  2181.     left: 1px;
  2182.     height: 0;
  2183.     width: 24px;
  2184.     border-style: solid;
  2185.     border-color: transparent transparent #333 transparent;
  2186.     border-width: 0 3px 16px;
  2187. }

  2189. div.icon div.handbag:after {
  2190.     content: '';
  2191.     position: absolute;
  2192.     left: 0;
  2193.     top: -3px;
  2194.     height: 3px;
  2195.     width: 24px;
  2196.     background: #333;
  2197. }

  2199. div.icon div.handbag:before {
  2200.     content: '';
  2201.     position: absolute;
  2202.     width: 16px;
  2203.     height: 16px;
  2204.     border: 2px solid #333;
  2205.     -webkit-border-radius: 50px;
  2206.     -moz-border-radius: 50px;
  2207.     border-radius: 50px;
  2208.     top: -10px;
  2209.     left: 2px;
  2210. }

  2212. /* Bell */
  2213. div.icon div.belltop {
  2214.     position: absolute;
  2215.     width: 6px;
  2216.     height: 6px;
  2217.     border: 2px solid #333;
  2218.     -webkit-border-radius: 50px;
  2219.     -moz-border-radius: 50px;
  2220.     border-radius: 50px;
  2221.     left: 11px;
  2222. }

  2224. div.icon div.belltop:after {
  2225.     content: '';
  2226.     position: absolute;
  2227.     top: 1px;
  2228.     width: 20px;
  2229.     height: 20px;
  2230.     background: #333;
  2231.     left: -7px;
  2232.     -webkit-border-radius: 50px 50px 0 0;
  2233.     -moz-border-radius: 50px 50px 0 0;
  2234.     border-radius: 50px 50px 0 0;
  2235. }

  2237. div.icon div.belltop:before {
  2238.     content: '';
  2239.     position: absolute;
  2240.     left: -11px;
  2241.     top: 14px;
  2242.     width: 20px;
  2243.     height: 0;
  2244.     border-style: solid;
  2245.     border-color: transparent transparent #333 transparent;
  2246.     border-width: 0 4px 9px;
  2247. }

  2249. div.icon div.bellbottom {
  2250.     position: absolute;
  2251.     bottom: 5px;
  2252.     left: 2px;
  2253.     width: 28px;
  2254.     height: 2px;
  2255.     background: #333;
  2256. }

  2258. div.icon div.bellbottom:after {
  2259.     content: '';
  2260.     position: absolute;
  2261.     width: 6px;
  2262.     height: 3px;
  2263.     background: #333;
  2264.     -webkit-border-radius: 0 0 50px 50px;
  2265.     -moz-border-radius: 0 0 50px 50px;
  2266.     border-radius: 0 0 50px 50px;
  2267.     top: 3px;
  2268.     left: 5px;
  2269. }

  2271. /* SignBoard */
  2272. div.icon div.signboard {
  2273.     position: absolute;
  2274.     top: 3px;
  2275.     left: 2px;
  2276.     width: 28px;
  2277.     height: 18px;
  2278.     background: #333;
  2279. }

  2281. div.icon div.signboard:after {
  2282.     content: '';
  2283.     position: absolute;
  2284.     height: 8px;
  2285.     width: 4px;
  2286.     background: #333;
  2287.     bottom: -8px;
  2288.     left: 12px;
  2289. }

  2291. div.icon div.signboard_arrow {
  2292.     width: 6px;
  2293.     height: 4px;
  2294.     background: #ddd;
  2295.     position: absolute;
  2296.     top: 10px;
  2297.     left: 10px;
  2298. }

  2300. div.icon div.signboard_arrow:after {
  2301.     content: '';
  2302.     position: absolute;
  2303.     width: 0;
  2304.     height: 0;
  2305.     border-style: solid;
  2306.     border-color: transparent transparent transparent #ddd;
  2307.     border-width: 6px;
  2308.     right: -12px;
  2309.     top: -4px;
  2310. }

  2312. /* Music Note */
  2313. div.icon div.musicnote_base {
  2314.     width: 14px;
  2315.     height: 4px;
  2316.     background: #333;
  2317.     position: absolute;
  2318.     top: 5px;
  2319.     left: 12px;
  2320.     -webkit-transform: skew(0, -10deg);
  2321.     -moz-transform: skew(0, -10deg);
  2322.     -ms-transform: skew(0, -10deg);
  2323.     -o-transform: skew(0, -10deg);
  2324.     transform: skew(0, -10deg);
  2325. }

  2327. div.icon div.musicnote_left {
  2328.     position: absolute;
  2329.     top: 8px;
  2330.     left: 12px;
  2331.     width: 2px;
  2332.     height: 16px;
  2333.     background: #333;
  2334. }

  2336. div.icon div.musicnote_right {
  2337.     position: absolute;
  2338.     top: 5px;
  2339.     right: 6px;
  2340.     width: 2px;
  2341.     height: 17px;
  2342.     background: #333;
  2343. }

  2345. div.icon div.musicnote_ovals {
  2346.     position: absolute;
  2347.     width: 8px;
  2348.     height: 6px;
  2349.     background: #333;
  2350.     -webkit-border-radius: 12px / 8px;
  2351.     -moz-border-radius: 12px / 8px;
  2352.     border-radius: 12px / 8px;
  2353.     bottom: 4px;
  2354.     left: 6px;
  2355. }

  2357. div.icon div.musicnote_ovals:after {
  2358.     content: '';
  2359.     position: absolute;
  2360.     width: 8px;
  2361.     height: 6px;
  2362.     background: #333;
  2363.     -webkit-border-radius: 12px / 8px;
  2364.     -moz-border-radius: 12px / 8px;
  2365.     border-radius: 12px / 8px;
  2366.     bottom: 3px;
  2367.     left: 12px;
  2368. }

  2370. /* Key */
  2371. div.icon div.key_base {
  2372.     width: 22px;
  2373.     height: 22px;
  2374.     background: #333;
  2375.     -webkit-border-radius: 50px;
  2376.     -moz-border-radius: 50px;
  2377.     border-radius: 50px;
  2378.     position: absolute;
  2379.     top: 0;
  2380.     left: 0;
  2381. }

  2383. div.icon div.key_base:after {
  2384.     content: '';
  2385.     position: absolute;
  2386.     top: 5px;
  2387.     left: 5px;
  2388.     width: 6px;
  2389.     height: 6px;
  2390.     -webkit-border-radius: 50px;
  2391.     -moz-border-radius: 50px;
  2392.     border-radius: 50px;
  2393.     background: #ddd;
  2394. }

  2396. div.icon div.key_base:before {
  2397.     content: '';
  2398.     position: absolute;
  2399.     height: 12px;
  2400.     width: 5px;
  2401.     border-top: 6px solid #333;
  2402.     border-right: 3px solid #333;
  2403.     -webkit-transform: rotate(315deg);
  2404.     -moz-transform: rotate(315deg);
  2405.     -ms-transform: rotate(315deg);
  2406.     -o-transform: rotate(315deg);
  2407.     transform: rotate(315deg);
  2408.     left: 18px;
  2409.     top: 14px;
  2410. }

  2412. div.icon div.key_squares {
  2413.     width: 6px;
  2414.     height: 6px;
  2415.     background: #333;
  2416.     position: absolute;
  2417.     top: 18px;
  2418.     left: 17px;
  2419. }

  2421. div.icon div.key_squares:after {
  2422.     content: '';
  2423.     width: 6px;
  2424.     height: 6px;
  2425.     background: #333;
  2426.     position: absolute;
  2427.     top: 4px;
  2428.     left: 4px;
  2429. }

  2431. div.icon div.key_squares:before {
  2432.     content: '';
  2433.     width: 6px;
  2434.     height: 6px;
  2435.     background: #333;
  2436.     position: absolute;
  2437.     top: 8px;
  2438.     left: 8px;
  2439. }

  2441. /* Download */
  2442. div.icon div.download {
  2443.     width: 24px;
  2444.     height: 8px;
  2445.     border: 4px solid #333;
  2446.     border-top: none;
  2447.     position: absolute;
  2448.     bottom: 3px;
  2449. }

  2451. div.icon div.download:after {
  2452.     width: 0px;
  2453.     height: 0px;
  2454.     content: '';
  2455.     position: absolute;
  2456.     border-style: solid;
  2457.     border-color: #333 transparent transparent transparent;
  2458.     border-width: 8px;
  2459.     left: 4px;
  2460.     top: -4px;
  2461. }

  2463. div.icon div.download:before {
  2464.     content: '';
  2465.     position: absolute;
  2466.     width: 7px;
  2467.     height: 10px;
  2468.     background: #333;
  2469.     top: -14px;
  2470.     left: 9px;
  2471. }

  2473. /* Upload */
  2474. div.icon div.upload {
  2475.     width: 24px;
  2476.     height: 8px;
  2477.     border: 4px solid #333;
  2478.     border-top: none;
  2479.     position: absolute;
  2480.     bottom: 3px;
  2481. }

  2483. div.icon div.upload:after {
  2484.     width: 0px;
  2485.     height: 0px;
  2486.     content: '';
  2487.     position: absolute;
  2488.     border-style: solid;
  2489.     border-color: transparent transparent #333 transparent;
  2490.     border-width: 8px;
  2491.     left: 4px;
  2492.     top: -22px;
  2493. }

  2495. div.icon div.upload:before {
  2496.     content: '';
  2497.     position: absolute;
  2498.     width: 7px;
  2499.     height: 10px;
  2500.     background: #333;
  2501.     top: -6px;
  2502.     left: 9px;
  2503. }

  2505. /* Reload */
  2506. div.icon div.reload {
  2507.     width: 18px;
  2508.     height: 9px;
  2509.     border-style: solid;
  2510.     border-width: 0px 4px 4px 4px;
  2511.     border-color: #333;
  2512.     -webkit-border-radius: 0 0 50px 50px;
  2513.     -moz-border-radius: 0 0 50px 50px;
  2514.     border-radius: 0 0 50px 50px;
  2515.     position: absolute;
  2516.     top: 18px;
  2517.     left: 2px;
  2518. }

  2520. div.icon div.reload:after {
  2521.     content: '';
  2522.     width: 9px;
  2523.     height: 9px;
  2524.     border-style: solid;
  2525.     border-width: 4px 0 0 4px;
  2526.     border-color: #333;
  2527.     -webkit-border-radius: 50px 0 0 0;
  2528.     -moz-border-radius: 50px 0 0 0;
  2529.     border-radius: 50px 0 0 0;
  2530.     position: absolute;
  2531.     left: -4px;
  2532.     bottom: 9px;
  2533. }

  2535. div.icon div.reload:before {
  2536.     content: '';
  2537.     position: absolute;
  2538.     width: 0;
  2539.     height: 0;
  2540.     border-style: solid;
  2541.     border-width: 6px;
  2542.     border-color: transparent transparent transparent #333;
  2543.     bottom: 14px;
  2544.     left: 9px;
  2545. }

  2547. /* LoopBack */
  2548. div.icon div.loopback_l {
  2549.     width: 10px;
  2550.     height: 5px;
  2551.     border-style: solid;
  2552.     border-width: 0px 3px 3px 3px;
  2553.     border-color: #333;
  2554.     border-radius: 0 0 50px 50px;
  2555.     position: absolute;
  2556.     top: 16px;
  2557.     left: 1px;
  2558. }

  2560. div.icon div.loopback_l:after {
  2561.     content: '';
  2562.     width: 5px;
  2563.     height: 5px;
  2564.     border-style: solid;
  2565.     border-width: 3px 0 0 3px;
  2566.     border-color: #333;
  2567.     border-radius: 50px 0 0 0;
  2568.     position: absolute;
  2569.     left: -3px;
  2570.     bottom: 5px;
  2571. }

  2573. div.icon div.loopback_l:before {
  2574.     content: '';
  2575.     position: absolute;
  2576.     width: 0;
  2577.     height: 0;
  2578.     border-style: solid;
  2579.     border-width: 4px;
  2580.     border-color: transparent transparent transparent #333;
  2581.     bottom: 7px;
  2582.     left: 5px;
  2583. }

  2585. div.icon div.loopback_r {
  2586.     width: 10px;
  2587.     height: 5px;
  2588.     border-style: solid;
  2589.     border-width: 3px 3px 0 3px;
  2590.     border-color: #333;
  2591.     border-radius: 50px 50px 0 0;
  2592.     position: absolute;
  2593.     top: 8px;
  2594.     right: 2px;
  2595. }

  2597. div.icon div.loopback_r:after {
  2598.     content: '';
  2599.     width: 5px;
  2600.     height: 5px;
  2601.     border-style: solid;
  2602.     border-width: 0 3px 3px 0;
  2603.     border-color: #333;
  2604.     border-radius: 0 0 50px 0;
  2605.     position: absolute;
  2606.     left: 5px;
  2607.     top: 5px;
  2608. }

  2610. div.icon div.loopback_r:before {
  2611.     content: '';
  2612.     position: absolute;
  2613.     width: 0;
  2614.     height: 0;
  2615.     border-style: solid;
  2616.     border-width: 4px;
  2617.     border-color: transparent #333 transparent transparent;
  2618.     top: 7px;
  2619.     right: 5px;
  2620. }

  2622. /* Redo */
  2623. div.icon div.redo_l {
  2624.     width: 8px;
  2625.     height: 8px;
  2626.     border-style: solid;
  2627.     border-width: 0px 0px 4px 4px;
  2628.     border-color: #333;
  2629.     -webkit-border-radius: 0 0 0 50px;
  2630.     -moz-border-radius: 0 0 0 50px;
  2631.     border-radius: 0 0 0 50px;
  2632.     position: absolute;
  2633.     bottom: 4px;
  2634.     left: 4px;
  2635. }

  2637. div.icon div.redo_l:before {
  2638.     content: '';
  2639.     position: absolute;
  2640.     width: 0;
  2641.     height: 0;
  2642.     border-style: solid;
  2643.     border-width: 6px;
  2644.     border-color: transparent transparent #333 transparent;
  2645.     bottom: 8px;
  2646.     left: -8px;
  2647. }

  2649. div.icon div.redo_r {
  2650.     width: 8px;
  2651.     height: 8px;
  2652.     border-style: solid;
  2653.     border-width: 4px 4px 0 0;
  2654.     border-color: #333;
  2655.     -webkit-border-radius: 0 50px 0 0;
  2656.     -moz-border-radius: 0 50px 0 0;
  2657.     border-radius: 0 50px 0 0;
  2658.     position: absolute;
  2659.     top: 4px;
  2660.     right: 4px;
  2661. }

  2663. div.icon div.redo_r:before {
  2664.     content: '';
  2665.     position: absolute;
  2666.     width: 0;
  2667.     height: 0;
  2668.     border-style: solid;
  2669.     border-width: 6px;
  2670.     border-color: #333 transparent transparent transparent;
  2671.     top: 8px;
  2672.     right: -8px;
  2673. }

  2675. /* Target */
  2676. div.icon div.target {
  2677.     width: 15px;
  2678.     height: 15px;
  2679.     -webkit-border-radius: 50px;
  2680.     -moz-border-radius: 50px;
  2681.     border-radius: 50px;
  2682.     border: 8px double #333;
  2683.     position: absolute;
  2684.     top: 0px;
  2685.     left: 0px;
  2686. }

  2688. div.icon div.target:after {
  2689.     content: '';
  2690.     position: absolute;
  2691.     -webkit-border-radius: 50px;
  2692.     -moz-border-radius: 50px;
  2693.     border-radius: 50px;
  2694.     width: 11px;
  2695.     height: 11px;
  2696.     background: #333;
  2697.     left: 2px;
  2698.     top: 2px;
  2699. }

  2701. /* Lock Open */
  2702. div.icon div.lockClosed_base {
  2703.     width: 20px;
  2704.     height: 16px;
  2705.     background: #333;
  2706.     position: absolute;
  2707.     left: 6px;
  2708.     top: 12px;
  2709. }

  2711. div.icon div.lockClosed_base:after {
  2712.     content: '';
  2713.     position: absolute;
  2714.     background: #ddd;
  2715.     width: 4px;
  2716.     height: 4px;
  2717.     left: 8px;
  2718.     top: 5px;
  2719.     -webkit-border-radius: 40px;
  2720.     -moz-border-radius: 40px;
  2721.     border-radius: 40px;
  2722. }

  2724. div.icon div.lockClosed_base:before {
  2725.     content: '';
  2726.     position: absolute;
  2727.     background: #ddd;
  2728.     width: 2px;
  2729.     height: 4px;
  2730.     left: 9px;
  2731.     top: 8px;
  2732. }

  2734. div.icon div.lockClosed_handle {
  2735.     width: 10px;
  2736.     height: 7px;
  2737.     border: 2px solid #333;
  2738.     border-bottom: none;
  2739.     -webkit-border-radius: 40px 40px 0 0;
  2740.     -moz-border-radius: 40px 40px 0 0;
  2741.     border-radius: 40px 40px 0 0;
  2742.     position: absolute;
  2743.     left: 9px;
  2744.     top: 3px;
  2745. }

  2747. /* Lock Open */
  2748. div.icon div.lockOpen_base {
  2749.     width: 20px;
  2750.     height: 16px;
  2751.     background: #333;
  2752.     position: absolute;
  2753.     left: 2px;
  2754.     top: 12px;
  2755. }

  2757. div.icon div.lockOpen_base:after {
  2758.     content: '';
  2759.     position: absolute;
  2760.     background: #ddd;
  2761.     width: 4px;
  2762.     height: 4px;
  2763.     left: 8px;
  2764.     top: 5px;
  2765.     -webkit-border-radius: 40px;
  2766.     -moz-border-radius: 40px;
  2767.     border-radius: 40px;
  2768. }

  2770. div.icon div.lockOpen_base:before {
  2771.     content: '';
  2772.     position: absolute;
  2773.     background: #ddd;
  2774.     width: 2px;
  2775.     height: 4px;
  2776.     left: 9px;
  2777.     top: 8px;
  2778. }

  2780. div.icon div.lockOpen_handle {
  2781.     width: 10px;
  2782.     height: 7px;
  2783.     border: 2px solid #333;
  2784.     border-bottom: none;
  2785.     -webkit-border-radius: 40px 40px 0 0;
  2786.     -moz-border-radius: 40px 40px 0 0;
  2787.     border-radius: 40px 40px 0 0;
  2788.     position: absolute;
  2789.     left: 17px;
  2790.     top: 3px;
  2791. }

  2793. /* Weight */
  2794. div.icon div.weight {
  2795.     width: 22px;
  2796.     height: 0;
  2797.     position: absolute;
  2798.     border-style: solid;
  2799.     border-width: 0px 5px 15px 5px;
  2800.     border-color: transparent transparent #333 transparent;
  2801.     top: 14px;
  2802.     left: 0;
  2803. }

  2805. div.icon div.weight:after {
  2806.     content: '';
  2807.     position: absolute;
  2808.     top: -12px;
  2809.     left: 4px;
  2810.     width: 6px;
  2811.     height: 6px;
  2812.     border: 4px solid #333;
  2813.     -webkit-border-radius: 50px;
  2814.     -moz-border-radius: 50px;
  2815.     border-radius: 50px;
  2816. }

  2818. /* Light Bulb */
  2819. div.icon div.bulb_glass {
  2820.     width: 22px;
  2821.     height: 22px;
  2822.     background: #333;
  2823.     -webkit-border-radius: 50px;
  2824.     -moz-border-radius: 50px;
  2825.     border-radius: 50px;
  2826.     position: absolute;
  2827.     left: 5px;
  2828.     top: 1px
  2829. }

  2831. div.icon div.bulb_glass:after {
  2832.     content: '';
  2833.     position: absolute;
  2834.     width: 8px;
  2835.     height: 8px;
  2836.     background: #333;
  2837.     bottom: -2px;
  2838.     left: 7px;
  2839. }

  2841. div.icon div.bulb_holder {
  2842.     width: 8px;
  2843.     height: 1px;
  2844.     background: #333;
  2845.     position: absolute;
  2846.     left: 12px;
  2847.     bottom: 5px;
  2848. }

  2850. div.icon div.bulb_holder:after {
  2851.     content: '';
  2852.     width: 8px;
  2853.     height: 1px;
  2854.     background: #333;
  2855.     position: absolute;
  2856.     top: 2px;
  2857.     left: 0px;
  2858. }

  2860. div.icon div.bulb_holder:before {
  2861.     content: '';
  2862.     width: 4px;
  2863.     height: 1px;
  2864.     background: #333;
  2865.     position: absolute;
  2866.     left: 2px;
  2867.     top: 4px;
  2868. }

  2870. /* Camera */
  2871. div.icon div.camera_body {
  2872.     width: 32px;
  2873.     height: 20px;
  2874.     background: #333;
  2875.     position: absolute;
  2876.     top: 7px;
  2877.     -webkit-border-radius: 2px;
  2878.     -moz-border-radius: 2px;
  2879.     border-radius: 2px;
  2880. }

  2882. div.icon div.camera_body:after {
  2883.     width: 4px;
  2884.     height: 2px;
  2885.     position: absolute;
  2886.     content: '';
  2887.     background: #333;
  2888.     top: -2px;
  2889.     left: 5px;
  2890. }

  2892. div.icon div.camera_body:before {
  2893.     content: '';
  2894.     position: absolute;
  2895.     width: 3px;
  2896.     height: 2px;
  2897.     background: #ddd;
  2898.     right: 3px;
  2899.     top: 3px;
  2900. }

  2902. div.icon div.camera_lens {
  2903.     width: 8px;
  2904.     height: 8px;
  2905.     border: 3px solid #ddd;
  2906.     position: absolute;
  2907.     -webkit-border-radius: 50px;
  2908.     -moz-border-radius: 50px;
  2909.     border-radius: 50px;
  2910.     top: 10px;
  2911.     left: 9px;
  2912. }

  2914. /* EarBuds */
  2915. div.icon div.earbud_left {
  2916.     position: absolute;
  2917.     width: 7px;
  2918.     height: 7px;
  2919.     border: 1px solid #333;
  2920.     background: #ddd;
  2921.     -webkit-border-radius: 50px;
  2922.     -moz-border-radius: 50px;
  2923.     border-radius: 50px;
  2924.     left: 5px;
  2925.     top: 3px;
  2926. }

  2928. div.icon div.earbud_left:after {
  2929.     content: '';
  2930.     position: absolute;
  2931.     width: 3px;
  2932.     height: 5px;
  2933.     background: #333;
  2934.     bottom: -5px;
  2935.     left: 2px;
  2936. }

  2938. div.icon div.earbud_left:before {
  2939.     content: '';
  2940.     position: absolute;
  2941.     width: 1px;
  2942.     height: 6px;
  2943.     background: #333;
  2944.     bottom: -11px;
  2945.     left: 3px;
  2946. }

  2948. div.icon div.earbud_right {
  2949.     position: absolute;
  2950.     width: 7px;
  2951.     height: 7px;
  2952.     border: 1px solid #333;
  2953.     background: #333;
  2954.     -webkit-border-radius: 50px;
  2955.     -moz-border-radius: 50px;
  2956.     border-radius: 50px;
  2957.     right: 5px;
  2958.     top: 10px;
  2959. }

  2961. div.icon div.earbud_right:after {
  2962.     content: '';
  2963.     position: absolute;
  2964.     width: 3px;
  2965.     height: 5px;
  2966.     background: #333;
  2967.     bottom: -5px;
  2968.     left: 2px;
  2969. }

  2971. div.icon div.earbud_right:before {
  2972.     content: '';
  2973.     position: absolute;
  2974.     width: 1px;
  2975.     height: 6px;
  2976.     background: #333;
  2977.     bottom: -11px;
  2978.     left: 3px;
  2979. }

  2981. /* Restricted */
  2982. div.icon div.restricted {
  2983.     width: 22px;
  2984.     height: 22px;
  2985.     border: 4px solid #333;
  2986.     position: absolute;
  2987.     top: 1px;
  2988.     left: 1px;
  2989.     -webkit-border-radius: 50px;
  2990.     -moz-border-radius: 50px;
  2991.     border-radius: 50px;
  2992. }

  2994. div.icon div.restricted:after {
  2995.     content: '';
  2996.     position: absolute;
  2997.     width: 4px;
  2998.     height: 26px;
  2999.     background: #333;
  3000.     -webkit-transform: rotate(45deg);
  3001.     -moz-transform: rotate(45deg);
  3002.     -ms-transform: rotate(45deg);
  3003.     -o-transform: rotate(45deg);
  3004.     transform: rotate(45deg);
  3005.     left: 10px;
  3006.     top: -3px;
  3007. }

  3009. /* Pin */
  3010. div.icon div.pin_middle {
  3011.     width: 12px;
  3012.     height: 10px;
  3013.     background: #333;
  3014.     position: absolute;
  3015.     top: 8px;
  3016.     left: 12px;
  3017.     -webkit-transform: rotate(45deg);
  3018.     -moz-transform: rotate(45deg);
  3019.     -ms-transform: rotate(45deg);
  3020.     -o-transform: rotate(45deg);
  3021.     transform: rotate(45deg);
  3022. }

  3024. div.icon div.pin_middle:after {
  3025.     content: '';
  3026.     position: absolute;
  3027.     width: 0;
  3028.     height: 0;
  3029.     border-style: solid;
  3030.     border-color: transparent transparent #ddd transparent;
  3031.     border-width: 0 2px 8px 0;
  3032.     left: 2px;
  3033.     top: 0px;
  3034. }

  3036. div.icon div.pin_middle:before {
  3037.     content: '';
  3038.     position: absolute;
  3039.     width: 12px;
  3040.     height: 0;
  3041.     bottom: -5px;
  3042.     left: -2px;
  3043.     border-style: solid;
  3044.     border-color: transparent transparent #333 transparent;
  3045.     border-width: 0 2px 6px 2px;
  3046. }

  3048. div.icon div.pin_bottom {
  3049.     width: 14px;
  3050.     height: 2px;
  3051.     background: #333;
  3052.     -webkit-transform: rotate(45deg);
  3053.     -moz-transform: rotate(45deg);
  3054.     -ms-transform: rotate(45deg);
  3055.     -o-transform: rotate(45deg);
  3056.     transform: rotate(45deg);
  3057.     position: absolute;
  3058.     top: 7px;
  3059.     left: 16px;
  3060. }

  3062. div.icon div.pin_bottom:after {
  3063.     content: '';
  3064.     position: absolute;
  3065.     width: 0;
  3066.     height: 0;
  3067.     border-style: solid;
  3068.     border-color: #333 transparent transparent transparent;
  3069.     border-width: 12px 2px 0 2px;
  3070.     top: 19px;
  3071.     left: 5px;
  3072. }

  3074. /* Plus */
  3075. div.icon div.plus {
  3076.     width: 24px;
  3077.     height: 4px;
  3078.     background: #333;
  3079.     position: absolute;
  3080.     left: 4px;
  3081.     top: 14px;
  3082. }

  3084. div.icon div.plus:after {
  3085.     content: '';
  3086.     position: absolute;
  3087.     width: 4px;
  3088.     height: 24px;
  3089.     background: #333;
  3090.     left: 10px;
  3091.     top: -10px;
  3092. }

  3094. /* Minus */
  3095. div.icon div.minus {
  3096.     width: 24px;
  3097.     height: 4px;
  3098.     background: #333;
  3099.     position: absolute;
  3100.     left: 4px;
  3101.     top: 14px;
  3102. }

  3104. /* Flask */
  3105. div.icon div.flask_body {
  3106.     width: 10px;
  3107.     height: 2px;
  3108.     background: #333;
  3109.     position: absolute;
  3110.     left: 11px;
  3111.     top: 2px;
  3112. }

  3114. div.icon div.flask_body:after {
  3115.     content: '';
  3116.     position: absolute;
  3117.     width: 6px;
  3118.     height: 8px;
  3119.     background: #333;
  3120.     left: 2px;
  3121.     top: 2px;
  3122. }

  3124. div.icon div.flask_body:before {
  3125.     content: '';
  3126.     position: absolute;
  3127.     width: 6px;
  3128.     height: 0;
  3129.     border-style: solid;
  3130.     border-color: transparent transparent #333 transparent;
  3131.     border-width: 0 12px 18px 12px;
  3132.     top: 10px;
  3133.     left: -10px;
  3134. }

  3136. div.icon div.flask_liquid {
  3137.     width: 10px;
  3138.     height: 0;
  3139.     border-style: solid;
  3140.     border-color: transparent transparent #ddd transparent;
  3141.     border-width: 0 7px 10px 7px;
  3142.     position: absolute;
  3143.     top: 18px;
  3144.     left: 4px;
  3145. }

  3147. div.icon div.flask_liquid:after {
  3148.     width: 4px;
  3149.     height: 4px;
  3150.     background: #333;
  3151.     content: '';
  3152.     position: absolute;
  3153.     -webkit-border-radius: 50px;
  3154.     -moz-border-radius: 50px;
  3155.     border-radius: 50px;
  3156.     top: 4px;
  3157. }

  3159. div.icon div.flask_liquid:before {
  3160.     width: 2px;
  3161.     height: 2px;
  3162.     background: #333;
  3163.     content: '';
  3164.     position: absolute;
  3165.     -webkit-border-radius: 50px;
  3166.     -moz-border-radius: 50px;
  3167.     border-radius: 50px;
  3168.     top: 2px;
  3169.     left: 6px;
  3170. }

  3172. /* Test Tube */
  3173. div.icon div.testtube_body {
  3174.     width: 14px;
  3175.     height: 2px;
  3176.     background: #333;
  3177.     position: absolute;
  3178.     left: 9px;
  3179.     top: 2px;
  3180. }

  3182. div.icon div.testtube_body:after {
  3183.     content: '';
  3184.     position: absolute;
  3185.     width: 10px;
  3186.     height: 26px;
  3187.     background: #333;
  3188.     left: 2px;
  3189.     top: 2px;
  3190.     -webkit-border-radius: 0 0 50px 50px;
  3191.     -moz-border-radius: 0 0 50px 50px;
  3192.     border-radius: 0 0 50px 50px;
  3193. }

  3195. div.icon div.testtube_body:before {
  3196.     content: '';
  3197.     position: absolute;
  3198.     width: 8px;
  3199.     height: 17px;
  3200.     background: #ddd;
  3201.     left: 3px;
  3202.     top: 10px;
  3203.     -webkit-border-radius: 0 0 50px 50px;
  3204.     -moz-border-radius: 0 0 50px 50px;
  3205.     border-radius: 0 0 50px 50px;
  3206.     z-index: 2;
  3207. }

  3209. div.icon div.testtube_bubbles {
  3210.     position: absolute;
  3211.     width: 5px;
  3212.     height: 5px;
  3213.     background: #333;
  3214.     -webkit-border-radius: 50px;
  3215.     -moz-border-radius: 50px;
  3216.     border-radius: 50px;
  3217.     top: 22px;
  3218.     left: 13px;
  3219.     z-index: 3;
  3220. }

  3222. div.icon div.testtube_bubbles:after {
  3223.     content: '';
  3224.     position: absolute;
  3225.     width: 3px;
  3226.     height: 3px;
  3227.     background: #333;
  3228.     -webkit-border-radius: 50px;
  3229.     -moz-border-radius: 50px;
  3230.     border-radius: 50px;
  3231.     bottom: 6px;
  3232.     left: 3px;
  3233.     z-index: 3;
  3234. }

  3236. div.icon div.testtube_bubbles:before {
  3237.     content: '';
  3238.     position: absolute;
  3239.     width: 2px;
  3240.     height: 2px;
  3241.     background: #333;
  3242.     -webkit-border-radius: 50px;
  3243.     -moz-border-radius: 50px;
  3244.     border-radius: 50px;
  3245.     bottom: 10px;
  3246.     left: 0px;
  3247.     z-index: 3;
  3248. }

  3250. /* DustBin */
  3251. div.icon div.dustbin {
  3252.     width: 16px;
  3253.     height: 20px;
  3254.     background: #333;
  3255.     position: absolute;
  3256.     left: 8px;
  3257.     bottom: 3px;
  3258. }

  3260. div.icon div.dustbin:after {
  3261.     content: '';
  3262.     position: absolute;
  3263.     width: 20px;
  3264.     height: 3px;
  3265.     background: #333;
  3266.     left: -2px;
  3267.     top: -4px;
  3268. }

  3270. div.icon div.dustbin:before {
  3271.     height: 3px;
  3272.     width: 6px;
  3273.     position: absolute;
  3274.     top: -6px;
  3275.     content: '';
  3276.     background: #333;
  3277.     left: 5px;
  3278. }
  3279. </style>
  3280. <h1>CSS3 Monochrome Icon Set</h1>
  3281. <div class="container">
  3282.         
  3283.         <!-- ### Down Arrow ### -->
  3284.         <div class="icon">
  3285.                 <div class="downArrow"></div>
  3286.         </div>
  3287.         
  3288.         <!-- ### Up Arrow ### -->
  3289.         <div class="icon">
  3290.                 <div class="upArrow"></div>
  3291.         </div>
  3292.         
  3293.         <!-- ### Left Arrow ### -->
  3294.         <div class="icon">
  3295.                 <div class="leftArrow"></div>
  3296.         </div>
  3297.         
  3298.         <!-- ### Right Arrow ### -->
  3299.         <div class="icon">
  3300.                 <div class="rightArrow"></div>
  3301.         </div>
  3302.         
  3303.         <!-- ### Home ### -->
  3304.         <div class="icon">
  3305.                 <div class="home"></div>
  3306.                 <div class="chimney"></div>
  3307.         </div>
  3308.         
  3309.         <!-- ### Disc ### -->
  3310.         <div class="icon">
  3311.                 <div class="disc"></div>
  3312.         </div>
  3313.         
  3314.         <!-- ### Heart ### -->
  3315.         <div class="icon">
  3316.                 <div class="heart"></div>
  3317.         </div>
  3318.         
  3319.         <!-- ### Pencil ### -->
  3320.         <div class="icon">
  3321.                 <div class="pencil"></div>
  3322.         </div>
  3323.         
  3324.         <!-- ### Chat Box ### -->
  3325.         <div class="icon">
  3326.                 <div class="chat"></div>
  3327.                 <div class="lines"></div>
  3328.         </div>
  3329.         
  3330.         <!-- ### Tick ### -->
  3331.         <div class="icon">
  3332.                 <div class="tick"></div>
  3333.         </div>
  3334.         
  3335.         <!-- ### Cross ### -->
  3336.         <div class="icon">
  3337.                 <div class="cross"></div>
  3338.         </div>
  3339.         
  3340.         <!-- ### User ### -->
  3341.         <div class="icon">
  3342.                 <div class="user"></div>
  3343.                 <div class="shoulder"></div>
  3344.         </div>
  3345.         
  3346.         <!-- ### Search ### -->
  3347.         <div class="icon">
  3348.                 <div class="search"></div>
  3349.         </div>
  3350.         
  3351.         <!-- ### Search with base ### -->
  3352.         <div class="icon">
  3353.                 <div class="searchB"></div>
  3354.         </div>
  3355.         
  3356.         <!-- ### Phone ### -->
  3357.         <div class="icon">
  3358.                 <div class="phone"></div>
  3359.         </div>
  3360.         
  3361.         <!-- ### iPod ### -->
  3362.         <div class="icon">
  3363.                 <div class="ipod"></div>
  3364.         </div>
  3365.         
  3366.         <!-- ### Tab ### -->
  3367.         <div class="icon">
  3368.                 <div class="tab"></div>
  3369.         </div>
  3370.         
  3371.         <!-- ### Graph1 ### -->
  3372.         <div class="icon">
  3373.                 <div class="graph1"></div>
  3374.                 <div class="bars"></div>
  3375.         </div>
  3376.         
  3377.         <!-- ### Screen ### -->
  3378.         <div class="icon">
  3379.                 <div class="screen"></div>
  3380.         </div>
  3381.         
  3382.         <!-- ### Cloud ### -->
  3383.         <div class="icon">
  3384.                 <div class="cloud"></div>
  3385.         </div>
  3386.         
  3387.         <!-- ### Cloud-Up ### -->
  3388.         <div class="icon">
  3389.                 <div class="cloudUp"></div>
  3390.                 <div class="cloudUpArrow"></div>
  3391.         </div>
  3392.         
  3393.         <!-- ### Cloud-Down ### -->
  3394.         <div class="icon">
  3395.                 <div class="cloudDown"></div>
  3396.                 <div class="cloudDownArrow"></div>
  3397.         </div>
  3398.         
  3399.         <!-- ### Page ### -->
  3400.         <div class="icon">
  3401.                 <div class="page"></div>
  3402.                 <div class="pageLines"></div>
  3403.         </div>
  3404.         
  3405.         <!-- ### RSS ### -->
  3406.         <div class="icon">
  3407.                 <div class="rss"></div>
  3408.         </div>
  3409.         
  3410.         <!-- ### Battery Full ### -->
  3411.         <div class="icon">
  3412.                 <div class="batFull"></div>
  3413.         </div>
  3414.         
  3415.         <!-- ### Battery Medium ### -->
  3416.         <div class="icon">
  3417.                 <div class="batMed"></div>
  3418.         </div>
  3419.         
  3420.         <!-- ### Battery Low ### -->
  3421.         <div class="icon">
  3422.                 <div class="batLow"></div>
  3423.         </div>
  3424.         
  3425.         <!-- ### Battery Empty ### -->
  3426.         <div class="icon">
  3427.                 <div class="batEmpty"></div>
  3428.         </div>
  3429.         
  3430.         <!-- ### Speaker Volume Full ### -->
  3431.         <div class="icon">
  3432.                 <div class="speakerVolF"></div>
  3433.         </div>
  3434.         
  3435.         <!-- ### Speaker Volume Half ### -->
  3436.         <div class="icon">
  3437.                 <div class="speakerVolH"></div>
  3438.         </div>
  3439.         
  3440.         <!-- ### Speaker Volume Mute ### -->
  3441.         <div class="icon">
  3442.                 <div class="speakerVolM"></div>
  3443.         </div>
  3444.         
  3445.         <!-- ### Play ### -->
  3446.         <div class="icon">
  3447.                 <div class="play"></div>
  3448.         </div>
  3449.         
  3450.         <!-- ### Pause ### -->
  3451.         <div class="icon">
  3452.                 <div class="pause"></div>
  3453.         </div>
  3454.         
  3455.         <!-- ### Forward ### -->
  3456.         <div class="icon">
  3457.                 <div class="forward"></div>
  3458.         </div>
  3459.         
  3460.         <!-- ### Next ### -->
  3461.         <div class="icon">
  3462.                 <div class="next"></div>
  3463.         </div>
  3464.         
  3465.         <!-- ### Rewind ### -->
  3466.         <div class="icon">
  3467.                 <div class="rewind"></div>
  3468.         </div>
  3469.         
  3470.         <!-- ### Previous ### -->
  3471.         <div class="icon">
  3472.                 <div class="previous"></div>
  3473.         </div>
  3474.         
  3475.         <!-- ### Stop ### -->
  3476.         <div class="icon">
  3477.                 <div class="stop"></div>
  3478.         </div>
  3479.         
  3480.         <!-- ### Location ### -->
  3481.         <div class="icon">
  3482.                 <div class="location"></div>
  3483.         </div>
  3484.         
  3485.         <!-- ### Clock ### -->
  3486.         <div class="icon">
  3487.                 <div class="clock"></div>
  3488.         </div>
  3489.         
  3490.         <!-- ### Clock Alt ### -->
  3491.         <div class="icon">
  3492.                 <div class="clockAlt"></div>
  3493.         </div>
  3494.         
  3495.         <!-- ### Pointer Right ### -->
  3496.         <div class="icon">
  3497.                 <div class="pointerRight"></div>
  3498.         </div>
  3499.         
  3500.         <!-- ### Pointer Top ### -->
  3501.         <div class="icon">
  3502.                 <div class="pointerTop"></div>
  3503.         </div>
  3504.         
  3505.         <!-- ### Pointer Left ### -->
  3506.         <div class="icon">
  3507.                 <div class="pointerLeft"></div>
  3508.         </div>
  3509.         
  3510.         <!-- ### Pointer Down ### -->
  3511.         <div class="icon">
  3512.                 <div class="pointerDown"></div>
  3513.         </div>
  3514.         
  3515.         <!-- ### Signals ### -->
  3516.         <div class="icon">
  3517.                 <div class="signal1"></div>
  3518.                 <div class="signal2"></div>
  3519.         </div>
  3520.         
  3521.         <!-- ### Graph2 ### -->
  3522.         <div class="icon">
  3523.                 <div class="base"></div>
  3524.                 <div class="bars2"></div>
  3525.         </div>
  3526.         
  3527.         <!-- ### Ribbon ### -->
  3528.         <div class="icon">
  3529.                 <div class="ribbon"></div>
  3530.         </div>
  3531.         
  3532.         <!-- ### Video Cam ### -->
  3533.         <div class="icon">
  3534.                 <div class="videoCam"></div>
  3535.         </div>
  3536.         
  3537.         <!-- ### Star ### -->
  3538.         <div class="icon">
  3539.                 <div class="star"></div>
  3540.         </div>
  3541.         
  3542.         <!-- ### HeadPhones ### -->
  3543.         <div class="icon">
  3544.                 <div class="headphones"></div>
  3545.         </div>
  3546.         
  3547.         <!-- ### Capsule ### -->
  3548.         <div class="icon">
  3549.                 <div class="capsule"></div>
  3550.         </div>
  3551.         
  3552.         <!-- ### Microphone ### -->
  3553.         <div class="icon">
  3554.                 <div class="mic"></div>
  3555.                 <div class="holder"></div>
  3556.         </div>
  3557.         
  3558.         <!-- ### Tower ### -->
  3559.         <div class="icon">
  3560.                 <div class="tower"></div>
  3561.                 <div class="waves"></div>
  3562.         </div>
  3563.         
  3564.         <!-- ### IceCream ### -->
  3565.         <div class="icon">
  3566.                 <div class="icecream"></div>
  3567.         </div>
  3568.         
  3569.         <!-- ### Golf ### -->
  3570.         <div class="icon">
  3571.                 <div class="golf_stick"></div>
  3572.                 <div class="golf_ball"></div>
  3573.         </div>
  3574.         
  3575.         <!-- ### PolyBag ### -->
  3576.         <div class="icon">
  3577.                 <div class="polybag"></div>
  3578.         </div>
  3579.         
  3580.         <!-- ### BriefCase ### -->
  3581.         <div class="icon">
  3582.                 <div class="briefcase_handle"></div>
  3583.                 <div class="briefcase"></div>
  3584.         </div>
  3585.         
  3586.         <!-- ### Roller ### -->
  3587.         <div class="icon">
  3588.                 <div class="roller_brush"></div>
  3589.                 <div class="roller_handle"></div>
  3590.         </div>
  3591.         
  3592.         <!-- ### Magnet ### -->
  3593.         <div class="icon">
  3594.                 <div class="magnet"></div>
  3595.         </div>
  3596.         
  3597.         <!-- ### Bomb ### -->
  3598.         <div class="icon">
  3599.                 <div class="bomb"></div>
  3600.         </div>
  3601.         
  3602.         <!-- ### BirdHouse ### -->
  3603.         <div class="icon">
  3604.                 <div class="birdhouse"></div>
  3605.                 <div class="birdhouse_holes"></div>
  3606.         </div>
  3607.         
  3608.         <!-- ### Woofer ### -->
  3609.         <div class="icon">
  3610.                 <div class="woofer"></div>
  3611.         </div>        
  3612.         
  3613.         <!-- ### HandBag ### -->
  3614.         <div class="icon">
  3615.                 <div class="handbag"></div>
  3616.         </div>
  3617.         
  3618.         <!-- ### Bell ### -->
  3619.         <div class="icon">
  3620.                 <div class="belltop"></div>
  3621.                 <div class="bellbottom"></div>
  3622.         </div>
  3623.         
  3624.         <!-- ### SignBoard ### -->
  3625.         <div class="icon">
  3626.                 <div class="signboard"></div>
  3627.                 <div class="signboard_arrow"></div>
  3628.         </div>
  3629.         
  3630.         <!-- ### Music Note ### -->
  3631.         <div class="icon">
  3632.                 <div class="musicnote_base"></div>
  3633.                 <div class="musicnote_left"></div>
  3634.                 <div class="musicnote_right"></div>
  3635.                 <div class="musicnote_ovals"></div>
  3636.         </div>
  3637.         
  3638.         <!-- ### Key ### -->
  3639.         <div class="icon">
  3640.                 <div class="key_base"></div>
  3641.                 <div class="key_squares"></div>
  3642.         </div>
  3643.         
  3644.         <!-- ### Download ### -->
  3645.         <div class="icon">
  3646.                 <div class="download"></div>
  3647.         </div>
  3648.         
  3649.         <!-- ### Upload ### -->
  3650.         <div class="icon">
  3651.                 <div class="upload"></div>
  3652.         </div>
  3653.         
  3654.         <!-- ### Reload ### -->
  3655.         <div class="icon">
  3656.                 <div class="reload"></div>
  3657.         </div>
  3658.         
  3659.         <!-- ### Redo ### -->
  3660.         <div class="icon">
  3661.                 <div class="redo_l"></div>
  3662.                 <div class="redo_r"></div>
  3663.         </div>
  3664.         
  3665.         
  3666.         <!-- ### LoopBack ### -->
  3667.         <div class="icon">
  3668.                 <div class="loopback_l"></div>
  3669.                 <div class="loopback_r"></div>
  3670.         </div>
  3671.         
  3672.         <!-- ### Target ### -->
  3673.         <div class="icon">
  3674.                 <div class="target"></div>
  3675.         </div>
  3676.         
  3677.         <!-- ### Lock Closed ### -->
  3678.         <div class="icon">
  3679.                 <div class="lockClosed_base"></div>
  3680.                 <div class="lockClosed_handle"></div>
  3681.         </div>
  3682.         
  3683.         <!-- ### Lock Open ### -->
  3684.         <div class="icon">
  3685.                 <div class="lockOpen_base"></div>
  3686.                 <div class="lockOpen_handle"></div>
  3687.         </div>
  3688.         
  3689.         <hr />
  3690.         <h3 style="border: none; color: #333; margin: 0;">New!</h3>
  3691.         <hr />
  3692.         
  3693.         <!-- ### Weight ### -->
  3694.         <div class="icon">
  3695.                 <div class="weight"></div>
  3696.         </div>
  3697.         
  3698.         <!-- ### Light Bulb ### -->
  3699.         <div class="icon">
  3700.                 <div class="bulb_glass"></div>
  3701.                 <div class="bulb_holder"></div>
  3702.         </div>
  3703.         
  3704.         <!-- ### Camera ### -->
  3705.         <div class="icon">
  3706.                 <div class="camera_body"></div>
  3707.                 <div class="camera_lens"></div>
  3708.         </div>
  3709.         
  3710.         <!-- ### EarBuds ### -->
  3711.         <div class="icon">
  3712.                 <div class="earbud_left"></div>
  3713.                 <div class="earbud_right"></div>
  3714.         </div>
  3715.         
  3716.         <!-- ### Restricted ### -->
  3717.         <div class="icon">
  3718.                 <div class="restricted"></div>
  3719.         </div>
  3720.         
  3721.         <!-- ### Pin ### -->
  3722.         <div class="icon">
  3723.                 <div class="pin_middle"></div>
  3724.                 <div class="pin_bottom"></div>
  3725.         </div>
  3726.         
  3727.         <!-- ### Plus ### -->
  3728.         <div class="icon">
  3729.                 <div class="plus"></div>
  3730.         </div>
  3731.         
  3732.         <!-- ### Minus ### -->
  3733.         <div class="icon">
  3734.                 <div class="minus"></div>
  3735.         </div>
  3736.         
  3737.         <!-- ### Flask ### -->
  3738.         <div class="icon">
  3739.                 <div class="flask_body"></div>
  3740.                 <div class="flask_liquid"></div>
  3741.         </div>
  3742.         
  3743.         <!-- ### Test Tube ### -->
  3744.         <div class="icon">
  3745.                 <div class="testtube_body"></div>
  3746.                 <div class="testtube_bubbles"></div>
  3747.         </div>
  3748.         
  3749.         <!-- ### DustBin ### -->
  3750.         <div class="icon">
  3751.                 <div class="dustbin"></div>
  3752.         </div>
  3753.         
  3754.         <!-- END -->
  3755. </div>
复制代码

绘制, 各种, 实用, 图标

相关帖子
回复 <

举报

提现请阅读《贡献值提现说明（申请提现须知）》,恶意提现、积分作弊直接封禁!
弹簧

5

热度

4

元宝

0

贡献

步入草根
发表于 2014-12-15 22:45:13 | 显示全部楼层
estoon5.0模板|b2b行业农业网站|绿色模版三农在线农林果木园林
回复 支持 反对

举报

返回列表 发新帖
 懒得打字嘛，点击右侧快捷回复【最新发布】   【赞助草根吧享更多权益】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

收藏帖子 返回列表 搜索

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

小黑屋|手机版|草根吧