html { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } h1 { } h2 { padding-left: 40pt; } .leaderboard { width: 35%; position: absolute; top: 0; bottom: 0; left: 0; padding-top: 8pt; height: auto; background-color: rgba(0,0,0,0.8); color: #d4d0cd; } .next-meal { width: 45%; 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-info { width: 19%; height: 100%; position: absolute; left: 80%; } .user-card { height: 80pt; position: relative; 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-card img{ width: 50pt; height: auto; position: absolute; top: 50%; left: 8pt; margin-top: -25pt; } .user-card span { font-size: 16pt; position: absolute; top: 30%; left: 75pt; margin-top: -8pt; width: 90pt; 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; } .logout-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: white; }