Team:IIT Madras/Template:new home
From 2012.igem.org
(Difference between revisions)
(Created page with "<html> <head> <title>bar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- html { overflow: -moz-scrollbars-vertical ...") |
|||
Line 354: | Line 354: | ||
#menu ul li{float:left; width:75px; text-align:center; background:url('https://static.igem.org/mediawiki/2011/1/1c/Test_menu.gif') repeat-x;margin:10px; height:34px; -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px;} | #menu ul li{float:left; width:75px; text-align:center; background:url('https://static.igem.org/mediawiki/2011/1/1c/Test_menu.gif') repeat-x;margin:10px; height:34px; -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px;} | ||
#menu a {position : relative; top:7px; text-decoration:none; color:black;} | #menu a {position : relative; top:7px; text-decoration:none; color:black;} | ||
+ | |||
+ | |||
+ | |||
+ | #iitm_content{ | ||
+ | position:relative; | ||
+ | top:-110px; | ||
+ | } | ||
+ | |||
+ | /* Navigation Bar */ | ||
+ | |||
+ | #iitm_menu { | ||
+ | list-style:none; | ||
+ | width:940px; | ||
+ | margin:30px auto 0px auto; | ||
+ | height:43px; | ||
+ | padding:0px 20px 0px 20px; | ||
+ | |||
+ | /* Rounded Corners */ | ||
+ | |||
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | |||
+ | /* Background color and gradients */ | ||
+ | |||
+ | background: #014464; | ||
+ | background: -moz-linear-gradient(top, #0272a7, #013953); | ||
+ | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); | ||
+ | |||
+ | /* Borders */ | ||
+ | |||
+ | border: 1px solid #002232; | ||
+ | |||
+ | -moz-box-shadow:inset 0px 0px 1px #edf9ff; | ||
+ | -webkit-box-shadow:inset 0px 0px 1px #edf9ff; | ||
+ | box-shadow:inset 0px 0px 1px #edf9ff; | ||
+ | } | ||
+ | |||
+ | #iitm_menu li { | ||
+ | float:left; | ||
+ | text-align:center; | ||
+ | position:relative; | ||
+ | padding: 4px 10px 4px 10px; | ||
+ | margin-right:30px; | ||
+ | margin-top:7px; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | #iitm_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; | ||
+ | } | ||
+ | |||
+ | #iitm_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; | ||
+ | } | ||
+ | |||
+ | #iitm_menu li:hover a { | ||
+ | color:#161616; | ||
+ | text-shadow: 1px 1px 1px #FFFFFF; | ||
+ | } | ||
+ | #iitm_menu li .drop { | ||
+ | padding-right:21px; | ||
+ | background:url("img/drop.png") no-repeat right 8px; | ||
+ | } | ||
+ | #iitm_menu li:hover .drop { | ||
+ | background:url("img/drop.png") no-repeat right 7px; | ||
+ | } | ||
+ | |||
+ | /* Drop Down */ | ||
+ | |||
+ | .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, #EEEEEE, #BBBBBB); | ||
+ | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); | ||
+ | |||
+ | /* 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: 700px;} | ||
+ | |||
+ | #iitm_menu li:hover .dropdown_1column, | ||
+ | #iitm_menu li:hover .dropdown_2columns, | ||
+ | #iitm_menu li:hover .dropdown_3columns, | ||
+ | #iitm_menu li:hover .dropdown_4columns, | ||
+ | #iitm_menu li:hover .dropdown_5columns { | ||
+ | left:-1px; | ||
+ | top:auto; | ||
+ | } | ||
+ | |||
+ | /* Columns */ | ||
+ | |||
+ | .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;} | ||
+ | |||
+ | /* Right alignment */ | ||
+ | |||
+ | #iitm_menu .menu_right { | ||
+ | float:right; | ||
+ | margin-right:0px; | ||
+ | } | ||
+ | #iitm_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; | ||
+ | } | ||
+ | #iitm_menu li:hover .align_right { | ||
+ | left:auto; | ||
+ | right:-1px; | ||
+ | top:auto; | ||
+ | } | ||
+ | |||
+ | /* Drop Down Content Stylings */ | ||
+ | |||
+ | #iitm_menu p, #iitm_menu h2, #iitm_menu h3, #iitm_menu ul li { | ||
+ | font-family:Arial, Helvetica, sans-serif; | ||
+ | line-height:21px; | ||
+ | font-size:12px; | ||
+ | text-align:left; | ||
+ | text-shadow: 1px 1px 1px #FFFFFF; | ||
+ | } | ||
+ | #iitm_menu h2 { | ||
+ | font-size:21px; | ||
+ | font-weight:400; | ||
+ | letter-spacing:-1px; | ||
+ | margin:7px 0 14px 0; | ||
+ | padding-bottom:14px; | ||
+ | border-bottom:1px solid #666666; | ||
+ | } | ||
+ | #iitm_menu h3 { | ||
+ | font-size:14px; | ||
+ | margin:7px 0 14px 0; | ||
+ | padding-bottom:7px; | ||
+ | border-bottom:1px solid #888888; | ||
+ | } | ||
+ | #iitm_menu p { | ||
+ | line-height:18px; | ||
+ | margin:0 0 10px 0; | ||
+ | } | ||
+ | |||
+ | #iitm_menu li:hover div a { | ||
+ | font-size:12px; | ||
+ | color:#015b86; | ||
+ | } | ||
+ | #iitm_menu li:hover div a:hover { | ||
+ | color:#029feb; | ||
+ | } | ||
+ | .strong { | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .italic { | ||
+ | font-style:italic; | ||
+ | } | ||
+ | .imgshadow { | ||
+ | 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; | ||
+ | } | ||
+ | .img_left { /* Image sticks to the left */ | ||
+ | width:auto; | ||
+ | float:left; | ||
+ | margin:5px 15px 5px 5px; | ||
+ | } | ||
+ | #iitm_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; | ||
+ | } | ||
+ | #iitm_menu li ul { | ||
+ | list-style:none; | ||
+ | padding:0; | ||
+ | margin:0 0 12px 0; | ||
+ | } | ||
+ | #iitm_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; | ||
+ | } | ||
+ | #iitm_menu li ul li:hover { | ||
+ | background:none; | ||
+ | border:none; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | #iitm_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; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | #iitm_menu li .greybox li:hover { | ||
+ | background:#ffffff; | ||
+ | border:1px solid #aaaaaa; | ||
+ | padding:4px 6px 4px 6px; | ||
+ | margin:0px 0px 4px 0px; | ||
+ | } | ||
+ | |||
--> | --> | ||
+ | |||
</style> | </style> | ||
<!-- End Save for Web Styles --> | <!-- End Save for Web Styles --> |
Revision as of 02:22, 29 August 2012