/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2009/12/03
   Last updated by:  Matt Wilcox
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset
   NOTE:       Get browsers to the same baseline styles, based on (but not the same as) Eric Meyer's browser reset.
   REFERENCE:  http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0; padding: 0; border: 0; outline: 0;
     font-size: 100%; vertical-align: baseline; background: transparent; }
   body {
     line-height: 1; }
   ol, ul {
     list-style: none; }
   blockquote, q {
     quotes: none; }

   /* turn off outline for clicked links, whilst leaving it on for keyboard navigation */
   a:active { outline: none; }

   /* remember to highlight inserts somehow! */
   ins {
     text-decoration: none; }
   del {
     text-decoration: line-through; }

   /* tables still need 'cellspacing="0"' in the markup */
   table {
     border-collapse: collapse; border-spacing: 0; }

/* =typography
    NOTE:       Found that margin-top applied to everything is a pain - it often messes up layout and requires jumping
                through hoops to fix, so I've stopped doing this as a default and now add top margin manually when required.
    NOTE:       Using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK.
                Feel free to tut if you're a purist. I'm a pragmatist.
    REFERENCE:  Based on http://alistapart.com/articles/settingtypeontheweb/
                         http://24ways.org/2006/compose-to-a-vertical-rhythm/
   ----------------------------------------------------------------------------------------------------------------------- */
    
   body {
     font : 100%/1.5 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; color : #666; }
   html > body {
     font-size : 16px; line-height : 24px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1 { font-size : 36px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h2 { font-size : 24px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 18px; line-height: 18px; margin-bottom: 18px;
     font-weight : normal; }
   /* fix safari to stop it rendering light text on dark backgrounds too fat
   body { -webkit-text-stroke : 1px transparent; } */
   
   
/* =basic_design
   NOTE:  The basic design section styles "default" elements, that is, how a <p> or <em> etc look by default, without
          any page or class specific over-rides.
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =patch old browsers for new HTML5 tags */
   header, footer, nav, article, section, aside {
     display : block; }
     
/* =html =body */
   html {
   /*  background : url(../images/html.png) 0 100% repeat-x;*/ /* the footer graphic */ }
   body {
     padding : 30px 0 90px;
     background-color :#efefef; background-position : 50% 0; }

/* =p */
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dotted #666; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   .attributed p {
     margin-bottom : 0; }
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
   p.intro {
     font-size : 20px; line-height : 25px; color : #acc500; }
   p.pullquote {
     width : 220px; margin-bottom : 0;
     font-size : 26px; line-height : 39px; color : #acc500; }
     
/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
     border-left : .3em solid #ddd; padding : .5em 0 0 .7em; }
   
/* =ul */
   #content ul {
     margin-left : 1.2em;
     list-style : disc outside; }
   
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
     
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #4F4C45; text-decoration : none; }
   a:visited { color : #4F4C45; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { background-color : #ff9; color : #333; }
   a:active  { background-color : #ff6; color : #000; outline : none; }
   :target   { background-color : #ff6; }
   
   #content_main p a, body.item #content_supp p a { color : #CDAB97; }
   body #content_main p .readmore a { color : #CDAB97; font-size : 11px; }
   
/* =img */
   a img {
     display : block; margin : 0; }
     
/* =div */
   #container {
     position : relative;
     width : 900px; margin : 0 auto 30px; padding : 20px;
     background-color : #fff; /* url(../images/texture.jpg) 0 0; */
     -moz-box-shadow : 0 0 20px rgba(0, 0, 0, 0.1); -webkit-box-shadow : 0 0 20px rgba(0, 0, 0, 0.1); -o-box-shadow : 0 0 20px rgba(0, 0, 0, 0.1); box-shadow : 0 0 20px rgba(0, 0, 0, 0.1); }
   #content_main {
     letter-spacing : .4px;}
     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
   .hiddenFields {
     display : none; }
     
/* =modules
   NOTE:       Flirting with a CSS Object Orientated approach; use classes to define the styles rather than page-based cascades.
               This helps ensure that "widgets" and things can be used on ANY page and still look correct.
               I have a number of reservations with the "full" approach though, hence this watered down version.
   REFERENCE:  http://wiki.github.com/stubbornella/oocss/faq
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* website header */
   #site_context  {
     height : 200px; margin-bottom : 0; }
   #site_context .company {
     position : absolute; top : 30px; right : 20px;
     display : block; width : 240px; height : 42px; margin : 0; padding : 0; }
   #site_context .company a {
     position : absolute; top : 0; left : 0;
     display : block; padding : 5px; width : 230px; height : 32px; text-indent : -999em; overflow : hidden; }
   #site_context .company a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 100%; height : 100%;
     background : url(../images/mostyn.png) 0 0 no-repeat; }
     
/* website footer */
   #site_info {
     position : relative;
     width : 900px; margin : 0 auto; padding : 20px;
     background-color : #fff; line-height : 18px; font-size : 12px;
     -moz-box-shadow : 0 0 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow : 0 0 20px rgba(0, 0, 0, 0.05); -o-box-shadow : 0 0 20px rgba(0, 0, 0, 0.05); box-shadow : 0 0 20px rgba(0, 0, 0, 0.05); }
   #site_info h2,
   #site_info h3 {
     display : none; }
     
   #site_info .col1 {
     float : left;
     width : 172px; margin-bottom : 0; }
   #site_info .col1 div {
     margin-bottom : 0; }
   #site_info .col2 {
     float : left;
     width : 154px; margin-right : 10px;
     color : #cdab71; }
   #site_info .col2 span,
   #site_info .col2 a {
      color : #000; text-decoration : none; }
    
   #site_info ul {
     float : left;
     margin : 0 17px 0 0; width : 100px; }
   #site_info ul li {
     margin : 0; list-style-type : none; }
   #site_info ul li a {
     text-transform : uppercase; }
   #site_info ul:nth-child(2) {
     width : 80px; }
     
   #site_info ul#socialmedia {
     width : auto; margin : 0 20px 0 0; }
   #site_info ul#socialmedia li {
     margin-top : 9px; }
   #site_info ul#socialmedia li:first-child {
     margin-top : 0; }
     
   #site_info div.opening_times {
     float : left;
     width : 138px; margin-bottom : 0; }
   #site_info div.opening_times p {
     margin-bottom : 0; }
     
   div.vcard {
     float : left;
     margin : 0 20px 0 0; width : auto; padding-left : 20px; border-right : 1px solid #ccc; border-left : 1px solid #ccc;
     text-transform : uppercase; letter-spacing : .4px; }
   p.viewcreative {
     position : absolute; bottom : -40px; right : 0px;
     margin-bottom : 0; opacity : .5; color : #999; }
   p.viewcreative:hover {
     opacity : 1; }
   p.viewcreative a {
     color : #336; }
     
/* =nav_main */
   #nav_main,
   #nav_sub {
     position : absolute; top : 120px; left : 20px;
     height : 11px; width : 900px; margin : 0; padding-bottom : 19px; border-bottom : 1px solid #a1a1a1;
     line-height : 11px; font-size : 11px; letter-spacing : .8px; text-transform : uppercase; font-weight : bold; color : #cdab71; }
   #nav_main h2 {
     display : none; }
   #nav_main a,
   #nav_sub a {
     position : relative;
     display : inline-block; height : 14px; padding : 0; color : #444; }
   #nav_main a.current,
   #nav_sub a.current,
   #nav_sub .here a {
     color : #cdab71; }
     
/* =nav_sub */
   #nav_sub {
     top : 167px;
     border-bottom : 0px solid #444; padding-bottom : 18px; /* 2px */ }
   #nav_sub a {
     font-weight : normal; }
   #nav_sub li {
     float : left;
     margin-right : 4px; }
     
