CSS class inside a class doesnt see style?

Hi there,

I have something like

<div class='boxed'><h5 class="flip" onclick="$('.panel').slideUp('slow'); $('#p1').slideDown('slow');">
    <img src="http://fc08.deviantart.net/fs70/i/2011/155/8/9/drafting_compass_by_abluescarab-d3i03s4.png">Technical Data Sheets
</h5></div>
<div id="p1" class="panel">
            <ul>
            <li>test me</li>
            <li>test me</li>
    </ul>
</div>
 
<div class='boxed'><h5 class="flip" onclick="$('.panel').slideUp('slow'); $('#p2').slideDown('slow');">
    <img src="http://fc08.deviantart.net/fs70/i/2011/155/8/9/drafting_compass_by_abluescarab-d3i03s4.png">Technical Data Sheets
</h5></div>
<div id="p2" class="panel">
            <ul>
            <li>test me</li>
            <li>test me</li>
    </ul>
</div>
   
   
</div> <!-- end of techmenu -->

css is

.boxed {
    font-family: helvetica;
    width: 200px;
    height: 70px;
    border-top:.5px dotted grey;
    border-bottom:.5px dotted grey;
    text-align: center;
}
h5 {
    
    color:blue;
    text-decoration: underline;
    
}
h5 img{
    height:20px;
    width: 20px;
}
h5 ul,li {
    color:blue;
    text-decoration: none;
    list-style-type: none;
    text-align: left;
}

.boxed div.panel,p.flip {
	margin-left: 0px;
	padding-left: 5px;
	text-align: center;
	background: white;
	border: solid 1px #fff;
}
 
.boxed div.panel {
    margin:0;
	widht: 20%;
	height: 100px;
	display: none;
}

Select allOpen in new window

       
I can't get it to see the last two areas ... .boxed div.panel, p.flip or .boxed div.panel
it's acting as though it doesn't exist.
If I take off .boxed, then it sees it, but it strips out the stuff that I was intending to style under .boxed, if that makes sense.