html { font-family: 'Roboto', sans-serif; } body { margin: 0; padding: 0; } h1 { } h2 { padding-left: 40pt; } .leaderboard { width: 35%; position: fixed; top: 0; bottom: 0; left: 0; padding-top: 8pt; height: auto; background-color: rgba(0,0,0,0.8); color: #d4d0cd; } .right-pane { width: 65%; height: 100%; position: absolute; top: 0; left: 35%; padding-top: 8pt; } .lb-entry { padding: 0; height: 60pt; position: relative; } .lb-entry img { height: 50pt; width: auto; position: absolute; top: 50%; left: 25pt; margin-top: -25pt; } .lb-entry span.score { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 70%; } .lb-entry span.name { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 30%; } .cook-entry { padding: 0; /*height: 90pt;*/ position: relative; } .cook-card { background-color: #F1EDEA; height: 100pt; margin-left: 20pt; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .cook-card img { height: 50pt; width: auto; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; } #cook-small-thumb { height: 20pt; width: auto; position: relative; left: 0; top: 0; } .cook-card span { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 120pt; } .cook-card p { position: absolute; left: 140pt; margin: -16pt 0 0 0; font-size: 11pt; height: 24pt; top: 50%; text-align: center; } .eater-entry { padding: 0; position: relative; } .eater-card { background-color: #F1EDEA; height: 70pt; width: 200pt; margin: 6pt 0 6pt 20pt; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .eater-card img { height: 50pt; width: auto; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; } .eater-card span { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 120pt; } .eater-entry span { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 120pt; } /*.rect-button { width: 100pt; height: 26pt; background-color: #EE7500; position: absolute; color: white; top: 50%; right: 32pt; margin-top: -13pt; cursor: pointer; }*/ .rect-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: white; } .add-button { height: 50pt; width: 50pt; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; color: white; border-radius: 25pt; background-color: #EE7500; cursor: pointer; } .add-button span { font-size: 34pt; position: absolute; top: 50%; margin-top: -18pt; left: 0; width: 100%; text-align: center; } .user-card { display: flex; position: absolute; top: 10px; right: 10px; background-color: #F1EDEA; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .user-info { display: flex; flex-direction: column; justify-content: space-evenly; padding: 10px; } .user-card img { width: 80px; height: 80px; margin: 10px; } .user-card span { font-size: 16pt; text-align: center; } .logout-button { width: 90pt; height: 25pt; background-color: #EE7500; position: absolute; color: white; left: 75pt; top: 70%; margin-top: -13pt; cursor: pointer; } .rect-button { width: 90px; height: 25px; line-height: 25px; text-align: center; vertical-align: middle; color: white; cursor: pointer; padding: 4px; margin: 10px; } .logout-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: white; }