Team:Dundee/stylesheet

From 2014.igem.org

(Difference between revisions)
(Undo revision 107334 by DBurrell7 (talk))
 
(97 intermediate revisions not shown)
Line 70: Line 70:
}
}
#menubar ul {
#menubar ul {
-
     color: #55e1f6;
+
     color: #555555;
     list-style: none;
     list-style: none;
     background-color:#727272;
     background-color:#727272;
Line 109: Line 109:
       #bodyContent{
       #bodyContent{
       background: none;
       background: none;
-
      }
+
        }
#bodyContent a[href^="https://"], .link-https {
#bodyContent a[href^="https://"], .link-https {
Line 148: Line 148:
         }
         }
       }
       }
-
 
+
 
-
       /* Custom page CSS
+
       br{
-
      -------------------------------------------------- */
+
          text-decoration:none
-
      /* Not required for template or sticky footer method. */
+
-
 
+
-
      #wrap > .container {
+
-
        padding-top: 60px;
+
-
      }
+
-
      .container .credit {
+
-
        margin: 20px 0;
+
       }
       }
-
 
-
      code {
 
-
        font-size: 80%;
 
-
      }
 
-
 
-
 
       /* end Over ride */
       /* end Over ride */
-
 
-
 
-
#mainwrapper {
 
-
margin: 80px auto 0 auto;
 
-
text-align: center;
 
-
}
 
-
 
-
/* Image Box Style */
 
-
#mainwrapper .box {
 
-
cursor: pointer;
 
-
height: 255px;
 
-
float: left;
 
-
margin: 5px;
 
-
position: relative;
 
-
overflow: hidden;
 
-
width: 220px;
 
-
top: -85px;
 
-
}
 
-
#mainwrapper .box img {
 
-
position: absolute;
 
-
left: 0;
 
-
-webkit-transition: all 300ms ease-out;
 
-
-moz-transition: all 300ms ease-out;
 
-
-o-transition: all 300ms ease-out;
 
-
-ms-transition: all 300ms ease-out;
 
-
transition: all 300ms ease-out;
 
-
}
 
-
 
-
/* Caption Common Style */
 
-
#mainwrapper .box .caption {
 
-
background-color: rgba(0,0,0,0.8);
 
-
position: absolute;
 
-
color: #fff;
 
-
z-index: 100;
 
-
-webkit-transition: all 300ms ease-out;
 
-
-moz-transition: all 300ms ease-out;
 
-
-o-transition: all 300ms ease-out;
 
-
-ms-transition: all 300ms ease-out;
 
-
transition: all 300ms ease-out;
 
-
left: 0;
 
-
}
 
-
 
-
 
-
/** Caption 1: Simple **/
 
-
#mainwrapper .box .simple-caption {
 
-
height: 30px;
 
-
width: 200px;
 
-
display: block;
 
-
bottom: -30px;
 
-
line-height: 25pt;
 
-
text-align: center;
 
-
}
 
-
 
-
/** Caption 2: Full Width & Height **/
 
-
#mainwrapper .box .full-caption {
 
-
width: 220px;
 
-
height: 255px;
 
-
top: -200px;
 
-
text-align: left;
 
-
padding: 15px;
 
-
}
 
-
 
-
/** Caption 3: Fade **/
 
-
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
 
-
opacity: 0;
 
-
width: 220px;
 
-
height: 255px;
 
-
text-align: left;
 
-
padding: 15px;
 
-
}
 
-
 
-
/** Caption 4: Slide **/
 
-
#mainwrapper .box .slide-caption {
 
-
width: 170px;
 
-
height: 170px;
 
-
text-align: left;
 
-
padding: 15px;
 
-
left: 200px;
 
-
}
 
-
 
-
/** Caption 5: Rotate **/
 
-
#mainwrapper #box-5.box .rotate-caption {
 
-
width: 170px;
 
-
height: 170px;
 
-
text-align: left;
 
-
padding: 15px;
 
-
top: 200px;
 
-
-moz-transform: rotate(-180deg);
 
-
-o-transform: rotate(-180deg);
 
-
-webkit-transform: rotate(-180deg);
 
-
transform: rotate(-180deg);
 
-
}
 
-
 
-
#mainwrapper .box .rotate {
 
-
width: 200px;
 
-
height: 400px;
 
-
-webkit-transition: all 300ms ease-out;
 
-
-moz-transition: all 300ms ease-out;
 
-
-o-transition: all 300ms ease-out;
 
-
-ms-transition: all 300ms ease-out;
 
-
transition: all 300ms ease-out;
 
-
}
 
-
 
-
/** Caption 6: Scale **/
 
-
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
 
-
position: relative;
 
-
left: -200px;
 
-
width: 190px;
 
-
-webkit-transition: all 300ms ease-out;
 
-
-moz-transition: all 300ms ease-out;
 
-
-o-transition: all 300ms ease-out;
 
-
-ms-transition: all 300ms ease-out;
 
-
transition: all 300ms ease-out;
 
-
font-size:14px;
 
-
}
 
-
 
-
#mainwrapper .box .scale-caption h3 {
 
-
-webkit-transition-delay: 300ms;
 
-
-moz-transition-delay: 300ms;
 
-
-o-transition-delay: 300ms;
 
-
-ms-transition-delay: 300ms;
 
-
transition-delay: 300ms;
 
-
}
 
-
 
-
#mainwrapper .box .scale-caption p {
 
