body {
	background-color: #101010;
	font-size: 62.5%;	/* Make 1em=10px by default--see http://www.betaversion.org/~stefano/linotype/news/169/ for details. */
	overflow-x: hidden;	/* For some reason Safari wants to allow horizontal scrolling. This hides the horizontal scroll bar, though selecting text or using a trackpad could still scroll the content area. */ 
	z-index: 10000;	/* due to z-index bug in IE */
}
body,tbody { font-family: verdana,tahoma,sans-serif; }
body,tbody,a { color: #eee; }
h2 + div,h3 + div {	/* Main content */
	font-size: 1.7em;
}
h2 > a,h3 > a,h4 > a,h5 > a { color: #eee !important; text-decoration: none !important; text-shadow: none !important; }
a.currentStyle { font-weight: bold; }
a.deactivated,a.deactivated:hover,a.deactivated:active { color: #eee; text-decoration: none; cursor: text; }
div#unirand { width: 10em; margin-left: auto; margin-right: auto; margin-top: 1.5em; text-align: center; background-color: #fff; }
#inputdiv { display: none; }
.todo { background-color: #f44; }

acronym { border-bottom: solid 1px dotted; }
table#topicgrid { font-size: 10pt; margin-left: auto; margin-right: auto; }
table#topicgrid > tbody > tr > th { text-align: right; padding-right: 1ex; }

#contact { position: fixed; left: 0px; top: 410px; width: 20em; text-align: center; z-index: 100; }
#contact > a { font-size: 1.7em; }
#contact #breadcrumbs { padding: 0px; padding-left: .5em; width: 100%; text-align: left; }
#contact #breadcrumbs a { text-decoration: none; }
#contact #breadcrumbs acronym { border: none; }
#contact #breadcrumbs li a:hover { color: #ff5 !important; }
#contact #breadcrumbs li { font-size: 1.5em; display: inline; letter-spacing: -0.5px; font-family: "Segoe UI",tahoma,sans-serif; }
#contact #breadcrumbs li:after { content: "|" /* " >"*/; padding-left: 3px; }
#contact #breadcrumbs li:nth-child(3):after { content: none; }
#contact #breadcrumbs li#room { display: block; letter-spacing: 2px; text-align: right; }
#contact #breadcrumbs li#room:after { content: none; }
#contact #breadcrumbs li:nth-child(1),#contact #breadcrumbs li:nth-child(1) a { color: #777; }
#contact #breadcrumbs li:nth-child(2),#contact #breadcrumbs li:nth-child(2) a { color: #999; }
#contact #breadcrumbs li:nth-child(3),#contact #breadcrumbs li:nth-child(3) a { color: #bbb; }
/*#contact #breadcrumbs li:nth-child(2),#contact #breadcrumbs li:nth-child(2) a { color: #909090; }
#contact #breadcrumbs li:nth-child(3),#contact #breadcrumbs li:nth-child(3) a { color: #aaa; }
#contact #breadcrumbs li:nth-child(4),#contact #breadcrumbs li:nth-child(4) a { color: #c0c0c0; }*/
#contact #breadcrumbs li:nth-child(5),#contact #breadcrumbs li:last-child a { color: #ddd; }
#contact #breadcrumbs li:last-child { float: right; padding-right: 5px; padding-top: .4em; }

h1 { font-family: "Optima","Zapf Humanist","zapfhumnst bt",verdana,tahoma,sans-serif; font-size: 2em;
	text-align: center; font-weight: normal; width: 200px; margin: 0px; 
	position: fixed; left: 0px; top: 370px;
	letter-spacing: -1px; text-shadow: 2px 2px 3px #000;
	background-image: url('img/name_black200.png');
	height: 30px; background-repeat: no-repeat;
}
h1 .name { display: none; }

/* Main sections */
#slotted { position: relative; }
#slotted h2,#slotted h3.subsection { position: fixed; width: 85px; 
	font-family: "Segoe UI",tahoma,sans-serif; font-size: 1.5em; line-height: 0.9; font-weight: normal; padding: 5px 0;
}
#slotted h2 { left: 0px; text-align: right; /* top will be set by JS */ }
#slotted h2 b { font-weight: normal; }
#slotted h2.n1 { font-variant: small-caps; }
#slotted h2.current {
	-moz-transform: rotate(10deg) translateY(-5px); 
	/*for some reason this breaks fixed positioning in Safari when there is scrolling: -webkit-transform: rotate(10deg) translateY(-5px);*/
}
#slotted h2.current:after { content: " »"; }
#slotted h2.n1.current:after { content: ""; }
#slotted h2.n2.current a,#slotted h2.n2 a:hover { color: #ff0080 !important; }
#slotted h2.n3.current a,#slotted h2.n3 a:hover { color: #ff8000 !important; }
#slotted h2.n4.current a,#slotted h2.n4 a:hover { color: #0f0 !important; }
#slotted h2.n5.current a,#slotted h2.n5 a:hover { color: #0080ff !important; }
#slotted h2.n6.current a,#slotted h2.n6 a:hover { color: #cc1cff !important; }
#slotted h2:first-of-type:not(.current) a:not(:hover),#slotted h2:first-of-type:not(.current) ~ h2:not(.current) a:not(:hover) { color: #777 !important; }
/* The above rule grays out the top-level sections if one other than the main page is selected to focus the user's attention on the subsections.
   If the browser doesn't support selectors with ~ it will simply be ignored. */

/* Accent box fixed at the top right of the content area. 
(In these selectors, could replace 'span' with ':before' were it supported by IE.) */
#slotted h2.current + div .accentbox {
	display: block; 
	position: absolute; left: 100%; top: 1em; /*left: 58em; top: -17em;*/
	opacity: .7; width: 40px; height: 40px;
}
#slotted h2.current + div .accentbox span {
	content: ""; display: block;
	position: fixed;
	border: solid 2px; z-index: 0;
	width: 40px; height: 40px;
	-moz-transform: rotate(10deg) translateX(-20px);
	-webkit-transform: rotate(10deg) translateX(-20px); 
}
#slotted h2.n2.current + div .accentbox span { border-color: #ff0080; }
#slotted h2.n3.current + div .accentbox span { border-color: #ff8000; }
#slotted h2.n4.current + div .accentbox span { border-color: #0f0; }
#slotted h2.n5.current + div .accentbox span { border-color: #0080ff; }
#slotted h2.n6.current + div .accentbox span { border-color: #cc1cff; }

