* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
body { font-family:Verdana, Arial, Helvetica, sans-serif; margin:20px auto; width:100%; }
#conte { position:relative; width:840px; margin:0px auto; border:1px solid #3F659E; background: #829fca; }
#cabe { position:relative; display:block; font-weight: bolder; color:#003366; background: #FFFFFF; padding:10px; }
#resto { padding:10px !important; }
.boton { text-align:center; padding:5px 15px; background: #5e82b6; border-radius:5px; color:#FFFFFF; font-size:14px; cursor:pointer; float:left; margin: 0px 5px; }
.boton:hover { background:#3F659E; }
#ndip, #mdip { float:left; margin: 7px 5px; font-size:12px; }
#ndip { width:50%; }
.clear { clear:both !important; }
#res { float:right; width:100%; }
#imag { background: #FFFFFF; border:2px solid #3F659E; text-align:center; padding:15px 10px; }
#imag, #tdip, #menu { border-radius:8px; }
#imag img { width:95%; height:auto; }
#tdip { font-size:11px; color:#000000; height:80px; overflow-y: auto; overflow-x:none; 
	background:#FFFFFF; padding: 5px 15px; margin-top:10px; }
	
#menu { position:relative; background:#FFFFFF; font-weight:bold; list-style: none; margin:0px; padding:5px 0px; clear: both; float:left; width:30%; height:405px; overflow-y: auto; overflow-x:none; }
#menu img { display:block; float:left; width:30%; height:auto; border:1px solid #CCC; }
#menu span { display:block; float:right; width:62.5%; font-size: 11px; padding:0px 5px; }
#menu span b { font-weight:normal !important; }
#menu li { color:#003366; display:block; padding:5px; margin:2px 5px; border:1px solid #DDDDDD; border-radius:5px; clear:both; cursor:pointer; }
#menu li:hover { color:#000000; background:#EEEEEE; border:1px solid #3F659E; }
.dpon { background:#666666; color: #FFFFFF !important; }
.dpon:hover { cursor:default !important; background:#666666 !important; color:#FFFFFF !important; border:1px solid #FFFFFF !important; }

@media all and (max-width: 840px) {
	#conte { width:auto; }
	#menu { height:500px; }
	#mdip { clear:left; }
}
@media all and (max-width: 575px) {
	#menu, #res { position:relative; display: block; clear:both; float:none; width:auto; }
	#menu span, #cabe, #tdip, #ndip, #mdip, .boton { font-size:10px !important; }
	#menu { height:auto !important; }
	#res { margin-top:10px; } 
	#tdip { height:auto; background:#FFFFFF; }
}
@media all and (max-width: 550px) {
	#menu { height:320px; }
}