Team:UI-Indonesia/css/stylesheet
From 2014.igem.org
Line 157: | Line 157: | ||
/* -------------------- Navigation Bar ----------------------- */ | /* -------------------- Navigation Bar ----------------------- */ | ||
- | + | <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'> | |
- | + | ||
- | + | .nav-menu-first { | |
- | + | position: fixed; | |
- | + | display: block; | |
- | + | z-index: 50; | |
- | + | top: 0; | |
- | + | height: 40px; | |
- | + | left: 0; | |
- | + | right: 0; | |
- | z-index: | + | background: white; |
- | + | } | |
+ | .nav-menu-second { | ||
+ | position: fixed; | ||
+ | display: none; | ||
+ | z-index: 50; | ||
+ | top: 43px; | ||
+ | height: 40px; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | background: white; | ||
+ | } | ||
+ | #navigation-bar { | ||
+ | padding: 0; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 965px; | ||
+ | height: 40px; | ||
+ | bottom: 0; | ||
+ | z-index: 100; | ||
+ | display: block; | ||
+ | background: transparent; | ||
+ | color: rgb(46,43,52); | ||
+ | text-align: center; | ||
+ | /*line-height:40px;*/ | ||
+ | border-bottom: 2px solid #e80607; | ||
+ | } | ||
+ | .side-logo { | ||
+ | float: left; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | } | ||
+ | .side-logo a { | ||
+ | display: block; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
} | } | ||
- | + | #ui-logo{ | |
- | + | width: 48px; | |
- | + | } | |
- | + | #igem-logo{ | |
- | + | width:55px; | |
- | + | } | |
- | + | #ui-logo img, #igem-logo img, { | |
- | + | background-color: rgb(46,43,52); | |
- | + | margin-top: 8px; | |
- | # | + | margin-bottom: 2px; |
+ | } | ||
+ | #ui-logo:hover img { | ||
+ | background-color: #7b7b7b; | ||
+ | } | ||
+ | #igem-logo:hover img { | ||
+ | background-color: #7b7b7b; | ||
+ | } | ||
- | + | ul#nav { | |
- | + | display: block; | |
- | + | float: left; | |
- | + | padding: 0; | |
- | + | margin: 0; | |
- | + | list-style: none; | |
- | . | + | height: 40px; |
- | + | width: 860px; | |
- | + | background: none; | |
- | + | z-index: 100; | |
- | + | /*font-family: 'PT Sans Narrow', sans-serif;*/ | |
- | + | font-family: 'Archivo Narrow', sans-serif; | |
- | # | + | } |
- | + | ul#nav a { | |
- | + | display: block; | |
- | # | + | top: 0; |
- | + | bottom: 0; | |
- | # | + | } |
- | # | + | ul#nav ul { |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | list-style: none; | |
- | + | background: transparent; | |
- | + | z-index: 100; | |
- | + | } | |
- | + | ul#nav li { | |
+ | float: left; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | width: 127px; | ||
+ | margin-top: 13px; | ||
+ | line-height: 27px; | ||
+ | height: 27px; | ||
+ | font-size: 15px; | ||
+ | font-weight: 600; | ||
+ | background: transparent; | ||
+ | font-weight: normal; | ||
+ | z-index: 100; | ||
+ | } | ||
+ | ul#nav li:hover, ul#nav li.over, ul#nav li:hover a, ul#nav li.over a { | ||
+ | color: rgb(228,45,51); | ||
+ | /*font-weight:bold;*/ | ||
+ | border-bottom:4px solid rgb(255,255,255); | ||
+ | } | ||
+ | ul#nav a { | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-decoration: none; | ||
+ | background: transparent; | ||
+ | color: rgb(46,43,52); | ||
+ | } | ||
+ | ul#nav a:hover { | ||
+ | color: rgb(228,45,51); | ||
+ | } | ||
+ | #nav li ul { | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | width: 965px; | ||
+ | height: 40px; | ||
+ | background: transparent; | ||
+ | color: rgb(46,43,52); | ||
+ | z-index: 100; | ||
+ | } | ||
+ | #nav li ul li { | ||
+ | margin: 0px; | ||
+ | padding: 0; | ||
+ | float: left; | ||
+ | background: none; | ||
+ | height: 100%; | ||
+ | line-height: 40px; | ||
+ | height: 40px; | ||
+ | width: 127px; | ||
+ | color: rgb(46,43,52); | ||
+ | z-index: 100; | ||
+ | } | ||
+ | #nav li:hover .navmenubkg2 { | ||
+ | display:block; | ||
+ | } | ||
+ | #nav li .navmenubkg2:hover { | ||
+ | display:block; | ||
+ | } | ||
+ | ul#nav li:hover li a, ul#nav li.over li a { | ||
+ | color: rgb(46,43,52); | ||
+ | font-weight: normal; | ||
+ | border: none; | ||
+ | } | ||
+ | ul#nav li li:hover, ul#nav li li.over, ul#nav li li:hover a, ul#nav li li.over a { | ||
+ | color: rgb(228,45,51); | ||
+ | /*font-weight: bold;*/ | ||
+ | border: none; | ||
+ | } | ||
/* --------------------- Main Content ----------------------- */ | /* --------------------- Main Content ----------------------- */ |
Revision as of 16:57, 23 July 2014
@charset "UTF-8";
body,
- globalWrapper {
font-size: 14px; font-family: 'Signika', sans-serif; overflow-x: hidden;
}
p{
text-align: justify;
}
.clear {
clear: both;
}
a, a:link, a:visited {
color: #55b909; text-decoration: none;
}
a:hover, a:focus {
color: #81b909;
}
/* ---------------- WikiMedia Elements / Page Structure ---------------- */
/* HIDE SEARCH CONTROLS AND PAGE TITLE */
- p-logo,
- search-controls,
.firstHeading {
display: none;
}
h1, h2, h3, h4, h5, h6 { color: #f83031; }
/* REMOVE DEFAULT TOP HEADER */
- top-section {
background-image: url('https://static.igem.org/mediawiki/2014/4/4f/UI-Indonesia_Image_TopSectionBG.png');
background-size: 965px auto;
border: none; height: 20px; margin-top: 0; margin-bottom: 0; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;
}
- top-section:hover {
background: #ffffff;
}
/* EDIT AND USER MENU */
- menubar {
top: 0 !important; font-size: 0.7em;
}
- menubar li,
- menubar li a:link {
text-transform: uppercase;
}
/* Highlight with background colour on hover */
- top-section:hover #menubar li a {
color: #e80607;
}
- menubar li a:link,
- menubar li a:visited {
color: #ffffff; background-color: transparent;
}
- menubar li a:hover,
- menubar li a:focus {
color: #e80607; text-decoration: none;
}
/* EDIT */
- menubar.left-menu{
}
- menubar.left-menu:hover {
background-color: transparent;
}
/* USER */
- menubar.right-menu {
}
/* CHANGING WHITE BACKGROUND */
- globalWrapper, #content { /*-- changes default wiki settings --*/
width: 965px; height: 100%; border: none; background-color: white; margin: 0px auto; padding: 0px; }
body { background-color: #ffffff; width: 100%; height: auto; }
html, .wrapper { /*-- changes default wiki settings --*/ width: 100%; height: 100%; background-color: transparent; }
/* HIDING FOOTER BOX */
- footer-box{display:none;}
- catlinks{display:none;}
/* -------------------------- Header-------------------------- */
- header {
position: relative; /* this is to allow positioning of elements within */
background-color: #ffffff;
text-align: center;
top: 0px; margin: 0px auto; width: 965px; height: 180px; }
#mission-igempossible { position: absolute;
display: block; left: 0; margin: 0px auto; clear: both;
}
/* -------------------- Navigation Bar ----------------------- */
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
.nav-menu-first {
position: fixed; display: block; z-index: 50; top: 0; height: 40px; left: 0; right: 0; background: white;
} .nav-menu-second {
position: fixed; display: none; z-index: 50; top: 43px; height: 40px; left: 0; right: 0; background: white;
}
- navigation-bar {
padding: 0; margin-left: auto; margin-right: auto; width: 965px; height: 40px;
bottom: 0;
z-index: 100; display: block; background: transparent; color: rgb(46,43,52); text-align: center; /*line-height:40px;*/ border-bottom: 2px solid #e80607;
} .side-logo {
float: left; display: block; margin-left: auto; height: 100%; width: auto;
} .side-logo a {
display: block; top: 0; bottom: 0;
}
- ui-logo{
width: 48px;
}
- igem-logo{
width:55px;
}
- ui-logo img, #igem-logo img, {
background-color: rgb(46,43,52); margin-top: 8px; margin-bottom: 2px;
}
- ui-logo:hover img {
background-color: #7b7b7b;
}
- igem-logo:hover img {
background-color: #7b7b7b;
}
ul#nav {
display: block; float: left; padding: 0; margin: 0; list-style: none; height: 40px; width: 860px; background: none; z-index: 100; /*font-family: 'PT Sans Narrow', sans-serif;*/ font-family: 'Archivo Narrow', sans-serif;
} ul#nav a {
display: block; top: 0; bottom: 0;
} ul#nav ul {
margin: 0; padding: 0; list-style: none; background: transparent; z-index: 100;
} ul#nav li {
float: left; padding: 0; margin: 0; width: 127px; margin-top: 13px; line-height: 27px; height: 27px; font-size: 15px; font-weight: 600; background: transparent; font-weight: normal; z-index: 100;
} ul#nav li:hover, ul#nav li.over, ul#nav li:hover a, ul#nav li.over a {
color: rgb(228,45,51); /*font-weight:bold;*/ border-bottom:4px solid rgb(255,255,255);
} ul#nav a {
padding: 0px; margin: 0px; width: 100%; height: 100%; text-decoration: none; background: transparent; color: rgb(46,43,52);
} ul#nav a:hover {
color: rgb(228,45,51);
}
- nav li ul {
display: block; margin: 0; margin-left: auto; margin-right: auto; padding: 0; list-style: none; width: 965px; height: 40px; background: transparent; color: rgb(46,43,52); z-index: 100;
}
- nav li ul li {
margin: 0px; padding: 0; float: left; background: none; height: 100%; line-height: 40px; height: 40px; width: 127px; color: rgb(46,43,52); z-index: 100;
}
- nav li:hover .navmenubkg2 {
display:block;
}
- nav li .navmenubkg2:hover {
display:block;
} ul#nav li:hover li a, ul#nav li.over li a {
color: rgb(46,43,52); font-weight: normal; border: none;
} ul#nav li li:hover, ul#nav li li.over, ul#nav li li:hover a, ul#nav li li.over a {
color: rgb(228,45,51); /*font-weight: bold;*/ border: none;
}
/* --------------------- Main Content ----------------------- */
- main-content {
background-color: green; width: 965px; height: auto; margin: 0px auto; }
- BackToTop,
- BackToTop:link,
- BackToTop:visited {
position: fixed; bottom: 5px; right: 5px; text-decoration: none; color: #55b909;
}
- BackToTop:hover {
color: #81b909;
}