/**{ outline:1px solid #333; }*/
/*CSS RESET*/
html, body, div, span, object, a, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio,
video{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }

body, html{ line-height:1; width:100%; height:100%; }
article, aside, dialog, figure, footer, header, hgroup, nav, section{ display:block; }
nav ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after, q:before, q:after{ content:''; }
a{ margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins{ background-color:#ff9; color:#000; text-decoration:none; }
mark{ background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{ text-decoration: line-through; }
abbr[title], dfn[title]{ border-bottom:1px dotted #000; cursor:help; }
table{ border-collapse:collapse; border-spacing:0; }
hr{ display:block; height:3px; border:0; border-top:none; margin:0; padding:0; }
input, select{ vertical-align:middle; }
textarea{ resize:none; }
/*CSS RESET*/

body, html{
	background:url(../pics/wallBG.png) top center repeat-x #282828;
	font:14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p{ margin-bottom:15px; }

sup{ font-size:9px; position:relative; top:-4px; }

hr{
	background:url(../pics/hr.png) top center repeat-x;
	margin:20px 0px 40px 0px;
	width:760px;
	height:3px;
}
hr.hrMisc{ margin:60px 0px 50px 0px; }

#master{
	width:835px;
	height:auto;
	margin:0px auto;
	overflow:visible;
	position:relative;
}

header{
	height:276px;
	width:100%;
	position:relative;
}

header h1 a, header h1 a:visited{
	background:url(../pics/jj.png) top left no-repeat;
	width:477px;
	height:82px;
	overflow:hidden;
	text-indent:-2000px;
	position:absolute;
	top:142px;
	left:-4px;
	text-decoration:none;
}
header h1 a:hover{ opacity:0.7; }

#ceilingLamp, #ceilingLampOff{
	background:url(../pics/ceilingLamp.png) top left no-repeat;
	width:232px;
	height:237px;
	position:absolute;
	top:0px;
	right:-10px;
	cursor:pointer;
}

#ceilingLampOff{
	background:url(../pics/ceilingLamp.png) 0px -237px no-repeat;
}

nav#mainMenu{
	width:100%;
	height:34px;
	margin:25px 0px;
	display:block;
	clear:both;
	position:relative;
	overflow:visible;
}

nav#mainMenu li{
	list-style:none;
	height:34px;
	float:left;
	clear:none;
}

nav#mainMenu li a, nav#mainMenu li a:visited{
	background:url(../pics/menu.png) no-repeat;
	display:block;
	overflow:hidden;
	height:34px;
	text-indent:-2000px;
}

nav#mainMenu li a#aboutMe, nav#mainMenu li a#aboutMe_on{ background-position:0px 0px; width:152px; margin:0px 98px 0px 30px; }
nav#mainMenu li a#aboutMe:hover, nav#mainMenu li a#aboutMe:active, nav#mainMenu li a#aboutMe_on{ background-position:0px -34px; }

nav#mainMenu li a#portfolio, nav#mainMenu li a#portfolio_on{ background-position:-152px 0px; width:136px; margin-right:98px; }
nav#mainMenu li a#portfolio:hover, nav#mainMenu li a#portfolio:active, nav#mainMenu li a#portfolio_on{ background-position:-152px -34px; }

nav#mainMenu li a#blog, nav#mainMenu li a#blog_on{ background-position:-288px 0px; width:70px; margin-right:98px; position:relative; z-index:3; cursor:pointer; }
nav#mainMenu li a#blog:hover, nav#mainMenu li a#blog:active, nav#mainMenu li a#blog_on{ background-position:-288px -34px; }

.blogOn{ background-position:-288px -34px!important; }/* para o NEW splash*/

nav#mainMenu li a#contact, nav#mainMenu li a#contact_on{ background-position:-358px 0px; width:123px; }
nav#mainMenu li a#contact:hover, nav#mainMenu li a#contact:active, nav#mainMenu li a#contact_on{ background-position:-358px -34px; }

nav#mainMenu li a:active{ position:relative; top:1px; }

nav#mainMenu #on_aboutMe, nav#mainMenu #on_portfolio, nav#mainMenu #on_blog, nav#mainMenu #on_contact{
	width:42px;
	height:14px;
	display:block;
	position:absolute;
	bottom:-25px;
	left:85px;
	background:url(../pics/menuOn.png) top left no-repeat;
}
nav#mainMenu #on_portfolio{ left:325px; }
nav#mainMenu #on_blog{ left:525px; }
nav#mainMenu #on_contact{ left:725px; }

nav#mainMenu #balloon{
	width:119px;
	height:69px;
	background:url(../pics/baloon.png) top left no-repeat;
	text-align:center;
	position:absolute;
	top:-55px;
	right:225px;
	z-index:1;
	display:none;
}

