/* general */

@font-face {
    font-family: ssp;
    src: url(ssp/SourceSansPro-Regular.otf);
}
@font-face {
    font-family: ssp;
    src: url(ssp/SourceSansPro-Bold.otf);
    font-weight: bold;
}
@font-face {
    font-family: ssp;
    src: url(ssp/SourceSansPro-It.otf);
    font-style: italic;
}
@font-face {
    font-family: ssp;
    src: url(ssp/SourceSansPro-BoldIt.otf);
    font-weight: bold;
    font-style: italic;
}

* {
    box-sizing: border-box;
}

row {
	margin: 0px;
	padding: 0px;
	width: 100px;
}

body {
	font-family: ssp;
	margin: 0px;
	color: #333340;
	background-color: white;
}
a {
	color: #3333ff;
	text-decoration: none;
}
a:hover {
	 color: #1111dd;
	 text-decoration: underline;
}

header {
	font-size: xx-large;
	text-align: center;
	font-weight: bold;
}

nav {
	background-color: #f2f2f2;
    box-shadow: 0 3px 3px rgba(200,200,200,0.5);
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}

nav a {
	display: inline-block;
	color: #333340;
	text-decoration: none;
	padding: 4px;
	padding-left: 20px;
	padding-right: 20px;
}
nav a:hover {
	color: white;
	background-color: #b2b2b2;
	text-decoration: none;
}

/* overwrite navbar from style.css for different look */
.navbarlink {
	width: 33%;
}
.navbar a {
	cursor: pointer;
}

.gametitle {
	padding: 2px;
	text-align: center;
}
.gameframe {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.floatleft {
	float: left;
}
.floatright {
	float: right;
}
.counterbox {
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 4px;
	background-color: #f2f2f2;
    box-shadow: 0 3px 3px rgba(0,0,0,0.8);
	border-radius: 4px;
	color: #333340;
}

/* general table settings for centered, no gaps and auto resized icons */
.field {
	margin: 0 auto;
    padding: 0px;
	width: 100%;
}
.tile {
	margin: 0px;
    padding: 0px;
}
.icon {
	border: 0px;
	width: 100%;
}

/* lbill */
.computertile {
	margin: 2px;
    padding: 2px;
}

/* lmastermind */
.board {
	padding: 4px;
	background-image: url('bkgnd.jpg');
	box-shadow: 0 3px 3px rgba(0,0,0,0.8), inset 0 0 2px #444444;
	border-radius: 1px;
}

/* lmemory */
.card_td {
	padding: 0px;
	margin: 0px;
	background-image: url(LMemory/card_open.png);
	background-size: cover;
}
.card_img {
	border: 0px;
	width: 100%;
}
.cardtile {
	padding: 4px;
	margin: 0px;
}
.card {
	box-shadow: 0 3px 3px rgba(0,0,0,0.8), inset 0 0 2px #444444;
	border-radius: 3px;
	border-width: 0px;
	width: 100%;
}

/* lshuffle */
.shuffletile {
	margin: 0px;
    padding: 1px;
}
.shuffleboard {
	margin: 0 auto;
	width: 100%;
	padding: 4px;
	background-color: #eeeeee;
	box-shadow: 0 3px 3px rgba(0,0,0,0.8), inset 0 0 2px #444444;
	border-radius: 1px;
}
.shufflepicture {
	border-radius: 2px;
	border-width: 0px;
}

/* dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
	background-color: #f2f2f2;
	padding:6px;
	width: 100%;
	text-align: left;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4);
}
.dropdown-content a {
    padding-left: 16px;
	padding-right: 16px;
    display: block;
}
.dropdown-content a:hover {
	color: white;
	background-color: #b2b2b2;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* mobile stuff */
@media only screen and (min-width: 768px) {
	.field, .shuffleboard {width: auto}
	.card_img { width: 64px; }
}