@import url(http://fonts.googleapis.com/css?family=Merriweather:700,900);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,900);
h1, p {
    margin-bottom: 1.25em;
    /* max-width: 700px; */
}
h5 {
    margin-bottom: 0.00em;
}
h1 {
    font-family: Merriweather;
    font-weight: 900;
}
address { 
    display: block;
    font-style: normal;
    font-size: .83em
    
}
p {
    font-size: 0.8rem;
    line-height: 1.75em;
}
ul {
    font-size: 0.8rem;
    line-height: 1.75em;
    
}
html {
    font-size: 120%;
    line-height: 1.7em;
    text-align: justify;
    text-justify: inter-word;
}
body {
    color: #111;
    font-family: 'Source Sans Pro';
    font-size: inherit;
    font-weight: 400;
    min-height: 1000px;
}
section {
    padding-bottom: 40px;
}

/* a way to add adjust the space between list elements in research, teaching */
#research li{
    margin-bottom: 20px;
}

#teaching li{
    margin-bottom: 1px;
}

/* style the links */

a:link {
    color: #4876ff;
    text-decoration: none;
    font-size: 0.88rem;

}

#contactinfo a:link {
    color: #4876ff;
    text-decoration: none;
}

#contactinfo a .link-color{
    color: #4876ff;
}

#contactinfo a:active,
a:active {
    color: #4876ff;
}
#contactinfo a:visited {
    color: #4876ff;
}

#contactinfo a:hover,
a:hover {
    color: #1561ad;
}

#research a:link {
    color: #4876ff;
    text-decoration: none;
}
#research a .link-color{
    color: #4876ff;
}

#research a:active,
a:active {
    color: #4876ff;
}
#research a:visited {
    color: #4876ff;
}

a:visited {
    color: #4876ff;
}

#research a:hover,
a:hover {
    color: #1561ad;
}

header {
    /* always on top of the page */
    
    position: fixed;
    top: 0px;
    left: 0px;
    /* covers the whole page */
    
    width: 100%;

    background: white;
    z-index: 1;
}
.site-nav {
    /* covers the whole page */
    
    width: 100%;
    /* sizing */
    
    padding-top: 10px;
    height: 60px;
    /* shadows and styling */
    
    background: transparent;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0), 0px 1px 8px 0px rgba(0, 0, 0, 0);
    transition: background-color 220ms ease-in, box-shadow 80ms ease-in;
}
nav ul {
    /* set a width in order to enable centering */
    
    width: 400px;
    /* and center, duh */
    
    margin: 0 auto;
    /* clear native list styles */
    
    list-style: none;
    padding: 0;
}
.site-nav li {
    /* restyle the list  */
    
    display: block;
    float: left;
    height: 100%;
    line-height: 100%;
    margin: 0 0 10px 25px;

}
.site-nav a {
    /* restyle the links  */
    
    border-bottom: 5px solid transparent;
    color: #666;
    display: block;
    font-family: 'Source Sans Pro';
    font-weight: 300;
    font-size: 0.8rem;
    height: 33px;
    line-height: 45px;
    padding: 0 2px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 200ms ease-out;
    outline-width: 0;
}
.sticky .site-nav a {
    color: #888;
}
.site-nav a:focus,
.site-nav a:hover,
.site-nav a.active:focus,
.site-nav a.active:hover,
.site-nav:hover a.active:focus,
.site-nav:hover a.active:hover,
.pages a:focus,
.pages a:hover,
.pages a.current:focus,
.pages a.current:hover {
    border-color: #CF0404;
    border-width: 2px;
    color: #444;
    position: relative;
    top: -1px;
}
.site-nav:hover a {
    color: transparent;
    text-shadow: 0 0 0px rgba(0, 0, 0, .7);
}
.site-nav:hover a:focus,
.site-nav:hover a:hover,
.site-nav:hover a.active,
.site-nav:hover a.active:focus,
.site-nav:hover a.active:hover {
    color: #1561ad;
    text-shadow: none;
}
.site-nav:hover a.active {
    color: transparent;
    text-shadow: 0 0 0px rgba(0, 0, 0, .7);
}
.site-nav a.active,
.pages a.current {
    border-color: #333;
    border-width: 2px;
    color: #444;
    font-weight: 400;
}
.site-nav a:active,
.site-nav a.active:active,
.pages a:active,
.pages a.current:active {
    border-color: #CF0404;
    border-width: 4px;
    top: 1px;
}
.sticky .site-nav {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.1), 0px 1px 8px 0px rgba(0, 0, 0, .6);
    z-index: 1000;
}
.site-nav li.search-trigger-container {
    float: right;
}
.content {
    min-height: 2540px;
    padding-top: 60px;
    width: 700px;
    margin: 0px auto;
}
#contactdetails {
    display: block;
}
#contactdetails .fa {
    width: 20px;
}


