body {
	margin:0px;
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
}

#contenedor_grafico {
	width:960px;
}

/*Header*/

#header_grafico {
	background-color: #afbf75;
	height:56px;
	padding:10px;
	color:#ffffff;
	border: 4px solid #97b138;
	margin-bottom:20px;
	position: relative;
}

#header_grafico h2 {
	font-size: 34px;
	margin:0px;
	padding:0px;
	width:300px;
	line-height: 26px;
	float:left;
}

#header_grafico:after {
	background-image: url('../img/fondo_selector.png');
	background-repeat: no-repeat;
	width:230px;
	height:20px;
	content: " ";
	position: absolute;
	bottom:-24px;
	right:-30px;
}

#header_grafico h2 span {
	font-size: 26px;
}

#header_grafico p {
	font-size: 14px;
	float:left;
	width:500px;
	border-left: 2px solid #bfcc91;
	padding-left:50px;
	margin-top:4px;
	margin-left:30px;
}

/* Caja comunas */

#selector_comuna {
	width:230px;	
	height:541px;
	padding:3px;
	background-color: #e8e8e7;
	position: relative;
	float:left;
}

#selector_comuna:after {
	background-image: url('../img/fondo_selector.png');
	background-repeat: no-repeat;
	width:230px;
	height:20px;
	content: " ";
	position: absolute;
	bottom:-20px;
	left:40px;
}

#selector_comuna h4 {
	background-color: #3f4032;
	color: #ffffff;
	margin:0px;
	padding:0px;
	text-align: center;
	height:28px;
	line-height: 28px;
	border-bottom: 1px solid #7d7d74;
}

#selector_comuna h4 img {
	float:right;
	margin-top:7px;
	margin-right:10px;
}

#selector_comuna ol {
	overflow: auto;
	color: #990000;
	height:485px;
	width:182px;
	font-size: 13px;
	font-weight: bold;
}

#selector_comuna ol li:hover span {
	cursor: pointer;
	color: #747474;
	text-decoration: underline;
}

#selector_comuna ol li span {
	color: #43423e;
	line-height: 18px;
	cursor: pointer;
	width:142px;
	display: block;
	padding:3px 6px;
}

.selected {
	background-color:#4db0dc;
	color: #ffffff!important;
	border-radius: 3px;
}

.selected:hover {
	cursor:default!important;
	text-decoration: none!important;
}

/* Caja Gráfico */

#graficoradar {
	float:left;
	position: relative;
}

#graficoradar h3 {
	background-color: #e8e8e7;
	border: 3px solid #e2e2e2;
	color: #404031;
	width:603px;
	margin-left:25px;
	margin-top:0px;
	height:26px;
	line-height: 26px;
	padding-left:90px;
}

#notacomuna {
	position: absolute;
	background-color: #e2e2e2;
	width:78px;
	left:25px;
	top:0px;
}

#notacomuna h5 {
	width:72px;
	height:26px;
	background-color: #404031;
	color: #ffffff;
	border: 3px solid #cecece;
	text-align: center;
	line-height: 25px;
	font-size: 15px;
	float:left;
	margin:0px;
}

#notacomuna h6 {
	text-align: center;
	margin:0px;
	border-top: 8px solid #ffffff;
	color: #ffffff;
	background-color: #404031;
	float:left;
	width:78px;
	margin-bottom:3px;
	padding: 2px 0px;
}

#notacomuna span.puntaje {
	width:72px;
	height:43px;
	margin-left:3px;
	margin-bottom:3px;
	background-color: #4db0dc;
	line-height: 43px;
	color: #ffffff;
	float:left;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
}

#notacomuna p {
	margin-left:3px;
	font-size:11px;
	border-bottom: 1px dotted #ccc;
	font-weight: bold;
	margin-bottom:4px;
	margin-top:5px;
}

#notacomuna p:nth-child(6) {
	border-bottom: none;
}

#notacomuna img {
	margin-right:4px;
}

#notacomuna p span {
	font-size:11px;
	margin-right:6px;
	font-weight: normal;
	float:right;
}

#comparar_comuna {
	position: absolute;
	top:2px;
	right:20px;
	box-shadow: 0px 1px 8px #cccccc;
}

#comparar_comuna h5 {
	margin:0px;
	border: 3px solid #cecece;
	background-color: #404031;
	color: #ffffff;
	height:25px;
	line-height: 25px;
	text-align: center;
}

#comparar_comuna form {
	background-color: #beaae0;
	height:38px;
	border: 3px solid #b5a0ed;
}

#comparar_comuna form select {
	border: 1px solid #737371;
	height:28px;
	line-height: 28px;
	vertical-align: middle;
	margin-top:4px;
	padding-left:3px;
	margin-left:8px;
	margin-right:8px;
	font-size: 13px;
}

#contenedor_canvas {
	width:660px;
	height:555px;
	background-image: url(../img/fondo_grafico.png);
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top:-15px;
	left:50px;
}

#graficoradar #leyenda {
	position: absolute;
	top:503px;
	right:20px;
	width:120px;
	font-size: 11px;
	display: none;
	border: 1px dotted #ccc;
	padding:8px;
}

#graficoradar #leyenda:before {
	content: "Comunas comparadas:";
	position:absolute;
	top:-17px;
	width:130px;
	left:-2px;
	background-color: #4db0dc;
	color: #ffffff;
	padding:1px 3px 1px 5px;
	border: 1px solid #ffffff;
}

#leyenda span.comuna_principal {
	width:5px;
	height:5px;
	background-color: #4f9cca;
	display: block;
	float:left;
	margin-top:5px;
	margin-right:5px;
}

#leyenda span.comuna_compara {
	width:5px;
	height:5px;
	background-color: #a388e8;
	display: block;
	float:left;
	margin-top:5px;
	margin-right:5px;
}

#canvas {
	margin-top:-3px;
	margin-left:5px;
}

img.simbologia {
	position: absolute;
	top:515px;
	left:20px;
}

#cifras_grafico span {
	height:18px;
	width: 28px;
	line-height: 18px;
	display: block;
	background: rgba(79,156,202,0.3);
	font-size: 11px;
	position: absolute;
	color:#404031;
	border-radius: 3px;
	text-align: center;
}

#cifras_grafico span.transporte {
	top:40px;
	left:365px;
}

#cifras_grafico span.educacion {
	top:135px;
	left:612px;
}

#cifras_grafico span.urbanismo {
	top:136px;
	left:120px;
}

#cifras_grafico span.salud {
	top:308px;
	left:111px;
}

#cifras_grafico span.pobreza {
	top:447px;
	left:192px;
}

#cifras_grafico span.seguridad {
	top:307px;
	left:652px;
}

#cifras_grafico span.areasverdes {
	top:447px;
	left:564px;
}