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