Team:UCLA/Template/CSS

From 2014.igem.org

(Difference between revisions)
 
(153 intermediate revisions not shown)
Line 14: Line 14:
padding-top: 100px;
padding-top: 100px;
margin-bottom: 20px;
margin-bottom: 20px;
-
font-family: Georgia, Times, "Times New Roman", serif;  
+
font-family: Georgia, Times, "Times New Roman", serif;
display:none;
display:none;
}
}
-
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
+
h1, h2, h3, h4, h5 {
 +
    /*font-family: Helvetica, Georgia, Times, "Times New Roman", serif;*/
 +
    font-family: 'Roboto', sans-serif;
 +
    border-bottom: 0px solid #aaa;
 +
}
Line 69: Line 73:
         /*background-size: cover;*/
         /*background-size: cover;*/
}
}
 +
 +
#contentcontainer { /*-- creates container for all content on page --*/
#contentcontainer { /*-- creates container for all content on page --*/
-
font-family: Arial, Helvetica, sans-serif;  
+
font-family: Arial, Helvetica, sans-serif;
 +
        font-family: 'Roboto', sans-serif;
font-weight: normal;  
font-weight: normal;  
font-size: 14px;  
font-size: 14px;  
Line 142: Line 149:
color: #414141;
color: #414141;
font-size: 25px;   
font-size: 25px;   
-
         font-family: Georgia, Times, "Times New Roman", serif;
+
         /*font-family: Georgia, Times, "Times New Roman", serif;*/
 +
        font-family: 'Roboto', sans-serif;
padding: 10px 15px 5px 10px;  
padding: 10px 15px 5px 10px;  
-
border-bottom: 1px solid #ccc;  
+
border-bottom: 1px solid #ccc;
margin-bottom: 0px;  
margin-bottom: 0px;  
}
}
Line 229: Line 237:
.style {
.style {
     font-size: 30px;
     font-size: 30px;
-
     font-family: 'Pacifico', cursive;
+
     /*font-family: 'Pacifico', cursive;*/
 +
    /*font-family: "Times New Roman", Times, serif;*/
 +
    font-family: 'Roboto', sans-serif;
}
}
Line 245: Line 255:
}
}
.content {
.content {
-
     font-family: Tahoma;
+
     /*font-family: Tahoma;*/
 +
    font-family: 'Roboto', sans-serif;
     font-size: 12px;
     font-size: 12px;
     color: #3D3D3D;
     color: #3D3D3D;
Line 298: Line 309:
h2.onBlack {
h2.onBlack {
   font-family: Verdana;
   font-family: Verdana;
 +
  font-family: 'Roboto', sans-serif;
   color:white;
   color:white;
   margin-top: -5px;
   margin-top: -5px;
Line 326: Line 338:
.spider{
.spider{
position: fixed;
position: fixed;
-
top: 280px;
+
top: 50px;
right: 0px;
right: 0px;
width: 200px;
width: 200px;
-
height: 85%;
+
height: 95%;
z-index: 10;
z-index: 10;
 +
overflow: hidden;
overflow: hidden;
}
}
Line 336: Line 349:
position: relative;
position: relative;
left: 75%;
left: 75%;
 +
top: 0%;
background-color: #A8A8A8;
background-color: #A8A8A8;
width: 2px;
width: 2px;
-
height: 50%;
+
height: 80%;
z-index: 100;
z-index: 100;
}
}
Line 435: Line 449:
}
}
</style>
</style>
-
 
Line 447: Line 460:
     top:0;
     top:0;
     /*background:#550D00;*/
     /*background:#550D00;*/
-
     background: #D8B67F;
+
     background: #006699;
     z-index:20;
     z-index:20;
}
}
Line 457: Line 470:
}
}
#menu a{
#menu a{
-
     color:#45413A;
+
     color:white;
-
     font-family: 'Kaushan Script', cursive;
+
    font-family: Helvetica;
 +
     font-family: 'Roboto', sans-serif;
     padding:18px 5px 15px 5px;
     padding:18px 5px 15px 5px;
     text-decoration:none;
     text-decoration:none;
Line 465: Line 479:
     text-align:center;
     text-align:center;
     font-size:16px;
     font-size:16px;
-
     border-bottom:thin solid #FFC363;
+
     border-bottom:thin solid #0099CC;
}
}
#menu{
#menu{
Line 473: Line 487:
}
}
#menu a:hover{
#menu a:hover{
-
     background:#FFCF81;
+
     background:#0099CC;
}
}
#menu li ul{
#menu li ul{
-
         background:#D8B67F;
+
         background:#006699;
/* display:none; */
/* display:none; */
position:absolute;
position:absolute;
Line 548: Line 562:
.slider .slider_imgs #slide1{
.slider .slider_imgs #slide1{
   float: left;
   float: left;
-
     background-image:url('http://www.thinksnaps.com/wp-content/uploads/2014/07/Green-Bubbles-Awesome-Background.jpg');
