Template:Team:Concordia/CSS
From 2014.igem.org
(Difference between revisions)
(442 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
/*Fix Wiki Default CSS*/ | /*Fix Wiki Default CSS*/ | ||
Line 8: | Line 7: | ||
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}; | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}; | ||
- | + | html, body { | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | ||
} | } | ||
Line 23: | Line 21: | ||
} | } | ||
- | + | #top-section { | |
- | + | border: 0 none; | |
- | height: 100%; | + | height: 10px; |
+ | z-index: 100; | ||
+ | top: -6px; | ||
+ | position: relative; | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
+ | background-color: 000; | ||
+ | } | ||
+ | |||
+ | #top-section-bar { | ||
+ | background-color:transparent; | ||
+ | height: 10px; | ||
+ | display: block; | ||
+ | z-index: 10; | ||
+ | position: fixed; | ||
+ | width:100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | #menubar { | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | } | ||
+ | |||
+ | #menubar a:link, #menubar a:visited { /*-- styling for default menu bar links (edit, page, history, etc.) --*/ | ||
+ | color:#FFF; | ||
+ | text-decoration: none; | ||
+ | background-color: transparent; | ||
+ | font-size:95%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menubar a:active, #menubar a:hover | ||
+ | { | ||
+ | color:#FFF; | ||
+ | text-decoration: underline; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | |||
+ | #menubar li{ | ||
+ | font-size:75%; | ||
} | } | ||
Line 31: | Line 69: | ||
body { | body { | ||
- | background: # | + | background: #FFF; |
font-family: 'Ubuntu', sans-serif; | font-family: 'Ubuntu', sans-serif; | ||
font-size: 12pt; | font-size: 12pt; | ||
color: rgba(0,0,0,0.55); | color: rgba(0,0,0,0.55); | ||
- | + | z-index: 1; | |
+ | min-width: 1000px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | body h2 { | ||
+ | text-align: center; | ||
} | } | ||
h1, h2, h3 { | h1, h2, h3 { | ||
- | color: #414141; | + | color: #414141 !important; |
} | } | ||
p { | p { | ||
- | line-height: | + | line-height: 160%; |
+ | color: #414141 !important; | ||
+ | |||
} | } | ||
Line 57: | Line 103: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
- | + | ||
+ | #igemnavbar { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 25px; | ||
+ | background-color: rgba(0,0,0,0.3); | ||
+ | position: relative; | ||
+ | bottom: 10px; | ||
+ | z-index: 1; | ||
+ | bottom: 25px; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | |||
+ | #backtoigem { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #backtoigem a { | ||
+ | color: white; | ||
+ | font-size: 0.65em; | ||
+ | position: relative; | ||
+ | bottom: 3px; | ||
+ | display: inline; | ||
+ | |||
+ | } | ||
+ | |||
+ | #backtoigem a:hover { | ||
+ | text-decoration: underline; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #backtoigem img { | ||
+ | height:10px; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | |||
+ | } | ||
+ | |||
+ | #landingspacer { | ||
+ | padding: 20px; | ||
+ | min-width: 1000px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #sidemenu { | ||
+ | padding:10px 100px; | ||
+ | float:left; | ||
+ | /*position:absolute;*/ | ||
+ | } | ||
+ | |||
+ | ul.simple-list {list-style-type:none;margin:0;padding:0;} | ||
+ | ul.simple-list a:hover {background-color:#dff2df;color:#3b8b5a;border:1px solid transparent;border-left:0;border-right:0;} | ||
+ | .simple-menu.simple-menu-open {background:#ffffff;border:1px solid #3b8b5a;} | ||
+ | .simple-menu.simple-menu-open {width:200px;font-family:sans-serif;} | ||
+ | .simple-menu .simple-menu-heading {color:#225F3A;text-transform:uppercase;font-size:90%;font-weight:bold;margin-top:.5em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#3b8b5a;} | ||
+ | .simple-menu a, .simple-menu .simple-menu-heading {display:block;line-height:1.5em;padding:5px 20px;text-decoration:none;} | ||
+ | .simple-menu a, .simple-menu {color:#3b8b5a;} | ||
+ | .simple-menu a {color:#3b8b5a;border:1px solid transparent;border-left:0;border-right:0;} | ||
+ | .menu-background {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;} | ||
+ | .menu-background a {color:#cccccc;text-decoration:none;font-weight:normal;} | ||
+ | .menu-background a:hover {color:#cccccc;text-decoration:none;font-weight:normal;} | ||
+ | |||
+ | |||
+ | /* | ||
+ | .button { | ||
+ | z-index: 1; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | border-top: 1px solid #97f7ad; | ||
+ | background: #193322; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#3e9c6f), to(#193322)); | ||
+ | background: -webkit-linear-gradient(top, #3e9c6f, #193322); | ||
+ | background: -moz-linear-gradient(top, #3e9c6f, #193322); | ||
+ | background: -ms-linear-gradient(top, #3e9c6f, #193322); | ||
+ | background: -o-linear-gradient(top, #3e9c6f, #193322); | ||
+ | padding: 5px 5px; | ||
+ | -webkit-border-radius: 11px; | ||
+ | -moz-border-radius: 11px; | ||
+ | border-radius: 11px; | ||
+ | -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: #e4e4f5; | ||
+ | font-size: 15px; | ||
+ | font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; | ||
+ | text-decoration: none; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .button:hover { | ||
+ | border-top-color: #294f35; | ||
+ | background: #294f35; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | .button a{ | ||
+ | color: white; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | |||
#header { | #header { | ||
- | |||
- | |||
- | |||
- | |||
- | |||
text-align: center; | text-align: center; | ||
margin: 0px auto; | margin: 0px auto; | ||
width: 100%; | width: 100%; | ||
display: block; | display: block; | ||
- | + | margin-top: -50px; | |
+ | min-width: 1000px; | ||
+ | z-index; 1000; | ||
} | } | ||
+ | |||
+ | #landinglogo { | ||
+ | padding-top: 2em; | ||
+ | text-shadow: 4px 4px 10px #46a76b, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | |||
+ | #landinglogo h1 { | ||
+ | padding-top: 0em; | ||
+ | font-size: 4.3em; | ||
+ | border-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #landinglogo a { | ||
+ | text-decoration: none; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | #landinglogo p { | ||
+ | color: #FFF; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | |||
#logo { | #logo { | ||
- | padding-top: | + | padding-top: 0.40em; |
text-shadow: 4px 4px 10px #46a76b, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; | text-shadow: 4px 4px 10px #46a76b, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; | ||
+ | min-width: 1000px; | ||
} | } | ||
#logo h1 { | #logo h1 { | ||
- | padding-top: 0. | + | padding-top: 0.90em; |
- | font-size: | + | font-size: 4.3em; |
+ | border-bottom: 0px; | ||
} | } | ||
Line 88: | Line 258: | ||
#logo p { | #logo p { | ||
color: #FFF; | color: #FFF; | ||
- | font-size: | + | font-size: 1.5em; |
- | + | ||
- | + | ||
} | } | ||
#menu { | #menu { | ||
- | height: 70px; | + | height: 75px; |
- | + | min-width: 1000px; | |
+ | position: relative; | ||
+ | bottom: 14px; | ||
+ | } | ||
+ | |||
+ | #maintab { | ||
+ | display: block; | ||
+ | text-transform: uppercase; | ||
+ | line-height: 70px; | ||
+ | color: #FFF; | ||
+ | padding: 0em 0.3em; | ||
+ | text-decoration: none; | ||
+ | font-size: 0.68em; | ||
+ | font-weight: 700; | ||
+ | background: rgba(0,0,0,0.4); | ||
+ | border-radius: 7px; | ||
+ | border-style: solid; | ||
+ | border-width: 2px !important; | ||
+ | border-color: white !important; | ||
} | } | ||
- | #menu | + | #menu .outerul { |
- | display: inline- | + | display: inline-table; |
+ | list-style: none; | ||
text-align: center; | text-align: center; | ||
position: relative; | position: relative; | ||
- | |||
} | } | ||
- | #menu | + | #menu .outerli:hover > .innerul{ |
- | + | display: block; | |
- | + | } | |
+ | |||
+ | #menu .outerli { | ||
+ | padding: 0em 0.3em; | ||
+ | float: left; | ||
+ | -webkit-transition: all .2s ease-in-out; | ||
+ | -moz-transition: all .2s ease-in-out; | ||
+ | transition: all .2s ease-in-out; | ||
+ | |||
} | } | ||
- | #menu | + | #menu .outera { |
- | display: | + | display: block; |
text-transform: uppercase; | text-transform: uppercase; | ||
- | line-height: | + | line-height: 70px; |
color: #FFF; | color: #FFF; | ||
- | padding: 0em | + | padding: 0em 0.3em; |
text-decoration: none; | text-decoration: none; | ||
- | font-size: | + | font-size: 0.68em; |
font-weight: 700; | font-weight: 700; | ||
+ | background: rgba(0,0,0,0.4); | ||
+ | border-radius: 7px; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: black; | ||
} | } | ||
- | #menu | + | #menu .innerul{ |
+ | display: none; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | padding: 0 0.3em; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #menu .innerli{ | ||
+ | float: none; | ||
+ | position: relative; | ||
+ | padding: 0.15em 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu .innera { | ||
+ | display: block; | ||
+ | text-transform: uppercase; | ||
+ | line-height: 70px; | ||
+ | color: #FFF; | ||
+ | text-decoration: none; | ||
+ | font-size: 0.68em; | ||
+ | font-weight: 700; | ||
+ | border-radius: 7px; | ||
+ | background: rgba(0,0,0,0.4); | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: black; | ||
+ | } | ||
+ | |||
+ | #menu .outera:hover { | ||
background: #FFF; | background: #FFF; | ||
- | border-radius: 7px | + | border-radius: 7px; |
color: #3b8b5a; | color: #3b8b5a; | ||
+ | border-style: solid; | ||
+ | border-color: #3b8b5a; | ||
+ | border-width: 1px; | ||
+ | |||
} | } | ||
- | # | + | #menu .innera:hover { |
+ | background: #FFF; | ||
+ | border-radius: 7px 7px 7px 7px; | ||
+ | color: #3b8b5a; | ||
+ | border-style: solid; | ||
+ | border-color: #3b8b5a; | ||
+ | border-width: 1px; | ||
+ | } | ||
+ | |||
+ | *, *:before, *:after{ | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | font-family: 'Ubuntu', sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #mywrapper | ||
{ | { | ||
- | |||
background: #FFF; | background: #FFF; | ||
padding: 3em 150px 2em 150px; | padding: 3em 150px 2em 150px; | ||
- | + | min-width: 1000px; | |
+ | font-size: 85% !important; | ||
+ | } | ||
+ | |||
+ | #mywrapper a{ | ||
+ | color: #3b8b5a; | ||
} | } | ||
#mainbody { | #mainbody { | ||
margin-bottom: 3.5em; | margin-bottom: 3.5em; | ||
+ | min-width: 1000px; | ||
} | } | ||
Line 142: | Line 401: | ||
font-size: 2.5em; | font-size: 2.5em; | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
+ | border-bottom: 0px solid #aaa !important; | ||
} | } | ||
Line 150: | Line 410: | ||
#mainbody img { | #mainbody img { | ||
max-height: 350px; | max-height: 350px; | ||
+ | } | ||
+ | |||
+ | #mainbody ul { | ||
+ | text-align: left !important; | ||
} | } | ||
Line 155: | Line 419: | ||
position: relative; | position: relative; | ||
top: -2em; | top: -2em; | ||
+ | min-width: 1000px; | ||
} | } | ||
#social span { | #social span { | ||
padding: 0em 1.8em; | padding: 0em 1.8em; | ||
+ | } | ||
+ | |||
+ | #social a { | ||
+ | background: none !important; | ||
} | } | ||
Line 165: | Line 434: | ||
.biorow1 { | .biorow1 { | ||
height: 300px; | height: 300px; | ||
+ | font-size: 90% !important; | ||
+ | line-height: 110% !important; | ||
+ | padding: 10px 0 !important; | ||
+ | min-width: 1000px; | ||
} | } | ||
Line 178: | Line 451: | ||
.biorow1 p { | .biorow1 p { | ||
padding: 0em 0em; | padding: 0em 0em; | ||
- | margin: | + | margin-top: 20px; |
line-height: 120%; | line-height: 120%; | ||
position: relative; | position: relative; | ||
bottom: 0.8em; | bottom: 0.8em; | ||
text-align: center; | text-align: center; | ||
+ | color: #414141; | ||
} | } | ||
.biorow2 { | .biorow2 { | ||
height: 300px; | height: 300px; | ||
+ | font-size: 90% !important; | ||
+ | line-height: 110% !important; | ||
+ | padding: 10px 0 !important; | ||
+ | min-width: 1000px; | ||
} | } | ||
Line 200: | Line 478: | ||
.biorow2 p { | .biorow2 p { | ||
padding: 0em 0em; | padding: 0em 0em; | ||
- | margin: | + | margin-top: 20px; |
line-height: 120%; | line-height: 120%; | ||
position: relative; | position: relative; | ||
bottom: 0.8em; | bottom: 0.8em; | ||
text-align: center; | text-align: center; | ||
+ | color: #414141; | ||
} | } | ||
/*Project Page *******************************************************************/ | /*Project Page *******************************************************************/ | ||
- | .projectdescription { | + | .projectdescription p{ |
- | text-align: justify; | + | text-align: justify !important; |
+ | font-weight: 100; | ||
+ | font-size: 0.9em; | ||
+ | min-width: 1000px; | ||
} | } | ||
Line 218: | Line 500: | ||
margin:0 auto !important; | margin:0 auto !important; | ||
+ | } | ||
+ | |||
+ | .projectdescription a:hover { | ||
+ | text-decoration: underline; | ||
} | } | ||
Line 616: | Line 902: | ||
} | } | ||
+ | /* | ||
+ | iGEM CONCORDIA BACKGROUNDS | ||
+ | */ | ||
+ | #landingbg { | ||
+ | position: fixed; | ||
+ | top: -50%; | ||
+ | left: -50%; | ||
+ | width: 200%; | ||
+ | height: 200%; | ||
+ | z-index: -10; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | #landingbg img { | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 65px; | ||
+ | margin: auto; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | |||
+ | #bg { | ||
+ | position: fixed; | ||
+ | top: -50%; | ||
+ | left: -50%; | ||
+ | width: 200%; | ||
+ | height: 200%; | ||
+ | z-index: -10; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | #bg img { | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 650px; | ||
+ | margin: auto; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* PAGE CHANGERS FOR PROJECT*/ | ||
+ | |||
+ | #previouspage a{ | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #previouspage img{ | ||
+ | max-height: 20px !important; | ||
+ | max-width: 20px !important; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #nextpage a{ | ||
+ | position: relative; | ||
+ | float: right; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #nextpage img{ | ||
+ | max-height: 20px !important; | ||
+ | max-width: 20px !important; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .notebook{ | ||
+ | display: block; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | padding: 0 100px; | ||
+ | } | ||
+ | .notebook p{ | ||
+ | text-align: justify; | ||
+ | font-size: 1.1em !important; | ||
+ | line-height: 125%; | ||
+ | } | ||
+ | |||
+ | #note { | ||
+ | font-size: 0.9em !important; | ||
+ | line-height: 18px !important; | ||
+ | } | ||
+ | #crumb a{ | ||
+ | font-size: smaller; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .notebook_image img{ | ||
+ | max-height: 100% !important; | ||
+ | } | ||
+ | |||
+ | .notebook figure{ | ||
+ | display: block; | ||
+ | |||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | .notebook figcaption{ | ||
+ | display: block; | ||
+ | line-height: 110%; | ||
+ | font-size: 0.9em; | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .tg {border-collapse:collapse;border-spacing:0;margin:0px auto;width:600px;} | ||
+ | .tg td{font-family:Arial, sans-serif;font-size:14px;padding:5px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;} | ||
+ | .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;} | ||
+ | .tg .tg-s6z2{text-align:center} | ||
+ | .tg .tg-pmng{background-color:#d3eadd;text-align:center} | ||
+ | .tg .tg-hgcj{font-weight:bold;text-align:center} | ||
+ | .tg .tg-9hxf{font-style:italic;background-color:#d3eadd;text-align:center} | ||
+ | .tg .tg-8y28{background-color:#d3eadd;color:#000000;text-align:center} | ||
+ | |||
+ | ol.nest1{ | ||
+ | list-style-type: lower-alpha; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | ol.nest2{ | ||
+ | list-style-type: lower-roman; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | ul.nest1{ | ||
+ | list-style-type: circle; | ||
+ | } | ||
+ | |||
+ | h4.left{ | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | h5.left{ | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .notebook h2{ | ||
+ | line-height: 110% !important; | ||
+ | } | ||
+ | |||
+ | #species{ | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | .figureimage { | ||
+ | max-height: 600px !important; | ||
+ | border: none !important; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 02:21, 18 October 2014