/* site.css Site-wide CSS for look and feel */ html { font-size:30px; } body { font-family:'Roboto', sans-serif; color:#666; } h1 {font-size:4.5rem; color:#000;} h2 {font-size:4.5rem; color:#666;} h3 {font-size:3.5rem; color:#000;} h4 {font-size:3.5rem; color:#666;} h5 {font-size:2.5rem; color:#000;} h6 {font-size:1.3rem; color:#666;} a, .a_link { cursor:pointer; text-decoration:none; } .float_left { float:left; } .float_right { float:right; } #div_workspace { /* Very outermost wrapper, just inside */ } header { clear:both; position:fixed; z-index:1000; top:0; width:70%; margin-left:15%; margin-right:15%; padding-top:20px; border-bottom:1px solid #ddd; background-color:#fff; } #img_logo { float:left; height:90px; margin-top:-10px; margin-bottom:10px; margin-right:15px; } #spn_logo { float:left; padding-top:10px; font-weight:bold; font-size:2.5rem; font-family:'Nothing You Could Do',cursive; color:#000; } #p_hamburger { padding-top:10px; font-size:2rem; cursor:pointer; } #div_nav_options { display:none; position:absolute; margin-top:40px; margin-left:-450px; width:500px; background-color:#fff; border-top:2px grey solid; border-left:2px grey solid; border-right:2px grey solid; cursor:pointer; } #div_nav_options p { padding-top:7px; padding-bottom:7px; border-bottom:2px solid #666; text-align:center; color:#666; } #div_nav_options a { color:#666; } #div_nav_options p:hover { font-style:italic; } main { clear:both; } footer { clear:both; margin:170px 15% 20px; text-align:center; } #copyright { font-size:0.5rem; } #apsolva_tag { margin-top:7px; color:#aaa; } .centered_img { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); } .button { background-color:#4CAF50; /* Green */ border:none; color:white; padding:8px 16px; text-align:center; text-decoration:none; display:inline-block; font-size:1.2rem; margin:4px 2px; transition-duration:0.4s; cursor:pointer; border-radius:8px; } .green_button { background-color:white; color:#666; border:2px solid #4CAF50; } .green_button:hover { font-style:italic; } .grey_button { text-align:center; background-color:white; color:#666; border:2px solid #666; } .grey_button:hover { font-style:italic; } #iPhoneP, #iPhoneL, #iPadP, #iPadL, #monitor { display:none; position:fixed; left:0; Top:0; color:#ddd; } /* Non-Retina */ @media screen and (-webkit-max-device-pixel-ratio: 1) { } /* Retina */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /* iPhone Portrait */ @media screen and (max-device-width: 480px) and (orientation:portrait) { #iPhoneP { display:inline; } h6 {font-size:1.6rem; color:#666;} header { width:95%; margin-left:2.5%; margin-right:2.5%; } #p_hamburger { font-size:2.7rem; margin-top:-15px; } } /* iPhone Landscape */ @media screen and (max-device-width: 480px) and (orientation:landscape) { #iPhoneL { display:inline; } h6 {font-size:1.6rem; color:#666;} header { width:90%; margin-left:5%; margin-right:5%; } #p_hamburger { font-size:2.7rem; margin-top:-15px; } } /* iPad Portrait */ @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { #iPadP { display:inline; } header { width:86%; margin-left:7%; margin-right:7%; } #p_hamburger { font-size:2.7rem; margin-top:-15px; } } /* iPad Landscape */ @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { #iPadL { display:inline; } header { width:80%; margin-left:10%; margin-right:10%; } #p_hamburger { font-size:2.7rem; margin-top:-15px; } }