/* =============================================================================
   Media Queries for Responsive Design
   ========================================================================== */


/* =============================================================================
   Mobiles, smartphones(portrait) and Iphones
   ========================================================================== */
@media only all and (max-width: 509px) and (max-device-width: 321px){
.wrap, .collections_intro, .collect_maintable, .col2altleft , .mediawrap, .media_hmblock{width: 300px;}
.bannerhome { text-align:center; }
#soane_logo{ width:650px; height:70px;}
#masthead{ height:70px; background:#68140A url("/img/m/masthead_bgsmall.jpg") repeat-x left top ;}
.col3, .col2, .col2a { background:none;}
.col3mid, .col2right, article.mediawrap, .col2left,.col2aleft,.col2aright { width:300px;}
.footnav{height:60px; }
.collect_maintable section { width: 100%;}
.col3right, .col2altright{ display:none;} 
.col3left { margin-bottom:20px; }

.collect_photoL img{ width:275px; height:60px}
.audio_player object{width:300px !important;}
dl.mplayer dt{ width:285px;}
.collect_text{width:270px;}
.collect_text2{ width:170px}
.collections h3 { font-size:1.3em;}
#donation_form fieldset { width:250px;}
#donation_form{ margin:0; padding:0;}
#donation_form div{ width:100%;}
.greyform_text, .greyform {width: 280px; padding:10px;}
.greyform .gform { width:270px; margin:0;}
.greyform label{ text-align:left;}
.media_hmblock img{ width:93%; width:93%;}
.media_hm_txt{ width:280px;}
.greyform .gform_inset_block{ margin:0;}
.col2detailright, .image_canvas{width: 300px; }
.cdp_holder  img, .cdp_holder{width: 300px; height:200px}
.object_label_position, #number_switcher{ width:300px; position:relative;}
classic_detail_links div{display: block; clear:both;}
.classic_detail_links{ height:50px;}
.collect_thumb{ min-height:160px;}
.col2detailleft, .col2detailright {   width: 300px;}
.main-image{ width:299px !important;height:230px !important;}
#soanePhotoPrint { display:none; width:295px}
.classic_detail_btn_enlarge{ display:none;}
.object_label {margin: 0;}
#subfooter { width:90%; padding-left: 4px }
.soane_home { background:none }
.col2aleft,.col2aright,.col2a_inner_left,.col2a_inner_right {float:none }
.col2aleft,.col2aright { margin-bottom:20px; }
}
/* =============================================================================
   smartphones(landscape) and tablets 
   ========================================================================== */

@media only all and (max-width: 780px) and (min-width: 510px){
.wrap{width: 480px}
.col3 {background:none;}
.main_content{ position:relative;}
aside {display:none;}
.col3left{position: relative; left:10px; width:470px; margin:0}
.col2right{ width:480px;}
article.mediawrap, .collections_intro{ width:480px;}
.col3left article { float:left; width:200px; margin-right:30px}
#simple_search_form_container{position: absolute; right:40px;
bottom:0;}
.collect_maintable section, .collect_maintable{width:230px;}
.footnav{height:50px; }
.col3mid{ width:450px} 
.col3right{display:none;}
.collect_photoL img { width:420px; height:100px; }
.collect_maintable section, .collect_maintable{width:430px;}
.collect_text2{ width:320px;}
.col2left{ width:480px}
.col2left li { width:48%; float:left;}
.col3, .col2{ background:none;}
.collect_text{ width:450px;}
.greyform_text, .greyform {width: 440px; padding:10px;}
.greyform .gform { width:430px; margin:0;}
.greyform label{ text-align:left;}
#donation_form fieldset { width:460px;}
#donation_form{ margin:0; padding:0;}
#donation_form div{ width:100%;}
.mediadiv{display:none;}
.mediawrap, .media_hmblock{width: 480px}
.media_hm_txt{ width: 200px;}
.col2detailleft, .col2detailright { width:480px;}
.object_label_position{position:relative; width:105px}
#number_switcher { position:relative; float: right;width: 110px;}
.collection_detail_main{ background:none !important;}
.col2altleft{ width:470px;}
.col2altright{ display:none;}
#subfooter { width:90%; padding-left: 4px }
.soane_home { background:none }
.col2aright { width:300px }
.col2a_inner_left,.col2a_inner_right {float:none }
}
/* =============================================================================
  Small monitors, NHS Screens and ipads
   ========================================================================== */
@media only all and (max-width: 950px) and (min-width: 780px){

.wrap{width: 720px}
.collection_detail_main{ background:none !important;}
.col3right {float:left; width:720px; position:relative; margin:0}
.col3right  figure{float:left; width:200px; margin-right:40px;}
.col3right  figure.newsletter{float:left; width: 33%; position:absolute;left:0; bottom:-10px;}
.col2right, .collections_intro{ width:470px;}
article.mediawrap, .collect_text{ width:440px;}
.footnav{height:50px; }
.col3right{display:none;}
.collect_photoL img { width:110%; height:110%; }
.collect_maintable section, .collect_maintable{width:430px;}
.collect_text2{ width:320px;}
.greyform_text, .greyform {width: 440px; padding:10px;}
.greyform .gform { width:430px; margin:0;}
.greyform label{ text-align:left;}
#donation_form fieldset { width:440px;}
#donation_form{ margin:0; padding:0;}
#donation_form div{ width:100%;}
.mediadiv{display:none;}
.mediawrap, .media_hmblock{width: 480px;}
.media_hm_txt{ width: 200px;}
.col2detailleft, .col2detailright { width:720px;}
.object_label_position{position:relative; width:350px}
#number_switcher { float: right;width: 350px;}
.col2altleft{ width:670px;}
.col2altright{ display:none;}
#subfooter { width:90%; padding-left: 4px }
.col2aright { width:300px }
.col2a_inner_left,.col2a_inner_right {float:none }
}


