/*  EVWE.css
    CSS file for EV Winds/Elevation Browser App
    
    Designed for Tesla Browser (WebKit v601.x.x, approximately equivalent to Safari 9
*/


/* CSS Reset */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

/* Font Definitions */
@font-face 
{
    font-family: "TeslaFontLight";
    src: url("../Fonts/TeslaFontLight.woff") format('woff');
}
@font-face 
{
    font-family: "TeslaFontBold";
    src: url("../Fonts/TeslaFontBold.woff") format('woff');
}
@font-face 
{
    font-family: "TeslaFontMed";
    src: url("../Fonts/TeslaFontMed.woff") format('woff');
}

/* Default Text for all body */
body 
{
    background-color:Black;
    font-family: TeslaFontMed;
    font-size: 14px;
    color:White;
}

/* Div/Frames */
/* Tesla 7.0+ browser usable visible portal is 1200x690, using 1200x640 to avoid bottom corners that are not usable */
/* Individual instrument frames are 400x640 with 20px padding, usable area 360x600 */
#frameMaster 
{
    position: absolute;
    top:0px;
    left:0px;
    width:1200px;
    height:640px;
}
#frameCompass
{
    position:absolute;
    top:0px;
    left:400px;
    width:400px;
    height:640px;
    background:Black;
}
#frameWind
{
    position:absolute;
    top:0px;
    left:0px;
    width:400px;
    height:640px;
    background:Black;
}
#frameElevation
{
    position:absolute;
    top:0px;
    left:800px;
    width:400px;
    height:640px;
    background:Black;
}
#frameVersion
{
    position:absolute;
    top:596px;
    left:800px;
    width:360px;
    height:30px;
    text-align:right;
    padding:0px 20px 0px 20px;
}
#frameNextUpdate1
{
    position:absolute;
    top:560px;
    left:0px;
    width:240px;
    height:60px;
    text-align:right;
    padding:0px 0px 0px 20px;
}
#frameNextUpdate2
{
    position:absolute;
    top:560px;
    left:240px;
    width:95px;
    height:60px;
    text-align:right;
    padding:0px 20px 0px 0px;
}
#frameDimBackground
{
    position: absolute;
    top:0px;
    left:0px;
    width:1200px;
    height:640px;
    background-color:rgba(0,0,0,0.8);
    visibility:hidden;
}
#frameAPIKeys
{
    position:absolute;
    top:100px;
    left:100px;
    width:1000px;
    height:440px;
    background:#000000;
    border:5px solid #ffffff;
    visibility:hidden;
}
#frameSettingsButton
{
    position:absolute;
    top:20px;
    left:1140px;
    width:40px;
    height:40px;
    background:url(../Graphics/settings-Icon.png) center no-repeat;
}
#frameSettings
{
    position:absolute;
    top:100px;
    left:100px;
    width:1000px;
    height:440px;
    background:#000000;
    border:5px solid #ffffff;
    visibility:hidden;
}
#frameBrightnessControl
{
    position: absolute;
    top:0px;
    left:0px;
    width:1200px;
    height:640px;
    background-color:rgba(0,0,0,0);
    pointer-events:none;
}


/* Compass Frame Elements */
#compassWind
{
    position:absolute;
    top:137px;
    left:17px;
    width:365px;
    height:365px;
    background: url(../Graphics/compassWind.png) center no-repeat;
}
#compassGraphic
{
    position:absolute;
    top:137px;
    left:17px;
    width:365px;
    height:365px;
    background: url(../Graphics/compass.png) center no-repeat;
}
#compassCar
{
    position:absolute;
    top:187px;
    left:137px;
    width:126px;
    height:265px;
    background: url(../Graphics/modelS-top2.png) center no-repeat;
}
#compassMarker
{
    position:absolute;
    top:106px;
    left:186px;
    width:27px;
    height:24px;
    background: url(../Graphics/compassmarker.png) center no-repeat;
}
#compassCourseText
{
    position:absolute;
    top:24px;
    left:20px;
    width:360px;
    height:20px;
    text-align:center;
}
#compassCourse
{
    position:absolute;
    top:44px;
    left:20px;
    width:360px;
    height:45px;
    text-align:center;
}
#compassGroundSpeed
{
    position:absolute;
    top:525px;
    left:20px;
    width:360px;
    height:50px;
    text-align:center;
}
#compassAirSpeed
{
    position:absolute;
    top:575px;
    left:20px;
    width:360px;
    height:50px;
    text-align:center;
}

