//============================ Libraries

@import "libs/css3";
@import "libs/noGrid";
@import "libs/grid";
@import "libs/reset";



//============================ vars

@input-shadow:	inset 1px 2px 1px #cabbb3;
@w-galery:		100px;



//============================ functions

.sombra(){
	-webkit-box-shadow: inset 1px 1px 0 #074736;
	   -moz-box-shadow: inset 1px 1px 0 #074736;
		 -o-box-shadow: inset 1px 1px 0 #074736;
			box-shadow: inset 1px 1px 0 #074736;	
}



//============================ html

html,body{ height: 100%; }
body{ background: #0b6d53; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #666; }
a{ text-decoration: none; outline: none; color: #0b6d53; &:hover{ text-decoration: underline; } }
ul,li{ list-style: none; }



//============================ headers



//============================ forms



//============================ layout

div#bg{ width: 100%; /*height: 100%;*/ position: relative; background: #ecf5f1 url(../images/bg-support.png) no-repeat center top; }

header#top{
	width: 940px;
	height: 90px;
	padding-top: 10px;
	margin: 0 auto;
	position: relative;
	
	h1{
		width: 250px;
		height: 90px;
		float: left;
		
		a{
			width: 250px;
			height: 90px;
			display: block;
			background: url(../images/ortorio.png) no-repeat 0 0;
			text-indent: -30000px;
			text-decoration: none;
			
			&:hover{}
		}
	}
	
	nav{
		padding-top: 50px;
		float: right;
		
		ul{
			li{
				float: left;
				
				a{
					height: 20px;
					line-height: 20px;
					padding: 0 10px;
					display: block;
					font-family: 'Swis721LtBTLight', Arial, Helvetica, sans-serif;
					font-weight: normal;
					font-size: 14px;
					text-decoration: none;
					//font-weight: bold;
					color: #607972;
					.animate;
					
					&:hover{ color: #099d76; }
				}
			}
		}
	}
}

section#slide ul, section#slide ul li{ list-style: none; }
section#slide{
	width: 940px;
	height: 270px;
	margin: 0 auto;
	position: relative;
	
	ul{
		width: 940px;
		height: 270px;
		position: relative;
		
		li{
			width: 940px;
			height: 270px;
			position: absolute;
			
			a{
				width: 940px;
				height: 270px;
				display: block;
				position: relative;
				text-decoration: none;
				
				img{}
				strong{
					width: 280px;
					height: 170px;
					line-height: 35px;
					top: 50%;
					right: 0px;
					margin: -85px 0;
					display: block;
					position: absolute;
					text-align: right;
					font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
					font-size: 27px;
					font-weight: normal;
				}
			}
		}
	}
}

div#show-page{
	width: 940px;
	margin: 0 auto 20px auto;
	background: #0b6d53;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3);
	border-radius: 5px;
	
	section{
		float: left;
		
		h3,a{
			font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
			font-size: 18px;
			font-weight: normal;
			color: white;
			text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
		}
	}
	
	section#sp-bemvindo{
		width: 269px;
		height: 140px;
		padding: 20px;
		border-right: solid 1px #075742;
		
		h3{ margin-bottom: 10px; }
		article{ height: 90px; display: block; margin-bottom: 10px; line-height: 18px; font-weight: normal; color: #fff; strong{ color: #7fe4c9; }}
	}
	
	section#sp-servicos{
		width: 208px;
		height: 140px;
		padding: 20px;
		border-left: solid 1px #1d7f65;
		border-right: solid 1px #075742;
		
		h3{ margin-bottom: 10px; }
		ul{
			height: 90px;
			line-height: 22px;
			margin-bottom: 10px;
			
			li{ color: #fff; list-style: url(../images/bg-ul-li.png) inside; }
		}
	}
	
	/*
	section#sp-depoimentos{
		width: 359px;
		height: 160px;
		padding: 10px;
		border-left: solid 1px #1d7f65;
		 font-size: 13px;
		
		img{ widht: 130px; height: 160px; float: right; }
		article{ width: 199px; height: 115px; line-height: 16px; padding: 20px 20px 0 10px; display: block; float: left; text-align: right; color: #fff; }
		h4{ width: 209px; padding-right: 20px; color: #7fe4c9; text-align: right; float: left; font-weight: normal; }
	}
	*/
	
	section#sp-videos{
		width: 359px;
		height: 160px;
		padding: 10px;
		border-left: solid 1px #1d7f65;
		font-size: 13px;
		position: relative;
		
		a{
			width: 359px;
			height: 160px;
			display: block;
			background: url(../images/bg-player.png) no-repeat center center;
			text-indent: -30000px;
			position: absolute;
			z-index: 3;
			.animate;
			
			&:hover{ .opacity; .shadow(0px, 0px, 0, 0, #000); }
		}
		
		.player-img,
		.player-video{
			width: 359px;
			height: 160px;
			position: relative;
			overflow: hidden;
		}
		
		.player-img{
			img{
				width: 359px;
				/*height: 160px;*/
				top: -20px;
				position: absolute;
			}
		}
		
		.player-video{ display: none; }
	}
}

//============================ content

#index-footer{
	width: 940px;
	margin: 0 auto;
	padding-bottom: 20px;
	position: relative;
	
	section{ float: left; }
	section#footer-news{
		ul{
			li{
				width: 269px;
				height: 40px;
				padding-bottom: 5px;
				margin-bottom: 5px;
				border-bottom: dotted 1px #bdc4c1;
				
				div{
					width: 40px;
					height: 40px;
					background: #0b6d53;
					float: left;
					margin-right: 10px;
					.corner(3px, 3px, 3px, 3px);
					
					strong,
					span{ display: block; text-align: center; }
					
					strong{ padding-top: 5px; font-size: 14px; color: white; }
					span{ font-size: 12px; color: #7fe4c9; }
				}
				a{
					width: 219px;
					display: block;
					float: left;
					color: #666;
					font-size: 12px;
					line-height: 18px;
					
					&:hover{}
				}
			}
		}
	}
	
	section#footer-fotos-videos{
		width: 230px;
		padding-left: 20px;
		
		div{
			height: 70px;
			
			img{}
		}
		
		div > a{ width: 110px; height: 70px; display: block; float: left; }
		div > a > img{ .corner(3px, 3px, 3px, 3px); .sombra; }
		div > h4{ width: 110px; display: block; margin-bottom: 5px; padding-left: 10px; float: right; font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #0b6d53; }
		div > h4 > a{ display: block; color: #0b6d53; }
		div > article{ width: 110px; display: block; padding-left: 10px; float: right; font-size: 13px; color: #666; }
		div > article > a{ display: block; color: #666; }
	}
	
	section#footer-linhas{
		width: 400px;
		padding-left: 20px;
		
		ul{
			li{
				float: left;
				margin-bottom: 10px;
				
				a{
					width: 120px;
					height: 55px;
					padding-top: 15px;
					padding-left: 80px;
					line-height: 20px;
					display: block;
					font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
					font-size: 20px;
					font-weight: normal;
					color: #0b6d53;
					position: relative;
					text-decoration: none;
					
					span{
						width: 70px;
						height: 70px;
						top: 0;
						left: 0;
						display: block;
						background: #0b6d53 url(../images/icons-linha.png) no-repeat 0 0;
						float: left;
						position: absolute;
						.corner(3px, 3px, 3px, 3px);
						.sombra;
					}
				}
			}
			
			#linha-infantil span{			background-position: 0px 0px; }
			#linha-acessibilidade span{		background-position: 0px -70px; }
			#linha-clinica span{			background-position: 0px -140px; }
			#linha-veterinaria span{		background-position: 0px -210px; }
		}
	}
}

footer#footer{
	width: 100%;
	height: 80px;
	background: #0b6d53;
	position: relative;
	
	div#footer-content{
		width: 940px; height: 75px; margin: 0 auto; border-top: solid 5px #074c3a; position: relative; color: #fff; font-size: 13px;
		
		strong,
		a{ display: inline-block; color: white; font-size: 13px; font-weight: normal; }
		
		strong{}
		a{}
	}
}

