Difference between revisions of "Team:Jilin China/CSS Details"

 
(472 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
 +
.bodycontent .s2 > ul > li a:hover, .bodycontent .s3 > ul > li a:hover{
 +
color:#FFD400;
 +
 +
text-decoration:none !important;
 +
}
 +
 +
h3{
 +
font-weight:100 !important;
 +
text-indent: 0 !important;
 +
}
 +
 +
 +
.bodycontent .s2 > ul > li a, .bodycontent .s3 > ul > li a{
 +
color:#44C2F0;
 +
font-family: Trebuchet MS !important;
 +
font-weight:bold;
 +
transition: color 0.3s ease;
 +
}
 +
.bodycontent .s2 > ul > li .bg_dark{
 +
color:white;
 +
background:black;
 +
}
 +
 +
 +
.HP_Reflections{
 +
padding:0;
 +
margin:0;
 +
background:rgba(0,0,0,0.1);
 +
}
 +
.HP_Reflections h3, .HP_Reflections p{
 +
color:black !important;
 +
}
 +
 +
.HP_Quotes{
 +
font-family: Trebuchet MS;
 +
background:rgba(0,0,0,0.05);
 +
display:block;
 +
text-indent:0;
 +
padding:1rem;
 +
box-sizing:border-box;
 +
text-align:left !important;
 +
}
 +
 +
.HP_Quote::before{
 +
content:"";
 +
position:absolute;
 +
top:1rem;
 +
left:1rem;
 +
display:block;
 +
height:3rem;
 +
width:3rem;
 +
background:url(https://static.igem.org/mediawiki/2018/6/69/T--Jilin_China--HP--Materials--Quote.svg) no-repeat center;
 +
transform:rotate(180deg);
 +
opacity:0.5;
 +
}
 +
.HP_Quote{
 +
font-family: Trebuchet MS;
 +
background:rgba(0,0,0,0.05);
 +
display:block;
 +
text-indent:0;
 +
padding:4rem !important;
 +
box-sizing:border-box;
 +
position:relative;
 +
margin:3rem 0 !important;
 +
}
 +
.HP_Quote::after{
 +
content:"";
 +
position:absolute;
 +
bottom:1rem;
 +
right:1rem;
 +
display:block;
 +
height:3rem;
 +
width:3rem;
 +
background:url(https://static.igem.org/mediawiki/2018/6/69/T--Jilin_China--HP--Materials--Quote.svg) no-repeat center;
 +
opacity:0.5;
 +
}
 +
.HP_Quote_text{
 +
/*font-family: Trebuchet MS;*/
 +
font-style:Italic;
 +
background:rgba(0,0,0,0.05);
 +
display:block;
 +
text-indent:0;
 +
padding:4rem !important;
 +
box-sizing:border-box;
 +
position:relative;
 +
width:calc(100% - 2rem) !important;
 +
margin:3rem 1rem !important;
 +
border-left:6px solid #C0C0C0;
 +
}
 +
.bodycontent .s2 > ul > li > div > .definition{
 +
font-size: 1.5rem !important;
 +
width:70% !important;
 +
display:block;
 +
background-color:rgba(0,0,0,0.05);
 +
font-family: Trebuchet MS !important;
 +
font-weight:bolder;
 +
padding:3rem;
 +
z-index:2;
 +
margin:3rem auto !important;
 +
box-sizing:border-box;
 +
position:relative;
 +
overflow:hidden;
 +
}
 +
.definition::after{
 +
content:"Def";
 +
position:absolute;
 +
bottom:0;
 +
right:0;
 +
z-index:1;
 +
font-size:10vw;
 +
color:rgba(0,0,0,0.1);
 +
font-family: Trebuchet MS !important;
 +
}
 +
  
 
@media screen and (min-width:1080px){
 
@media screen and (min-width:1080px){
 
.bodycontent .s2 > ul > li{
 
.bodycontent .s2 > ul > li{
 
background: white;
 
background: white;
−
padding: 2rem calc(10rem + 7.5vw) 2rem 0 !important;
+
padding: 3.5vw 0 3.5vw 0 !important;
 
margin-bottom: 2rem;
 
margin-bottom: 2rem;
 +
}
 +
.bodycontent .s2 > ul > li:not(.full-width) > div, .bodycontent .s2 > ul > li > span > div{
 +
padding: 0 calc(10rem + 9.5vw) 0 7.5vw !important;
 +
box-sizing: border-box;
 +
margin:0 auto;
 +
width:100%;
 +
}
 +
.details_button{
 +
margin:0 0 0 calc(42.5vw - 11rem) !important;
 
}
 
}
 
}
 
}
−
@media screen and (min-width:768px){
+
.pdfs{
−
+
width:100%;
 +
height:50rem;
 +
padding:
 +
}
 +
.pdfs object {
 +
width:100%;
 +
height:100%;
 +
object-fit:cover;
 +
overflow:auto;
 +
min-height: 100%
 +
}
 +
@media screen and (min-width:680px){
 
.s1{
 
.s1{
 
width: 100%;
 
width: 100%;
−
height: 100vh;
+
height: 100%;
 
padding-bottom: 5rem;
 
padding-bottom: 5rem;
 +
display: flex;
 
}
 
}
 
.s1 .title_con{
 
.s1 .title_con{
−
left:5rem;
+
left:7.5vw;
 
bottom:15vh;
 
bottom:15vh;
 
position: fixed;
 
position: fixed;
 +
transform: ;
 +
}
 +
.s1_simplified{
 +
width: 100%;
 +
height:auto;
 +
padding-bottom: 5rem;
 +
}
 +
.s1_simplified .title_con{
 +
left:7.5vw;
 +
bottom:auto;
 +
position: relative;
 
}
 
}
 
.s1 p{
 
.s1 p{
Line 26: Line 173:
 
padding: 0 2rem 0 0 !important;
 
padding: 0 2rem 0 0 !important;
 
color: white;
 
color: white;
−
font-size: 10vw !important;
+
font-size: 8vw !important;
 +
line-height:1 !important;
 
font-weight: bold;
 
font-weight: bold;
−
text-align: left;
 
 
z-index: 0;
 
z-index: 0;
 +
float:left;
 
border-right: 10px white solid;
 
border-right: 10px white solid;
 
text-shadow: 0 0 1rem rgba(0,0,0,0.1);
 
text-shadow: 0 0 1rem rgba(0,0,0,0.1);
 +
width: auto !important;
 +
text-align:left !important;
 +
}
 +
.s1_simplified p{
 +
box-sizing: border-box;
 +
margin: 12rem 0 0 2rem !important;
 +
padding: 0 2rem 0 0 !important;
 +
color: black;
 +
font-size: 6vw !important;
 +
line-height:1 !important;
 +
font-weight: bold !important;
 +
float:left;
 +
z-index: 0;
 +
border-right: 8px black solid !important;
 +
text-shadow: 0 0 1rem rgba(0,0,0,0.1);
 +
width: auto !important;
 +
text-align:left !important;
 +
}
 +
.s1 p span{
 +
font-size: 5vw !important;
 +
line-height:1 !important;
 +
color: rgba(255,255,255,0.8) !important;
 +
}
 +
.s1_simplified p span{
 +
font-size: 5vw !important;
 +
line-height:1 !important;
 +
color: rgba(0,0,0,0.8) !important;
 
}
 
}
 
.s1 table{
 
.s1 table{
−
margin: 0 0 0 2rem;
+
margin: 0 0 0 2rem !important;
 
z-index: 0;
 
z-index: 0;
 
border:0 !important;
 
border:0 !important;
 
background: transparent !important;
 
background: transparent !important;
 
padding:0 !important;
 
padding:0 !important;
 +
}
 +
.s1 table tr{
 +
padding: 0.5rem 0 !important;
 
}
 
}
 
.s1 table td{
 
.s1 table td{
−
height:4rem;
+
padding: 0 !important;
−
width: 15rem;
+
height:4vw;
 +
width: 12vw;
 
color: white;
 
color: white;
 
border:0 !important;
 
border:0 !important;
 
}
 
}
 
.s1 table td a{
 
.s1 table td a{
−
display: block;
+
display: flex;
 
text-align: center;
 
text-align: center;
−
height:4rem;
+
height:100%;
−
width: 14rem;
+
width: 95%;
−
background: rgba(0,0,0,0.3);
+
background: rgba(0,0,0,0.2);
−
line-height: 4rem;
+
justify-content: center;
 +
align-items: center;
 
margin: 0 auto;
 
margin: 0 auto;
−
font-size: 1.1rem;
+
font-size: 1.1vw;
−
transition: all 0.1s ease-out;
+
transition: all 0.1s ease;
 
color:white !important;
 
color:white !important;
 
}
 
}
 
.s1 table td a:hover{
 
.s1 table td a:hover{
−
height:4rem;
+
text-decoration: none;
−
width: 15rem;
+
height:100%;
 +
width: 100%;
 
background: rgba(0,0,0,0.4);
 
background: rgba(0,0,0,0.4);
−
transition: all 0.1s ease-out;
+
transition: all 0.1s ease;
 
}
 
}
 
.s1 table td h2{
 
.s1 table td h2{
Line 89: Line 270:
 
padding: 0;
 
padding: 0;
 
margin: 0 auto 0.5rem ;
 
margin: 0 auto 0.5rem ;
 +
}
 +
.bodycontent .s2 > ul > li.full-width .full-left{
 +
width:60%;
 +
float:left;
 +
}
 +
.bodycontent .s2 > ul > li.full-width .full-right{
 +
width:60%;
 +
float:right;
 
}
 
}
 
.bodycontent .s2 > ul > li{
 
.bodycontent .s2 > ul > li{
 
background: white;
 
background: white;
−
padding: 2rem 7.5vw 2rem 0;
+
padding: 3.5vw 0 3.5vw 0;
−
margin-bottom: 2rem;
+
margin: 0;
−
}
+
−
.bodycontent .s2 > ul > li{
+
−
transform: skewY(-4deg);
+
 
}
 
}
 
.bodycontent .s2 > ul > li:nth-of-type(even){
 
.bodycontent .s2 > ul > li:nth-of-type(even){
−
background: rgba(230,230,230,1.00);
+
background: #eef4ff;
 
}
 
}
−
.bodycontent .s2 > ul > li > div{
+
.bodycontent .s2 > ul > li > div,.bodycontent .s2 > ul > li > span > div{
−
padding: 0 2vw 0 7.5vw;
+
padding: 0 7.5vw 0 7.5vw;
 
box-sizing: border-box;
 
box-sizing: border-box;
 
margin:0 auto;
 
margin:0 auto;
 
width:100%;
 
width:100%;
−
transform: skewY(4deg);
+
}
 +
.bodycontent .s2 > ul > li > span {
 +
display: block;
 +
width:100%;
 +
height:4rem;
 +
overflow:hidden;
 +
}
 +
.bodycontent .s2 > ul > li > span >:not(.details_button_background){
 +
opacity:0;
 +
transition: all 0.3s ease;
 +
}
 +
.bodycontent .s2 .paragraph_banner{
 +
height:30rem;
 +
margin:5rem 0 !important;
 +
}
 +
.bodycontent .s2 .paragraph_banner div{
 +
height:100%;
 +
}
 +
.bodycontent .s2 .paragraph_banner_in{
 +
height: 25rem;
 +
margin: 1rem 0;
 +
}
 +
.bodycontent .s2 .paragraph_banner_in div{
 +
height:100%;
 
}
 
}
 
.bodycontent .s2 h2{
 
.bodycontent .s2 h2{
 
box-sizing: border-box;
 
box-sizing: border-box;
−
padding: 1rem 0 1rem 0;
+
padding: 1rem 4rem 1rem 2rem !important;
 
font-size: 2rem !important;
 
font-size: 2rem !important;
−
margin: 2rem 1rem;
+
margin: 2rem 1rem !important;
−
border-bottom: 2px solid #CFCFCF;
+
border-left: 6px solid;
 
line-height: 3rem;
 
line-height: 3rem;
 +
position: relative;
 
}
 
}
−
.bodycontent .s2 p:first-letter{
+
.bodycontent .s2 h2:before {
 +
content:"";
 +
position: absolute;
 +
top:0;
 +
right:0;
 +
width:3rem;
 +
height:100%;
 +
animation: IconSpin 1s ease infinite alternate;
 +
}
 +
.bodycontent .s2 h3{
 +
box-sizing: border-box;
 +
margin: 1rem 1rem 0 1rem !important;
 +
font-size: 1.5rem !important;
 +
line-height: 2rem;
 +
color:#595959;
 +
padding-left:1rem;
 +
border-left: 6px solid #595959;
 +
}
 +
.bodycontent .s2 p:first-of-type:first-letter{
 
float: left;
 
float: left;
 
font-size: 3.8rem;
 
font-size: 3.8rem;
Line 122: Line 350:
 
padding:0 0.5rem;
 
padding:0 0.5rem;
 
color: #424242;
 
color: #424242;
 +
}
 +
.toBeDeletedAlert div p {
 +
font-size:1.5rem !important;
 +
line-height: 2.3rem !important;
 +
}
 +
.bodycontent .s2 p:first-of-type{
 +
text-indent: 0 !important;
 
}
 
}
 
.bodycontent .s2 p{
 
.bodycontent .s2 p{
 
box-sizing: border-box;
 
box-sizing: border-box;
 
clear: both;
 
clear: both;
−
text-indent: 0;
+
/*text-indent: 2rem !important;*/
 
line-height: 1.9rem !important;
 
line-height: 1.9rem !important;
 
column-count: 1;
 
column-count: 1;
−
column-gap: 1.5rem;
+
column-gap: 2rem;
 
padding: 1rem;
 
padding: 1rem;
 
font-size: 1.1rem !important;
 
font-size: 1.1rem !important;
Line 135: Line 370:
 
}
 
}
 
.bodycontent .s2 p .figures{
 
.bodycontent .s2 p .figures{
−
margin: 0 1rem;
+
margin: 0 1vw;
 +
padding: 0 2vw;
 +
box-sizing:border-box;
 
float: right;
 
float: right;
 
width: 50%;
 
width: 50%;
Line 142: Line 379:
 
.bodycontent .s2 p .figures img{
 
.bodycontent .s2 p .figures img{
 
width:100%;
 
width:100%;
−
height:10rem;/*delet this!*/
 
−
background: rgba(0,0,0,0.1);
 
 
}
 
}
 
.bodycontent .s2 p .figures .figure{
 
.bodycontent .s2 p .figures .figure{
 
float:right;
 
float:right;
 
width:100%;
 
width:100%;
 +
font-family: Trebuchet MS;
 +
}
 +
.bodycontent .s2 .tables{
 +
font-size:1.3rem !important;
 +
padding: 4rem 0 1rem;
 +
margin: 0 1rem;
 +
border-bottom:2px solid #CCCCCC;
 +
font-weight:100;
 +
width:calc(100% - 2rem);
 
font-family: Trebuchet MS;
 
font-family: Trebuchet MS;
 
}
 
}
Line 155: Line 399:
 
}
 
}
 
.bodycontent .s2 table{
 
.bodycontent .s2 table{
−
margin: 1rem auto;
+
margin: 1rem auto !important;
−
width: calc(100% - 12vw);
+
width: calc(100% - 2rem) !important;
−
width: -webkit-calc(100% - 12vw);
+
−
width: -moz-calc(100% - 12vw);
+
 
border-collapse: separate;
 
border-collapse: separate;
 
border-spacing: 0;
 
border-spacing: 0;
 +
font-family: Trebuchet MS !important;
 
}
 
}
 
.bodycontent .s2 table caption{
 
.bodycontent .s2 table caption{
Line 168: Line 411:
 
}
 
}
 
.bodycontent section table td,th{
 
.bodycontent section table td,th{
−
border-right: 1px solid #d4d8da;
+
border: 2px solid #d4d8da !important;
−
border-bottom: 1px solid #d4d8da;
+
 
padding: 0.5rem;
 
padding: 0.5rem;
 
box-sizing: border-box;
 
box-sizing: border-box;
 
text-align: center;
 
text-align: center;
 +
background:white !important;
 
}
 
}
 
.bodycontent table tr:first-child th{
 
.bodycontent table tr:first-child th{
 
border-top:solid 1px #d4d8da;
 
border-top:solid 1px #d4d8da;
 
}
 
}
−
    .bodycontent table tr th:first-child,.bodycontent table tr td:first-child {
+
        .bodycontent table tr th:first-child,.bodycontent table tr td:first-child {
 
border-left: 1px solid #d4d8da;
 
border-left: 1px solid #d4d8da;
 
}
 
}
Line 186: Line 429:
 
background: rgba(0,0,0,0.1);
 
background: rgba(0,0,0,0.1);
 
}
 
}
 +
.HP_Quotes{
 +
font-size:1.1rem;
 +
line-height:1.7rem;
 +
}
 +
 +
.subway_stops{
 +
width:100%;
 +
}
 +
.subway_stops > ul{
 +
paddding:0 !important;
 +
margin:3vw 0 !important;
 +
}
 +
.subway_stops > ul li{
 +
width:33.33%;
 +
height:14rem !important;
 +
float:left;
 +
padding:2rem 1rem;
 +
box-sizing:border-box;
 +
transition: all 0.3s ease;
 +
}
 +
.subway_stops ul li:nth-of-type(odd){
 +
background:rgba(0,0,0,0.02);
 +
}
 +
.subway_stops ul li:hover{
 +
background:rgba(0,0,0,0.1);
 +
}
 +
.bodycontent .s2 > ul > li > div > .subway_stops > ul > li > a > p{
 +
font-weight:100 !important;
 +
color:#999999 !important;
 +
float:right;
 +
margin-top:-2rem !important;
 +
width:calc(100% - 4rem) !important;
 +
font-size:0.9vw !important;
 +
}
 +
.subway_stops ul li h4{
 +
color:#070707 !important;
 +
}
 +
.subway_stops ul li h4:first-letter{
 +
float: left;
 +
font-size: 4.5rem;
 +
line-height: 4.5rem;
 +
padding:0 0.5rem;
 +
color: #BBBBBB;
 +
}
 +
 
.bodycontent .reference ul li{
 
.bodycontent .reference ul li{
−
list-style: decimal;
+
list-style: none;
−
padding: 1rem 1rem 0 1rem;
+
padding: 0.3rem 1rem 0 0;
 
box-sizing: border-box;
 
box-sizing: border-box;
 +
text-align: justify;
 +
font-family:Times New Roman;
 
}
 
}
 
.triangle{
 
.triangle{
Line 198: Line 488:
 
padding: 0;
 
padding: 0;
 
}
 
}
−
.figure{
+
.bodycontent section .figure:first-letter{
−
color:rgba(0,20,86,1.00);
+
color:gray !important;
−
font-style: italic;
+
font-size: 0.9rem !important;
−
font-size: 1rem;
+
font-family: Arial !important;
 
font-weight: normal;
 
font-weight: normal;
−
text-align: center;
+
margin: 0 auto;
−
margin: 0;
+
width:auto !important;
 +
line-height: 0.9rem !important;
 +
float:none !important;
 +
padding:0 !important;
 
}
 
}
 +
.bodycontent section .figure{
 +
color:gray;
 +
font-size: 0.9rem !important;
 +
font-family: Arial !important;
 +
font-weight: normal;
 +
width:auto !important;
 +
line-height:0.9rem !important;
 +
text-align:center !important;
 +
}
 +
 
}
 
}
  
−
@media screen and (max-width:768px){
+
@media screen and (max-width:680px){
−
+
p{/*text-align:left !important;*/}
 
.s1{
 
.s1{
 
width: 100%;
 
width: 100%;
−
height: 100%;
+
height: 40%;
 
background-size: cover;
 
background-size: cover;
−
padding-top: 3rem;
+
margin-top: calc(4rem - 1px);
 
animation: fadeIn 0.5s ease;
 
animation: fadeIn 0.5s ease;
 +
position:relative;
 +
margin-bottom: calc(28vw + 1rem);
 
}
 
}
 
.s1 p{
 
.s1 p{
 
position: absolute;
 
position: absolute;
−
bottom: 2rem;
+
bottom: -28vw;
−
margin: 0 0 0 2rem;
+
margin: 0 !important;
−
padding: 1rem;
+
padding: 0 1.5rem  !important;
−
color: white;
+
color:black;
−
font-size: 10vw;
+
font-size: 10vw !important;
 +
line-height:1;
 
font-weight: bold;
 
font-weight: bold;
 
text-align: left;
 
text-align: left;
−
background: rgba(0,0,0,0.3);
+
background: rgba(0,0,0,0);
−
+
/*backdrop-filter: blur(5px);
 +
-webkit-backdrop-filter: blur(5px);*/
 +
}
 +
.s1 p span{
 +
font-size: 6vw !important;
 +
line-height: 1 !important;
 +
color: rgba(0,0,0,0.4) !important;
 
}
 
}
 
.s1 table{
 
.s1 table{
Line 233: Line 545:
 
}
 
}
 
.bodycontent{
 
.bodycontent{
−
background: rgba(0,0,0,0.1);
+
background: rgba(0,0,0,0.0);
 +
padding: 0rem !important;
 
}
 
}
 
.bodycontent section{
 
.bodycontent section{
Line 241: Line 554:
 
list-style: none;
 
list-style: none;
 
padding: 0;
 
padding: 0;
−
margin: 0.5rem 0;
+
margin:0;
 
}
 
}
 
.bodycontent section > ul > li{
 
.bodycontent section > ul > li{
 
background: white;
 
background: white;
−
padding: 1.5rem;
+
margin: 1rem 0;
−
margin-bottom: 0.5rem;
+
box-shadow: 0 0 0.5rem rgba(0,0,0,0.00);
 +
}
 +
.bodycontent section > ul > li > div{
 +
padding: 0 1.5rem;
 
}
 
}
 
.bodycontent section h2{
 
.bodycontent section h2{
 +
height: 2.8rem;
 +
line-height: 2.8rem;
 +
font-weight:100 !important;
 +
font-size:1.5rem;
 
padding: 0;
 
padding: 0;
−
margin: 0 0 1rem 0;
+
margin: 3rem 0 1rem 0 !important;
−
text-align: center;
+
text-align: left;
 +
}
 +
.bodycontent section h3{
 +
line-height: 1.5rem;
 +
font-size:1.1rem;
 +
padding: 0;
 +
margin: 1rem 0 1rem 0 !important;
 +
color:#595959;
 
}
 
}
 
.bodycontent section p{
 
.bodycontent section p{
 
margin: 0;
 
margin: 0;
−
text-indent: 1.5rem;
+
text-align:left !important;
−
line-height: 1.5rem;
+
font-size: 1rem !important;
 +
text-indent: 0;
 +
line-height: 1.7rem;
 +
font-weight:100 !important;
 +
padding: 0 0 1rem 0;
 +
color:#404040;
 
}
 
}
 
.bodycontent section table{
 
.bodycontent section table{
Line 279: Line 611:
 
border-top:solid 1px #d4d8da;
 
border-top:solid 1px #d4d8da;
 
}
 
}
−
    .bodycontent table tr th:first-child,.bodycontent table tr td:first-child {
+
.bodycontent table tr th:first-child,.bodycontent table tr td:first-child {
 
border-left: 1px solid #d4d8da;
 
border-left: 1px solid #d4d8da;
 
}
 
}
Line 292: Line 624:
 
width: 100%;
 
width: 100%;
 
}
 
}
 +
.bodycontent .s2 .paragraph_banner{
 +
height:12rem;
 +
margin:3rem 0;
 +
}
 +
.bodycontent .s2 .paragraph_banner div{
 +
height:100%;
 +
}
 +
.bodycontent .s2 .paragraph_banner_in{
 +
height: 10rem;
 +
margin: 1rem 0;
 +
}
 +
.bodycontent .s2 .paragraph_banner_in div{
 +
height:100%;
 +
}
 +
 +
.subway_stops{
 +
width:100%;
 +
}
 +
.subway_stops > ul{
 +
paddding:0 !important;
 +
margin:3vw 0 !important;
 +
list-style:none;
 +
}
 +
.subway_stops > ul li{
 +
width:100%;
 +
height:14rem !important;
 +
float:left;
 +
padding:2rem 1rem;
 +
box-sizing:border-box;
 +
transition: all 0.3s ease;
 +
list-style:none !important;
 +
}
 +
.subway_stops ul li:nth-of-type(odd){
 +
background:rgba(0,0,0,0.02);
 +
}
 +
.subway_stops ul li:hover{
 +
background:rgba(0,0,0,0.1);
 +
 +
}
 +
.subway_stops ul li a p{
 +
font-weight:100 !important;
 +
color:#999999 !important;
 +
float:right;
 +
margin-top:-2rem !important;
 +
width:calc(100% - 6rem) !important;
 +
font-size:0.9rem !important;
 +
}
 +
.subway_stops ul li h4{
 +
color:#070707 !important;
 +
}
 +
.subway_stops ul li h4:first-letter{
 +
float: left;
 +
font-size: 4.5rem;
 +
line-height: 4.5rem;
 +
padding:0 0.5rem;
 +
color: #BBBBBB;
 +
}         
 +
 
.bodycontent .reference ul li{
 
.bodycontent .reference ul li{
 
font-size: 0.7rem;
 
font-size: 0.7rem;
Line 297: Line 687:
 
padding: 0.5rem 0;
 
padding: 0.5rem 0;
 
box-sizing: border-box;
 
box-sizing: border-box;
 +
}
 +
.HP_Reflections{
 +
padding:1rem;
 +
box-sizing:border-box;
 
}
 
}
 
.figure{
 
.figure{
 
color:rgba(0,20,86,1.00);
 
color:rgba(0,20,86,1.00);
−
font-style: italic;
 
 
font-size: 0.9rem;
 
font-size: 0.9rem;
 
font-weight: normal;
 
font-weight: normal;
−
text-align: center;
+
margin: 0 auto;
−
margin: 0;
+
 
}
 
}
 
.bodycontent .s2 p .figures{
 
.bodycontent .s2 p .figures{
Line 313: Line 705:
 
}
 
}
 
.bodycontent .s2 p .figures img{
 
.bodycontent .s2 p .figures img{
−
padding: 0;
+
padding: 1rem;
 +
box-sizing:border-box;
 
margin: 0;
 
margin: 0;
 
width: 100%;
 
width: 100%;
 
float: left;
 
float: left;
−
height:10rem;/*delet this!*/
 
−
background: rgba(0,0,0,0.1);
 
 
}
 
}
−
.bodycontent .s2 p .figures .figure{
+
.bodycontent .s2 p .figures .figure_in{
 
float:right;
 
float:right;
 
width: 100%;
 
width: 100%;
Line 326: Line 717:
 
}
 
}
  
 +
@keyframes IconSpin {
 +
0%{
 +
transform:rotate(0deg);
 +
}
 +
100%{
 +
transform:rotate(10deg);
 +
}
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:24, 17 October 2018