-
-webkit-transition-delay: 500ms;
 
-
-moz-transition-delay: 500ms;
 
-
-o-transition-delay: 500ms;
 
-
-ms-transition-delay: 500ms;
 
-
transition-delay: 500ms;
 
-
}
 
-
 
-
/** Simple Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover .simple-caption {
 
-
-moz-transform: translateY(-100%);
 
-
-o-transform: translateY(-100%);
 
-
-webkit-transform: translateY(-100%);
 
-
opacity: 1;
 
-
transform: translateY(-100%);
 
-
 
-
}
 
-
 
-
/** Full Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover .full-caption {
 
-
-moz-transform: translateY(100%);
 
-
-o-transform: translateY(100%);
 
-
-webkit-transform: translateY(100%);
 
-
opacity: 1;
 
-
transform: translateY(100%);
 
-
}
 
-
 
-
/** Fade Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
 
-
opacity: 1;
 
-
}
 
-
 
-
/** Slide Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover .slide-caption {
 
-
background-color: rgba(0,0,0,1) !important;
 
-
-moz-transform: translateX(-100%);
 
-
-o-transform: translateX(-100%);
 
-
-webkit-transform: translateX(-100%);
 
-
opacity: 1;
 
-
transform: translateX(-100%);
 
-
}
 
-
#mainwrapper .box:hover img#image-4 {
 
-
-moz-transform: translateX(-100%);
 
-
-o-transform: translateX(-100%);
 
-
-webkit-transform: translateX(-100%);
 
-
transform: translateX(-100%);
 
-
opacity: 1;
 
-
}
 
-
 
-
/** Rotate Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover .rotate {
 
-
background-color: rgba(0,0,0,1) !important;
 
-
-moz-transform: rotate(-180deg);
 
-
-o-transform: rotate(-180deg);
 
-
-webkit-transform: rotate(-180deg);
 
-
transform: rotate(-180deg);
 
-
}
 
-
 
-
/** Scale Caption :hover Behaviour **/
 
-
#mainwrapper .box:hover #image-6 {
 
-
-moz-transform: scale(1.4);
 
-
-o-transform: scale(1.4);
 
-
-webkit-transform: scale(1.4);
 
-
transform: scale(1.4);
 
-
}
 
-
 
-
#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
 
-
-moz-transform: translateX(200px);
 
-
-o-transform: translateX(200px);
 
-
-webkit-transform: translateX(200px);
 
-
transform: translateX(200px);
 
-
}
 

Latest revision as of 15:12, 7 September 2014

/* OVER RIDE IGEM CSS */ 

     #globalWrapper{
       font-size:14px;
     }

     #content{
       width:auto;
     }

     #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
         display:none;}
     #top-section {
         border: none;
         height: 0px;}
     #content {
         border: none;}

     /* MediaWiki Top Menu 

     #menubar {
         font-size: 65%;
         top: -14px;
         display:none;
     }
     .left-menu:hover {
         background-color: transparent;}
     #menubar li a {
         background-color: transparent;}
     #menubar:hover {
         color: white;}
     #menubar li a {
         color: transparent;}
     #menubar:hover li a {
         color: white;}
     #previewnote {
       display:none;
     }
  • /


  1. menubar { 
   position: fixed;
   white-space: nowrap;
   width: 400px;
   z-index: 5;
   font-family: sans-serif;
   font-size: 95%;
   line-height: 1em;
   margin-top:58px;
   //padding-left: 9%;

}

.left-menu, .left-menu a { 

   left: 0px;
   text-align: left;
   color:transparent;
   text-transform: lowercase;

}

.left-menu:hover { 

   color: white;
   background-color: transparent;

} .right-menu, .right-menu a { 

   right: 0px;
   text-align: right;
   color: white;

}

  1. menubar ul { 
   color: #555555;
   list-style: none;
   background-color:#727272;

}

  1. menubar li { 
   display: inline;
   position: relative;
   cursor: pointer;
   padding-left: 0px;
   padding-right: 0px;

} .left-menu li a { 

   padding: 0px 10px 0px 0px;
   color:white;

} .left-menu .selected {

  1. color: white;

}

  1. .left-menu .selected:hover {
  2. color: #5555FF;
  3. }

.left-menu:hover a { 

   color: white;

} .right-menu li {

  1. background-color: transparent;

} .right-menu li a { 

       background-color: transparent;

} .right-menu li a:hover { 

   color: #aaaaff;
   text-decoration: underline;

} 


     #bodyContent{
     	background: none;
       }
  1. bodyContent a[href^="https://"], .link-https { 
   background: none;
   padding-right: none;

} 


     /* Sticky footer styles
     -------------------------------------------------- */

     /* Wrapper for page content to push down footer */
     #wrap {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       /* Negative indent footer by it's height */
       margin: 0 auto -60px;
     }

     /* Set the fixed height of the footer here */
     #push,
     #footer {
       height: 60px;
     }
     #footer {
       /*background-color: #f5f5f5;*/
      text-align:center;
     }

     /* Lastly, apply responsive CSS fixes as necessary */
     @media (max-width: 767px) {
       #footer {
         margin-left: -20px;
         margin-right: -20px;
         padding-left: 20px;
         padding-right: 20px;
       }
     }
  
     br{
         text-decoration:none
     }

     /* end Over ride */
Retrieved from "http://2014.igem.org/Team:Dundee/stylesheet"