html,body{margin:0;padding:0;position:relative;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1;}
.sans-serif{font-family:"ff-tisa-web-pro" ,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.serif{font-family:"rooney-web", Cambria, Georgia, Times, "Times New Roman";}
.monospace{font-family:"Monaco",Courier New,monospace;}
.clearfix{zoom:1;}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}
.clearfix:after{clear:both;}
html{overflow-y:scroll;background:#fbf9f8; font-size:62.5%;}
body{margin:0 auto;padding:0;font-size:16px;font-size:1.6rem;font-family: Verdana, sans-serif;color:#282828;background-color:transparent;}
button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#404040;}
h1,h2,h3,h4,h5,h6{font-family: "ff-tisa-web-pro" ,"Helvetica Neue" ,Helvetica,Arial,sans-serif;font-weight:normal;letter-spacing: -0.03rem;}
h1{margin-bottom:0.75em;font-size:48px;font-size:4.8rem;line-height:1.2;}
h2{margin-bottom:0.75em;font-size:32px;font-size:3.2rem;line-height:1.2;}
h3{margin-bottom:1em;font-size:24px;font-size:2.4rem;line-height:1.3;}
h4{margin-bottom:1em;font-size:18px;font-size:1.8rem;line-height:1.25;}
h5{margin-bottom:1.5em;font-size:16px;font-size:1.6rem;}
h6{font-size:16px;font-size:1.6rem;}
p,ol,ul,dl,address{margin-bottom:1.5em;font-size:16px;font-size:1.4rem;}
p{text-align:left;font-family: Verdana, sans-serif;}
ul,ol{margin:0 0 1.5em -24px;padding:0 0 0 24px;}
li ul,li ol{margin:0;font-size:16px;font-size:1.6rem;}
dl,dd{margin-bottom:1.5em;}
dt{font-weight:normal;}
blockquote{margin:0 0 1.5em -24px;padding-left:24px;border-left:1px solid #bfbfbf;font-style:italic;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
abbr[title]{border-bottom:1px dotted;cursor:help;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #bfbfbf;}
ins{background-color:#c3d9e6;color:#000000;text-decoration:none;}
mark{background-color:#c3d9e6;color:#000000;font-style:italic;font-weight:bold;}
pre,code,kbd,samp{font-family:"Monaco",Courier New,monospace;font-size:14px;font-size:1.4rem;line-height:1.5em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:"";content:none;}
small{font-size:14px;font-size:1.4rem;}
sub,sup{font-size:12px;font-size:1.2rem;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
a{color:#A83D0F;}
a:visited{color:#5a1e05;}
a:hover{color:#d95d28;}
a:focus{outline:thin dotted;color:#d95d28;}
a:hover,a:active{outline:0;}
figure{margin-bottom:1.5em;}
figure img,figure object,figure embed{margin-bottom:0.75em;max-width:100%;}
figcaption{display:block;font-weight:normal;}
img{border:0;}
svg:not(:root){overflow:hidden;}
table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;width:100%;font-size:14px;font-size:1.4rem;}
th,td,caption{padding:0.1875em 10px 0.1875em 5px;}
tfoot{font-style:italic;}
caption{background-color:transparent;}
tbody tr:nth-child(odd) td{background-color:#c3d9e6;}
form{margin:0;}
fieldset{margin-bottom:1.5em;padding:0;border-width:0;}
legend{*margin-left:-7px;padding:0;border-width:0;}
label{font-weight:normal;cursor:pointer;}
button,input,select,textarea{font-size:12px;font-size:1.2rem;margin:0;vertical-align:baseline;*vertical-align:middle;}
button,input{line-height:normal;*overflow:visible;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;}
input[type="search"]{box-sizing:content-box;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
textarea{overflow:auto;vertical-align:top;}
html{-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:#c3d9e6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
::-webkit-selection{background:#e6e6e6;color:#fafafa;text-shadow:none;}
::-moz-selection{background:#7bacc8;color:#c8977b;text-shadow:none;}
::selection{background:#7bacc8;color:#c8977b;text-shadow:none;}
button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;}
::-webkit-input-placeholder{font-size:14px;font-size:1.4rem;}
input:-moz-placeholder{font-size:14px;font-size:1.4rem;}
.ie7 img,.iem7 img{-ms-interpolation-mode:bicubic;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
.ir{display:block;overflow:hidden;background-repeat:no-repeat;text-align:left;text-indent:-999em;direction:ltr;}
.ir br{display:none;}
.hidden{display:none;visibility:hidden;}
.visuallyhidden{position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;border:0;clip:rect(0 0 0 0);}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;margin:0;height:auto;width:auto;overflow:visible;clip:auto;}
.invisible{visibility:hidden;}
@media print{*{background:transparent !important;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;} @page {margin:0.5cm;}h2,h3{orphans:3;widows:3;page-break-after:avoid;} p{orphans:3;widows:3;} pre,blockquote{border:1px solid #808080;page-break-inside:avoid;} abbr[title]:after{content:" (" attr(title) ")";} a,a:visited{color:#000000 !important;text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} a[href^="javascript:"]:after,a[href^="#"]:after{content:"";} img{max-width:100% !important;page-break-inside:avoid;} thead{display:table-header-group;} tr{page-break-inside:avoid;} .ir a:after{content:"";}}


h1, h2, h3, h4, h5, h6 {
	font-family: "ff-tisa-web-pro", Georgia, serif;
	letter-spacing: -0.05em;
}
#sitetitle {
	font-family: Verdana, sans-serif;
	line-height: 1;
	font-size: 1rem;
	padding: 1rem 2rem;
}
#intro {
	padding-top: 5rem;
}
#title {
	
	margin-bottom: 0.3em;
	line-height: 1;
}
#main p, #main h1, #main h2, #main h3, #main h4, .images span {
	padding: 1rem 2rem 0;
}
#main p {
	padding-top: 0;
}
.summary h2, .project h4 {
	color: #A83D0F;
}
.project h3 {
	margin-top: 44px;
	margin-bottom: 0;
}
.summary h2 {
	margin-bottom: 0.3em
}
#main .project h4 {
	padding-top: 0;
	font-style: italic;
}
#main p {
	line-height: 1.4em;
}
#main img {
	width: 100%;
	height: auto;
}
.images {
	padding-bottom: 1px;
}
.images em {
	font-style: italic;
	font-weight: bold;
	font-family: Georgia, serif;
}
.images a {
	text-decoration: none;
	margin-bottom: 2rem;
	color: #000;
	display: block;
}
.images span {
	font-size: 1.1rem;
	padding-bottom: 2rem;
	line-height: 1.4em;
	display: block;
}
.details {
	clear: both;
}
.project, .summary {
	overflow: hidden;
	border-bottom: 1px dotted #bbcac0;
}
.summary {
	background: #efeae7;
}
#main #appeal p {
	padding-top: 0;
}
#appeal h2 {
	margin-bottom: 2rem;
}

.responsible em {
	font-style: italic;
}
.responsible, .livelink {
	font-size: 0.7em;
	color: #877;
}

#toc {
	display: block;
	padding: 1rem 2rem;
}
#toc ul {
	list-style-position: inside;
	font-size: 1.2rem;
	font-family: Verdana, sans-serif;
	line-height: 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}
#toc li {
	margin: 0.3em 0;
}
#toc em {
	font-family: "ff-tisa-web-pro", Georgia, serif;
	color: #100;
	border-bottom: 1px dotted #100;
}
#toc ul ul {
	margin: 1.3em 0 1em;
}
#toc ul ul li {
	margin-bottom: 2rem;
}
#toc .toc-section {
	margin-bottom: 4rem;
}
#toc a {
	color: #A83D0F;
	text-decoration: none;
}
#toc strong {
	font-weight: bold;
}

