jetpack-rails 0.1.0

data/LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2011 Andrew Burleson
+
+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.

data/README.md

@@ -0,0 +1,3 @@
+# JETPACK
+
+A sweet boostrap mashup. More readme will be added in the future.

data/lib/jetpack-rails.rb

@@ -0,0 +1,9 @@
+require 'sass-rails'
+
+module Jetpack
+	module Rails
+		class Engine < ::Rails::Engine
+			# Make Rails aware of Jetpack's Vendor Assets
+		end
+	end
+end

data/vendor/assets/javascripts/jetpack/alerts.js

@@ -0,0 +1,8 @@
+$(function() {
+	$('div.alert_message[data-persist=false]').delay(2000).slideUp();
+	$('div.alert_message[data-persist=true]').append('<a href="#" class="close">x</a>');
+	$('div.alert_message[data-persist=true] a.close').click( function( event ) {
+		$(this).parent().slideUp();
+		event.preventDefault();
+	});
+});

data/vendor/assets/javascripts/jetpack/modal.js

@@ -0,0 +1,51 @@
+/*
+ * Jetpack Modal
+ * Super-Simple Modal Dialogs
+ *
+ * Inspired by jQuery Reveal Plugin 1.0
+ */
+
+(function ($) {
+	$('a[data-modal]').live('click', function (event) {
+		event.preventDefault();
+		var modalLocation = $(this).attr('data-modal');
+		$('#' + modalLocation).modal();
+	});
+	
+	$.fn.modal = function() {
+		var modal = $(this);
+		var modalBg = $('.modal_bg');
+		
+		if ( modalBg.length == 0 ) {
+			modalBg = $('<div class="modal_bg"></div>').insertAfter(modal);
+		}
+
+		if( modal.not(':visible') ) {
+			openModal();
+		} else { 
+			closeModal();
+		}
+
+		function openModal() {
+			modalBg.fadeIn();
+			modal.fadeIn();
+		}
+
+		function closeModal() {
+			modal.fadeOut();
+			modalBg.fadeOut();
+		}
+
+		$('body').keyup( function (event) {
+			if (event.which === 27) {
+				closeModal();
+			}
+		});
+		
+		$('a.close_modal').click( function(event) {
+			event.preventDefault();
+			closeModal();
+		});
+		
+	};
+})(jQuery);

data/vendor/assets/javascripts/jetpack/tabs.js

@@ -0,0 +1,44 @@
+/*
+* Skeleton Tabs Remix
+* Converting to a jQuery function that can be called
+* .tabs() or .pills()
+* on any selector.
+*
+* Based on:
+* Skeleton V1.1
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 8/17/2011
+*/
+
+(function($) {
+	$.fn.tabs = $.fn.pills = function() {
+		var selector = $(this);
+		
+		selector.each( function(i) {
+			//Get all tabs
+			var tab = $(this).find('> li > a');
+			tab.click(function(e) {
+	
+				//Get Location of tab's content
+				var contentLocation = $(this).attr('href');
+	
+				//Let go if not a hashed one
+				if(contentLocation.charAt(0)=="#") {
+	
+					e.preventDefault();
+	
+					//Make Tab Active
+					tab.removeClass('active');
+					$(this).addClass('active');
+	
+					//Show Tab Content & add active class
+					$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
+	
+				}
+			});
+		});
+	}
+})(jQuery);

data/vendor/assets/javascripts/jetpack/tipsy.js

