/* ---------- Theme image base URL ---------- */
/* ---------- Theme Colors ---------- */
/* ---------- Gray Color ---------- */
/* ---------- Other Colors ---------- */
/* ---------- Shadow Colors ---------- */
/* ---------- Global Link ---------- */
/* ---------- Border radius ---------- */
/* ---------- Typography - Font, line-height, and color for body text, headings, and more ---------- */
/* ---------- Font weight ---------- */
/* ---------- Heading ---------- */
/* ---------- Padding and marign spacing ---------- */
/* ---------- Button ---------- */
/* ---------- Alert box ---------- */
/* ---------- Screen size definitions ---------- */
/* ---------- Logo height ---------- */
/* ---------- Show image sizes ---------- */
/* ---------- Modal ---------- */
/*
	HOMEPAGE CSS DEFINITIONS
	=============================
	Author:		the white agency
	Born:		25/08/07
	Modified:
	Project:	Ticketek

	Purpose: 	To define all styles for the homepage elements. This stylesheet
	Dependancy:	ticketekCore.css
*/
#mainLogo > div {
  display: block;
}

a, a:active, a:visited {
  text-decoration: none;
}

#wrapBody {
  background-image: none;
}

/* hero module */
#heroModule {
  /* padding: 10px; */
  width: 987px;
  height: 345px;
  border-top: none;
  border-left: none;
  border-right: none;
}

#heroModule {
  background-color: #FFF;
}

#heroModuleInner {
  position: relative;
}

.heroImage {
  float: left;
  position: relative;
}

.heroImage, #heroVideo {
  width: 980px;
  height: 319px;
  /* increased height due to Google Chrome Flash */
  border: 1px solid #EBEBEB;
}

#heroVideo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#heroModule .heroImage img {
  width: 980px;
}

#heroVideoClose {
  display: block;
  z-index: 2;
  position: absolute;
  top: -11px;
  left: -12px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background: #000;
  border: 2px solid #F3F3F3;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #FFF !important;
}

a.heroVideoButton {
  position: absolute;
  left: 45%;
  top: 30%;
  display: inline-block;
  background: url(/images/PlayButton.png) top left no-repeat;
  width: 115px;
  height: 115px;
}

#heroVideoClose, a.heroVideoButton {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#heroVideoClose.mouseOver, a.heroVideoButton.mouseOver {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

#heroVideoClose.mouseOver:hover,
#heroVideoClose.mouseOver:active,
a.heroVideoButton.mouseOver:hover,
a.heroVideoButton.mouseOver:active {
  opacity: 0.85;
  filter: alpha(opacity=85);
}

#heroModule .heroImage div.heroContent {
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0));
  pointer-events: none;
}

#heroModule .heroImage div.heroContent h2.heroTitle {
  bottom: 105px;
  left: 30px;
  position: absolute;
  width: 75%;
  line-height: 35px;
}

#heroModule .heroImage div.heroContent h2.heroTitle a {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
}

#heroModule .heroImage div.heroContent a.heroGetTickets {
  top: 212px;
  left: 30px;
  position: absolute;
  background-color: #428226;
  text-transform: capitalize;
  font-size: 22px;
  height: 40px;
  padding: 7px 0 0;
  width: 260px;
  text-align: center;
  border-bottom: none;
  border-right: none;
}

#heroModule .heroImage div.heroContent a.heroGetTickets:hover {
  background-color: #5FB238;
}

#heroModule .heroImage div.heroContent a.heroGetTickets .fa-long-arrow-right {
  display: none;
}

/*
#heroNav{
	position: absolute;
	left: 434px;
	top: 151px;
	height: 124px;
	width: 165px;
}
#heroNavPaging{
	position: absolute;
	top: 94px;
	right: 0;
	width: 143px;
	height: 16px;
	overflow: hidden;
	padding: 7px 10px;
}
*/
/* Changes to remove non-clickable space on hero image */
#heroNav {
  position: absolute;
  right: 6px;
  top: 275px;
}

#heroNavPaging {
  background: transparent;
  width: 100% !important;
  margin-left: -20px;
  height: 25px;
  border-radius: 0;
  border-top-left-radius: 4px;
  padding: 10px 10px;
  overflow: hidden;
}

.heroNavPage,
.heroNavPage:hover {
  float: left;
  display: block;
  margin: 0 17px 0 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  background: url(/images/whiteDotGreenBorder.png) no-repeat;
  background-size: 18px 18px;
  margin-left: 2px;
}

.heroNavPageLast, .heroNavPageLast:hover {
  margin: 0;
}

.heroNavPage.currentPage,
.heroNavPage.currentPage:hover {
  cursor: default;
  background: url(/images/greenDot.png) no-repeat;
  background-size: 18px 18px;
}

