/* 
Global Stylesheet for MKM Graphic Design
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic,700italic,700,600italic,600,400italic,300italic,300&subset=latin,latin-ext);

/* Resets 
--------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul {list-style: none;}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
ins{background-color:#ff9;color:#707070;text-decoration:none}
mark{background-color:#ff9;color:#707070;font-style:italic;font-weight:bold}
del{color: #333;text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
caption,th,td {font-weight: normal;text-align: left;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
small {font-size: smaller;}
audio,canvas,video {display: inline-block;}
audio:not([controls]) {display: none;}
img {border: 0;-ms-interpolation-mode: bicubic;}
hr {background-color: #ccc;border: 0;height: 1px; margin: 24px; margin-bottom: 1.714285714rem;}input,select{vertical-align:middle}
strong, b {font-weight: bold;}


/* Clearing floats */
.clear:after{clear: both;}
.clear:before,.clear:after{display: table;content: "";}


/*Basic
-------------------- */
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html,body {margin:0; padding:0;}
body {min-width:1024px; background:#ebe6df url(../img/bg.png) repeat; font-size: 16px;font-size: 1rem; font-family: 'Open Sans', sans-serif; color:#090909;text-rendering: optimizeLegibility;}

a {color:#090909; outline:none; text-decoration:none;}
a:hover {color:#bf8c04; text-decoration:none;}

h1,h2,h3,h4,h5,h6 {clear:both; font-weight:800; color:#000;}

p {line-height:1.7; margin:10px 0; margin:0.625rem 0;}



/* Site General Structure 
------------------------------ */

#wrapper {width:100%; position:absolute;}
#main {width:100%; float:left; position:relative;}
#container {width:1239px; margin:0 auto;}
#primary {width:100%; float:left; position:relative;}
#whiteBar {width:100%; background:#fff; height:101px; float:left; margin:0 0 25px; margin:0 0 1.5625rem;}


/* Top Contact, Branding, Navigation 
-------------------------------------------- */

/* - Top Contact- */
#top-contact-info {width:100%; float:left; margin:20px 0; margin:1.25rem 0;}
#contact-info {width:1239px; margin:0 auto;}
#email-phone {width:410px; float:right; /*margin-right:30px; margin-right:1.875rem;*/}
#email-phone ul {margin:0; padding:0;}
#email-phone li {color:#bf8c04; font-size:12px; font-size:0.75rem; text-align:right; text-transform:lowercase; float:left; font-weight:bold; padding:3px 15px; padding: 0.1875rem 0.9375rem;}
#email-phone li a {color:#bf8c04; text-decoration:none;}
#email-phone li a:hover {text-decoration:underline;}
#email-phone li.first {border-right:2px solid #c2b8ab; padding-left:0;}
#email-phone li.last {padding-right:0;}

/* - Branding- */
#branding {width:1239px; margin:0 auto;}
#logo {width:141px; float:left; margin-right:15px; margin-right:0.9375rem;}
#logo h1 {height:101px;}
#logo h1 a {display:block; text-indent:-9999px; background:url(../img/logo.gif) no-repeat; width:141px; height:101px;}
#logo-tagline {width:294px; float:left;}
#logo-tagline h2 {height:101px;}
#logo-tagline h2 a {display:block; text-indent:-9999px; width:294px; height:101px; background:url(../img/tag.gif) no-repeat;}


/* - Navigation- */
nav {float:right; padding:0; width:628px; margin:35px 0 0; margin:2.1875rem 0 0;}
nav li {float:left;}
#navigation a{background:url(../img/nav.png) no-repeat 0 0; height:43px; display:block; text-indent:-9999px;}
#navigation a#packaging {background-position:0 0; width:90px;}
#navigation a#logos {background-position:-90px 0; width:90px;}
#navigation a#environments {background-position:-180px 0; width:140px;}
#navigation a#prints {background-position:-320px 0; width:90px;}
#navigation a#web {background-position:-410px 0; width:125px;}
#navigation a#illustrations {background-position:-535px 0; width:90px;}

#navigation a#packaging:hover, #navigation a#packaging.active {background-position:0 -43px; width:90px;}
#navigation a#logos:hover, #navigation a#logos.active {background-position:-90px -43px; width:90px;}
#navigation a#environments:hover, #navigation a#environments.active {background-position:-180px -43px; width:140px;}
#navigation a#prints:hover, #navigation a#prints.active {background-position:-320px -43px; width:90px;}
#navigation a#web:hover, #navigation a#web.active {background-position:-410px -43px; width:125px;}
#navigation a#illustrations:hover, #navigation a#illustrations.active {background-position:-535px -43px; width:90px;}



/* --------------------------------------------------------------------------- */


/* Homepage 
--------------------- */


/* - Banner- */
#banner {width:100%; float:left; margin:0;}
#imgs {padding:10px; padding:0.625rem; float:left; background:#fff; width:1219px;}
#col-left {width:146px; float:left; margin-right:10px; margin-right:0.7143rem;}
#col-mid {width:711px; float:left; margin-right:10px; margin-right:0.7143rem;}
#col-mid-right {width:240px; float:left; margin-right:10px; margin-right:0.7143rem;}
#col-right {width:84px; float:left;}
#col-left .top, #col-mid-right .top, #col-right .top, #col-right .mid {width:100%; float:left; margin-bottom:10px; margin-bottom:0.7143rem;}
#col-left .btm, #col-mid-right .btm, #col-right .btm {width:100%; float:left;}



/* - Content- */
#content-entry {width:1219px; margin:30px 0 20px 10px; margin:1.875rem 0 1.25rem 0.625rem; float:left;}
#content-column-left {width:710px; float:left; position:relative; border-right:2px solid #c2b8ab;}
#content-column-right { width:507px; float:left; position:relative;}
#entry {width:670px; float:left;}

/* - Content Headers- */
#entry h1 {font-size:22px; font-size:1.375rem; text-transform:uppercase; width:155px; float:left;}
#entry-header-line {width:515px; background:url(../img/hd_line.png) repeat-x 0px 10px; float:left; height:15px;}
#entry section {width:100%; float:left; position:relative;}
#entry section p {font-size:21px; font-size:1.25rem; line-height:1.2; margin-right:15px; /*margin-right:0.685rem;*/}

/* Process Section */

#process-entry {width:669px; float:left; padding:10px; padding:0.625rem; background:#fff; margin:10px 0 0; margin:0.625rem 0 0;}
#processBG{width:100%; float:left; background:url(../img/process.gif) no-repeat center; height:323px;}
#process-details {width:325px; margin:70px 0 10px 15px; margin:4.375rem 0 0.625rem 0.9375rem; float:left;}
#process-contact-details {width:285px; margin:145px 0 10px 35px; margin:9.0625rem 0 0.625rem 2.5rem; float:left;}
#process-details p, #process-contact-details p {color:#000; font-weight:bold; font-size:12px; font-size: 0.85714rem; line-height:1.5;}
#process-details p { margin:0;}

#process-contact-details ul {margin:0; padding:0; margin-top:30px; margin-top:1.875rem;}
#process-contact-details li {list-style:none; margin-bottom:5px; margin-bottom:0.3125rem; font-size:13px; font-size: 0.92857rem; }

/* Awards */
#awards-entry {width:490px; float:left; margin-left:35px; margin-left:2.1875rem;}
#awards-entry h1 {font-size:22px; font-size:1.375rem; text-transform:uppercase; width:113px; float:left;}
#awards-entry-header-line {width:360px; background:url(../img/hd_line.png) repeat-x 0px 10px; float:left; height:15px;}
#award-lists {width:100%; float:left; margin:10px 0; margin:0.625rem 0;}
#award-lists h3 {font-size:15px; font-size:0.9375rem; font-weight:normal; margin-bottom:5px; margin-bottom:0.3125rem;}
#award-lists h3 span {color:#bf8c04;}

#award-lists h3 a {color:#090909; text-decoration:none;}
#award-lists h3 a:hover {color:#bf8c04;}
#award-lists ul {margin:0 40px 20px 45px; margin: 0 2.5rem 1.25rem 2.8125rem;}
#award-lists li {margin:0 0 5px; margin:0 0 0.3125rem; list-style:disc; font-size:15px; font-size:0.9375rem; line-height:1; }


/* -------------------------------------------------------------------------------- */


/* Portfolio Pages
--------------------------- */
#slider-frame {width:100%; float:left; margin:0; position:relative; z-index:1;}
#main-photo-slider {width:1219px; padding:10px; padding:0.625rem; float:left; background:#fff;}
#slider-shadow {width:1219px; height:86px; position:absolute; z-index:9999; left:0; top:318px; margin-left:10px; margin-left:0.7142rem; }

#slider-category {width:160px; min-height:150px; float:left; margin:20px 0 20px 10px; margin:1.25rem 0 1.25rem 0.625rem; background:url(../img/line.png) no-repeat right top;}
#slider-category h2 {font-size:22px; font-size:1.375rem; text-transform:uppercase; padding:10px 0; padding:0.625rem 0;}

#slider-category.pac {width:155px;}
#pac.flex-caption {left:180px;}

#slider-category.log {width:100px;}
#log.flex-caption {left:120px;}

#slider-category.envir {width:200px;}
#envir.flex-caption {left:220px;}

#slider-category.pri {width:90px;}
#pri.flex-caption {left:110px;}

#slider-category.webs {width:130px;}
#webs.flex-caption {left:150px;}

#slider-category.ill {width:200px;}
#ill.flex-caption {left:220px;}


.flex-caption h1{font-size:24px; font-size:1.5rem; line-height:1.5;}
.flex-caption h2{font-size:18px; font-size:1.125rem; line-height:1.5; margin-bottom:5px; margin-bottom:0.3125rem; }
.flex-caption h3{font-size:15px; font-size:0.9375rem; font-weight:bold; text-transform:uppercase;}
.flex-caption h4{font-size:15px; font-size:0.9375rem; font-weight:normal; margin-bottom:5px; margin-bottom:0.3125rem; line-height:1;}
.flex-caption h4 span {font-family:arial !important;}


/* -------------------------------------------------------------------------------- */



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

footer {width:100%; float:left; margin:0; margin-top:10px; margin:0.625rem;}
footer#inner {margin:20px 0 10px 10px; margin:1.42857rem 0 0.625rem 0.625rem;}
#footer-line {float:left; height:15px; width:362px; background:url(../img/footer_line.png) no-repeat 0px 10px;}
#copyright {width:495px; float:left;}
#copyright p {text-align:center; text-transform:uppercase; margin:0; font-size:15px; font-size:0.9375rem; font-weight:500;}