"
Team:Exeter/Template/Stylesheet
From 2013.igem.org
m |
|||
| Line 1: | Line 1: | ||
| - | #teampic | + | #teampic { |
color:#808080; | color:#808080; | ||
text-decoration:none; | text-decoration:none; | ||
| Line 6: | Line 6: | ||
| - | teampic { | + | teampic:hover { |
color:#808080; | color:#808080; | ||
text-decoration:none; | text-decoration:none; | ||
Revision as of 11:44, 30 September 2013
- teampic {
color:#808080; text-decoration:none; }
teampic:hover { color:#808080; text-decoration:none; -moz-transition-duration:0.4s; -webkit-transition-duration:0.4s; -o-transition-duration:0.4s; } a:visited {color: #99CCFF;}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
color: white; background-color: #6699cc;
}
/* ==Header styles== */
/* Header colour (blueprint theme, 0A4360 primary (dark blueprint), 0c5172 secondary (brighter blueprint), 0e638b tertiary (brightest blueprint))
Use rgb.to for colour picking */
.navbar-inverse .navbar-inner {
background-color: #0A4360; background-image: -moz-linear-gradient(top, #0A4360, #0c5172); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0A4360), to(#0c5172)); background-image: -webkit-linear-gradient(top, #0A4360, #0c5172); background-image: -o-linear-gradient(top, #0A4360, #0c5172); background-image: linear-gradient(to bottom, #0A4360, #0c5172); border-color: #0e638b;
}
/* Hover as tertiary colour */ .navbar-inverse .nav > li > a:hover {
color: #0e638b; background-color: transparent;
}
/* Wiki edit menu colours, slightly lighter than secondary colour */ .navbar .navbar-inner { border-bottom: 17px solid; border-color: #0d5375; } /*
/* 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;
}
- /
- 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;
}
- 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 {
- color: white;
}
- .left-menu .selected:hover {
- color: #5555FF;
- }
.left-menu:hover a {
color: white;
} .right-menu li {
- background-color: transparent;
} .right-menu li a {
background-color: transparent;
} .right-menu li a:hover {
color: #aaaaff; text-decoration: underline;
}
#bodyContent{
background: none;
}
- 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;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* 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 */
- 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); }
