/* -----------------------------------------------------
	iOS-style Popups
	Brett Terpstra 2012
	<http://brettterpstra.com>
----------------------------------------------------- */


/* -----------------------------------------------------
		Primary box styling
	----------------------------------------------------- */

.popup, .arrow:after {
	background: rgba(0,0,0,.8);
}

.popup {
	position: relative;
	width: 170px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	padding: 0;
	text-align: center;
	text-indent: 0px;
	color: #FFFFFF;
	text-shadow: #5B5B5B 0px -1px 0px;
	font: 14px/18px "Myriad Pro";
	margin: 20px;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,.4);
	box-shadow: 2px 2px 3px rgba(0,0,0,.4);
}
.popup * {
	color: #fff !important;
}
.popup p {
	display: block;
	padding: 14px 10px;
	font-size: 14px;
}
.popup ul {
	list-style: none;
	margin: 0;
	padding: 4px 8px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

.popup.north,.popup.south,.popup.east,.popup.west {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.popup li {
	border-bottom: solid 1px rgba(20,20,20,.4);
	border-top: solid 1px rgba(80,80,80,.4);
	padding: 2px 0 0;
	line-height: 1.6em;
}

.popup li:first-child {
	border-top: none;
	margin-top: 0;
}

.popup li:last-child {
	border-bottom: none;
	margin-bottom: 6px;
}

.popup a {
	margin: 4px 0;
	display: block;
	text-decoration: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #111;

	background: -webkit-linear-gradient(top, #565656 22.5%, #4A4A4A 100.0%);
	background: -moz-linear-gradient(top, #565656 22.5%, #4A4A4A 100.0%);
	background: linear-gradient(top, #565656 22.5%, #4A4A4A 100.0%);

	-webkit-box-shadow: 0px -0px 2px #222, inset 0px -2px 3px #616161;
	-moz-box-shadow: 0px -0px 2px #222, inset 0px -2px 3px #616161;
	box-shadow: 0px -0px 2px #222, inset 0px -2px 3px #616161;
	text-indent: 0px;
	color: #FFFFFF;
	text-shadow: #3C3C3C 0px -1px 0px;
	line-height: 2em;

}

.popup a:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.2, #4E4E4E), color-stop(1.0, #4A4A4A));

	background: -webkit-linear-gradient(top, #4E4E4E 18.6%, #4A4A4A 100.0%);
	background: -moz-linear-gradient(top, #4E4E4E 18.6%, #4A4A4A 100.0%);
	background: linear-gradient(top, #4E4E4E 18.6%, #4A4A4A 100.0%);
}

.popup a:active {
	background: -webkit-linear-gradient(top, #3A3A3D 22.5%, #4A4A4A 100.0%);
	background: -moz-linear-gradient(top, #3A3A3D 22.5%, #4A4A4A 100.0%);
	background: linear-gradient(top, #3A3A3D 22.5%, #4A4A4A 100.0%);
}

/* -----------------------------------------------------
	Arrows
----------------------------------------------------- */

.arrow {
	overflow: hidden;
	position: absolute;
}
.arrow:after {
	content: "";
	position: absolute;
	width: 27px;
	height: 28px;
	-webkit-transform: rotate(45deg);
	-moz-transform:		rotate(45deg);
	-ms-transform:		 rotate(45deg);
	-o-transform:			rotate(45deg);
}

.north .arrow,.south .arrow {
	display: block;
	width: 28px;
	height: 18px;
	left: 50%;
	margin-left: -18px;
}

.north .arrow {
	top: -18px;
	left: 50%;
	margin-left: -13px;*/
}

.north .arrow:after {
	top: 10px;
}

.south .arrow {
	bottom: -18px;
}

.south .arrow:after {
	bottom: 10px;
}

.east .arrow,.west .arrow {
	display: block;
	width: 18px;
	height: 28px;
	top: 55%;
}

.east .arrow {
	right: 13px;
	margin-top: -18px;
	right: -18px;
}

.east .arrow:after {
	right: 10px;
}

.west .arrow {
	margin-top: -18px;
	left: -18px;
}

.west .arrow:after {
	left: 10px;
}

/* -----------------------------------------------------
	Modifiers
----------------------------------------------------- */
	
.left, .left li,.left li a { text-align: left; text-indent:10px; }
.nodivider li { border: none !important; }
.compact li a { margin: 0; }
.compact.nodivider li a { margin: 2px 0 0; }
.compact ul { padding-top: 7px; }