Template:Team:Alberta/2011style.css
From 2011.igem.org
(380 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | /* TOP | + | /* Style sheet for 2011 wiki page */ |
+ | |||
+ | |||
+ | /* Colors: | ||
+ | |||
+ | grey: 959995 | ||
+ | orange navbar: f09131 | ||
+ | orange box: f19232 | ||
+ | beige: fffcd5 | ||
+ | green: 5db54b | ||
+ | |||
+ | */ | ||
+ | |||
+ | #menubar a:visited { color: transparent; } | ||
+ | |||
+ | body { | ||
+ | //background-color: #959995; | ||
+ | //background-color: #757575; | ||
+ | //background-color: #ffffff; | ||
+ | //background-color: #555555; | ||
+ | font-family: verdana; | ||
+ | background-color: #ddd; | ||
+ | background-attachment: fixed; | ||
+ | } | ||
+ | /* TOP MENU SECTION*/ | ||
#top-section { | #top-section { | ||
- | |||
width: 1000px; | width: 1000px; | ||
+ | height: auto; | ||
border: 0px; | border: 0px; | ||
padding: 0px; | padding: 0px; | ||
Line 13: | Line 37: | ||
#p-logo { | #p-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .left-menu, .right-menu { | ||
+ | margin: 2px; | ||
+ | } | ||
+ | |||
+ | .left-menu:hover, .right-menu ul li a { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .right-menu li a { | ||
+ | color: transparent; | ||
+ | } | ||
+ | |||
+ | .left-menu:hover ul li a, .right-menu:hover ul li a { | ||
+ | color: #959995; | ||
+ | } | ||
+ | |||
+ | .left-menu li { | ||
+ | color: transparent !important; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
display: none; | display: none; | ||
} | } | ||
Line 19: | Line 67: | ||
#navbar { | #navbar { | ||
- | + | //width: 950px; | |
- | + | /*background-color: #f09131;*/ | |
- | + | //margin-left:15px; | |
+ | //margin-right:15px; | ||
+ | //padding-left: 10px; | ||
+ | //padding-right: 10px; | ||
+ | height: 78px; | ||
+ | /*border-radius: 2px;*/ | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/6/6e/Alberta_navbar_green2.png) | ||
} | } | ||
Line 27: | Line 81: | ||
list-style:none; | list-style:none; | ||
margin: 0px; | margin: 0px; | ||
- | + | font-size: 16pt; | |
- | + | ||
} | } | ||
Line 34: | Line 87: | ||
position:relative; | position:relative; | ||
float:left; | float:left; | ||
+ | margin: 0px; | ||
+ | height: 78px; | ||
+ | } | ||
+ | |||
+ | #navbar ul li ul { | ||
+ | border-style: solid; | ||
+ | border-color: #3C2415; | ||
+ | background-color: #33AA33; | ||
+ | border-width: 2px; | ||
} | } | ||
#navbar ul li a:visited, #navbar ul li a:link{ | #navbar ul li a:visited, #navbar ul li a:link{ | ||
display:block; | display:block; | ||
- | height: | + | height:78px; |
color:#FFFFFF; | color:#FFFFFF; | ||
- | background-color:#F7941E; | + | /*background-color:#F7941E;*/ |
- | + | padding-left: 19px; | |
- | padding-left: | + | padding-right: 19px; |
- | padding-right: | + | |
} | } | ||
+ | |||
+ | li#nav-interactive{ | ||
+ | float:right !important; | ||
+ | } | ||
+ | a#nav-interactive-a{ | ||
+ | padding-left:21px !important; | ||
+ | padding-right:21px !important; | ||
+ | } | ||
+ | |||
+ | |||
#navbar ul li a:hover, #navbar ul li a.selected { | #navbar ul li a:hover, #navbar ul li a.selected { | ||
- | + | color: #000000; | |
text-decoration:none; | text-decoration:none; | ||
left:auto; | left:auto; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/4/4b/Alberta_navbar_hover.png); | ||
} | } | ||
Line 56: | Line 128: | ||
display:none; | display:none; | ||
list-style:none; | list-style:none; | ||
- | + | color:#000000; | |
text-align:center; | text-align:center; | ||
} | } | ||
#navbar li.headlink ul li { | #navbar li.headlink ul li { | ||
- | width: | + | width: 280px; |
} | } | ||
Line 67: | Line 139: | ||
#content { | #content { | ||
width: 1000px; | width: 1000px; | ||
- | |||
border: 0px; | border: 0px; | ||
padding: 0px; | padding: 0px; | ||
Line 77: | Line 148: | ||
#catlinks { display: none; } | #catlinks { display: none; } | ||
- | /* | + | #contentSub { margin: 0px; } |
- | + | ||
- | width: | + | p { margin: 0px; } |
- | background-color: | + | |
+ | #top-content { | ||
+ | background-color: #ffffff; | ||
+ | height: 125px; | ||
+ | //width: 970px; /* maybe change height, width to fit image */ | ||
+ | //margin-left: 15px; | ||
+ | //margin-right: 15px; | ||
+ | padding-top: 10px; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/9/99/Alberta_banner_back.png) | ||
+ | } | ||
+ | |||
+ | img.ta { | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | left: 20px; | ||
+ | } | ||
+ | |||
+ | img.igem { | ||
+ | position: relative; | ||
+ | float: right; | ||
+ | right: 20px; | ||
+ | top: 15px; | ||
+ | width: 120px; | ||
+ | } | ||
+ | |||
+ | #main-content { | ||
+ | /*//color: #808080;*/ | ||
+ | /*//background-color: white;*/ | ||
+ | margin-left:15px; | ||
+ | margin-right: 15px; | ||
+ | } | ||
+ | |||
+ | #main-content table.student-table td { | ||
+ | padding-left: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-right: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | } | ||
+ | |||
+ | #main-content table.student-table td img:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #main-content h2 { | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | color: #f19232; | ||
+ | border-width: 0px; | ||
+ | } | ||
+ | |||
+ | #main-content h3 { | ||
+ | font-weight: bold; | ||
+ | font-size: 16px; | ||
+ | color: #000000; | ||
+ | border-width: 0px; | ||
+ | } | ||
+ | |||
+ | #main-content h4 { | ||
+ | color: #5db54b; | ||
+ | } | ||
+ | |||
+ | |||
+ | #main-content td{ | ||
+ | /*color: #808080;*/ | ||
+ | text-align: justify; | ||
+ | padding: 8px; | ||
+ | } | ||
+ | |||
+ | #ingenuity-button, #cost-button, #sustainability-button { | ||
border-style: solid; | border-style: solid; | ||
+ | border-color: #808080; | ||
border-width: 1px; | border-width: 1px; | ||
- | border-color: | + | height: 50px; |
+ | width: 290px; | ||
+ | margin: 5px; | ||
+ | text-align: center; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | #main-content td a:link { color: #f19232; } | ||
+ | #main-content td a:visited { color: #f19232; } | ||
+ | #main-content td a:active { color: #f19232; } | ||
+ | #main-content td a:hover { color: #f19232; } | ||
+ | |||
+ | #page-content a:link { color: #f19232; } | ||
+ | #page-content a:visited { color: #f19232; } | ||
+ | #page-content a:active { color: #f19232; } | ||
+ | #page-content a:hover { color: #f19232; } | ||
+ | |||
+ | .frontpage-slide a:link { color: #f19232; } | ||
+ | .frontpage-slide a:visited { color: #f19232; } | ||
+ | .frontpage-slide a:active { color: #f19232; } | ||
+ | .frontpage-slide a:hover { color: #f19232; } | ||
+ | |||
+ | #top-pictures { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 10px; | ||
+ | margin-left: 40px; | ||
+ | margin-right: 40px; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #808080; | ||
+ | } | ||
+ | |||
+ | #top-pictures .pictures { | ||
+ | background-color: transparent; | ||
+ | border-spacing: 5px; | ||
+ | } | ||
+ | |||
+ | #top-pictures .pictures td:hover { | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | |||
+ | #top-pictures .pictures td { | ||
+ | font-weight: bold; | ||
+ | font-size: 14px; | ||
+ | text-align: center; | ||
+ | width: 20px; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #808080; | ||
+ | } | ||
+ | |||
+ | #the-plan { | ||
+ | background-color: #fffcd5; | ||
+ | width: 400px; | ||
+ | text-align: justify; | ||
+ | font-size: 12px; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | #page-title { | ||
+ | color: #33aa33; /*TODO get correct green*/ | ||
+ | font-size: 24px; | ||
+ | font-weight: bold; | ||
+ | margin-top: 25px; | ||
+ | margin-bottom: 17px; | ||
+ | height: 20px; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/e/e2/Horiz-green-bar.png); | ||
+ | } | ||
+ | |||
+ | .section-title { | ||
+ | color: #33aa33; /*TODO get correct green*/ | ||
+ | font-size: 24px; | ||
+ | font-weight: bold; | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | height: 20px; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/e/e2/Horiz-green-bar.png); | ||
+ | } | ||
+ | |||
+ | /* green bar */ | ||
+ | #page-title-text{ | ||
+ | background-color: #fff; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | #section-title { | ||
+ | font-color: #33aa33; /*TODO get correct green*/ | ||
+ | font-size: 24px; | ||
+ | font-weight: bold; | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #interact-title { | ||
+ | color: #f19232; | ||
+ | font-weight: bold; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | #round-pic { | ||
+ | border-style: solid; | ||
+ | border-radius: 25px; | ||
+ | border-color: #808080; | ||
+ | border-width: 2px; | ||
+ | } | ||
+ | |||
+ | #media-pic { | ||
+ | border-style: solid; | ||
+ | border-color: #808080; | ||
+ | border-width: 2px; | ||
+ | } | ||
+ | |||
+ | /* PAGE LAYOUT SECTION */ | ||
+ | |||
+ | #contents-box { | ||
+ | float: left; | ||
+ | height: 600px; | ||
+ | //width: 160px; | ||
+ | width: 225px; | ||
+ | margin: 12px 0px; | ||
+ | padding: 5px 10px; | ||
+ | background-color: #ccc; | ||
+ | } | ||
+ | |||
+ | #contents-box ul{ | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #subpage-links li { | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | #subpage-links a { | ||
+ | font-size: 14px; | ||
+ | color: #555; | ||
+ | } | ||
+ | |||
+ | #active-subpage { | ||
+ | font-weight: bold; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | #subpage-links ul li{ | ||
+ | margin-top: 0px; | ||
+ | } | ||
+ | |||
+ | #page-content{ | ||
+ | float: right; | ||
+ | width: 685px; | ||
+ | } | ||
+ | |||
+ | .page-content-full{ | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .frontpage-content-right{ | ||
+ | float: right; | ||
+ | width: 340px; | ||
+ | } | ||
+ | .frontpage-content-left{ | ||
+ | float: left; | ||
+ | width: 600px; | ||
+ | } | ||
+ | |||
+ | img.sponsor-logo { | ||
+ | width: 188px; | ||
+ | margin: 10px 25px; | ||
+ | } | ||
+ | |||
+ | div#sponsor-page-logos img { | ||
+ | width: 175px; | ||
+ | margin: 10px 25px; | ||
+ | } | ||
+ | |||
+ | /* FOOTER SECTION */ | ||
+ | /* custom footer */ | ||
+ | #content-footer-box { | ||
+ | //width: 970px; | ||
+ | background-color: #ccc; | ||
+ | color: #888; | ||
+ | margin: auto; | ||
+ | margin-top: 20px; | ||
padding: 0px; | padding: 0px; | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | #content-footer-box ul{ | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #content-footer-box li { | ||
+ | /*background-color: white;*/ | ||
+ | margin: 0.5em 0; | ||
+ | } | ||
+ | |||
+ | #content-footer-box li a { | ||
+ | color: #888; | ||
+ | } | ||
+ | |||
+ | /*wiki standard footer */ | ||
+ | #footer-box { | ||
+ | width: 960px; | ||
+ | background-color: #ccc; | ||
+ | margin-top: 0px; | ||
+ | padding: 20px; | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | .footer-left-half{ | ||
+ | width: 500px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .footer-right-half{ | ||
+ | width: 500px; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .footer-left-col{ | ||
+ | width: 200px; | ||
+ | float: left; | ||
+ | padding: 20px 10px; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | |||
+ | .footer-right-left-col{ | ||
+ | width: 210px; | ||
+ | float: left; | ||
+ | padding: 20px 10px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .footer-right-left-col ul{ | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .footer-right-col{ | ||
+ | width: 230px; | ||
+ | float: right; | ||
+ | padding: 20px 10px; | ||
+ | } | ||
+ | |||
+ | .footer-right-right-col{ | ||
+ | width: 240px; | ||
+ | float: right; | ||
+ | padding: 20px 10px; | ||
+ | } | ||
+ | |||
+ | input.searchInput { | ||
+ | } | ||
+ | input.searchButton { | ||
+ | font-weight: bold; | ||
+ | color: #888; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | #clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | * jQuery FlexSlider v1.7 | ||
+ | * http://flex.madebymufffin.com | ||
+ | * | ||
+ | * Copyright 2011, Tyler Smith | ||
+ | * Free to use under the MIT license. | ||
+ | * http://www.opensource.org/licenses/mit-license.php | ||
+ | */ | ||
+ | |||
+ | /* Browser Resets */ | ||
+ | .flex-container a:active, | ||
+ | .flexslider a:active {outline: none;} | ||
+ | .slides, | ||
+ | .flex-control-nav, | ||
+ | .flex-direction-nav {margin: 0; padding: 0; list-style: none;} | ||
+ | |||
+ | /* FlexSlider Necessary Styles | ||
+ | *********************************/ | ||
+ | .flexslider {width: 100%; margin: 0; padding: 0;} | ||
+ | .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ | ||
+ | .flexslider .slides img {max-width: 100%; display: block;} | ||
+ | .flex-pauseplay span {text-transform: capitalize;} | ||
+ | |||
+ | /* Clearfix for the .slides element */ | ||
+ | .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} | ||
+ | html[xmlns] .slides {display: block;} | ||
+ | * html .slides {height: 1%;} | ||
+ | |||
+ | /* No JavaScript Fallback */ | ||
+ | /* If you are not using another script, such as Modernizr, make sure you | ||
+ | * include js that eliminates this class on page load */ | ||
+ | .no-js .slides > li:first-child {display: block;} | ||
+ | |||
+ | |||
+ | /* FlexSlider Default Theme | ||
+ | *********************************/ | ||
+ | .flexslider {background: #fff; | ||
+ | /*border: 4px solid #fff; */ | ||
+ | position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} | ||
+ | .flexslider .slides {zoom: 1;} | ||
+ | .flexslider .slides > li {position: relative;} | ||
+ | /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ | ||
+ | .flex-container {zoom: 1; position: relative;} | ||
+ | |||
+ | /* Caption style */ | ||
+ | /* IE rgba() hack */ | ||
+ | .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); | ||
+ | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} | ||
+ | .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;} | ||
+ | |||
+ | /* Direction Nav */ | ||
+ | .flex-direction-nav li a { | ||
+ | width: 52px; | ||
+ | height: 52px; | ||
+ | margin: -13px 0 0; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2011/7/7b/Alberta_arrows.png) no-repeat 0 0; | ||
+ | position: absolute; | ||
+ | top: 42%; | ||
+ | cursor: pointer; | ||
+ | text-indent: -9999px; | ||
+ | } | ||
+ | |||
+ | .flex-direction-nav li a.next {background-position: -52px 0; right: 0px;} | ||
+ | .flex-direction-nav li a.prev {background-position: 0 0; left: 0px;} | ||
+ | .flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} | ||
+ | |||
+ | /* Control Nav */ | ||
+ | .flex-control-nav { | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | bottom: 30px; | ||
+ | left: 58px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} | ||
+ | .flex-control-nav li:first-child {margin: 0;} | ||
+ | .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(https://static.igem.org/mediawiki/2011/a/aa/Alberta_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} | ||
+ | .flex-control-nav li a:hover {background-position: 0 -13px;} | ||
+ | .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;} | ||
+ | |||
+ | /* END flexslider styling ***************************************************/ | ||
+ | |||
+ | .flexslider { | ||
+ | width: 950px; | ||
+ | margin: 20px 10px 0px; | ||
+ | } | ||
+ | |||
+ | div.frontpage-slide { | ||
+ | height: 300px; | ||
+ | background-color: #CCC; | ||
+ | } | ||
+ | |||
+ | div.frontpage-slide img{ | ||
+ | height: 300px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | div.slide-right-col { | ||
+ | color: #33AA33; | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | font-size: 16px; | ||
+ | margin-top: 30px; | ||
+ | margin-right: 50px; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | div.slide-heading { | ||
+ | font-size: 30px; | ||
+ | font-weight: bold; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .tweet, | ||
+ | .query { | ||
+ | font: 120% Georgia, serif; | ||
+ | color: #085258; | ||
+ | } | ||
+ | |||
+ | .tweet_list { | ||
+ | -webkit-border-radius: 0.5em; | ||
+ | -moz-border-radius: 0.5em; | ||
+ | border-radius: 0.5em; | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow-y: hidden; | ||
+ | background-color: #8ADEE2; | ||
+ | } | ||
+ | |||
+ | .tweet_list .awesome, | ||
+ | .tweet_list .epic { | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .tweet_list li { | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | padding: 0.5em; | ||
+ | } | ||
+ | |||
+ | .tweet_list li a { | ||
+ | color: #0C717A; | ||
+ | } | ||
+ | |||
+ | .tweet_list .tweet_even { | ||
+ | background-color: #91E5E7; | ||
+ | } | ||
+ | |||
+ | .tweet_list .tweet_avatar { | ||
+ | padding-right: .5em; float: left; | ||
+ | } | ||
+ | |||
+ | .tweet_list .tweet_avatar img { | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | div#interact-links { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | a#int-fb { | ||
+ | float: left; | ||
+ | margin-left: 25px; | ||
+ | } | ||
+ | |||
+ | a#int-twitter { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | a#int-youtube { | ||
+ | float: right; | ||
+ | margin-right: 25px; | ||
+ | } | ||
+ | |||
+ | a#sustainability-img { | ||
+ | float:right; | ||
+ | width: 184px; | ||
+ | height: 100px; | ||
+ | background:url(https://static.igem.org/mediawiki/2011/c/cc/Alberta_sustainability.png) bottom; | ||
+ | text-indent: -99999px | ||
+ | } | ||
+ | |||
+ | a#costefficiency-img { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | width: 184px; | ||
+ | height: 100px; | ||
+ | background:url(https://static.igem.org/mediawiki/2011/b/b5/Alberta_costefficiency.png) bottom; | ||
+ | text-indent: -99999px | ||
+ | } | ||
+ | |||
+ | a#ingenuity-img { | ||
+ | float: left; | ||
+ | width: 184px; | ||
+ | height: 100px; | ||
+ | background:url(https://static.igem.org/mediawiki/2011/a/a7/Alberta_ingenuity.png) bottom; | ||
+ | text-indent: -99999px | ||
+ | } | ||
+ | |||
+ | a#wiki-tour-link img { | ||
+ | margin: 20px 0px; | ||
+ | } | ||
+ | |||
+ | a#sustainability-img:hover { background-position: 0 0; } | ||
+ | a#costefficiency-img:hover { background-position: 0 0; } | ||
+ | a#ingenuity-img:hover { background-position: 0 0; } | ||
+ | |||
+ | img.tour-img { | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | #wiki-tour-table td { | ||
+ | text-align: left; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | .tweet-container { | ||
+ | float: left; | ||
+ | width: 310px; | ||
+ | } | ||
+ | .fb-container { | ||
+ | float: right; | ||
+ | width: 310px; | ||
+ | } | ||
+ | |||
+ | div.safety-img { | ||
+ | float: right; | ||
+ | padding: 25px; | ||
+ | width: 240px; | ||
+ | } | ||
+ | |||
+ | div.safety-img img{ | ||
+ | width: 220px; | ||
+ | } | ||
+ | |||
+ | div.supervisor-left { | ||
+ | float:left; | ||
+ | } | ||
+ | div.supervisor-right { | ||
+ | float:right; | ||
+ | width:500px; | ||
+ | } | ||
+ | |||
+ | div.student-large { | ||
+ | float:left; | ||
+ | } | ||
+ | div.student-thumbs { | ||
+ | float:right; | ||
+ | width:300px; | ||
+ | } | ||
+ | |||
+ | ol#reference-list { | ||
+ | list-style-type: lower-roman; | ||
+ | } | ||
+ | |||
+ | ul#subpage-links li a.selected { | ||
+ | text-transform:uppercase; | ||
+ | font-weight: bold; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | ul#subpage-links li ul { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | ul#subpage-links li ul.selected { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | /*background-color:transparent; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2011/b/b8/Background-translucent.png);*/ | ||
+ | } | ||
+ | |||
+ | table.figure { | ||
+ | border-spacing:0px; | ||
+ | border-bottom: 2px solid black; | ||
+ | } | ||
+ | |||
+ | table.figure th{ | ||
+ | /*max-width: 200px;*/ | ||
+ | padding-left: 5px; | ||
+ | padding-right: 5px; | ||
+ | } | ||
+ | |||
+ | tr.top td, tr.top th{ | ||
+ | border-top: 2px solid black; | ||
+ | border-bottom: 2px solid black; | ||
+ | } | ||
+ | |||
+ | th.border_bottom { | ||
+ | border-bottom: 2px solid black; | ||
+ | } | ||
+ | |||
+ | tr.top_top td, tr.top_top th{ | ||
+ | border-top: 2px solid black; | ||
+ | } | ||
+ | tr.top_bottom td, tr.top_bottom th{ | ||
+ | border-bottom: 2px solid black; | ||
+ | } | ||
+ | |||
+ | table.figure td { | ||
+ | color: #333 !important; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | table.figure tr.odd td, table.figure tr.odd th { | ||
+ | background-color: #ccc; | ||
+ | } | ||
+ | |||
+ | table#wiki-tour { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | img.overview-link { | ||
+ | width: 250px; | ||
+ | } | ||
+ | img.content-img { | ||
+ | margin: 10px; | ||
+ | } | ||
+ | img.content-img-left { | ||
+ | margin: 10px; | ||
+ | float:left; | ||
+ | } | ||
+ | img.content-img-right { | ||
+ | margin: 10px; | ||
+ | float:right; | ||
} | } |
Latest revision as of 17:33, 28 September 2011
/* Style sheet for 2011 wiki page */
/* Colors:
grey: 959995 orange navbar: f09131 orange box: f19232 beige: fffcd5 green: 5db54b
- /
- menubar a:visited { color: transparent; }
body {
//background-color: #959995; //background-color: #757575; //background-color: #ffffff; //background-color: #555555; font-family: verdana; background-color: #ddd; background-attachment: fixed;
} /* TOP MENU SECTION*/
- top-section {
width: 1000px; height: auto; border: 0px; padding: 0px; margin-bottom: 0px;
}
- firstHeading {
display: none;
}
- p-logo {
display: none;
}
.left-menu, .right-menu {
margin: 2px;
}
.left-menu:hover, .right-menu ul li a {
background-color: transparent;
}
.right-menu li a {
color: transparent;
}
.left-menu:hover ul li a, .right-menu:hover ul li a {
color: #959995;
}
.left-menu li {
color: transparent !important;
}
- search-controls {
display: none;
}
/* NAVBAR SECTION ... which is really part of content */
- navbar {
//width: 950px; /*background-color: #f09131;*/ //margin-left:15px; //margin-right:15px; //padding-left: 10px; //padding-right: 10px; height: 78px; /*border-radius: 2px;*/ background-image:url()
}
- navbar ul {
list-style:none; margin: 0px; font-size: 16pt;
}
- navbar ul li {
position:relative; float:left; margin: 0px; height: 78px;
}
- navbar ul li ul {
border-style: solid; border-color: #3C2415; background-color: #33AA33; border-width: 2px;
}
- navbar ul li a:visited, #navbar ul li a:link{
display:block; height:78px; color:#FFFFFF; /*background-color:#F7941E;*/ padding-left: 19px; padding-right: 19px;
}
li#nav-interactive{
float:right !important;
} a#nav-interactive-a{
padding-left:21px !important; padding-right:21px !important;
}
- navbar ul li a:hover, #navbar ul li a.selected {
color: #000000; text-decoration:none; left:auto; background-image:url();
}
- navbar li.headlink ul{
position: absolute; display:none; list-style:none; color:#000000; text-align:center;
}
- navbar li.headlink ul li {
width: 280px;
}
/* CONTENT SECTION */
- content {
width: 1000px; border: 0px; padding: 0px; margin-top: 0px;
}
h1.firstHeading { display:none; }
- catlinks { display: none; }
- contentSub { margin: 0px; }
p { margin: 0px; }
- top-content {
background-color: #ffffff; height: 125px; //width: 970px; /* maybe change height, width to fit image */ //margin-left: 15px; //margin-right: 15px; padding-top: 10px; background-image:url()
}
img.ta {
position: relative; float: left; left: 20px;
}
img.igem {
position: relative; float: right; right: 20px; top: 15px; width: 120px;
}
- main-content {
/*//color: #808080;*/ /*//background-color: white;*/ margin-left:15px; margin-right: 15px;
}
- main-content table.student-table td {
padding-left: 0px; padding-top: 0px; padding-right: 5px; padding-bottom: 5px;
}
- main-content table.student-table td img:hover {
cursor: pointer;
}
- main-content h2 {
font-weight: bold; font-size: 18px; color: #f19232; border-width: 0px;
}
- main-content h3 {
font-weight: bold; font-size: 16px; color: #000000; border-width: 0px;
}
- main-content h4 {
color: #5db54b;
}
- main-content td{
/*color: #808080;*/ text-align: justify; padding: 8px;
}
- ingenuity-button, #cost-button, #sustainability-button {
border-style: solid; border-color: #808080; border-width: 1px; height: 50px; width: 290px; margin: 5px; text-align: center; font-size: 20px;
}
- main-content td a:link { color: #f19232; }
- main-content td a:visited { color: #f19232; }
- main-content td a:active { color: #f19232; }
- main-content td a:hover { color: #f19232; }
- page-content a:link { color: #f19232; }
- page-content a:visited { color: #f19232; }
- page-content a:active { color: #f19232; }
- page-content a:hover { color: #f19232; }
.frontpage-slide a:link { color: #f19232; } .frontpage-slide a:visited { color: #f19232; } .frontpage-slide a:active { color: #f19232; } .frontpage-slide a:hover { color: #f19232; }
- top-pictures {
margin-top: 30px; margin-bottom: 10px; margin-left: 40px; margin-right: 40px; border-style: solid; border-width: 1px; border-color: #808080;
}
- top-pictures .pictures {
background-color: transparent; border-spacing: 5px;
}
- top-pictures .pictures td:hover {
background-color: #ffffff;
}
- top-pictures .pictures td {
font-weight: bold; font-size: 14px; text-align: center; width: 20px; border-style: solid; border-width: 1px; border-color: #808080;
}
- the-plan {
background-color: #fffcd5; width: 400px; text-align: justify; font-size: 12px; padding: 20px;
}
- page-title {
color: #33aa33; /*TODO get correct green*/ font-size: 24px; font-weight: bold; margin-top: 25px; margin-bottom: 17px; height: 20px; background-image:url();
}
.section-title {
color: #33aa33; /*TODO get correct green*/ font-size: 24px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; height: 20px; background-image:url();
}
/* green bar */
- page-title-text{
background-color: #fff; padding-right: 10px;
}
- section-title {
font-color: #33aa33; /*TODO get correct green*/ font-size: 24px; font-weight: bold; margin-top: 10px; margin-bottom: 10px;
}
- interact-title {
color: #f19232; font-weight: bold; font-size: 16px;
}
- round-pic {
border-style: solid; border-radius: 25px; border-color: #808080; border-width: 2px;
}
- media-pic {
border-style: solid; border-color: #808080; border-width: 2px;
}
/* PAGE LAYOUT SECTION */
- contents-box {
float: left; height: 600px; //width: 160px; width: 225px; margin: 12px 0px; padding: 5px 10px; background-color: #ccc;
}
- contents-box ul{
list-style: none;
}
- subpage-links li {
margin-top: 20px;
}
- subpage-links a {
font-size: 14px; color: #555;
}
- active-subpage {
font-weight: bold; font-size: 16px;
}
- subpage-links ul li{
margin-top: 0px;
}
- page-content{
float: right; width: 685px;
}
.page-content-full{ }
.frontpage-content-right{
float: right; width: 340px;
} .frontpage-content-left{
float: left; width: 600px;
}
img.sponsor-logo {
width: 188px; margin: 10px 25px;
}
div#sponsor-page-logos img {
width: 175px; margin: 10px 25px;
}
/* FOOTER SECTION */ /* custom footer */
- content-footer-box {
//width: 970px; background-color: #ccc; color: #888; margin: auto; margin-top: 20px; padding: 0px; border: 0px;
}
- content-footer-box ul{
list-style: none;
}
- content-footer-box li {
/*background-color: white;*/ margin: 0.5em 0;
}
- content-footer-box li a {
color: #888;
}
/*wiki standard footer */
- footer-box {
width: 960px; background-color: #ccc; margin-top: 0px; padding: 20px; border: 0px;
}
.footer-left-half{
width: 500px; float: left;
}
.footer-right-half{
width: 500px; float: right;
}
.footer-left-col{
width: 200px; float: left; padding: 20px 10px; padding-left: 20px;
}
.footer-right-left-col{
width: 210px; float: left; padding: 20px 10px; padding-left: 10px;
}
.footer-right-left-col ul{
margin: 0px;
}
.footer-right-col{
width: 230px; float: right; padding: 20px 10px;
}
.footer-right-right-col{
width: 240px; float: right; padding: 20px 10px;
}
input.searchInput { } input.searchButton {
font-weight: bold; color: #888; margin: 0;
}
.clear {
clear:both;
}
- clear {
clear:both;
}
/*
* jQuery FlexSlider v1.7 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */
/* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
- /
.flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;}
- html .slides {height: 1%;}
/* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
- /
.flexslider {background: #fff;
/*border: 4px solid #fff; */ position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;}
/* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
/* Direction Nav */ .flex-direction-nav li a {
width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url() no-repeat 0 0; position: absolute; top: 42%; cursor: pointer; text-indent: -9999px;
}
.flex-direction-nav li a.next {background-position: -52px 0; right: 0px;} .flex-direction-nav li a.prev {background-position: 0 0; left: 0px;} .flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */ .flex-control-nav {
width: 100%; position: absolute; bottom: 30px; left: 58px; text-align: center;
}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url() no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
/* END flexslider styling ***************************************************/
.flexslider {
width: 950px; margin: 20px 10px 0px;
}
div.frontpage-slide {
height: 300px; background-color: #CCC;
}
div.frontpage-slide img{
height: 300px; float: left;
}
div.slide-right-col {
color: #33AA33; float: right; width: 400px; font-size: 16px; margin-top: 30px; margin-right: 50px; line-height: 1.5em;
}
div.slide-heading {
font-size: 30px; font-weight: bold; margin-bottom: 20px;
}
.tweet, .query { font: 120% Georgia, serif; color: #085258; }
.tweet_list {
-webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; list-style: none; margin: 0; padding: 0; overflow-y: hidden; background-color: #8ADEE2;
}
.tweet_list .awesome, .tweet_list .epic {
text-transform: uppercase;
}
.tweet_list li {
overflow-y: auto; overflow-x: hidden; padding: 0.5em;
}
.tweet_list li a {
color: #0C717A;
}
.tweet_list .tweet_even {
background-color: #91E5E7;
}
.tweet_list .tweet_avatar {
padding-right: .5em; float: left;
}
.tweet_list .tweet_avatar img {
vertical-align: middle;
}
div#interact-links {
text-align: center;
}
a#int-fb {
float: left; margin-left: 25px;
}
a#int-twitter {
margin: 0 auto;
}
a#int-youtube {
float: right; margin-right: 25px;
}
a#sustainability-img {
float:right; width: 184px; height: 100px; background:url() bottom; text-indent: -99999px
}
a#costefficiency-img {
display: block; margin: 0 auto; width: 184px; height: 100px; background:url() bottom; text-indent: -99999px
}
a#ingenuity-img {
float: left; width: 184px; height: 100px; background:url() bottom; text-indent: -99999px
}
a#wiki-tour-link img {
margin: 20px 0px;
}
a#sustainability-img:hover { background-position: 0 0; } a#costefficiency-img:hover { background-position: 0 0; } a#ingenuity-img:hover { background-position: 0 0; }
img.tour-img {
width: 150px;
}
- wiki-tour-table td {
text-align: left; vertical-align: top;
}
.tweet-container {
float: left; width: 310px;
} .fb-container {
float: right; width: 310px;
}
div.safety-img {
float: right; padding: 25px; width: 240px;
}
div.safety-img img{
width: 220px;
}
div.supervisor-left {
float:left;
} div.supervisor-right {
float:right; width:500px;
}
div.student-large {
float:left;
} div.student-thumbs {
float:right; width:300px;
}
ol#reference-list {
list-style-type: lower-roman;
}
ul#subpage-links li a.selected {
text-transform:uppercase; font-weight: bold; font-size: 16px;
}
ul#subpage-links li ul {
display:none;
}
ul#subpage-links li ul.selected {
display: block;
}
- content {
/*background-color:transparent; background-image:url(https://static.igem.org/mediawiki/2011/b/b8/Background-translucent.png);*/
}
table.figure {
border-spacing:0px; border-bottom: 2px solid black;
}
table.figure th{
/*max-width: 200px;*/ padding-left: 5px; padding-right: 5px;
}
tr.top td, tr.top th{
border-top: 2px solid black; border-bottom: 2px solid black;
}
th.border_bottom {
border-bottom: 2px solid black;
}
tr.top_top td, tr.top_top th{
border-top: 2px solid black;
} tr.top_bottom td, tr.top_bottom th{
border-bottom: 2px solid black;
}
table.figure td {
color: #333 !important; text-align: center !important;
}
table.figure tr.odd td, table.figure tr.odd th {
background-color: #ccc;
}
table#wiki-tour {
color: black;
}
img.overview-link {
width: 250px;
} img.content-img {
margin: 10px;
} img.content-img-left {
margin: 10px; float:left;
} img.content-img-right {
margin: 10px; float:right;
}