CSS3 Monochrome Icon Set Linkable

Developer

Size

15,485 Kb

Views

32,384

CSS3 Monochrome Icon Set Linkable Previews
CSS3 Monochrome Icon Set Linkable HTML Codes
CSS3 Monochrome Icon Set Linkable CSS Codes
CSS3 Monochrome Icon Set Linkable JS Codes

How do I make an css3 monochrome icon set linkable?

A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.These are inspired by Glyphicons and Glyphish. The code belongs to cssdeck.com/labs/css3-monochrome-icon-set. What is a css3 monochrome icon set linkable? How do you make a css3 monochrome icon set linkable? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.

CSS3 Monochrome Icon Set Linkable Previews

CSS3 Monochrome Icon Set Linkable - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Monochrome Icon Set Linkable</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS3 Monochrome Icon Set Linkable</h1>
<section class="container"> <!-- ### Down Arrow ### --> <a href="#" class="icon"> <span class="downArrow"></span> </a> <!-- ### Up Arrow ### --> <a href="#" class="icon"> <span class="upArrow"></span> </a> <!-- ### Left Arrow ### --> <a href="#" class="icon"> <span class="leftArrow"></span> </a> <!-- ### Right Arrow ### --> <a href="#" class="icon"> <span class="rightArrow"></span> </a> <!-- ### Home ### --> <a href="#" class="icon"> <span class="home"></span> <span class="chimney"></span> </a> <!-- ### Disc ### --> <a href="#" class="icon"> <span class="disc"></span> </a> <!-- ### Heart ### --> <a href="#" class="icon"> <span class="heart"></span> </a> <!-- ### Pencil ### --> <a href="#" class="icon"> <span class="pencil"></span> </a> <!-- ### Chat Box ### --> <a href="#" class="icon"> <span class="chat"></span> <span class="lines"></span> </a> <!-- ### Tick ### --> <a href="#" class="icon"> <span class="tick"></span> </a> <!-- ### Cross ### --> <a href="#" class="icon"> <span class="cross"></span> </a> <!-- ### User ### --> <a href="#" class="icon"> <span class="user"></span> <span class="shoulder"></span> </a> <!-- ### Search ### --> <a href="#" class="icon"> <span class="search"></span> </a> <!-- ### Search with base ### --> <a href="#" class="icon"> <span class="searchB"></span> </a> <!-- ### Phone ### --> <a href="#" class="icon"> <span class="phone"></span> </a> <!-- ### iPod ### --> <a href="#" class="icon"> <span class="ipod"></span> </a> <!-- ### Tab ### --> <a href="#" class="icon"> <span class="tab"></span> </a> <!-- ### Graph1 ### --> <a href="#" class="icon"> <span class="graph1"></span> <span class="bars"></span> </a> <!-- ### Screen ### --> <a href="#" class="icon"> <span class="screen"></span> </a> <!-- ### Cloud ### --> <a href="#" class="icon"> <span class="cloud"></span> </a> <!-- ### Cloud-Up ### --> <a href="#" class="icon"> <span class="cloudUp"></span> <span class="cloudUpArrow"></span> </a> <!-- ### Cloud-Down ### --> <a href="#" class="icon"> <span class="cloudDown"></span> <span class="cloudDownArrow"></span> </a> <!-- ### Page ### --> <a href="#" class="icon"> <span class="page"></span> <span class="pageLines"></span> </a> <!-- ### RSS ### --> <a href="#" class="icon"> <span class="rss"></span> </a> <!-- ### Battery Full ### --> <a href="#" class="icon"> <span class="batFull"></span> </a> <!-- ### Battery Medium ### --> <a href="#" class="icon"> <span class="batMed"></span> </a> <!-- ### Battery Low ### --> <a href="#" class="icon"> <span class="batLow"></span> </a> <!-- ### Battery Empty ### --> <a href="#" class="icon"> <span class="batEmpty"></span> </a> <!-- ### Speaker Volume Full ### --> <a href="#" class="icon"> <span class="speakerVolF"></span> </a> <!-- ### Speaker Volume Half ### --> <a href="#" class="icon"> <span class="speakerVolH"></span> </a> <!-- ### Speaker Volume Mute ### --> <a href="#" class="icon"> <span class="speakerVolM"></span> </a> <!-- ### Play ### --> <a href="#" class="icon"> <span class="play"></span> </a> <!-- ### Pause ### --> <a href="#" class="icon"> <span class="pause"></span> </a> <!-- ### Forward ### --> <a href="#" class="icon"> <span class="forward"></span> </a> <!-- ### Next ### --> <a href="#" class="icon"> <span class="next"></span> </a> <!-- ### Rewind ### --> <a href="#" class="icon"> <span class="rewind"></span> </a> <!-- ### Previous ### --> <a href="#" class="icon"> <span class="previous"></span> </a> <!-- ### Stop ### --> <a href="#" class="icon"> <span class="stop"></span> </a> <!-- ### Location ### --> <a href="#" class="icon"> <span class="location"></span> </a> <!-- ### Clock ### --> <a href="#" class="icon"> <span class="clock"></span> </a> <!-- ### Clock Alt ### --> <a href="#" class="icon"> <span class="clockAlt"></span> </a> <!-- ### Pointer Right ### --> <a href="#" class="icon"> <span class="pointerRight"></span> </a> <!-- ### Pointer Top ### --> <a href="#" class="icon"> <span class="pointerTop"></span> </a> <!-- ### Pointer Left ### --> <a href="#" class="icon"> <span class="pointerLeft"></span> </a> <!-- ### Pointer Down ### --> <a href="#" class="icon"> <span class="pointerDown"></span> </a> <!-- ### Signals ### --> <a href="#" class="icon"> <span class="signal1"></span> <span class="signal2"></span> </a> <!-- ### Graph2 ### --> <a href="#" class="icon"> <span class="base"></span> <span class="bars2"></span> </a> <!-- ### Ribbon ### --> <a href="#" class="icon"> <span class="ribbon"></span> </a> <!-- ### Video Cam ### --> <a href="#" class="icon"> <span class="videoCam"></span> </a> <!-- ### Star ### --> <a href="#" class="icon"> <span class="star"></span> </a> <!-- ### HeadPhones ### --> <a href="#" class="icon"> <span class="headphones"></span> </a> <!-- ### Capsule ### --> <a href="#" class="icon"> <span class="capsule"></span> </a> <!-- ### Microphone ### --> <a href="#" class="icon"> <span class="mic"></span> <span class="holder"></span> </a> <!-- ### Tower ### --> <a href="#" class="icon"> <span class="tower"></span> <span class="waves"></span> </a> <!-- ### IceCream ### --> <a href="#" class="icon"> <span class="icecream"></span> </a> <!-- ### Golf ### --> <a href="#" class="icon"> <span class="golf_stick"></span> <span class="golf_ball"></span> </a> <!-- ### PolyBag ### --> <a href="#" class="icon"> <span class="polybag"></span> </a> <!-- ### BriefCase ### --> <a href="#" class="icon"> <span class="briefcase_handle"></span> <span class="briefcase"></span> </a> <!-- ### Roller ### --> <a href="#" class="icon"> <span class="roller_brush"></span> <span class="roller_handle"></span> </a> <!-- ### Magnet ### --> <a href="#" class="icon"> <span class="magnet"></span> </a> <!-- ### Bomb ### --> <a href="#" class="icon"> <span class="bomb"></span> </a> <!-- ### BirdHouse ### --> <a href="#" class="icon"> <span class="birdhouse"></span> <span class="birdhouse_holes"></span> </a> <!-- ### Woofer ### --> <a href="#" class="icon"> <span class="woofer"></span> </a> <!-- ### HandBag ### --> <a href="#" class="icon"> <span class="handbag"></span> </a> <!-- ### Bell ### --> <a href="#" class="icon"> <span class="belltop"></span> <span class="bellbottom"></span> </a> <!-- ### SignBoard ### --> <a href="#" class="icon"> <span class="signboard"></span> <span class="signboard_arrow"></span> </a> <!-- ### Music Note ### --> <a href="#" class="icon"> <span class="musicnote_base"></span> <span class="musicnote_left"></span> <span class="musicnote_right"></span> <span class="musicnote_ovals"></span> </a> <!-- ### Key ### --> <a href="#" class="icon"> <span class="key_base"></span> <span class="key_squares"></span> </a> <!-- ### Download ### --> <a href="#" class="icon"> <span class="download"></span> </a> <!-- ### Upload ### --> <a href="#" class="icon"> <span class="upload"></span> </a> <!-- ### Reload ### --> <a href="#" class="icon"> <span class="reload"></span> </a> <!-- ### Redo ### --> <a href="#" class="icon"> <span class="redo_l"></span> <span class="redo_r"></span> </a> <!-- ### LoopBack ### --> <a href="#" class="icon"> <span class="loopback_l"></span> <span class="loopback_r"></span> </a> <!-- ### Target ### --> <a href="#" class="icon"> <span class="target"></span> </a> <!-- ### Lock Closed ### --> <a href="#" class="icon"> <span class="lockClosed_base"></span> <span class="lockClosed_handle"></span> </a> <!-- ### Lock Open ### --> <a href="#" class="icon"> <span class="lockOpen_base"></span> <span class="lockOpen_handle"></span> </a> <!-- ### Weight ### --> <a href="#" class="icon"> <span class="weight"></span> </a> <!-- ### Light Bulb ### --> <a href="#" class="icon"> <span class="bulb_glass"></span> <span class="bulb_holder"></span> </a> <!-- ### Camera ### --> <a href="#" class="icon"> <span class="camera_body"></span> <span class="camera_lens"></span> </a> <!-- ### EarBuds ### --> <a href="#" class="icon"> <span class="earbud_left"></span> <span class="earbud_right"></span> </a> <!-- ### Restricted ### --> <a href="#" class="icon"> <span class="restricted"></span> </a> <!-- ### Pin ### --> <a href="#" class="icon"> <span class="pin_middle"></span> <span class="pin_bottom"></span> </a> <!-- ### Plus ### --> <a href="#" class="icon"> <span class="plus"></span> </a> <!-- ### Minus ### --> <a href="#" class="icon"> <span class="minus"></span> </a> <!-- ### Flask ### --> <a href="#" class="icon"> <span class="flask_body"></span> <span class="flask_liquid"></span> </a> <!-- ### Test Tube ### --> <a href="#" class="icon"> <span class="testtube_body"></span> <span class="testtube_bubbles"></span> </a> <!-- ### DustBin ### --> <a href="#" class="icon"> <span class="dustbin"></span> </a> <!-- END -->
</section> <script src="js/index.js"></script>
</body>
</html>

CSS3 Monochrome Icon Set Linkable - Script Codes CSS Codes

