/*
*****************************************************
*   This is a library file         			    *
*	It's in SVN, edit there only					*
*	Any changes must be peer code reviewed please 	*
*****************************************************

* HTML STRUCTURE
*****************************************************
Level 1 (Default) gadget:
<div class="gadget level1">
	<div class="gadgetHeader"></div>
	<div class="gadgetBody"></div>
</div>

Level 2 alternate gadget:
<div class="gadget level2 alternate">
	<div class="gadgetHeader"></div>
	<div class="gadgetBody"></div>
</div>

*/
.gadget {
	background: #eaeef1;
	margin-bottom: 25px;
}

.gadget .gadgetHeader,
.gadget .gadgetHeader h3 {
	color: inherit;
	font-family: 'AkkuratProRegular', Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 22px;
	padding: 0;
}

.gadget .gadgetHeader {
	color: #282828;
	padding: 12px 12px 0;
}

.gadget .gadgetBody {
	padding: 12px 12px 13px;
	font-size: 13px;
}

.gadget.level5 {
	background: none;
	border-top: none;
	margin-bottom: 0;
}
.gadget img.icon {
	border: none;
	float: left;
	margin-top: 1px;
	margin-right: 8px;
}
.gadget,
.gadgetHeader,
.gadgetBody {
	*zoom: 1;
}

/**
Styling added for "Metro Homepage project"
*/
.homepage .icon-chevron {
	background-position: -20px -268px;
	padding-left: 16px;
}
.gadget.homepage {
	background-color: #ffffff;
	margin: 0;
}

#homeBottom .gadget.homepage {
	*margin-top: 14px;
}

.gadget.homepage.level1 {
	height: 324px;
	padding: 0 28px 0 0;
}

.homepage.level1 .gadget-main-heading {
	overflow: hidden;
}

.homepage.level1 .gadget-main-heading h3 {
	color: #5a5a5a;
	font-family: "AkkuratProRegular";
	font-size: 12px;
	font-weight: normal;
	float: left;
	margin: 12px 0 20px 0;
	padding: 8px 16px 4px 12px;
	background: #f0f3f5; /* Old browsers */
	background: -moz-linear-gradient(left,  #f0f3f5 0%, #cfd3d5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f0f3f5), color-stop(100%,#cfd3d5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #f0f3f5 0%,#cfd3d5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #f0f3f5 0%,#cfd3d5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #f0f3f5 0%,#cfd3d5 100%); /* IE10+ */
	background: linear-gradient(to right,  #f0f3f5 0%,#cfd3d5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f3f5', endColorstr='#cfd3d5',GradientType=1 ); /* IE6-8 */
}

.homepage.level1 .gadgetHeader {
	margin-bottom: 13px;
	margin-left: 16px;
	padding-top: 0;
	padding-bottom: 0;
	*margin-top: 20px;
}
.homepage.level1 .gadgetHeader.no-subtitle {
	padding-top: 20px;
}
.homepage.level1 .gadgetHeader a, .homepage.level1 .gadgetHeader h3 {
	color: #005EB8;
	font-size: 22px;
}
.homepage.level1 .gadgetBody {
	padding: 0 12px 7px 28px;
}
.homepage.level1 .gadgetBody img {
	border: none;
	float: left;
	margin-bottom: 14px;
}
.homepage.level1 .gadgetBody h2 {
	font-family: "AkkuratProRegular";
	font-size: 12px;
	font-weight: normal;
	margin-top: 13px;
	color: #5a5a5a;
	*margin-bottom: 0;
}
.homepage.level1 .gadgetBody p {
	clear: left;
	color: #282828;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 0;
}
.homepage.level1 .gadgetBody .callToAction {
	margin-top: 22px;
}
.homepage.level1 .gadgetBody .callToAction a,
.homepage.level2 .gadgetBody .callToAction a {
	color: #005eb8;
	font-family: 'AkkuratProRegular', Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
}
.homepage.level2 .gadgetBody {
	padding: 0;
	margin-top: 14px;
	*margin-top: 0;
}
.homepage.level3 .gadgetBody {
	padding: 0 0 0 30px;
	margin-top: 14px;
}
.homepage.level2 .gadgetBody img {
	border: none;
	float: left;
	margin-right: 30px;
	margin-bottom: 0;
}
.homepage.level3 .gadgetBody img {
	float: right;
	margin-right: 0;
	margin-bottom: 0;
}
.homepage.level2 .gadgetBody .gadgetHeader, .homepage.level3 .gadgetBody .gadgetHeader {
	margin: 18px 30px 6px 0;
	padding: 0;
}
.homepage.level2 .gadgetBody .gadgetHeader a, .homepage.level3 .gadgetBody .gadgetHeader a, .homepage.level2 .gadgetBody .gadgetHeader h3, .homepage.level3 .gadgetBody .gadgetHeader h3 {
	color: #006e51;
	font-family: 'AkkuratProLight', Arial, sans-serif;
	font-size: 26px;
	max-height: 100%; /* Fixes font size on mobile devices in full-site mode */
}
.homepage.level2 .gadgetBody h2, .homepage.level3 .gadgetBody h2 {
	font-family: 'AkkuratProRegular', Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #414042;
	margin-bottom: 8px;
}
.homepage.level2 .gadgetBody p, .homepage.level3 .gadgetBody p {
	color: #414042;
	font-family: Arial;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 0;
	padding-right: 30px;
}
.homepage.level2 .gadgetBody div.callToAction, .homepage.level3 .gadgetBody div.callToAction {
	margin-top: 11px;
}


/********************************************************************
* RESPONSIVE OVERRIDES - All screens smaller than 767px
********************************************************************/
@media only screen
and (max-width : 767px) {

	.blk-responsive .gadget.homepage.level1 {
		height: auto;
		padding: 0;
	}

	.blk-responsive .homepage.level1 .gadgetHeader {
		margin: 0;
	}

	.blk-responsive .homepage.level1 .gadgetHeader a,
	.blk-responsive .homepage.level1 .gadgetHeader h3 {
		font-size: 18px;
	}

	.blk-responsive .homepage.level1 .gadgetBody {
		clear: both;
		padding: 12px;
	}

	.blk-responsive .homepage.level1 .gadgetBody p {
		line-height: 1.5em;
	}

	.blk-responsive .homepage.level2 .gadgetBody img {
		float: none;
		margin: 0;
		width: 100%;
	}

	.blk-responsive .homepage.level2 .gadgetBody .gadgetHeader,
	.blk-responsive .homepage.level3 .gadgetBody .gadgetHeader {
		margin: 0;
		padding: 12px;
	}

	.blk-responsive .homepage.level2 .gadgetBody .gadgetHeader a,
	.blk-responsive .homepage.level3 .gadgetBody .gadgetHeader a,
	.blk-responsive .homepage.level2 .gadgetBody .gadgetHeader h3,
	.blk-responsive .homepage.level3 .gadgetBody .gadgetHeader h3 {
		font-size: 18px;
	}

	.blk-responsive .homepage.level2 .gadgetBody {
		margin: 0;
	}

	.blk-responsive .homepage.level2 .gadgetBody p,
	.blk-responsive .homepage.level3 .gadgetBody p {
		line-height: 1.5em;
		padding: 0 12px;
	}

	.blk-responsive .homepage.level2 .gadgetBody div.callToAction,
	.blk-responsive .homepage.level3 .gadgetBody div.callToAction {
		margin: 0;
		padding: 12px;
	}
}