/* bolt.classes.css

   Defines base classes and common extended classes, mostly for layout. */


/* .wrap */

.wrap {
	display: block;

	/* Set as position parent. */
	position: relative;

	/* Wraps automatically centre themselves. */
	margin-left: auto;
	margin-right: auto;
}

.wrap > img,
.wrap > svg,
.wrap > video,
.wrap > canvas,
.wrap > object,
.wrap > embed,
.wrap > iframe {
	/* Don't allow media to break out of container bounds. */
	max-width: 100%;
}

.slides_wrap {
	overflow: hidden;
}


/* .block */

.block {
	display: block;

	/* Set as position parent */
	position: relative;

	/* Set them up to play nice as inline-blocks. */
	vertical-align: top;
	overflow: visible;

	/* Negate possible spacing when .block is used on
	   something typographic. A <p>, for example. */
	margin: 0;
	padding: 0;
}

.block > img,
.block > svg,
.block > video,
.block > canvas,
.block > object,
.block > embed,
.block > iframe {
	/* Don't allow media to break out of container bounds. */
	max-width: 100%;
}

.toggle-block {
	max-height: 0;
	opacity: 0.5;
	overflow: hidden;
	visibility: hidden;
	transition:
		max-height 400ms cubic-bezier(0, 0.5, 0.33, 1),
		padding-top 400ms cubic-bezier(0.8, 0, 0.8, 0),
		padding-bottom 400ms cubic-bezier(0.48, 0.85, 0.8, 1),
		margin-bottom 400ms cubic-bezier(0, 0.5, 0.33, 1),
		opacity 400ms linear,
		border-color 400ms linear,
		background-color 200ms linear,
		visibility 400ms linear;
}

.toggle-block:not(.active) {
	padding-top: 0;
	padding-bottom: 0;
}

.toggle-block.active {
	max-height: 100rem;
	opacity: 1;
	visibility: visible;
	transition:
		max-height 400ms cubic-bezier(0.4, 0, 1, 0.32),
		padding-top 400ms cubic-bezier(0.2, 1, 0.2, 1),
		padding-bottom 400ms cubic-bezier(0.6, 0.9, 0.7, 1),
		margin-bottom 400ms cubic-bezier(0.4, 0, 1, 0.32),
		opacity 400ms linear,
		border-color 400ms linear,
		background-color 200ms linear,
		visibility 400ms linear;
}


/* .flex */

.flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.x-flex { flex-direction: row; }
.y-flex { flex-direction: column; }


/* .box */

.box {
	position: relative;
}

.\30 -box {
	flex-grow: 0;
	flex-shrink: 0;
}

.\31 -box {
	flex-grow: 1;
	flex-shrink: 1;
}


/* .layer */

.layer {
	/* Permit possible scrollbars. */
	overflow: auto;
	
	/* Make layer occupy the whole of the area in its position parent. */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	/* Height and width override the top, right, bottom, left declaration.
	   To use height and width we must change the box model to make sure
	   padding and border do not make the layer bigger than its container.
	   The technique above does not work for iframes and can break as soon
	   as height or width are declared, but the technique below will not
	   work in IE7, where the box model can't be changed. */
	width: 100%;
	height: 100%;
	
	/* Make the corners of layers the same as their parents', allowing you
	   to use layers as screens over specific elements. */
	-webkit-border-radius: inherit;
	   -moz-border-radius: inherit;
	        border-radius: inherit;
}

.screen_layer {
	background-color: rgba(0,0,0,0.6);
}

.pushscroll_layer {
	/* A technique for hiding scrollbars by nesting two layers, and pushing
	   the scrollbars on the inner .scroll_layer outside the hidden boundary
	   of the outer .pushscroll_layer. */
	   
	/* These values, representing the thickness of a scrollbar, should be
	   overriden by feature testing with some js */
	padding-right: 16px;
	padding-bottom: 16px;
	
	overflow: hidden;
	width: 100%;
	height: 100%;
	
	/* Make sure we're using the right box model for this technique */
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
	        box-sizing: content-box;
}

.dialog-layer {
	position: fixed;
	background-image: none;
	background-color: rgba(31, 32, 33, 0.746094);
	z-index: 4;
}

