Template:CSS/home

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
 
-
<style  rel='stylesheet' type='text/css'>
 
Line 397: Line 395:
     font-family: 'DeliciousRoman';
     font-family: 'DeliciousRoman';
     src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);}
     src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);}
-
</style>
 
-
</html>
 

Revision as of 11:49, 28 May 2014


@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;

}

  1. 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";
     }


  1. logo

{ float:left; margin-top:15px;

}

  1. socialmedia

{ float:right; margin-top:4px; margin-right:56px; padding-right:23px;

}

  1. socialmedia img

{ float:right; margin-left:15px; }

  1. text{

text-shadow:0px 0px 1px #000;}

  1. ticker-area a:link{

text-decoration:none; color:#000000; text-shadow:0px 0px 1px #000000; font-family:'Avenir'; font-size:15px; }

  1. ticker-area a:visited{

text-decoration:none; color:#000000; text-shadow:0px 0px 1px #000000; }

  1. 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;}

  1. updates b1

{ color:#0099c2; text-shadow:0px 0px 1px #0099c2; float: left; font-size: 16px; font-family: 'Avenir'; }

  1. headerstrip

{ background-image:url(../Img/header-strip.png); margin-top:10px; width:960px; height:40px; }

  1. headerstrip_bottom

{ background-image:url(../Img/header-strip.png); margin-left:250px; width:960px; height:40px;

}

  1. navigation_bottom

{ font-size: 15px; vertical-align:middle; margin-left:45px; margin-right:33px; float:left; margin-top: 6px; }

  1. navigation_bottom a:link{

text-decoration:none; color: #000; text-shadow: 0px 0px 1px #000;}

  1. navigation_bottom a:visited{

text-decoration:none; color: #000; text-shadow: 0px 0px 1px #000;}

  1. navigation_bottom a:hover{

text-decoration:none; color: #0099c2; text-shadow: 0px 0px 1px #0099c2;}

  1. updates

{ vertical-align:middle; float:left; padding-top: 5px; }


  1. blank

{ width:960px;


}

  1. event

{ width:960px;

}

  1. events img

{

opacity:1; }

  1. footerstrip

{ margin-left: -25px; position:static; margin-top: 32%; background-image:url(../Img/footer-strip.png); width:960px; height:60px; }

  1. footer_content{

margin-left:40px; margin-right:20px;}


  1. 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;


}

  1. footerstrip a:hover

{ color:#0097c2; text-shadow: 0px 0px 1px #0099c2;

}


  1. search

{ float:right; margin-top:5px; margin-left:-10px; height: 20px; width:250px; }


  1. 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);}
Retrieved from "http://2014.igem.org/Template:CSS/home"