/************************************ RESET ************************************************/
* {margin: 0; padding: 0; border: 0; outline: 0; list-style: none; box-sizing: border-box;}
header, nav, section, article, aside, footer {display: block;}
img {max-width: 100%; height: auto;}



/************************************ STRUCTURE ************************************************/
body {position: relative; max-width: 900px; min-width: 320px; margin: 0 auto;}
header {padding: 20px 0;}
nav {float: right; margin-top: 10px;}
section {color: #fff; clear: both;}
article {margin-bottom: 30px; border-radius: 0 20px 0 20px; overflow: hidden;}
aside {}
footer {}
.content {padding: 0px;}

#imagen-logo {
	width: 200px;
	margin-left: 5px;
}

/************************************ FONTS ************************************************/
html {background: url('../images/background.png') no-repeat 0 0 #000; background-size: cover; background-attachment: fixed;}
body {font: 14px Arial, Helvetica, sans-serif; color: #fff;}

h1 {padding: 10px 20px; font-size: 24px; font-weight: normal; color: #fff; background: #94877c;}

a {color: #bbbc3b; text-decoration: none; outline: none;}
a:hover {color: #bbbc3b; text-decoration: none;}



/************************************ MENÚ PRINCIPAL ************************************************/
.main_menu a {width: 25%; padding: 5px; display: block; float: left;}
.main_menu a img {width: 100%; height: auto; background: #bbbc3b; outline: 5px solid rgba(255,255,255,0); outline-offset: -5px;}
.main_menu a:hover img {outline: 10px solid #fff; outline-offset: -10px;}

.main_menu .productos {background: #bbbc3b;}
.main_menu .clientes {background: #b54093;}
.main_menu .ofertas {background: #489ac9;}
.main_menu .opciones {background: #666666;}



/************************************ FORM ************************************************/
form {padding: 20px; margin-bottom: 30px; border-radius: 0 0 0 20px; overflow: auto; color: #666; background: #fff;}
input, textarea, select {display: inline-block; background: #eee; padding: 5px 10px; width: 100%; font-size: 100%; font-family: inherit; border: 2px solid #ddd; border-radius: 3px;}
input:focus, textarea:focus, select:focus {background: #fff; border: 2px solid #bbbc3b;}
input[type=submit] {padding: 10px 20px; border: 0; background: #bbbc3b; color: #fff; cursor: pointer; font-weight: bold; text-transform: uppercase;}
input[type=submit]:hover {background: #000;}

.search-form input[type=submit] {margin-left: 10px;margin-top: 10px;} 
.search-form .row_yii {float: left; width:260px; margin-right:10px;}
input[type=button] {width: auto; display: inline !important; padding: 10px 20px; border: 0; background: #bbbc3b; color: #fff; cursor: pointer; font-weight: bold; text-transform: uppercase;}
input[type=button]:hover {background: #000;}
input[type=checkbox]{
	float:left;
	width: auto;
}

form .row_yii{margin-bottom: 10px;}


/************************************ FORM ************************************************/
table {width: 100%; border-spacing: 0px; margin: 5px 0 30px 0; background: #fff; color: #666;}
th {padding: 6px 10px; color: #fff; background: #94877c; text-align: left;}
th a, th a:hover {color: #fff;}
td {padding: 6px 10px 8px 0; border-bottom: 1px solid #ccc;}
td:first-child {padding-left: 15px;}
tr:hover {background: #f0f0f0;}

table img {padding: 10px; border-radius: 5px; margin-right: 2px; background: #bbbc3b;}
table img:hover {background: #000;}

table.detail-view {border-collapse: collapse; margin-bottom: 30px !important;;}
table.detail-view td {background: #ffffff;}
table.detail-view th {background: #f0f0f0; color: #666;}



/************************************ TRANSITIONS ************************************************/
a, a img, input, tr {
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}



/************************************ BUTTON COLUMNS ***********************************************/
.un_icono { width:46px;}
.dos_iconos { width:92px;}
.tres_iconos { width:138px;}
.cuatro_iconos { width:184px;}

.pager {
	padding-left: 50px;
	padding-top: 5px;
	margin-bottom: 50px;
	background-color: #bbbc3b;
	height: 32px;
	color: #FFF;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-left-radius: 20px;
}

.yiiPager .page a:link, .yiiPager .next a:link, .yiiPager .previous a:link{color:#fff;}
.yiiPager .hidden a:link{color:#888888;}

.boton {padding: 10px 20px; border: 0; background: #bbbc3b; color: #fff; cursor: pointer; font-weight: bold; text-transform: uppercase;}
.boton:hover {background: #000;}



/************************************ MEDIA QUERIES ************************************************/
@media print {
	nav, aside, footer div:last-child {display: none;}
	article {width: 100%;}
}
@media all and (max-width: 820px){
	body {width: 90%; margin: 0 5%;}
	.main_menu a {width: 33.33%;}
}