/*
AUTHOR: JEREMY MANNING
DATE:   JULY 19, 2013 (REVISED SEPTEMBER 29, 2013)
*/

.header, .main, .main-submenu, .footer{
	font-family: 'Karla', sans-serif;
	font-size: medium;
}

.header{
	width: 100%;
	position: fixed;
	z-index: 100;
	background-color: #FFF;
	box-shadow: 0 0 3em 0 #000;
	display: inline-block;
}

.banner{
	clear: both;
	background-color: #E0E0E0;
	overflow: hidden;
	height: 2.5em;
}

.banner a:hover{
	color: #666;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.banner-item{
	font-size: larger;
	color: #333;
	float: left;
	padding-right: 2%;
	padding-left: 2%;
	padding-top: .5em;
	height: 2.5em !important;
}

.banner-item a{
	text-decoration: none;
	color: #333;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.menu{
	clear: both;
	background-color: #333;
	overflow: hidden;
	height: 2.5em;
	font-size: smaller;
}

.menu-item#selected-menu-item{
	background-color: #666;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.menu-item, .menu-item a{
	text-decoration: none !important;
	color: #CCC;
	float: left;
	padding-right: 2%;
	padding-left: 2%;
	padding-top: .35em;
	height: 2.5em !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.menu-item:hover{
	background-color: #999 !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.menu-item:hover a{
	color: #666 !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.sub-menu{
	clear: both;
	background-color: #666;
	overflow: hidden;
	height: 2em;
	font-size: small;
}

.sub-menu-item, .subj-menu-item a{
	float: left;
	padding-right: 1%;
	padding-left: 1%;
	padding-top: .5em;
	height: 2em !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.sub-menu-item a{
	color: #CCC !important;
	text-decoration: none !important;
}

.sub-menu-item:hover{
	background-color: #999 !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.sub-menu-item:hover a{
	color: #666 !important;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.main{
	clear: both;
	width: 96%;
	max-width: 800px;
	z-index: 50;
	margin-left: auto;
	margin-right: auto;
	padding-top: 6em;
	padding-bottom: 2em;
	display: table;
	table-layout: auto;
}

.main-submenu{
	clear: both;
	width: 96%;
	max-width: 800px;
	z-index: 50;
	margin-left: auto;
	margin-right: auto;
	padding-top: 8em;
	padding-bottom: 2em;
	display: table;
	table-layout: auto;
}

.main-submenu + .main{
	margin-top: -8em;
}

.article-container{
	clear: both;
	vertical-align: top;
	display: table-row;
	width: 100%;
}

.article-no-figure{
	width: 100%;
	display: table-cell;
}

.article{
	width: 75%;
	display: table-cell;
	vertical-align: middle;
}



.article a, .article-no-figure a{
	text-decoration: none;
	color: rgba(0, 158, 184, 1); /*#666; */
	-webkit-transition: all 0.5s ease-in-out;
  	-moz-transition: all 0.5s ease-in-out;
  	-ms-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out;
}

.article a:hover, .article a:focus, .article a:active, .article-no-figure a:hover, .article-no-figure a:focus, .article-no-figure a:active{
	text-decoration: underline;
	-webkit-transition: all 0.5s ease-in-out;
  	-moz-transition: all 0.5s ease-in-out;
  	-ms-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out;
}

h1, h2{
	font-size: larger;
	font-weight: bolder;
	padding: 2%;
	position: relative;
}

h2{
	font-size: large;
}

h1 span, h2 span{
	position: absolute;
	top: -6em;
}

p{
	text-align: justify;
	padding: 2%;
}

i, em{
	font-style: italic;
}

.figure{
	display: table-cell;
	padding: 5%;
	vertical-align: top;
	margin-left: auto;
	margin-right: auto;
}

.figure img{
	width: 99%;
	display: table-cell;
}

.figure img#me{
	box-shadow: 0 0 1em 0 #000;
}

.pubs-list{
	display: block;
	clear: both;
	list-style: decimal;
	width: 100%;
	padding-bottom: 5%;
	text-align: justify;
}

.activity .pubs-list{
	margin-top: 2%;
	margin-bottom: -5%;
	font-size: smaller;
}

.pub{
	clear: both;
	margin-top: 2%;
	margin-left: 4%;
}

.pub:first-child{
	margin-top: -0.5%;
}

.activity-list{
	display: block;
	background-color: #FFF;
	clear: both;
	list-style: disc;
	width: 100%;
	padding-bottom: 5%;
	text-align: justify;
}

.activity{
	clear: both;
	margin-top: 2%;
	margin-left: 4%;
}

.activity:first-child{
	margin-top: -0.5%;
}

.footer{
	clear: both;
	width: 100%;
	height: 2em !important;
	padding-top: 1em;
	padding-left: 5%;
	font-size: x-small;
	z-index: 75;
	position: fixed;
	bottom: 0;
	background-color: #FFF;
	box-shadow: 0 0 3em 0 #000;
}

#chromefix {
  -webkit-transform: perspective(1); /* Chrome 12/13/14 flicker fix. */
}