div#main{
	width: 940px;
	margin: 0 auto 40px auto;
	padding: 40px 0 40px 0;
	border-bottom: dashed 1px #0b6d53;
	
	h2{
		width: 900px;
		height: 60px;
		padding: 0 20px;
		line-height: 60px;
		background: #0b6d53;
		.corners(3px, 3px, 3px, 3px);
		font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
		font-size: 28px;
		font-weight: normal;
		color: #fff;
		margin-bottom: 20px;
	}
}

.content{
	line-height: 22px;
	font-size: 13px;
	font-weight: normal;
	
	p{
		margin-bottom: 20px;
	}
	
	ul.list-content{
		li{
			list-style: disc inside;
		}
	}
	
	strong{ font-weight: bold; color: #0b6d53; }
	em{ font-weight: bold; }
	a{}
	
	.photos-list{
		a{
			margin: 0 20px;
			
			img{
				background: #fff;
				padding: 3px;
				.shadow(
					0px,
					2px,
					2px,
					0,
					#a6aca9
				)
			}
		}
	}
}

div#servicos-btn{
	width: 940px;
	padding-top: 40px;
	text-align: center;
	
	a{
		width: 240px;
		height: 50px;
		line-height: 50px;
		margin: 0 20px;
		display: inline-block;
		background: url(../images/btn-servicos.png) no-repeat 0 0;
		color: #fff;
		text-align: center;
		font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: normal;
		color: #fff;
		text-decoration: none;
		text-shadow: 0px 1px 0px #042019;
		
		strong{
			font-size: 28px;
			font-weight: normal;
			color: #fff;
		}
	}
}

