You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
special-issue-11-wiki2html/static_website/item_page/style.css

337 lines
4.7 KiB
CSS

5 years ago
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #aaa4a0;
}
/*index page links*/
li a:hover {
text-decoration: none;
color: blue;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
h1 {
position: fixed;
/*height: 50px;
width: auto;*/
right:0%;
text-align: right;
background-color: grey;
padding: 3px 30px 3px 10px;
}
h2, h3{
position: fixed;
left: 0%;
top: 5%;
text-align: left;
background-color: grey;
padding: 3px 3px 3px 30px;
}
.indexlist {
position: absolute;
top:20%;
}
.header {
/*display: inline-block;*/
position: absolute;
text-align: center;
padding: 32px;
top: 15%;
right: 0%;
z-index: -1;
}
.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
position: absolute;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
top: 35%;
z-index: -1;
}
/* Create two equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE 10 */
flex: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Style the buttons */
.btn {
position: relative;
border: none;
outline: none;
width: 110px;
text-align: center;
padding: 12px 0px;
background-color: grey;
cursor: pointer;
font-size: 18px;
margin-right: 5px;
}
.btn:hover {
background-color: black;
color: white;
}
.active {
background-color: black;
color: white;
}
/*metadata dropup*/
.dropbtn {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width: 200px;
}
.dropup {
position: absolute;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: black;
opacity: 0.8;
min-width: 160px;
bottom: 50px;
z-index: 1;
width: 300px;
color: grey;
}
.dropup-content a {
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {color: white;}
.dropup:hover .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: grey;
}
/*metadata dropdown*/
.dropbtn {
position: fixed;
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
bottom:30%;
}
.dropdown {
position: fixed;
display: inline-block;
bottom:30%;
width: 300px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/*something*/
#rightnav a {
position: absolute;
right: -90px;
/*top:10%;*/
transition: 0.3s;
padding: 10px 50px 10px 30px;
width: 150px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
text-align: right;
font-size: 15px;
}
#rightnav a:hover {
right: 0;
background-color: black;
}
#title {
top: 10%;
background-color: black;
}
#view {
top: 27%;
background-color: black;
}
#leftnav a {
position: absolute;
left: -80px;
/*top:10%;*/
transition: 0.3s;
padding: 10px 50px 10px 20px;
width: 125px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0 0 5px;
text-align: right;
font-size: 15px;
}
#leftnav a:hover {
left: 0;
background-color: black;
}
#date {
top: 14%;
background-color: black;
}
#creator {
top: 25%;
background-color: black;
}
.metadata_Creator{
position: absolute;
top:20%;
font-size: 18px;
background-color: grey;
padding: 3px 5px 3px 30px;
color: black;
}
.metadata_Creator a:hover{
color: blue;
text-decoration: none;
}
#myDIV {
display: none;
position: absolute;
width: 48%;
height: auto;
left:26%;
top:15%;
/*padding: 50px 0;*/
text-align: center;
background-color: grey;
margin-top: 20px;
z-index: 4;
opacity:0.8;
font-size: 15px;
}
#myDIV a:hover{
color: blue;
}
.orgbtn {
position: relative;
border: none;
outline: none;
width: 15%;
left:11%;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
background-color: grey;
color: grey;
cursor: pointer;
font-size: 18px;
/*margin-right: 5px;*/
}
.orgbtn:hover {
background-color: black;
color:white;
}
.square {
display: block;
position: absolute;
width: 50%;
height: 80%;
left:25%;
top:11%;
text-align: center;
background-color: transparent;
z-index: 2;
border-color: black;
border: solid 5px;
}