/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}


/* General
***********************/
body {
	background-color: #333; 
	font-size: 14px; 
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	-webkit-font-smoothing: antialiased; 
	text-rendering: optimizeLegibility;
	height: auto;
}
a:link, a:visited, a:hover, a:active { color: #333; text-decoration: none; }
a:hover { color: #369; }
p {font-size: 14px; line-height: 18px;}
#copyright { margin: 3em 0 1em 0; font-size: .75em; color: #777; }


#slider {margin: 0 !important; margin-bottom: .75em !important;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}


/* Layout
***********************/
#wrapper { padding: 2em; }
#container { position: relative; background-color: #fff; padding: .75em;}
#information { position: relative; width: 250px; float: left; min-height: 530px;}
#informative { position: relative; width: 250px; float: left; min-height: 530px;}
#arrow {
	position: absolute;
	top: 40px;
	left: 250px;
	z-index: 1000;
	width: 0; 
	height: 0; 
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid #333;
}
#captions {	
	background-color: #333; 
	margin-bottom: 1em; 
	width: 100%;
	min-height: 100px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#captions p {
	color: #fff;
	padding: 1em;
	text-align: right;
}
h1#annschwab {
	position: absolute;
	left: 0; 
	bottom: 1px; 
	width: 261px;
	height: 110px; 
	border: .75em solid #fff;
	border-top-width: 0em;
	border-right-width: 0em;
	background-color: #222; 
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
h1#annschwab-alt {
	position: absolute;
	left: 0; 
	top: 10px; 
	width: 261px;
	height: 100px; 
	border: .75em solid #fff;
	border-top-width: 0em;
	border-right-width: 0em;
	background-color: #222; 
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
h1#annschwab span, h1#annschwab-alt span { display: none; }
#main {margin-left: 250px; overflow: hidden;}
#captions a.flex-next, #captions a.flex-prev {
   display:none;
}

#main h2 {
	font-size: 26px;
	font-weight: normal;
	margin: 0 20px 15px 30px;
	padding: 30px 0 10px 0;
	text-align: right;
	color: #999;
	border-bottom: 1px solid #369;
}
#main h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 15px 20px 10px 27px;
	color: #369;	
}
#main h4 {
	padding: 0 20px 40px 30px;
	font-size: 14px;
	line-height: 150%;
	font-weight: normal;
	font-style: italic;
	color: #666;
}
#main h5 {
	padding: 10px 20px 5px 30px;
	font-size: 13px;
	line-height: 150%;
	font-weight: normal;
}
#main p {
	padding: 0 1.75em 1em 1.75em;
	font-size: 16px;
	line-height: 150%;	
}

/* utility
***********************/
#informative .slider {
	
}
.item {
	display: block;
	clear: both;
	margin-bottom: 2em;
}
.bio { float: right; margin: 20px; }
.flol { float: left; margin: 0 20px 20px 0; }
.flor { float: right; margin: 0 0 20px 20px; }

/* responsive images
***********************/
.fill { max-width: 100%; height: auto; }

/* sitenav
***********************/
#sitenav {clear: both; width: 250px; text-align: center; position: absolute; top: 130px; z-index: 1000;}
#sitenav .of-site { margin-top: 2em; }
#sitenav li {margin: 0; font-size: 18px; line-height: 140%; text-transform: lowercase;}
#sitenav li.selected a:link, #sitenav li.selected a:visited, #sitenav li.selected a:hover, #sitenav li.selected a:active { color: #999; text-decoration: none; }

/* clearfix */
.clear:before,
.clear:after {content:""; display:table;}
.clear:after {clear:both;}
.clear {zoom:1;}

/* media queries
***********************/

@media screen and (max-width: 768px) {
  #information {width: 100%; float: none; text-align: center; min-height: 210px;}
  #informative {width: 100%; float: none; text-align: center; min-height: 100px;}
  h1#annschwab, h1#annschwab-alt { width: 100%; border-right-width: .75em; top: 10px;}
  #captions { position: absolute; top: 110px; }
  #informative #captions, #informative #arrow {
	display: none;
	}
  #sitenav {
	position: absolute;
	left: 0;
	top: auto;
	bottom: 0;
	width: 100%;
	}
  #main {margin-left: 0; padding-bottom: 320px;}

	#arrow {
	position: absolute;
	top: 210px;
	left: 93%;
	z-index: 100000;
	width: 0; 
	height: 0;
	border-bottom: none;
	border-top: 10px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	}

}