/*----------------------------------------------

	HOME.CSS
	Author:		Engage Interactive

----------------------------------------------*/

/*---------------------

	COLUMNS

---------------------*/

.column.left,
.column.right {
	width: 340px;
}

/*-------------------------------

	RACECARD
	Adjustments, just for homepage

-------------------------------*/


/*-----------------------

	TITLE AND SPONSOR

-----------------------*/

#racecard h1 {
	position: relative;
	padding: 8px 0 35px;
	font-size: 20px;
	text-align: center;
}

#racecard h1 i { /* Sponsor logo placeholder */
	position: absolute;
	top: auto; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 30px;
}

/*-----------------------

	TABS & ALL CONTENT

-----------------------*/

#racecard article { /* Wraps around all tabs and their content */
	border-width: 0 4px 4px;
}

/*-- TABS --*/

#racecard .tabs {
	padding-top: 0;
	border-width: 0 4px;
}

#racecard .tabs:before {
	display: none;
}

#racecard .tabs a { /* Slight tweaks to the default style */
	color: #666;
	border-top-color: #FFF;
	cursor: default;
	box-shadow: inset 0 -1px #dfdfdf, inset 1px 1px #FFF;
	
	-moz-box-shadow: inset 0 -1px #dfdfdf, inset 1px 1px #FFF;
	-webkit-box-shadow: inset 0 -1px #dfdfdf, inset 1px 1px #FFF;
}

#racecard .tabs .on a {
	color: #21569e;
	background: #FFF;
	box-shadow: none;
	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#racecard .tabs a:hover {
	text-decoration: none;
	color: #21569e;
}

/*-- NEXT AND PREVIOUS RACE / DAY --*/

#racecard header nav a {
	position: absolute;
	display: inline-block;
	padding: 3px 5px;
	border-radius: 3px;
	font-size: 11px;
	bottom: 4px;
}

#racecard header nav a.prev {
	left: 1%;
}

#racecard header nav a.next {
	right: 1%;
}

/*-- RACE TITLE AND TIME --*/

#racecard header {
	position: relative;
	padding:2px;
	background: #FFF;
	border-radius: 4px 4px 0 0;
}

#racecard header time {
	position: absolute;
	top: 50%; left: 1%;
	width: 40px;
	padding: 20px 0 5px;
	margin-top: -33px;
	border-radius: 3px;
	background: #666 url(/images/microsite/icons/clock.png) 50% 5px no-repeat;
	background: url(/images/microsite/icons/clock.png) 50% 5px no-repeat, -webkit-linear-gradient(#666,#333);
	color: #FFF;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #222;
	font-weight: bold;
}

/*-- JOCKEY SILKS --*/

#racecard ol img {
	width: 36px;
}

.right #racecard article img {
	display:inherit;
}

/*-- FULL RACECARD AND OPEN ACCOUNT LINKS --*/

#racecard .links {
	border-bottom: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	background: #FFF;
}

/*-- RELATED CONTENT --*/

#racecard aside,
#racecard aside a {
	padding: 10px 3% 2px 3%;
	color: #FFF;
	text-shadow: 1px 1px rgba(0,0,0,.2);
}

#racecard aside a {
	padding: 10px 3% 2px 5px;
}

#racecard aside li,
#video div li {
	background-image: url(/images/microsite/template/bullet_light.png);
}

/* RACE LIST DROP DOWN */

#racecard .tabs li ul {
	display: none;
}

#racecard .race_list {
	position: absolute;
	right: 8px; left: 8px;
	padding: 4px 0;
	z-index: 20;
	border: none;
	border-radius: 4px;
	background-color: #000;
	background: rgba(0,0,0,.9);
	overflow: visible;
}

#racecard .race_list_arrow { /* The small 'up' arrow at the top of the dropdown */
	display: block;
	position: absolute;
	top: -12px;
	z-index: 20;
	width: 0;
	height: 0;
	margin-left: -10px;
	border: solid 6px transparent;
	border-bottom-color: rgba(0,0,0,.9);
}

#racecard .race_list li.choose {
	text-align: center;
	color: #FFF;
	font-size:14px;
	font-weight:bold;
	margin: 10px 0;
	text-transform: uppercase;
}

#racecard .race_list a {
	display: block;
	position: relative;
	margin: 1%;
	padding: 2% 2% 2% 50px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #FFF;
	border: 1px solid transparent;
	border-radius: 3px;
}

#racecard .race_list a:hover {
	background-color: #333;
	text-decoration: none;
	border: 1px solid #CCC;
}

