@charset "utf-8";

/* Style sheet for basic Oxbridge pages and Q&A transcripts */
/* 19 May 2013 - Wordsmith Jarvinen                         */

/* Note: Philosopher is a Google webfont. The font-family specification */
/* has to be accompanied by a corresponding link in the page header     */

body {
   color: #000;
   background-color: #e6e6e6;
   font-family: 'Philosopher', sans-serif;
   font-size: 14px;
}

/* Define an overall container within the body */

#container {
   max-width: 864px;
   margin: 20px auto;
}

/* Define the masthead div. The background image is */
/* set randomly from among several via Javascript.  */

#masthead {
   background-color: #0d3b5d;
   max-width:  864px;
   margin-bottom: 8px;
   border-radius: 8px;
	 overflow: auto;
}

/* Define the horizontal navigation bar and the */
/* properties for the buttons on it (via a UL). */

#nav {
	 display: flex;
	 justify-content: center;
	 align-items: center;
   background-color: #0d3b5d;
   margin-bottom: 35px;
   border-radius: 8px;
}

#nav ul {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 flex-wrap: wrap;
	 max-width: 85%;
   margin: 0px auto;
   padding: 0.5em 0;
}

#nav ul li {
   display: inline-block;
   list-style: none;
   margin: 0.25em 0.25em;
   padding: 0;
}


#nav ul li a {
   display: inline-block;
   font-weight: bold;
	 font-size: 0.875em;
   min-width: 8em;
   text-decoration: none;
   vertical-align: middle;
   text-align: center;
   background-color: #e6e6e6;
   color: #0d3b5d;
   border: solid 2px #999;
   border-radius: 7px;
   padding: 0.25em 0.5em;
}

#nav ul li a:hover {
   background-color: Peru;
   color: #e6e6e6;
}

/* The actual page content div doesn't need anything except for */
/* an overflow for the Caledon Quest page to handle a float.    */

#content {
	overflow: auto;
}

/* News column on the home page */

#news {
	float: right;
	width: 120px;
	font-size: 0.85em;
	margin: 0 0 0.5em 0.5em;
	padding: 0.5em;
	border: solid 2px black;
}

#news h2 {
	margin-top: 0;
	padding-top: 0;
	text-align: center;
	text-decoration: underline;
}

/* Properties for the footer content */

#footer {
	margin-top: 20px;
	font-size: 0.85em;
	overflow: auto;
}

#hosting { 
	float: right; 
	width: 33%;
	text-align: right;
}

#modified {
	float: right;
	width: 33%;
	text-align: center;
}

/* Properties for the posters on the Caledon Quest Page */

#poster {
	display: block;
	float: left;
	width: 35%;
	margin-right: 1em;
}

/* CSS Needed for the popup class schedule descriptions */

#schedule { position: relative; }
#schedule .description {
	display: none;
	position: absolute;
	width: 46%;
	background-color: #e6e6e6;
	color: #000;
	padding: 0.5em;
	border: 2px solid #000; 
	z-index: 3;
}

#schedule h1 {
	font-size: 1.35em;
}


h1 { text-align : center; }

li {
	padding: 0.25em 0;
}

/* CSS3 bi-column, tri-column, and quad-column settings */

.bicolumn {
	-moz-column-count: 2; 	 /* Firefox */
	-webkit-column-count: 2; /* Safari and Chrome */
	column-count: 2;
}


@media (max-width: 648px) {
	.bicolumn {
		-moz-column-count: 1; 	 /* Firefox */
		-webkit-column-count: 1; /* Safari and Chrome */
		column-count: 1;
	}
}

.tricolumn {
	-moz-column-count: 3; 	 /* Firefox */
	-webkit-column-count: 3; /* Safari and Chrome */
	column-count: 3;
}

.quadcolumn {
	-moz-column-count: 4; 	 /* Firefox */
	-webkit-column-count: 4; /* Safari and Chrome */
	column-count: 4;
}

@media (max-width: 648px) {
	.quadcolumn {
		-moz-column-count: 3; 	 /* Firefox */
		-webkit-column-count: 3; /* Safari and Chrome */
		column-count: 3;
	}
}

@media (max-width: 432px) {
	.quadcolumn {
		-moz-column-count: 2; 	 /* Firefox */
		-webkit-column-count: 2; /* Safari and Chrome */
		column-count: 2;
	}
}


/* Table settings for the Q&A transcripts */

table {
   width:  100%;
   border: solid 2px #0d3b5d;
}

tr {
   vertical-align: top;
}

td {
   padding: 0.1em 0.5em;
   border: solid 1px #e6e6e6;
   border-width: 2px 1px;
}


/* Table columns proportions for the Q&A transcripts */

table.transcript {
	table-layout: fixed;
}

td.time { width: 11%; }
td.name { width: 38%; }
td.body { width: 51%; }


/* Alternating colors for the Q&A transcripts */

.odd {
   background-color: Wheat;
}

.even {
   background-color: LightSteelBlue;
}


img {
	border: none;
}

.imgDivRight {
	float: right;
	margin-left: 0.5em;
	font-size: 0.75em;
	text-align: center;
}

.imgDivLeft {
	float: left;
	margin-right: 0.5em;
	font-size: 0.75em;
	text-align: center;
}


@media print {
	
#masthead, #nav {display: none;}

}