body { padding: 0; margin: 0; background: url(http://i.imgur.com/etE9K.png);
}
span{display:block}
h1 { font: 700 40px / 45px "Lucida Sans Unicode" !important; line-height:2em; text-align: center; color: #333; text-shadow: 1px 1px 3px rgba(255, 255, 255, 1); margin: 50px 0 50px !important;
}
section.container { width: 90% !important; margin: 0 auto 25px; text-align:center;
}
/*##### ICONS #####*/
a.icon { height: 32px; width: 32px; position: relative; overflow: hidden; display: inline-block;
}
/* Up Arrow */
a.icon span.upArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; position: absolute; bottom: 16px; left: 0;
}
a.icon span.upArrow:after { content: ''; width: 12px; height: 16px; background-color: #333; position: absolute; top: 16px; right: -6px;
}
/* Left Arrow */
a.icon span.leftArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent #333 transparent transparent; position: absolute; right: 16px; top: 0;
}
a.icon span.leftArrow:after { content: ''; width: 16px; height: 12px; background-color: #333; position: absolute; top: -6px; left: 16px;
}
/* Right Arrow */
a.icon span.rightArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent transparent #333; position: absolute; left: 16px; top: 0;
}
a.icon span.rightArrow:after { content: ''; width: 16px; height: 12px; background-color: #333; position: absolute; top: -6px; right: 16px;
}
/* Home */
a.icon span.home { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; position: absolute; bottom: 16px; left: 0;
}
a.icon span.home:after { content: ''; width: 5px; height: 16px; background-color: transparent; position: absolute; top: 16px; right: -11px; border-left: 8px solid #333; border-right: 8px solid #333;
}
a.icon span.home:before { content: ''; width: 9px; height: 6px; background-color: #333; position: absolute; top: 16px; right: -5px;
}
a.icon span.chimney { width: 4px; height: 10px; background: #333; position: absolute; right: 6px; top: 3px;
}
/* Disc */
a.icon span.disc:after { content: ''; width: 6px; height: 6px; background: transparent; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: 3px solid #333; position: absolute; left: -3px; top: -3px;
}
a.icon span.disc:before { content: ''; width: 6px; height: 6px; background: transparent; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: 13px solid #333; position: absolute; left: -13px; top: -13px; z-index: -1
}
a.icon span.disc { width: 6px; height: 6px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 10px solid #eee; position: absolute; left: 3px; top: 3px;
}
/* Heart */
a.icon span.heart { height: 26px; width: 16px; background: #333; -webkit-border-radius: 100px 100px 0 0; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; left: 5px; top: 2px;
}
a.icon span.heart:after { content: ''; height: 26px; width: 16px; background: #333; -webkit-border-radius: 100px 100px 0 0; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); position: absolute; right: -5px; bottom: -5px;
}
/* Pencil */
a.icon span.pencil { height: 23px; width: 6px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 12px; top: 6px;
}
a.icon span.pencil:after { content: ''; height: 4px; width: 6px; background: #333; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; position: absolute; top: -5px; left: 0px;
}
a.icon span.pencil:before { content: ''; width: 0px; height: 0px; border-width: 5px 3px 0 3px; border-style: solid; border-color: #333 transparent transparent transparent; position: absolute; bottom: -6px;
}
/* Chat Box */
a.icon span.chat { width: 32px; height: 22px; background: #333; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
a.icon span.chat:after { content: ''; width: 0px; height: 0px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 5px; position: absolute; top: 16px; left: 2px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);
}
a.icon span.lines { background-color: #eee; height: 2px; width: 17px; left: 5px; position: absolute; top: 5px;
}
a.icon span.lines:after { content: ''; background-color: #eee; height: 2px; width: 10px; position: absolute; top: 5px;
}
a.icon span.lines:before { content: ''; background-color: #eee; height: 2px; width: 22px; position: absolute; top: 10px;
}
/* Tick */
a.icon span.tick { width: 25px; height: 4px; background: #333; margin: 13px 0 0 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
a.icon span.tick:after { content: ''; width: 12px; height: 4px; background: #333; position: absolute; top: -4px; left: -4px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
/* Cross */
a.icon span.cross { width: 25px; height: 4px; background: #333; margin: 15px 0 0 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
a.icon span.cross:after { content: ''; width: 25px; height: 4px; background: #333; position: absolute; top: 0px; left: 0px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
/* User */
a.icon span.user { width: 12px; height: 13px; background: #333; border-radius: 5px 5px 0 0; margin-left: 10px; margin-top: 2px;
}
a.icon span.user:after { content: ''; width: 8px; height: 5px; background: #333; position: absolute; margin-top: 13px; margin-left: 2px;
}
a.icon span.user:before { content: ''; width: 0px; height: 0px; position: absolute; top: 17px; left: 0px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 16px 6px 16px;
}
a.icon span.shoulder { width: 32px; height: 5px; background: #333; position: absolute; bottom: 4px;
}
/* Search */
a.icon span.search { height: 13px; width: 13px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 4px solid #333;
}
a.icon span.search:after { content: ''; width: 4px; height: 15px; background: #333; position: absolute; bottom: 2px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px;
}
/* Search */
a.icon span.searchB { width: 32px; height: 32px; background-color: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
}
a.icon span.searchB:before { position: absolute; content: ''; height: 6px; width: 6px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 3px solid #eee; margin: 7px
}
a.icon span.searchB:after { content: ''; width: 3px; height: 11px; background: #eee; position: absolute; bottom: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 10px;
}
/* Phone */
a.icon span.phone { position: absolute; width: 20px; height: 32px; background-color: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left: 6px;
}
a.icon span.phone:before { position: absolute; content: ''; width: 16px; height: 20px; background: #eee; left: 2px; top: 5px;
}
a.icon span.phone:after { position: absolute; content: ''; background: #eee; width: 3px; height: 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 2px; left: 8px;
}
/* iPod */
a.icon span.ipod { width: 18px; height: 32px; background: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; left: 7px;
}
a.icon span.ipod:after { content: ''; position: absolute; width: 14px; height: 12px; background: #ddd; left: 2px; top: 2px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
a.icon span.ipod:before { content: ''; position: absolute; width: 6px; height: 6px; border: 3px solid #ddd; left: 3px; bottom: 3px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
}
/* Tab */
a.icon span.tab { position: absolute; width: 28px; height: 32px; background-color: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; left: 2px;
}
a.icon span.tab:before { position: absolute; content: ''; width: 24px; height: 23px; background: #eee; left: 2px; top: 2px;
}
a.icon span.tab:after { position: absolute; content: ''; background: #eee; width: 3px; height: 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 2px; left: 12px;
}
/* Graph 1 */
a.icon span.graph1 { width: 28px; height: 28px; border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; border: solid #333; border-width: 0 0 3px 3px;
}
a.icon span.bars { width: 5px; height: 10px; background: #333; position: absolute; bottom: 5px; right: 3px;
}
a.icon span.bars:before { position: absolute; content: ''; width: 5px; height: 25px; background: #333; position: absolute; right: 6px; bottom: 0px;
}
a.icon span.bars:after { position: absolute; content: ''; width: 5px; height: 18px; background: #333; position: absolute; bottom: 0px; right: 12px;
}
/* Screen */
a.icon span.screen { width: 28px; height: 24px; border: 2px solid #333; background: #eee;
}
a.icon span.screen:before { position: absolute; content: ''; width: 10px; height: 3px; background: #333; bottom: 2px; left: 11px
}
a.icon span.screen:after { position: absolute; content: ''; width: 22px; height: 2px; background: #333; bottom: 0; left: 5px;
}
/* Cloud */
a.icon span.cloud { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloud:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloud:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
/* Cloud-Up */
a.icon span.cloudUp { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloudUp:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloudUp:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
a.icon span.cloudUpArrow { height: 0px; width: 0px; border-width: 5px; border-style: solid; border-color: transparent transparent #ddd transparent; position: absolute; bottom: 12px; left: 11px;
}
a.icon span.cloudUpArrow:after { content: ''; width: 3px; height: 5px; background-color: #ddd; position: absolute; top: 4px; right: -2px;
}
/* Cloud-Down */
a.icon span.cloudDown { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloudDown:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloudDown:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
a.icon span.cloudDownArrow { height: 0px; width: 0px; border-width: 5px; border-style: solid; border-color: #ddd transparent transparent transparent; position: absolute; bottom: 3px; left: 11px;
}
a.icon span.cloudDownArrow:after { content: ''; width: 3px; height: 5px; background-color: #ddd; position: absolute; bottom: 4px; right: -2px;
}
/* Page */
a.icon span.page { width: 20px; height: 28px; background: #eee; margin-left: 4px; border: 2px solid #333;
}
a.icon span.page:before { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 5px 2px 0 2px;
}
a.icon span.page:after { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 9px 2px 0 2px;
}
a.icon span.pageLines { height: 2px; width: 16px; position: absolute; left: 8px; top: 15px; background: #333;
}
a.icon span.pageLines:after { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 4px 0 0 0;
}
a.icon span.pageLines:before { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 8px 0 0 0;
}
/* RSS */
a.icon span.rss { width: 6px; height: 6px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background: #333; position: absolute; bottom: 2px; left: 2px;
}
a.icon span.rss:after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 0 60px 0 0; -moz-border-radius: 0 60px 0 0; -webkit-border-radius: 0 60px 0 0; border-style: double; border-width: 15px 15px 0 0; border-color: #333; top: -22px; left: 0;
}
/* Battery Full */
a.icon span.batFull { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batFull:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batFull:before { content: ''; position: absolute; height: 9px; width: 21px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Medium */
a.icon span.batMed { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batMed:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batMed:before { content: ''; position: absolute; height: 9px; width: 10px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Low */
a.icon span.batLow { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batLow:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batLow:before { content: ''; position: absolute; height: 9px; width: 3px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Empty */
a.icon span.batEmpty { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batEmpty:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
/* Speaker Volume Full */
a.icon span.speakerVolF { width: 10px; height: 10px; background: #333; margin: 12px 0 0 2px;
}
a.icon span.speakerVolF:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -13px; top: 5px;
}
a.icon span.speakerVolF:before { content: ''; position: absolute; width: 5px; height: 5px; border-style: double; border-color: #333; border-width: 8px 8px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 19px; top: 11px;
}
/* Speaker Volume Half */
a.icon span.speakerVolH { width: 10px; height: 10px; background: #333; margin: 12px 0 0 4px;
}
a.icon span.speakerVolH:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -11px; top: 5px;
}
a.icon span.speakerVolH:before { content: ''; position: absolute; width: 5px; height: 5px; border-style: solid; border-color: #333; border-width: 3px 3px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 21px; top: 13px;
}
/* Speaker Volume Mute */
a.icon span.speakerVolM { width: 10px; height: 10px; background: #333; margin: 12px 0 0 7px;
}
a.icon span.speakerVolM:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -8px; top: 5px;
}
/* Play */
a.icon span.play { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 11px;
}
/* Pause */
a.icon span.pause { width: 2px; height: 16px; border: 4px solid #333; border-top: none; border-bottom: none; margin: 8px 0 0 11px;
}
/* Forward */
a.icon span.forward { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 5px;
}
a.icon span.forward:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 17px; left: 0; top: 0
}
/* Next */
a.icon span.next { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 2px;
}
a.icon span.next:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 14px; left: 0; top: 0
}
a.icon span.next:before { content: ''; position: absolute; background: #333; width: 4px; height: 16px; left: 0; top: 0; margin: 8px 0 0 26px;
}
/* Rewind */
a.icon span.rewind { width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 -5px;
}
a.icon span.rewind:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 7px; left: 0; top: 0
}
/* Previous */
a.icon span.previous { width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 -2px;
}
a.icon span.previous:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 10px; left: 0; top: 0
}
a.icon span.previous:before { content: ''; position: absolute; background: #333; width: 4px; height: 16px; left: 0; top: 0; margin: 8px 0 0 2px;
}
/* Stop */
a.icon span.stop { width: 16px; height: 16px; margin: 8px 0 0 8px; background: #333;
}
/* Location */
a.icon span.location { width: 0px; height: 0px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 16px 8px 8px 8px; margin: 15px 0 0 8px;
}
a.icon span.location:after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: #333; left: 7px; top: 2px;
}
a.icon span.location:before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: #ddd; left: 12px; top: 7px; z-index: 2;
}
/* Clock */
a.icon span.clock { width: 4px; height: 6px; border: solid #333; border-width: 0 0 3px 3px; margin: 9px 0 0 14px
}
a.icon span.clock:after { content: ''; position: absolute; width: 18px; height: 18px; border: 4px solid #333; border-radius: 50px; top: 3px; left: 3px;
}
/* Clock Alt */
a.icon span.clockAlt { width: 18px; height: 18px; border: 4px solid #333; border-radius: 50px; margin-top: 3px; margin-left: 3px;
}
a.icon span.clockAlt:after { content: ''; position: absolute; width: 4px; height: 5px; border: solid #ddd; border-width: 0 0 2px 2px; top: 11px; left: 15px;
}
a.icon span.clockAlt:before { content: ''; position: absolute; width: 16px; height: 16px; background: #333; border-radius: 50px; left: 8px; top: 8px;
}
/* Pointer Right */
a.icon span.pointerRight { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: 8px 0 0 5px;
}
/* Pointer Top */
a.icon span.pointerTop { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin: 10px 0 0 8px;
}
/* Pointer Left */
a.icon span.pointerLeft { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); margin: 8px 0 0 5px;
}
/* Pointer Down */
a.icon span.pointerDown { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); margin: 5px 0 0 8px;
}
/* Signals */
a.icon span.signal1 { width: 5px; height: 5px; background: #333; position: absolute; bottom: 0; left: 1px
}
a.icon span.signal1:after { content: ''; position: absolute; width: 5px; height: 9px; background: #333; left: 6px; bottom: 0;
}
a.icon span.signal1:before { content: ''; position: absolute; width: 5px; height: 14px; background: #333; left: 12px; bottom: 0;
}
a.icon span.signal2 { width: 5px; height: 22px; background: #333; position: absolute; bottom: 0; left: 19px
}
a.icon span.signal2:after { content: ''; position: absolute; width: 5px; height: 32px; background: #333; left: 6px; bottom: 0;
}
/* Graph 2 */
a.icon span.base { width: 5px; height: 8px; background: #333; position: absolute; bottom: 3px; left: 4px
}
a.icon span.base:after { content: ''; position: absolute; width: 5px; height: 13px; background: #333; left: 6px; bottom: 0;
}
a.icon span.base:before { content: ''; position: absolute; width: 5px; height: 25px; background: #333; left: 12px; bottom: 0;
}
a.icon span.bars2 { width: 5px; height: 18px; background: #333; position: absolute; bottom: 3px; left: 22px
}
a.icon span.bars2:after { content: ''; position: absolute; width: 32px; height: 2px; background: #333; left: -22px; bottom: 0px;
}
/* Ribbon */
a.icon span.ribbon { width: 12px; height: 20px; background: #333; margin: 2px 0 0 10px
}
a.icon span.ribbon:after { content: ''; position: absolute; left: 10px; top: 16px; width: 0; height: 0; border: solid #333; border-color: transparent #333 transparent #333; border-width: 6px 6px 8px 6px;
}
/* Video Cam */
a.icon span.videoCam { width: 18px; height: 16px; background: #333; margin: 8px 0 0 3px
}
a.icon span.videoCam:after { content: ''; position: absolute; left: 14px; top: 10px; width: 0; height: 0; border: solid #333; border-color: transparent #333 transparent transparent; border-width: 6px 8px 6px 6px;
}
/* Star */
a.icon span.star { margin: 13px 0; position: relative; display: block; width: 0px; height: 0px; border-right: 17px solid transparent; border-bottom: 10px solid #333; border-left: 16px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);
}
a.icon span.star:before { border-bottom: 12px solid #333; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; height: 0; width: 0; top: -9px; left: -10px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);
}
a.icon span.star:after { position: absolute; display: block; top: 0px; left: -17px; width: 0px; height: 0px; border-right: 17px solid transparent; border-bottom: 10px solid #333; border-left: 16px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';
}
/* Headphones */
a.icon span.headphones { width: 26px; border: 3px solid #333; height: 23px; border-radius: 50px 50px 0 0; border-bottom: none; margin: 1px 0 0 0;
}
a.icon span.headphones:before { position: absolute; content: ''; top: 21px; left: 4px; width: 5px; height: 10px; background: #333; border-radius: 0 2px 2px 0;
}
a.icon span.headphones:after { position: absolute; content: ''; top: 21px; left: 23px; width: 5px; height: 10px; background: #333; border-radius: 2px 0 0 2px;
}
/* Capsule */
a.icon span.capsule { width: 13px; background: #333; height: 15px; border-radius: 50px 50px 0 0; position: absolute; top: 5px; left: 13px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
a.icon span.capsule:before { position: absolute; content: ''; width: 13px; background: #333; height: 10px; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; top: 16px; left: 0
}
/* Microphone */
a.icon span.mic { width: 10px; background: #333; height: 10px; border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; position: absolute; top: 2px; left: 11px;
}
a.icon span.mic:after { position: absolute; content: ''; width: 10px; background: #333; height: 10px; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; top: 11px; left: 0
}
a.icon span.holder { position: absolute; height: 11px; width: 12px; left: 8px; top: 13px; border: 2px solid #333; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-top: none;
}
a.icon span.holder:after { content: ''; position: absolute; width: 4px; height: 3px; background: #333; top: 13px; left: 4px;
}
a.icon span.holder:before { content: ''; position: absolute; width: 8px; height: 2px; background: #333; bottom: -6px; left: 2px;
}
/* Tower */
a.icon span.tower { width: 0px; height: 0px; position: absolute; bottom: 1px; left: 13px; border: solid #333; border-color: transparent transparent #333 transparent; border-width: 0px 3px 22px 3px;
}
a.icon span.tower:after { position: absolute; content: ''; width: 4px; height: 4px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #333; left: -2px; top: 0;
}
a.icon span.waves { position: absolute; content: ''; width: 8px; height: 8px; border-color: #333; border-style: double; border-width: 6px 6px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; left: 17px; top: 4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
a.icon span.waves:after { position: absolute; content: ''; width: 8px; height: 8px; border-color: #333; border-style: double; border-width: 6px 6px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; left: -11px; top: 5px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);
}
/* IceCream */
a.icon span.icecream { width: 20px; height: 25px; background: #333; -webkit-border-radius: 50px 50px 10px 10px; -moz-border-radius: 50px 50px 10px 10px; border-radius: 50px 50px 10px 10px; position: absolute; top: 0; left: 6px;
}
a.icon span.icecream:after { content: ''; position: absolute; bottom: -7px; left: 8px; width: 4px; height: 7px; background: #333;
}
/* Golf */
a.icon span.golf_stick { width: 2px; height: 25px; background: #333; -webkit-border-radius: 50px 50px 10px 10px; -moz-border-radius: 50px 50px 10px 10px; border-radius: 50px 50px 10px 10px; position: absolute; bottom: 2px; left: 15px;
}
a.icon span.golf_stick:after { content: ''; position: absolute; bottom: 0px; left: -3px; width: 8px; height: 2px; background: #333;
}
a.icon span.golf_ball { position: absolute; left: 9px; top: 2px; width: 14px; height: 14px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
a.icon span.golf_ball:after { content: ''; position: absolute; top: 3px; left: 3px; background: #ddd; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 3px; height: 3px;
}
/* PolyBag */
a.icon span.polybag { width: 32px; height: 16px; background: #333; position: absolute; top: 8px; left: 0;
}
a.icon span.polybag:after { content: ''; position: absolute; left: 0; bottom: -7px; height: 6px; width: 32px; background: #333; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
}
a.icon span.polybag:before { content: ''; position: absolute; top: -7px; left: 9px; width: 10px; height: 10px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
/* BriefCase */
a.icon span.briefcase { width: 18px; height: 23px; background: #333; position: absolute; top: 7px; left: 7px;
}
a.icon span.briefcase:after { content: ''; position: absolute; left: -7px; bottom: 0px; height: 23px; width: 6px; background: #333; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
}
a.icon span.briefcase:before { content: ''; position: absolute; right: -7px; bottom: 0px; height: 23px; width: 6px; background: #333; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
}
a.icon span.briefcase_handle { position: absolute; left: 9px; top: 2px; width: 10px; height: 3px; border: 2px solid #333; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
}
/* Roller */
a.icon span.roller_brush { position: absolute; top: 0; left: 0; width: 29px; height: 10px; background: #333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
a.icon span.roller_brush:after { content: ''; position: absolute; right: -3px; top: 3px; height: 6px; width: 15px; border: 2px solid #333; border-left: none;
}
a.icon span.roller_handle { position: absolute; width: 4px; position: absolute; left: 14px; bottom: 0; height: 17px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #333;
}
a.icon span.roller_handle:before { content: ''; position: absolute; width: 2px; top: -2px; height: 4px; left: 1px; background: #333;
}
/* Magnet */
a.icon span.magnet { position: absolute; bottom: 2px; left: 2px; width: 16px; height: 15px; border: 6px solid #333; border-top: none; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px; border-radius: 0 0 30px 30px;
}
a.icon span.magnet:after { content: ''; position: absolute; right: -6px; top: -7px; width: 6px; height: 6px; background: #333;
}
a.icon span.magnet:before { content: ''; position: absolute; left: -6px; top: -7px; width: 6px; height: 6px; background: #333;
}
/* Bomb */
a.icon span.bomb { position: absolute; bottom: 0; left: 4px; width: 24px; height: 24px; background: #333; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
a.icon span.bomb:after { content: ''; position: absolute; top: -1px; left: 8px; width: 8px; background: #333; height: 3px;
}
a.icon span.bomb:before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 15px; border: 2px solid #333; border-right: none; -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; left: 11px; top: -8px;
}
/* BirdHouse */
a.icon span.birdhouse { width: 0; height: 0; position: absolute; top: 0; left: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 16px 14px;
}
a.icon span.birdhouse:after { content: ''; position: absolute; top: 14px; left: -12px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 100px 12px;
}
a.icon span.birdhouse_holes { width: 12px; height: 12px; background: #ddd; position: absolute; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; left: 10px; top: 8px;
}
a.icon span.birdhouse_holes:after { content: ''; position: absolute; width: 4px; height: 4px; background: #ccc; bottom: -8px; left: 4px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px;
}
/* Woofer */
a.icon span.woofer { width: 22px; height: 32px; position: absolute; top: 0; left: 5px; background: #333; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
}
a.icon span.woofer:after { content: ''; position: absolute; width: 2px; height: 2px; background: #333; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border: 2px solid #ddd; left: 8px; top: 5px;
}
a.icon span.woofer:before { content: ''; position: absolute; width: 4px; height: 4px; background: #333; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border: 5px solid #ddd; left: 4px; top: 14px;
}
/* HandBag */
a.icon span.handbag { position: absolute; top: 13px; left: 1px; height: 0; width: 24px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 3px 16px;
}
a.icon span.handbag:after { content: ''; position: absolute; left: 0; top: -3px; height: 3px; width: 24px; background: #333;
}
a.icon span.handbag:before { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: -10px; left: 2px;
}
/* Bell */
a.icon span.belltop { position: absolute; width: 6px; height: 6px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: 11px;
}
a.icon span.belltop:after { content: ''; position: absolute; top: 1px; width: 20px; height: 20px; background: #333; left: -7px; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0;
}
a.icon span.belltop:before { content: ''; position: absolute; left: -11px; top: 14px; width: 20px; height: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 4px 9px;
}
a.icon span.bellbottom { position: absolute; bottom: 5px; left: 2px; width: 28px; height: 2px; background: #333;
}
a.icon span.bellbottom:after { content: ''; position: absolute; width: 6px; height: 3px; background: #333; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; top: 3px; left: 5px;
}
/* SignBoard */
a.icon span.signboard { position: absolute; top: 3px; left: 2px; width: 28px; height: 18px; background: #333;
}
a.icon span.signboard:after { content: ''; position: absolute; height: 8px; width: 4px; background: #333; bottom: -8px; left: 12px;
}
a.icon span.signboard_arrow { width: 6px; height: 4px; background: #ddd; position: absolute; top: 10px; left: 10px;
}
a.icon span.signboard_arrow:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ddd; border-width: 6px; right: -12px; top: -4px;
}
/* Music Note */
a.icon span.musicnote_base { width: 14px; height: 4px; background: #333; position: absolute; top: 5px; left: 12px; -webkit-transform: skew(0, -10deg); -moz-transform: skew(0, -10deg); -ms-transform: skew(0, -10deg); -o-transform: skew(0, -10deg); transform: skew(0, -10deg);
}
a.icon span.musicnote_left { position: absolute; top: 8px; left: 12px; width: 2px; height: 16px; background: #333;
}
a.icon span.musicnote_right { position: absolute; top: 5px; right: 6px; width: 2px; height: 17px; background: #333;
}
a.icon span.musicnote_ovals { position: absolute; width: 8px; height: 6px; background: #333; -webkit-border-radius: 12px / 8px; -moz-border-radius: 12px / 8px; border-radius: 12px / 8px; bottom: 4px; left: 6px;
}
a.icon span.musicnote_ovals:after { content: ''; position: absolute; width: 8px; height: 6px; background: #333; -webkit-border-radius: 12px / 8px; -moz-border-radius: 12px / 8px; border-radius: 12px / 8px; bottom: 3px; left: 12px;
}
/* Key */
a.icon span.key_base { width: 22px; height: 22px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: absolute; top: 0; left: 0;
}
a.icon span.key_base:after { content: ''; position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #ddd;
}
a.icon span.key_base:before { content: ''; position: absolute; height: 12px; width: 5px; border-top: 6px solid #333; border-right: 3px solid #333; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); left: 18px; top: 14px;
}
a.icon span.key_squares { width: 6px; height: 6px; background: #333; position: absolute; top: 18px; left: 17px;
}
a.icon span.key_squares:after { content: ''; width: 6px; height: 6px; background: #333; position: absolute; top: 4px; left: 4px;
}
a.icon span.key_squares:before { content: ''; width: 6px; height: 6px; background: #333; position: absolute; top: 8px; left: 8px;
}
/* Download */
a.icon span.download { width: 24px; height: 8px; border: 4px solid #333; border-top: none; position: absolute; bottom: 3px;
}
a.icon span.download:after { width: 0px; height: 0px; content: ''; position: absolute; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 8px; left: 4px; top: -4px;
}
a.icon span.download:before { content: ''; position: absolute; width: 7px; height: 10px; background: #333; top: -14px; left: 9px;
}
/* Upload */
a.icon span.upload { width: 24px; height: 8px; border: 4px solid #333; border-top: none; position: absolute; bottom: 3px;
}
a.icon span.upload:after { width: 0px; height: 0px; content: ''; position: absolute; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 8px; left: 4px; top: -22px;
}
a.icon span.upload:before { content: ''; position: absolute; width: 7px; height: 10px; background: #333; top: -6px; left: 9px;
}
/* Reload */
a.icon span.reload { width: 18px; height: 9px; border-style: solid; border-width: 0px 4px 4px 4px; border-color: #333; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; position: absolute; top: 18px; left: 2px;
}
a.icon span.reload:after { content: ''; width: 9px; height: 9px; border-style: solid; border-width: 4px 0 0 4px; border-color: #333; -webkit-border-radius: 50px 0 0 0; -moz-border-radius: 50px 0 0 0; border-radius: 50px 0 0 0; position: absolute; left: -4px; bottom: 9px;
}
a.icon span.reload:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: transparent transparent transparent #333; bottom: 14px; left: 9px;
}
/* LoopBack */
a.icon span.loopback_l { width: 10px; height: 5px; border-style: solid; border-width: 0px 3px 3px 3px; border-color: #333; border-radius: 0 0 50px 50px; position: absolute; top: 16px; left: 1px;
}
a.icon span.loopback_l:after { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 3px 0 0 3px; border-color: #333; border-radius: 50px 0 0 0; position: absolute; left: -3px; bottom: 5px;
}
a.icon span.loopback_l:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 4px; border-color: transparent transparent transparent #333; bottom: 7px; left: 5px;
}
a.icon span.loopback_r { width: 10px; height: 5px; border-style: solid; border-width: 3px 3px 0 3px; border-color: #333; border-radius: 50px 50px 0 0; position: absolute; top: 8px; right: 2px;
}
a.icon span.loopback_r:after { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 0 3px 3px 0; border-color: #333; border-radius: 0 0 50px 0; position: absolute; left: 5px; top: 5px;
}
a.icon span.loopback_r:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 4px; border-color: transparent #333 transparent transparent; top: 7px; right: 5px;
}
/* Redo */
a.icon span.redo_l { width: 8px; height: 8px; border-style: solid; border-width: 0px 0px 4px 4px; border-color: #333; -webkit-border-radius: 0 0 0 50px; -moz-border-radius: 0 0 0 50px; border-radius: 0 0 0 50px; position: absolute; bottom: 4px; left: 4px;
}
a.icon span.redo_l:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: transparent transparent #333 transparent; bottom: 8px; left: -8px;
}
a.icon span.redo_r { width: 8px; height: 8px; border-style: solid; border-width: 4px 4px 0 0; border-color: #333; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; position: absolute; top: 4px; right: 4px;
}
a.icon span.redo_r:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: #333 transparent transparent transparent; top: 8px; right: -8px;
}
/* Target */
a.icon span.target { width: 15px; height: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border: 8px double #333; position: absolute; top: 0px; left: 0px;
}
a.icon span.target:after { content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 11px; height: 11px; background: #333; left: 2px; top: 2px;
}
/* Lock Open */
a.icon span.lockClosed_base { width: 20px; height: 16px; background: #333; position: absolute; left: 6px; top: 12px;
}
a.icon span.lockClosed_base:after { content: ''; position: absolute; background: #ddd; width: 4px; height: 4px; left: 8px; top: 5px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;
}
a.icon span.lockClosed_base:before { content: ''; position: absolute; background: #ddd; width: 2px; height: 4px; left: 9px; top: 8px;
}
a.icon span.lockClosed_handle { width: 10px; height: 7px; border: 2px solid #333; border-bottom: none; -webkit-border-radius: 40px 40px 0 0; -moz-border-radius: 40px 40px 0 0; border-radius: 40px 40px 0 0; position: absolute; left: 9px; top: 3px;
}
/* Lock Open */
a.icon span.lockOpen_base { width: 20px; height: 16px; background: #333; position: absolute; left: 2px; top: 12px;
}
a.icon span.lockOpen_base:after { content: ''; position: absolute; background: #ddd; width: 4px; height: 4px; left: 8px; top: 5px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;
}
a.icon span.lockOpen_base:before { content: ''; position: absolute; background: #ddd; width: 2px; height: 4px; left: 9px; top: 8px;
}
a.icon span.lockOpen_handle { width: 10px; height: 7px; border: 2px solid #333; border-bottom: none; -webkit-border-radius: 40px 40px 0 0; -moz-border-radius: 40px 40px 0 0; border-radius: 40px 40px 0 0; position: absolute; left: 17px; top: 3px;
}
/* Weight */
a.icon span.weight { width: 22px; height: 0; position: absolute; border-style: solid; border-width: 0px 5px 15px 5px; border-color: transparent transparent #333 transparent; top: 14px; left: 0;
}
a.icon span.weight:after { content: ''; position: absolute; top: -12px; left: 4px; width: 6px; height: 6px; border: 4px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
/* Light Bulb */
a.icon span.bulb_glass { width: 22px; height: 22px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: absolute; left: 5px; top: 1px
}
a.icon span.bulb_glass:after { content: ''; position: absolute; width: 8px; height: 8px; background: #333; bottom: -2px; left: 7px;
}
a.icon span.bulb_holder { width: 8px; height: 1px; background: #333; position: absolute; left: 12px; bottom: 5px;
}
a.icon span.bulb_holder:after { content: ''; width: 8px; height: 1px; background: #333; position: absolute; top: 2px; left: 0px;
}
a.icon span.bulb_holder:before { content: ''; width: 4px; height: 1px; background: #333; position: absolute; left: 2px; top: 4px;
}
/* Camera */
a.icon span.camera_body { width: 32px; height: 20px; background: #333; position: absolute; top: 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
a.icon span.camera_body:after { width: 4px; height: 2px; position: absolute; content: ''; background: #333; top: -2px; left: 5px;
}
a.icon span.camera_body:before { content: ''; position: absolute; width: 3px; height: 2px; background: #ddd; right: 3px; top: 3px;
}
a.icon span.camera_lens { width: 8px; height: 8px; border: 3px solid #ddd; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 10px; left: 9px;
}
/* EarBuds */
a.icon span.earbud_left { position: absolute; width: 7px; height: 7px; border: 1px solid #333; background: #ddd; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: 5px; top: 3px;
}
a.icon span.earbud_left:after { content: ''; position: absolute; width: 3px; height: 5px; background: #333; bottom: -5px; left: 2px;
}
a.icon span.earbud_left:before { content: ''; position: absolute; width: 1px; height: 6px; background: #333; bottom: -11px; left: 3px;
}
a.icon span.earbud_right { position: absolute; width: 7px; height: 7px; border: 1px solid #333; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; right: 5px; top: 10px;
}
a.icon span.earbud_right:after { content: ''; position: absolute; width: 3px; height: 5px; background: #333; bottom: -5px; left: 2px;
}
a.icon span.earbud_right:before { content: ''; position: absolute; width: 1px; height: 6px; background: #333; bottom: -11px; left: 3px;
}
/* Restricted */
a.icon span.restricted { width: 22px; height: 22px; border: 4px solid #333; position: absolute; top: 1px; left: 1px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
a.icon span.restricted:after { content: ''; position: absolute; width: 4px; height: 26px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 10px; top: -3px;
}
/* Pin */
a.icon span.pin_middle { width: 12px; height: 10px; background: #333; position: absolute; top: 8px; left: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
a.icon span.pin_middle:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent #ddd transparent; border-width: 0 2px 8px 0; left: 2px; top: 0px;
}
a.icon span.pin_middle:before { content: ''; position: absolute; width: 12px; height: 0; bottom: -5px; left: -2px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 2px 6px 2px;
}
a.icon span.pin_bottom { width: 14px; height: 2px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 7px; left: 16px;
}
a.icon span.pin_bottom:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 12px 2px 0 2px; top: 19px; left: 5px;
}
/* Plus */
a.icon span.plus { width: 24px; height: 4px; background: #333; position: absolute; left: 4px; top: 14px;
}
a.icon span.plus:after { content: ''; position: absolute; width: 4px; height: 24px; background: #333; left: 10px; top: -10px;
}
/* Minus */
a.icon span.minus { width: 24px; height: 4px; background: #333; position: absolute; left: 4px; top: 14px;
}
/* Flask */
a.icon span.flask_body { width: 10px; height: 2px; background: #333; position: absolute; left: 11px; top: 2px;
}
a.icon span.flask_body:after { content: ''; position: absolute; width: 6px; height: 8px; background: #333; left: 2px; top: 2px;
}
a.icon span.flask_body:before { content: ''; position: absolute; width: 6px; height: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 12px 18px 12px; top: 10px; left: -10px;
}
a.icon span.flask_liquid { width: 10px; height: 0; border-style: solid; border-color: transparent transparent #ddd transparent; border-width: 0 7px 10px 7px; position: absolute; top: 18px; left: 4px;
}
a.icon span.flask_liquid:after { width: 4px; height: 4px; background: #333; content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 4px;
}
a.icon span.flask_liquid:before { width: 2px; height: 2px; background: #333; content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 2px; left: 6px;
}
/* Test Tube */
a.icon span.testtube_body { width: 14px; height: 2px; background: #333; position: absolute; left: 9px; top: 2px;
}
a.icon span.testtube_body:after { content: ''; position: absolute; width: 10px; height: 26px; background: #333; left: 2px; top: 2px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px;
}
a.icon span.testtube_body:before { content: ''; position: absolute; width: 8px; height: 17px; background: #ddd; left: 3px; top: 10px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; z-index: 2;
}
a.icon span.testtube_bubbles { position: absolute; width: 5px; height: 5px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 22px; left: 13px; z-index: 3;
}
a.icon span.testtube_bubbles:after { content: ''; position: absolute; width: 3px; height: 3px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 6px; left: 3px; z-index: 3;
}
a.icon span.testtube_bubbles:before { content: ''; position: absolute; width: 2px; height: 2px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 10px; left: 0px; z-index: 3;
}
/* DustBin */
a.icon span.dustbin { width: 16px; height: 20px; background: #333; position: absolute; left: 8px; bottom: 3px;
}
a.icon span.dustbin:after { content: ''; position: absolute; width: 20px; height: 3px; background: #333; left: -2px; top: -4px;
}
a.icon span.dustbin:before { height: 3px; width: 6px; position: absolute; top: -6px; content: ''; background: #333; left: 5px;
}body { padding: 0; margin: 0; background: url(http://i.imgur.com/etE9K.png);
}
h1 { font: 700 40px / 25px "Calibri"; text-align: center; color: #333; text-shadow: 1px 1px 3px rgba(255, 255, 255, 1); margin: 50px 0 100px;
}
div.container { position: relative; width: 590px; margin: 0 auto;
}
div.container_d { position: relative; width: 592px; margin: 0 auto;
}
p { font-size: 13px; line-height: 18px; font-family: Arial, Helvetica, sans-serif;
}
hr { width: 592px; height: 1px; background: #888; border: none; border-bottom: 1px solid #eee; outline: none;
}
h3 { font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid #aaa; padding: 8px 0; margin: 25px 0 10px;
}
code { margin: 0; padding: 20px; background: #ddd; border: 1px solid #fff; display: block; -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}
/*##### ICONS #####*/
a.icon { height: 32px; width: 32px; position: relative; margin: 15px; overflow: hidden; display: inline-block;
}
/* Down Arrow */
a.icon span.downArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: #333 transparent transparent transparent; position: absolute; top: 16px; left: 0;
}
a.icon span.downArrow:after { content: ''; width: 12px; height: 16px; background-color: #333; position: absolute; bottom: 16px; right: -6px;
}
/* Up Arrow */
a.icon span.upArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; position: absolute; bottom: 16px; left: 0;
}
a.icon span.upArrow:after { content: ''; width: 12px; height: 16px; background-color: #333; position: absolute; top: 16px; right: -6px;
}
/* Left Arrow */
a.icon span.leftArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent #333 transparent transparent; position: absolute; right: 16px; top: 0;
}
a.icon span.leftArrow:after { content: ''; width: 16px; height: 12px; background-color: #333; position: absolute; top: -6px; left: 16px;
}
/* Right Arrow */
a.icon span.rightArrow { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent transparent #333; position: absolute; left: 16px; top: 0;
}
a.icon span.rightArrow:after { content: ''; width: 16px; height: 12px; background-color: #333; position: absolute; top: -6px; right: 16px;
}
/* Home */
a.icon span.home { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; position: absolute; bottom: 16px; left: 0;
}
a.icon span.home:after { content: ''; width: 5px; height: 16px; background-color: transparent; position: absolute; top: 16px; right: -11px; border-left: 8px solid #333; border-right: 8px solid #333;
}
a.icon span.home:before { content: ''; width: 9px; height: 6px; background-color: #333; position: absolute; top: 16px; right: -5px;
}
a.icon span.chimney { width: 4px; height: 10px; background: #333; position: absolute; right: 6px; top: 3px;
}
/* Disc */
a.icon span.disc:after { content: ''; width: 6px; height: 6px; background: transparent; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: 3px solid #333; position: absolute; left: -3px; top: -3px;
}
a.icon span.disc:before { content: ''; width: 6px; height: 6px; background: transparent; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: 13px solid #333; position: absolute; left: -13px; top: -13px; z-index: -1
}
a.icon span.disc { width: 6px; height: 6px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 10px solid #eee; position: absolute; left: 3px; top: 3px;
}
/* Heart */
a.icon span.heart { height: 26px; width: 16px; background: #333; -webkit-border-radius: 100px 100px 0 0; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; left: 5px; top: 2px;
}
a.icon span.heart:after { content: ''; height: 26px; width: 16px; background: #333; -webkit-border-radius: 100px 100px 0 0; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); position: absolute; right: -5px; bottom: -5px;
}
/* Pencil */
a.icon span.pencil { height: 23px; width: 6px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 12px; top: 6px;
}
a.icon span.pencil:after { content: ''; height: 4px; width: 6px; background: #333; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; position: absolute; top: -5px; left: 0px;
}
a.icon span.pencil:before { content: ''; width: 0px; height: 0px; border-width: 5px 3px 0 3px; border-style: solid; border-color: #333 transparent transparent transparent; position: absolute; bottom: -6px;
}
/* Chat Box */
a.icon span.chat { width: 32px; height: 22px; background: #333; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
a.icon span.chat:after { content: ''; width: 0px; height: 0px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 5px; position: absolute; top: 16px; left: 2px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);
}
a.icon span.lines { background-color: #eee; height: 2px; width: 17px; left: 5px; position: absolute; top: 5px;
}
a.icon span.lines:after { content: ''; background-color: #eee; height: 2px; width: 10px; position: absolute; top: 5px;
}
a.icon span.lines:before { content: ''; background-color: #eee; height: 2px; width: 22px; position: absolute; top: 10px;
}
/* Tick */
a.icon span.tick { width: 25px; height: 4px; background: #333; margin: 13px 0 0 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
a.icon span.tick:after { content: ''; width: 12px; height: 4px; background: #333; position: absolute; top: -4px; left: -4px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
/* Cross */
a.icon span.cross { width: 25px; height: 4px; background: #333; margin: 15px 0 0 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
a.icon span.cross:after { content: ''; width: 25px; height: 4px; background: #333; position: absolute; top: 0px; left: 0px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
/* User */
a.icon span.user { width: 12px; height: 13px; background: #333; border-radius: 5px 5px 0 0; margin-left: 10px; margin-top: 2px;
}
a.icon span.user:after { content: ''; width: 8px; height: 5px; background: #333; position: absolute; margin-top: 13px; margin-left: 2px;
}
a.icon span.user:before { content: ''; width: 0px; height: 0px; position: absolute; top: 17px; left: 0px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 16px 6px 16px;
}
a.icon span.shoulder { width: 32px; height: 5px; background: #333; position: absolute; bottom: 4px;
}
/* Search */
a.icon span.search { height: 13px; width: 13px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 4px solid #333;
}
a.icon span.search:after { content: ''; width: 4px; height: 15px; background: #333; position: absolute; bottom: 2px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px;
}
/* Search */
a.icon span.searchB { width: 32px; height: 32px; background-color: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
}
a.icon span.searchB:before { position: absolute; content: ''; height: 6px; width: 6px; background: transparent; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 3px solid #eee; margin: 7px
}
a.icon span.searchB:after { content: ''; width: 3px; height: 11px; background: #eee; position: absolute; bottom: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 10px;
}
/* Phone */
a.icon span.phone { position: absolute; width: 20px; height: 32px; background-color: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left: 6px;
}
a.icon span.phone:before { position: absolute; content: ''; width: 16px; height: 20px; background: #eee; left: 2px; top: 5px;
}
a.icon span.phone:after { position: absolute; content: ''; background: #eee; width: 3px; height: 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 2px; left: 8px;
}
/* iPod */
a.icon span.ipod { width: 18px; height: 32px; background: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; left: 7px;
}
a.icon span.ipod:after { content: ''; position: absolute; width: 14px; height: 12px; background: #ddd; left: 2px; top: 2px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
a.icon span.ipod:before { content: ''; position: absolute; width: 6px; height: 6px; border: 3px solid #ddd; left: 3px; bottom: 3px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
}
/* Tab */
a.icon span.tab { position: absolute; width: 28px; height: 32px; background-color: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; left: 2px;
}
a.icon span.tab:before { position: absolute; content: ''; width: 24px; height: 23px; background: #eee; left: 2px; top: 2px;
}
a.icon span.tab:after { position: absolute; content: ''; background: #eee; width: 3px; height: 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 2px; left: 12px;
}
/* Graph 1 */
a.icon span.graph1 { width: 28px; height: 28px; border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; border: solid #333; border-width: 0 0 3px 3px;
}
a.icon span.bars { width: 5px; height: 10px; background: #333; position: absolute; bottom: 5px; right: 3px;
}
a.icon span.bars:before { position: absolute; content: ''; width: 5px; height: 25px; background: #333; position: absolute; right: 6px; bottom: 0px;
}
a.icon span.bars:after { position: absolute; content: ''; width: 5px; height: 18px; background: #333; position: absolute; bottom: 0px; right: 12px;
}
/* Screen */
a.icon span.screen { width: 28px; height: 24px; border: 2px solid #333; background: #eee;
}
a.icon span.screen:before { position: absolute; content: ''; width: 10px; height: 3px; background: #333; bottom: 2px; left: 11px
}
a.icon span.screen:after { position: absolute; content: ''; width: 22px; height: 2px; background: #333; bottom: 0; left: 5px;
}
/* Cloud */
a.icon span.cloud { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloud:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloud:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
/* Cloud-Up */
a.icon span.cloudUp { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloudUp:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloudUp:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
a.icon span.cloudUpArrow { height: 0px; width: 0px; border-width: 5px; border-style: solid; border-color: transparent transparent #ddd transparent; position: absolute; bottom: 12px; left: 11px;
}
a.icon span.cloudUpArrow:after { content: ''; width: 3px; height: 5px; background-color: #ddd; position: absolute; top: 4px; right: -2px;
}
/* Cloud-Down */
a.icon span.cloudDown { width: 32px; height: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333; margin-top: 14px;
}
a.icon span.cloudDown:before { position: absolute; content: ''; width: 15px; height: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 7px; right: 5px;
}
a.icon span.cloudDown:after { position: absolute; content: ''; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #333; top: 9px; left: 4px;
}
a.icon span.cloudDownArrow { height: 0px; width: 0px; border-width: 5px; border-style: solid; border-color: #ddd transparent transparent transparent; position: absolute; bottom: 3px; left: 11px;
}
a.icon span.cloudDownArrow:after { content: ''; width: 3px; height: 5px; background-color: #ddd; position: absolute; bottom: 4px; right: -2px;
}
/* Page */
a.icon span.page { width: 20px; height: 28px; background: #eee; margin-left: 4px; border: 2px solid #333;
}
a.icon span.page:before { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 5px 2px 0 2px;
}
a.icon span.page:after { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 9px 2px 0 2px;
}
a.icon span.pageLines { height: 2px; width: 16px; position: absolute; left: 8px; top: 15px; background: #333;
}
a.icon span.pageLines:after { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 4px 0 0 0;
}
a.icon span.pageLines:before { position: absolute; content: ''; height: 2px; width: 16px; background: #333; margin: 8px 0 0 0;
}
/* RSS */
a.icon span.rss { width: 6px; height: 6px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background: #333; position: absolute; bottom: 2px; left: 2px;
}
a.icon span.rss:after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 0 60px 0 0; -moz-border-radius: 0 60px 0 0; -webkit-border-radius: 0 60px 0 0; border-style: double; border-width: 15px 15px 0 0; border-color: #333; top: -22px; left: 0;
}
/* Battery Full */
a.icon span.batFull { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batFull:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batFull:before { content: ''; position: absolute; height: 9px; width: 21px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Medium */
a.icon span.batMed { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batMed:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batMed:before { content: ''; position: absolute; height: 9px; width: 10px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Low */
a.icon span.batLow { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batLow:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
a.icon span.batLow:before { content: ''; position: absolute; height: 9px; width: 3px; background: #333; left: 4px; top: 4px; margin-top: 7px;
}
/* Battery Empty */
a.icon span.batEmpty { width: 23px; height: 11px; margin-top: 7px; border: 3px solid #333;
}
a.icon span.batEmpty:after { content: ''; position: absolute; height: 7px; width: 2px; background: #333; right: 1px; top: 5px; margin-top: 7px;
}
/* Speaker Volume Full */
a.icon span.speakerVolF { width: 10px; height: 10px; background: #333; margin: 12px 0 0 2px;
}
a.icon span.speakerVolF:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -13px; top: 5px;
}
a.icon span.speakerVolF:before { content: ''; position: absolute; width: 5px; height: 5px; border-style: double; border-color: #333; border-width: 8px 8px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 19px; top: 11px;
}
/* Speaker Volume Half */
a.icon span.speakerVolH { width: 10px; height: 10px; background: #333; margin: 12px 0 0 4px;
}
a.icon span.speakerVolH:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -11px; top: 5px;
}
a.icon span.speakerVolH:before { content: ''; position: absolute; width: 5px; height: 5px; border-style: solid; border-color: #333; border-width: 3px 3px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 21px; top: 13px;
}
/* Speaker Volume Mute */
a.icon span.speakerVolM { width: 10px; height: 10px; background: #333; margin: 12px 0 0 7px;
}
a.icon span.speakerVolM:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 12px 16px 12px 15px; left: -8px; top: 5px;
}
/* Play */
a.icon span.play { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 11px;
}
/* Pause */
a.icon span.pause { width: 2px; height: 16px; border: 4px solid #333; border-top: none; border-bottom: none; margin: 8px 0 0 11px;
}
/* Forward */
a.icon span.forward { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 5px;
}
a.icon span.forward:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 17px; left: 0; top: 0
}
/* Next */
a.icon span.next { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 2px;
}
a.icon span.next:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent transparent transparent #333; border-width: 8px 8px 8px 12px; margin: 8px 0 0 14px; left: 0; top: 0
}
a.icon span.next:before { content: ''; position: absolute; background: #333; width: 4px; height: 16px; left: 0; top: 0; margin: 8px 0 0 26px;
}
/* Rewind */
a.icon span.rewind { width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 -5px;
}
a.icon span.rewind:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 7px; left: 0; top: 0
}
/* Previous */
a.icon span.previous { width: 0; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 -2px;
}
a.icon span.previous:after { content: ''; position: absolute; width: 0px; height: 0; border-style: solid; border-color: transparent #333 transparent transparent; border-width: 8px 12px 8px 8px; margin: 8px 0 0 10px; left: 0; top: 0
}
a.icon span.previous:before { content: ''; position: absolute; background: #333; width: 4px; height: 16px; left: 0; top: 0; margin: 8px 0 0 2px;
}
/* Stop */
a.icon span.stop { width: 16px; height: 16px; margin: 8px 0 0 8px; background: #333;
}
/* Location */
a.icon span.location { width: 0px; height: 0px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 16px 8px 8px 8px; margin: 15px 0 0 8px;
}
a.icon span.location:after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: #333; left: 7px; top: 2px;
}
a.icon span.location:before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: #ddd; left: 12px; top: 7px; z-index: 2;
}
/* Clock */
a.icon span.clock { width: 4px; height: 6px; border: solid #333; border-width: 0 0 3px 3px; margin: 9px 0 0 14px
}
a.icon span.clock:after { content: ''; position: absolute; width: 18px; height: 18px; border: 4px solid #333; border-radius: 50px; top: 3px; left: 3px;
}
/* Clock Alt */
a.icon span.clockAlt { width: 18px; height: 18px; border: 4px solid #333; border-radius: 50px; margin-top: 3px; margin-left: 3px;
}
a.icon span.clockAlt:after { content: ''; position: absolute; width: 4px; height: 5px; border: solid #ddd; border-width: 0 0 2px 2px; top: 11px; left: 15px;
}
a.icon span.clockAlt:before { content: ''; position: absolute; width: 16px; height: 16px; background: #333; border-radius: 50px; left: 8px; top: 8px;
}
/* Pointer Right */
a.icon span.pointerRight { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: 8px 0 0 5px;
}
/* Pointer Top */
a.icon span.pointerTop { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin: 10px 0 0 8px;
}
/* Pointer Left */
a.icon span.pointerLeft { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); margin: 8px 0 0 5px;
}
/* Pointer Down */
a.icon span.pointerDown { width: 10px; height: 10px; border: solid #333; border-width: 6px 6px 0 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); margin: 5px 0 0 8px;
}
/* Signals */
a.icon span.signal1 { width: 5px; height: 5px; background: #333; position: absolute; bottom: 0; left: 1px
}
a.icon span.signal1:after { content: ''; position: absolute; width: 5px; height: 9px; background: #333; left: 6px; bottom: 0;
}
a.icon span.signal1:before { content: ''; position: absolute; width: 5px; height: 14px; background: #333; left: 12px; bottom: 0;
}
a.icon span.signal2 { width: 5px; height: 22px; background: #333; position: absolute; bottom: 0; left: 19px
}
a.icon span.signal2:after { content: ''; position: absolute; width: 5px; height: 32px; background: #333; left: 6px; bottom: 0;
}
/* Graph 2 */
a.icon span.base { width: 5px; height: 8px; background: #333; position: absolute; bottom: 3px; left: 4px
}
a.icon span.base:after { content: ''; position: absolute; width: 5px; height: 13px; background: #333; left: 6px; bottom: 0;
}
a.icon span.base:before { content: ''; position: absolute; width: 5px; height: 25px; background: #333; left: 12px; bottom: 0;
}
a.icon span.bars2 { width: 5px; height: 18px; background: #333; position: absolute; bottom: 3px; left: 22px
}
a.icon span.bars2:after { content: ''; position: absolute; width: 32px; height: 2px; background: #333; left: -22px; bottom: 0px;
}
/* Ribbon */
a.icon span.ribbon { width: 12px; height: 20px; background: #333; margin: 2px 0 0 10px
}
a.icon span.ribbon:after { content: ''; position: absolute; left: 10px; top: 16px; width: 0; height: 0; border: solid #333; border-color: transparent #333 transparent #333; border-width: 6px 6px 8px 6px;
}
/* Video Cam */
a.icon span.videoCam { width: 18px; height: 16px; background: #333; margin: 8px 0 0 3px
}
a.icon span.videoCam:after { content: ''; position: absolute; left: 14px; top: 10px; width: 0; height: 0; border: solid #333; border-color: transparent #333 transparent transparent; border-width: 6px 8px 6px 6px;
}
/* Star */
a.icon span.star { margin: 13px 0; position: relative; display: block; width: 0px; height: 0px; border-right: 17px solid transparent; border-bottom: 10px solid #333; border-left: 16px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);
}
a.icon span.star:before { border-bottom: 12px solid #333; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; height: 0; width: 0; top: -9px; left: -10px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);
}
a.icon span.star:after { position: absolute; display: block; top: 0px; left: -17px; width: 0px; height: 0px; border-right: 17px solid transparent; border-bottom: 10px solid #333; border-left: 16px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';
}
/* Headphones */
a.icon span.headphones { width: 26px; border: 3px solid #333; height: 23px; border-radius: 50px 50px 0 0; border-bottom: none; margin: 1px 0 0 0;
}
a.icon span.headphones:before { position: absolute; content: ''; top: 21px; left: 4px; width: 5px; height: 10px; background: #333; border-radius: 0 2px 2px 0;
}
a.icon span.headphones:after { position: absolute; content: ''; top: 21px; left: 23px; width: 5px; height: 10px; background: #333; border-radius: 2px 0 0 2px;
}
/* Capsule */
a.icon span.capsule { width: 13px; background: #333; height: 15px; border-radius: 50px 50px 0 0; position: absolute; top: 5px; left: 13px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
a.icon span.capsule:before { position: absolute; content: ''; width: 13px; background: #333; height: 10px; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; top: 16px; left: 0
}
/* Microphone */
a.icon span.mic { width: 10px; background: #333; height: 10px; border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; position: absolute; top: 2px; left: 11px;
}
a.icon span.mic:after { position: absolute; content: ''; width: 10px; background: #333; height: 10px; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; top: 11px; left: 0
}
a.icon span.holder { position: absolute; height: 11px; width: 12px; left: 8px; top: 13px; border: 2px solid #333; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-top: none;
}
a.icon span.holder:after { content: ''; position: absolute; width: 4px; height: 3px; background: #333; top: 13px; left: 4px;
}
a.icon span.holder:before { content: ''; position: absolute; width: 8px; height: 2px; background: #333; bottom: -6px; left: 2px;
}
/* Tower */
a.icon span.tower { width: 0px; height: 0px; position: absolute; bottom: 1px; left: 13px; border: solid #333; border-color: transparent transparent #333 transparent; border-width: 0px 3px 22px 3px;
}
a.icon span.tower:after { position: absolute; content: ''; width: 4px; height: 4px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #333; left: -2px; top: 0;
}
a.icon span.waves { position: absolute; content: ''; width: 8px; height: 8px; border-color: #333; border-style: double; border-width: 6px 6px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; left: 17px; top: 4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
a.icon span.waves:after { position: absolute; content: ''; width: 8px; height: 8px; border-color: #333; border-style: double; border-width: 6px 6px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; left: -11px; top: 5px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);
}
/* IceCream */
a.icon span.icecream { width: 20px; height: 25px; background: #333; -webkit-border-radius: 50px 50px 10px 10px; -moz-border-radius: 50px 50px 10px 10px; border-radius: 50px 50px 10px 10px; position: absolute; top: 0; left: 6px;
}
a.icon span.icecream:after { content: ''; position: absolute; bottom: -7px; left: 8px; width: 4px; height: 7px; background: #333;
}
/* Golf */
a.icon span.golf_stick { width: 2px; height: 25px; background: #333; -webkit-border-radius: 50px 50px 10px 10px; -moz-border-radius: 50px 50px 10px 10px; border-radius: 50px 50px 10px 10px; position: absolute; bottom: 2px; left: 15px;
}
a.icon span.golf_stick:after { content: ''; position: absolute; bottom: 0px; left: -3px; width: 8px; height: 2px; background: #333;
}
a.icon span.golf_ball { position: absolute; left: 9px; top: 2px; width: 14px; height: 14px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
a.icon span.golf_ball:after { content: ''; position: absolute; top: 3px; left: 3px; background: #ddd; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 3px; height: 3px;
}
/* PolyBag */
a.icon span.polybag { width: 32px; height: 16px; background: #333; position: absolute; top: 8px; left: 0;
}
a.icon span.polybag:after { content: ''; position: absolute; left: 0; bottom: -7px; height: 6px; width: 32px; background: #333; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
}
a.icon span.polybag:before { content: ''; position: absolute; top: -7px; left: 9px; width: 10px; height: 10px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
/* BriefCase */
a.icon span.briefcase { width: 18px; height: 23px; background: #333; position: absolute; top: 7px; left: 7px;
}
a.icon span.briefcase:after { content: ''; position: absolute; left: -7px; bottom: 0px; height: 23px; width: 6px; background: #333; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
}
a.icon span.briefcase:before { content: ''; position: absolute; right: -7px; bottom: 0px; height: 23px; width: 6px; background: #333; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
}
a.icon span.briefcase_handle { position: absolute; left: 9px; top: 2px; width: 10px; height: 3px; border: 2px solid #333; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
}
/* Roller */
a.icon span.roller_brush { position: absolute; top: 0; left: 0; width: 29px; height: 10px; background: #333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
a.icon span.roller_brush:after { content: ''; position: absolute; right: -3px; top: 3px; height: 6px; width: 15px; border: 2px solid #333; border-left: none;
}
a.icon span.roller_handle { position: absolute; width: 4px; position: absolute; left: 14px; bottom: 0; height: 17px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #333;
}
a.icon span.roller_handle:before { content: ''; position: absolute; width: 2px; top: -2px; height: 4px; left: 1px; background: #333;
}
/* Magnet */
a.icon span.magnet { position: absolute; bottom: 2px; left: 2px; width: 16px; height: 15px; border: 6px solid #333; border-top: none; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px; border-radius: 0 0 30px 30px;
}
a.icon span.magnet:after { content: ''; position: absolute; right: -6px; top: -7px; width: 6px; height: 6px; background: #333;
}
a.icon span.magnet:before { content: ''; position: absolute; left: -6px; top: -7px; width: 6px; height: 6px; background: #333;
}
/* Bomb */
a.icon span.bomb { position: absolute; bottom: 0; left: 4px; width: 24px; height: 24px; background: #333; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
a.icon span.bomb:after { content: ''; position: absolute; top: -1px; left: 8px; width: 8px; background: #333; height: 3px;
}
a.icon span.bomb:before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 15px; border: 2px solid #333; border-right: none; -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; left: 11px; top: -8px;
}
/* BirdHouse */
a.icon span.birdhouse { width: 0; height: 0; position: absolute; top: 0; left: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 16px 14px;
}
a.icon span.birdhouse:after { content: ''; position: absolute; top: 14px; left: -12px; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 100px 12px;
}
a.icon span.birdhouse_holes { width: 12px; height: 12px; background: #ddd; position: absolute; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; left: 10px; top: 8px;
}
a.icon span.birdhouse_holes:after { content: ''; position: absolute; width: 4px; height: 4px; background: #ccc; bottom: -8px; left: 4px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px;
}
/* Woofer */
a.icon span.woofer { width: 22px; height: 32px; position: absolute; top: 0; left: 5px; background: #333; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
}
a.icon span.woofer:after { content: ''; position: absolute; width: 2px; height: 2px; background: #333; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border: 2px solid #ddd; left: 8px; top: 5px;
}
a.icon span.woofer:before { content: ''; position: absolute; width: 4px; height: 4px; background: #333; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border: 5px solid #ddd; left: 4px; top: 14px;
}
/* HandBag */
a.icon span.handbag { position: absolute; top: 13px; left: 1px; height: 0; width: 24px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 3px 16px;
}
a.icon span.handbag:after { content: ''; position: absolute; left: 0; top: -3px; height: 3px; width: 24px; background: #333;
}
a.icon span.handbag:before { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: -10px; left: 2px;
}
/* Bell */
a.icon span.belltop { position: absolute; width: 6px; height: 6px; border: 2px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: 11px;
}
a.icon span.belltop:after { content: ''; position: absolute; top: 1px; width: 20px; height: 20px; background: #333; left: -7px; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0;
}
a.icon span.belltop:before { content: ''; position: absolute; left: -11px; top: 14px; width: 20px; height: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 4px 9px;
}
a.icon span.bellbottom { position: absolute; bottom: 5px; left: 2px; width: 28px; height: 2px; background: #333;
}
a.icon span.bellbottom:after { content: ''; position: absolute; width: 6px; height: 3px; background: #333; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; top: 3px; left: 5px;
}
/* SignBoard */
a.icon span.signboard { position: absolute; top: 3px; left: 2px; width: 28px; height: 18px; background: #333;
}
a.icon span.signboard:after { content: ''; position: absolute; height: 8px; width: 4px; background: #333; bottom: -8px; left: 12px;
}
a.icon span.signboard_arrow { width: 6px; height: 4px; background: #ddd; position: absolute; top: 10px; left: 10px;
}
a.icon span.signboard_arrow:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ddd; border-width: 6px; right: -12px; top: -4px;
}
/* Music Note */
a.icon span.musicnote_base { width: 14px; height: 4px; background: #333; position: absolute; top: 5px; left: 12px; -webkit-transform: skew(0, -10deg); -moz-transform: skew(0, -10deg); -ms-transform: skew(0, -10deg); -o-transform: skew(0, -10deg); transform: skew(0, -10deg);
}
a.icon span.musicnote_left { position: absolute; top: 8px; left: 12px; width: 2px; height: 16px; background: #333;
}
a.icon span.musicnote_right { position: absolute; top: 5px; right: 6px; width: 2px; height: 17px; background: #333;
}
a.icon span.musicnote_ovals { position: absolute; width: 8px; height: 6px; background: #333; -webkit-border-radius: 12px / 8px; -moz-border-radius: 12px / 8px; border-radius: 12px / 8px; bottom: 4px; left: 6px;
}
a.icon span.musicnote_ovals:after { content: ''; position: absolute; width: 8px; height: 6px; background: #333; -webkit-border-radius: 12px / 8px; -moz-border-radius: 12px / 8px; border-radius: 12px / 8px; bottom: 3px; left: 12px;
}
/* Key */
a.icon span.key_base { width: 22px; height: 22px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: absolute; top: 0; left: 0;
}
a.icon span.key_base:after { content: ''; position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #ddd;
}
a.icon span.key_base:before { content: ''; position: absolute; height: 12px; width: 5px; border-top: 6px solid #333; border-right: 3px solid #333; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); left: 18px; top: 14px;
}
a.icon span.key_squares { width: 6px; height: 6px; background: #333; position: absolute; top: 18px; left: 17px;
}
a.icon span.key_squares:after { content: ''; width: 6px; height: 6px; background: #333; position: absolute; top: 4px; left: 4px;
}
a.icon span.key_squares:before { content: ''; width: 6px; height: 6px; background: #333; position: absolute; top: 8px; left: 8px;
}
/* Download */
a.icon span.download { width: 24px; height: 8px; border: 4px solid #333; border-top: none; position: absolute; bottom: 3px;
}
a.icon span.download:after { width: 0px; height: 0px; content: ''; position: absolute; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 8px; left: 4px; top: -4px;
}
a.icon span.download:before { content: ''; position: absolute; width: 7px; height: 10px; background: #333; top: -14px; left: 9px;
}
/* Upload */
a.icon span.upload { width: 24px; height: 8px; border: 4px solid #333; border-top: none; position: absolute; bottom: 3px;
}
a.icon span.upload:after { width: 0px; height: 0px; content: ''; position: absolute; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 8px; left: 4px; top: -22px;
}
a.icon span.upload:before { content: ''; position: absolute; width: 7px; height: 10px; background: #333; top: -6px; left: 9px;
}
/* Reload */
a.icon span.reload { width: 18px; height: 9px; border-style: solid; border-width: 0px 4px 4px 4px; border-color: #333; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; position: absolute; top: 18px; left: 2px;
}
a.icon span.reload:after { content: ''; width: 9px; height: 9px; border-style: solid; border-width: 4px 0 0 4px; border-color: #333; -webkit-border-radius: 50px 0 0 0; -moz-border-radius: 50px 0 0 0; border-radius: 50px 0 0 0; position: absolute; left: -4px; bottom: 9px;
}
a.icon span.reload:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: transparent transparent transparent #333; bottom: 14px; left: 9px;
}
/* LoopBack */
a.icon span.loopback_l { width: 10px; height: 5px; border-style: solid; border-width: 0px 3px 3px 3px; border-color: #333; border-radius: 0 0 50px 50px; position: absolute; top: 16px; left: 1px;
}
a.icon span.loopback_l:after { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 3px 0 0 3px; border-color: #333; border-radius: 50px 0 0 0; position: absolute; left: -3px; bottom: 5px;
}
a.icon span.loopback_l:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 4px; border-color: transparent transparent transparent #333; bottom: 7px; left: 5px;
}
a.icon span.loopback_r { width: 10px; height: 5px; border-style: solid; border-width: 3px 3px 0 3px; border-color: #333; border-radius: 50px 50px 0 0; position: absolute; top: 8px; right: 2px;
}
a.icon span.loopback_r:after { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 0 3px 3px 0; border-color: #333; border-radius: 0 0 50px 0; position: absolute; left: 5px; top: 5px;
}
a.icon span.loopback_r:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 4px; border-color: transparent #333 transparent transparent; top: 7px; right: 5px;
}
/* Redo */
a.icon span.redo_l { width: 8px; height: 8px; border-style: solid; border-width: 0px 0px 4px 4px; border-color: #333; -webkit-border-radius: 0 0 0 50px; -moz-border-radius: 0 0 0 50px; border-radius: 0 0 0 50px; position: absolute; bottom: 4px; left: 4px;
}
a.icon span.redo_l:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: transparent transparent #333 transparent; bottom: 8px; left: -8px;
}
a.icon span.redo_r { width: 8px; height: 8px; border-style: solid; border-width: 4px 4px 0 0; border-color: #333; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; border-radius: 0 50px 0 0; position: absolute; top: 4px; right: 4px;
}
a.icon span.redo_r:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: #333 transparent transparent transparent; top: 8px; right: -8px;
}
/* Target */
a.icon span.target { width: 15px; height: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border: 8px double #333; position: absolute; top: 0px; left: 0px;
}
a.icon span.target:after { content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 11px; height: 11px; background: #333; left: 2px; top: 2px;
}
/* Lock Open */
a.icon span.lockClosed_base { width: 20px; height: 16px; background: #333; position: absolute; left: 6px; top: 12px;
}
a.icon span.lockClosed_base:after { content: ''; position: absolute; background: #ddd; width: 4px; height: 4px; left: 8px; top: 5px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;
}
a.icon span.lockClosed_base:before { content: ''; position: absolute; background: #ddd; width: 2px; height: 4px; left: 9px; top: 8px;
}
a.icon span.lockClosed_handle { width: 10px; height: 7px; border: 2px solid #333; border-bottom: none; -webkit-border-radius: 40px 40px 0 0; -moz-border-radius: 40px 40px 0 0; border-radius: 40px 40px 0 0; position: absolute; left: 9px; top: 3px;
}
/* Lock Open */
a.icon span.lockOpen_base { width: 20px; height: 16px; background: #333; position: absolute; left: 2px; top: 12px;
}
a.icon span.lockOpen_base:after { content: ''; position: absolute; background: #ddd; width: 4px; height: 4px; left: 8px; top: 5px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;
}
a.icon span.lockOpen_base:before { content: ''; position: absolute; background: #ddd; width: 2px; height: 4px; left: 9px; top: 8px;
}
a.icon span.lockOpen_handle { width: 10px; height: 7px; border: 2px solid #333; border-bottom: none; -webkit-border-radius: 40px 40px 0 0; -moz-border-radius: 40px 40px 0 0; border-radius: 40px 40px 0 0; position: absolute; left: 17px; top: 3px;
}
/* Weight */
a.icon span.weight { width: 22px; height: 0; position: absolute; border-style: solid; border-width: 0px 5px 15px 5px; border-color: transparent transparent #333 transparent; top: 14px; left: 0;
}
a.icon span.weight:after { content: ''; position: absolute; top: -12px; left: 4px; width: 6px; height: 6px; border: 4px solid #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
/* Light Bulb */
a.icon span.bulb_glass { width: 22px; height: 22px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: absolute; left: 5px; top: 1px
}
a.icon span.bulb_glass:after { content: ''; position: absolute; width: 8px; height: 8px; background: #333; bottom: -2px; left: 7px;
}
a.icon span.bulb_holder { width: 8px; height: 1px; background: #333; position: absolute; left: 12px; bottom: 5px;
}
a.icon span.bulb_holder:after { content: ''; width: 8px; height: 1px; background: #333; position: absolute; top: 2px; left: 0px;
}
a.icon span.bulb_holder:before { content: ''; width: 4px; height: 1px; background: #333; position: absolute; left: 2px; top: 4px;
}
/* Camera */
a.icon span.camera_body { width: 32px; height: 20px; background: #333; position: absolute; top: 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
a.icon span.camera_body:after { width: 4px; height: 2px; position: absolute; content: ''; background: #333; top: -2px; left: 5px;
}
a.icon span.camera_body:before { content: ''; position: absolute; width: 3px; height: 2px; background: #ddd; right: 3px; top: 3px;
}
a.icon span.camera_lens { width: 8px; height: 8px; border: 3px solid #ddd; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 10px; left: 9px;
}
/* EarBuds */
a.icon span.earbud_left { position: absolute; width: 7px; height: 7px; border: 1px solid #333; background: #ddd; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: 5px; top: 3px;
}
a.icon span.earbud_left:after { content: ''; position: absolute; width: 3px; height: 5px; background: #333; bottom: -5px; left: 2px;
}
a.icon span.earbud_left:before { content: ''; position: absolute; width: 1px; height: 6px; background: #333; bottom: -11px; left: 3px;
}
a.icon span.earbud_right { position: absolute; width: 7px; height: 7px; border: 1px solid #333; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; right: 5px; top: 10px;
}
a.icon span.earbud_right:after { content: ''; position: absolute; width: 3px; height: 5px; background: #333; bottom: -5px; left: 2px;
}
a.icon span.earbud_right:before { content: ''; position: absolute; width: 1px; height: 6px; background: #333; bottom: -11px; left: 3px;
}
/* Restricted */
a.icon span.restricted { width: 22px; height: 22px; border: 4px solid #333; position: absolute; top: 1px; left: 1px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
a.icon span.restricted:after { content: ''; position: absolute; width: 4px; height: 26px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 10px; top: -3px;
}
/* Pin */
a.icon span.pin_middle { width: 12px; height: 10px; background: #333; position: absolute; top: 8px; left: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
a.icon span.pin_middle:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent transparent #ddd transparent; border-width: 0 2px 8px 0; left: 2px; top: 0px;
}
a.icon span.pin_middle:before { content: ''; position: absolute; width: 12px; height: 0; bottom: -5px; left: -2px; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 2px 6px 2px;
}
a.icon span.pin_bottom { width: 14px; height: 2px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 7px; left: 16px;
}
a.icon span.pin_bottom:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 12px 2px 0 2px; top: 19px; left: 5px;
}
/* Plus */
a.icon span.plus { width: 24px; height: 4px; background: #333; position: absolute; left: 4px; top: 14px;
}
a.icon span.plus:after { content: ''; position: absolute; width: 4px; height: 24px; background: #333; left: 10px; top: -10px;
}
/* Minus */
a.icon span.minus { width: 24px; height: 4px; background: #333; position: absolute; left: 4px; top: 14px;
}
/* Flask */
a.icon span.flask_body { width: 10px; height: 2px; background: #333; position: absolute; left: 11px; top: 2px;
}
a.icon span.flask_body:after { content: ''; position: absolute; width: 6px; height: 8px; background: #333; left: 2px; top: 2px;
}
a.icon span.flask_body:before { content: ''; position: absolute; width: 6px; height: 0; border-style: solid; border-color: transparent transparent #333 transparent; border-width: 0 12px 18px 12px; top: 10px; left: -10px;
}
a.icon span.flask_liquid { width: 10px; height: 0; border-style: solid; border-color: transparent transparent #ddd transparent; border-width: 0 7px 10px 7px; position: absolute; top: 18px; left: 4px;
}
a.icon span.flask_liquid:after { width: 4px; height: 4px; background: #333; content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 4px;
}
a.icon span.flask_liquid:before { width: 2px; height: 2px; background: #333; content: ''; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 2px; left: 6px;
}
/* Test Tube */
a.icon span.testtube_body { width: 14px; height: 2px; background: #333; position: absolute; left: 9px; top: 2px;
}
a.icon span.testtube_body:after { content: ''; position: absolute; width: 10px; height: 26px; background: #333; left: 2px; top: 2px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px;
}
a.icon span.testtube_body:before { content: ''; position: absolute; width: 8px; height: 17px; background: #ddd; left: 3px; top: 10px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; border-radius: 0 0 50px 50px; z-index: 2;
}
a.icon span.testtube_bubbles { position: absolute; width: 5px; height: 5px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; top: 22px; left: 13px; z-index: 3;
}
a.icon span.testtube_bubbles:after { content: ''; position: absolute; width: 3px; height: 3px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 6px; left: 3px; z-index: 3;
}
a.icon span.testtube_bubbles:before { content: ''; position: absolute; width: 2px; height: 2px; background: #333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; bottom: 10px; left: 0px; z-index: 3;
}
/* DustBin */
a.icon span.dustbin { width: 16px; height: 20px; background: #333; position: absolute; left: 8px; bottom: 3px;
}
a.icon span.dustbin:after { content: ''; position: absolute; width: 20px; height: 3px; background: #333; left: -2px; top: -4px;
}
a.icon span.dustbin:before { height: 3px; width: 6px; position: absolute; top: -6px; content: ''; background: #333; left: 5px;
}

CSS3 Monochrome Icon Set Linkable - Script Codes JS Codes

/*
Original Pen from
http://codepen.io/pankajparashar/full/KgcFJ
A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.
These are inspired by Glyphicons and Glyphish. The code belongs to http://cssdeck.com/labs/css3-monochrome-icon-set
*/

Home Page	Home
Developer	Brad Bodine
Username	bbodine1
Uploaded	August 11, 2022
Rating	4
Size	15,485 Kb
Views	32,384

Do you need developer help for CSS3 Monochrome Icon Set Linkable?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brad Bodine (bbodine1) Script Codes

Name	Size
CSS3 Checkbox Slider	2,697 Kb
Blockequote Cite line with text	2,551 Kb
Tile Slanted Corner	2,198 Kb
Foundation Full Width Rows	2,548 Kb
SASS Color Adjustments	2,318 Kb
CSS3 Notepad	2,564 Kb
CSS Arrows	2,295 Kb
Simple JSON	2,247 Kb
Login form using HTML5 and CSS3	3,652 Kb
CSS3 Checkbox Styles	5,580 Kb

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Simple personal profile	Miroot	2,856 Kb
Fellowship of the Ring	Aussieyang	2,639 Kb
CSS Clip and Shape Module clearly	Pestov	2,640 Kb
Sticky div	Kaslab	2,225 Kb
CSS3 Button Examples	Volusion	3,377 Kb
Twinner Spinner II	Katydecorah	2,974 Kb
Sass Radar	Jlong	6,887 Kb
Hmmm...	Rk007	4,848 Kb
Highbrow Basic HTML Lesson 8	Kimlarocca	2,094 Kb
IPhone5S SVG Space Grey	Onlinechris	75,035 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!