@media all {
    .expand-content { margin-left: 20px; }
    .expand-control-icon { background-size: 16px; display: inline-block; width: 20px; }
    .expand-control-text { vertical-align: top; text-decoration:none; }
    .expand-control-image { vertical-align: middle; text-decoration:none; }
}

@media screen {
    /* This container preloads the opened expand icon, but we don't want it displayed to the user. */
    .expand-container { background-position: -10000px 0; background-repeat: no-repeat; }
    .expand-hidden { display: none; opacity: 0; }
    .expand-control { cursor: pointer; text-decoration: none;  margin-bottom: 10px; }
    .expand-control-icon { background-repeat: no-repeat; background-position: center center; }    
}

@media print {
    /* show expander text in print */
    .expand-content { display: block !important; }
}
/*
   Only provide the difference between the normal CSS and the device specific here. This should mean that
   the only properties used are `background-image`, etc. Leave `background-size`, `background-repeat`,
   `background-position`, etc in the relevant CSS file.
*/
@media screen {
    .expand-control-icon { background-image: url('/confluence/images/icons/grey_arrow_right.gif'); }
    .expand-container, .expand-control-icon.expanded { background-image: url('/confluence/images/icons/grey_arrow_down.gif'); }
}