div#load-servicos{
	padding: 20px 0 0 0;
	margin: 20px 0 0 0;
	border-top: dashed 1px #0b6d53;
}

.page-produtos{
	
	
	ul#produtos-list{
		
		li.list-icon-infantil > h3 > span.produtos-icon{		background-position: 0 0; }
		li.list-icon-acessibilidade > h3 > span.produtos-icon{	background-position: 0 -70px; }
		li.list-icon-clinicas > h3 > span.produtos-icon{		background-position: 0 -140px; }
		li.list-icon-veterinaria > h3 > span.produtos-icon{		background-position: 0 -210px; }
		
		#linha-clinica{ padding-top: 30px; }
		
		li{
			width: 439px;
			/*height: 330px;*/
			float: left;
			border-right: dashed #0b6d53 1px;
			/*border-bottom: dashed #0b6d53 1px;*/
			
			h3{
				width: 450px;
				height: 70px;
				margin-bottom: 10px;
				font-family: 'Swis721ThBTThin', Arial, Helvetica, sans-serif;
				font-weight: normal;
				font-size: 20px;
				color: #0B6D53;
				
				strong{ padding-top: 10px; padding-left: 10px; float: left; display: block; font-weight: normal; }
				
				span.produtos-icon{
					width: 70px;
					height: 70px;
					background: url(../images/icons-linha.png) no-repeat 0 0 #0b6d53;
					display: block;
					float: left;
					.corner(3px, 3px, 3px, 3px);
					.sombra;
				}
				span.clear{
					display: block;
				}
			}
			
			a{ display: block; margin-bottom: 20px; text-decoration: none; cursor: default; &:hover{ text-decoration: none; } }
			div.galery-produtos{
				
				a{
					float: left;
					display: block;
					margin-bottom: 10px;
					cursor: pointer;
					
					img{
						width: 75px;
						padding: 2px;
						background: white;
						.corner(3px, 3px, 3px, 3px);
						.shadow(1px, 1px, 1px, 0, #999);
					}
				}
			}
			
			p{
				height: 90px;
				display: block;
				margin-bottom: 0px;
			}
		}
		
		li.lista-hr{
			width: 940px;
			height: 1px;
			/*height: 330px;*/
			float: none;
			padding: 0 !important;
			border-bottom: dashed #0b6d53 1px !important;
		}
	}
}



div#box-videos{
	width: 640px;
	min-height: 500px;
	float: left;
}

div#box-videos > ul{}
div#box-videos > ul > li{
	width: 640px;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: dotted 1px #bdc4c1;
	
	h3{ display: block; font-family: 'Swis721LtBTLight', Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; color: #0B6D53; }
	small{ display: block; margin-bottom: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: darkgreen; }
	div{ margin-bottom: 10px; }
	p{ margin: 0; }
}

