/* Wrapper for the entire page, designed for 1024px */

	#wrapper {
		width: 1024px;
		margin-top: 20px;
		text-align: center;
		font-family: Tahoma, Helvetica, Arial, sans-serif;
		margin: 0px auto;
	}
	
/* Header image */

	#header {
		height: 110px;
		width: 1024px;
	}
	
/* Masthead */
	
	#header a img {
		border-style: none;
	}
	
/* Container for the contents */
	
	#container {
		width: 850px;
		margin: 0px auto;
		margin-top: 10px;
		background-color: #ffb847;
		margin-bottom: 40px;
	}
	
/* IE8 specific CSS */
	
	.ie8 #container {
		width: 850px;
		margin: 0px auto;
		margin-top: 10px;
		background-color: #ffb847;
		margin-bottom: 40px;
	}
	
/* Declaration for cycling picture on page */
	
	#pic {
		height: 250px;
		width: 600px;
		float: left;
	}
	
/* Red bar for top navigation */
	
	#topnav {
		width: 850px;
		height: 40px;
		background-color: #9a0000;
		overflow: hidden;
		padding: 0px;
		margin-bottom: 0px;
	}
	
/* IE6 specific CSS */
	
	.ie6 #topnav {
		background: #9a0000;
		background-image: none;
		padding: 0px;
		margin: 0px;
		height: 36px;
	}
	
/* Only for Mozilla-family (Gecko based) browers */
	
	#topnav, x:-moz-any-link {overflow: visible;}
	#topnav, x:-moz-any-link, x:default {overflow: hidden;}
	
/* Yellow sidebar */

	#sidenav {
		width: 250px;
		height: 500px;
		background-color: #ffb847;
		float: right;
	}
	
	#countdownbox{
		margin-top: 10px;
		margin-bottom:10px;
		}
	
/* The light blue main content div */

	.ie #mainbox {
		float: left;
		width: 600px;
		background-color: #a9bcd0;
	}
	
	#mainbox {
		width: 600px;
		background-color: #a9bcd0;
	}
	
	.ie7 #mainbox {
		width: 600px;
		background-color: #a9bcd0;
	}
	
/* The div that contains all the content generated by the news function */
	
	#newsbox {
		width: 550px;
		float: left;
		text-decoration: none;
		text-align: left;
		font-size: 20px;
		padding-left: 20px;
		background-image: url(images/wyvern.png);
		background-repeat: no-repeat;
		padding-left: 10px;
		padding-right: 15px;
		padding-bottom: 10px;
		color: #000;
		font-size: 13px;
		margin-left: 20px;
		margin-top: 15px;
		margin-bottom: 0px;
		}
		
/* IE6 specific CSS */

	.ie6 #newsbox {
		width: 550px;
		float: left;
		text-decoration: none;
		text-align: left;
		font-size: 20px;
		color: #00213b;
		padding-left: 20px;
		background-image: url(images/wyvern-ie.png);
		background-repeat: no-repeat;
		padding-left: 20px;
		padding-right: 0px;
		padding-bottom: 10px;
		color: #000;
		font-size: 13px;
		margin-left: 0px;
		margin-top: 15px;
		}
		
/* Deprecated code but important for the items that use tables, also may be required for IE5/6 */

	#newsbox table.newsholder tbody tr {
		margin-bottom: 30px;
		margin-top: 30px;
	}
		
	#newsbox table.newsholder tbody tr td.text h3 {
		font-size: 14px;
		margin-bottom: 0px;
		margin-top: 0px;
	}
	
/* News header (title that appears above the line */
		
	#newshead {
		width: 560px;
		text-decoration: none;
		text-align: left;
		font-size: 18px;
		color: #00213b;
		margin-left: -10px;
		font-weight: 800;
		}		
		
	#newshead p {
		margin-top: 0px;
	}
	
	#newsbox .news-excerpt {
		border-bottom: 2px solid #848795;
		margin-right: 20px;
	}
	
/* IE6 specific CSS */
	
	.ie6 #newsbox. news-excerpt {
		border-bottom: 2px solid #848795;
		margin-right: 0px;
	}
	
	#newsbox .news-excerpt a {
		text-decoration: none;
		text-align: left;
		color: #000;
		font-size: 13px;
	}
	