#balloon span{
	display:block;
	margin-top:22px;
	font-size:11px;
	color:#333;
	font-weight:bold;
	text-shadow:#f4f4f4 0px 1px 0px;
}

section#main{ 
	width:100%;
	height:auto;
	background:#f2f2f2;
	overflow:hidden;
	min-height:1050px;
	position:relative;
}

section#main .wrapper{
	margin:0px 28px 0px 0px;
}

section#container, section#containerFull{ 
	width:549px; /*original:570px*/
	height:auto;
	min-height:1050px;
	float:left;
	margin-top:33px;
	background:url(../pics/divider.png) repeat-y 575px 0px;
	padding:0px 0px 0px 29px;
}

section#containerFull{
	width:777px;
	background:none;
	padding-bottom:120px;
}

section#sidebar{
	width:257px;
	height:auto;
	min-height:820px;
	float:left;
	position:relative;
	margin-top:33px;
}

#latestWork{
	display:block;
	width:244px;
	height:257px;
	position:relative;
	overflow:visible;
	z-index:2;
	margin:0px 0px 0px auto;
}

#latestWork #cover{
	position:absolute;
	top:0px;
	left:0px;
	background:url(../pics/latestWork.png) top left no-repeat;
	width:100%;
	height:100%;
	z-index:2;
	display:block;
}

#latestWork #work{
	width:209px;
	height:203px;
	display:block;
	background:url(../pics/work.png) top left no-repeat;
	position:absolute;
	top:14px;
	left:23px;
	z-index:1;
}

#latestWork .workTitle, #latestWork .workTitle:visited{
	width:237px;
	height:22px;
	line-height:25px;
	display:block;
	position:absolute;
	top:222px;
	left:7px;
	z-index:3;
	overflow:hidden;
	font:14px "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight:bold;
	color:#1176a4;
	text-align:center;
	text-shadow:0px 1px 0px #000;
	text-decoration:none;
}

#latestWork .workTitle:hover{ color:#fff; text-decoration:none; }
#latestWork .workTitle:active{ top:221px; }

h3#latestWorkTitle{
	width:124px;
	height:64px;
	display:block;
	background:url(../pics/myLatestWorkTitle.png) top left no-repeat;
	overflow:hidden;
	text-indent:-2000px;
	z-index:3;
	margin:18px 0px 7px 20px;
}

h3#myTweetsTitle{
	display:block;
	width:100%;
	height:100px;
	background:url(../pics/myTweetsTitle.png) top right no-repeat;
	overflow:hidden;
	text-indent:-2000px;
	margin:60px 0px 20px 0px;
}

#mainBottomCut{
	display:block;
	width:100%;
	height:43px;
	background:url(../pics/mainBottomCut.png) repeat-x bottom center #f2f2f2;
	margin-bottom:60px;
}

h2{
	display:block;
	margin:18px 0px 25px 0px;
	width:100%;
	background-repeat:no-repeat;
	background-position:0px 0px;
	overflow:hidden;
	text-indent:-2000px;
}

h2#welcome{ background-image:url(../pics/title_welcome.png); height:37px; }
h2#myWork{ background-image:url(../pics/title_myWork.png); height:37px; margin-bottom:0px; }
h2#contact{ background-image:url(../pics/title_contact.png); height:31px; }
h2#websites{
	background-image:url(../pics/title_websites.png);
	width:229px;
	height:43px;
	position:relative;
	left:577px;
}
h2#miscellaneous{
	background-image:url(../pics/title_miscellaneous.png);
	width:346px;
	height:43px;
	position:relative;
	left:460px;
}

#socialMedia{
	width:100%;
	height:24px;
	display:block;
	clear:both;
	position:relative;
	top:8px;
}

#socialMedia a{
	width:25px;
	height:25px;
	background-image:url(../pics/socialMedia.png);
	background-repeat:no-repeat;
	display:block;
	float:left;
	overflow:hidden;
	text-indent:-2000px;
	margin-right:5px;
}

#socialMedia a#twitter, #socialMedia a#twitter:visited{ background-position:0px 0px; }
#socialMedia a#twitter:hover{ background-position:0px -25px; }

#socialMedia a#lastfm, #socialMedia a#lastfm:visited{ background-position:-25px 0px; }
#socialMedia a#lastfm:hover{ background-position:-25px -25px; }

#socialMedia a#youtube, #socialMedia a#youtube:visited{ background-position:-50px 0px; }
#socialMedia a#youtube:hover{ background-position:-50px -25px; }

#socialMedia a#flickr, #socialMedia a#flickr:visited{ background-position:-75px 0px; }
#socialMedia a#flickr:hover{ background-position:-75px -25px; }

