Template:CSS/Delft2014 main

From 2014.igem.org

(Difference between revisions)
 
(183 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
     display: none;
     display: none;
Line 13: Line 12:
     background-color: #383838;
     background-color: #383838;
     border: 0 none;
     border: 0 none;
-
     height: 14px;
+
     height: 20px;
     z-index: 100;
     z-index: 100;
     top: 0;
     top: 0;
-
     /*position: fixed;*/
+
     left: 50%;
-
    width: 100%;
+
     position: fixed;
-
    /*left: 50%; */
+
     margin-left: -488px;
-
     margin-left: auto;
+
-
     margin-right: auto;
+
-
 
+
-
}
+
-
 
+
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
-
    background-color: #383838;
+
-
    height: 14px;
+
     display: block;
     display: block;
-
    z-index: 10;
 
-
    position: fixed;
 
-
    width: 100%;
 
-
    top: 0;
 
}
}
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
     color: #727272;  
+
     color: #fff;  
     text-decoration: none;  
     text-decoration: none;  
     background-color: transparent;
     background-color: transparent;
Line 63: Line 50:
     height: 100%;
     height: 100%;
     background-color: white;
     background-color: white;
-
     font-size: 12px;
+
     font-size: 14px;
 +
    font-color: #161616;
}
}
-
a.anchor{
 
-
    display: block;
 
-
    position: relative;
 
-
    top: -80px;
 
-
    visibility: hidden;
 
-
}
 
-
 
-
h2 {
 
-
    font-size: 20px;
 
-
}
 
-
 
-
.tableofcontents{
 
-
    border: 1px solid #898989;
 
-
    background-color: #f5f5f5;
 
-
    display: inline-block;
 
-
    padding: 5px;
 
-
    margin: 25px;
 
-
}
 
-
 
-
table, th, td {
 
-
    border: 1px solid black;
 
-
    border-collapse: collapse;
 
-
}
 
-
 
-
th, td {
 
-
    padding: 5px;
 
-
    text-align: left;
 
-
}
 
-
 
-
caption {
 
-
    text-align:left;
 
-
}
 
-
 
-
 
-
 
-
/*___________________________________________________*/
 
-
/*---NAV BAR-------------*/
 
-
#menu, #menu ul {
 
-
    padding: 0;
 
-
    margin: 0;
 
-
    list-style: none;
 
-
    background: #DCFFDC;
 
-
}
 
-
 
-
#menu end{
 
-
    display:block;
 
-
    width: 100%;
 
-
    height: 30px;
 
-
    margin-bottom: 30px; 
 
-
}
 
-
 
-
#menu top{
 
-
    font-weight: bold;
 
-
    font-size: 12.5px;
 
-
    text-align: center;
 
-
}
 
-
 
 
-
#menu li {
 
-
    float: left;
 
-
    height: 30px;
 
-
    background-color: #DCFFDC;
 
-
    margin-bottom: 30px;
 
-
    width: 114px;
 
-
}
 
-
 
-
#menu a {
 
-
    display: block;
 
-
    padding: 5px;
 
-
    color: #333333;
 
-
    border-style: solid;
 
-
    border-color: transparent;
 
-
    border-right-color: white;
 
-
    border-width: 1px;
 
-
    border-right-width: 2px;
 
-
}
 
-
 
-
#menu li ul {
 
-
    position: absolute;
 
-
    left: -999em;
 
-
    width: 100px;
 
-
    text-align: left;
 
-
    opacity: 0.85;
 
-
    padding-left: 10px; 
 
-
}
 
-
 
-
#menu li:hover ul, #menu li ul:hover {
 
-
    left:auto;
 
-
}
 
Line 168: Line 68:
     background-color: transparent;  
     background-color: transparent;  
     margin-top: 0px;  
     margin-top: 0px;  
 +
}
 +
 +
/* unvisited link */
 +
a:link {
 +
    color: #0101DF;
 +
}
 +
 +
/* visited link */
 +
a:visited {
 +
    color: #0101DF;
 +
}
 +
 +
/* mouse over link */
 +
a:hover {
 +
    color: #0101DF
 +
    font-style: oblique;
}
}
Line 175: Line 91:
}
}
-
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
+
a.anchor{
-
 
+
    display: block;  
-
h2 {
+
    position: relative;  
-
     padding-top: 20px;
+
     top: -80px;  
-
    font-size: xx-large;
+
     visibility: hidden;
-
     line-height: normal;
+
}
}
 +
#main {
#main {
Line 196: Line 112:
     width: 960px;
     width: 960px;
}
}
-
   
+
 
 +
body {
 +
    font-family: "Calibri";   
 +
}
 +
h2 {
 +
    font-size: 2.0em;
 +
}
 +