@@ -0,0 +1,268 @@
+// TIPSY +
+// Changes to default Tipsy:
+// * Default Gravity is now S (meaning tips appear above element)
+// * Fade is on by default
+// * Added 'popover' functoin as convenient way of creating popovers
+
+
+// tipsy, facebook style tooltips for jquery
+// version 1.0.0a
+// (c) 2008-2010 jason frame [jason@onehackoranother.com]
+// released under the MIT license
+
+(function($) {
+	
+	function maybeCall(thing, ctx) {
+		return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
+	};
+	
+	function Tipsy(element, options) {
+		this.$element = $(element);
+		this.options = options;
+		this.enabled = true;
+		this.fixTitle();
+	};
+	
+	Tipsy.prototype = {
+		show: function() {
+			var title = this.getTitle();
+			if (title && this.enabled) {
+				var $tip = this.tip();
+				
+				$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
+				$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
+				$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
+				
+				var pos = $.extend({}, this.$element.offset(), {
+					width: this.$element[0].offsetWidth,
+					height: this.$element[0].offsetHeight
+				});
+				
+				var actualWidth = $tip[0].offsetWidth,
+					actualHeight = $tip[0].offsetHeight,
+					gravity = maybeCall(this.options.gravity, this.$element[0]);
+				
+				var tp;
+				switch (gravity.charAt(0)) {
+					case 'n':
+						tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
+						break;
+					case 's':
+						tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
+						break;
+					case 'e':
+						tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
+						break;
+					case 'w':
+						tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
+						break;
+				}
+				
+				if (gravity.length == 2) {
+					if (gravity.charAt(1) == 'w') {
+						tp.left = pos.left + pos.width / 2 - 15;
+					} else {
+						tp.left = pos.left + pos.width / 2 - actualWidth + 15;
+					}
+				}
+				
+				$tip.css(tp).addClass('tipsy-' + gravity);
+				$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
+				if (this.options.className) {
+					$tip.addClass(maybeCall(this.options.className, this.$element[0]));
+				}
+				
+				if (this.options.fade) {
+					$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
+				} else {
+					$tip.css({visibility: 'visible', opacity: this.options.opacity});
+				}
+			}
+		},
+		
+		hide: function() {
+			if (this.options.fade) {
+				this.tip().stop().fadeOut(function() { $(this).remove(); });
+			} else {
+				this.tip().remove();
+			}
+		},
+		
+		fixTitle: function() {
+			var $e = this.$element;
+			if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
+				$e.attr('original-title', $e.attr('title') || '').removeAttr('title');
+			}
+		},
+		
+		getTitle: function() {
+			var title, $e = this.$element, o = this.options;
+			this.fixTitle();
+			var title, o = this.options;
+			if (typeof o.title == 'string') {
+				title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
+			} else if (typeof o.title == 'function') {
+				title = o.title.call($e[0]);
+			}
+			title = ('' + title).replace(/(^\s*|\s*$)/, "");
+			return title || o.fallback;
+		},
+		
+		tip: function() {
+			if (!this.$tip) {
+				this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
+			}
+			return this.$tip;
+		},
+		
+		validate: function() {
+			if (!this.$element[0].parentNode) {
+				this.hide();
+				this.$element = null;
+				this.options = null;
+			}
+		},
+		
+		enable: function() { this.enabled = true; },
+		disable: function() { this.enabled = false; },
+		toggleEnabled: function() { this.enabled = !this.enabled; }
+	};
+	
+	$.fn.tipsy = function(options) {
+		
+		if (options === true) {
+			return this.data('tipsy');
+		} else if (typeof options == 'string') {
+			var tipsy = this.data('tipsy');
+			if (tipsy) tipsy[options]();
+			return this;
+		}
+		
+		options = $.extend({}, $.fn.tipsy.defaults, options);
+		
+		function get(ele) {
+			var tipsy = $.data(ele, 'tipsy');
+			if (!tipsy) {
+				tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
+				$.data(ele, 'tipsy', tipsy);
+			}
+			return tipsy;
+		}
+		
+		function enter() {
+			var tipsy = get(this);
+			tipsy.hoverState = 'in';
+			if (options.delayIn == 0) {
+				tipsy.show();
+			} else {
+				tipsy.fixTitle();
+				setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
+			}
+		};
+		
+		function leave() {
+			var tipsy = get(this);
+			tipsy.hoverState = 'out';
+			if (options.delayOut == 0) {
+				tipsy.hide();
+			} else {
+				setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
+			}
+		};
+		
+		if (!options.live) this.each(function() { get(this); });
+		
+		if (options.trigger != 'manual') {
+			var binder	 = options.live ? 'live' : 'bind',
+				eventIn	 = options.trigger == 'hover' ? 'mouseenter' : 'focus',
+				eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
+			this[binder](eventIn, enter)[binder](eventOut, leave);
+		}
+		
+		return this;
+		
+	};
+	
+	$.fn.tipsy.defaults = {
+		className: null,
+		delayIn: 0,
+		delayOut: 0,
+		fade: false,
+		fallback: '',
+		gravity: 's',
+		html: false,
+		live: false,
+		offset: 0,
+		opacity: 0.8,
+		title: 'title',
+		trigger: 'hover'
+	};
+	
+	// Overwrite this method to provide options on a per-element basis.
+	// For example, you could store the gravity in a 'tipsy-gravity' attribute:
+	// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
+	// (remember - do not modify 'options' in place!)
+	$.fn.tipsy.elementOptions = function(ele, options) {
+		return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
+	};
+	
+	$.fn.tipsy.autoNS = function() {
+		return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
+	};
+	
+	$.fn.tipsy.autoWE = function() {
+		return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
+	};
+	
+	/**
+	*	yields a closure of the supplied parameters, producing a function that takes
+	*	no arguments and is suitable for use as an autogravity function like so:
+	*
+	*	@param margin (int) - distance from the viewable region edge that an
+	*		element should be before setting its tooltip's gravity to be away
+	*		from that edge.
+	*	@param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
+	*		if there are no viewable region edges effecting the tooltip's
+	*		gravity. It will try to vary from this minimally, for example,
+	*		if 'sw' is preferred and an element is near the right viewable 
+	*		region edge, but not the top edge, it will set the gravity for
+	*		that element's tooltip to be 'se', preserving the southern
+	*		component.
+	*/
+	 $.fn.tipsy.autoBounds = function(margin, prefer) {
+		return function() {
+			var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
+					boundTop = $(document).scrollTop() + margin,
+					boundLeft = $(document).scrollLeft() + margin,
+					$this = $(this);
+
+			if ($this.offset().top < boundTop) dir.ns = 'n';
+			if ($this.offset().left < boundLeft) dir.ew = 'w';
+			if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
+			if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
+
+			return dir.ns + (dir.ew ? dir.ew : '');
+		}
+	};
+})(jQuery);
+
+// Added convenience function for generating popovers with Tipsy.
+// To use, create a wrapper for the HTML content of the popover, and place its selector in the "rel" attribute of the element which is popped over.
+//
+// Example Markup
+// 
+// <a class="popped" href="#" rel="#my-popover">pop over this</a>
+// <div id="my-popover"><h1>Hello</h1><p>I'm going to be popped over.</p></div>
+//
+// Example Function Call
+// 
+// $(function(){
+//		$('a.popped').popover();
+// });
+(function($){
+	$.fn.popover = function() {
+	var selector = $(this).attr('rel');
+	var content = $(selector).html();
+	$(this).tipsy({ fade: true, html: true, title: function() { return content; } });
+	};
+})(jQuery);

