Website Icons css3 Without Images
--------------------------------------------- DEMO ---------------------------------------------
--------------------------------------------- CSS3 ---------------------------------------------
html, body { padding:0; margin:0; font:bold 12px Arial, Helvetica, sans-serif; color:#666; background:#fff;}
a:link, a:visited {border-bottom:1px solid #666; color:#666; text-decoration:none;}a:visited {border-bottom:1px solid #000; color:#000;}
a:hover, a:focus, a:active {border:0; color:#fff; background:#666;}.container {width:540px; overflow:hidden; padding:0 0 10px; margin:0 auto 40px;}
ul { padding:0; margin:0; float:left; }
li { position:relative; z-index:1; overflow:hidden; list-style:none; padding:0; margin:0 0 0.25em; }
li a:link, li a:visited { display:block; border:0; padding-left:28px; color:#666; }
li a:hover, li a:focus, li a:active { color:#000; background:transparent; }
li:before, li:after, li a:before, li a:after { content:""; position:absolute; top:50%; left:0; }li a:before, li a:after { margin:-8px 0 0; background:#666; }
li a:hover:before, li a:focus:before, li a:active:before { background:#000; }
.player, .headphones, .ribbon, .views, .location, .info, .help, .pie, .success, .success-alt, .warning, .denied { padding-left:28px; }
.search a:before {width:6px;height:6px;border:3px solid #333;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}
.search a:after {left:10px;width:3px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}.search a:hover:before,.search a:focus:before,.search a:active:before {border-color:#730800;background:transparent;}
.search a:hover:after,.search a:focus:after,.search a:active:after {background:#730800;}
.comment a:before {width:16px;height:10px;margin-top:-8px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.comment a:after {left:8px;border:2px solid transparent;border-top-color:#333;border-left-color:#333;margin-top:2px;background:transparent;}
.comment a:hover:after,.comment a:focus:after,.comment a:active:after {border-top-color:#730800;border-left-color:#730800;}
.like a:before,.like a:after {width:14px;height:9px;margin-top:-6px;background:#333;-webkit-border-top-left-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.like a:after {left:4px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
.like a:hover:after,.like a:focus:after,.like a:active:after {background:#730800;}
.add a:before {width:16px;height:16px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.add a:after {left:3px;width:10px;height:2px;margin-top:-1px;background:#fff;}
.add:before {z-index:10;left:7px;width:2px;height:10px;margin-top:-5px;background:#fff;}
.remove a:before {width:16px;height:16px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}.remove a:after {left:3px;width:10px;height:2px;margin-top:-1px;background:#fff;}/* Alternative style */.remove-alt a:before {left:1px;width:15px;height:5px;margin-top:-2px;background:#333;}
.delete a:before {width:16px;height:16px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}.delete a:after {left:3px;width:10px;height:2px;margin-top:-1px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}.delete:before {z-index:10;left:7px;width:2px;height:10px;margin-top:-5px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.report a:before {left:3px;width:7px;height:7px;margin-top:-5px;border-width:7px 0 0 2px;border-style:solid;border-color:#333;background:transparent;-webkit-transform:skewY(-8deg);-moz-transform:skewY(-8deg);-ms-transform:skewY(-8deg);-o-transform:skewY(-8deg);transform:skewY(-8deg);}.report a:after {left:9px;width:6px;height:7px;margin-top:-3px;background:#333;-webkit-transform:skewY(-6deg);-moz-transform:skewY(-6deg);-ms-transform:skewY(-6deg);-o-transform:skewY(-6deg);transform:skewY(-6deg);}.report a:hover:before,.report a:focus:before,.report a:active:before {border-color:#730800;background:transparent;}.report a:hover:after,.report a:focus:after,.report a:active:after {background:#730800;}
.trash:after {left:6px;width:1px;height:7px;border-right:3px double #333;border-left:1px solid #333;margin-top:-2px;}.trash a:before {left:2px;width:9px;height:11px;margin-top:-6px;border:2px solid #333;background:transparent;}.trash a:after {left:5px;width:3px;height:2px;margin-top:-9px;border:2px solid #333;border-bottom:0;background:transparent;-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;}.trash:hover:after,.trash a:hover:before,.trash a:focus:before,.trash a:active:before,.trash a:hover:after,.trash a:focus:after,.trash a:active:after {border-color:#730800;background:transparent;}
.lock:before,.lock:after,.unlock:before,.unlock:after {z-index:10;left:8px;width:3px;height:3px;margin-top:-2px;background:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.lock:before,.unlock:before {left:9px;width:1px;height:4px;margin-top:0px;}.lock a:before,.unlock a:before {left:3px;width:13px;height:10px;margin-top:-4px;}.lock a:after,.unlock a:after {left:5px;width:5px;height:5px;border:2px solid #333;border-bottom:0;margin-top:-11px;background:transparent;
-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.unlock a:after {left:12px;}.lock a:hover:after,.lock a:focus:after,.lock a:active:after,.unlock a:hover:after,.unlock a:focus:after,.unlock a:active:after {border-color:#730800;}
.update:before {left:10px;border-width:2px 0 2px 2px;border-style:solid;border-color:transparent #333;margin-top:-1px;}.update a:before {left:4px;width:10px;height:10px;border:2px solid #333;margin-top:-6px;background:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.update a:after {left:10px;width:10px;height:3px;border:1px solid #fff;margin-top:-6px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}.update:hover:before {border-left-color:#730800;}.update a:hover:before,.update a:focus:before,.update a:active:before {border-color:#730800;background:transparent;}.update a:hover:after,.update a:focus:after,.update a:active:after {background:#730800;}
.retweet:before,.retweet a:before {border-style:solid;border-color:transparent;background:transparent;}.retweet:before {z-index:-1;left:12px;margin-top:2px;border-width:5px 5px 0;border-left-color:#fff;border-top-color:#333;}.retweet a:before {left:-1px;margin-top:-7px;border-width:0 5px 5px;border-right-color:#fff;border-bottom-color:#333;}.retweet a:after {z-index:-2;left:3px;width:10px;height:6px;margin-top:-6px;border:3px solid #333;background:transparent;}.retweet:hover:before {border-top-color:#730800;}.retweet a:hover:before,.retweet a:focus:before,.retweet a:active:before {border-bottom-color:#730800;background:transparent;}.retweet a:hover:after,.retweet a:focus:after,.retweet a:active:after {border-color:#730800;}
.save:before,.save a:before {left:6px;border-width:10px 0 10px 8px;border-style:solid;border-color:transparent #333;margin-top:-9px;background:transparent;-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);-o-transform:rotate(22.5deg);transform:rotate(22.5deg);}.save a:before {left:6px;-webkit-transform:rotate(157.5deg);-moz-transform:rotate(157.5deg);-ms-transform:rotate(157.5deg);-o-transform:rotate(157.5deg);transform:rotate(157.5deg);}.save a:after {border-width:8px 10px 0;border-style:solid;border-color:#333 transparent;margin-top:-3px;background:transparent;}.save:hover:before,.save:focus:before,.save:active:before,.save a:hover:before,.save a:focus:before,.save a:active:before {border-left-color:#730800;background:transparent;}.save a:hover:after,.save a:focus:after,.save a:active:after {border-top-color:#730800;background:transparent;}/.edit a:before {left:3px;width:5px;height:5px;margin-top:2px;background:#333;-webkit-transform:skew(-10deg, -10deg);-moz-transform:skew(-10deg, -10deg);-ms-transform:skew(-10deg, -10deg);-o-transform:skew(-10deg, -10deg);transform:skew(-10deg, -10deg);}.edit a:after {left:3px;width:13px;height:6px;border-left:1px solid #fff;margin-top:-3px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}.edit a:hover:before,.edit a:focus:before,.edit a:active:before,.edit a:hover:after,.edit a:focus:after,.edit a:active:after {background:#730800;}
.download a:before {width:14px;height:8px;border:3px solid #333;border-top:0;margin-top:-5px;background:transparent;}.download a:after {left:5px;border-width:5px 5px 0;border-style:solid;border-color:#333 transparent;margin-top:-5px;background:transparent;}.download a:hover:before,.download a:focus:before,.download a:active:before {border-color:#730800;background:transparent;}.download a:hover:after,.download a:focus:after,.download a:active:after {border-color:#730800 transparent;}
.arrow a:before {width:16px;height:16px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.arrow a:after {left:8px;border-width:5px 0 5px 6px;border-style:solid;border-color:transparent #fff;margin-top:-5px;background:transparent;}
.arrow:before {z-index:10;left:3px;width:5px;height:4px;margin-top:-2px;background:#fff;}.arrow.back a:after {left:2px;border-width:5px 6px 5px 0;}
.arrow.back:before {left:8px;}.arrow.up a:after,.arrow.down a:after {left:3px;border-width:0 5px 6px;border-color:#fff transparent;margin-top:-6px;}
.home a:before {left:1px;border-style:solid;border-color:transparent;border-width:8px 7px;border-bottom-color:#666;margin-top:-16px;background:transparent;}
.home a:after {left:3px;width:2px;height:4px;border-style:solid;border-color:#666 #666 transparent;border-width:3px 4px 0;margin-top:0;background:transparent;}
.home a:hover:before,.home a:focus:before,.home a:active:before {border-bottom-color:#000;background:transparent;}
.home a:hover:after,.home a:focus:after,.home a:active:after {border-color:#000 #000 transparent;}
.photo a:before {left:2px;width:16px;height:12px;margin-top:-6px;}
.photo a:after {left:6px;width:8px;height:2px;margin-top:-8px;}
.photo:after {left:6px;width:8px;height:8px;margin-top:-4px;background:#fff;
-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.photo a:hover:after,.photo a:focus:after,.photo a:active:after {background:#000;}
.video a:before {left:2px;width:14px;height:12px;margin-top:-6px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.video a:after {left:14px;border-style:solid;border-width:5px 6px 5px 0;border-color:transparent;border-right-color:#666;margin-top:-5px;background:transparent;}
.video a:hover:after,.video a:focus:after,.video a:active:after {border-right-color:#000;}
.music a:before {left:8px;width:6px;height:10px;border-width:2px 1px 0 2px;border-style:solid;border-color:#666 transparent transparent #666;background:transparent;-webkit-border-radius:0 10px 0 0;-moz-border-radius:0 10px 0 0;border-radius:0 10px 0 0;}
.music a:after {left:3px;width:7px;height:6px;margin-top:0;background:#666;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.music a:hover:before,.music a:focus:before,.music a:active:before {border-color:#000 transparent transparent #000;background:transparent;}
.music a:hover:after,.music a:focus:after,.music a:active:after {background:#000;}
.Phone a:before {left:5px;width:4px;height:8px;border-width:5px 0 5px 2px;border-style:solid;border-color:#666;background:transparent;-webkit-border-top-left-radius:3px 5px;-webkit-border-bottom-left-radius:3px 5px;-moz-border-radius-topleft:3px 5px;-moz-border-radius-bottomleft:3px 5px;border-top-left-radius:3px 5px;border-bottom-left-radius:3px 5px;-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-ms-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg);}
.Phone-on a:after {left:10px;width:6px;height:6px;margin-top:-8px;border:4px double #666;border-width:4px 4px 0 0;background:transparent;-webkit-border-radius:0 15px 0 0;-moz-border-radius:0 15px 0 0;border-radius:0 15px 0 0;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);-o-transform:rotate(15deg);transform:rotate(15deg);}
.Phone a:hover:before,.Phone a:focus:before,.Phone a:active:before,.Phone a:hover:after,.Phone a:focus:after,.Phone a:active:after {border-color:#000;background:transparent;}
.tags a:before {left:6px;width:9px;height:15px;margin-top:-8px;background:#666;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-moz-border-radius:3px 3px 0 0;border-radius:5px 5px 0 0;-webkit-transform:rotate(-40deg);-moz-transform:rotate(-40deg);-ms-transform:rotate(-40deg);-o-transform:rotate(-40deg);transform:rotate(-40deg);}.tags a:after {left:7px;width:3px;height:3px;margin-top:-4px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.rss a:before {left:3px;width:5px;height:5px;margin-top:0;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.rss a:after {left:3px;width:8px;height:8px;border-width:5px 5px 0 0;border-style:double;border-color:#666;background:transparent;-webkit-border-top-right-radius:25px;-moz-border-radius:0 25px 0 0;border-radius:0 25px 0 0;}
.rss a:hover:after,.rss a:focus:after,.rss a:active:after {border-color:#000;}
.email:before {z-index:10;left:6px;width:12px;height:12px;border-width:0 1px 1px 0;border-style:solid;border-color:#fff;margin-top:-13px;background:transparent;-webkit-transform:rotate(39deg) skew(-12deg);-moz-transform:rotate(39deg) skew(-12deg);-ms-transform:rotate(39deg) skew(-12deg);-o-transform:rotate(39deg) skew(-12deg);transform:rotate(39deg) skew(-12deg);}.email a:before {left:3px;width:6px;border-width:6px;border-style:solid;border-color:#666 #666 transparent;margin-top:-7px;background:transparent;}
.email a:after {left:4px;border-width:0 8px 9px;border-style:solid;border-color:#666 transparent;margin-top:-3px;background:transparent;}
.email a:hover:before,.email a:focus:before,.email a:active:before {border-color:#000 #000 transparent;background:transparent;}
.email a:hover:after,.email a:focus:after,.email a:active:after {border-bottom-color:#000;}
.profile a:before {left:4px;width:16px;height:5px;margin-top:1px;-webkit-border-top-right-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}
.profile a:after {left:9px;width:6px;height:10px;margin-top:-7px;-webkit-border-top-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-bottom-right-radius:5px 10px;-webkit-border-bottom-left-radius:5px 10px;-moz-border-radius:5px 5px 5px 5px / 5px 5px 10px 10px;border-radius:5px 5px 5px 5px / 5px 5px 10px 10px;}.profile a:hover:after,.profile a:focus:after,.profile a:active:after {background:#000;}
.file a:before {left:5px;width:8px;height:12px;border:2px solid #666;background:transparent;}.file a:after
{left:4px;border-width:3px;border-style:solid;border-color:#fff #666 #666 #fff;margin-top:-9px;background:transparent;}
.file a:hover:before,.file a:focus:before,.file a:active:before {border-color:#000;background:transparent;}.file a:hover:after,.file a:focus:after,.file a:active:after
{border-color:#fff #000 #000 #fff;}
.folder a:before {left:4px;width:16px;height:12px;margin-top:-6px;-webkit-border-bottom-right-radius:1px;-webkit-border-bottom-left-radius:1px;-moz-border-radius:0 0 1px 1px;border-radius:0 0 1px 1px;}.folder a:after {left:6px;width:6px;height:2px;margin-top:-8px;background:#666;-webkit-border-top-right-radius:1px;-webkit-border-top-left-radius:1px;-moz-border-radius:1px 1px 0 0;border-radius:1px 1px 0 0;}.folder a:hover:after,.folder a:focus:after,.folder a:active:after {background:#000;}
.list a:before,.list a:after {left:8px;width:12px;height:2px;border-width:6px 0;border-style:double;border-color:#666;background:transparent;}.list a:after {left:4px;width:2px;}
.list a:hover:before,.list a:focus:before,.list a:active:before,.list a:hover:after,.list a:focus:after,.list a:active:after {border-color:#000;background:transparent;}
.permalink a:before,.permalink a:after,.permalink:after {left:4px;width:6px;height:4px;border:2px solid #666;background:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.permalink a:after {left:12px;margin-top:-0px;}.permalink:after {left:7px;width:10px;height:2px;border:1px solid #fff;margin-top:-2px;background:#666;}
.permalink a:hover:before,.permalink a:focus:before,.permalink a:active:before,.permalink a:hover:after,.permalink a:focus:after,.permalink a:active:after
{border-color:#000;background:transparent;}.permalink:hover:after {background:#000;}
.history a:before,.history a:after {left:2px;width:13px;height:13px;border:2px solid #666;margin-top:-8px;background:transparent;}
.history a:before {-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;}.history a:after {left:10px;width:4px;height:5px;border-width:0 0 2px 2px;margin-top:-5px;background:transparent;}
.history a:hover:before,.history a:focus:before,.history a:active:before,.history a:hover:after,.history a:focus:after,.history a:active:after
{border-color:#000;background:transparent;}
.tools:after {left:13px;width:3px;height:5px;margin-top:-8px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.tools a:before {left:6px;width:4px;height:15px;margin-top:-7px;background:#666;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}.tools a:after {left:8px;width:9px;height:9px;background:#666;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.tools a:hover:after,.tools a:focus:after,.tools a:active:after {background:#000;}
.player:before {left:3px;width:9px;height:6px;border-width:2px 2px 11px;border-style:solid;border-color:#555;margin-top:-10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.player:after {left:6px;width:3px;height:3px;border:2px solid #fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.headphones:before {left:2px;width:12px;height:10px;border-width:2px 2px 0;border-style:solid;border-color:#555;margin:-8px 0 0;-webkit-border-top-left-radius:20px;-webkit-border-top-right-radius:20px;-moz-border-radius:20px 20px 0 0;border-radius:20px 20px 0 0;}.headphones:after {left:5px;width:4px;height:6px;border-width:0 3px;border-style:solid;border-color:#555;}
.ribbon:before {left:6px;border-width:10px 5px 6px;border-style:solid;border-color:#F0A1D1 #F0A1D1 transparent;margin:-8px 0 0;}
.views:after {left:6px;width:4px;height:4px;border:2px solid #fff;margin-top:-5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.location:before {left:6px;width:2px;height:2px;border:3px solid #555;border-bottom:0;margin-top:-9px;background:#fff;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-moz-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0;}
.location:after {left:6px;border-width:12px 4px 0;border-style:solid;border-color:#555 transparent;margin-top:-4px;}
.info {color:#2385BA;}
.info:before {content:"i";left:3px;width:16px;height:16px;margin-top:-8px;font-size:14px;font-weight:bold;font-style:italic;line-height:15px;text-align:center;
color:#fff;background:#2385BA;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.help {color:#2385BA;}
.help:before {content:"?";left:3px;width:16px;height:16px;margin-top:-8px;font-size:14px;font-weight:bold;line-height:15px;text-align:center;color:#fff;background:#2385BA;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.pie {color:#9D2CA3;}
.pie:before {left:3px;border:8px solid #9D2CA3;margin-top:-7px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.pie:after {left:11px;width:8px;height:8px;border-width:0 0 2px 2px;border-style:solid;border-color:#fff;margin-top:-8px;background:#9D2CA3;-webkit-border-top-right-radius:16px;-moz-border-radius:0 16px 0 0; border-radius:0 16px 0 0;}
.success {color:#7F913C;}
.success:before {left:3px;width:16px;height:16px;margin-top:-8px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;background:#7F913C;}
.success:after {left:8px;width:3px;height:8px;border-width:0 2px 2px 0;border-style:solid;border-color:#fff;margin-top:-6px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}/* Alternative style */
.success-alt {color:#7F913C;}
.success-alt:before {left:6px;width:5px;height:12px;border-width:0 5px 5px 0;border-style:solid;border-color:#7F913C;margin-top:-11px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.warning:before {content:"!";z-index:2;left:8px;margin-top:-8px;font-size:14px;font-weight:bold;color:#000;}
.warning:after {z-index:1;border-width:0 11px 18px;border-style:solid;border-color:#F8D201 transparent;margin-top:-10px;background:transparent;}
.denied {color:#C00000;}
.denied:before {left:3px;width:10px;height:10px;border:3px solid #C00000;margin-top:-8px;background:transparent;
-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;}
.denied:after {left:6px;width:11px;height:3px;margin-top:-2px;background:#C00000;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
--------------------------------------------- HTML5 ---------------------------------------------
<ul>
<li class="home">
<li class="Phone">
<li class="email">
<li class="folder">
</ul>
<ul>
<li class="search">
<li class="add">
<li class="report">
<li class="unlock">
</ul>
<ul>
<li class="edit">
<li class="arrow back">
<li class="success">Success</li><li class="success-alt">Success (alt)</li><li class="warning">Warning</li><li class="denied">Denied</li>
</ul>
