Dalmationer.art/mainstyles.css

194 lines
3.8 KiB
CSS

a{
color: #1775BB;
}
#navbutton{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
border-radius: 10px;
font-size: large;
text-align: center;
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
margin-bottom: 5px;
font-weight: bold;
background: #EFFF96;
font-size: 100%;
}
#selfportrait-container{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10%;
font-weight: bold;
background: #EFFF96;
}
#selfportrait{
width: 100%;
margin-bottom:-15% ;
margin-top:-9%;
}
#navbutton:hover{
background: #FEFFCC;
}
#navbuttonactive{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
border-radius: 10px;
font-size: large;
text-align: center;
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
margin-bottom: 5px;
font-weight: bold;
background: #102C22;
font-size: 100%;
}
body{
background-color: #1E3B27;
background-image: url(./images/bubblebg.png);
background-attachment: scroll;
background-repeat: repeat;
color: #181917;
font-family: Georgia, 'Times New Roman', Times, serif;
}
#content-container{
display: flex;
flex-direction: row;
align-items:top;
margin-top: 10px;
margin-left: 10%;
margin-right: 10%;
height: auto;
margin-bottom: 10px;
word-wrap: break-word;
}
#content-header{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
text-align: center;
margin-left: 10%;
margin-right: 10%;
padding-left: 2px;
padding-right: 2px;
margin-top: 2px;
background-color: #B3EB79;
}
#sidebar{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
position: -webkit-sticky; /* Safari */
position: sticky;
flex: 20%;
margin-right: 5px;
padding-left: 2px;
padding-right: 2px;
background-color: #B3EB79;
max-width: 600px;
}
#main-content{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
flex: 80%;
margin-left: 5px;
padding-left: 2px;
padding-right: 2px;
background-color: #B3EB79;
}
footer{
border: 4px 2px 2px 4px;
border-color: #181917;
border-style: double solid solid double ;
text-align: center;
margin-left: 10%;
margin-right: 10%;
padding-left: 2px;
padding-right: 2px;
margin-top: 2px;
background-color: #B3EB79;
}
.logo{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
max-width: 184px;
-ms-interpolation-mode:nearest-neighbor;
/*IE 7-11*/
image-rendering: -o-crisp-edges;
/*Opera 12*/
image-rendering: -webkit-crisp-edges;
/*Safari 6-9*/
image-rendering:-moz-crisp-edges;
/*Firefox 3.6-64*/
}
/*Undersize.*/
@media only screen and (max-width: 800px) {
#content-header{
width: 100%;
display: block;
max-width: 100%;
margin-left: 0;
margin-right: auto;
}
#content-container{
width: 100%;
display: block;
margin-left: 0;
margin-right: auto;
}
#main-content{
width: 100%;
order: 1;
display: block;
margin-left: 0;
margin-right: auto;
}
#sidebar{
width: 100%;
order: 2;
display: block;
margin-left: 0;
margin-right: auto;
}
footer{
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: auto;
}
}