/*
--- CLOCKIT
--- Typography stylesheet
*/

html, body {
	font-family: 'robotoregular', sans-serif;
	color: #222222;
	font-size: 13px;
}

strong {
	font-family: 'robotobold';
	font-weight: normal;
}

/* ================================================================================= HEADINGS ============== */
/* ========================================================================================================= */

.typography h1 {
	font-size: 3.2em; line-height: 100%;
}
.typography h2 {
	font-size: 2.4em;
}
.typography h3 {
	font-size: 1.8em;
}
.typography h4 {
	font-size: 1.2em;
	font-family: 'robotobold';
}


/* =============== H5 ==== */

.typography h5 {
	font-size: 1em;
	text-transform: uppercase;
	padding: 20px 0 15px 0;
}
.typography h5 .text {
	display: inline-block;
	padding: 5px 5px 5px 0;
	background: #FFFFFF;
}
.typography h5 .background-divider {
	height: 1px;
	width: 100%;
	background: #CCCCCC;
	margin-top: -14px;
}
.typography h5 .right-button {
	float: right;
	padding: 3px 6px;
	border-left: 5px solid #FFFFFF;
	font-size: 11px;
	margin-top: 3px;
}


/* ============= HEADINGS WITH PADDING ==== */


.typography h1.top-padding,
.typography h2.top-padding {
	padding-top: 20px;
}

.typography h1.bottom-padding,
.typography h2.bottom-padding {
	padding-bottom: 20px;
}

.typography h3.top-padding,
.typography h4.top-padding,
.typography h5.top-padding {
	padding-top: 10px;
}

.typography h3.bottom-padding,
.typography h4.bottom-padding,
.typography h5.bottom-padding {
	padding-bottom: 10px;
}


/* ============= HEADINGS VARIATIONS ==== */

.typography .inline {
	display: inline-block !important;
}



/* ================================================================================ BODY COPY ============== */
/* ========================================================================================================= */


/*
 * Paragraphs
 * 
 */

.typography p,
.typography li {
	padding: 4px 0;
}


/*
 * Links: Basic text links
 * Block based links have their own section
 */

.typography a:not(.button) {
	text-decoration: underline;
	color: #31a2dc;
}

.typography a:not(.button):hover {
	color: #37b6ff;
}


/*
 * Basic size variations
 * These are relative, so will depend on parent size
 */

.typography .small-text {
	font-size: 0.8em;
}



/*
 * Colours
 * Text-colours
 */

.typography .black-text {
	color: #000000;
}

.typography .white-text {
	color: #FFFFFF;
}

.typography .red-text {
	color: #e73030;
}
 
.typography .grey-text {
	color: #999999;
}
 
.typography .green-text {
	color: #3ed22f;
}
 
.typography .orange-text {
	color: #eba518;
}

/*
 * Colours
 * Background-colours
 */

.typography .black-background {
	background-color: #000000;
}

.typography .white-background {
	background-color: #FFFFFF;
}

.typography .red-background {
	background-color: #e73030;
}
 
.typography .grey-background {
	background-color: #999999;
}
 
.typography .green-background {
	background-color: #3ed22f;
}
 
.typography .orange-background {
	background-color: #eba518;
}


/* ========================================================================== UNIQUE ELEMENTS ============== */
/* ========================================================================================================= */

/*
 * Section: Page Banner Content
 * Overrides for headings and text
 */
 
.section.page-banner p {
	font-size: 1.3em;
}
.center {
	text-align: center;
}
a.no-underline {
	text-decoration: none !important;
}