/* Seja bem-vindo suga-código, sinta-se a vontade e aprenda um pouco. */

/*
@author = André Luiz Trabuco;
@agency = Onebit Design Web;
@website = www.onebit.com.br;
@client = Optica Brasil [www.opticasbrasil.com.br];
@licence = Creative Commons 2.2;
*/

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

a {
	cursor:pointer;
	outline:none;
}

body {
	background-color:#03060b;
	background-image:url("../img/body-background.jpg");
	background-repeat:no-repeat;
	background-position:left -35px;

}


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

div#wrapper {
	width:740px;
	margin:0 auto;
	position:relative;
	display:table;
}

/****************************
			TOPO
****************************/

div#top {
	margin:0;
	height:270px;
}

div#top h1 a {
	background-image:url("../img/opticabrasil.png");
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	text-indent:-9000px;
	width:113px;
	height:90px;
	margin:40px 5px;
	
}

div#top h1 a:hover {
	background-image:url("../img/opticabrasil.png");
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	text-indent:-9000px;
	width:113px;
	height:100px;
	margin:40px 5px;
	
}

div#top .menu {
	position:absolute;
	width:515px;
	top:0px;
	margin:80px 0 0 200px;
}

div#top .menu ul li {
	display:inline;
	margin:0 10px;
	float:left;
}

/* Menu */

div#top .menu ul li.empresa a {
	width:77px;
	height:30px;
	background-image:url("../img/empresa.png");
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.empresa a:hover {
	width:77px;
	height:30px;
	background-image:url("../img/empresa.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

body#the_company div#top .menu ul li.empresa a {
	width:77px;
	height:30px;
	background-image:url("../img/empresa.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.produtos a {
	width:77px;
	height:30px;
	background-image:url("../img/produtos.png");
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.produtos a:hover {
	width:77px;
	height:30px;
	background-image:url("../img/produtos.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

body#the_products div#top .menu ul li.produtos a {
	width:77px;
	height:30px;
	background-image:url("../img/produtos.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.informacoes a {
	width:90px;
	height:30px;
	background-image:url("../img/info.png");
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.informacoes a:hover {
	width:90px;
	height:30px;
	background-image:url("../img/info.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

body#the_informations div#top .menu ul li.informacoes a {
	width:90px;
	height:30px;
	background-image:url("../img/info.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;	
}

div#top .menu ul li.localizacao a {
	width:90px;
	height:30px;
	background-image:url("../img/localizacao.png");
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.localizacao a:hover {
	width:90px;
	height:30px;
	background-image:url("../img/localizacao.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

body#the_localization div#top .menu ul li.localizacao a  {
	width:90px;
	height:30px;
	background-image:url("../img/localizacao.png");
	background-position:center -30px;
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.contato a {
	width:77px;
	height:30px;
	background-image:url("../img/contato.png");
	display:block;
	text-indent:-9000px;
}

div#top .menu ul li.contato a:hover {
	width:77px;
	height:30px;
	background-image:url("../img/contato.png");
	background-position:center -30px;
	display:block;
}

body#the_contact div#top .menu ul li.contato a {
	width:77px;
	height:30px;
	background-image:url("../img/contato.png");
	background-position:center -30px;
	display:block;
}


/****************************
		 SIDEBAR
****************************/

div#sidebar {
	width:170px;
	height:503px;
	background:url("../img/sidebar.png") no-repeat;
	float:right;
	margin:34px 0;
}

div#sidebar ul {
	margin:0 15px;
	
}

div#sidebar ul li {
	margin:22px 0;
	
}

div#sidebar ul li.dior a {
	background:url("../img/brands/dior.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:81px;
	height:33px;
	margin:0 auto;
}

div#sidebar ul li.oakley a {
	background:url("../img/brands/oakley.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:130px;
	height:33px;
	margin:0 auto;
}

div#sidebar ul li.gucci a {
	background:url("../img/brands/gucci.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:105px;
	height:19px;
	margin:0 auto;
}

div#sidebar ul li.rayban a {
	background:url("../img/brands/rayban.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:77px;
	height:39px;
	margin:0 auto;
}

div#sidebar ul li.emporioarmani a {
	background:url("../img/brands/emporioarmani.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:124px;
	height:15px;
	margin:0 auto;
}

div#sidebar ul li.diesel a {
	background:url("../img/brands/diesel.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:70px;
	height:40px;
	margin:0 auto;
}

div#sidebar ul li.valentino a {
	background:url("../img/brands/valentino.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:108px;
	height:19px;
	margin:0 auto;
}

div#sidebar ul li.guess a {
	background:url("../img/brands/guess.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:95px;
	height:25px;
	margin:0 auto;
}

div#sidebar ul li.vogue a {
	background:url("../img/brands/vogue.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:80px;
	height:30px;
	margin:0 auto;
}

div#sidebar ul li.killerloop a {
	background:url("../img/brands/killerloop.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:81px;
	height:38px;
	margin:0 auto;
}

div#sidebar ul li.giorgioarmani a {
	background:url("../img/brands/giorgioarmani.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:124px;
	height:20px;
	margin:0 auto;
}

div#sidebar ul li.mormaii a {
	background:url("../img/brands/mormaii.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:105px;
	height:19px;
	margin:0 auto;
}

div#sidebar ul li.pierrecardin a {
	background:url("../img/brands/pierrecardin.jpg") no-repeat;
	display:block;
	text-indent:-9000px;
	width:101px;
	height:18px;
	margin:0 auto;
}

/****************************
		  CONTEÚDO
****************************/
div#content {
	width:560px;
	float:left;
}

div#content h2 {
	background:url("../img/novidades.png") no-repeat;
	text-indent:-9000px;
	width:100px;
	height:16px;
	display:block;
	margin:0 0 10px 8px;
}

div#content div.product {
	background:url("../img/box.png") no-repeat;
	width:170px;
	height:170px;
	display:block;
	float:left;
	margin:8px;
}

div#content div.product img {
	margin:18px 15px;
	width:138px;
	height:64px;
}

