/* GLOBAL */
{
	margin: 0;
	padding: 0;
}

.bbox {
  border: dashed 1px black;
}

body {
	/* choose overall font - go to www.typetester.org to test sizes and see the list of safe fonts - If the user doesnt have the first one, it try the second, and goes along the list until it finds a font that the computer has installed */
	font-family: Roboto, AlteDIN, Breuer, Helvetica, Arial, Sans-Serif;
	font-weight: 400;
	color:            #333333; /* sets the color of all type in the website except for links and other sections overwritten */
	background-color: #ffffff; /* sets the overall background color */
	-webkit-text-size-adjust: 110%;
}

strong {
	font-weight: 500;
}

h2 {
	font-weight: 500;
}

/* LINKS */
a:link {
text-decoration: none; /* none = no underline, other options include line-through or overline */
color: #108ec2; /* sets hex color of every link - www.colorpicker.com or photoshop to find hex values */
}

a:active {
text-decoration: none;
}

a:visited { /* highlights links that you have already clicked. This can be helpful for users to identify which items they have already seen*/
text-decoration: none;
/* this changes the background of a visited link, you can also get rid of the the back ground an color and there will be no change if a link has been visited */
color: #108ec2;
/*color: #608090;*/
}

/* sets the properties for links when mouse rolls over */
a:hover {
text-decoration: none;
color: #48babf;
}

/* any img that is a link */
a img {
border: none;
}

.button {
	/*margin:  1em;*/
	padding: 0.5em;
  text-align: center;
  background-color: #EEE;
  border-radius: 7%;
  color: #108ec2;
}

.button:hover {
	color: #48babf;
	cursor: pointer;
}

.photo-frame {
  display: inline-block;
  margin: 1em;
  /*padding: 0.5em;*/
  background-color: #FAFAFA;
  border-width: 1px;
  border-style: solid;
  border-color: #ffeccd;
  border-radius: 0.25em;
}

.photo-frame img {
  max-width: 100%;
  max-height: 100%;
  border-radius:0.25em;
}

.photo-frame p {
  word-wrap: break-word;
  padding: 0.5em;
  text-align: justify;
  margin-top: 0;
  margin-bottom: 0;
}

.upper-left {
  position: absolute;
  left:     0;
  top:      0;
  z-index:  1;
}

/* MENU */
#menu {
	position: fixed;
	width:  25%;
	height: 100%;
	overflow: auto;
	top:    0;
	bottom: 0;
	left:   0;
	font-size: 10pt;
	padding-top:    1em;
	padding-bottom: 1em;
	margin-left: -1px;
	background-color: #FFFFFF;
	border-right-color: #ccc;
	border-right-style: dashed;
	border-right-width: 1px;
}

/* This section controls each section made */
#menu ul {
	list-style: none;
	margin-top:    0;
	margin-right:  0;
	margin-bottom: 0.4em; /* sets the space between each section */
	margin-left:   0;
	margin-right:  0;
	/* sets the spacing around the menu - this is normally set to match padding options in #content but can be changed seperately */
	padding-right: 1.0em;
	padding-left:  1.5em;
	text-align:    right;
	line-height:   1.5em;
}

/* The following sets the style for the section heading */
#menu ul .section-title {
	font-style: normal;
	font-weight: 300;
	font-size:   13pt;
	padding-top:    0.50em;
	padding-bottom: 0.25em;
	padding-left:   0;
	padding-right:  0;
	color:          #666;
	/* Following lines adds a line about each section */
	border-top-color: #ccc;
	border-top-style: solid;
	border-top-width: 1px;
}

@media not screen
  and (max-device-width: 50em) {

#menu ul .sub-title {
	margin-top:    0;
	margin-bottom: 0;
	font-style:    normal;
	font-weight:   300;
	font-size:     10pt;
	padding-top:    1em;
	padding-right:  0;
	padding-bottom: 1em;
	padding-left:   1em;
	text-decoration: none;
	color:          #666;
	float:          right;
}

}

@media only screen
  and (max-device-width: 50em) {

  #menu ul .sub-title {
  	margin-top:     0;
  	margin-bottom:  0;
  	font-style:     normal;
  	font-weight:    300;
  	font-size:      10pt;
  	padding-top:    0.25em;
  	padding-right:  0;
  	padding-bottom: 0.25em;
  	padding-left:   0;
  	text-decoration: none;
  	color: #666666;
  }
}

