@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
/**
 * @version     3.0.0
 * @package     com_eventlisting
 * @copyright   Copyright (C) 2015. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      William Jones <william@alleventson.com.au> - http://alleventson.com.au
 
	Note: This styling file is shared between normal listings and also HOME page (tile layout only though).
 */

/**********************************************************
 *	Header  (common with homepage.css)
 *******************************************************/

#event-listings-header-container.header
{
	display: inline-block;
} 

div#event-listings-header-container
{
	width: 100%;
}

div#event-listings-header-container.header div.header-title
 {
	float:left; 
	width: 80%;
 } 
 
  
/***********************************************************
* 	Styling for minor headers  (common with homepage.css)
**************************************************************/

/* may need to put this back for tile div.eventListDescription {float:left; margin-right:20px;} */
div.eventListDescription h2.title {line-height:80%;}
div.eventListDescription h5.eventListLocation {line-height:100%; margin:2px 0px 2px 0px;}
div.eventListDescription h5.eventList-cost {line-height:100%; margin:2px 0px 2px 0px;}
div.eventListFacts {text-align:right;} 

div.eventLists-sub-header
{
	display: inline-block;
}

h4.title
{
	font-family: sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	margin-top: 0px;
	margin-bottom:0px;
	text-rendering: optimizelegibility;
}

h5.eventListLocation
{
	font-family: sans-serif;
	font-weight: bold;
	font-size: 15px;
	line-height: 20px;
}

h2.title
{
	min-height: 20px;
	max-height: 20px;
	font-size: 30px;
	margin-top: 3px !important;
	margin-bottom: 10px !important;
	overflow: show;
}

 .event-warnings
 {
     display: inline;
     font-weight: bold;
     color: red;
 }

p.synopsis
{
  font-family: sans-serif;
  margin-top: 2px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  line-height: 100%
}


h5.default-image-text
{
	position: absolute;
	top: 0px;
	margin-top: 5px;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 2px;
    color: #ffffff;
	text-align: center;
	font-size: 16px;
	font-family: 'Shadows Into Light Two';
	text-transform: lowercase;
}

img.default-image
{
	opacity: 0.5;
}

img.eventListImage
{
	color: #000000;  /* to 'hide' any alt text */
}
 

/*********************************************
*	Calendar Stylings (Common with homepage.css)
*********************************************/

div.event-calendar-wrapper
{
	background-color: #000000;
	color: #ffffff;
	max-width: 66px;
	max-height: 72px;
	min-width: 66px;
	min-height: 33px;
	position: absolute;
	top: 0px;
	right: 0px;
}

div.event-calendar-wrapper.layout-list-only
{
	height:75px;
	max-height: 75px;
	-moz-box-shadow: 0px 1px 2px #000000;
	-webkit-box-shadow: 0px 1px 2px #000000;
	box-shadow: 0px 1px 2px #000000;
	
}
.cal-text
{
	text-align: center;
	margin-top: 1px;
	margin-bottom: 1px;
	font-family: sans-serif;
	text-decoration: none;
	letter-spacing: 0px !important;
	text-transform: uppercase;
	font-weight: bold;
}

.cal-text.expired
{
	padding-top: 7px;	
}

.cal-text-top
{
	margin-top: 5px;
}

.cal-text.cal-duration
{
	font-weight: normal;
	text-transform: none;
	padding-bottom: 5px;
}

h2.cal-text 
{
	font-size: 30px !important;
}


h5.cal-text 
{
	font-size: 12px !important;
}
 
 .layout-list-only > h5.cal-month
 {
	 margin-top: 10px;
 }
 
 /**********************************************************
 *	Header Layout Style Buttons
 ***********************************************************/
  
 div#event-listings-header-container.header div.style-btns-wrapper
 {
	float:right;
	width: 20%;
 }

 /* #layout_tile_btn, #layout_list_btn */
 .layout-style-btn
 {
	float:right;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 5px !important;
	padding-right: 0px !important;
 }
 
.style-btns-wrapper.mobile
{
    display: none;
}


 
/***************************************************************
*	Event Items (Listings)- List & Tile layouts
****************************************************************/

img.eventListImage {
	padding:0px;
	width: 100%;
	height:auto;
	max-width: 120px;   /* this is list width */
	max-height: 75px;
}


