.mainpage-shadowbox{color:white;background:rgb(16,16,16);background:rgba(0,0,0,0.3);border-radius:4px;}.mainpage-shadowboxh2,.mainpage-shadowboxh3{color:white;border:none;font-family:sans-serif;line-height:1.2em;margin:0;padding:0;/* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */}.mainpage-shadowboxa{color:white;font-weight:bold;}.banner-image{position:relative;overflow:hidden;max-width:1125px;height:auto;margin-bottom:.6em;}.banner-imageimg{max-width:100%;height:auto;/* width: auto\9; *//* ie8 */}.banner-box-wide{width:80%}.banner-box-left,.banner-box-right{padding:8px7px;background:rgb(16,16,16);background:rgba(0,0,0,0.3);border-radius:4px;width:40%;}.banner-box-left{text-align:left;}.banner-box-right{text-align:right;}.banner-box-2{position:absolute;z-index:2;min-width:20em;}@mediascreenand(min-width:720px){/* greater than or equal to */.mainpage-shadowboxh2{font-size:190%;}.mainpage-shadowboxh3{font-size:150%;}.banner-box-left{left:3%;}.banner-box-right{right:3%;}.banner-box-2{margin-top:2em;}.banner-box-2.quote{font-size:80%;line-height:1.2em;}}@mediascreenand(max-width:720px){.mainpage-shadowboxh3{display:none;/* limited space, least important */}.mainpage-shadowbox{width:inherit!important;}.jcarousel-control-prev,.jcarousel-control-next{display:none;/* hide the carousel arrows *//* a kludge resulting from gadgets not working on mobile *//* unforunately also targets very narrow desktops, but there can't be too many of those *//* and besides, the number buttons still work */}}