Template:CSS/home

From 2014.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 25: Line 25:
#menubar {
#menubar {
     width: auto;}
     width: auto;}
 +
 +
 +
 +
.share_box{
 +
position:fixed;
 +
float:right;
 +
width:60px;
 +
margin-left:1290px;
 +
        list-style-type:none;
 +
margin-top:80px;
 +
border:4px solid #005d82;
 +
background:white;
 +
z-index:100000;
 +
-webkit-border-radius: 8px;
 +
        -moz-border-radius: 8px;
 +
        border-radius: 8px;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
@font-face {
 +
      font-family:"Avenir";
 +
      src: url('../fonts/Avenir-Medium.otf') format('opentype');
 +
}
 +
 +
@font-face {
 +
      font-family:"Myriad Pro"
 +
      src: url('../fonts/MyriadPro-Regular.otf') format('opentype');
 +
}
 +
 +
div.gsc-adBlock{display:none;}
 +
 +
div.gsc-adBlockVertical{display: none;}
 +
 +
 +
 +
.sitemap{font-size: 13px; text-shadow: 0px 0px 1px #000; text-decoration: none; color: #000;}
 +
.sitemap:hover{font-size: 13px; color:#0099c2; text-shadow: 0px 0px 1px #0099c2;cursor:pointer;}
 +
 +
body
 +
{
 +
margin:0 auto;
 +
margin-top:0px;
 +
background-image:url(../Img/bg2.jpg);
 +
background-position
 +
:top center; background-repeat: no-repeat;
 +
overflow-y: scroll;
 +
font-family: 'Open Sans', sans-serif;
 +
}
 +
header
 +
{
 +
width:960px;
 +
height: 75px;
 +
}
 +
 +
.text{color: #000000;
 +
font-family: 'Avenir';
 +
font-size: 15px;
 +
text-align:justify;
 +
padding-right: 30px;
 +
font-style:normal;
 +
line-height: 20px;
 +
}
 +
 +
a, img {
 +
    border:none;
 +
}
 +
 +
#container {
 +
  display: block;
 +
  margin: 0 auto;
 +
  width: 1000px;
 +
}
 +
   
 +
  .wrapper {
 +
    display: inline-block;
 +
    width: 227px;
 +
    height: 60px;
 +
    vertical-align: top;
 +
    margin: 1em 1em 2em 0em;
 +
    cursor: pointer;
 +
    position: relative;
 +
    font-family: Tahoma, Arial;
 +
    -webkit-perspective: 4000px;
 +
      -moz-perspective: 4000px;
 +
        -ms-perspective: 4000px;
 +
        -o-perspective: 4000px;
 +
            perspective: 4000px;
 +
  }
 +
 
 +
  .item {
 +
    height: 100px;
 +
      -webkit-transform-style: preserve-3d;
 +
        -moz-transform-style: preserve-3d;
 +
          -ms-transform-style: preserve-3d;
 +
          -o-transform-style: preserve-3d;
 +
              transform-style: preserve-3d;
 +
      -webkit-transition: -webkit-transform .6s;
 +
        -moz-transition: -moz-transform .6s;
 +
          -ms-transition: -ms-transform .6s;
 +
          -o-transition: -o-transform .6s;
 +
              transition: transform .6s;
 +
  }
 +
 
 +
    .item:hover {
 +
      -webkit-transform: translateZ(-50px) rotateX(95deg);
 +
        -moz-transform: translateZ(-50px) rotateX(95deg);
 +
          -ms-transform: translateZ(-50px) rotateX(95deg);
 +
          -o-transform: translateZ(-50px) rotateX(95deg);
 +
              transform: translateZ(-50px) rotateX(95deg);
 +
    }
 +
 +
      .item:hover .information {
 +
        box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
 +
        border-radius: 3px;
 +
      }
 +
 +
    .item img {
 +
      display: block;
 +
      position: absolute;
 +
      top: 0;
 +
      border-radius: 3px;
 +
      box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
 +
      -webkit-transform: translateZ(40px);
 +
        -moz-transform: translateZ(40px);
 +
          -ms-transform: translateZ(40px);
 +
          -o-transform: translateZ(40px);
 +
              transform: translateZ(40px);
 +
      -webkit-transition: all .6s;
 +
        -moz-transition: all .6s;
 +
          -ms-transition: all .6s;
 +
          -o-transition: all .6s;
 +
              transition: all .6s;
 +
     
 +
    }
 +
   
 +
    .item .information {
 +
      display: block;
 +
      position: absolute;
 +
      top: 0;
 +
  color: #000000;
 +
  float: left;
 +
      height: 80px;
 +
      width: 227px;
 +
      text-align: left;
 +
      border-radius: 15px;
 +
      padding: 10px;
 +
      font-size: 12px;
 +
      text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
 +
      box-shadow: none;
 +
      background: rgb(236,241,244);
 +
      background: -moz-linear-gradient(top,  rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%);
 +
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1)));
 +
      background: -webkit-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
 +
      background: -o-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
 +
      background: -ms-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
 +
      background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
 +
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 );
 +
      -webkit-transform: rotateX(-90deg) translateZ(40px);
 +
        -moz-transform: rotateX(-90deg) translateZ(40px);
 +
          -ms-transform: rotateX(-90deg) translateZ(40px);
 +
          -o-transform: rotateX(-90deg) translateZ(40px);
 +
              transform: rotateX(-90deg) translateZ(40px);
 +
      -webkit-transition: all .6s;
 +
        -moz-transition: all .6s;
 +
          -ms-transition: all .6s;
 +
          -o-transition: all .6s;
 +
              transition: all .6s;
 +
     
 +
    }
 +
   
 +
      .information strong {
 +
        display: block;
 +
       
 +
        font-size: 17px;
 +
        font-family: "Open Sans";
 +
      }
 +
 +
 +
