
/* Global Layout
----------------------------------------------------------------------------------------------------*/


body {
	font-family: 'Droid Serif', serif;
	font-weight: 400;
	background: #f7f7f7;
	}

a {color: #2e96dc}

h2 {
	font-size: 20px;
	padding-bottom: 20px;
	color: #484848;
}

#header {
	position: relative;
	margin-top: 40px;
	overflow: visible;
	}
	
#header hgroup h1 a {
		color: #5a6386;
		font-size: 20px;
		font-weight: normal;
		font-style: italic;
		display: block;
		min-height: 110px;
		padding: 20px 0 0 180px;
		margin-left: 20px;
		background: url(../images/logo-HPDT.png) no-repeat;
		}
	
#header nav {
	margin-top: 30px;
}

#header nav li {
		list-style: none;
		float: left;
		position: relative;
}
		
		#header nav li a {
			display: block;
			color: #5a6386;
			padding: 15px 20px;
			margin-left: 1px;
			background: #ededf0;
		} #header nav li a:hover {background: #5a6386; color: #fff}

				
		#header nav li ul.sub-nav {
			position: absolute;
			display: none;
		}

		#header nav li:hover ul.sub-nav {display: block}

		#header nav li:hover a {background: #5a6386; color: #fff}
		
		#header nav li ul.sub-nav li a {
			min-width: 150px;
			border-top: 1px solid #fff;
		}
		
		#header ul.sub-nav a:hover {
			color: #5a6386;
			text-decoration: underline;
			background: #ededf0 !important;
			}
		
		
		
		
#page-content {
	border-top: 3px solid #59617c;
	background: #fff;
	clear: both;
}

#page-content article div, #page-content aside div {padding: 30px}

#page-content a:hover {text-decoration: underline}

#intro {
	padding: 50px 100px !important;
}

	#intro h1 {
		border-bottom: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 20px;
		font-size: 30px;
		line-height: 36px;
		text-align: center;
		color: #484848;
	}
	
	#intro p {
		font-size: 16px;
		line-height: 24px;
		width: 70%;
		margin: 0 auto;
		text-align: center;
	}


table {width: 100%}

table td {
	padding: 10px;
	font-size: 14px;
	font-family: 'Droid Sans', sans-serif;
	}

table tr {
	color: #5a6386;
	border-bottom: 1px solid #d9d9d9;
} table tr:hover {background: #f7f7f7; cursor: default}


table thead tr {
	background: #59617c;
} table thead tr:hover {background: #59617c}

table thead tr th {
	color: #fff;
	padding: 10px;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Droid Sans', sans-serif;
}


#footer {
	color: #fff;
	background: #707b99;
}

	#footer li {
		list-style: none;
		padding-bottom: 10px;
		}

	#footer h1 {padding-bottom: 20px}

	#footer a {color: #a6e7ff}
	#footer a:hover {text-decoration: underline}
	
	#footer li strong {
		display: block;
		float: left;
		width: 70px;
		font-style: italic;
		font-weight: 400;
		}
	
	#footer article div {
		padding: 30px;
	}
	
	#footer h4 {
			padding: 30px 0 10px;
			margin: 0 30px 18px;
			border-bottom: 1px solid #fff;
	}
	
	.links {
		float: left;
		padding-top: 0 !important;
	}
	
	.links li {font-size: 14px}
	
	#copyright {background: #59617c}
	#copyright p {padding: 20px; font-size: 12px}
	#copyright .left {float: left}
	#copyright .right {float: right}

/* Smaller screens
----------------------------------------------------------------------------------------------------*/


@media only screen and (max-width: 1060px) {

	body {
	font-size: 0.8em;
	line-height: 1.5em;
	}
	
}


/* Mobile Layout
----------------------------------------------------------------------------------------------------*/


@media handheld, only screen and (max-width: 767px) {

	body {
	font-size: 16px;
	-webkit-text-size-adjust: none;
	}
	
	.row, body, .container {
	width: 100%;
	min-width: 0;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	}
	
	.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
	width: auto;
	float: none;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
	}

}


/* Retina Display
----------------------------------------------------------------------------------------------------*/


@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}