/*
=============================================================================
    1DR amends - @mobile
============================================================================= 
*/

    @media only all and (max-width: 509px) and (max-device-width: 321px){

        /* debugging
        .wrap{
            background-color: green !important;
        }
        */

        /* homepage */
        .col2a_inner_left{
            margin-bottom: 20px;
        } 

        #masthead_inner{
            width: 100%;
            height: 70px;
            background-image: url("../img/m/masthead.jpg");
            background-position: 10px 0;
            background-repeat: no-repeat;
            background-size: cover; /* mobile browsers support background-size */
        }

        .copyright{
            clear: left;
            text-align: left;
        }

        .copyright #viewing{
            float: left;
        }

        .copyright #viewing ul{
            margin-left: 0;
        }

        .copyright #viewing ul li{
            margin-left: 0;
            margin-right: 10px;
        }

        .socialmedia{
            float: left;
        }

        #subfooter {
            width: 320px;
            margin-left:auto;
            margin-right:auto;
        }

        /* news */
        .news_listing_text{
            width: 100%;
        }

        /* what's on */
        .whatson_listing_text{
            width: 100%;
        }

        /* virtual tour*/
        .fkey_left, 
        .fkey_mid, 
        .fkey_right{
            width: 100px;
        }

        #front_elevation_key div{
            height: 148px;
        }

        .farr_left, 
        .farr_mid, 
        .farr_right{
            width: 100px;
            padding-top: 10px
        }

        #front_elevation_key{
            width: 100%;
        }

        .f_left a, 
        .f_mid a, 
        .f_right a{
            height: 206px;
            background-size: cover;
        }

        #front_elevation{
            width: 100%;
            height: auto;
        }

        .f_left a{
            width:99px;
            background-position: 0 1px;
        }

        .f_mid a{
            width:96px;
            background-position: 0 0px;
        }

        .f_right a{
            width:103px;
            background-position: 0 1px;
        }

        #front_elevation .f_right a:hover{
            width:99px;
            background-position: 0 -204px;
        }
    }

/*
=============================================================================
	1DR amends - @smartphones(landscape) and tablets 
========================================================================== */
    
    @media only all and (max-width: 780px) and (min-width: 510px){

        /* debugging 
        .wrap{
           background-color: blue ;
        }
        */

        /*Homepage*/
        #masthead_inner{
            width: 480px;
        }

        .col2aleft{
            margin-bottom: 10px;
        }

        .col2aright{
            float: left;
        }

        .col2a_inner_left{
            margin-bottom: 10px;
        }

        .copyright{
            clear: left;
            text-align: left;
        }

        .copyright #viewing{
            float: left;
        }

        .copyright #viewing ul{
            margin-left: 0;
        }

        .socialmedia{
            float: left;
            clear: left;
        }

        #subfooter {
            width: 480px;
            margin-left:auto;
            margin-right:auto;
        }

        /*News*/
        .news_listing_text{
            width: 100%;
        }

        /*Whats on*/
        .whatson_listing_text{
            width: 100%;
        }

        /* virtual tour*/
        .fkey_left, 
        .fkey_mid, 
        .fkey_right{
            width: 100px;
        }

        #front_elevation_key div{
            height: 148px;
        }

        .farr_left, 
        .farr_mid, 
        .farr_right{
            width: 100px;
            padding-top: 10px
        }

        #front_elevation_key{
            width: 100%;
        }

        .f_left a, 
        .f_mid a, 
        .f_right a{
            height: 206px;
            background-size: cover;
        }

        #front_elevation{
            width: 100%;
            height: auto;

        }

        .f_left a{
            width:99px;
            background-position: 0 1px;
        }

        .f_mid a{
            width:96px;
            background-position: 0 0px;
        }

        .f_right a{
            width:103px;
            background-position: 0 1px;
        }
    }

/*
=============================================================================
    1DR amends - @small desktop 
============================================================================= 
*/
    
    @media only all and (max-width: 950px) and (min-width: 780px){

        /* debugging 
        .wrap{
            background-color: red !important;
        }
        */

        /*Homepage*/
        #masthead_inner{
            width: 720px;
        }

        .copyright{
            clear: left;
            text-align: left;
        }

        .copyright #viewing{
            float: left;
        }

        .copyright #viewing ul{
            margin-left: 0;
        }

        .copyright #viewing ul li{
            margin-left: 0;
            margin-right: 10px;
        }

        .socialmedia{
            float: left;
            clear: left;
        }

        #subfooter {
            width: 720px;
            margin-left:auto;
            margin-right:auto;
        }

        /*News*/
        .news_listing_text{
            width: 100%;
        }

        /*Whats on*/
        .whatson_listing_text{
            width: 100%;
        }

        /* virtual tour*/
        .fkey_left, 
        .fkey_mid, 
        .fkey_right{
            width: 100px;
        }

        #front_elevation_key div{
            height: 148px;
        }

        .farr_left, 
        .farr_mid, 
        .farr_right{
            width: 100px;
            padding-top: 10px
        }

        #front_elevation_key{
            width: 100%;
        }

        .f_left a, 
        .f_mid a, 
        .f_right a{
            height: 206px;
            background-size: cover;
        }

        #front_elevation{
            width: 100%;
            height: auto;

        }

        .f_left a{
            width:99px;
            background-position: 0 1px;
        }

        .f_mid a{
            width:96px;
            background-position: 0 0px;
        }

        .f_right a{
            width:103px;
            background-position: 0 1px;
        }
    }