/* Unterstütze Auflösungen:
   Standard ist: 1920x1080 FULL HD
   Auch noch möglich ist: 1366x768, 1024 x ??? 
   Testen am besten mit Firefox, dort gibt es die wenigsten Refresh- Probleme nach Änderungen der style.css
   Außerdem kann dort über "Webentwickler- Tools" die Auflösung verstellt werden. Umschalt+Strg+M

    Firefox Citl+F5 erzwingt Refresh

    Firefox 
*/


body 
{
    background-image: url('../images/background.jpg');
    /*background-color:blue;*/
    color:Black;
    font-family:Arial, Calibri;
    font-size:16px; /* base font size in px als allgemeine Berechnungsgrundlage für die em- Werte */

    padding-bottom:1.875em; /*30px;*/
}


.LogoImg img {
    display: block;
    margin: 0.625em auto 0.625em auto;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    /*border-radius: 5px;*/
    max-width: 75%;
    border: 1px solid red;
    border-radius: 0.625em;
}

.AnalogClock canvas
{
    /*object-fit:contain;*/
    padding:5px;
    
    max-width:100%;
    max-height:8.750em; /*140px;*/
    
    /* wichtig: sonst steht die Uhr oben rechts */
    float:right;
    
    /*background-color:Orange;*/
    /*border: 1px solid red;*/
}


.BigClock
{
    padding:1px;
    background-color:Lime;
    border: 1px solid red;
    border-radius:10px;
    color:Black;
    max-height:6.250em; /*100px;*/
    line-height:0.02;
    text-align:center;
    font-weight:bold;
    font-size:2.5em;
}

.Laufbezeichnung
{
	/* Besser als opacity */
	background-color:rgba(255,255,255,1);

    background-color:white;
    border: 1px solid red;
    border-radius:0.625em; /*10px;*/
    text-align: center;
    font-size:1.100em; 
    padding-top:0.750em; /*12px;*/
    padding-bottom:0.750em; /*12px;*/
}


.RedFrame
{
	background-color:rgba(255,255,255,0.9);

    border: 1px solid red;
    border-radius:0.625em; /*10px;*/
    margin:0.188em; /*0.313em; /*5px;*/
    margin-top:1.250em; /*20px;*/
}

.RedFrameMobile {
    /*display: none;*/
    background-color: rgba(255,255,255,0.9);
    border: 1px solid red;
    border-radius: 0.625em;
    margin: 0.188em; 
    margin-top: 1.250em; 

    display:none;
}



.ScoreGrid
{
    font-size:0.750em; 
}

.LptGrid
{   
    font-size:0.750em; 
}

/*RedFrame und Footer haben unterschiedliche col-werte in der default.aspx*/


.Footer 
{
	background-color:rgba(255,255,255,1.0);

    font-size:1.000em;

    position: fixed;
    bottom: 0;
	
    left: 0.625em;
    right: 0.625em;
    
	
    border: 1px solid red;
    border-radius:0.625em; /*10px;*/
    text-align: center;

    padding-top:0.375em; /*6px;*/
    padding-bottom:0.375em; /*6px;*/
}


.SSBFlagSize
 {
     border:1px solid black;
     /*ControlStyle-Width:1.125em; */ /*18px;*/
}


/* SSB = Standard Score Board */
.SSBiPosInClass, .SSBiPos 
{
    width: 1.125em;
    background-color:lime;
}

.SSBsKurzbezeichnung
{
    width: 1.250em; /*20px;*/
}

.SSBiStartNr
{
    width: 1.563em; /*25px;*/
}

.SSBiKlasse 
{
    display: none;
}


.SSBsNation 
{
    width: 1.250em; /*20px;*/
}

.SSBimgNationFlag 
{
    width: 1.250em; /*20px;*/
}

.SSBsName
{
    width: 10.000em; /*160px;*/
}

.SSBsStatus 
{
    width: 0.750em; /*12px;*/
}

.SSBsPosChangeInClass
{
    width: 0.938em; /*15px;*/
}

.SSBiLapCnt 
{
    width: 1.250em; /*20px;*/
}


.SSBi64ThisLapTime, .SSBi64LastLapTime, .SSBi64FastestLapTime, .SSBi64AvgLapTime,
.SSBi64GesZeit, .SSB_Modus_SchnellsteRunde_i64FastestLapTime, .SSBi64LapTimeDelta, .SSBi64ReferenceLapTime 
{
    width: 3.750em; /*60px;*/
}

.SSBsClub 
{
    width: 6.250em; /*100px;*/
}

.SSBsBike 
{
    width: 5.000em; /*80px;*/
}


.SSBi64FastestLapTime 
{
    width: 2.813em; /* 45px;*/
}

.SSBi64SlowestLapTime
{
    width:2.813em; /* 45px;*/
}

.SSBi64LapTime
{
    width:2.813em; /* 45px;*/
}


