li.size1 { width: 13em; height:7em; } li.quadsize { width:270px; height:300px; } li.graphsize { width:1050px; height:350px; } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color:black; font-size:22px; padding:0; margin:0; background-color: rgba(170, 180, 185, 1); color: #333; } div.status { font-size:20px; font-weight:bold; background-color:gray; } h1 { text-align:center; font-variant: small-caps; color:#eee; } div.content { text-align:center; text-transform: capitalize; } div.container { box-sizing: border-box; font-size: 14px; line-height: 20px; margin-left: auto; margin-right: auto; margin-bottom:2em; max-width: 1170px; padding-left: 15px; padding-right: 15px; border: 2px solid #DDD; background: #FFF; } div.container:after { clear: both; } div.container:before, .container:after { content: " "; display: table; } main { display:block; } h2.dispstreamheader { font-variant: small-caps; } ul.controls { box-sizing: border-box; font-size: 14px; line-height: 20px; margin-bottom: 10px; margin-left: -5px; margin-right: -15px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } ul.controls:after { clear: both; } ul.controls:before, ul.controls:after { content: " "; display: table; } li.dispvalue { float:left; background-color: #FFF; border-bottom-color: #DDD; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-image-slice: 100% 100% 100% 100%; border-image-source: none; border-image-width: 1 1 1 1; border-left-color: #DDD; border-left-style: solid; border-left-width: 1px; border-right-color: #DDD; border-right-style: solid; border-right-width: 1px; border-top-color: #DDD; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; box-sizing: border-box; font-size: 14px; line-height: 20px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 20px; margin-right: 11.7px; min-height: 1px; padding-left: 0px; padding-right: 10px; padding-bottom:50px; position: relative; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; } div.dispvalueheader { background-color: #F5F5F5; border-bottom-style: solid; border-bottom-width: 1px; border-color: #DDD; border-top-left-radius: 3px; border-top-right-radius: 3px; box-sizing: border-box; list-style-image: none; list-style-position: outside; list-style-type: none; margin-right:-10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px; } input.dispvalueheaderafter { float:right; display:inline; margin-top:-35px; } div.dispvaluevalue { margin-top:10px; margin-left:10px; width:100%; height:100%; } .anchor:before { content: ""; display: block; position: relative; width: 0px; height: 5em; margin-top: -5em; } *:before, *:after { box-sizing: border-box; }