h3 {
 +
    font-size: 1.5em;
 +
}
 +
h4 {
 +
    font-size: 1.3em;
 +
}
 +
p {
 +
    font-size: 0.9em;
 +
}
 +
 
 +
li {
 +
    font-size: 16px;
 +
}
 +
 
 +
caption {
 +
    font-size: 0.8em;
 +
    font-style: italic;
 +
    text-align:left;
 +
}
 +
figcaption {
 +
    font-size: 0.8em;
 +
    font-style: italic;
 +
    text-align:left;
 +
}
 +
 
 +
.hidden{
 +
display:none !important;
 +
}
 +
 
 +
 
 +
.tableofcontents{
 +
  border-width: 1px;
 +
  border-style: solid;
 +
  border-color: #878787;
 +
  background-color: #F2F1F1;
 +
  display: inline-block;
 +
  align="left";
 +
  padding: 15px;
 +
  margin: 25px;
 +
}
 +
table, th, td {
 +
    border: 1px solid black;
 +
    border-collapse: collapse;
 +
}
 +
th, td {
 +
    padding: 5px;
 +
    text-align: left;
 +
}
 +
 
 +
.moduleImage {
 +
    float: left;
 +
    margin-left: 20px;
 +
    margin-bottom: 20px;   
 +
}
 +
 
 +
.landmine {
 +
    width: 463px;
 +
    height: 351px;
 +
}
 +
 
 +
 
 +
.electrontransport {
 +
    width: 386px;
 +
    height: 372px;
 +
}
 +
 
 +
.curli {
 +
    width: 401px;
 +
    height: 304px;
 +
}
/*---HEADER SYTLING---------*/
/*---HEADER SYTLING---------*/
Line 202: Line 194:
#header {
#header {
     height: 90px;
     height: 90px;
-
     background-image: url('https://static.igem.org/mediawiki/2014/4/47/Delft2014_Igem_banner.png' );
+
     background-image: url('https://static.igem.org/mediawiki/2014/8/83/TUDELFT2014_banner_new.png');
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: 0 0;
     background-position: 0 0;
Line 213: Line 205:
     height:140px;
     height:140px;
     left: 87.5%;
     left: 87.5%;
-
     z-index: 10;
+
     z-index: 510;
}
}
Line 246: Line 238:
#bottom-section{
#bottom-section{
     background-color: #DCFFDC;
     background-color: #DCFFDC;
-
     border: 0 none;
+
     border-top: 8px solid #54beaa;
-
    z-index: 100;
+
     margin-top: 30px;
-
/*  position: fixed; */
+
     padding: 10px;
-
    width: 100%;  
+
     font-size: 14px;
-
     margin-top: 40px;
+
     margin-bottom: 0;
-
     padding-top: 20px;
+
-
     padding-bottom: 20px;
+
-
     text-align: center;
+
-
    font-size: 12px;
+
}
}
/*___________________________________________________*/
/*___________________________________________________*/
/*--- Main Menu Styles -------------------*/
/*--- Main Menu Styles -------------------*/
-
.mega-menu ul, .mega-menu ul li {list-style: none;}
+
#nav {
-
.mega-menu ul {position: relative; padding: 0; margin: 0;}
+
    background-color: #dcffdc;
-
.mega-menu ul li ul {display: none;}
+
    width: 960px;
-
.mega-menu .sub {display: none;}
+
    margin-bottom: 20px;
-
.mega-menu .sub ul {display: block;}
+
}
-
#mega-menu-1 {
+
#nav ul {
-
font: normal 13px Arial, sans-serif;  
+
    margin: 0;
-
list-style: none;  
+
    padding: 0;
-
position: relative;  
+
    list-style: none;
-
padding: 0;  
+
    font: normal 17px Arial, sans-serif;
-
margin: 0;
+
    color: #383838;
 +
    z-index: 500;
}
}
-
#mega-menu-1 .sub ul {
+
 
-
display: block;
+
#nav ul li {
 +
    display: block;
 +
    position: relative;
 +
    float: left;
}
}
-
#mega-menu-1 {
+
 
-
background: #222;
+
#nav li ul {
-
width: 100%;
+
    display: none;
-
height: 40px;
+
-
position: relative;
+
}
}
-
#mega-menu-1 li {
+
 
-
float: left;
+
#nav ul li:hover ul {
-
margin: 0;
+
    display: block;
-
padding: 0;  
+
    position: absolute;
-
font-weight: bold;
+
}
}
-
#mega-menu-1 li a {
+
 
-
float: left;  
+
#nav li.main-menu {
-
display: block;
+
    height: 30px;
-
color: #fff;
+
    border: none;
-
padding: 12px 25px;
+
-
background: #222;
+
-
text-decoration: none;
+
}
}
-
#mega-menu-1 li.mega-hover a, #mega-menu-1 li.mega-hover a:hover {
+
 
