Team:UC Chile/css/finalcss
From 2012.igem.org
html{ /*background: #F9F9F7 url('https://static.igem.org/mediawiki/2012/0/02/Bg_Chile.png') repeat;*/ background: #F9F9F7 url('https://static.igem.org/mediawiki/2012/6/69/Pattern2.jpg') repeat; background-attachment:fixed; }
- globalWrapper, body {
background: transparent url('https://static.igem.org/mediawiki/2012/d/d3/Sideshadow.png') repeat-y; background-position: 8% 0%; background-attachment:fixed; /*background: #f6b3a3 url('bg1.jpg') no-repeat; background-size: 100%; */ font-size: 10pt font-family: "Lucida Sans Unicode", Lucida Grande, sans-serif; color: #575757; line-height: 18px; text-align:justify; }
/*------------------------------------*\ RESET \*------------------------------------*/
//From DTU-DENMARK 2011 -> Thanks guys!
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;}
/* Removes "teams" from the menubar */
- menubar > ul > li:last-child {
display: none;}
/* Resizes the menubar to fik the links (default is 400px) */
- menubar {
width: auto;}
// Eliminating iGEM Stuff
- contentSub {
display:none; }
- bodyContent{
background: white; color: black; }
- siteSub {
display:none; }
- search-controls {
display:none; }
.firstHeading { display:none; }
- search-controls {
margin-top:30px; }
- footer-box {
display:none; }
a{
color: #314043;
}
a:visited{
color: #314043;
}
a:hover{
color: #6d6d6a; text-decoration:none;
}
- content
{ position: relative; top: 0px; padding-left: 20px; padding-right: 20px; margin: 0 auto; background: #fff; width: 78%; z-index: 1;
padding-bottom:none; margin-bottom:none; border: 1px solid #111;
}
- primarycontent {
margin-left:40px; position:relative; width:63%; float:left; }
- primaryprofilecontent {
margin-top:10px;
margin-left:20px; position:relative; width:70%; float:left;
line-height:175%;
}
- primaryprofilecontent ul {
float: left; list-style: none; margin-left: 0px;
}
- primaryprofilecontent ul li {
display: inline;
}
- primaryprofilecontent ul li ul li {
display:block; width:22%; height:300px; text-align:center; }
- primaryprofilecontent a{
color: #6d6d6a;
}
- primaryprofilecontent a:hover{
color: #314043; text-decoration:none;
}
- bigcontent {
position:relative;
margin-left:40px; margin-right:40px;
}
- secondarycontent {
position:relative; width:225px; float:right; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #6f59ff;
text-align:left;
}
- secondarycontenttshirt {
margin-top:30px;
position:relative; width:225px; float:right; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #e6c146;
text-align:left;
}
- secondarycontentblue {
margin-top:30px;
float:right; position:fixed; width:220px; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #6f59ff;
margin-left:700px; text-align:left;
}
- secondarycontentblue a{
color: #6f59ff;
}
- secondarycontentblue a:visited{
color: #6f59ff;
}
- secondarycontentblue a:hover{
color: #6d6d6a; text-decoration:none;
}
- secondarycontentgreen {
margin-top:30px;
float:right; position:fixed; width:220px; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #22a556;
margin-left:700px; text-align:left;
}
- secondarycontentgreen a{
color: #22a556;
}
- secondarycontentgreen a:visited{
color: #22a556;
}
- secondarycontentgreen a:hover{
color: #6d6d6a; text-decoration:none;
}
- secondarycontentpurple {
margin-top:30px;
float:right; position:fixed; width:220px; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #8d39cc;
margin-left:700px; text-align:left;
}
- secondarycontentpurple a{
color: #8d39cc;
}
- secondarycontentpurple a:visited{
color: #8d39cc;
}
- secondarycontentpurple a:hover{
color: #6d6d6a; text-decoration:none;
}
- secondarycontentyellow {
margin-top:30px;
float:right; position:fixed; width:220px; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #e6c146;
margin-left:700px; text-align:left;
}
- secondarycontentyellow a{
color: #e6c146;
}
- secondarycontentyellow a:visited{
color: #e6c146;
}
- secondarycontentyellow a:hover{
color: #6d6d6a; text-decoration:none;
}
- profilecontent {
margin-top:10px;
float:right; position:fixed; width:275px; margin-right:20px; border: 1px solid #ebebe9; border-top: 3px solid #6f59ff;
margin-left:670px; text-align:left;
}
- ackcontent {
margin-top:40px;
position:relative; width:275px; float:right; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #6f59ff; }
.boxleft{ position:relative; float:left; width:250px; margin-left:40px; border: 1px solid #ebebe9; border-top: 3px solid #22a356; }
.boxmiddle{ position:relative; width:250px; margin-left:auto; margin-right:auto; border: 1px solid #ebebe9; border-top: 3px solid #6f59ff; }
.boxright{ position:relative; float:right; width:250px; margin-right:40px; border: 1px solid #ebebe9; border-top: 3px solid #e6c146; }
.boxbig{ position:relative; width: 887px; margin-left:auto; margin-right:auto; border: 1px solid #ebebe9; border-top: 3px solid #8d39cc; }
- boxheading{
background:url('https://static.igem.org/mediawiki/2011/0/08/Igem_jhu_a22.gif') bottom repeat-x; padding:0px 0px 10px 10px; margin-top:10px;
font-size:120%; font-weight:bold;
}
- boxcontent{
padding:10px 10px 10px 10px; }
- boxcontent .heading{
font-style: italic; font-size:110%; line-height:170%; border-bottom: 1px solid #EBEBE9; margin-bottom: 6px; padding-left:2px;
}
- boxlist ul {
float: left; list-style: none; margin-left: 0px;
}
- boxlist ul li {
display: inline;
}
- boxlist ul li ul li {
display:block; width:280px; height:70px; text-align:center; }
- boxlist ul li ul li a{
color: #6d6d6a;
}
- boxlist ul li ul li a:hover{
color: #314043; text-decoration:none;
}
- maintitle {
color: #314043; font-size:20px; text-align:center;
}
.droplinebar{ overflow: hidden; }
.droplinebar ul{ margin: 0; padding: 0; float: left; width: 100%; line-height:20; font: bold 13px Arial; background: #fff url('https://static.igem.org/mediawiki/2011/5/51/Jhunavbg.png') repeat-x; /*default background of menu bar*/ }
.droplinebar ul li{ display: inline; width:190px; }
.droplinebar ul li a{ float: left; color: black; padding: 16px 20px; text-decoration: none; }
.droplinebar ul li a:visited{ color: black; }
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/ color: white; background: #314043 url() center center repeat-x; }
/* Sub level menus*/ .droplinebar ul li ul{ position: absolute; z-index: 100; left: 0; top: 0; background: #314043; /*sub menu background color */ visibility: hidden; }
/* Sub level menu links style */ .droplinebar ul li ul li a{ font: normal 12px Verdana; color:white; padding: 10px 15px; margin: 0; border-bottom: 1px solid #314043; }
.droplinebar ul li ul li a:visited { color:white; }
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */ background: #BA3114;
}
.theme-default #slider {
margin:25px auto 0 auto; width:885px; /* Make sure your images are the same size */ height:300px; /* Make sure your images are the same size */
}
.clear { clear:both; }
/* Wiki hacks */
.firstHeading {
display:none;
}
- globalWrapper {
background-color: transparent; padding-bottom:0px; border: none;
}
- bodyContent {
border: none; padding:0px; margin:0px;
}
- top-section {
height: 0px; margin-top: 0 px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; /* margin-bottom: 10px; */ padding:0; border: none; display: display;
}
- p-logo {
height: 203px; overflow:hidden; border:none; display: none;
}
- p-logo img {
display: none;
}
- catlinks{
display: none;
}
- search-controls {
overflow:hidden; display:none; background: none; position: absolute; top: 100px; right: 40px;
}
.right-menu li a:link{
padding-top: 10px; background:transparent; text-decoration: none; color: #000;
}
.right-menu li a:hover{
padding-top: 10px; background:transparent; text-decoration: underline; color: #000;
}
.right-menu li a:visited{
padding-top: 10px; background:transparent; text-decoration: none; color: #000;
}
.mw-headline{ position: relative; top: 4px; font-size: 18px; line-height: 25px; color: #656551; letter-spacing: -1px;
padding: 0px 0px 10px 15px; margin-bottom: 20px; }
.mw-headline :before{ content: '='; }
.right-menu { position:relative; }
- top-section {
width:965; }
- menubar{
padding-top:5px; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:12px; } h2 { font-size:12px; } h3 { font-size:12px; } h4 { font-size:14px; padding-left:20px;} h5 { font-size:16px; padding-left:10px;} h6 { font-size:18px; padding-bottom:9px; border-bottom: 1px solid #EBEBE9; margin-bottom: 15px; }
/* DEFAULTNIVO */
/* Skin Name: Nivo Slider Default Theme Skin URI: http://nivo.dev7studios.com Skin Type: flexible Description: The default skin for the Nivo Slider. Version: 1.0 Author: Gilbert Pellegrom Author URI: http://dev7studios.com
- /
.theme-default .nivoSlider { position:relative; background:#fff url() no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a;
} .theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .theme-default .nivoSlider a { border:0; display:block; }
.theme-default .nivo-controlNav { position:absolute; left:505px; bottom:-42px; margin-left: -120px; } .theme-default .nivo-controlNav a { display:block; width:22px; height:22px; background:url() no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; }
.theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url() no-repeat; text-indent:-9999px; border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0; right:15px; } .theme-default a.nivo-prevNav { left:15px; }
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
} .theme-default .nivo-caption a {
color:#fff; border-bottom:1px dotted #fff;
} .theme-default .nivo-caption a:hover {
color:#fff;
}
/* NIVO */
/*
* jQuery Nivo Slider v2.6 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */
/* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption {
display:none;
} /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; }
/* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
/* GaleryCSS */
div#container { overflow: hidden; } div.content { display: none; clear: both; }
div.content a, div.navigation a { text-decoration: none; } div.content a:hover, div.content a:active { text-decoration: underline; }
div.navigation a.pageLink { height: 77px; line-height: 77px; }
div.controls { margin-top: 5px; height: 23px; } div.controls a { padding: 5px; } div.ss-controls { float: left; } div.nav-controls { float: right; }
div.slideshow-container, div.loader, div.slideshow a.advance-link { width: 610px; /* This should be set to be at least the width of the largest image in the slideshow with padding */ }
div.loader, div.slideshow a.advance-link, div.caption-container { height: 512px; /* This should be set to be at least the height of the largest image in the slideshow with padding */ }
div.slideshow-container { position: relative; clear: both; float: left;
margin-left:20px;
height: 532px;
padding-bottom: 40px;
}
div.loader { position: absolute; top: 0; left: 0; background-image: url('images/loader.gif'); background-repeat: no-repeat; background-position: center; } div.slideshow span.image-wrapper { display: block; position: absolute; top: 30px; left: 0; } div.slideshow a.advance-link { display: block; line-height: 512px; /* This should be set to be at least the height of the largest image in the slideshow with padding */ text-align: center; }
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { text-decoration: none; } div.slideshow a.advance-link:focus { outline: none; }
div.slideshow img { border-style: solid; border-width: 1px; } div.caption-container { float: right; position: relative; margin-top: 30px;
margin-right:20px;
} span.image-caption { display: block; position: absolute; top: 0; left: 0; }
div.caption-container, span.image-caption { width: 300px; }
div.caption { padding: 0 12px; }
div.image-title { font-weight: bold; font-size: 1.4em; } div.image-desc { line-height: 1.7em; padding-top: 20px; } div.download { margin-top: 8px; } div.photo-index { position: absolute; bottom: 0; left: 0; padding: 0 12px; } div.navigation-container { float: left; position: relative; left: 50%; } div.navigation { float: left; position: relative; left: -50%; } div.navigation a.pageLink { display: block; position: relative; float: left; margin: 2px; width: 16px; background-position:center center; background-repeat:no-repeat; } div.navigation a.pageLink:focus { outline: none; }
ul.thumbs { position: relative; float: left; margin: 0; padding: 0; } ul.thumbs li { float: left; padding: 0; margin: 2px; list-style: none; } a.thumb { padding: 1px; display: block; } a.thumb:focus { outline: none; } ul.thumbs img { border: none; display: block; } div.pagination { clear: both; position: relative; left: -50%; } div.pagination a, div.pagination span.current, div.pagination span.ellipsis { position: relative; display: block; float: left; margin-right: 2px; padding: 4px 7px 2px 7px; border: 1px solid #ccc; } div.pagination a:hover { text-decoration: none; } div.pagination span.current { font-weight: bold; } div.pagination span.ellipsis { border: none; padding: 5px 0 3px 2px; }
div.gallery-gutter { clear: both; padding-bottom: 20px; }
div.image-desc { line-height: 1.3em; padding-top: 12px; } div.download { margin-top: 8px; } div.photo-index { color: #777; } div.navigation a.prev { background-image: url(); } div.navigation a.next { background-image: url(); } div.loader { background-image: url(); } div.slideshow img { border-color: #ccc; } ul.thumbs li.selected a.thumb { background: #000; } div.pagination a:hover { background-color: #eee; } div.pagination span.current { background-color: #000; border-color: #000; color: #fff; }
/* Galery CSS */
/*** ESSENTIAL STYLES ***/ a.collapseLink {
font-weight:regular; font-size:1em; color:#225323;
}
- menucontainer{
margin-top:5px; margin-left: auto; margin-right: auto; width: 975px; background-color: white; border-top: 1px solid black; border-bottom: 1px solid black; height:34px; }
.sf-menu, .sf-menu * {
top: 2px; left: 0px;
margin: 0; padding: 0; list-style: none;
} .sf-menu { margin-left:1px; } .sf-menu ul { position: absolute; top: -999em; width: 162px; /* left offset of submenus need to match (see below) */ } .sf-menu ul li {
top: -5px; left: 0px; width: 162px;
} .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { height: 30px; float: left; position: relative;
width: 162px;
} .sf-menu a { display: block;
text-align: center;
position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 36px; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 162px; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 162px; /* match ul width */ top: 0; }
/*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; } .sf-menu a { border-left: 1px transparent #fff; border-top: 1px transparent #314043; padding: 0.37em 1.5em 0.37em 1.5em; text-decoration:none;
font-family: 'Lucida Grande', sans-serif; font-size:1em;
} .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: white; } .sf-menu li { background: #333 url('https://static.igem.org/mediawiki/2012/9/99/Menu.png') repeat-x; } .sf-menu li li { background: #111; } .sf-menu li li li { background: #111; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #0b5f3e; outline: 0; }
/*** arrows **/ .sf-menu a.sf-with-ul { cursor: default; padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: none; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('https://static.igem.org/mediawiki/2011/2/2f/ICL_MenuArrow.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ }
/* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ }
/*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('https://static.igem.org/mediawiki/2011/9/9f/ICL_Shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; }
- banner{
margin-left: auto; margin-right: auto; }
.logobig{ display: block; margin-left: auto; margin-right: auto; }
.footer{ height: 100px; width: 100%; float: left; margin-top: 20px; border-top: 1px solid #333; display: block; }
.logofooter{ margin-top: 10px; margin-left: 25px; margin-right: 25px; }