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

.tiles {
    margin:0 auto;
    padding:20px;
    background-color:#fff !important;
    background:rgba(255,255,255,1);
    overflow:hidden;
    border-top:1px solid #ccc;
    border-bottom:20px solid #fff;
    -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);
}

.tile {
    zoom:1;
    position:relative;
    float:left;
    color:#363636;
    background-color:#ffffff;
    padding-bottom: 1000px; /* faux columns */
    margin-bottom: -1000px; /* faux columns */
    max-width:285px;
}

.tile-content {
    position:relative;
    padding-right: 10px;
}

.tile-title {
    font-family:'Playoff Pro Sans Regular', sans-serif;
    font-size:19px;
    margin: 10px 0 10px 0;
}

.tile-info {
    font-size:14px;
    line-height:20px;
}

.tile-desc {
    margin:0 0 15px 0;
    line-height:19px;
}

.tile-link {
    color:#cc0000;
    font-size:13px;
    font-weight:bold;
}

.tile-image {
    height:181px; /* max height, align bottom */
    position:relative;
}

.tile-image img {
    position:absolute;
    bottom:0;
}

.tile-desc ul {
    margin:0 0 0 18px;
}

.tile-desc ul li {
    margin:0 0 8px 0;
}

.tile.right-border {
    border-right:1px solid #d3d3d3;
}

/* mobile */
.m body {
    background-size:100%;
    background-repeat:repeat-y !important;
}
.m .tiles {
    padding:0;
    position:relative;
    z-index:20;
}
.m .tile {
    max-width:none;
}
.m .tile.right-border {
    border-right: none;
}
.m .tile-image {
    margin: 0 auto;
    width: 265px;
}
.m .tile-content {
    min-width: 275px;
    margin-bottom:10px;
    padding:0 20px 20px 20px;
}
.m .tile.right-border .tile-content-wrapper {
    padding-bottom:20px;
    border-bottom:1px solid #ccc;
}
.m .tiles {
    border-bottom: none;
    box-shadow: 0 2px 2px #aaa;
}


/* tablet */
.t .tiles {
    padding-top: 5%;
}
.t .tile-image {
    height: 140px;
}

.tile-link a:focus,
.tile-image a:focus > img {
    outline: thin dotted #000;
}