html{
	font-family:"Avant Garde", Helvetica, sans-serif;
	font-style:oblique;
	
	/* PREVENT SELECTION OF TEXT INSIDE KEYS */
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

body{
	background-image:url('images/new_Vegas_Entrance.jpg');
	background-repeat:no-repeat;
	background-color:rgb(165,93,53);
}

#box{
	background-image:url('images/vault_Boy_Gambler.jpg');
	background-repeat:no-repeat;
	background-color:#3d4543;
	border-radius:10px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.7), 0px 10px 15px rgba(0, 0, 0, 0.7);
}

#display{
	background-size:100%;
	background-repeat:no-repeat;
	color:rgb(57,255,20);
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align:right;
	letter-spacing:1px;
	padding:0 10px;
	border-radius:3px;
	box-shadow:inset 0px 4px rgba(0, 0, 0, 0.2);
}

.keys span{
	float:left;
	position:relative;
	top:0;
	cursor:pointer;
	background:rgb(207,83,0);
	border-radius:3px;
	box-shadow:0px 4px rgba(204,102,0,0.2);
	color:rgb(230,230,230);
	text-align:center;
	
	/* SMOOTHING OUT HOVER AND ACTIVE STATES USING CSS3 TRANSITIONS */
	transition:all 0.2s ease;
}

/* STYLE FOR OPERATORS */
.keys span.operator{
	background:rgb(247,123,0);
    	font-weight:none;
}

/* STYLE FOR EVALUATE */
.keys span.eval{
	background:rgb(205,165,0);
	box-shadow:0px 4px rgba(205,165,0,0.2);
	color:rgb(230,230,230);
    	font-weight:bold;
}

/* STYLE FOR CLEAR */
.keys span.clear{
	background-repeat:no-repeat;
	box-shadow:0px 4px rgba(204,102,0,0.2);
}

/* STYLE FOR MEMORY BUTTONS */
.keys span.memory{
	background:rgb(247,123,0);
}

/* HOVER EFFECTS FOR REGULAR KEYS */
.keys span:hover{
	background:rgb(255,190,0);
	box-shadow:0px 4px rgb(155,90,0);
}

/* HOVER EFFECTS FOR OPERATOR KEYS */
.keys span.operator:hover{
	background:rgb(255,190,0);
	box-shadow:0px 4px rgb(155,90,0);
}

/* HOVER EFFECTS FOR EVALUATE KEY */
.keys span.eval:hover{
	background:rgb(245,205,0);
	box-shadow:0px 4px rgb(155,115,0);
}

/* HOVER EFFECTS FOR CLEAR KEY */
.keys span.clear:hover{
	background-repeat:no-repeat;
	box-shadow:0px 4px rgb(205,155,30);
}

/* HOVER EFFECTS FOR MEMORY KEYS */
.keys span.memory:hover{
	background:rgb(255,190,0);
	box-shadow:0px 4px rgb(155,90,0);
}

/* SIMULATING "PRESSED" EFFECT ON ACTIVE STATE OF THE KEYS BY REMOVING THE 
BOX-SHADOW AND MOVING THE KEYS DOWN A BIT */
.keys span:active{
    background:rgb(255,190,0);
	box-shadow:0px 0px rgb(255,255,255);
	top:4px;
}

.keys span.operator:active{
    background:rgb(255,190,0);
	box-shadow:0px 0px rgb(255,255,255);
	top:4px;
}

.keys span.eval:active{
    background:rgb(245,205,0);
	box-shadow:0px 0px rgb(255,255,255);
	top:4px;
}

.keys span.clear:active{
	background-repeat:no-repeat;
	top:4px;
	box-shadow:0px 0px rgb(255,255,255);
}

.keys span.memory:active{
    	background:rgb(255,190,0);
	box-shadow:0px 0px rgb(255,255,255);
	top:4px;
}

@media all and (orientation:portrait){
    body{
	   background-size:auto;
    }
    
    #box{
	   background-size:130%;
	   height:460px;
	   width:305px;
    }
    
    #display{
        background-image:url('images/display.jpg');
        position:relative;
        left:19px;
        top:20px;
        width:81%;
        height:40px;
        font-size:25px;
        line-height:40px;
    }
    
    .keys{
        font-size:25px;
        margin-left:18px;
        margin-top:30px;
    }
    
    .keys span{
        width:22%;
        height:44px;
        margin:0 5px 10px 0;
        line-height:42px;
    }
    
    .keys span.eval{
        width:46%;
    }
    
    .keys span.clear{
    	background-image:url('images/nuclear_Clear.gif');
        height:44px;
        background-size:100%;
    }
    
    .keys span.clear:hover{
		background-image:url('images/nuclear_Clear_Press.gif');
		background-size:100%;
    }
    
    .keys span.clear:active{
		background-image:url('images/nuclear_Clear_Press.gif');
		background-size:100%;
    }
}

@media all and (orientation:landscape){
    body{
	   background-size:100%;
    }
    
    #box{
        background-position:0px -120px;
        background-size:100%;
        height:278px;
        width:520px;
	}
    
    #display{
        background-image:url('images/display2.jpg');
        position:relative;
        left:38px;
        top:3px;
        width:80.5%;
        height:36px;
        font-size:24px;
        line-height:36px;
    }
    
    .keys{
        font-size:25px;
        margin-left:38px;
        margin-top:10px;
    }
    
    .keys span{
        width:22%;
        height:32px;
        margin:0 5px 7px 0;
        line-height:34px;
    }
    
    .keys span.eval{
        width:22%;
    }
    
    .keys span.clear{
    	background-image:url('images/nuclear_Clear2.gif');
        height:32px;
		background-size:100% 32px;
    }
    
    .keys span.clear:hover{
    	background-image:url('images/nuclear_Clear_Press2.gif');
		background-size:100% 32px;
    }
    
    .keys span.clear:active{
		background-image:url('images/nuclear_Clear_Press2.gif');
		background-size:100% 32px;
    }
}