/*
Theme Name: Mason Zimbler Theme
Theme URI: http://mzl.com/
Description: The Mason Zimbler WordPress theme.
Version: 1
Author: Shane Casey
Author URI: http://mzl.com/
Tags: 

*/

/****************************
***   MAIN CSS
****************************/
html * { margin:0; padding:0; }
html
{
	width:100%;
	height:100%;
}
 
body
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	width:99%;
	height:92%;
	padding-top: 5%;
}

img {
border: none;
}
.
//remove dotted borders on img links
a:active, a:focus, object, * {outline: 0;}

p
{
margin-bottom: 20px;
}
  
#page
{
	position:relative;
	margin:0 auto;
	text-align:left;
	width:905px;
	height:565px;
	background:white url(/img/constant/background.gif) 0 0 no-repeat;
	z-index:0;
}

#logo
{
	position:relative;
	top:10px;
	left:13px;
}



#content_area
{
	float:left;
	position:relative;
top: 15px;
	width:879px;
	height:451px;
left: 12px;
	overflow: hidden;
}



#flashcontent
{
	position:relative;
	z-index:0;
	background:transparent;
}

#scrollpane 
{
	position:absolute;
	z-index:10;
	overflow:auto;
	background:white;
	padding:10px 10px 0 0;
}

#scrollpane p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0 0 10px 0;
}

#scrollpane a
{
	color:#000000;
}

#scrollpane a:hover
{
	color:#666666;
}

a
{
	outline:none;
	color:#666666;
	text-decoration: none;
	font-weight: bold
}

a:hover
{
	text-decoration: underline;
	color: #999999;
}

a:hover img
{
	text-decoration: none;
}

ul
{
	list-style-type:disc;
	padding:0 0 20px 30px;
	list-style-position:outside;
}

.txtright
{
	text-align:right;
}

h3.title 
{
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin-bottom: 20px;
}

h3.title span.grey
{
	color: #999999;
}

/****************************
***   2/3 COLUMN LAYOUTS
****************************/

.threecol
{
	width: 740px; 
	margin: 0 auto;
	padding-top: 30px;
}

.threecol_left
{
	width: 100px; 
	float: left;
}

.threecol_centre
{
	width: 450px; 
	float: left;
}

.threecol_right
{
	padding-left: 20px;
	float: left;
}

.threecol_centre p {
	margin-left: 15px;
	margin-bottom: 20px;
}

.twocol
{
	width: 800px; 
	margin: 0 auto;
	padding-top: 30px;
}

.twocol_left {
	width: 310px;
	float: left;
	margin-right: 30px;
}

.twocol_right {
	width: 460px; 
	float: left;
}


/****************************
***   NAV CSS
****************************/

#top_nav
{
	position:absolute;
        display: block;
        width: 500px;
        height: 20px;
	right: 0px;
        top: 45px;
	z-index:10;
	font-family:Arial, Helvetica, sans-serif;
	list-style:none;
        overflow: hidden;
margin: 0;
padding: 0;
}

#top_nav li
{
margin: 0;
padding: 0;
	float:left;
display: inline;
height: 20px;
	margin-right:10px;
}

#top_nav li a
{
	color:#000;
	outline:none;
display: block;
height: 20px;
overflow: hidden;
position: relative;
        font-size: 0.85em;
}

#top_nav li a:hover
{
	color:#666;
}

#top_nav a span {
 position: absolute;
width: 100%;
height: 100%;
cursor: hand;
}

a#who-we-are { width:73px; }
a#who-we-are span		{ background:white url(/img/nav/who_we_are.gif) 0 1px no-repeat;		}
a#who-we-are:hover span	{	background:white url(/img/nav/who_we_are.gif) 0 -19px no-repeat;		}
a#what-we-do { width:75px; }
a#what-we-do span		{	background:white url(/img/nav/what_we_do.gif) 0 1px no-repeat;		}
a#what-we-do:hover span 	{	background:white url(/img/nav/what_we_do.gif) 0 -19px no-repeat;		}
a#our-work { width: 60px; }
a#our-work span			{	background:white url(/img/nav/our_work.gif) 0 1px no-repeat;			}
a#our-work:hover span	{	background:white url(/img/nav/our_work.gif) 0 -19px no-repeat;		}

a#our-blog { width: 57px; }
a#our-blog span			{ background:white url(/img/nav/our_blog.gif) 0 1px no-repeat;			}
a#our-blog:hover span	{	background:white url(/img/nav/our_blog.gif) 0 -19px no-repeat;		}

a#awards { width: 48px; }
a#awards span			{ background:white url(/img/nav/awards.gif) 0 1px no-repeat;			}
a#awards:hover span		{ background:white url(/img/nav/awards.gif) 0 -19px no-repeat;			}

a#jobs	{ width: 33px; }
a#jobs	span			{ background:white url(/img/nav/jobs.gif) 0 1px no-repeat;				}
a#jobs:hover span		{ background:white url(/img/nav/jobs.gif) 0 -19px no-repeat;			}

