/*--------------------------------------------------------------------------
	General Style
--------------------------------------------------------------------------*/
body {
	background: #FFF;
}

.theme_homeblue										{ background: #1097ff; }
.theme_homeblue:hover								{ background: #79c5ff; }
.theme_blue, 			.theme_blue_nohov			{ background: #3977a7; }
.theme_blue:hover,	 	.theme_blue_light_nohov		{ background: #5894C2; }
.theme_orange, 			.theme_orange_nohov			{ background: #FF9200; }
.theme_orange:hover,	.theme_orange_light_nohov	{ background: #FFC270; }
.theme_red,				.theme_red_nohov			{ background: #E54475; }
.theme_red:hover,		.theme_red_light_nohov		{ background: #F488A9; }
.theme_purple,			.theme_purple_nohov			{ background: #A90DFF; }
.theme_purple:hover,	.theme_purple_light_nohov 	{ background: #CF78FF; }
.theme_green,			.theme_green_nohov			{ background: #8CE444; }
.theme_green:hover, 	.theme_green_light_nohov	{ background: #B9F088; }

.body_landing		{ background:         #1097ff; }

.body_blue		{ background:         #5894C2; }
.body_orange	{ background:         #FFC270; }
.body_red		{ background:         #F488A9; }
.body_purple	{ background:         #CF78FF; }
.body_green		{ background:         #8CE444; }
					  
					  
/* blockquote colors */
.bq_blue:before,   .bq_blue:after	{ color:              #80B3DA; }
.bq_blue							{ background:         #f0f9f9;
					  				  border-left-color:  #b2d4ef; }
.bq_orange:before, .bq_orange:after	{ color:              #FFBF6B; }
.bq_orange							{ background:         #f9f9f0;
					  				  border-left-color:  #FFCF8F; }
.bq_red:before,    .bq_red:after	{ color:              #ED63AD; }
.bq_red								{ background:         #FEF3F3;
					  				  border-left-color:  #F488A9; }
.bq_purple:before, .bq_purple:after	{ color:              #CA9CF6; }
.bq_purple							{ background:         #F6F0FA;
					  				  border-left-color:  #D2B4F0; }
.bq_green:before,  .bq_green:after	{ color:              #A1EC63; }
.bq_green							{ background:         #f0FEE5;
					  				  border-left-color:  #B9F488; }

					  				  					  				  
img { -ms-interpolation-mode: bicubic; }


/*--------------------------------------------------------------------------
	Typography Style
--------------------------------------------------------------------------*/
body {
	display: block;
	width: 100%;
	min-height: 100%;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	color: #000000;
}

h1 {
	display: inline;
	color: #FFFFFF;
	font-family: 'Arvo', Courier, monospace;
	font-size: 4em;
	line-height: 1.3em;
	font-weight: 400;
}

h2 {
	display: inline;
	color: #FFFFFF;
	font-family: 'Arvo', Courier, monospace;
	font-size: 1.75em;
	line-height: 100%;
	font-weight: 400;
	padding-left: 1%;
	padding-right: 1%;
}

a {
	font-size: 1em;
	line-height: 1.3em;
}

a, a:visited { text-decoration: none; }
a:hover, a:active, a:focus  { text-decoration: underline; }

a { color: #999; }
a:visited { color: #666; }


p, li {
	font-size: 1.2em;
	line-height: 1.5em;
}

cite {
  font-style: italic;
  padding: 0 0 0 3.5rem;
}

blockquote {
  display: block;
  position: relative;
  font-size: 1em;
  line-height: 1.2em;
  border-width: 0;
  border-left-width: .65em;
  border-left-style: solid;
  margin: .6em 1.5em;
  padding: 1.5em 4em 1.5em 4em;
  quotes: "\201C""\201D""\2018""\2019";
  overflow: hidden;
}

blockquote:before {
  content: open-quote;
  font-size: 4em;
  position: absolute;
  top: .5em;
  left: .25em;
}

blockquote:after {
  content: close-quote;
  font-size: 4em;
  position: absolute;
  bottom: 0em;
  right: .3em;
}

blockquote p {
  display: inline;
}


/* For width 600px and smaller: */
@media only screen and (max-width: 600px) {
	h1, blockquote:before, blockquote:after { font-size: 3em; }
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	h1, blockquote:before, blockquote:after  { font-size: 2.5em; }
	h2  { font-size: 1em; }
	p,a,li { font-size: 1em;
		line-height: 1.3em;}
}

/* show full links in printed version */
@media print {
	a[href]:after { " (" attr(href) ") "; }
}

/*--------------------------------------------------------------------------
	General Subpage Style
--------------------------------------------------------------------------*/
.subpage {  /* see bottom of section for screen sizing on .subpage */
	position: relative;
	width: 100%;
	min-height: 100%;
	height: 100vh;
	border: none;
	margin: none;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.subpage_container {
	position: relative;
    background: transparent;
    height: 100%;
	min-height: 100%;
    width: 100%;
    margin: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.border_row {
	height: 10px;
    background: transparent;
}

.content_container {
	align: left;
	vertical-align: top;
	background: white;
	-webkit-box-shadow: 0 4px 12px #00000099;
    -ms-box-shadow: 	0 4px 12px #00000099;
    box-shadow: 		0 4px 12px #00000099;
}

.content_area {
	width: 100%;
	padding: 3%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#subpage_content {
	width: 100%;
	padding-top: 3%;
}

#page_menu_button {
	float: right;
	width: 1em;
	min-width: 50px;
	height: 1em;
	min-height: 50px;
	background-image: url("../images/menu.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#page_menu_button .menu_orange 	{ height: 100%; width: 100%; background-image: url("../images/menu_orange.svg"); background-size: 100% 100%; background-repeat: cover;}
#page_menu_button .menu_blue	{ height: 100%; width: 100%; background-image: url("../images/menu_blue.svg");	 background-size: 100% 100%; background-repeat: cover;}
#page_menu_button .menu_purple 	{ height: 100%; width: 100%; background-image: url("../images/menu_purple.svg"); background-size: 100% 100%; background-repeat: cover;}
#page_menu_button .menu_red		{ height: 100%; width: 100%; background-image: url("../images/menu_red.svg");    background-size: 100% 100%; background-repeat: cover;}
#page_menu_button .menu_green	{ height: 100%; width: 100%; background-image: url("../images/menu_green.svg");  background-size: 100% 100%; background-repeat: cover;}

#menu_cover { /* click anywhere to fold up menu */
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	visibility:hidden;
}

#menu {
	position: fixed;
	display: block;
	visibility: hidden;
	top: 0;
	right: 0;
	margin-right: 20px;
	margin-top: 20px;
	width: 14em;
	background: #1097ff;
	font-family: 'Arvo', serif;
	color: #CCCCCC;
	overflow: hidden;
	-webkit-box-shadow: 0 10px 30px #00000099;
    -ms-box-shadow: 	0 10px 30px #00000099;
    box-shadow: 		0 10px 30px #00000099;
}

#menu x, #menu a, #menu a:visited, #menu a:hover, #menu a:active {
	width: 100%;
	display: block;
	line-height: 130%;
	font-weight: 400;
	text-decoration: none;
}

#menu a, #menu a:visited, #menu a:hover, #menu a:active { color: #FFFFFF;}

#menu div, span {
	width: 84%;
	display: block;
	font-size: 2em;
	padding: 8%;
	text-align: center;
}

.title a,
.title a:hover,
.title a:active,
.title a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	.subpage_header { position: fixed; width: 87%; background: #FFFFFF; top: 0; left: 0; margin: 10px; padding: 3%;}
	.subpage_content { padding-top: 4em;}
}

@media only screen and (min-width: 401px) {
	.subpage {
		padding-left:   	15px;
		padding-right:  	15px; }
	.border_row { height: 	15px; }
	.content_container {
		-webkit-box-shadow: 0 5px 15px #00000099;
		-ms-box-shadow: 	0 5px 15px #00000099;
		box-shadow: 		0 5px 15px #00000099;}
	#menu { margin-right: 25px; margin-top: 25px; position: absolute;}
}

@media only screen and (min-width: 501px) {
	.subpage {
		padding-left:   	20px;
		padding-right:  	20px; }
	.border_row { height: 	20px; }
	.content_container {
		-webkit-box-shadow: 0 8px 25px #00000099;
		-ms-box-shadow: 	0 8px 25px #00000099;
		box-shadow: 		0 8px 25px #00000099;}
	#menu { margin-right: 30px; margin-top: 30px; }
}

@media only screen and (min-width: 601px) {
	.subpage {
		padding-left:   	25px;
		padding-right:  	25px; }
	.border_row { height: 	25px; }
	.content_container {
		-webkit-box-shadow: 0 10px 30px #00000099;
		-ms-box-shadow: 	0 10px 30px #00000099;
		box-shadow: 		0 10px 30px #00000099;}
	#menu { margin-right: 40px; margin-top: 40px; }
}

@media only screen and (min-width: 801px) {
	.subpage {
		padding-left:   	30px;
		padding-right:  	30px; }
	.border_row { height: 	30px; }
	.content_container {
		-webkit-box-shadow: 0 10px 30px #00000099;
		-ms-box-shadow: 	0 10px 30px #00000099;
		box-shadow: 		0 10px 30px #00000099;}
	#menu { margin-right: 50px; margin-top: 50px; }
}

/*--------------------------------------------------------------------------
	Landing
--------------------------------------------------------------------------*/

#landing_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* For width 400px and larger: */
@media only screen and (min-width: 401px) {
	#landing_wrapper {
		background-image: url("../images/background.png");
		background-position: top;
		background-size: cover;
	}
}

.landing {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
}

/*--------------------------------------------------------------------------
		Landing Header
--------------------------------------------------------------------------*/
.landing_header {
	margin-left: 2%;
	margin-top: 1%;
	width: 50%;
}

.landing_header > h1 {
	display: inline;
	background-image: url("../images/100dark.png");
	line-height: 130%;
	margin-bottom:0;
	margin-top: px;
}

.landing_header > h2 {
	display: inline;
	background-image: url("../images/100dark.png");
	line-height: 140%;
	margin-bottom:0;
	margin-top: 5px;
} 

/* For width 400px and smaller: */
@media only screen and (max-width: 600px) {
	.landing_header > h1 { font-size: 3.5em; }
	.landing_header > h2 { font-size: 1.3em; }
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	.landing_header {
		margin-left: 2%;
		margin-top: 1%;
		margin-bottom: 3%;
		width: 98%; }
	.landing_header > h1 { font-size: 3em; }
	.landing_header > h2 { font-size: 1.5em; }
}

/*--------------------------------------------------------------------------
		Landing - Square Tiles Style
--------------------------------------------------------------------------*/

.tile_column { width: 67%; }

.square_tile {
	position: relative;
	float: left;
	white-space: nowrap;
	overflow: hidden;
	background: #3977a7;
	margin: 3%;
	width: 30%;
	font-family: 'Arvo', serif;
	text-align: center;
	color: #ffffff;
}

.square_tile .sq_bkrd {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

@media only screen and (min-width: 401px) {
	/* order is tied to the image */
	.square_tile .sq_bkrd .about	{ height: 100%; width: 100%; background: url('../images/tiles_all.png')   0%   0%; background: url('../images/tiles_all.svg')   0%   0%, none; background-size: 200%}
	.square_tile .sq_bkrd .blog		{ height: 100%; width: 100%; background: url('../images/tiles_all.png')   0%  25%; background: url('../images/tiles_all.svg')   0%  25%, none; background-size: 200%}
	.square_tile .sq_bkrd .CV		{ height: 100%; width: 100%; background: url('../images/tiles_all.png')   0%  50%; background: url('../images/tiles_all.svg')   0%  50%, none; background-size: 200%}
	.square_tile .sq_bkrd .teaching { height: 100%; width: 100%; background: url('../images/tiles_all.png')   0%  75%; background: url('../images/tiles_all.svg')   0%  75%, none; background-size: 200%}
	.square_tile .sq_bkrd .writing	{ height: 100%; width: 100%; background: url('../images/tiles_all.png')   0% 100%; background: url('../images/tiles_all.svg')   0% 100%, none; background-size: 200%}
	.square_tile .sq_bkrd .projects { height: 100%; width: 100%; background: url('../images/tiles_all.png') 100%   0%; background: url('../images/tiles_all.svg') 100%   0%, none; background-size: 200%}
	.square_tile .sq_bkrd .misc 	{ height: 100%; width: 100%; background: url('../images/tiles_all.png') 100%  25%; background: url('../images/tiles_all.svg') 100%  25%, none; background-size: 200%}
	.inner_text { display: none; }
}

.square_tile a,
.square_tile a:hover,
.square_tile a:active,
.square_tile a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

.square_tile:before {
	content: '';
	display: block;
	padding-top: 100%;
	vertical-align: middle;
}

.inner_text {
	position: absolute;
	top: 45%;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 3em;
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	.tile_column { width: 100%; }
	.square_tile {
		width: 100%;
		margin: 0; }
	.square_tile:before { padding-top: 25%;	}
}

@media only screen and (min-width:401px) and (max-width: 640px) {
	.tile_column { width: 85%; }
}

/* For width 1500px and larger: */
@media only screen and (min-width: 1500px) {
	.square_tile { width: 20%;}
}



/*--------------------------------------------------------------------------
		Subpage - Square Tiles Style
--------------------------------------------------------------------------*/

.tile_holder {
	position: relative;
	display: block;
	float: left;
	white-space: normal;
	margin: 2%;
	width: 45%;
	max-width: 450px;
	color: #000000;
}

.tile_holder h3 {
	margin: 0.25em 0 1em 0;
}

#subpage_content .square_tile {
	background: #eeeeee;
	width: 50%;
	margin: 0 5% 5% 0;
	color: #000000;
	border: 1px solid #999999;
}

#subpage_content .square_tile:hover,
#subpage_content .square_tile:active {
	opacity: 0.5;
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	#subpage_content .square_tile {
		width: 100%;
		margin: 0;
		padding-top:75%}
	#supbpage_content .square_tile:before { }
}


/*--------------------------------------------------------------------------
	Subpage Content
--------------------------------------------------------------------------*/
#subpage_content .main_picture {
	float: right;
	clear: right;
	padding-top: 1.3em;
	padding-left: 5%;
	padding-bottom: 2%;
	width: 40%;
}

#subpage_content .main_picture.wide {
	width: 50%;
}
	
#subpage_content .main_picture img{
	width: 100%;
	height: auto;
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
	#subpage_content .main_picture {	
		padding-bottom: 5%;
		width: 100%;		
	}
}

/* For width 700px and smaller: */
@media only screen and (max-width: 700px) {
	#subpage_content .main_picture.wide {	
		padding-bottom: 5%;
		width: 100%;		
	}
}

.indent {
	display: block;
	position: relative;
	padding: 0 1.5em;
}