@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: 250px;		/* 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%;
}
div.typeimage {		/* Switch off "Force the title image to reach across the page" from mobile */
  width: auto;
}



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;
}


/**************************************	*/
/*		RICHIE GINTHER ADVERT			*/
/**************************************	*/

@media only screen and (min-width: 700px) {

  header { position: relative; }

  .advert {
    background: white url("../Images/orc/Ginther-advert-001.jpg") no-repeat 0 0;
    height: 80px;
    width: 468px;
    position: absolute;
    top: 0;
    right: 6%;
    cursor: pointer;
	background-size: 100%;
    width: calc(88% - 250px - 20px);		/* 6% either size, then allow 250px for logo, and 20px margin */
    max-width: 468px;
  }

}