📝 代码查看
使用runcode.html页面

2
查看次数
2025-11-26
创建时间
2025-11-26
最后更新
<div class="container header">
    <header>
        <hgroup>
            <h1>Pure CSS GUI icons</h1>
        </hgroup>
        <p><em>Tested in</em>: Firefox 3.5+, Chrome 5, and Opera 10.6.</p>
    </header>
</div>

<!-- EXAMPLES -->

<div id="icons" class="container">
    <h2><strong>84 GUI icons</strong> created from semantic HTML.</h2>

    <div class="section">
        <h3>User interaction</h3>
        <ul>
            <li class="search"><a href="#non">Search</a></li>
            <li class="comment"><a href="#non">Comment</a></li>
            <li class="like"><a href="#non">Like</a></li>
            <li class="add"><a href="#non">Add</a></li>
            <li class="remove"><a href="#non">Remove</a></li>
            <li class="delete"><a href="#non">Delete</a></li>
            <li class="add-alt"><a href="#non">Add</a></li>
            <li class="remove-alt"><a href="#non">Remove</a></li>
            <li class="delete-alt"><a href="#non">Delete</a></li>
            <li class="report"><a href="#non">Report</a></li>
            <li class="trash"><a href="#non">Trash</a></li>
            <li class="lock"><a href="#non">Lock</a></li>
            <li class="unlock"><a href="#non">Unlock</a></li>
            <li class="update"><a href="#non">Update status</a></li>
            <li class="retweet"><a href="#non">Retweet</a></li>
            <li class="save"><a href="#non">Save</a></li>
            <li class="edit"><a href="#non">Edit</a></li>
            <li class="download"><a href="#non">Download</a></li>
            <li class="arrow forward"><a href="#non">Forward</a></li>
            <li class="arrow back"><a href="#non">Back</a></li>
            <li class="arrow up"><a href="#non">Up</a></li>
            <li class="arrow down"><a href="#non">Down</a></li>
            <li class="arrow-alt forward"><a href="#non">Forward</a></li>
            <li class="arrow-alt back"><a href="#non">Back</a></li>
            <li class="arrow-alt up"><a href="#non">Up</a></li>
            <li class="arrow-alt down"><a href="#non">Down</a></li>
            <li class="arrow-alt2 forward"><a href="#non">Forward</a></li>
            <li class="arrow-alt2 back"><a href="#non">Back</a></li>
            <li class="arrow-alt2 up"><a href="#non">Up</a></li>
            <li class="arrow-alt2 down"><a href="#non">Down</a></li>
        </ul>
    </div>

    <div class="section">
        <h3>Miscellaneous</h3>
        <ul>
            <li class="home"><a href="#non">Home</a></li>
            <li class="photo"><a href="#non">Photo</a></li>
            <li class="video"><a href="#non">Video</a></li>
            <li class="music"><a href="#non">Music</a></li>
            <li class="call"><a href="#non">Call</a></li>
            <li class="call call-on"><a href="#non">Call in progress</a></li>
            <li class="tags"><a href="#non">Tags</a></li>
            <li class="rss"><a href="#non">RSS</a></li>
            <li class="email"><a href="#non">Email</a></li>
            <li class="profile"><a href="#non">Profile</a></li>
            <li class="file"><a href="#non">File</a></li>
            <li class="folder"><a href="#non">Folder</a></li>
            <li class="list"><a href="#non">List view</a></li>
            <li class="permalink"><a href="#non">Permalink</a></li>
            <li class="history"><a href="#non">History</a></li>
            <li class="tools"><a href="#non">Tools</a></li>
            <li class="player">MP3 Player</li>
            <li class="headphones">Headphones</li>
            <li class="ribbon">Ribbon</li>
            <li class="views">Views</li>
            <li class="location">Location</li>
            <li class="info">Info</li>
            <li class="help">Help</li>
            <li class="pie">Pie chart</li>
            <li class="success">Success</li>
            <li class="success-alt">Success (alt)</li>
            <li class="warning">Warning</li>
            <li class="denied">Denied</li>
        </ul>
    </div>

    <div class="section">
        <h3>Media controls</h3>
        <ul>
            <li class="power"><a href="#non">Power</a></li>
            <li class="play"><a href="#non">Play</a></li>
            <li class="stop"><a href="#non">Stop</a></li>
            <li class="pause"><a href="#non">Pause</a></li>
            <li class="play-alt"><a href="#non">Play</a></li>
            <li class="stop-alt"><a href="#non">Stop</a></li>
            <li class="pause-alt"><a href="#non">Pause</a></li>
            <li class="volume"><a href="#non">Volume</a></li>
            <li class="volume volume-on"><a href="#non">Volume on</a></li>
            <li class="volume mute"><a href="#non">Mute</a></li>
            <li class="volume volume-up"><a href="#non">Volume up</a></li>
            <li class="volume volume-down"><a href="#non">Volume down</a></li>
            <li class="mic"><a href="#non">Mic</a></li>
            <li class="fforward"><a href="#non">Fast forward</a></li>
            <li class="frewind"><a href="#non">Fast rewind</a></li>
            <li class="next"><a href="#non">Next track</a></li>
            <li class="prev"><a href="#non">Previous track</a></li>
            <li class="repeat"><a href="#non">Repeat</a></li>
            <li class="expand"><a href="#non">Expand</a></li>
            <li class="shrink"><a href="#non">Shrink</a></li>
            <li class="toggle-size"><a href="#non">Toggle video size</a></li>
            <li class="pop"><a href="#non">Pop out</a></li>
            <li class="enlarge"><a href="#non">Enlarge</a></li>
            <li class="full"><a href="#non">Full-screen</a></li>
            <li class="exit"><a href="#non">Exit full-screen</a></li>
            <li class="eject"><a href="#non">Eject</a></li>
        </ul>
    </div>
