Template:UBonn HBRS/css/main

/** Main Styles iGEM-Team Bonn

feel free to use stuff from here but please give credit

• /

/* * * * * * * * * * * * * * * * * * * * * * * * * Team Bonn Template

• * * * * * * * * * * * * * * * * * * * * * * * */

html { position: relative; }

body { margin-bottom: 60px !important; padding-top: 16px !important; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; background-color: #FFF; }

header { padding: 12px 0; background: #F8F8F8; border-bottom: 1px solid #EEE; }

.footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #EEE; }

1. scrollTop img {

display: inline-block; height: 1em; margin-bottom: 4px; vertical-align: middle; transition: 100ms linear; filter: brightness( 90% ); }

1. scrollTop:hover img, #scrollTop:focus img {

filter: brightness( 70% ); }

.container .text-muted { margin: 20px 0; }

div.container.main { margin: 12px auto; }

.main { margin: 0 auto !important; padding-bottom: 15px; background: #FFF; }

.nav-link-img a { display: block; background: transparent; transition: 200ms linear; }

.nav-link-img:hover a, .nav-link-img:focus a { background: #FFF; }

.nav-link-img img { transition: 200ms linear; filter: grayscale( 100% ); filter: brightness( 68% ); }

.nav-link-img.active img, .nav-link-img:hover img, .nav-link-img:focus img { filter: grayscale( 0% ); filter: brightness( 100% ); }

1. sideNav a {

color: #337AB7; }

1. sideNav a:hover {

color: #23527C; }

.blue-title { color: #39C; }

1. logo, .nav-link-img {

padding: 0.4% !important; }

1. logo {

text-align: center; }

1. title {

line-height: 1.1em; color: #222; }

.img-20 { width: 20%; float: left; }

.img-50 { width: 50%; float: left; }

.img-50.right, .img-20.right { float: right; }

.img-100, .img-100 img, .img-50 img, .img-20 img { width: 100%; }

1. toc {

display: none; }

/**

* MEDIA-QUERIES
*/

@media (max-width: 767px) { #title { margin: 4% 0 0 0; text-align: center; font-size: 4em; } #logo>img { width: 33.3333%; } .img-50, .img-20 { width: 100%; float: none; } }

@media (min-width: 768px) { #title { margin: 1% 0 0 0; font-size: 1.6em; } }

@media (min-width: 992px) { #title { margin: 1.4% 0 0 0; font-size: 2em; } }

@media (min-width: 1200px) { #title { margin: 1.8% 0 0 0; font-size: 2.2em; } }

/**

* CALLOUTS
*/

.callout { border-color: #EEE; border-image: none; border-radius: 3px; border-style: solid; border-width: 1px 1px 1px 5px; margin: 20px 0; padding: 20px; background: #FFF; }

.callout-info { border-left-color: #1b809e; }

/**

* SIDENAV
*/

1. sideNav {margin-top: 20px}
2. sideNav li>a {padding: 6px 0 6px 6px}
3. sideNav li>a:hover {padding-left: 4px;background: transparent;border-left: 2px solid #39C}
4. sideNav li.active>a {padding-left: 4px;font-weight: bold;border-left: 2px solid #39C}

.NsideNav_h3, .sideNav_h4 {display: none !important} .sideNav_h3 {padding-left: 12px}

h1, h2, h3 {margin: 0; padding: 20px 0 10px 0}

/**

* TEAM PAGE
*/

.team-entry:nth-of-type(3n+1) { padding-left: 40px !important; } .team-entry:nth-of-type(3n+3) { padding-left: 80px !important; }

/**

* LISTS
*/

.main-content li { padding-left: 1em !important; list-style: none !important; } .main-content li:before { content: "• "; font-size: 2em; vertical-align: middle; color: #39C; }

/**

* Links
*/

a, a:visited { color: #337AB7; }