#socialMedia a#facebook, #socialMedia a#facebook:visited{ background-position:-100px 0px; }
#socialMedia a#facebook:hover{ background-position:-100px -25px; }

footer{
	font:10px Arial, Helvetica, sans-serif;
	color:#fff;
	background:url(../pics/footerBG.png) bottom center repeat-x;
	width:100%;
	height:125px;
	display:block;
	position:relative;
	overflow:visible;
}

#copyrightBox{
	width:835px;
	height:52px;
	display:block;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-418px;
	overflow:visible;
}

#copyright{
	background:url(../pics/copyright.png) no-repeat top left;
	width:434px;
	height:100%;
	position:absolute;
	top:0px;
	right:-4px;
}

#copyright .txt{
	display:block;
	width:auto;
	text-align:left;
	position:absolute;
	bottom:20px;
	left:20px;
	letter-spacing:-0.02em;
}

#copyright #hosted, #copyright #hosted:visited{
	display:block;
	width:auto;
	height:22px;
	line-height:22px;
	text-align:left;
	background:url(../pics/webtuga.png) 0px 50% no-repeat;
	text-indent:30px;
	position:absolute;
	bottom:16px;
	right:20px;
	text-decoration:none;
}
#copyright #hosted:hover{ color:#bcd630; }

#copyright a, #copyright a:visited{ color:#fff; text-decoration:none; }
#copyright a:hover{ color:#1a85b1; text-decoration:none }


#fbPic{ display:none; width:0px; height:0px; }


.project, .projectMisc{
	display:block;
	width:770px;
	height:auto;
	min-height:225px;
	clear:both;
	font-size:10px;
}

.project .pic, .projectMisc .pic{
	display:block;
	width:245px;
	height:225px;
	position:relative;
	float:left;
	margin-right:10px;
}
.project .frame, .project .frame:visited, .project .blueFrame, .project .blueFrame:visited{
	background:url(../pics/portfolioFrame.png) top left no-repeat;
	width:245px;
	height:225px;
	position:relative;
	z-index:2;
	display:block;
}
.project .blueFrame, .project .blueFrame:visited{ background:url(../pics/portfolioBlueFrame.png) top left no-repeat; }

.project img{
	position:absolute;
	top:18px;
	left:23px;
	z-index:1;
}

.project .legend, .projectMisc .legend{
	display:block;
	width:490px;
	height:auto;
	min-height:225px;
	float:left;
}

.project h3, .projectMisc h3, .project h3 a, .project h3 a:visited, .projectMisc h3 a, .projectMisc h3 a:visited{ color:#1c82a9; font-size:26px; margin:0px 0px 0px -1px; text-decoration:none; }
.project .subtitle, .projectMisc .subtitle{ color:#000; font-weight:bold; display:block; }
.project p, .projectMisc p{ font-size:14px; margin-top:15px; }
.project .online{ color:#347013; font-weight:bold; }
.project .offline{ color:#b40b0b; }
.project a, .project a:visited, .projectMisc a, .projectMisc a:visited{ color:#1c82a9; }
.project a:hover, .projectMisc a:hover{ color:#105a78; }

#miscellaneous{ margin-top:50px; }

.projectMisc{ text-align:right; min-height:147px; clear:both; }
.projectMisc .legend{
	width:340px;
	padding-top:14px;
	height:auto;
	min-height:133px;
}
.projectMisc .frames{
	float:left;
	width:400px;
}

.projectMisc .frames div{
	width:137px;
	height:147px;
	display:block;
	float:left;
	position:relative;
}
.projectMisc .frames .first{
	margin:0px 40px 0px 35px;
}
.projectMisc .frames div a, .projectMisc .blueVertFrame a{
	background:url(../pics/portfolioFrameVert.png) top left no-repeat;
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
}
.projectMisc .blueVertFrame a{ background:url(../pics/portfolioBlueFrameVert.png) top left no-repeat !important; }
.projectMisc .frames div img{
	display:block;
	position:absolute;
	top:20px;
	left:34px;
	z-index:1;
}
.projectMisc h3{ line-height:24px; margin-bottom:2px; }


#contactForm{ margin-top:47px; }
#contactForm input:focus, #contactForm textarea:focus{ outline:none; border:none; }

#contactForm div{ position:relative; margin-bottom:20px; }
#contactForm #name input, #contactForm #email input, #contactForm #subject input, #contactForm textarea{
	background:none;
	border:none;
	color:#FFF;
	font:13px "Lucida Grande", Geneva, sans-serif;
	position:absolute;
	top:6px;
	left:8px;
}

#contactForm #name{
	background:url(../pics/txt_name.png) top left no-repeat;
	width:239px;
	height:32px;
}
#contactForm #name input{
	width:220px;
	height:16px;
}

#contactForm #email{
	background:url(../pics/txt_email.png) top left no-repeat;
	width:284px;
	height:32px;
}
#contactForm #email input{
	width:265px;
	height:16px;
}

#contactForm #subject{
	background:url(../pics/txt_subject.png) top left no-repeat;
	width:331px;
	height:32px;
}
#contactForm #subject input{
	width:312px;
	height:16px;
}