/* =language_switch */
   #language_switch a {
     position : absolute; top : 30px; left : 20px;
     height : 14px; margin : 0; padding-bottom : 0;
     line-height : 14px; font-size : 10px; letter-spacing : .5px; text-transform : uppercase; color : #bdbcb4; }

/* =site_search */
   #site_search {
     position : absolute; top : 112px; right : 20px; }
   #site_search fieldset > input {
     margin-top : 4px; }
     
   #site_search label > input {
     position : relative; top : -6px;
     display : inline-block; width : 211px; margin : 0; border : 1px solid #fff; padding : 2px 0; border-bottom-color : #a1a1a1; }
   #site_search label span {
     position : absolute; left : -999em; overflow : hidden; }
     
   
/* =widgets */
     
/* =content_images */
   div.attributed img {
     display : block; margin-bottom : 0; }
   div.attributed p {
     font-size : 13px; margin-top : 4px; }
     
     
/* =news_summary */
     
/* comment_form */
   
/* =comments */
     
/* =pages | layout for specific pages
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =home */
   body.home #site_context {
     height : 154px; }
   body.home #container {
     padding-bottom : 1px;
     -moz-box-shadow : 0 0 20px rgba(0, 0, 0, 0.25); -webkit-box-shadow : 0 0 20px rgba(0, 0, 0, 0.25); -o-box-shadow : 0 0 20px rgba(0, 0, 0, 0.25); box-shadow : 0 0 20px rgba(0, 0, 0, 0.25); }
   body.home #content,
   body.home #content_main,
   body.home #content_main img {
     margin-bottom : 0; }
   body.home #content_main img {
     display : block; }
     
   body.home #promo {
     overflow : hidden; }
   body.home #promo > div {
     margin-bottom : 0; }
   body.home #promo > div,
   body.home #nav_boxes > div {
     background : #ccc url(../images/ajax-loader.gif) 50% 50% no-repeat; }
   body.home #p_1 {
     float : left;
     width : 520px; min-height : 360px; }
   body.home #p_1 a,
   body.home #p_2 a {
     position : relative;
     display : block; margin : 0; height : 360px; }
   body.home #p_1 a > div,
   body.home #p_2 a > div {
     position : absolute; bottom : 0; left : 0;
     margin : 0; width : 100%; height : auto;
     background-color : rgb(30,30,30); background-color : rgba(0,0,0,.75); color : #ddd; }
   body.home #promo > div > a > div {
     opacity : 0;
     -moz-transition : all .5s ease-in-out;
     -webkit-transition : all .5s ease-in-out;
     -o-transition : all .5s ease-in-out;
     -ms-transition : all .5s ease-in-out;
     transition : all .5s ease-in-out; }
   body.home #promo > div > a:hover > div,
   body.home #promo > div > a:focus > div,
   body.home #nav_boxes a:hover p,
   body.home #nav_boxes a:focus p {
     opacity : 1; }
   body.home #promo h2 {
     margin : 6px 10px 0 10px; text-transform : uppercase; }
   body.home #promo p {
     margin : 0 10px 12px 10px; }
   
   body.home #p_2 {
     float : right;
     width : 360px; min-height : 360px;
     background-color : #ccc; }
   
   body.home #nav_boxes {
     margin-left : -20px;
     overflow : hidden; }
   body.home #nav_boxes > div {
     float : left;
     width : 210px; margin : 0 0 0 20px; height : 200px;
     text-align : left; }
   body.home #nav_boxes > div a {
     position : relative;
     display : block; width : 100%; height : 200px; }
   body.home #nav_boxes h2 {
     position : absolute; top : 0px; left : 0;
     padding : 0; width : 210px;
     font-size : 14px; background-color : #fff; text-transform : uppercase; z-index : 2;
     opacity : 0;
     -moz-transition : opacity .5s ease-in-out;
     -webkit-transition : opacity .5s ease-in-out;
     -o-transition : opacity .5s ease-in-out;
     -ms-transition : opacity .5s ease-in-out;
     transition : opacity .5s ease-in-out; }
   body.home #nav_boxes > div a:hover h2,
   body.home #nav_boxes > div a:focus h2 {
     opacity : 1; text-decoration : none; }
   body.home #nav_boxes p {
     position : absolute; bottom : 6px; right : 6px;
     padding : 0 6px 2px 6px; margin : 0;
     font-size : 12px; background-color : rgb(30,30,30); background-color : rgba(0,0,0,.75); color : #ddd; z-index : 3; }
     
   /* kill underlines on hover/focus for these anchors */
   body.home #nav_boxes > div a:hover,
   body.home #nav_boxes > div a:focus,
   body.home #promo > div > a:hover,
   body.home #promo > div > a:focus {
     text-decoration : none; }
     
   /* if CSS animations are supported, hide the anchors before they load */
   html.cssanimations body.home #promo > div > a,
   html.cssanimations body.home #nav_boxes > div > a { opacity : 0; }
     /* oh, and set the text to visible so the client doesn't worry about people not understanding they're a link
     html.cssanimations body.home #promo > div > a > div { opacity : 1; } */
   
   /* when the anchor graphics have finished loading then run the reveal animations */
   html.cssanimations body.home.load-complete #promo > div > a,
   html.cssanimations body.home.load-complete #nav_boxes > div > a {
     -webkit-animation : loader 1s ease-in-out .5s 1 both;
     -moz-animation : loader 1s ease-in-out .5s 1 both;
     animation : loader 1s ease-in-out .5s 1 both; }
   html.cssanimations body.home.load-complete #promo > div#p_2 > a {
     -webkit-animation-delay : .7s; -moz-animation-delay : .7s; animation-delay : .7s; }
   html.cssanimations body.home.load-complete #nav_boxes > div#nb_1 > a {
     -webkit-animation-delay : .9s; -moz-animation-delay : .9s; animation-delay : .9s; }
   html.cssanimations body.home.load-complete #nav_boxes > div#nb_2 > a {
     -webkit-animation-delay : 1.1s; -moz-animation-delay : 1.1s; animation-delay : 1.1s; }
   html.cssanimations body.home.load-complete #nav_boxes > div#nb_3 > a {
     -webkit-animation-delay : 1.3s; -moz-animation-delay : 1.3s; animation-delay : 1.3s; }
   html.cssanimations body.home.load-complete #nav_boxes > div#nb_4 > a {
     -webkit-animation-delay : 1.5s; -moz-animation-delay : 1.5s; animation-delay : 1.5s; }
     
     /* and then hide the text sequentially to reveal uncluttered graphics
     Alas this doesn't work properly, horrendously buggy. It fades out fine, but then when we try and use CSS Transitions
     on hover to fade the text in and out FF goes a bit mental, and Chrome resolutly refuses to do anything.
     
     html.cssanimations body.home.load-complete #promo > div > a > div ,
     html.cssanimations body.home.load-complete #nav_boxes > div > a > h2 {
       -webkit-animation : hider 1s ease-in-out 3s 1 both;
       -moz-animation : hider 1s ease-in-out 3s 1 both;
       animation : hider 1s ease-in-out 3s 1 both;
     }
     body.home.jquery.load-complete #promo > div#p_2 > a > div {
       -webkit-animation-delay : 3.3s; -moz-animation-delay : 3.3s; animation-delay : 3.3s; }
     body.home.jquery.load-complete #nav_boxes > div#nb_1 > a > h2 {
       -webkit-animation-delay : 3.5s; -moz-animation-delay : 3.5s; animation-delay : 3.5s; }
     body.home.jquery.load-complete #nav_boxes > div#nb_2 > a > h2 {
       -webkit-animation-delay : 3.7s; -moz-animation-delay : 3.7s; animation-delay : 3.7s; }
     body.home.jquery.load-complete #nav_boxes > div#nb_3 > a > h2 {
       -webkit-animation-delay : 3.9s; -moz-animation-delay : 3.9s; animation-delay : 3.9s; }
     body.home.jquery.load-complete #nav_boxes > div#nb_4 > a > h2 {
       -webkit-animation-delay : 4.1s; -moz-animation-delay : 4.1s; animation-delay : 4.1s; } */
     
