/*
file:			page.css
author:			jasper morgan
date:			01 May 2007
version:		1.0
comments:		Styles that are used for pages in the website. (Note that a Pop-Up window is not considered a page.)
				For the column layout, credit goes to Alan Pearce for his article: http://www.alistapart.com/articles/multicolumnlayouts
*/

@import "global.css";

* html #container{
  height:1%; /* So IE plays nice */
}

body {
	background-color: #686460;
}

* html body {
	text-align: center;
}

#page { /*IE doesn't honour the max-width, min-width css.*/
	min-width: 940px;
	max-width: 940px;
	background-color: #fff;
	position: relative;
	margin: 0 auto;
	margin-top: 4px;
}

* html #page { /*Star-Hack to get IE to have a max-width and min-width.*/
	width: 720px  /*fallback value */;
	width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ?
						document.documentElement.clientWidth : document.body.clientWidth)
					> 938 ? "855px" : (((document.compatMode && document.compatMode=='CSS1Compat') ?
						document.documentElement.clientWidth : document.body.clientWidth) < 938 ? "855px" : "99.7%"));
	text-align: left;
}


/*-----------------------------------------------------------
	The Header and Footer for a Page
-----------------------------------------------------------*/
#header {
	background-color: #fff;
	width: 100% !important; /*all browsers except IE will use this width;*/
	width: 110%;
}



/*------------------- Logo ---------------------------------
	The top part of the page that contains the Logo on the
	left, the Studio Name and right-hand global nagivation links.
*/
#logo {
	position: relative;
	width: 100%;
	height: 98px;
}

#logo img {
	border: 0px;
	display: block;
	float: left;
}

#globalLinks {
	position: absolute;
	right: 6px;
	bottom: 6px;

}

#globalLinks a {
	font-size: 1em;
	font-weight: bold;
	color: #908F8B;
	text-decoration: none;
	padding-left: 10px;
}

#globalLinks a:hover {
	color: #2f2f2f;
}

/*------------------- Banner ------------------------------
	The coloured banner that contains the name of the page
	and the navigation links.
*/

#banner {
	position: relative;
	width: 100% !important; /*all browsers except IE will use this width;*/
	width: 100%;
	height: 134px;
	background: #fff url(../img/page/pageBannerStrip.jpg) repeat-x;
	color: #fefefe;

}

#banner #pageName {
	float: left;
	width: 400px;
	height: 134px;


}

/*The name of the current page aligned to the bottom of the banner.*/
#banner #pageName span {
	position: absolute;
	bottom: 18px !important; /*all browsers except IE*/
	bottom: 44px;
	left: 10px;
	font-size: 1.8em;
}

/*------------------- Footer ------------------------------
	The footer of the page that contains the copyright
	statement.
*/

#footer {
	clear: both;
	height: 15px;
	padding-top: 20px;
	background-color: #cbc5b5;
	font-family: arial, verdana, sans-serif;
	font-size: 0.9em;
	text-align: center;
	color: #2f2f2f;
	width: 100% !important; /**Ignored by IE 6*/
	width: 110%;
}


/*-----------------------------------------------------------
	The Columns for a Page
-----------------------------------------------------------*/
/*The conten tof a page - the main text and sidebar.*/
#content{
  padding: 4px 15px;
}

/*Star-hack to that the content in IE is wide enough*/
* html #content {
	width: 105%;
}

/*Used for any Titles within the page content or sidebar.*/
#content h1, #content h2 {
	font-size: 1.1em;
}
#content h1 {
	border-bottom: 1px solid #c7c7bd;
	margin: 10px 0px;
}

/*The main text in a page.*/
#maintext {
  width:70%;
  float:left;
  margin-bottom: 20px;
}

/*This div is only for providing a gutter between the
  main text and the sidbar.  The right padding creates the effect.*/
#maintext div {
	padding-right: 20px;
}

#breadcrumbs {
	font-size: 0.9em;
	color: #aea29d;
	font-weight: normal;
	padding-bottom: 4px;
}

#breadcrumbs a {
	font-weight: bold;
	color: #aea29d;
}


#sidebar{
  width:30%;
  float:right;
}

/*-----------------------------------------------------------
	Content Styles within a Page
-----------------------------------------------------------*/
/*Positions an image to the left of a piece of text. The text wraps under the image.*/
.image-left{
	float: left;
	margin: 4px 10px 0 0;
}

/*Positions an image to the right of a piece of text. The text wraps under the image.*/
.image-right {
	float: right;
	margin: 4px 0 0 10px;
}

#content {
	text-align: justify;
	line-height: 1.4;
}

img {
	border: 1px solid #2f2f2f;
}

/*A Section can group elements together. For example a header, images, text etc.
By using a Section, the floating image and wrapped text remain together.
It is recommended to us a section when added related content.*/
.section {
	float: left;
	width: 99%;
	padding: 0px; /*Disable any padding - padding should be applied outside a section.*/
}

.section p {
	margin: 0.7em 0 0 0;
}

/**Star Hack - this applies only to IE 6 and lower*/
* html .section {
	padding: 0 0 12px 0;
	width: 98%;
}

.image-caption-medum, .image-caption-large {
	text-align: center;
	font-style: italic;
}

.image-caption-medum {
	width: 180px;
}

.image-caption-large {
	width: 260px;
}