.SSBi64WpTime {
    width: 2.813em; /*45px;*/
}


/* LPS Last Pass Through Score */
.LPSiPosInClass, .LPSiPos 
{
    width: 0.938em; /*15px;*/
    background-color: lime;
}

.LPSsPosGes, .LPSsPosInClass, .LPSi64RaceTimeTicks {
    display: none;
}

.LPSsKurzbezeichnung
{
    width: 1.250em; /*20px;*/
}

.LPSiStartNr
{
    width: 1.250em; /*20px;*/
}

.LPSsName
{
    width: 3.125em; /*50px;*/
}

.LPSsStatus
{
    width: 0.750em; /*12px;*/
}


.LPSiLapCnt
{
    width: 0.938em; /*15px;*/
}

.LPSi64GesZeit
{
    width: 3.438em; /*55px;*/
}


.LPSi64ThisLapTime
{
    width: 2.188em; /*35px;*/
}


.LPSi64LapTime
{
    width: 2.188em; /*35px;*/
}


.LPSi64Time
{
    width: 2.188em; /*35px;*/
}


/* #### Bei Orientation Portrait und diversen Auflösungen */
/* or wird mit Comma Separeted List dargestellt*/
@media only screen and (orientation:portrait)
and (max-device-width: 1440px)
{
    .BigClock
    {
        font-size:1.5em;
    }

    .LPSsStatus
    {
        display:none;
    }

    .LPSsName
    {
        display:none;
    }


}

/* ################################### */


/* ### 1600 x 900 ################################ */
/* Keine Änderungen zu 1920x1080 */
/* Erledigt 11.08.2018 mst */
@media only screen and (max-device-width: 1600px) and (orientation:landscape) {
    body 
    {
        font-size:10px;
    }

}
/* ################################### */

/* ### 1440 x 900 ################################ */
/* Erledigt 11.08.2018 mst */
@media only screen and (max-device-width: 1440px) and (orientation:landscape) {
    body 
    {
        font-size:10px;
    }
}
/* ################################### */





@media only screen and (max-device-width: 1366px) and (orientation:landscape){

   body 
   { 
        font-size:12px; 
   }
}


@media only screen and (max-device-width: 1280px) and (orientation:landscape) {

    body {
        font-size: 11px;
        background-color:red;
    }
}




@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
    body 
    {
        font-size:10px;
    }

}

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
    body {
        font-size: 10px;
        background-image:none;
        background-color:orange;
    }
}

/* Smartphones (portrait and landscape) ----------- */
/*
	@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
*/

/*@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)*/ 

@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px) 
{

    body {
        font-size: 0.9em;
        margin: 0px;
        /*padding-bottom: 30px;*/
        background-color: black;
        background-image: url('../images/logo.jpg');
        background-size: 50%;
        background-position: center top 300px;
        background-repeat: no-repeat;
    }

    .RedFrame
    {
        display:none; /*block;  none; */
    }

    .RedFrameMobile {
        display:block;
    }

    .Laufbezeichnung
    {
        display:none;
    }

    .LogoImg img
    {
        display:none;
    }

    .SSBiPosInClass, .SSBiPos 
    {
        width: 2.0em; /* 1.125em */
    }


    .SSBsKurzbezeichnung
    {
        width: 3.50em;
    }

	.SSBiStartNr
	{
		width: 2.0em; /*1.563em; /*25px;*/
	}


    .SSBFlagSize, .SSBimgNationFlag 
    {
        display:none;
    }

    .SSBsNation
    {
        display:none;
    }

    .SSBsStatusImgSize, .SSBsStatus
    {
        display:none;
    }


    .SSBsPosChangeInClass
    {
        display:none;
    }

    .SSBiLapCnt {
        width: 2.50em;
    }

    .SSBi64GesZeit, .SSB_Modus_SchnellsteRunde_i64FastestLapTime {
        width: 5.0em;
    }

    .SSBi64WpTime {
        display:none;
    }


    .SSBsClub, .SSBsBike {
        display: none;
    }

    .SSBi64ThisLapTime, .SSBi64LastLapTime, .SSBi64FastestLapTime, .SSBi64AvgLapTime
    {
        display: none;
    }

    .BigClock, .lblBigClock {
        display: none;
    }


    .LPHeadline, .LptGrid, .Footer {
        display: none;
    }

    .btnSortToggle {
        background-color: lime;
        border-color: red;
        Border-Style: Solid;
        Border-Width: 2px;
        color: black;
        font-size: 1.0em;
        width: 100%;
        height: 3.0em;
        margin:5px 0px 5px 0px;
    }

    .ParticipantSearch {
        margin-top:10px;
        padding:5px;
        color: black;
        font-size: 1.0em;
        max-width: 100%;
        height: 2.0em;
    }

    .panelSortToggle {
        width: 100%;
        height: 90px;
    }

} /*EOF MOBILE */