/*-------------------------------------------------------------------------------------------*/
/* Adjustments for RWD			                                                     */
/* Copyright Community Sites 2014			                                     */
/* For further information, see www.communitysites.co.uk or email info@communitysites.co.uk  */
/*-------------------------------------------------------------------------------------------*/      

/*@import url(http://weloveiconfonts.com/api/?family=fontawesome);*/

/* note - nice dynamic alternative to traditional ss-pika loading here - http://snipplr.com/view/70871/ */
@import url(font/ss-pika.css);

.menu-open-rwd {
    display:none;
        
    text-align:left;
    
    margin:0;
    padding-left:1%;
}
.menu-open-rwd a {
    display:inline-block;
    text-decoration:none;
        
    padding-top:14px;
    padding-bottom:14px;
        
    width:100%;
        
}
.ss-rows, .ss-delete {
    font-size:20px;
    float:right;
    /* just in case this is also a link */
    vertical-align:middle;
    margin-top:-4px;
}

/* hide the search link in the menu */
.menu_item_container_search {
    display:none !important;
}


@media (max-width: 1010px) {

    #all {
        min-width:100% !important;
        max-width:980px;
        width:100% !important;
    }

    #main {
        width:100% !important;
        max-width:980px;
    }
    
    #header #titles { 
        width:100% !important;
        max-width:980px;
    }

    .contentpage {
        background-size:contain;
        width:100% !important;
        max-width:980px;
    }
    
        .blocklogin {
            width: 18% !important;
        }

            .navbar {
                width: 100% !important;
                margin-left:0 !important;
            }
            
                .menu_item a:link {
                    margin-left:5px;
                }

            .blocklogininfo {
                margin-left:0 !important;
            }
            
        .homepage_container, .homepage_container_hidden, .category_container_hidden, .category_container, .page_container {
            background-size:contain;
            /* padding-top here is a problem - will be set to a fixed px size if there's a banner graphic */
            width: 58% !important;
        }
        
            #block1_1 {
                width:100% !important;
            }
            
                .block .category1_2, .block .pagelink1_2 {
                    margin-right:2% !important;
                }
                
                .block .category1_2, .block .pagelink1_2, .block .category2_2, .block .pagelink2_2 {
                    width:49% !important;
                }
                
                .block .category1_2 .imagewrapper, .block .category2_2 .imagewrapper, .block .pagelink1_2 .imagewrapper, .block .pagelink2_2 .imagewrapper {
                    width:40% !important;
                    height:auto !important;
                }
                .block .category1_2 .imagewrapper img, .block .category2_2 .imagewrapper img, .block .pagelink1_2 .imagewrapper img, .block .pagelink2_2 .imagewrapper img {
                    width:100% !important;
                    height:auto !important;     
                }
                
                #block1_1 .imagesright img, #block1_1 .standardimage img, #block1_1 .thumbimage .img {
                    /* slightly under 100% to allow for borders on images */
                    width:99% !important;
                    /* needs to be set to the scaled image width for the site */
                    max-width:279px !important;
                    height:auto !important;     
                }

                #block1_1 .imagesright .imagecaption, #block1_1 .standardimage .imagecaption, #block1_1 .thumbimage .imagecaption {
                    /* needs to be set to the scaled image width for the site */
                    max-width:279px !important;
                    width:100% !important;
                }
                #block1_1 .imagesright .imagecredit, #block1_1 .standardimage .imagecredit, #block1_1 .thumbimage .imagecredit {
                    /* needs to be set to the scaled image width for the site */
                    max-width:279px !important;
                    width:100% !important;
                }
                
                #block1_1 .landscapeimage img, #block1_1 .fullsizeimage img, #block1_1 .originalimage img {
                    /* slightly under 100% to allow for borders on images */
                    width:99% !important;
                    height:auto !important;     
                }

        .extracolumn {
            width: 18% !important;
        }

            .advertarea {
                width: 100% !important;
            }
            
                .advert .image img {
                    width:100% !important;
                }
                
                .advert .text {
                    padding-left:0 !important;
                    padding-right:0 !important;
                    width:100% !important;
                }
    .credit {
        width:100% !important;
        max-width:980px;
    }
}