/*
.heroNavPopup{
	position: absolute;
	top: 0;
	left: 0;
	width: 149px;
	height: 63px;
	overflow: hidden;
	padding: 8px;
	cursor: pointer;
}
*/
.heroNavPopup {
  position: absolute;
  bottom: 50px;
  right: 5px;
  width: 160px;
  height: 63px;
  overflow: hidden;
  padding: 8px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.75);
}

.heroNavPopup img {
  float: left;
  border: 1px solid #F3F3F3;
}

.heroNavPopup div {
  padding-left: 5px;
  max-height: 60px;
  overflow: hidden;
}

.heroNavPopup h6,
.heroNavPopup p {
  font-size: 12px;
  line-height: 15px;
  color: #FFF;
  margin: 0;
  padding: 0;
}

.heroNavPopup h6 {
  font-weight: bold;
}

/*
#heroNavPopupArrow {
	position: absolute;
	top: 79px;
	left: 0;
	width: 28px;
	height: 14px;
	background: url("/images/navigation_arrow.png") no-repeat;
	opacity: .75;
	filter: alpha(opacity = 75);
}
*/
#heroNavPopupArrow {
  position: absolute;
  top: -5px;
  left: 0;
  width: 28px;
  height: 14px;
  background: url("/images/navigation_arrow.png") no-repeat;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.heroText {
  float: right;
  height: 300px;
  font-size: 12px;
  background: #F3F3F3;
  border: 1px solid #F3F3F3;
  padding: 0px 10px;
  width: 312px;
}

.heroText .heroTextInner {
  height: 225px;
  margin-bottom: 15px;
  overflow: hidden;
  line-height: 1.5em;
}

.heroText h2,
.heroText h2 a,
.heroText h2 a:visited,
.heroText h2 a:active,
.heroText p,
.heroText div {
  color: #555;
  padding: 0;
  margin: 0 0 10px 0;
}

.heroText h2 {
  font-weight: 700;
  font-family: "Open Sans", Arial, Helvetica, Sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1.2em;
  word-wrap: break-word;
  padding: 10px 5px 0 5px;
}

.heroText div {
  padding: 0 5px;
}

.heroText h2 a:hover {
  color: #7B7B7B;
  transition: color 0.5s ease;
}

.heroText .yellowGradientButton {
  float: right;
  font-weight: 500;
  /*font-family:'Open Sans', Arial, Helvetica, Sans-serif;*/
  font-size: 19px;
  /* border-bottom: 1px solid #ebebeb; */
  white-space: nowrap;
}

/* main features control */
#moreEventsSection {
  /*height: 300px;*/
  min-height: 152px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#myEventsSection {
  margin-top: -5px;
}

.leftHomePageSection {
  float: left;
  border: 1px solid #ebebeb;
  border-top: none;
}

#primaryContainerGenre #moreEventsSection {
  padding-left: 15px;
}

#moreEventsSection .eventModule a {
  position: relative;
  display: block;
}

#moreEventsSection .eventModuleCopy .rightArrowMargin {
  margin-right: 15px;
  overflow: hidden;
}

#moreEventsSection .eventModule a .notification {
  position: absolute;
  top: 0;
  left: 0;
  width: 57px;
  height: 57px;
}

#primaryContainerAppendix {
  padding: 15px;
  background-color: #fff;
  width: 622px;
}

#primaryContainerAppendix h3 {
  font-weight: 700;
  font-size: 22px;
  /*color: #555;*/
  color: #001828;
  /*	font-family:'Open Sans', Arial, Helvetica, Sans-serif;*/
  text-transform: none;
}

#primaryContainerAppendix .mainSectionColumn {
  width: 311px;
  float: left;
}

/* #primaryContainerAppendix .verticalShowList {
    margin-bottom: 0px;
} */
#primaryContainerAppendix .verticalShowList .singleShowBox {
  /* border: 1px solid #EBEBEB; */
  background-color: #f3f3f3;
  width: 290px;
  padding: 0;
}

.rightSection {
  margin: 25px 0 25px 0;
}

.rightSection.noTopMargin {
  margin-top: 0;
}

.rightSection .verticalShowList .singleShowBox {
  border: 1px solid #EBEBEB;
  background-color: #F3F3F3;
  width: 295px;
  margin-bottom: 5px;
}

.verticalShowList {
  margin-bottom: 25px;
}

.verticalShowList img {
  width: 61px;
  height: 61px;
  margin: 3px;
}

.singleShowBox {
  height: 69px;
  color: #555;
}

.singleShowBox a {
  height: 0;
  margin: 0;
  padding: 0;
}

/* .verticalShowList .singleShowBox img {
    border: 1px solid #EBEBEB;
} */
.verticalShowList .singleShowBox .singleShowCaption {
  float: right;
  /* width: 212px;
  margin: 3px 0px;
  margin-right: 5px; */
  height: 61px;
  overflow: hidden;
}

