/*============================================================================
=  
=  File:       main.css
=  Author:     MetaDesign
=  Created:    26 Jul 2006
=  Updated:    1 May 2009
=  
=  Description:
=  Stylesheet for MetaDesign Website.
=  Styles are organized into the following groups:
=  - Global
=  - Columns
=  - Header
=  - Content
=  - Carousel
=  - Footer
=  
==============================================================================*/

/*============================================================================
GLOBAL
==============================================================================*/

html {
  font-size:            62.5%;
  line-height:          1.6;
  height:               100%;
}
body {
  font:                 normal 1.05em/1.6em Georgia,Helvetica,Arial,Verdana,sans-serif;
  /*background: url(images/grid.gif) no-repeat top left;
  font:                 normal 62.5%/1.6em Georgia,Helvetica,Arial,Verdana,sans-serif;*/
  color:                #000000;
  background:           #ffffff;
  width:                915px;
  padding:              10px 0 0 38px;
  position:							relative;
}

p {
  font-weight:          normal;
  font-size:            1.4em;
  line-height:          1.5em;
  margin:               0;
  padding:              0 0 15px 0;
}

a {
  line-height:          1.5em;
  color:                #000000;
  text-decoration:      none;
  border-bottom:        1px solid #404040;
  padding:              0;
}

a:visited {
  color:                #000000;
  border-bottom:        1px solid #404040;
}

a:hover {
  color:                #999999;
  border-bottom:        1px solid #bebebe;
}

/* fixes dotted border bug in FF when mouse-activated;
border left alone for tabbing */
a,
a:active {
  outline:              none;
}

h1, h2, h3 {
  margin:               0;
  font-weight:          normal;
  line-height:          1.5em;
  background:           #ffffff; /* to fix IE6/7 bug with text rendering upon fade */
}

h1 {
  font-size:            2.4em;
  padding:              0 15px 20px 0;
}

h2 {
  font-size:            2.0em;
  padding:              0;
  margin:               0;
}

.contact h2 {
  font-size:            2.0em;
}

h3 {
  font-size:            1.4em;
  padding:              0 0 15px 0;
}

p, ul {
  background:           #ffffff; /* to fix IE6/7 bug with text rendering upon fade */
}

ul {
  list-style:           none;
  margin:               0;
  padding:              0;
}


/*============================================================================
COLUMNS
==============================================================================*/

.column_left,
.column_right {
  float:                left;
  padding:              15px 0 0 0;
  display:              inline;
  overflow:             visible;
  position:             relative;
}

.column_left {
  width:                570px;
  margin:               0 15px 0 15px;
}

.column_right {
  width:                285px;
  margin:               0 0 0 15px;
}

/*============================================================================
HEADER
==============================================================================*/

.headerLogo {
  width:                915px;
  height:               34px;
  padding:              0 0 17px 0;
  position:             relative;
}

.header {
  width:                915px;
  height:               171px;
}

.header .column_left,
.header .column_right {
/*  height:               135px;*/
  height:               139px;
  border-top:           2px solid black;
  background:           url(../images/dotted_line.gif) bottom left repeat-x;
}

.header ul li {
  padding:              0 0 6px 0;
}

.header a {
  font:                 normal 1.2em/1.4em Georgia,Helvetica,Arial,Verdana,sans-serif;
  color:                #000000;
}

.header a:hover {
  color:                #999999;
}

a img {
  border:               0;
}

a#home,
a#home:visited,
a#home:hover {
  display:              block;
  border:               0;
}

#logo,
#menu {
  padding:              0;
  float:                left;
}

#menu a {
  font:                 normal 1.2em/1.4em Georgia,Helvetica,Arial,Verdana,sans-serif;
  color:                #000000;
}

#menu li {
  list-style-type:      none;
  padding:              0;
  margin:               0 0 3px 0;
}

#menu a:hover,
#menu a.selected {
  color:                #808080;
  border-bottom:        1px solid #ababab;
}

.img_logo {
  width:                152px;
  height:               34px;
  border:               0;
}

.logoFade {
  display:              block; /* required for IE opacity */
  width:                100%;  /* required for IE opacity */
  -moz-opacity:         0.25;
  -ms-filter:           "alpha(opacity=25)";
  filter:               alpha(opacity=25);
  opacity:              0.25;
}

ul#offices {
  position:             absolute;
  top:                  34px;
  left:                 0;
}

