<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="ginscorekeeperlogo.png">
  <link rel="apple-touch-icon" href="ginscorekeeperlogo.jpg">
  <title>Gin Scorekeeper Deluxe</title>
  <meta name="description" content="Gin Card game scoring.">
  <meta name="keywords" content="Gin, Card, game, scoring, scorekeeping">
  <meta name="author" content="Me">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-380Z2L7FXT"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-380Z2L7FXT');
</script>

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <style>

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url(http://fonts.googleapis.com/css?family=Dosis:500|Patrick+Hand+SC|Mouse+Memoirs);
@import url('https://fonts.googleapis.com/css?family=Abel');


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-size: 14pt; 
  line-height: 1.1;
  font-weight: 400;
  padding: 0px;
  margin: 0px;
  font-family: 'Abel', sans-serif; 
 }

#backgroundimage {
	margin-left: 0;
	width: 100%;
	height:100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	background:url(background.jpg) center top;
	-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}
.container {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  }


@media (min-width: 550px) {
  .container { width: 95%; }
}  
  


  /* PAGE HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
  padding-top: 80px;
  padding-bottom: 60px; 
  float: left;
  width: 100%;
  color:#ffffff;
}
.header img {
  max-width: 300px;	
}


/* blue var(--backcolor), brown #99591a, gold var(--backcolor), purple #991a99 */
:root {
    --backcolor:#3266CC;
    --buttoncolor:red;
    --darkcolor:#3266CC;
    --lightcolor:#f8f8f8;
}

#foo {
    color: var(--main-color);
}
.starburst {
	position: fixed;
	padding: 6px 6px;
	font-size: 18pt;
	top: 0px; 
	right: 0px;
	margin-top: 0%;
	margin-right: 0%;
	background-color: var(--buttoncolor);	
	z-index: 200;
	color: white;
} 
@media (min-width: 750px) {
.starburst {
	margin-top: 2%;
	margin-right: 4%;
	position: fixed;
	padding: 10px 12px;
	padding-right: 24px;
	font-size: 24pt;
}
}
.top {
	background-color: var(--backcolor);
	padding: 10px 0;
	color: #ffffff;	
}

.toptext {
	padding: 8px 0px 0px 6px;
	float: left;	
}
.toplogo {
	width: 65px;
	float: left;		
}

  /* INSTGRAM FRAME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.inst {
	width: 66%;
	vertical-align: middle;
	background-color: #ffffff;
	padding: 1%;
	margin: 1%;
	box-sizing: border-box;	
}
@media (min-width: 750px) {
.inst {
	width: 48%;
}
}
  /* S
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* blue var(--backcolor), brown #99591a, gold var(--backcolor), purple #991a99 */

.services {
	float: left;
	width: 100%;
	color: #FFF;
	text-align:center;
	background-position:center;
	background-color: var(--backcolor);
	box-sizing:border-box;
	padding: 12px;
	margin: 1%;
	border-radius: 8px;
	box-sizing: border-box;
	}
.services1 {
	float: left;
	width: 100%;
	color: #FFF;
	text-shadow: 2px 2px 2px #3D3C3A;
	text-align:center;
	background-position:center;
	background-color: var(--backcolor);
	box-sizing:border-box;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	margin: 1%;
	border-radius: 8px;
	box-sizing: border-box;
	}
@media (min-width: 750px) {
	.services {width: 48%;}
	.services1 {
		width: 98%;
		padding-left: 32px;
		padding-right: 32px;
	}
}	

  /* POSTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.posts {
	float: left;
	width: 100%;
	color: #000000;
	text-align:left;
	font-size: 12pt; 
	line-height: 1.2;
	background-position:center;
	background-color: #ffffff;
	box-sizing:border-box;
	padding: 8px;
	margin: 1%;
	border-radius: 2px;
	box-sizing: border-box;
	}
@media (min-width: 750px) {
	
	.posts {
		width: 48%;
			
	}
}

/* blue var(--backcolor), brown #99591a, gold var(--backcolor), purple #991a99 */
.dark {
	color: #ffffff; 
	background-color: var(--darkcolor);
  	float: left;
  width: 100%;
  margin-right:0% ; 
  margin-left:0%; 
    padding-top: 30px;
  	padding-bottom: 45px; 
}	
.light {
 background-color: var(--lightcolor);
 color:black;
  float: left;
  width: 100%;
  margin-right:0% ; 
  margin-left:0%; 
    padding-top: 30px;
  	padding-bottom: 45px; 
}
@media (min-width: 900px) {
.light {
  width: 90%;
  margin-right:5% ; 
  margin-left:5%; 
}	
.dark {
  width: 90%;
  margin-right:5% ; 
  margin-left:5%; 
}	
}
@media (min-width: 1200px) {
.light {
  width: 80%;
  margin-right:10% ; 
  margin-left:10%; 
}	
.dark {
  width: 80%;
  margin-right:10% ; 
  margin-left:10%; 
}	
}

