Team:ZJU-China/CSS/Header.css
From 2014.igem.org
div.zju_header {
margin-top: 0px; text-align: center; background-color: #0058ff; box-shadow: 0px 0px 20px #1f1f1f;
}
div.zju_menu {
position: inherit; top: 0px; margin: 0px; width: 80%; height: auto; text-align: center; display: inline-block; background-color: transparent;
}
a#igem_logo {
/*display:inline-block; position: relative; width: 48px; text-align: center; margin: 14px 0px 0px 0px; border-color: white; border-style: groove; border-width: 0px 1px 0px 1px;*/
}
img#igem_logo {
padding: 0pt 0pt; height: 40pt;
}
li#igem_logo {
padding: 0pt 0pt;
}
img#igem_edit {
padding: 5pt 0pt; height: 30pt;
}
li#igem_edit {
padding: 0pt 0pt;
}
li#igem_edit.edit_on {
padding: 0pt 0pt; background-color: #4480ff;
}
li#igem_edit:hover {
border-radius: 0; box-shadow: none;
}
img#team_name {
margin-top: 2pt; height: 36pt;
}
li#team_name {
padding: 0pt 0pt; position: relative; text-align: right; text-decoration: none; color: white; font-size: 12pt; font-family: "Segoe UI"; font-style: bold; border: 0px;
}
li#team_name:hover {
box-shadow: none; background-color: #4480ff; border-radius: 8px;
}
ul.zju_menu_list{
display: inline-block; text-align: justify; -ms-text-justify: distribute-all-lines; list-style: none; margin: 14px 0px 0px 0px; padding: 0pt; width: 100%; height: 40pt; min-width: 720px; font-size: 0pt;
}
ul.zju_menu_list > li > a:active, ul.zju_menu_list > li > a:visited, ul.zju_menu_list > li > a:link {
text-decoration: none; color: white; font-family: inherit; font-style: normal; font-size: inherit; text-align: center;
}
ul.zju_menu_list > li {
/*margin-right: -8px; width: auto; margin-top: 14px; padding: 10pt 1%; border-style: solid; border-width: 0px 1px; border-color: #9d9d9d; border-radius: 1px;*/ margin: 0 0 0 0; padding: 0 0.7%; height: inherit; position: relative; color: white; font-family: "Segoe UI"; font-style: normal; font-size: 14pt; line-height: 40pt; text-align: center; vertical-align: middle; background-color: transparent; display: inline-block;
}
ul.zju_menu_list > li:hover{
border-radius: 3px; box-shadow: 0px 0px 6px #000084 inset; color: #17008d; background-color: #4ba0e6;
}
ul.zju_menu_list > li a:hover {
color: #17008d;
}
ul.zju_menu_list > li:hover > ul {
/*display: block;*/ z-index: 1;
}
ul.zju_menu_list > li li {
float: none;
}
/*ul.zju_menu_list > li:hover > ul > li {
display: inline;
}*/
ul.zju_sub_menu {
float: none; display: none; list-style: none; margin: 0 0 0 -60pt; width: 120pt; top: 100%; left: 50%; color: white; box-shadow: 5px 5px 5px #888888; position: absolute; background-color: transparent;
}
ul.zju_sub_menu > li a:link, ul.zju_sub_menu > li a:active, ul.zju_sub_menu > li a:visited {
text-decoration: none; color: inherit;
}
ul.zju_sub_menu > li{
border-bottom-style: solid; border-bottom-width: 3pt; border-bottom-color: #9ce6f4; margin-bottom: 0px; float: left; font-family: inherit; font-size: 14pt; text-align: center; text-decoration: none; padding: 4px 10px; background-color: #4ba0e6; opacity: 0.8; display: block; position: relative;
}
ul.zju_sub_menu > li:hover {
border-bottom-color: #FFFFFF; opacity: 1.0; color: #5080D0; background-color: #E0E0F4;
}
ul.zju_menu_list:after {
content: ""; display: inline-block; font-size: 0; line-height: 0; width: 100%;
}
/*li#zju_menu_long {
font-size: 12px;
}*/
ul.zju_sub_menu > li:hover ul {
/*display: block;*/
}
ul.zju_son_menu {
float: none; display: none; list-style: none; margin: 0 0 0 0pt; width: 120pt; top: 0%; left: 100%; color: white; box-shadow: 5px 5px 5px #888888; position: absolute; background-color: transparent;
}
ul.zju_son_menu > li a:link, ul.zju_sub_menu > li a:active, ul.zju_sub_menu > li a:visited {
text-decoration: none; color: inherit;
}
ul.zju_son_menu > li{
border-bottom-style: solid; border-bottom-width: 3pt; border-bottom-color: #9ce6f4; margin-bottom: 0px; float: left; font-family: inherit; font-size: 14pt; text-align: center; text-decoration: none; padding: 4px 10px; background-color: #4ba0e6; opacity: 0.8; display: block;
}
ul.zju_son_menu > li:hover {
border-bottom-color: #FFFFFF; opacity: 1.0; color: #5080D0; background-color: #E0E0F4;
}
/*--- decoration of bar ---*/ /*ul.zju_menu_list > li > a span {
position: absolute; bottom: 0px; right: 0px; display: block; background-color: #D0D0D0; opacity: 0.5; height: 40%; width: 100%;
}
ul.zju_menu_list > li:hover > a span {
position: absolute; top: 0px; right: 0px; display: block; background-color: white; opacity: 0.3; height: 60%; width: 100%;
}
div.zju_menu > a > span {
position: absolute; bottom: 0px; display: block; background-color: white; opacity: 0.5; border-top: #A0A0A0 solid 3pt; height: 35%; width: 100%;
}
div.zju_menu > a:hover > span {
position: absolute; top: 0px; display: block; background-color: white; opacity: 0.2; border-top: none; border-bottom: #A0A0A0 solid 3pt; height: 65%; width: 100%;
}*/
@media screen and (min-width: 1600px) {
div.zju_menu { width: 1280px; }
}
@media screen and (min-width: 1080px) {
ul.zju_menu_list > li { padding: 0 2.2%; } ul.zju_menu_list > li#igem_edit { padding: 0pt 0pt; } ul.zju_menu_list > li#igem_logo { padding: 0pt 0pt; }
ul.zju_menu_list > li#team_name { padding: 0pt 0pt; }
}
@media screen and (max-width: 900px) {
div.zju_menu { width: 720px; }
}
@media screen and (max-width: 720px) {
div.zju_header { width: 720px; }
}