#racecard .race_list a time {
	position: absolute;
	left:2%; top:6px;
	display: inline-block;
	font-size: 11px;
	background: #FFF;
	color: #000;
	border-radius: 3px;
	padding: 3px;
}

#racecard .race_list a.run time {
	background: #999;
}

#racecard .race_list a.run {
	color: #999;
}

/*-------------------------------

	LIST OF THE DAY'S RACES

-------------------------------*/

#racecard header.days_races {
	padding: 0;
	height: 28px;
}

#racecard ol.days_races li {
	padding-left: 50px;
}

#racecard ol.days_races li:hover h2 {
	color: #21569e;
}

#racecard ol.days_races time {
	position: absolute;
	top: 4px; left: 1%;
	width: 40px;
	padding: 20px 0 5px;
	border-radius: 3px;
	background: #666 url(/images/microsite/icons/clock.png) 50% 5px no-repeat;
	background: url(/images/microsite/icons/clock.png) 50% 5px no-repeat, -webkit-linear-gradient(#666,#333);
	color: #FFF;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #222;
	font-weight: bold;
}

#racecard ol.days_races {
	min-height: 250px;
	background-color: #FFF;
}


/*-------------------------------

	RACECARD RACE RESULTS

-------------------------------*/

#racecard #finished { /* Finishing post icon */
	position: absolute;
	top: 50%; left: 1%;
	width: 40px;
	height: 15px;
	padding-top:25px;
	margin-top: -33px;
	border-radius: 3px;
	background: #EEE url(/images/microsite/icons/post.png) 50% 0 no-repeat;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	text-transform: uppercase;
	color: #333;
	font-weight: bold;
}

.race_results { /* Wraps around all the info */
	background-color: #EEE;
	padding: 3%;
}

/* FINISHING POSITIONS */

.race_results ul.positions {
	margin: 0;
	background: #FFF;
	border-radius: 6px;
	font-size: 12px;
	border: 1px solid #dcdcdc;
}

.race_results ul.positions li {
	border-bottom:1px solid #EFEFEF;
	padding:10px 10px;
	color:#666;
}

.race_results ul.positions li:last-child {
	border-bottom: none;
}

.race_results ul.positions li.first {
	position: relative;
	padding:15px 10px 5px;
	font-size:14px;
	color:#000;
}

.race_results ul.positions li.first img {
	position: absolute;
	right: 3%; top: 10px;
}

.race_results ul.positions li ul li {
	margin-left: 10px;
	border-bottom: none;
	padding: 5px 10px 5px 15px;
	font-size: 12px;
	background-position: center left;
	background-repeat: no-repeat;
}

.race_results ul.positions li ul li.jockey {
	background-image: url(/images/microsite/icons/jockey.png);
}

.race_results ul.positions li ul li.trainer {
	background-image: url(/images/microsite/icons/trainer.png);
}

/* TABLE */

.race_results table {
	margin: 15px 0;
	border:2px solid #FFF;
}

.race_results table td {
	border-width:0 0 1px 0;
}

.race_results table th {
	width:100px;
	text-align:left;
}

.race_results a.button {
	padding: 7px 10px;
}

.race_results a.button span {
	display:block;
	padding-left:17px;
	background:url(/images/microsite/icons/replay.png) center left no-repeat;
}
.race_results p {
	margin-bottom:0;
}

/*-------------------------------

	NEWS, VIDEO & LRF

-------------------------------*/

/* GENERIC */

#content .panel.snippet p {
	font-size: 12px;
}

#content .panel.snippet img {
	margin: 10px 0 10px 10px;
	border-radius: 3px;
	
}

/* NEWS */

#news div,
#news article {
	background-color: #fff;
}

#news h6 {
	margin: 0 auto;
}

#news div {
	font-size: 11px;
}

/* VIDEO */

#video {
	padding-bottom: 3px;
	margin-bottom: 10px;
	border: solid 1px #1c417f;
	border-radius: 6px;
	background: #1c417f;
}

#video h3.icon,
#previews h3.icon {
	padding-left: 40px;
	border: none;
	margin: 0;
	font-size: 15px;
	line-height: 1.1em;
}

#video h3.icon i,
#previews h3.icon i {
	left: 8px;
}

#video article {
	position: relative;
	overflow: hidden;
	padding: 4px 2px 2px 10px;
	margin: 0 3px;
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0,0,0,.4);
	background: #FFF;
	
	
	-moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
}

#video article .video {
	margin: 0 8px 10px 10px;
}

#video article .video img {
	margin: 0;
	border-radius: 3px;
	
}

#video h5,
#video p {
	margin: 8px 0;
}

#video h5 span {
	float: right;
	padding-right: 10px;
	font-weight: normal;
	text-transform: none;
}

