/* -----------------------------------------------
PLEASE READ THIS BEFORE EDITING!

In order to facilitate text zoom, all font size
declarations should be made using ems. Particular
care should be made for nested elements since em
units are inherited.

See http://www.clagnut.com/blog/348/ for detailed
instructions.
----------------------------------------------- */

/*[Color matrix for fonts]
  [Grey] body: #6f6f6f;
  [Light light blue] .nav-sub li a: 
    #c0d6ee;
  [Light blue] a, h2, h3, h4, #footer a:visited, .client-list, .vcard .map: 
    #AEC2D8;
  [Light blue slightly darker] .nav-main li a, .nav-sub li a: 
    #acc1d6;
  [LightDark dark blue] #footer: 
    #aec5dc;
  [Grey blue] .news-date : 
    #aec2d8;
  [White] h1, h2 strong, .color1, p, #footer a.perma-link, #page-blurb h2, #page-blurb h3, form label, form input, form textarea, .vcard, .vcard a, .client-content ul li a:hover, #case-study .case-study-list, #case-study .case-study-list a, .case-study-info li, .case-study-content h3, .client-list li span, .client-list li span, .ajax-loader: 
    #fff;
  [Light grey] .nav-main li a:hover, .nav-sub li a:hover, .nav-main li.active a, .nav-sub li.active a: 
    #ececec;
  [Red] .errorBox: 
    #E06161;
*/


/* =Firefox only
-----------------------------------*/
@import url('firefox.css');

/* =Safari only
-----------------------------------*/
@import url('safari.css');

/**
 * Font Family's
 */

@font-face {
  font-family: "Myriad Pro Embed";
  font-style: normal;
  font-weight: normal;
  src: url(MyriadPro-Light.otf);
}

@font-face {
  font-family: "Myriad Pro Embed";
  font-style: normal;
  font-weight: bold;
  src: url(MyriadPro-Regular.otf);
}


/* COMMON PAGE STYLES
----------------------------------------------- */

html { background: #5484B6 }

body {
  background: #5484B6 url(../images/bg.png) repeat-x 0 0;
  color: #6f6f6f;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  font-size: 77%;
  margin: 0 0 17px;
  text-align: center;
  -webkit-text-size-adjust: none;
}

a:link, a:visited {
  color: #AEC2D8;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

a:hover, a:avisited {
  color: #AEC2D8;
  text-decoration: underline;
}

a img {
  border: none;
}

sup {
  font-weight: bold;
  font-size: 1em;
  display: inline-block; /* this allows the sup to sit behind the main flyout nav rather using position relative */
  line-height: 10px;
  vertical-align: text-top;
}

.uppercase {
  text-transform: uppercase;
}

h1 {
  color: #fff;
  font-family: "Myriad Pro Embed", "Lucida Grande", Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

h2 {
  border: none;
  color: #aec2d8;
  font-size: 150%;
  font-weight: normal;
  padding: 2px 0;
}

h2 strong, .color1 {
  color: #fff;
}

h2.min-width {
  width: 410px;
}

h3 {
  color: #aec2d8;
  font-size: 108%;
  border-bottom: 1px solid #bbbaba;
  padding: 4px 0;
}

h4 {
  color: #aec2d8;
  font-size: 93%;
  text-transform: uppercase;
}

p {
  color: #fff;
  font-size: 93%;
  line-height: 170%;
}

em {
  background-color: transparent;
}

ol li {
  margin-bottom: 5px;
  margin-left: 10px;
}

/* print header */

#logo-print {
  display: none;
}

.float-left {
  float: left;
}

.hide {
  display: none;
}

/* =Container
-----------------------------------*/

.container {
  min-height: 650px;
}

.container, #footer {
  margin: 0 auto;
  text-align: left;
}

/* =Header
-----------------------------------*/

#header {
  border-top: 1px solid #4670a2;
  height: 68px;
  position: relative;
  z-index: 1;
}

.logo-meltmedia-small {
  display: block;
  margin-left: 100px;
  position: absolute;
  margin-top: 0;
  height: 60px;
  width: 79px;
}