.verticalShowList .singleShowBox .singleShowCaption a {
  /*font-family:Arial;*/
  font-weight: 500;
  /*font-family:'Open Sans', Arial, Helvetica, Sans-serif;*/
  font-size: 13px;
  color: #555;
  display: block;
  padding: 5px;
  padding-right: 0;
  height: 51px;
}

.verticalShowList .singleShowBox .singleShowCaption a:hover {
  color: #555;
  text-decoration: underline !important;
}

.verticalShowList .singleShowBox .singleShowCaption .singleShowText {
  font-size: 11px;
  /*color: #EBEBEB;*/
}

/*Just Announced - Waitlist Now*/
.singleShowBox:hover .singleShowCaption {
  background: #FFF;
}

.singleShowText {
  margin: -36px 5px 5px 5px;
  color: #555;
  cursor: pointer;
}

/* promo rotate */
#rotationPromo {
  background: #1082ee url(../images/homeRotatePromoBg.jpg) top left no-repeat;
  padding: 10px;
  color: #555;
  font-size: 1.1em;
}

#rotationPromo .promoTitle {
  font-weight: bold;
  font-size: 1.2em;
}

#rotationPromo .promoHeading,
#rotationPromo .promoSubHeading {
  font-weight: bold;
}

#rotationPromo img {
  float: left;
  border: 1px solid #EBEBEB;
  margin: 0px 10px 0px 0px;
  width: 104px;
  height: 100px;
}

#rotationPromoCopy {
  float: left;
}

#rotationPromoPaginate {
  background: url(../images/homeRotatePromoPagination.jpg) top left repeat-y;
  text-align: right;
  padding: 5px;
  font-size: 1.1em;
  color: #ffffff;
}

#rotationPromoPaginate a {
  margin-left: 4px;
  margin-right: 4px;
}

#rotationPromoPaginate a.disabled,
#rotationPromoPaginate a.disabled:hover {
  color: #fff;
  text-decoration: none;
  cursor: default;
}

/* Waitlist rotate */
#rotationWaitlist {
  background: #1082ee url(../images/homeRotatePromoBg.jpg) top left no-repeat;
  padding: 10px;
  color: #ffffff;
  font-size: 1.1em;
}

#rotationWaitlist .waitlistTitle {
  font-weight: bold;
  font-size: 1.2em;
}

#rotationWaitlist .waitlistTitle {
  font-weight: bold;
  font-size: 1.5em;
}

#rotationWaitlist .promoHeading,
#rotationWaitlist .promoSubHeading {
  font-weight: bold;
}

#rotationWaitlist img {
  float: left;
  border: 1px solid #82b9e9;
  margin: 0px 10px 0px 0px;
  width: 120px;
  height: 90px;
}

#rotationWaitlistCopy {
  float: left;
}

#rotationWaitlistPaginate {
  background: url(../images/homeRotatePromoPagination.jpg) top left repeat-y;
  text-align: right;
  padding: 5px;
  font-size: 1.1em;
  color: #ffffff;
}

#rotationWaitlistPaginate a {
  margin-left: 4px;
  margin-right: 4px;
}

#rotationWaitlistPaginate a.disabled,
#rotationWaitlistPaginate a.disabled:hover {
  color: #fff;
  text-decoration: none;
  cursor: default;
}

/* EXTRA TABS My list */
#innerTabs {
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  color: #ffffff;
  width: 274px;
  margin: 0 auto;
  text-align: center;
  padding: 0 !important;
}

#innerTabs a {
  background: #70A8DB url(../images/lightBlueRepX.gif) top left repeat-x;
  float: left;
  width: 136px;
  text-align: center;
  color: #ffffff !important;
  padding: 3px 0 3px 0;
  border-right: 1px solid white;
}

#innerTabs a.activeInnerTab {
  background: #70A8DB url(../images/darkBlueRepX.gif) top left repeat-x;
  width: 132px;
  padding: 3px 0 3px 0;
  font-weight: bold;
  text-decoration: none;
}

div#newsletterSubscription {
  margin-bottom: 10px;
}

div#newsletterSubscriptionHead {
  height: 27px;
  /*IE6 requirement*/
  background: url(/images/userBar.gif) no-repeat 0 0;
  color: #FFD41F;
  margin-bottom: 0;
}

div#newsletterSubscriptionHead,
div#newsletterSubscriptionHead h3,
div#newsletterSubscriptionContent {
  margin: 0;
}

div#newsletterSubscriptionHead h3,
div#newsletterSubscriptionContent {
  padding: 6px 14px;
}

div#newsletterSubscriptionContent {
  font-size: 1.1em;
  background-color: #fff;
  color: #0F3F81;
}

div#newsletterSubscriptionContent input[type=image] {
  vertical-align: bottom;
}

