/* ---------- OVERALL STRUCTURE STYLING ---------- */
html { 
	background-color: #484848;
	background: url(images/bg/km01.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: sans-serif;
	}
html, body {
	height: 100%;
	}
#wrapper {
	min-height: 100%;
	}

#main {overflow:auto;
	padding-bottom: 80px;  /* must be same height as the footer */
	}  

/* ---------- TITLE STYLING ---------- */
#titleBox {
	/* clear: both; */ /* for centered div */
	float: right; /* for right-aligned div */
	width: 500px; /* for right-aligned div */
	margin-right: 100px; /* for right-aligned div */
	padding: 10px;
	margin-top: 50px;
	-webkit-transition-delay: 2s; /* Safari */
	transition-delay: 2s;
	text-align: center;
	font-family: 'Yellowtail', cursive;
	color: white;
	}
@media screen and (max-width: 500px) {
   	 #titleBox {
		clear: both; /* for centered div */
		width: 100%;
		margin: 0px;
 		}
	}
.titleText {
	font-size: 400%;
	font-stretch: wider;
	}
@media screen and (max-width: 500px) {
   	 .titleText {
		font-size: 300%;
		font-stretch: normal;
 		}
	}
.dateText {
	font-size: x-large;
	font-stretch: normal;
	font-weight: bold;
	}

/* ---------- TOP NAV BAR STYLING ---------- */
#topnav {
	padding: 10px;
	margin-top: 20px;
	clear: both; 
	font-size: large;
	font-family: 'Fira Sans', sans-serif; 
	font-weight: 400;
	background-image: url("images/textbackground2.gif");
	background-repeat: repeat; 
	}
@media screen and (max-width: 500px) {
   	 #topnav  {
		padding: 3px;
 		}
	}
#topnavlinks {
	text-align: center; /* places links in center of screen */
	}
    /* Hide from IE5-Mac \*/
#topnavlinks li a {
	float: none;
	}
   /* End hide */
#topnavlinks ul {
	padding-left: 0px; /* ensures links are centered propperly */
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 3px;
	margin-bottom: 3px;
	}
#topnavlinks ul li {
	display: inline; /* prevents list from being vertical */ 
	padding: 0px 5px 0px 5px;   /* controls spacing of nav links */
	text-align: center;
	}
@media screen and (max-width: 500px) {
   	 #topnavlinks ul li  {
		display: list-item;
 		}
	}
#topnavlinks a {
	text-decoration: none;
	padding: 3px;
	font-style: normal;
	text-decoration: none; /* this takes off the underline */
	}
#topnavlinks a:link {
	color: white;
	}
#topnavlinks a:visited {
	color: black;
	}
#topnavlinks a:hover {
	color: #0066CC;
	}
#topnavlinks a:visited:hover {
	color: #0066CC;
	}
#topnavlinks a.here {
	font-weight: 700;
	color: white;
	}
#topnavlinks a.here:hover {
	font-weight: 700;
	color: #0066CC;
	}
#topnavlinks a:active {
	color:  #0066CC;
	}

/* ---------- CONTENT STYLING --------- */
#contentBox {
	margin: 20px 100px;
	clear:both;
	background-image: url("images/textbackground2.gif");
	background-repeat: repeat; 
	color: white;
	}
@media screen and (max-width: 500px) {
   	 #contentBox  {
		margin: 0px 0px;
 		}
	}
#contentBox a {
	text-decoration: none; /* this takes off the underline */
	}
#contentBox a:link {
	color: white;
	}
#contentBox a:visited {
	color: #D0D0D0; 
	}
#contentBox a:hover {
	color: #0066CC;
	}
#contentBox a:active {
	color: #0066CC;
	}
.contentTitle {
	padding: 10px;
	margin-top: 20px;
	-webkit-transition-delay: 2s; /* Safari */
	transition-delay: 2s;
	text-align: center;
	font-family: 'Yellowtail', cursive;
	color: white;
	font-size: 300%;
	font-stretch: wider;
	}
@media screen and (max-width: 500px) {
   	 .contentTitle {
		font-size: 150%;
		font-stretch: normal;
 		}
	}
.contentTitle a:visited {
	color: white; 
	}
.contentHeading {
	text-align: center;
	font-size: x-large;
	font-weight: bold;
	padding: 10px;
	}
@media screen and (max-width: 500px) {
   	 .contentHeading  {
		font-size: large;
		padding: 3px;
 		}
	}
