@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

/***************************************************/
/********************** GERAL **********************/
/***************************************************/

body											{ margin:0; font:400 12px 'Open Sans'; color:#2E3191; height: 100%; background:#2E3191; }
html											{ height: 100%; }

*												{ outline:none; }
img												{ border:0px; }
form											{ margin:0px; padding:0px; }

.l												{ float:left; }
.r												{ float:right; }
.b,b											{ font-weight:600; }
.bb												{ font-weight:700; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height:30px; }
.color											{ color:#2E3191; }
.marginSide										{ margin:0 10px; }

a:link											{ text-decoration: none; color:#252979; }
a:visited										{ text-decoration: none; color:#252979; }
a:hover											{ text-decoration: none; color:#2E3191; }
a:active										{ text-decoration: none; color:#2E3191; }

.input											{ background: #fff; border: 0;outline: none; resize: none; padding:7px 1%; }
.input:focus									{ }
.input::-webkit-input-placeholder				{ color:#999; }
.input:focus::-webkit-input-placeholder			{ color:#b7b7b7; }
.button,a.button								{ background: #2E3191; color: #fff; margin: 0; font-size:12px; padding:5px 20px; border: 0; transition:color,background 0.2s; }
.button:hover,a.button:hover					{ cursor: pointer; background:#252979; transition:color,background 0.2s; }

.button.black,a.button.black					{ background: #333; transition:color,background 0.2s; }
.button.black:hover,a.button.black:hover		{ background:#000; transition:color,background 0.2s; }

.select											{ background: #fff url('../img/bg-select-arrow.png') no-repeat 98% center; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius:2px; box-shadow: 0 0 2px #999; padding:7px 1%; }


/***************************************************/
/********************** MENUS **********************/
/***************************************************/

ul.topmenu						{ position:relative; padding:0; margin:0; list-style-type:none; display:block; }
ul.topmenu li					{ margin:0; padding:0; float: left; } 
ul.topmenu li.sep				{ width: 130px; height: 15px; }
ul.topmenu li.option a			{ float:left; text-decoration:none; cursor:pointer; padding: 30px 25px; color: #fff; transition:background 0.2s; }
ul.topmenu li.option.current a	{ background: #252979; }
ul.topmenu li a:hover			{ background: #252979; transition:background 0.2s; }

.submenu,.submenu ul			{ position:absolute; margin:0; padding:0; list-style-type:none; display:none; margin-top:1px; }
.submenu li						{ position:relative; width: 218px; padding-left: 20px; }
.submenu li a					{ display:block; color:#999; text-decoration:none; font-size:16px; }
.submenu li a:hover				{ color: #fff; }



/***************************************************/
/********************* CONTENT *********************/
/***************************************************/

.alignCenter										{ position:relative; width:100%; max-width:1280px; min-width:1024px; margin:0 auto; }

.header												{ position:fixed; top:0; left:0; right:0; padding:0; background:#2E3191; z-index:10; }
.header .logo										{ position:absolute; width:100%; top:0; text-align:center; z-index:0; }
.header .logo img									{ width: 160px; }
.header .menu										{ position:relative; z-index:1; }
.header .search										{ position:relative; z-index:1; }
.header .search .searchBox							{ position:relative; background:#fff; width:200px; padding:5px; margin:25px 25px 0 0; transition:width 0.2s; }
.header .search .searchBox .input					{ padding:1px 0; margin:0; width:150px; margin-left:10px; }
.header .search .searchBox .button					{ margin:0; padding:0; background:#fff; color:#252979; padding:0; }

.header .search .searchBox.doLogin					{ width:200px; display:none; }
.header .search .searchBox.doLogin .input			{ width:75px; }

.content											{ position:relative; width:100%; padding-top:75px; background:#fff; z-index:1; }

.footer												{ position:relative; width:100%; z-index:1; }
.footer .brand										{ position:absolute; right:25px; bottom:5px; color:#fff; font-size:11px; }
.footer .brand img									{ vertical-align:middle; }

h1													{ color:#2E3191; font-size:28px; font-weight:800; }
.content_half										{ position:relative; width:46%; padding:0 2%; }
.half												{ width:50%; }
.thirth												{ width:33%; }
.thirth.middle										{ width:34%; }



/* HOMEPAGE */
.homeCat											{ position:relative; height:400px; }
.homeCat .webcat									{ width: 100%; height: 100%; }


.homeCat .degrade									{ position:absolute; top:0; right:0; bottom:0; left:0; background:url('../img/site/img-homecat-degrade.png') repeat-x bottom left; padding:280px 5% 0 5%; color:#fff; transition:background 0.2s; }
.homeCat .degrade h1								{ color:#fff; margin-bottom:0; }
.homeCat .degrade:hover								{ background-color:rgba(0,0,0,0.3); transition:background 0.2s; }
.homeCat .padding									{ position:absolute; top:0; right:0; bottom:0; left:0; padding:5%; }
.homeCat .padding .linknews							{ float:left; width:100%; max-height:70px; overflow:hidden; transition:color 0.2s; }
.homeCat .padding .linknews:hover					{ color:#000; transition:color 0.2s; }
.homeCat .padding .clear.minSpacer.spaceNews		{ height:25px; }

.homeCat.grey										{ background:#F2F2F2; height:300px; }
.homeCat.grey.thirth.middle							{ background:#E6E6E6; }
.homeCat.grey.thirth.middle .input					{ width:60%; }
.homeCat.grey h1									{ margin-top:0; }
.homeCat.grey .button								{ position:absolute; right:5%; bottom:5%; }
.homeCat.grey .degrade								{ padding-top:180px; }


/* PRODUCTS */
.groupCat											{ padding:1%; }
.listCat											{ position:relative; width:23%; margin:1%; }
.listCat .title										{ position:relative; width:90%; padding:5%; height:35px; background:#E6E6E6; font-weight:900; font-size:14px; }
.listCat .image										{ position:relative; width:100%; height:200px; }
.listCat .image .bg									{ position:absolute; top:0; right:0; bottom:0; left:0; background:#000; opacity:0; transition:opacity 0.2s; }
.listCat:hover .image .bg							{ opacity:0.2; transition:opacity 0.2s; }

.prodFilter											{ position:relative; width:19%; padding:1% 2% 2% 2%; background:#f2f2f2; }
.prodFilter .search .input							{ margin:0; width:83%; }
.prodFilter .search .button							{ background:#fff; padding:6px 0; margin:0; text-align:center; width:15%; color:#000; }
.prodFilter .category								{ margin:20px 0 10px 0; }
.prodFilter .category .slide						{ width:15px; height:15px; background:url('../img/site/icon-more_less.png') no-repeat bottom left; color:#fff; font-size:20px; line-height:13px; cursor:pointer; text-align:center; }
.prodFilter .category .slide.sless					{ background-position:bottom left; transition:background 0.2s; }
.prodFilter .category .slide.smore					{ background-position:bottom right; transition:background 0.2s; }
.prodFilter .slideCat a								{ width:98%; padding:5px 1%; background:#fff; transition:background 0.2s; }
.prodFilter .slideCat a.current						{ font-weight:600; }
.prodFilter .slideCat a:hover						{ background:#f2f2f2; transition:background 0.2s; }


.prodGroup											{ position:relative; width:75%; padding:1%; }
.prodGroup .listProd								{ position:relative; width:21%; padding:0; margin:2%; }
.prodGroup .listProd .image							{ position:relative; width:30%; height:90px; }
.prodGroup .listProd .text							{ position:relative; width:64%; padding:0 3%; color:#000; }
.prodGroup .listProd .text .pvp						{ font-size:14px; }
.prodGroup .listProd .text p						{ margin:0; padding:0; margin-bottom:15px; }

.prodGroup .showProd								{ width: 96%; padding: 2%; }
.prodGroup .showProd .image							{ text-align: center; width: 46%; }
.prodGroup .showProd .image img						{ max-width: 100%; height: auto; }

.prodGroup .option									{ padding:5px 0; text-align:center; width:15%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.prodGroup .option.qnt								{ background:#E6E6E6; border:0; padding:7px 0; margin:0; }
.prodGroup .option.qnt_more							{ cursor:pointer; background:#B3B3B3; color:#000; }
.prodGroup .option.qnt_less							{ cursor:pointer; background:#E6E6E6; color:#000; }
.prodGroup .option.button							{ width:55%; }



/* NEWS */
.listNews											{ width:46%; padding:0 2%; }


/* CONTACT */
.map												{ height:600px; }
.contactInfo										{ position:relative; width:46%; padding:0 2%; }
.contactInfo .input									{ width:46%; margin:0.5%; padding:7px 1%; background:#F2F2F2; }
.contactInfo .input.textarea						{ width:97%; height:50px; }
.contactInfo .button								{ margin:0.5%; }


/* CART */
.clientInfo											{ position:relative; margin-left:150px; }
.clientInfo .input									{ margin:0.5%; padding:7px 1%; background:#F2F2F2; }

.tbl-cart											{ width:100%; }
.tbl-cart th										{ text-align:left; font-weight:600; padding:5px; }
.tbl-cart td										{ padding:5px; }
.tbl-cart .delete									{ cursor:pointer; opacity:1; transition:opacity 0.2s; }
.tbl-cart .delete:hover								{ opacity:0.6; transition:opacity 0.2s; }


/* Pagination */
table.pagination								{ border-collapse:collapse; float:left; margin-top:10px; font:bold 14px 'Open Sans'; }
table.pagination td								{ border:1px solid #fef2e7; padding:0; text-align:center; width:20px; height:20px; }
table.pagination td.submit						{ cursor:pointer; }
table.pagination td.arrow						{ background-color:#fad7b2; }
table.pagination td.arrow.submit				{ background-color:#f1830f; }
table.pagination td.arrow.init					{ background-image:url('../img/pag_goInit.gif'); }
table.pagination td.arrow.end					{ background-image:url('../img/pag_goEnd.gif'); }
table.pagination td.number						{ background:#fff; height:17px; }
table.pagination td.number.submit:hover			{ background:#fef2e7; }
table.pagination td.number.current				{ color:#fff; background:#f1830f; }
table.pagination td.more						{ padding-top:4px; height:16px; border:0; }
table.pagination td.comboPag					{ border:0; padding-left:5px; }


/* USER REGIST */
.registArea											{ width: 100%; }
.registArea .input									{ width:47%; margin:0.5%; padding:7px 1%; }
.registArea .input.error							{ color:#bc0d0d; }
.registArea .input.error::-webkit-input-placeholder	{ color:#f01; }
.registArea .sepZipCode								{ margin-top:9px; color:#fff; }
.registArea .input.zipcode4							{ width:15%; }
.registArea .input.zipcode3							{ width:10%; }
.registArea .select									{ width:49%; margin:0.5%; padding:7px 1%; }
.registArea .button									{ margin:0.5%; }

.passRecover										{  }
.passRecover .input									{ border-right:0; border-radius:2px 0 0 2px; margin-right:0; width:30%; padding:7px 1%; }
.passRecover .button								{ border-radius:0 2px 2px 0; margin-left:0; padding:7px 1%; }

.loginArea											{ width: 30%; }
.loginArea p										{ margin: 0; }


/* SCROLL */
.jspContainer									{ overflow:hidden; position:relative; }
.jspPane										{ position:absolute; }
.jspVerticalBar									{ position: absolute; top: 0; right: 0; width: 6px; height: 100%; padding: 2px; }
.jspHorizontalBar								{ position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; }
.jspVerticalBar *,
.jspHorizontalBar *								{ margin: 0; padding: 0; }
.jspCap											{ display: none; }
.jspHorizontalBar .jspCap						{ float: left; }
.jspTrack										{ background:none; position: relative;  }
.jspDrag										{ background:#1c1c1c; position: relative; box-shadow: 0 0 3px #000; top: 0; left: 0; cursor: pointer; }
.jspDrag:hover									{ background-position:center right; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag						{ float: left; height: 100%; }
.jspArrow										{ background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled							{ cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow						{ height: 5px; }
.jspHorizontalBar .jspArrow						{ width: 5px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus					{ outline: none; }
.jspCorner										{ background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner								{ margin: 0 -3px 0 0; }




/* Tooltips */
.tipsy { padding: 5px; font-size:13px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; /*-moz-border-radius:3px; -webkit-border-radius:3px;*/ }
.tipsy-arrow { position: absolute; background: url('../img/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }



/* Messages */
div.dialog{ margin:10px 0; padding:20px 2%; text-align:left; color:#000; }
div.dialog.done{ background:#ceef73; }
div.dialog.error{ background:#ef7373; }
div.dialog.notes{ background:#73b3ef; }
div.dialog li{ margin-left:20px; }
div.dialog p{ margin-left:0; }