/* Make all the links nice and blue without the underline */

	#newsbox a {
		color: #00386b;
		text-decoration: none;
		text-align: left;
	}
	
	#newsbox .news-excerpt a h3 {
		margin-bottom: 0px;
	}
	
/* Make sure the use of lists won't cause the entire newsbox to overflow onto the right due to the margin and padding */

	#newsbox ul {
		margin: 5px;
		padding: 0px;
	}
	
	#newsbox ol {
		margin: 5px;
		padding: 0px;
	}
	
/* Put some space between the newsbox and the footer */
	
	#filler {
		height: 150px;
		width: 560px;
		margin-top: 20px;
	}
	
/* IE6 specific */

	.ie6 #filler {
		height: 90px;
		width: 560px;
		margin-bottom: -90px;
		padding: 0px;
	}
	
/* IE again... */
	
	.ie #filler {
		position: relative;
		width: 600px;
		height: 105px;
		bottom: 60px;
		margin-top: 100px;
	}
	
	.ie8 #filler {
		position: relative;
		height: 95px;
		bottom: 15px;
		margin-top: 100px;
	}
	
/* IB Logo as well as SQA Logo */
	
	#ibws {
		height: 85px;
		width: 145px;
		position: relative;
		top: 75px;
		float: left;
	}
	
/* General IE compromises */
	
	.ie #ibws {
		height: 85px;
		width: 150px;
		position: relative;		
		top: 00px;
		float: left;
	}
	
	.ie6 #ibws {
		height: 85px;
		width: 150px;
		position: relative;
		top: 85px;
		float: left;
	}
	
	.ie8 #ibws {
		height: 20px;
		width: 150px;
		position: relative;
		top: 10px;
		float: left;
	}
	
/* Announcement box */
	
	#announcebox {
		width: 240px;
		background-color: #ffaa22;
		color: #00213b;
		text-align: left;
		padding-left: 10px;
		margin-top: 0px;
		padding-top: 5px;
		font-weight: 800;
		padding-bottom: 5px;
	}
	
	#announcebox ul {
		margin: 0px;
		padding: 0px;
	}
	
	#announcebox ul li {
		list-style-type: none;
		padding: 0px;
		margin-top: -10px;
	}
	
	#announcebox ul li a {
		list-style-type: none;
		padding: 0px;
		color: #000;
		text-decoration: none;
		font-size: 13px;
		margin: 0px;
		font-weight: 500;
	}
	
/* The news menu */
	
	#newsmenu {
		text-align: right;
		margin-top: 15px;
		margin-right: 15px;
	}
	
	#newsmenu a {
		text-decoration: none;
		font-size: 13px;
		color: #000;
		font-weight: bold;
	}
	
/* Footer */
/* CST credits as well as school address */
	
	#cst {
		font-family: Arial;
		text-align: right;
		vertical-align: bottom;
		margin-top: 80px;
		padding-top: 0px;
		margin-right: 15px;
		margin-bottom: 0px;
		font-size: 10px;
		color: #000;
	}
	
/* IE6 specific CSS */
	
	.ie6 #cst {
		font-family: Arial;
		text-align: right;
		vertical-align: bottom;
		margin-top: 80px;
		padding-top: 20px;
		margin-right: 15px;
		margin-bottom: 0px;
		font-size: 10px;
		color: #000;
	}
/* IE7 specific CSS */	
	.ie7 #cst {
		font-family: Arial;
		text-align: right;
		vertical-align: bottom;
		margin-top: 90px;
		padding-top: 0px;
		margin-right: 15px;
		margin-bottom: 0px;
		font-size: 10px;
		color: #000;
	}
/* IE8 specific CSS */	
	.ie8 #cst {
		font-family: Arial;
		text-align: right;
		vertical-align: bottom;
		margin-top: 0px;
		padding-top: 0px;
		margin-right: 15px;
		margin-bottom: 0px;
		font-size: 10px;
		color: #000;
	}	
	
	#cst a {
		text-decoration: none;
		color: #002649;
		font-weight: bold;
	}
	