#simplegallery1 {
  /*CSS for Simple Gallery Example 1*/
  position: relative;
  /*keep this intact*/
  visibility: hidden;
  /*keep this intact*/
}

#simplegallery1 .gallerydesctext {
  /*CSS for description DIV of Example 1 (if defined)*/
  text-align: left;
  padding: 2px 5px;
}

#rotationPromoWait {
  background: #1082ee url(/images/homeRotatePromoBg.jpg) top left no-repeat;
  padding: 10px;
  color: #ffffff;
  font-size: 1.1em;
}

#promoHeadingWait {
  margin: 10px;
  color: #ffd41f;
  font-weight: bold;
}

#mygallery3 {
  margin: 10px;
  /*font-weight: 900; */
  vertical-align: top;
}

/* Personalised shows */
.personalisedShowsHeader {
  margin: -9px 0 7px -10px;
}

.personalisedCell {
  position: relative;
  /* make relative, so we can position event title absolutely */
}

/* Super Hero */
/* TODO: implement proper styling */
.superHero {
  /*margin-top:7px;*/
  clear: both;
  /*fix for new masthead styling*/
  /*changes*/
  padding-top: 11px;
}

.superHeroContent {
  display: inline-block;
  *display: inline;
  width: 100%;
}

.superHero .superHeroOpenState {
  display: none;
}

.superHeroCloseState {
  cursor: pointer;
}

.superHeroCloseButton {
  text-align: right;
  cursor: pointer;
  width: 60px;
  height: 23px;
  float: right;
  background: url(../images/close_grey.png) no-repeat top right;
}

.superHeroCloseButton img {
  display: none;
}

/* Social */
#facebookLikeBoxHome {
  background-color: #F3F3F3;
  border: 1px solid #EBEBEB;
  color: #808080;
  margin-bottom: 10px;
  width: 297px;
}

#richardWilkins {
  padding: 0px;
  margin: 0px 0px 10px 0px;
  border: 1px solid #ebebeb;
  width: 300px;
  height: 100px;
}

#fullWidthContainer {
  float: left;
  clear: both;
  width: 962px;
  border: 1px solid #EBEBEB;
  margin: 0px;
  padding: 10px;
}

#fullWidthContainer .fanhangout .intro {
  text-align: center;
}

#fullWidthContainer .fanhangout .intro h1 {
  margin: 10px 0 0 0;
  font-size: 32px;
}

#fullWidthContainer .fanhangout .intro h3 {
  color: #555;
  margin-bottom: 12px;
  font-size: 17.5px;
}

/* Overrides styling from ticketekCore.css to reduce gap above Fan Hangout  */
.wrapBodyNew #secondaryContainer.secondaryContainerWider.padBorder {
  padding: 1px 0 0px 6px;
}

/* Ticket suppression START */
.suppression-info .verticalShowList .singleShowBox .singleShowCaption {
  float: none;
  width: 253px;
  margin: 3px 10px;
  margin-right: 5px;
  height: 61px;
  overflow: hidden;
}

.suppression-info h4 {
  margin: 0px;
  font-size: 15px;
}

.suppression-info p {
  margin: -18px 0px 10px 0px;
  font-size: 13px;
  font-weight: 400;
}

.suppression-info h3 {
  color: #001828;
  font-size: 22px;
  font-weight: 500;
}

.suppression-info .singleShowBox {
  height: 55px;
  color: #555;
}

.suppression-info .singleShowBox:hover .singleShowCaption {
  background: #F3F3F3;
  height: 43px;
}

.suppression-info .viewMoreEvents {
  margin: 0px 0px 0px 2px;
  font-size: 14px;
}

/* Ticket suppression END */
/* End */
/* Fix for Promotional List "Just Announed" */
.promolist__link {
  zoom: 1;
}

.promolist__link:after {
  clear: both;
}

.promolist__link:before, .promolist__link:after {
  content: "";
  display: table;
}

/* .promolist {
    padding-right: 21px;
} */
.promolist, .promolist * {
  box-sizing: border-box;
}

.promolist__item {
  height: 70px;
  max-height: 70px;
}

.promolist__item:last-child {
  border-bottom: none;
}

.promolist__link {
  display: block;
  border-left: 1px solid #EBEBEB;
  border-right: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  border-top: none;
  padding: 4px;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

#extra .promolist__link {
  padding: 4px !important;
  height: 100% !important;
}

.promolist__link:hover .promolist__link__text {
  background-color: white;
}

.promolist__link__img, .promolist__link__text {
  height: 61px;
}

.promolist__link__img {
  display: inline-block;
  float: left;
  margin: 0 10px 0 0 !important;
}

.promolist__link__text {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 5px;
  width: calc(100% - 75px);
  font-size: 13px;
  color: #555;
}

.promolist__link__text small {
  font-size: 11px;
  color: #555;
  font-weight: normal;
}

/* End - Fix for Promotional List */