.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both } .clearfix { zoom: 1 } .getting-started * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .getting-started { overflow: hidden; } .getting-started .theme-image { background: #64717E; padding: 3% 3% 0 3%; display: inline-block; width: 100%; width: 30%; } .getting-started .panels { margin: 6% 0 0 0; } .getting-started .panel { display: inline-block; width: 100%; padding: 5%; background: #fff; font-size: 16px; display: none; } .getting-started .visible { display: block; } .getting-started .panel p { font-size: 16px; line-height: 1.7; } .getting-started .panel a { text-decoration: none; } .getting-started .panel hr { padding-top: 10px; padding-bottom: 10px; margin-top: 20px; margin-bottom: 5px; border-bottom: none; border-color: #eee; -webkit-margin-before: 0; -webkit-margin-after: 0; } .getting-started .panel-left ul, .getting-started .panel-left ol { margin: 0 0 5% 0; background: #F5F7FA; padding: 5% 5% 5% 8%; list-style-type: square; font-size: 16px; line-height: 1.5; } .getting-started .panel-left ul li, .getting-started .panel-left ol li { border-bottom: dotted 1px #ddd; margin-bottom: 20px; padding-bottom: 20px; } .getting-started .panel-left ul li:last-child, .getting-started .panel-left ol li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } .getting-started .panel-left { display: inline-block; width: 58%; } .getting-started .panel-left h3, .getting-started .panel-right h3, .getting-started .panel-right p:first-child { margin-top: 0; line-height: 1.3; } .getting-started .panel-right { display: inline-block; width: 35%; float: right; vertical-align: top; } .getting-started .panel-aside { margin-bottom: 25px; background: #F8F8F8; padding: 40px; } .getting-started .panel-aside:last-child { margin-bottom: 0; } .getting-started .panel-aside h4 { margin-top: 0; } .getting-started .panel-aside ul { margin-bottom: 25px; } .getting-started .panel-aside li { list-style-type: square; margin-left: 18px; } .getting-started .intro-wrap { padding: 4% 2% 0 4%; } .getting-started .intro { display: inline-block; width: 50%; margin-left: 4%; vertical-align: top; } .getting-started .intro .updated { display: none; } .getting-started .intro h2 { font-size: 50px; line-height: 1.2; font-weight: 300; } .getting-started .intro h3 { color: #868B96; font-weight: normal; font-size: 18px; line-height: 1.6; } .getting-started .inline-list { display: inline-block; width: 100%; margin: 0 0 0 4%; padding-bottom: 10px; } .getting-started .inline-list li { display: inline-block; margin-right: 20px; } .getting-started .inline-list li:last-child { margin-right: 0; padding-right: 0; } .getting-started .inline-list li a { font-size: 18px; text-decoration: none; padding: 15px 20px; } .getting-started .inline-list li a:active, .getting-started .inline-list li a::-moz-focus-inner { outline: none; border: 0; } .getting-started .inline-list li.current a { background: #fff; } .getting-started .enter-license { display: inline-block; width: 100%; margin: 3% 0 1% 0; } .getting-started .enter-license label { display: inline-block; width: 100%; margin-bottom: 2%; } .getting-started .enter-license #license_key_input { display: inline-block; width: 100%; padding: 10px; margin-bottom: 4%; font-family: 'Andale Mono', 'Lucida Console', monospace; font-size: 20px; } .getting-started .enter-license .submit { display: inline-block; width: 25%; margin: 0; padding: 0; } .getting-started .activate { display: inline-block; float: right; width: 65%; text-align: right; vertical-align: top; } .getting-started .activate-text { font-size: 14px; line-height: 28px; display: inline-block; margin-right: 5px; color: green; } .getting-started #changelog { display: none; } .hide-creative { display: none !important; } .show-cm { display: none; } .show-creative { display: inline-block; } #updates-panel ul { border-bottom: 1px dotted #ddd; padding: 1% 0 5% 3%; list-style-position: inside; background: transparent; } #updates-panel li { border-bottom: 0; margin-bottom: 0; padding-bottom: 7px; } #updates-panel h4 { font-size: 1.1em; margin: .5em 0; } @media only screen and (max-width:768px) { .getting-started .intro, .theme-image, .getting-started .panel-left, .getting-started .panel-right { width: 100%; float: none; } .getting-started .intro { padding: 0; margin: 0; } .getting-started .intro h2 { font-size: 34px; } .getting-started .intro h3 { margin-bottom: 0; } .getting-started .inline-list li { width: 100%; } .getting-started .inline-list li a { width: 100%; display: block; } .getting-started .theme-image { width: 100%; margin-bottom: 15px; padding: 6% 6% 0 6%; } .getting-started .enter-license .submit { width: 100%; } .getting-started .activate { width: 100%; float: none; text-align: left; margin-bottom: 20px; } }