#logo
 +
{
 +
float:left;
 +
margin-top:15px;
 +
 +
}
 +
#socialmedia
 +
{
 +
float:right;
 +
margin-top:4px;
 +
margin-right:56px;
 +
padding-right:23px;
 +
 +
}
 +
#socialmedia img
 +
{
 +
float:right;
 +
margin-left:15px;
 +
}
 +
 +
#text{
 +
text-shadow:0px 0px 1px #000;}
 +
 +
#ticker-area a:link{
 +
text-decoration:none;
 +
color:#000000;
 +
text-shadow:0px 0px 1px #000000;
 +
font-family:'Avenir';
 +
font-size:15px;
 +
}
 +
 +
#ticker-area a:visited{
 +
text-decoration:none;
 +
color:#000000;
 +
text-shadow:0px 0px 1px #000000;
 +
}
 +
#ticker-area a:hover{
 +
text-decoration:none;
 +
color:#0099c2;
 +
text-shadow:0px 0px 1px #0099c2;}
 +
 +
.tab{
 +
color:#FFF; font-family:'Myriad Pro'; text-shadow:0px 0px 1px #ffffff; margin-top:2px; margin-left:10px; font-size:23px;float:left; font-weight:normal; text-align:left;}
 +
 +
.intab{
 +
color:#ffebc9; font-family:'Avenir'; font-weight:normal; text-shadow:0px 0px 2px #ffffff; margin-left:10px; margin-top:-5px; font-size:13px;}
 +
#updates b1
 +
{
 +
color:#0099c2;
 +
text-shadow:0px 0px 1px #0099c2;
 +
float: left;
 +
font-size: 16px;
 +
font-family: 'Avenir';
 +
}
 +
 +
#headerstrip
 +
{
 +
background-image:url(../Img/header-strip.png);
 +
margin-top:10px;
 +
width:960px;
 +
height:40px;
 +
}
 +
 +
#headerstrip_bottom
 +
{
 +
background-image:url(../Img/header-strip.png);
 +
width:960px;
 +
height:40px;
 +
 +
}
 +
#navigation_bottom
 +
{
 +
font-size: 15px;
 +
vertical-align:middle;
 +
float:middle;
 +
margin-top: 6px;
 +
}
 +
#navigation_bottom a:link{
 +
text-decoration:none;
 +
color: #000;
 +
text-shadow: 0px 0px 1px #000;}
 +
 +
#navigation_bottom a:visited{
 +
text-decoration:none;
 +
color: #000;
 +
text-shadow: 0px 0px 1px #000;}
 +
 +
#navigation_bottom a:hover{
 +
text-decoration:none;
 +
color: #0099c2;
 +
text-shadow: 0px 0px 1px #0099c2;}
 +
 +
#updates
 +
{
 +
vertical-align:middle;
 +
float:left;
 +
padding-top: 5px;
 +
}
 +
 +
 +
 +
#blank
 +
{
 +
width:960px;
 +
 +
 +
}
 +
#event
 +
{
 +
width:960px;
 +
 +
}
 +
#events img
 +
{
 +
 +
opacity:1;
 +
}
 +
#footerstrip
 +
{
 +
margin-left: -25px;
 +
position:static;
 +
margin-top: 32%;
 +
background-image:url(../Img/footer-strip.png);
 +
width:960px;
 +
height:60px;
 +
}
 +
 +
#footer_content{
 +
margin-left:40px;
 +
margin-right:20px;}
 +
 +
 +
#footerstrip a
 +
{
 +
vertical-align:middle;
 +
margin-top:12px;
 +
font-size:15px;
 +
float:left;
 +
display:block;
 +
margin-left:10px;
 +
text-decoration:none;
 +
text-align:center;
 +
color:#5f6062;
 +
text-shadow: 0px 0px 1px #5f6062;
 +
 +
 +
}
 +
 +
#footerstrip a:hover
 +
{
 +
color:#0097c2;
 +
text-shadow: 0px 0px 1px #0099c2;
 +
 +
}
 +
 +
 +
 +
#search
 +
{       
 +
float:right;
 +
margin-top:5px;
 +
margin-left:-10px;
 +
height: 20px;
 +
width:250px;
 +
}
 +
 +
 +
#searchbox
 +
{
 +
float:left;
 +
border: 0px solid #fff;
 +
 +
margin:3px;
 +
font-family:Garamond Regular;
 +
color:#cecece;
 +
font-size:17px;
 +
 +
}
 +
figure {
 +
  width:220px;
 +
  position: relative;
 +
  float: left;
 +
  overflow: hidden;
 +
  margin: 0;
 +
  display:block;
 +
  outline: #CCC groove;
 +
  -webkit-box-shadow: 10px 10px 5px #000;
 +
}
 +
 +
div.content{
 +
-webkit-box-shadow: 10px 10px 5px #000;}
 +
 +
figcaption {
 +
  position: absolute;
 +
  background-color: rgba(179,130,44,1);
 +
  color: white;
 +
  opacity: 1;
 +
 
 +
  -webkit-transition: all 0.5s ease;
 +
  -moz-transition:    all 0.5s ease;
 +
  -o-transition:      all 0.5s ease;
 +
  padding:10px;
 +
  text-align:center;
 +
 +
}
 +
figure:hover figcaption {
 +
  opacity: 1;
 +
}
 +
.cap-left
 +
{
 +
width:220px;
 +
height:110px;
 +
float:auto;
 +
margin-right:20px;
 +
margin-bottom:20px;
 +
overflow:hidden;
 +
 +
}
 +
 +
 +
 +
 +
 +
.cap-left figcaption { bottom: 0; left: -160%;height:100%; }
 +
.cap-left:hover figcaption { left: -10px;height:100%;width:100%; }
 +
 +
.displaytext{opacity: 0.5; filter: alpha(opacity = 50);}
 +
.normaltext{opacity: 1; filter: alpha(opacity = 100); }
 +
.displayimg{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;background:url(hscripts.gif); }
 +
 +
 +
@font-face {
 +
    font-family: 'DeliciousRoman';
 +
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
Line 257: Line 710:
{
{
background-image:url(../Img/header-strip.png);
background-image:url(../Img/header-strip.png);
-
margin-left:250px;
 
width:960px;
width:960px;
height:40px;
height:40px;

Latest revision as of 12:48, 15 July 2014

Retrieved from "http://2014.igem.org/Template:CSS/home"