@charset "UTF-8";
/* CSS Document
---------------------- */



#fullsize {position:relative; width:412px; height:377px; padding:2px; border:2px solid #464242; background:#000}
#information {position:absolute; bottom:0; width:412px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.9; filter:alpha(opacity=70)}
#information h3 {padding:0px 8px 3px; font-size:14px}
#information p {line-height:16px; font-size:10px; padding:0 8px 8px}
#image {width:412px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat; display:none}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:44px; background:url(images/scroll-left.png) center center no-repeat; background-color:#000}
#slideleft:hover {background-color:#666}
#slideright {float:right; width:20px; height:44px; background:#000 url(images/scroll-right.png) center center no-repeat}
#slideright:hover {background-color:#666 }
#slidearea {float:left; position:relative; width:336px; margin-left:5px; height:44px; overflow:hidden}
#xslider {position:absolute; left:0; height:45px}
#xslider img {cursor:pointer; border:2px solid #464242; padding:0px}



* {margin:0; padding:0;} 


body {
	background:url(images/greybg.gif) repeat; 
	margin:0 auto;
	color:#fff; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
}

body a{
	text-decoration:none; 
	color:#fff; 
}

body a hover{
	text-decoration:none; 
	color:#CC9; 
}

#shadow {
background-image:url(images/shadow.png);
background-repeat: no-repeat;
margin-left:auto;
margin-right:auto;
width:1084px;
height:1500px;
}

#container {margin:0 auto; width:1024px; font: Helvetica, Arial, sans-serif;
  	font-weight: lighter; height:auto;}

#content {margin:0 auto; background-color:#FFF; width:924px; height:270px;}

#header_spacer {height:20px; position:relative;}

#topnav {
	margin:0;
	width:325px;
	float:right;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:10px;
}


#Slider_window {height:420px; color:#0C6; position:relative;}


a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}




/* Navigation
---------------------- */

#nav_base {background:url(images/nav_base.jpg) top no-repeat; height:246px; position:relative; width:545px; float:left;}


#nav {
	position:absolute;
	bottom:-2px;
	right:0px;
	width:545px;
	height:248px;
}

#nav ul {list-style:none;}
#nav li {float:left;}
#nav li a {display:block; height:246px;}
#nav li a span {display:none;}
#nav li span {display:none;}

#nav li.nav-portfolio {width:253px;}
#nav li.nav-portfolio a {background:url(images/portfolio.jpg) no-repeat; width:253px;}

#nav li.nav-about {width:254px; height:138px;}
#nav li.nav-about a {background:url(images/about.jpg) no-repeat; width:254px; height:138px;}

#nav li.nav-contact {width:254px; height:108px;}
#nav li.nav-contact a {background:url(images/contact.jpg) no-repeat; width:254px; height:108px;}

#nav li.nav-portfolio a:hover,
#nav li.nav-about a:hover,
#nav li.nav-contact a:hover{
	background:transparent;
}

#me_base {background:url(images/name.jpg) top no-repeat; width:1024px; height:178px; position:relative;}

#nav-me {
	position:absolute;
	bottom:79px;
	right:52px;
	width:87px;
	height:84px;
}

#nav-me ul {list-style:none;}
#nav-me li {float:left;}
#nav-me li a {display:block; height:144px;}
#nav-me li a span {display:none;}
#nav-me li span {display:none;}

#nav-me li.nav-about-me {width:87px; height:84px;}
#nav-me li.nav-about-me a {background:url(images/me.jpg) no-repeat; width:87px; height:84px;}

#nav-me li.nav-about-me a:hover{
	background:transparent;
}



#f7_base {background:url(images/f7digitaldesign.jpg) top no-repeat; width:1024px; height:178px; position:relative;}

#nav-f7 {
	position:absolute;
	bottom:79px;
	right:52px;
	width:87px;
	height:84px;
}

