@charset "UTF-8";

/**
 * CSS Barra di amministrazione.
 *
 * @author Daniele De Nobili
 * @copyright (c) Web Agency Meta Line - metaline.it
 */

/* Sposto il body in modo da lasciare spazio per la barra */
html.admin-bar {
	margin-top: 30px;
}

/* Preparo la sprite da includere dove serve */
%pongho-admin-bar-sprite { background-image: url('images/sprite.png'); background-repeat: no-repeat; }

/* Iniziamo... */
#pongho-admin-bar {

	/* Aspetto generale */
	background-color: #464646;
	color: #CCC;
	font: normal 14px/30px Helvetica, Arial, sans-serif;
	height: 30px;

	/* Posizionamento della barra */
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999;

	/* Elenco voci */
	ul {
		line-height: 30px;
		list-style: none;
		margin: 0;
		padding: 0;

		/* Voci di sinistra */
		&#pongho-admin-bar-left {
			border-right: 1px solid #555;
			float: left;

			li.dropdown {
				ul { left: 0; }
				li { text-align: left; }
				li.dropdown ul { left: 100%; }
			}
		}

		/* Voci di destra */
		&#pongho-admin-bar-right {
			border-left: 1px solid #333;
			float: right;

			li.dropdown {
				ul { right: 0; }
				li { text-align: right; }
				li.dropdown ul { right: 100%; }
			}
		}
	}

	li {
		border-left: 1px solid #555;
		border-right: 1px solid #333;
		margin: 0;
		padding: 0;

		/* Posiziono le voci in orizzontale */
		float: left;

		/* Logo Pongho */
		&.pongho-admin-bar-logo a {
			@extend %pongho-admin-bar-sprite;

			background-position: 0 0;
			border-left: 0 none;
			padding: 0;
			text-indent: -9999em;
			width: 108px;

			&:hover {
				background-position: -108px 0;
				background-color: transparent;
			}
		}

		/* Home page */
		&.pongho-admin-bar-homepage a {
			@extend %pongho-admin-bar-sprite;

			background-position: -216px 0;
			padding-left: 32px;
		}

		/* Home page */
		&.pongho-admin-bar-user-settings {
			img {
				border: 0 none;
				height: 20px;
				margin: 5px 0 5px 5px;
				padding: 0;
				vertical-align: bottom;
				width: 20px;
			}
		}

		/* Menù a discesa */
		&.dropdown {
			position: relative;

			ul {
				background-color: #FFF;
				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
				display: none; /* Inizialmente non visibile */
				margin: 0;
				//min-width: 100%;
				padding: 3px 0;
				position: absolute;
				z-index: 99999;

				li {
					/* Rimuovo il bordino */
					border-left: 0 none;
					border-right: 0 none;

					/* Rimuovo il posizionamento orizzontale delle voci */
					float: none;

					/* Voce gestione siti */
					&.pongho-admin-bar-sites-settings {
						background-color: #EEE;
						border-top: 1px solid #DDD;
						margin-bottom: -4px;
						margin-top: 4px;
						padding: 4px 0;
						a { background-color: #EEE; }
						a:hover { background-color: #DDD; }
					}

					/* Secondo livello, menu laterale */
					&.dropdown {
						background-color: #FFF;

						ul {
							display: none;
							top: -3px;

							a, span { background-color: #FFF; min-width: 100px; }
							li:hover a { background-color: #EEE; }
						}

						&:hover {
							ul { display: block; }
						}
					}

					/* Colore dei collegamenti */
					a, span { background-color: #FFF; color: #3F7D9F; min-width: 150px; white-space: nowrap; }
					&:hover {
						a, span { background-color: #EEE; color: #3F7D9F; }
					}
				}
			}

			/* li.dropdown:hover */
			&:hover {
				& > a, & > span { background-color: #FFF; color: #444; }
				ul { display: block; }
			}
		}
	}

	a, span {
		color: #CCC;
		cursor: pointer;
		display: block;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		text-decoration: none;

		&:hover { background-color: #555; color: #FFF; text-decoration: none; }
	}
}
