body { color:#555; font-size: 16px; line-height: 22px; font-family:"proxima-nova", helvetica, arial, sans-serif; font-weight:300; background:url("/images/bg.gif") 0 0 repeat; }
h2 { margin-top:10px; }
a { text-decoration:none; color:#4B757F/*#AAD1E2*/; }
a:hover { color:#77A5AF; text-decoration:underline; }
strong { font-weight:700; }
::selection { background: #8FB8C6; }
::-moz-selection { background: #8FB8C6; }

div.wrapper { width:960px; margin:auto; overflow:hidden; position:relative; }
div.content { min-height:300px; padding:20px 0; }

/********* header *********/
div.header { background:url("/images/header-bg.gif") 0 bottom repeat-x; overflow:hidden; position:relative; }
div.header a.logo { display:block; margin-top:10px; line-height:0; float:left; }
ul.top-nav { position:absolute; right:0; bottom:0; }
ul.top-nav li { display:block; height:31px; width:105px; float:left; margin-left:20px; }
ul.top-nav li a { text-decoration:none; display:block; height:0; width:105px; padding-top:31px; overflow:hidden; }
ul.top-nav li#nav-portfolio a { background:url("/images/top-nav.png") 0 0 no-repeat; }
ul.top-nav li#nav-portfolio a:hover, ul.top-nav li#nav-portfolio a.active { background-position:0 -31px; }
ul.top-nav li#nav-resume a { background:url("/images/top-nav.png") -105px 0 no-repeat; }
ul.top-nav li#nav-resume a:hover, ul.top-nav li#nav-resume a.active { background-position:-105px -31px; }
ul.top-nav li#nav-contact a { background:url("/images/top-nav.png") -210px 0 no-repeat; }
ul.top-nav li#nav-contact a:hover, ul.top-nav li#nav-contact a.active { background-position:-210px -31px; }

/****** home page ******/
div.home-container { overflow:hidden; width:2880px; position:relative; left:0; }
div.subpage { width:960px; height:340px; float:left; position:relative; }
div.home-container div.home { background:url("/images/intro.png") 0px 30px no-repeat; padding-top:20px; }
div.home-container div.home p { padding:0 100px 15px 320px; }
	
	/****** resume section ********/
	div.home-container div.resume { }
	table.resume { float:left; margin:0 110px; }
	table.resume tr th { height:61px; vertical-align:bottom; width:251px; padding-bottom:5px; }
	table.resume tr td { vertical-align:middle; line-height:14px; padding:2px 0; }
	table.resume tr td img { margin-left:20px; height:22px; }
	div.download { float:left; margin:40px 0 0 130px; }
	div.download a { display:block; width:132px; height:0; overflow:hidden; padding-top:55px; background:url("/images/download-resume.png") 0 0 no-repeat; }
	div.download a:hover { background-position: 0 -55px; }
	
	/******* contact section **********/
	div.home-container div.contact {  }
	div.contact-form { width:340px; margin:22px 0 0 105px; float:left; position:relative; }
	div.contact-form input, div.contact-form textarea { padding:7px; margin-bottom:8px; color:#999; }
	div.contact-form input.focus, div.contact-form textarea.focus { border:2px solid #A9C8A6; color:#333; }
	div.contact-form input.first, div.contact-form input.last { width:140px; }
	div.contact-form input.last { margin-left:10px; }
	div.contact-form input.phone, div.contact-form input.email, div.contact-form textarea.message,  div.contact-form input.captcha { width:310px; font-family:"proxima-nova", helvetica, arial, sans-serif; font-size:13px; }
	button::-moz-focus-inner { border: 0; }
	input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    { border : 0px; } 
	/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus { outline : none; }
	textarea { overflow:auto; }
	
	div.contact-form .submit { width:80px; height:30px; border: none; background: url('/images/submit.png') no-repeat 0 0; outline:none; cursor:pointer; }
	div.contact-form .submit:hover { background-position:0 -30px; }
	
	div.contact-right { width:300px; height:400px; padding: 140px 0px 0 185px; font-size:25px; float:left; background:url("/images/contact-bg2.png") 0 0 no-repeat; }
	div.contact-right div.email { margin-top:85px; }
	div.contact-right div a { color:#555; }
	div.contact-right div a:hover { color:#999; }
	
	div.success-msg, div.fail-msg { position:absolute; top:-21px; padding:5px; font-size:12px; line-height:16px; width:314px; text-align:center; }
	div.success-msg { background:#CEF2CE; border:1px solid #48C13E; }
	div.fail-msg { background:#FFDCDC; border:1px solid #DD7272;}

/******* nav arrows *********/
div.nav-arrow-next { width:100px; height:100%; position:absolute; top:0; right:0; cursor:pointer; }
div.nav-arrow-prev { width:100px; height:100%; position:absolute; top:0; left:0; cursor:pointer; }
div.arrow-to-contact div { right:0; top:40%; width: 96px; height:0; padding-top:72px; background:url("/images/get-in-touch2.png") 0 0 no-repeat; position:absolute; }
div.arrow-to-home div { left:0; top:40%; width: 96px; height:0; padding-top:66px; background:url("/images/about-me.png") 0 0 no-repeat; position:absolute; }
div.home div.arrow-to-resume div { top:40%; right:0; width: 65px; height:0; padding-top:90px; background:url("/images/what-i-do.png") 0 0 no-repeat; position:absolute; }
div.contact div.arrow-to-resume div { top:40%; left:0; width: 65px; height:0; padding-top:90px; background:url("/images/what-i-do2.png") 0 0 no-repeat; position:absolute; }

/****** portfolio *********/
ul.portfolio { overflow:hidden; width:894px; margin:auto; }
ul.portfolio li { display:block; float:left; margin: 0 60px 30px 0; }
ul.portfolio li:nth-child(3n+3) { margin-right:0; }
ul.portfolio li a.thumb { display:block; height:250px; width:250px; overflow:hidden; padding:3px; background:#fff; border:1px solid #e2e2e2; position:relative; }
ul.portfolio li a div { width:250px; height:250px; overflow:hidden; }
ul.portfolio li a img { position:relative; }
ul.portfolio li h2 a { color:#3A3A3A; font-size:24px; }
ul.portfolio li h2 a:hover { text-decoration:none; color:#5d5d5d; }
ul.portfolio li p { font-style:italic; color:#B7B7B7; }

/******* portfolio details **********/
div.portfolio-description { width: 39%; float:left; }
div.portfolio-description h1 { color:#AAD1E2; font-size:35px; line-height:30px; font-weight:400; margin-top:10px; }
div.portfolio-description p { padding-bottom:15px; }
div.portfolio-description p.role { font-style:italic; color:#999; padding-bottom:10px; }
div.portfolio-description a.link { color:#000; font-weight:700; display:block; height:0; width:80px; padding-top:30px; background:url("/images/view-site.png") 0 0 no-repeat; overflow:hidden; margin-top:15px; }
div.portfolio-description a.link:hover { color:#555; background-position:0 -30px; }
div.portfolio-main-image { width:60%; float:right; margin-top:45px; text-align:center; position:relative; }
div.portfolio-main-image > img { max-width:576px; z-index:2; position:relative; }
/*div.portfolio-main-image a.preview { position:absolute; top:20px; left:91px; z-index:2; }*/
div.portfolio-main-image div.previews { position:absolute; top:20px; left:90px; z-index:2; }
div.portfolio-main-image a.arrows { position:absolute; top:120px; z-index:5; opacity:0.7; }
div.portfolio-main-image a.arrows:hover { opacity:1.0; }
div.portfolio-main-image a.arrows.left { left:12px; }
div.portfolio-main-image a.arrows.right { right:12px; }
div.thumbs { clear:both; padding-top:15px; }
div.thumbs h2 { font-size:35px; font-weight:300; color:#999; padding-bottom:15px; }
div.horz-scroll { height:auto; max-height:120px; }
div.thumbs ul { display:block; height:120px; }
div.thumbs ul li {display:block; float:left; margin-right:10px; }
div.thumbs ul li a { display: block; padding:3px; border:1px solid #E2E2E2; }
div.thumbs ul li a div { height:80px; width:80px; overflow:hidden; position:relative; }
div.thumbs ul li a img { width:80px; position:relative; }
div.thumbs ul li a.active { border:1px solid #999 !important; }
div.thumbs ul li a.active img { top:-80px !important; }


/***** miscellaneous details ********/
div.misc-main { margin-top:0; }
ul.controls { padding-bottom:5px; font-size:14px; overflow:hidden; }
ul.controls li { display:inline; }
ul.controls li a.prev {float:left; margin-left:10px; }
ul.controls li a.next { float:right; margin-right:10px; }
div.pagination { font-size:14px; }

/******* footer ********/
div.footer { clear:both; text-align:center; padding-top:10px; border-top:2px dotted #E2E2E2; }
div.footer ul { margin:auto; text-align:center; }
div.footer ul li { display:inline; margin:0 20px; }
div.footer p { font-size:10px; }