/* Theta images to fill the accent box on hover */
#slotted a:hover .thetabrackets,#slotted a:hover .thetahat,#slotted a:hover .headshot {
	display: block;
	position: absolute; left: 99%; top: 0.6em; /*left: 58em; top: -17em;*/
	opacity: .7;
}
#slotted a:hover .thetabrackets:not(.asdfasdf),#slotted a:hover .thetahat:not(.asdfasdf),#slotted a:hover .headshot:not(.asdfasdf) {
	left: 100%;	top: 0.8em; /* override except in IE */
}
#slotted a:hover .thetabrackets span,#slotted a:hover .thetahat span,#slotted a:hover .headshot span { 
	content: ""; display: block;
	position: fixed;
	border: solid 2px #aaa; z-index: 50;
	background-color: #000; background-position: center; background-repeat: no-repeat; 
}

#slotted a:hover .thetabrackets,#slotted a:hover .thetahat {
	width: 40px; height: 40px;
}
#slotted a:hover .thetabrackets span,#slotted a:hover .thetahat span { 
	width: 40px; height: 40px;
	-moz-transform: translateX(-20px);
	-webkit-transform: translateX(-20px);  
}
#slotted a:hover > .headshot,#slotted a:hover .headshot {
	width: 40px; height: 90px; opacity: 1.0;
}
#slotted a:hover > .headshot span,#slotted a:hover .headshot span { 
	width: 40px; height: 90px;
	-moz-transform: translateX(-20px);
	-webkit-transform: translateX(-20px);  
}
#slotted a:hover .thetahat span { background-image: url("img/theta-hat_white.png"); }
#slotted a:hover .thetabrackets span { background-image: url("img/theta-ling_white.png"); }
#slotted a:hover .ark span { background-image: url("ppl/ark_2014-04-10.jpg"); width: 600px; height: 172px; bottom: 0; right: 0; z-index: 1000; }
#slotted a:hover .ark span:after { content: "ARK in 2014 (Greg Hanneman)"; color: #eee; font-size: 90%; position: absolute; bottom: 0; right: 0; z-index: 1000; }
#slotted a:hover .dipanjan span { background-image: url("ppl/dipanjan.jpg"); }
#slotted a:hover .noah span { background-image: url("ppl/noah.jpg"); }
#slotted a:hover .kemal span { background-image: url("ppl/kemal.jpg"); }
#slotted a:hover .behrang span { background-image: url("ppl/behrang.jpg"); }

