/* CSS Document */

* {
margin: 0px;
padding: 0px;
border:none;
background:none;
}

body {
background:url(images/main-bg.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

#container {
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
padding: 30px 0px 0px 0px;
background: url(images/top-main-bg.jpg) repeat-x;
overflow:visible;
border-left: dashed 2px #FFF;
border-right: dashed 2px #FFF;
}

#css-cookie {
	position:absolute;
	top:0px;
	width:93px;
	height:79px;
	}

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

#top {
position:relative;
width:100%;
overflow:visible;
background:url(images/costura1.png) no-repeat 0px 75px;
}

#top-interna {
position:relative;
width:100%;
overflow:visible;
background:url(images/costura2.png) no-repeat 0px 90px;
}

#logo {
position:relative;
width: 26%;
height: 50px;
float:left;
margin-top: 12px;
margin-left: 55px;
}

#top-menu {
position:relative;
width:65%;
height: 50px;
float:left;
}

#top-menu ul {
margin-left: 8%;
}

#top-menu ul li {
float:left;
margin-right: 20px;
list-style:none;
}

#top-menu ul li span {
	width:177px;
	height:64px;
	background-color:#099;
	}

.link-designer {
	width:177px;
	height:64px;
	background:url(images/menu-btn-designer.png) no-repeat;
	}


.link-portfolio {
	width:177px;
	height:64px;
	background:url(images/menu-btn-portfolio.png);
	}

.link-contato {
	width:177px;
	height:64px;
	background:url(images/menu-btn-contato.png);
	}

/*****************************
      PRINCIPAL-BANNER
*****************************/

#banner {
position:relative;
width:94%;
clear:both;
background:url(images/top-bg.png) no-repeat;
height: 350px;
margin-left:55px;
top: 45px;
}

#banner-img {
position:relative;
margin-left: 30px;
margin-top: 40px;
padding: 18px 0px 0px 15px;
width: 390px;
height: 270px;
background:url(images/top-img-bg.png) no-repeat;
float:left;
}

#banner-txt {
position:relative;
float:left;
width:440px;
height: 325px;
background:url(images/top-flower.png) bottom right no-repeat;
padding: 45px 50px 0px 10px;
}

#banner-txt h1 {
background:url(images/top-hd.png) no-repeat;
width:256px;
height:36px;
}

#banner-txt h1 span {
display:none;
}

#banner-txt p {
margin-top: 10px;
font-size:16px;
line-height: 24px;
font-weight:normal;
}

/*****************************
     PRINCIPAL-MIDDLE
*****************************/

#middle {
position:relative;
clear:both;
width:94%;
margin-left:55px;
overflow:hidden;
*margin-top: 30px;
margin-bottom: 30px;
}

#middle h1 {
margin-bottom:10px;
}

#middle h2 {
font-size:16px;
font-weight:bold;
color: #dfc26e;
margin-bottom: 10px;
}

#middle p {
font-size:14px;
color:#FFFFFF;
width: 330px;
*width: 200px;
}

#middle p span {
display:none;
}

.servicos {
width: 321px;
height:51px;
background:url(images/middle-hd-servicos.png) no-repeat bottom;
}

.destaque {
width: 321px;
height: 51px;
background:url(images/middle-hd-destaque.png) no-repeat ;
}

#middle h1 span {
display:none
}

#middle ul {
	margin-top:20px;
	}

#middle ul li {
list-style-position:inside;
font-size:18px;
list-style-type:none;
padding-left: 40px;
margin-bottom:25px;
}

.item1 {
	background:url(images/thumb-photoshop.jpg) no-repeat;
	}
	
.item2 {
	background:url(images/thumb-xhtml.jpg) no-repeat;
	}
	
.item3 {
	background:url(images/thumb-flash.jpg) no-repeat;
	}

.item4 {
	background:url(images/thumb-seo.jpg) no-repeat;
	}

.item5 {
	background:url(images/thumb-blogger.jpg) no-repeat;
	}

.item6 {
	background:url(images/thumb-joomla.jpg) no-repeat;
	}

.middle-content {
position:relative;
width:40%;
float:left;
margin-top: 35px;
margin-bottom:10px;
}

.content2 {
margin-left: 120px;
}

.div-destaque {
position:relative;
padding-top: 10px;
clear:both;
margin-bottom: 35px;
}