/* =contact */
     
/* =news */

/* =whatson */
   body.whatson h1 {
     margin-bottom : 40px; }
   body.whatson h1,
   body.whatson h2,
   body.whatson .show_dates,
   body.whatson .readmore,
   body.blog h1 {
     font-size : 36px; line-height : 36px; color : #cdab71; text-transform : uppercase; font-family : "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial; font-weight : 200; letter-spacing : .05em; }
   body.whatson #content_main div {
     margin-bottom : 0; }
   body.whatson #content_main > div {
     margin-bottom : 40px;
     overflow : hidden; }
   body.whatson #content_main > div img {
     margin : 0; }
     
   body.whatson h2 {
     margin-bottom : 6px;
     font-size : 24px; line-height : 24px; color : #444; font-weight : normal; }
   body.whatson h2 span,
   body.whatson .artist {
     font-size : 12px; line-height : 12px; color : #bcbcbc; }
   body.whatson .show_dates {
     font-size : 18px; line-height : 18px; color : #bcbcbc; font-weight : normal; }
     
   body.whatson #content_main > div.exhibition_display_one img {
     margin-bottom : 20px; }
   body.whatson .exhibition_display_one .details {
     float : left;
     width : 300px; }
   body.whatson .exhibition_display_one .excerpt {
     float : right;
     width : 450px;
     font-size : 12px; line-height : 16px; }
     
   body.whatson .exhibition_display_two,
   body.whatson .exhibition_display_one {
     position : relative; padding-left : 125px;
     overflow : hidden; }
   body.whatson .exhibition_display_two div {
     float : left;
     width : 350px;
     font-size : 12px; line-height : 16px; }
   body.whatson .exhibition_display_two img {
     float : right; }
   body.whatson .readmore {
     font-size : 12px; line-height : 12px; }
     
   body.whatson .gallery {
     position : absolute; top : 3px; left : 0;
     font-family : "Myriad Pro", "Helvetica Neue", Helvetica, Arial; font-size : 18px; letter-spacing : 1px; text-transform : uppercase; line-height : 20px; color : #CDAB71; }
   body.whatson .gallery.one   { color : #f79432; }
   body.whatson .gallery.two   { color : #dfd4a4; }
   body.whatson .gallery.three { color : #00a8a2; }
   body.whatson .gallery.four  { color : #693b5e; }
   body.whatson .gallery.five  { color : #414042; }
   body.whatson .gallery.six   { color : #cdab71; }
   
   body.whatson.detail #content_main {
     font-size : 12px; line-height : 18px; }
   body.whatson.detail h1,
   body.whatson.detail .show_dates {
     margin-bottom : 6px; }
   body.whatson.detail .gallery {
     position : relative; top : 0; left : 0; }
   body.whatson.detail .row1,
   body.whatson.detail .row2 {
     overflow : hidden; }
   body.whatson.detail #exhibits {
     float : left;
     width : 580px; margin-bottom : 40px; }
   body.whatson.detail #excerpt {
     float : right;
     width : 260px; margin-right : 20px; }
   body.whatson.detail #details {
     float : left;
     width : 580px; margin-bottom : 40px;
     -moz-column-count : 2; -webkit-column-count : 2; column-count : 2;
     -moz-column-gap : 30px; -webkit-column-gap : 30px; column-gap : 30px; }
   body.whatson.detail #associated {
     float : right;
     width : 260px; margin-right : 20px; }
   
   body.whatson.detail #main_image {
     margin-bottom : 10px; }
   body.whatson.detail #image_list {
     margin-left : -10px; }  
   body.whatson.detail #image_list a {
     float : left;
     display : block; margin-left : 10px; }
   body.whatson.detail #image_list a img,
   body.whatson.detail #main_image img {
     display : block; margin : 0; }
     
   body.whatson.detail h3.related {
     margin-top : 30px; margin-bottom : 0; text-transform : uppercase; }
   body.whatson.detail h3.related a {
     color : #CDAB71; }
   body.whatson #associated .show_dates {
     font-size : 14px; }
     
   body.whatson #content_main > div {
     margin-bottom : 0;
     overflow : hidden; }
   body.whatson .sponsors {
     overflow : hidden; }
   body.whatson .sponsor {
     float : left; margin-right : 40px; }
   
   body.whatson #content #links h2 {
     margin-bottom : 12px;
     font-size : 12px; font-weight : bold; text-transform : uppercase; color : #cdab71; }
   body.whatson #content #links ul {
     margin-left : 0; }
   body.whatson #content #links ul li {
     margin-left : 0; list-style-type : none; }
   body.whatson #content #links li a {
     font-size : 12px; color : #cdab71; }
     
   body.whatson div.gallery {
     width : 120px; font-size : 12px; line-height : 16px; }
     
   body.whatson.archive div.exhibitions {
     margin-left : -20px; }
   body.whatson.archive div.exhibition {
     display : inline-block; width : 210px; margin-left : 20px;
     vertical-align : top; }
   body.whatson.archive div.exhibition > a {
     display : block;
     margin-bottom : 12px; }
   body.whatson.archive div.details h2,
   body.whatson.archive div.details .show_dates {
     margin-bottom : 0;
     font-size : 12px; line-height : 18px; font-weight : bold; }
   body.whatson.archive div.details .readmore {
     line-height : 18px; color : #CDAB71; }
   body.whatson.archive div.details .readmore a {
     color : #CDAB71; }
   
   body.whatson #content_main > div.exhibition_display_one,
   body.whatson #content_main > div.exhibition_display_two {
     margin-bottom : 40px; }
   
/* =generic_page */
   body.page h1 {
     margin-bottom : 40px; }
   body.page h1,
   body.page h2,
   body.page .readmore {
     font-size : 36px; line-height : 36px; color : #cdab71; text-transform : uppercase; font-family : "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial; font-weight : 200; letter-spacing : .05em; }
   body.page #content_main div {
     margin-bottom : 0; }
   body.page #content_main > div {
     margin-bottom : 40px;
     overflow : hidden; /* background-color : #fff; *//* need to specify so transition blend behaves properly */
     -webkit-transition: background-color 0.5s ease-in-out;
     -o-transition:      background-color 0.5s ease-in-out; /* Ready for Opera 10.5 */
     -moz-transition:    background-color 0.5s ease-in-out; /* Ready for Firefox 3.7, fingeres crossed */
     transition:         background-color 0.5s ease-in-out; /* I live in hope */ }
   body.page #content_main > div:hover {
    /*  background-color : #eee;*/ }
   body.page #content_main > div img {
     margin : 0; }
     
   body.page h2 {
     margin-bottom : 6px;
     font-size : 24px; line-height : 24px; color : #444; font-weight : normal; }
   body.page h2 span,
   body.page .artist {
     font-size : 12px; line-height : 12px; color : #bcbcbc; }
   body.page .show_dates {
     font-size : 18px; line-height : 18px; color : #bcbcbc; font-weight : normal; }
     
   body.page #content_main > div.exhibition_display_one img {
     margin-bottom : 20px; }
   body.page .exhibition_display_one .details {
     float : left;
     width : 300px; }
   body.page .exhibition_display_one .excerpt {
     float : right;
     width : 450px;
     font-size : 12px; line-height : 16px; }
     
   body.page .exhibition_display_two,
   body.page .exhibition_display_one {
     position : relative; padding-left : 125px;
     overflow : hidden; }
   body.page .exhibition_display_two div {
     float : left;
     width : 350px;
     font-size : 12px; line-height : 16px; }
   body.page .exhibition_display_two img {
     float : right; }
   body.page .readmore {
     font-size : 12px; line-height : 12px; }
     
   body.page .gallery {
     position : absolute; top : 3px; left : 0;
     font-family : "Myriad Pro", "Helvetica Neue", Helvetica, Arial; font-size : 18px; letter-spacing : 1px; text-transform : uppercase; }
   body.page .gallery.one   { color : #f79432; }
   body.page .gallery.two   { color : #dfd4a4; }
   body.page .gallery.three { color : #00a8a2; }
   body.page .gallery.four  { color : #693b5e; }
   body.page .gallery.five  { color : #414042; }
   body.page .gallery.six   { color : #cdab71; }
   
   body.page #content_main {
     font-size : 12px; line-height : 18px; }
   body.page h1,
   body.page .show_dates {
     margin-bottom : 6px; }
   body.page h1 {
     margin-bottom : 30px; }
   body.page .gallery {
     position : relative; top : 0; left : 0; }
   body.page .row1,
   body.page .row2 {
     overflow : hidden; }
   body.page #exhibits {
     float : left;
     width : 580px; }
   body.page #excerpt {
     float : right;
     width : 260px; margin-right : 20px; }
   body.page #details {
     float : left;
     width : 580px; margin-bottom : 40px;
     -moz-column-count : 2; -webkit-column-count : 2; column-count : 2;
     -moz-column-gap : 30px; -webkit-column-gap : 30px; column-gap : 30px; }
   body.page #associated {
     float : right;
     width : 260px; margin-right : 20px; }
   
   body.page #content #main_image {
     display : block; margin-bottom : 10px; }
   body.page #image_list {
     margin-left : -10px; }  
   body.page #image_list a {
     float : left;
     display : block; margin-left : 10px; }
   body.page #image_list a img,
   body.page #main_image img {
     display : block; margin : 0; }
     
   body.page h3.related {
     margin-top : 30px; margin-bottom : 0; text-transform : uppercase; }
   body.page h3.related a {
     color : #CDAB71; }
   body.page #associated .show_dates {
     font-size : 14px; }
     
   body.page #content_main > div {
     margin-bottom : 40px;
     overflow : hidden; /* background-color : #fff; */ }
   body.page #content_main > div:hover {
    /* background-color : #fff; */}
   
   body.page #content #links h2,
   body.page #content #extras h2 {
     margin-bottom : 12px;
     font-size : 12px; font-weight : bold; text-transform : uppercase; color : #cdab71; }
   body.page #content #links ul,
   body.page #content #extras ul {
     margin-left : 0; }
   body.page #content #links ul li,
   body.page #content #extras ul li {
     margin-left : 0; list-style-type : none; }
   body.page #content #links li a,
   body.page #content #extras li a {
     font-size : 12px; color : #cdab71; }
     
   body.page div.gallery {
     width : 120px; font-size : 12px; line-height : 16px; }
     
   body.page #extras {
     float : left;
     width : 280px; margin-left : 40px; }
   body.page #content_main.nogallery h1,
   body.contact #content_main h1 {
     margin-bottom : 30px; }
     