#toc a span.index-title, #toc a span.index-description {
	display: block;
	
}
#toc a span.index-title {
	margin-bottom: 1px;
	font-family: "ff-tisa-web-pro", Georgia, serif;
	font-size: 1.7rem;
	color: #100;
}
#toc a span.index-description {
	line-height: 1.3em;
}

/* Nav Bar */
/*
.js #container {
	margin-top: 44px;
	width: 100%;
	position: relative;
	z-index: 300;
}
*/
.js body, html.js {
	background: #333;
	
}

.js #menu-handle {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	background: #333;
	color: #ddd;
	z-index: 400;
	
}
.js #menu {
	position: fixed;
	top: 66px;
	z-index: 200;
	-moz-transition-property: left;  
	-moz-transition-duration: 0.6s;  
	-webkit-transition-property: left;  
	-webkit-transition-duration: 0.6s;  
	-o-transition-property: left;  
	-o-transition-duration: 0.6s; 
	transition-property: left;
	transition-duration: 0.6s;
	
}

.js .menu-open #menu {
	left: 0%;
}

#main {
	background: #fbf9f8;
}

#menu .index-dev, #menu .index-ixd {
	display: none !important;
}

@media only screen and (max-width: 639px) {
	/* Mobile Nav Bar */
	.js #menu {
		top: 44px;
		width: 100%;
		left: -100%;
		
	}
	#menu-handle {
		box-shadow: 0 0 4px rgba(0,0,0,0.6);
		text-align: center;
		line-height: 44px;
	}
	#menu-handle {
		text-decoration: none;
	}
	#menu-closer {
		width: 20%;
		float: right;
		height: 100%;
	}
	#menu-icon {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		background: #383838;
		-moz-box-shadow: inset 0 0 2px #000;
		-webkit-box-shadow: inset 0 0 2px #000;
		box-shadow: inner 0 0 2px #000;
		font-size: 2.5rem;
		border-radius: 3px;
		margin: 6px 9px;
		padding: 0 9px 4px;
		line-height: 1;
	}
	#nav-title {
		font-family: "ff-tisa-web-pro", Georgia, serif;
		font-size: 1.1em;
	}
	
	#menu .index-ul, #menu .index-ul ul {
		margin: 0;
		padding: 0;
		list-style: none;
		color: #bbb;
	}
	
	#menu .index-ul {
		width: 80%;
		padding: 1em 0;
		float: left;
		background: #444;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	#menu .index-ul:after {
		content: '';
		display: block;
		height: 5em;
	}
	
	#menu .toc-section a {
		display: block;
		padding: 1.3rem;
		text-decoration: none;
	}
	#menu .index-title {
		display: block;
		color: #FBF9F8;
		font-family: "ff-tisa-web-pro", Georgia, serif;
		margin-bottom: 0.2em;
	}
	#menu .index-description {
		font-size: 1.3rem;
		line-height: 1.2em;
		display: block;
		color: #E86D0F;
	}

}