.contentSubheading {
	font-size: large;
	font-weight: bold;
	padding: 7px 10px;
	text-align: justify;
	}
@media screen and (max-width: 500px) {
   	 .contentSubheading  {
		padding: 3px;
 		}
	}
.contentSubsubheading {
	font-weight: bold;
	padding: 7px 10px;
	text-align: justify;
	}
@media screen and (max-width: 500px) {
   	 .contentSubsubheading  {
		padding: 3px;
 		}
	}
.contentText {
	padding: 3px 30px;
	text-align: justify;
	}
@media screen and (max-width: 500px) {
   	 .contentText  {
		padding: 3px;
 		}
	}
#contentBox .kristenLink {
	margin: 5px 0px;
	}
#contentBox .kristenLink a {
	text-decoration: none; /* this takes off the underline */
	}
#contentBox .kristenLink a:hover {
	color: #C129AD;
	}
#contentBox .matthewLink {
	margin: 5px 0px;
	}
#contentBox .matthewLink a {
	text-decoration: none; /* this takes off the underline */
	}
#contentBox .matthewLink a:hover {
	color: #0066CC;
	}
.photoLeft img {
	float: left; 
	width: 400px; 
	margin: 10px 20px;
	padding: 1px;
	border: 1px solid white;
	} 
.photoRight img {
	float: right; 
	width: 400px; 
	margin: 10px 20px;
	padding: 1px;
	border: 1px solid white;
	}
.photoCenter img {
	display: block;
	margin: 10px auto; 
	width: 400px; 
	padding: 1px;
	border: 1px solid white;
	}
@media screen and (max-width: 500px) {
   	 .photoLeft .photoRight img {
		clear: both;
		display: block;
		margin: 5px auto; 
		width: 200px; 
 		}
	}
.clearfix:after {
	 visibility: hidden;
	 display: block;
	 font-size: 0;
	 content: " ";
	 clear: both;
	 height: 0;
	}
.clearfix {
	display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from IE-mac */

/* ---------- CONTACT ICONS ----------- */

.contactIcons {
	padding: 7px 0px;
	text-align: justify;
	color: #ffffff;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: medium;
	}
.contactIcons span {
	height: 24px;
	width: 24px;
	margin: 0px 5px; 
	display: inline-block;
	background-color: #white;
	background-image: url("images/iconsprite.png");
	}
.contactIcons span.kristenPink {
	background-position: 0px 0px;
	}
.contactIcons span:hover.kristenPink {
	background-position: 0px -50px;
	}
.contactIcons span.matthewBlue {
	background-position: -25px 0px;
	}
.contactIcons span:hover.matthewBlue {
	background-position: -25px -25px;
	}
.contactIcons span.facebookBlue {
	background-position: -50px 0px;
	}
.contactIcons span:hover.facebookBlue {
	background-position: -50px -25px;
	}
.contactIcons span.facebookPink {
	background-position: -50px 0px;
	}
.contactIcons span:hover.facebookPink {
	background-position: -50px -50px;
	}
.contactIcons span.googleBlue {
	background-position: -75px 0px;
	}
.contactIcons span:hover.googleBlue {
	background-position: -75px -25px;
	}
.contactIcons span.linkedinBlue {
	background-position: -100px 0px;
	}
.contactIcons span:hover.linkedinBlue {
	background-position: -100px -25px;
	}
.contactIcons span.linkedinPink {
	background-position: -100px 0px;
	}
.contactIcons span:hover.linkedinPink {
	background-position: -100px -50px;
	}
.contactIcons span.blogspotPink {
	background-position: -125px 0px;
	}
.contactIcons span:hover.blogspotPink {
	background-position: -125px -50px;
	}
.contactIcons span.pintrestPink {
	background-position: -150px 0px;
	}
.contactIcons span:hover.pintrestPink {
	background-position: -150px -50px;
	}
.contactIcons span.twitterBlue {
	background-position: -175px 0px;
	}
.contactIcons span:hover.twitterBlue {
	background-position: -175px -25px;
	}
.contactIcons span.youtubeBlue {
	background-position: -200px 0px;
	}
.contactIcons span:hover.youtubeBlue {
	background-position: -200px -25px;
	}
.contactIcons span.picasaBlue {
	background-position: -225px 0px;
	}
.contactIcons span:hover.picasaBlue {
	background-position: -225px -25px;
	}
.contactIcons span.researchgateBlue {
	background-position: -250px 0px;
	}
.contactIcons span:hover.researchgateBlue {
	background-position: -250px -25px;
	}
.contactIcons span.academiaeduBlue {
	background-position: -275px 0px;
	}
.contactIcons span:hover.academiaeduBlue {
	background-position: -275px -25px;
	}

/* ---------- FOOTER STYLING ---------- */
#footer {position: relative;
	margin-top: -80px; /* negative value of footer height */
	height: 80px;
	clear:both;
	} 
