Team:MCIT Indianapolis/header
From 2013hs.igem.org
(Difference between revisions)
(One intermediate revision not shown) | |||
Line 17: | Line 17: | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width" /> | <meta name="viewport" content="width=device-width" /> | ||
- | + | ||
+ | |||
+ | |||
+ | |||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* -------------------------------------------------- | ||
+ | Table of Contents | ||
+ | ----------------------------------------------------- | ||
+ | ::iGEM Reset | ||
+ | ::Fonts and Icons | ||
+ | ::Shared Styles | ||
+ | ::Header & Footer | ||
+ | ::Homepage | ||
+ | */ | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | iGEM Reset | ||
+ | ----------------------------------------- */ | ||
+ | #globalWrapper { | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | #content { | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | width: 100%; | ||
+ | overflow: visible; | ||
+ | height: 100%; | ||
+ | } | ||
+ | #bodyContent { | ||
+ | border: none; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | #top-section { | ||
+ | height: 15px; | ||
+ | margin: 0px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | margin-bottom: 0 !important; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | #p-logo { | ||
+ | height: 1px; | ||
+ | overflow: hidden; | ||
+ | display: none; | ||
+ | } | ||
+ | #search-controls { | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | background: none; | ||
+ | position: absolute; | ||
+ | top: 100px; | ||
+ | right: 40px; | ||
+ | } | ||
+ | #menubar.left-menu { | ||
+ | /*margin-top: -80px; uncomment this when page goes live */ | ||
+ | background: none; | ||
+ | height: 20px; | ||
+ | left: 20px; | ||
+ | float: left; | ||
+ | } | ||
+ | .left-menu ul { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .left-menu:hover ul { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | .left-menu:hover ul li a { | ||
+ | color: #666; | ||
+ | } | ||
+ | .left-menu li a:hover { | ||
+ | color: #aaaaff !important; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | #menubar.right-menu { | ||
+ | display: block; | ||
+ | width: 300px; | ||
+ | float: left; | ||
+ | margin-top: 2px; | ||
+ | margin-right: 0px; | ||
+ | border: none; | ||
+ | } | ||
+ | .right-menu ul { | ||
+ | width: 300px; | ||
+ | margin: 0px; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .right-menu ul li a { | ||
+ | background: none; | ||
+ | color: #666; | ||
+ | } | ||
+ | .right-menu:hover ul { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | #footer-box { | ||
+ | width: 100%; | ||
+ | margin: -10px auto 0 auto; | ||
+ | padding: 20px 0; | ||
+ | } | ||
+ | .visualClear { | ||
+ | display: none; | ||
+ | } | ||
+ | #footer { | ||
+ | border: none; | ||
+ | width: 965px; | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | #f-list a { | ||
+ | color: #333; | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | #f-list a:hover { | ||
+ | color: #666; | ||
+ | } | ||
+ | .printfooter { | ||
+ | display: none; | ||
+ | } | ||
+ | #footer ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #footer ul li { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #search-controls { | ||
+ | display: none; | ||
+ | } | ||
+ | h3#siteSub { | ||
+ | display: none; | ||
+ | } | ||
+ | #contentSub { | ||
+ | display: none; | ||
+ | } | ||
+ | p:first-child { | ||
+ | display: none; | ||
+ | } | ||
+ | #catlinks { | ||
+ | display: none; | ||
+ | } | ||
+ | #footer-box { | ||
+ | width: 977px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Fonts and Icons | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Bitter'; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff) format('woff'); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: 'Bitter'; | ||
+ | font-style: normal; | ||
+ | font-weight: 700; | ||
+ | src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | @font-face { | ||
+ | font-family: 'Foro-LightRegular'; | ||
+ | src: url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.eot'); | ||
+ | src: url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.eot?#iefix') format('embedded-opentype'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.woff') format('woff'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.ttf') format('truetype'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.svg#Foro-LightRegular') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | }*/ | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Droid Sans'; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Droid Sans'; | ||
+ | font-style: normal; | ||
+ | font-weight: 700; | ||
+ | src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff) format('woff'); | ||
+ | } | ||
+ | /* ----------------------------------------- | ||
+ | Lightbox | ||
+ | ----------------------------------------- */ | ||
+ | /* line 6, ../sass/lightbox.sass */ | ||
+ | #lightboxOverlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 9999; | ||
+ | background-color: black; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); | ||
+ | opacity: 0.85; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* line 15, ../sass/lightbox.sass */ | ||
+ | #lightbox { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | z-index: 10000; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | font-family: "lucida grande", tahoma, verdana, arial, sans-serif; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | /* line 24, ../sass/lightbox.sass */ | ||
+ | #lightbox img { | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | } | ||
+ | /* line 27, ../sass/lightbox.sass */ | ||
+ | #lightbox a img { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | /* line 30, ../sass/lightbox.sass */ | ||
+ | .lb-outerContainer { | ||
+ | position: relative; | ||
+ | background-color: white; | ||
+ | *zoom: 1; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | margin: 0 auto; | ||
+ | -webkit-border-radius: 4px; | ||
+ | -moz-border-radius: 4px; | ||
+ | -ms-border-radius: 4px; | ||
+ | -o-border-radius: 4px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ | ||
+ | .lb-outerContainer:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* line 39, ../sass/lightbox.sass */ | ||
+ | .lb-container { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | /* line 42, ../sass/lightbox.sass */ | ||
+ | .lb-loader { | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: 0%; | ||
+ | height: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | |||
+ | /* line 51, ../sass/lightbox.sass */ | ||
+ | .lb-nav { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | /* line 59, ../sass/lightbox.sass */ | ||
+ | .lb-container > .nav { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | /* line 62, ../sass/lightbox.sass */ | ||
+ | .lb-nav a { | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | /* line 65, ../sass/lightbox.sass */ | ||
+ | .lb-prev, .lb-next { | ||
+ | width: 49%; | ||
+ | height: 100%; | ||
+ | background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); | ||
+ | /* Trick IE into showing hover */ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* line 72, ../sass/lightbox.sass */ | ||
+ | .lb-prev { | ||
+ | left: 0; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* line 76, ../sass/lightbox.sass */ | ||
+ | .lb-next { | ||
+ | right: 0; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | /* line 81, ../sass/lightbox.sass */ | ||
+ | .lb-prev:hover { | ||
+ | background: url(https://static.igem.org/mediawiki/2012/3/33/Ucl2012-lightbox-Prev.png) left 48% no-repeat; | ||
+ | } | ||
+ | |||
+ | /* line 85, ../sass/lightbox.sass */ | ||
+ | .lb-next:hover { | ||
+ | background: url(https://static.igem.org/mediawiki/2012/4/4c/Ucl2012-lightbox-Next.png) right 48% no-repeat; | ||
+ | } | ||
+ | |||
+ | /* line 88, ../sass/lightbox.sass */ | ||
+ | .lb-dataContainer { | ||
+ | margin: 0 auto; | ||
+ | padding-top: 5px; | ||
+ | *zoom: 1; | ||
+ | width: 100%; | ||
+ | -moz-border-radius-bottomleft: 4px; | ||
+ | -webkit-border-bottom-left-radius: 4px; | ||
+ | -ms-border-bottom-left-radius: 4px; | ||
+ | -o-border-bottom-left-radius: 4px; | ||
+ | border-bottom-left-radius: 4px; | ||
+ | -moz-border-radius-bottomright: 4px; | ||
+ | -webkit-border-bottom-right-radius: 4px; | ||
+ | -ms-border-bottom-right-radius: 4px; | ||
+ | -o-border-bottom-right-radius: 4px; | ||
+ | border-bottom-right-radius: 4px; | ||
+ | } | ||
+ | /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ | ||
+ | .lb-dataContainer:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* line 95, ../sass/lightbox.sass */ | ||
+ | .lb-data { | ||
+ | padding: 0 10px; | ||
+ | color: #bbbbbb; | ||
+ | } | ||
+ | /* line 98, ../sass/lightbox.sass */ | ||
+ | .lb-data .lb-details { | ||
+ | width: 85%; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | line-height: 1.1em; | ||
+ | } | ||
+ | /* line 103, ../sass/lightbox.sass */ | ||
+ | .lb-data .lb-caption { | ||
+ | font-size: 13px; | ||
+ | font-weight: bold; | ||
+ | line-height: 1em; | ||
+ | } | ||
+ | /* line 107, ../sass/lightbox.sass */ | ||
+ | .lb-data .lb-number { | ||
+ | display: block; | ||
+ | clear: left; | ||
+ | padding-bottom: 1em; | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | /* line 112, ../sass/lightbox.sass */ | ||
+ | .lb-data .lb-close { | ||
+ | width: 35px; | ||
+ | float: right; | ||
+ | padding-bottom: 0.7em; | ||
+ | outline: none; | ||
+ | } | ||
+ | /* line 117, ../sass/lightbox.sass */ | ||
+ | .lb-data .lb-close:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Shared Styles | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | body { | ||
+ | background: #f2f2f2; | ||
+ | font-family: 'Droid Sans', Helvetica, sans-serif; | ||
+ | font-size: 15px; | ||
+ | line-height: 23px; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6 { | ||
+ | font-family: 'Bitter', serif; | ||
+ | font-weight: normal; | ||
+ | color: #000; | ||
+ | border-bottom: none; | ||
+ | margin-bottom: none; | ||
+ | } | ||
+ | |||
+ | h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | div.clearfix { | ||
+ | content: "."; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | div.twelve.columns.no-pad { | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | .off-canvas { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | a, a:visited { | ||
+ | color: #07b370; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #07b370; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .button { | ||
+ | background: #b31b1b; | ||
+ | border: 1px solid #691010; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | a.button, a.button:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .button:hover { | ||
+ | background-color: #871414; | ||
+ | } | ||
+ | |||
+ | .button:focus { | ||
+ | -webkit-box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset; | ||
+ | -moz-box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset; | ||
+ | box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset; | ||
+ | } | ||
+ | |||
+ | .nav-bar { | ||
+ | background: #b31b1b; | ||
+ | } | ||
+ | |||
+ | .nav-bar > li { | ||
+ | border: 1px solid #871414; | ||
+ | } | ||
+ | |||
+ | .nav-bar > li:last-child { | ||
+ | border-right: solid 1px #871414; | ||
+ | } | ||
+ | |||
+ | .nav-bar > li.active { | ||
+ | background: #4c0b0b; | ||
+ | border-color: #4c0b0b; | ||
+ | } | ||
+ | |||
+ | .nav-bar > li.active:hover { | ||
+ | background: #4c0b0b; | ||
+ | } | ||
+ | |||
+ | .nav-bar > li:hover { | ||
+ | background: #871414; | ||
+ | } | ||
+ | |||
+ | .nav-bar a { | ||
+ | color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | ul.side-nav li.divider { | ||
+ | border-top: 1px solid #ddd; | ||
+ | } | ||
+ | |||
+ | dl.tabs.pill dd a { | ||
+ | background: #ddd; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | dl.tabs.pill dd.active a { | ||
+ | background-color: #b31b1b; | ||
+ | color: #e6e6e6; | ||
+ | } | ||
+ | |||
+ | iframe.slides { | ||
+ | width: 577px; | ||
+ | height: 476px; | ||
+ | margin: 5px auto; | ||
+ | } | ||
+ | /* ----------------------------------------- | ||
+ | Header & Footer | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div.row.header { | ||
+ | background: #b31b1b; | ||
+ | margin: 20px auto 40px; | ||
+ | } | ||
+ | |||
+ | div#header-wrapper { | ||
+ | width: 940px; | ||
+ | margin: 0px auto; | ||
+ | } | ||
+ | |||
+ | div#logo-wrapper { | ||
+ | position: absolute; | ||
+ | top: -20px; | ||
+ | left: 0px; | ||
+ | background: green; | ||
+ | border: 10px solid #b31b1b; | ||
+ | height: 80px; | ||
+ | } | ||
+ | |||
+ | div#logo-wrapper img { | ||
+ | height: 60px; | ||
+ | } | ||
+ | |||
+ | div#igem-attr { | ||
+ | position: absolute; | ||
+ | top: -12px; | ||
+ | left: 147px; | ||
+ | height: 60px; | ||
+ | transition: transform 0.5s; | ||
+ | -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ | ||
+ | -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ | ||
+ | -o-transition: -o-transform 0.5s; /* Opera */ | ||
+ | } | ||
+ | |||
+ | div#igem-attr:hover { | ||
+ | transform: rotate(-15deg); | ||
+ | -ms-transform: rotate(-15deg); /* IE 9 */ | ||
+ | -webkit-transform: rotate(-15deg); /* Safari and Chrome */ | ||
+ | -o-transform: rotate(-15deg); /* Opera */ | ||
+ | -moz-transform: rotate(-15deg); /* Firefox */ | ||
+ | } | ||
+ | |||
+ | div#igem-attr img { | ||
+ | height: 60px; | ||
+ | } | ||
+ | |||
+ | div#header-wrapper .nav-bar { | ||
+ | float: right; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | div.main-image > div { | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | a.gallery-button { | ||
+ | position: absolute; | ||
+ | right: 20px; | ||
+ | bottom: 10px; | ||
+ | } | ||
+ | |||
+ | div.missing { | ||
+ | margin: auto; | ||
+ | position: relative; | ||
+ | top: 50%; | ||
+ | width: 193px; | ||
+ | } | ||
+ | div.missing a { | ||
+ | height: 63px; | ||
+ | position: relative; | ||
+ | top: -31px; | ||
+ | } | ||
+ | div.missing img { | ||
+ | border-width: 0px; | ||
+ | } | ||
+ | div#unityPlayer { | ||
+ | cursor: default; | ||
+ | height: 600px; | ||
+ | width: 960px; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Home Page | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div#homepage-slideshow { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | div.homepage-section { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | div.homepage-force { | ||
+ | height: 174px; | ||
+ | } | ||
+ | |||
+ | div.controls { | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | div.controls a.button { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | div.homepage-section.tl { | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | border-right: 1px solid #ddd; | ||
+ | padding-top: 0px; | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | div.homepage-section.tr { | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | padding-top: 0px; | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | |||
+ | div.homepage-section.bl { | ||
+ | border-right: 1px solid #ddd; | ||
+ | padding-bottom: 0px; | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | div.homepage-section.br { | ||
+ | padding-bottom: 0px; | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | |||
+ | div.homepage-thumb { | ||
+ | margin-bottom: -6px; | ||
+ | } | ||
+ | |||
+ | div.sponsors-wrapper { | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | div.sponsors-wrapper ul { | ||
+ | padding: 5px 0px; | ||
+ | } | ||
+ | |||
+ | div.sponsors-wrapper ul li { | ||
+ | padding: 5px 10px; | ||
+ | display: inline-block; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | div.sponsors-wrapper ul li img { | ||
+ | height: 105px; | ||
+ | display: block; | ||
+ | margin: 5px auto; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Team Page | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div.team-bios-container div.row { | ||
+ | padding: 0px 0px 10px; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | } | ||
+ | |||
+ | div.team-bios-container div.last-ele { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | div.team-bios-container img { | ||
+ | max-height: 166px; | ||
+ | margin: 29px 0px; | ||
+ | } | ||
+ | |||
+ | div.team-bios-container img.inline { | ||
+ | max-height: none; | ||
+ | } | ||
+ | |||
+ | div#grd-members, div#fac-members { | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | div.bio-pic-container { | ||
+ | position: relative; | ||
+ | margin: 29px 0px; | ||
+ | height: 166px; | ||
+ | } | ||
+ | |||
+ | div.bio-pic-container img { | ||
+ | position: absolute; | ||
+ | margin: 0px; | ||
+ | top: 0px; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | div.bio-pic-container img.bio-pic-bw { | ||
+ | z-index: 5; | ||
+ | } | ||
+ | /* ----------------------------------------- | ||
+ | Tour Template | ||
+ | ----------------------------------------- */ | ||
+ | div.tour { | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | div.tour a { | ||
+ | font-size:14px; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Notebook Page | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | a.nb-week { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | ul.side-nav li.nb-divider { | ||
+ | margin-left: -30px; | ||
+ | border-top: 1px solid #ddd; | ||
+ | height: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | div.nb-week { | ||
+ | display: none; | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | ul.side-nav li.nb-month { | ||
+ | margin-left: -30px; | ||
+ | border-top: 1px solid #ddd; | ||
+ | height: 0; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | li.nb-month div { | ||
+ | -webkit-transform: rotate(-90deg); | ||
+ | -moz-transform: rotate(-90deg); | ||
+ | -o-transform: rotate(-90deg); | ||
+ | -ms-transform: rotate(-90deg); | ||
+ | position: absolute; | ||
+ | top: 47px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | div.nb-labels div { | ||
+ | width: 16.66667%; | ||
+ | float: left; | ||
+ | text-align:center; | ||
+ | font-size:14px; | ||
+ | font-weight:bold; | ||
+ | padding:0px; | ||
+ | } | ||
+ | |||
+ | div.nb-filter img { | ||
+ | margin: 0px 0px; | ||
+ | } | ||
+ | |||
+ | div.filter-container { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | background-repeat: none; | ||
+ | background-size: 100px 100px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | div.filter-container img { | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | div.filter-container img:nth-child(2) { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | div#nb-all { | ||
+ | font-family: 'Droid Sans', Helvetica, sans-serif; | ||
+ | border-radius: 12px; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | padding: 3px 10px; | ||
+ | display: inline; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | div.nb-all { | ||
+ | margin: 2px 25px; | ||
+ | border: 0px solid; | ||
+ | border-color: #F2F2F2; | ||
+ | background-color: #505050; | ||
+ | color: #F2F2F2; | ||
+ | /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ | ||
+ | } | ||
+ | |||
+ | div.nb-all-i { | ||
+ | margin: 2px 24px; | ||
+ | border: 1px solid; | ||
+ | border-color: #8A8A8A; | ||
+ | background-color: #F2F2F2; | ||
+ | color: #8A8A8A; | ||
+ | /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ | ||
+ | } | ||
+ | |||
+ | div.nb-only { | ||
+ | margin: 2px 25px; | ||
+ | border: 1px solid; | ||
+ | border-color: #F2F2F2; | ||
+ | border-radius: 15px; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | color: #F2F2F2; | ||
+ | cursor: pointer; | ||
+ | /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ | ||
+ | } | ||
+ | |||
+ | div.nb-only-i { | ||
+ | margin: 2px 25px; | ||
+ | border: 1px solid; | ||
+ | border-color: #8A8A8A; | ||
+ | border-radius: 15px; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | color: #8A8A8A; | ||
+ | background-color: #F2F2F2; | ||
+ | cursor: pointer; | ||
+ | /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ | ||
+ | } | ||
+ | |||
+ | div.entry { | ||
+ | width: auto; | ||
+ | max-width: none; | ||
+ | min-width: 0; | ||
+ | min-height: 50px; | ||
+ | margin: 0 -15px; | ||
+ | background-size: 50px 50px; | ||
+ | background-repeat: no-repeat; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | div.entry:before, div.entry:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | div.entry div { | ||
+ | padding-left: 65px; | ||
+ | } | ||
+ | |||
+ | div.entry div h6 { | ||
+ | margin: 0px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | div.nb-wet { background-image:url('https://static.igem.org/mediawiki/igem.org/2/23/Cornell-nb-wet-c.png'); } | ||
+ | |||
+ | div.nb-dry { background-image:url('https://static.igem.org/mediawiki/igem.org/6/6a/Cornell-nb-dry-c.png'); } | ||
+ | |||
+ | div.nb-model { background-image:url('https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-model-c.png'); } | ||
+ | |||
+ | div.nb-hprac { background-image:url('https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-hprac-c.png'); } | ||
+ | |||
+ | div.nb-wiki { background-image:url('https://static.igem.org/mediawiki/igem.org/f/ff/Cornell-nb-wiki-c.png'); } | ||
+ | |||
+ | div.nb-anim { background-image:url('https://static.igem.org/mediawiki/igem.org/4/46/Cornell-nb-anim-c.png'); } | ||
+ | |||
+ | div.nb-only#wet-only { | ||
+ | background: #40B249; | ||
+ | } | ||
+ | |||
+ | div.nb-only#dry-only { | ||
+ | background: #2D75B0; | ||
+ | } | ||
+ | |||
+ | div.nb-only#model-only { | ||
+ | background: #AD2029; | ||
+ | } | ||
+ | |||
+ | div.nb-only#hprac-only { | ||
+ | background: #E58A35; | ||
+ | } | ||
+ | |||
+ | div.nb-only#wiki-only { | ||
+ | background: #5D3697; | ||
+ | } | ||
+ | |||
+ | div.nb-only#anim-only { | ||
+ | background: #D5BA34; | ||
+ | } | ||
+ | |||
+ | ul.side-nav h6 { | ||
+ | margin: 47px 0px 0px; | ||
+ | } | ||
+ | |||
+ | ul.side-nav.ntbk-nav h6 { | ||
+ | margin: 87px 0px 0px; | ||
+ | } | ||
+ | |||
+ | table.check-off img { | ||
+ | height: 20px; | ||
+ | width: 20px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Gallery Page | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div.main-gallery ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | div.main-gallery ul li { | ||
+ | display: inline-block; | ||
+ | margin: 0px 5px; | ||
+ | } | ||
+ | |||
+ | div.main-gallery ul li img { | ||
+ | height: 80px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Functional Requirement Hover-overs | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div.overflow { | ||
+ | overflow: visible; | ||
+ | } | ||
+ | |||
+ | div.func-req-position { | ||
+ | position: absolute; | ||
+ | background: #e2e2e2; | ||
+ | border-radius: 300px; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | background: #f2f2f2; | ||
+ | color: white; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | div.func-req-hover { | ||
+ | width: 100px; | ||
+ | border-radius: 300px; | ||
+ | } | ||
+ | |||
+ | div.func-req-hover img { | ||
+ | height: 100px; | ||
+ | margin-top: -4px; | ||
+ | opacity: 0.5; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.func-req-hover:hover img { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.func-req-desc { | ||
+ | position: absolute; | ||
+ | left: -75px; | ||
+ | top: 100px; | ||
+ | width: 250px; | ||
+ | padding: 7px; | ||
+ | background: #1A1A1A; | ||
+ | border-radius: 5px; | ||
+ | color: white; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.func-req-hover:hover + div.func-req-desc { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.func-req-desc h5 { | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | /* ----------------------------------------- | ||
+ | Device Hover-overs | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | div.device-position { | ||
+ | position: absolute; | ||
+ | border-radius: 300px; | ||
+ | width: 55px; | ||
+ | height: 55px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | div.device-hover { | ||
+ | position: absolute; | ||
+ | width: 55px; | ||
+ | height: 55px; | ||
+ | z-index: 5; | ||
+ | border-radius: 300px; | ||
+ | } | ||
+ | |||
+ | div.device-hover-pic { | ||
+ | width: 783px; | ||
+ | height: 489px; | ||
+ | z-index: 3; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.device-hover-pic img { | ||
+ | width: 783px; | ||
+ | height: 489px; | ||
+ | margin: 0px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | div.device-desc { | ||
+ | position: absolute; | ||
+ | left: 10px; | ||
+ | top: 350px; | ||
+ | width: 170px; | ||
+ | padding: 7px; | ||
+ | background: #1A1A1A; | ||
+ | border-radius: 5px; | ||
+ | color: white; | ||
+ | z-index: 4; | ||
+ | } | ||
+ | |||
+ | div.device-hover:hover + div.device-hover-pic { | ||
+ | opacity: 0.9; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.device-hover.total:hover + div.device-hover-pic { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | div.device-desc h5 { | ||
+ | margin-top: 0px; | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | --> | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
<link rel="stylesheet" href="https://2013hs.igem.org/Team:MCIT_Indianapolis/CSS/foundation?action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2013hs.igem.org/Team:MCIT_Indianapolis/CSS/foundation?action=raw&ctype=text/css"> | ||
- | |||
+ | |||
+ | |||
+ | <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | ||
<link rel="stylesheet" href="https://2013hs.igem.org/Team:MCIT_Indianapolis/CSS/app2?action=raw&ctype=text/css""> | <link rel="stylesheet" href="https://2013hs.igem.org/Team:MCIT_Indianapolis/CSS/app2?action=raw&ctype=text/css""> | ||
+ | --> | ||
<!-- | <!-- | ||
Line 30: | Line 1,135: | ||
<link rel="stylesheet" href="https://2012.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2012.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css"> | ||
--> | --> | ||
- | |||
Line 36: | Line 1,140: | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
Line 46: | Line 1,147: | ||
<!-- IE Fix for HTML5 Tags --> | <!-- IE Fix for HTML5 Tags --> | ||
<!--[if lt IE 9]> | <!--[if lt IE 9]> | ||
- | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> |
+ | |||
+ | </script> | ||
Latest revision as of 20:58, 21 June 2013