@charset "utf-8";
/*****************************************************************
 Superhero CSS Framework 0.1
 http://superherocms.com

 Copyright (c) 2009-2010

******************************************************************/

/***** Superhero css framework *****/

*{
	border: none;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

html, body{
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

.alignr{
	text-align: right;
}

.clear, 
.clear-div{
	clear: both;
}


.filemessage{
	font-size: 12px;
}

.icon{
	background-position: 5px 50%;
	background-repeat: no-repeat;
	padding: 0px 0px 0px 25px;
}

.ok{
	background-image:url(images/ok.png);
}

.okmin{
	background-image:url(images/okmin.png);
	padding: 3px 0px 3px 22px;
}


.filemessage.ok{
	background-position: 3px 3px;
	font-size: 12px;
	line-height: 14px;
	padding:5px 25px;
}


.upload{
	background-image:url(images/up.png);
}

.ajax{
	background-image:url(images/ajax-loader.gif);
}


/*Columnas*/
.full{
	width: 100% !important;
}

.column20{
	float:left;
	width: 20%;
}

.column25{
	float:left;
	width: 25%;
}

.column33{
	float:left;
	width: 33%;
}

.column34{
	float:left;
	width: 34%;
}

.column40{
	float:left;
	width: 40%;
}

.column50{
	float:left;
	width: 50%;
}

.column60{
	float:left;
	width: 60%;
}

.column66{
	float:left;
	width: 66%;
}

.column75{
	float:left;
	width: 75%;
}

.column80{
	float:left;
	width: 80%;
}

.column100{
	float:left;
	width: 100%;
}

.center{
	float: none;
	margin: 0 auto;
}

.column-container{
	padding: 0px;
}


/*** Start Rounded ***/

.rounded2-10{
	-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius: 10px; 
	-webkit-border-top-right-radius: 10px; 
	
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px;
	
}

.rounded4-10{
	-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px; 
	-moz-border-radius-bottomright: 10px;
	-webkit-border-top-left-radius: 10px; 
	-webkit-border-top-right-radius: 10px; 
	-webkit-border-bottom-left-radius: 10px; 
	-webkit-border-bottom-right-radius: 10px; 
	
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px;
	
}

.rounded2-5{
	-moz-border-radius-topleft: 5px; 
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px; 
	-webkit-border-top-right-radius: 5px; 
	
	border-top-left-radius: 5px; 
	border-top-right-radius: 5px;
	
}

.rounded4-5{
	-moz-border-radius-topleft: 5px; 
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomleft: 5px; 
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-left-radius: 5px; 
	-webkit-border-top-right-radius: 5px; 
	-webkit-border-bottom-left-radius: 5px; 
	-webkit-border-bottom-right-radius: 5px; 
	
	border-top-left-radius: 5px; 
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px; 
	border-bottom-right-radius: 5px;
	
}


.rounded2-7{
	-moz-border-radius-topleft: 7px; 
	-moz-border-radius-topright: 7px;
	-webkit-border-top-left-radius: 7px; 
	-webkit-border-top-right-radius: 7px; 
	
	border-top-left-radius: 7px; 
	border-top-right-radius: 7px;
	
}

.rounded4-7{
	-moz-border-radius-topleft: 7px; 
	-moz-border-radius-topright: 7px;
	-moz-border-radius-bottomleft: 7px; 
	-moz-border-radius-bottomright: 7px;
	-webkit-border-top-left-radius: 7px; 
	-webkit-border-top-right-radius: 7px; 
	-webkit-border-bottom-left-radius: 7px; 
	-webkit-border-bottom-right-radius: 7px; 
	
	border-top-left-radius: 7px; 
	border-top-right-radius: 7px;
	border-bottom-left-radius: 7px; 
	border-bottom-right-radius: 7px;
	
}

/*** End Rounded ***/

/*** Start Boxes ***/

.box-div{		
	background-color: #FFF;
	color: #333;
	margin: 8px 4px 0px;
	padding: 2px;
	position: relative;
	
}

.box-div .box-content{
	overflow:hidden;
	padding: 0px;
}


.box-div.black{
	border: 2px solid #161616;
}

.box-div.grey{
	border: 2px solid #CFCFCF;
}

.box-div.yellow{
	border: 2px solid #FAECC4;
}

.box-div.blue{
	border: 2px solid #D9D9FF;
}

.box-div.red{
	border: 2px solid #FF7F7F;
}

.box-div.superhero{
	background-color: #F9F9F9;
	border: 2px solid #5F5F5F;
}


.box-div.black .message{
	background-color: #FFC;
	font-size: 12px;
	padding: 5px 10px;
}


.box-div.superhero .message{
	background-color: #FFC;
}

.box-div.superhero .message p{
	font-size: 12px;
	padding: 5px 10px;
}

.box-div.superhero .message p.icon{
	padding: 5px 10px 5px 30px;
}


	.box-div h1{
		color: #333;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight:lighter;
		font-size: 18px;
		height: 22px;
		padding: 5px;
	}

	.box-div.black h1{
		background-color: #161616;
		color: #EFEFEF;
	}

	.box-div.grey h1{
		background-color: #CFCFCF;
		color: #000;
	}

	.box-div.yellow h1{
		background-color: #FCF4DC;
		color: #333;
	}

	.box-div.blue h1{
		background-color: #D9D9FF;
		color: #333;
	}

	.box-div.red h1{
		background-color: #FF7F7F;
		color: #fff;
	}

	.box-div.superhero h1{
		background-color: #5F5F5F;
		color: #fff;
	}

	.box-div.superhero .box-content h1{
		background-color: transparent;
		color: #000;
		font-size: 20px;
		letter-spacing: -1px;
	}

	.box-div.superhero .box-content p{
		padding: 5px;
	}

		.box-div h1 span{
			cursor: pointer;
			float: right;
			height: 26px;
			position: relative;
			right: -3px;
			width: 30px;
			top: -3px;
		}
		
		.box-div h1 span.expand{
			background-image: url(images/expand-icon.png);
			background-repeat: no-repeat;
		}

		.box-div h1 span.collapse{
			background-image: url(images/collapse-icon.png);
			background-repeat: no-repeat;
		}


		.box-div h1 span:hover{
			background-position: -30px;
		}

		.box-div h1 a{
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			font-weight:lighter;
			font-size: 16px;
			height: 22px;
			padding: 3px 0px 3px 3px;
			text-decoration: none;
		}

		.box-div h1 a.icon{
			background-position: 5px;
			background-repeat: no-repeat;
			padding: 0px 0px 0px 30px;
		}


		.box-div.black h1 a{
			color: #EFEFEF;
		}

		.box-div.grey h1 a{
			color: #000;
		}

		.box-div.yellow h1 a{
			color: #333;
		}

		.box-div.blue h1 a{
			color: #333;
		}

		.box-div.red h1 a{
			color: #fff;
		}

		.box-div.superhero h1 a{
			color: #fff;
		}

/*
	.box-div div{
		margin: 1px 0px;
		
	}*/

/*** End Boxes **/


/* Statr Form */

.form{
}

.form fieldset{
	border: 1px solid #666;
	margin: 5px 0px;
	padding: 5px 5px;
}

	.box-div.superhero.form fieldset{
		border: 2px solid #5F5F5F;
	}


.form fieldset legend{
	color: #353535;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	padding: 0px 5px; 
}

.form ul{
	list-style: none;
	padding: 10px 5px 10px;
}

	.form li{
		margin: 0 2% 5px;
	}
	
	.form li.column25{
		float:left;
		margin: 0 2% 5px;
		width: 21%;
	}
	
	.form li.column75{
		float:left;
		margin: 0 2% 5px;
		width: 71%;
	}


	.form li.column1{
		display: table;
		margin: 0 2% 5px;
		width: 96%;
	}

	.form li.column2{
		float:left;
		margin: 0 2% 10px;
		width: 46%;
	}

	.form li.column3{
		float:left;
		margin: 0 1% 5px 2%;
		width: 30%;
	}

	.form li.column4{
		float:left;
		margin: 0 2% 5px 2%;
		width: 21%;
	}

		.form li label{
			clear: both;
			color: #353535;
			display: block;
			font-size: 14px;
			padding: 2px 0px 0px 2px;
			width: 96%;
		}
		
		.box-div.superhero.form li label{
			color: #333;
		}
		
		
		.form li .in{
			padding: 5px 0px;
		}

		.form li .in label{
			color: #333;
			cursor: pointer;
			display: inline;
			font-size: 14px;
			padding: 5px 0px;
			width: auto;
		}



		.form li textarea,
		.form li input[type=file],
		.form li input[type=text],
		.form li input[type=password]{
			clear: both;
			display: block;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			padding: 5px 0px;
			width: 100%;
		}
		
		.form li input[type=radio],
		.form li input[type=checkbox]
		{
			clear: both;
			color: #000;
			display: block;
			float: left;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			margin: 3px 5px;
			padding: 0px;
		}


		.form li select{
			clear: both;
			color: #000;
			display: block;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			padding: 4px 0px;
			width: 100%;
		}

		.box-div.black.form .in,
		.box-div.black.form li textarea,
		.box-div.black.form li select,
		.box-div.black.form li input[type=file],
		.box-div.black.form li input[type=text],
		.box-div.black.form li input[type=password]{
			border: none;
			background-color: #EEE;
		}

		.box-div.form li input[type=file]{
			font-size: 85%;
		}

		.box-div.grey.form .in,
		.box-div.grey.form li textarea,
		.box-div.grey.form li select,
		.box-div.grey.form li input[type=file],
		.box-div.grey.form li input[type=text],
		.box-div.grey.form li input[type=password]{
			border: none;
			background-color: #F4F4F4;
		}

		.box-div.yellow.form .in,
		.box-div.yellow.form li textarea,
		.box-div.yellow.form li select,
		.box-div.yellow.form li input[type=file],
		.box-div.yellow.form li input[type=text],
		.box-div.yellow.form li input[type=password]{
			border: none;
			background-color: #FEFAED;
		}

		.box-div.blue.form .in,
		.box-div.blue.form li textarea,
		.box-div.blue.form li select,
		.box-div.blue.form li input[type=file],
		.box-div.blue.form li input[type=text],
		.box-div.blue.form li input[type=password]{
			border: none;
			background-color: #F2F2FF;
		}

		.box-div.red.form .in,
		.box-div.red.form li textarea,
		.box-div.red.form li select,
		.box-div.red.form li input[type=file],
		.box-div.red.form li input[type=text],
		.box-div.red.form li input[type=password]{
			border: none;
			background-color: #FFE5E5;
		}

		.box-div.superhero.form .in,
		.box-div.superhero.form li textarea,
		.box-div.superhero.form li select,
		.box-div.superhero.form li input[type=file],
		.box-div.superhero.form li input[type=text],
		.box-div.superhero.form li input[type=password]{
			border: none;
			background-color: #D9D9FF;
		}


		.box-div.black.form li .in:hover, 
		.box-div.black.form li textarea:hover,
		.box-div.black.form li textarea:focus,
		.box-div.black.form li select:hover,
		.box-div.black.form li select:focus,
		.box-div.black.form li input[type=file]:hover,
		.box-div.black.form li input[type=file]:focus,
		.box-div.black.form li input[type=text]:hover,
		.box-div.black.form li input[type=password]:hover,
		.box-div.black.form li input[type=text]:focus,
		.box-div.black.form li input[type=password]:focus{
			background-color: #A8D8FF;
		}


		.box-div.grey.form li .in:hover, 
		.box-div.grey.form li textarea:hover,
		.box-div.grey.form li textarea:focus,
		.box-div.grey.form li select:hover,
		.box-div.grey.form li select:focus,
		.box-div.grey.form li input[type=file]:hover,
		.box-div.grey.form li input[type=file]:focus,
		.box-div.grey.form li input[type=text]:hover,
		.box-div.grey.form li input[type=password]:hover,
		.box-div.grey.form li input[type=text]:focus,
		.box-div.grey.form li input[type=password]:focus{
			background-color: #A8D8FF;
		}

		.box-div.yellow.form li .in:hover, 
		.box-div.yellow.form li textarea:hover,
		.box-div.yellow.form li textarea:focus,
		.box-div.yellow.form li select:hover,
		.box-div.yellow.form li select:focus,
		.box-div.yellow.form li input[type=file]:hover,
		.box-div.yellow.form li input[type=file]:focus,
		.box-div.yellow.form li input[type=text]:hover,
		.box-div.yellow.form li input[type=password]:hover,
		.box-div.yellow.form li input[type=text]:focus,
		.box-div.yellow.form li input[type=password]:focus{
			background-color: #A8D8FF;
		}

		.box-div.blue.form li .in:hover, 
		.box-div.blue.form li textarea:hover,
		.box-div.blue.form li textarea:focus,
		.box-div.blue.form li select:hover,
		.box-div.blue.form li select:focus,
		.box-div.blue.form li input[type=file]:hover,
		.box-div.blue.form li input[type=file]:focus,
		.box-div.blue.form li input[type=text]:hover,
		.box-div.blue.form li input[type=password]:hover,
		.box-div.blue.form li input[type=text]:focus,
		.box-div.blue.form li input[type=password]:focus{
			background-color: #A8D8FF;
		}

		.box-div.red.form li .in:hover, 
		.box-div.red.form li textarea:hover,
		.box-div.red.form li textarea:focus,
		.box-div.red.form li select:hover,
		.box-div.red.form li select:focus,
		.box-div.red.form li input[type=file]:hover,
		.box-div.red.form li input[type=file]:focus,
		.box-div.red.form li input[type=text]:hover,
		.box-div.red.form li input[type=password]:hover,
		.box-div.red.form li input[type=text]:focus,
		.box-div.red.form li input[type=password]:focus{
			background-color: #FFCCCC;
		}

		.box-div.superhero.form li .in:hover, 
		.box-div.superhero.form li textarea:hover,
		.box-div.superhero.form li textarea:focus,
		.box-div.superhero.form li select:hover,
		.box-div.superhero.form li select:focus,
		.box-div.superhero.form li input[type=file]:hover,
		.box-div.superhero.form li input[type=file]:focus,
		.box-div.superhero.form li input[type=text]:hover,
		.box-div.superhero.form li input[type=password]:hover,
		.box-div.superhero.form li input[type=text]:focus,
		.box-div.superhero.form li input[type=password]:focus{
			background-color: #B0B0FF;
		}


		.form li input[type=submit]{
			background-color: #282828;
			border: 1px #d8d8d8 solid;
			color: #FFF;
			cursor: pointer;
			font-size: 14px;
			margin-top: 0px;
			padding: 5px 15px;
			text-align: center;
		}
		
		.form li input[type=submit]:hover{
			background-color: #010101;
		}
		
		.box-div.superhero.form li input[type=submit]{
			background-color: #FFB74B;
			border: 2px solid #5F5F5F;
			color: #000;
			margin: 10px 0px;
		}

		.box-div.superhero.form li input[type=submit]:hover{
			background-color: #333333;
			color: #fff;
		}


.form  .validateError{
	background-image: url(images/alert.png) ;
	background-position: 2px;
	background-repeat: no-repeat;
	color: #F00;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 3px 3px 25px;
}


.form  .validateOk{
	background-image:url(images/ok.png);
	background-position: 2px;
	background-repeat: no-repeat;
	color: #F00;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 3px 3px 25px;
}




/* end superhero css framework */