div.eventListBlock
{
	margin-bottom:12px;
	margin-top: 5px;
	background-color: #ffffff; /* block now white and outside coloured  - tile layout overrides*/
	display: inline-block;
}

a.eventListImageLink
{
	max-width: 100%;
}	
 
div.eventlist-image-inner
{
	background-color: #ffffff;  /*000000; */
}	

div.eventlist-image-wrapper
{
	background-color: #ffffffff; /*000000;*/
}	

div.eventlist-image-inner.default-image
{
	background-color: #000000;
}	

/******
img.mod-list-image
{
	margin:auto;
}
****/
 
/******************* tile-layout stylings *******************************/

div.eventListBlock.layout-tile > div.eventlist-image-wrapper > div.eventlist-details-wrapper
{
	padding-top: 5px;
	min-height: 70px;
}

div.eventListBlock.layout-tile  div.eventlist-image-wrapper  div.eventlist-image-inner
{
	position: relative; 
	left: 0; 
	top: 0;
	width: 100%;
	max-height: 150px;	
	height: auto;
	float: none;
	padding-top: 62.5%; /* to maintain a 8:5 aspect ratio  [ to allow for missing images and tile width resizing ] */
}

div.eventListBlock.layout-tile div.eventlist-image-inner a.eventListImageLink img.eventListImage, div.eventListBlock.layout-tile div.eventlist-image-inner a.eventListImageLink img.mod-list-image 
{	
	position: absolute;  
	top: 0; 
	left: 0;
	width: 100%; 
	max-width: 240px; 
	max-height: 150px; 
	height: 100%;  /* was auto */
}

div.eventListBlock.layout-tile 
{
	max-width: 254px;  /* native image width of 240 + 2 x 7px padding */
	margin-left: 7px;   
	margin-right: 7px;  
	width: 100%;   /* this will normally be overriden for screen sizes */
	background-color: inherit;
	display: inline-table;
} 

 div.eventListBlock.layout-tile div.eventListDescription
 {
  white-space: normal;
  margin-left: 4px;
  text-align: left;
 }


div.eventListBlock.layout-tile > div.eventlist-image-wrapper > div.eventlist-details-wrapper > div.eventListDescription >  h2.title 
{
	min-height: 18px !important;
	max-height: 36px !important;
	font-size: 18px !important;
	margin-top: 3px !important;
	margin-bottom: 3px !important;
	text-decoration: none;
	line-height: 18px !important;
	letter-spacing: 0px !important;
	text-transform: uppercase;
	font-family: sans-serif;
	font-weight: bold;
	overflow: hidden;
}


section.eventlist-block-wrapper.layout-tile
{
	display:inline-block;
	text-align:center;
}

div.eventListBlock.layout-tile div.eventListDescription p.synopsis
{
	white-space: normal;
}

div.eventListBlock.layout-tile  div.eventlist-image-wrapper
{
	position: relative;
	left: 0px;
	top: 0px;
	background-color: #ffffff;
	max-width: 240px;
}

div.eventListBlock.layout-tile > div.eventlist-details-wrapper  /* layout-list-only */
{
	display: none;
}

div.eventListBlock.layout-tile > div.event-calendar-wrapper  /* layout-list-only */
{
	display: none;
}

div.eventListBlock.layout-tile  >  div.eventlist-image-wrapper > div.eventlist-image-inner  > h5.default-image-text
{
	width: 66%;
	margin-top: 20px;
	font-size:20px;
	
}

/****************** list-layout stylings *************************************/

div.eventListBlock.layout-list div.eventlist-image-wrapper div.eventlist-image-inner a.eventListImageLink img.eventListImage.default-image {
	min-height: 75px;
}

div.eventListBlock.layout-list
{
	max-width: 100%;
	width: 100%;
	min-width: 100%;
	padding: 0px;
	border: 1px #e4e4e4 solid;
}

div.eventListBlock.layout-list > div.eventlist-image-wrapper > div.eventlist-details-wrapper
{
	display: none;
}

div.eventListBlock.layout-list div.eventlist-image-wrapper div.eventlist-image-inner
{
	position: relative; 
	left: 0; 
	top: 0;
	width: 100%;
	max-height: auto;	
	min-height: auto;	
	float: left;
}

