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

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

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


/*******************/
/* header elements */
/*******************/
#header { margin-bottom: 15px; }

#logo { float: left; margin-top: 33px; }
#cksa { float: right; margin-top: 16px; }


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

#sidebar { float: left; width: 159px; }
#main    { float: right; width: 741px; }
#maininner { padding: 0 5px; }

/* nav bits */
ul#nav { font-size: 1.091em; line-height: 1.333em; margin-bottom: 60px; }
ul#nav a:link,
ul#nav a:visited,
ul#nav a:hover,
ul#nav a:active { color: #999; }

ul#nav ul { margin: 5px 0 10px 0; color: #999; }

ul#nav ul a:link,
ul#nav ul a:visited,
ul#nav ul a:hover,
ul#nav ul a:active {color: #ad1d43; }

/* sidebar bits */
#log_in { background: #ad1d43; color: #fff; padding: 10px; padding-bottom: 19px; margin-bottom: 18px; }
#log_in_username { border: none; padding: 3px; padding-left: 5px; margin-top: 10px; margin-bottom: 19px; }
#log_in_password { border: none; padding: 3px; padding-left: 5px; margin-bottom: 13px; }
/* form hints */
#log_in_username       { background: #fff url(../images/form_hint_username.gif) no-repeat scroll 6px 7px; }
#log_in_username:focus,
#log_in_username.set   { background-image: none; }
#log_in_password       { background: #fff url(../images/form_hint_password.gif) no-repeat scroll 6px 5px; }
#log_in_password:focus,
#log_in_password.set   { background-image: none; }

#grading { background: #999; color: #fff; padding: 10px; padding-bottom: 3px; margin-bottom: 18px; }
#licence { background: #ad1d43; color: #fff; padding: 10px; padding-bottom: 3px; }
#register { background: #ad1d43; color: #fff; padding: 10px; margin-bottom: 18px; }


.heading { color: #ad1d43; }


.flash_header { width: 741px; height: 278px; margin-bottom: 26px; }


#leftcol  { float: left; width: 352px; }
#rightcol { float: right; width: 352px; }


#popular-products { margin-top: 20px; }
#popular-products .product {
	float: left;
	margin-right: 19px;
	width: 171px;
}


/*********/
/* items */
/*********/
.item          {  }
.item .title   { font-size: 1em; margin: 0; font-weight: 600; /* not quite bold (700) */ }
.item .date    { margin-bottom: 5px; }
.item .image   { float: left; margin-right: 5px; margin-bottom: 5px; }
.item .detail  { float: right; width: 500px; }
.item .more    {  }
.item .actions { margin: 10px 0; }
.item .actions a {
	background: #ad1d43;
	border: 1px solid #ad1d43;
	color: #fff;
	display: block;
	float: left;
	margin-right: 5px;
	padding: 2px 6px 3px;
}
.item .actions a:hover {
	background: #fff;
	border: 1px solid #ad1d43;
	color: #ad1d43;
	text-decoration: none;
}

.front .detail { width: 264px; }

.gallery .title {  }

.venue          { float: left; width: 48%; margin-bottom: 15px; }
.venue .title   { font-size: 1.091em; font-weight: normal; }
.venue .address {  }
.venue .content { margin: 10px 0; }

.timetable-event { font-size: 1.091em; }
.timetable-event .title { float: left; padding-right: 6px; border-right: 1px solid #666; margin-right: 4px; }
.timetable-event .time  { float: left; }
.timetable-event .tutor { float: left; padding-right: 5px; border-right: 1px solid #666; margin-right: 5px; }
.timetable-event .level { float: left; padding-right: 5px; border-right: 1px solid #666; margin-right: 5px; }
.timetable-event .class { float: left; }

.tutor .image { float: right; margin: 0 0 10px 10px; width: 229px; }
.tutor .image .title {
	background: #ad1d43;
	color: #fff;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 10px;
}
.tutor .title { color: #ad1d43; font-size: 1.273em; }
.tutor h3     { font-size: 1em; margin: 10px 0 0; }

.gallery-category .image  { width: 78px; }
.gallery-category .detail { width: 640px; }

.gallery-item { float: left; margin-right: 30px; margin-bottom: 30px; }

.news-item .image  { width: 78px; }
.news-item .detail { width: 640px; }

.news-item-full .image  { width: 156px; }
.news-item-full .detail { width: 560px; }

.video .title { font-size: 1.273em; color: #ad1d43; }
.video #video-player { margin: 20px 0; }

.event .date,
.event .title {
	color: #ad1d43;
	font-size: 1.091em;
	font-weight:normal;
	margin: 0;
}

#back {  }


/*******************/
/* footer elements */
/*******************/
#footer {
	background: #ad1d43;
	color: #fff;
	line-height: 4.273em;
	margin-top: 26px;
	padding-left: 18px;
}
#footer a {
	color: #fff;
}
#post-footer {
	margin-top: 22px;
	padding-left: 10px;
}
/* get rid of the space in between caused by laying out the HTML in a readable format */
#post-footer img { float: left; }


/***********************/
/* 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: 80px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */
div.formrow label.radio {
	float: none;
	text-align: inherit;
	margin-right: 0;
	width: auto;
}

/* 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 */