#contactForm #message{
	background:url(../pics/txt_message.png) top left no-repeat;
	width:331px;
	height:203px;
}
#contactForm #message textarea{
	width:310px;
	height:182px;
}

#contactForm h3{
	display:block;
	margin:0px 0px 4px 0px;
	width:100%;
	background-repeat:no-repeat;
	background-position:0px 0px;
	overflow:hidden;
	text-indent:-2000px;
}

#formBTN{
	margin-left:182px;
	width:90px;
	height:26px;
	position:relative;
}

#btn_submit{
	width:150px;
	height:26px;
	padding:0px 3px 4px 0px;
	background:url(../pics/submit.png) top left no-repeat;
	border:none;
	text-align:center;
	font:14px Arial, "Lucida Grande", sans-serif;
	font-weight:bold;
	text-shadow:#c4c4c4 0px 1px 0px;
	cursor:pointer;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
}

#btn_submit:hover{
	background:url(../pics/submit.png) 0px -26px no-repeat;
	color:#fff;
	text-shadow:#000 0px 1px 0px;
}

h3#title_name{ background-image:url(../pics/form_name.png); height:15px; }
h3#title_email{ background-image:url(../pics/form_email.png); height:15px; }
h3#title_subject{ background-image:url(../pics/form_subject.png); height:19px; }
h3#title_message{ background-image:url(../pics/form_message.png); height:18px; }

#emailMessage{
	color:#333;
	font-size:26px;
	text-shadow:#c4c4c4 0px 1px 0px;
	position:absolute;
	top:110px;
	left:28px;
}

#ajaxLoader{
	background:url(../pics/loader.gif) top left no-repeat;
	width:16px;
	height:16px;
	display:block;
	position:absolute;
	top:5px;
	left:35px;
	z-index:1;
}

.error{
	background:url(../pics/exclamation.png) top left no-repeat;
	width:4px;
	height:14px;
	display:block;
	position:absolute;
	z-index:3;
	top:8px;
}

#name .error{ left:245px; }
#email .error{ left:289px; }
#subject .error, #message .error{ left:336px; }

#workSelector{
	width:264px;
	height:55px;
	display:block;
	clear:both;
	position:relative;
	left:505px;
	margin:10px 0px 25px 0px;
}

#workSelector #web_btn, #workSelector #misc_btn, #workSelector #web_on, #workSelector #misc_on{
	display:block;
	overflow:hidden;
	text-indent:-2000px;
	float:left;
	height:49px;
	cursor:pointer;
	font-size:4px;
	color:#f2f2f2;
}

#workSelector #web_on, #workSelector #web_btn, #workSelector #web_btn:visited{
	background:url(../pics/workSelector_web.png) 0px 0px no-repeat;
	width:106px;
}
#workSelector #misc_on, #workSelector #misc_btn, #workSelector #misc_btn:visited{
	background:url(../pics/workSelector_misc.png) 0px 0px no-repeat;
	width:117px;
}
#workSelector #web_btn:hover, #workSelector #misc_btn:hover, #workSelector #web_on, #workSelector #misc_on{ background-position:0px -49px; }


#workSelector span{
	background:url(../pics/workSelector_divider.png) 0px 0px no-repeat;
	width:7px;
	height:55px;
	display:block;
	float:left;
	overflow:hidden;
	text-indent:-2000px;
	margin:0px 17px;
}

#joaoJoaquim, #joaoJoaquimEasterEgg{
	background:url(../pics/jj.jpg) 0px 0px no-repeat;
	width:199px;
	height:238px;
	display:block;
	float:left;
	display:block;
	margin-right:10px;
}

#joaoJoaquimEasterEgg{
	background:url(../pics/jj.jpg) 0px -238px no-repeat;
}

#introText{
	padding-top:34px;
	width:300px;
	float:left;
	display:block;
	clear:right;
}

#splashNew{
	width:36px;
	height:36px;
	display:block;
	background:url(../pics/new.png) 0px 0px no-repeat;
	overflow:hidden;
	text-indent:-2000px;
	position:absolute;
	top:-18px;
	left:575px;
	z-index:5;
}
#splashNew:hover{ opacity:0.8; }