div.eventListBlock.layout-list div.eventlist-image-wrapper div.eventlist-image-inner a.eventListImageLink img.mod-list-image
{
	height:90px;
	width: 100%;
}


div.eventListBlock.layout-list div.eventListDescription
 {
  white-space: normal;
  margin-top: 5px;
  line-height: 100%;
 }

div.eventListBlock.layout-list div.eventlist-image-wrapper
{
	/* crop so as 8x5 ratio in set size */
    width:120px;
	height: auto;
    float:left;
}

div.eventListBlock.layout-list div.eventlist-image-wrapper div.event-calendar-wrapper 
{
	display: none;
}

div.eventListBlock.layout-list div.eventlist-details-wrapper
{
   margin-left: 130px;
}


div.eventListBlock.layout-list div.event-calendar-wrapper.layout-list-only 
{
	display: block;
	float:right;
	position: relative;
	top: 0px;
	right: 0px;
}


/*****************************
default vendor 'image' styling
****************************/

.noimage
{
	background-color: gray;
}

/******************************************************
button styling - Add/Search Btns (also in home.css)
**************************************************************/

.btn-section
{
	display: inline-block;
	background-color: #ffffff;
	min-height: 200px;
	text-align: center;
	margin-top: 20px;

	/* stylings so that div is wider than parent */ 
	width: 105vw;
	margin-left: -7vw;
	margin-right: -14vw;
}

.btn-section .btn-wrapper
{
	position: relative;
	padding: 10px;
	width: 40%;
}

.home-btn-blurb
{
	font-size: 14px;
	color: #000000;
}

.home-btn-title
{
	text-transform: uppercase;
	font-weight: bold;
	color: #000000;
	min-height: 50px;
}

div.full-search-btn-wrapper
{
	display: initial;
}

div.btn-wrapper .btn-outline-primary /* force standard btm-outline CSS as template changed defaults, plus some extra */
{
	border: 1px solid #799426;
	color: #799426;
	margin: 1px auto;
	padding-left: 7px;
	padding-right: 7px;
}

div.btn-wrapper .btn-outline-primary:hover /* force standard btm-outline CSS as template changed defaults plus some extra*/
{
	color: white;
	background-color: #9abc31;
	border-color:transparent;
}


/*** footers etc ****/
div.custom-disclaimer
{
	margin-top: 12px;
	margin-bottom: 42px;
}

#sp-bottom
{
	padding: 42px 0px !important;
}


/* For sample stallholders */
div.home-list-block
{
	display: inline-table;
	max-width: 352px;   /* native image width (320) + 2 x 16px padding */
	width: 100%;   /* will be overriden by screen size logic below */
	padding: 16px; 
	/*vertical-align: top; */
	margin: 0px;
} 

/* geo */
.view-geolistings > .body-wrapper > .body-innerwrapper > #sp-main-body
{
	padding: 0 !important;
}


/*
	Approach here is to have a number of screen sizes catered for.
	Will opt to display 1-2 big tiles on small sizes, and 3+ for larger (for tile mode)
*/

/* hide add/search btn section when screen size small */	
@media (max-width: 640px) 
{ 
	.btn-section
	{
		display: none;
	}
} 

@media (max-width: 480px) {
	div.eventListBlock.layout-tile {
	  width: 100%;
	}
}

@media (min-width: 481px) {
	div.eventListBlock.layout-tile {
	  width: 50%;
	}
}

@media (max-width: 992px) {
	div.custom-affiliate-leaderboard {display:none;}
}
	
@media (min-width: 640px) {
	div.eventListBlock.layout-tile {
	  width: 33.3333%;
	}
}

@media (min-width: 768px) {
	
	div.eventListBlock.layout-tile {
	  width: 33.3333%;
	}
}


@media (min-width: 992px) {
	
	div.events
	{
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	
	div.eventListBlock.layout-tile {
	  width: 25%;
	}
}

/* T3 sets width to 1170 - so override */
@media (min-width: 1200px)  {
	
	div.events 	{
		max-width: 1300px;
		margin-left: auto;
		margin-right: auto;
	}
	div.eventListBlock.layout-tile {
	  width: 20%;
	}
}

@media (min-width: 1400px)  {
	div.events 	{
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
	}
}