#nav-f7 ul {list-style:none;}
#nav-f7 li {float:left;}
#nav-f7 li a {display:block; height:144px;}
#nav-f7 li a span {display:none;}
#nav-f7 li span {display:none;}

#nav-f7 li.nav-about-f7 {width:87px; height:84px;}
#nav-f7 li.nav-about-f7 a {background:url(images/f7.jpg) no-repeat; width:87px; height:84px;}

#nav-f7 li.nav-about-f7 a:hover{
	background:transparent;
}

#port_base {background:url(images/port_header.jpg) top no-repeat; width:1024px; height:164px; position:relative;}
#f7port_base {background:url(images/f7port_header.jpg) top no-repeat; width:1024px; height:164px; position:relative;}
#about_base {background:url(images/about_header.jpg) top no-repeat; width:1024px; height:164px; position:relative;}
#contact_base {background:url(images/contact_header.jpg) top no-repeat; width:1024px; height:164px; position:relative;}


#port-me {
	position:absolute;
	bottom:28px;
	right:19px;
	width:87px;
	height:84px;
}

#port-me ul {list-style:none;}
#port-me li {float:left;}
#port-me li a {display:block; height:144px;}
#port-me li a span {display:none;}
#port-me li span {display:none;}

#port-me li.nav-about-me {width:87px; height:84px;}
#port-me li.nav-about-me a {background:url(images/port_me.jpg) no-repeat; width:87px; height:84px;}
#port-me li.nav-about-me a:hover{
	background:transparent;
}


#f7port-me {
	position:absolute;
	bottom:28px;
	right:19px;
	width:87px;
	height:84px;
}

#f7port-me ul {list-style:none;}
#f7port-me li {float:left;}
#f7port-me li a {display:block; height:144px;}
#f7port-me li a span {display:none;}
#f7port-me li span {display:none;}

#f7port-me li.nav-about-me {width:87px; height:84px;}
#f7port-me li.nav-about-me a {background:url(images/f7port.jpg) no-repeat; width:87px; height:84px;}
#f7port-me li.nav-about-me a:hover{
	background:transparent;
}


#recentwork {
	background:url(images/recentwork_base.jpg) top no-repeat;
	margin: 0px;
	float: left;
	width: 378px;
	height: 248px;
	padding-top: 0px;
	padding-left: 0px;
}


.recent {
	position:absolute;
	bottom:353px;
	right:129px;
	width:378px;
	height:246px;
}



#recent ul {list-style:none;}
#recent li {float:left;}
#recent li a {display:block; height:246px;}
#recent li a span {display:none;}
#recent li span {display:none;}


#recent li.recent-a {width:171px; height:246px;}
#recent li.recent-a a {background:url(images/recent_a.jpg) no-repeat; width:171px; height:246px;}

#nrecent li.recent-b {width:207px; height:246px;}
#recent li.recent-b a {background:url(images/recent_b.jpg) no-repeat; width:207px; height:246px;}


#recent li.recent-a a:hover,
#recent li.recent-b a:hover{
	background:transparent;
}



#port_nav_base {background:url(images/port_nav_base.jpg) top no-repeat; height:144px; position:relative; width:1024px; float:left;}


#port_nav {
	position:absolute;
	bottom:0px;
	right:0px;
	width:1024px;
	height:144px;
}

#port_nav ul {list-style:none;}
#port_nav li {float:left;}
#port_nav li a {display:block; height:144px;}
#port_nav li a span {display:none;}
#port_nav li span {display:none;}

#port_nav li.port-nav-advertising {width:154px;}
#port_nav li.port-nav-advertising a {background:url(images/advertising.jpg) no-repeat; width:154px;}
#port_nav li.port-nav-advertising-down a {width:154px;}

#port_nav li.port-nav-collateral {width:142px; height:144px;}
#port_nav li.port-nav-collateral a {background:url(images/collateral.jpg) no-repeat; width:142px; height:144px;}
#port_nav li.port-nav-collateral-down a {width:142px;}

