"
Team:Penn/stylesheet.css
From 2013.igem.org
/************ *Stylesheet for Penn's iGEM wiki * **********/
/*import the font quicksandlight (using this for > arrow)*/
@font-face
{ font-family: QuickSandLight; src: url('https://googledrive.com/host/0B4ZBZOYYKBzEazRybm9PV21QdTA'), }
/*format paragraph, h1, h2, and h3*/
p {
color: black; /*font color*/
font-family: arial, sans-serif; /*font is arial, with sans-serif as a back up*/
font-size: 13px;
}
h1, h2 {
color: black; /*font color*/
font-family: arial, sans-serif;/*font is arial, with sans-serif as a back up*/
font-size: 15px;
}
/*h3 will be the same as h1 and h2, but it will be centered*/
h3 {
color: black;
font-family: arial, sans-serif; /*font is arial, with sans-serif as a back up*/
font-size: 15px;
text-align: center; /*center*/
}
/*links in sidebar*/ a{
font-family: arial, sans-serif;
text-decoration: none; /*gets rid of underlines*/
color: black;
}
/*visited link same as regular link*/
a:visited {
color: black !important;
text-decoration: none; /*gets rid of underlines*/
}
/*link when the mouse hovers over it*/
a:hover {
color: #07304b !important; /*font color is dark blue*/
text-decoration: none; /*gets rid of underlines*/
}
.navbar ul {
list-style-type: none; /*gets rid of bullets*/
}
/*sidebar--fix line heights to get some padding. change fonts */
.navbar{
position: relative;
list-style-type: none; /*no bullets*/
line-height: 30px; /*changes line height to give the sidebar links some padding*/
font-size: 15px;
font-family: arial, sans-serif;
}
.navbar li {
/*not actually sure if this is neccessary, but I'll just leave it here*/
padding-left: 50px;
margin-left: -50px;
}
/*sidebar--change the color of the background of the link on the sidebar*/
.navbar li:hover {
width: 100%; /*expand the link to the width of the sidebar.*/
background-color: rgb(200, 200, 215); /*change background color to light blue*/
}
/*change color of the link that's active*/
.active {
color: #07304b !important;
}
/*get rid of default list formatting*/
.dropdown{
list-style-type: none; /*no bullets or numbering*/
}
.dropdown-menu{
list-style-type: none; /*no bullets or numbering*/
}
/*change the background color of the active link*/
.dropdown-menu .active {
background-color: rgb(200,200,215); /*light blue background color*/
width: 100px !important; /*set the width*/
padding: 5px;
margin: 0px !important; /*get rid of margins*/
}
/*format the arrow that is on the project and about links*/
.arrow{
display: inline; /*inline so it stays next to the link*/
float: right; /*move it to the right*/
margin-right: 20px; /*but not all the way to the right*/
font-size: 20px; /*make it bigger*/
font-family: QuickSandLight, arial, sans-serif; /*quicksand light seems to make the arrows wider looking*/
}
/*format each button on the sidebar drop down menus*/
.dropdown-menu li {
background-color: white; /*white background*/
width: 100px; /*set width*/
margin: 0px; /*no margins*/
padding: 5px;
}
/*position the dropdown menus so they line up with the corresponding link. It's a little tricky because the positioning is absolute--it's a matter of eyeballing. This is probably not the most efficient way of doing this, but since there's only two dropdowns it works*/
/*drop-menu1 is for the project dropdown*/
#drop-menu1{
position: absolute; /*absolutely position so it doesn't conflict with other content*/
left: 155px; /*move it left until it's not in the navbar anymore*/
top: 27px; /*move it down right next to the project button (higher number is lower on page)*/
text-align: center; /*center the text*/
display: inline;
line-height: 20px; /*give it a big line height so it has some padding*/
z-index: 9999; /*bring it up front so it's not behind anything*/
display: none; /*hide it at first*/
}
/*drop-menu2 is for about (comments are same as above)*/
#drop-menu2{
width: 100px;
position: absolute;
left: 155px;
top: 59px; /*move it down next to the about button (higher number is lower on page)*/
text-align: center;
display: inline;
line-height: 20px;
display: none;
z-index: 9999;
}
/*wrap the drop-menu to make it a box--this wrap actually is not very important
I actually am not sure if it still does anything, but I'm leaving it just in case it does*/
.drop-menu-wrap{
width: 120px; /*give it a width*/
background-color: white;
text-align: center; /*center the text*/
min-height: 700px; /*give it a minimum height*/
float: left; /*float it to the left*/
margin-left: 0px;
}
/*format the left wrapper (sidebar).
fixed left is not being used, but I'm keeping it there just in case*/
.left_wrap, .fixed-left {
margin-left: -15px; /*this makes sure there's no margin between the sidebar and the page*/
padding-top: 80px; /*padding to the top so the links don't start there*/
width: 200px; /*give it a width*/
min-height: 100%; /*height should take up entire height*/
position: fixed; /*fix it so it stays in place when you scroll*/
background-color: white;
/*cross browser opacity*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 999; /*make sure sidebar is over everything else in case there is some overlap*/
}
/*position the igem logo, resize, and fix it*/
#igem {
z-index: 999; /*it should be over everything in case there is overlap*/
height: 50px; /*fix the height and leave the width at auto*/
top: 45px; /*position it 45 pixels down*/
right: 35px; /*and 35 to the right*/
margin: 30px 15px 15px 15px;
position: fixed; /*fix it in place so it doesn't move when you scroll*/
/*give it some transparency (cross browser)*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
-moz-opacity: 0.8;
/* Safari 1.x */
-khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
}
/*position the penn logo, resize, and fix it (same comments as above)*/
#penn {
z-index: 999;
height: 40px;
top: -5px;
right: 20px;
margin: 30px 15px 15px 15px;
position: fixed;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
-moz-opacity: 0.8;
/* Safari 1.x */
-khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
}
/***Format the sections, background image, padding, margins
to add a section you can use any of the 3 sections and change the background picture
section 1, 2, and 3 are virtually the same thing except they have been slightly adjusted
according to their background images**/
.section1 {
z-index: -9999;
margin-left: -15px; /*make sure there's no space between the browser edge and background*/
padding-left: 200px; /*padding is as big as the sidebar so there's no overlap and it centers without taking that into account*/
padding-top: 75px; /*give it some padding*/
background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/REFYp1Y82j/IMG_0382.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');
width: auto;
min-height: 100%;
background-position: top; /*image should be placed at the top of the container so it covers everything*/
/*the next few are for cross browser background size. "cover" makes the image cover the entire container*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-attachment: fixed;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
/*section 2 and 3 are no longer relative now that we're using one image.
*
* .section2 {
margin-left: -15px;
padding-left: 210px;
padding-top: 20px;
width: auto;
min-height: 700px;
background-size: auto;
background-position: right;
background-repeat: no-repeat;
background: transparent;
}
.section3 {
margin-left: -15px;
padding-left: 210px;
padding-top: 20px;
background: transparent;
width: auto;
min-height: 700px;
background-size: auto;
background-position: top;
background-repeat: no-repeat;
}
*/
/*sets margins, padding and width just in case*/
html,body{
width: 100%;
margin: 0;
padding: 0;
}
/*white text box - margins are auto.
*Because of padding in the section divs, it should align taking the navbar into account.
*Use this around content
*/
.text {
color: black;
width: 700px;
/*the textbox should extend if text goes over this height, but I noticed it doesn't always.
Hard code the min-height into the specific textbox's html to fix this issue if it occurs*/
min-height: 500px;
background-color:white;
margin: auto;
overflow: hidden;
padding: 20px;
margin-top: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
/*get rid of gray bars on top and bottom. This accounts for some of the leftover wiki formatting*/
#content {
margin-top: -10px;
margin-bottom: -20px;
padding: 0px;
}
/*wrap any number of text columns that add up to less than 750px wide (plus margins), float one left, one right,
*one or more in the middle (adjust the middle ones' margins until centered or float center if there's just one.
*The text wrap will keep the margins on either side centered.
*/
.text-wrap {
overflow: hidden;
width: 750px;
margin: auto;
}
/*give the textboxes for methods a different minimum height and margin*/
#methods {
min-height: 50px !important; /*change this if this is to tall/short*/
margin-bottom: 10px;
}
/*format the title of the sections in the sidebar and turn them 90 degrees*/
.section-title {
top: 300px;
left: 2px;
position: fixed !important;
font-family: arial, sans-serif;
font-size: 25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/**************** Getting rid of wiki defaults
- /
.outer { width: 100%; text-align: center; float: center; height: 100%; background-color: white; }
- p-logo {
position: absolute; display: none;
}
- content {
width: 100%; background-color: white; }
- top-section {
position: absolute;
}
.firstHeading {
position: absolute; display: none;
}
/*.thumb {
display: none; position: absolute;
}*/
- search-controls {
display: none; position: absolute; }
- footer {
display: none; position: absolute;
}
ul {
list-style-type: none; list-style-image: none;
}
.printfooter {
display: none; position: absolute;
}
.visualClear {
display: none; position: absolute;
}
- footer-box {
display: none; position: absolute;
}
body {
margin: 10px 0 0 0; padding: 0;}
- top-section {
width: 965px;
height: 0;
margin: 0 auto;
padding: 0;
border: none;}
body {
margin: 10px 0 0 0;
padding: 0;}
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none;}
- menubar {
font-family: arial, sans-serif;
z-index: 9999;
font-size: 65%;
top: 5px;
height: 50px;}
.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;} /* 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;}
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;
background-color: transparent;}
#bodyContent {
background-color: transparent;
}
