@font-face {
	font-family: 'fun-form';
  src:url("font/Funform.eot");
  src:url("font/Funform.eot?#iefix") format("embedded-opentype"),
    url("font/Funform.woff") format("woff"),
    url("font/Funform.ttf") format("truetype"),
    url("font/Funform.svg#Funform") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* The following selector is purely for use during development */
.icon-debug 
{
    display: block; /*change to 'none' before going live*/
    margin: 0px; 
    padding: 2px; 
    line-height: 70%; 
    font-size: 50%; 
    color: rgb(255, 255, 255); 
    white-space: nowrap; 
    text-align: center;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'fun-form';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-fire, .icon-neutral, .icon-distance, .icon-track, .icon-wet, .icon-TF, .icon {
	font-family: 'fun-form';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-size:1.5em;
}

.icon-bino, .icon-pdf {
	font-family: 'fun-form';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.scratched{
	text-decoration:line-through;
	color:#b50000;	
}

.fun-silk-columns{
	text-align:center;
	width:40px;	
}

.strike-highlight{
	font-weight:bold;
	color:#78838e;
}

.fun-icon-columns{
	text-align:center;
	width:75px;
	float:none !important;
}

.form-summary{
	background-color: #FFF;
	padding: 0.625em;
	border:1px solid #ddd;
	margin-top:0.6em;
	min-height:176px;
}

.betting-tips{
	background-color: #FFF;
	padding: 0.625em;
	border:1px solid #ddd;
	margin:0.6em 0 1.2em 0;
	min-height:176px;
}

.download-pdf{
	float:right;	
}

.number-circle {
	display: inline-block;
	background: #24AEDC;
	color: #fff;
	text-align: center;
	width: 25px;
	height: 25px;
	border-radius: 25px;
	line-height: 1.7em;
}


/* ==========================================================================
   Distance Icons.
   ========================================================================== */
.distance-no-win .icon-track span:before{
	content: "i";
	color:#fcbb6c;
}
.distance-49 .icon-track span:before{
	content: "j";
		color:#fcbb6c;
}
.distance-50 .icon-track span:before{
	content: "j";
		color:#fcbb6c;
}
.distance-75 .icon-track span:before{
	content: "k";
	color:#fcbb6c;
 }
/* ==========================================================================
   Conditions Icons.
   ========================================================================== */
.conditions-dry .icon-wet span:before{
	content: "h";
	color:#fcbb6c;
}
.conditions-40 .icon-wet span:before{
	content: "g";
	color: #333;
}
.conditions-50 .icon-wet span:before{
	content: "f";
	color: #369;
}
.conditions-97 .icon-wet span:before{
	content: "f";
	color:#369;
}
/* ==========================================================================
   Techform Icons.
   ========================================================================== */
.techform-84 .icon-TF  span:before{
	content: "e";
	color:#fcbb6c;
}
.techform-91 .icon-TF  span:before{
	content: "c";
	color:#fcbb6c;
}
.techform-97 .icon-TF  span:before{
	content: "a";
	color:#fcbb6c;
}
.techform-100 .icon-TF  span:before{
	content: "o";
	color:red;
}

/* ==========================================================================
   Other Icons.
   ========================================================================== */
.icon-bino  span:before{
	content: "b";
	color:#fcbb6c;
}
.icon-pdf  span:before{
	content: "a";
	color:#fcbb6c;
}

@media only screen and (min-width: 40.063em) {
	.form-summary{
		background-color: #FFF;
		padding: 0.625em;
		border:1px solid #ddd;
		margin:0.6em 0 1.2em 0;
		float:left;
		width:49%;
	}
	
	.betting-tips{
		background-color: #FFF;
		padding: 0.625em;
		border:1px solid #ddd;
		margin-top:0.6em;
		float:right;
		width:49%;
	}
}