main.less

/*
 * The MIT License (MIT)
 * Copyright (c) 2012 Dennis Kehrig. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

#denniskehrig-v8live-button {
	position: relative;
	display: inline-block;

	margin-right: 8px;
	font-weight: bold;

	-webkit-transition: text-shadow 0.1s, color 0.2s;

	color: #fff;
	&.connected { color: #e00; }
	&.bridged   { color: #fc0; }
	&.live      { color: #0c0; }

	text-shadow: 0 0 2px #333, 0 0 2px #333;
	&:hover {
		text-shadow: 0 0 2px #000, 0 0 2px #000;
		text-decoration: none;
		&:before {
			content: attr(data-description);
			display: block;
			position: absolute;

			text-shadow: none;
			font-weight: normal;
			font-size: 80%;
			
			right: -50%;
			top: 100%;
			margin-top: 10px;
			white-space: nowrap;
			
			color: #fff;
			border-radius: 5px;
			padding: 2px 5px;
			box-shadow: 1px 2px 4px #ccc;
			
			background-color: rgba(0, 0, 0, 0.8);
		}
		&:after {
			content: "";
			display: block;
			position: absolute;

			right: 50%;
			top: 100%;
			margin-right: -6px;
			margin-top: 4px;

			width:    0;
			height:   0;
			
			border-right:  6px solid transparent;
			border-left:   6px solid transparent;
			border-bottom: 6px solid rgba(0, 0, 0, 0.8);
		}
	}
}