"
Team:Calgary/static/basicpagemobile.css
From 2012.igem.org
| Line 178: | Line 178: | ||
width: 200px; | width: 200px; | ||
background: #6d6d6d; | background: #6d6d6d; | ||
| - | display: | + | display: block; /*add to JQ block*/ |
z-index: 1000; | z-index: 1000; | ||
} | } | ||
Revision as of 21:13, 27 June 2012
/*====== Mobile Styling ======*/
/*** Minimal header: removes the search bar and header image and readjusts font colours in the menus.
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code! Check out their wikis at: https://2011.igem.org/Team:Brown-Stanford https://2012.igem.org/Team:Lethbridge
- /
- content h1.firstHeading {
visibility:hidden; }
- p-logo {
display: none; }
- searchform {
display: none;
}
.left-menu { background-color: #555;
} .left-menu a {
color: #000;
}
div#top-section{ /*the div containing the entire top bar*/ height: 20px; margin-bottom: 0px !important; border: none; }
- content{
margin-top: 0px; }
- search-controls {
overflow:hidden; display:none; background: none; position: absolute; top: 170px; right: 40px; }
div#header {
width: 975px;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
}
- menubar {
position: absolute; background: none; color: black; }
.left-menu, .right-menu{ position: absolute; background: none; color: black; }
.left-menu li, .right-menu li a { color: #000 !important; }
.left-menu ul li, .right-menu ul li a{
background: none;
color: #000 !important;
}
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
color: #000 !important;
}
- catlinks{
display:none; }
/*important for background colours*/ .mediawiki{ background: #eeeeee; }
/***End minimal header***/
/*Base styles*/
- content{
border: none; margin-top: 10px; } h1, h2, #css-full, #css-mobi{ font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; border: 0; font-weight: 400; } p{ font-family: Georgia, Serif; font-size: 1em; font-weight: normal; color: black; margin-bottom: 10px; }
- css-full, #css-mobi{
position: absolute; float: right; color: black; font-size: 1.3em; top: 0px; right: 15px; display: block; padding: 10px; }
/***Global Adjustments***/ div#footer-box, div#footer, div#content, div#f-list, ul#f-list{ width: 95%; } div#top-section{ width: 100%; }
- footer li{
display: block; } .left-menu li a, .right-menu a{ font-size: 1em; padding-bottom: 5px; padding-top: 10px; } .right-menu{ position: relative; padding-top: 14px; }
- top-section{
padding-bottom: 1.3em; }
/*IMPORTANT: used to stop iPhones from scrolling horizontally due to overflow*/ body, #globalWrapper, #content, #footer-box{ overflow-x: hidden; } /*Hide header image. There has to be a better method.*/
- headerimage{
display: none; }
/***End Global Adjustments***/
/*Mobile styling*/
- nav-wrap{
position: absolute; width: 100%; height: 71px; top: 30px; left: 0px; background-color: #2c2c2c; }
- nav{
clear: both; list-style: none; position: absolute; left: -19px; top: 68px; width: 200px; background: #6d6d6d; display: block; /*add to JQ block*/ z-index: 1000; }
#nav div{ display: none; }
#nav a{ display: block; text-decoration: none; color: white; font-family: Arial, Sans-Serif; font-size: 2em; line-height: 1.5em; padding-left: 20px; }
- menu-icon{
text-indent: -999em;
display: block;
width: 116px;
height: 71px;
background: url(
);
background-position: top;
}
#menu-icon.active{ background-position: bottom; }
- logo{
position: relative; float: right; top: -58px; margin-right: 10px; } #logo img{ height: 40px; }
- bodycontainer{
position: relative; margin-top: 50px; }
h1{ position: relative; margin-top: 20px; font-size: 2.4em; } h2{ position: relative; font-size: 2em; } p{ position: relative; font-size: 1.5em; }
- css-mobi{
display: none; }
- css-full{
display: block; top: 0px; }