+
     background-image:url('https://static.igem.org/mediawiki/2014/d/d1/Silkworms.JPG');
     background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
 +
    background-position: 25% 50%;
}
}
.slider .slider_imgs #slide2{
.slider .slider_imgs #slide2{
   float: left;
   float: left;
-
     background-image:url('http://4vector.com/i/free-vector-exquisite-leaf-background-01-vector_015360_exquisite_leaf_background_01_vector.jpg');
+
     background-image:url('https://static.igem.org/mediawiki/2014/8/81/Classroom.JPG');
     background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
 +
    background-position: 0% 50%;
}
}
.slider .slider_imgs #slide3{
.slider .slider_imgs #slide3{
   float: left;
   float: left;
-
     background-image:url('http://wallpaper-download.net/wallpapers/random-wallpapers-green-lime-background-wallpaper-32549.jpg');
+
     background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
     background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
 +
}
 +
.slider .slider_imgs #slide4{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/f/fd/Uclateam.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
}
}
</style>
</style>
-
<!--PAGE HEADERS-->
+
 
 +
<!--HP SLIDER-->
<style type="text/css">
<style type="text/css">
-
.page_header{
+
.hpslider{
 +
    position: relative;
 +
    width: 1150px;
 +
    height: 400px;
 +
    margin: auto;
 +
    overflow: hidden;
 +
    z-index: 13;
 +
    background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png');
 +
}
 +
.hpslider .hpslider_left{
     position: absolute;
     position: absolute;
-
     background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png');
+
     background-color:black;
 +
    top: 0px;   
 +
    left: 0px;
 +
    width: 50px;
 +
    height: 100%;
 +
    opacity: 0.5;
 +
    z-index: 2;
 +
}
 +
.hpslider .hpslider_left img{
 +
    position: relative;
     width: 100%;
     width: 100%;
-
     height: 70%;
+
     height: 200px;
-
     z-index: 0;
+
    top: 27%;
 +
     left: 10px;
}
}
-
.page_header .page_header_box{
+
.hpslider .hpslider_right{
     position: absolute;
     position: absolute;
-
    overflow: hidden;
+
     background-color:black;
-
    z-index: 0;
+
     top: 0px;
-
}
+
     left: 1100px;
-
#box1{
+
     width: 50px;
-
     background-color:#0A64A4;
+
     height: 100%;
-
     width:20%;
+
-
     height:80%;
+
-
     top:10%;
+
-
     left:10%;
+
     opacity: 0.5;
     opacity: 0.5;
 +
    z-index: 2;
}
}
-
#box2{
+
.hpslider .hpslider_right img{
-
     background-color:#0A64A4;
+
     position: relative;
-
     width:20%;
+
     width: 100%;
-
     height:80%;
+
     height: 200px;
-
     top:10%;
+
     top: 27%;
-
     left:30%;
+
     left: -10px;
-
    opacity: 0.5;
+
}
}
-
#box3{
+
.hpslider .hpslider_imgs{
-
     background-color:#0A64A4;
+
     position: absolute;
-
    width:20%;
+
-
    height:80%;
+
-
    top:10%;
+
-
    left:50%;
+
-
    opacity: 0.5;
+
}
}
-
#box4{
+
.hpslider .hpslider_imgs div{
-
     background-color:#0A64A4;
+
  float: left;
-
     width:20%;
+
  width: 1150px;
-
     height:80%;
+
  height: 400px;
-
     top:10%;
+
}
-
     left:70%;
+
.hpslider .hpslider_imgs #slide1{
-
     opacity: 0.5;
+
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/d/d1/Silkworms.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 25% 50%;
 +
}
 +
.hpslider .hpslider_imgs #slide2{
 +
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
}
 +
.hpslider .hpslider_imgs #slide3{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/2/28/Fahrion_UCLA_iGEM_statement.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
 +
}
 +
.hpslider .hpslider_imgs #slide4{
 +
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/9/96/Fahrion_Non_Fluoresce.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
 +
}
 +
.hpslider .hpslider_imgs #slide5{
 +
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/b/b3/Fahrion_Blue_Fluoresce_side.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
 +
}
 +
.hpslider .hpslider_imgs #slide6{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/4/4c/Fahrion_process_Anuved_Dewal.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 40%;
 +
}
 +
.hpslider .hpslider_imgs #slide7{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/9/95/Fahrion_Process_full.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 10% 50%;
 +
}
 +
.hpslider .hpslider_imgs #slide8{
 +
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/f/f4/Fahrion_full_nonfluoresce.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 30%;
 +
}
 +
.hpslider .hpslider_imgs #slide9{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/5/58/Fahrion_Group.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 45%;
 +
}
 +
.hpslider .hpslider_imgs #slide10{
 +
  float: left;
 +
     background-image:url('https://static.igem.org/mediawiki/2014/b/be/Fahrion_David_Discussion.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 40%;
 +
}
 +
.hpslider .hpslider_imgs #slide11{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/5/59/Fahrion_Process_Aal.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 40%;
 +
}
 +
.hpslider .hpslider_imgs #slide12{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
 +
}
 +
