@charset "UTF-8";

#logo h1 {
	margin: 8px 0 0; 
	padding: 0;
	text-indent:-2000px;
	width:100px;
	height:100px;
	background: url(images/punch-logo.png) no-repeat;
}


/*
 * Main Nav Styles
 */
#navigation {
	width:780px;
  position:absolute;
  top:0;
  z-index:1000;
  
}
ul.primary
{
  margin: 0;
  padding: 0 0 0 10px;
  border-width: 0;
  list-style: none;
  white-space: nowrap;
  line-height: normal;
  float: right;
  
}

ul.primary li
{
  float: left;
  margin: 0;
  padding: 0;
  _width:90px;
}

ul.primary li a
{
  display: block;
  height: 24px;
  margin: 0;
  padding: 0 0 0 5px; /* width of tab-left-about-us.png */
  border-width: 0;
  font-weight: normal;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #000;
  background-color: transparent;
  background: url(images/tab-left-about-us.png) no-repeat left -42px;
  cursor: pointer; 
}

ul.primary li a .tab
{
  display: block;
  height: 24px; /* 24px (parent) - 4px (padding) */
  margin: 0;
  padding: 0px 13px 0 6px;
  border-width: 0;
  line-height: 20px;
  background: url(images/tab-right-about-us.png) no-repeat right -42px;
}

ul.primary li a:hover
{
  border-width: 0;
  background-color: transparent;
  background: url(images/tab-left-about-us.png) no-repeat left -80px;
}

ul.primary li a:hover .tab
{
  background: url(images/tab-right-about-us.png) no-repeat right -80px;
}

ul.primary li.active a,
ul.primary li.active a:hover
{
  border-width: 0;
  color: #000;
  background-color: transparent;
  background: url(images/tab-left-about-us.png) no-repeat left -4px;
}

ul.primary li.active a .tab,
ul.primary li.active a:hover .tab
{
  background: url(images/tab-right-about-us.png) no-repeat right -4px;
}


ul.primary li.what a {
	background: url(images/tab-left-what-we-do.png) no-repeat left -42px;
}
ul.primary li.what a .tab
{
  background: url(images/tab-right-what-we-do.png) no-repeat right -42px;
}

ul.primary li.what a:hover
{
  background: url(images/tab-left-what-we-do.png) no-repeat left -80px;
}

ul.primary li.what a:hover .tab
{
  background: url(images/tab-right-what-we-do.png) no-repeat right -80px;
}

ul.primary li.active.what a, ul.primary li.active.what a:hover
{
  background: url(images/tab-left-what-we-do.png) no-repeat left -4px;
}

ul.primary li.active.what a .tab, ul.primary li.active.what a:hover .tab
{
  background: url(images/tab-right-what-we-do.png) no-repeat right -4px;
}

ul.primary li.clients a {
	background: url(images/tab-left-our-clients.png) no-repeat left -42px;
}
ul.primary li.clients a .tab
{
  background: url(images/tab-right-our-clients.png) no-repeat right -42px;
}

ul.primary li.clients a:hover
{
  background: url(images/tab-left-our-clients.png) no-repeat left -80px;
}

ul.primary li.clients a:hover .tab
{
  background: url(images/tab-right-our-clients.png) no-repeat right -80px;
}

ul.primary li.active.clients a, ul.primary li.active.clients a:hover
{
  background: url(images/tab-left-our-clients.png) no-repeat left -4px;
}

ul.primary li.active.clients a .tab, ul.primary li.active.clients a:hover .tab
{
  background: url(images/tab-right-our-clients.png) no-repeat right -4px;
}
ul.primary li.contact a {
	background: url(images/tab-left-contact.png) no-repeat left -42px;
}
ul.primary li.contact a .tab
{
  background: url(images/tab-right-contact.png) no-repeat right -42px;
}

ul.primary li.contact a:hover
{
  background: url(images/tab-left-contact.png) no-repeat left -80px;
}

ul.primary li.contact a:hover .tab
{
  background: url(images/tab-right-contact.png) no-repeat right -80px;
}

ul.primary li.active.contact a, ul.primary li.active.contact a:hover
{
  background: url(images/tab-left-contact.png) no-repeat left -4px;
}

ul.primary li.active.contact a .tab, ul.primary li.active.contact a:hover .tab
{
  background: url(images/tab-right-contact.png) no-repeat right -4px;
}
/* page: STYLE */
#page {
	width: 685px;
	height: 510px;
	border-style: solid;
	border-width: 0 0 3px 0;
	background-color:#fff;
	background-position:  50px 20px;
	background-repeat: no-repeat;
	display:none;
	margin-left:100px;
	overflow: auto;
	padding-right:5px;
	
}
#page-inner {
	margin: 0 40px 0 205px;
	padding: 10px 0 0;
	xheight:470px;
}

#page-inner p {
  font-size:12px;
  margin:0;
  padding-bottom:10px;
}
#page {
	background-image: url(images/punch-logo.png);
}
#page.about_us {
	border-color: #B7122A;
}
#page.what_we_do{
	border-color: #C54155;
}
#page.our_clients {
	border-color: #D4717F;
}
#page.contact_us {
	border-color: #E2A0AA;
}
#page.privacy {
	border-color: #FF6666;
}
a.close-button {
	display: block;
	width:64px;
	height:23px;
	background: url(img/close-button.gif);
	xmargin-left: 10px;
	xmargin-top: 10px;
	position:absolute;
	right:20px;
	
}
#footer p {
	letter-spacing: 0.5em;
	margin: 0; 
	padding: 10px 0; 
}
#footer a {
	margin-left: 20px;
}
#footer a:link, #footer a:visited {
	color: #666;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}

#twtr-profile-widget {
	text-align: center;
}
.twtr-doc {
	margin: 0 auto;
}


/**
 * Client Page
 */
 
ul.client-logos {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.client-logos li {
	display: inline;
	padding-right: 10px;
}