/* =Navs
-----------------------------------*/

.nav-main, .nav-sub {
  font-size: 80%;
  letter-spacing: .25em;
  line-height: normal;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.nav-main .nav-main-lc, .nav-main .nav-main-rc, .nav-sub-lc, .nav-sub-rc {
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  float: left;
}

.nav-main .nav-main-lc, .nav-main .nav-main-rc {
  height: 43px;
  margin-top: 4px;
  width: 13px;
}

.nav-main .nav-main-lc {
  background-image: url(../images/nav-main-lc.png);
}

.nav-main .nav-main-rc {
  background-image: url(../images/nav-main-rc.png);
}

.nav-main {
  margin: 23px 0 0 98px;
  width: 753px;
  text-align: center;
}

.nav-main .nav {
  float: left; 
  padding: 0; 
  margin: 0;
  width: 587px;
}

.nav-main ul, .nav-sub ul {
  list-style: none;
}

.nav-main .logo-sm {
  background: transparent url(../images/nav-main-bg.png) repeat-x 0 0;
  display: block;
  float: left;
  height: 39px;
  width: 140px;
  position: relative;
}

.nav-main ul {
  background: transparent url(../images/nav-main-bg.png) repeat-x 0 0;
}

.splash .nav-main .logo-sm {
  display: none;
}

.splash .nav-main .nav {
  width: 727px;
}

.nav-main li {
  text-align: center;
  width: 19%;
}

.nav-sub li {
  text-align: center;
  width: 32%;
}

.nav-sub ul {
  background: transparent url(../images/nav-sub-bg.png) repeat-x 0 0;
}

.nav-main li, .nav-sub li {
  float: left;
  height: 46px;
  text-transform: lowercase;
}

.nav-main li a, .nav-sub li a {
  color: #acc1d6;
  display: block;
}

.nav-main li a {
  padding: 15px 0 14px;
}

.nav-main li a:hover, .nav-sub li a:hover, .nav-main li.active a, .nav-sub li.active a {
  color: #ececec;
  text-decoration: none;
}

.nav-approach a {
  padding-right: 77px !important;
}

.nav-sub {
  float: none;
  margin: -5px 0 0 68px;
  width: 576px;
}

.nav-sub .nav {
  float: left;
  padding: 0;
  margin: 0;
  width: 550px;
}

.nav-sub-lc, .nav-sub-rc {
  height: 46px;
  width: 12px;
}

.nav-sub li a {
  color: #c0d6ee;
  margin-right: 0;
  padding: 15px 25px 14px;
}

.nav-sub .nav-sub-lc {
  background-image: url(../images/nav-sub-lc.png);
}

.nav-sub .nav-sub-rc {
  background-image: url(../images/nav-sub-rc.png);
}

/* =Body
-----------------------------------*/

#body {
  padding-top: 55px;
}

.curve1 {
  background: transparent url(../images/img-curve1.png) no-repeat 0 0;
  height: 86px;
  width: 586px;
}

.curve2 {
  background: transparent url(../images/img-curve2.png) no-repeat 0 0;
  height: 213px;
  width: 748px;
}

#page-blurb {
  overflow: visible;
  position: relative;
}

#page-blurb h1 {
  padding-right: 102px;
/*  text-align: right; */
}

.curve1, .curve2, div.meltmedia, div.technology, div.design, div.back-to-front, div.contact {
  position: absolute;
}

div.meltmedia, div.technology, div.design, div.back-to-front, div.contact, div.folders, div.briefcase {
  text-indent: -9999px;
}

div.meltmedia {
  background: transparent url(../images/logo-meltmedia-lg.png) no-repeat 0 0;
  height: 124px;
  margin-top: 5px;
  margin-left: 150px;
  width: 124px;
}

div.technology {
  background: transparent url(../images/icon-services.png) no-repeat 0 0;
  height: 187px;
  margin-left: 115px;
  width: 195px;
}

