Team:Calgary/static/basicpagemobile.css

From 2012.igem.org

Revision as of 21:10, 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

• • • /

1. content h1.firstHeading {

visibility:hidden; }

1. p-logo {

display: none; }

1. 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; }

1. content{

margin-top: 0px; }

1. 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; }

1. 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;

}

1. catlinks{

display:none; }

/*important for background colours*/ .mediawiki{ background: #eeeeee; }

/***End minimal header***/

/*Base styles*/

1. 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; }

1. 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%; }

1. 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; }

1. 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.*/

1. headerimage{

display: none; }

/***End Global Adjustments***/

/*Mobile styling*/

1. nav-wrap{

position: absolute; width: 100%; height: 71px; top: 30px; left: 0px; background-color: #2c2c2c; }

1. nav{

clear: both; list-style: none; position: absolute; left: -19px; top: 68px; width: 200px; background: #6d6d6d; display: none; /*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; }

1. menu-icon{

text-indent: -999em; display: block; width: 116px; height: 71px; background: url(); background-position: top; }

#menu-icon.active{ background-position: bottom; }

1. logo{

position: relative; float: right; top: -58px; margin-right: 10px; } #logo img{ height: 40px; }

1. 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; }

1. css-mobi{

display: none; }

1. css-full{

display: block; top: 0px; }