Template:Team:Rutgers/menu

From 2012.igem.org

Latest revision as of 09:52, 3 October 2012

body, ul, li { font-size:16px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } table { background: transparent; } .imgshadow2 blockquote p { font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #333; } .imgshadow2 blockquote table tr td { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: normal; color: #222; text-align: left; } .imgshadow2 blockquote table { font-size: 14px; text-align: center; } h3 { font-size:14px; font-family: Arial, Helvetica, sans-serif; color: #333; } h4 { font-size:20px; font-family: Arial, Helvetica, sans-serif; color: #333; line-height:11px; } h1 { font-size:33px; font-family: Arial, Helvetica, sans-serif; color: #333; } h2 { font-size:25px; font-weight:400; letter-spacing:-1px; margin:4px 0 4px 0; padding-bottom:4px; /*border-bottom:1px solid #666666;*/ text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.15); color: #505454; text-align: left; } .shadow { color: #252525; font: bold Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #FFFFFF, 2px 2px #ebebeb, 3px 3px #cdcdcd; /*line-height: .8; */ text-transform: uppercase; line-height:30px; } .shadow:hover { position: relative; top: -3px; left: 5px; text-shadow: 1px 1px #FFFFFF, 2px 2px #0013e0, 3px 3px #0013e0, 4px 4px #0013e0, 5px 5px #2de69a, 6px 6px #2de69a; color: #c247cf; text-align: left; } .stuff { font-family: arial,sans-serif; font-size: 16px; letter-spacing: .2pt; word-spacing: 2pt; line-height: 1.4; text-align: left; } #menu { list-style:none; width:800px; margin:0px auto 0px auto; height:40px; padding:0px 20px 0px 20px; /* Rounded Corners */ -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; /* Background color and gradients */ background: #F4ED13; background: -moz-linear-gradient(top, #0043d3, #36498b); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0043d3), to(#36498b)); /* Borders */ border: 0px solid #0043d3; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .button { border-top: 1px solid #ebebeb; background: #ffffff; background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#ffffff)); background: -webkit-linear-gradient(top, #cccccc, #ffffff); background: -moz-linear-gradient(top, #cccccc, #ffffff); background: -ms-linear-gradient(top, #cccccc, #ffffff); background: -o-linear-gradient(top, #cccccc, #ffffff); padding: 6.5px 13px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #303030; font-size: 12px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #ffffff; background: #ffffff; color: #ccc; } .button:active { border-top-color: #999999; background: #999999; } 3D { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #ffffff; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; font-size: 18px; } .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #CCCCCC, #f1f1f1); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC), to(#f1f1f1)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 400px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px; top:auto; } .col_1, .col_2, .col_3, .col_4, .col_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;} #menu .menu_right { float:right; margin-right:0px; } #menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } #menu li:hover .align_right { left:auto; right:-1px; top:auto; } #menu p, #menu h2, #menu h3, #menu ul li { font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow: 1px 1px 1px #FFFFFF; } #menu h2 { font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666666; } #menu h3 { font-size:14px; margin:0px 0 0px 0; padding-bottom:0px; border-bottom:1px solid #888888; } #menu p { line-height:18px; margin:0 0 10px 0; } #menu li:hover div a { font-size:12px; color:#333333; } #menu li:hover div a:hover { color:#666666; } .strong { font-weight:bold; } .italic { font-style:italic; } .imgshadow { /* Better style on light background */ background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } .imgshadow2 { /* Better style on light background */ background:#ffffff; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; } .imgshadow3 { /* Better style on light background */ background:#c0c0c0; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .imgshadow0 { /* Better style on light background */ background:#999999; /* Gradient background */ background:#eeeeee; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); padding:0px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .imgshadoweas { /* Better style on light background */ background:#c0c0c0; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #c0c0c0, #FFFFFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#FFFFFF)); padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .img_left { /* Image sticks to the left */ width:auto; float:left; margin:5px 15px 5px 5px; } #menu li .black_box { background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* Shadow */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0; margin:0; } #menu li .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } .notice-wrap { position: fixed; top: 20px; right: 20px; width: 250px; } * html .notice-wrap { position: absolute; } .notice-item { height: 60px; background: #333; -moz-border-radius: 6px; -webkit-border-radius: 6px; color: #eee; padding: 6px 6px 0 6px; font-family: lucida Grande; font-size: 11px; border: 2px solid #999; display: block; position: relative; margin: 0 0 12px 0; } .notice-item-close { position: absolute; font-family: Arial; font-size: 12px; font-weight: bold; right: 6px; top: 6px; cursor: pointer; } /* IE10 */ background-image: -ms-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); /* Opera */ background-image: -o-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, left bottom, 0, left bottom, 1020, color-stop(0, #FFFFFF), color-stop(1, #DEDEDE)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); /* Proposed W3C Markup */ background-image: radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); .footer2 { text-align: center; }