body
{
	background-color: white;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

a
{
	color: #3c787e;
	text-decoration: underline;
}
a:hover { }
a:focus { outline: 1px dotted; }


/* Containers */
#container
{
	background-image: url('/img/bg.png');
	background-repeat: repeat-y;
	background-position: top center;
	background-color: #e7f2f4;
}
#container-outer
{
	background-image: url('/img/bg-sides.png');
	background-repeat: repeat-x;
}
#container-inner
{
	background-image: url('/img/bg-main.jpg');
	background-repeat: no-repeat;
	background-position: top center;
}


/* Header */
#header
{
	width: 772px;
	height: 83px;
	margin: 0 auto;
	position: relative;
}

#header #logo
{
	position: absolute;
	top: 14px;
	left: 0;
	padding: 5px;
	
	text-indent: -5000px;
	background-image: url('/img/logo-fg.gif');
	background-repeat: no-repeat;
	width: 152px;
	height: 52px;
}
#header #logo:focus { outline: 0; }

#header #topnav
{
	list-style-type: none;
	position: absolute;
	right: 0;
}
#header #topnav li
{
	text-indent:-9999px;
	display: block;
	width: 81px;
	
	position: absolute;
	top: 30px;
	right: 0;
}
#header #topnav li a
{
	background-image: url('/img/topnav-sprites.gif');
	background-repeat: no-repeat;
	display: block;
	height: 24px;
}
#header #topnav li a:focus { outline: 0; }
#header #topnav li#topnav-portfolio a { background-position: -81px 0; }
#header #topnav li#topnav-portfolio a.active { background-position: -81px -24px; }
#header #topnav li#topnav-portfolio { right: 187px; }
#header #topnav li#topnav-services a { background-position: 0 0; }
#header #topnav li#topnav-services a.active { background-position: 0 -24px; }
#header #topnav li#topnav-services { right: 91px; }
#header #topnav li#topnav-contact a { background-position: -162px 0; }
#header #topnav li#topnav-contact a.active { background-position: -162px -24px; }
#header #topnav li#topnav-contact { right: 1px; }

/* top */
#top
{
    width: 762px;
    margin: 0 auto;
}

/* contact box */
#contact-box
{
    background-image: url('/img/top-bg.png');
    background-position: 0 -93px;
    background-repeat: no-repeat;
    background-color: #145b66;
    
    position: absolute;
    z-index: 1;
    width: 762px;
    height: 93px;
}
#contact-box .contact-icon
{
    float: left;
    background-image: url('/img/icon-contact.gif');
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 130px;
}
#contact-box .contact-text
{
    color: #c5e5ea;
    font-size: 14px;
    line-height: 1.2;
    padding: 0.8em;
}
#contact-box .contact-phone
{
    float: right;
    background-image: url('/img/phone.gif');
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 200px;
    margin-right: 20px;
}
#contact-box .button-close
{
    display: block;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    padding: 5px;
}
#contact-box .button-close img { height: 13px; width: 13px; }

/* mainnav */
#mainnav
{
	list-style-type: none;
	
	background-image: url('/img/top-bg.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: white;
	
	width: 762px;
	height: 92px;
	position: relative;
}
#mainnav li
{
	text-indent:-9999px;
	display: block;
	width: 85px;
	
	position: absolute;
	top: 7px;
}
#mainnav li a
{
	background-image: url('/img/mainnav-sprites.gif');
	background-repeat: no-repeat;
	display: block;
	height: 75px;
}
#mainnav li a:focus { outline: 0; }
#mainnav li#mainnav-services-architecture a { background-position: 0 0; }
#mainnav li#mainnav-services-architecture a.active,
#mainnav li#mainnav-services-architecture a:hover { background-position: 0 -75px; }
#mainnav li#mainnav-services-architecture { left: 67px; }
#mainnav li#mainnav-services-design a { background-position: -85px 0; }
#mainnav li#mainnav-services-design a.active,
#mainnav li#mainnav-services-design a:hover { background-position: -85px -75px; }
#mainnav li#mainnav-services-design { left: 241px; }
#mainnav li#mainnav-services-technology a { background-position: -170px 0; }
#mainnav li#mainnav-services-technology a.active,
#mainnav li#mainnav-services-technology a:hover { background-position: -170px -75px; }
#mainnav li#mainnav-services-technology { left: 420px; }
#mainnav li#mainnav-services-marketing a { background-position: -255px 0; }
#mainnav li#mainnav-services-marketing a.active,
#mainnav li#mainnav-services-marketing a:hover { background-position: -255px -75px; }
#mainnav li#mainnav-services-marketing { left: 601px; }

#mainnav li#mainnav-portfolio-websites a { background-position: -340px 0; }
#mainnav li#mainnav-portfolio-websites a.active,
#mainnav li#mainnav-portfolio-websites a:hover { background-position: -340px -75px; }
#mainnav li#mainnav-portfolio-websites { left: 164px; }
#mainnav li#mainnav-portfolio-brand a { background-position: -425px 0; }
#mainnav li#mainnav-portfolio-brand a.active,
#mainnav li#mainnav-portfolio-brand a:hover { background-position: -425px -75px; }
#mainnav li#mainnav-portfolio-brand { left: 338px; }
#mainnav li#mainnav-portfolio-illustration a { background-position: -510px 0; }
#mainnav li#mainnav-portfolio-illustration a.active,
#mainnav li#mainnav-portfolio-illustration a:hover { background-position: -510px -75px; }
#mainnav li#mainnav-portfolio-illustration { left: 517px; }


/* Stage */
#stage
{
	width: 772px;
	
	background-image: url('/img/stage-bg.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #ABDCDF;
	
	margin: 0 auto;		
	position: relative;
	z-index: 10;
}

#stage #stage-header { height: 40px; padding-top: 19px; }
#stage .stage-title
{
	color: #3c4a4e;
	font-family: arial, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	text-transform: uppercase;
	text-align: center;
	
	float: left;
	width: 194px;
}

#stage #stagenav-container
{
    position: relative;
    width: 536px;
    overflow: hidden;
    margin-left: 215px;
    padding-bottom: 2px;
}

#stage #stagenav
{
	color: #3C4A4E;
	font-size: 11px;
	font-family: arial, sans-serif;
	text-transform: uppercase;
	list-style-type: none;
	
	width: 20000px;
}
#stage #stagenav li
{
	display: block;
	float: left;
	margin-right: 10px;
}
#stage #stagenav li.last { margin: 0; }
#stage #stagenav li a
{
	color: #3c787e;
	text-decoration: none;
	padding-right: 10px;
	border-right: 1px solid #8eadb6;
}
#stage #stagenav li.last a { padding: 0; border: 0; }
#stage #stagenav li.active a { color: #3c4a4e; text-decoration: underline; }


/* Content */
#content-container
{
	background-image: url('/img/stage-bg-sides.png');
	background-repeat: repeat-y;
	background-color: #ABDCDF;
	
	padding-left: 9px;
	padding-right: 9px;
}
#content-footer
{
	background-image: url('/img/stage-bg.png');
	background-repeat: no-repeat;
	background-position: 0 -58px;
	background-color: #ABDCDF;
	
	font-size: 0;
	height: 10px;
}

#content
{
	background-color: white;
	border: 1px solid #9dcccf;
	border-bottom: 1px solid #c2ecee;
	line-height: 1.3;
	font-size: 15px;
	color: #5A6061;
}
#content .content-sidebar { float: left; }
#content .content-main { padding: 28px; }
#content .content-double { margin-left: 220px; }
#content .content-single {  }
#content .content-bottombar
{
    background-image: url('/img/stage-bg.png');
    background-repeat: no-repeat;
    background-position: 0 -68px;
    height: 65px;
}

.content-main p { margin-bottom: 1em; }
.content-main p.double { margin-bottom: 2em; }

.content-main h1
{
	color: #385154;
	font-size: 22px;
	font-weight: bolder;
	letter-spacing: 1px;
}

.content-bottombar .buttons
{
    float: right;
    margin-top: 2px;
}
.content-bottombar .buttons a.button:focus { outline: 0; }
.content-bottombar .buttons .button
{
    background-image: url('/img/bottombar-button-sprites.png');
    background-repeat: no-repeat;
    width: 71px;
    height: 64px;
    float: left;
    display: block; 
    text-indent: -5000px;
}
.content-bottombar .buttons .button-prev { background-position: 0 -64px; }
.content-bottombar .buttons .button-next { background-position: -71px -64px; } /* on: -63px; */
.content-bottombar .buttons .button-prev-inactive { background-position: 0 0; }
.content-bottombar .buttons .button-next-inactive { background-position: -71px 0; } /* on: -63px; */
.content-bottombar .buttons .inactive-button { cursor: default; }

.content-bottombar .info { float: left; }
.content-bottombar .info, .client .info { font-size: 12px; padding: 18px; }
.content-bottombar .info .label, .client .info .label { color: #174d58; font-weight: bolder; }
.content-bottombar .info p, .client .info p { margin-bottom: .3em; }

.browserui
{
    background-image: url('/img/browser-bg.png');
    background-repeat: no-repeat;
    width: 696px;
    padding: 31px 6px 0 6px;
}

/* Footer */
#footer-container
{
	background-image: url('/img/bg-bottom.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-color: white;

	height: 80px;
	margin-top: -49px;
	padding-top: 49px;
}

#footer
{
	font-family: Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif;
	font-size: 11px;
	color: #9fbac0;
	
	width: 748px;
	margin: 0 auto;
	padding-top: 20px;
}