/* MODIFIERS / HELPER / CONVENIENCE CLASSES - 
	http://www.sitepoint.com/using-helper-classes-dry-scale-css/?utm_medium=email&utm_campaign=SitePoint%20Newsletter%20%2029%20January%202015&utm_content=SitePoint%20Newsletter%20%2029%20January%202015+Version+B+CID_42ce3dfbc802f1c56913db118f2ab412&utm_source=CampaignMonitor&utm_term=an%20article
	http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
	------------------------------------------------------------------ */

/* text align
	---------------------------------------------------- */
	.al			{ text-align: left			!important; }
	.ar			{ text-align: right		  !important; }
	.ac			{ text-align: center		 !important; }
	.aj			{ text-align: justify		!important; }

/* vertical align
	---------------------------------------------------- */
	.vt			{ vertical-align: top		!important; }
	.vm			{ vertical-align: middle	!important; }
	.vb			{ vertical-align: bottom	!important; }
	.vbl			{ vertical-align: baseline !important; }

/* font sizing
	---------------------------------------------------- */
	.txt-xs	  { font-size: 10px			 !important; }
	.txt-s		{ font-size: 12px			 !important; }
	.txt-m		{ font-size: 14px			 !important; }
	.txt-l		{ font-size: 16px			 !important; }
	.txt-xl	  { font-size: 24px			 !important; }
	.txt-xxl	 { font-size: 32px			 !important; }

