"

From 2013.igem.org

/*** Name: Wm. Keith van der Meulen Date: Summer 2013 Organization: University of Calgary iGEM Team 2013

---Purpose--- CSS code to define navigation stylings.

---

Cite: Wm. Keith van der Meulen University of Calgary iGEM 2013 https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css

• • • /

/* Start: Style for making top bar */ .TopBar * { box-sizing: border-box; -moz-box-sizing: border-box; }

.TopBar { display: inline-block; width: 100%; padding: 0; width: 100%; min-width: 954px; margin-top: 5px; margin-bottom: -18px; float: left; }

1. HexLogo {

float: left; margin-left: 44px; }

1. HexLogo .HexL3 a {

background: url() 473A34 no-repeat; visibility: visible; display: block; width: 100%; height: 100%; }

.TopBar ul { list-style: none; position: relative; display: inline-block; padding: 0; margin-left: 25px; }

.TopBar > ul { background: url() no-repeat center bottom; margin-top: 10px; }

.TopBar ul:after { content: ""; clear: both; display: block; }

.TopBar li { float: left; }

.TopBar .ProjectLink > ul { left: 114px; }

.TopBar .OurTeamLink > ul { left: 264px; }

.TopBar .NotebookLink > ul { left: 427px; }

.TopBar .OutreachLink > ul { left: 587px; }

.TopBar #HomeLink { background: url('https://static.igem.org/mediawiki/2013/3/39/2013UCalgaryUnderlineHome.png') center bottom; }

.TopBar #ProjectLink { background: url('https://static.igem.org/mediawiki/2013/2/26/2013UCalgaryUnderlineProject.png') center bottom; }

.TopBar #OurTeamLink { background: url('https://static.igem.org/mediawiki/2013/6/68/2013UCalgaryUnderlineOurTeam.png') center bottom; }

.TopBar #NotebookLink { background: url('https://static.igem.org/mediawiki/2013/7/7d/2013UCalgaryUnderlineNotebook.png') center bottom; }

.TopBar #OutreachLink { background: url('https://static.igem.org/mediawiki/2013/4/49/2013UCalgaryUnderlineOutreach.png') center bottom; }

.TopBar li a { display: block; font: 20px 'Raleway', Helvetica, Arial, sans-serif; text-decoration: none; text-align: center; color: #00A78D; font-weight: bold; padding: 10px 34px; background: none; }

.TopBar > ul > li > a:hover { transform: scale(1.25); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); }

.TopBar li ul { display: none; position: absolute; top: 100%; margin: 0; background: #473A34; }

.TopBar li:hover > ul { display: block; }

.TopBar li li { float: none; position: relative; width: 160px; padding: 0; }

.TopBar li li a { width: 100%; color: #FFFFFF; font-weight: normal; padding: 10px 20px; }

.TopBar li li a:hover { font-weight: bold; }

.TopBar li li ul { position: absolute; left: 100%; top: 0; }

.TopBar li li li { padding: 0; } /* End: Style for making top bar */

/* Start: Style for making sidebar */ .SideBar * { box-sizing: border-box; -moz-box-sizing: border-box; }

.SideBar { margin: 5px 15px 5px 5px; padding: 0 0 25px 5px; width: 119px; float: left; clear: left; }

.HexL1 { overflow: hidden; visibility: hidden; width: 75px; height: 87px; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }

.HexL2 { overflow: hidden; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }

.HexL3 { width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }

.SideBar ul { padding: 0; }

.SideBar li { display: inline-block; clear: both; position: relative; }

.SideBar li:hover > ul { display: block; }

.SideBar a { display: block; width: 100%; height: 100%; color: #FFFFFF; font: bold 12px Raleway, Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;

}

.SideBar .HexLink { padding: 37px 0 37px 0; }

.SideBar .HexLinkTwoLine { padding: 27px 0 27px 0; }

.SideBar .HexLinkFirst a { font-size: 15px; }

.SideBar li li a { background: url(SubMenu.png) top; padding: 5px; color: #FFFFFF; }

.SideBar li li a:hover { background-position: bottom; }

.SideBar li li { width: 152px; height: 30px; margin-bottom: 5px; }

.SideBar li li:last-of-type { margin-bottom: 0; }

.SideBar li ul { display: none; position: relative; top: -15px; left: 55px; }

.SideBar .HexBox { margin-bottom: -17px; }

.SideBar .HexBoxList:hover { margin-bottom: -7px; }

.SideBar .HexBox:nth-of-type(even) { margin-left: 38px; }

.SideBar .HexL3 a { background: #00A78D; visibility: visible; }

.SideBar > ul > li:hover > div > div > div > a { background: #66CABA; } /* End: Style for making sidebar */