.blue {
  padding-top: 40px;
  padding-bottom: 60px; 
  float: left;
  width: 100%;
  color: var(--darkcolor);
}

.right {
	float: right;
	clear:right;
}
.left {
	float: left;
	clear:right;


}

.footer {
	background-color: var(--darkcolor);
	color: #fff;
	text-align:center;
	 padding-top: 20px;
    padding-bottom: 20px; 
	    float: left;
  width: 100%;
}
.half {
	width: 100%;	
	padding: 12px;
 	box-sizing: border-box;
}
@media (min-width: 750px) {
	.third {
		float: left;
		width: 33%;	
	}
	.half { 
		width: 48%;
		float: left;
	}
}
.showing {
    opacity: 1;
    z-index: 2;
}

.controls {
	background-color: transparent;
	border: none;	
}
.controls:hover {
	background-color: transparent;
	border: none;	
}

.category {
	float: left;
	display:block;
	position:relative;
	width: 18%;
	color: #FFF;
	text-shadow: 2px 2px 2px #3D3C3A;
	text-align:center;
	background-color: var(--backcolor);
	padding: 2px;
	margin: 1%;
	border-radius: 2px;
	box-sizing: border-box;
	}

.cat {
	font-size: 8pt;
	line-height: 1.2;
	position: absolute;	
	top: 10px;
	left: 0px;
	text-align:center;
	width: 100%;
	padding: 2px;
	background-color:rgba(51,51,51, 0.5)
}
@media (min-width: 500px) {
	.cat {
	font-size: 12pt;
	}
}
@media (min-width: 700px) {
	.cat {
	font-size: 16pt;
	}
}

  /* UNUSED STUFF
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.spam { display:none;}

.center {
  
  background-color: #102844;
  padding: 26px;
  text-align: center;
  border-radius: 40px;
  
}
  
.image {
	max-width: 100%;
	border-radius: 20px;
}




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Segoe Script', sans-serif; }
  
h1 {
	font-weight: bold;
	font-size: 20px;
	line-height: 1.6;
	text-align:center;
	text-shadow: 2px 2px 2px #c0c0c0; 
}
h2 { 
	font-weight: bold;
	font-size: 28px;
	line-height: 1.6;
	text-align:center;
	text-shadow: 2px 2px 2px #c0c0c0; 
	}
h3 { font-size: 22pt; line-height: 1.0;  letter-spacing: -.1rem; 
	font-weight: bold;
	padding-bottom: 12px;
	margin-bottom: 12px;
	color: var(--backcolor);
	}

h4 { font-size: 16pt; text-align:center; line-height: 1.4;}
h5 { font-size: 14pt; color: white;padding-top: 8px;padding-bottom: 8px; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 240px) {
.iconcontainer { width:70px;  border-radius: 4px;margin-top:20px}
  h1 { font-size: 16pt; }
  h2 { font-size: 24pt; }
  h3 { font-size: 2.6rem; }
  h4 { font-size: 20pt; }
  h5 { font-size: 16pt; }
  h6 { font-size: 1.5rem; }
}

@media (min-width: 550px) {
.iconcontainer { width:80px;  border-radius: 4px;margin-top:0px}
  h1 { font-size: 20pt; }
  h2 { font-size: 24pt; }
  h3 { font-size: 2.6rem; }
  h4 { font-size: 20pt; }
  h5 { font-size: 16pt; }
  h6 { font-size: 1.5rem; }
}

@media (min-width: 800px) {
.iconcontainer { width:80px;  border-radius: 4px;margin-top:0px}
  h1 { font-size: 28pt; }
  h2 { font-size: 36pt; }
  h3 { font-size: 2.6rem; }
  h4 { font-size: 20pt; }
  h5 { font-size: 16pt; }
  h6 { font-size: 1.5rem; }
}

@media (min-width: 1100px) {
.iconcontainer { width:80px;  border-radius: 4px;margin-top:0px}
  h1 { font-size: 36pt; }
  h2 { font-size: 48pt; }
  h3 { font-size: 4.4rem; }
  h4 { font-size: 32pt; }
  h5 { font-size: 18pt; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 8; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #FFFFFF;
  text-decoration: none; }
a:hover {
  text-decoration: underline;
  color: #FFFFFF; }
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.edbutton { cursor:pointer; font-size: 12pt; background-color:#F18800; margin: 4px; padding: 4px; color:white; width: 90px; text-align: center; }


.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  padding: 4px 30px;
  color: var(--buttoncolor);
  text-align: center;
  font-size: 16pt;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 4px solid var(--buttoncolor);
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: var(--buttoncolor);
  outline: 0; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
    font-size: 12pt;
  color: rgba(153,153,153,1);
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  margin-bottom: 8px;
  width: 100%;
    -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
  
select {
  padding: 6px 30px 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   margin-bottom: 8px;
  background-color: #fff;
  color: #000;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  background-image: url(../images/arrowhead.png);
  background-position: right;
  background-repeat:no-repeat;
  text-indent: 0.01px;/*In Firefox*/
  text-overflow: '';
  -webkit-appearance: none;
  	-moz-appearance: none;
  appearance: none;

  }
