Team:UI-Indonesia/css/stylesheet

From 2014.igem.org

(Difference between revisions)
Line 157: Line 157:
/* -------------------- Navigation Bar ----------------------- */
/* -------------------- Navigation Bar ----------------------- */
-
#navigationblock {
+
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
-
background-color: red;  
+
 
-
position: fixed;  
+
.nav-menu-first {
-
bottom: 0px;
+
  position: fixed;
-
width: 965px;  
+
  display: block;
-
height: 60px;  
+
  z-index: 50;
-
overflow: hidden;  
+
  top: 0;
-
font-family: Calibri, Arial;
+
  height: 40px;
-
margin: 0px auto;  
+
  left: 0;
-
padding: 0px;  
+
  right: 0;
-
z-index: 1000;  
+
  background: white;
-
border-bottom: 2px solid #000000;
+
}
 +
.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;
}
}
-
#navigationbar {
+
#ui-logo{
-
position: absolute;  
+
  width: 48px;
-
left: 0px;  
+
}
-
bottom: 0px
+
#igem-logo{ 
-
font-size: 16px;  
+
  width:55px;
-
font-weight: 100;  
+
}
-
color: black;
+
#ui-logo img, #igem-logo img, {
-
}
+
  background-color: rgb(46,43,52);
-
+
  margin-top: 8px;
-
#navigationbar > li {display:block; list-style-type:none; float:left; width:75px; height:30px; text-align:center; }
+
  margin-bottom: 2px;
 +
}
 +
#ui-logo:hover img {
 +
  background-color: #7b7b7b;
 +
}
 +
#igem-logo:hover img {
 +
  background-color: #7b7b7b;
 +
}
-
.Navbar_Item{background-color:transparent;}
+
ul#nav {
-
.Navbar_Item a {color:black; text-decoration:none;}
+
    display: block;
-
.Navbar_Item > ul {display:none; width:900px; height:80px; text-align:center; color:black; z-index:1100; }
+
    float: left;
-
.Navbar_Item > ul > li {float:left; list-style:none; text-align:center; background-color:transparent; position:relative; top:10px; padding:0 10px;}
+
    padding: 0;
-
.Navbar_Item:hover{ border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
+
    margin: 0;
-
.Navbar_Item:hover > ul{zoom:1; display:block;}
+
    list-style: none;
-
.Navbar_Item:hover >a {color:#D00000; background-color:#fafaf8;}
+
    height: 40px;
-
.Navbar_Item > ul > li:hover {border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
+
    width: 860px;
-
.Navbar_Item > ul > li:hover >a {color:#D00000}
+
    background: none;
-
.BackgroundofSublist{position:absolute; left:-1000px; width:2000px; height:80px; background-color:#ffffff; opacity:0;}
+
    z-index: 100;
-
 
+
    /*font-family: 'PT Sans Narrow', sans-serif;*/
-
 
+
    font-family: 'Archivo Narrow', sans-serif;
-
#Home_Sublist{position:relative; top:0px; left:-50px;}
+
}
-
#Team_Sublist{position:relative; top:0px; left:-110px;}
+
ul#nav a {
-
#Project_Sublist{position:relative; top:0px; left:-180px;}
+
  display: block;
-
#Model_Sublist{position:relative; top:0px; left:-140px;}
+
  top: 0;
-
#DataPage_Sublist{position:relative; top:0px; left:-60px;}
+
  bottom: 0;
-
#Safety_Sublist{position:relative; top:0px; left:-180px;}
+
}
-
#HumanPractice_Sublist{position:relative; top:0px; left:-470px;}
+
ul#nav ul {
-
 
+
    margin: 0;
-
#igem-logo {
+
    padding: 0;
-
position: absolute;  
+
    list-style: none;
-
top: 30px;  
+
    background: transparent;
-
left: 1090px;
+
    z-index: 100;
-
height:80px;
+
}
-
}
+
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,

  1. 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 */

  1. p-logo,
  2. search-controls,

.firstHeading { 

   display: none;

}

h1, h2, h3, h4, h5, h6 { color: #f83031; }

/* REMOVE DEFAULT TOP HEADER */

  1. 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;

}

  1. top-section:hover { 
   background: #ffffff;

}

/* EDIT AND USER MENU */

  1. menubar { 
   top: 0 !important;
   font-size: 0.7em;

}

  1. menubar li,
  2. menubar li a:link { 
   text-transform: uppercase;

}

/* Highlight with background colour on hover */

  1. top-section:hover #menubar li a { 
   color: #e80607;

}

  1. menubar li a:link,
  2. menubar li a:visited { 
   color: #ffffff;
   background-color: transparent;

}

  1. menubar li a:hover,
  2. menubar li a:focus { 
   color: #e80607;
   text-decoration: none;

}


/* EDIT */

  1. menubar.left-menu{

}

  1. menubar.left-menu:hover { 
   background-color: transparent;

}

/* USER */

  1. menubar.right-menu {

}


/* CHANGING WHITE BACKGROUND */

  1. 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 */

  1. footer-box{display:none;}
  2. catlinks{display:none;}


/* -------------------------- Header-------------------------- */

  1. 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;

}

  1. 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;

}

  1. ui-logo{ 
  width: 48px;

}

  1. igem-logo{ 
  width:55px;

}

  1. ui-logo img, #igem-logo img, { 
 background-color: rgb(46,43,52);
 margin-top: 8px;
 margin-bottom: 2px;

}

  1. ui-logo:hover img { 
 background-color: #7b7b7b;

}

  1. 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);

}

  1. 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;

}

  1. 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;

}

  1. nav li:hover .navmenubkg2 { 
   display:block;

}

  1. 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 ----------------------- */

  1. main-content {

background-color: green; width: 965px; height: auto; margin: 0px auto; }

  1. BackToTop,
  2. BackToTop:link,
  3. BackToTop:visited { 
   position: fixed;
   bottom: 5px;
   right: 5px;
   text-decoration: none;
   color: #55b909;

}

  1. BackToTop:hover { 
   color: #81b909;

}

Retrieved from "http://2014.igem.org/Team:UI-Indonesia/css/stylesheet"