-
background: #CCC;  
+
#nav li.main-menu:hover > a {
-
color: #000;
+
    background-color: #fff;
 +
    border-left: 8px solid #54beaa;
 +
    border-right: 8px solid #54beaa;
}
}
-
#mega-menu-1 li a:hover {
+
 
-
background: #999;  
+
#nav li.main-menu > a {
-
color: #000;
+
    display: block;
 +
    text-decoration: none;
 +
    padding: 6px 15px 3px 15px;
 +
    background: #dcffdc;
 +
    margin-left: 1px;
 +
    white-space: nowrap;
 +
    width: auto;
 +
    color: #383838;
 +
    height: 22px;
 +
    border-left: 8px solid #dcffdc;   
 +
    border-right: 8px solid #dcffdc;  
}
}
-
#mega-menu-1 li .sub-container {
+
 
-
position: absolute;
+
#nav li.icon {
 +
    width: 30px;
 +
    padding-top: 4px;
 +
    padding-bottom: 3px;
 +
    padding-left: 10px;
}
}
-
#mega-menu-1 li .sub {
+
 
-
background: #efefef;  
+
#nav li.sub-menu a {
-
padding: 15px;  
+
    display: block;
-
border: 1px solid #ccc;
+
    width: 260px;
 +
    height: auto;
 +
    padding: 4px;
 +
    background-color: white;
 +
    float: none;   
 +
    margin-bottom: -2px;
 +
    margin-left: 1px;
 +
    border-left: 8px solid #dcffdc;   
 +
    border-right: 8px solid #dcffdc; 
 +
    color: #383838;
}
}
-
#mega-menu-1 li .sub .row {
+
 
-
width: 100%;
+
#nav li.sub-menu:last-child a {
-
overflow: hidden;
+
    border-bottom: 8px solid #dcffdc;  
-
clear: both;
+
}
}
-
#mega-menu-1 li .sub li {
+
 
-
list-style: none;
+
#nav li.sub-menu .link {
-
float: none;
+
    font-weight: bold;
-
width: 170px;  
+
    font-size: 16px;
-
font-size: 1em;
+
-
font-weight: normal;
+
}
}
-
#mega-menu-1 li .sub li.mega-hdr {
+
 
-
margin: 0 10px 10px 0;
+
#nav li.sub-menu p {
-
float: left;
+
    font-size: 12px;
}
}
-
#mega-menu-1 li .sub li.mega-hdr.last {
+
 
-
margin-right: 0;
+
#nav li.sub-menu a:hover {
 +
    cursor: pointer;
 +
    background-color: #dcffdc;
 +
    border-left: 8px solid #54beaa;
 +
    border-right: 8px solid #54beaa;
 +
    text-decoration: none;
}
}
-
#mega-menu-1 li .sub a {
+
 
-
background: none;
+
#nav li.sub-menu:last-child a:hover {
-
color: #111;
+
    border-bottom: 8px solid #54beaa;  
-
padding: 7px 10px;
+
-
display: block;
+
-
float: none;
+
-
font-size: 0.9em;
+
}
}
-
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a {
+
 
-
padding: 5px 15px;
+
#nav li.sub-menu a:hover .link {
-
margin-bottom: 5px;
+
    text-decoration: underline;
-
background: #6B6B6B;
+
-
text-transform: uppercase;
+
-
font-weight: bold;
+
-
color: #fff;
+
}
}
-
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover {
+
 
-
color: #000;
+
#nav li.sub-menu a:hover .desc {
-
}
+
    text-decoration: none;
-
#mega-menu-1 .sub li.mega-hdr li a {
+
-
padding: 4px 5px;
+
-
font-weight: normal;
+
-
}
+
-
#mega-menu-1 .sub li.mega-hdr li a:hover {
+
-
color: #a32403;
+
-
background: #efefef;
+
-
}
+
-
#mega-menu-1 .sub ul li {
+
-
padding-right: 0;
+
-
}
+
-
#mega-menu-1 li .sub-container.non-mega .sub {
+
-
padding: 10px;
+
-
}
+
-
#mega-menu-1 li .sub-container.non-mega li {
+
-
padding: 0;
+
-
width: 190px;
+
-
margin: 0;
+
-
}
+
-
#mega-menu-1 li .sub-container.non-mega li a {
+
-
padding: 7px 5px 7px 22px;
+
}
}
-
#mega-menu-1 li .sub-container.non-mega li a:hover {
 
-
color: #a32403;
 
-
background: #efefef;
 
-
}
 
-
 
</style>
</style>
</html>
</html>

Latest revision as of 18:00, 17 October 2014

Retrieved from "http://2014.igem.org/Template:CSS/Delft2014_main"