div.design {
  background: transparent url(../images/icon-ourwork.png) no-repeat 0 0;
  height: 164px;
  margin-left: 115px;
  margin-top: -15px;
  width: 190px;
}

div.back-to-front {
  background: transparent url(../images/icon-company.png) no-repeat 0 0;
  height: 200px;
  margin-left: 130px;
  width: 189px;
}

div.contact {
  background: transparent url(../images/img-contact.png) no-repeat 0 0;
  height: 154px;
  margin-left: 101px;
  width: 200px;
}

div.folders, div.briefcase {
  float: left;
}

div.folders {
  background: transparent url(../images/img-folders-sm.png) no-repeat 0 0;
  height: 120px;
  margin: 15px 10px 0 0;
  width: 120px;
}

div.briefcase {
  background: transparent url(../images/img-briefcase-sm.png) no-repeat 0 0;
  height: 141px;
  margin: 0 10px 0 0;
  width: 154px;
}

/* =Content
-----------------------------------*/

#content-container {
  margin: 0 auto;
  width: 780px;
}

.content-column-left, .content-column, .content-column-right {
  float: left;
  position: relative;
}

.content-column-left, .content-column-right {
  height: 220px;
  width: 25px;
}

.content-column-left {
  background: transparent url(../images/content-lc.png) no-repeat 0 0;
}

.content-column {
  background: transparent url(../images/content-bg.png) repeat-x 0 0;
  padding: 25px 0 0 10px;
  min-height: 220px;
  width: 720px;
}

.content-left, .content-right {
  float: left;
  width: 345px;
}

.content-left h2, .content-right h2 {
  border-bottom: 0;
}

#content-container .content-left p, #content-container .content-right p {
  margin: 0;
  padding: 0;
  width: 100%;
}

.content-left {
  margin-right: 20px;
}

.content-column-right {
  background: transparent url(../images/content-rc.png) no-repeat 0 0;
}

.content-block {
  clear: left;
}

.content-block {
  padding-top: 4px;
}

.icon-column {
  float: left;
  margin-right: 20px;
}

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

#footer {
  float: none;
  color: #aec5dc;
  font-size: 70%;
  text-align: right;
  margin: 0 auto;
  padding-right: 120px;
}

#footer a:visited {
  color: #aec2d8;
}

/* Perma link */

#footer a.perma-link {
  background: transparent url(../images/link.png) no-repeat 0 0;
  color: #fff !important;
  padding-left: 20px;
  position: relative;
  display: inline-block;
}

/* =Splash
-----------------------------------*/

.curve1 {
  margin-left: 43px;
  top: 108px; /* meltmedia page position */
}

.curve2  {
  margin-left: 123px;
  top: 100px; /* meltmedia page position */
}

h1, .splash #page-blurb h2, #page-blurb h3, #page-blurb p {
  margin-left: 325px;
}

h1 {
  font-size: 230%;
/*  height: 23px; */
  padding-bottom: 1px;
}

h1.meltmedia {
  background: transparent url(../images/header-meltmedia.png) no-repeat 0 0;
  text-align: left !important;
  text-indent: -9999em;
  width: 134px;
}

#page-blurb h1.journey {
  font-size: 180%;
  text-align: left;
}

#page-blurb h1 {
  padding-right: 104px;
}

#page-blurb h2, #page-blurb h3 {
  color: #fff;
}

#page-blurb h3 {
  border-bottom: 0;
  font-size: 110%;
  font-style: italic;
  font-weight: bold;
  line-height: 130%;
}

#page-blurb p, #page-blurb h2, #page-blurb h3 {
  width: 525px;
}

#page-blurb p {
  margin-top: 20px;
}

#content-container {
  margin-top: 40px;
}

.download-pdf, .case-studies {
  position: relative;
}

.download-pdf {
  float: left;
  padding-left: 15px;
  width: 195px;
}

.case-studies {
  float:left;
  padding-left: 15px;
  width: 165px;
}

.splash .hidden-link1, .splash .hidden-link2 {
  display: block;
  position: absolute;
  text-indent: -9999em;
}