.middle,
.dialog-layer {
	/* Center inline-block contents horizontally */
	text-align: center;
}

.middle::before,
.dialog-layer::before {
	/* Center inline-block contents vertically. Note that to
	   keep .dialog centered horizontally there should be no
	   space in front of the .dialog box. */
	display: inline-block;
	content: '';
	height: 100%;
	width: 0;
	vertical-align: middle;
}

.middle > *,
.dialog-layer > * {
	text-align: left;
}


/* .dialog */

.middle > *,
.dialog {
	/* Use inline-block to make dialog collapse
	   to the width of its contents. */
	display: inline-block;
	
	/* Center the dialog vertically, working in tandem
	   with the :before rule of .dialog-layer. */
	vertical-align: middle;
}

.dialog {
	/* Act as position parent */
	position: relative;

	padding: 0.8333em;
	margin: 0;
	max-width: 72%;

	/* But let's make sure it doesn't touch the top or
	   bottom. */
	margin-top: 2.5em;
	margin-bottom: 2.5em;

	background-color: white;

	-webkit-border-radius: 0.3333em;
	   -moz-border-radius: 0.3333em;
	        border-radius: 0.3333em;

	-webkit-box-shadow: 0 2px 24px rgba(0,0,0,0.6);
	   -moz-box-shadow: 0 2px 24px rgba(0,0,0,0.6);
	        box-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.dialog > img,
.dialog > svg,
.dialog > video,
.dialog > canvas,
.dialog > object,
.dialog > embed,
.dialog > iframe {
	/* Don't allow media to break out of container bounds. */
	max-width: 100%;
}

.dialog > img,
.dialog > svg,
.dialog > video,
.dialog > canvas {
	/* Allow images to rescale freely. */
	height: auto;
}

.dialog > .close_button,
.dialog > .close-thumb {
	position: absolute;
	top: -16px;
	top: -1rem;
	right: -16px;
	right: -1rem;
	
	-webkit-box-shadow: 0 0 24px rgba(0,0,0,0.6);
	   -moz-box-shadow: 0 0 24px rgba(0,0,0,0.6);
	        box-shadow: 0 0 24px rgba(0,0,0,0.6);
}



/* .index
   
   To be applied to <ul>, <ol> and <dl> elements, when you want them to
   be displayed in a non-default style. Defines styles for lists of
   inline-blocks like buttons, thumbs or toolbars, as well as lists
   with dividers. */

.index {
	/* Remove default styling from list items. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.index > li {
	/* Specifically remove default margin and padding from
	   list items in case some typography rules have added
	   these back in after the reset. */
	margin: 0;
	padding: 0;
	
	/* Make index items act as position parents. */
	position: relative;

	/* Prepare for inline-block layout. */
	vertical-align: top;
	overflow: visible;
}

.index > li:first-child {
	margin-top: 0;
}

.index > li > .index-button {
	display: block;
	width: auto;
}

.dot-index {
	text-align: center;
}

.dot-index > li > .thumb {
	display: block;
}

.dot-index > li + li {
	margin-left: 0.75rem;
}

@media print {
	.dot-index {
		display: none;
	}
}

.crumbs_index,
.crumbs_index > li {
	white-space: nowrap;
}

.crumbs_index > li + li {
	padding-left: 1.5em;
}

.crumbs_index > li + li::before {
	content: "▶";
	font-size: 0.75em;
	display: inline-block;
	display: inline !IE7;
	vertical-align: baseline;
	width: 2em;
	text-align: center;
	margin-left: -2em;
	margin-right: 0;
}

.crumbs_index > li > .button {
	width: 100%;
}

.crumbs_index > li > .button,
.buttons_index > li > .button,
.thumbs_index > li > .thumb {
	/* Handle lists that contain just a single type of item. If 
	   buttons or thumbs are aligned to the baseline, there will be
	   a gap below them. */
	vertical-align: middle;
}

.action-index {
	/* Send action buttons over to the right */
	text-align: right;
}


/* .index classes with horizontal layout.
		
	 Simulate a bunch of blocks pushed against each other horizontally
	 by using inline-block layout to create a horizontal effect. Because
	 they're in the flow, children must have no space between them in
	 the html.
*/

.inline-index,
.tab-index,
.dot-index,
.crumbs_index,
.action-index {
	/* To form grids with a horizontal index, line-height
	   needs to be smaller than the items in the index. */
	line-height: 0;
}

.inline-index > li,
.dot-index > li,
.crumbs_index > li,
.action-index > li {
	display: inline-block;
	vertical-align: top;
}

.tab-index > li {
	display: inline-block;
	vertical-align: bottom;
}

.inline-index > li:first-child,
.tab-index > li:first-child,
.dot-index > li:first-child,
.crumbs_index > li:first-child,
.action-index > li:first-child {
	margin-left: 0;
}

.tab-index > li > .button {
	display: block;
}

.inline-index > dt,
.inline-index > dd {
	margin: 0;
}
.inline-index > dt,
.inline-index > dd {
	width: 160px;
	line-height: 1.6em;
}
.inline-index > dt {
	vertical-align: text-bottom;
}
.inline-index > dd {
	vertical-align: text-top;
	/* reset the margin that usually indents a dd */
	margin-left: 0;
	/* Move it down by one line-height */
	margin-top: 1.6667em;
	/* Move it left with a negative margin accounting for size, padding and margin of dt */
	margin-left: -166px;
	/* Space at the bottom for when the items wrap */
	margin-bottom: 1.6667em;
}


/* .card */

.card {
	display: block;
	min-height: 84px;
	
	padding-top: 10px; 
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 84px;
	
	/* Act as position parent */
	position: relative;
	
	/* A card is meant to have drag data attached. */
	-webkit-user-drag: element;
}

a.card:hover {
	text-decoration: none;
}

.card > .thumb {
	/* Cards have thumbs. Put them on the left by default. */
	position: absolute;
	top: 0;
	left: 0;
}

.card a,
.card img {
	-webkit-user-drag: none;
}


/* .thumb */

.thumb {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;

	/* Nullify padding that may have been put there by other
	   styling, say for example by <button class="thumb"> */
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;

	/* Hide overflowing text. This technique is better
	   than using -ve text-indent because IE7 moves
	   the background image with the text-indent. */
	padding-top: 4rem;
	height: 0;
	width: 4rem;

	/* Keep top of text safely away from the bottom of
	   the thumb. */
	line-height: 2;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;

	/* background-position is set for the case where an image is used as the 
	   the background. 50% to keep it centred, and 40% because faces are often
	   centred in the upper portion of the image. */
	background-position: 50% 40%;
	background-repeat: no-repeat;
	background-color: transparent;
	border-width: 0;

	text-decoration: none;
	color: inherit;
}

@media print {
	.thumb {
		/* Encourage webkit to print background image. */
		-webkit-print-color-adjust: exact;
	}
}

.thumb-2x3     { display: block; width: auto; padding-top: 150%; }
.thumb-3x4     { display: block; width: auto; padding-top: 133.3333%; }
.thumb-1x1     { display: block; width: auto; padding-top: 100%; }
.thumb-4x3     { display: block; width: auto; padding-top: 75%; }
.thumb-3x2     { display: block; width: auto; padding-top: 66.6667%; }
.thumb-16x9    { display: block; width: auto; padding-top: 56.25%; }


.text-thumb {
	/* Make the text show below the thumb. Text appears
		 outside of the box - ie, it overflows - so that
		 we dont see any more of the image than necessary. */
	overflow: visible;
	white-space: nowrap;
	text-align: center;
	margin-bottom: 1em;
	line-height: 2.3333em;
	
	font-size: 0.9167em;
	font-weight: bold;
	color: rgb(100,100,100);
}

.browser-thumb {
	width: 64px;
	padding-top: 64px;
	height: 2em;
	line-height: 2em;
	font-size: 0.8333em;
	overflow: visible;
	text-align: center;
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: auto;
	white-space: nowrap;
	
	background-image: url('../images/thumbs/browser_logos.png');
	-moz-background-size: 342px 64px;
	     background-size: 342px 64px;
}

.chrome-browser-thumb  { background-position: -5px 0; }
.firefox-browser-thumb { background-position: -75px 0; }
.opera-browser-thumb   { background-position: -140px 0; }
.safari-browser-thumb  { background-position: -205px 0; }
.ie-browser-thumb      { background-position: -272px 0; }

.fb_thumb,
.tw_thumb,
.yt_thumb {
	padding-top: 20px;
	width: 20px;
	overflow: hidden;
	background-image: url('../images/thumbs/logos_social.png');
}

.fb_thumb { background-position: 0 0; }
.tw_thumb { background-position: -25px 0; }
.yt_thumb { background-position: -49px 0; }

.dot-thumb {
	padding-top: 0.9375rem;
	width: 0.9375rem;
	border-radius: 0.5rem;
	background-color: white;
	background-image: none;
	opacity: 0.6667;
}

.dot-thumb.on {
	background-color: white;
}

.dot-thumb.on,
.dot-thumb:hover,
.dot-thumb:focus {
	opacity: 1;
}


/* .button */

button {
	/* buttons have standard padding that needs to be avoided. */
	padding-top: 0;
	padding-bottom: 0;
	/* And they don't automatically inherit font styles. */
	font-size: inherit;
	font-family: inherit;

	-webkit-hyphens: none;
	   -moz-hyphens: none;
	    -ms-hyphens: none;
	        hyphens: none;
}

.button:hover,
.button:focus {
	/* If button is link, it may have hover styles. */
	text-decoration: none;
}

button,
.button {
	display: inline-block;
	position: relative;
	
	cursor: pointer;
	
	width: auto;
	height: auto;
	/* button elements ignore line-height, centering text automaticaly. */
	line-height: 2em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	vertical-align: baseline;
	
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	text-decoration: none;
	
	background-repeat: no-repeat;
	border-width: 0;

	-webkit-background-clip: padding-box;
	   -moz-background-clip: padding-box;
	    -ms-background-clip: padding-box;
	     -o-background-clip: padding-box;
	        background-clip: padding-box;

	-webkit-background-origin: padding-box;
	   -moz-background-origin: padding;
	   -moz-background-origin: padding-box;
	    -ms-background-origin: padding-box;
	     -o-background-origin: padding-box;
	        background-origin: padding-box;
}

button:hover,
.button:hover {
	color: rgb(63,63,63);
}

button.loading,
.button.loading {
	opacity: 0.4;
}

.button > input[type="radio"],
.button > input[type="checkbox"] {
	display: inline;
	height: auto;
	vertical-align: baseline;
	margin-right: 0.5em;
	/* Stop radio's left edges getting cut off inside buttons. */
	margin-left: 1px;
}

.radio_button,
.checkbox_button {
	/* Overflow will hide the browser generated error messages. No no no. */
	overflow: visible;
}

/* Select boxes and file inputs wrapped in buttons for
   restyling, like this:

   <label class="button" for="select">
     <span class="value">Price range</span>
     <select id="select">
       <option value="0">...</option>
     </select>
   </label>
   
   When JavaScript is not enabled, we don't want to hide
   the select, as that would remove the ability to see
   the current value. */

.thumb > select,
.button > select,
.button > input[type="file"],
.button > input[type="submit"] {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}

.js .thumb > select,
.js .button > select,
.js .button > input[type="file"],
.js .button > input[type="submit"] {
	-webkit-appearance: none;
	opacity: 0;
}

.tab-button {
	padding-left: 0.8333em;
	padding-right: 0.8333em;
	
	/* Remove default border and shadow */
	
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
	
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
}

.tab-button {
	/* Set up z-index to interact with tabs below the tab-buttons.
	   Tab buttons in the off state go under active tabs. */
	z-index: 1;
}

.tab-button.on,
.tab-button:active {
	/* Tab buttons in the on state appear over active tabs, and
	   they should display all their text. */
	z-index: 3;
	overflow: visible;
}

.toggle-button {
	display: block;
	text-align: left;
	padding-left: 0;
}

.toggle-button::after {
	content: '▶';
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0.8125em;
	line-height: inherit;
	padding-top: inherit;
	padding-bottom: inherit;
	transition: transform 320ms ease-out;
}

.toggle-button.on::after {
	transform: rotate(90deg);
	transition-timing-function: ease-in;
	transition-duration: 80ms;
}

/* .tab, .slide */

.tab,
.slide {
	display: inline-block;
	position: relative;
	width: 100%;
	/* Give tabs and slides the same origin despite being inline-blocks. */
	margin-right: -100%;
}

.tab {
	vertical-align: top;
}

.slide {
	vertical-align: middle;
}


/* .popdown, .dropdown */

.popdown,
.dropdown {
	display: block;
	/* Hiding overflow causes problems in IE7 when the dropdown's container
	   is narrower than the dropdown's content. I'm not sure we have any real
	   reason to hide it. Probably if you're animating height to reveal you
	   want this. */
	/*overflow: hidden;*/
	position: absolute;
	/* They should appear over the top of following content. */
	z-index: 3;
}


/* Transitions */

.js .tip,
.js .bubble,
.js .tab,
.js .slide,
.js .layer,
.js .popdown,
.js .dropdown {
	/* A nice bit of hardware acceleration should help the transitions run
	   smoothly. */
	-webkit-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}

.js .tab,
.js .dialog-layer,
.js .loading_layer {
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	
	-webkit-transition-property: opacity, visibility;
	        transition-property: opacity, visibility;
	-webkit-transition-duration: 120ms;
	        transition-duration: 120ms;
	-webkit-transition-timing-function: ease-in;
	        transition-timing-function: ease-in;
}

.js .tab.active,
.js .dialog-layer.active,
.js .loading .loading_layer {
	visibility: visible;
	opacity: 1;
	z-index: 2;
	
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
}

.js .slide {
	/* By default all slides are positioned off to the left. */ 
	left: -100%;
	
	/* Slides have no height by default to stop them influencing
	   scrollbars when they are not active. */
	height: 0;
	overflow: hidden;
	z-index: 1;

	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	     -moz-user-select: none;
	      -ms-user-select: none;
	          user-select: none;
	
	-webkit-transition-property: left, height;
	        transition-property: left, height;
	-webkit-transition-duration: 333ms;
	        transition-duration: 333ms;
	-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.7, 1);
	        transition-timing-function: cubic-bezier(0.1, 0.7, 0.7, 1);
}