@media only screen and (max-width: 479px) {
	/* Mobile Nav Bar */
	#menu .toc-section a {
		padding: 0.5rem 1.1rem;
	}
}

@media only screen and (min-width: 480px) {
	#intro {
		padding-top: 5rem;
	}
	#main p, #main h1, #main h2, #main h3, #main h4, .images span {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	#toc {
		display: block;
		padding: 1rem 5rem;
	}
	/*
	#toc.topbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #100;
		padding-left: 5rem;
		margin: 0;
	}
	#toc.topbar ul, #toc.topbar li {
		display: inline-block;
		float: left;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: auto;
	}
	#toc.topbar a {
		float: left;
		display: block;
		width: 12px;
		height: 12px;
		margin-right: 5px;
		background: #fff;
		margin: 0 5px 0 0;
		padding: 0;
	}
	#toc.topbar span {
		float: left;
		position: absolute;
		top: -9999px;
	}
	*/
}
@media only screen and (min-width: 640px) {
	#main h1, #main h2, #main h3, #main h4 {
		padding-top: 2rem;
	}
	.project, .summary {
		padding-bottom: 2rem;
	}
	.images {
		width: 600px;
		margin: 0 auto;
	}
	.images span {
		padding-left: 0;
		padding-right: 0;
	}
	#main img {
		width: auto;
		height: auto;
	}
	.images img, .images iframe {
		box-shadow: 0px 2px 4px rgba(160,145,140,0.6);
	}
	
	/* Nav Bar */
	.js #container {
		margin-top: 0;
	}
	.js #menu-handle {
		display: none;
		
	}
	.js #main {
		margin-left: 40px;
		
	}
	.js #menu {
		left: 0;
		top: 0;
		padding-top: 30px;
	}
	.js #menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.js #menu li {
		overflow: hidden;
		-moz-transition-property: background;  
		-moz-transition-duration: 0.5s;  
		-webkit-transition-property: background;  
		-webkit-transition-duration: 0.5s;  
		-o-transition-property: background;  
		-o-transition-duration: 0.5s; 
		transition-property: background;
		transition-duration: 0.5s;
	}
	.js #menu .menu-highlight {
		background: #000;
	}
	.js #menu a {
		display: block;
		margin: 5px 7px;
		width: 26px;
		height: 26px;
		background: #777;
	}
	.js #menu .menu-highlight a {
		background: #aaa;
		
	}
	.js #menu span {
		position: absolute;
		top: -9999px;
	}
}