#port_nav li.port-nav-websites {width:146px; height:144px;}
#port_nav li.port-nav-websites a {background:url(images/websites.jpg) no-repeat; width:146px; height:144px;}
#port_nav li.port-nav-websites-down a {width:146px;}

#port_nav li.port-nav-identity {width:142px;}
#port_nav li.port-nav-identity a {background:url(images/identity.jpg) no-repeat; width:142px;}
#port_nav li.port-nav-identity-down a {width:142px;}

#port_nav li.port-nav-tradeshow {width:144px; height:144px;}
#port_nav li.port-nav-tradeshow a {background:url(images/tradeshow.jpg) no-repeat; width:144px; height:144px;}
#port_nav li.port-nav-tradeshow-down a {width:144px;}

#port_nav li.port-nav-infographics {width:144px; height:144px;}
#port_nav li.port-nav-infographics a {background:url(images/infographics.jpg) no-repeat; width:144px; height:144px;}
#port_nav li.port-nav-infographics-down a {width:144px;}

#port_nav li.port-nav-misc {width:152px; height:144px;}
#port_nav li.port-nav-misc a {background:url(images/misc.jpg) no-repeat; width:152px; height:144px;}
#port_nav li.port-nav-misc-down a {width:152px;}

#port_nav li.port-nav-advertising a:hover,
#port_nav li.port-nav-collateral a:hover,
#port_nav li.port-nav-websites a:hover,
#port_nav li.port-nav-identity a:hover,
#port_nav li.port-nav-tradeshow a:hover,
#port_nav li.port-nav-infographics a:hover,
#port_nav li.port-nav-misc a:hover{
	background:transparent;
}


#port_slider_window {
	position:relative;
	padding-left:19px;
	width:1024px;
	height:334px;
}

#port_copy {
	position:relative;
	padding:19px;
	width:975px;
	height:100px;
	
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px; color:#000;
}

#about_copy {
	position:relative;
	padding-top:27px;
	padding-left:50px;
	width:495px;
	height:659px;
	float:left;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:14px; color:#000;
	line-height:30px;
}

#contact_copy {
	position:relative;
	padding-top:27px;
	padding-left:50px;
	width:425px;
	height:659px;
	float:left;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:14px; color:#000;
	line-height:30px;
}



/* Footer 
---------------------- */


#footerinfo {
	margin:0 auto; 
	width:924px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}

#footerinfo_normal {
	margin:0 auto; 
	width:986px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}

#footernav {
	margin:0;
	width:500px;
	float:left;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}

#footeremail {
	margin:0 auto;
	width:300px;
	float:right;
	text-align:right;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}

#footernav a{
	margin:0;
	width:500px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}

#footeremail a{
	margin:0 auto;
	width:300px;
	text-align:right;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;
}


#shadowbox {
	background:url(images/shadowbox.png) no-repeat;
	position:absolute;
	bottom:-8px;
	right:39px;
	width:985px;
	height:348px;
}




#shadowbox_left {
	background:url(images/shadowbox_left.png) no-repeat;
	position:absolute;
	bottom:-1px;
	right:1018px;
	width:6px;
	height:335px;
	z-index:1;
}

#shadowbox_right {
	background:url(images/shadowbox_right.png) no-repeat;
	position:absolute;
	bottom:-1px;
	right:39px;
	width:6px;
	height:335px;
	z-index:2;
}

#makeMeScrollable
		{
			width:985px;
			height: 330px;
			position: relative;
		}
	
		#makeMeScrollable div.scrollableArea *
		{
			position: relative;
			display: block;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}



#starbucks {
	background:url(images/starbucks.png) no-repeat;
	position:absolute;
	top:0;
	width:834px;
	height:592px;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
}



form div + div {
    margin-top: 1em;
}


input, textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width: 300px;
	height:23px;
	
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}


input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}


textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 10em;

    /* To allow users to resize any textarea vertically
       It does not work on every browsers */
    resize: auto;
}