to create a button section in the sidebar.*/
.buttons {
list-style-type:none;
padding:3px;
}
/*Use with for individual buttons.*/
.button {
text-align:center;
border-radius: 5px;
border: 1px solid green;
padding: 10px;
margin:5px;
margin-top:10px;
margin-bottom:10px;
}
.sideimage { /*optional*/
right: 30px;
bottom:-20px;
float: right;
position: fixed;
max-width: 450px;
}
.sideimage img {
max-width: 100%;
height: auto;
}
@media(max-width: 1440px) {
.sideimage {
max-width: 0%;
/*if this can be executed, override the previous rule, otherwise hide the side image*/
max-width: calc(100% - 975px);
}
}
@media(max-width: 1200px) {
.sidebar-left {
margin-left: 25px;
}
.main {
margin-left: 350px;
}
.sideimage {
right: 5px;
max-width: 0%;
/*if this can be executed, override the previous rule, otherwise hide the side image*/
max-width: calc(100% - 900px);
}
}
@media(max-width: 1000px) {
.sidebar-left {
margin-left: 5px;
}
.main {
margin-left: 330px;
}
.sideimage {
/*don't even bother at this point*/
display: none;
}
}
/*Tentative mobile support.*/
@media(orientation:portrait) {
.sidebar-left {
min-height:0px;
width: 100%;
margin: 0 auto;
top:0;
left: 0;
padding: 0;
font-size: 0.9em;
position: relative;
border-radius: 5px;
}
.main {
width: 90%;
margin: 0 auto;
margin-top: 1em;
}
.sideimage {
/*don't even bother*/
display: none;
}
}