.splash .hidden-link1 {
  height: 122px;
  left: -132px;
  width: 120px;
  top: 12px;
}

.splash .hidden-link2 {
  height: 141px;
  left: -165px;
  width: 154px;
  top: 0;
}

/**
 * Form Styles
 */

form label {
  color: #fff;
  width: 20%;
  padding: 4px 1em 0;
}

form input,
form textarea {
  background: #a1bbd7;
  border: 1px solid #fff;
  color: #fff;
}

form textarea {
  height: 80px;
  overflow: auto;
}

form fieldset {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

input.button {
  float: right;
  width: 75px;
}

input.send {
  background: transparent;
  border: none;
  height: 55px;
  margin-right: 62px;
  position: relative;
  width: 109px;
}

input.reset {
  margin-right: 10px;
}

/**
 * Contact Info
 */

.contact-content {
  float: left;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 495px;
}

.vcard {
  color: #fff;
  font-size: .9em;
  margin-right: 15px;
  margin-top: 15px;
  padding-right: 10px;
}

.vcard a {
  color: #fff;
}

.vcard .map {
  color: #AEC2D8;
  font-size: 1.1em;
}

.vcard .map:hover {
  text-decoration: underline;
}

.vcard .map span {
  font: normal 12px "Times New Roman", Helvetica, sans-serif;
}

.vcard .fn {
  font-size: 1.25em;
}

.vcard .adr, .vcard .tel {
  font-size: 1.0em;
}

.vcard .adr {
  margin-bottom: 15px;
}

.vcard .locality, .vcard .region {
  padding-right: 4px;
}

.content-space {
  padding-top: 15px;
}

.about-content {
  float: left;
  width: 70%;
  padding-left: 10px;
}

.about-content p {
  line-height: 155%;
}

.client-content {
  float: left;
  width: 70%;
  padding-left: 10px;
}

.client-content ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

/**
 * Effect classes
 */

.home-blob {
  height: 125px;
}

/* !important applied to override previous things that are going on globally throughout the site, this is a special case only to be used as needed. */

.home-blob h1 {
  font-size: 180% !important;
  height: auto;
  line-height: 130%;
  text-align: left !important;
}

.mac.gecko .home-blob h1 {
  font-size: 170% !important;
}

.home-blob h3 {
  font-style: normal !important;
  margin-top: 15px !important;
}

.home-blob p {
  margin-top: 0 !important;
  text-align: left !important;
}

/* special case ended */

.case-blob {
  height: 10px;
}

.case-blob h1 {
  margin-left: 120px;
}

.tech-blob {
  height: 210px;
}

.design-blob {
  height: 80px;
}

.approach-blob {
  height: 165px;
}

.contact-blob {
  height: 10px;
}

.contact-blob h1 {
  margin-left: 120px;
}

.closed, .hide {
  display: none;
}


/**
 * Error messaging
 */

.errorBox {
  background: #FFD8D8;
  border: 1px solid #FFA5A5;
  color: #E06161;
  padding: 0px 5px;
  width: 175px;
}

/**
 * Case Study
 */

#case-study,
#news-feed {
  margin-top: 10px;
}

#news-feed {
  float: left;
  width: 720px;
}

#news-feed.brief-news-feed {
  float: left;
  width: 190px;
}

span.headline {
  color: #AEC2D8;
  display: block;
  font-size: 1.2em;
  margin-bottom: 15px;
}

#news-feed.brief-news-feed h2 {
  font-size: 1em;
}

.left-separator {
  background: transparent url("../images/left-shadow-separator.png") no-repeat left top;
  min-height: 235px;
  padding-left: 20px;
}

.right-separator {
  background: transparent url("../images/right-shadow-separator.png") no-repeat right top;
  min-height: 235px;
  margin-right: 20px;
}

#case-study.brief-segment-study {
  float: left;
  margin-right: 15px;
  width: 494px;
}

#case-study.brief-segment-study h2 {
  font-size: 1.2em;
}

