/*
CSS plantas
Author: QuartaDesign
Author URI: http://www.quartadesign.com.br/
Description: Tema desenvolvido para Paula Eduardo
*/
body {
	background-color:#fff;
	margin:0;
	padding:0;
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
}
/* nav para plantas */
#plantas-nav {
	max-width:1200px;
	width:90%;
	margin:10px auto;
}
#plantas-nav ul {
	list-style:none;
	margin:0;
	padding:0;
	display:table;
	width:98%;
	padding:0 1%;
	table-layout:fixed;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	height:50px;
	background:#eee url(../images/plantas-nav-bg.png) repeat-x 0 0;
	-moz-box-shadow:  1px 1px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
#plantas-nav li {
	display:table-cell;
	text-align:center;
	border-right: 1px solid #fc9;
	vertical-align:middle;
	padding:1%;
	background:#eee url(../images/plantas-nav-bg.png) repeat-x 0 0;
}
#plantas-nav li:first-child {
	border-left: 1px solid #fc9;
}
#plantas-nav li a {
	text-decoration:none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2), -1px -1px 1px rgba(255,255,255,0.2);
	color:#222;
}
#plantas-nav li:hover {
	background-color:#ccc;
	background-position: 0 -50px;
}
#plantas-nav li:active,
#plantas-nav li.selecionado {
	background-color:#aaa;
	background-position: 0 -100px;
}
#plantas-nav li:hover a {
	color:#000;
}
#plantas-nav li:active a,
#plantas-nav li.selecionado a {
	color:#fff;
}

/* Geral */

img {
	max-width:100%;
}
#plantas-viewport {
	overflow:hidden;
	position:relative;
	margin:0 auto;
	max-width:1200px;
	border: solid 1px #ddd;
}
.plantas-layers {
	width:100%;
	height:100%;
	position:relative;
	top:0;
	left:0;
	display:none;
}

/* Legendas nav */

.legendas-nav {
	background:url(../images/bg-blk85.png);
	width:40%;
	position: absolute;
	top: 1%;
	left: 0;
	padding:1% 1% 1% 2%;
	max-width:250px;
	z-index:1200;
}
.legendas-nav h3 {
	background:url(../images/legendas-abre-fecha.png) no-repeat 100% 100%;
	margin:0 0 0.5em 0;
	color:#fff;
	padding:0 30px 0 0;
	line-height:25px;
	cursor:pointer;
}
.legendas-nav ol {
	padding-right:35px;
	color:#fff;
}
.legendas-nav ol li {
	padding: 5px 0;
}
.legendas-nav a:link {
	color:#fff;
	text-decoration:none;
}

/* Legendas geral */
.legendas {
	position:absolute;
}
.legendas .leg-numero {
	width: 25px;
	height: 25px;
	background:url(../images/bg-blk85.png);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	text-align:center;
	line-height:25px;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	display:block;
	cursor:pointer;
}
.legendas .leg-descricao {
	position:absolute;
	z-index:999;
	top:20px;
	left:20px;
	padding:5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align:center;
	font-size:14px;
	color:#444;
	background:url(../images/bg-wht85.png);
	display:none;
	width:120px;
}
.legendas .leg-descricao-esquerda {
	left:-130px;
}
/* Legendas posicao */

.implanta01 {
	top:60%;
	left:60%;
}
.implanta02 {
	top:46%;
	left:37%;
}
.implanta03 {
	top:60%;
	left:65%;
}
.implanta04 {
	top:46%;
	left:31%;
}
.implanta05 {
	top:37%;
	left:47%;
}
.implanta06 {
	top:55%;
	left:47%;
}
.implanta07 {
	top:49%;
	left:93%;
}
.implanta08 {
	top:77%;
	left:73%;
}
.implanta09 {
	top:60%;
	left:21%;
}
.implanta10 {
	top:70%;
	left:47%;
}
.implanta11a {
	top:66%;
	left:67%;
}
.implanta11b {
	top:52%;
	left:27%;
}
.implanta12a {
	top:54%;
	left:67%;
}
.implanta12b {
	top:40%;
	left:27%;
}


