will be a div using "box" and "left" styles.*/
.left {
text-align:left;
}
/*A box that stays at a fixed height and scrolls when content gets too long.*/
.box {
margin: 0 auto;
overflow: auto;
background-color: #fff;
border: 2px solid #000;
width: 32em;
height: 24em;
margin-top: 10.5%;
padding: 3.5em 4em;
}
.box-round {
margin: 0 auto;
background-color: #fff;
border: 2px solid #000;
width: 32em;
height: 24em;
margin-top: 7.5%;
overflow: auto;
padding: 20px;
padding-bottom: 30px;
border-radius: 50%;
padding: 7.5em 6em;
}
/*A box that doesn't scroll, instead growing in height.*/
.box-noscroll {
margin: 5% auto 4% auto;
background-color: #fff;
border: 2px solid #000;
width: 32em;
padding: 3.5em 4em;
}
/*Old box attributes. Use if you want an old-style box.*/
.old {
margin-top: 3%;
margin-bottom:3%;
width: 460px;
min-height:50px;
padding: 20px;
padding-bottom: 30px;
}
/*Prevent overflow of large images.*/
.box img, .box-noscroll img, .box-round img {
max-width: 100%;
height: auto;
}
/*For narrow screens.*/
@media (max-width: 500px) {
.box, .box-noscroll {
width: 85%;
}
}
/*Mobile compatibility*/
@media (orientation: portrait) {
.box, .box-noscroll {
width: 85%;
}
}