input[type="radio"] {
    padding: 0px;
	margin: 0 12px 0 2px;

}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline;
   }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
   }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: outside; }
ol, ul {
  padding-left: 0;
  padding-top: 6; }
li { 
  text-align:left;
  line-height: 1.3;
  margin-left: 18px; }



/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
	vertical-align: top;
	color:var(--backcolor); 
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 10pt;
	max-width: 0;
  }
@media (min-width: 650px) {
th,
td {
	font-size: 14pt;
   }
}
 


/* Spacing

button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
ul,
ol,
form {
  margin-bottom: 2.5rem; }
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 4px;
  margin-bottom: 4px;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 750px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

</style>
  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/ico" href="player_icon.png">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="apple-touch-icon" href="player_icon.jpg">

<script>
</script>

<script>

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    if (exdays != 0) document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    if (exdays == 0) document.cookie = cname + "=" + cvalue + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
</script>

</head>
<body onresize="iframeresize()" style="overflow:hidden;margin:0px; padding:0px;">

<div id="backgroundimage" style="width:200;height:200"></div>

<div id="mainscreen" style="text-align:center;display:inline;position:absolute;padding:0;margin:0;width:100%">

<div id="opening" style="display:none;position:fixed; top:20vh;  left:25vw; width:60%;max-width:280px;background-color:white;border-radius: 8px;">
<br>Pin: <input type=password onkeyup="see(this.value)" style="width:90px;height:40px" /><br><br>
</div>
</center>



<div id="running" style="display:inline">
  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<p class=starburst><span class="chat1" style="cursor:pointer" title="Click to download" onClick="window.open('https://apps.apple.com/app/id1547740517','Gin Scorekeeper Deluxe','resizable,height=540px,width=360px');"><img src="ginscorekeeperlogo.png" style="border-radius:8px;height:50px;float:left">Click to download<br>from Apple store!</span></p>

    <div class="blue" id="Home">  
  <div class="container">
 </div>
  </div>
  
    <div class="light" id="Introduction">  
  <div class="container">
        <div><h2>Gin Scorekeeper Deluxe</h2><h2>♠ ♣ <font color=red>♥ ♦</font></h2><h1>"Score Your Game"</h1></div> 
<div style="height:18px"></div>
   <div class="services" id="divsize" style="border-radius: 6px;">
      <h4>Live Scoring</h4> 
	<br><iframe src="ginscorekeeper.htm" width=100% style="height:540px;border-radius:8px;border:0px solid black"></iframe>
   </div>

 <div class="services">
<h4>Make Life Easy</h4>
<p>No more need for pen and paper for gin players. Gin scorekeeping just got easy and fun on your phone or tablet. 
The Gin Scorekeeper Deluxe is an app loaded with features for all kinds of gin games and players. Whether you play one on one OR as a team of two or more.
It will also keep track of wagering by line and game in total.</p>
</p>Enter the score at the completion of each hand and Gin Scorekeeper Deluxe will do the rest.
</p>
<p>
<li>Track games for you and your friends</li>
<li>Setup mini-tournament play</li>
<li>Generate leaderboards and have fun</li>
</p>
<img src="gin-rummy-cards.jpg" width=100% style="border-radius:8px">
   </div>

   </div>
    </div>

    <div class="blue">  
  <div class="container">
    </div>
    </div>


    <div class="dark" id="About">  
  <div class="container">
        <center><h2><b>About GinScorekeeper Deluxe</b></h2></center><br>
GinScorekeeper.com is run by committed professionals with long and extensive experience in gaming.
We recognized a unique opportunity in enhancing player experience with a forward-looking attitude towards new methods, procedures and technologies. Our software enhances organization skills of the organizer, engagement for the players, and excitement for the fans.
<br><br>
 
  	<div class="third"> <p><a href="sms:&body=Hi, here is the gin scorekeeper site I wanted to tell you about. http://www.ginscorekeeper.com">Click here to text a friend<br>about our service from your phone</a></p><h5>Text a friend</h5></div>
	<div class="third"> <p><a href="mailto:?&subject=Gin ScoreKeeper&body=Hi, easy gin scorekeeper deluxe app I was telling you about. http://www.ginscorekeeper.com">Click here to email a friend<br>about our service from your phone</a></p><h5>Email a friend</h5></div>
	<div class="third"> <p>Website by <a href="http://www.sitedesigns.ca">SiteDesigns</a></p>
      	<a title="Click for Gin Scorekeeper Deluxe on Facebook" href="https://facebook.com/Gin-scorekeeper-104189428223927" target=_blank><img src=facebook.png border=0 width="50px"></a>
      	<a title="Click for Gin Scorekeeper Deluxe on Twitter" href="https://twitter.com/ginscorekeeper" target=_blank><img src=twitter.png border=0 width="50px"></a>
    </div>

</div>
  </div>
  </div>



    <div class="blue">  
  <div class="container"> </div>
  </div>


</div>
</div>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>