@charset "utf-8";
/* CSS Document */

	#articulos {
		display: table;
	 	width: 100%; 
	 	background: #fff;
	 	margin: 0;
	 	box-sizing: border-box;

	 }

	#articulos .caption {
	 	display: block;
	 	width: 100%;
	 	background: #64e0ef;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
	 	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	 	box-sizing: border-box;
	 }


	#articulos .header-row {
	background-color: #444;
	color: #fff;
	 }

	#articulos .row {
	display: table-row;
	/* [disabled]background-color: #FFFFFF; */
	}

	#articulos .cell {
		display: table-cell;
		
		padding: 6px; 
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
	}

	#articulos .primary {
		text-align: left;
	}


	#articulos input[type="radio"],
	#articulos input[type="checkbox"]{
		display: none;
	}


	@media only screen and (max-width: 760px)  {

		body {
			padding: 0;
		}

		#articulos {
			display: block;
			margin: 44px 0 0 0;
		}

		#articulos .caption {
			position: relative;
			top: 0;
			text-align: center;
			height: 50px;
			line-height: 50px;
			z-index: 5;
			border-bottom: 2px solid #999;
		}

		#articulos .row { 
			position: relative;
			display: block;
			border-bottom: 1px solid #ccc; 

		}

		#articulos .header-row {
	display: none;
	background-color: #009EC7;
		}
		
		#articulos .cell { 
			display: block;
			border: none;
			position: relative;
			height: 70px;
			line-height: 60px;
			text-align: left;
			margin-left:30px;
		}

		#articulos .primary:after {
			content: "";
			display: block;
			position: absolute;
			right:40px;
			top:18px;
			z-index: 2;
			width: 0; 
			height: 0; 
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent; 
			border-right:10px solid #ccc;

		}

		#articulos .cell:nth-of-type(n+2) { 
			display: none; 
		}


		#articulos input[type="radio"],
		#articulos input[type="checkbox"] {
			display: block;
			position: absolute;
			z-index: 1;
			width: 99%;
			height: 100%;
			opacity: 0;
		}
		#articulos input[type="text"] {
	height: 40px; padding: 0px 0px 0px 0px; margin: 0 0 0px 0; 
	background:#ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #FFFFFF 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(20%,#FFFFFF)); /* webkit */
	border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
	font-family: sans-serif; font-size: 12px; color: #000000;
	
		}
    
   #articulos input[type="radio"]:checked,
		#articulos input[type="checkbox"]:checked {
		  z-index: -1;
		}

		#articulos input[type="radio"]:checked ~ .cell,
		#articulos input[type="checkbox"]:checked ~ .cell {
			display: block;

			border-bottom: 1px solid #eee; 
		}

		#articulos input[type="radio"]:checked ~ .cell:nth-of-type(n+2),
		#articulos input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2) {
			
			background: #e0e0e0;
		}

		#articulos input[type="radio"]:checked ~ .cell:nth-of-type(n+2):before,
		#articulos input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2):before {
			content: attr(data-label);
			display: block;
			width: 60px;
			background: #9EC4FF;
			border-radius: 5px;
			height: 20px;
			margin-right: 30px;
			font-size: 12px;
			line-height: 20px;
			text-align: left;
			color: white;

		}

		#articulos input[type="radio"]:checked ~ .primary,
		#articulos input[type="checkbox"]:checked ~ .primary  {
			border-bottom: 2px solid #999;
		}

		#articulos input[type="radio"]:checked ~ .primary:after,
		#articulos input[type="checkbox"]:checked ~ .primary:after {
	 		position: absolute;
			right:18px;
			top:22px;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent; 
			border-top:10px solid #ccc;
			z-index: 2;
		}
	}