/**
* C A S C A D I N G  S T Y L E  S H E E T
*
* @project		krisatacadista.com.br
* @version		1.0
* @package		layout
* @author 		rafael@waio.com.br
* @since		FEV 2011
* @copyright	2011 Kris Atacadista.
*
-----------------------------------------------------------------------------*/



/* @Import CSS 
-----------------------------------------------------------------------------*/ 
@import url("reset.css");
@import url("common.css");



/**
* L A Y O U T
*	
* @section estrutura
*
-----------------------------------------------------------------------------*/
html {
	height:100%;	
}
body {
	height:100%;
	font:normal 13px/14px Arial, Helvetica, sans-serif;
	color:#646464;
	background:#918f8f url(../images/bg-02.png) repeat-x;
} 
#bg-left {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:#918f8f url(../images/bg-02.png) repeat-x;
	z-index:0;
}
#bg-full {
	float:left;
	width:100%;
	max-height:100%;
	background:#001f79 url(../images/bg-01a.png) repeat-x;
}
div#wrap {
	position:relative;
	width:960px;
	min-height:100%;
	margin:0 auto;
}


/* Header 
-----------------------------------------------------------------------------*/
#header {
	width:960px;
	height:163px;
	margin:0 auto;
}
#header a.logo {
	float:left;
	width:240px;
	height:163px;
	text-indent:-99999px;
	background:url(../images/img-logo.png) no-repeat;	
}
#header ul {
	position:absolute;
	top:131px;
	left:250px;
	width:700px;
	height:32px;
	text-align:center;
	background:url(../images/bg-top-menu.png) 0 24px repeat-x;
}
#header ul li {
	float:left;
	margin:0 24px;
	padding-bottom:20px;
}
#header ul li.highlight {
	background:url(../images/sprite-arrows.png) center -71px no-repeat;
}
#header ul li a {
	font:normal 14px "Times New Roman", Times, serif;
	text-transform:uppercase;
	color:#002079;	
}


/* Container
-----------------------------------------------------------------------------*/
#container {
	float:left;
	width:960px;
	min-height:450px;
	background:#001f79 url(../images/bg-03.png) top repeat-x;
}
#container .column,
#container .column a {
	color:#fff;	
}
#container .column {
	float:left;
	width:180px;
	padding:40px 30px;
}
#container .column h4 {
	margin:0 0 5px 10px;	
}

#container .column ul li {
	padding:5px 0;
	background:url(../images/img-line03.png) left bottom no-repeat;
}
#container .column ul li a {
	padding-left:10px;
	line-height:12px;
}
#container .column ul li a.highlight {
	background:url(../images/sprite-arrows.png) left 3px no-repeat;
}
#container .column ul li a:hover span {
	border-bottom:1px dotted #406cad;
}
#container .column .block {
	margin-top:30px;	
}
#container #floating.fixed {
	position:fixed;
	width:100%;
	top:0;
	min-height:425px;
	background:#001f79 url(../images/bg-03.png) top repeat-x;
}
#container .wrapper {
	position:absolute;
	clear:both;
	left:250px;
	width:700px;
	min-height:700px;
	margin:0 0 50px 0;
	background-color:#fff;
}
#container .wrapper .content {
	min-height:700px;	
}


/*---sub-menu---*/

#container div.sub-menu {
	height:25px;
	background-color:#dedede;	
}
#container div.sub-menu ul {
	float:right;	
}
#container div.sub-menu ul li {
	float:left;
	margin:0 10px 0 5px;
}
#container div.sub-menu ul li a {
	font:normal 13px/30px Arial, Helvetica, sans-serif;
	color:#787878;
}
#container div.sub-menu ul li a.highlight {
	font-weight:bold;
	color:#5a5a5a;
}
#container div.nav-control h5,
#container div.nav-control h1 {
	margin-left:15px;
	color:#002079;	
}


