/*
	Jeremy C. Sit homepage style sheet 2012
	www.ece.ualberta.ca/~jsit
	www.jsit.ca

	Copy and paste line below for debugging purposes:

	border: red solid thin;
*/

/* ============================================================ */
/*   1. main page style and main content container              */
/*      + general styles                                        */
/* ============================================================ */
html {
   overflow-y: scroll;
}

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: "Palatino", "Garamond", serif;
	font-size: medium; 
	line-height: 1.4;
	margin: 0pt;
	padding: 1.6em 0em 0em;
}

/* main content container */
#container {
	background-color: #FFFFFF;
	height: auto;
	margin: 0px auto;
	max-width: 1260px;
	min-width: 608px;
	width: 95%;
}
/* iPhone 4/4S portrait width is 640px.  640px * 0.95 = 608px  */

/* general container */
div.box {
	float: left;
	margin: 0em;
	overflow: hidden;
	padding: 0em;
	position: relative;
	width: 100%;
}

/* ============================================================ */
/*   2. general styles                                        */
/* ============================================================ */

/* objects hidden upon page load */
.hidden {
	display: none;
}

/* objects to float on the left or right */
.floatleft {
	float: left;
}

.floatright {
	float: right;
}

/* no borders on images by default */
img { 
	border: none; 
	vertical-align: middle;
}

/* links hidden by default */
a,
a.stealth
{
	color: inherit;
	text-decoration: none;
}
a.solid {
	text-decoration: underline;
}
a.dotted {
	border-bottom: 1px dotted;
}
a.underline:hover {
	text-decoration: underline;
}
a.highlight1:hover {
	background-repeat: repeat;
	background-image: url(/~jsit/img/highlight-green-1x1.png);
}
a.highlight2:hover {
	background-repeat: repeat;
	background-image: url(/~jsit/img/highlight-gold-1x1.png);
/*		
	background-color: #FFD128;
*/
}


/* ============================================================ */
/*   3. page header navigation bar                              */
/* ============================================================ */
header {
	background-color: #006546;
	border-bottom: 1px solid #FFFFFF;
	color: #FFFFFF;
	font-family: "DIN Pro", "Arial", sans-serif;
	height: 1.5em;
	margin: 0em;
	max-width: 1260px;
	min-width: 608px;
	min-height: 1.5em;
	overflow: hidden;
	padding: 0em;
	position: fixed;
	top: 0em;
/*
	left: 22%;
*/
	width: 95%;
	z-index: 4;
}

header ul {
	background-color: #006546; 
	color: #FFFFFF;
	height: auto;
	list-style: none; 
	margin: 0em;
	padding: 0em 0.25em;
}

header ul li  { 
	display: inline;
	font-size: 1.0em;
	padding: 0pt; 
}

header ul li:before { 
	content: " / ";
}

header ul li:first-child::before {
	content: "";
}

header ul a {
	text-decoration: none;
}

header ul a:hover {
	color: #FFD128;
}


/* ============================================================ */
/*   4. sidebar on left side; main content on right             */
/* ============================================================ */
/*
	- apply a max-width; let main content be auto width
*/
#sidebar {
	background: #FFFFFF;
	float: left;
	margin: 0em;
	overflow: hidden;
	padding: 0em;
	width: 30%;
}

#main {
	float: left;
	overflow: hidden;
	margin: 0em;
	padding: 0em;
	width: 70%;
}

/* ============================================================ */
/*   5. navigation menus                                        */
/* ============================================================ */
nav.menu {
}
/* **** 5a. main menu **** */
nav.menu ul {
	font-family: "DIN Pro", "Arial", sans-serif;
	height: auto;
	list-style: none;
	margin: 0em;
	padding: 0em 0.5em 0em 0em;
}
nav.menu ul li {
	font-size: 1.1em;
	line-height: 1.1em;
	overflow: hidden;
	padding: 0em 0em 0.25em;
}
nav.menu ul li a {
	border: 1px solid #FFFFFF;
	border-radius: 0.75em;
	display: block;
	margin: 0em;
	padding: 0.25em;
   transition: background 0.5s ease, border 0.5s ease;
}
nav.menu ul li a:first-line {
	font-size: 1.2em;
}
nav.menu ul li a:hover {
	border-color: #FFD128;
	background-color: #FFD128;
}
nav.menu ul a {
	text-decoration: none;
}
/* **** 5b. category menus **** */
nav.menu dl {

}
nav.menu dl dt {
	clear: both;
	float: left;
	font-weight: bold;
	margin: 0em;
	overflow: hidden;
	padding: 0.25em 0em;
	width: 28%;
}
nav.menu dl dt a {
	border: 0px solid #FFFFFF;
	border-radius: 0.75em;
	display: block;
	margin: 0em;
	padding: 0.25em 0.5em;
   transition: background 0.5s ease, border 0.5s ease;
}
nav.menu dl dt a:hover {
	border-color: #FFD128;
	background-color: #FFD128;
/*	background-repeat: repeat;
	background-image: url(/~jsit/img/highlight-gold-1x1.png); */
}
nav.menu dl dd {
	margin: 0pt 0pt 0.5em 30%;
	overflow: hidden;
	padding: 0.5em;
	position: relative;
	text-align: justify;
	top: 0pt;
	width: auto;
}


