body {font-family: Helvetica, Arial, sans-serif; line-height:1.3; text-align:center; margin:0 auto;}
.bodydiv { padding-left: 10%; width: 80%; padding-right: 10%; height: 100%; position: absolute; }
.header { font-size: 55px; margin-top: 3%; }

.yesno { margin-bottom: 12px; border-top:1px solid #000; border-bottom:1px solid #000; padding-bottom:10px; font-family: 'Permanent Marker', arial, sans-serif; font-size: 150px; }
.morning, .afternoon { display: inline-block; padding-left: 30px; padding-right: 30px; }
.giants .yesno { border-top:1px solid #D2612F; border-bottom:1px solid #D2612F; }
.sharks .yesno { border-top:1px solid #088696; border-bottom:1px solid #088696; }
.doublesuck .yesno { border-top:1px solid #FF0000; border-bottom:1px solid #FF0000; }
#game { font-size: 50px; }
.footer { margin: 30px; font-size: 20px; }
.footer a { margin-left: 12px; margin-right: 12px; }

a:link, a:visited { text-decoration: none; color: #888 ; }
a:hover { border-bottom: 2px solid #888; }

#game { display: none; }
.details { font-weight: bold; font-size: 50px; }
.suck { background: #000 }
.suck.loading { background: #222222 }
.loading { background: #DDDDDD }
.giants { color: #D2612F; }
.sharks { color: #088696; }
.doublesuck { color: #FF0000; }
.suck .happy { color: #FFFFFF; }
.whichtime { font-size: 32px; font-family: Helvetica, Arial, sans-serif}

.menu { position: absolute; top: 0px; left: 0px; background-color: #CCCCCC; margin: 8px; border-radius: 8px; }
.menubutton { height: 63px; width: 64px; margin: 8px; padding-top: 1px;
              text-align: center; vertical-align: center; }
.menubar { height: 8px; width: 56px; background-color: #EEEEEE; margin: 9px 4px 10px 4px; border-radius: 4px; }
.menuoptions { padding: 18px; border-radius: 8px; }
.suck.menu { background-color: #333333; }
.suck .menubar { background-color: #666666; }
input { color: #333333 }
.suck input { background-color: black; color: #CCCCCC }
.invalidinput input { border-color: red }
.clickable { border-radius: 8px; margin-top: 12px; margin-bottom: 8px; border: 1px solid #888888; cursor: default; background-color: white; color: black; }
.suck .clickable { background-color: black; color: #CCCCCC }
.menu a { color: #333; }
.suck.menu a { color: #CCC; }

a { text-decoration: none; color: #888 ; }
a:hover { border-bottom: 2px solid #888; }

/* =Responsive Design
    Media Queries
-------------------------------------------------------------- */

@media screen and (max-width: 980px) {
    header { font-size: 60px; line-height: 1.0; }
    #game { font-size: 50px; }
    .footer { font-size: 20px; }
    .yesno { font-size: 100px; }
    .details { font-size: 34px; }
}

@media screen and (max-width: 650px) {
    header { font-size: 34px; }
    #game { font-size: 50px; }
    .footer { font-size: 16px; }
    .yesno { font-size: 75px; }
    .details { font-size: 34px; }
}

@media screen and (max-width: 480px) {
    header { font-size: 40px; }
    #game { font-size: 24px; }
    .footer { font-size: 14px; }
    .yesno { font-size: 70px; }
    .details { font-size: 34px; }
}

@media screen and (max-width: 320px) {  
    header { font-size: 40px; }
    #game { font-size: 24px; }
    .footer { font-size: 14px; }
    .yesno { font-size: 70px; }
    .details { font-size: 34px; }
}

@media screen and (max-width: 240px) {
	
	
}