a#contact { width: 54px; }
a#contact span			{ background:white url(/img/nav/contact.gif) 0 1px no-repeat;			}
a#contact:hover span		{ background:white url(/img/nav/contact.gif) 0 -19px no-repeat;			}

body.our-blog a#our-blog span,
body.who-we-are a#who-we-are span,
body.what-we-do a#what-we-do span,
body.our-work a#our-work span,
body.awards a#awards span,
body.jobs a#jobs span,
body.contact a#contact span {	background-position: 0 -19px !important;	}


/****************************
***   HOME CSS
****************************/
#laptop
{
	width: 878px;
	height: 370px;
	margin: 0 auto;
	background: url(/img/home/laptop.gif) top center no-repeat;
}
#laptop_content
{
	width: 185px;
	height: 128px;
	position: relative;
	left: 380px;
	top: 52px;
	overflow: auto;
	padding: 10px;
	text-align: center;
}

/****************************
***   CONTACT CSS
****************************/
#contact_panel
{
	width: 650px;
	margin: 0 auto;
}
#alien
{
	position: absolute;
	z-index: 0;
}
#contact_scrollpane
{
	position: relative;
	z-index: 1;
	width: 320px;
	height: 220px;
	left: 150px;
	top: 85px;
	overflow: auto;
}

/****************************
***   WHAT WE DO CSS
****************************/

body.what-we-do div.twocol_left {
height: 420px;
position: relative;
}

#links_panel
{
position: absolute;
left: 0px;
bottom: 10px;	
width: 170px;
	height: 150px;
	background: url(/img/what_we_do/links_background.jpg) no-repeat;
	padding: 8px;
overflow: hidden;
	
}

#links_panel a{
	display:block;
	height:19px;
	width:150px;
	margin-bottom: 2px;
	float:left;
}
a#links_integrated-marketing			{	background:white url(/img/what_we_do/integrated-marketing.jpg) 0 -1px no-repeat;			}

a#links_integrated-marketing:hover,
.int-marketing a#links_integrated-marketing
		{	background:white url(/img/what_we_do/integrated-marketing.jpg) 0 -19px no-repeat;			}
a#links_digital							{	background:white url(/img/what_we_do/digital.jpg) 0 -1px no-repeat;			}
a#links_digital:hover,
.digital a#links_digital					{	background:white url(/img/what_we_do/digital.jpg) 0 -19px no-repeat;			}
a#links_advertising						{	background:white url(/img/what_we_do/dvrtising.jpg) 0 -1px no-repeat;			}
a#links_advertising:hover,
div.advertising a#links_advertising				{	background:white url(/img/what_we_do/dvrtising.jpg) 0 -19px no-repeat;			}
a#links_direct-marketing				{	background:white url(/img/what_we_do/direct-marketing.jpg) 0 -1px no-repeat;			}
a#links_direct-marketing:hover,
.marketing a#links_direct-marketing			{	background:white url(/img/what_we_do/direct-marketing.jpg) 0 -19px no-repeat;			}

a#links_corporate-branding				{	background:white url(/img/what_we_do/corporate-branding.jpg) 0 -1px no-repeat;			}
a#links_corporate-branding:hover,
.branding a#links_corporate-branding		{	background:white url(/img/what_we_do/corporate-branding.jpg) 0 -19px no-repeat;			}
a#links_sales-promotion					{	background:white url(/img/what_we_do/sales-promotion.jpg) 0 -1px no-repeat;			}
a#links_sales-promotion:hover,
.promotion a#links_sales-promotion			{	background:white url(/img/what_we_do/sales-promotion.jpg) 0 -19px no-repeat;			}

div#photos {
width: 460px;
height: 400px;
}

body.what-we-do div.twocol_right,
div#photos { outline: 0;}



/****************************
***   AWARDS CSS
****************************/

#awards_flash
{
	
	margin: 0;
padding: 0;
	background: url(/img/home/laptop.gif) top center no-repeat;
       overflow: hidden;
}

#awards_scrollpane
{
	height:270px;
	width:318px;
	left:270px;
	top:85px;
	overflow:auto;
	padding:10px 10px 0px 10px;
	position:absolute;
	z-index:10;
}

#awards_frame
{
	background-image: url(/img/awards/frame.jpg);
	height:450px;
}

#awards_back
{
	left:50px;
	top:40px;
	position:absolute;
}

body.jobs div.twocol_left {
margin-right: 20px;
text-align: center;
}

div#jobs-flash {
width: 204px;
height: 234px;
background-image: url(/img/jobs/jobs.jpg);
}

div.page-not-found {
margin:0 auto;
padding-top:30px;
width:800px;
background: url(/img/error.jpg) no-repeat 500px 0px;
height: 300px;
}
div.page-not-found p {
padding-top: 4px;
}

div#our-work-flash {
text-align: center;
}


/****************************
***   US SHOWREEL
****************************/