.js .slide.active {
	/* The .active slide is positioned in the centre. */
	left: 0;
	height: auto;
	overflow: visible;
	z-index: 2;
}

.js .slide.active ~ .slide {
	/* All slides after the .active slide are positioned off to
	   the right. */
	left: 100%;
}

.js .slide.active ~ .slide.active {
	/* Except, of course, any that are still active. */
	left: 0;
}

.js .stacked_slide {
	left: 0;
}

@media print {
	.js .slide {
		position: static;
		left: 0;
		width: 34%;
		height: auto;
		margin-right: 3%;
	}

	.js .slide:nth-child(3n) {
		margin-right: 0;
	}
}

/* Transitions - .popdown, .dropdown, .tip */

.js .tip,
.js .bubble,
.js .popdown,
.js .dropdown {
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition-property: opacity, visibility, transform;
	        transition-property: opacity, visibility, transform;
}

.js .popdown,
.js .dropdown {
	top: 2em;

	-webkit-transition-duration: 180ms;
	        transition-duration: 180ms;

	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
}

.js .tip.active,
.js .bubble.active,
.js .popdown.active,
.js .dropdown.active {
	opacity: 1;
	visibility: visible;
}

.js .popdown.active,
.js .dropdown.active {
	-webkit-transform: translate3d(0, 0.3333rem, 0);
	    -ms-transform:   translate(0, 0.3333rem, 0);
	        transform: translate3d(0, 0.3333rem, 0);

	-webkit-transition-duration: 60ms;
	        transition-duration: 60ms;

	-webkit-transition-timing-function: ease-in;
	        transition-timing-function: ease-in;
}

