/*first lvl*/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .name{ background: yellow; box-sizing: border-box; } .list{ box-sizing: border-box; } /*second lvl*/ .box{ height: 220px; width: 350px; padding: 15px 10px 20px 10px; margin:30px; border:2px dashed red; background-color: green; } /*third lvl*/ .block{ width: 615px; height: 393px; padding: 7px; } .ht_img{ width: 200px; height: 113px; float: left; margin:0 20px 5px 0; } .hss_img{ width: 150px; height: 85px; float: right ; margin: 20px 0px 20px 20px; } p{ padding-top: 0px; font-size: 1.07em; text-align: justify; line-height: 18px; } /*fourth lvl*/ .square{ width: 136px; height: 136px; position: relative; } .blue{ width: 62px; height: 62px; z-index: 1; background: #7e8aeb; margin-left: 25%; margin-top: -25%; position: relative; } .red{ width: 62px; height: 62px; z-index: -2; top:0; left: 0; background-color: #ff8888; position: relative; } .green{ width: 62px; height: 62px; z-index: -1; float: right; background: #4def99; margin-top: -25%; position: relative; }