"
Team:TU-Delft/Templates/Style
From 2013.igem.org
(Difference between revisions)
m |
|||
| (281 intermediate revisions not shown) | |||
| Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
@charset "UTF-8"; | @charset "UTF-8"; | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
#searchInput { | #searchInput { | ||
| Line 29: | Line 13: | ||
#content { | #content { | ||
border: none;} | border: none;} | ||
| + | #top-section{ | ||
| + | height: 20px !important; | ||
| + | border: none !important; | ||
| + | border-top: none; | ||
| + | } | ||
| + | #menubar { | ||
| + | display: table-cell; | ||
| + | background: transparent; | ||
| + | } | ||
| - | + | #menubar.left-menu { | |
| - | + | width: 100%; | |
| - | + | } | |
| - | + | ||
| - | + | #menubar.right-menu { | |
| - | + | text-align: right; | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | . | + | |
| - | + | ||
} | } | ||
| - | + | ||
| - | + | #menubar * { | |
| + | color: transparent !important; | ||
| + | background: transparent !important; | ||
} | } | ||
| - | *{ | + | #top-section:hover #menubar * { |
| - | + | color: grey !important; | |
| - | + | ||
| - | + | ||
} | } | ||
| + | |||
| + | #top-section:hover #menubar.left-menu { | ||
| + | background: rgba(255, 255, 255, 0.75) !important; | ||
| + | } | ||
| + | |||
html { | html { | ||
| + | |||
| + | |||
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
| - | background: | + | background:transparent; |
| - | + | ||
border:none; | border:none; | ||
| - | + | margin:0; | |
| - | + | ||
} | } | ||
| + | |||
body { | body { | ||
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
| - | / | + | background:url("https://static.igem.org/mediawiki/2013/3/32/BackroundDelft.jpg"); |
| - | + | background-repeat:no-repeat; | |
| - | padding: | + | background-size: 100% 100%; |
| + | background-size: auto, cover; | ||
| + | background-position:absolute; | ||
| + | border:none; | ||
| + | padding-top:20px; | ||
| + | padding-right:0px; | ||
| + | padding-bottom:20px; | ||
| + | padding-left:0px; | ||
| + | font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; | ||
| + | font-size: small; | ||
z-index:800; | z-index:800; | ||
} | } | ||
#contentbox { | #contentbox { | ||
| - | width: | + | width: 85%; |
position: relative; | position: relative; | ||
background:white; | background:white; | ||
| - | width: | + | width:850px; |
margin: -10px auto 0 auto; | margin: -10px auto 0 auto; | ||
padding:20px 50px 50px 25px; | padding:20px 50px 50px 25px; | ||
| Line 120: | Line 121: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| + | #frog { | ||
| + | position:absolute; | ||
| + | top:350px; left:-260px; | ||
| + | } | ||
| + | #logo { | ||
| + | position:absolute; | ||
| + | top:20px; left:-150px; | ||
| + | } | ||
| - | + | /* HERE CHANGE THE HEADER */ | |
| - | + | ||
| - | + | #header{ | |
| + | background:url("https://static.igem.org/mediawiki/2013/9/97/Horizontal-banner-2.jpg"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-position: left bottom; | ||
| + | |||
| + | background-size: 100% 100%; | ||
| + | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | ||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */ | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */ | ||
| - | + | width: 100%; | |
| - | + | height: 150px; | |
/*border-top: 1px solid #660000; | /*border-top: 1px solid #660000; | ||
border-bottom: 1px solid #660000;*/ | border-bottom: 1px solid #660000;*/ | ||
| Line 152: | Line 163: | ||
top:800px; right:-187px; | top:800px; right:-187px; | ||
} | } | ||
| - | |||
| Line 164: | Line 174: | ||
#menu { | #menu { | ||
width: 100%; | width: 100%; | ||
| - | + | padding-top:6px; | |
| + | padding-bottom:6px; | ||
border: 1px solid #222; | border: 1px solid #222; | ||
background-color: #111; | background-color: #111; | ||
| Line 171: | Line 182: | ||
box-shadow: 0 1px 1px #777; | box-shadow: 0 1px 1px #777; | ||
margin-top: 0px; | margin-top: 0px; | ||
| - | margin-right: | + | margin-right:0px; |
} | } | ||
#menu:before, | #menu:before, | ||
| Line 195: | Line 206: | ||
#menu a { | #menu a { | ||
| - | + | ||
| - | + | ||
padding-top:10px; | padding-top:10px; | ||
padding-bottom:10px; | padding-bottom:10px; | ||
| + | padding-right:12px; | ||
| + | padding-left:12px; | ||
width:100%; | width:100%; | ||
| - | float: left; | + | /*float: left;*/ |
| - | width: | + | width: 100px; |
| + | |||
color: #999; | color: #999; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
| - | font: bold | + | font: bold 11px Arial, Helvetica; |
text-decoration: none; | text-decoration: none; | ||
text-shadow: 0 1px 0 #000; | text-shadow: 0 1px 0 #000; | ||
| Line 210: | Line 223: | ||
#menu li:hover > a { | #menu li:hover > a { | ||
| + | background-color: #0186ba; | ||
| + | background-image: linear-gradient(#04acec, #0186ba); | ||
color: #fafafa; | color: #fafafa; | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
} | } | ||
| Line 236: | Line 233: | ||
*html #menu li a:hover { /* IE6 only */ | *html #menu li a:hover { /* IE6 only */ | ||
| + | |||
color: #fafafa; | color: #fafafa; | ||
} | } | ||
| Line 246: | Line 244: | ||
visibility: hidden; | visibility: hidden; | ||
position: absolute; | position: absolute; | ||
| - | top: | + | top: 28px; |
left: 0; | left: 0; | ||
z-index: 1; | z-index: 1; | ||
| Line 252: | Line 250: | ||
background: linear-gradient(#444, #111); | background: linear-gradient(#444, #111); | ||
box-shadow: 0 -1px 0 rgba(255,255,255,.3); | box-shadow: 0 -1px 0 rgba(255,255,255,.3); | ||
| - | border-radius: | + | border-radius: 4px; |
| - | + | transition: all .10s ease-in-out; | |
| + | |||
} | } | ||
| + | |||
#menu li:hover > ul { | #menu li:hover > ul { | ||
| Line 285: | Line 285: | ||
padding: 10px; | padding: 10px; | ||
| - | width: | + | width: 180px; |
_height: 10px; /*IE6 only*/ | _height: 10px; /*IE6 only*/ | ||
display: block; | display: block; | ||
| Line 296: | Line 296: | ||
background-color: #0186ba; | background-color: #0186ba; | ||
background-image: linear-gradient(#04acec, #0186ba); | background-image: linear-gradient(#04acec, #0186ba); | ||
| + | |||
} | } | ||
| Line 312: | Line 313: | ||
top: 0px; | top: 0px; | ||
right: 0px; | right: 0px; | ||
| + | } | ||
| + | |||
| + | #box { | ||
| + | border: 1px solid #888; | ||
| + | padding: 0px; | ||
| + | margin-bottom: 10px; | ||
| + | margin-left:40px; | ||
| + | margin-right:40px; | ||
| + | margin: 0 auto; | ||
| + | -moz-border-radius: 10px; | ||
| + | border-radius: 10px; | ||
| + | -moz-box-shadow: 0 0 8px #888; | ||
| + | -webkit-box-shadow: 0 0 8px #888; | ||
| + | box-shadow: 0 0 8px #888; | ||
| + | width:50%; | ||
} | } | ||
Latest revision as of 08:44, 2 October 2013