ul#offices li {
  margin:               0 10px 0 0;
  list-style-type:      none;
  float:                left;
  display:              inline;
}

ul#offices li a {
  font:                 normal 1.1em/1.4em Georgia,Helvetica,Arial,Verdana,sans-serif;
  border:               none;
}

ul#offices li a:hover,
ul#offices li a.selected {
  color:                #989898;
}

/*============================================================================
CONTENT
==============================================================================*/

.content {
  width:                915px;
  min-height:           309px;
  /* begin x-browser min-height fix: http://www.dustindiaz.com/min-height-fast-hack/ */
  height:								auto !important;
  height:								309px;
  /* end x-browser min-height fix */
  padding:              0;
  position:							relative;
}

.content ul li {
  padding-bottom:       1em;
}

.content h2 {
  padding:              2px 0 0 0;
}

#work_veil {
  display:              block;
	position:							absolute;
	top:									15px;
	left:									0;
	background-color:			#fff;
	width:								585px;
	height:								362px;
	overflow:							hidden;
	z-index:							100;
  -moz-opacity:         0.01;
  -ms-filter:           "alpha(opacity=1)";
  filter:               alpha(opacity=1);
  opacity:              0.01;
}

.client_work h1 {
	margin:								15px 0px 0px 0px;
  padding:              4px 0 2px 0;
  line-height:          1.2em;
}

.client_work h2 {
  font-size:            1.8em;
	height:								100px;
}

.client_work h3 {
  color:                #999999;
  padding-bottom:       12px;
}

#client-work {
  width:				570px;
  height:            	347px;
  padding:				15px 0 0 0;
  overflow:				hidden;
  position:				relative;
}

#client-work img,
#client-work #story-cont {
  width:				570px;
  height:            	347px;
  position:				absolute;
  display:				none;
}

.work_nav {
  font-size:            1.1em;
}

.work_nav_imgs {
  padding:				0 3px 6px 0;
  float:				left;
}

.work_nav_imgs a {
  margin-right:			5px;
}

.work_nav_imgs a.sel,
.work_nav_imgs a.sel:hover,
.work_nav_single_img a.sel,
.work_nav_single_img a.sel:hover,
.work_nav_story a.sel,
.work_nav_story a.sel:hover {
	color:             #999999;
  border-bottom:		none;
}

.work_nav_img_pn {
  padding:				6px 22px 6px 0;
  float:				left;
}

.work_nav_img_pn a {
  width:				4px;
  height:				8px;
  margin-right:			5px;
  float:				left;
  display:				inline;
  overflow:				hidden;
  border:				none;
  background:			url(../images/img_nav_arrows.gif) 0 0 no-repeat;
}
.work_nav_img_pn a:hover {
  border:				none;
}
.work_nav_img_pn a.next {
  background-position:	-4px 0;
}

.work_nav_story {
  padding:				2px 6px 6px 0;
  float:				left;
}
.work_nav_single_img {
  padding:				2px 27px 6px 0;
  float:				left;
}

.clientColLt,
.clientColRt {
	width:           242px;
	float:           left;
	display:         inline;
}
.clientColLt {
	margin-right:    86px;
}

.clientColLt h2,
.clientColRt h2 {
  font-size:         1.4em;
  padding:            0 0 6px 0;
}

ul.clients {
  font-size:            1.2em;
  padding:              0 0 37px 0;
}

ul.clients li,
ul.contact li {
  padding:              0 0 5px 0;
}

ul.clients li a {
  line-height:0.9em;
  color:                #000000;
}

ul.clients li a:hover,
ul.clients li a:active {
  color:                #999999;
}

ul.contact {
  padding:              4px 0 0 0;
}

ul.contact li h2 {
  padding:              0;
}

.client_story h1 {
  font-size:			1.8em;
}
/* override text styles for when client story is loaded into Our Work */
#story-cont .client_story h1 {
  font-size:			1.4em;
  line-height:			1.55em;
  margin:				0 0 15px 0;
}
#story-cont a.pageLink {
  display:				none;
}

ul.news {
  padding-bottom:		60px;
}

ul.news li {
  padding-bottom:		32px;
}

ul.news li h1 {
  font-size:			1.8em;
  line-height:			1.2em;
  padding-bottom:		4px;
}

ul.news li h2 {
  font-size:			1.4em;
  line-height:			1.2em;
  padding-bottom:		20px;
}

ul.news li p {
  font-size:			1.4em;
  line-height:			1.55em;
}