/* Footer 
-----------------------------------------------------------------------------*/
#footer-index {
	width:960px;
	position:relative;
	clear:both;
	margin:0 auto;
}
#footer-index div.footerCopy {
	padding:0;
	background-color:transparent;
}
#footer {
	display:block;
	width:700px; /* largura do corpo */
	height:129px;
	text-align:center;
	color:#fff;
	background:url(../images/bg-footer.png) repeat-x;
	border-top:8px solid #b9b9b9;
}
#footer ul {
	width:700px;
	height:27px;
	padding-top:15px;
	margin-bottom:11px;
	text-align:center;
	background:url(../images/img-line02.png) center bottom no-repeat;
}
#footer ul li {
	display:inline;
	margin:0 20px;
}
#footer ul li a:hover {
	border-bottom:1px dotted #666;	
}
#footer p {
	margin-bottom:3px;	
}
div.footerCopy {
	padding:0 10px;
	text-align:left;
	background-color:#b9b9b9;
}
div.footerCopy span.copyright {
	float:left;
	color:#5d6887;
	font:normal 11px/25px Arial, Helvetica, sans-serif;
}
div.footerCopy a.developer {
	float:right;
	width:155px;
	padding:6px 0 5px 0;
	font:normal 10px Verdana, Geneva, sans-serif;
	color:#5d6887;
	background:url(../images/img-waio-footer.png) 103px 0 no-repeat;
}
div.footerCopy a.developer:hover {
	background:url(../images/img-waio-footer.png) 103px -60px no-repeat;
}


/**
*
*
*
*
* P A G E S
-----------------------------------------------------------------------------*/


/* PAGE - Home
-----------------------------------------------------------------------------*/
#container .banner {
	padding:40px 20px;
}


/* PAGE - Categoria
-----------------------------------------------------------------------------*/

/*---nav-controls---*/
#container div.search-bar {
	height:45px;
	padding:0 10px;
	font:normal 12px/50px Arial, Helvetica, sans-serif;
	color:#484848;
	background-color:#f1f1f1;	
}
#container div.search-bar .search {
	float:right;
}
#container div.search-bar .search input[type=text] {
	width:200px;
	margin-right:3px;
}
#container div.search-bar .search input[type=submit] {
	width:17px;
	height:15px;
	text-indent:-99999px;
	background:url(../images/bt-search.png) no-repeat;
	border:none;
}
#container div.quick-nav,
#container div.quick-nav a {
	color:#646464;
}
#container div.quick-nav {
	height:25px;
	margin-bottom:20px;
	padding:5px 10px;
}
#container div.quick-nav a {
	margin-right:10px;
	padding-left:9px;
	background:url(../images/sprite-arrows.png) 0 -44px no-repeat;
}
#container div.quick-nav a:hover {
	border-bottom:1px dotted #646464;
}
#container div.pagination {
	height:22px;
	margin-top:10px;
	text-align:center;
	background:url(../images/img-line01.png) bottom center no-repeat;
}
#container div.pagination * {
	padding:1px 3px;
	color:#4c4c4c;
	background-color:#eaeaea;
	border:1px solid #bababa;
}
#container div.pagination span {
	color:#eaeaea;
	background-color:#4c4c4c;
}
#container div.pagination a:hover {
	background-color:#dadada;
}

/*---Catalog---*/
#container div.catalog {
	padding:0 10px;
}
#container div.catalog .box {
	height:80px;
	padding:10px 0;
	background:url(../images/img-line01.png) bottom center no-repeat;
}
#container div.catalog .box a {
	display:block;
	color:#454545;
}
#container div.catalog .box span {
	font-size:12px;
}
#container div.catalog .box a:hover {
	color:#00398b;
}
#container div.catalog .box a:hover span {
	border-bottom:1px dotted #00398b;
}
#container div.catalog .box .photo {
	float:left;
	width:110px;
	text-align:center;
}
#container div.catalog .box .desc {
	padding:15px 0 0 10px;
}
#container div.catalog .box .desc h2 {
	text-transform:none;
	font:bold 13px Arial, Helvetica, sans-serif;
}


/* PAGE - Produto
-----------------------------------------------------------------------------*/
#overview {
	padding:20px;
	color:#646464;
}
#overview .header {
	height:50px;
}
#overview .header h2 {
	text-transform:none;
	font:bold 16px Arial, Helvetica, sans-serif;
}
#overview .photo {
	float:left;
	width:210px;
	height:160px;
	text-align:center;
}
#overview .desc {
	overflow:hidden;
}