@media (max-width: 800px) {
    /* because the search is so often a problem at lower resolutions, we ditch it fairly early */
    #header #subnavigation {
        display:none;
    }
    .menu_item_container_search {
        display:block !important;
    }

    .contentpage {
        /* this background image attempts to produce columns, but we're abandoning those at this point */
        background-image:none !important;
    }
     
        #htmlQuickLinks_htmlCommunitySitesQuickLinks .pagelink:first-child {
           margin-right:0 !important;
        }    
    
        .newlist, .newlisthidden, #htmlQuickLinks_htmlCommunitySitesQuickLinks .pagelink {
            margin-bottom:1em !important;
            margin-right:0 !important;
            width:100% !important;
        }

        .blocklogin {
            width: 27% !important;
        }
    
        .homepage_container, .homepage_container_hidden, .category_container_hidden, .category_container, .page_container {
            margin-left:2.9% !important;
            width: 70% !important;
        }                             
        
        /* can't have the flexslider buttons poking out at this point or we'll get a horizontal scrollbar */
        .flexslider-outer .flexslider .flex-direction-nav .flex-next {
            right:0 !important;
        }

        .flexslider-outer .flexslider .flex-direction-nav .flex-prev {
            left:0 !important;
        }


        .extracolumn {
            text-align:center;
            width: 100% !important;
        }
            /*
            // ikg - aborted work-in-progress
            .adverts_outer {
                background-color:#f2f1f0;
                text-align:center;
            }
            
            .adverts_inner {
                display:inline-block !important;
                
                margin-left:auto;
                margin-right:auto;
            }
            */
        
            /* since we're now floating the adverts, we want to add a clearfix after them in order to use any background
            colour/image in the advert area work correctly */
            #rightcolumn_adverts_htmlCommunitySitesAdverts:after {
                visibility: hidden;
                display: block;
                content: "";
                clear: both;
                height: 0;
            }
            
                /* float the adverts alongside each other, but at the same width as the old advert column (this would be 
                better done with a sass variable if we were using sass) */
                .advertarea h2, .advertarea .hdg2, .morelinks .contextuallinkssubtitle {
                    -webkit-border-radius: 0 !important;
                    -moz-border-radius: 0 !important;
                    -ms-border-radius: 0 !important;
                    -o-border-radius: 0 !important;
                    border-radius: 0 !important;
                    
                    text-align:left;
                    padding-left:1% !important;
                }
                
                .morelinks ul {
                    text-align:left;
                }
                
                li.contextuallink {
                    margin-left:1%;
                    padding-left:0 !important;
                }
                li.contextuallinkcurrent {
                    margin-left:1%;
                    padding-left:0 !important;
                }

                .advert {
                    margin-left:0 !important;
                    width:100% !important;

                }
                    .advert .image {
                        /* just impossible to get the images right at this point, so let's just hide them */
                        display:none;
                    }
                    
                    .advert .text {
                        -webkit-border-radius: 0 !important;
                        -moz-border-radius: 0 !important;
                        -ms-border-radius: 0 !important;
                        -o-border-radius: 0 !important;
                        border-radius: 0 !important;
                        
                        text-align:left !important;
                        padding-left:1% !important;
                        padding-right:1% !important;
                        width:98% !important;
                    }
}

@media (max-width: 700px) {
}

@media (max-width: 600px) {
    .menu-open-rwd {
        display:block;
    }

    .blocklogin {
        width: 100% !important;
        
        display:none;
    }
    
    .blocklogininfo {
        border:0 !important;
        
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        -ms-border-radius: 0 !important;
        -o-border-radius: 0 !important;
        border-radius: 0 !important;
    }
    
    .blocklogininfo .blocklogintitles {
        padding-left:1% !important;
    }
    
    .contentpage .blockloginform {
        margin-left:1% !important;
    }
    
    .homepage_container, .homepage_container_hidden, .category_container_hidden, .category_container, .page_container {
        margin-left:0 !important;
        width: 100% !important;
    }
    
    .homepage_container .blocks, .homepage_container_hidden .blocks, .category_container_hidden .blocks, .category_container .blocks, .page_container .blocks {
        margin-left:1%;
        margin-right:1%;
    }
    
    #block1_1 .imagesright, #block1_1 .standardimage, #block1_1 .thumbimage {
        /* at this point, we just want to stop it floating as there won't be enough room for the text to flow around it
        we don't want to mess with the width as we'll end up stretching the images */
        float:none !important;
        border: 0 !important;
    }

    .extracolumn {}
    
    
    /* at this point, the footer starts to look a bit daft as its big blocky nature makes it much more visually dominant
    than it should be...so we re-format it */
    #footer {
        border-top:1px solid #394D41 !important;
        background-color:#fff !important;
    }
        #footer .extras {
            margin-right:0 !important;
        }
                
        #footer .extras ul {
            margin-left:5px !important;
        }

        #footer .extras li {
            float:none !important;
            display:inline-block !important;
            margin-top:10px !important;
            margin-bottom:10px !important;
            width:auto !important;
        }        
        #footer .extras li a {
            color:#676767 !important;
        }
}

/* the resizing of the logo will depend on how big it is in the first place - so this breakpoint may well 
not be correct */
@media (max-width: 450px) {
    #header #titles {
        height:auto !important;
    }
        #header #titles h1, #header #titles .hdg1 {
            float:none !important;
            width:100% !important;
        }   

            #header #titles h1 img, #header #titles .hdg1 img {
                width:100% !important;
            }   

                .block .category1_2, .block .pagelink1_2 {
                    margin-right:0 !important;
                }
                .block .category1_2, .block .pagelink1_2, .block .category2_2, .block .pagelink2_2 {
                    width:100% !important;
                }

}

@media (max-width: 300px) {
    #block1_1 .imagesright, #block1_1 .standardimage, #block1_1 .thumbimage {
        width:100% !important;
    }
}