/* CSS for the example component. Since CSS uses a global name space for classes we use a naming convention that includes the React application and the component in the class name. The hope is any other stylesheets you use won't conflict with these names. */ .cs142-example-code { font-family: Courier New, monospace; line-height: 1.3; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; display: inline-block; box-sizing: border-box; background: #f4f4f4; width: 100%; overflow-x: auto; } .cs142-example-output { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; border: 1px dashed #722b00; display: inline-block; box-sizing: border-box; } .cs142-code-name { font-family: Courier New, monospace; } .motto-update { background-color: #F8F8F8; font-size: larger; border: 1px dotted black; padding: 10px 10px 10px 10px; } #motto-name { font-weight: bold; }