@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 { background-color: #ffffff; padding: 0px; padding-left: 10px; vertical-align: middle; background-image: url('images/banner.png'); background-size: cover; } header .logo_l { color: #ffc000; font-weight: bold; text-shadow: 2px 2px 3px rgba(100,100,100,0.5); font-size: xx-large; } header .logo_games { color: #888888; font-weight: normal; font-style: italic; font-size: large; } 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; } footer { background-color: #f2f2f2; box-shadow: 0 3px 3px rgba(200,200,200,0.5); border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; padding: 4px; text-align: center; vertical-align: top; font-size: small; clear: both; } .wrapper { border: 0px; padding: 0px; width:100%; height:100%; background-color: #ffffff; } .sectionheader { text-align: center; } .subsectionheader { text-align: center; } .center { text-align: center; } .newstitle { font-weight: bold; } .newsdate { font-size: small; font-style: italic; } .newsitem, .box { padding: 6px; box-shadow: 1px 1px 4px rgba(100,100,100,0.5); border-radius: 5px; margin-bottom: 20px; } .info { color: green; font-size: small; } .warning { color: red; font-size: small; } .question { font-style: italic; } .answer { } .linklist { width: 100%; padding: 0px; margin: 0px; border-width: 0px; } .linkheader { font-weight: bold; } .linkitem { padding: 4px; vertical-align: top; } .thumbnailbox { width: 33%; float: left; padding: 10px; text-align: center; } .thumbnail { border-width: 0px; box-shadow: 0 1px 4px rgba(0,0,0,0.8); border-radius: 6px; width: 90%; } .screenshot { border-width: 0px; box-shadow: 6px 6px 4px rgba(0,0,0,0.5); border-radius: 10px; width: 90%; } .themethumb { float: right; width: 33%; text-align: center; padding: 10px; } /* dropdown menu */ .dropdown { position: relative; display: inline-block; width: 40%; } .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; } aside, .nav_expanded { display: none; } main { padding: 10px; } .ytlink { display: none; } .ytinfo { font-size: small; font-weight: normal; padding-left: 20px; } @media only screen and (min-width: 768px) { .ytlink { display: block; } .nav_expanded { display: block; } .nav_dropdowns { display: none; } aside { display: block; float: left; width: 25%; padding-top: 10px; box-shadow: 3px 3px 3px rgba(200,200,200,0.5); } aside p { padding-left: 10px; margin: 0px; font-weight: bold; } aside a { display: block; padding: 3px; padding-left: 20px; } aside a:hover { text-decoration: none; background-color: #aaaaff; background: linear-gradient(90deg, #aaaaff, white); color: white; } main { float: left; width: 75%; } header { background-repeat: no-repeat; background-position: right; background-size: auto; } } @media only screen and (min-width: 1200px) { .wrapper { width: 1200px; height: auto; margin: 0px auto; box-shadow: 0px 0px 5px rgba(0,0,0,0.8); } body { background-color: #d2d2d2; } footer { margin-bottom: 20px; } }