(248 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
html{ | html{ | ||
font-size: 14px; | font-size: 14px; | ||
+ | font-family: Karla, serif; | ||
} | } | ||
html body{ | html body{ | ||
background-color: #daede9; | background-color: #daede9; | ||
− | font-family: ' | + | font-family: 'Varela Round', sans-serif; |
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | b{ | ||
+ | color: #5ec3af; | ||
+ | } | ||
+ | |||
+ | #Caption{ | ||
+ | font-size: 14px !important; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | #Caption b{ | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #SocialMedia{ | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | #SocialMedia img{ | ||
+ | justify-content: center; | ||
+ | max-width: 50px; | ||
+ | padding-top: 2rem; | ||
+ | padding-left: 2rem; | ||
+ | padding-right: 2rem; | ||
+ | padding-bottom: 1rem; | ||
+ | opacity: 1.0; | ||
+ | filter: alpha(opacity=50); | ||
+ | } | ||
+ | |||
+ | |||
+ | #SocialMedia img:hover { | ||
+ | opacity: 0.5; | ||
+ | filter: alpha(opacity=100); | ||
+ | } | ||
+ | |||
+ | #HQ_page p{ | ||
+ | line-height: 150%; | ||
+ | margin-top: 12px; | ||
+ | font-family: Karla, serif; | ||
+ | } | ||
+ | |||
+ | #HQ_page table{ | ||
+ | margin-left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #HQ_page h1, h2, h3, h4, h5{ | ||
+ | font-family: 'Varela Round'; | ||
+ | font-size:28px; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | #HQ_page h1{ | ||
+ | text-transform: uppercase; | ||
+ | font-weight: bold; | ||
+ | text-align: center; | ||
+ | padding-top: 2rem; | ||
+ | } | ||
+ | |||
+ | #HQ_page h2{ | ||
+ | font-size: 24px; | ||
+ | color: #fcb633; | ||
+ | } | ||
+ | |||
+ | #HQ_page h3{ | ||
+ | font-size: 16px; | ||
+ | color: #5ec3af; | ||
+ | margin-top: 1rem; | ||
+ | } | ||
+ | |||
+ | #HQ_page h4{ | ||
+ | font-size: 14px; | ||
+ | color: #d24f2b; | ||
} | } | ||
body{ | body{ | ||
− | margin: | + | margin: 5rem auto; |
− | padding: 2 rem; | + | padding: 2 rem; |
− | width: | + | width: 100%; |
} | } | ||
− | a:link, a:visited{ | + | #InfoBox{ |
− | font-family: ' | + | background: #fcb633; |
− | color:#faece5; | + | color: #fff; |
+ | display: inline-block; | ||
+ | padding: 2em; | ||
+ | z-index: 2; | ||
+ | border: 10px dashed #fff; | ||
+ | } | ||
+ | |||
+ | #OneCol{ | ||
+ | text-align: center; | ||
+ | padding-top: 2rem; | ||
+ | padding-left: 2rem; | ||
+ | padding-right: 2rem; | ||
+ | padding-bottom: 1rem; | ||
+ | } | ||
+ | |||
+ | #OneCol img{ | ||
+ | max-width: 95%; | ||
+ | } | ||
+ | |||
+ | #TwoCols img{ | ||
+ | vertical-align: top; | ||
+ | display: inline-block; | ||
+ | max-width: 45.5%; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | |||
+ | #ThreeCols div{ | ||
+ | display: inline-block; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | #ThreeCols img{ | ||
+ | vertical-align: top; | ||
+ | max-width: 31%; | ||
+ | padding: 1%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #FourCols img{ | ||
+ | vertical-align: top; | ||
+ | display: inline-block; | ||
+ | max-width: 24%; | ||
+ | padding: 0.25%; | ||
+ | } | ||
+ | |||
+ | #TopBar{ | ||
+ | padding-top: 0.5rem; | ||
+ | padding-right: 60rem; | ||
+ | padding-left: 15%; | ||
+ | position: fixed; /* Set the navbar to fixed position */ | ||
+ | top: 0; /* Position the navbar at the top of the page */ | ||
+ | width: 70%; /* Full width */ | ||
+ | text-align: left; | ||
+ | margin-top: 1.5rem; | ||
+ | background-color: #d24f2b; | ||
+ | list-style: none; | ||
+ | z-index: 9; | ||
+ | |||
+ | |||
+ | background-image: url("https://static.igem.org/mediawiki/2017/e/e0/Calgary2017_HeaderRedNoBorder.png"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | background-size: 100%; | ||
+ | |||
+ | background-position: 0px -35px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #TopBar li { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul li{ | ||
+ | float: none; | ||
+ | position: relative; | ||
+ | font-family: 'Varela Round'; | ||
+ | color: #faece5; | ||
+ | font-weight: 900; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul ul{ | ||
+ | position: absolute; | ||
+ | left: 100%; | ||
+ | top: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #TopBar a:link, a:visited{ | ||
+ | font-family: 'Varela Round'; | ||
+ | color: #faece5; | ||
font-weight: 900; | font-weight: 900; | ||
} | } | ||
− | a:hover, a:active{ | + | #TopBar a:hover, a:active{ |
color: #fcaa77; | color: #fcaa77; | ||
+ | } | ||
+ | |||
+ | #TopBar a:-webkit-any-link { | ||
+ | text-decoration: none; | ||
} | } | ||
Line 33: | Line 203: | ||
#MainContent{ | #MainContent{ | ||
margin: 5rem auto; | margin: 5rem auto; | ||
− | + | background-color: #f2f9f8; | |
− | + | padding: 3.5rem; | |
− | margin-top: | + | padding-right: 5rem; |
− | + | padding-left: 5rem; | |
− | + | margin-top: 10rem; | |
− | width: | + | line-height: 2.2rem; |
+ | box-shadow: 5px 5px 15px #DDDDDD; | ||
+ | width: 75%; | ||
+ | max-width: 1050px; | ||
} | } | ||
+ | |||
+ | #MainContent li, ul, ol{ | ||
+ | margin-left: 2rem; | ||
+ | } | ||
+ | |||
+ | #MainContent a { | ||
+ | color: #d24f2b !important; | ||
+ | } | ||
+ | |||
+ | |||
div>p{ | div>p{ | ||
text-indent: 2.6rem; | text-indent: 2.6rem; | ||
} | } | ||
#BottomFooter{ | #BottomFooter{ | ||
− | background: # | + | background: #f7e1d7; |
− | + | text-align: center; | |
− | + | margin-top: 2rem; | |
− | padding: | + | padding: 1rem; |
− | + | padding-top: 0; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/*styling the header part*/ | /*styling the header part*/ | ||
.toggle-menu{ | .toggle-menu{ | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | #drop{ | ||
+ | margin-top: -1rem; | ||
} | } | ||
Line 72: | Line 248: | ||
} | } | ||
− | + | .toggle-drop2{ | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .logo{ | |
− | + | text-align:center; | |
} | } | ||
Line 107: | Line 271: | ||
.nav-list > li { | .nav-list > li { | ||
position: relative; | position: relative; | ||
− | list-style-type: none; | + | list-style-type: none; |
} | } | ||
Line 119: | Line 283: | ||
position: absolute; | position: absolute; | ||
z-index: 1010; | z-index: 1010; | ||
− | background-color: # | + | background-color: #d24f2b; |
line-height: 2rem; | line-height: 2rem; | ||
left: -9999px; | left: -9999px; | ||
box-shadow: 5px 5px 15px #DDDDDD; | box-shadow: 5px 5px 15px #DDDDDD; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 146: | Line 306: | ||
#drop{ | #drop{ | ||
+ | display:none; | ||
+ | } | ||
+ | #drop2{ | ||
display:none; | display:none; | ||
} | } | ||
+ | |||
+ | @media only screen and (max-width: 95.75rem){ | ||
+ | #TopBar{ | ||
+ | background-position: 0px -15px; | ||
+ | } | ||
+ | |||
@media only screen and (max-width: 58.75rem){ | @media only screen and (max-width: 58.75rem){ | ||
+ | #TopBar{ | ||
+ | background-position: 0px -5px; | ||
+ | margin-left: -15%; | ||
+ | } | ||
+ | |||
+ | #ThreeCols img{ | ||
+ | max-width: 95%; | ||
+ | display: block; | ||
+ | padding: 2%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #FourCols img{ | ||
+ | display: inline-block; | ||
+ | max-width: 45.5%; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | |||
html{ | html{ | ||
font-size: 13px; | font-size: 13px; | ||
Line 172: | Line 359: | ||
padding-bottom: 1rem; | padding-bottom: 1rem; | ||
} | } | ||
+ | |||
+ | #MainContent{ | ||
+ | margin-top: 0rem; | ||
+ | } | ||
+ | |||
} | } | ||
− | @media only screen and (max-width: 44.68rem){ | + | @media only screen and (max-width: 44.68rem){ |
+ | |||
+ | body, html{ | ||
+ | margin: 0rem; | ||
+ | padding: 0rem; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #MainContent{ | ||
+ | padding: 0.5rem; | ||
+ | margin: 0; | ||
+ | width: 97%; | ||
+ | } | ||
+ | |||
+ | #TwoCols img{ | ||
+ | max-width: 95%; | ||
+ | display: block; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | |||
+ | #ThreeCols img{ | ||
+ | max-width: 95%; | ||
+ | display: block; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | |||
+ | #FourCols img{ | ||
+ | max-width: 95%; | ||
+ | display: block; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | |||
+ | |||
.nav-bar{ | .nav-bar{ | ||
− | width: | + | width: 103%; |
− | position: | + | position: inline; |
} | } | ||
.logo{ | .logo{ | ||
Line 188: | Line 412: | ||
max-width: min-content; | max-width: min-content; | ||
margin: 1rem auto; | margin: 1rem auto; | ||
− | background-color: # | + | background-color: #65998f; |
text-align: center; | text-align: center; | ||
color: #fff !important; | color: #fff !important; | ||
Line 203: | Line 427: | ||
} | } | ||
− | . | + | .toggle-drop2{ |
− | + | display: block; | |
} | } | ||
− | |||
.nav-list{ | .nav-list{ | ||
display: block; | display: block; | ||
− | width: | + | width: 103%; |
position: static; | position: static; | ||
line-height: 1rem; | line-height: 1rem; | ||
Line 221: | Line 444: | ||
.active{ | .active{ | ||
+ | max-height: 100%; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | .active2{ | ||
max-height: 100%; | max-height: 100%; | ||
overflow: auto; | overflow: auto; | ||
Line 234: | Line 462: | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
+ | #TopBar{ | ||
+ | position: static; | ||
+ | background-image:none; | ||
+ | width: 103% ; | ||
+ | padding-right: 0rem; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul li{ | ||
+ | float: initial; | ||
+ | position: initial; | ||
} | } | ||
+ | #TopBar ul ul ul{ | ||
+ | position: initial; | ||
+ | left: initial; | ||
+ | top: initial; | ||
+ | margin: initial; | ||
+ | padding-left: 1rem; | ||
+ | } | ||
− | + | ||
+ | #InfoBox{ | ||
+ | padding: 1em; | ||
+ | position: inline; | ||
+ | z-index: 2; | ||
+ | border: 5px dashed #fff; | ||
margin: 0; | margin: 0; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | .mw-content-ltr li, .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ul{ | ||
+ | margin: 0; | ||
+ | font-size: 16px; | ||
+ | font-family: 'Karla', sans-serif; | ||
+ | } | ||
+ | |||
+ | #bodyContent h2 { | ||
+ | margin-bottom: .6em; | ||
+ | margin-top: 0.6em; | ||
+ | } | ||
+ | |||
+ | |||
+ | load.php?debug=…&skin=igem&*:1 | ||
+ | #bodyContent a[href ^="https://"], .link-https { | ||
+ | padding-right: 0px; | ||
} | } | ||
Latest revision as of 22:33, 31 October 2017