@charset "UTF-8";
/* CSS for Nelson's website */

body {
	background-image:url(../i/body-tile.png);
	background-repeat:repeat;
	font-family: "Trebuchet MS", Lucida Grande, arial, sans-serif;
	color:#fff;
	-moz-osx-font-smoothing: grayscale;
	}

#wrapper {
	position:relative;
	width:960px;
	height:100%;
	top:20px;
	margin-left:auto;
	margin-right:auto;
	text_align:left;
	font-size:20px; 
	}

#top-banner, #bttm-banner {
	width:960px;
	}
	
#logo-area {
	width:960px;
	height:111px;
	background: url(../i/banner-top.png) no-repeat;
	}
	
#mylogo {
	float:right;
	width:314px;
	height:63px;
	background: url(../i/nc-logo.png) no-repeat;
	margin:28px 45px 0 0;
	}
	
#mylogo a.logoname {
	float:left;
	Display:block;
	width:172px;
	height:26px;
	margin-top:20px;
	text-indent:-99999em;
	}

#mylogo a.tagline {
	float:right;
	Display:block;
	width:108px;
	height:26px;
	margin-top:20px;
	text-indent:-99999em;
	}
	
.groove {
	width:960px;
	height:8px;
	}
.top { 
	background: url(../i/groove-top.png) no-repeat;
	overflow:hidden;
	}
	
.bottom { 
	background:url(../i/groove-bottom.png) no-repeat;
	overflow:hidden;
	}
	
#content-container {
	position:relative;
	width:960px;
	height:411px;
	background:url(../i/gall-bg.png) repeat-y;
	background-color:#a3a095;
	overflow: hidden;
	}
	
/* ********* Home page ***********------------------------------------------------------------ */

#slideshow, #about-bg {
	position:relative;
	display:block;
	left:10px;
	width:940px;
	height:411px;
	overflow: hidden;
	}
	
.pics { 
	height: 411px; 
	width: 940px; 
	padding:0; 
	margin:0; 
	overflow: hidden; 
	}
.pics img 
	{ 
	height: 411px; 
	width: 940px; 
	}

#grad-mask {
	position:absolute;
	top:0px;
	left:10px;
	width:940px;
	height:411px;
	background: url(../i/img-mask2.png) no-repeat;
	z-index:500;
	overflow:hidden;
	}
	
#red-band {
	position:relative;
	width:190px;
	height:411px;
	left:590px;
	background:url(../i/red-band.png) no-repeat;
	z-index:500;
	overflow:hidden;
	}
	
/* ********* About Page *********---------------------------------------------------------- */	

#about-bg
	{
	background: url(../i/about/content-bg.png) no-repeat;
	}

#mypict
	{
	float: left;
	width: 281px;
	height: 211px;
	}

#mypict img
	{
	margin: 30px 0 0 105px;
	padding: 6px;
	background-color: #b71c08;
	}
	
.panes
	{
	float: left;
	width: 550px;
	height: 211px;
	overflow: hidden;
	}

.panes div
	{
	display: none;
	width: inherit;
	height: inherit;
	}
	
.panes h4
	{
	font-size: 18px;
	text-align: left;
	font-weight: 0;
	padding: 12px 0 6px 0;
	opacity: 0.7;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
		.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
		-moz-opacity: 0.7;
		-khtml-opacity: 0.7;
	}
	
.panes p
	{
	font-size: 12px;
	text-align: left;
	line-height: 20px;
	opacity: 0.7;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
		.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
		-moz-opacity: 0.7;
		-khtml-opacity: 0.7;
	}
	
	
.panes .pSkills
	{
	padding-top: 50px;
	}
	
	/* initially all panes are hidden */ 
.panes .pane {
	display: none;		
}

/* ********* Works Section *********---------------------------------------------------------------- */

#projectlist-holder
{
float: left;
width: 230px;
margin-left: 10px;
background-color: #ededec;
}

#project-menu
{
float: left;
width: 206px;
}

#project-menu h3
{
float: right;
width: 168px;
margin-top: 62px;
padding-bottom: 10px;
text-indent:-99999em;
}

body#work #project-menu h3
{
background:url(../i/works/printHead.png) top left no-repeat;
}
body#web #project-menu h3
{
background:url(../i/works/webHead.png) top left no-repeat;
}
body#branding #project-menu h3
{
background:url(../i/works/brandingHead.png) top left no-repeat;
}

#project-menu ul
{
float: right;
width: 168px;
}

#project-menu ul li
{
line-height: 17px;
padding: 5px 0;
}

#project-menu a
{
display: block;
color: #6c695b;
font-size: 12px;
text-transform: uppercase;
}