div#content div.product span a {
	background:url("../img/detalhes.png") no-repeat;
	width:96px;
	height:20px;
	display:block;
	text-indent:-9000px;
	float:right;
	margin:10px 15px 10px 0;
}

div#content div.product p {
	font:11px 'Trebuchet MS','Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
	color:#000;
	text-transform:uppercase;
	text-align:center;
}

/****************************
		  BOXES
****************************/

/* Varilux */

div#varilux {
	float:right;
	background:url("../img/varilux-box.png") no-repeat;
	width:170px;
	height:80px;
	margin:-5px 0;
	
}

div#varilux a {
	background:url("../img/brands/varilux.jpg") no-repeat;
	margin:30px 28px;
	text-indent:-9000px;
	display:block;
	width:112px;
	height:24px;
}

/* Lentes Acuvue */

div#acuvue a {
	background:url("../img/boxacuvue.png") no-repeat;
	width:170px;
	height:90px;
	text-indent:-9000px;
	float:right;
	display:block;
	margin:30px 0;
}


/****************************
		 FOOTER
****************************/

div#footer {
	height:30px;
	clear:both;
}

div#footer address {
	text-decoration:none;
	font-weight:normal;
	font:11px 'Trebuchet MS','Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
	color:#CCC;
	text-transform:uppercase;
	letter-spacing:0px;
	word-spacing:0px;
	text-align:center;
}

/****************************
		 DEVELOPER
****************************/

div#onebit {
	clear:both;

}

div#wafia a {
	font:11px 'Trebuchet MS','Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
	color:#CCC;
	width:41px;
	height:12px;
	text-transform:uppercase;
	background:url("../img/wafia.png") no-repeat;
	display:block;
	text-indent:-9000px;
	margin:0 auto;
	margin-bottom:20px;
	
}

/****************************
		  A EMPRESA
****************************/
div#content-company {
	width:560px;
	height:650px;
	float:left;
	margin:0 3px;
}

div#content-company h2 {
	background:url("../img/a_empresa.png") no-repeat;
	text-indent:-9000px;
	width:104px;
	height:16px;
	display:block;
	margin:0 0 10px 8px;
}

div#content-company div.product {
	background:url("../img/box.png") no-repeat;
	width:170px;
	height:170px;
	display:block;
	float:left;
	margin:8px;
}

div#content-company div.product img {
	margin:18px 15px;
	width:138px;
	height:64px;
}

div#content-company div.product span a {
	background:url("../img/detalhes.png") no-repeat;
	width:96px;
	height:20px;
	display:block;
	text-indent:-9000px;
	float:right;
	margin:10px 15px 10px 0;
}

div#content-company p {
	font:13px/17px 'Tahoma','Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
	color:#FFF;
	text-align:justify;
	font-variant:normal;
	width:700px;
	margin:15px 12px;
}

div#photos-empresa {
	width:720px;
	margin:0 5px;
}

div#photos-empresa a img {
	margin:10px;
}


/****************************
		  CONTATO
****************************/

div#content-contact {
	height:340px;
	width:710px;
	margin:0 5px;
}

div#content-contact h2 {
	background:url("../img/t_contato.png") no-repeat;
	text-indent:-9000px;
	width:80px;
	height:16px;
	display:block;
	margin:0 0 10px 8px;
}

div#content-contact form fieldset {
	width:290px;
	float:right;
}

div#content-contact form input {
	width:290px;
	height:19px;
	font:11px 'Trebuchet MS',Verdana,Arial,Helvetica,sans-serif;
	color:#015198;
}

div#content-contact form input#btn_contact {
	width:66px;
	height:20px;
	background:url("../img/botao.png") no-repeat;
	display:block;
	text-indent:-9999px;
	line-height:1px;
	cursor:pointer;
	margin:10px 0;
	float:right;
}

div#content-contact form textarea {
	width:290px;
	height:75px;
	font:11px 'Trebuchet MS',Verdana,Arial,Helvetica,sans-serif;
	color:#015198;
}

div#content-contact form fieldset label {
	display:block;
	font:11px/20px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;
	text-transform:uppercase;
}

