/* 
    Document   : flow
    Created on : 26-Apr-2013, 14:55:37
    Author     : christos.mallios
    Maintained : jason.moorwood@playtech.com
    Description:
        The main stylesheet for Media Viewer
*/

root { 
    display: block;
}

html, body { 
    height:100%; 
    overflow:hidden; 
    color:black;
    font-family:arial; 
    margin:0; 
    background-color:transparent;
}

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

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

/*
last set of digits on margin = 1/2 width
*/

#wrapper {
    position: absolute;
    width: 806px; 
    margin: 0 0 0 -403px; 
    top: 15px; 
    left: 50%;
}

#mainFrame {
    position: absolute;
    width: 806px; 
    margin: 0 0 0 -403px; 
    top: 15px; 
    left: 50%;
}

/*
Competitors List
*/
#compBg {
    position: absolute;
    width: 230px;
    height: 324px;
    left: 576px;
    z-index: -2; 
    background:url(competitorBg.jpg); 
}

#homeTeamStrip{
    position: absolute;
    left: 2px; 
    top: 1px;
    z-index: 2;
}

#awayTeamStrip{
    position: absolute;
    left: 2px; 
    top: 203px;
    z-index: 2;
}

#homeTeamBadge{
    position: absolute;
    left: 2px; 
    top: 10px;
    z-index: 3;
}

#awayTeamBadge{
    position: absolute;
    left: 110px; 
    top: 220px;
    z-index: 3;
}

#homeTeam{
    position: absolute;
    font:bold 18px Verdana, Geneva, sans-serif;
    left: 0px; 
    top: 120px;
    width: 240px;
    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;
}

#awayTeam{
    position: absolute;
    font:bold 18px Verdana, Geneva, sans-serif;
    left: 0px; 
    top: 176px;
    width: 240px;
    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;
}

#border {
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 20; 
    width: 576px; 
    height: 324px; 
    border-width:1px; 
    border-style:solid; 
    border-right-color:#4e4e4e; 
    border-bottom-color:#4e4e4e; 
    border-left-color:#000000; 
    border-top-color:#000000;
}

#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; 
}

#preRaceHeaderText {
    font:12px Verdana, Geneva, sans-serif;
    color: #FFFFFF;
    position: absolute; 
    left: 98px; 
    top: 7px; 
    z-index: 7;
    margin-top: 0px; 
    margin-left: 4px;
}

#inRaceHeader {
    font:12px Verdana, Geneva, sans-serif;
    color: #FFFFFF;
    position: absolute; 
    left: 98px; 
    top: 7px; 
    z-index: 7;
    margin-top: 0px; 
    margin-left: 4px;
}

#bgRaceHeader {
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background:url(raceHeader.png) no-repeat; 
    width: 453px; 
    height: 65px;
    z-index: 6;
}

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

#raceHeaderText {
    font:12px Verdana, Geneva, sans-serif;
    color: #FFFFFF;
    position: absolute; 
    left: 98px; 
    top: 7px; 
    z-index: 7;
    margin-top: 0px; 
    margin-left: 4px;
}

#postRaceHeaderText {
    font:12px Verdana, Geneva, sans-serif;
    color: #FFFFFF;
    position: absolute; 
    left: 98px; 
    top: 7px; 
    z-index: 7;
    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;
}

#bgCells-photoFinish {
    background:url(photFinCell.png) no-repeat; 
}

#photoFinishTitle {
    font:12px Verdana, Geneva, sans-serif;
    color:#FFFFFF;
    position: absolute; 
    text-align:center;
    left: 60px;
    top: 306px; 
    width: 460px;
    z-index: 7;
}
/*
#videoDivider {
    position: absolute; 
    left: 576px; 
    top: 0px; 
    z-index: 1; 
    width: 0px; 
    height: 274px; 
    border-width:2px; 
    border-style:ridge; 
    border-right-color:#414141; 
    border-bottom-color:#414141; 
    border-left-color:#414141; 
    border-top-color:#414141;
}
*/
.connectingText:after{
    content: "Connecting...";
}

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

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

.photoFinishSilk{
    position: absolute; 
    left: 140px; 
    top: 52px;
    width: 78px;
}

.photoFinishRunner{
    font:16px Verdana, Geneva, sans-serif;
    font-style:normal;
    color:#000000;
    position: absolute; 
    width: 310px;
    left: 210px; 
    top: 60px;
    width: 310px;
}

.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 Verdana, Geneva, sans-serif;
    font-style:normal;
    color:#ECECEC;
    cursor:pointer;
    margin:0 auto;
}