/* 
    Document   : flow
    Created on : 26-Apr-2013, 14:55:37
    Author     : jason.moorwood@playtech.com
    Description:
        Stylesheet for error handling
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700');

root { 
    display: block;
}

html, body { 
    height:100%;
    overflow:hidden;
    color:black;
    font-family: 'Roboto Condensed', sans-serif;
    margin:0;
    background-color:transparent;
}

#mainFrame {
    position: absolute;
    width: 576px;
    height: 324px;
    margin: 0 0 0 -288px;
    top: 15px;
    left: 50%;
}

#background {
    position: absolute;
    background-color:black;
    width: 576px;
    height: 324px;
    left: 0px;
    z-index: -2;
    background:url(error.jpg);
}

#topBar {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -3;
    background:url(embeddedBg.gif) repeat-x;
    width: 100%;
    height: 100%;
}

#border {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    width: 574px;
    height: 322px;
    border-width:2px;
    border-style:solid;
    border-right-color:#2f6a97;
    border-bottom-color:#2f6a97;
    border-left-color:#022B4A;
    border-top-color:#022B4A;
}

#preRaceHeaderText, #inRaceHeader, #postRaceHeaderText {
    font:bold 12px Roboto Condensed, sans-serif;
    color: #FFFFFF;
    position: absolute; 
    left: 80px; 
    top: 2px; 
    z-index: 7;
    margin-top: 0px; 
    margin-left: 4px;
    text-transform: uppercase;
}

 #preRaceFooterText, #topFinishersTitle, #photoFinishTitle, #bottomBarTitle {
    font:bold 10px Roboto Condensed, sans-serif;
    text-transform:uppercase;
    color:#FFFFFF;
    position: absolute; 
    text-align:center;
    left: 60px;
    top: 313px;
    width: 460px;
    z-index: 10;
}

#preRaceImage {
    position: absolute; 
    left: -50px; 
    top: 0px; 
    z-index: -2;
    width: 576px;
    height: 324px;
}

#postRaceImage {
    position: absolute; 
    left: 0px;
    top: 0px; 
    z-index: -1;
    width: 576px; 
    height: 324px; 
}

.errorText {
    color: #FFFFFF;
    position: absolute;
    margin-top: 2px;
    margin-left: 4px;
}

#betting-closed {
    color: #ffffff;
    background-color: #004b84;
    top: 150px;
    margin-left: 0px;
    padding: 10px;
    width: 556px;
    text-align: center;
    position: absolute;
}

#eventNotReadyMessage{
    font:bold 18px Roboto Condensed, sans-serif;
    position: absolute; 
    left: 160px; 
    top: 80px; 
    width: 200px;
}

#wipMessage {
    font:bold 11px Roboto Condensed, sans-serif;
    text-shadow:0px -1px 1px #222222;
    position: absolute; 
    left: 450px; 
    top: 295px;
    width: 120px;
}

#backgroundVideoContainer {
    width: 576px;
    height: 324px;
    z-index:-2;
    position:absolute;
    top:0px;
}

#backgroundImageContainer {
    z-index:0;
    position:absolute;
    top:0px;
}

/* MATCH SPORTS SIDEBAR */
#homeName{
    left: 0px;
    top: 120px;
}

#awayName{
    left: 0px;
    top: 184px;
}

#homeName, #homeTeam, #awayName, #awayTeam{
    position: absolute;
    font: bold 15px Roboto Condensed, sans-serif;
    width: 232px;
    color: #FFFFFF;
    text-align: center;
    text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    z-index: 5;
    text-transform: uppercase;
}

#homeName span, #awayName span {
    font: bold 15px Roboto Condensed, sans-serif;
}

#homeTeamForm .form {
    display: flex;
    justify-content: center;
    width: 100%;
}

#homeTeamForm .form .win {
    display: flex;
    width: 20%;
    justify-content: center;
}
#homeTeamForm .form .draw {
    display: flex;
    width: 20%;
    justify-content: center;
}
#homeTeamForm .form .lose {
    display: flex;
    width: 20%;
    justify-content: center;
}


#awayTeamForm .form {
    display: flex;
    justify-content: center;
    width: 100%;
}

#awayTeamForm .form .win {
    display: flex;
    width: 20%;
    justify-content: center;
}
#awayTeamForm .form .draw {
    display: flex;
    width: 20%;
    justify-content: center;
}
#awayTeamForm .form .lose {
    display: flex;
    width: 20%;
    justify-content: center;
}

.photoFinishNum{
    font:bold 14px Verdana, Geneva, sans-serif;
    color:#ffffff;
    text-align:center;
    position: absolute; 
    left: 80px;
    top: 54px;
    width: 80px;
}

.photoFinishSilk{
    position: absolute; 
    left: 144px; 
    top: 54px;
    width: 78px;
}

.photoFinishRunner{
    font:bold 16px Roboto Condensed, sans-serif;
    font-style:normal;
    color: #383838;
    position: absolute; 
    width: 310px;
    left: 206px; 
    top: 61px;
    width: 310px;
    text-transform: uppercase;
}

#preRaceTimer {
    font:12px Roboto Condensed, sans-serif;
    color: #FFFFFF;
    position: absolute;
    right: 380px;
    top: 7px;
    z-index: 22;
    margin-top: 0px;
    margin-left: 4px;
}

#player {
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 576px; 
    height: 324px;  
}

#container {
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 576px; 
    height: 324px;
}

.bgPhoto{
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 576px; 
    height: 324px;
    z-index: 0;
}

.endFrame{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 576px;
    height: 324px;
    z-index: -3;
}

.textStyleContent{
    font:14px roboto;
    font-style:normal;
    color:#ECECEC;
    cursor:default;
    margin:0 auto;
}

.connectingText:after{
    content: "Connecting...";
}

.photoFinishText:after{
    content: "Photo Finish";
}