#case-study.brief-segment-study img {
  float: left;
  margin-right: 15px;
}

#case-study.narrow-segment-study {
  float: left;
  width: 494px;
}

#case-study.narrow-segment-study img {
  float: left;
  margin-right: 15px;
}

#case-study .case-study-list {
  color: #fff;
  list-style-type: none;
  margin: 0;
  text-align: center;
  width: 125px;
}

#case-study .case-study-list-mask {
  float: left;
  height: 210px;
  margin-right: 10px;
  overflow: hidden;
  width: 125px;
}

#case-study .case-study-list a, #case-study .case-study-list span {
  line-height: 130%;
  font-size: 90%;
}

#case-study .case-study-list a {
  color: #fff;
  display: block;
}

#case-study .case-study-list li {
  padding: 5px 0;
  width: 125px;
}

#case-study .case-study-list .first,
#case-study .case-study-list .fifth {
  opacity: .34;
  filter: alpha(opacity=34);
}

#case-study .case-study-list .second,
#case-study .case-study-list .fourth {
  clear: left;
  opacity: .50;
  filter: alpha(opacity=50);
}

#case-study .case-study-list .third {
  display: block;
}

#case-study .controls {
  float: left;
  margin: 85px 10px 0 5px;
}

#case-study .controls a {
  display: block;
  height: 18px;
}

#case-study .controls a.down {
  margin-top: 10px;
}

#case-study .case-study-content img,
#news-feed .news-feed-content img {
  float: left;
  margin-right: 20px;
}

#case-study .case-study-info,
#news-feed .news-feed-info {
  float: left;
  width: 305px;
}

#case-study .case-study-info {
  width: 320px;
}

.case-study-info li {
  color: #fff;
  font-size: 90%;
  line-height: 170%;
  list-style: disc;
  margin-bottom: 10px;
}

.case-study-info p, .news-feed-info p {
  line-height: 145%;
}

.news-feed-info p {
  padding-right: 6px;
}

div.narrow-segment-study .case-study-info {
  width: 320px !important;
}

div.segment-study .case-study-info,
div.news-feed .news-feed-info {
  width: 475px !important;
}

.case-study-nav,
.news-feed-nav {
  float: left;
  line-height: 0;
  margin-bottom: 10px;
}

.narrow-segment-study .case-study-nav {
  float: right;
  margin-right: -20px;
  margin-bottom: -10px;
  margin-top: -10px;
  position: relative;
  z-index: 10;
}

.segment-study .case-study-nav,
.news-feed .news-feed-nav {
  float: right;
  margin-right: 10px;
  margin-bottom: 0px;
  position: relative;
  z-index: 10;
}

.case-study-content .case-study-cases {
  float: left;
  margin-left: 0;
}

.case-study-content .case-study-cases,
.case-study-content .case-study-cases li,
.segment-study .case-study-nav li,
.narrow-segment-study .case-study-nav li,
.news-feed .news-feed-nav li {
  float: left;
  list-style: none;
}

.case-study-content h3 {
  border: 0;
  color: #fff;
  font-style: italic;
  margin: 0 0 7px;
  text-transform: none;
}

.case-study-nav a,
.news-feed-nav a {
  background: transparent url(../images/square-inactive.png) 0 0 no-repeat;
  display: block;
  height: 10px;
  margin: 0 5px 0 0;
  text-indent: -9999px;
  width: 10px;
}

.case-study-nav a.active,
.case-study-nav a:hover,
.news-feed-nav a.active,
.news-feed-nav a:hover {
  background: transparent url(../images/square-active.png) 0 0 no-repeat;
}

.case-study .case-study-nav a {
  background: transparent url(../images/circle-inactive.png) 0 0 no-repeat;
}

.news-date {
  border-right: 1px solid #fff;
  color: #aec2d8;
  font-size: 80%;
  margin-right: 8px;
  padding-right: 8px;
}

.case-study .case-study-nav a.active,
.case-study .case-study-nav a:hover {
  background: transparent url(../images/circle-active.png) 0 0 no-repeat;
}

