/*****
 * Utilities
 *
 * Nazewnictwo na podstawie:
 * http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
 * Pomysły zaczerpnięte z:
 * http://www.sitepoint.com/using-helper-classes-dry-scale-css/
 *****/

/**
 * Margins and padding
 */
/* Top margin */
.u-mt-none  { margin-top: 0 !important; }
.u-mt-10	{ margin-top: 10px !important; }
.u-mt-15	{ margin-top: 15px !important; }
.u-mt-20	{ margin-top: 20px !important; }
.u-mt-25	{ margin-top: 25px !important; }
.u-mt-30	{ margin-top: 30px !important; }
/* Bottom margin */
.u-mb-none  { margin-bottom: 0 !important; }
.u-mb-10	{ margin-bottom: 10px !important; }
.u-mb-15	{ margin-bottom: 15px !important; }
.u-mb-20	{ margin-bottom: 20px !important; }
.u-mb-25	{ margin-bottom: 25px !important; }
.u-mb-30	{ margin-bottom: 30px !important; }
/* Left margin */
.u-ml-none  { margin-left: 0 !important; }
.u-ml-10	{ margin-left: 10px !important; }
.u-ml-15	{ margin-left: 15px !important; }
.u-ml-20	{ margin-left: 20px !important; }
.u-ml-25	{ margin-left: 25px !important; }
.u-ml-30	{ margin-left: 30px !important; }
/* Right margin */
.u-mr-none  { margin-right: 0 !important; }
.u-mr-10	{ margin-right: 10px !important; }
.u-mr-15	{ margin-right: 15px !important; }
.u-mr-20	{ margin-right: 20px !important; }
.u-mr-25	{ margin-right: 25px !important; }
.u-mr-30	{ margin-right: 30px !important; }
/* Padding */
.u-p-5		{ padding: 5px !important; }
.u-p-10		{ padding: 10px !important; }
/* Top padding */
.u-pt-none  { padding-top: 0 !important; }
.u-pt-5		{ padding-top: 5px !important; }
.u-pt-10	{ padding-top: 10px !important; }
.u-pt-15	{ padding-top: 15px !important; }
/* Bottom padding */
.u-pb-none  { padding-bottom: 0 !important; }
.u-pb-5		{ padding-bottom: 5px !important; }
.u-pb-10	{ padding-bottom: 10px !important; }
.u-pb-15	{ padding-bottom: 15px !important; }

/**
 * Position
 */
.u-fixed    { position: fixed; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-static   { position: static; }

.u-f-l		{ float: left !important; }
.u-f-r		{ float: right !important; }

.u-pin-top-right {
    top: 0;
    right: 0;
}

.u-pin-bottom-right {
    bottom: 0;
    right: 0;
}

/**
 * Aligning elements
 */
.u-ta-l		{ text-align: left; }
.u-ta-r		{ text-align: right; }
.u-ta-c		{ text-align: center; }
.u-ta-j		{ text-align: justify; }

.u-va-t		{ vertical-align: top; }
.u-va-b		{ vertical-align: bottom; }
.u-va-m		{ vertical-align: middle; }

/**
 * Typography
 */
.u-fw-b     { font-weight: bold; }
.u-fw-r		{ font-weight: normal; }
.u-fs-i		{ font-style: italic; }

/**
 * Lists
 */
.u-list-bare {
    padding: 0;
    list-style: none;
}

/**
 * Display Values
 */
.u-d-n		{ display: none; }
.u-d-b		{ display: block; }
.u-d-i		{ display: inline; }
.u-d-ib		{ display: inline-block; }

/**
 * Borders
 */
.u-border-all		{ border: 1px solid #eee; }
.u-border-top		{ border-top: 1px solid #eee; }
.u-border-bottom	{ border-bottom: 1px solid #eee; }
.u-border-right		{ border-right: 1px solid #eee; }
.u-border-left		{ border-left: 1px solid #eee; }

/**
 * Separators
 * Separatory są podobne do borderów różnią się głównie tym, że linia 
 * wygenerowana za ich pośrednictwem jest szarym gradientem.
 * Separatory mogą wyć pionowe, w tym pionowy separator na środku elementu
 * oraz poziome.
 */
.u-separator-left, .u-separator-right, .u-separator-center, .u-separator-center-v, 
.u-separator-top, .u-separator-bottom {
    position: relative;
}
.u-separator-left::after, .u-separator-right::after, .u-separator-center-v::after {
    content: "";
    bottom: 0;
    top: 0;
    background-image: linear-gradient(to bottom, #fff, #f2f2f2 10%, #d4d4d4 40%, #d4d4d4 60%, #f2f2f2 90%, #fff);
    display: block;
    position: absolute;
    width: 1px;
}
.u-separator-top::after, .u-separator-bottom::after {
	content: "";
	left: 0;
	right: 0;
    background-image: linear-gradient(to right, #fff, #f2f2f2 10%, #d4d4d4 40%, #d4d4d4 60%, #f2f2f2 90%, #fff);
    display: block;
    position: absolute;
	height: 1px;
}
.u-separator-left::after     { left: 0; }
.u-separator-right::after    { right: 0; }
.u-separator-center-v::after { right: 50%; }
.u-separator-top::after      { top: 0; }
.u-separator-bottom::after   { bottom: 0; }
.u-separator-top, .u-separator-bottom { border: none; }

/**
 * Text area resize
 */
.u-r-n		{ resize: none; }
.u-r-h		{ resize: horizontal; }
.u-r-v		{ resize: vertical; }
.u-r-h-400	{ resize: horizontal;  max-width: 400px;}
.u-r-h-500	{ resize: horizontal;  max-width: 500px;}
.u-r-h-600	{ resize: horizontal;  max-width: 600px;}
.u-r-h-700	{ resize: horizontal;  max-width: 700px;}
.u-r-h-800	{ resize: horizontal;  max-width: 800px;}
.u-r-h-900	{ resize: horizontal;  max-width: 900px;}
.u-r-v-400	{ resize: vertical;  max-height: 400px;}
.u-r-v-500	{ resize: vertical;  max-height: 500px;}
.u-r-v-600	{ resize: vertical;  max-height: 600px;}
.u-r-v-700	{ resize: vertical;  max-height: 700px;}

/**
 * Text colors
 * Klasy dostarczone przez bootstrap: text-success, text-danger, text-warning
 * text-primary, text-info, text-hint.
 * I dodatkowo
 */
.text-hint { color: #999; }