@media screen {
/* --- Reset Styles --- */ * { list-style: none; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } /* --- Welcome Page Styles --- */ body { background-color: lightblue; color: #333; font-family: Sans-Serif; line-height: 18px; } .wrapper { background: #fff; margin: 200px auto; max-width: 1260px; padding: 2.25%; /* 18px / 800px */ width: 85%; } h1 { font-size: 36px; line-height: 54px; } h2 { border-bottom: 2px solid #ccc; font-size: 24px; line-height: 36px; } h3 { font-size: 18px; line-height: 36px; margin-bottom: 18px; } p { margin-bottom: 18px; font-size: 16px; } a { font-family: courier; font-size: 14px; text-decoration: none; } ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: transparent;
}
li a { display: block; width: 100%; color: #333; padding: 16px 16px 2px; text-decoration: none; border-bottom: 2px solid #333; font-family: Sans-Serif; font-size: 16px; } /* Change the link color on hover */ li a:hover { background-color: lightblue; color: white; } .main { overflow: hidden; } .content { margin: 18px 0 18px; float: left; width: 60%; /* 480px / 800px */ } .sidebar { background: #eee; float: right; padding: 36px; /* 5px / 240px */ width: 30%; /* 240px / 800px */ font-size: 14px; } .sidebar ul { font-size: 14px; } .branding { clear: both; } footer.branding { border-top: 2px solid #ccc; margin-top: 20px; padding-top: 20px; } form { display: inline-block; text-align: right; width: 80%; margin: 20px; } .sidebar form { width: 100%; margin: -18px -50px; } form::before ::after { clear: both; } label { display: inline-block; width: 40%; font-size: 16px; margin-bottom: 14px; } input { display: inline-block; height: 20px; font-size: 14px; margin-bottom: 14px; width: 40%; } input:focus { background-color: lightblue; } textarea { margin: auto; padding-top: 18px; } button { background-color: transparent; display: inline-block; margin: auto; border: 1px solid #bbb; color: #333; padding: 6px 32px; text-align: center; border-radius: 2px; font-size: 14px; cursor: pointer; } button:hover { background-color: lightblue; border: 1px solid lightblue; color: white; } select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; } #stories { background-color: #eee; line-height: 50px; font-size: 16px; cursor: pointer; } #new { width: 100%; } #new input, select, textarea { background-color: #eee; border-radius: 0; border: none; border-left: 6px solid lightblue; font-size: 14px; font-family: courier; height: 50px; padding-left: 18px; margin-bottom: 12px; } mark { background-color: lightblue; font-weight: bold; } .flash { background-color: #eee; color: hotpink; font-weight: bold; }
}
@media screen and (max-width: 600px) {
.wrapper { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; width: auto; } .content, .sidebar { float: none; width: 100%; } .sidebar { background: transparent; border: none; border-top: 2px solid #ccc; padding: 0; } h1 { font-size: 24px; line-height: 36px; } h2 { font-size: 18px; line-height: 24px; }
}