/* PAGE - cat-produtos
-----------------------------------------------------------------------------*/
#history {
	padding:10px;	
}
/*--Banner--*/
#history .banner {
	float:left;
	position:relative;
	width:665px;
	height:290px;
	margin:20px 0;
	padding:7px;
	background-color:#dedede;
}
#history .banner .window {
	width:665px;
	height:290px;
	overflow:hidden;
	position:relative;
}
#history .banner .image-reel {
	position:absolute;
	top:0;
	left:0;
}
#history .banner .image-reel img {float:left}
#history .banner .paging {
	position:absolute;
	bottom:37px; 
	right:12px;
	height:20px;
	z-index:100;
	text-align:center;
	line-height:18px;
	display:none;
}
#history .banner .paging a {
	padding:1px 6px 2px 5px;
	text-decoration:none;
	color:#fff;
}
#history .banner .paging a.active {
	font-weight:bold;
	color:#2f3800;
	background:url(../images/bg-paging-banner.png);
}
#history .banner .paging a:hover {font-weight:bold}

/*---text---*/
#history .text {
	padding:0 10px;
}
#history .text h2 {
	margin-top:40px;
	line-height:30px;
}
#history .text h3 {
	margin-top:25px;
	font:normal 16px "Times New Roman", Times, serif;
}
#history .text h4 {
	text-transform:none;
	font:bold 14px Arial, Helvetica, sans-serif;
}
#history p {
	margin:5px 0;	
}


/* PAGE - Contato
-----------------------------------------------------------------------------*/
#contato {
	padding:50px 10px;	
}
#contato h2 {
	margin-left:10px;	
}
#contato #info {
	float:left;
	width:660px;
	margin:10px 0 10px;
	padding:10px;
	background-color:#f1f1f1;
}
#contato #info span.titulo,
#contato #representantes span.titulo {
	display:block;
	margin-top:10px;
	font:bold 16px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#565656;
}
#contato #info #fone {
	float:left;
	width:310px;
}
#contato #info #fone p {
	font:bold 24px Arial, Helvetica, sans-serif;
	color:#999;
}
#contato #info #mail {
	float:left;
	width:250px;
}
#contato #info #mail p {
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#999;
}
#contato #info #mail a {
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#666;
}
#contato #endereco {
	float:left;
	width:200px;
}
#contato #info #endereco p {
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#7b7b7b;
}
#contato #info ul {
	padding-top:20px;
}
#contato #info ul li {
	list-style:inside;
	border-bottom:1px dotted #CCC;
	padding:5px 0 5px 5px;
}
#contato #info ul li a {
	font:bold 11px Arial, Helvetica, sans-serif;
	color:#545454;
}
#contato #info ul li a:hover {
	color:#999;
}

/* --- Formulario de contato--- */
#contato form {
	float:left;
	width:680px;
	padding:10px 0;
	background-color:#f1f1f1;
}
#contato form fieldset {
	padding-bottom:20px;
	border-bottom:1px solid #dadada;
}
#contato form dd {
	float:left;
	width:650px;
	height:50px;
}
#contato form dd span {
	color:#900;
}
#contato form label {
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#666;
}
#contato form input.field {
	float:left;
	width:650px;
}
#contato form select {
	width:256px;
	height:20px;
	border:1px solid #cecece;
}
#contato form dt {
	float:left;
	width:650px;
}
#contato form textarea {
	width:100%;
	height:100px;
	border:1px solid #ababab;
}
#contato form dt span {
	color:#999;
}
#contato fieldset.fieldDown {
	padding-top:15px;
	border-top:1px solid #FFF;
	border-bottom:none;
}
#contato input[type=submit] {
	float:left;
	width:86px;
	height:31px;
	padding-bottom:5px;
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#525252;
	background:url(../images/bt-white.png) no-repeat;
	border:none;
}
#contato input[type=submit]:active {
	background:url(../images/bt-white.png) 0 -31px no-repeat;
}