/* background colors
	---------------------------------------------------- */
	.bg-black	{ background-color: #000	 !important; }
	.bg-dark	 { background-color: #999	 !important; }
	.bg-medium  { background-color: #ccc	 !important; }
	.bg-light	{ background-color: #eee	 !important; }
	.bg-white	{ background-color: #fff	 !important; }
	.bg-ru-red  { background-color: #d21034 !important; }

/* foreground (text) colors
	---------------------------------------------------- */
	.txt-white  { color: #fff				  !important; }
	.txt-black  { color: #000				  !important; }
	.txt-muted  { color: #ccc				  !important; }
	.txt-ru-red { color: #d21034			  !important; }

/* container helpers - for images and boxes
	---------------------------------------------------- */
	.br-s { border-radius: 3px; border-radius: .25rem; }
	.br-m { border-radius: 6px; border-radius: .5rem; }
	.br-l { border-radius: 9px; border-radius: .75rem; }
	.br-xl { border-radius: 12px; border-radius: 1rem; }
	.br-f,
	.circle,
	.circular { border-radius: 100%; }

/* frames ---------------------------------------------------- */
	.framed {
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		border: 1px solid rgba(0,0,0,.2);
		}

	.framed-double {
		border-width: 3px;
		border-style: double;
		}

	.framed-dashed { border-style: dashed; }
	.framed-dotted { border-style: dotted; }
	.framed-thick { border-width: .25rem;}

/* clear
	---------------------------------------------------- */
	.cn			{ clear: none				  !important; }
	.cb			{ clear: both				  !important; }
	.cl			{ clear: left				  !important; }
	.cr			{ clear: right				 !important; }

/* float
	---------------------------------------------------- */
	.fn			{ float: none				  !important; }
	.fl			{ float: left				  !important; }
	.fr			{ float: right				 !important; }

/* display
	---------------------------------------------------- */
	.l-dn		 { display: none				!important; }
	.l-db		 { display: block			  !important; }
	.l-di		 { display: inline			 !important; }
	.l-dib		{ display: inline-block	 !important; }

/* visibility
	---------------------------------------------------- */
	.is-visible	{ visibility: visible	 !important; }
	.is-invisible { visibility: hidden	  !important; } /* to hide from screen readers too use .l-dn (display: none;) */

	.is-visually-hidden {
		border: 0;
		padding: 0;
		clip: rect(0 0 0 0);
		clip: rect(0, 0, 0, 0);
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		position: absolute;
		}

/* wrapping and overflowing text
	---------------------------------------------------- */
	.nowrap { white-space: nowrap; }

	.ellipsis {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		-ms-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis; /* or "clip" */
		-webkit-hyphens: none; /* 1 */
		-ms-hyphens: none;
		-o-hyphens: none;
		hyphens: none;
		}

/* image replacement
	---------------------------------------------------- */
/* http://nicolasgallagher.com/another-css-image-replacement-technique */
	.ir {
		background-color: transparent;
		border: 0;
		color: transparent;
		font: 0/0 a; /* doesn't validate */
		text-shadow: none;
		}

/* clear fix
	---------------------------------------------------- */
/* clear floats within a non-floated container for browsers that handle :after (not < IE7) | Micro clearfix hack - http://nicolasgallagher.com/micro-clearfix-hack/ */
	.cf:before,
	.cf:after,
	.header:before,
	.header:after,
	.content:before,
	.content:after,
	.footer:before,
	.footer:after,
	.in .fm-v:before,
	.in .fm-v:after,
	.row:before,
	.row:after,
	.col:before,
	.col:after {
		content: " "; /* space is needed for Opera */
		display: table;
		}

	.cf:after,
	.header:after,
	.content:after,
	.footer:after,
	.in .fm-v:after,
	.row:after,
	.col:after { clear: both; } /* cf = clear fix */

	.cf,
	.header,
	.content,
	.footer,
	.in .fm-v,
	.row,
	.col { zoom: 1; } /* For IE 6/7 (trigger hasLayout) | doesn't validate */

/* responsive circle | set width and padding-bottom to same value
	---------------------------------------------------- */
.circle1 {
	width: 50%;
	height:0;
	padding-bottom: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #4679BD;
	}

/* Padding defined with percentages in CSS, are calculated on the width of the container, which means that giving a padding-top to the child that equals the parent width, will give the element the same height as its width. */
.circle-text { width: 25%; }

.circle-text:after {
	content: "";
	display: block;
	width: 100%;
	height:0;
	padding-bottom: 100%;
	background: #4679BD;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	}

.circle-text div {
	float:left;
	width:100%;
	padding-top:50%;
	line-height:1em;
	margin-top:-0.5em;
	text-align:center;
	color:white;
	}

/* circles | for pagination numbers, etc.
	---------------------------------------------------- */
	.circle {
		border: 1px solid;
		border-radius: 50%;
		display: inline-block;
		font-size: 2em; /* controls width or use .txt-xl */
		text-align: center;
		min-width: 1.5em; /* controls width and height since height of child element is based on .circle width */
		text-decoration: none; /* remove border when used on links [optional] */
		-webkit-box-sizing: content-box;
			-moz-box-sizing: content-box;
				  box-sizing: content-box;
		}

	.circle .number {
		line-height: 0;
		vertical-align: middle;
		}

/* alternate implementation */
	.circle2 {
		border: 1px solid;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		width: 3em; /* fixed or min-width to resize based on text length */
		}

	.circle2 .number {
		display: inline-block;
		line-height: 0;
		margin: 50% 0; /* size the inside based on outside's width */
		padding: 0 .25em; /* 0 on verticals since margin already takes care of height | adds padding to items that don't naturally fit */
		}

/* another implementation */
	.circle3 {
		border: 1px solid;
		border-radius: 50%;
		display: inline-block;
		}

	.circle3 .number {
		display: block; /* or inline-block | block makes small numbers circular instead of oval */
		line-height: 0;
		padding: 50% .25em;
		}

/* another implementation */
	.circle4 {
		border: 1px solid; /* inherit border-color from text */
		border-radius: 50%;
		display: inline;
		padding: .25em;
		}

/* another implementation */
	.circle5 {
		border: 1px solid;
		border-radius: 50%;
		display: inline-block;
		width: 2.5em; /* big enough for 4-digit numbers before overflow | setting minwidth instead of width, will let parent container stretch  */
		line-height: 2.5em; /* must be = to width or min-width | sets the height */
		text-align: center;
		padding: .25em;

		-webkit-box-sizing: content-box;
			-moz-box-sizing: content-box;
				  box-sizing: content-box;
		}

	.badge-flexy {
		display: inline-block;
		border-radius: 50%;
		}

	.badge-flexy b {
		display: block;
		height: 0;
		padding-bottom: 100%;
		width: 100%;
		overflow: hidden; /* + */
		font-weight:normal;
		}

	.badge-flexy span {
		display: block; /* + */
		line-height: 1;
		margin-top: -.5em;
		padding-left: .5em; /* optional */
		padding-right: .5em; /* optional */
		padding-top: 50%;
		text-align: center;
		}

/* badges - http://codeitdown.com/css-circles/ http://www.metisonline.co.za/2012/08/responsive-css-circle-buttons/
	---------------------------------------------------- */
	.badge { /*<b>*/
		display: inline-block;
		border-radius: 10px;
		line-height: 1;
		padding: .25em .5em;
		text-align: center;
		vertical-align: baseline;
		white-space: nowrap;
		}

/* help dialog
	---------------------------------------------------- */
	.box-help {
		position: absolute;
		width: 330px;
		z-index: 999;
		background-color: #fff;
		border: 1px solid rgb(204, 204, 204);
		border-radius: 3px;
		}

	.box-help-top {
		border-bottom: 1px solid rgb(204, 204, 204);
		margin: 0 0 10px;
		padding: 0 0 5px;
		}

	.button-close {
		cursor: pointer;
		height: 15px;
		width: 15px;
		position: relative;
		z-index: 1001;
		background: url(/pi/img/icons1.png) no-repeat;
		background-position: 0 50%;
		overflow: hidden;
		}

	.box-help-main {
		height: auto;
		max-height: 350px;
		z-index: 999;
		width: 100%;
		overflow: auto;
		}

	.org .box-help-main > p {
		margin: 0 0 1.5em;
	}