/* =contact */
   body.contact h1 {
     color:#CDAB71; font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial; font-size:40px; font-weight:200; letter-spacing:0.05em; line-height:40px; text-transform:uppercase; }
   body.contact #content {
     overflow : hidden;
     margin-bottom : 0; }
   body.contact #content_main {
     float : left;
     width : 580px; margin-bottom : 0; }
   body.contact #content_sub {
     float : left;
     margin-left : 40px; width : 280px;
     font-size : 12px; line-height : 18px; }
   body.contact #content_main iframe {
     margin-bottom : 0; }
   .largermap {
     font-size : 12px; line-height : 18px; }
   
   body.contact fieldset h2,
   body.contact #content_sub h2 {
     color:#CDAB71;
     font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial; font-size:20px; letter-spacing:0.05em; line-height:20px; text-transform:uppercase; }
     
   .fs_about-you {
     margin-bottom : 0; }
   .fs_about-you label[for="name"] {
     float : left;
     width : 270px; margin-right : 40px; }
   .fs_about-you label[for="email"] {
     float : left;
     width : 270px; margin-right : 0; }
     
   .fs_about-you label input {
     width : 270px;
     padding : 0 0 3px 0; border : 0; margin : 0; border-bottom : 1px solid #999;
     font-size : 16px; line-height : 28px; }
     
   .fs_message label span {
     display : none; }
     
   .fs_message textarea {
     padding : 10px; margin : 0; border : 1px solid #999; width : 568px;
     font : 100%/1.5 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; color : #444; }
     
   ul#nav_sub li {
     padding-right : 10px;
     background : url(../images/menu-split.png) 100% 1px no-repeat; }
   ul#nav_sub li.last {
     background-image : none; padding-right : 0; }
     