#video h6 {
	padding: 0;
	border: none;
	font-size: 14px;
	color: #FFF;
}

#video div {
	overflow: hidden;
	border: none;
	background: none;
	font-size: 11px;
}

#video div a {
	color: #FFF;
}

#video ul {
	margin-top: 0;
	margin-bottom: 0;
}


/*-------------------------------

	TWITTER

-------------------------------*/

#twitter {
	position: relative;
	width: 100%;
}

#tweets {
	overflow: auto;
	height: 93px;
	padding: 5px 0;
}

#tweets div div {
	padding: 0 5px 15px;
}

#tweets div div:last-child {
	padding-bottom: 5px;
}

#twitter p {
	padding: 6px 8px;
	margin: 0;
	border: solid 1px #e5e5e5;
	border-radius: 6px;
	background: #efefef;
	text-shadow: 0 1px #FFF;
}

#twitter .odd p {
	background: #e9e9e9;
}

#twitter .time {
	display: block;
	padding: 5px 10px 0 0;
	font-size: 11px;
	font-style: italic;
	text-align: right;
	color: #888;
}


/* TRIALS */

.panel_wrapper {
	padding: 0 4px;
	margin: 10px 0;
	border: solid 1px #1E431D;
	border-radius: 10px;
	background: #3E733D;
	background: linear-gradient(top,#3E733D 0%,#1E431D 100%);
	
	
	background: -webkit-linear-gradient(#3E733D,#1E431D);
	background: -moz-linear-gradient(top,#3E733D,#1E431D);
	background: -ms-linear-gradient(top, #3E733D 0%,#1E431D 100%);
}

.panel_wrapper .panel {
	margin: 4px 0;
}

.panel_wrapper .panel {
	border: solid 1px #1E431D;
	border-radius: 8px;
	
}

#trials ul.wide_list {
	border-radius: 0 0 6px 6px;
	
}


/*-------------------------------

	SLIDER

-------------------------------*/

.slider {
	position: relative;
	clear: both;
	width: 100%;
	max-width: 508px;
	height: 300px;
	overflow: hidden;
	margin: 0 auto 10px;
	background: #ddd;
}


/*---------------------

	CONTENT

---------------------*/

.slider aside {
	display: none;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 0;
	height: 300px;
	border-radius: 6px 6px 0 0;
	
}


/*---------------------

	WORDS

*/

.slider div {
	position: absolute;
	right: 0; bottom: 0; left: 0;
	z-index: 5;
	padding: 14px;
	border-radius: 0 0 6px 6px;
	background: #111;
	background: rgba(0,0,0,.85);
	color: #FFF;
	text-shadow: 1px 1px #000;
	
	
	background: -moz-linear-gradient(top,rgba(30,30,30,.9),rgba(0,0,0,.9));
	background: -webkit-linear-gradient(rgba(30,30,30,.9),rgba(0,0,0,.9));
}

.slider h2 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
}

.slider h2 a {
	color: #FFF;
}

.slider p {
	margin: 6px 0 0;
	line-height: 18px;
	color: #999;
}


/*---------------------

	IMAGE & LOADING

---------------------*/

.slider aside span,
.slider .loading {
	display: block;
	position: absolute;
	top: 0; left: 0;
	z-index: 0;
	width: 100%;
	height: 300px;
	border-radius: 6px;
	
}


/* IMAGE */

.slider aside span {
	background: 50% 50%;
	background-size: auto 100%;
}


/* LOADING */

.slider .loading {
	display: none;
	z-index: 10;
}

.slider .loading img {
	display: block;
	position: absolute;
	top: 35%; left: 50%;
	padding: 6px;
	margin: -18px 0 0 -18px;
	border-radius: 40px;
	box-shadow: 0 0 6px rgba(0,0,0,.1);
	background: #FFF;
	
	
	-moz-box-shadow: 0 0 6px rgba(0,0,0,.1);
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
}


/*---------------------

	NAV

---------------------*/

.slider ul {
	position: absolute;
	top: 15px; right: 15px;
	z-index: 2;
	padding: 4px 0 4px 4px;
	list-style: none;
}

.slider ul li {
	float: left;
	margin-right: 4px;
}

.slider ul li a {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(255,255,255,.2);
	text-indent: -20px;
	overflow: hidden;
	background: #bbb;
	background: rgba(0,0,0,.3);
	transition: background .2s ease-in-out;
	
	
	-moz-box-shadow: 0 0 2px rgba(255,255,255,.2);
	-webkit-box-shadow: 0 0 2px rgba(255,255,255,.2);
	
	-moz-transition: background .2s ease-in-out;
	-webkit-transition: background .2s ease-in-out;
}

.slider ul li a:hover,
.slider ul li a.on {
	background: #000;
}


/*---------------------

	ARROWS

---------------------*/

.slider .arrow_left,
.slider .arrow_right {
	position: absolute;
	top: 28%;
	z-index: 3;
	width: 30px;
	height: 44px;
	box-shadow: 0 0 4px rgba(0,0,0,0);
	background: #FFF;
	background: rgba(255,255,255,.6);
	transition: all .1s ease-in;
	
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0);
	
	-moz-transition: all .1s ease-in;
	-webkit-transition: all .1s ease-out;
}

.slider:hover .arrow_left,
.slider:hover .arrow_right {
	box-shadow: 0 0 4px rgba(0,0,0,.2);
	background: rgba(255,255,255,.8);
	
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
}

.slider .arrow_left:hover,
.slider .arrow_right:hover {
	width: 40px;
	box-shadow: 0 0 4px rgba(0,0,0,.2);
	background: #FFF;
	
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
}

.slider .arrow_right span,
.slider .arrow_left span {
	display: block;
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: solid 5px transparent;
	overflow: hidden;
	text-indent: -20px;
}

.slider .arrow_left {
	left: 0;
	border-radius: 0 6px 6px 0;
	
}

.slider .arrow_left span {
	right: 14px;
	border-right-color: #000;
}

.slider .arrow_right {
	right: 0;
	border-radius: 6px 0 0 6px;
	
}

.slider .arrow_right span {
	left: 14px;
	border-left-color: #000;
}


/*-------------------------------

	HOMEPAGE NEWS PANEL

-------------------------------*/

.panel.image_and_list div {
	position: relative;
	padding: 6px;
}

#microsite_news div {
	padding: 8px;
	border-color: #1e431d;
	background: #3e713d;
}

