Team:TU-Eindhoven/Style

From 2014.igem.org

(Difference between revisions)
 
(One intermediate revision not shown)
Line 64: Line 64:
/* TU-Eindhoven Style */
/* TU-Eindhoven Style */
-
/*
 
-
Template Name: School Education
 
-
File: Navigation CSS
 
-
Author: OS Templates
 
-
Author URI: http://www.os-templates.com/
 
-
Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
 
-
*/
 
-
#header #topnav{
+
article, aside, details, figcaption, figure,  
-
display:block;
+
footer, header, hgroup, menu, nav, section {
-
float:right;
+
  display: none;
-
width:650px;
+
}
-
margin:30px 0 0 0;
+
-
padding:0;
+
-
font-size:13px;
+
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
-
text-align:right;
+
-
}
+
-
+
-
#header ul{
+
-
margin:0;
+
-
padding:0;
+
-
list-style:none;
+
-
}
+
-
#header li{
+
body {
-
display:inline;
+
  font-family: 'Noto Sans', sans-serif;
-
margin-right:35px;
+
  background: #dfff9f;
-
}
+
}
 +
 
 +
ol, ul {
 +
  list-style: none;
 +
}
 +
 
 +
#navpanel {
 +
  height:75px;
 +
  width:975px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%); 
 +
  border-bottom-right-radius: 8px;
 +
  border-bottom-left-radius: 8px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  margin-top: 0pt;
 +
}
 +
 
 +
#header {
 +
  height: 200px;
 +
  width: 100%;
 +
  border-bottom: 2px solid black;
 +
  background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");
 +
}
 +
 +
.menu1 {
 +
  height:75px;
 +
  width:200px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #00C800));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #00C800 25%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #00C800 25%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #00C800 25%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #00C800 25%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
 +
  float:left;
 +
  transition:all .2s ease-in-out 0s;
 +
  border-bottom-right-radius: 8px;
 +
  border-bottom-left-radius: 8px;
 +
}
 +
 +
.menu2 {
 +
  height:75px;
 +
  width:200px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #009600));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #009600 25%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #009600 25%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #009600 25%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #009600 25%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #009600 25%);
 +
  float:left;
 +
  position:relative;
 +
  left:-15px;
 +
  transition:all .2s ease-in-out 0s;
 +
  border-bottom-right-radius: 8px;
 +
  border-bottom-left-radius: 8px;
 +
}
 +
 +
.menu3 {
 +
  height:75px;
 +
  width:200px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #006400));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 25%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 25%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 25%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 25%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #006400 25%);
 +
  float:left;
 +
  position:relative;
 +
  left:-30px;
 +
  transition:all .2s ease-in-out 0s;
 +
  border-bottom-right-radius: 8px;
 +
  border-bottom-left-radius: 8px;
 +
}
 +
 +
.menu4 {
 +
  height:75px;
 +
  width:200px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);
 +
  float:left;
 +
  position:relative;
 +
  left:-45px;
 +
  transition:all .2s ease-in-out 0s;
 +
  border-bottom-right-radius: 8px;
 +
  border-bottom-left-radius: 8px;
 +
}
-
#header li a:link, #header li a:visited, #header li a:hover{
+
a.p1 {
-
margin:0;
+
  font-size: 24px;
-
padding:0 3px 10px 3px;
+
  font-weight:bold;
-
color:#FFFFFF;
+
  color: rgba(255,255,255,.75);
-
background-color:#2D3134;
+
  text-decoration:none;
-
border-bottom:1px solid #2D3134;
+
  position:relative;
-
}
+
  top:30px;
 +
  left:30px;
 +
}
-
#header li a:hover, #header li.active a{
+
a.p2 {
-
color:#02ACEE;
+
  font-size:16px;
-
background-color:#2D3134;
+
  color: rgba(255,255,255,.75);
-
border-bottom-color:#02ACEE;
+
  text-decoration:none;
-
}
+
  position:relative;
 +
  top:60px;
 +
  left:45px;
 +
}
-
#header #topnav li.last{
+
#icons {
-
margin-right:0;
+
  position:absolute;
-
}
+
  bottom:10px;
 +
  left:10px;
 +
}
 +
 +
.menu1:hover {
 +
  width:300px;
 +
}
 +
 +
.menu2:hover {
 +
  width:300px;
 +
}
 +
 +
.menu3:hover {
 +
  width:300px;
 +
  height:150px;
 +
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
 +
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
 +
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 13%);
 +
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 13%);
 +
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 13%);
 +
  background-image: linear-gradient(to bottom, #000000 0%, #006400 13%);
 +
}
 +
 +
.menu4:hover {
 +
  width:300px;
 +
  border-bottom-right-radius: 8px;
 +
}
 +
 +
.menu1:hover .p1 {
 +
  color: white;
 +
}
-
/* ----------------------------------------------Column Navigation-------------------------------------*/
+
.menu2:hover .p1 {
 +
  color: white;
 +
}
 +
 +
.menu3:hover a.p1 {
 +
  color: white;
 +
}
 +
 +
.menu4:hover a.p1 {
 +
  color: white;
 +
}
 +
 +
.menu3 ul {
 +
  display:none;
 +
}
-
#column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;}
+
.menu3:hover ul {
 +
  display:inline;
 +
  list-style:none;
 +
}
 +
 +
.menu3 ul li a.p2:hover{
 +
  color: white;
 +
}
-
#column .subnav h2{
+
#textcontent {
-
margin:0 0 20px 0;
+
  height:relative;
-
padding:0 0 14px 0;
+
  width:975px;
-
font-size:20px;
+
  border-radius:10px;
-
font-weight:normal;
+
  margin-left:auto;
-
font-family:Georgia, "Times New Roman", Times, serif;
+
  margin-right:auto;