#menu #contact, #name, #position {
	font-size:     10pt;
	font-weight:   300;
	padding-left:  1em;
	padding-right: 12px;
	margin:        0;
	margin-bottom: 1.5em;
	line-height:   1.5em;
	text-align:    right;
}

#menu #name {
	font-size:     16pt;
	font-weight:   500;
	line-height:   1.5em;
	margin-bottom: 0;
}

#menu #position {
	font-size:     16pt;
	line-height:   1.5em;
	margin-bottom: 0.5em;
}

#DISABLE {
#menu ul li a:link {
	text-decoration: none; /* none = no underline, other options include line-through or overline */
	color: #666666; /* sets hex color of every link - www.colorpicker.com or photoshop to find hex values */
}
}

#intro  {
	/* sets the spacing around the menu - this is normally set to match padding options in #content but can be changed seperately */
	font-size:     11pt;
	padding-right: 12px;
	padding-left:  1.0em;
	line-height:   1.5em;
	text-align:    justify;
}

#content {
	position: absolute;
	height: 100%;
	width: 75%;
	margin: 0;
	top: 0;
	left: 25%;
    /* sets the spacing around the content area - this is normally set to match padding options in #menu but can be changed seperately */
	padding-top:   0px;  /* change to match the padding-top in #menu if you want them to align */
	padding-right: 0px;
	padding-bottom:0px;
	padding-left:  0px;
}

#content table {
	font-weight: 400;
}
/*
#content div {
	width: 47%;
	height: 47%;
	float: left;
	padding-top:    1%;
	padding-right:  1%;
	padding-bottom: 1%;
	padding-left:   1%;
	margin-left:    0%;
}*/

#content div.hline {
	width: 100%;
	height: 0%;
	float: left;
	margin: -1px;
	padding: 0;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	background-color: none;
}

#content div.vline {
	width: 0%;
	height: 50%;
	float: left;
	margin-left: 0%;
	margin-right: 0%;
	padding-top:    0%;
	padding-right:  0%;
	padding-bottom: 0%;
	padding-left:   0%;
	border-left-color: #ccc;
	border-left-style: dashed;
	border-left-width: 1px;
	background-color: none;
}

#content .vitae {
	width: 98%;
	font-size: 11pt;
	line-height: 2.0em;
	padding-bottom: 0;
	padding-top: 0;
	padding-left: 2%;
	padding-right: 0;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	overflow: auto; /* this cause publication font to be too large on mobile*/
}

#content .vitae ul {
	padding-left: 1%;
}

#content .pub {
	width: 98%;
	font-size:      11pt;
	line-height:    1.25em;
	padding-bottom: 1.0em;
	padding-top:    0;
	padding-left:   2%;
	padding-right:  0;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
}

#content .research {
	width: 98%;
	font-size:      11pt;
	line-height:    1.4em;
	padding-bottom: 0;
	padding-top:    0;
	padding-left:   2%;
	padding-right:  0;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
}

.software-grid {
	width:          90%;
  padding-left:   2%;
  padding-right:  7%;
  padding-bottom: 1em;
	float: left;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
}

.software-grid p, .software-grid h2 {
  padding-left:   1em;
  padding-right:  1em;
  padding-top:    0.25em;
  padding-bottom: 0.25em;
}

.software-grid .background {
  bottom: 0;
  max-width:  80%;
  max-height: 50%;
  margin: auto;
  display: block;
}

.icon {
  vertical-align: middle;
  transform: translate(0,-0.2em);
}

#content .tutorial-grid {
	width: 96%;
	font-size:      11pt;
  padding-left:   2%;
  padding-right:  2%;
  padding-bottom: 1em;
	float: left;
	border-bottom-color: #ccc;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
}

#content .tutorial-grid img {
  float:         right;
  width:         40%;
  min-width:     480px;
  margin-left:   1em;
  margin-bottom: 1em;
}

.courseware {
  border-collapse: collapse;
  margin: 0.5em;
  padding-left: 0;
  margin-left: 0;
  line-height: 1.4em;
  border: 1px solid dashed;

}
.courseware td {
  padding-left: 0;
  padding-right: 1em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  vertical-align: top;
  /*border-bottom-color: #F0F0F0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top-color: #F0F0F0;
  border-top-width: 1px;
  border-top-style: solid;*/
}

.pdf-player {
  display: none;
  /*position: relative;
  padding-top: 56.25%;*/
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.pdf-player object {
  display: block;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}

.research .photo-frame {
  float: left;
  margin-left: 0;
}