#content .image_and_list div.snippet {
	height: 106px;
	padding: 10px 10px 10px 135px;
	border: solid 1px #1e431d;
	border-radius: 4px;
	background: #FFF;
}

#content .image_and_list .more_news a {
	border-top: solid 1px #ccc;
	font-weight: bold;
	padding-bottom: 1px;
	font-size: 14px;
	text-align: center;
	background: #ddd;
	background: -webkit-linear-gradient(#dfdfdf,#ddd);
	background: -moz-linear-gradient(top,#dfdfdf,#ddd);
	background: -ms-linear-gradient(top, #dfdfdf 0%,#ddd 100%);
}

#content .image_and_list .more_news a:hover {
	background: #666;
}

#content .image_and_list img.snippet {
	display: none;
}

#content .image_and_list div.snippet a.more {
	margin-top: 6px;
}

#content .image_and_list div.snippet img {
	position: absolute;
	top: 3px; left: 3px;
	margin: 0;
	width: 120px;
}

#content .image_and_list div.snippet p {
	margin: 0;
	max-height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	line-height: 17px;
}

#content .image_and_list ul {
	margin: 0;
	border: solid 1px #ddd;
	border-radius: 4px;
	background: #d2d2d2;
}

#content #microsite_news ul {
	margin-top: 6px;
	border-color: #1e431d;
}

.image_and_list ul a {
	display: block;
	position: relative;
	height: 26px;
	padding: 0 6px;
	background: #efefef;
	background: -webkit-linear-gradient(#fdfdfd,#ededed);
	background: -moz-linear-gradient(top,#fdfdfd,#ededed);
	background: -ms-linear-gradient(top, #fdfdfd 0%,#ededed 100%);
	line-height: 26px;
}

.image_and_list ul a:hover,
.image_and_list ul a.on {
	background: #ababab;
	background: -webkit-linear-gradient(#bfbfbf,#949493);
	background: -moz-linear-gradient(top,#bfbfbf,#949493);
	background: -ms-linear-gradient(top, #bfbfbf 0%,#949493 100%);
	color: #FFF;
	text-shadow: 0 1px #777;
}

#microsite_news ul a:hover,
#microsite_news ul a.on {
	background: #e4ab1f;
	background: -webkit-linear-gradient(#ffd800,#e4ab1f);
	background: -moz-linear-gradient(top,#ffd800,#e4ab1f);
	background: -ms-linear-gradient(top, #ffd800 0%,#e4ab1f 100%);
	color: #000;
	text-decoration: none;
	text-shadow: 0 1px #ffe558;
}

.image_and_list li:first-child a {
	border-radius: 4px 4px 0 0;
}

.image_and_list li:last-child a {
	border-radius: 0 0 4px 4px;
}