/***************/
/* main layout */
/***************/
body { margin: 0; padding: 0; /* backgrounds? */ }

#bodyWrapper { width: 944px; margin: auto; }

/* specific link colours for this site */
a         { color: #ddd; text-decoration: none; }
a:link,
a:visited { color: #ddd; text-decoration: underline; }
a:hover,
a:active  { color: #00bfde; text-decoration: underline; }


/*******************/
/* header elements */
/*******************/
#header {
	background: transparent url(../images/header.png) no-repeat scroll 0 0;
	height: 35px;
	margin-bottom: 7px;
	overflow: hidden;
	padding: 246px 0 0 359px;
	width: 584px;
}

ul#nav      { font-size: 1.4em; }
ul#nav li   { float: left; margin-left: 5px; }
ul#nav li a {
	background: none;
	display: block;
	line-height: 2.5em;
	padding: 0 11px;
	text-decoration: none;
}
ul#nav li a:link,
ul#nav li a:visited { color: #00bfde; }
ul#nav li a:hover,
ul#nav li a:active  { color: #c00076; background: #383c3d; text-decoration: none; }


/********************/
/* content elements */
/********************/

#side-zones {
	background: #000 url(../images/learning-zones-bg.png) repeat-x scroll 0 0;
	float: left;
	margin-right: 10px;
	padding: 9px 17px 7px 16px;
	width: 172px;
}
#main {
	background: #000 url(../images/main-bg.png) repeat-x scroll 0 0;
	float: left;
	padding: 12px 17px 7px 18px;
	width: 445px;
}
#side-talent-news {
	float: right;
	width: 239px;
}

#latest-news {
	background: #000 url(../images/latest-news-bg.png) repeat-x scroll 0 0;
	margin-top: 16px;
	padding: 10px;
}

h1 {
	border-bottom: 1px solid #fff;
	font-size: 2em;
	letter-spacing: -1px;
	line-height: 1em;
	padding-bottom: 4px;
}

h2 {
	color: #c00076;
	font-size: 1.2em;
	margin: 0;
}


#side-zones li { margin-bottom: 10px; }
#side-zones li a.image {
	float: left;
	height: 49px;
	margin-right: 10px;
	text-decoration: none;
	width: 49px;
}
#side-zones li a.text  {
	color: #fff;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.167em;
	padding-top: 9px;
	text-decoration: none;
	width: 90px;
}

.content {  }
.content h1 { font-size: 2.31em; padding-bottom: 10px; }
.content img { border: 4px solid #fff; }

ul    { margin: 0 0 10px 15px; padding: 0; }
ul li { margin: 0; padding: 0; }

#gallery {  }
.gallery-item {
	border: 4px solid #fff;
	float: left;
	height: 100px;
	margin-bottom: 6px;
	margin-right: 6px;
	width: 120px;
}
.gallery-quad {
	float: left;
	width: 134px;
}
.gallery-quad img {
	border: 4px solid #fff;
	float: left;
	margin-bottom: 6px;
	margin-right: 6px;
}


#content-alt { float: left; width: 252px; }
#gallery-alt { float: right; width: 134px; }

#gallery-alt h1 { padding-top: 9px; }


/*********/
/* items */
/*********/
.item              { margin-bottom: 10px; }
.item .itemHeader  {  }
.item .itemTitle   { font-weight: bold; }
.item .itemDate    { font-style: italic; }
.item .itemContent {  }
.item .itemImage   { float: left; margin-right: 5px; margin-bottom: 5px; }
.item .itemMore    {  }

.more { text-transform: uppercase; }

#itemBack          {  }


/***********************/
/* general form styles */
/***********************/
.required { color: #f00; }

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 10px;
}

div.formrow label {
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 40px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 50px; } /* label width + label margin-right, override as above */
div.formrow label.radio {
	float: none;
	text-align: inherit;
	margin-right: 0;
	width: auto;
}

div.formrow label  { width: 75px; }
div.formrow.indent { margin-left: 85px; } /* label width + label margin-right, override as above */

/* message and error boxes, not just useful in contact form */
#messages,
#errors,
#warnings,
#info { margin-bottom: 10px; }
.message { border: 1px solid #080; background: #efe; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */
.message.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
.message.info { border-color: #880; background: #ffe; color: #880; } /* info box in yellow */
.message.warn { border-color: #f40; background: #ffe; color: #f40; } /* warning box in orange */
.message.error { border-color: #f00; background: #fee; color: #f00; } /* error box in red */