.tip,
.bubble {
	top: 0;
	left: 0;
	/* We want the tip to expand up to 320px, but it won't
	   do that where it's container is smaller than
	   left + 320, so give it a negative right. */
	right: -20rem;
	font-size: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	max-width: 20em;
	border-radius: 0.25rem;
	border: 0.125rem solid #cadce3;
	background-color: #dbe9ee;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.js .tip,
.js .bubble {
	position: absolute;
	z-index: 4;

	-webkit-transition-duration: 120ms;
	        transition-duration: 120ms;
	-webkit-transition-timing-function: ease-in;
	        transition-timing-function: ease-in;
}

.js .tip.active {
	/* No delay for bubble. */
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 540ms;
	        transition-delay: 540ms;
}

.js .top-tip,
.js .top-bubble {
	-webkit-transform: translate3d(-50%, calc(-100% - 1.5rem), 0);
	    -ms-transform:   translate(-50%, calc(-100% - 1.5rem));
	        transform: translate3d(-50%, calc(-100% - 1.5rem), 0);
}

.js .top-tip.active,
.js .top-bubble.active {
	-webkit-transform: translate3d(-50%, calc(-100% - 1.75rem), 0);
	    -ms-transform:   translate(-50%, calc(-100% - 1.75rem));
	        transform: translate3d(-50%, calc(-100% - 1.75rem), 0);
}

.js .left-top-tip,
.js .left-top-bubble {
	-webkit-transform: translate3d(-16.6667%, calc(-100% - 1.5rem), 0);
	    -ms-transform:   translate(-16.6667%, calc(-100% - 1.5rem));
	        transform: translate3d(-16.6667%, calc(-100% - 1.5rem), 0);
}

.js .left-top-tip.active,
.js .left-top-bubble.active {
	-webkit-transform: translate3d(-16.6667%, calc(-100% - 1.75rem), 0);
	    -ms-transform:   translate(-16.6667%, calc(-100% - 1.75rem));
	        transform: translate3d(-16.6667%, calc(-100% - 1.75rem), 0);
}

.js .right-top-tip,
.js .right-top-bubble {
	-webkit-transform: translate3d(-83.3333%, calc(-100% - 1.5rem), 0);
	    -ms-transform:   translate(-83.3333%, calc(-100% - 1.5rem));
	        transform: translate3d(-83.3333%, calc(-100% - 1.5rem), 0);
}

.js .right-top-tip.active,
.js .right-top-bubble.active {
	-webkit-transform: translate3d(-83.3333%, calc(-100% - 1.75rem), 0);
	    -ms-transform:   translate(-83.3333%, calc(-100% - 1.75rem));
	        transform: translate3d(-83.3333%, calc(-100% - 1.75rem), 0);
}

.js .bottom-tip,
.js .bottom-bubble {
	-webkit-transform: translate3d(-50%, 1.5rem, 0);
	    -ms-transform:   translate(-50%, 1.5rem);
	        transform: translate3d(-50%, 1.5rem, 0);
}

.js .bottom-tip.active,
.js .bottom-bubble.active {
	-webkit-transform: translate3d(-50%, 1.75rem, 0);
	    -ms-transform:   translate(-50%, 1.75rem);
	        transform: translate3d(-50%, 1.75rem, 0);
}

.js .right-bottom-tip,
.js .right-bottom-bubble {
	-webkit-transform: translate3d(-83.3333%, 1.5rem, 0);
	    -ms-transform:   translate(-83.3333%, 1.5rem);
	        transform: translate3d(-83.3333%, 1.5rem, 0);
}

.js .right-bottom-tip.active,
.js .right-bottom-bubble.active {
	-webkit-transform: translate3d(-83.3333%, 1.75rem, 0);
	    -ms-transform:   translate(-83.3333%, 1.75rem);
	        transform: translate3d(-83.3333%, 1.75rem, 0);
}

.js .left-bottom-tip,
.js .left-bottom-bubble {
	-webkit-transform: translate3d(-16.6667%, 1.5rem, 0);
	    -ms-transform:   translate(-16.6667%, 1.5rem);
	        transform: translate3d(-16.6667%, 1.5rem, 0);
}

.js .left-bottom-tip.active,
.js .left-bottom-bubble.active {
	-webkit-transform: translate3d(-16.6667%, 1.75rem, 0);
	    -ms-transform:   translate(-16.6667%, 1.75rem);
	        transform: translate3d(-16.6667%, 1.75rem, 0);
}

.js .left-tip,
.js .left-bubble {
	-webkit-transform: translate3d(-100%, -50%, 0);
	    -ms-transform:   translate(-100%, -50%);
	        transform: translate3d(-100%, -50%, 0);
}

.js .left-tip.active,
.js .left-bubble.active {
	-webkit-transform: translate3d(calc(-100% - 0.25rem), -50%, 0);
	    -ms-transform:   translate(calc(-100% - 0.25rem), -50%);
	        transform: translate3d(calc(-100% - 0.25rem), -50%, 0);
}

.js .right-tip,
.js .right-bubble {
	/* Make room for the .bubble::after point. */
	-webkit-transform: translate3d(0.9375rem, -50%, 0);
	    -ms-transform:   translate(0.9375rem, -50%);
	        transform: translate3d(0.9375rem, -50%, 0);
}

.js .right-tip.active,
.js .right-bubble.active {
	-webkit-transform: translate3d(1.25rem, -50%, 0);
	    -ms-transform:   translate(1.25rem, -50%);
	        transform: translate3d(1.25rem, -50%, 0);
}


.tip::after,
.bubble::after {
	display: block;
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	transform: rotate(45deg);
	background-color: inherit;
	border-color: inherit;
	border-width: inherit;
	border-style: inherit;
	-webkit-transition: left 120ms ease-out;
	        transition: left 120ms ease-out;
}

.top-tip::after,
.bottom-tip::after,
.left-tip::after,
.right-tip::after,
.top-bubble::after,
.bottom-bubble::after,
.left-bubble::after,
.right-bubble::after {
	content: ' ';
}

.top-tip::after,
.bottom-tip::after,
.top-bubble::after,
.bottom-bubble::after {
	left: 50%;
	right: auto;
	margin-left: -0.625rem;
}

.left-tip::after,
.right-tip::after,
.left-bubble::after,
.right-bubble::after {
	top: 50%;
	bottom: auto;
	margin-top: -0.625rem;
}

.top-tip::after,
.top-bubble::after {
	bottom: -0.6875rem;
	border-top-width: 0;
	border-left-width: 0;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
}

.bottom-tip::after,
.bottom-bubble::after {
	top: -0.6875rem;
	border-bottom-width: 0;
	border-right-width: 0;
}

.left-tip::after,
.left-bubble::after {
	right: -0.6875rem;
	border-bottom: 0;
	border-left: 0;
	box-shadow: 3px 0px 4px -2px rgba(0,0,0,0.3);
}

.right-tip::after,
.right-bubble::after {
	left: -0.6875rem;
	border-right: 0;
	border-top: 0;
	box-shadow: 0px 3px 4px -2px rgba(0,0,0,0.3);
}

.right-top-tip::after,
.right-bottom-tip::after,
.right-top-bubble::after,
.right-bottom-bubble::after {
	left: 83.3333%;
}

.left-top-tip::after,
.left-bottom-tip::after,
.left-top-bubble::after,
.left-bottom-bubble::after {
	left: 16.6667%;
}

.tip-block,
.js .tip-block {
	visibility: visible;
	opacity: 1;
	position: relative;
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	max-width: none;
}

@media all and (max-width: 30em) {
	.js body > .tip {
		/* Override offset given to it by JS when the
		   screen is too small. */
		left: 4% !important;
		margin-left: 0 !important;
		width: 92% !important;
		max-width: 92% !important;
	}
}

/* Transitions - cancel transitions. */

.notransition,
.notransition .slide,
.notransition .tab,
.notransition .popdown,
.notransition .dropdown,
.notransition .layer,
.notransition .tip {
	-webkit-transition: none !important;
	   -moz-transition: none !important;
	     -o-transition: all 0 linear 0 !important;
	        transition: none !important;
}


/* Utilities */

.hidden {
	display: none !important;
}

.masked {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.js .disabled {
	opacity: 0.4;
}

.js .loading::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -1.25rem;
	margin-top: -1.25rem;
	height: 1.875rem;
	width: 1.875rem;
	opacity: 1;

	-webkit-animation: rotation 1000ms infinite linear;
	        animation: rotation 1000ms infinite linear;

	border:     0.3125rem solid rgba(63, 63, 63, 0.15);
	border-top: 0.3125rem solid rgba(63, 63, 63, 1);
	border-radius: 100%;
	z-index: 100;
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

.clear::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.tl, .tr, .bl, .br { position: absolute; }
.tl, .tr { top: 0; }
.bl, .br { bottom: 0; }
.tl, .bl { left: 0; }
.tr, .br { right: 0; }

.left { float: left; }
.right { float: right; }

.align-top      { vertical-align: top !important; }
.align-middle   { vertical-align: middle !important; }
.align-bottom   { vertical-align: bottom !important; }
.align-baseline { vertical-align: baseline !important; }

.text-left      { text-align: left; }
.text-justify   { text-align: justify; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

.scroll {
	overflow: auto;
	/* Enable momentum scrolling. Unfortunately this is buggy. It doesn't
	   update the custom scrollbar during the momentum ease-out. Also, some
	   children get rendered improperly.
	   
	   Actually, it seems to have improved in iOS 6. */
	-webkit-overflow-scrolling: touch;
}

.scroll > * {
	/* Fixes iOS child rendering scrolling bug. Maybe.
	   http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error */
	-webkit-transform: translateZ(0px);
}

.scroll::-webkit-scrollbar {
	/* Force scrollbars to display in mobile WebKit devices. For a demo
	   of scrollbar configurations:
	   http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html
	*/
	width: 9px;
	height: 9px;
	background-color: transparent;
	-webkit-border-radius: 12px;
	        border-radius: 12px;
}

.hidden-scroll::-webkit-scrollbar {
	display: none;
}

.scroll::-webkit-scrollbar-thumb:vertical,
.scroll::-webkit-scrollbar-thumb:horizontal {
	/* Approximate the style of the iPad's default scrollbars. (Can
	   probably do better, but this is quick). */
	background-color: #888888;
	border: 2px solid white;
	
	-webkit-border-radius: 12px;
	        border-radius: 12px;
}

.scroll::-webkit-scrollbar-thumb:vertical {
	min-height: 20px;
}

.scroll::-webkit-scrollbar-thumb:horizontal {
	min-width: 20px;
}

.scroll::-webkit-scrollbar-track-piece:disabled,
.scroll::-webkit-scrollbar-button:disabled {
	display: none !important;
}

.x-scroll { overflow-y: hidden; }
.y-scroll { overflow-x: hidden; }
.no-scroll { overflow: hidden; }


/* table */

/* Orientate a table vertically, so that the <tr>s appear as columns, and
   <td>s appear on new rows. Use with caution. */

.v_table thead,
.v_table tbody,
.v_table tr {
	display: inline-block;
	display: inline !IE7;
}

.v_table {
	width: auto;
}

.v_table td {
	display: block;
}

/* Stripes tables and indexes. */

.striped_index > li:nth-child(even),
.striped_table > tbody > tr:nth-child(odd) > td,
.striped_table > tbody > tr:nth-child(odd) > th {
	background-color: rgba(15,15,15,0.08);
}

.striped_index > li,
.striped_table > thead > tr > td,
.striped_table > thead > tr > th,
.striped_table > tbody > tr > td,
.striped_table > tbody > tr > th {
	background-color: rgba(240,240,240,0.1);
}

.striped_table > tbody > tr:hover > td,
.striped_table > tbody > tr:hover > th {
	background-color: rgba(15,15,15,0.15);
}


/* hcard microformat (for reference)
	 http://microformats.org/wiki/hcard
*/

/*.vcard
	
	/* name - use .url for anything that is a link to this person's	 */
/*	.fn.n
/*		.nickname
/*		.given-name
/*		.additional-name
/*		.family-name
	
	/* name organisation - if the hcard is for an organisation .fn should also be set */
/*	.org
/*		.organization-name
/*		.organization-unit
	
	/* email (usually a link) */
/*	.email
/*		.type /* home, office, work, blah, blah */
	
/*	.photo
	
	/* address */
/*	.adr
/*		.street-address
/*		.locality
/*		.region
/*		.postal-code
/*		.country-name
	
/*	.tel
/*		.type /* home, work, etc. */

	/* use url for display of addresses of resources about this person - including instant messenger */
/*	.url */