Template:Team:Waterloo/CSS/baseWiki
From 2014.igem.org
(Difference between revisions)
(Blanked the page) |
|||
(174 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'> | ||
+ | <style> | ||
+ | #globalWrapper, #content { /*-- changes default wiki settings --*/ | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | #top-section { | ||
+ | height: 20px; | ||
+ | width: 100%; | ||
+ | position: fixed; | ||
+ | border: 0px transparent; | ||
+ | background: #333; | ||
+ | z-index: 999; | ||
+ | } | ||
+ | img.homepage{ | ||
+ | display: block; | ||
+ | width: 40%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | -ms-transform: translate(0,10%); /* IE 9 */ | ||
+ | -webkit-transform: translate(0,10%); /* Chrome, Safari, Opera */ | ||
+ | transform: translate(0,10%); | ||
+ | z-index: 100; | ||
+ | } | ||
+ | img.homepageLogo{ | ||
+ | display: block; | ||
+ | width: 25%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | -ms-transform: translate(0,-175%); /* IE 9 */ | ||
+ | -webkit-transform: translate(0,-175%); /* Chrome, Safari, Opera */ | ||
+ | transform: translate(0,-175%); | ||
+ | } | ||
+ | /*Common tags*/ | ||
+ | body{ | ||
+ | background: #D6DCDE; | ||
+ | } | ||
+ | a{ | ||
+ | text-decoration: none; | ||
+ | color: #002bb8; | ||
+ | } | ||
+ | li{ | ||
+ | list-style: none; | ||
+ | line-height: 18px; | ||
+ | } | ||
+ | ol li{ | ||
+ | list-style:decimal; | ||
+ | } | ||
+ | table { | ||
+ | background: transparent; | ||
+ | } | ||
+ | h1{ | ||
+ | font-family: 'Oxygen', Helvetica, sans-serif; | ||
+ | font-size: 54px; | ||
+ | font-weight: bold; | ||
+ | text-align: center; | ||
+ | margin: 20px 0px 0px 0px !important; | ||
+ | line-height: normal; | ||
+ | background: initial; | ||
+ | padding: initial; | ||
+ | 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; | ||
+ | width: 70%; | ||
+ | min-width: 700px; | ||
+ | margin: auto; | ||
+ | margin-top: 30px; | ||
+ | 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{ | ||
+ | height: 30px; | ||
+ | position: fixed; | ||
+ | bottom: 5%; | ||
+ | float: right; | ||
+ | right: 2%; | ||
+ | -webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */ | ||
+ | transition: height 0.5s; | ||
+ | z-index:999; | ||
+ | } | ||
+ | |||
+ | img#toTop:hover{ | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /*Top Menu*/ | ||
+ | div#menubar li { | ||
+ | color: transparent !important; | ||
+ | } | ||
+ | div#menubar:hover li { | ||
+ | color: white !important; | ||
+ | } | ||
+ | |||
+ | table#navMenu{ | ||
+ | margin-top: -15px; | ||
+ | } | ||
+ | |||
+ | table#navMenu tr, table#navMenu td{ | ||
+ | border: 1px solid #444; | ||
+ | padding: 8px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | div.navItems{ | ||
+ | cursor: pointer; | ||
+ | color:#71CCE6; | ||
+ | font-family: Georgia; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | div.right-menu li a { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | div.left-menu:hover { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | /*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 | ||
+ | { | ||
+ | padding: 1px 0; /*background bar*/ | ||
+ | font-size: 0; | ||
+ | height: 20px; | ||
+ | margin:0; | ||
+ | list-style-type: none; | ||
+ | text-align: center; /*set to left, center, or right to align the tabs as desired*/ | ||
+ | /*border:1px solid #663300;*/ | ||
+ | border-bottom:none; | ||
+ | background: #333; | ||
+ | } | ||
+ | |||
+ | ul.tabs li | ||
+ | { | ||
+ | display: inline; | ||
+ | margin: 0; | ||
+ | margin-right:5px; /*distance between tabs*/ | ||
+ | } | ||
+ | |||
+ | ul.tabs li a | ||
+ | { /*each tab box*/ | ||
+ | font: normal 12px Verdana; | ||
+ | text-decoration: none; | ||
+ | position: relative; | ||
+ | padding: 8px 10px; | ||
+ | border: 1px solid #663300; | ||
+ | /*border-right:none;*/ | ||
+ | color: #000; | ||
+ | background: #FFF; | ||
+ | outline:none; | ||
+ | -webkit-border-radius:5px; | ||
+ | -moz-border-radius:5px; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | |||
+ | ul.tabs li:last-child a | ||
+ | { | ||
+ | border-right:1px solid #663300; | ||
+ | } | ||
+ | |||
+ | ul.tabs li a:visited | ||
+ | { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | ul.tabs li a:hover | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | background: #9EE0F3; | ||
+ | } | ||
+ | |||
+ | ul.tabs li a.selected, ul.tabs li a:hover | ||
+ | { | ||
+ | position: relative; | ||
+ | top: 0px; | ||
+ | background: #71CCE6; | ||
+ | color: dimgrey; | ||
+ | } | ||
+ | |||
+ | ul.tabs li a:hover | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .tabcontents | ||
+ | { | ||
+ | padding: 30px 5% 30px; | ||
+ | background-color:#FFF; | ||
+ | } | ||
+ | |||
+ | /*Footer*/ | ||
+ | .footerBorder{ | ||
+ | width: 100%; | ||
+ | min-width: 900px; | ||
+ | height: 210px; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | margin-left: 0; | ||
+ | margin-right: 0; | ||
+ | background: #71CCE6; | ||
+ | } | ||
+ | |||
+ | div#footer{ | ||
+ | width: 100%; | ||
+ | min-width: 900px; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | margin-left: 0; | ||
+ | margin-right: 0; | ||
+ | background: #333; | ||
+ | color: #FFF; | ||
+ | font-family: Georgia; | ||
+ | font-size: 12px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | img.logoFoot{ | ||
+ | margin-left: 50px; | ||
+ | margin-top: 10px; | ||
+ | height: 130px; | ||
+ | /*position: relative;*/ | ||
+ | } | ||
+ | |||
+ | div#siteMap1{ | ||
+ | position: absolute; | ||
+ | margin-left: 35%; | ||
+ | margin-top: -177px; | ||
+ | } | ||
+ | |||
+ | div#siteMap2{ | ||
+ | position: absolute; | ||
+ | margin-left: 55%; | ||
+ | margin-top: -177px; | ||
+ | } | ||
+ | |||
+ | div#siteMap3{ | ||
+ | position: absolute; | ||
+ | margin-left: 75%; | ||
+ | margin-top: -177px; | ||
+ | } | ||
+ | |||
+ | #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{ | ||
+ | display: block; | ||
+ | } | ||
+ | #footer li { | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | } | ||
+ | #bodyContent a[href^="https://"], .link-https { | ||
+ | background: initial; | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | .icons{ | ||
+ | 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> | ||
+ | </html> |
Latest revision as of 03:27, 18 October 2014