.cobertura01  {
	top:5%;
	left:39%;
}
.cobertura02  {
	top:5%;
	left:57%;
}
.cobertura03  {
	top:37%;
	left:48.5%;
}
.cobertura04  {
	top:75%;
	left:48.5%;
}
.cobertura05  {
	top:47%;
	left:16.5%;
}
.cobertura06  {
	top:20%;
	left:16.5%;
}
.cobertura07  {
	top:30%;
	left:82%;
}
.cobertura08a  {
	top:75%;
	left:16.5%;
}
.cobertura08b {
	top:75%;
	left:82%;
}
.plantas01 {
	top:39%;
	left:49%;
}
.plantas02a {
	top:39%;
	left:39%;
}
.plantas02b {
	top:39%;
	left:57%;
}
.plantas02c {
	top:16%;
	left:49%;
}
.plantas02d {
	top:16%;
	left:60%;
}
.plantas03  {
	top:5%;
	left:39%;
}
.plantas04  {
	top:5%;
	left:57%;
}
.plantas05a  {
	top:5%;
	left:72%;
}
.plantas05b  {
	top:5%;
	left:25%;
}
.plantas05c  {
	top:92%;
	left:67%;
}
.plantas05d  {
	top:92%;
	left:30%;
}
.plantas06a  {
	top:24%;
	left:59%;
}
.plantas06b  {
	top:24%;
	left:38%;
}
.plantas07a  {
	top:40%;
	left:3%;
}
.plantas07b  {
	top:40%;
	left:95%;
}
.plantas07c  {
	top:78%;
	left:3%;
}
.plantas07d  {
	top:78%;
	left:95%;
}
.plantas08a  {
	top:60%;
	left:3%;
}
.plantas08b  {
	top:60%;
	left:95%;
}
.plantas09a {
	top:16%;
	left:38%;
}

/* Legendas
-------------------------------------------------------------- */

.plantas-leg-tip {
	position: absolute;
	padding-bottom: 0.9em;
	height: -14px;
}
.plantas-leg-tip span {
	margin:-50% auto auto -50%;
	background: url(../images/plantas-tip-bg.png) no-repeat center bottom;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding:0.5em 0.5em 14px 0.5em;
	display:inline-block;
	text-align:center;
	color:#fff;
	font-size:0.9em;
}


/* Box com Areas usa legendas */

.plantas-area1 {
	font-size:1em;
	top:70%;
	left:50%;
}
.plantas-area2 {
	font-size:1em;
	top:60%;
	left:25%;
}
.plantas-area3 {
	font-size:1em;
	top:60%;
	left:75%;
}
.plantas-area4 {
	font-size:1em;
	top:75%;
	left:25%;
}
.plantas-area5 {
	font-size:1em;
	top:75%;
	left:75%;
}
.plantas-area6 {
	font-size:1em;
	top:30%;
	left:20%;
}
.plantas-area7 {
	font-size:1em;
	top:30%;
	left:80%;
}



@media (max-width: 900px) {
	body {
		font-size:12px;
	}
}
@media (max-width: 600px) {
	body {
		font-size:11px;
	}
	#plantas-nav ul {
		padding:0 2%;
		height:30px;
		background:#eee url(../images/plantas-nav-bg.png) repeat-x 0 -10px;
	}
	#plantas-nav li {
		background:#eee url(../images/plantas-nav-bg.png) repeat-x 0 -10px;
	}
	#plantas-nav li:hover {
		background-position: 0 -60px;
	}
	#plantas-nav li:active,
	#plantas-nav li.selecionado {
		background-position: 0 -110px;
	}
	.legendas-nav {
		padding:1% 0% 1% 2%;
	}
	.legendas .leg-numero {
		width: 20px;
		height: 20px;
		line-height:20px;
		font-size:12px;
	}
	.legendas .leg-descricao {
		top:15px;
		left:15px;
		padding:5px;
		font-size:12px;
		color:#444;
		width:100px;
	}
	.legendas .leg-descricao-esquerda {
		left:-110px;
	}

}