Template:CSS/Delft2014 main
From 2014.igem.org
(Difference between revisions)
Dschmieden (Talk | contribs) |
Sim.castle (Talk | contribs) |
||
(185 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: | + | height: 20px; |
z-index: 100; | z-index: 100; | ||
top: 0; | top: 0; | ||
- | + | left: 50%; | |
- | + | position: fixed; | |
- | + | margin-left: -488px; | |
- | + | ||
- | margin- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
#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: # | + | 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: | + | font-size: 14px; |
+ | font-color: #161616; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
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; | + | a.anchor{ |
- | + | display: block; | |
- | + | position: relative; | |
- | + | top: -80px; | |
- | + | visibility: hidden; | |
- | + | ||
} | } | ||
+ | |||
#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/ | + | 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: | + | z-index: 510; |
} | } | ||
Line 220: | Line 212: | ||
#modal { | #modal { | ||
- | |||
width: 50px; | width: 50px; | ||
position: fixed; | position: fixed; | ||
Line 227: | Line 218: | ||
margin-top: -100px; | margin-top: -100px; | ||
z-index: 11; | z-index: 11; | ||
+ | } | ||
+ | |||
+ | #modal img { | ||
+ | margin-bottom: 4px; | ||
} | } | ||
Line 243: | Line 238: | ||
#bottom-section{ | #bottom-section{ | ||
background-color: #DCFFDC; | background-color: #DCFFDC; | ||
- | border | + | border-top: 8px solid #54beaa; |
- | + | margin-top: 30px; | |
- | + | padding: 10px; | |
- | + | font-size: 14px; | |
- | margin-top: | + | margin-bottom: 0; |
- | padding | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
/*___________________________________________________*/ | /*___________________________________________________*/ | ||
- | /*--- | + | /*--- Main Menu Styles -------------------*/ |
+ | #nav { | ||
+ | background-color: #dcffdc; | ||
+ | width: 960px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | #nav ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | font: normal 17px Arial, sans-serif; | ||
+ | color: #383838; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | #nav ul li { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | } | ||
+ | #nav li ul { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #nav ul li:hover ul { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #nav li.main-menu { | ||
+ | height: 30px; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #nav li.main-menu:hover > a { | ||
+ | background-color: #fff; | ||
+ | border-left: 8px solid #54beaa; | ||
+ | border-right: 8px solid #54beaa; | ||
+ | } | ||
+ | |||
+ | #nav li.main-menu > a { | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | #nav li.icon { | ||
+ | width: 30px; | ||
+ | padding-top: 4px; | ||
+ | padding-bottom: 3px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu a { | ||
+ | display: block; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu:last-child a { | ||
+ | border-bottom: 8px solid #dcffdc; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu .link { | ||
+ | font-weight: bold; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu p { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu a:hover { | ||
+ | cursor: pointer; | ||
+ | background-color: #dcffdc; | ||
+ | border-left: 8px solid #54beaa; | ||
+ | border-right: 8px solid #54beaa; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu:last-child a:hover { | ||
+ | border-bottom: 8px solid #54beaa; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu a:hover .link { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | #nav li.sub-menu a:hover .desc { | ||
+ | text-decoration: none; | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 18:00, 17 October 2014