Template:CarnegieMellon:CarnegieMellon/CSS

From 2014.igem.org

(Difference between revisions)
Line 15: Line 15:
margin:0px;
margin:0px;
}
}
 +
 +
/*Outreach
 +
  ------------------------------------------------------*/
 +
a.info{
 +
    position:relative; /*this is the key*/
 +
    z-index:24; background-color:#ccc;
 +
    color:#000;
 +
    text-decoration:none}
 +
 +
a.info:hover{z-index:25; background-color:#ff0}
 +
 +
a.info span{display: none}
 +
 +
a.info:hover span{ /*the span will display just on :hover state*/
 +
    display:block;
 +
    position:absolute;
 +
    top:2em; left:2em; width:15em;
 +
    border:1px solid #0cf;
 +
    background-color:#cff; color:#000;
 +
    text-align: center}
 +

Revision as of 03:14, 4 October 2014

/* GLOBAL STYLES 

   -------------------------------------------------- */
   /* Padding below the footer and lighter body text */



   body {
     padding-bottom: 40px;
   background: #008AE6;
     color: #5a5a5a;
 font-size: 12px;
   }

.container { margin:0px; }

/*Outreach 

  ------------------------------------------------------*/

a.info{ 

   position:relative; /*this is the key*/
   z-index:24; background-color:#ccc;
   color:#000;
   text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/ 

   display:block;
   position:absolute;
   top:2em; left:2em; width:15em;
   border:1px solid #0cf;
   background-color:#cff; color:#000;
   text-align: center}



   /* CUSTOMIZE THE NAVBAR
   -------------------------------------------------- */

   /* Special class on .container surrounding .navbar, used for positioning it into place. */
   .navbar-wrapper {
     position: absolute;
     top: 50;
     left: 0;
     right: 0;
     z-index: 100;
     margin-top: -69px;
     margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
   }
   .navbar-wrapper .navbar {

   }

   /* Remove border and change up box shadow for more contrast */
   .navbar .navbar-inner {

width:99.5%; 

     border: 0;
     -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
             box-shadow: 0 2px 10px rgba(0,0,0,.25);
   }

   /* Downsize the brand/project name a bit */
   .navbar .brand {
     padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
     font-size: 16px;
     font-weight: bold;
     text-shadow: 0 -1px 0 rgba(0,0,0,.5);
   }

   /* Navbar links: increase padding for taller navbar */
   .navbar .nav > li > a {
     padding: 15px 20px;
   }

   /* Offset the responsive button for proper vertical alignment */
   .navbar .btn-navbar {
     margin-top: 5px;
   }



   /* CUSTOMIZE THE CAROUSEL
   -------------------------------------------------- */

   /* Carousel base class */
   .carousel {
     margin-bottom: 60px;

   }

   .carousel .container {
     position: relative;
     z-index: 9;
   }

   .carousel-control {
     height: 80px;
     margin-top: 0;
     font-size: 120px;
     text-shadow: 0 1px 1px rgba(0,0,0,.4);
     background-color: transparent;
     border: 0;
     z-index: 10;
   }

   .carousel .item {
     height: 350px;
   }
   .carousel img {
     position: relative;
     top: 0;
     left: 0;
     min-width: 100%;
     height: 500px;
   }

   .carousel-caption {
     background-color: transparent;

     position: static;
     max-width: 550px;
     padding: 0 20px;
     margin-top: 500px;
   }
   .carousel-caption h1,
   .carousel-caption .lead {
     margin: 0;
     line-height: 1.25;
     color: #000000;
     text-shadow: 0 1px 1px rgba(0,0,0,.4);
   }
   .carousel-caption .btn {
     margin-top: 10px;
   }



   /* Square Images
   -------------------------------------------------- */

  .sqimg {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   height: 250px;
   width: 400px;
   opacity: 0.8;
   margin-bottom: 3px;
   filter: alpha(opacity=40);

}

.sqimg:hover { 

   opacity: 1;
   filter: alpha(opacity=100);}
  1. images{ 
   text-align: center;

display: block; width: 804px; height: 506px; margin: 0 auto;

}

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