/* =staff */
   body.staff #staff_members {
     overflow : hidden; margin-bottom : 0; }
   body.staff #staff_members .row {
     overflow : hidden; margin-bottom : 40px; margin-left : -30px; }
   body.staff #staff_members .staff_member {
     float : left; width : 280px; margin-left : 30px; }
   body.staff #staff_members .staff_member:first-child {
     padding-left : 0; }
     
/* fancy enhancements */
  @-webkit-keyframes loader {
	  from { opacity : 0; }
	  to { opacity : 1; }
  }
  @-moz-keyframes loader {
	  from { opacity : 0; }
	  to { opacity : 1; }
  }
  @-keyframes loader {
	  from { opacity : 0; }
	  to { opacity : 1; }
  }
  @-webkit-keyframes hider {
	  from { opacity : 1; }
	  to { opacity : 0; }
  }
  @-moz-keyframes hider {
	  from { opacity : 1; }
	  to { opacity : 0; }
  }
  @-keyframes hider {
	  from { opacity : 1; }
	  to { opacity : 0; }
  }
  
/* =search-results */
   body.search-results h1 {
     margin-bottom : 46px; padding-left : 70px;
     font-size : 12px; line-height : 12px; text-transform : uppercase; font-weight : bold;
     background : url(../images/search-result.png) 0 0 no-repeat; }
   body.search-results h1 span {
     display : block;
     color : #444; font-size : 36px; line-height : 36px; font-weight : normal; }
   body.search-results h2 {
     margin-bottom : 26px;
     font-size : 20px; line-height : 20px; color : #999; font-weight : normal; text-transform : uppercase; }
   body.search-results #content_main {
     overflow : hidden; }
   body.search-results #r_page,
   body.search-results #r_events,
   body.search-results #r_exhibitions {
     float : left;
     width : 285px; }
   body.search-results #r_events {
     margin : 0 20px; }
   body.search-results #r_page a,
   body.search-results #r_events a,
   body.search-results #r_exhibitions a {
     display : block; }
   body.search-results #content li {
     font-size : 12px; line-height : 16px; word-wrap: break-word; }
   body.search-results #content li h3 {
     margin-bottom : 0; }
   body.search-results #content li p {
     color : #999 }
   body.search-results div.result {
     margin-bottom : 32px; }
   body.search-results div.result h3 {
     margin-bottom : 6px; }
   body.search-results #r_page ul {
     margin-left : 0; list-style-type : none; }
   body.search-results #r_page a:hover,
   body.search-results #r_page a:focus {
     text-decoration : none; }
   body.search-results #r_page a:hover h3,
   body.search-results #r_page a:focus h3 {
     text-decoration : underline; }
   body.search-results #r_events h3,
   body.search-results #r_events h3,
   body.search-results #r_exhibitions h3,
   body.search-results #r_exhibitions h3 {
     font-size : 12px; line-height : 12px; text-transform : uppercase; font-weight : bold; }
     
