/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */ @media only screen and (orientation:portrait) { #turn { display:block; } #unity-container { display:none; } } /* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */ @media only screen and (orientation:landscape) { #turn { display:none; } #unity-container { display:block; } } html,body{ /*background-color: rgb(22, 182, 231);*/ background-color: rgb(255, 255, 255); } div.largeBanner { font-size: 70px; width: 100%; } div.content { margin: auto; } div.broken, div.missing { margin: auto; position: relative; width: 600px; } div.broken a, div.missing a { color: white; position: relative; top: 300px; text-align: center; } div.broken img, div.missing img { width: 600px; height: 300px; position: relative; top: 300px; border-width: 0px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 10px 20px 10px rgba(25,25,25,0.5); box-shadow: 5px 10px 20px 10px rgba(25,25,25,0.5); } div#pluginBlockedDiv, div.missing, div.broken { display: none; } div#unityPlayer { cursor: default; margin: auto; } div.jumbotron { margin-top:10%; -webkit-box-shadow: 5px 10px 20px 10px rgba(25,25,25,0.5); box-shadow: 5px 10px 20px 10px rgba(25,25,25,0.5); } a { color: #ffffff; text-decoration: none; } .center { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .horzCenter { margin: auto; width: 320px; border: 5px solid #FFFF00; padding: 10px; } .vertCenter { position: absolute; top: 50%; transform: translate(0, -50%); border: 5px solid #FFFFFF; padding: 10px; } /* .customButton { display: inline-block; background: #dd4b39; color: white; width: 165px; border-radius: 5px; white-space: nowrap; } .customButton:hover { background: #e74b37; cursor: pointer; } span.icon { background: url('https://google-developers.appspot.com/+/images/branding/btn_red_32.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 35px; height: 35px; } span.buttonText { display: inline-block; vertical-align: middle; padding-left: 15px; padding-right: 15px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the *//* font-family: 'Roboto',arial,sans-serif; } #frameHolder { position:absolute; background-color:rgb(22, 182, 231);; z-index:100; height:100%; width:100%; top:0%; left:0%; display: none; } #frameContent { position:absolute; background-image:url('../img/5Jacket_Original.jpg'); background-position: center; background-repeat: no-repeat; background-size: 25% 35%; height:100%; width:100%; } */ #buttons { width: 300px; margin: 0 auto; }