/* Announcements menu */
	
	#announcemenu {
		text-align: right;
		margin-top: 15px;
		margin-right: 15px;	
	}
	
	#announcemenu a {
		text-decoration: none;
		font-size: 13px;
		color: #000;
		font-weight: bold;
	}
	
	#announcements {
		margin-bottom: 30px;
	}
	
	#announcements ul li a {
		color: #000;
		text-decoration: none;
		font-size: 12px;
		}
	
/* fixes for different browsers for the position of the dot on the sidebar menus */
	
	.win.gecko #ffix {
		margin-left: 104px;
	}
	
	.gecko #ffix {
		margin-left: 103px;
	}
	
	#ffix {
		margin-left: 104px;
	}
	
/* CSS Thingmagics to make drop down nav's work */

	.navbutton {overflow:hidden; padding:0px; margin-bottom:0px;}
	.navbutton, x:-moz-any-link {overflow:visible;}
	.navbutton, x:-moz-any-link, x:default {overflow:hidden;}
	.navbutton ul {padding:0px; margin:0px;}
	.navbutton ul li {float:left; display:block; list-style-type:none;}
	.navbutton ul li a:hover {background:#710000;}
	.navbutton ul ul {position:absolute; top:168px; left:-9999px; background:url("images/menu-red.png") repeat; z-index:500; width:170px; }
	.navbutton ul ul li {float:none;}
	.navbutton ul ul li a {color:#fff;; border-bottom:none; font-size:11px; display:block; width: 148px; height:auto; text-align: left;}
	.navbutton ul ul li a:hover {border-bottom:none; background:#710000; color:#fff;}
	.navbutton ul :hover ul {left:auto;}
	.navbutton :hover > a {background:#710000; cursor:pointer;}
	
/* Even more magic to make the drop down nav's work in IE7-8 */

	.ie .navbutton {background:none; background-image:none;}
	.ie .navbutton ul {padding:0px; margin:0px;}
	.ie .navbutton ul li {position:relative;display:inline; z-index:50;}
	.ie .navbutton table {position:absolute; border-collapse:collapse;top:0px; left:0; z-index:50; margin:0; padding:0;}
	.ie .navbutton ul li ul {z-index:50; background:url("images/menu-red.png") repeat; visibility:hidden;position:absolute;top:40px;left:0px;font-size:11px; margin-top:0px;}
	.ie .navbutton ul :hover ul {visibility:visible; left:0px;}
	.ie .navbutton ul ul li a {display:block; width:148px;}
	
/* For IE 6 */

	.ie6 .navbutton {background:none; background-image:none;}
	.ie6 .navbutton ul {padding:0px; margin:0px;}
	.ie6 .navbutton ul li {position:relative;display:inline; z-index:50;}
	.ie6 .navbutton table {position:absolute; border-collapse:collapse;top:0px; left:0; z-index:50; margin:0; padding:0;}
	.ie6 .navbutton ul li ul {z-index:50; background:url("images/menu-red.gif") repeat; visibility:hidden;position:absolute;top:34px;left:0px;font-size:11px; margin-top:0px;}
	.ie6 .navbutton ul :hover ul {visibility:visible; left:0px;}
	.ie6 .navbutton ul ul li a {display:block; width:146px;}
	
/* The actual buttons, thankfully has no problem with all other browsers */
	
	.navbutton ul li a {
		width: 96px;
		height: auto;
		display: block;
		float: left;
		font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, Arial, Helvetica, Tahoma, sans-serif;
		font-weight: bold;
		padding: 10px;
		color: #fff;
		text-decoration: none;
		border-right-style: solid;
		border-right-width: 2px;
		border-color: #710000;
		font-size: 13px;
		display: block;
	}
	
/* Repositioning for "academic departments" link */

	#acadeptfix {
		padding: 3px 10px 3px 10px;
		height: 34px;
		}
		
	.ie6 #acadeptfix {
		padding: 0px 10px 2px 10px;
		height: 20px;
		}
	
/* IE6 specific CSS for the red buttons*/ 
	.ie6 .navbutton ul li a {
		width: 118px;
		height: auto;
		display: block;
		float: left;
		font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, Arial, Helvetica, Tahoma, sans-serif;
		font-weight: bold;
		margin: 0px;
		padding: 9.9px;
		color: #fff;
		text-decoration: none;
		border-right-style: solid;
		border-right-width: 2px;
		border-color: #710000;
		font-size: 12px;
		display: block;
	}
	
/* IE 8 specific CSS might not be needed */ 
	.ie7 .navbutton ul li a {
		width: 96px;
		height: auto;
		display: block;
		float: left;
		font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, Arial, Helvetica, Tahoma, sans-serif;
		font-weight: bold;
		padding: 10px;
		color: #fff;
		text-decoration: none;
		border-right-style: solid;
		border-right-width: 2px;
		border-color: #710000;
		font-size: 12px;
		display: block;
	}
	
	.ie8 .navbutton ul li a {
		width: 96px;
		height: auto;
		display: block;
		float: left;
		font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, Arial, Helvetica, Tahoma, sans-serif;
		font-weight: bold;
		padding: 10px;
		color: #fff;
		text-decoration: none;
		border-right-style: solid;
		border-right-width: 2px;
		border-color: #710000;
		font-size: 12px;
		display: block;
	}

/* Remember to check first */
	
/* Check that, some magic needed for Firefox on Windows */

/* Fix for font size on Firefox on Wndows */

	.win.gecko .navbutton ul li a {font-size: 12px;}
	
	.navbutton a:hover {background-color: #710000;}
	
	.sidebutton a {
		padding-left: 6px;
		padding-bottom: 1px;
		padding-top: 7px;
		text-align: left;
		font-family: Verdana;
		width: 244px;
		height: 20px;
		color: #00213b;
		display: block;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #c87a16;
		text-decoration: none;
		font-size: 11px;
	}
		
	.sidebutton a:hover {
		background-color: #c87a16;
	}
	
/* The sub-buttons on the sidebar, i.e. the blue links when expanded */

	.subutton a {
		padding-left: 16px;
		padding-bottom: 0px;
		padding-top: 8px;
		text-align: left;
		width: 234px;
		height: 20px;
		font-family: Verdana;
		background-color: #a9bcd0;
		color: #00213b;
		display: block;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #00213b;
		text-decoration: none;
		font-size: 11px;
		position: relative;
	}
	
/* Hover color for the blue sub-buttons */
	
	.subutton a:hover {
		background-color: #5a8bff;
	}
	
/* Deprecated declaration for a sub-sub-button that was meant to be grey, 
however left here for future consideration. */

	.subutton2 a {
		padding-left: 32px;
		padding-bottom: 0px;
		padding-top: 8px;
		text-align: left;
		width: 218px;
		height: 20px;
		font-family: Verdana;
		background-color: #bababa;
		color: #00213b;
		display: block;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #4d4d4d;
		text-decoration: none;
		font-size: 11px;
		position: relative;
	}
	
	.subutton2 a:hover {
		background-color: #929292;
	}
	
/* Important fix for the clearing problem in IE 6 and 7 */
	
 	.clearfix:after {
   		 content: ".";
  		  display: block;
  		  height: 0;
 		   clear: both;
 		   visibility: hidden;
	}
	
	* html .clearfix { height: 1%; }
	.clearfix { display: inline-block; }
	
/* Removal of the right border for the last button on the red nav-bar */
	
	#lastbuttonfix {
	border-style:none; width: 121px;
	padding: 3px 10px 3px 10px;
	height: 34px;
	}
	
	.ie7 #lastbuttonfix {
	border-style:none; width: 120px;
	padding: 3px 10px 3px 10px;
	height: 34px;
	}
	
	.ie #lastbuttonfix {
	border-style:none; width: 121px;
	padding: 3px 10px 3px 10px;
	height: 34px;
	}
	
/* Another fix for the header bits of the newsbox */

	#headerfix {
		font-weight: bold;
		padding: 0px;
		margin-bottom: 3px;
		margin-top: 5px;
		margin-left: -10px;
	}
	
	#psgfix {
		position: relative;
		bottom: 6px;
	}