data/vendor/assets/javascripts/jetpack.js

@@ -0,0 +1,4 @@
+//= require jetpack/alerts
+//= require jetpack/modal
+//= require jetpack/tabs
+//= require jetpack/tipsy

data/vendor/assets/stylesheets/jetpack/forms.css.scss

@@ -0,0 +1,67 @@
+/* Forms +
+ * Influenced by Twitter Bootstrap, Normalize, and Formalize Projects
+ * ---------------------------------------------------------------------------------------- */
+
+// Universal
+form { margin-bottom: $baseline; @include font; @include clearfix;
+
+	fieldset {
+		margin: 0 0 $baseline; padding: 0; border: 0; position: relative; clear: both;
+		legend { display: block; margin-bottom: $baseline; font-size: $base_size * 1.3; }
+	}
+
+	div.input { @include clearfix; margin-bottom: $baseline;
+		label { display: block; text-align: right; height: 2em; font-weight: 700; }
+
+		input[type="text"], input[type="email"], select, textarea {
+			@include border-radius(3px); border: 1px solid $light2; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); color: $dark1;
+		}
+
+		.radio, .checkboxes {
+			label { display: inline !important; margin: 0 $baseline 0 0; height: auto; font-weight: 300; }
+			input { width: auto; margin-right: $baseline / 4; }
+		}
+		
+		span.hint { display: block; margin-top: $baseline / 4; clear: both; color: $light2; font-size: $base_size - 1px; }
+	}
+	
+	input[type="submit"] { margin-bottom: $baseline / 2; }
+}
+
+// Standard Form Elements (labels beside inputs)
+form.standard {
+
+	fieldset {
+		legend { padding: 0 0 0 20%; }
+	}
+
+	div.input {
+		label { float: left; width: 17.5%; margin-right: 2.5%; }
+
+		input[type="text"], input[type="email"], select, textarea { float: left; width: 80%; }
+	
+		.radio, .checkboxes {
+			label { float: none; }
+		}
+		
+		span.hint { float: left; margin-left: 20%; }
+	}
+	
+	input[type="submit"] { margin-left: 20%; }
+	
+	div.inset { margin-left: 20%; }
+}
+
+// Stacked Form Elements
+form.stacked { margin-bottom: $baseline; @include font;
+
+	div.input {
+		label { clear: both; margin-bottom: $baseline / 4; text-align: left; }
+		input, select, textarea { width: 100%; }
+		
+		.radio, .checkboxes { 
+			input { width: auto; }
+		}
+
+	}
+}

