/* page structure and basic formatting */

body { /* font-family: Verdana, Arial, sans-serif; */}

.obclub {background: #ffffff url(../images/buttons_logos_gifs/bg_found.gif) repeat-x left top; margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;}

#container {width: 996px; margin: 0 auto; padding: 0; border: 0;}

 #header {width: 996px; height: 115px; background: #000000 url(../images/buttons_logos_gifs/foundation_crest-3.jpg) no-repeat left top; text-align: right;}

 #nav {width: 996px; height: 24px; background: #293f7f; color: #ffffff; text-align: center;}

 #main {background: #eeeeee url(../images/buttons_logos_gifs/bg_main-found.gif) repeat-y;}

  #sidenav {width: 135px; float: left; padding: 20px 5px 10px 10px; margin: 0; text-align: left; background: #ffffff;}

  #content {width: 611px; float: left; padding: 0px 10px 20px 10px; margin: 0; background-color: #ffffff;}

  #sidebar {float: left; padding: 20px 10px 10px 10px; margin: 0; text-align: left; background: #eeeeff; color: #000000; width: 190px; height: 100%;}
  #sidebaralt {float: right; padding: 10px; margin: 0 0 3px 10px; text-align: left; background: #fffced; color: #000000; width: 250px;}

 #footer {width: 976px; margin: 0; padding: 10px; background-color: #ffffff; text-align: center; border-top: 2px solid #293f7f;}

.column-container {width: 920px; margin: 0 auto;}

/* 2 columns */
.col-left {float: left; width: 449px; padding-right: 10px; margin: 0; border-right: 1px solid #293f7f; 
/* use for determining borders when creating column set: background-color: background-color: #fff0f0; */}
.col-right {float: right; width: 450px; padding-left: 10px; margin: 0;
/* use for determining borders when creating column set: background-color: #f0f0ff; */}

/* 4 columns */
.col {float: left; width: 22%; padding: 2px 5px 2px 5px; background-color: #fcfcfc; margin-right: 7px;}
.col-last {float: left; width: 22%; padding: 2px 5px 2px 5px; background-color: #fcfcfc;}

/* this set of columns is designed to display as 4 columns in a row, to squeeze in those nasty thin tables of data on the sports pages */
#col1 {float: left; padding: 10px; background: #eeeeee; margin-right: 10px;}
#col2 {float: left; padding: 10px; background: #eeeeee; margin-right: 10px;}
#col3 {float: left; padding: 10px; background: #eeeeee; margin-right: 10px;}
#col4 {float: left; padding: 10px; background: #eeeeee;}

/* the following style resets the page, levelling off the bottoms of the column DIVs to avoid wrapping issues. It is set in the DIV containing the column DIVs. */
.clear:after {content: "."; height: 0; visibility: hidden; display: block; clear: both;}

/* this is an alternative page-reset style, applied in a separate, empty DIV after the column-containing DIV */
.end-cols, .clear-divs {clear: both;}



/* low level styles and formatting 

1.   Text, Paragraphs
2.   Images
3.   Headings
4.   Links & Navigation
5.   Misc.
6.   Tables
7.   Lists
8.   Latin Prayer Archive


 1.   T e x t ,   P a r a g r a p h s   */

p {font-size: 10pt;}
#content p {line-height: 1.3em;}
#sidenav p, #sidenav li, #sidenav a, #sidebar p, #sidebar a, #sidebaralt p, #sidebaralt a {font-size: 8pt;}
#sidebar p {line-height: 1.5em;}
#footer p {font-size: 8pt;}
/* not sure why this rule was created!  #footer p + p {position: relative; top: 20px; margin-bottom: 20px;} */

.c {text-align: center;}
.l {text-align: left;}
.r {text-align: right;}
.justify {text-align: justify;}

.caption, .caption-l, .caption-r {color: #293f7f; font-size: 8pt;}
.caption {text-align: center;}
.caption-l {text-align: left;}
.caption-r {text-align: right;}
p.caption-l + p, p.caption-l + h2, p.caption-l + h3, p.caption-l + h4, p.caption-l + ul, p.caption-l + ol {clear: both; padding-top: 5px;}
p.caption-r + p, p.caption-r + h2, p.caption-r + h3, p.caption-r + h4, p.caption-r + ul, p.caption-r + ol {clear: both; padding-top: 5px;}
/* 'caption' styles: also see Images section below */

.acronym {border-bottom: 1px dotted #bbbbbb;}
.author {color: #000000; font-size: 10pt; font-weight: bold;}
.content-top-links {background: #eeeeee; padding: 3px; border: 1px solid #dddddd;}
.highlight {color: #293f7f;	font-weight: bold;}
.highlight-blue {color: #006699;}
.house {color: #293f7f; font-size: 8pt; font-style: italic;}
.normalise {color: #000000; font-weight: normal; padding-left: 10px;}
.not-bold {font-weight: normal;}
.p-staff {text-align: justify; width: 750px; margin-left: auto;	margin-right: auto;}
.quote {color: #293f7f; font-size: 12pt; text-align: left;}
.small, .sml {font-size: 8pt;}
.spacer {padding: 0; margin: 0;}

.announce {
	text-align: center;
	font-size: 10pt;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	background: #f8f7f7;
	border: 1px dotted #293f7f;
}

.blockquote {text-align: left; width: 750px; margin-left: auto; margin-right: auto;}
.blockquote-c {text-align: center; width: 750px; margin-left: auto;	margin-right: auto;}
.blockquote-r {text-align: right; width: 750px;	margin-left: auto; margin-right: auto;}
.blockquote-wide {text-align: left;	width: 850px; margin-left: auto; margin-right: auto;}
.blockquote-narrow {text-align: left; width: 650px;	margin-left: auto; margin-right: auto;}

/*  Text-boxes; asides  */
.textbox-l {width: 300px; background-color: #f6f6ff; padding: 5px 10px; border: 1px solid #eaeaff; margin: 0 5px 2px 0; float: left;}
.textbox-r {width: 300px; background-color: #f6f6ff; padding: 5px 10px; border: 1px solid #eaeaff; margin: 0 0 2px 5px; float: right;}
.textbox-l p, .textbox-r p {font-size: 10pt; color: #000000;}

/*

 2.   I m a g e s   */

img {border: none;}

img.img-header {padding-top: 10px;}

img.img-l {float: left;	padding: 0 5px 2px 0;}
img.img-r {float: right; padding: 0 0 2px 5px;}

/* image boxes */
.img-cap-l, .img-cap-r {width: 205px; color: #293f7f; text-align: center; font-size: 8pt;}
.img-cap-l {float: left; padding: 0 5px 2px 0;}
.img-cap-r {float: right; padding: 0 0 2px 5px;}
.img-cap-l img, .img-cap-r img {padding-bottom: 2px;}
.img-cap-l p, .img-cap-r p {padding: 0;}

.caption-l img {float: left; padding: 0 10px 0 0;}
.caption-r img {float: right; padding: 0 0 0 10px;}

.img-border-bk {border: 1px solid #000000;}
.img-no-border {border: 0;}

#sidebar img {border: 1px solid #bbbbbb;}
#sidebar img.img-no-border {border: 0;}

/* The following styles were added for the Canadian Rugby Tour (2008) CSS roll-over image link - adapt it for other roll-overs */
#special {margin-left: auto; margin-right: auto; height: 200px; width: 600px;}
#special .hide {display: none;}
#special p a:link, #special p a:visited {background: url(../images/home-pg_rugby-tour.jpg) no-repeat center top; display: block; height: 200px; width: 600px;}
#special p a:hover, #special p a:active {background-position: 0 -200px;}
/* End of Rugby Tour link styles */

img.acc-news-img {
	float: left;
	padding: 3px 5px 2px 2px;
	/* padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 2px; */
}

.p-staff img {float: left; margin-top: 3px; margin-right: 5px; margin-bottom: 1px; border: 1px solid #000000;}

/* international flags on nav menu */
ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li a img {position:absolute; top: 5px; left: 125px;}

/*

 3.   H e a d i n g s   */

h1, h2, h3, h4 {text-align: left;}
h1, h2 {font-size: 14pt;}
h1, h3, h4 {font-weight: bold;}
h1, h3 {color: #293f7f;}
h2, h4 {color: #000000;}

h1 {
	padding-top: 1.5em;
	padding-bottom: 1em;
	margin-top: 0;
}
h2 {
	font-weight: normal;
	line-height: 2em;
	border-bottom: 1px dotted #aaaaaa;
}
h3 {
	font-size: 12pt;
	line-height: 1.8em;
	border-bottom: 1px dotted #cccccc;
}
h4 {
	font-size: 11pt;
}

h1.home {font-size: 2.2em; font-weight: normal;}

#sidenav h4, #sidebar h4, #sidebaralt h4 {font-size: 10pt; font-weight: bold; color: #293f7f; margin: 0 0 -10px 0; padding: 10px 0 0 0;}

/*

 4.   L i n k s   &   N a v i g a t i o n   */

/* for main nav bar, see bottom of document */

a:link {text-decoration: none; color: #0000CC;}
a:visited {text-decoration: none; color: #770077;}
a:active {text-decoration: underline; color: #0000FF;}
a:hover {text-decoration: underline; color: #0000FF;}

/* SideNav links */
#sidenav ul {padding-left: 0; margin-left: 0; line-height: 1.7em; list-style-type: none;}
#sidenav ul li {padding-left: 0; margin-left: 0;}
#sidenav ul li a {padding-left: 8px; display: block; width: 100%; border-bottom: 1px dotted #dddddd; text-decoration: none;}

#sidenav ul li a:link {color: #0000ff; background: url(../images/buttons_logos_gifs/bullet_grey.gif) no-repeat left center;}
#sidenav ul li a:visited {color: #000000; background: url(../images/buttons_logos_gifs/bullet_grey.gif) no-repeat left center;}
#sidenav ul li a:active {color: #777777; background: url(../images/buttons_logos_gifs/bullet_grey.gif) no-repeat left center;}
#sidenav ul li a:hover {color: #293f7f; background: url(../images/buttons_logos_gifs/bullet_blue.gif) no-repeat left center;}

#sidenav ul li.sidenav-this-page {padding-left: 8px; display: block; width: 100%; border-bottom: 1px dotted #dddddd; background: url(../images/buttons_logos_gifs/bullet_bk.gif) no-repeat left center;}

/* The following few lines describe the three grey link boxes at the top of the News, LP and Events pages */
div#ql {margin-left: auto; margin-right: auto; width: 450px; padding: 3px 0 0 0;}
ul.quicklinks {list-style-type: none; /* margin-left: -5px; */}
ul.quicklinks li {display: inline; float: left; font-size: 10pt; margin-right: 5px;}
ul.quicklinks li a {display: block; padding: 5px; width: 110px; text-align: center; background: #eeeeee; border: 1px solid #cccccc;}
ul.quicklinks li a:hover {display: block; padding: 5px; width: 110px; text-align: center; background: #f5f5f5; border: 1px solid #777777; text-decoration: none;}
li.pg-news a, li.pg-lp a, li.pg-events a {display: block; padding: 5px; width: 110px; text-align: center; background: #eeeeee; border: 1px solid #cccccc; font-weight: bold;}

/* These lines describe the links appearing in the old table version of the News/LP/Events nav bar; it has 
since been replaced with a list-based version (defined above). */
#topnavbar a:link {color: #000000; text-decoration: none;}
#topnavbar a:visited {color: #000000; text-decoration: none;}
#topnavbar a:active {color: #000000; text-decoration: none;}
#topnavbar a:hover {color: #0000AA; text-decoration: none;}

/* These few lines redefine the link colours in the table on the school_memorial page. At the time of writing the website's 
standard blue links clashed rather horribly with the cells' red (BE1D1D) background colour! Not being page-specfic, these 
styles will be replicated across the site whenever a text link is placed in a cell styled with 'cell-h2-l'. */
td.cell-h2-l a:link {color: #ffffff; font-weight: bold; text-decoration: underline;}
td.cell-h2-l a:hover {color: #cccccc; font-weight: bold; text-decoration: underline;}
td.cell-h2-l a:active {color: #cccccc; font-weight: bold; text-decoration: underline;}
td.cell-h2-l a:visited {color: #bbbbbb; font-weight: bold; text-decoration: underline;}

/*

 5.   M i s c.   */

hr {width: 50%;	color: #293f7f;	background-color: #293f7f;}

/* These styles describe the new, slightly more adaptable News section

#news {margin: 0 auto; width: 750px;}

  first version...
#news a {display: block; margin: 5px 0 0 0; padding: 3px 3px 3px 20px; width: 627px; font-size: 10pt;}
#news a:link {background: url(../images/news/news_link.gif) no-repeat left center #293f7f; color: #ffffff;}
#news a:hover {background: url(../images/news/news_hover.gif) no-repeat left center #ce2d2d; color: #ffffff;}
#news a:active {background: url(../images/news/news_active.gif) no-repeat left center #293f7f; color: #ffffff;}
#news a:visited {background: url(../images/news/news_visited.gif) no-repeat left center #9e0d0d; color: #ffbbbb;}
#news .story {display: none; margin: 1px 0 0 0; padding: 5px; width: 640px; background: #dddddd; font-size: 10pt;}
*/

#news a.title {display: block; margin: 3px 0 0 0; padding: 2px 2px 2px 15px; font-size: 10pt; font-weight: bold; border-bottom: 1px solid #dddddd;}
#news a:link.title {background: url(../images/news/news_link.gif) no-repeat left center #ffffff; color: #293f7f;}
#news a:hover.title {background: url(../images/news/news_hover.gif) no-repeat left center #ffffff; color: #ce2d2d;}
#news a:active.title {background: url(../images/news/news_active.gif) no-repeat left center #ffffff; color: #293f7f;}
#news a:visited.title {background: url(../images/news/news_visited.gif) no-repeat left center #ffffff; color: #9e0d0d;}
#news .story {display: none; margin: 0; padding: 3px 0 15px 15px; background: #ffffff; font-size: 10pt;}

/*

 6.   T a b l e s   */

table {border: 0; background: #ffffff; border-collapse: collapse;}

.tbl-def {margin-left: auto; margin-right: auto;}

.tbl-float-l {float: left; margin-right: 5px;}
.tbl-float-r {float: right;	margin-left: 5px;}

  /* data cells */

#content td {font-size: 8pt; padding: 3px; border: 1px solid #ffffff;}

.cell-h1, .cell-h1-l {background-color: #000000; color: #ffffff; font-weight: bold;}
.cell-h1 {text-align: center;}

.cell-h2, .cell-h2-l, .cell-h2-l-b, .cell-news-header {background-color: #293f7f; color: #ffffff;}
.cell-h2 {font-weight: bold; text-align: center;}
.cell-h2-l-b {font-weight: bold;}

.cell-c1, .cell-c1-c, .cell-c1-r {background-color: #eeeeee;}
.cell-c1-c {text-align: center;}
.cell-c1-r {text-align: right;}

.cell-c2, .cell-c2-c, .cell-c2-r {background-color: #dddddd;}
.cell-c2-c {text-align: center;}
.cell-c2-r {text-align: right;}

.cell-c3, .cell-c3-c, .cell-c3-r {background-color: #909090; color: #ffffff;}
.cell-c3-c {text-align: center;}
.cell-c3-r {text-align: right;}


  /* navigation */

.cell-nav {
	font-size: 11pt;
	text-align: center;
	width: 160px;
	background-color: #eeeeee;
	padding: 5px;
	border: 1px solid #dddddd;
}
.cell-navbar {
	font-size: 10pt;
	text-align: center;
	width: 110px;
	background-color: #eeeeee;
	padding: 3px;
	border: 1px solid #cccccc;
}

  /* images */

.cell-img-white, .cell-img-grey, .cell-img-dkgrey {font-size: 10pt; text-align: center; padding: 10px;}

.cell-img-white {background-color: #ffffff;}
.cell-img-grey {background-color: #dddddd;}
.cell-img-dkgrey {background-color: #999999;}

  /* misc. */

.cell-news-sep {
	text-align: center;
	background-color: #ffffff;
	border-top: #000000 1px solid;
	border-bottom: #000000 1px solid;
}

.cell-lp-archive {
	background-color: #ddeeff;
	font-size: 10pt;
	padding: 2px;
}

.column-division {
	border-left: #293f7f 2px solid;
}

  /* forms */

.form-cell-1, .form-cell-2, .form-cell-h1 {font-size: 11pt;}
.form-cell-1, .form-cell-2 {text-align: left;}
.form-cell-2, .form-cell-h1 {color: #ffffff; border-bottom: #ffffff 1px solid;}

.form-cell-1 {
	background-color: #c0c0c0;
	border-bottom: #dddddd 1px solid;
}
.form-cell-2 {
	background-color: #B01010;
}
.form-cell-h1 {
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	background-color: #000000;
}

/*

 7.   L i s t s   */

#content ul li, #content ol li {font-size: 10pt;}

/*  

 8.   L a t i n   P r a y e r   A r c h i v e   */

.lp-archive {background: #ddeeff; margin: 10px;}

.lp-archive p {font-size: 10pt;}

.lp-archive li {font-size: 10pt;}



/*   C S S   N A V I G A T I O N   M E N U   B A R   */

/* Only the top bar of the menu is displayed horizontally, making it unique (per page). It can therefore be described with an id (#nav-1), 
and the subsequent levels of the menu (nav-2, nav-3, etc.) can be described with classes, making them reusable - as they need to be. */

ul#nav-1 {margin:0; padding:0; list-style:none; width:100%; height:16px; /* border-top:1px solid #293f7f; border-bottom:1px solid #293f7f; */ font-size: 8pt; font-weight: bold;}
ul#nav-1 li	{margin:0; padding:0; display:block; float:left; position:relative; /* width:120px; */}

ul#nav-1 li a:link, ul#nav-1 li a:active, ul#nav-1 li a:visited
	{padding:5px 0 6px 12px; display:block; text-align:left; text-decoration:none; background:#293f7f url(../images/buttons_logos_gifs/menu-down_l-v.gif) no-repeat left center; color:#ffffff; width:187px; /* height:16px; border-left:1px solid #293f7f; border-right:1px solid #293f7f; */}
ul#nav-1 li:hover a, ul#nav-1 li a:hover
	{padding:5px 0 6px 12px; display:block; text-align:left; text-decoration:none; background:#7788dd url(../images/buttons_logos_gifs/menu-down_h-a.gif) no-repeat left center; color:#ffffff; width:187px; /* height:16px; border-left:1px solid #ff0000; border-right:1px solid #ff0000; */}

/* these next two lines describe the 'Home' button at the beginning of the nav menu - specifically, giving the link a different arrow as it isn't a drop-down menu */
	ul#nav-1 li a:link.css-nav-home, ul#nav-1 li a:visited.css-nav-home	{padding:5px 0 6px 10px; background:#293f7f url(../images/buttons_logos_gifs/menu-down_hm-off.gif) no-repeat left center; width:190px;}
	ul#nav-1 li:hover a.css-nav-home, ul#nav-1 li a:hover.css-nav-home,	ul#nav-1 li a:active.css-nav-home {padding:5px 0 6px 10px; background:#7788dd url(../images/buttons_logos_gifs/menu-down_hm-on.gif) no-repeat left center; width:190px;}

/* nav-2 */
ul#nav-1 li ul.nav-2 {
	display:none;
	margin:0; padding:0; /*padding:1px 1px 0 1px*/
	list-style:none;
	font-size: 8pt; font-weight: normal;
	width:187px; position:absolute; top:24px; left:0px;
	/*border:1px solid #293f7f; border-top:none;
	background:#ce1d1d;*/
	}
ul#nav-1 li:hover ul.nav-2 {display:block;}
ul#nav-1 li ul.nav-2 li	{clear:both; /* width:150px; */}

ul#nav-1 li ul.nav-2 li a:link, ul#nav-1 li ul.nav-2 li a:visited
	{clear:left; background:#293f7f url(../images/buttons_logos_gifs/menu-down_off.gif) no-repeat left center; padding: 4px 0 4px 12px; width:187px; /*height: 13px; border:none;*/ border-top:1px solid #354989; position:relative; z-index:1000; text-align:left;}
ul#nav-1 li ul.nav-2 li:hover a, ul#nav-1 li ul.nav-2 li a:active, ul#nav-1 li ul.nav-2 li a:hover
	{clear:left; background:#152a6a url(../images/buttons_logos_gifs/menu-down_on.gif) no-repeat left center; padding: 4px 0 4px 12px; width:187px; /*height: 13px; border:none;*/ border-top:1px solid #354989; position:relative; z-index:1000; text-align:left;}

/* nav-3 */
ul#nav-1 li ul.nav-2 li ul.nav-3 {
	display:none; z-index:900;
	margin:0; padding:0; /*padding:1px 1px 0 1px;*/
	list-style:none;
	position:absolute; left:150px; top:2px;
	/*border:1px solid #293f7f; border-left:1px solid #293f7f;
	background:#ce1d1d;*/
	}
ul#nav-1 li ul.nav-2 li:hover ul.nav-3 {display:block;}

ul#nav-1 li ul.nav-2 li ul.nav-3 li a:link, ul#nav-1 li ul.nav-2 li ul.nav-3 li a:visited {background:#293f7f url(../images/buttons_logos_gifs/menu-down_off.gif) no-repeat left center;}
ul#nav-1 li ul.nav-2 li ul.nav-3 li:hover a, ul#nav-1 li ul.nav-2 li ul.nav-3 li a:hover, ul#nav-1 li ul.nav-2 li ul.nav-3 li a:active {background:#9e0d0d url(../images/buttons_logos_gifs/menu-down_on.gif) no-repeat left center;}
	
/* nav-4 */
ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 {
	display:none; z-index:900;
	margin:0; padding:0; /*padding:1px 1px 0 1px;*/
	list-style:none;
	position:absolute; left:150px; top:2px;
	/*border:1px solid #ce1d1d; border-left:1px solid #ce1d1d;
	background:#ce1d1d;*/
	}
ul#nav-1 li ul.nav-2 li ul.nav-3 li:hover ul.nav-4 {display:block;}
ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li a:link, ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li a:visited {background:#293f7f url(../images/buttons_logos_gifs/menu-down_off.gif) no-repeat left center /*b9121b*/;}
ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li:hover a, ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li a:hover, ul#nav-1 li ul.nav-2 li ul.nav-3 li ul.nav-4 li a:active {background:#9e0d0d url(../images/buttons_logos_gifs/menu-down_on.gif) no-repeat left center;}
	
/* This section describes the double-chevron >> sub-menu cue, displayed to the right of the text */
ul#nav-1 li ul.nav-2 li a span, ul#nav-1 li ul.nav-2 li ul.nav-3 li a span
	{position:absolute; top:0; left:138px; font-size:12pt; color:#fe676f;}
ul#nav-1 li ul.nav-2 li:hover a span, ul#nav-1 li ul.nav-2 li a:hover span, ul#nav-1 li ul.nav-2 li ul.nav-3 li:hover a span, ul#nav-1 li ul.nav-2 li ul.nav-3 li a:hover span
	{position:absolute; top:0; left:138px; font-size:12pt; color:#ffffff;}