.player{
	width: 640px;
	height: 400px;
	position: relative;
	overflow: hidden;
	
	a{
		width: 100%;
		height: 100%;
		display: block;
		background: url(../images/bg-player.png) no-repeat 0 0;
		text-indent: -30000px;
		position: absolute;
		z-index: 3;
		.animate;
		
		&:hover{ .opacity; .shadow(0px, 0px, 15px, 2px, #000); }
	}
	
	.player-img,
	.player-video{
		width: 640px;
		height: 400px;
		position: relative;
	}
	
	.player-img{
		img{
			width: 640px;
			height: 400px;
		}
	}
	
	.player-video{ display: none; }
}

aesid#sidebar-videos{
	width: 260px;
	float: right;
	
	h3{
		display: block;
		font-family: 'Swis721LtBTLight', Arial, Helvetica, sans-serif;
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 10px;
		color: #0B6D53;
	}
	
	div{
		a{
			display: block;
			text-decoration: none;
			
			img, strong, span{ display: block; }
			
			img{ margin-bottom: 10px; .corners(3px, 3px, 3px, 3px); }
			strong{ font-size: 14px; line-height: 16px; font-weight: bold; margin-bottom: 5px; &:hover{ text-decoration: underline; } }
			span{ font-size: 12px; line-height: 14px; font-weight: normal; color: #666; &:hover{ text-decoration: underline; } }
		}
	}
	
	ul{
		li{
			a{}
		}
	}
}


.page-noticias{
	ul#blog-list{
		width: 640px;
		min-height: 500px;
		float: left;
		
		li{ list-style: none; }
	}
	
	ul#blog-list > li{
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: dotted 1px #0B6D53;
		
		h3,
		h3 > a{
			display: block;
			font-family: 'Swis721LtBTLight', Arial, Helvetica, sans-serif;
			font-size: 20px;
			font-weight: normal;
			margin-bottom: 10px;
			color: #0B6D53;
		}
	}
}


form#form-contato{
	width: 530px;
	float: left;
	
	p{}
	label{ display: none; }
	
	input,
	textarea{
		border: solid 1px #cabbb3;
		background: #eeebe5;
		display: block;
		margin: 0;
		padding: 0;
		.corner;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #666;
		float: left;
		
		-webkit-box-shadow: @input-shadow;
		   -moz-box-shadow: @input-shadow;
			 -o-box-shadow: @input-shadow;
				box-shadow: @input-shadow;
	}
	
	input{ height: 30px; line-height: 30px; padding: 0 10px; }
	textarea{ height: 100px; padding: 10px; resize: none; }
	
	input#txNome{ width: 508px; margin-bottom: 10px; }
	input#txEmail{ width: 310px; margin-bottom: 10px; margin-right: 10px; }
	input#txDDD{ width: 40px; margin-bottom: 10px; margin-right: 10px; }
	input#txTelefone{ width: 94px; margin-bottom: 10px; }
	input#txAssunto{ width: 508px; margin-bottom: 10px; }
	textarea#txMsg{ width: 508px; margin-bottom: 10px; }
	
	button{ width: 70px; height: 30px; background: #0a674e; color: #fff; border: none; .corner; float: right; cursor: pointer; font-size: 12px; }
}

aesid#sidebar-form{
	width: 380px;
	float: right;
	
	div{ margin-bottom: 30px; }
	a.img-lojas{
		width: 141px;
		height: 146px;
		padding: 2px;
		margin: 0 20px 0 0;
		background: white;
		overflow: hidden;
		position: relative;
		display: block;
		float: left;
		.shadow(0px, 1px, 1px, 0, #e1e2e2);
		
		img{ position: absolute; }
	}
	
	a.btn-google-maps{ width: 25px; height: 25px; margin-right: 180px; display: block; float: left; background: url(../images/icon-google.png) no-repeat 0 0; text-indent: -30000px; }
	p{ width: 215px; margin-bottom: 0px; line-height: 16px; float: left; display: block; }
	h4{ width: 215px; margin-bottom: 20px; float: left; display: block; color: #0b6d53; }
	span{ display: block; }
}


div.gallery{}
div.gallery > dl{
	float: left;
	display: block;
	margin-bottom: 10px;
	cursor: pointer;
}
div.gallery > dl > dt{}
div.gallery > dl > dt > a{
	margin-bottom: 0 !important;
	cursor: pointer;
	
	img{
		width: 75px;
		height: 75px;
		padding: 2px;
		background: white;
		.corner(3px, 3px, 3px, 3px);
		.shadow(1px, 1px, 1px, 0, #999);
		cursor: pointer;
	}
	
	&:hover{}
}

#debug{ width: 100%; height: 300px; left: 0; top: 0; background: darkred; display: block; position: absolute; z-index: 99; }