Template:Left sidenote/sandbox/styles.css

/* Sidenotes in the Page namespace */ body.ns-104 .sidenoteLeft, body.ns-104 .sidenote-left { position: absolute; left: 0; width: 6em; margin-right: 1em; text-indent: 0; text-align: left; border: 1px dotted red; }

.__sidenote_inner { font-size: 83%; line-height: 140%; display: inline-block; text-align:left; padding-top:0; padding-bottom:0; border: 1px dotted blue; }

/* We need a minimum width to display the sidenotes as sidenotes @media all and (min-width: 40em) { body.ns-104 .__sideheading{ color:blue; position:relative; margin-left:-11em; /*left: -10em; width: 10em; padding-right: 1em; text-indent: 0; text-align: left; display:block; clear:left; float:left; } } /* If we can't display them due to a narrow screen- lets inline them in an obvious manner @media all and (max-width: 40em) { body.ns-104 .__sideheading{ color:green; font-size:0.8em; font-style:italic; position:relative; text-indent: 0; text-align: left; display:inline; }

body.ns-104 .__sideheading:before{ content:'{'; color:green; }

body.ns-104 .__sideheading:after{ color:green; content:'}'; } }