#footer a {
	text-decoration: none; /* this takes off the underline */
	}
#footer a:link {
	color: white;
	}
#footer a:visited {
	color: #D0D0D0; 
	}
#footer a:hover {
	color: #0066CC; 
	}
#footer a:active {
	color: #0066CC;
	}
#footerBox {
	padding: 10px;
	background-image: url("images/textbackground2.gif");
	background-repeat: repeat; 
	}
.footerText {
	text-align: center;
	color: #ffffff;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: medium;
	}
.footerPhotoCredit {
	/* display:inline-block; */
	float: left; 
	width: 200px; 
	margin-left: 10px; 
	margin-top: -2em; 
	text-align: center;
	font-family: 'Fira Sans', sans-serif; 
	font-weight: 400;
	color: #ffffff;
	font-size: x-small;
	}
@media screen and (max-width: 500px) {
   	 .footerPhotoCredit {
		text-align: center;
		clear: both;
		width: 100%;
		margin: 0px;
 		}
	}
.footerIcons {
	text-align: center;
	color: #ffffff;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: medium;
	}
.footerIcons span {
	height: 24px;
	width: 24px;
	margin: 0px 5px; 
	display: inline-block;
	background-color: #white;
	background-image: url("images/iconsprite.png");
	}
.footerIcons span.kristenPink {
	background-position: 0px 0px;
	}
.footerIcons span:hover.kristenPink {
	background-position: 0px -50px;
	}
.footerIcons span.matthewBlue {
	background-position: -25px 0px;
	}
.footerIcons span:hover.matthewBlue {
	background-position: -25px -25px;
	}
.footerIcons span.facebookBlue {
	background-position: -50px 0px;
	}
.footerIcons span:hover.facebookBlue {
	background-position: -50px -25px;
	}
.footerIcons span.facebookPink {
	background-position: -50px 0px;
	}
.footerIcons span:hover.facebookPink {
	background-position: -50px -50px;
	}
.footerIcons span.googleBlue {
	background-position: -75px 0px;
	}
.footerIcons span:hover.googleBlue {
	background-position: -75px -25px;
	}
.footerIcons span.linkedinBlue {
	background-position: -100px 0px;
	}
.footerIcons span:hover.linkedinBlue {
	background-position: -100px -25px;
	}
.footerIcons span.linkedinPink {
	background-position: -100px 0px;
	}
.footerIcons span:hover.linkedinPink {
	background-position: -100px -50px;
	}
.footerIcons span.blogspotPink {
	background-position: -125px 0px;
	}
.footerIcons span:hover.blogspotPink {
	background-position: -125px -50px;
	}
.footerIcons span.pintrestPink {
	background-position: -150px 0px;
	}
.footerIcons span:hover.pintrestPink {
	background-position: -150px -50px;
	}
.footerIcons span.twitterBlue {
	background-position: -175px 0px;
	}
.footerIcons span:hover.twitterBlue {
	background-position: -175px -25px;
	}
.footerIcons span.youtubeBlue {
	background-position: -200px 0px;
	}
.footerIcons span:hover.youtubeBlue {
	background-position: -200px -25px;
	}
.footerIcons span.picasaBlue {
	background-position: -225px 0px;
	}
.footerIcons span:hover.picasaBlue {
	background-position: -225px -25px;
	}
.footerIcons span.researchgateBlue {
	background-position: -250px 0px;
	}
.footerIcons span:hover.researchgateBlue {
	background-position: -250px -25px;
	}
.footerIcons span.academiaeduBlue {
	background-position: -275px 0px;
	}
.footerIcons span:hover.academiaeduBlue {
	background-position: -275px -25px;
	}
.footerIcons span.spacer {
	width: 100px;
	background-image: url("images/clear24x24.png");
	}
@media screen and (max-width: 500px) {
   	.footerIcons span.spacer {
		width: 0px;
 		}
	}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}