.seta1 {
width: 76px;
height: 57px;
background:url(images/middle-seta1.png) no-repeat;
left: 88%;
float:right;
position:absolute;
cursor:pointer;
}

.seta2 {
width: 76px;
height: 57px;
background:url(images/middle-seta2.png) no-repeat;
left: 88%;
float:right;
position:absolute;
cursor:pointer;
}

.thumb {
top: 10px;
}

.floater {
float:left;
margin-right: 10px;
}

/*****************************
            ABOUT
*****************************/

#about {
	position:relative;
	width:100%;
	clear:both;
	overflow:hidden;
	margin-bottom: 30px;
	}

#about-contato {
	position:relative;
	float:left;
	width:36%;
	height:420px;
	background:url(images/about-botton-bg.png) no-repeat bottom;
	margin: 40px 0px 0px 5px;
	}

#about-contato2 {
	position:relative;
	float:left;
	width:36%;
	height:420px;
	margin: 40px 0px 0px 5px;
	}

#about-contato h1 {
	position:absolute;
	margin: 420px 0px 0px 30px;
	background:url(images/about-hd-find.png) no-repeat;
	width:186px;
	height:25px;
	}

#about-contato h1 span {
	display:none;
	}

.botton-twitter {
	position:absolute;
	margin-top: 150px;
	margin-left: 40px;
	cursor:pointer;
	width:122px;
	height:123px;
	}

.botton-gmail {
	position:absolute;
	width:108px;
	height:109px;
	margin-top: 120px;
	margin-left: 170px;
	}

.botton-linkedin {
	position:absolute;
	width:146px;
	height:147px;
	margin-left: 210px;
	margin-top: 190px;
	}

.botton-wordpress {
	position:absolute;
	width: 156px;
	height:156px;
	margin-top: 250px;
	margin-left: 70px;
	}

#about-texto {
	position:relative;
	float:left;
	width: 52%;
	height: 420px;
	background:url(images/top-about-bg.png) no-repeat;
	margin: 70px 0px 0px 0px;
	padding: 20px 40px 20px 20px;
	}
	
#about-texto h1 {
	width: 136px;
	height:32px;
	background:url(images/about-hd-designer.png) no-repeat;
	margin-bottom: 10px;
	}

#about-texto h1 span {
	display:none;
	}

#about-texto h2 {
font-size:16px;
margin-bottom:10px;
	}

#about-texto p {
	font-size:14px;
	color:#FFF;
	margin-bottom: 15px;
	}

#about-texto a:link, a:active {
	text-decoration:none;
	color:#FFF;
	}

#about-texto a:hover {
	text-decoration:underline;
	color:#FFF;
	}

#about-texto a:visited {
	text-decoration:none;
	color:#CCC;
	}

#about-texto ul {
	margin-bottom:20px;
	}

#about-texto ul li {
	list-style-position:inside;
	margin-bottom:5px;
	}

#about-texto ul li a:link  {
	color:#FFF;
	text-decoration:none;
	}

#about-texto ul li a:visited {
	color:#FFF;
	text-decoration:none;
	}

#about-texto ul li a:hover  {
	text-decoration:underline;
	color:#FFF;
	}

	
/*****************************
         PORTFOLIO
*****************************/	

#portfolio-main {
	position:relative;
	float:left;
	width:36%;
	height:423px;
	background:url(images/portfolio-main.png) no-repeat;
	margin: 110px 5px 0px 0px;
	}

#portfolio-texto {
	position:relative;
	float:left;
	width: 52%;
	height: 420px;
	background:url(images/top-about-bg.png) no-repeat;
	margin: 70px 0px 0px 0px;
	padding: 20px 40px 20px 20px;
	}

#portfolio-texto h1 {
	width: 136px;
	height:32px;
	background:url(images/portfolio-hd.png) no-repeat;
	margin-bottom: 10px;
	}

#portfolio-texto h1 span {
	display:none;
	}

#portfolio-texto h2 {
font-size:14px;
font-weight:bold;
margin-bottom:10px;
}

#portfolio-texto p {
	font-size:14px;
	color:#FFF;
	margin-bottom: 15px;
	}

.preview {
	cursor:pointer;
	float:right;
	margin-right: 25px;
	}

.versite {
	background:url(images/portfolio-btn-site.jpg);
	width:93px;
	height:30px;
	cursor:pointer;
	float:right;
	margin-right:5px;
	}