data/vendor/assets/stylesheets/jetpack/fractionalize.css.scss

@@ -0,0 +1,101 @@
+/*	--------------------------------------------------
+
+	Fractionalize.CSS
+	A css framework that lets you setup many different
+	fractional grid layouts quickly and easily.
+	
+	WHY?
+	Grab just about any other framework and try this:
+	Create a layout using four equal colums.
+	Create a second layout using five equal columns.
+	Oops -- any "traditional" grid framework has either
+	and odd or even number of total columns, meaning that while
+	you're using that framework you can either divide the page
+	equally into odd increments, or even increments, but not
+	both.
+	
+	That's lame. Hence, this framework isn't about using a
+	fancy schmancy generator and agonizing over how many
+	columns you should ask it for, it's about being able
+	to quickly and easily divide the page into whatever
+	fractions you want at any time.
+	
+	Inspired by Blueprint CSS, and based on Blueprint
+	terminology and use.
+
+	SASSY
+	Originally a pure CSS framework, this has now been
+	converted to leverage the power of SASS to make it
+	even better.
+	http://www.sass-lang.com
+	
+	--------------------------------------------------	*/
+
+
+// LAYOUT DEFAULTS
+// Make sure the body always fills the page.
+* {	margin: 0; }
+html, body { height: 100%; }
+
+// VARIABLES
+// Setup the pixel dimensions
+$full_width: 960px;
+
+@function margin_width( $denom ) {
+	@if $denom == 1 { @return 0 }
+	@if $denom == 2 { @return 20px }
+	@if $denom == 3 { @return 21px }
+	@if $denom == 4 { @return 20px }
+	@if $denom == 5 { @return 20px }
+	@if $denom == 6 { @return 18px }
+	@if $denom == 8 { @return 16px }
+	@if $denom == 10 { @return 10px }
+}
+
+@function col_width( $denom ) {
+	$col_space: $full_width / $denom;
+	$gutters: $denom - 1;
+	$total_margin: $gutters * margin_width( $denom );
+	$total_width: $full_width - $total_margin;
+	@return $total_width / $denom
+}
+
+@function col_span( $num, $denom ) {
+	$col_width: $num * col_width( $denom );
+	$margin_width: ($num - 1) * margin_width( $denom );
+	@return $col_width + $margin_width
+}
+
+@mixin container( $width: $full_width ) {
+	width: $full_width;
+	margin: 0 auto;
+	clear: both;
+	@include clearfix;
+}
+
+@mixin grid( $num, $denom ) {
+	display: block;
+	float: left;
+	width: col_span( $num, $denom );
+	margin-left: margin_width( $denom );
+	&:first-child { margin-left: 0; }
+}
+
+@mixin prepend( $num, $denom ) {
+	padding-left: col_span( $num, $denom ) + margin_width( $denom );
+}
+
+@mixin append( $num, $denom ) {
+	padding-right: col_span( $num, $denom ) + margin_width( $denom );
+}
+
+@mixin col_border( $denom, $thickness: 1px, $style: solid, $color: #CCC ) {
+	$half: margin_width( $denom ) / 2;
+	$padding: $half - $thickness;
+	$margin: $half;
+	padding-left: $padding;
+	margin-left: $margin;
+	border-left: $thickness $style $color;
+}
+
+div.container { clear: both; margin: 0 auto; width: $full_width; }