#identity_block {
	font-family: "DIN Pro", "Arial", sans-serif;
	font-size: 1.1em;
	margin-bottom: 1.0em;
	text-align: left;
}
#identity_block ul {
	clear: left;
	float: left;
	list-style: none;
	margin: 0em;
	padding: 0em;
	position: relative;
	left: 50%;
}
#identity_block ul li {
	display: block;
	float: left;
	margin: 0em;
	padding: 0em 1em;
	position: relative;
	right: 50%;
}
#identity_block ul li:first-child,
#identity_block ul li:last-child
{
	padding: 0.5em 0em 0em;
}
#identity_block ul li.identity span.name {
	font-size: 1.3em;
	font-weight: bold;
}


/* page footer */
footer {
	border-top: 0.4em solid #006546;
	clear: both;
	margin: 0em;
	padding: 0.4em 0em 0em;
}
footer p {
	color: #9F9F9F;
	font-family: "DIN Pro", "Arial", sans-serif;
	font-size: 0.75em;
	margin: 0em;
	padding: 0em;
}




hr { 
	background-color: #006546; 
	border-style: none;
	height: 0.4em; 
	margin: 0.5em 0em; 
}
	hr.thin { 
		height: 0.2em; 
	}


/* fancy backgrounds */
#bg_ecerf, #bg_evap, #bg_film, #bg_teach {
	background-color: #DFDFDF;
	background-repeat: no-repeat;
	margin: 0.4em 0em;
	overflow: hidden; 
	padding: 1.0em;
}
	#bg_ecerf {
		background-position: top; 
		background-image: url(/~jsit/img/bg-ecerf.jpg);
	}
	#bg_evap {
		background-position: top; 
		background-image: url(/~jsit/img/bg-evap.jpg);
	}
	#bg_film {
		background-position: bottom; 
		background-image: url(/~jsit/img/bg-film.jpg);
	}
	#bg_teach {
		background-position: bottom; 
		background-image: url(/~jsit/img/bg-teach.jpg);
	}

div.plain {
	background-color: #DFDFDF;
	margin: 0.4em 0em;
	overflow: hidden;
	padding: 1.0em;
}

/* main page footer with icons */
#footermain { 	
	margin: 0em 4em 4em;
	text-align: center; 
}
	#footermain ul { 
		height: auto;
		margin: 0pt;
		padding: 0pt;
	}
		#footermain ul li  { 
			display: inline; 
			list-style-type: none; 
			padding: 5px 20px; 
		}

/* page footer */

p.body, p.cont, li {
	text-align: justify;
}
p.body {
	text-indent: 2.5em;
}
h1 + p.body, h2 + p.body, h3 + p.body, h4 + p.body {
   text-indent: 0em;
}

p.figure {
	text-align: center; 
}

/* headings */
h1, h2, h3, h4 { 
	font-family: "Verdana", "Arial", "Helvetica", sans-serif;
	font-weight: bold; 
}
h1 { 
	color: #006546; 
	font-size: 1.5em; 
	text-align: center;
}
h1.error {
	color: #FF0000;
}
h1:first-child, h2:first-child {
	margin-top: 0em;
}
h2 { 
	background-repeat: repeat;
	background-image: url(/~jsit/img/highlight-green-1x1.png);
	font-size: 1.1em; 
	padding: 0.15em; 
}
h3 {
	color: #006546; 
	margin: 0pt 0pt 0.2em;
	border-bottom: #006546 solid 0.1em;
}

