@media all and (orientation:portrait) {
        
        html,body{
        	background-color:#000;
        	margin:0px;
        	padding:0px;
        	height: 100%;
        	overflow: hidden;
        	color:white;
        }
        #pad{
                background-image:url("pad_1.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width:100%;
                height:20%;
                position:fixed;
                bottom:10%;
                left:0;
                opacity:0.4;
        }
        #button_start{
                width:9%;
                height:4%;
                position:fixed;
                bottom:11%;
                left:50%;
        }
        #button_select{
                width:9%;
                height:4%;
                position:fixed;
                bottom:11%;
                left:41%;
        }
        .dir_button{
                width:10%;
                height:6%;
                position:fixed;
                -moz-user-select: -moz-none;
                -khtml-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
        }
        #button_up{
                bottom:22%;
                left:13%;
        }
        #button_down{
                bottom:12%;
                left:13%;
        }
        #button_left{
                bottom:17%;
                left:3%;
        }
        #button_right{
                bottom:17%;
                left:23%;
        }
        .jump-fire{
                width:14%;
                height:8%;
                position:fixed;
                bottom:11%;
                left:41%;
                -moz-user-select: -moz-none;
                -khtml-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
        }
        #button_b{
                left:66.4%;
                bottom:16%;
        }
        #button_a{
                left:82.3%;
                bottom:16%;
        }

        #pad div:active{
            background-color:gray;
            opacity:0.5
        }

        .config{
                height:20px;
                position:fixed;
                bottom:1%;
                left:3%;
                width:94%;
        }
        #nes_rom_select{
                width:40%;
                float:left
        }
        #frame_skip_select{
                width:40%;
                float:right
        }
        select,option{
                color: #ddd;
                background-color: #333;
                border: 0px;
        }
        .list{
                color:#ccc;
                margin-left:10px
        }
        canvas{
                width: 100%
        }
        #please_rotate{
                display:none
        }
}


@media all and (orientation:landscape) {

        html,body{
        	background-color:#000;
        	margin:0px;
        	padding:0px;
        	height: 100%;
        	overflow: hidden;
        	color:white;
                font-size:15pt;
                font-family:Arial,Serif;
        }
        #container{
                display:none
        }
        #please_rotate{
                text-align:center;
                display: table; 
                height:100%;
                width:100%;
                overflow: hidden;
        }
        #please_rotate>div{
                display: table-cell;
                vertical-align: middle;
        }
        
}