#project-menu a:hover
{
font-style: oblique;
color: #f22308;
}

/* *** page menus persistence *** */
body.collaterals #collateral .printMenu, 
body.packaging #packaging .printMenu,
body.publications #pubs .printMenu,
body.ads #dirMail .printMenu,
body.inserts #sellSheets .printMenu,
body.logos #logoID .printMenu,
body.websites #sites .webMenu,
body.miniSites #mini-sites .webMenu,
body.landinPages #landing-pages .webMenu,
body.htmlEmails #emails .webMenu,
body.otros #others .webMenu,
body.platinum #plat .brandMenu,
body.seminar #psych .brandMenu,
body.geminis #gem .brandMenu
{
font-style: oblique;
color: #f22308;
}

#controls-bg
{
float: left;
width: 24px;
height: 363px;
background:url(../i/works/bttns-bg.png) no-repeat;
}

#tab-subnav
{
float: left;
width: 230px;
height: 48px;
background:url(../i/works/bottom-tab.png) no-repeat;
}

#tab-subnav h4
{
height: 20px;
margin-top: 24px;
padding-left: 24px;
color: #6c695b;
font-size: 12px;
text-transform: uppercase;
}

#tab-subnav a
{
color: #f22308;
}

#tab-subnav a:hover
{
color: #6c695b;
}	

#projects-holder /* images side start here  */
{
float: left;
width: 710px;
height: 411px;
background-color: #ededec;
}

#project-window
{
position: relative;
width: 710px;
height: 389px;
margin-top: 11px;
}

#thin-redband
{
position: absolute;
width: 18px;
height: 389px;
top: 11px;
background:url(../i/works/skinny-redband.png) no-repeat;
}

/* ********* Contact form *********---------------------------------------------------------- */
/*
#formHolder
{
position: absolute;
width: 240px;
top: 36px;
left: -99999em;
z-index: 1000;
}

#myform
{
width: 240px;
background: url(../i/tooltip/tooltip_pattern.png) repeat;
}


#myform table
{
position: relative;
top: 16px;
left: 14px;
margin-bottom: 5px;
}

#myform table th
{
padding: 20px 0 5px 0;
}

#myform table td
{
font-weight: normal;
font-size: 12px;
vertical-align: top;
padding-bottom: 5px;
}

input, select.std, select.std option, textarea
{
outline: none;
-moz-outline-width: 0;
}

input.std
{
position: relative;
display: block;
border: 3px solid #d31f07;
padding: 2px;
background: #fbbab5;
width: 202px;
font-size: 12px;
line-height: 20px;
height: 20px;
vertical-align: baseline;
color: #b41804;
}

textarea.std
{
position: relative;
display: block;
font-family: "Trebuchet MS", Lucida Grande, arial, sans-serif;
border: 3px solid #d31f07;
padding: 2px;
background: #fbbab5;
width: 202px;
font-size: 12px;
line-height: 20px;
height: 126px;
vertical-align: baseline;
color: #b41804;
}

input.std:focus, textarea.std:focus 
{
background: #fcdad5;
color: #454141;
}

#submit {
float: right;
font-size: 0;
width: 100px;
height: 28px;
border: 1px solid #cc1a03;
margin-bottom: 25px;
cursor:pointer;
background: url(../i/submitBttn.png) 0 0 no-repeat;
}

#submit:hover
{
background-position: 0 -26px;
}

#myform #errors
{
width: 202px;
padding: 0 0 10px 0;
}

#errors span, #errors ul li, #eResult
{
color: #3A0603;
width: inherit;
display: block;
position: relative;
line-height: 16px;
padding: 2px 0 0 7px;
}

*/

/* ********* footer stuff ***********------------------------------------------------------ */

#footer {
	position:relative;
	width:960px;
	height:111px;
	background:url(../i/banner-bttm2.png) no-repeat;
	z-index:900;
	}
	
#footer a.sbook
{
float:left;
display:block;
width: 400px;
height:101px;
margin-left:10px;
background:url(../i/skbook-bttn.png) no-repeat;
overflow:hidden;
}

#footer a.sbook:hover
{
background:url(../i/skbook-bttn.png) 0 -101px;
}

.footer-bttns
{
width: 533px;
height:101px;
display:inline-block;
}

.footer-bttns .res-bttn
{
float:left;
display:block;
width: 191px;
height:101px;
background:url(../i/resume-bttn.png) no-repeat;
overflow:hidden;
}

.footer-bttns .res-bttn:hover
{
background:url(../i/resume-bttn.png) 0 -101px;
}