/* <Scroll> */

#rolagem {
	height:370px;
	}

#rolagem .jScrollPaneTrack {
	background: url(../track.jpg);
}

#rolagem .jScrollPaneDrag {
	background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;
}

#rolagem .scroll-pane {
	background:none;
}
			

.scroll-pane {
	overflow: auto;
	background: #ccc;
	float: left;
}

.item-portfolio {
position:relative;
width: 100%;
clear:both;
margin-bottom: 30px;
height: 150px;
}

/*****************************
         MAIL
*****************************/	

#mail-contato {
	position:relative;
	float:left;
	width:35%;
	height:311px;
	background:url(images/contato-envelopes.png) no-repeat;
	margin: 145px 0px 0px 5px;
	}

#mail-contato h1 {
	position:absolute;
	margin: 285px 0px 0px 30px;
	background:url(images/contato-hd-enviamsg.png) no-repeat;
	width:304px;
	height:37px;
	}

#mail-contato h1 span {
	display:none;
	}

#mail-texto {
	position:relative;
	float:left;
	width: 52%;
	height: 420px;
	background:url(images/top-about-bg.png) no-repeat;
	margin: 70px 0px 0px 10px;
	padding: 20px 40px 20px 20px;
	}

#mail-texto h1 {
	background:url(images/contato-hd-contato.png) no-repeat;
	width: 101px;
	height: 27px;
	margin-bottom: 20px;
	}

#mail-texto h1 span {
	display:none;
	}

.form {
	border: dashed 1px #FFF;
	color:#FFF;
	min-height: 20px;
	}

#input-email, #input-nome {
	margin-bottom:20px;
	}

.label {
	display:block;
	padding-bottom:5px;
	}

#dynamic {
	height:20px;
	font-size:10px;
	color:#F99;
	}

.limpar, .enviar {
	width:115px;
	height:37px;
	cursor:pointer;
	}

.limpar {
	background:url(images/contato-btn-limpa.jpg) no-repeat;
	margin-left: 60px;
	}

.enviar {
	background:url(images/contato-btn-envia.jpg) no-repeat;
	margin-left: 10px;
	}

#stamp {
	position:absolute;
	background:url(images/contato-stamp.png);
	width: 127px;
	height:151px;
	margin-left: 400px;
	}

/*****************************
         FLOATNAV
*****************************/	

#floatnav {
position:relative;
width: 100%;
background:url(images/floatnav-bg.png) repeat-x;
height: 335px;
}

#floatnav h1 {
margin-top: 30px;
}

#floatnav h1 span {
display:none;
}

#floatnav ul {
}

#floatnav ul li {
list-style-position:inside;
font-size:12px;
width: 260px;
margin-bottom: 20px;
margin-left: 3px;
list-style-image:url(images/footer-mark.png);
}

#floatnav ul li a:link {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

#floatnav ul li a:hover {
color:#FFFFFF;
text-decoration:underline;
font-weight:bold;
}

#floatnav ul li a:visited {
color:#e5ebf0;
font-weight:bold;
}

#floatnav-container {
width:96%;
margin-left: 55px;
clear:both;
height: 300px;
}

.floatnav-content {
width: 33%;
float:left;
}

.twitter {
background:url(images/footer-hd-twitter.png) no-repeat bottom;
width: 248px;
height: 45px;
}

.blog{
background:url(images/footer-hd-blog.png) no-repeat bottom;
width: 248px;
height: 45px;
margin-bottom: 30px;
}

.lista-blog ul {
margin-top: 20px;
}

.leitura {
background:url(images/footer-hd-leitura.png) no-repeat bottom;
width: 248px;
height: 45px;
margin-bottom: 30px;
}

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

#footer {
	width:100%;
	background: url(images/footer-botoes.png) right bottom no-repeat;
	margin-top: -47px;
	height: 152px;
}

#footer-body {
	width:100%;
	background: url(images/footer-botoes.png) right bottom no-repeat;
	margin-top: -125px;
	height: 152px;
}

.copyright {
	position:absolute;
	left:20%;
	padding-top: 130px;
	}

.copyright-body {
	position:absolute;
	left:20%;
	margin-top: 127px;
	}
	
#footer, #footer-body p {
	font-size:14px;
	color:#006;
	}