@charset "UTF-8";

/* RESET */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {
font-size:100%;
font-weight:400
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
}

ul,ol {
list-style:none
}

abbr,acronym {
border:0
}

fieldset,img {
border:0
}

table {
border-collapse:collapse;
border-spacing:0
}

caption,th {
text-align:left
}

/* LAYOUT */

/* Estaticos */


#noticias {
position:fixed; top:41px; right:0px; border:none
	}

#link1 { 
position:fixed; top:66px; right:21px; border:none; color:#CCC
	}

#link2 { 
position:fixed; top:91px; right:86px; border:none; color:#CCC
	}

#link3 { 
position:fixed; top:116px; right:86px; border:none; color:#CCC
	}

#link4 { 
position:fixed; top:141px; right:20px; border:none; color:#CCC
	}

#link5 { 
position:fixed; top:156px; right:71px; border:none; color:#CCC
	}

#flickr { 
position:fixed; top:40px; left:5px; border:none 
	}

#flickr2 { 
position:fixed; top:40px; left:55px; border:none 
	}

#vimeo {
position:fixed; top:100px; left:5px; border:none
	}
	
#youtube {
position:fixed; top:100px; left:55px; border:none
	}

#wordpress {
position:fixed; top:160px; left:5px; border:none
	}

#blogger {
position:fixed; top:160px; left:55px; border:none 
	}

#gmail {
 position:fixed; top:220px; left:5px; border:none
	}

#msn {
position:fixed; top:220px; left:55px; border:none
	}

/* Wrappers */
.wrapper.header {
background:url(images/tile-header.jpg) repeat;
border-bottom:1px solid #555
}

.wrapper.portfolio {
background:url(images/tile-portfolio.png) repeat;
border-bottom:1px solid #b3b3b3
}

.wrapper.nav {
background:url(images/tile-nav.png) repeat-x
}

.wrapper.content-lower {
background:url(images/tile-content-lower.png) repeat;
border-top:1px solid #fafafa
}


/* Footer */
.wrapper.footer {
border-top:1px solid #808080;
color:#555;
font-size:12px;
line-height:18px;
}


/* Sections */
#header, #content-lower, #footer {
margin:0 auto;
overflow:hidden;
padding:0 10px;
width:940px
}

#header {
background:url(images/logo-main4.png) 240px 40px no-repeat;
height:400px
}

#content-portfolio {
background:url(images/bg-image-portfolio.png) 0 490px no-repeat;
height:604px;
margin:0 auto;
overflow:hidden;
width:960px
}

#nav {
background:url(images/tile-portfolio.png) repeat;
height:105px;
margin:0 0 50px;
width:960px
}

#content-lower {
height:500px;
padding-top:50px
}

#footer {
padding:15px 0 15px;
margin:0 auto;
width:500px
}

/* Subsections */
.section.intro {
margin: -15px 0 0 30px;
width:550px;
}

.section.web-design, .section.ui, .section.illustration {
float:left;
margin:0 20px 0 0;
width:280px
}

.section.about {
float:left;
width:530px
}

.section.contact {
float:right;
width:280px
}


/* TYPOGRAPHY */
body {
background:#262626 url(images/tile-portfolio.png) repeat;
color:#555;
font:14px/22px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif
}

p {
margin:0 0 22px
}

pre {
background-color:#eee;
font-size:12px;
padding:10px
}

strong,b {
font-weight:700
}

em,i {
font-style:italic
}

code {
font-family:'Courier New', Courier, monospace
}

.small {
font-size:11px
}


/* Text Shadow */
/*#header, #content-portfolio, #content-lower {
text-shadow:1px 1px 1px rgba(255,255,255, .8)
}

#nav, .slideshow {
text-shadow:0 0 0 rgba(0,0,0, 1)
}*/


/* Headers */
#header h1 {
height:200px;
margin:40px 80px -20px;
width:500px
}

#header h1 span, #header h2 span, .section.web-design h2 span, .section.ui h2 span, .section.illustration h2 span, .section.about h2 span, .section.contact h2 span {
left:-999em;
position:absolute
}

#header h2 {
background:url(images/title-header.png) no-repeat;
height:54px;
width:365px
}

.section.web-design h2, .section.ui h2, .section.illustration h2 {
height:55px;
width:250px
}

.section.web-design h2 {
background:url(images/imp.png) no-repeat
}

.section.ui h2 {
background:url(images/id-visual.png) no-repeat
}

.section.illustration h2 {
background:url(images/ilust.png) no-repeat
}

.section.about h2, .section.contact h2 {
height:32px;
width:160px
}

.section.about h2 {
background:url(images/sobre.png) no-repeat
}

.section.contact h2 {
background:url(images/contato.png) no-repeat
}

h3 {
color:#6a6a6a;
font-size:12px;
padding:5px 0 10px
}


/* NAVIGATION */
a {

text-decoration:none
}

a:hover {
border-bottom:1px solid transparent
}

a:focus {
outline:none
}


/* Main Slider Navigation */
#slider {
position:relative;
width:960px
}

.scroll {
clear:left;
height:500px;
left:10px;
overflow:auto;
position:relative;
width:940px
}

.scroll-container div.panel {
float:left;
height:500px;
padding:0;
position:relative;
width:940px
}

ul.navigation {
margin:0 auto;
width:960px
}

ul.navigation li {
display:inline
}

ul.navigation a {
background:url(images/nav.png) 0 0 no-repeat;
border:none;
display:block;
float:left;
height:105px;
padding:0 0 0 20px;
width:300px
}

ul.navigation a:focus {
outline:none
}

