Template:Team:Berkeley/css
From 2013.igem.org
Line 1: | Line 1: | ||
- | + | #header { height: 200px !important;} | |
- | + | #content{ position:relative;} | |
- | + | ||
- | + | .box{ | |
- | + | margin: 20px; padding: 15px; | |
- | + | background: #eee; | |
+ | height: 700px; | ||
} | } | ||
- | + | #navbar{ | |
- | # | + | |
position: fixed; | position: fixed; | ||
- | + | bottom: 0; left: 20px; | |
- | + | width: 10%; | |
- | + | background: #fff; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .nav li a{ | |
- | + | ||
float: left; | float: left; | ||
+ | width: 80px; | ||
+ | padding: 15px 0; | ||
} | } | ||
- | + | .nav li a:hover{ | |
- | + | color: #f33 !important; | |
- | + | background: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | color: # | + | |
- | + | ||
} | } | ||
- | + | .nav li.active a{ | |
- | + | color: #f55; | |
- | + | text-decoration: underline; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | color: # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Revision as of 00:12, 22 October 2013
- header { height: 200px !important;}
- content{ position:relative;}
.box{
margin: 20px; padding: 15px; background: #eee; height: 700px;
}
- navbar{
position: fixed; bottom: 0; left: 20px; width: 10%; background: #fff;
} .nav li a{
float: left; width: 80px; padding: 15px 0;
} .nav li a:hover{
color: #f33 !important; background: none;
} .nav li.active a{
color: #f55; text-decoration: underline;
}
.content {
width: auto; margin: 0px 20px; background: #f1f1f1; border: 0.1em solid black;
} .container {
display: block; padding: 20px; background: #f1f1f1;
}
- bodyContent {
width: 90%; margin: auto; } .firstHeading {
display: none; margin-bottom: .1em;
} /********************************************************
- Tabs *
- /
/*
- tab {
margin-left: 20px; margin-bottom: 64px; display: block;
}
- tab ul {
list-style: none; float: left; width: auto;
}
- tab li {
float: left; margin: 0 1em 0 0;
}
- tab a {
text-decoration: none; display: block; padding: 1em; font-weight: bold; background: #c1c1c1; border: 0.1em solid #000050; border-bottom: 0.5em solid #000050; border-top-left-radius: 1em; border-top-right-radius: 1em; color: #000050;
}
- tab a:hover {
background-color: #f1f1f1; color: #0000AA; border-color: #0000AA;
}
- tab #selected a {
background-color: #f1f1f1; color: #000050; border-color: #000050;
}
/********************************************************
- Sub-Tabs
- /
/*
- stages{
width: 80%; height: 100px; margin: auto;
}
- stages ul{
list-style: none; padding: 0px; margin: 0px;
}
- stages li{
float: left; text-align: center; color: #000050; margin: 5px;
}
- stages ul > li:before {
content: "♦"; font-size: 25px; line-height: 1px; display: block; color: #000050; background-color: #262626; border-top: 5px solid #ededed; margin: 0 0 15px 0;
}
- stages ul > li.active:before {
color: #4ee54e; text-shadow: 0px 0px 10px #56ff5f;
}
/********************************************************
- The Rest
- /
.data {
width: 80%; display: block; margin: 0 auto;
} .box {
float: right; width: 775px; background-color: rgba(17, 77, 146, 0);
} .buttons {
float: left; width: 150px; background-color: rgba(17, 77, 146, 0); margin: 3px;
} .buttons a {
text-decoration: none;
} .buttons a span {
display: block; margin-bottom: 5px;
}
- title {
margin: 0 auto; text-shadow: 2px 2px #C0C0C0; font-size: 16px;
} .names {
font-size: 20px; text-shadow: 2px 2px #C0C0C0; margin: 2px;
} .top-left {
width: 495px; background-color: rgba(17, 77, 146, 0); float: left; margin: 0px 5px 5px 0px;
} .top-right {
width: 460px; height: 389px; background-color: rgba(17, 77, 146, 0.5); display: block; float: left; margin: 0px 0px 5px 0px;
} .middle {
width: 100%; height: 300px; clear: both; background-color: rgba(17, 77, 146, 0); margin: 0px 0px 5px 0px;
} .bottom-left {
width: 315px; height: 200px; float: left; margin: 0px 5px 0px 0px;
} .bottom-middle {
width: 315px; height: 200px; float: left;
} .bottom-right {
width: 315px; height: 200px; float: left; margin: 0px 0px 0px 5px;
}
.heading {
background-color: rgba(0, 0, 80, 1); padding: 15px 0px 15px 15px; width: auto;
} .heading a {
color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 28px; text-decoration: none;
} .heading-large {
background-color: rgba(0, 0, 80, 1); padding: 35px 10px 15px 15px; width: auto;
} .heading-large a {
color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 42px; text-decoration: none;
} .sub-heading {
background-color: rgba(0, 0, 80, 1); //background-color: rgba(65, 105, 225, 1); padding: 12px 0px 12px 12px; width: auto;
} .sub-heading a {
color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 20px; text-decoration: none;
} .table, tr, td {
margin: 25px; border: 0px solid rgba(17,77,146, 0); background-color: rgba(17, 77, 146, 0); text-align: left;
} table tr, table td {
border: 0px solid rgba(17,77,146, 0);
} .button:hover {
opacity: 0.5;
}
@import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*
- cssmenu,
- main-nav ul,
- main-nav ul li,
- main-nav ul li a {
padding: 0; margin: 0; line-height: 1; font-family: 'Capriola', sans-serif;
}
- main-nav:before,
- main-nav:after,
- main-nav > ul:before,
- main-nav > ul:after {
content: ; display: table;
}
- main-nav:after,
- main-nav > ul:after {
clear: both;
}
- /
- main-nav {
zoom: 1; height: 69px; background: url() repeat-x center bottom; border-radius: 0px; width: auto; margin-top: -4px;
}
- main-nav ul {
background: skyblue; height: 92%; /* border: yellow 10px; */ /* border-bottom-width: 10px; */ /* border-bottom-style: solid; */
}
- main-nav ul li {
float: left; list-style: none; width:25%;
}
- main-nav ul li a {
display: block; height: 37px; padding: 22px 14px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 22px; color: rgba(0, 44, 96, 1); text-shadow: 0; font-weight: 400; opacity: .9;
}
- main-nav ul li:first-child a {
/* margin: 4px 2px 0 0; */
}
- main-nav ul li a:hover,
- main-nav ul li.active a {
display: block; color: white; text-shadow: white; opacity: 1;
}
- main-nav ul ul {
display: none; left: 0px;
}
- main-nav ul li:hover ul{
display: block; width: 90%; height: 222px; position: absolute; margin-left: 5%; z-index:10; border: antiquewhite; border-width: thin; border-top-style: solid;
}
- main-nav ul ul li {
width: 25%; height: 100%; left:auto; clear:none; float: left; /* margin-left: 1%; */ /* margin-right: 1%; */ /* border-color: skyblue; */ /* border-width: thick; */ background: darkblue; /* color: skyblue; */
}
- main-nav ul ul li.odd{
/* border-style: solid; */ border-color: darkblue; border-width: thick; background: skyblue; /* height: 100%; */ /* border: double skyblue 37px; */ /* margin-top: 1%; */ /* margin-left: 2%; */ /* margin-right: 2%; */ width: 25%;
}
- main-nav ul li ul li a {
display: block; height: 37px; padding: 22px 14px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 20px; color: skyblue; text-shadow: 0; font-weight: 400; padding-top: inherit; margin-top: 1%; opacity: .9; padding-top: 7%;
}
- main-nav ul li ul li.odd a {
display: block; height: 37px; padding: 22px 14px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 22px; color: rgba(0, 44, 96, 1); text-shadow: 0; font-weight: 400; opacity: .9;
}
- main-nav ul li ul li.odd a:hover,
- main-nav ul li ul li.active a {
display: block; color: white; text-shadow: white; opacity: 1;
}
- main-nav ul li ul li:hover a,
- main-nav ul li ul li.active a {
display: block; /* height: 100%; */ /* margin-top: 0px; */ /* padding-top: 14%; */ color: white; text-shadow: white; opacity: 1;
}
- main-nav img.nav-image {
width:200px; height:85px; margin: 10%; margin-left: auto; margin-right:auto; display: block; float: middle;
}
- header-image {
height: 100%; width: auto; border: double skyblue 15px; border-style: solid; }
- header-image-inner {
height: 100%; width: auto; border: double darkblue; border-width: 5px; border-style: solid; /* outline: solid skyblue; */ background: skyblue; /* box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000; */
}
- header-image img.firstHeaderImg {
height: auto; width: 19%; margin-left: 1%;
}
- header-image img.secondHeaderImg {
height: auto; width: 50%; margin-left: 4%; margin-right: 4%;
}
- header-image img.thirdHeaderImg {
height: auto; width: 19%;
}
/* @import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*
- cssmenu1,
- cssmenu1 ul,
- cssmenu1 ul li,
- cssmenu1 ul li a {
padding: 0; margin: 0; line-height: 1; font-family: 'Capriola', sans-serif;
}
- cssmenu1:before,
- cssmenu1:after,
- cssmenu1 > ul:before,
- cssmenu1 > ul:after {
content: ; display: table;
}
- cssmenu1:after,
- cssmenu1 > ul:after {
clear: both;
}
- cssmenu1 {
zoom: 1; height: 69px; background: url(bottom-bg.png) repeat-x center bottom; border-radius: 2px; width: auto;
}
- cssmenu1 ul {
background: url(nav-bg.png) repeat-x 0px 4px; height: 69px;
}
- cssmenu1 ul li {
float: left; list-style: none;
}
- cssmenu1 ul li a {
display: block; height: 37px; padding: 22px 30px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 15px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); font-weight: 400; opacity: .9;
}
- cssmenu1 ul li:first-child a {
margin: 4px 2px 0 0;
}
- cssmenu1 ul li a:hover,
- cssmenu1 ul li.active a {
background: url(color.png) center bottom; display: block; height: 37px; margin-top: 0px; padding-top: 26px; color: #616161; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); opacity: 1;
}