/* Wind Frame Elements */
#windLoc
{
    position:absolute;
    top:24px;
    left:20px;
    width:360px;
    height:20px;
    text-align:center;
}
#windDirSpeed
{
    position:absolute;
    top:44px;
    left:20px;
    width:360px;
    height:40px;
    text-align:center;
}
#windCar
{
    position:absolute;
    top:232px;
    left:158px;
    width:84px;
    height:177px;
    background: url(../Graphics/modelS-top-small2.png) center no-repeat;
}
#windRXArrowColor
{
    position:absolute;
    top:260px;
    left:252px;
    width:120px;
    height:120px;
    background:white;
    background: linear-gradient(to right, #ffff00 , #9a9a00);
    transform:scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windRXArrow
{
    position:absolute;
    top:258px;
    left:250px;
    width:124px;
    height:124px;
    background: url(../Graphics/windarrow.png) center no-repeat;
    transform:rotate(0deg) scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windRXText
{
    position:absolute;
    top:260px;
    left:27px;
    width:120px;
    height:120px;
    text-align:center;
    visibility:hidden;
}
#windLXArrowColor
{
    position:absolute;
    top:260px;
    left:27px;
    width:120px;
    height:120px;
    background:white;
    background: linear-gradient(to right, #9a9a00 , #ffff00);
    transform:scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windLXArrow
{
    position:absolute;
    top:258px;
    left:25px;
    width:124px;
    height:124px;
    background: url(../Graphics/windarrow.png) center no-repeat;
    transform:rotate(180deg) scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windLXText
{
    position:absolute;
    top:260px;
    left:252px;
    width:120px;
    height:120px;
    text-align:center;
    visibility:hidden;
}
#windHWArrowColor
{
    position:absolute;
    top:100px;
    left:139px;
    width:120px;
    height:120px;
    background:white;
    background: linear-gradient(#994c00 , #ff7f00);
    transform:scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windHWArrow
{
    position:absolute;
    top:98px;
    left:137px;
    width:124px;
    height:124px;
    background: url(../Graphics/windarrow.png) center no-repeat;
    transform:rotate(-90deg) scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windHWText
{
    position:absolute;
    top:420px;
    left:139px;
    width:120px;
    height:120px;
    text-align:center;
    visibility:hidden;
}
#windTWArrowColor
{
    position:absolute;
    top:420px;
    left:139px;
    width:120px;
    height:120px;
    background:white;
    background: linear-gradient(#00ff00 , #009900);
    transform:scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windTWArrow
{
    position:absolute;
    top:418px;
    left:137px;
    width:124px;
    height:124px;
    background: url(../Graphics/windarrow.png) center no-repeat;
    transform:rotate(90deg) scale(1.0,1.0) translate(0px,0px);
    visibility:hidden;
}
#windTWText
{
    position:absolute;
    top:100px;
    left:139px;
    width:120px;
    height:120px;
    text-align:center;
    padding:40px 0 0 0;
    visibility:hidden;
}
#windError
{
    position:absolute;
    top:460px;
    left:20px;
    width:360px;
    height:30px;
    text-align:center;
}


/* Elevation Frame Elements */
#elevIncline
{
    position:absolute;
    top:205px;
    left:40px;
    width:320px;
    height:230px;
    background:Gray;  /* Change color to show climb, level, or descend */
}
#elevMaskCar
{
    position:absolute;
    top:145px;
    left:0px;
    width:400px;
    height:350px;
    background:url(../Graphics/elevMaskCar.png) center no-repeat;
    transform:rotate(0deg); /* Change rotation to show climb, level, or descend */
}
#elevMaskIncline
{
    position:absolute;
    top:325px;
    left:40px;
    width:320px;
    height:115px;
    background:Black;
    transform:translate(0,0); /* Change translation to reveal incline color */
}
#elevCar
{
    position:absolute;
    top:237px;
    left:60px;
    width:280px;
    height:166px;
    background:url(../Graphics/modelS-side2.png) center no-repeat;
    transform:rotate(0deg); /* Change rotation to show climb, level, or descend */
}
#elevText
{
    position:absolute;
    top:24px;
    left:20px;
    width:360px;
    height:20px;
    text-align:center;
}
#elevation
{
    position:absolute;
    top:44px;
    left:20px;
    width:360px;
    height:40px;
    text-align:center;
}
#elevAttitudeClimb
{
    position:absolute;
    top:420px;
    left:20px;
    width:360px;
    height:40px;
    text-align:center;
}    
#elevAttitudeDescend
{
    position:absolute;
    top:420px;
    left:20px;
    width:360px;
    height:40px;
    text-align:center;
}    
#elevGrade
{
    position:absolute;
    top:455px;
    left:20px;
    width:360px;
    height:50px;
    text-align:center;
}    
#elevRate
{
    position:absolute;
    top:505px;
    left:20px;
    width:360px;
    height:50px;
    text-align:center;
}
#elevError
{
    position:absolute;
    top:150px;
    left:20px;
    width:360px;
    height:30px;
    text-align:center;
}
#elevLowSpeed
{
    position:absolute;
    top:385px;
    left:20px;
    width:360px;
    height:50px;
    text-align:center;
}


/* API Keys Frame Elements */
#apiKeysTitle
{
    position:absolute;
    top:30px;
    left:50px;
    width:900px;
    height:30px;
    color:White;
    text-align:center;
}
#apiKeysIntroText
{
    position:absolute;
    top:100px;
    left:50px;
    width:900px;
    height:130px;
    color:LightGray;
    text-align:justify;
}
#apiKeysOWMLabel
{
    position:absolute;
    top:262px;
    left:50px;
    width:280px;
    height:25px;
    text-align:right;
}
#apiKeysGNLabel
{
    position:absolute;
    top:302px;
    left:50px;
    width:280px;
    height:25px;
    text-align:right;
}
#txtBoxOWMAPIKey
{
    position:absolute;
    top:257px;
    left:350px;
    width:350px;
    height:25px;
    text-align:left;
    background:Black;
}
#txtBoxGNAPIKey
{
    position:absolute;
    top:297px;
    left:350px;
    width:350px;
    height:25px;
    text-align:left;
    background:Black;
}
#apiKeysVerifyText
{
    position:absolute;
    top:350px;
    left:50px;
    width:900px;
    height:130px;
    color:LightGray;
    text-align:justify;
}
#apiKeysVerifyButton
{
    position:absolute;
    top:270px;
    left:825px;
    width:125px;
    height:40px;
    border-radius:5px;
    background: linear-gradient(#0088cc , #1f2999);
}
#apiKeysVerifyButtonText
{
    position:absolute;
    top:8px;
    left:10px;
    width:105px;
    height:25px;
    color:White;
    text-align:center;
}
#apiKeysLoading
{
    position:absolute;
    top:274px;
    left:785px;
    width:32px;
    height:32px;
    background:url(../Graphics/ajax-loader2.gif) center no-repeat;
}
#apiKeysAjax1
{
    position:absolute;
    top:262px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/ajax-loader.gif) center no-repeat;
}
#apiKeysAjax2
{
    position:absolute;
    top:302px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/ajax-loader.gif) center no-repeat;
}
#apiKeysCheckmark1
{
    position:absolute;
    top:262px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/checkmark.png) center no-repeat;
}
#apiKeysCheckmark2
{
    position:absolute;
    top:302px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/checkmark.png) center no-repeat;
}
#apiKeysError1
{
    position:absolute;
    top:262px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/redx.png) center no-repeat;
}
#apiKeysError2
{
    position:absolute;
    top:302px;
    left:720px;
    width:16px;
    height:16px;
    background:url(../Graphics/redx.png) center no-repeat;
}

/* Settings Frame Elements */
#settingsTitle
{
    position:absolute;
    top:30px;
    left:50px;
    width:900px;
    height:40px;
    color:White;
    text-align:center;
}
#settingsLanguageLbl
{
    position:absolute;
    top:160px;
    left:0px;
    width:200px;
    height:25px;
    text-align:right;
}
#settingsLangEnc
{
    position:absolute;
    top:150px;
    left:225px;
    width:150px;
    height:40px;
}
#settingsLangEnc select 
{
    width:150px;
    height:40px;
    border-radius:5px;
    background: linear-gradient(#0088cc , #1f2999);
    border:none;
    outline:none;
    display:inline-block;
    color:White;
    text-align:center;
}
/*  3ebbfb - Light
    3542ab - Dark
    0088cc - Light
    1f2999 - Dark
*/
#settingsLangEnc select option
{
    width:150px;
    height:24px;
    padding:14px 0px 8px 0px;
    border-radius:5px;
    background: #424b54;
    border:none;
    outline:none;
    color:White;
    text-align:center;
}
#settingsUnitsLbl
{
    position:absolute;
    top:260px;
    left:0px;
    width:200px;
    height:25px;
    text-align:right;
}
#settingsUnitsEnc
{
    position:absolute;
    top:250px;
    left:225px;
    width:150px;
    height:40px;
}
#settingsUnitsEnc select 
{
    width:150px;
    height:40px;
    border-radius:5px;
    background: linear-gradient(#0088cc , #1f2999);
    border:none;
    outline:none;
    display:inline-block;
    color:White;
    text-align:center;
}
#settingsUnitsEnc select option
{
    width:150px;
    height:24px;
    padding:14px 0px 8px 0px;
    border-radius:5px;
    background: #424b54;
    border:none;
    outline:none;
    color:White;
    text-align:center;
}
#settingsBrightnessLbl
{
    position:absolute;
    top:160px;
    left:450px;
    width:200px;
    height:25px;
    text-align:right;
}
#settingsBrightnessEnc
{
    position:absolute;
    top:150px;
    left:675px;
    width:150px;
    height:40px;
}
#settingsBrightnessEnc select 
{
    width:150px;
    height:40px;
    border-radius:5px;
    background: linear-gradient(#0088cc , #1f2999);
    border:none;
    outline:none;
    display:inline-block;
    color:White;
    text-align:center;
}
#settingsBrightnessEnc select option
{
    width:150px;
    height:24px;
    padding:14px 0px 8px 0px;
    border-radius:5px;
    background: #424b54;
    border:none;
    outline:none;
    color:White;
    text-align:center;
}
#settingsText
{
    position:absolute;
    top:360px;
    left:50px;
    width:900px;
    height:70px;
    color:LightGray;
    text-align:justify;
}
#settingsClose
{
    position:absolute;
    top:30px;
    left:815px;
    width:150px;
    height:40px;
    border-radius:5px;
    background: linear-gradient(#0088cc , #1f2999);
    text-align:center;
}
#settingsCloseText
{
    position:absolute;
    top:8px;
    left:10px;
    width:130px;
    height:25px;
    color:White;
    text-align:center;
}


/* Styles */
.display36bold
{
    font-family: TeslaFontBold;
    font-weight:bold;
    font-size: 36px;
    color:White;
}
.display28bold
{
    font-family: TeslaFontBold;
    font-weight:bold;
    font-size: 28px;
    color:White;
}
.display16
{
    font-family: TeslaFontMed;
    font-size: 16px;
    color:White;
}
.display16bold
{
    font-family: TeslaFontBold;
    font-weight:bold;
    font-size: 16px;
    color:White;
}
.display16Error
{
    font-family: TeslaFontMed;
    font-size: 16px;
    color:Red;
}    
.display16Note
{
    font-family: TeslaFontMed;
    font-size: 16px;
    color:DimGray;
}    
.display18bold
{
    font-family: TeslaFontBold;
    font-weight:bold;
    font-size: 18px;
    color:White;
}
.display16Link
{
    font-family: TeslaFontMed;
    font-size: 16px;
    color:#00aeef;
    text-decoration:none;
}
.display28
{
    font-family: TeslaFontMed;
    font-size: 28px;
    color:White;
}
.display14
{
    font-family: TeslaFontLight;
    font-size:14px;
    color:LightGrey;
}
.windColor
{
    color:#00aeef;
}
.display16border
{
    font-family: TeslaFontMed;
    font-size: 16px;
    color:White;
    border-style:solid;
    border-width:2px;
}