/*world_cup.css: most styling for the page, except the tabs, bracket, and buttons, which are complicated enough for their own files*/

body {
    font-family: 'Kashida', Tahoma, Verdana, Helvetica, sans-serif;
    margin: 0px;
    border: 0px;
    padding: 0px;
    text-align: center;
    min-height: 100%;
}

@font-face {
    font-family: "Kashida";
    src: url('Qatar2022Arabic-Bold.ttf') format('truetype');
}

/*the bit above the tabs*/

#header h1, #header p {
    margin: 0;
    padding: 0;
    font-family: "Kashida";
    text-align: center;
}

#header {
    position: relative;
}

#tzwrapper {
    margin: 5px;
}

h1 {
    font-size: 2.5em;
    color: red;
}

.border {
    position: fixed;
    width: 409px;
    height: 100%;
    z-index: -1;
    background-image: url("../images/qatar_background_left.png");
    background-repeat: repeat-y;
}

#left {
    left: 0px;
}

#right {
    right: 0px;
}

#main {
    width: 1075px; /*fits all tabs, knockout bracket*/
    background-color: white;
    display: inline-block;
    height: 100%;
}

#main > div {
    background-color: white;
}

/*line below tabs*/

hr {
    height: 5px;
    margin: -5px 0px 0px 0px;
    color: #ACACAC;
    background-color: #ACACAC;
    border-width: 0px;
    position: relative;
    z-index: 3;
}

/*group stage matches*/

.matches {
    margin-bottom: 10px;
}

.matchRow {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    padding: 10;
    color: #333333;
    font-size: large;
}

.matchRow::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;   
}

.details {
    color: #333333;
    font-family: Georgia, serif;
    font-size: small;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;  
}

.details::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;   
}

.location {
    float: left;
    text-align: left;
    width: 50%;
}

.time {
    float: right;
    text-align: right;
    width: 50%;
}

.team1 {
    float: left;
    text-align: right;
    width: 33.33333%;
    text-weight: bold;
}

.result {
    float: left;
    text-align: center;
    width: 33.33333%;
}

.score1, .score2 {
    width: 0.6em;
    box-sizing: content-box;
}

.team2 {
    float: right;
    text-align: left;
    width: 33.33333%;
    text-weight: bold;
}

/*group tables*/

.groupTable table {
    margin: 0 auto;
    background: transparent;
    display: inline;
}

.groupTable .manualReorder {
    position:absolute;
    margin-left: 3px;
}

th {
    text-shadow: 1px 2px 3px #def, 0 0 0 #000, 1px 2px 3px #def;
    
    background: rgba(243,243,243,1);
    background: -moz-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(191,193,194,1) 50%, rgba(172,172,172,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(243,243,243,1)), color-stop(50%, rgba(191,193,194,1)), color-stop(100%, rgba(172,172,172,1)));
    background: -webkit-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(191,193,194,1) 50%, rgba(172,172,172,1) 100%);
    background: -o-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(191,193,194,1) 50%, rgba(172,172,172,1) 100%);
    background: -ms-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(191,193,194,1) 50%, rgba(172,172,172,1) 100%);
    background: linear-gradient(to bottom, rgba(243,243,243,1) 0%, rgba(191,193,194,1) 50%, rgba(172,172,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#acacac', GradientType=0 );
}

.manualReorder th {
    visibility: hidden;
}

.groupTable tr > th:first-child {
    border-radius: 6px 0px 0px 0px;
}

.groupTable tr > th:last-child {
    border-radius: 0px 6px 0px 0px;
}

.groupTable td > div {
    position: relative;
    height: 30px;
    border-top: 1px solid #ACACAC;
    background: #fff;
}

.manualReorder td > div {
    border-top: 1px solid #FFF;
    font-size: 180%;

}

.manualReorder td > div:hover {
    text-shadow:  0px 2px rgba(85,85,85,1)
}

.manualReorder td > div:active {
    left: 0px;
    top: 2px;
    text-shadow: none;
}

.groupTable td, .groupTable div {
    padding: 0px;
}

.groupTable .content {
    vertical-align: middle;
    display: inline-block;
}

.groupTable .stat {
    text-align: right;
    padding-right: 5px !important;
}

.groupTable .clinched {
    background: #ccffcc;
}

.groupTable .eliminated {
    background: #ffcccc;
}

/*Country names and flags*/

.heightfix {
    display: inline-block;
    width: 1px;
    height: 30px;
    vertical-align: middle;
}

.countryName .content, .countryName .heightfix {
    display: table-cell;
}

td {
    vertical-align: middle;
}

.outerwrap {
    display: inline-block;
}

.innerwrap {
    display: table-cell;
    vertical-align: middle;
}

.flagwrap {
    width: 24px;
    text-align: center;
}

.matchRow .flag {
    border: 1px solid #ACACAC;
}

#savecode {
    padding-top: 5px;
}

.up {
    color: green;
    line-height: 35px;
}

.up:active {
  color: #00B300;
}

.down {
    color: red;
}

.down:active {
    color: #B30000;
}