/*
 * Normalize & Bootstrap
==========================*/

@import url("bootstrap.min.css");

body {
	padding: 20px 0 40px;
	font-size: small;
	line-height: 1.5em;
	color: #333;
	font-family: "Liberation Sans", "Trebuchet MS", "Bitstream Vera Sans", helvetica, verdana, arial, sans-serif;
}

/*
 * Global & Overrides
==========================*/

/* Typography */
h1, h2, h3, h4, h5, h6 { color: #333; font-family: Overpass, "Liberation Sans", "Trebuchet MS", "Bitstream Vera Sans", helvetica, verdana, arial, sans-serif; }
h1 { font-size: 200%; padding: 0; margin-bottom: 20px; }
h2, h3, h4, h5 { font-size: 100%; padding: 0; margin-bottom: 10px; }
	h2 { font-size: 145%; }
	h3 { font-size: 125%; }
	h4 { font-size: 110%; }
h1 sup, h2 sup { vertical-align: top; display: inline-block; margin: .5em 0 0 .25em; }
	
	section > h3,
	.section-header {
		margin: 1em 0;
		padding-top: 1em;
		border-top: 1px solid #ccc;
	}

	li > h4 { margin-bottom: 0; }

a { color: #06c; text-decoration: none; }
a:hover, a:visited { color: #03c; }
.code pre > code { 
	padding: 2px 4px;
	color: #c7254e;
	white-space: nowrap;
	background-color: #f9f2f4;
	border-radius: 4px;
}

/*
 * Fonts
==========================*/

@font-face {
	font-family: Overpass;
	font-style: normal;
	font-weight: bold;
	src: url("fonts/overpass_bold-web.eot");
	src: url("fonts/overpass_bold-web.eot?#iefix") format("eot"),
		 url(data:application/x-font-woff;charset=utf-8;base64,[encoded data, 68112 characters]) format("woff"),
		 url("fonts/overpass_bold-web.ttf") format("truetype"),
		 url("fonts/overpass_bold-web.svg#webfontzAU82Ltw") format("svg");
}

/*
 * Banner
==========================*/

.header-graphic {
	position: relative;
	background: #203a61; /* Default: dark blue */
	margin-bottom: 20px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	height: 150px;
	width: 100%;
	}

	.centos-banner { background: #203a61 url(../images/centos-header.png) no-repeat right center; }

	.v3-banner .banner-title,
	.v3-banner .banner-tagline {
		font-weight: bold;
		font-family: Overpass, "Liberation Sans", "Trebuchet MS", "Bitstream Vera Sans", helvetica, verdana, arial, sans-serif;
	}

	.header-graphic .banner-title {
		color: #fff;
		font-size: 30px;
		line-height: .9em;
		margin: 0;
		padding: 0;
		position: absolute;
			left: 30px;
			bottom: 40px;
		text-transform: uppercase;
		z-index: 2;
		}
		.header-graphic .banner-title span {
			display: block;
			font-size: 24px;
			}
			.header-graphic .banner-title span.graphic-icon { display: inline; margin-right: 8px; font-size: 28px; color: #fff; }
		
			.header-graphic .banner-title sup {
				bottom: 12px;
				}
				.header-graphic .banner-title span sup {
					bottom: 8px;
					}

		.header-graphic .banner-tagline {
			color: white;
			font-size: 16px;
			letter-spacing: .15em;
			position: absolute;
				left: 30px;
				bottom: 30px;
			text-transform: uppercase;
			}

			/* with tagline */
			.with-tagline .banner-title {
				bottom: 55px;
				}

			/* Adding icon */
			.header-graphic.with-icon span[class*="icon-"] {
				position: absolute;
				left: 30px;
				top: 50%;
				margin-top: -42px;
				font-size: 84px;
				color: #000;
				opacity: 0.35;
				filter: alpha(opacity=35);
			}
			.header-graphic.with-icon .banner-title > span[class*="icon-"] {
				/* fix if the icon is accidentally added into the h1 */
				left: -114px;
				margin-top: -50px;
			}
			.header-graphic.with-icon.with-tagline .banner-title > span[class*="icon-"] { margin-top: -35px; }
			.header-graphic.with-icon .banner-title,
			.header-graphic.with-icon .banner-tagline { left: 144px; } /* push to the right for the watermark */

/*
 * Footer
==========================*/
footer {
  margin: 1em 0;
	padding-top: 1em;
}