.hpslider .hpslider_imgs #slide13{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/e/ef/Fahrion_Blue_Straight.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 65%;
 +
}
 +
.hpslider .hpslider_imgs #slide14{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/6/62/Fahrion_Process_Observers.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 50%;
 +
}
 +
.hpslider .hpslider_imgs #slide15{
 +
  float: left;
 +
    background-image:url('https://static.igem.org/mediawiki/2014/5/57/Fahrion_Historical_Wall.JPG');
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    background-position: 0% 45%;
}
}
</style>
</style>
 +
Line 622: Line 758:
     background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png');
     background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png');
     width: 100%;
     width: 100%;
-
     height: 70%;
+
     height: 450px;
     z-index: 0;
     z-index: 0;
 +
    margin-bottom: 200px;
}
}
.page_header .page_header_box{
.page_header .page_header_box{
Line 631: Line 768:
}
}
#box1{
#box1{
-
     background-color:#0A64A4;
+
     background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
-
     width:20%;
+
    background-size:1500px;
 +
     width:21%;
     height:80%;
     height:80%;
     top:10%;
     top:10%;
Line 639: Line 777:
}
}
#box2{
#box2{
-
     background-color:#0A64A4;
+
     background-image:url('http://www.visualphotos.com/photo/1x7581974/silk_fibres_coloured_sem_H1200410.jpg');
-
     width:20%;
+
    background-position:50% 50%;
 +
     width:21%;
     height:80%;
     height:80%;
     top:10%;
     top:10%;
Line 647: Line 786:
}
}
#box3{
#box3{
-
     background-color:#0A64A4;
+
     background-image: url('https://static.igem.org/mediawiki/2014/3/31/Pcrgel.jpg');
-
     width:20%;
+
    background-size:750px;
 +
    background-position:70% 70%;
 +
     width:21%;
     height:80%;
     height:80%;
     top:10%;
     top:10%;
Line 655: Line 796:
}
}
#box4{
#box4{
-
     background-color:#0A64A4;
+
     background-image:url('https://static.igem.org/mediawiki/2014/a/a2/Spiderweb.jpg');
-
     width:20%;
+
 
 +
     width:21%;
     height:80%;
     height:80%;
     top:10%;
     top:10%;
Line 665: Line 807:
 +
<!--HP PAGE HEADERS-->
 +
<style type="text/css">
 +
.hppage_header{
 +
    position: absolute;
 +
    background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png');
 +
    width: 100%;
 +
    height: 475px;
 +
    z-index: 0;
 +
    margin-bottom: 200px;
 +
}
 +
.hppage_header .hppage_header_box{
 +
    position: absolute;
 +
    overflow: hidden;
 +
    z-index: 0;
 +
}
 +
</style>
 +
 +
 +
<!--EDITING-->
<!--CONTENT SECTIONS-->
<!--CONTENT SECTIONS-->
<style type="text/css">
<style type="text/css">
Line 670: Line 831:
     position: absolute;
     position: absolute;
     background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png');
     background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png');
-
     top: 85%;
+
    font-family: 'Roboto', sans-serif;
-
     width: 99%;
+
     top: 550px;
 +
     width: 100%;
     padding: 0 0 0 0;
     padding: 0 0 0 0;
     margin: auto;
     margin: auto;
     margin-bottom: 50px;
     margin-bottom: 50px;
 +
    margin-left: 0px;
     border-radius: 0px;
     border-radius: 0px;
     z-index: -1;
     z-index: -1;
Line 681: Line 844:
.page_content{
.page_content{
     position: relative;
     position: relative;
-
     background-color: #FFFFCC;
+
     background-color: #FFEE80;
     width: 99%;
     width: 99%;
     padding: 0 0 0 0;
     padding: 0 0 0 0;
     margin: auto;
     margin: auto;
     margin-bottom: 20px;
     margin-bottom: 20px;
-
     border-radius: 25px;
+
     /*border-radius: 25px;*/
     z-index: -1;
     z-index: -1;
}
}
Line 700: Line 863:
<style>
<style>
table{
table{
 +
    font-family: 'Roboto', sans-serif;
     background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png');
     background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png');
}
}
-
</style>
 
-
<!--BACKGROUND-->
+
ulJ
-
<style>
+
{
-
/* IE10 Consumer Preview */
+
    list-style-type: none;
-
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #000E14 100%);
+
}
-
/* Mozilla Firefox */
+
ulN
-
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #000E14 100%);
+
{
 +
    list-style-type:none;
 +
    margin:10;
 +
}
-
/* Opera */
+
</style>
-
background-image: -o-linear-gradient(top, #FFFFFF 0%, #000E14 100%);
+
-
/* Webkit (Safari/Chrome 10) */
 
-
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #000E14));
 
-
/* Webkit (Chrome 11+) */
 
-
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000E14 100%);
 
-
/* W3C Markup, IE10 Release Preview */
 
-
background-image: linear-gradient(to bottom, #FFFFFF 0%, #000E14 100%);
 
-
</style>
 
</html>
</html>

Latest revision as of 02:41, 18 October 2014

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