data/vendor/assets/stylesheets/jetpack/interface.css.scss

@@ -0,0 +1,67 @@
+/* Interface Elements
+ * Influenced by Twitter Bootstrap and Formalize
+ * ---------------------------------------------------------------------------------------- */
+
+
+// LABELS
+span.label {
+	display: inline-block; padding: 1px 5px; background: $light2; color: $white; @include border-radius(3px);
+	&.success { background: $success2; }
+	&.notice { background: $notice2; color: $dark2; }
+	&.error { background: $error2; }
+}
+
+// BUTTONS
+a.button, span.button {
+	display: inline-block;
+	cursor: pointer;
+	@include box-shadow( 0px 1px 1px rgba(0,0,0,0.15) );
+	@include border-radius(4px);
+	@include buttonize( $white, $light1 );
+	font: bold 12px/1.3 $sans;
+	text-decoration: none;
+	color: $dark2;
+	padding: 3px 10px;
+	width: auto;
+	&:active { @include buttonize( $light1, $white ); @include box-shadow( none ); }
+	&.disabled { @include buttonize( $light1, $light1); color: $light2; @include box-shadow( none ); }
+	&.danger { @include buttonize( lighten($error2, 20%), $error2 ); color: $dark2; text-shadow: 0px 1px lighten($error2, 20%);
+		&:active { @include buttonize( $error2, lighten($error2, 20%) ); text-shadow: 0px 1px lighten($error2, 15%); @include box-shadow( none ); }
+	}
+}
+
+div.alert_message {
+	@include border-radius(4px); color: $white; padding: 7px 12px; margin-bottom: $baseline; @include box-shadow;
+	&.success { @include buttonize( lighten( $success2, 15% ), $success2); text-shadow: 0px -1px darken( $success2, 15% ); }
+	&.notice { @include buttonize( lighten( $notice2, 15% ), $notice2); color: $dark2; text-shadow: 0px 1px $notice1; }
+	&.error { @include buttonize( lighten( $error2, 15% ), $error2); text-shadow: 0px -1px darken( $error2, 15% ); }
+	a.close { @include font( 18px, $sans, 700, 13.5px ); float: right; text-decoration: none; opacity: 0.2; color: $black; text-shadow: 0px 1px $white;
+		&:hover { opacity: 0.4; }
+	}
+}
+
+// MODALS
+div.modal_bg { display: none; position: fixed; background: #000; opacity: 0.8; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; }
+div.modal { display: none; top: 40px; left: 50%; margin-left: -359px; width: 700px; background: $dark2; position: absolute; z-index: 1001; padding: $baseline; }
+div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; }
+
+// TIPSY
+.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
+	.tipsy-inner { background-color: $black; color: $white; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; @include border-radius(4px); }
+	.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
+	/* Rules to colour arrows */
+	.tipsy-arrow-n { border-bottom-color: #000; }
+	.tipsy-arrow-s { border-top-color: #000; }
+	.tipsy-arrow-e { border-left-color: #000; }
+	.tipsy-arrow-w { border-right-color: #000; }
+	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
+	.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
+	.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;	 border-left-color: transparent; border-right-color: transparent;}
+	.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;	border-left-color: transparent; border-right-color: transparent; }
+	.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;	 border-left-color: transparent; border-right-color: transparent; }
+	.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
+	.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
+	.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
+
+// POPOVERS
+.popover { display: none; }