Template:Team:Waterloo/CSS/baseWiki
From 2014.igem.org
(Difference between revisions)
(100 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'> | ||
<style> | <style> | ||
#globalWrapper, #content { /*-- changes default wiki settings --*/ | #globalWrapper, #content { /*-- changes default wiki settings --*/ | ||
Line 21: | Line 22: | ||
margin-right: auto; | margin-right: auto; | ||
-ms-transform: translate(0,10%); /* IE 9 */ | -ms-transform: translate(0,10%); /* IE 9 */ | ||
- | + | -webkit-transform: translate(0,10%); /* Chrome, Safari, Opera */ | |
- | + | transform: translate(0,10%); | |
z-index: 100; | z-index: 100; | ||
} | } | ||
Line 31: | Line 32: | ||
margin-right: auto; | margin-right: auto; | ||
-ms-transform: translate(0,-175%); /* IE 9 */ | -ms-transform: translate(0,-175%); /* IE 9 */ | ||
- | + | -webkit-transform: translate(0,-175%); /* Chrome, Safari, Opera */ | |
- | + | transform: translate(0,-175%); | |
} | } | ||
Line 41: | Line 42: | ||
a{ | a{ | ||
text-decoration: none; | text-decoration: none; | ||
- | color: # | + | color: #002bb8; |
} | } | ||
li{ | li{ | ||
list-style: none; | list-style: none; | ||
line-height: 18px; | line-height: 18px; | ||
+ | } | ||
+ | ol li{ | ||
+ | list-style:decimal; | ||
} | } | ||
table { | table { | ||
background: transparent; | background: transparent; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
h1{ | h1{ | ||
- | font-family: | + | font-family: 'Oxygen', Helvetica, sans-serif; |
- | font-size: | + | font-size: 54px; |
- | + | font-weight: bold; | |
text-align: center; | text-align: center; | ||
margin: 20px 0px 0px 0px !important; | margin: 20px 0px 0px 0px !important; | ||
Line 72: | Line 64: | ||
padding: initial; | padding: initial; | ||
border: none; | border: none; | ||
- | |||
} | } | ||
- | + | h2{ | |
+ | font-family: 'Oxygen', Helvetica, sans-serif; | ||
+ | font-size: 2em; | ||
+ | border-bottom: none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | h3, h4 { | ||
+ | font-family: 'Oxygen', Helvetica, sans-serif; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | /*Specific class or id elements*/ | ||
+ | .content { | ||
+ | width:65%; | ||
+ | background: #F0F0F0; | ||
+ | margin: auto; | ||
+ | margin-top: 30px; | ||
+ | font-family: Georgia, serif; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .floatRight { | ||
+ | float: right; | ||
+ | } | ||
+ | .floatLeft { | ||
+ | float: left; | ||
+ | } | ||
+ | /* Images */ | ||
+ | div.imgBox{ | ||
height: 500px; | height: 500px; | ||
width: 70%; | width: 70%; | ||
Line 81: | Line 100: | ||
margin-top: 30px; | margin-top: 30px; | ||
background: #FFFFFF; | background: #FFFFFF; | ||
+ | } | ||
+ | div.figureContainer { | ||
+ | text-align: center; | ||
+ | font-style: italic; | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | img { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | img.icon { | ||
+ | width: 200px; | ||
+ | padding: 0px 8px; | ||
+ | } | ||
+ | img.smallIcon{ | ||
+ | width: 100px; | ||
+ | padding: 0px 8px; | ||
+ | } | ||
+ | img.image70{ | ||
+ | width: 70%; | ||
+ | } | ||
+ | img.equation { | ||
+ | width: 70%; | ||
} | } | ||
img#toTop{ | img#toTop{ | ||
Line 91: | Line 132: | ||
transition: height 0.5s; | transition: height 0.5s; | ||
z-index:999; | z-index:999; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 101: | Line 138: | ||
} | } | ||
+ | /*Top Menu*/ | ||
div#menubar li { | div#menubar li { | ||
color: transparent !important; | color: transparent !important; | ||
Line 117: | Line 155: | ||
width: 200px; | width: 200px; | ||
} | } | ||
- | |||
div.navItems{ | div.navItems{ | ||
cursor: pointer; | cursor: pointer; | ||
Line 134: | Line 171: | ||
/*Tabs*/ | /*Tabs*/ | ||
+ | .anchor { | ||
+ | /* when hyperlinking within page, to account for floating bar */ | ||
+ | padding-top: 80px; | ||
+ | margin-bottom: -30px; | ||
+ | /* adjusted net 50px bottom padding? */ | ||
+ | text-align: justify; | ||
+ | } | ||
+ | .anchor:first-child { | ||
+ | padding-top: 0px; | ||
+ | } | ||
ul.tabs | ul.tabs | ||
{ | { | ||
Line 183: | Line 230: | ||
{ | { | ||
text-decoration: none; | text-decoration: none; | ||
- | |||
background: #9EE0F3; | background: #9EE0F3; | ||
} | } | ||
Line 191: | Line 237: | ||
position: relative; | position: relative; | ||
top: 0px; | top: 0px; | ||
- | |||
background: #71CCE6; | background: #71CCE6; | ||
color: dimgrey; | color: dimgrey; | ||
Line 201: | Line 246: | ||
} | } | ||
- | + | .tabcontents | |
{ | { | ||
- | + | padding: 30px 5% 30px; | |
- | + | background-color:#FFF; | |
} | } | ||
/*Footer*/ | /*Footer*/ | ||
- | + | .footerBorder{ | |
width: 100%; | width: 100%; | ||
min-width: 900px; | min-width: 900px; | ||
Line 247: | Line 292: | ||
position: absolute; | position: absolute; | ||
margin-left: 35%; | margin-left: 35%; | ||
- | margin-top: - | + | margin-top: -177px; |
} | } | ||
Line 253: | Line 298: | ||
position: absolute; | position: absolute; | ||
margin-left: 55%; | margin-left: 55%; | ||
- | margin-top: - | + | margin-top: -177px; |
} | } | ||
Line 259: | Line 304: | ||
position: absolute; | position: absolute; | ||
margin-left: 75%; | margin-left: 75%; | ||
- | margin-top: - | + | margin-top: -177px; |
} | } | ||
#footer li.footHeadings{ | #footer li.footHeadings{ | ||
- | + | color: #71CCE6; | |
- | + | font-size: 18px; | |
- | + | font-family: 'Oxygen', Helvetica, sans-serif; | |
- | + | font-weight: bold; | |
- | + | font-variant: small-caps; | |
- | + | line-height: 33px; | |
- | + | margin-left: -15px; | |
+ | } | ||
+ | #footer a { | ||
+ | color: #FFFFFF; | ||
} | } | ||
ul.flist li{ | ul.flist li{ | ||
Line 275: | Line 323: | ||
} | } | ||
#footer li { | #footer li { | ||
- | + | display: block; | |
- | + | margin: 0; | |
} | } | ||
#bodyContent a[href^="https://"], .link-https { | #bodyContent a[href^="https://"], .link-https { | ||
Line 284: | Line 332: | ||
.icons{ | .icons{ | ||
height: 30px; | height: 30px; | ||
+ | } | ||
+ | .half-column { | ||
+ | width: 46%; | ||
+ | padding: 2%; | ||
+ | } | ||
+ | .blueOnGrey { | ||
+ | background: #333; | ||
+ | padding: 15px; | ||
+ | color:#71CCE6; | ||
+ | } | ||
+ | .blueOnGrey h1, .blueOnGrey h2, .blueOnGrey h3, .blueOnGrey h4 { | ||
+ | color:#71CCE6; | ||
+ | } | ||
+ | .centerUpper { | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /* Lists on mathbook page */ | ||
+ | #MathBook ul li, #Acknowledgements ul li { | ||
+ | list-style-type: circle; | ||
+ | } | ||
+ | #MathBook ol li, #Acknowledgements ol li { | ||
+ | list-style-type: upper-roman; | ||
+ | } | ||
+ | /* Tables */ | ||
+ | table.blueBorders { | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | table.blueBorders td { | ||
+ | border: 1px solid #71CCE6; | ||
+ | padding: 2px; | ||
+ | } | ||
+ | table.blueBorders thead td { | ||
+ | color: #71CCE6; | ||
+ | font-weight: bold; | ||
+ | font-family: 'Oxygen', Helvetica, sans-serif; | ||
+ | background-color: #333; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | /* Special Styles Depending on Screen Size */ | ||
+ | @media screen and (max-width: 900px) { /* above tablet size */ | ||
+ | .content { | ||
+ | width: 70%; | ||
+ | } | ||
+ | .half-column { | ||
+ | width: 100%; | ||
+ | padding: 5px; | ||
+ | float: none; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 768px) { /* tablet size and below */ | ||
+ | .content { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | h1 { | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 768px) and (min-width: 480px) { /* tablet size only */ | ||
+ | .content { | ||
+ | width: 80%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width : 480px) { */ smartphones */ | ||
+ | h1 { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .content { | ||
+ | width: 100%; | ||
+ | } | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 03:27, 18 October 2014