ul.navigation span.title, ul.navigation span.subtitle {
cursor:pointer;
display:block;
width:300px
}

ul.navigation span.title {
color:#d9d9d9;
font-size:30px;
padding:22px 0 11px
}

ul.navigation span.subtitle {
color:#f2f2f2;
font-size:12px
}

/* Tab State - Normal */
ul.navigation a#ui-panel-tab {
background-position:0 0
}

ul.navigation a#web-design-panel-tab {
background-position:-320px 0
}

ul.navigation a#illustration-panel-tab {
background-position:-640px 0
}

/* Tab State - Hover */
ul.navigation a#ui-panel-tab:hover {
background-position:0 -105px
}

ul.navigation a#web-design-panel-tab:hover {
background-position:-320px -105px
}

ul.navigation a#illustration-panel-tab:hover {
background-position:-640px -105px
}

/* Tab State - Selected */
ul.navigation a#ui-panel-tab.selected {
background-position:0 -210px
}

ul.navigation a#web-design-panel-tab.selected {
background-position:-320px -210px
}

ul.navigation a#illustration-panel-tab.selected {
background-position:-640px -210px
}


/* Portfolio Slideshows - Anything Slider */
.slideshow {
background:url(images/slideshow-frame.png) no-repeat;
float:left;
height:400px;
position:relative;
width:640px
}

.slideshow ul li {
display:block;
float:left;
height:340px;
margin:0;
padding:0;
width:620px
}

.slideshow .slide-wrapper {
background:#0a0a0a;
height:340px;
left:10px;
overflow:auto;
position:absolute;
top:10px;
width:620px
}

.slideshow .slide-wrapper ul {
left:0;
list-style:none;
margin:0;
position:absolute;
top:0;
width:99999px
}

.slideshow .slide-wrapper ul ul {
background:none;
border:0;
margin:0;
overflow:visible;
position:static;
width:auto
}

.slideshow .slide-wrapper ul ul li {
background:none;
float:none;
height:auto;
width:auto
}

.slideshow .arrow {
background:url(images/slideshow-arrows.png) no-repeat 0 0;
border:none;
cursor:pointer;
display:block;
height:80px;
position:absolute;
text-indent:-9999px;
top:140px;
width:30px
}

.slideshow .forward {
background-position:-90px -80px;
right:10px
}

.slideshow .forward:hover {
background-position:-90px 0
}

.slideshow .back {
background-position:0 -80px;
left:10px
}

.slideshow .back:hover {
background-position:0 0
}

#thumbNav {
left:10px;
position:absolute;
top:360px
}

#thumbNav a, #thumbNav a:hover {
background:url(images/slideshow-thumb-tab.png) 0 0 no-repeat;
border:none;
color:#f2f2f2;
display:inline-block;
height:22px;
margin:0 5px 0 0;
padding:5px 0;
text-align:center;
width:30px
}

#thumbNav a:hover, #start-stop:hover {
color:#b3b3b3
}

#thumbNav a.cur {
background:url(images/slideshow-thumb-tab.png) -30px 0 no-repeat
}

#start-stop {
background:url(images/slideshow-start-stop.png) 0 0 no-repeat;
border:none;
color:#f2f2f2;
height:22px;
padding:5px 0;
position:absolute;
right:10px;
text-align:center;
top:360px;
width:60px
}

#start-stop.playing {
background:url(images/slideshow-start-stop.png) -60px 0 no-repeat
}


/* Overlay */
.boxgrid {
float:left;
height:340px;
overflow:hidden;
position:relative;
width:620px
}

.boxgrid p {
color:#f2f2f2;
font-size:12px;
line-height:18px
}

.boxgrid h4 {
color:#f2f2f2;
font-size:16px
}

.boxgrid img {
left:0;
position:absolute;
top:0
}

.boxcaption {
background:url(images/bg-image-trans-black.png) repeat;
border:1px solid #0a0a0a;
float:left;
height:80px;
padding:10px;
position:absolute;
width:100%
}

.captionfull .boxcaption {
left:0;
top:340px
}


/* FORMS */
form {
overflow:hidden
}

form fieldset {
border:none
}

form p {
margin:0 0 12px
}

label {
clear:both;
float:left;
width:280px
}

input, input[type=text], textarea {
background:transparent;
border:none;
color:#555;
font-size:12px;
float:left;
font-family:'Lucida Grande', Helvetica, Arial, Geneva, sans-serif;

}

input[type=text], textarea {
width:260px
}

input[type=text]:focus, textarea:focus {
background:transparent
}

input[type=text] {
height:22px;
padding:8px 5px 2px
}

textarea {
height:110px;
padding:5px 5px 7px;
overflow:auto;

}

#name, #email, #message {
display:table-cell;
display:inline-block;
float:left;
margin:0 0 12px;
width:270px
}

#name, #email {
background:url(images/bg-image-form-input.png) no-repeat;
}

#message {
background:url(images/bg-image-form-textarea.png) no-repeat;
}

.oubliette {
display:none
}

input.button {

background:url(images/bg-image-form-button.png) no-repeat;
border:none;
cursor:pointer;
float:right;
height:36px;
margin:5px 0 0;
text-align:center;
width:100px
}


/* Form Validation */
#name.error-input, #email.error-input {
background:url(images/bg-image-form-input-error.png) no-repeat;
color:#600
}

#message.error-input {
background:url(images/bg-image-form-textarea-error.png) no-repeat;
color:#600
}

form .error-div {
color:#555;
float:left;
font-size:12px;
margin:12px 0 0
}