@charset "utf-8";
/* CSS Document */

div#header h1, 
header h1,  
header#brand h1 {
  margin: 0 6%;				/* Add left/right margin, to replace padding used at mobile (to let image go full-width) */
  padding: 10px 0;			/* Take off left/right padding, replaced with margin on outer at tablet */
}
header h1 {
  text-align: left;
}

header h1 img {
  width: 300px;		/* Tried auto, but it went to 354px wide! */
}

header h1 {
  width: 88%;
  margin-left: 6%;
}

div#outer-content-area {
  width: 88%;
  margin-left: 6%;
}

section#maincontent {
  padding: 0;				/* Take off left/right padding, replaced with margin on outer at tablet */
}

div#breadcrumbs {
  margin-left: 0%;			/* Remove the margin, replaced with margin on outer at tablet */
}

section#maincontent > a:first-child img, 
section#maincontent > img:first-child {
  margin-left: 0;			/* Image must now behave normally */
  max-width: 100%;
}

aside#sidebar {
  padding: 0;				/* Take off left/right padding, replaced with margin on outer at tablet */
  width: 100%;
}

div.image { 		/* Separate declaration to cover main title image */
  /*float: left;*/			/* Don't float it until desktop */
  margin-left: 0%;
}

p.intro {
  clear: left;		/* Because the image now floats left and we don't want text to run up the side of it */
}

section#maincontent p {
  text-align: justify;		/* This was in mobile, but justify doesn't look good on mobile */
}


/**************************************	*/
/*		PROGRAMMES						*/
/**************************************	*/

table.standard.programme {
  /*width: auto !important;*/
}

/**************************************	*/
/*		TWO-COLUMN LAYOUTS				*/
/**************************************	*/

div.twocol {
  overflow: auto;
}
div.twocol div.col1,
div.twocol div.col2 {
  float: left;
  width: 48%;
}
div.twocol div.col2 {
  margin-left: 3%;
}
#maincontent div.twocol h3 {
  width: auto;
}