-
color:#666666;
+
  margin-top:50px;
-
background-color:#F9F9F9;
+
  margin-bottom:75px;
-
line-height:normal;
+
  box-shadow:10px 10px 10px #888888;
-
border-bottom:1px dotted #666666;
+
  background:rgba(255,255,255,1);
-
}
+
}  
-
#column .subnav ul{
+
p.text {
-
margin:0;
+
  padding:0px 25px 25px 25px;
-
padding:0;
+
  text-align:justify;
-
list-style:none;
+
}
-
}
+
-
#column .subnav li{
+
p.title{
-
margin:0 0 3px 0;
+
  padding:25px 25px 10px 25px;
-
padding:0;
+
  font-size:50px;
-
}
+
  font-weight:900;
 +
  color:#003200;
 +
}
-
#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}
+
p.subtitle{
 +
  padding:5px 25px 5px 25px;
 +
  font-size:30px;
 +
  font-weight:900;
 +
  color:#006400;
 +
}
-
#column .subnav a{
+
#footerbar {
-
display:block;
+
  height:15px;
-
margin:0;
+
  width:115px;
-
padding:5px 10px 5px 20px;
+
  background:transparant;
-
color:#777777;
+
  margin-left:auto;
-
background:url("../images/blue_file.gif") no-repeat 10px center #F9F9F9;
+
  margin-right:auto;
-
text-decoration:none;
+
}
-
border-bottom:1px dotted #666666;
+
-
}
+
-
#column .subnav a:hover{color:#02ACEE; background-color:#F9F9F9;}
+
.foot {
 +
  color:rgba(0,0,0,0.35);
 +
  font-size: 8pt;
 +
  margin-top:-1px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  position:fixed;
 +
  bottom:0px;
 +
}
-
#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("../images/black_file.gif") no-repeat #F9F9F9;}
+
.projectimage {
-
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
+
  position:relative;
-
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
+
  left:137px;
-
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
+
  right:137px;
-
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}
+
}

Latest revision as of 00:13, 5 July 2014

/* Removing iGEM style */

  1. searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
  display: none;

}

  1. content { 
  height: 200px;
  width: 100%;
  border: none;
  padding: 0px;

}


/* Customizing standard iGEM navigation panel */

  1. top-section{ 
  height: 18px;
  width: 100%;
  border: none;
  border-top: none;

}

  1. menubar { 
  display: table-cell;
  height: 30px;
  font-size: 12pt;
  position: fixed;
  background:black;

}

  1. menubar.left-menu { 
  width: 100%;
  margin-left:-12px;

}

  1. menubar.right-menu { 
  text-align: right;

}

  1. menubar.left-menu a { 
  border: none;
  color: #454545;

}

  1. menubar.right-menu a { 
  border: none;
  color: #454545;

}

  1. menubar * { 
  background: transparent;

}

  1. menubar * a:hover{ 
  color: green;
  text-decoration: none;

}

  1. menubar > ul > li:last-child { 
  display: none;

}


/* TU-Eindhoven Style */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

  display: none;

}

body { 

  font-family: 'Noto Sans', sans-serif;
  background: #dfff9f;

}

ol, ul { 

  list-style: none;

}

  1. navpanel { 
  height:75px;
  width:975px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);   
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 0pt;

}

  1. header { 
  height: 200px;
  width: 100%;
  border-bottom: 2px solid black;
  background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");

}

.menu1 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #00C800));
  background-image: -o-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
  float:left;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu2 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #009600));
  background-image: -o-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #009600 25%);
  float:left;
  position:relative;
  left:-15px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu3 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 25%);
  float:left;
  position:relative;
  left:-30px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu4 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);
  float:left;
  position:relative;
  left:-45px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

a.p1 { 

  font-size: 24px;
  font-weight:bold;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:30px;
  left:30px;

}

a.p2 { 

  font-size:16px;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:60px;
  left:45px;

}

  1. icons { 
  position:absolute;
  bottom:10px;
  left:10px;

}

.menu1:hover { 

  width:300px;

}

.menu2:hover { 

  width:300px;

}

.menu3:hover { 

  width:300px;
  height:150px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 13%);

}

.menu4:hover { 

  width:300px;
  border-bottom-right-radius: 8px;

}

.menu1:hover .p1 { 

  color: white;

}

.menu2:hover .p1 { 

  color: white;

}

.menu3:hover a.p1 { 

  color: white;

}

.menu4:hover a.p1 { 

  color: white;

}

.menu3 ul { 

  display:none;

}

.menu3:hover ul { 

  display:inline;
  list-style:none;

}

.menu3 ul li a.p2:hover{ 

  color: white;

}

  1. textcontent { 
  height:relative;
  width:975px;
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  margin-bottom:75px;
  box-shadow:10px 10px 10px #888888;								
  background:rgba(255,255,255,1);

}

p.text { 

  padding:0px 25px 25px 25px;
  text-align:justify;

}

p.title{ 

  padding:25px 25px 10px 25px;
  font-size:50px;
  font-weight:900;
  color:#003200;

}

p.subtitle{ 

  padding:5px 25px 5px 25px;
  font-size:30px;
  font-weight:900;
  color:#006400;

}

  1. footerbar { 
  height:15px;
  width:115px;
  background:transparant;
  margin-left:auto;
  margin-right:auto;

}

.foot { 

  color:rgba(0,0,0,0.35);
  font-size: 8pt;
  margin-top:-1px;
  margin-left:auto;
  margin-right:auto;
  position:fixed;
  bottom:0px;

}

.projectimage { 

  position:relative;
  left:137px;
  right:137px;

}

Retrieved from "http://2014.igem.org/Team:TU-Eindhoven/Style"