Template:Team:Waterloo/CSS/baseWiki

From 2014.igem.org

(Difference between revisions)
(Created page with "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...")
 
(175 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{
img.homepage{
display: block;
display: block;
Line 5: 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 */
+
-webkit-transform: translate(0,10%); /* Chrome, Safari, Opera */
-
  transform: translate(0,10%);
+
transform: translate(0,10%);
z-index: 100;
z-index: 100;
}
}
Line 14: Line 31:
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
-
-ms-transform: translate(50%,-175%); /* IE 9 */
+
-ms-transform: translate(0,-175%); /* IE 9 */
-
  -webkit-transform: translate(50%,-175%); /* Chrome, Safari, Opera */
+
-webkit-transform: translate(0,-175%); /* Chrome, Safari, Opera */
-
  transform: translate(0,-175%);
+
transform: translate(0,-175%);
}
}
/*Common tags*/
/*Common tags*/
 +
body{
 +
  background: #D6DCDE;
 +
}
a{
a{
   text-decoration: none;
   text-decoration: none;
 +
  color: #002bb8;
}
}
li{
li{
Line 27: Line 48:
   line-height: 18px;
   line-height: 18px;
}
}
-
 
+
ol li{
-
/*Specific class or id elements*/
+
  list-style:decimal;
-
.content {
+
-
width:80%;
+
-
background: #F0F0F0;
+
-
margin: auto;
+
-
margin-top: 30px;
+
}
}
-
ul#headings li {
+
table {
-
  float: left;
+
background: transparent;
-
  display: block;
+
}
}
-
ul#shortheadings li{
+
h1{
-
   float: left;
+
   font-family: 'Oxygen', Helvetica, sans-serif;
-
   display: none;
+
   font-size: 54px;
 +
  font-weight: bold;
 +
  text-align: center;
 +
  margin: 20px 0px 0px 0px !important;
 +
  line-height: normal;
 +
  background: initial;
 +
  padding: initial;
 +
  border: none;
}
}
-
.icons{
+
h2{
-
   height: 30px;
+
   font-family: 'Oxygen', Helvetica, sans-serif;
-
}
+
   font-size: 2em;
-
a.barheading{
+
   border-bottom: none;
-
  color: #71CCE6;
+
-
   font-size: 15px;
+
-
   font-family: Georgia;
+
   font-weight: bold;
   font-weight: bold;
-
  cursor: pointer;
 
}
}
-
a.subheading{
+
h3, h4 {
-
  color: #FFFFFF;
+
   font-family: 'Oxygen', Helvetica, sans-serif;
-
   font-size: 14px;
+
-
  font-family: Georgia;
+
-
  cursor: pointer;
+
}
}
-
div.empty{
+
h4 {
-
   height: 60px;
+
   font-size: 1em;
}
}
-
div.heading{
+
/*Specific class or id elements*/
-
   font-family: Georgia;
+
.content {
-
   font-size: 50px;
+
   width:65%;
-
   color: #000000;
+
   background: #F0F0F0;
-
   text-align: center;
+
   margin: auto;
-
   margin-top: 20px;
+
   margin-top: 30px;
 +
   font-family: Georgia, serif;
 +
  font-size: 16px;
}
}
-
div.subheading{
+
.floatRight {
-
   font-family: Georgia;
+
   float: right;
-
  font-size: 30px;
+
-
  color: #000000;
+
-
  text-align: center;
+
}
}
-
ul.projSubs li {
+
.floatLeft {
-
   list-style: none;
+
   float: left;
-
  line-height: 30px;
+
}
}
-
div#imgBox{
+
/* Images */
 +
div.imgBox{
   height: 500px;
   height: 500px;
   width: 70%;
   width: 70%;
Line 87: Line 101:
   background: #FFFFFF;
   background: #FFFFFF;
}
}
-
img.toTop{
+
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;
   height: 30px;
   position: fixed;
   position: fixed;
Line 95: Line 131:
-webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */
-webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */
   transition: height 0.5s;
   transition: height 0.5s;
 +
  z-index:999;
}
}
-
img.toTop:hover{
+
 
 +
img#toTop:hover{
height: 150px;
height: 150px;
}
}
-
div#topbar{
+
 
