/* 
Basic styles 
This controls the layout of the divs on the start page
*/
.ui-content .ui-body {
    text-align: left;
    border-color: #ddd;
}
.ui-content p {
    color: #777;
    line-height: 140%
}
/* Stack all blocks to start */
.ui-content .ui-block-a,
.ui-content .ui-block-b,
.ui-content .ui-block-c,
.ui-content .ui-block-d {
    width: 95%;
    float: none;
    margin: 0em;
}
/* Collapsing borders */
.ui-content > div + div .ui-body {
    border-top-width: 0;
}
/* 1st breakpoint - Float B, C and D, leave A full width on top */
@media all and (min-width: 42em) {
    .ui-content {
        overflow: hidden; /* Use this or a "clearfix" to give the container height */
    }
    .ui-content .ui-body {
       min-height: 14em;
    }
    .ui-content .ui-block-b {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-c {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-d {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-b p,
    .ui-content .ui-block-c p {
      font-size: .8em;
    }
    .ui-content > div + div .ui-body {
        border-top-width: 1px;
    }
    .ui-content > div:first-child .ui-body {
        border-bottom-width: 0;
    }
    .ui-content > div:last-child .ui-body {
        border-left-width: 0;
    }
}
/* 2nd breakpoint - Float all, 50/25/25 */
@media all and (min-width: 40em) {
    .ui-content .ui-body {
       min-height: 18em;
    }
    .ui-content .ui-block-a {
   
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-b {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-c {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-d {
      float: left;
      width: 47.5%;
    }
    .ui-content > div:first-child .ui-body {
        border-bottom-width: 1px;
    }
    .ui-content > div + div .ui-body {
        border-left-width: 0;
    }
}
/* 3rd breakpoint - Bump up font size at very wide screens */
@media all and (min-width: 75em) {
    .ui-content .ui-body {
      font-size: 125%;
    }
.ui-content .ui-block-a {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-b {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-c {
      float: left;
      width: 47.5%;
    }
    .ui-content .ui-block-d {
      float: left;
      width: 47.5%;
    }

}

/* this controls the moment the ranking table becomes a list *?
@media ( min-width: 20em ) {
	/* Show the table header rows and set all cells to display: table-cell */
	.rank-table td,
	.rank-table th,
	.rank-table tbody th,
	.rank-table tbody td,
	.rank-table thead td,
	.rank-table thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.rank-table td .ui-table-cell-label,
	.rank-table th .ui-table-cell-label {
		display: none;
	}
}

/* this controls the layout of the cards with individual matches */

.match-info {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  margin: 10px !important;
}

/* On mouse-over, add a deeper shadow */
.match-info:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
  
}

.team1, .score1, .team2, .score2, .sep, .tscore1, .tscore2 {
display: inline-block;
float: left;
position: relative;
max-width: 460px;
}

.team1, .team2 {
width: 45%;
font-size:1.2em;
}


.score1, .score2, .tscore1, .tscore2 {
width: 45%;
}

.score1, .tscore1 {
margin-right:0.5em
}
.score2, .tscore2 {
padding-left:1em
}

.team1, .score1, .tscore1 {
text-align: right;
margin-right:0.5em
}

.team2, .score2, .tscore2 {
text-align: left;
margin-left:0.5em
}

/* this makes the match cards clickable but without style */
a {
font-weight: normal;
font-color: black;
}