/*.pubs-me { border-left: dotted 1px #ff0080; padding-left: 3px; }*/
.pubs-list { list-style-type: none; letter-spacing: -.03em; font-size: 0.85em; padding-left: 0; }
.pubs-list > li { color: #ccc; margin-left: 0em; padding-top: 2em; clear: left; 
					text-indent: 0em; line-height: 1.15; 
					counter-increment: list; }
.pubs-list > li:first-child { padding-top: 0.5em; }
.pubs-list > li a,.pubs-list > li:hover a { color: #fff !important; text-shadow: none !important; }
.pubs-me:before { content: ":"; color: #ff0080; }
.pubs-title {
	border: 1px solid #555; border-radius: 4px;
	font-family: "Open Sans"; font-weight: 300; 
	color: #eee; letter-spacing: .02em; font-size: 120%; line-height: 1.2; 
	/*text-shadow: 1px 1px 2px #888;*/
	display: block; width: 100%; float: left;
	margin-left: 0; margin-top: 4px; margin-bottom: 4px;
	padding: 0.4em 1em; text-indent: 0;
/* TODO: test margin, padding changes in IE */
}
.pubs-title:before { content: counter(list, decimal-leading-zero); position: absolute; left: 1em; 
					 font-size: 0.85em; color: #555; }
.pubs-list > li:only-child .pubs-title:before { content: none; }
					 
li:hover .pubs-title {
	background-color: #111; 
	/*
	background: -moz-linear-gradient(top, transparent, #111 20%, #111 80%, transparent);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, transparent), color-stop(0.2, #111), color-stop(0.8, #111), color-stop(1.0, transparent));
	*/
}
.pubs-venue { white-space: nowrap; margin-left: -2em; }
.pubs-list li .bib { white-space: pre-wrap; font-family: monospace; }
.pubs-list li .meta > span { display: block; margin-left: -2em; padding: 0.5em; }
.pubs-list li .meta a.selected { font-weight: bold; }

/* Content type images from https://www.zotero.org/trac/browser/extension/trunk/chrome/skin/default/zotero/ */
.pubs-list li .content { font-size: 0; text-decoration: none !important; display: inline-block; line-height: 30px; position: relative; background-repeat: no-repeat; width: 16px; height: 16px; }
.pubs-list li .content.conference { background-image:url('img/conferencePaper.png'); }
.pubs-list li .content.article { background-image:url('img/journalArticle.png'); }
.pubs-list li .content.toappear { opacity: 0.3; filter:alpha(opacity=40); }
.pubs-list li .content.report { background-image:url('img/report.png'); }
.pubs-list li .content.slides { background-image:url('img/videoRecording.png'); }
.pubs-list li .content.video { background-image:url('img/tvBroadcast.png'); }
.pubs-list li .content.poster { background-image:url('img/artwork.png'); }
.pubs-list li .content.booksection { background-image:url('img/bookSection.png'); }

.pubs-details { /*white-space: nowrap;*/ display: block; padding-left: 4em; /*text-indent: -2em;*/ }
.pubs-details a { white-space: nowrap; }
.pubs-details .abstract,.pubs-details .errata,.pubs-details .bib,pubs-details .note,.pubs-details .software,.pubs-details .press { white-space: normal; }
#slotted .pubs-details a.errata-link,#slotted .pubs-details a.errata-link:hover { color: #ff0080 !important; }

#slotted h3.subsection { position: fixed; left: 90px; text-align: left; }
#slotted h3.subsection a:hover { color: #ff5 !important; }

/* Not supported yet by all browsers, so do this with jQuery instead
#slotted > div,#slotted h3 { display: none; }
#slotted h2.current ~ div,#slotted h2.current ~ h3 { display: block; }
#slotted h2.current ~ h2 ~ div,#slotted h2.current ~ h2 ~ h3 { display: none; }
*/

#frame { max-width: 70%; width: 70em; position: absolute; left: 22em; /* leave room for the theta menu */ 
	margin: 1em 3em 1em .5em;  
}

#slotted { background-color: /*#272727*/ #303030; /*opacity: .9;*/ border: solid 2px #676767;  padding: 1em 4em; min-height: 45em; }
#slotted { line-height: 1.5; opacity: 1.0; }
#slotted * a { color: #fff; text-decoration: none; text-shadow: 2px 2px 3px #000; }
#slotted:hover a,#slotted a:active { color: #ff5; }
#slotted a:hover,#slotted a:active { text-decoration: underline; }
h3,h4,h5 { font-family: "Segoe UI", tahoma, sans-serif; font-size: 3.2em; font-weight: normal; margin-bottom: 0px; }
h4 { font-size: 1.5em; font-style: italic; }
h5 { font-size: 1.2em; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.5em; }
h4 + p,h5 + p,h4 + ul,h5 + ul,h4 + ol,h5 + ol,h4 + dl,h5 + dl { margin-top: 0; }
h3 + * > :first-child { margin-top: 0px; }
#firstthing { background-image: url('img/bigtheta200.png'); position: fixed; top: 0px; left: 0px; width: 200px; height: 500px; background-repeat: no-repeat; }

#changecss { position: absolute; bottom: -3em; right: 0px; font-size: 1.2em; padding-bottom: 1.5em; z-index: 200; }
#changecss,#changecss * { color: #777; text-decoration: none; }
#changecss a:hover { color: #fff; }

.research-pubs { padding-left: 1em; margin: 0; }
.research-pubs li { list-style-type: none; }
.research-pubs li:before { content: "↪ "; }

#recenttalks,#news { font-family: "Open Sans"; }
#news { line-height: 1.2; }
#news > li { margin-top: 5px; margin-bottom: 5px; }


#updated div.msg {
	text-align: right;
	font-family: "Segoe UI", tahoma, sans-serif; letter-spacing: 3px;
	font-size: 1.5em;
	position: absolute; 
	right: .2em; /* IE -- overridden below for Firefox/Safari */
	top: 0px; /* overridden by JS, but this prevents extending the page height */
}
#updated div.msg:nth-child(1) {
	right: -1.2em;	/* IE doesn't see this */
}
#updated div.msg > div {
	position: relative; left: 100%; 
	width: 0;	/* Prevents this element from extending the width of the page, which could trigger horizontal scrolling */
}
#updated div.msg > div > div {
	-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; /* to make consistent with IE */
	-webkit-transform: rotate(90deg); 
	-moz-transform: rotate(90deg);
	/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* for IE -- will be induced automatically with transformie */
	width: 40em;	/* Overrides the 0-width once the element is rotated */
}
#updated div.msg > div > div > div {
	/*position: absolute; right: 88px; */ /* Causes the rotation to disappear in IE8. Do this via JS instead. */
}
#updated div.dots {
	position: absolute; right: -27px; bottom: 0px; height: 88px; width: 27px;
	background-image: url('img/grayballs.png'); background-repeat: no-repeat; background-position: right;
}


div#unirand { width: 20em; margin-left: auto; margin-right: auto; text-align: center; background: none; }
#unirand a { color: #fff; }
#unirand div.clabel a { color: #aaa; text-decoration: none; }
#unirand div.clabel a:hover { color: #cc1cff; }
#unirand div.char { font-size: 3.2em; border: solid 1px #aaa; width: 1.5em; height: 1.5em; margin-left: auto; margin-right: auto; }
#unirand div.char:hover { border: solid 1px #cc1cff; }
#unirand div.clabel { font-size: 0.8em; font-family: tahoma,verdana,arial,sans-serif; color: #777; display: inline; }


#browserWarning,#mobileBrowserWarning { display: none; /* hidden by default */ margin-left: auto; margin-right: auto; text-align: center; background-color: #c00; color: #fff; z-index: 1000; }
#browserWarning { width: 50%; }
#mobileBrowserWarning { width: 600px; font-size: 40px; margin-right: 0; margin-left: auto; }