-
width: 100%;
+
/*Top Menu*/
-
min-width:200px;
+
div#menubar li {
-
position:fixed;
+
    color: transparent !important;
-
left:0;
+
-
right:0;
+
-
margin-right:0;
+
-
margin-left:0;
+
-
z-index:999;
+
-
top:0px;
+
-
  background: #333;
+
-
  height:60px;
+
-
}
+
-
div#topbar > .sections_panel{
+
-
  position:absolute;
+
-
  height:0px;
+
-
  background:#000;
+
-
  top:60px;
+
-
  left:10%;
+
-
  border-radius:0px 0px 8px 8px;
+
-
  overflow:hidden;
+
-
  z-index:10000;
+
-
  transition: height 0.3s linear 0s;
+
}
}
-
div#topbar > .sections_panel > div{
+
div#menubar:hover li {
-
  background:#333;
+
    color: white !important;
-
  padding:20px;
+
-
  height:258px;
+
-
  margin:10px;
+
-
  color:#71CCE6;
+
}
}
Line 140: Line 155:
   width: 200px;
   width: 200px;
}
}
-
 
div.navItems{
div.navItems{
cursor: pointer;
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*/
/*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 195: Line 230:
{
{
text-decoration: none;
text-decoration: none;
-
font-weight: bold;
 
background: #9EE0F3;
background: #9EE0F3;
}
}
    
    
-
ul.tabs li.selected a, ul.tabs li.selected a:hover
+
ul.tabs li a.selected, ul.tabs li a:hover
{
{
position: relative;
position: relative;
top: 0px;
top: 0px;
-
font-weight:bold;
 
background: #71CCE6;
background: #71CCE6;
color: dimgrey;
color: dimgrey;
}
}
-
ul.tabs li.selected a:hover
+
ul.tabs li a:hover
{
{
   text-decoration: none;
   text-decoration: none;
}
}
-
div.tabcontents
+
.tabcontents
{
{
-
padding: 30px;
+
  padding: 30px 5% 30px;
-
background-color:#FFF;
+
  background-color:#FFF;
}
}
/*Footer*/
/*Footer*/
-
div.footerBorder{
+
.footerBorder{
   width: 100%;
   width: 100%;
   min-width: 900px;
   min-width: 900px;
Line 244: Line 277:
   background: #333;
   background: #333;
   color: #FFF;
   color: #FFF;
 +
  font-family: Georgia;
   font-size: 12px;
   font-size: 12px;
 +
  text-align: left;
}
}
Line 251: Line 286:
   margin-top: 10px;
   margin-top: 10px;
   height: 130px;
   height: 130px;
-
   position: relative;
+
   /*position: relative;*/
}
}
Line 257: Line 292:
   position: absolute;
   position: absolute;
   margin-left: 35%;
   margin-left: 35%;
-
   margin-top: -180px;
+
   margin-top: -177px;
}
}
Line 263: Line 298:
   position: absolute;
   position: absolute;
   margin-left: 55%;
   margin-left: 55%;
-
   margin-top: -180px;
+
   margin-top: -177px;
}
}
Line 269: Line 304:
   position: absolute;
   position: absolute;
   margin-left: 75%;
   margin-left: 75%;
-
   margin-top: -180px;
+
   margin-top: -177px;
}
}
-
li.footHeadings{
+
#footer li.footHeadings{
-
color: #71CCE6;
+
  color: #71CCE6;
-
font-size: 18px;
+
  font-size: 18px;
-
font-weight: bold;
+
  font-family: 'Oxygen', Helvetica, sans-serif;
-
font-variant: small-caps;
+
  font-weight: bold;
-
line-height: 33px;
+
  font-variant: small-caps;
-
cursor: pointer;
+
  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

Retrieved from "http://2014.igem.org/Template:Team:Waterloo/CSS/baseWiki"