/*Remove site background*/
html, body{background:#dcebf2;}

/*Set site width*/
#pagewidth{width:100%;}
#twocols{width:100%;}
#maincol{width:100%;}
#rightcol{display:none;}

/* change the header layout to responsive width with centered leaderboard */
#header{position:relative;float:left;height:146px;width:100%;text-align:center;background-color:#01325d;}

#header a{float:none;margin:0 auto;top:auto;}
/* remove the YachtsandYachting.com logo */
#header a.yy{display:none;}
/* display the responsive logo */
#header a.responsivelogo{display:block;}
/* make the leaderboard banner scaleable */
#header .leaderboard{max-width:100% !important;max-height:auto !important;}

/* increase menu size */
.responsivemainmenu{clear:both;height:40px;border-bottom:none;}

/*Make dropdown links appear inline*/
.responsivemainmenu ul{position:static;display:none;background:#dcebf2;}
/*Create vertical spacing*/
.responsivemainmenu li {margin-top:1px;height:40px;float:none;}
.responsivemainmenu li a{height:40px;line-height:40px;padding:0;font-size:1.5em;}
/*Make all menu links full width*/
.responsivemainmenu ul li, .responsivemainmenu li a {width:100%;}
/*Hover colour*/
.responsivemainmenu li:hover a{background:#01325d;color:Yellow;}

/*Display 'show menu' link*/
.responsivemainmenu .show-mainmenu {display:block;}

/*Hide search box*/
.responsivemainmenu .sitesearch{display:none;}

/* remove certain elements of the design */
.yandybox{display:none;}

/* reduce default left hand column font size */
#leftcol{font-size:8pt;}

#rightcol #leftcol, .socialmediapanel{display:none;}

/* Shrink the side column widths as the screen size drops */
/* *** Note this has to take the scrollbar into account! */
@media (max-width: 617px)
{
    #leftcol{width:90px;}
    #rightcol #leftcol, .box{width:90px;}
    #rightcol #leftcol, .box img{width:100%;}
    
    #leftcol a.hhcompetition{width:90px;}
    #leftcol a.hhcompetition img{width:90px;}
    
    #leftcol .socialmediabuttons
    {
        position:relative;
        float:left;
        width:160px;
        overflow:hidden;
        margin-bottom:10px;
    }
}

/* shrink the logo, header height */
@media (max-width: 600px)
{
    #header{height:100px}
    #header a.responsivelogo
    {
        margin-top:1px;
        height:17px;
        line-height:17px;
        font-size:1.5em;
    }
}

@media (max-width: 400px)
{
    #header{height:80px}
}