/*
Modifiers.

Styleguide: 5
*/

/*
.active

Modify a two-state component to represent active state.

Styleguide: 5.active
*/

.active {}

/*
.on

Modify a link or button that references a two-state component to represent
active state.

Styleguide: 5.on
*/

.on {}

/*
.hidden

Hide element.

Styleguide: 5.hidden
*/

.hidden {
	display: none !important;
}

/*
.active-hidden

Hide an element when its parent has class <code>active</code>.

Styleguide: 5.active-hidden
*/

.active-hidden.active,
.active > .active-hidden {
	display: none !important;
}

/*
.active-shown

Show an element when its parent has class <code>active</code>.

Styleguide: 5.active-shown
*/

:not(.active) > .active-shown:not(.active) {
	display: none !important;
}


/*
.on-hidden

Hide an element when its parent has class <code>on</code>.

Styleguide: 5.on-hidden
*/

.on-hidden.on,
.on > .on-hidden {
	display: none !important;
}

/*
.on-shown

Show an element when its parent has class <code>on</code>.

Styleguide: 5.on-shown
*/

:not(.on) > .on-shown:not(.on) {
	display: none !important;
}

/*
.requested-hidden

Hide an element when its parent has class <code>requested</code>.

Styleguide: 5.requested-hidden
*/

.requested-hidden.requested,
.requested > .requested-hidden {
	display: none !important;
}

/*
.requested-shown

Show an element when its parent has class <code>requested</code>.

Styleguide: 5.requested-shown
*/

:not(.requested) > .requested-shown:not(.requested) {
	display: none !important;
}

/*
.fullscreen-hidden

Hide an element when in fullscreen mode.

Styleguide: 5.fullscreen-hidden
*/

.fullscreen-hidden:-webkit-full-screen,
:-webkit-full-screen .fullscreen-hidden {
	display: none !important;
}

.fullscreen-hidden:-moz-full-screen,
:-moz-full-screen .fullscreen-hidden {
	display: none !important;
}

.fullscreen-hidden:-ms-fullscreen,
:-ms-fullscreen .fullscreen-hidden {
	display: none !important;
}

.fullscreen-hidden:fullscreen,
:fullscreen .fullscreen-hidden {
	display: none !important;
}

/*
.fullscreen-shown

Styleguide: 5.fullscreen-shown
*/

:not(:-webkit-full-screen) > .fullscreen-shown:not(:-webkit-full-screen) {
	display: none !important;
}

:not(:-moz-full-screen) > .fullscreen-shown:not(:-moz-full-screen) {
	display: none !important;
}

:not(:-ms-fullscreen) > .fullscreen-shown:not(:-ms-fullscreen) {
	display: none !important;
}

:not(:fullscreen) > .fullscreen-shown:not(:fullscreen) {
	display: none !important;
}

/*
.masked

Styleguide: 5.masked
*/

.masked {
	display: inline-block !important;
	position: absolute !important;
	opacity: 0 !important;

	/* Width and height 0 cause browser validation bubbles to dissappear. */
	width: 1px !important;
	height: 1px !important;

	/* Position it so that the validation message appears in the correct place */
	margin-top: 2.5rem !important;
	margin-left: 0.75rem !important;
}

/*
.disabled

Styleguide: 5.disabled
*/

.disabled,
:disabled {
	opacity: 0.4;
}

/*
.requested

Add <code>::after</code> content representing a loading animation.

Markup: <div class="requested" style="height: 7.5rem;">

Styleguide: 5.requested
*/

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

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

.js .requested::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -0.9375rem;
	margin-top: -0.9375rem;
	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;
}

/*
.no-transition

Cancel transitions on an element and all descendents.

Styleguide: 5.no-transition
*/

.no-transition,
.no-transition * {
	-webkit-transition: none !important;
	   -moz-transition: none !important;
	     -o-transition: all 0 linear 0 !important;
	        transition: none !important;
}

/*
.clear

The clearfix hack.

Styleguide: 5.float-clear
*/

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


/*
.fixed

Styleguide: 5.fixed
*/

.fixed {
	position: fixed !important;
}


/*
.sticky

Styleguide: 5.sticky
*/

.sticky {
	position: sticky !important;
	top: 0;
}


/*
.left

Styleguide: 5.float-left
*/

.left { float: left; clear: left; }

/*
.right

Styleguide: 5.float-right
*/

.right { float: right; clear: right; }

/*
.top-align

Styleguide: 5.align-1
*/

.top-align      { vertical-align: top !important; }

/*
.bottom-align

Styleguide: 5.align-2
*/

.bottom-align   { vertical-align: bottom !important; }

/*
.middle-align

Styleguide: 5.align-3
*/

.middle-align   { vertical-align: middle !important; }

/*
.baseline-align

Styleguide: 5.align-4
*/

.baseline-align { vertical-align: baseline !important; }

/*
.left-align

Styleguide: 5.align-5
*/

.left-align     { text-align: left !important; }

/*
.right-align

Styleguide: 5.align-6
*/

.right-align    { text-align: right !important; }

/*
.center-align

Styleguide: 5.align-7
*/

.center-align   { text-align: center !important; }

/*
.justify-align

Styleguide: 5.align-8
*/

.justify-align  { text-align: justify !important; }


/*
.scroll

Set <code>overflow: auto;</code> and force display of scrollbars when
scrollable.

Markup: <pre class="scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

Styleguide: 5.scroll
*/

.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.
	   Update: 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;
}

.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;
}

/*
.hidden-scroll

Attempts to hide scrollbars where possible (Chrome, Safari, Opera).

Markup: <pre class="hidden-scroll scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

Styleguide: 5.scroll-1
*/

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

/*
.x-scroll

Hides vertical overflow.

Markup: <pre class="x-scroll scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

Styleguide: 5.scroll-2
*/

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

/*
.y-scroll

Hides horizontal overflow.

Markup: <pre class="y-scroll scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

Styleguide: 5.scroll-3
*/

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

/*
.no-scroll

Hides overflow.

Markup: <pre class="no-scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

Styleguide: 5.scroll-4
*/

.no-scroll { overflow: hidden !important; }