.footer-bttns .social-bttn
{
float:left;
display:block;
width: 190px;
height:101px;
background:url(../i/linkedin-bttn.png)-2px 0 no-repeat;
overflow:hidden;
}

.footer-bttns .social-bttn:hover
{
width: 192px;
background:url(../i/linkedin-bttn.png) 0 -101px;
margin-left:-2px
}

.footer-bttns .cellicon
{
float:left;
display:block;
width: 152px;
height:101px;
}

.cellicon div /* cell phone styling  */
{
position:relative;
display:block;
width:40px;
height:42px;
top:34px;
left:68px;
}

.cellicon a.cellicon
{
display:block;
width:40px;
height:42px;
cursor:pointer !important;
text-indent:-99999em;
}

.cellicon div:hover a.cellnumber
{
right:24px;
}

.cellicon a.cellnumber
{
position:absolute;
top:-22px;
right:-99999em;
width:112px;
height:37px;
color: #E8E8E8;
font-size: 12px;
font-weight:bold;
text-align:center;
padding-top:6px;
background:url(../i/cellbubble.png) no-repeat;
}

.cellicon .cellnumber:hover
{
color: #fff;
}


/* ********* Sketchbook Shadowbox gallery ***********----------------------------------------------------- */
.gall
{
float:left;
width:400px;
border-bottom:1px solid #c8c8c8;
margin:0 0px 30px 30px;
padding-bottom:20px;
display:none;
}
.gall ul
{
margin:10px 0 20px 0;
padding:6px 0px 8px 0px;
}
.gall li
{
background-color:#d3d4d5;
margin-bottom:6px;
padding:12px 12px 8px;
}
.gall img
{
border:2px solid #e0e4e5;
}

/* ********* Work Projects gallery ***********-------------------------------------------------------------- */  

#scroller-wrapper /* *** scroller starts  *** */
{
width: 710px;
height: 389px;
list-style: none;
overflow: hidden;
}

#scroller-wrapper li
{
padding: 0;
margin: 0;
zoom:1;
}

.bx-wrapper /* div boxsilder jq generated  */
{
margin: 0px;
}

/* next & prev buttons - boxslider jq generated */
.bx-prev
{
position:absolute;
top: 169px;
left: -14px;
width: 8px;
height: 21px;
text-indent: -99999em;
background: url(../i/works/forward-buttns.png) 0 0 no-repeat;
z-index: 1000;
}

.bx-next
{
position:absolute;
top: 204px;
left: -14px;
width: 8px;
height: 21px;
text-indent: -99999em;
background: url(../i/works/forward-buttns.png) 0 -36px no-repeat;
z-index: 1000;
}

.bx-prev:hover
{
background-position: -8px 0;
}

.bx-next:hover
{
background-position: -8px -36px;
}

.main  /* *** scroller starts  *** */ 
{
position:relative;
overflow:hidden;
height: 450px;
}

.pages 
{
position:absolute;
height:20000em;
}
	
.page 
{
width: 710px;
height: 389px;
}

.scrollable 
{
position:relative;
overflow:hidden;
width: 710px;
height: 389px;
}

.scrollable .items 
{
width: 20000em;
position: absolute;
clear: both;
}

.item 
{
float: left;
display: inline-block;
width: 710px;
height: 389px;
}

/* position and dimensions of the navigator or image rotators */
.navi 
{
position: absolute;
top: 360px;
right: 55px;
width: 200px;
height: 10px;
z-index: 1000;
}

/* items inside navigator */
.navi a 
{
width: 10px;
height: 10px;
float: right;
margin: 5px;
background: url(../i/works/project-nav.png) no-repeat;
display: block;
font-size: 1px;
cursor: pointer;
}

/* mouseover state */
.navi a:hover
{
background-position: 0 -10px;      
}

/* active state (current page state) */
.navi a.active 
{
background-position: 0 -10px;     
}

.project-info
{
position: absolute;
top: 362px;
right: 24px;
width: 22px;
height: 16px;
float: right;
background: url(../i/works/project-xinfo.png) no-repeat;
display: block;
font-size: 1px;
cursor: pointer;
text-indent: -99999em;
z-index:1000;
}

/* tooltip stuff here */
.tip 
{
width: 113px;
padding-top: 9px;
overflow: hidden;
display: none;
position: absolute;
z-index: 500;
background: transparent url(../i/works/tipTop.png) no-repeat;
}
	
.tipMid 
{
background: transparent url(../i/works/tipMid.png) repeat-y; 
padding: 8px 10px 5px 15px;
font-size:10px;

}
.tipBtm 
{
background: transparent url(../i/works/tipBttm.png) no-repeat bottom; 
height: 18px;
}