Different definitions, same result

I have created the following CSS style tag.

[code]
<style type=”text/css”>
@media print { body { font-size: 16pt } }
@media screen, print { body { line-height: 1.2 } }

@media screen {
body { font-size: 1.2em; }

.btn { font-size:1.2em; width:18%; }
.btnAct { font-size:0.8em; width:18%; }
#kbrd { width:30%; }
border:3px solid blue;
}

@media handheld {
body { font-size: 1.5em; }

.btn { font-size:1.2em; width:18%; }
.btnAct { font-size:0.8em; width:18%; }
#kbrd { width:90%; }
}
</style>
[/code]

I thought I would be getting two different keyboard (#kbrd) displays, one for the desktop screen and a larger one for the handheld device.

What appears to be happening is that only the first #kbrd definition is being recognized
as each device appears to be taking up 1/3 of the display.

Am I doing something wrong with the definitions. ?

Also in #CSS _↴