:root {
    --fSize_Dft:11pt;
    --footHeight:110px;
    --screenH:calc(100vh - var(--footHeight) - 0px);
    --iPhoneW:257px;
    --iPhoneH:521px;
}

body{
    background-image:url("i2/gradBg.png");
    background-repeat:repeat-x;
    background-size:auto 750px;
    background-color:#ebebd9;
    margin: 0;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-weight: normal;
    font-size: var(--fSize_Dft);
    line-height: calc(var(--fSize_Dft) * 1.55);
    color:#676767;
}
a{text-decoration: none; color: #55a555;}
h1{
    font-size: calc(var(--fSize_Dft) * 1.55);
}
h4{
    font-size: calc(var(--fSize_Dft) * 1.14);
    line-height: calc(var(--fSize_Dft) * 1.2);
    margin:30px 0 -10px 0;
}
ul {
    padding-left:1vw;
}
ul li {
    color: #55a555;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--fSize_Dft) * 1.1);
    line-height: calc(var(--fSize_Dft) * 1.25);
}
.ColGrn{color:#55a555}
.ColBrn{color:#985522}

div#mainDiv{
    position: relative;
    width:750px;
    margin-left:auto;
	margin-right:auto;
    min-height:var(--screenH);
}
div#iPhoneCol{
    position: relative;
    width:257px;
    margin-top:42px;
    margin-bottom:42px;
    float: left;
    display: block;
}
div#mainCol{
    width:450px;
    height:calc(100% - var(--footHeight));
    margin-top:28px;
    margin-bottom:28px;
    float: right;
    display: block;
}
div#mainCol_Top {
    position: relative;
    height: 225px;
}
div#mainCol nav{
    display: block;
    position: absolute;
    width: 45%;
    bottom: -0.1vw;
}
#logo {
    position: absolute;
    width: 225px;
    height: 225px;
    bottom: 0;
    right: 0;
}
div#mainCol nav img{
    margin-top: 4px;
    width:167px;
    height:31px;
}
div#mainCol nav a#btn_ScreenShots{
    display: none;
}
img#line{
    width:450px; height:25px;
    margin-top:16px;
}
div#mainText p{
    clear: both;
    text-align: justify;
}
div#mainText.noJustify p{
    text-align: left;
}
#h_para1 {
    font-style: oblique;
}
p#h_para2 .span1{
    display: inline-block;
    margin-top: 0;
    padding: 0 5px 0 5px;
    font-size: var(--fSize_Dft);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #f3f3ee;
    background: url("i2/grass_block_single.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
p#h_para2 .span1 span:nth-child(1){
    color: #ccee11;
}

/* -------------------- */

img#iPhone{
    position: absolute;
    z-index: 50;
    left: 10;
    top: 10;
    width: var(--iPhoneW);
    height: var(--iPhoneH);
    cursor: pointer;
}
img.screenshot{
    position: absolute;
    z-index: 10;
    left:18px;
    top:10px;
    width:227px;
    height:494px;
}
div#sshotsNav{
    display: flex;
    column-gap: 1px;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: calc(var(--iPhoneH) + 10px);
    width: 100%;
    height: 30px;
}
div#sshotsNav img{
    height: 30px;
    width: 23px;
    cursor: pointer;
}
div#sshotsNav img:nth-child(1),
div#sshotsNav img:nth-child(2){
    width: 21px;
}
#iPhoneCol img.appleBtn{
    width:136px;
    height:46px;
    margin-top:calc(var(--iPhoneH) + 62px);
    margin-left:64px;
}
#mainText img.appleBtn{
    display: none;/* mobiles only */
}

/* -------------------- */

div#ft_Wrap{
    clear: both;
    width: 100%;
    height: var(--footHeight);
    display: grid;
    grid-template-columns: auto 750px auto;
    grid-template-rows: auto;

    background:
        url("i2/ftBg_Board.png") top left repeat-x,
        url("i2/ftBg_Grass.png") top left repeat;
    background-size: 600px auto;
    
}
div#ft_M{
    height: var(--footHeight);
    background-image:url("i2/ftBg-Ball.png");
    background-size: 100px 110px;
    background-position-x: right;
    background-repeat: no-repeat;
}
div#ft_R{
    background-image:url("i2/ftBg-Grs-R.png");
    background-size: 11px 9px;
    background-position: 110px 63px;
    background-repeat: no-repeat;
}
div#ft_M a{
    display:inline-block;
    margin: 67px 20px 0 0;
}
div#ft_Wrap a.lnk_ScreenShots{
    display: none;
}
div#ft_M a:first-of-type {
    margin-left: 0;
}
div#ft_M a, div#ft_M span{
    color:#f2f2f2;
}
div#ft_CprRgt{
    display: inline;
}
span#cpyRgt_1{
    margin-left: 30px;
}
body span#cpyRgt_1,
body span#cpyRgt_2 {
    color: #ccee11;
}