Initial commit

Source/Style/style.css

@@ -0,0 +1,303 @@
+html {
+	height: 100%;
+}
+
+body {
+	min-height: 100%;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('../../Source/Style/Roboto-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src: url('../../Source/Style/Lato-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'OpenSans';
+	src: url('../../Source/Style/OpenSansCondensed-Light.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Economica';
+	src: url('../../Source/Style/Economica-Bold.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+@keyframes pulse {
+	0% {
+		transform: scale(1, 1);
+	}
+	50% {
+		transform: scale(1.1, 1.1);
+	}
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+.pulse {
+	animation: pulse 1s linear infinite;
+}
+
+@keyframes blink {
+	50% {
+		border-color: #ff0000;
+	}
+}
+
+.flash { animation: blink .5s step-end infinite alternate;
+}
+
+#board {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+	width: 562px;
+	line-height: 0;
+	padding: 2px;
+	border: solid 3px #4169e1;
+	border-radius: 5px;
+}
+
+#board .card {
+	height: 80px;
+	width: 56px;
+}
+
+	#board .card svg {
+		pointer-events: none;
+	}
+
+
+.flexRow {
+	display: flex;
+	flex-direction: row;
+}
+
+.flexCol {
+	display: flex;
+	flex-direction: column;
+}
+
+.flexCenter {
+	display: flex;
+	justify-content: center;
+}
+
+.flexAlign {
+	align-items: center;
+}
+
+.flexPad {
+	display: flex;
+	justify-content: space-around;
+}
+.flexSpace {
+	display: flex;
+	justify-content: space-between;
+}
+
+.flexEnd {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.player {
+	width: 75px;
+	height: 90px;
+	border: 1px solid grey;
+	border-radius: 2px 2px 0 0;
+}
+
+	.player .plyrImg {
+		height: 75px;
+		background-size: 100%;
+	}
+
+	.player .plyrCoin {
+		width: 18px;
+		height: 18px;
+		margin: 1px;
+		border-radius: 8px;
+	}
+
+#dealt .card {
+	height: 94px;
+	width: 66px;
+	margin: 1px;
+}
+
+.dealt {
+	width: 125px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 1px;
+}
+
+.stats {
+	width: 125px;
+}
+
+	.stats .card {
+		height: 70px;
+		width: 50px;
+	}
+
+.coin {
+	width: 32px;
+	height: 32px;
+	border-radius: 18px;
+	background-clip: content-box;
+	margin: 0 10px 0 6px;
+}
+
+.msg {
+	text-align: center;
+	font-family: Roboto;
+	font-size: 14px;
+	border: solid 1px grey;
+	border-radius: 2px 2px 0 0;
+	margin: 2px 0 3px 0px;
+}
+
+.box {
+	border: 1px solid grey;
+	border-radius: 2px;
+}
+
+.boxHdr {
+	display: flex;
+	justify-content: center;
+	border-left: 1px solid grey;
+	border-top: 1px solid grey;
+	border-right: 1px solid grey;
+	border-radius: 2px 2px 0 0;
+	background-color: #F8F8F8;
+	font-family: Roboto;
+	font-size: 12px;
+}
+
+.boxTrl {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-left: 1px solid grey;
+	border-bottom: 1px solid grey;
+	border-right: 1px solid grey;
+	border-radius: 0 0 2px 2px;
+	background-color: #F8F8F8;
+	font-family: Roboto;
+	font-size: 12px;
+}
+
+.btn {
+	border: solid 1px grey;
+	border-radius: 4px;
+	font-family: Roboto;
+	font-size: 12px;
+	margin: 3px;
+	padding: 2px;
+	color: white;
+	background-color: #00B000;
+	display: block;
+	text-align: center;
+}
+
+.gameBox {
+	border-left: 1px solid grey;
+	border-right: 1px solid grey;
+	border-bottom: 1px solid grey;
+}
+
+.circle {
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+}
+
+.cirsml {
+	width: 12px;
+	height: 12px;
+	border-radius: 6px;
+}
+
+.hilit {
+	background-color: yellow;
+}
+.plyrName {
+	width: 100%;
+	font-family: Economica;
+	font-size: 13px;
+	text-align: center;
+	display: inline-block;
+	overflow: hidden
+}
+
+.plyBlnk {
+	background-image: url(./blank.png);
+}
+
+.LognInp {
+	display:  flex;
+	margin: 5px;
+	background-color: white;
+	padding: 1px;
+}
+
+.tabrow {
+	width: 100%;
+	text-align: center;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	line-height: 24px;
+	position: relative;
+	font-family: Roboto;
+	font-size: 13px;
+}
+
+	.tabrow:after {
+		position: absolute;
+		content: "";
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		border-bottom: 1px solid #AAA;
+		z-index: 1;
+	}
+
+	.tabrow:before {
+		z-index: 1;
+	}
+
+	.tabrow li {
+		width: 80px;
+		margin: 0 5px;
+		padding: 0 10px;
+		border: 1px solid #AAA;
+		border-radius: 3px 3px 0px 0px;
+		font-family: Lato;
+		background: #ECECEC;
+		display: inline-block;
+		position: relative;
+		z-index: 0;
+	}
+
+		.tabrow li.tabsel {
+			background: #FFF;
+			color: #000;
+			z-index: 2;
+			border-bottom-color: #FFF;
+		}