.overlay {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+36,ffffff+100&0.55+0,1+36,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.55) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.55) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.55) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    bottom:0;
    left: 0;
    position: absolute;
    right:0;
    top:0;
    z-index: 1;
}
.semihiddendiv{
    position:relative;
}
.semihiddendiv p {
    overflow: hidden;
    max-height: 50px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.toggleDiv{
    cursor: pointer;
}

#avatar {
    display: inline-block;
    text-align: center;
    margin: 20px;
}
#contactinfo {
    display: inline-block;
}

#home {
    width: 450px;
    margin-left: 0;
}

.site-header{
    display: none;
}

    #home {
        width: 100%;

    }

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



    #avatar {
        width: 100%;
        margin: 0 auto;
        display: block;
    }

    .content {
        width: 300px;
    }

}

@media screen and (min-width: 621px) {
    .content {
        width: 550px;
    }
}

@media screen and (min-width: 1023px) {

    .site-nav ul {
        position: relative;
          left: 120px;  
    }

    .site-header{
        display: block;
    }

    #homelink{
        display: none;
    }

	.site-nav a { 
		font-size: 1.05rem;
		font-weight: 200;
		height: 43px;
	}
	.site-nav li {
		
		margin: 0 0 10px 40px;

	}
	
	nav ul {		
		/* set a width in order to enable centering */
		width: 570px;
	}
	
	.content {
		min-height: 1540px;
        padding-top: 90px;
        width: 1210px;
        margin: 0 auto;
        position: relative;
        left: 120px; 
    }

    #home {
        position: fixed;
        left: 50%;
        float: none;
        width: 320px;
        margin: 0px auto;
    }

    #contactdetails {
        width: 280px;
        position: relative;
        right: 500px;        
    }

    #home #avatar {
        display: block;
    }

    #home #avatar {
        padding-bottom: 10px;
    }

    #largescreencontainer{
        /* margin-left: 320px; */
        margin: 0 auto;
        width: 640px;
    }
}

@media screen and (min-width: 1130px) {
    .content {
        left: 100px; 
    }

    #contactdetails {
        right: 530px;        
    }

    #home {
        margin-left: 0px;
        margin-right: 40px;
    }

    .site-nav ul {
          left: 100px;  
    }
}


@media screen and (min-width: 1220px) {
    .content {
        left: 60px; 
    }

    #contactdetails {
        right: 570px;        
    }

    .site-nav ul {
          left: 30px;  
    }
}

@media screen and (min-width: 1280px) {
    .content {
        left: 45px; 
    }

    #contactdetails {
        right: 595px;        
    }

    .site-nav ul {
          left: 20px;  
    }
}

@media screen and (min-width: 1380px) {
    .content {
        left: 30px; 
    }

    #contactdetails {
        right: 620px;        
    }
}

@media screen and (min-width: 1430px) {
    .content {
        left: 0px; 
    }

    #contactdetails {
        right: 650px;        
    }

    .site-nav ul {
          left: 0px;  
    }
}

@media screen and (min-width: 1500px) {

    #home {
        position: fixed;
        left: 50%;
        float: none;
        width: 450px;
    }

    #contactdetails {
        width: 280px;
        position: relative;
        right: 750px;
    }

    #largescreencontainer{
         /* margin-left: 400px;  */
        float: none;
        margin: 0 auto;

    }
    
    .content {
        margin-left: 0px;
        margin: 0 auto;
        left: 0px;
    }

    .site-nav ul {
        position: relative;
        left: -135px; 
    }

}


/* @media screen and (min-width: 1450px) {

}

@media screen and (min-width: 1750px) {

} */