.case-study-img {
  float: left;
  height: 269px;
  width: 241px;
}

.more-info {
  margin-right: 5px;
}

#more-info span {
  font: normal 120% "Times New Roman", Helvetica, sans-serif;
}

.case-study-content p a:hover,
.news-feed-content p a:hover {
  text-decoration: underline;
}


/* =Client-List
-----------------------------------*/

.client-list {
  color: #aec2d8;
  margin-left: 20px;
  position: relative;
}

.client-list li {
  list-style-type: disc;
  margin-left: 15px;
}

.client-list li span, .client-list li span {
  color: #fff;
}

/**
 * Image Viewer CSS
 */

.mm-image-viewer {
    float: left;
    height: 422px;
    position: absolute;
    width: 522px;
    z-index: 9999;
}

.mm-image-viewer .iv-frame div {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);
    float: left;
    margin: 0;
    padding: 0;
}

.mm-image-viewer .iv-frame .iv-tl-corner {
    background: url("../images/corner-tl.png") no-repeat 0 0;
    height: 11px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-tr-corner {
    background: url("../images/corner-tr.png") no-repeat 0 0;
    height: 11px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-bl-corner {
    background: url("../images/corner-bl.png") no-repeat 0 0;
    clear: left;
    height: 11px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-br-corner {
    background: url("../images/corner-br.png") no-repeat 0 0;
    height: 11px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-top {
    background: url("../images/side-t.png") repeat-x 0 0;
    height: 11px;
    width: 500px;
}

.mm-image-viewer .iv-frame .iv-left {
    background: url("../images/side-l.png") repeat-y 0 0;
    clear: left;
    height: 300px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-right {
    background: url("../images/side-r.png") repeat-y 0 0;
    height: 300px;
    width: 11px;
}

.mm-image-viewer .iv-frame .iv-bottom {
    background: url("../images/side-b.png") repeat-x 0 0;
    height: 11px;
    width: 500px;
}

.mm-image-viewer .iv-frame .iv-viewer {
    background: #ffffff url(../images/ajax-loader.gif) no-repeat center;
    filter: none !important;
    height: 300px;
    width: 500px;
}

.mm-image-viewer .iv-frame .iv-viewer img {
    background: #fff;
    filter: none !important;
    float: left;
}

.mm-image-viewer .iv-close-btn {
    background: url("../images/btn-close.png") no-repeat 0 0;
    display: block;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);
    float: right;
    height: 25px;
    margin: -7px 20px 0 0;
    position: relative;
    width: 65px
}

.ajax-loader {
    color: #fff;
    font-weight: normal;
    position: absolute;
}


/* =Download-Case-Study
-----------------------------------*/

.acrobat {
  background: transparent url(../images/img-icon-acrobat.png) no-repeat 0 0;
  display: inline-block;
  height: 16px;
  padding: 2px 0 0 22px;
}

/* services */

.services-list {
  color: #ffffff;
  float: left;
  width: 180px;
}

.services-list h2 {
  font-size: 1.2em;
}

.services-list ul {
  font-size: .9em;
  list-style-type: disc;
}

.partner h3 {
  border: none;
  color: #ffffff;
  font-weight: bold;
  padding: 0;
}

.partner .title {
  display: block;
  margin-top: -13px;
  text-align: right;
}

/* Social Media Icons */

#social-media {
  clear: both;
  float: right;
  margin-right: 100px;
  margin-top: 20px;
  margin-bottom: -20px;
  position: relative;
  z-index: 100;
}

#social-media ul li {
  display: block;
  float: left;
  margin-right: 5px;
}

.icon {
  background: transparent url(../images/social-icons.gif) no-repeat top left;
  display: block;
  height: 30px;
  text-indent: -9999px;
  width: 30px;
}

.facebook {
  background-position: 0 0;
}

.twitter {
  background-position: 0 -30px;
}

.rss {
  background-position: 0 -90px;
}

.linkedin {
  background-position: 0 -60px;
}

.blog {
  background-position: 0 -120px;
}