/**
 * Sample CSS customizations for The Events Calendar and related plugins.
 *
 * Contents:  1. Tribe Bar Customizations
 *            2. General Customizations for All Views
 *            3. Month View Customizations
 *            4. List View Customizations
 *            5. Single Event Page Customizations
 *					  6. List Widget Customizations
 *
 * Usage:  This file can be used "as is" - simply save it as "tribe-events.css" within
 *         your theme's "tribe-events" directory, ie:
 *
 *         wp-content/themes/YOUR_THEME/tribe-events/tribe-events.css
 *
 *         However, it is not expected that you will leave it untouched. Instead, use
 *         this as a vehicle to learn about styling The Events Calendar: experiment, modify
 *         and improve to your heart's content!
 *
 *
 * Last revised:   30 March 2015
 * Target version: 3.9.1 (The Events Calendar)
 */


/**
 * 1. TRIBE BAR CUSTOMIZATIONS
 * ---------------------------
 * These tweaks relate to the Tribe Bar, which is the default filter/search
 * bar provided by The Events Calendar itself.
 */

/** Add a border to the Tribe Bar */
#tribe-events-bar {
	border: 1px solid black;
}

/** Change the background colour of the Tribe Bar, view selector, etc */
#tribe-events-bar,
#tribe-bar-form,
.tribe-bar-views-inner,
#tribe-bar-views .tribe-bar-views-list .tribe-bar-views-option a,
#tribe-bar-form #tribe-bar-views .tribe-bar-views-list:hover .tribe-bar-views-option a {
	background: #FFFFAA;
}

/** Style the "Find Events" button to give it rounded corners and a new colour scheme */
#tribe-bar-form .tribe-bar-submit input[type="submit"] {
	background: #DCDCDC;
	border: 2px solid black;
	border-radius: 4px;
	color: black;
	text-shadow: none;
}

/** Invert the "Find Events" button colours when a vistor hovers over it */
#tribe-bar-form .tribe-bar-submit input[type="submit"]:hover {
	background: black;
	color: white;
}

/** Restyle the form fields to look more like regular inputs */
#tribe-bar-form input[type="text"] {
	background: #FFFFFF;
	border: 1px solid black;
	padding: 5px;
}

/**
 * 2. GENERAL CUSTOMIZATIONS FOR ALL VIEWS
 * ---------------------------------------
 */

/** Make the page main title appear in uppercase */
#tribe-events-content h2.tribe-events-page-title,
#tribe-events-content h2.tribe-events-single-event-title {
	text-transform: uppercase;
}

/** Make pagination links visible at the top of event archive views (not just in the footer area) */
#tribe-events-header .tribe-events-sub-nav li,
#tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a {
	display: inline-block;
}

/**
 * 3. MONTH VIEW CUSTOMIZATIONS
 * ----------------------------
 */

/** Highlight events in month/grid view belonging to a specific category
    (in this case a hypothetical category with a slug of "test-category") */
#tribe-events-content .tribe-events-calendar .tribe-events-category-test-category h3 a {
	color: red;
	text-decoration: underline;
}

/** Hide any events included from the previous/next month */
// #tribe-events-content .tribe-events-calendar td.tribe-events-othermonth > div {
// 	display: none;
// }

/** Highlight calendar cells for the first day of the week */
// .tribe-events-calendar tr td:first-child {
// 	background: orange;
// }

/**
 * 4. LIST VIEW CUSTOMIZATIONS
 * ---------------------------
 */

/** Hide the month seperators/headers */
// .tribe-events-list-separator-month {
// 	display: none;
// }

/** Event headers in white on Reach Orange background */
a.tribe-event-url {
   background-color: #E53911;
   color: #ffffff;
}
a.tribe-event-url:hover {
  font-weight: bold;
   color: #ffffff !important;
}

/**
 * 5. SINGLE EVENT PAGE CUSTOMIZATIONS
 * -----------------------------------
 */

/** Remove default grey-shading and border around single event meta areas */
.single-tribe_events .tribe-events-event-meta {
	background: transparent;
	border: none;
}

/** Remove the padding from the left side of meta blocks within the single event meta areas */
.tribe-events-event-meta .tribe-events-meta-group {
	padding-left: 0;
}

/** Differentiate the Google Calendar export button */
.tribe-events-button, #tribe-events .tribe-events-button.tribe-events-gcal {
	background: #803060;
}

/** Differentiate the iCal export button */
.tribe-events-button, #tribe-events .tribe-events-button.tribe-events-ical {
	background: #907010;
}


/**
 * 6. LIST WIDGET CUSTOMIZATIONS
 * -----------------------------------
 */

/** Change the size and colour of the widget title */
.tribe-events-list-widget h2.widget-title {
	color: blue;
	font-size: 30px;
}

/** Make each event standout with a new background and border */
.tribe-events-list-widget li.tribe-events-list-widget-events {
	background: #FFFFAA;
	border: 1px solid red;
	padding: 10px;
}

/** Make each event title uppercase and underline them */
.tribe-events-list-widget h4.entry-title a {
	text-decoration: underline;
	text-transform: uppercase;
}

/** Make the event date/time information a little more prominent */
.tribe-events-list-widget div.duration {
	color: green;
	font-weight: bold;
	transform: rotate( -4deg );
}