@media only screen and (min-width: 772px) {
	#intro {
		padding: 5rem 0 5rem;
	}
	#main p, #main h1, #main h2, #main h3, #main h4 {
		width: 52rem;
		padding-left: 7.5%;
		padding-right: 7.5%;
	}
	#toc.topbar {
		padding-left: 7.5%;
	}
	#main p {
		line-height: 1.5em;
	}
	.project {
		padding: 2rem 0;
	}
	.images {
		margin: 0 0 3rem;
		width: 100%;
		padding-left: 0;
	}
	.images:after {
		content: '';
		display: block;
		clear: both;
	}
	.images a {
		display: block;
		clear: both;
		margin: 0 0 10px 2%;
	}
	.images img, .images iframe {
		float: left;
		margin-right: 2rem;
		margin-bottom: 1rem;
		clear: both;
	}
	.images span {
		display: block;
		padding-right: 1rem;
	}
	.images span em {
		display: block;
		padding-top: 4rem;
		margin-bottom: 0.5rem;
		text-indent: 1px;
	}
	.summary {
		border-bottom: 1px dotted #BBCAC0;
		border-top: 1px dotted #BBCAC0;
	}
	#toc {
		padding: 1rem 0 1rem 7.5%;
		overflow: hidden;
		margin-bottom: 3rem;
	}
	#toc ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#toc ul ul li {
		margin-right: 20px;
		margin-bottom: 0;
	}
	#toc .toc-section {
		float: left;
		width: 48%;
		margin-bottom: 1rem;
	}
	.toc-section:after {
		content: '';
		display: block;
		clear: both;
	}
	#toc ul ul a {
		display: block;
		padding-top: 2rem;
		padding-left: 138px;
		min-height: 120px;
		position: relative;
	}
	#toc a span.index-title {
		margin-bottom: 0.3em;
	}
	#toc ul ul a:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 120px;
		height: 120px;
		box-shadow: 0 2px 4px rgba(160, 145, 140, 0.6);
	}

	#contacts {
		clear: both;
	}
	
	.index-broadway { background: url("../img/tb/broadway.jpg") no-repeat !important; }
	.index-thesis { background: url("../img/tb/thesis.jpg") no-repeat !important; }
	.index-whatthebook { background: url("../img/tb/whatthebook.jpg") no-repeat !important; }
	.index-welllife { background: url("../img/tb/welllife.jpg") no-repeat !important; }
	.index-letsfreecongress { background: url("../img/tb/letsfreecongress.jpg") no-repeat !important; }
	.index-windsensor { background: url("../img/tb/windsensor.jpg") no-repeat !important; }
	.index-ubcevents { background: url("../img/tb/ubcevents.jpg") no-repeat !important; }
	.index-fly { background: url("../img/tb/fly.jpg") no-repeat !important; }
	.index-siftconsole { background: url("../img/tb/siftconsole.jpg") no-repeat !important; }
	.index-siftformula { background: url("../img/tb/siftformula.jpg") no-repeat !important; }
	.index-r2d3part1 { background: url("../img/tb/r2d3part1.jpg") no-repeat !important; }
	
	/* Nav Bar */
	.js #menu-handle {
		display: none;
	}
	.js #menu {
		padding-top: 60px;
	}
	.js #main {
		margin-left: 64px;
	}

	.js #menu a {
		display: block;
		margin: 8px 15px;
		width: 34px;
		height: 34px;
		background: #777;
	}
	.js #menu span {
		position: absolute;
		top: -9999px;
	}
	
	#menu .index-broadway, #menu .index-purpose, #menu .index-cybernetics, #menu .index-whatthebook,
	 #menu .index-minimum, #menu .index-orientations, #menu .index-ubcevents, #menu .index-fly {
		background-size: 34px 34px !important;
	}
}

@media only screen and (min-width: 1032px) {
	#intro {
		padding-top: 7rem;
	}
	#main p, #main h1, #main h2, #main h3, #main h4, #toc {
		padding-left: 15%;
		padding-right: 15%;
	}
	#toc.topbar {
		padding-left: 15%;
	}
	#toc {
		padding: 2rem 6% 1rem 15%;
	}
	
	.images {
		width: 600px;
		margin: 0 0 0 7%;
		padding-bottom: 20px;
		padding-right: 2rem;
		float: left;
	}
	.images span {
		padding-top: 0;
		padding-right: 0;
		clear: both;
	}
	.images a {
		margin-left: 0;
	}
	
	.images span em {
		display: inline;
		padding-top: 0.3rem;
		margin-bottom: 0.5rem;
		text-indent: 1px;
	}
	.summary {
		padding-top: 2rem;
	}
	.project h3 {
		margin-top: 3rem;
	}
	.project, .summary {
		padding-bottom: 5rem;
	}
	#main .project h4 {
		margin-bottom: 4rem;
	}
	#main .project p {
		width: auto;
		padding: 0;
	}
	.details {
		width: 25%;
		float: left;
		clear: none;
	}
}
@media only screen and (min-width: 1140px) {
	#main {
		width: 100%;
	}
	.images {
		margin-left: 10%;
	}
	.details {
		width: 34rem;
	}
	#toc {
		max-width: 1200px;
	}
	#toc .toc-section {
		float: left;
		width: 43%;
		margin-bottom: 1rem;
	}
	#toc ul ul li {
		margin-right: 40px;
	}
	.details {
		
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5){}