</div>
/* ------------------------------------------
PURE CSS GUI ICONS
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-gui-icons/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 29 July 2010
Version: 1.0.1

Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */

/*
Yes, this file is big.
No, this won't work in IE.

Some icons could be produced with fewer pseudo-elements and
still work in Opera...if Opera didn't have a buggy
implementation of background-clip
*/

/* ----------------------------------------------------------------------------------------------------------------------------
== GENERAL STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */

html, body                             {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
header, hgroup                         {display:block;}

a:link, a:visited                      {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
a:visited                              {border-bottom:1px solid #730800; color:#730800;}
a:hover, a:focus, a:active             {border:0; color:#fff; background:#c55500;}

.container                             {width:540px; overflow:hidden; padding:0 0 10px; margin:0 auto 40px;}
.header                                {border-bottom:1px solid #ddd;}
.footer                                {padding:0 0 30px; margin-top:20px; margin-bottom:0; text-align:center;}

.section                               {float:left; width:30%; margin-left:4.9%;}
h2 + .section                          {margin-left:0;}

h1                                     {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
h2                                     {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
p                                      {margin:1em 0; line-height:1.4em;}

pre                                    {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap; word-wrap:break-word;}

.follow                                {clear:both; margin-top:1em;}
.follow span                           {font-weight:bold;}


/* ----------------------------------------------------------------------------------------------------------------------------
== ICONS STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */

ul {
    padding:0;
    margin:0;
}

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:#c55500;
}

li a:hover,
li a:focus,
li a:active {
    color:#730800;
    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:#c55500;
}

li a:hover:before,
li a:focus:before,
li a:active:before {
    background:#730800;
}

/* Not links */

.player,
.headphones,
.ribbon,
.views,
.location,
.info,
.help,
.pie,
.success,
.success-alt,
.warning,
.denied {
    padding-left:28px;
}



/* ----------------------------------------------------------------------------------------------------------------------------
== USER INTERACTIONS
** ---------------------------------------------------------------------------------------------------------------------------- */

/* SEARCH
------------------------------------------------------------------------------------------------------------------------------- */

.search a:before {
    width:6px;
    height:6px;
    border:3px solid #c55500;
    background:transparent;
    /* css3 */
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}

.search a:after {
    left:10px;
    width:3px;
    height:7px;
    margin-top:0;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.comment a:before {
    width:16px;
    height:10px;
    margin-top:-8px;
    /* css3 */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

.comment a:after {
    left:8px;
    border:2px solid transparent;
    border-top-color:#c55500;
    border-left-color:#c55500;
    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
------------------------------------------------------------------------------------------------------------------------------- */

.like a:before,
.like a:after {
    width:14px;
    height:9px;
    margin-top:-6px;
    background:#c55500;
    /* css3 */
    -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;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.add a:before {
    width:16px;
    height:16px;
    /* css3 */
    -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;
}

/* Alternative style */

.add-alt a:before {
    left:6px;
    width:5px;
    height:15px;
    margin-top:-7px;
    background:#c55500;
}

.add-alt a:after {
    left:1px;
    width:15px;
    height:5px;
    margin-top:-2px;
    background:#c55500;
}

.add-alt a:hover:after,
.add-alt a:focus:after,
.add-alt a:active:after {
    background:#730800;
}

/* REMOVE
------------------------------------------------------------------------------------------------------------------------------- */

.remove a:before {
    width:16px;
    height:16px;
    /* css3 */
    -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:#c55500;
}

/* DELETE
------------------------------------------------------------------------------------------------------------------------------- */

.delete a:before {
    width:16px;
    height:16px;
    /* css3 */
    -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;
    /* css3 */
    -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;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

/* Alternative style */

.delete-alt a:before,
.delete-alt a:after {
    left:6px;
    width:5px;
    height:15px;
    margin-top:-7px;
    background:#c55500;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.delete-alt a:after {
    left:1px;
    width:15px;
    height:5px;
    margin-top:-2px;
}

.delete-alt a:hover:after,
.delete-alt a:focus:after,
.delete-alt a:active:after {
    background:#730800;
}

/* REPORT
------------------------------------------------------------------------------------------------------------------------------- */

.report a:before {
    left:3px;
    width:7px;
    height:7px;
    margin-top:-5px;
    border-width:7px 0 0 2px;
    border-style:solid;
    border-color:#c55500;
    background:transparent;
    /* css3 */
    -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:#c55500;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.trash:after {
    left:6px;
    width:1px;
    height:7px;
    border-right:3px double #c55500;
    border-left:1px solid #c55500;
    margin-top:-2px;
}

.trash a:before {
    left:2px;
    width:9px;
    height:11px;
    margin-top:-6px;
    border:2px solid #c55500;
    background:transparent;
}

.trash a:after {
    left:5px;
    width:3px;
    height:2px;
    margin-top:-9px;
    border:2px solid #c55500;
    border-bottom:0;
    background:transparent;
    /* css3 */
    -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 / UNLOCK
------------------------------------------------------------------------------------------------------------------------------- */

.lock:before,
.lock:after,
.unlock:before,
.unlock:after {
    z-index:10;
    left:8px;
    width:3px;
    height:3px;
    margin-top:-2px;
    background:#fff;
    /* css3 */
    -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 #c55500;
    border-bottom:0;
    margin-top:-11px;
    background:transparent;
    /* css3 */
    -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 STATUS
------------------------------------------------------------------------------------------------------------------------------- */

.update:before {
    left:10px;
    border-width:2px 0 2px 2px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-1px;
}

.update a:before {
    left:4px;
    width:10px;
    height:10px;
    border:2px solid #c55500;
    margin-top:-6px;
    background:transparent;
    /* css3 */
    -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;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.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:#c55500;
}

.retweet a:before {
    left:-1px;
    margin-top:-7px;
    border-width:0 5px 5px;
    border-right-color:#fff;
    border-bottom-color:#c55500;
}

.retweet a:after {
    z-index:-2;
    left:3px;
    width:10px;
    height:6px;
    margin-top:-6px;
    border:3px solid #c55500;
    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
------------------------------------------------------------------------------------------------------------------------------- */

.save:before,
.save a:before {
    left:6px;
    border-width:10px 0 10px 8px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-9px;
    background:transparent;
    /* css3 */
    -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;
    /* css3 */
    -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:#c55500 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
------------------------------------------------------------------------------------------------------------------------------- */

.edit a:before {
    left:3px;
    width:5px;
    height:5px;
    margin-top:2px;
    background:#c55500;
    -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;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.download a:before {
    width:14px;
    height:8px;
    border:3px solid #c55500;
    border-top:0;
    margin-top:-5px;
    background:transparent;
}

.download a:after {
    left:5px;
    border-width:5px 5px 0;
    border-style:solid;
    border-color:#c55500 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;
}

/* ARROWS (up/down/back/forward)
------------------------------------------------------------------------------------------------------------------------------- */

.arrow a:before {
    width:16px;
    height:16px;
    /* css3 */
    -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;
}

.arrow.up:before,
.arrow.down:before {
    left:6px;
    width:4px;
    height:5px;
    margin-top:0;
}

.arrow.down a:after {
    border-width:6px 5px 0;
    margin-top:0;
}

.arrow.down:before {
    margin-top:-5px;
}

/* Alternative style */

.arrow-alt a:before {
    left:8px;
    border-width:7px 0 7px 8px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-7px;
    background:transparent;
}

.arrow-alt a:after {
    left:0;
    width:8px;
    height:6px;
    margin-top:-3px;
    background:#c55500;
}

.arrow-alt a:hover:before,
.arrow-alt a:focus:before,
.arrow-alt a:active:before {
    border-color:transparent #730800;
    background:transparent;
}

.arrow-alt a:hover:after,
.arrow-alt a:focus:after,
.arrow-alt a:active:after {
    background:#730800;
}

.arrow-alt.back a:before {
    left:0;
    border-width:7px 8px 7px 0;
}

.arrow-alt.back a:after {
    left:8px;
}

.arrow-alt.up a:before,
.arrow-alt.down a:before {
    left:1px;
    margin-top:-8px;
    border-width:0 7px 8px;
    border-color:#c55500 transparent;
}

.arrow-alt.up a:after,
.arrow-alt.down a:after {
    left:5px;
    width:6px;
    height:8px;
    margin-top:0;
}

.arrow-alt.down a:before {
    left:1px;
    margin-top:0;
    border-width:8px 7px 0;
}

.arrow-alt.down a:after {
    margin-top:-8px;
}

.arrow-alt.up a:hover:before,
.arrow-alt.up a:focus:before,
.arrow-alt.up a:active:before,
.arrow-alt.down a:hover:before,
.arrow-alt.down a:focus:before,
.arrow-alt.down a:active:before {
    border-color:#730800 transparent;
}

/* Alternative style 2 */

.arrow-alt2 a:before {
    left:8px;
    width:7px;
    height:7px;
    border-width:0 3px 3px 0;
    border-style:solid;
    border-color:#c55500;
    margin-top:-5px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.arrow-alt2 a:after {
    left:3px;
    width:13px;
    height:4px;
    margin-top:-2px;
    background:#c55500;
}

.arrow-alt2 a:hover:before,
.arrow-alt2 a:focus:before,
.arrow-alt2 a:active:before {
    border-color:#730800;
    background:transparent;
}

.arrow-alt2 a:hover:after,
.arrow-alt2 a:focus:after,
.arrow-alt2 a:active:after {
    background:#730800;
}

.arrow-alt2.back a:before {
    left:4px;
    border-width:0 0 3px 3px;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.arrow-alt2.back a:after {
    left:5px;
}

.arrow-alt2.back a:hover:before,
.arrow-alt2.back a:focus:before,
.arrow-alt2.back a:active:before {
    border-right-color:#730800;
}

.arrow-alt2.up a:before {
    left:4px;
    border-width:3px 0 0 3px;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.arrow-alt2.up a:after,
.arrow-alt2.down a:after {
    left:7px;
    width:4px;
    height:13px;
    margin-top:-4px;
}

.arrow-alt2.down a:before {
    left:4px;
    border-width:0 0 3px 3px;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.arrow-alt2.down a:after {
    margin-top:-8px;
}


/* ----------------------------------------------------------------------------------------------------------------------------
== MISC
** ---------------------------------------------------------------------------------------------------------------------------- */

/* HOME
------------------------------------------------------------------------------------------------------------------------------- */

.home a:before {
    left:1px;
    border-style:solid;
    border-color:transparent;
    border-width:8px 7px;
    border-bottom-color:#c55500;
    margin-top:-16px;
    background:transparent;
}

.home a:after {
    left:3px;
    width:2px;
    height:4px;
    border-style:solid;
    border-color:#c55500 #c55500 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:#730800;
    background:transparent;
}

.home a:hover:after,
.home a:focus:after,
.home a:active:after {
    border-color:#730800 #730800 transparent;
}

/* PHOTO
------------------------------------------------------------------------------------------------------------------------------- */

.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;
    /* css3 */
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

.photo a:hover:after,
.photo a:focus:after,
.photo a:active:after {
    background:#730800;
}

/* VIDEO
------------------------------------------------------------------------------------------------------------------------------- */

.video a:before {
    left:2px;
    width:14px;
    height:12px;
    margin-top:-6px;
    /* css3 */
    -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:#c55500;
    margin-top:-5px;
    background:transparent;
}

.video a:hover:after,
.video a:focus:after,
.video a:active:after {
    border-right-color:#730800;
}

/* MUSIC
------------------------------------------------------------------------------------------------------------------------------- */

.music a:before {
    left:8px;
    width:6px;
    height:10px;
    border-width:2px 1px 0 2px;
    border-style:solid;
    border-color:#c55500 transparent transparent #c55500;
    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:#c55500;
    -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:#730800 transparent transparent #730800;
    background:transparent;
}

.music a:hover:after,
.music a:focus:after,
.music a:active:after {
    background:#730800;
}

/* CALL
------------------------------------------------------------------------------------------------------------------------------- */

.call a:before {
    left:5px;
    width:4px;
    height:8px;
    border-width:5px 0 5px 2px;
    border-style:solid;
    border-color:#c55500;
    background:transparent;
    /* css3 */
    -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);
}

.call-on a:after {
    left:10px;
    width:6px;
    height:6px;
    margin-top:-8px;
    border:4px double #c55500;
    border-width:4px 4px 0 0;
    background:transparent;
    /* css3 */
    -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);
}

.call a:hover:before,
.call a:focus:before,
.call a:active:before,
.call a:hover:after,
.call a:focus:after,
.call a:active:after {
    border-color:#730800;
    background:transparent;
}

/* TAGS
------------------------------------------------------------------------------------------------------------------------------- */

.tags a:before {
    left:6px;
    width:9px;
    height:15px;
    margin-top:-8px;
    background:#c55500;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.rss a:before {
    left:3px;
    width:5px;
    height:5px;
    margin-top:0;
    /* css3 */
    -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:#c55500;
    background:transparent;
    /* css3 */
    -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:#730800;
}

/* EMAIL
------------------------------------------------------------------------------------------------------------------------------- */

.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;
    /* css3 */
    -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:#c55500 #c55500 transparent;
    margin-top:-7px;
    background:transparent;
}

.email a:after {
    left:4px;
    border-width:0 8px 9px;
    border-style:solid;
    border-color:#c55500 transparent;
    margin-top:-3px;
    background:transparent;
}

.email a:hover:before,
.email a:focus:before,
.email a:active:before {
    border-color:#730800 #730800 transparent;
    background:transparent;
}

.email a:hover:after,
.email a:focus:after,
.email a:active:after {
    border-bottom-color:#730800;
}

/* PROFILE
------------------------------------------------------------------------------------------------------------------------------- */

.profile a:before {
    left:4px;
    width:16px;
    height:5px;
    margin-top:1px;
    /* css3 */
    -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;
    /* css3 */
    -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:#730800;
}

/* FILE
------------------------------------------------------------------------------------------------------------------------------- */

.file a:before {
    left:5px;
    width:8px;
    height:12px;
    border:2px solid #c55500;
    background:transparent;
}

.file a:after {
    left:4px;
    border-width:3px;
    border-style:solid;
    border-color:#fff #c55500 #c55500 #fff;
    margin-top:-9px;
    background:transparent;
}

.file a:hover:before,
.file a:focus:before,
.file a:active:before {
    border-color:#730800;
    background:transparent;
}

.file a:hover:after,
.file a:focus:after,
.file a:active:after {
    border-color:#fff #730800 #730800 #fff;
}

/* FOLDER
------------------------------------------------------------------------------------------------------------------------------- */

.folder a:before {
    left:4px;
    width:16px;
    height:12px;
    margin-top:-6px;
    /* css3 */
    -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:#c55500;
    /* css3 */
    -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:#730800;
}

/* LIST VIEW
------------------------------------------------------------------------------------------------------------------------------- */

.list a:before,
.list a:after {
    left:8px;
    width:12px;
    height:2px;
    border-width:6px 0;
    border-style:double;
    border-color:#c55500;
    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:#730800;
    background:transparent;
}

/* PERMALINK
------------------------------------------------------------------------------------------------------------------------------- */

.permalink a:before,
.permalink a:after,
.permalink:after {
    left:4px;
    width:6px;
    height:4px;
    border:2px solid #c55500;
    background:transparent;
    /* css3 */
    -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:#c55500;
}

.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:#730800;
    background:transparent;
}

.permalink:hover:after {
    background:#730800;
}


/* HISTORY
------------------------------------------------------------------------------------------------------------------------------- */

.history a:before,
.history a:after {
    left:2px;
    width:13px;
    height:13px;
    border:2px solid #c55500;
    margin-top:-8px;
    background:transparent;
}

.history a:before {
    /* css3 */
    -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:#730800;
    background:transparent;
}

/* TOOLS
------------------------------------------------------------------------------------------------------------------------------- */

.tools:after {
    left:13px;
    width:3px;
    height:5px;
    margin-top:-8px;
    background:#fff;
    /* css3 */
    -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:#c55500;
    /* css3 */
    -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:#c55500;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

.tools a:hover:after,
.tools a:focus:after,
.tools a:active:after {
    background:#730800;
}

/* MP3 PLAYER
------------------------------------------------------------------------------------------------------------------------------- */

.player:before {
    left:3px;
    width:9px;
    height:6px;
    border-width:2px 2px 11px;
    border-style:solid;
    border-color:#555;
    margin-top:-10px;
    /* css3 */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

.player:after {
    left:6px;
    width:3px;
    height:3px;
    border:2px solid #fff;
    /* css3 */
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

/* HEADPHONES
------------------------------------------------------------------------------------------------------------------------------- */

.headphones:before {
    left:2px;
    width:12px;
    height:10px;
    border-width:2px 2px 0;
    border-style:solid;
    border-color:#555;
    margin:-8px 0 0;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.ribbon:before {
    left:6px;
    border-width:10px 5px 6px;
    border-style:solid;
    border-color:#F0A1D1 #F0A1D1 transparent;
    margin:-8px 0 0;
}

/* VIEWS
------------------------------------------------------------------------------------------------------------------------------- */

.views:before {
    left:3px;
    width:14px;
    height:14px;
    margin-top:-8px;
    background:#555;
    -webkit-border-top-left-radius:12px;
    -webkit-border-bottom-right-radius:12px;
    -moz-border-radius:12px 0 12px 0;
    border-radius:12px 0 12px 0;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.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
------------------------------------------------------------------------------------------------------------------------------- */

.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
------------------------------------------------------------------------------------------------------------------------------- */

.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;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

/* HELP
------------------------------------------------------------------------------------------------------------------------------- */

.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;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

/* PIE CHART
------------------------------------------------------------------------------------------------------------------------------- */

.pie {
    color:#9D2CA3;
}

.pie:before {
    left:3px;
    border:8px solid #9D2CA3;
    margin-top:-7px;
    /* css3 */
    -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;
    /* css3 */
    -webkit-border-top-right-radius:16px;
    -moz-border-radius:0 16px 0 0;
    border-radius:0 16px 0 0;
}

/* SUCCESS
------------------------------------------------------------------------------------------------------------------------------- */

.success {
    color:#7F913C;
}

.success:before {
    left:3px;
    width:16px;
    height:16px;
    margin-top:-8px;
    /* css3 */
    -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
------------------------------------------------------------------------------------------------------------------------------- */

.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
------------------------------------------------------------------------------------------------------------------------------- */

.denied {
    color:#C00000;
}

.denied:before {
    left:3px;
    width:10px;
    height:10px;
    border:3px solid #C00000;
    margin-top:-8px;
    background:transparent;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.denied:after {
    left:6px;
    width:11px;
    height:3px;
    margin-top:-2px;
    background:#C00000;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}



/* ----------------------------------------------------------------------------------------------------------------------------
== MEDIA CONTROLS
** ---------------------------------------------------------------------------------------------------------------------------- */

/* POWER
------------------------------------------------------------------------------------------------------------------------------- */

.power a:before {
    left:1px;
    width:10px;
    height:10px;
    border:2px solid #c55500;
    margin-top:-6px;
    background:transparent;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.power a:after {
    left:6px;
    width:2px;
    height:7px;
    border:1px solid #fff;
    margin:-8px 0 0;
    background:#c55500;
}

.power a:hover:before,
.power a:focus:before,
.power a:active:before {
    border-color:#730800;
    background:transparent;
}

.power a:hover:after,
.power a:focus:after,
.power a:active:after {
    background:#730800;
}

/* PLAY
------------------------------------------------------------------------------------------------------------------------------- */

.play a:before {
    width:16px;
    height:16px;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.play a:after {
    left:7px;
    border:4px solid transparent;
    border-left-color:#fff;
    margin-top:-4px;
    background:transparent;
}

/* Alternative style */

.play-alt a:before {
    left:2px;
    border:8px solid transparent;
    border-width:8px 12px;
    border-left-color:#c55500;
    margin-top:-8px;
    background:transparent;
}

.play-alt a:hover:before,
.play-alt a:focus:before,
.play-alt a:active:before {
    border-left-color:#730800;
    background:transparent;
}

/* STOP
------------------------------------------------------------------------------------------------------------------------------- */

.stop a:before {
    width:16px;
    height:16px;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.stop a:after {
    left:5px;
    width:6px;
    height:6px;
    margin-top:-3px;
    background:#fff;
}

/* Alternative style */

.stop-alt a:before {
    left:1px;
    width:14px;
    height:14px;
    margin-top:-7px;
}

/* PAUSE
------------------------------------------------------------------------------------------------------------------------------- */

.pause a:before {
    width:16px;
    height:16px;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.pause a:after {
    left:5px;
    width:2px;
    height:8px;
    border:2px solid #fff;
    border-width:0 2px;
    margin-top:-4px;
    background:transparent;
}

/* Alternative style */

.pause-alt a:before {
    left:2px;
    width:4px;
    height:14px;
    border:4px solid #c55500;
    border-width:0 4px;
    margin-top:-7px;
    background:transparent;
}

.pause-alt a:hover:before,
.pause-alt a:focus:before,
.pause-alt a:active:before {
    border-color:#730800;
    background:transparent;
}

/* VOLUME
------------------------------------------------------------------------------------------------------------------------------- */

.volume a:before {
    left:-2px;
    border:7px solid transparent;
    border-right-color:#c55500;
    margin-top:-7px;
    background:transparent;
}

.volume a:after {
    left:4px;
    width:4px;
    height:6px;
    margin-top:-3px;
}

.volume a:hover:before,
.volume a:focus:before,
.volume a:active:before {
    border-right-color:#730800;
    background:transparent;
}

.volume a:hover:after,
.volume a:focus:after,
.volume a:active:after {
    background:#730800;
}

/* Volume on */

.volume-on:before {
    left:12px;
    width:6px;
    height:6px;
    margin-top:-5px;
    border:4px double #c55500;
    border-width:4px 4px 0 0;
    /* css3 */
    -webkit-border-radius:0 15px 0 0;
    -moz-border-radius:0 15px 0 0;
    border-radius:0 15px 0 0;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.volume-on:hover:before {
    border-color:#730800;
}

/* Mute */

.mute:before {
    width:16px;
    height:16px;
    border:1px solid #c55500;
    margin-top:-9px;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.mute:after {
    width:18px;
    border-top:1px solid #c55500;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.mute:hover:before,
.mute:hover:after {
    border-color:#730800;
}

/* Volume up/down */

.volume-up:before {
    left:16px;
    width:2px;
    height:8px;
    margin-top:-4px;
    background:#c55500;
}

.volume-up:after,
.volume-down:after {
    left:13px;
    width:8px;
    height:2px;
    margin-top:-1px;
    background:#c55500;
}

.volume-up:hover:before,
.volume-up:hover:after,
.volume-down:hover:after {
    background:#730800;
}

/* MIC
------------------------------------------------------------------------------------------------------------------------------- */

.mic a:before {
    left:6px;
    width:7px;
    height:12px;
    margin-top:-9px;
    /* css3 */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.mic a:after {
    left:4px;
    width:9px;
    height:6px;
    border-width:0 1px 1px 1px;
    border-style:solid;
    border-color:#c55500;
    margin-top:-2px;
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:11px;
    -webkit-border-bottom-left-radius:11px;
    -moz-border-radius:0 0 11px 11px;
    border-radius:0 0 11px 11px;
}

.mic:before,
.mic:after {
    left:9px;
    width:1px;
    height:4px;
    margin-top:4px;
    background:#c55500;
}

.mic:after {
    left:6px;
    width:7px;
    height:1px;
    margin-top:7px;
}

.mic a:hover:after,
.mic a:focus:after,
.mic a:active:after {
    border-color:#730800;
}

.mic:hover:before,
.mic:hover:after {
    background:#730800;
}

/* FAST FORWARD
------------------------------------------------------------------------------------------------------------------------------- */

.fforward a:before {
    left:1px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-left-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.fforward a:after {
    left:7px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-left-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.fforward a:hover:before,
.fforward a:focus:before,
.fforward a:active:before {
    border-left-color:#730800;
    background:transparent;
}

.fforward a:hover:after,
.fforward a:focus:after,
.fforward a:active:after {
    border-left-color:#730800;
}

/* FAST REWIND
------------------------------------------------------------------------------------------------------------------------------- */

.frewind a:before {
    left:-6px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-right-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.frewind a:after {
    border:5px solid transparent;
    border-width:5px 7px;
    border-right-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.frewind a:hover:before,
.frewind a:focus:before,
.frewind a:active:before {
    border-right-color:#730800;
    background:transparent;
}

.frewind a:hover:after,
.frewind a:focus:after,
.frewind a:active:after {
    border-right-color:#730800;
}

/* JUMP FORWARD
------------------------------------------------------------------------------------------------------------------------------- */

.next a:before {
    left:9px;
    width:2px;
    height:10px;
    margin-top:-4px;
}

.next a:after {
    left:2px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-left-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.next a:hover:after,
.next a:focus:after,
.next a:active:after {
    border-left-color:#730800;
}

/* JUMP REWIND
------------------------------------------------------------------------------------------------------------------------------- */

.prev a:before {
    left:2px;
    width:2px;
    height:10px;
    margin-top:-4px;
}

.prev a:after {
    left:-3px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-right-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.prev a:hover:after,
.prev a:focus:after,
.prev a:active:after {
    border-right-color:#730800;
}

/* POP-OUT WINDOW
------------------------------------------------------------------------------------------------------------------------------- */

.pop a:before,
.pop a:after {
    width:12px;
    height:8px;
    border:1px solid #c55500;
    margin-top:-4px;
    background:#fff;
}

.pop a:after {
    left:3px;
    margin-top:-7px;
}

.pop a:hover:before,
.pop a:focus:before,
.pop a:active:before,
 .pop a:hover:after,
 .pop a:focus:after,
 .pop a:active:after {
    border-color:#730800;
    background:#fff;
}

/* ENLARGE
------------------------------------------------------------------------------------------------------------------------------- */

.enlarge a:before {
    width:16px;
    height:14px;
    margin-top:-7px;
}

.enlarge a:after {
    left:1px;
    width:7px;
    height:6px;
    margin-top:-6px;
    background:#fff;
}

/* REPEAT
------------------------------------------------------------------------------------------------------------------------------- */

.repeat a:before {
    left:1px;
    width:9px;
    height:9px;
    border:3px solid #c55500;
    margin-top:-6px;
    background:transparent;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.repeat a:after {
    left:9px;
    border:4px solid #fff;
    border-width:5px 2px 5px 5px;
    border-left-color:#c55500;
    margin:-9px 0 0;
    background:transparent;
}

.repeat a:hover:before,
.repeat a:focus:before,
.repeat a:active:before {
    border-color:#730800;
    background:transparent;
}

.repeat a:hover:after,
.repeat a:focus:after,
.repeat a:active:after {
    border-left-color:#730800;
}

/* EXPAND
------------------------------------------------------------------------------------------------------------------------------- */

.expand a:before {
    z-index:-2;
    left:1px;
    width:5px;
    height:0;
    border-width:7px 7px 0;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-4px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.expand a:after {
    left:5px;
    width:8px;
    height:8px;
    border:3px solid #c55500;
    border-width:3px 0 0 3px;
    margin-top:-6px;
    background:transparent;
}

.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
    border-color:transparent #730800;
    background:transparent;
}

.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
    border-color:#730800;
}

/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */

.shrink a:before {
    z-index:-2;
    left:1px;
    width:5px;
    height:0;
    border-width:0 7px 7px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-4px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.shrink a:after {
    left:5px;
    width:8px;
    height:8px;
    border:3px solid #c55500;
    border-width:0 3px 3px 0;
    margin-top:-6px;
    background:transparent;
}

.shrink a:hover:before,
.shrink a:focus:before,
.shrink a:active:before {
    border-color:transparent #730800;
    background:transparent;
}

.shrink a:hover:after,
.shrink a:focus:after,
.shrink a:active:after {
    border-color:#730800;
}

/* TOGGLE SIZE
------------------------------------------------------------------------------------------------------------------------------- */

.toggle-size a:before {
    left:2px;
    border-width:6px;
    border-style:solid;
    border-color:#c55500 transparent transparent #c55500;
    background:transparent;
    margin-top:-7px;
}

.toggle-size a:after {
    left:7px;
    border-width:4px;
    border-style:solid;
    border-color:transparent #c55500 #c55500 transparent;
    margin-top:-2px;
    background:transparent;
}

.toggle-size a:hover:before,
.toggle-size a:focus:before,
.toggle-size a:active:before {
    border-color:#730800 transparent transparent #730800;
    background:transparent;
}

.toggle-size a:hover:after,
.toggle-size a:focus:after,
.toggle-size a:active:after {
    border-color:transparent #730800 #730800 transparent;
}

/* FULL SCREEN
------------------------------------------------------------------------------------------------------------------------------- */

.full:before,
.full:after {
    z-index:1;
    left:8px;
    width:3px;
    height:8px;
    border:5px solid #c55500;
    border-width:5px 0;
    margin-top:-8px;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.full:after {
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.full:hover:before,
.full:hover:after {
    border-color:#730800;
}

.full a:before,
.full a:after {
    z-index:10;
    width:4px;
    height:0;
    border-width:0 7px 7px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-8px;
    background:transparent;
}

.full a:after {
    border-width:7px 7px 0;
    margin-top:3px;
}

.full a:hover:before,
.full a:focus:before,
.full a:active:before,
.full a:hover:after,
.full a:focus:after,
.full a:active:after {
    border-color:transparent #730800;
    background:transparent;
}

/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */

.exit:before,
.exit:after {
    z-index:1;
    top:50%;
    left:8px;
    width:3px;
    height:14px;
    border:5px solid #c55500;
    border-width:5px 0;
    margin-top:-12px;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.exit:after {
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.exit:hover:before,
.exit:hover:after {
    border-color:#730800;
}

.exit a:before,
.exit a:after {
    z-index:10;
    left:2px;
    width:6px;
    border-width:5px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-5px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.exit a:after {
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.exit a:hover:before,
.exit a:focus:before,
.exit a:active:before,
.exit a:hover:after,
.exit a:focus:after,
.exit a:active:after {
    border-color:transparent #730800;
    background:transparent;
}

/* EJECT
------------------------------------------------------------------------------------------------------------------------------- */

.eject a:before {
    left:1px;
    width:14px;
    height:2px;
    margin-top:4px;
}

.eject a:after {
    left:1px;
    border:8px solid transparent;
    border-width:8px 7px;
    border-bottom-color:#c55500;
    margin-top:-13px;
    background:transparent;
}

.eject a:hover:after,
.eject a:focus:after,
.eject a:active:after {
    border-bottom-color:#730800;
}
暂无JavaScript代码

👁️ 实时预览