/* blog */
   body.blog #content_main {
     float : left;
     width : 600px; }
   body.blog #content_supp {
     float : right;
     width : 240px; }
   body.blog #content_main .article {
     overflow : hidden; }
   body.blog #content_main .article.image .excerpt img {
     float : left; margin-right : 20px; }
   body.blog #content_main h2 {
     text-transform : uppercase; margin-bottom : 0; line-height : 24px; }
   body.blog.archive #content_main h3 {
     position : absolute; left : -999em; overflow : hidden; }
   body.blog #content_main .meta p {
     font-size : 12px; line-height: 12px; text-transform : uppercase; }
   body.blog #content_main .meta p span {
      }
   body.blog #content_main .meta p span:first-child {
     position : absolute; left : -999em; overflow : hidden; }
   body.blog #content_main .article .excerpt {
     width : 440px;
     font-size : 12px; line-height : 16px; }
   body.blog #content_main .article.image .excerpt {
     width : auto; }
   body.blog #content_main .article p.more a {
     text-transform : uppercase; }
     
   body.blog #content_supp {
     font-size : 12px; line-height: 12px; text-transform : uppercase; }
   body.blog #content_supp h2 {
     margin-bottom : 0;
     color : #cdab71; text-transform : uppercase; font-family : "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial; font-weight : 200; letter-spacing : .05em; }
     
   body.blog.item #content {
     overflow : hidden; }
   body.blog.item div.image a > span {
     font-size : 12px; line-height : 12px; text-transform : uppercase; }
     
   body.blog.item #content_supp p.post_date {
     margin-bottom : 4px; }
   body.blog.item #comments h2,
   body.blog.item #content_main form h2 {
     margin-bottom : 1.5em;
     text-transform : uppercase; line-height : 24px; color : #cdab71; }
   body.blog.item #comments h3 {
     text-transform : uppercase; margin-bottom : 0; }
   body.blog.item .comment {
     position : relative;
     padding-left : 100px; margin-bottom : 3em; }
   body.blog.item .comment img {
     position : absolute; left : 0; top : 0; }
   body.blog.item .comment_message {
     font-size : 14px; line-height : 18px; }
   
   body.blog.item #content_main form {
     margin-top : 2.5em; }
   body.blog.item #content_main form h3 {
     text-transform : uppercase; margin-left : 100px; }
   body.blog.item #content_main form label {
     display : block; margin-bottom : 12px;
     overflow : hidden; }
   body.blog.item #content_main form label input {
     padding : 2px 4px; border : 1px solid #999; width : 300px;
     font-size : 14px; line-height : 18px; }
   body.blog.item #content_main form label span {
     float : left; width : 100px;
     font-size : 12px; line-height : 24px; text-transform : uppercase; }
   body.blog.item fieldset.your_message label[for="comment_comment"] span {
     position : absolute; left : -999em;
     overflow : hidden; }
   body.blog.item fieldset.your_message {
     padding-left : 100px; }
   body.blog.item fieldset.your_message textarea {
     width : 498px; }
   body.blog.item #content_main form fieldset.your_message h3 {
     margin-left: 0; }
   body.blog.item #content_main form label.boolean span {
     float : none;
     display : inline; width : auto; }
   body.blog.item #content_main form label.boolean input {
     width : auto; margin : auto; padding : auto; }
     
   body.blog.archive #content_supp {
     margin-top : -4.1em; }