/* test page styling */
-
{
padding: 0; margin: 0;
}
body {
background: #033649; font-family: Georgia, Times, "Times New Roman", serif; color: #fff; border: 9px solid #fff;
}
h1 {
color: #fff; display: block; margin: 0 0 1em 0; font-weight: normal; font-size: 30px;
}
h2 {
color: #ddd; display: block; margin: 0 0 1em 0; font-weight: normal; font-size: 24px;
}
p, ul li {
margin: 0 0 1em 0; color: #bebebe; font-size: 12px;
}
ul {
list-style: square;
}
.nav {
margin: 0 0 2em 0; font-size: 16px;
}
a, a:link, a:visited, a:active, a:hover {
color: #ccc; text-decoration: none; border-bottom: 1px solid #555; padding: 0 0 2px 0;
}
.container {
width: 80%; margin: 0 auto; padding: 60px 20px;
}
.nav-sep {
padding: 0 5px;
}
.controls {
overflow: hidden; margin: 60px 0 30px 0;
}
.controls .checkbox {
float: left; font-size: 13px; color: #ddd; margin: 5px 20px 5px 0;
}
.btn-remove, .btn-hidden {
margin: -8px 20px 0 20px; line-height: 1; border: 0; background: #ddd; color: #555; padding: 7px 10px;
}
/* test items */
.items-container, .data-test-items {
overflow: hidden; margin: 0 -1%;
}
.item {
display: block; float: left; width: 23%; background: #00A0B0;
}
.item p {
color: rgba(255,255,255,0.6); line-height: 1.5; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.item h2, .item h3, .item h4 {
color: #fff; margin: 0 0 1em 0; font-weight: normal;
}
.item h2 {
font-size: 24px;
}
.item h3 {
font-size: 20px;
}
.item h4 {
font-size: 16px;
}
.item-0 { background: #00A0B0; border-color: #008795 !important; } .item-1 { background: #6A4A3C; border-color: #52392e !important; } .item-2 { background: #CC333F; border-color: ad2b35 !important; } .item-3 { background: #EB6841; border-color: ca5938 !important; } .item-4 { background: #EDC951; border-color: d8b74a !important; } .item-5 { background: #00A0B0; border-color: #008795 !important; } .item-6 { background: #6A4A3C; border-color: #52392e !important; } .item-7 { background: #CC333F; border-color: ad2b35 !important; } .item-8 { background: #EB6841; border-color: ca5938 !important; } .item-9 { background: #EDC951; border-color: d8b74a !important; } .item-10 { background: #00A0B0; border-color: #008795 !important; } .item-11 { background: #6A4A3C; border-color: #52392e !important; }
.item img {
display: block; max-width: 100%;
}
.item p:last-child {
margin-bottom: 0;
}
.items-container.big-items .item {
width: 48%;
}
/* test margins */
.test-margin .item {
margin: 1%;
}
/* test a mix of padding amounts */
.test-padding .item {
padding: 20px;
}
.test-padding .item-5 {
padding: 30px;
}
.test-padding .item-6 {
padding: 40px;
}
.test-padding .item-7 {
padding: 50px;
}
/* test a mix of border widths */
.test-border .item {
border: 1px solid #eee;
}
.test-border .item-2 {
border: 3px solid #eee;
}
.test-border .item-3 {
border: 6px solid #eee;
}
.test-border .item-5 {
border: 8px solid #eee;
}
.test-border .item-8 {
border: 10px solid #eee;
}
/* test border-box */
.test-border-box .item {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* test fixed height items */
.items-container.fixed-items .item-0 {
height: 150px;
}
.items-container.fixed-items .item-1 {
height: 190px;
}
.items-container.fixed-items .item-2 {
height: 230px;
}
.items-container.fixed-items .item-3 {
height: 250px;
}
/* test responsive */
@media only screen and (max-width: 1024px) {
.item, .items-container.big-items .item { width: 48%; }
}
@media only screen and (max-width: 640px) {
.test-margin .item, .test-margin .items-container.big-items .item { width: 99%; margin-left: 0; margin-right: 0; }
}
/* test hidden */
.test-hidden .hidden-items > .item-0, .test-hidden .hidden-items > .item-2 {
display: none;
}
.test-hidden .hidden-items > .item-1, .test-hidden .hidden-items > .item-3 {
visibility: hidden;
}
/* test inline-block */
.inline-block-items {
text-align: center;
}
.inline-block-items .item {
display: inline-block; vertical-align: top; /*width: 20%;*/ float: none;
}