a.more {
  font-size:			1.5em;
}

ul.submenu,
ul.submenu_grid {
  height:               374px;
}

ul.submenu_grid li ul li {
  display:              block;
  width:                96px;
  height:               93px;
  padding:              0 0 6px 0;
  float:                left;
}

ul.submenu_grid li ul li.last {
}

ul.submenu_grid li ul {
	width:								288px;
  padding-top:          15px;
}

ul.submenu h2 {
  display:              inline;
}

div.contentarea h1 a,
ul.submenu h2 a,
ul.submenu h3 a {
  color:                #000000;
  border-bottom:        1px solid #404040;
}

ul.submenu h2 a:hover,
ul.submenu h2 a.selected,
ul.submenu h3 a:hover,
ul.submenu h3 a.selected,
div.contentarea h1 a:hover,
div.contentarea h1 a.selected {
  color:                #808080;
  border-bottom:        1px solid #ababab;
}

div.contentarea h1,
ul.submenu h3 {
  color:                #676767;
  padding-bottom:       8px;
}

.submenu_grid a.caption {
  font-size:            .9em;
  height:								1.6em;
}

.submenu_grid a,
.submenu_grid a:hover {
  line-height:          1.4em;
  display:              block;
  background:           #ffffff; /* to fix IE bug with rendering of text w/opacity */
  border-bottom:        0;
}

.submenu_grid a.thumb,
.submenu_grid a.caption:hover {
  -moz-opacity:         0.50;
  -ms-filter:           "alpha(opacity=50)";
  filter:               alpha(opacity=50);
  opacity:              0.50;
  zoom:                 1;
}

.submenu_grid a.thumb:hover,
.submenu_grid a.caption,
ul.submenu_grid a.selected {
  -moz-opacity:         1.00;
  -ms-filter:           "alpha(opacity=100)";
  filter:               alpha(opacity=100);
  opacity:              1.00;
  zoom:                 1;
}

ul.submenu_grid a.selected {
  cursor:               default;
}

.submenu_grid a.caption,
.submenu_grid a.caption:hover {
  width:                91px;
}

.content .column_left div img {
/*  margin:               15px 0px 0px 0px;*/
}

.caption {
	font-size:            1.0em;
	line-height:					1.0em;
	margin:								0;
	height:								1.0em;
	margin-bottom:				-1.0em;
}

p.copyright {
  font-size:            1.2em;
  color:                #999999;
}

/*============================================================================
CAROUSEL
==============================================================================*/

.carousel_nav {
  height:               30px;
  padding-top:          3px;
  position:             relative;
}

.carousel_dots {
  width:                 33px; /* (6px dot + 5px total L/R margins) x 3 dots */
	height:                6px;
	position:              absolute;
	top:                   0;
	left:                  126px; /* reduce by 11/5 px for each added dot */
}

.carousel_dots a {
  width:                 6px;
  height:                6px;
  margin:                0 3px 0 2px;
  border:                none;
  float:                 left;
  display:               inline;
  overflow:              hidden;
  z-index:               10;
  background:            url(../images/carousel_nav_dots.gif) 0 0 no-repeat;
}

.carousel_dots a:hover,
.carousel_dots a.sel {
  background-position:   0 -6px;
}

.carousel-next {
  float:                right;
}

.carousel-prev {
  float:                left;
}

.carousel-next a,
.carousel-prev a {
  font-size:            1.2em;
  line-height:          1.4em;
  border-bottom:        0;
}

.carousel-next a:hover,
.carousel-prev a:hover {
  border-bottom:        1px solid #404040;
}

.carousel-next a.enabled,
.carousel-prev a.enabled {
  color:                #000000;
}

.carousel-next a.disabled,
.carousel-prev a.disabled {
  color:                #999999;
}

.carousel-next a.disabled:hover,
.carousel-prev a.disabled:hover {
  border-bottom:        0;
  cursor:               default;
}

/*============================================================================
FOOTER
==============================================================================*/

.footer {
  clear:                left;
  width:                915px;
}

.footer .column_right,
.footer .column_left {
  background:           url(../images/dotted_line.gif) repeat-x;
}

.footer p {
  font-size:            1.2em;
  line-height:          1.6em;
}

.footer a {
/*  color:                #000000;*/
}

/*============================================================================
CLEARING
==============================================================================*/

.clearfix:after, ul.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
html .clearfix {height: 1%;}