/* navigation bar */
ul.navbar {
	background-color: #006546; 
	color: #FFFFFF;
	font-family: "Verdana", "Arial", "Helvetica", sans-serif;
	height: auto;
	margin: 0.5em 4em;
	padding: 0.15em 0.2em;
}
	ul.navbar li  { 
		display: inline; 
		font-size: 0.8em;
		list-style-type: none; 
		padding: 0pt; 
	}
	ul.navbar li.parent:after { 
		content: " / ";
	}
	ul.navbar a {
		text-decoration: none;
	}
	ul.navbar a:hover {
		color: #FFD128;
	}

/* two-column layouts */
div.twocol {
	clear: both;
	margin: 0px;
}
	div.twocol_L {
		float: left;
		border-right: thin solid #000000;
		margin: 0pt -1px 0pt 0pt;
		width: 50%;
	}
	div.twocol_L_menu {
		float: left;
		width: 35%;
	}
	div.twocol_L_content {
		margin: 0pt;
		overflow: hidden;
		padding: 0pt 1.5em 0pt 0pt;
	}
	div.twocol_R {
		border-left: thin solid #000000;
		margin: 0pt 0pt 0pt 50%;
		padding: 0pt;
		width: 50%;
	}
	div.twocol_R_menu {
		margin: 0pt 0pt 0pt 35%;
		padding: 0pt;
		width: 65%;
	}
	div.twocol_R_content {
		margin: 0pt;
		overflow: hidden;
		padding: 0pt 0pt 0pt 1.5em;
	}
hr.cleanup {
	border: none;
	clear: both;
	height: 1px;
	margin: -1px 0pt 0pt 0pt;
	padding: 0pt;
	visibility: hidden;
	width: 100%;
}

/* menu */


#content1 {
/*	font-size: 1em; */
	display: none;
	float: right;
	margin-left: 20px;
	width: 60%;
}
#content1 h1 {
	margin: 0pt 0pt 4pt;
	border-bottom: #006546 solid 2pt;
}
#content1 dl {
	margin: 0pt;
}
#content1 dl dt {
	float: left;
	font-weight: bold;
	text-align: right;
	width: 6em;
}
#content1 dl dt:after { content: ": "; }
#content1 dl dd {
	margin-left: 6.5em;
	position: relative;
	top: 0pt;
	width: auto;
}

/* website addresses */
span.uri { 
	font-family: "Courier New", Courier, monospace; 
	font-size: 0.85em;
   word-wrap: break-word;
}
/* e-mail addresses; Garamond italic is a bit squished-looking */
span.email { 
/*
	letter-spacing: 120%; 
*/
}

/* historical records listing; space between items */
ul.history > li { margin-bottom: 0.5em; }

/* publication listing */
ul.pub li { margin-bottom: 0.5em; }
ul.pub li span.self { text-decoration: underline; }
ul.pub li span.supervised:after { content: "*"; }
ul.pub li span.titl:before { content: open-quote; }
ul.pub li span.titl:after { content: close-quote; }
ul.pub li span.jrnl { font-style: italic; }
ul.pub li span.volm { font-weight: bold; }
ul.pub li span.issu:before { content: "("; }
ul.pub li span.issu:after { content: ")"; }
ul.pub li span.year:before { content: "("; }
ul.pub li span.year:after { content: ")"; }
ul.pub li span.doi {	font-size: 0.75em; }
ul.pub li span.doi:before { content: " [DOI: "; }
ul.pub li span.doi:after {	content: "]"; }
ul.pub li span.doi a { 
	text-decoration: none; 
	border-bottom: 1px dotted #3F3F3F;
}

/* course listing */
dl.courselist {
	margin-bottom: 1em;
	padding: 0pt;
}
dl.courselist dt {
	float: left;
	width: 100px;
}
dl.courselist dd {
	margin: 0pt 0pt 1em 100px;
	text-align: justify;
}

/* graduate course table */
table.gradcourses {
/*	border: #000000 solid thin; */
}


/* contact info list definition */
dl.contact {
	margin: 0pt;
}
dl.contact dt {
	float: left;
	font-weight: bold;
	text-align: right;
	width: 9em;
}
dl.contact dt:after {
	content: ": ";
}
dl.contact dd {
	margin-left: 9.5em;
	padding-bottom: 0.5em;
	position: relative;
	text-align: justify;
	top: 0pt;
	width: auto;
}

/* date ranges for history listings */
ul span.date {
	display: block;
	float: right;
	margin: 0pt 0pt 0pt 0.6em;
}

ul, ol, dl {
   margin-top: 0pt;
}

/* For collapsable block elements */
.collapsable {
	overflow: hidden;
/*   transition: height 1s ease; */
}