Team:HIT-Harbin/header
From 2011.igem.org
(Difference between revisions)
Line 124: | Line 124: | ||
.team_intro th{ float:left;} | .team_intro th{ float:left;} | ||
/* ------Team END------ */ | /* ------Team END------ */ | ||
+ | .menu { | ||
+ | width:100%; | ||
+ | height:35px; | ||
+ | background_color:#0F67A1; | ||
+ | } | ||
+ | .menu ul{ | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | font-family:Arial; | ||
+ | } | ||
+ | .menu ul li{ | ||
+ | float: left; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | .menu ul li a{ | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Lobster); | ||
+ | @import url(pictos/pictos.css); | ||
+ | |||
+ | |||
+ | /* -------------- THE button -------------- */ | ||
+ | .button { | ||
+ | |||
+ | /* text */ | ||
+ | text-decoration: none; | ||
+ | font: 24px/1em 'Droid Sans', sans-serif; | ||
+ | font-weight: bold; | ||
+ | text-shadow: rgba(255,255,255,.5) 0 1px 0; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | user-select: none; | ||
+ | |||
+ | |||
+ | /* layout */ | ||
+ | padding: .5em .6em .4em .6em; | ||
+ | margin: .5em; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | |||
+ | -webkit-border-radius: 8px; | ||
+ | -moz-border-radius: 8px; | ||
+ | border-radius: 8px; | ||
+ | |||
+ | /* effects */ | ||
+ | border-top: 1px solid rgba(255,255,255,0.8); | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.1); | ||
+ | |||
+ | background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png); | ||
+ | background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png); | ||
+ | background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png); | ||
+ | |||
+ | -webkit-transition: background .2s ease-in-out; | ||
+ | -moz-transition: background .2s ease-in-out; | ||
+ | transition: background .2s ease-in-out; | ||
+ | |||
+ | /* color */ | ||
+ | color: hsl(0, 0%, 40%) !important; | ||
+ | background-color: hsl(0, 0%, 75%); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | |||
+ | /* -------------- button (tag) -------------- */ | ||
+ | |||
+ | button.button { | ||
+ | border-left: none; | ||
+ | border-right: none; | ||
+ | } | ||
+ | button.button:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------- icon -------------- */ | ||
+ | .button:before { | ||
+ | font: 1.2em/0 'Pictos', sans-serif; | ||
+ | content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */ | ||
+ | margin-right: 0.4em; | ||
+ | |||
+ | |||
+ | } | ||
+ | /* icon only */ | ||
+ | .icon { | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | text-indent: -999em; | ||
+ | } | ||
+ | .icon:before { | ||
+ | margin-right: 0; | ||
+ | display: block; | ||
+ | height: 0; | ||
+ | text-indent: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* -------------- colours -------------- */ | ||
+ | |||
+ | .button.orange { | ||
+ | color: hsl(39, 100%, 30%) !important; | ||
+ | background-color: hsl(39, 100%, 50%); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | .button.orange:hover { background-color: hsl(39, 100%, 65%); } | ||
+ | |||
+ | |||
+ | .button.blue { | ||
+ | color: hsl(208, 50%, 40%) !important; | ||
+ | background-color: hsl(208, 100%, 75%); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | .button.blue:hover { background-color: hsl(208, 100%, 83%); } | ||
+ | |||
+ | .button.green { | ||
+ | color: hsl(88, 70%, 30%) !important; | ||
+ | background-color: hsl(88, 70%, 60%); | ||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | .button.green:hover { background-color: hsl(88, 70%, 75%); } | ||
+ | |||
+ | .button.pink { | ||
+ | color: hsl(340, 100%, 30%) !important; | ||
+ | background-color: hsl(340, 100%, 75%); | ||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | .button.pink:hover { background-color: hsl(340, 100%, 83%); } | ||
+ | |||
+ | |||
+ | |||
+ | .button.transparent { | ||
+ | color: rgba(0,0,0,0.5) !important; | ||
+ | } | ||
+ | .button.transparent, .button.transparent:hover, .button.transparent:active { | ||
+ | background-color: transparent; | ||
+ | background-image: none; | ||
+ | } | ||
+ | .button.transparent:hover { | ||
+ | opacity: .9; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* -------------- States -------------- */ | ||
+ | |||
+ | .button:hover { | ||
+ | background-color: hsl(0, 0%, 83%); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .button:active { | ||
+ | background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | |||
+ | -webkit-transform: translateY(.2em); | ||
+ | -moz-transform: translateY(.2em); | ||
+ | transform: translateY(.2em); | ||
+ | } | ||
+ | |||
+ | .button:focus { | ||
+ | outline: none; | ||
+ | color: rgba(254,255,255,0.9) !important; | ||
+ | text-shadow: rgba(0,0,0,0.2) 0 1px 2px; | ||
+ | } | ||
+ | |||
+ | .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { | ||
+ | opacity: .5; | ||
+ | cursor: default; | ||
+ | color: rgba(0,0,0,0.2) !important; | ||
+ | text-shadow: none !important; | ||
+ | background-color: rgba(0,0,0,0.05); | ||
+ | background-image: none; | ||
+ | border-top: none; | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | |||
+ | -webkit-transform: translateY(5px); | ||
+ | -moz-transform: translateY(5px); | ||
+ | transform: translateY(5px); | ||
+ | } | ||
+ | |||
+ | /* -------------- Fonts -------------- */ | ||
+ | |||
+ | .serif { | ||
+ | font-family: 'Lobster', serif; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------- Sizes -------------- */ | ||
+ | |||
+ | .xs { font-size: 16px; } | ||
+ | .xl { font-size: 32px; } | ||
+ | |||
+ | |||
+ | /* -------------- Materials -------------- */ | ||
+ | |||
+ | .button.glossy:after, .button.glass:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 90%; | ||
+ | height: 60%; | ||
+ | top: 0; | ||
+ | left: 5%; | ||
+ | |||
+ | -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), | ||
+ | color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); | ||
+ | background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); | ||
+ | background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), | ||
+ | color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); | ||
+ | } | ||
+ | .button.glossy:active:after, | ||
+ | .button.glass:active:after, | ||
+ | .button.disabled:after, | ||
+ | .button[disabled]:after | ||
+ | { opacity: .6; } | ||
+ | |||
+ | .button.icon.glossy:after, | ||
+ | .button.icon.glass:after { height: 75% ; } | ||
+ | |||
+ | /* -------------- Glass + Transparent -------------- */ | ||
+ | .button.glass { | ||
+ | text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; | ||
+ | } | ||
+ | .button.glass:active { | ||
+ | text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------- Shapes -------------- */ | ||
+ | |||
+ | /* round */ | ||
+ | .round, .round.glossy:after, .round.glass:after { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 1em; | ||
+ | -moz-border-radius: 1em; | ||
+ | border-radius: 1em; | ||
+ | } | ||
+ | |||
+ | /* oval */ | ||
+ | .oval { | ||
+ | border-top: none; | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | -webkit-border-radius: 5em / 2em; | ||
+ | -moz-border-radius: 5em / 2em; | ||
+ | border-radius: 5em / 2em; | ||
+ | } | ||
+ | .oval.glossy:after, .oval.glass:after { | ||
+ | top: 5%; | ||
+ | -webkit-border-radius: 5em / 2em 2em 1em 1em; | ||
+ | -moz-border-radius: 5em / 2em 2em 1em 1em; | ||
+ | border-radius: 5em / 2em 2em 1em 1em; | ||
+ | } | ||
+ | .oval.icon { | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | -webkit-border-radius: 1.5em / 1em; | ||
+ | -moz-border-radius: 1.5em / 1em; | ||
+ | border-radius: 1.5em / 1em; | ||
+ | } | ||
+ | .oval.icon.glossy:after, .oval.icon.glass:after { | ||
+ | -webkit-border-radius: 1.5em / 1em; | ||
+ | -moz-border-radius: 1.5em / 1em; | ||
+ | border-radius: 1.5em / 1em; | ||
+ | } | ||
+ | |||
+ | /* brackets */ | ||
+ | .brackets, .brackets.glossy:after, .brackets.glass:after { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: .5em / 1em; | ||
+ | -moz-border-radius: .5em / 1em; | ||
+ | border-radius: .5em / 1em; | ||
+ | } | ||
+ | |||
+ | /* skew */ | ||
+ | .skew { | ||
+ | border-top: none; | ||
+ | padding-right: 1.2em; | ||
+ | padding-left: 0.8em; | ||
+ | -webkit-border-radius: 5em 1em / 5em 1em; | ||
+ | -moz-border-radius: 5em 1em / 5em 1em; | ||
+ | border-radius: 5em 1em / 5em 1em; | ||
+ | } | ||
+ | .skew.glossy:after, .skew.glass:after { | ||
+ | left: 10%; | ||
+ | -webkit-border-radius: 7em 1em / 5em 1em; | ||
+ | -moz-border-radius: 7em 1em / 5em 1em; | ||
+ | border-radius: 7em 1em / 5em 1em; | ||
+ | } | ||
+ | .skew.icon { | ||
+ | padding-right: .9em; | ||
+ | padding-left: .8em; | ||
+ | } | ||
+ | |||
+ | /* back */ | ||
+ | .back, .back.glossy:after, .back.glass:after { | ||
+ | border-top-color: rgba(255,255,255,0.5); | ||
+ | -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | } | ||
+ | .back.glossy:after, .back.glass:after { | ||
+ | left: 6%; | ||
+ | width: 88%; | ||
+ | } | ||
+ | |||
+ | /* knife */ | ||
+ | .knife { | ||
+ | padding-left: 1.5em; | ||
+ | -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | } | ||
+ | .knife.glossy:after, .knife.glass:after { | ||
+ | left: 3%; | ||
+ | width: 97%; | ||
+ | -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | } | ||
+ | .knife.glossy.icon:after, .knife.glass.icon:after { | ||
+ | left: 5%; | ||
+ | width: 95%; | ||
+ | -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | } | ||
+ | |||
+ | /* shield */ | ||
+ | .shield, .shield.glossy:after, .shield.glass:after { | ||
+ | -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | } | ||
+ | .shield { | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | } | ||
+ | .shield.icon { | ||
+ | padding-left: .6em; | ||
+ | padding-right: .6em; | ||
+ | } | ||
+ | |||
+ | /* drop */ | ||
+ | .drop { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | } | ||
+ | .drop.glossy:after, .drop.glass:after { | ||
+ | left: 4%; | ||
+ | -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | } | ||
+ | .drop.icon { | ||
+ | padding-right: .6em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* morph */ | ||
+ | .morph { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 5em / 2em; | ||
+ | -moz-border-radius: 5em / 2em; | ||
+ | border-radius: 5em / 2em; | ||
+ | -webkit-transition: -webkit-border-radius .3s ease-in-out; | ||
+ | -moz-transition: -moz-border-radius .3s ease-in-out; | ||
+ | transition: -moz-border-radius .3s ease-in-out; | ||
+ | } | ||
+ | .morph:hover { | ||
+ | -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | } | ||
+ | .morph:active { | ||
+ | -webkit-border-radius: .3em; | ||
+ | -moz-border-radius: .3em; | ||
+ | border-radius: .3em; | ||
+ | } | ||
+ | .morph:after { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Some ugly hacks for FF. | ||
+ | Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */ | ||
+ | @-moz-document url-prefix() { | ||
+ | .button { text-align: center; } | ||
+ | .icon { padding: .5em 1em; } | ||
+ | .icon:before { margin-left: -.42em; float: left; } | ||
+ | |||
+ | .drop.icon { padding-right: 1.1em; } | ||
+ | .shield.icon { padding-left: 1.1em; padding-right: 1.1em; } | ||
+ | .skew.icon { padding-right: 1.4em; padding-left: 1.3em; } | ||
+ | .oval.icon { padding-left: 1.3em; padding-right: 1.3em; } | ||
+ | .knife { padding-left: 2em; } | ||
+ | } | ||
</style> | </style> | ||
Line 135: | Line 610: | ||
</a> | </a> | ||
</div> | </div> | ||
- | + | ||
+ | <div class="menu"> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin" class="button blue round glass">Home</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Project" class="button blue round glass">Project</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Team" class="button blue round glass">Team</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Parts" class="button blue round glass">Parts</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Data" class="button blue round glass">Data</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Human Practice" class="button blue round glass">Human Practice</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Notebook" class="button blue round glass">Notebook</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Safety" class="button blue round glass">Safety</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
<div id="HIT_container"> | <div id="HIT_container"> | ||
<div id="HIT_mainbox"> | <div id="HIT_mainbox"> |
Revision as of 20:11, 4 October 2011