/**************************************************
* $File: //p4-wdpro/Projects/Sites/ESPNWWOS/main-minify/web-app/src/public/static/css/tiles.css $
*
* $Author: flegp001 $
* $Revision: #1 $
* $Change: 1457315 $
* $Date: 2014/03/31 $
**************************************************/

.column-wrap {
    overflow:visible;
}

.tiles {
    margin:0 auto;
    padding:30px 0 0 0;
    background-color:#fff !important;
    background:rgba(255,255,255,1);
    overflow:hidden;
    border-top:1px solid #ccc;
    -webkit-box-shadow:0 3px 3px #555;
    -moz-box-shadow:0 3px 3px #555;
    box-shadow:0 3px 3px #555;
    behavior:url(/public/static/css/pie.htc);
}

.tiles.four-up {
    min-width:0;
}

.tile {
    zoom:1;
    height:220px;
    width:200px;
    position:relative;
    float:left;
    border:1px solid #8e8e8e;
    border:1px solid rgba(0,0,0,0.4);
    margin:0 0 38px 18px;
    padding:5px;
    background-color:#ffffff;
    behavior:url(/public/static/css/pie.htc);
}

.tile img {
    display:block;
}

.four-up .tile {
    float:left;
    height:auto;
    width:42.5%;
    border:1px solid #8e8e8e;
    border:1px solid rgba(0,0,0,0.4);
    margin:0 0 40px 40px;
    padding:5px;
}

.four-up .tile img {
    display:block;
    width: 100%;
    overflow:hidden;
}

.tile-content {
    position:relative;
}

.tile-content-wrapper {
    background-color:#cc0000;
    width:200px;
    max-height:220px;
    overflow:hidden;
}

.four-up .tile-content-wrapper {
    width:auto;
}

.basic .tile-content-wrapper {
    background-color: #f5f5f5;
    background: -webkit-gradient(linear,0 0,0 bottom,from(#f5f5f5),to(#e7e8e8));
    background: -webkit-linear-gradient(#f5f5f5,#e7e8e8);
    background: -moz-linear-gradient(#f5f5f5,#e7e8e8);
    background: -ms-linear-gradient(#f5f5f5,#e7e8e8);
    background: -o-linear-gradient(#f5f5f5,#e7e8e8);
    background: linear-gradient(#f5f5f5,#e7e8e8);
    behavior:url(/public/static/css/pie.htc);
}

.tile-info {
    display:none;
    height:180px;
    width:200px;
    left:0;
    background-color:#cc0000;
    color:#fff;
    font-size:12px;
    font-weight:bold;
}
.d .tile-info {
	display: block;
}
.four-up .tile-info {
    width:auto;
}

.tile-link {
    padding:5px;
}

.basic .tile-link {
    padding:3px 15px 4px 13px;
    color:#cc0000;
    font-size:13px;
    font-weight:bold;
}
.basic .tile:hover .tile-link {
    color:#fff;
    background-color:#cc0000;
}
.basic .tile:hover a {
    text-decoration:none;
}

.basic .tile-info {
    display:block;
    position:relative;
    top:0;
    height:auto;
    color:#363636;
    font-size:14px;
    font-weight:normal;
    background-color:transparent;
}

.tile-link {
    display:inline;
    font-size:12px;
    color:#fff;
    background: transparent url(images/arrow-right-white.png) right 8px no-repeat;
    padding:5px 10px 5px 10px;
}
@-moz-document url-prefix() {
    .tile-link {
        background-position:right 7px;
    }
}

.basic .tile-link {
    display:block;
    background-image: none;
}

.tile-desc {
    padding:10px;
}

.basic .tile-desc {
    padding:2px 13px 0 13px;
    margin:0 0 6px 0;
    line-height:19px;
    min-height:57px;
}

.tile-label {
   	height:40px;
    overflow:hidden;
    background-color:none;
    padding:0 10px 0 10px;
}

.venues .tile-label {
    height:34px;
    padding:6px 10px 0 10px;
}

.basic .tile-label {
    height:20px;
    max-width:357px;
    font-family:"Playoff Pro Sans Bold";
    font-size:18px;
    padding:10px 0 0 12px;
}

.tile-label .tile-title {
    float:left;
    font-size:14px;
    line-height:30px;
    color:#fff;
    font-family:"Playoff Pro Sans Bold";
}

.venues .tile-label .tile-title {
    line-height:14px;
}

.basic .tile-label .tile-title {
    font-family:arial;
    font-size:18px;
    line-height:18px;
    color:#363636;
    font-family:"Playoff Pro Sans Bold";
}

/* tile hover content toggle */
.d .venues .tile-content-wrapper{
	max-height: 40px;
	position: absolute;
	top:180px;
}
.d .sports .tile-content-wrapper{
	max-height: 30px;
	position: absolute;
	top:190px;
}
.tile:hover {
    box-shadow:0 1px 10px #aaa;
    -webkit-box-shadow:0 1px 10px #aaa;
    -moz-box-shadow:0 1px 10px #aaa;
    behavior:url(/public/static/css/pie.htc);
}
.baseball .tile-label-inner {
    background: #cc0000 url(images/tile-icon-baseball.png) right no-repeat;
}

.m .tiles {
    min-width: 320px;
    padding: 20px 0 0 0;
}

.m .tile {
    height:auto;
    width:41%;
    min-width:117px;
    margin:0 0 18px 5%;
}

.m .four-up .tile {
    max-width:none;
}

.t .hover-content .tile {
    height:auto;
    width:19.5%;
    margin: 0 0 28px 3.1%;
}

.m .tile img,
.t .tile img {
    height: auto;
}

.m .tile img {
    width:100%;
}

.m .sports.hover-content .tile-label .tile-title {
    font-size: 10px;
}

.m .hover-content .tile-label .tile-title {
    font-size: 11px;
}

.m .venues .tile-label .tile-title,
.t .venues .tile-label .tile-title {
    line-height: 12px;
}

.t .hover-content .tile-label {
    height:32px;
    padding:5px 10px 0 10px;
}

.t .sports.hover-content .tile-label {
    height: 30px;
    padding: 0px 10px 0 10px;
}

.t .hover-content .tile-label .tile-title {
    font-size: 10px;
}

.t .sports.hover-content .tile-label .tile-title {
    font-size: 10px;
}

.t .hover-content .tile-info {
    font-size:10px;
    height: 136px;
    width:auto;
}

.t .hover-content .tile-desc {
    padding: 5px 10px 5px 10px;
    line-height:13px;
}

.m .hover-content .tile-content-wrapper,
.t .hover-content .tile-content-wrapper {
    width:auto;
}

.m .four-up .tile {
    margin: 0 5% 20px;
    min-width: 277px;
    width: auto;
}

.t .four-up .tile {
    height:auto;
    width:44%;
    margin:0 0 20px 3%;
}

.t .four-up .tile img {
    height:auto;
}

.m div[class*='sport-icon-white'],
.t div[class*='sport-icon-white'] {
    display:none;
}

.tile a:focus > .tile-content{
   outline: thin dotted #000; 
}