div#mason-zimbler-us 
{
	width: 905px;
	height: 600px;
	margin: auto;
	margin-top: 0;
	margin-bottom: 0;
}

div#mason-zimbler-us #page-content
{
	width: 850px;
	position: relative;
	top: 20px;
	left: 25px;
	/*padding-bottom: 30px;*/
}

div#mason-zimbler-us #flash-content
{
	float:right;
	right:55px;
	top:30px;
	width: 416px;
	height: 280px;
	position: relative;
	margin: 0;
	padding: 0;
}

div#mason-zimbler-us #left, #right
{
	position: relative;
	top: 20px;
	padding-bottom: 20px;
}

div#mason-zimbler-us #left
{
	width: 270px;
	height: 315px;
	left: 30px;
	top: 40px;
	background: url('/img/us_showreel/hh_machine.gif') 0 0 no-repeat;
}

div#mason-zimbler-us #right
{
	float: right;
	
	right: 20px;	
	top: 10px;
	
}


/****************************
***   JOBS
****************************/
body.jobs  div#page_content  div.twocol {
   padding-top: 15px;
}
body.jobs  div#page_content  div.twocol  div.twocol_left    {
    width: 225px;
}
body.jobs  div#page_content  div.twocol  div.twocol_right    {
  width: 555px;
}


/****************************
***   TERMS, PRIVACY, COPYRIGHT
****************************/
div#page_content div.legal-container {
padding-left: 20px;
padding-right: 20px;
overflow: auto;
height: 450px;
}
div#page_content div.legal-container ol {
margin-left:25px;
margin-bottom:20px;
display:block;
}

/****************************
***   TWITTER
****************************/

div#twitter-container	{
		height: 55px;
		overflow: hidden;
		display: block;
		clear: both;
		position: relative;
		background: url(/img/twitter-bg.jpg) 0 0 no-repeat;
		padding-left: 70px;
		padding-top: 2px;
		width: 750px;
		margin: auto;
	}
	
	div#twitter-container	a#follow	{
		display: block
		overflow: hidden;
		position: absolute;
		right: 10px;
		top: 5px;
		width: 86px;
		height: 44px;
		background: url(/img/twitter-follow.gif) no-repeat;
		background-position: center top;
	}
	
	div#twitter-container	a:hover#follow	{
		display: block
		overflow: hidden;
		position: absolute;
		right: 10px;
		top: 5px;
		width: 86px;
		height: 44px;
		background: url(/img/twitter-follow.gif) no-repeat;
		background-position: center bottom;
	}
	
	div#twitter-container	div#tweets	{
		width: 650px;
		background: url(/img/twitter-top.gif) 0 0 no-repeat #FFFFFF;
		min-height: 40px;
position: relative;
	}
	
div#twitter-container	div#tweets	div.tweet	{
		margin: 0;
		width: 585px;
		display: block;
		padding: 0;
		position: absolute;
		top: 0px;
		left: 0px;
		padding-left: 30px;
		padding-top: 10px;
	}
	div#twitter-container	div#tweets	div.tweet	p	{
		padding: 0;
		margin: 0;
		font-size: 11px;
		color: black;
		background-color: #EDEDED;
	}	

	div#twitter-container	div#tweets	div.tweet	p	span	{
		font-style: italic;
		color: #737373;
	}
	
	div#twitter-container	div#tweets	div.tweet	a	{
		font-weight: normal;
		text-decoration: underline;
	}
	
	div#twitter-container	span.tweet-foot	{
		width: 650px;
		display: block;
		clear: both;
		position: relative;
		height: 9px;
		overflow: hidden;
		margin: 0;
		font-size: 0;
		background: url(/img/twitter-bottom.gif) left bottom no-repeat;
	}

/**********************************************
***             FOOTER
**********************************************/

div#footer	{
margin: auto;
clear: both;
width: 880px;
position: relative;
}

div#footer	p	{
float: left;
text-align: left;
padding: 0;
margin: 0;
font-size: 10px;
color: #737373;
}

div#footer	p	a	{
font-weight: normal;
text-decoration: none;
}

div#footer	a#hh-logo	{
display: block;
position: absolute;
right: 0px;
top: 0px;
width: 180px;
height: 50px;
}

div#jobs-copy {
overflow-y:scroll;
height:420px;
}

/*********************************************
***             Eloqua Page                ***  
**********************************************/
div#eloqua-content {
padding:10px 50px 20px;
position:relative;
}
div#eloqua-content p {
font-size:12px;
margin-bottom:10px;
line-height:18px;
}
div#eloqua-content h2 {
padding-bottom:15px;
padding-top:15px;
}
div#eloqua-content .visit-site {
position:absolute;
right:50px;
bottom:70px;
margin-right:20px;
}
div#eloqua-content .eloqua-copy {
float:left;
padding-right:30px;
width:268px;
}
div#eloqua-content #eloqua-flash {
float:left;
width:480px;
}