div#content-contact form fieldset legend {
	font:18px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;
	width:200px;
	padding:9px 0;
}

div#content-contact div.contact-address {
	float:left;
}

div#content-contact div.contact-address h3 {
	font:17px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:10px 10px;
}

div#content-contact div.contact-address p {
	font:11px/20px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:0 10px;
	text-transform:uppercase;
	letter-spacing:1px;
}

/****************************
	    LOCALIZAÇÃO
****************************/

div#content-localization {
	width:710px;
	margin:0 5px;
}

div#content-localization h2 {
	background:url("../img/t_localizacao.png") no-repeat;
	text-indent:-9000px;
	width:119px;
	height:26px;
	display:block;
	margin:0 0 10px 7px;
}

div#content-localization div.content-gmaps {
	margin:30px 24px;
}

/****************************
		  PRODUTOS
****************************/

div#content-products {
	width:710px;
	margin:0 5px;
}

div#content-products h2 {
	background:url("../img/t_produtos.png") no-repeat;
	text-indent:-9000px;
	width:93px;
	height:16px;
	display:block;
	margin:0 0 10px 7px;
}

div#content-products div.products-descriptions {
	margin:40px 0;
}

div#content-products div.products-descriptions h3 {
	font:17px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:10px 10px;
}

div#content-products div.products-descriptions p {
	font:12px/18px Tahoma,'Lucida Sans Unicode',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:10px 20px;
	padding:0 0 20px 0;
	width:690px;
	text-align:justify;
}

/****************************
		INFORMAÇÕES
****************************/

div#content-information {
	width:710px;
	margin:0 5px;
}

div#content-information h2 {
	background:url("../img/t_informacoes.png") no-repeat;
	text-indent:-9000px;
	width:128px;
	height:26px;
	display:block;
	margin:0 0 10px 7px;
}

div#content-information div.information-topics {
	margin:40px 0;
}

div#content-information div.information-topics h3 {
	font:17px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:10px 10px;
}

div#content-information div.information-topics h4 {
	font:14px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:5px 10px;	
}

div#content-information div.information-topics p {
	font:12px/18px Tahoma,'Lucida Sans Unicode',Verdana,Helvetica,sans-serif;
	color:#FFF;	
	margin:10px 20px;
	padding:0 0 20px 0;
	width:690px;
	text-align:justify;
}



/****************************
		 DETALHES
****************************/

div#content-details {
	width:710px;
	margin:0 5px;
}

div#content-details h2 {
	background:url("../img/t_detalhes.png") no-repeat;
	text-indent:-9000px;
	width:205px;
	height:56px;
	display:block;
	margin:0 0 10px 7px;
}

div#content-details div.product-photo {
	width:211px;
	height:211px;
	background:url("../img/box_detalhes.png") no-repeat;
	float:left;
	margin:0 0 100px 80px;
}

div#content-details div.product-photo img {
	padding:40px 0 0 40px;
}

div#content-details div.product-photo a {
	background:url("../img/zoom.png") no-repeat;
	width:49px;
	height:31px;
	display:block;
	text-indent:-9999px;
	margin:50px 20px 0 0;
	float:right;

}

div#content-details div.box-details {
	float:right;
	margin:-45px 150px 0 0;

}

div#content-details div.box-details ul {
	margin:70px 0 0 0;
}

div#content-details div.box-details ul li {
	font:17px 'Trebuchet MS',Verdana,Helvetica,sans-serif;
	color:#FFF;	
}

div#content-details div.box-details a {
	width:150px;
	height:50px;
	background:url("../img/comprar.jpg") no-repeat;
	display:block;
	text-indent:-900%;
	margin:50px 0 0 15px;
}

/****************************
		   MARCAS
****************************/

div#content-brands {
	height:820px;
	width:740px;
	position:relative;
}

div#content-brands img {
	margin:0 0 60px 13px;
}

div#content-brands label {
	font:18px 'Trebuchet MS','Lucida Sans Unicode','Century Gothic',Verdana,Helvetica,sans-serif;
	color:#FFF;
	position:absolute;
	top:190px;
	width:250px;
	left:0;
	margin-left:464px;
}

div#content-brands label select {
	font:13px 'Trebuchet MS','Lucida Sans Unicode','Century Gothic',Verdana,Helvetica,sans-serif;
	color:#666;
}

div#content-brands div.container-brands {
	width:740px;
	margin:0 0 0 10px;
}

div#content-brands div.container-brands div.product {
	background:url("../img/box.png") no-repeat;
	width:170px;
	height:170px;
	display:block;
	float:left;
	margin:3px;
}

div#content-brands div.container-brands div.product img {
	margin:18px 15px;
	width:138px;
	height:64px;
}

div#content-brands div.container-brands div.product span a {
	background:url("../img/detalhes.png") no-repeat;
	width:96px;
	height:20px;
	display:block;
	text-indent:-9000px;
	float:right;
	margin:10px 15px 10px 0;
}

div#content-brands div.container-brands div.product p {
	font:11px 'Trebuchet MS','Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
	color:#000;
	text-transform:uppercase;
	text-align:center;
}