Team:Shenzhen/css/icon.css

From 2012.igem.org

/* -------------------


Title: icon.css Team: Shenzhen Author: BGI_K2 Twitter: @BGI_K2 Email: im.ss.kk@gmail.com

Please contact me if you would like to use this script

*/

.icon { position: relative; width:80px; height:80px; margin: 16px; } .icon .name { width: 32px; position: absolute; text-align: center; top: 18px; left: -8px; }

.icon-minus-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-minus-line { background-color: #fff; width: 8px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top:7px; left: 4px; }

.icon-plus-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-plus-line-1 { background-color: #fff; width: 8px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top:7px; left: 4px; } .icon-plus-line-2 { background-color: #fff; width: 2px; height: 8px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top:4px; left: 7px; }

.icon-disc-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-disc-dot { background-color: #fff; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; width: 4px; height: 4px; position: absolute; top:6px; left:6px; }

.icon-clock-circle { border-color: #000; border-style: solid; border-width: 2px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 12px; height: 12px; position: absolute; top:0; left:0; } .icon-clock-line-1 { background-color: #000; width: 1px; height: 6px; position: absolute; top:3px; left:7px; } .icon-clock-line-2 { background-color: #000; width: 4px; height: 1px; position: absolute; top:8px; left:8px; }

.icon-volume-rectangle { background-color: #000; width: 5px; height: 8px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; position: absolute; top:4px; left:2px; } .icon-volume-triangle { border: 4px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 8px; width: 0; position: absolute; top: 0; right: 4px; } .icon-volume-line { background-color: #000; width: 2px; height: 16px; position: absolute; top:0; right:2px; }

.icon-pause-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-pause-line-1 { background-color: #fff; width: 2px; height: 8px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 4px; left: 5px; } .icon-pause-line-2 { background-color: #fff; width: 2px; height: 8px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 4px; left: 9px; }

.icon-plasma-rectangle { border: #000 1px solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; width: 14px; height: 8px; position: absolute; top:2px; left:0; } .icon-plasma-line-1 { background-color: #000; width: 4px; height: 1px; position: absolute; top:12px; left:6px; } .icon-plasma-line-2 { background-color: #000; width: 8px; height: 1px; position: absolute; top:13px; left:4px; }

.icon-bulb-circle { border:#000 2px solid; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; width: 8px; height: 8px; position: absolute; top: 0; left: 2px; } .icon-bulb-line-1 { background-color: #000; width: 4px; height: 3px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 10px; left: 6px; } .icon-bulb-line-2 { background-color: #000; width: 4px; height: 2px; position: absolute; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; -webkit-border-bottom-left-radius: 1px; -webkit-border-bottom-right-radius: 1px; -moz-border-radius: 1px; top: 14px; left: 6px; }

.icon-iphone-rectangle-1 { background-color: #000; border-top-left-radius:2px; border-top-right-radius:2px; -webkit-border-top-left-radius:2px; -webkit-border-top-right-radius:2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; width: 10px; height: 3px; position: absolute; top: 0; left: 3px; } .icon-iphone-rectangle-2 { border: #000 1px solid; width: 8px; height: 9px; position: absolute; top: 2px; left: 3px; } .icon-iphone-rectangle-3 { background-color: #000; border-bottom-left-radius:2px; border-bottom-right-radius:2px; -webkit-border-bottom-left-radius:2px; -webkit-border-bottom-right-radius:2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; width: 10px; height: 4px; position: absolute; top: 12px; left: 3px; } .icon-iphone-line { background-color: #fff; width: 4px; height: 1px; position: absolute; top: 1px; left: 6px; } .icon-iphone-dot { background-color: #fff; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; width: 2px; height: 2px; position: absolute; top: 13px; left: 7px; }

.icon-battery-rectangle { border:#000 1px solid; width: 12px; height: 6px; position: absolute; top: 4px; left: 0; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; } .icon-battery-dot { background-color: #000; width: 2px; height: 4px; position: absolute; top: 6px; left: 14px; border-radius-top-right:1px; border-radius-bottom-right:1px; -webkit-border-radius-top-right:1px; -webkit-border-radius-bottom-right:1px; -moz-border-radius-topright: 1px; -moz-border-radius-bottomright: 1px; } .icon-battery-line { background-color: #000; width: 10px; height: 4px; position: absolute; top: 6px; left: 2px; }

.green .icon-battery-line { background-color: #ad2; }

.red .icon-battery-line { background-color: #f00; width: 2px; -webkit-transition-property: width, background-color; -webkit-transition-duration: 0.333s; -webkit-transition-timing-function: linear; -moz-transition-property: width, background-color; -moz-transition-duration: 0.333s; -moz-transition-delay: 0; -moz-transition-timing-function: linear; }

.red:hover .icon-battery-line { width: 10px; background-color: #ad2; }

.icon-video-rectangle { background-color: #000; width: 12px; height: 10px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 3px; left: 0; } .icon-video-triangle { border: 4px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 4px; right: 0; }

.icon-paper-rectangle { border: #000 1px solid; width: 12px; height: 14px; position: absolute; top: 0; left: 1px; } .icon-paper-line-1 { background-color: #000; width: 4px; height: 1px; position: absolute; top: 2px; left: 3px; } .icon-paper-line-2 { background-color: #000; width: 4px; height: 1px; position: absolute; top: 4px; left: 3px; } .icon-paper-line-3 { background-color: #000; width: 4px; height: 1px; position: absolute; top: 6px; left: 3px; } .icon-paper-line-4 { background-color: #000; width: 5px; height: 7px; position: absolute; top: 2px; left: 8px; } .icon-paper-line-5 { background-color: #000; width: 10px; height: 4px; position: absolute; top: 10px; left: 3px; }

.icon-smile-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-smile-dot-1 { background-color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; width: 2px; height: 3px; position: absolute; top: 4px; left: 4px; } .icon-smile-dot-2 { background-color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; width: 2px; height: 3px; position: absolute; top: 4px; left: 10px; } .icon-smile-line { background-color: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; width: 8px; height: 3px; position: absolute; top: 9px; left: 4px; }

.icon-smile .icon-smile-line { -webkit-transition-property: -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, -webkit-border-top-left-radius, -webkit-border-top-right-radius; -webkit-transition-duration: 0.333s; -webkit-transition-timing-function: linear; -moz-transition-property: -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright; -moz-transition-duration: 0.333s; -moz-transition-delay: 0; -moz-transition-timing-function: linear; } .icon-smile:hover .icon-smile-line { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; }

.icon-picture-rectangle { border: #000 1px solid; width: 14px; height: 10px; position: absolute; top: 2px; left: 0; } .icon-picture-dot { background-color: #000; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 5px; left: 3px; } .icon-picture-dune-1 { background-color: #000; width: 4px; height: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; position: absolute; top: 10px; left: 2px; } .icon-picture-dune-2 { background-color: #000; width: 8px; height: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; position: absolute; top: 8px; left: 6px; }

.icon-comment-rectangle { background-color: #000; width: 16px; height: 10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; top: 2px; left: 0; } .icon-comment-triangle { border: 4px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 8px; right: 0; }

.icon-typing-rectangle { background-color: #000; width: 16px; height: 10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; top: 2px; left: 0; } .icon-typing-triangle { border: 4px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 8px; right: 0; } .icon-typing-circle-1 { background-color: #fff; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 6px; left: 3px; } .icon-typing-circle-2 { background-color: #fff; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 6px; left: 7px; } .icon-typing-circle-3 { background-color: #fff; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 6px; left: 11px; }

.icon-screens-rectangle-1 { background-color: #fff; border:#000 1px solid; width: 11px; height: 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; top: 2px; right: 0; } .icon-screens-rectangle-2 { background-color: #fff; border:#000 1px solid; width: 11px; height: 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; bottom: 2px; left: 0; }

.icon-play-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-play-triangle { border: 5px solid #fff; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 3px; left: 6px; }

.icon-up-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-up-triangle { border: 4px solid #fff; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; height: 0; width: 0; position: absolute; top: 0px; left: 4px; } .icon-up-line { background-color: #fff; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 2px; height: 6px; position: absolute; top:6px; left:7px; }

.icon-down-circle { background-color: #000; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 16px; height: 16px; position: absolute; top:0; left:0; } .icon-down-triangle { border: 4px solid #fff; border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; bottom: 0px; left: 4px; } .icon-down-line { background-color: #fff; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; width: 2px; height: 6px; position: absolute; bottom:6px; left:7px; }

.icon-back-triangle-1 { border: 6px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 2px; right: 9px; } .icon-back-triangle-2 { border: 2px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 2px; left: 7px; } .icon-back-triangle-3 { border: 2px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; bottom: 2px; left: 7px; } .icon-back-line { background-color: #000; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; width: 12px; height: 4px; position: absolute; top:6px; right:1px; }

.icon-forward-triangle-1 { border: 6px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 2px; left: 9px; } .icon-forward-triangle-2 { border: 2px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 2px; right: 7px; } .icon-forward-triangle-3 { border: 2px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; bottom: 2px; right: 7px; } .icon-forward-line { background-color: #000; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; width: 12px; height: 4px; position: absolute; top:6px; left:1px; }

.icon-camera-rectangle { background-color: #000; width: 16px; height: 10px; position: absolute; top: 4px; left: 0; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; } .icon-camera-circle { background-color: #000; border: #fff 2px solid; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: 4px; height: 4px; position: absolute; top: 5px; left: 5px; } .icon-camera-line { background-color: #000; width: 4px; height: 4px; position: absolute; top: 2px; left: 3px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }

.icon-yang-rectangle-1 { background-color: #fff; border: #000 2px solid; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; width: 12px; height: 12px; position: absolute; top: 0; left: 0; } .icon-yang-rectangle-2 { background-color: #000; width: 6px; height: 12px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; position: absolute; top: 2px; right: 2px; } .icon-yang-circle-1 { background-color: #fff; width: 6px; height: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; bottom: 2px; left: 5px; } .icon-yang-circle-2 { background-color: #000; width: 6px; height: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 2px; right: 5px; } .icon-yang-dot-1 { background-color: #fff; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 4px; right: 7px; } .icon-yang-dot-2 { background-color: #000; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; bottom: 4px; left: 7px; }

.icon-profile-circle { background-color: #000; width: 12px; height: 126px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position: absolute; top: 2px; left: 10px; } .icon-profile-rectangle { background-color: #000; width: 20px; height: 14px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; position: absolute; bottom: 2px; left: 6px; }

.icon-folder-rectangle-1 { background-color: #000; width: 16px; height: 8px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; position: absolute; bottom: 2px; left: 0; } .icon-folder-rectangle-2 { background-color: #000; width: 8px; height: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; position: absolute; top: 4px; right: 0; } .icon-folder-rectangle-3 { background-color: #000; width: 7px; height: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; position: absolute; top: 2px; left: 0; }

.icon-heart-triangle { border: 8px solid #000; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 6px; left: 0; } .icon-heart-circle-1 { background-color: #000; width: 8px; height: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; position: absolute; top: 2px; left: 0; } .icon-heart-circle-2 { background-color: #000; width: 8px; height: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; position: absolute; top: 2px; right: 0; }

.icon-cmd-square { border: #000 2px solid; width: 2px; height: 2px; position: absolute; top: 5px; left: 5px; } .icon-cmd-circle-1 { border: #000 2px solid; width: 2px; height: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomleft: 4px; position: absolute; top: 1px; left: 1px; } .icon-cmd-circle-2 { border: #000 2px solid; width: 2px; height: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; position: absolute; top: 1px; right: 1px; } .icon-cmd-circle-3 { border: #000 2px solid; width: 2px; height: 2px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; position: absolute; bottom: 1px; left: 1px; } .icon-cmd-circle-4 { border: #000 2px solid; width: 2px; height: 2px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; position: absolute; bottom: 1px; right: 1px; }

.icon-mic-circle { border: #000 2px solid; border-top: transparent; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; width: 8px; height: 8px; position: absolute; left: 2px; bottom: 2px; } .icon-mic-line { background-color: #000; width: 4px; height: 10px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; top: 0; left: 6px; } .icon-mic-dot { background-color: #000; width: 2px; height: 2px; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; -webkit-border-bottom-left-radius: 1px; -webkit-border-bottom-right-radius: 1px; -moz-border-radius-bottomleft: 1px; -moz-border-radius-bottomright: 1px; position: absolute; bottom: 0; left: 7px; }

.icon-home-triangle { border: 8px solid #000; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; height: 0; width: 0; position: absolute; bottom: 7px; left: 0; } .icon-home-rectangle { background-color: #000; width: 10px; height: 8px; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; -webkit-border-bottom-left-radius: 1px; -webkit-border-bottom-right-radius: 1px; -moz-border-radius-bottomleft: 1px; -moz-border-radius-bottomright: 1px; position: absolute; bottom: 1px; left: 3px; } .icon-home-line { background-color: #000; width: 2px; height: 5px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 2px; left: 3px; }

.icon-olympic-circle-1 { border: #09c 2px solid; width: 2px; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 5px; left: 0; } .icon-olympic-circle-3 { border: #000 2px solid; width: 2px; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 5px; left: 6px; } .icon-olympic-circle-5 { border: #f03 2px solid; width: 2px; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 5px; left: 12px; } .icon-olympic-circle-2 { border: #fc0 2px solid; width: 2px; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 8px; left: 3px; } .icon-olympic-circle-4 { border: #093 2px solid; width: 2px; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 8px; left: 9px; }

.icon-hd-rectangle { background-color: #000; width: 16px; height: 10px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; top: 3px; left: 0; } .icon-hd-line-1 { background-color: #fff; width: 1px; height: 6px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 5px; left: 3px; } .icon-hd-line-2 { background-color: #fff; width: 4px; height: 1px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 7px; left: 3px; } .icon-hd-line-3 { background-color: #fff; width: 1px; height: 6px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 5px; left: 6px; } .icon-hd-circle { border: #fff 1px solid; width: 2px; height: 4px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; position: absolute; top: 5px; right: 3px; }

.icon-temp-circle { background-color: #000; width: 6px; height: 6px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; bottom: 1px; left: 5px; } .icon-temp-line { border: #000 1px solid; width: 2px; height: 10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 3px; position: absolute; top: 1px; left: 6px; }

.icon-off-circle { border: #000 2px solid; width: 8px; height: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: absolute; bottom: 1px; left: 2px; } .icon-off-line { background-color: #000; border: #fff 1px solid; width: 2px; height: 6px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 1px; left: 6px; }

.icon-cloud-rectangle { background-color: #000; width: 11px; height: 3px; position: absolute; bottom: 3px; left: 2px; } .icon-cloud-circle-1 { background-color: #000; width: 5px; height: 5px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; bottom: 3px; left: 0; } .icon-cloud-circle-2 { background-color: #000; width: 8px; height: 8px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; bottom: 4px; left: 3px; } .icon-cloud-circle-3 { background-color: #000; width: 7px; height: 7px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; bottom: 3px; right: 0; }

.icon-coffee-line { background-color: #000; width: 14px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; bottom: 1px; left: 1px; } .icon-coffee-circle-1 { border: #000 2px solid; width: 6px; height: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; position: absolute; top: 2px; left: 3px; } .icon-coffee-circle-2 { background-color: #000; width: 4px; height: 4px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; top: 4px; right: 1px; }

.icon-eye-triangle-1 { border: 4px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 4px; right: 11px; } .icon-eye-triangle-2 { border: 4px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 4px; left: 11px; } .icon-eye-circle-1 { border: #000 2px solid; width: 6px; height: 6px; border-radius: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: absolute; top: 3px; left: 3px; } .icon-eye-circle-2 { background-color: #000; width: 2px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 7px; left: 7px; }

.icon-touch-line-1 { background-color: #000; width: 2px; height: 13px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 1px; position: absolute; bottom: 0; left: 4px; } .icon-touch-line-2 { background-color: #000; width: 2px; height: 7px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 1px; position: absolute; bottom: 0; left: 7px; } .icon-touch-line-3 { background-color: #000; width: 2px; height: 6px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 1px; position: absolute; bottom: 0; left: 10px; } .icon-touch-line-4 { background-color: #000; width: 2px; height: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 1px; position: absolute; bottom: 0; left: 13px; } .icon-touch-circle { border: #000 1px solid; width: 6px; height: 6px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; top: 0; left: 1px; }

.icon-repeat-triangle-1 { border: 3px solid #000; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; bottom: 1px; right: 13px; } .icon-repeat-rectangle-1 { border: 2px solid #000; border-left: transparent; border-top: transparent; border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; width: 8px; height: 4px; position: absolute; bottom: 3px; left: 2px; } .icon-repeat-triangle-2 { border: 3px solid #000; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 1px; left: 13px; } .icon-repeat-rectangle-2 { border: 2px solid #000; border-right: transparent; border-bottom: transparent; border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; width: 8px; height: 4px; position: absolute; top: 3px; left: 4px; }

.icon-eject-triangle { border: 6px solid #000; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; height: 0; width: 0; position: absolute; bottom: 6px; left: 2px; } .icon-eject-line { background-color: #000; width: 12px; height: 2px; position: absolute; bottom: 3px; left: 2px; }

.icon-female-circle { border: #000 2px solid; width: 6px; height: 6px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; position: absolute; top: 0; left: 3px; } .icon-female-line-1 { background-color: #000; width: 2px; height: 8px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 8px; left: 7px; } .icon-female-line-2 { background-color: #000; width: 8px; height: 2px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; top: 12px; left: 4px; }

.icon-feed-dot { background-color: #000; width: 6px; height: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: absolute; bottom: 1px; left: 1px; } .icon-feed-circle-1 { border: #000 2px solid; border-bottom-color: transparent; border-left-color: transparent; width: 6px; height: 6px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; position: absolute; bottom: 1px; left: 1px; } .icon-feed-circle-2 { border: #000 2px solid; border-bottom-color: transparent; border-left-color: transparent; width: 10px; height: 10px; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; position: absolute; bottom: 1px; left: 1px; }

.icon-message-triangle-1 { border: 6px solid #000; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; height: 0; width: 0; position: absolute; top: 2px; left: 2px; } .icon-message-triangle-2 { border: 6px solid #000; border-top-color: transparent; border-left-color: transparent; border-bottom-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomright: 2px; height: 0; width: 0; position: absolute; bottom: 2px; right: 0; } .icon-message-triangle-3 { border: 6px solid #000; border-top-color: transparent; border-right-color: transparent; border-bottom-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomleft: 2px; height: 0; width: 0; position: absolute; bottom: 2px; left: 0; }

Retrieved from "http://2012.igem.org/Team:Shenzhen/css/icon.css"