Difference between revisions of "Template:Peking/css/default"

 
Line 1: Line 1:
 +
/*
 +
=====================================================================
 +
*  Sparrow v1.0 Default Stylesheet
 +
*  url: styleshout.com
 +
*  02-07-2014
 +
=====================================================================
  
−
<!DOCTYPE html>
+
TOC:
−
<html lang="en" dir="ltr" class="client-nojs">
+
−
<head>
+
−
<meta charset="UTF-8" />
+
−
<title>Template:Peking/css/default - 2016.igem.org</title>
+
−
<meta name="generator" content="MediaWiki 1.24.1" />
+
−
<link rel="shortcut icon" href="/favicon.ico" />
+
−
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2016.igem.org (en)" />
+
−
<link rel="EditURI" type="application/rsd+xml" href="https://2016.igem.org/wiki/api.php?action=rsd" />
+
−
<link rel="alternate" hreflang="x-default" href="/Template:Peking/css/default" />
+
−
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
+
−
<link rel="alternate" type="application/atom+xml" title="2016.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
+
−
<link rel="stylesheet" href="https://2016.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
+
−
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
+
−
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
+
−
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
+
−
/* cache key: 2016_igem_org:resourceloader:filter:minify-css:7:59593960c20e34faccc09e56269cf4e1 */</style>
+
−
<script src="https://2016.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
+
−
<script>if(window.mw){
+
−
mw.config.set({"wgCanonicalNamespace":"Template","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":10,"wgPageName":"Template:Peking/css/default","wgTitle":"Peking/css/default","wgCurRevisionId":247586,"wgRevisionId":247586,"wgArticleId":11032,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Feathyu","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Template:Peking/css/default","wgUserId":9420,"wgUserEditCount":0,"wgUserRegistration":1529994963000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgWikiEditorEnabledModules":{"toolbar":false,"dialogs":false,"hidesig":true,"preview":false,"previewDialog":false,"publish":false}});
+
−
}</script><script>if(window.mw){
+
−
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
+
−
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"a23133d36a46b52120e04d7e6ef364de+\\","patrolToken":"054897e2ae19fde40fdbef7e96805cec+\\","watchToken":"b1e3513a639b2b6ed8a4a89ab8c53252+\\"});},{},{});
+
−
/* cache key: 2016_igem_org:resourceloader:filter:minify-js:7:90db93943974791f51ff64cb5d623b25 */
+
−
}</script>
+
−
<script>if(window.mw){
+
−
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
+
−
}</script>
+
−
</head>
+
−
<body class="mediawiki ltr sitedir-ltr ns-10 ns-subject page-Template_Peking_css_default skin-igem action-view">
+
−
 
+
−
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
+
−
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
+
−
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
+
−
 
+
−
        <script type='text/javascript'        src ='/wiki/skins/Igem/resources/2016_skin.js'></script>
+
−
 
+
−
 
+
−
    <div id='globalWrapper'>
+
−
        <div id='top_menu_under' class='noprint'></div>
+
−
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
+
−
<script>jQuery('#top_menu_14').load('https://2016.igem.org/cgi/top_menu_14/menubar_reply.cgi',
+
−
    {  t:"Template%3APeking%2Fcss%2Fdefault",
+
−
a:"View+%2FTemplate%3APeking%2Fcss%2Fdefault++View source+%2Fwiki%2Findex.php%3Ftitle%3DTemplate%3APeking%2Fcss%2Fdefault%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTemplate%3APeking%2Fcss%2Fdefault%26action%3Dhistory++Move+%2FSpecial%3AMovePage%2FTemplate%3APeking%2Fcss%2Fdefault++Watch+%2Fwiki%2Findex.php%3Ftitle%3DTemplate%3APeking%2Fcss%2Fdefault%26action%3Dwatch%26token%3D7e980f49a62a0b0d2109bc9b82c2ccf8%252B%255C++Template+%2FTemplate%3APeking%2Fcss%2Fdefault++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTemplate_talk%3APeking%2Fcss%2Fdefault%26action%3Dedit%26redlink%3D1++" });
+
−
</script>
+
−
 
+
−
        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
+
−
<div id="content" class="mw-body" role="main">
+
−
    <a id="top"></a>
+
−
 
+
−
            <div id="top_title">
+
−
                <div class="logo_2016">
+
−
                    <a href="https://2016.igem.org">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" width="100px">
+
−
                    </a>
+
−
                </div>
+
−
 
+
−
        <h1 id="firstHeading" class="firstHeading">
+
−
            <span dir="auto">Template:Peking/css/default</span>
+
−
        </h1>
+
−
            </div>
+
−
 
+
−
            <div id="HQ_page">
+
−
                <div id="bodyContent">
+
−
            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>/*
+
−
</p>
+
−
<h6><span class="mw-headline" id=".3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D">=========================================================</span></h6>
+
−
<ul><li>  Sparrow v1.0 Default Stylesheet</li>
+
−
<li>  url: styleshout.com</li>
+
−
<li>  02-07-2014</li></ul>
+
−
<h6><span class="mw-headline" id=".3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D.3D_2">=========================================================</span></h6>
+
−
<p>TOC:
+
 
a. Webfonts and Icon fonts
 
a. Webfonts and Icon fonts
 
b. Reset
 
b. Reset
 
c. Default Styles
 
c. Default Styles
−
</p>
+
  1. Basic
−
<pre>  1. Basic
+
  2. Typography
−
  2. Typography
+
  3. Links
−
  3. Links
+
  4. Images
−
  4. Images
+
  5. Buttons
−
  5. Buttons
+
  6. Forms
−
  6. Forms
+
d. Grid
−
</pre>
+
−
<p>d. Grid
+
 
e. Others
 
e. Others
−
</p>
+
  1. Clearing
−
<pre>  1. Clearing
+
  2. Misc
−
  2. Misc
+
 
−
</pre>
+
=====================================================================  */
−
<p>=====================================================================  */
+
 
−
</p><p>/* ------------------------------------------------------------------ */
+
/* ------------------------------------------------------------------ */
 
/* a. Webfonts and Icon fonts
 
/* a. Webfonts and Icon fonts
−
</p>
+
------------------------------------------------------------------ */
−
<pre>------------------------------------------------------------------ */
+
 
−
</pre>
+
@import url("https://2016.igem.org/Template:Peking/css/fonts?action=raw&ctype=text/css");
−
<p>@import url("<a rel="nofollow" class="external free" href="https://2016.igem.org/Template:Peking/css/fonts?action=raw&amp;ctype=text/css">https://2016.igem.org/Template:Peking/css/fonts?action=raw&amp;ctype=text/css</a>");
+
@import url("https://2016.igem.org/Template:Peking/css/font_awesome_min?action=raw&ctype=text/css");
−
@import url("<a rel="nofollow" class="external free" href="https://2016.igem.org/Template:Peking/css/font_awesome_min?action=raw&amp;ctype=text/css">https://2016.igem.org/Template:Peking/css/font_awesome_min?action=raw&amp;ctype=text/css</a>");
+
 
−
</p><p>/* ------------------------------------------------------------------
+
/* ------------------------------------------------------------------
 
/* b. Reset
 
/* b. Reset
−
</p>
+
      Adapted from:
−
<pre>    Adapted from:
+
      Normalize.css - https://github.com/necolas/normalize.css/
−
    Normalize.css - <a rel="nofollow" class="external free" href="https://github.com/necolas/normalize.css/">https://github.com/necolas/normalize.css/</a>
+
      HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
−
    HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
+
/* ------------------------------------------------------------------ */
−
</pre>
+
 
−
<p>/* ------------------------------------------------------------------ */
+
html, body, span, object, iframe,
−
</p><p>html, body, span, object, iframe,
+
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
abbr, address, cite, code,
 
abbr, address, cite, code,
Line 114: Line 46:
 
fieldset, form, label, legend,
 
fieldset, form, label, legend,
 
table, caption, article, aside, canvas, details, figcaption, figure,
 
table, caption, article, aside, canvas, details, figcaption, figure,
−
</p>
+
header, hgroup, menu, nav, section, summary,
−
<pre>header, hgroup, menu, nav, section, summary,
+
time, mark, audio, video {
−
</pre>
+
  margin: 0 auto;
−
<p>time, mark, audio, video {
+
  padding: 0;
−
</p>
+
  border: 0;
−
<pre>  margin: 0 auto;
+
  outline: 0;
−
  padding: 0;
+
  font-size: 100%;
−
  border: 0;
+
  vertical-align: baseline;
−
  outline: 0;
+
  background: transparent;
−
  font-size: 100%;
+
}
−
  vertical-align: baseline;
+
 
−
  background: transparent;
+
article,aside,details,figcaption,figure,
−
</pre>
+
−
<p>}
+
−
</p><p>article,aside,details,figcaption,figure,
+
 
footer,header,hgroup,menu,nav,section {
 
footer,header,hgroup,menu,nav,section {
−
</p>
+
  display: block;
−
<pre>  display: block;
+
}
−
</pre>
+
 
−
<p>}
+
audio,
−
</p><p>audio,
+
 
canvas,
 
canvas,
 
video {
 
video {
−
</p>
+
  display: inline-block;
−
<pre>  display: inline-block;
+
}
−
</pre>
+
 
−
<p>}
+
audio:not([controls]) {
−
</p><p>audio:not([controls]) {
+
  display: none;
−
</p>
+
  height: 0;
−
<pre>  display: none;
+
}
−
  height: 0;
+
 
−
</pre>
+
[hidden] { display: none; }
−
<p>}
+
 
−
</p><p>[hidden] { display: none; }
+
code, kbd, pre, samp {
−
</p><p>code, kbd, pre, samp {
+
  font-family: monospace, serif;
−
</p>
+
  font-size: 1em;
−
<pre>  font-family: monospace, serif;
+
}
−
  font-size: 1em;
+
 
−
</pre>
+
pre {
−
<p>}
+
  white-space: pre;
−
</p><p>pre {
+
  white-space: pre-wrap;
−
</p>
+
  word-wrap: break-word;
−
<pre>  white-space: pre;
+
}
−
  white-space: pre-wrap;
+
 
−
  word-wrap: break-word;
+
blockquote, q { quotes: &#8220 &#8220; }
−
</pre>
+
 
−
<p>}
+
blockquote:before, blockquote:after,
−
</p><p>blockquote, q { quotes: &amp;#8220 &#8220; }
+
−
</p><p>blockquote:before, blockquote:after,
+
 
q:before, q:after {
 
q:before, q:after {
−
</p>
+
  content: '';
−
<pre>  content: <i>;</i>
+
  content: none;
−
  content: none;
+
}
−
</pre>
+
 
−
<p>}
+
ins {
−
</p><p>ins {
+
  background-color: #ff9;
−
</p>
+
  color: #000;
−
<pre>  background-color: #ff9;
+
  text-decoration: none;
−
  color: #000;
+
}
−
  text-decoration: none;
+
 
−
</pre>
+
mark {
−
<p>}
+
  background-color: #A7F4F6;
−
</p><p>mark {
+
  color: #555;
−
</p>
+
}
−
<pre>  background-color: #A7F4F6;
+
 
−
  color: #555;
+
del { text-decoration: line-through; }
−
</pre>
+
 
−
<p>}
+
abbr[title], dfn[title] {
−
</p><p>del { text-decoration: line-through; }
+
  border-bottom: 1px dotted;
−
</p><p>abbr[title], dfn[title] {
+
  cursor: help;
−
</p>
+
}
−
<pre>  border-bottom: 1px dotted;
+
 
−
  cursor: help;
+
table {
−
</pre>
+
  border-collapse: collapse;
−
<p>}
+
  border-spacing: 0;
−
</p><p>table {
+
}
−
</p>
+
 
−
<pre>  border-collapse: collapse;
+
 
−
  border-spacing: 0;
+
−
</pre>
+
−
<p>}
+
−
</p><p><br />
+
 
/* ------------------------------------------------------------------ */
 
/* ------------------------------------------------------------------ */
 
/* c. Default and Basic Styles
 
/* c. Default and Basic Styles
−
</p>
+
      Adapted from:
−
<pre>    Adapted from:
+
      Skeleton CSS Framework - http://www.getskeleton.com/
−
    Skeleton CSS Framework - <a rel="nofollow" class="external free" href="http://www.getskeleton.com/">http://www.getskeleton.com/</a>
+
      Typeplate Typographic Starter Kit - http://typeplate.com/
−
    Typeplate Typographic Starter Kit - <a rel="nofollow" class="external free" href="http://typeplate.com/">http://typeplate.com/</a>
+
/* ------------------------------------------------------------------ */
−
</pre>
+
 
−
<p>/* ------------------------------------------------------------------ */
+
/*  1. Basic  ------------------------------------------------------- */
−
</p><p>/*  1. Basic  ------------------------------------------------------- */
+
 
−
</p>
+
*,
−
<ul><li>,
+
*:before,
−
<dl><dd>before,</dd>
+
*:after {
−
<dd>after {</dd></dl></li></ul>
+
  -moz-box-sizing: border-box;
−
<pre>  -moz-box-sizing: border-box;
+
  -webkit-box-sizing: border-box;
−
  -webkit-box-sizing: border-box;
+
  box-sizing: border-box;
−
  box-sizing: border-box;
+
−
</pre>
+
−
<p>}
+
−
</p><p>html { font-size: 62.5%; }
+
−
</p><p>body {
+
−
</p>
+
−
<pre>  background: #fff;
+
−
  font-family: raleway-regular, sans-serif;
+
−
  font-size: 15px;
+
−
  line-height: 30px;
+
−
</pre>
+
−
<p> color: #5E5656;
+
−
</p>
+
−
<pre>  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+
−
</pre>
+
−
<p> -webkit-text-size-adjust: 100%;
+
 
}
 
}
−
</p><p>/*  2. Typography
+
 
−
</p>
+
html { font-size: 62.5%; }
−
<pre>      Vertical rhythm with leading derived from 6
+
 
−
</pre>
+
body {
−
<hr /> */
+
  background: #fff;
−
<p>.h1a, h2, h3, h4, h5, h6 {
+
  font-family: raleway-regular, sans-serif;
−
</p>
+
  font-size: 15px;
−
<pre>  color: #313131;
+
  line-height: 30px;
−
</pre>
+
color: #5E5656;
−
<p> font-family: raleway-bold, sans-serif;
+
 
 +
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
 +
-webkit-text-size-adjust: 100%;
 +
}
 +
 
 +
/*  2. Typography
 +
      Vertical rhythm with leading derived from 6
 +
--------------------------------------------------------------------- */
 +
 
 +
.h1a, h2, h3, h4, h5, h6 {
 +
  color: #313131;
 +
font-family: raleway-bold, sans-serif;
 
}
 
}
 
.h1a a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
 
.h1a a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
Line 247: Line 164:
 
h6 { font-size: 14px; line-height: 30px; }
 
h6 { font-size: 14px; line-height: 30px; }
 
.subheader { }
 
.subheader { }
−
</p><p>.texttitle{
+
 +
.texttitle{
 
color: #11abb0;
 
color: #11abb0;
 
font-size: 38px;
 
font-size: 38px;
Line 258: Line 176:
 
font-weight: 330;
 
font-weight: 330;
 
}
 
}
−
</p><p>p { margin: 0 0 0px 0; }
+
 
 +
p { margin: 0 0 0px 0; }
 
p img { margin: 0; }
 
p img { margin: 0; }
 
p.lead {
 
p.lead {
−
</p>
+
  font: 18px/36px raleway-regular, sans-serif !important;
−
<pre>  font: 18px/36px raleway-regular, sans-serif !important;
+
  margin-bottom: 18px;
−
  margin-bottom: 18px;
+
  margin-left: 0.5em;
−
  margin-left: 0.5em;
+
  margin-right: 0.5em;
−
  margin-right: 0.5em;
+
  color: #605C5C;
−
  color: #605C5C;
+
 
−
</pre>
+
}
−
<p>}
+
 
−
</p><p>/* for 'em' and 'strong' tags, font-size and line-height should be same with
+
/* for 'em' and 'strong' tags, font-size and line-height should be same with
 
the body tag due to rendering problems in some browsers */
 
the body tag due to rendering problems in some browsers */
 
em { font: 15px/30px notosans-italic, sans-serif; }
 
em { font: 15px/30px notosans-italic, sans-serif; }
 
strong, b { font: 15px/30px notosans-bold, sans-serif; }
 
strong, b { font: 15px/30px notosans-bold, sans-serif; }
 
small { font-size: 11px; line-height: inherit; }
 
small { font-size: 11px; line-height: inherit; }
−
</p><p>/* Blockquotes */
+
 
 +
/* Blockquotes */
 
blockquote {
 
blockquote {
−
</p>
+
  margin: 30px 0px;
−
<pre>  margin: 30px 0px;
+
  padding-left: 40px;
−
  padding-left: 40px;
+
  position: relative;
−
  position: relative;
+
}
−
</pre>
+
−
<p>}
+
 
blockquote:before {
 
blockquote:before {
−
</p>
+
  content: "\201C";
−
<pre>  content: "\201C";
+
  opacity: 0.45;
−
  opacity: 0.45;
+
  font-size: 80px;
−
  font-size: 80px;
+
  line-height: 0px;
−
  line-height: 0px;
+
  margin: 0;
−
  margin: 0;
+
  font-family: arial, sans-serif;
−
  font-family: arial, sans-serif;
+
 
−
</pre>
+
  position: absolute;
−
<pre>  position: absolute;
+
  top:  30px;
−
  top:  30px;
+
left: 0;
−
</pre>
+
−
<p> left: 0;
+
 
}
 
}
 
blockquote p {
 
blockquote p {
−
</p>
+
  font-family: georgia, serif;
−
<pre>  font-family: georgia, serif;
+
  font-style: italic;
−
  font-style: italic;
+
  padding: 0;
−
  padding: 0;
+
  font-size: 18px;
−
  font-size: 18px;
+
  line-height: 30px;
−
  line-height: 30px;
+
}
−
</pre>
+
−
<p>}
+
 
blockquote cite {
 
blockquote cite {
−
</p>
+
  display: block;
−
<pre>  display: block;
+
  font-size: 12px;
−
  font-size: 12px;
+
  font-style: normal;
−
  font-style: normal;
+
  line-height: 18px;
−
  line-height: 18px;
+
}
−
</pre>
+
−
<p>}
+
 
blockquote cite:before { content: "\2014 \0020"; }
 
blockquote cite:before { content: "\2014 \0020"; }
 
blockquote cite a,
 
blockquote cite a,
 
blockquote cite a:visited { color: #8B9798; border: none }
 
blockquote cite a:visited { color: #8B9798; border: none }
−
</p><p>/* ---------------------------------------------------------------------
+
 
 +
/* ---------------------------------------------------------------------
 
/*  Pull Quotes Markup
 
/*  Pull Quotes Markup
 
/*
 
/*
−
</p>
+
    <aside class="pull-quote">
−
<pre>  &lt;aside class="pull-quote"&gt;
+
−
</pre>
+
 
<blockquote>
 
<blockquote>
 
<p></p>
 
<p></p>
 
</blockquote>
 
</blockquote>
−
<p> &lt;/aside&gt;
+
</aside>
 
/*
 
/*
 
/* --------------------------------------------------------------------- */
 
/* --------------------------------------------------------------------- */
 
.pull-quote {
 
.pull-quote {
−
</p>
+
  position: relative;
−
<pre>  position: relative;
+
padding: 18px 30px 18px 0px;
−
</pre>
+
−
<p> padding: 18px 30px 18px 0px;
+
 
}
 
}
 
.pull-quote:before,
 
.pull-quote:before,
Line 340: Line 249:
 
position: absolute;
 
position: absolute;
 
font-size: 80px;
 
font-size: 80px;
−
</p>
+
  font-family: Arial, Sans-Serif;
−
<pre>  font-family: Arial, Sans-Serif;
+
}
−
</pre>
+
−
<p>}
+
 
.pull-quote:before {
 
.pull-quote:before {
 
content: "\201C";
 
content: "\201C";
Line 355: Line 262:
 
}
 
}
 
.pull-quote blockquote {
 
.pull-quote blockquote {
−
</p>
+
  margin: 0;
−
<pre>  margin: 0;
+
}
−
</pre>
+
−
<p>}
+
 
.pull-quote blockquote:before {
 
.pull-quote blockquote:before {
−
</p>
+
  content: none;
−
<pre>  content: none;
+
}
−
</pre>
+
 
−
<p>}
+
/* Abbreviations */
−
</p><p>/* Abbreviations */
+
 
abbr {
 
abbr {
−
</p>
+
  font-family: notosans-bold, sans-serif;
−
<pre>  font-family: notosans-bold, sans-serif;
+
font-variant: small-caps;
−
</pre>
+
−
<p> font-variant: small-caps;
+
 
text-transform: lowercase;
 
text-transform: lowercase;
−
</p>
+
  letter-spacing: .5px;
−
<pre>  letter-spacing: .5px;
+
color: gray;
−
</pre>
+
−
<p> color: gray;
+
 
}
 
}
 
abbr:hover { cursor: help; }
 
abbr:hover { cursor: help; }
−
</p><p>/* drop cap */
+
 
 +
/* drop cap */
 
.drop-cap:first-letter {
 
.drop-cap:first-letter {
 
float: left;
 
float: left;
Line 384: Line 285:
 
font-size: 84px;
 
font-size: 84px;
 
font-family: /* Copperplate */ raleway-bold, sans-serif;
 
font-family: /* Copperplate */ raleway-bold, sans-serif;
−
</p>
+
  line-height: 60px;
−
<pre>  line-height: 60px;
+
text-indent: 0;
−
</pre>
+
−
<p> text-indent: 0;
+
 
background: transparent;
 
background: transparent;
 
color: inherit;
 
color: inherit;
 
}
 
}
−
</p><p>hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }
+
 
−
</p><p><br />
+
hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }
 +
 
 +
 
 
/*  3. Links  ------------------------------------------------------- */
 
/*  3. Links  ------------------------------------------------------- */
−
</p><p>a, a:visited {
+
 
−
</p>
+
a, a:visited {
−
<pre>  text-decoration: none;
+
  text-decoration: none;
−
  outline: 0;
+
  outline: 0;
−
  color: #383232;
+
  color: #383232;
−
</pre>
+
 
−
<pre>  -webkit-transition: color .3s ease-in-out;
+
  -webkit-transition: color .3s ease-in-out;
−
  -moz-transition: color .3s ease-in-out;
+
  -moz-transition: color .3s ease-in-out;
−
  -o-transition: color .3s ease-in-out;
+
  -o-transition: color .3s ease-in-out;
−
  transition: color .3s ease-in-out;
+
  transition: color .3s ease-in-out;
−
</pre>
+
}
−
<p>}
+
 
a:hover, a:focus { color: #11abb0; }
 
a:hover, a:focus { color: #11abb0; }
 
p a, p a:visited { line-height: inherit; }
 
p a, p a:visited { line-height: inherit; }
−
</p><p>.sidebar a:focus { color:#00afd1; }
+
 
 +
.sidebar a:focus { color:#00afd1; }
 
.siderbar a,a:vistied {color:#666666;}
 
.siderbar a,a:vistied {color:#666666;}
−
</p><p>/*  4. List  --------------------------------------------------------- */
+
 
−
</p><p>ul, ol { margin-bottom: 24px; margin-top: 12px; }
+
/*  4. List  --------------------------------------------------------- */
 +
 
 +
ul, ol { margin-bottom: 24px; margin-top: 12px; }
 
ul { list-style: none outside; }
 
ul { list-style: none outside; }
 
ol { list-style: decimal; }
 
ol { list-style: decimal; }
Line 425: Line 328:
 
ul.large li { }
 
ul.large li { }
 
li p { }
 
li p { }
−
</p><p>/* ---------------------------------------------------------------------
+
 
 +
/* ---------------------------------------------------------------------
 
/*  Stats Tab Markup
 
/*  Stats Tab Markup
−
</p>
+
 
 
     <ul class="stats-tabs">
 
     <ul class="stats-tabs">
−
<li>&lt;a href="#"&gt;[value]<b>[name]</b>&lt;/a&gt;</li>
+
<li><a href="#">[value]<b>[name]</b></a></li>
 
</ul>
 
</ul>
−
<pre>  Extend this object into your markup.
+
 
−
</pre>
+
    Extend this object into your markup.
−
<p>/*
+
/*
 
/* --------------------------------------------------------------------- */
 
/* --------------------------------------------------------------------- */
 
.stats-tabs {
 
.stats-tabs {
−
</p>
+
  padding: 0;
−
<pre>  padding: 0;
+
  margin: 24px 0;
−
  margin: 24px 0;
+
}
−
</pre>
+
−
<p>}
+
 
.stats-tabs li {
 
.stats-tabs li {
 
display: inline-block;
 
display: inline-block;
Line 456: Line 358:
 
font-size: 22px;
 
font-size: 22px;
 
font-family: notosans-bold, sans-serif;
 
font-family: notosans-bold, sans-serif;
−
</p>
+
  border: none;
−
<pre>  border: none;
+
  color: #313131;
−
  color: #313131;
+
}
−
</pre>
+
−
<p>}
+
 
.stats-tabs li a:hover {
 
.stats-tabs li a:hover {
−
</p>
+
  color:#11ABB0;
−
<pre>  color:#11ABB0;
+
}
−
</pre>
+
−
<p>}
+
 
.stats-tabs li a b {
 
.stats-tabs li a b {
 
display: block;
 
display: block;
Line 471: Line 369:
 
font-size: 13px;
 
font-size: 13px;
 
font-family: notosans-regular, sans-serif;
 
font-family: notosans-regular, sans-serif;
−
</p>
+
  color: #8B9798;
−
<pre>  color: #8B9798;
+
}
−
</pre>
+
 
−
<p>}
+
/* definition list */
−
</p><p>/* definition list */
+
 
dl { margin: 12px 0; }
 
dl { margin: 12px 0; }
 
dt { margin: 0; color:#11ABB0; }
 
dt { margin: 0; color:#11ABB0; }
 
dd { margin: 0 0 0 20px; }
 
dd { margin: 0 0 0 20px; }
−
</p><p>/* Lining Definition Style Markup */
+
 
 +
/* Lining Definition Style Markup */
 
.lining dt,
 
.lining dt,
 
.lining dd {
 
.lining dd {
Line 497: Line 395:
 
margin-left: -0.2em;
 
margin-left: -0.2em;
 
}
 
}
−
</p><p>/* Dictionary Definition Style Markup */
+
 
 +
/* Dictionary Definition Style Markup */
 
.dictionary-style dt {
 
.dictionary-style dt {
 
display: inline;
 
display: inline;
Line 513: Line 412:
 
content: counter(definitions, decimal) ". ";
 
content: counter(definitions, decimal) ". ";
 
}
 
}
−
</p><p>/* Pagination */
+
 
 +
/* Pagination */
 
.pagination {
 
.pagination {
−
</p>
+
  margin: 36px auto;
−
<pre>  margin: 36px auto;
+
  text-align: center;
−
  text-align: center;
+
}
−
</pre>
+
−
<p>}
+
 
.pagination ul li {
 
.pagination ul li {
−
</p>
+
  display: inline-block;
−
<pre>  display: inline-block;
+
  margin: 0;
−
  margin: 0;
+
  padding: 0;
−
  padding: 0;
+
}
−
</pre>
+
−
<p>}
+
 
.pagination .page-numbers {
 
.pagination .page-numbers {
−
</p>
+
  font: 15px/18px notosans-bold, sans-serif;
−
<pre>  font: 15px/18px notosans-bold, sans-serif;
+
  display: inline-block;
−
  display: inline-block;
+
  padding: 6px 10px;
−
  padding: 6px 10px;
+
  margin-right: 3px;
−
  margin-right: 3px;
+
  margin-bottom: 6px;
−
  margin-bottom: 6px;
+
color: #6E757C;
−
</pre>
+
−
<p> color: #6E757C;
+
 
background-color: #E6E8EB;
 
background-color: #E6E8EB;
−
</p><p> -webkit-transition: all 200ms ease-in-out;
+
 
 +
-webkit-transition: all 200ms ease-in-out;
 
-moz-transition: all 200ms ease-in-out;
 
-moz-transition: all 200ms ease-in-out;
 
-o-transition: all 200ms ease-in-out;
 
-o-transition: all 200ms ease-in-out;
 
-ms-transition: all 200ms ease-in-out;
 
-ms-transition: all 200ms ease-in-out;
 
transition: all 200ms ease-in-out;
 
transition: all 200ms ease-in-out;
−
</p>
+
 
−
<pre>  -moz-border-radius: 3px;
+
  -moz-border-radius: 3px;
−
  -webkit-border-radius: 3px;
+
  -webkit-border-radius: 3px;
−
  -khtml-border-radius: 3px;
+
  -khtml-border-radius: 3px;
−
</pre>
+
border-radius: 3px;
−
<p> border-radius: 3px;
+
 
}
 
}
 
.pagination .page-numbers:hover {
 
.pagination .page-numbers:hover {
−
</p>
+
  background: #838A91;
−
<pre>  background: #838A91;
+
  color: #fff;
−
  color: #fff;
+
}
−
</pre>
+
−
<p>}
+
 
.pagination .current,
 
.pagination .current,
 
.pagination .current:hover {
 
.pagination .current:hover {
−
</p>
+
  background-color: #11ABB0;
−
<pre>  background-color: #11ABB0;
+
  color: #fff;
−
  color: #fff;
+
}
−
</pre>
+
−
<p>}
+
 
.pagination .inactive,
 
.pagination .inactive,
 
.pagination .inactive:hover {
 
.pagination .inactive:hover {
−
</p>
+
  background-color: #E6E8EB;
−
<pre>  background-color: #E6E8EB;
+
color: #A9ADB2;
−
</pre>
+
−
<p> color: #A9ADB2;
+
 
}
 
}
 
.pagination .prev, .pagination .next {}
 
.pagination .prev, .pagination .next {}
−
</p><p>/*  5. Images  --------------------------------------------------------- */
+
 
−
</p><p>img {
+
/*  5. Images  --------------------------------------------------------- */
−
</p>
+
 
−
<pre>  max-width: 100%;
+
img {
−
  height: auto;
+
  max-width: 100%;
−
</pre>
+
  height: auto;
−
<p>}
+
}
 
img.pull-right { margin: 12px 0px 0px 18px; }
 
img.pull-right { margin: 12px 0px 0px 18px; }
 
img.pull-left { margin: 12px 18px 0px 0px; }
 
img.pull-left { margin: 12px 18px 0px 0px; }
−
</p><p>/*  6. Buttons  --------------------------------------------------------- */
+
 
−
</p><p>.button,
+
/*  6. Buttons  --------------------------------------------------------- */
 +
 
 +
.button,
 
.button:visited,
 
.button:visited,
 
button,
 
button,
Line 586: Line 476:
 
input[type="reset"],
 
input[type="reset"],
 
input[type="button"] {
 
input[type="button"] {
−
</p>
+
  font: 16px/30px notosans-bold, sans-serif;
−
<pre>  font: 16px/30px notosans-bold, sans-serif;
+
  background: #11ABB0;
−
  background: #11ABB0;
+
  display: inline-block;
−
  display: inline-block;
+
text-decoration: none;
−
</pre>
+
  letter-spacing: 0;
−
<p> text-decoration: none;
+
  color: #fff;
−
</p>
+
padding: 12px 24px;
−
<pre>  letter-spacing: 0;
+
−
  color: #fff;
+
−
</pre>
+
−
<p> padding: 12px 24px;
+
 
margin-bottom: 18px;
 
margin-bottom: 18px;
−
</p>
+
  border: none;
−
<pre>  border: none;
+
  cursor: pointer;
−
  cursor: pointer;
+
  height: auto;
−
  height: auto;
+
 
−
</pre>
+
  -webkit-transition: all .2s ease-in-out;
−
<pre>  -webkit-transition: all .2s ease-in-out;
+
-moz-transition: all .2s ease-in-out;
−
</pre>
+
−
<p> -moz-transition: all .2s ease-in-out;
+
 
-o-transition: all .2s ease-in-out;
 
-o-transition: all .2s ease-in-out;
 
-ms-transition: all .2s ease-in-out;
 
-ms-transition: all .2s ease-in-out;
 
transition: all .2s ease-in-out;
 
transition: all .2s ease-in-out;
−
</p>
+
 
−
<pre>  -moz-border-radius: 3px;
+
  -moz-border-radius: 3px;
−
  -webkit-border-radius: 3px;
+
  -webkit-border-radius: 3px;
−
  -khtml-border-radius: 3px;
+
  -khtml-border-radius: 3px;
−
  border-radius: 3px;
+
  border-radius: 3px;
−
</pre>
+
}
−
<p>}
+
 
−
</p><p>.button:hover,
+
.button:hover,
 
button:hover,
 
button:hover,
 
input[type="submit"]:hover,
 
input[type="submit"]:hover,
 
input[type="reset"]:hover,
 
input[type="reset"]:hover,
 
input[type="button"]:hover {
 
input[type="button"]:hover {
−
</p>
+
  background: #3d4145;
−
<pre>  background: #3d4145;
+
  color: #fff;
−
  color: #fff;
+
}
−
</pre>
+
 
−
<p>}
+
.button:active,
−
</p><p>.button:active,
+
 
button:active,
 
button:active,
 
input[type="submit"]:active,
 
input[type="submit"]:active,
 
input[type="reset"]:active,
 
input[type="reset"]:active,
 
input[type="button"]:active {
 
input[type="button"]:active {
−
</p>
+
  background: #3d4145;
−
<pre>  background: #3d4145;
+
  color: #fff;
−
  color: #fff;
+
}
−
</pre>
+
 
−
<p>}
+
.button.full-width,
−
</p><p>.button.full-width,
+
 
button.full-width,
 
button.full-width,
 
input[type="submit"].full-width,
 
input[type="submit"].full-width,
Line 646: Line 528:
 
text-align: center;
 
text-align: center;
 
}
 
}
−
</p><p>/* Fix for odd Mozilla border &amp; padding issues */
+
 
 +
/* Fix for odd Mozilla border & padding issues */
 
button::-moz-focus-inner,
 
button::-moz-focus-inner,
 
input::-moz-focus-inner {
 
input::-moz-focus-inner {
−
</p>
+
    border: 0;
−
<pre>  border: 0;
+
    padding: 0;
−
  padding: 0;
+
}
−
</pre>
+
 
−
<p>}
+
 
−
</p><p><br />
+
 
/*  7. Forms  --------------------------------------------------------- */
 
/*  7. Forms  --------------------------------------------------------- */
−
</p><p>form { margin-bottom: 24px; }
+
 
 +
form { margin-bottom: 24px; }
 
fieldset { margin-bottom: 24px; }
 
fieldset { margin-bottom: 24px; }
−
</p><p>input[type="text"],
+
 
 +
input[type="text"],
 
input[type="password"],
 
input[type="password"],
 
input[type="email"],
 
input[type="email"],
 
textarea,
 
textarea,
 
select {
 
select {
−
</p>
+
  display: block;
−
<pre>  display: block;
+
  padding: 18px 15px;
−
  padding: 18px 15px;
+
  margin: 0 0 24px 0;
−
  margin: 0 0 24px 0;
+
  border: 0;
−
  border: 0;
+
  outline: none;
−
  outline: none;
+
  vertical-align: middle;
−
  vertical-align: middle;
+
  min-width: 260px;
−
  min-width: 260px;
+
max-width: 100%;
−
</pre>
+
  font-size: 15px;
−
<p> max-width: 100%;
+
  line-height: 24px;
−
</p>
+
color: #647373;
−
<pre>  font-size: 15px;
+
−
  line-height: 24px;
+
−
</pre>
+
−
<p> color: #647373;
+
 
background: #D3D9D9;
 
background: #D3D9D9;
−
</p>
+
 
−
<pre>  -moz-border-radius: 3px;
+
  -moz-border-radius: 3px;
−
</pre>
+
-webkit-border-radius: 3px;
−
<p> -webkit-border-radius: 3px;
+
 
-khtml-border-radius: 3px;
 
-khtml-border-radius: 3px;
 
border-radius: 3px;
 
border-radius: 3px;
 
}
 
}
−
</p><p>/* select { padding: 0;
+
 
−
</p>
+
/* select { padding: 0;
−
<pre>  width: 220px;
+
  width: 220px;
−
  } */
+
  } */
−
</pre>
+
 
−
<p>input[type="text"]:focus,
+
input[type="text"]:focus,
 
input[type="password"]:focus,
 
input[type="password"]:focus,
 
input[type="email"]:focus,
 
input[type="email"]:focus,
 
textarea:focus {
 
textarea:focus {
−
</p>
+
  color: #B3B7BC;
−
<pre>  color: #B3B7BC;
+
background-color: #3d4145;
−
</pre>
+
−
<p> background-color: #3d4145;
+
 
}
 
}
−
</p><p>textarea { min-height: 200px; }
+
 
−
</p><p>label,
+
textarea { min-height: 200px; }
 +
 
 +
label,
 
legend {
 
legend {
−
</p>
+
  font: 16px/24px notosans-bold, sans-serif;
−
<pre>  font: 16px/24px notosans-bold, sans-serif;
+
margin: 12px 0;
−
</pre>
+
  color: #3d4145;
−
<p> margin: 12px 0;
+
  display: block;
−
</p>
+
}
−
<pre>  color: #3d4145;
+
−
  display: block;
+
−
</pre>
+
−
<p>}
+
 
label span,
 
label span,
 
legend span {
 
legend span {
 
color: #8B9798;
 
color: #8B9798;
−
</p>
+
  font: 14px/24px notosans-regular, sans-serif;
−
<pre>  font: 14px/24px notosans-regular, sans-serif;
+
}
−
</pre>
+
 
−
<p>}
+
input[type="checkbox"],
−
</p><p>input[type="checkbox"],
+
 
input[type="radio"] {
 
input[type="radio"] {
−
</p>
+
    font-size: 15px;
−
<pre>  font-size: 15px;
+
    color: #737373;
−
  color: #737373;
+
}
−
</pre>
+
 
−
<p>}
+
input[type="checkbox"] { display: inline; }
−
</p><p>input[type="checkbox"] { display: inline; }
+
 
−
</p><p>/* ------------------------------------------------------------------ */
+
/* ------------------------------------------------------------------ */
 
/* d. Grid
 
/* d. Grid
−
</p>
+
---------------------------------------------------------------------
−
<hr />
+
  gutter = 40px.
−
<pre>  gutter = 40px.
+
/* ------------------------------------------------------------------ */
−
</pre>
+
 
−
<p>/* ------------------------------------------------------------------ */
+
/* default
−
</p><p>/* default
+
--------------------------------------------------------------- */
−
</p>
+
.row {
−
<hr /> */
+
  width: 96%;
−
<p>.row {
+
  max-width: 1020px;
−
</p>
+
  margin: 0 auto;
−
<pre>  width: 96%;
+
}
−
  max-width: 1020px;
+
−
  margin: 0 auto;
+
−
</pre>
+
−
<p>}
+
 
/* fixed width for IE8 */
 
/* fixed width for IE8 */
−
.ie .row { width: 1000px&#160;; }
+
.ie .row { width: 1000px ; }
−
</p><p>.narrow .row { max-width: 980px; }
+
 
−
</p><p>.row .row { width: auto; max-width: none; margin: 0 -20px; }
+
.narrow .row { max-width: 980px; }
−
</p><p>/* row clearing */
+
 
 +
.row .row { width: auto; max-width: none; margin: 0 -20px; }
 +
 
 +
/* row clearing */
 
.row:before,
 
.row:before,
 
.row:after {
 
.row:after {
−
</p>
+
    content: " ";
−
<pre>  content: " ";
+
    display: table;
−
  display: table;
+
}
−
</pre>
+
−
<p>}
+
 
.row:after {
 
.row:after {
−
</p>
+
    clear: both;
−
<pre>  clear: both;
+
}
−
</pre>
+
 
−
<p>}
+
.column, .columns {
−
</p><p>.column, .columns {
+
  position: relative;
−
</p>
+
  padding: 0 20px;
−
<pre>  position: relative;
+
  min-height: 1px;
−
  padding: 0 20px;
+
  float: left;
−
  min-height: 1px;
+
}
−
  float: left;
+
−
</pre>
+
−
<p>}
+
 
.column.centered, .columns.centered  {
 
.column.centered, .columns.centered  {
−
</p>
+
    float: none;
−
<pre>  float: none;
+
    margin: 0 auto;
−
  margin: 0 auto;
+
}
−
</pre>
+
 
−
<p>}
+
/* removed gutters */
−
</p><p>/* removed gutters */
+
.row.collapsed > .column,
−
.row.collapsed &gt; .column,
+
.row.collapsed > .columns,
−
.row.collapsed &gt; .columns,
+
 
.column.collapsed, .columns.collapsed  { padding: 0; }
 
.column.collapsed, .columns.collapsed  { padding: 0; }
−
</p><p>[class*="column"] + [class*="column"]:last-child { float: right; }
+
 
 +
[class*="column"] + [class*="column"]:last-child { float: right; }
 
[class*="column"] + [class*="column"].end { float: right; }
 
[class*="column"] + [class*="column"].end { float: right; }
−
</p><p>/* column widths */
+
 
 +
/* column widths */
 
.row .one        { width: 8.33333%; }
 
.row .one        { width: 8.33333%; }
 
.row .two        { width: 16.66667%; }
 
.row .two        { width: 16.66667%; }
Line 794: Line 663:
 
.row .eleven      { width: 91.66667%; }
 
.row .eleven      { width: 91.66667%; }
 
.row .twelve      { width: 100%; }
 
.row .twelve      { width: 100%; }
−
</p><p>/* Offsets */
+
 
 +
/* Offsets */
 
.row .offset-1    { margin-left: 8.33333%; }
 
.row .offset-1    { margin-left: 8.33333%; }
 
.row .offset-2    { margin-left: 16.66667%; }
 
.row .offset-2    { margin-left: 16.66667%; }
Line 806: Line 676:
 
.row .offset-10  { margin-left: 83.33333%; }
 
.row .offset-10  { margin-left: 83.33333%; }
 
.row .offset-11  { margin-left: 91.66667%; }
 
.row .offset-11  { margin-left: 91.66667%; }
−
</p><p>/* Push/Pull */
+
 
 +
/* Push/Pull */
 
.row .push-1      { left: 8.33333%; }
 
.row .push-1      { left: 8.33333%; }
 
.row .pull-1      { right: 8.33333%; }
 
.row .pull-1      { right: 8.33333%; }
Line 829: Line 700:
 
.row .push-11    { left: 91.66667%; }
 
.row .push-11    { left: 91.66667%; }
 
.row .pull-11    { right: 91.66667%; }
 
.row .pull-11    { right: 91.66667%; }
−
</p><p>/* block grids
+
 
−
</p>
+
/* block grids
−
<hr /> */
+
--------------------------------------------------------------------- */
−
<p>.bgrid-sixths [class*="column"]  { width: 16.66667%; }
+
.bgrid-sixths [class*="column"]  { width: 16.66667%; }
 
.bgrid-quarters [class*="column"] { width: 25%; }
 
.bgrid-quarters [class*="column"] { width: 25%; }
 
.bgrid-thirds [class*="column"]  { width: 33.33333%; }
 
.bgrid-thirds [class*="column"]  { width: 33.33333%; }
 
.bgrid-halves [class*="column"]  { width: 50%; }
 
.bgrid-halves [class*="column"]  { width: 50%; }
−
</p><p>[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }
+
 
−
</p><p>/* Left clearing for block grid columns - columns that changes width in
+
[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }
 +
 
 +
/* Left clearing for block grid columns - columns that changes width in
 
different screen sizes. Allows columns with different heights to align
 
different screen sizes. Allows columns with different heights to align
 
properly.
 
properly.
−
</p>
+
--------------------------------------------------------------------- */
−
<hr /> */
+
.first { clear: left; }  /* first column in default screen */
−
<p>.first { clear: left; }  /* first column in default screen */
+
 
.s-first { clear: none; } /* first column in smaller screens */
 
.s-first { clear: none; } /* first column in smaller screens */
−
</p><p>/* smaller screens
+
 
−
</p>
+
/* smaller screens
−
<hr /> */
+
--------------------------------------------------------------- */
−
<p>@media only screen and (max-width: 900px) {
+
@media only screen and (max-width: 900px) {
−
</p>
+
 
−
<pre>  /* block grids on small screens */
+
  /* block grids on small screens */
−
  .s-bgrid-sixths [class*="column"]  { width: 16.66667%; }
+
  .s-bgrid-sixths [class*="column"]  { width: 16.66667%; }
−
  .s-bgrid-quarters [class*="column"] { width: 25%; }
+
  .s-bgrid-quarters [class*="column"] { width: 25%; }
−
  .s-bgrid-thirds [class*="column"]  { width: 33.33333%; }
+
  .s-bgrid-thirds [class*="column"]  { width: 33.33333%; }
−
  .s-bgrid-halves [class*="column"]  { width: 50%; }
+
  .s-bgrid-halves [class*="column"]  { width: 50%; }
−
</pre>
+
 
−
<pre>  /* block grids left clearing */
+
  /* block grids left clearing */
−
  .first { clear: none; }
+
  .first { clear: none; }
−
  .s-first { clear: left; }
+
  .s-first { clear: left; }
−
</pre>
+
 
−
<p>}
+
}
−
</p><p>/* mobile wide/smaller tablets
+
 
−
</p>
+
/* mobile wide/smaller tablets
−
<hr /> */
+
--------------------------------------------------------------- */
−
<p>@media only screen and (max-width: 767px) {
+
@media only screen and (max-width: 767px) {
−
</p>
+
  .row { width: auto; }
−
<pre>  .row { width: auto; }
+
  .column, .columns {
−
  .column, .columns {
+
  width: auto !important;
−
</pre>
+
−
<p>   width: auto !important;
+
 
  float: none;
 
  float: none;
 
  margin-left: 0;
 
  margin-left: 0;
 
  margin-right: 0;
 
  margin-right: 0;
−
</p>
+
      padding: 0 30px;
−
<pre>    padding: 0 30px;
+
  }
−
  }
+
  .row .row { width: auto; max-width: none; margin: 0 -30px; }
−
  .row .row { width: auto; max-width: none; margin: 0 -30px; }
+
 
−
</pre>
+
  [class*="column"] + [class*="column"]:last-child { float: none; }
−
<pre>  [class*="column"] + [class*="column"]:last-child { float: none; }
+
  [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }
−
  [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }
+
 
−
</pre>
+
  /* Offsets */
−
<pre>  /* Offsets */
+
  .row .offset-1    { margin-left: 0%; }
−
  .row .offset-1    { margin-left: 0%; }
+
  .row .offset-2    { margin-left: 0%; }
−
  .row .offset-2    { margin-left: 0%; }
+
  .row .offset-3    { margin-left: 0%; }
−
  .row .offset-3    { margin-left: 0%; }
+
  .row .offset-4    { margin-left: 0%; }
−
  .row .offset-4    { margin-left: 0%; }
+
  .row .offset-5    { margin-left: 0%; }
−
  .row .offset-5    { margin-left: 0%; }
+
  .row .offset-6    { margin-left: 0%; }
−
  .row .offset-6    { margin-left: 0%; }
+
  .row .offset-7    { margin-left: 0%; }
−
  .row .offset-7    { margin-left: 0%; }
+
  .row .offset-8    { margin-left: 0%; }
−
  .row .offset-8    { margin-left: 0%; }
+
  .row .offset-9    { margin-left: 0%; }
−
  .row .offset-9    { margin-left: 0%; }
+
  .row .offset-10  { margin-left: 0%; }
−
  .row .offset-10  { margin-left: 0%; }
+
  .row .offset-11  { margin-left: 0%; }
−
  .row .offset-11  { margin-left: 0%; }
+
}
−
</pre>
+
 
−
<p>}
+
/* mobile narrow
−
</p><p>/* mobile narrow
+
--------------------------------------------------------------- */
−
</p>
+
@media only screen and (max-width: 480px) {
−
<hr /> */
+
 
−
<p>@media only screen and (max-width: 480px) {
+
  .row { width: auto; }
−
</p>
+
 
−
<pre>  .row { width: auto; }
+
}
−
</pre>
+
 
−
<p>}
+
/* larger screens
−
</p><p>/* larger screens
+
--------------------------------------------------------------- */
−
</p>
+
@media screen and (min-width: 1200px) {
−
<hr /> */
+
 
−
<p>@media screen and (min-width: 1200px) {
+
  .wide .row { max-width: 1180px; }
−
</p>
+
 
−
<pre>  .wide .row { max-width: 1180px; }
+
}
−
</pre>
+
 
−
<p>}
+
/* ------------------------------------------------------------------ */
−
</p><p>/* ------------------------------------------------------------------ */
+
 
/* e. Others
 
/* e. Others
 
/* ------------------------------------------------------------------ */
 
/* ------------------------------------------------------------------ */
−
</p><p>/*  1. Clearing
+
 
−
</p>
+
/*  1. Clearing
−
<pre>  (<a rel="nofollow" class="external free" href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>
+
    (http://nicolasgallagher.com/micro-clearfix-hack/
−
</pre>
+
--------------------------------------------------------------------- */
−
<hr /> */
+
 
−
<p>.cf:before,
+
.cf:before,
 
.cf:after {
 
.cf:after {
−
</p>
+
    content: " ";
−
<pre>  content: " ";
+
    display: table;
−
  display: table;
+
}
−
</pre>
+
−
<p>}
+
 
.cf:after {
 
.cf:after {
−
</p>
+
    clear: both;
−
<pre>  clear: both;
+
}
−
</pre>
+
 
−
<p>}
+
/*  2. Misc -------------------------------------------------------- */
−
</p><p>/*  2. Misc -------------------------------------------------------- */
+
 
−
</p><p>.remove-bottom { margin-bottom: 0 !important; }
+
.remove-bottom { margin-bottom: 0 !important; }
 
.half-bottom { margin-bottom: 12px !important; }
 
.half-bottom { margin-bottom: 12px !important; }
 
.add-bottom { margin-bottom: 24px !important; }
 
.add-bottom { margin-bottom: 24px !important; }
 
.no-border { border: none; }
 
.no-border { border: none; }
−
</p><p>.text-center  { text-align: center !important; }
+
 
 +
.text-center  { text-align: center !important; }
 
.text-left    { text-align: left !important; }
 
.text-left    { text-align: left !important; }
 
.text-right  { text-align: right !important; }
 
.text-right  { text-align: right !important; }
Line 945: Line 813:
 
text-align: center !important;
 
text-align: center !important;
 
}
 
}
−
</p>
 
−
<!--
 
−
NewPP limit report
 
−
CPU time usage: 0.022 seconds
 
−
Real time usage: 0.023 seconds
 
−
Preprocessor visited node count: 8/1000000
 
−
Preprocessor generated node count: 14/1000000
 
−
Post‐expand include size: 0/2097152 bytes
 
−
Template argument size: 0/2097152 bytes
 
−
Highest expansion depth: 2/40
 
−
Expensive parser function count: 0/100
 
−
-->
 
−
 
−
<!-- Saved in parser cache with key 2016_igem_org:pcache:idhash:11032-0!*!*!!*!*!* and timestamp 20181013182410 and revision id 247586
 
−
-->
 
−
</div>             <div class="visualClear"></div>
 
−
            </div>
 
−
    </div>
 
−
 
−
        </div>
 
−
 
−
        <!-- Side Menubar -->
 
−
        <div id="sideMenu">
 
−
            <a href="https://2016.igem.org">
 
−
                <div id="home_logo" >
 
−
                <img src="https://static.igem.org/mediawiki/2016/b/bf/HQ_menu_logo.jpg">
 
−
                </div>
 
−
            </a>
 
−
 
−
            <div style="clear:both; height:5px;"></div>
 
−
 
−
            <div id="menuDisplay"></div>  <!- Menu will be loaded here ->
 
−
        </div>
 
−
 
−
        <!-- Pop_Why Div is definded here -->
 
−
        <div class="pop_why_cover"></div>
 
−
 
−
        <div class="pop_why_box" >
 
−
            <div class="pop_close">× </div>
 
−
            <div class="pop_why_content"><h3> Loading ... </h3></div>
 
−
        </div>
 
−
 
−
    </div>
 
−
</html>
 

Latest revision as of 14:23, 14 October 2018

/*

=========================================================
  • Sparrow v1.0 Default Stylesheet
  • url: styleshout.com
  • 02-07-2014
=========================================================

TOC: a. Webfonts and Icon fonts b. Reset c. Default Styles 

  1. Basic
  2. Typography
  3. Links
  4. Images
  5. Buttons
  6. Forms

d. Grid e. Others 

  1. Clearing
  2. Misc

===================================================================== */

/* ------------------------------------------------------------------ */ /* a. Webfonts and Icon fonts 

------------------------------------------------------------------ */

@import url("https://2016.igem.org/Template:Peking/css/fonts?action=raw&ctype=text/css"); @import url("https://2016.igem.org/Template:Peking/css/font_awesome_min?action=raw&ctype=text/css");

/* ------------------------------------------------------------------ /* b. Reset 

     Adapted from:
     Normalize.css - https://github.com/necolas/normalize.css/
     HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/

/* ------------------------------------------------------------------ */

html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, canvas, details, figcaption, figure, 

header, hgroup, menu, nav, section, summary,

time, mark, audio, video { 

  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;

}

article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { 

  display: block;

}

audio, canvas, video { 

  display: inline-block;

}

audio:not([controls]) { 

  display: none;
  height: 0;

}

[hidden] { display: none; }

code, kbd, pre, samp { 

  font-family: monospace, serif;
  font-size: 1em;

}

pre { 

  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;

}

blockquote, q { quotes: &#8220 “ }

blockquote:before, blockquote:after, q:before, q:after { 

  content: ;
  content: none;

}

ins { 

  background-color: #ff9;
  color: #000;
  text-decoration: none;

}

mark { 

  background-color: #A7F4F6;
  color: #555;

}

del { text-decoration: line-through; }

abbr[title], dfn[title] { 

  border-bottom: 1px dotted;
  cursor: help;

}

table { 

  border-collapse: collapse;
  border-spacing: 0;

}


/* ------------------------------------------------------------------ */ /* c. Default and Basic Styles 

     Adapted from:
     Skeleton CSS Framework - http://www.getskeleton.com/
     Typeplate Typographic Starter Kit - http://typeplate.com/

/* ------------------------------------------------------------------ */

/* 1. Basic ------------------------------------------------------- */

  • ,
    before,
    after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}

html { font-size: 62.5%; }

body { 

  background: #fff;
  font-family: raleway-regular, sans-serif;
  font-size: 15px;
  line-height: 30px;

color: #5E5656; 

  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */

-webkit-text-size-adjust: 100%; }

/* 2. Typography 

      Vertical rhythm with leading derived from 6
*/

.h1a, h2, h3, h4, h5, h6 { 

  color: #313131;

font-family: raleway-bold, sans-serif; } .h1a a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } .h1a { font-size: 42px; line-height: 48px; margin-bottom: 12px;} h2 { font-size: 30px; line-height: 42px; margin-bottom: 6px; } h3 { font-size: 24px; line-height: 30px; margin-bottom: 12px; } h4 { font-size: 21px; line-height: 30px; margin-bottom: 6px; } h5 { font-size: 18px; line-height: 30px; } h6 { font-size: 14px; line-height: 30px; } .subheader { }

.texttitle{ color: #11abb0; font-size: 38px; line-height: 48px; margin-bottom: 12px; font-family: raleway-bold, sans-serif; background: transparent; letter-spacing: 3px; text-transform: uppercase; font-weight: 330; }

p { margin: 0 0 0px 0; } p img { margin: 0; } p.lead { 

  font: 18px/36px raleway-regular, sans-serif !important;
  margin-bottom: 18px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: #605C5C;

}

/* for 'em' and 'strong' tags, font-size and line-height should be same with the body tag due to rendering problems in some browsers */ em { font: 15px/30px notosans-italic, sans-serif; } strong, b { font: 15px/30px notosans-bold, sans-serif; } small { font-size: 11px; line-height: inherit; }

/* Blockquotes */ blockquote { 

  margin: 30px 0px;
  padding-left: 40px;
  position: relative;

} blockquote:before { 

  content: "\201C";
  opacity: 0.45;
  font-size: 80px;
  line-height: 0px;
  margin: 0;
  font-family: arial, sans-serif;

  position: absolute;
  top:  30px;

left: 0; } blockquote p { 

  font-family: georgia, serif;
  font-style: italic;
  padding: 0;
  font-size: 18px;
  line-height: 30px;

} blockquote cite { 

  display: block;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;

} blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #8B9798; border: none }

/* --------------------------------------------------------------------- /* Pull Quotes Markup /* 

   <aside class="pull-quote">

</aside> /* /* --------------------------------------------------------------------- */ .pull-quote { 

  position: relative;

padding: 18px 30px 18px 0px; } .pull-quote:before, .pull-quote:after { height: 1em; opacity: 0.45; position: absolute; font-size: 80px; 

  font-family: Arial, Sans-Serif;

} .pull-quote:before { content: "\201C"; top: 33px; left: 0; } .pull-quote:after { content: '\201D'; bottom: -33px; right: 0; } .pull-quote blockquote { 

  margin: 0;

} .pull-quote blockquote:before { 

  content: none;

}

/* Abbreviations */ abbr { 

  font-family: notosans-bold, sans-serif;

font-variant: small-caps; text-transform: lowercase; 

  letter-spacing: .5px;

color: gray; } abbr:hover { cursor: help; }

/* drop cap */ .drop-cap:first-letter { float: left; margin: 0; padding: 14px 6px 0 0; font-size: 84px; font-family: /* Copperplate */ raleway-bold, sans-serif; 

  line-height: 60px;

text-indent: 0; background: transparent; color: inherit; }

hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }


/* 3. Links ------------------------------------------------------- */

a, a:visited { 

  text-decoration: none;
  outline: 0;
  color: #383232;

  -webkit-transition: color .3s ease-in-out;
  -moz-transition: color .3s ease-in-out;
  -o-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;

} a:hover, a:focus { color: #11abb0; } p a, p a:visited { line-height: inherit; }

.sidebar a:focus { color:#00afd1; } .siderbar a,a:vistied {color:#666666;}

/* 4. List --------------------------------------------------------- */

ul, ol { margin-bottom: 24px; margin-top: 12px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 6px 0 6px 30px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } ul.large li { } li p { }

/* --------------------------------------------------------------------- /* Stats Tab Markup

  • <a href="#">[value][name]</a>
   Extend this object into your markup.

/* /* --------------------------------------------------------------------- */ .stats-tabs { 

  padding: 0;
  margin: 24px 0;

} .stats-tabs li { display: inline-block; margin: 0 10px 18px 0; padding: 0 10px 0 0; border-right: 1px solid #ccc; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 22px; font-family: notosans-bold, sans-serif; 

  border: none;
  color: #313131;

} .stats-tabs li a:hover { 

  color:#11ABB0;

} .stats-tabs li a b { display: block; margin: 6px 0 0 0; font-size: 13px; font-family: notosans-regular, sans-serif; 

  color: #8B9798;

}

/* definition list */ dl { margin: 12px 0; } dt { margin: 0; color:#11ABB0; } dd { margin: 0 0 0 20px; }

/* Lining Definition Style Markup */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; } .lining dd + dd:before { content: ", "; } .lining dd:before { content: ": "; margin-left: -0.2em; }

/* Dictionary Definition Style Markup */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt + dt:before { content: ", "; margin-left: -0.2em; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions, decimal) ". "; }

/* Pagination */ .pagination { 

  margin: 36px auto;
  text-align: center;

} .pagination ul li { 

  display: inline-block;
  margin: 0;
  padding: 0;

} .pagination .page-numbers { 

  font: 15px/18px notosans-bold, sans-serif;
  display: inline-block;
  padding: 6px 10px;
  margin-right: 3px;
  margin-bottom: 6px;

color: #6E757C; background-color: #E6E8EB;

-webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; 

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;

border-radius: 3px; } .pagination .page-numbers:hover { 

  background: #838A91;
  color: #fff;

} .pagination .current, .pagination .current:hover { 

  background-color: #11ABB0;
  color: #fff;

} .pagination .inactive, .pagination .inactive:hover { 

  background-color: #E6E8EB;

color: #A9ADB2; } .pagination .prev, .pagination .next {}

/* 5. Images --------------------------------------------------------- */

img { 

  max-width: 100%;
  height: auto;

} img.pull-right { margin: 12px 0px 0px 18px; } img.pull-left { margin: 12px 18px 0px 0px; }

/* 6. Buttons --------------------------------------------------------- */

.button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] { 

  font: 16px/30px notosans-bold, sans-serif;
  background: #11ABB0;
  display: inline-block;

text-decoration: none; 

  letter-spacing: 0;
  color: #fff;

padding: 12px 24px; margin-bottom: 18px; 

  border: none;
  cursor: pointer;
  height: auto;

  -webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; 

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;

}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { 

  background: #3d4145;
  color: #fff;

}

.button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { 

  background: #3d4145;
  color: #fff;

}

.button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; }

/* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { 

   border: 0;
   padding: 0;

}


/* 7. Forms --------------------------------------------------------- */

form { margin-bottom: 24px; } fieldset { margin-bottom: 24px; }

input[type="text"], input[type="password"], input[type="email"], textarea, select { 

  display: block;
  padding: 18px 15px;
  margin: 0 0 24px 0;
  border: 0;
  outline: none;
  vertical-align: middle;
  min-width: 260px;

max-width: 100%; 

  font-size: 15px;
  line-height: 24px;

color: #647373; background: #D3D9D9; 

  -moz-border-radius: 3px;

-webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

/* select { padding: 0; 

  width: 220px;
  } */

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { 

  color: #B3B7BC;

background-color: #3d4145; }

textarea { min-height: 200px; }

label, legend { 

  font: 16px/24px notosans-bold, sans-serif;

margin: 12px 0; 

  color: #3d4145;
  display: block;

} label span, legend span { color: #8B9798; 

  font: 14px/24px notosans-regular, sans-serif;

}

input[type="checkbox"], input[type="radio"] { 

   font-size: 15px;
   color: #737373;

}

input[type="checkbox"] { display: inline; }

/* ------------------------------------------------------------------ */ /* d. Grid 

  gutter = 40px.

/* ------------------------------------------------------------------ */

/* default

*/

.row { 

  width: 96%;
  max-width: 1020px;
  margin: 0 auto;

} /* fixed width for IE8 */ .ie .row { width: 1000px ; }

.narrow .row { max-width: 980px; }

.row .row { width: auto; max-width: none; margin: 0 -20px; }

/* row clearing */ .row:before, .row:after { 

   content: " ";
   display: table;

} .row:after { 

   clear: both;

}

.column, .columns { 

  position: relative;
  padding: 0 20px;
  min-height: 1px;
  float: left;

} .column.centered, .columns.centered { 

   float: none;
   margin: 0 auto;

}

/* removed gutters */ .row.collapsed > .column, .row.collapsed > .columns, .column.collapsed, .columns.collapsed { padding: 0; }

[class*="column"] + [class*="column"]:last-child { float: right; } [class*="column"] + [class*="column"].end { float: right; }

/* column widths */ .row .one { width: 8.33333%; } .row .two { width: 16.66667%; } .row .three { width: 25%; } .row .four { width: 33.33333%; } .row .five { width: 41.66667%; } .row .six { width: 50%; } .row .seven { width: 58.33333%; } .row .eight { width: 66.66667%; } .row .nine { width: 75%; } .row .ten { width: 83.33333%; } .row .eleven { width: 91.66667%; } .row .twelve { width: 100%; }

/* Offsets */ .row .offset-1 { margin-left: 8.33333%; } .row .offset-2 { margin-left: 16.66667%; } .row .offset-3 { margin-left: 25%; } .row .offset-4 { margin-left: 33.33333%; } .row .offset-5 { margin-left: 41.66667%; } .row .offset-6 { margin-left: 50%; } .row .offset-7 { margin-left: 58.33333%; } .row .offset-8 { margin-left: 66.66667%; } .row .offset-9 { margin-left: 75%; } .row .offset-10 { margin-left: 83.33333%; } .row .offset-11 { margin-left: 91.66667%; }

/* Push/Pull */ .row .push-1 { left: 8.33333%; } .row .pull-1 { right: 8.33333%; } .row .push-2 { left: 16.66667%; } .row .pull-2 { right: 16.66667%; } .row .push-3 { left: 25%; } .row .pull-3 { right: 25%; } .row .push-4 { left: 33.33333%; } .row .pull-4 { right: 33.33333%; } .row .push-5 { left: 41.66667%; } .row .pull-5 { right: 41.66667%; } .row .push-6 { left: 50%; } .row .pull-6 { right: 50%; } .row .push-7 { left: 58.33333%; } .row .pull-7 { right: 58.33333%; } .row .push-8 { left: 66.66667%; } .row .pull-8 { right: 66.66667%; } .row .push-9 { left: 75%; } .row .pull-9 { right: 75%; } .row .push-10 { left: 83.33333%; } .row .pull-10 { right: 83.33333%; } .row .push-11 { left: 91.66667%; } .row .pull-11 { right: 91.66667%; }

/* block grids

*/

.bgrid-sixths [class*="column"] { width: 16.66667%; } .bgrid-quarters [class*="column"] { width: 25%; } .bgrid-thirds [class*="column"] { width: 33.33333%; } .bgrid-halves [class*="column"] { width: 50%; }

[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }

/* Left clearing for block grid columns - columns that changes width in different screen sizes. Allows columns with different heights to align properly.

*/

.first { clear: left; } /* first column in default screen */ .s-first { clear: none; } /* first column in smaller screens */

/* smaller screens

*/

@media only screen and (max-width: 900px) { 

  /* block grids on small screens */
  .s-bgrid-sixths [class*="column"]   { width: 16.66667%; }
  .s-bgrid-quarters [class*="column"] { width: 25%; }
  .s-bgrid-thirds [class*="column"]   { width: 33.33333%; }
  .s-bgrid-halves [class*="column"]   { width: 50%; }

  /* block grids left clearing */
  .first { clear: none; }
  .s-first { clear: left; }

}

/* mobile wide/smaller tablets

*/

@media only screen and (max-width: 767px) { 

  .row { width: auto; }
  .column, .columns {

width: auto !important; float: none; margin-left: 0; margin-right: 0; 

     padding: 0 30px;
  }
  .row .row { width: auto; max-width: none; margin: 0 -30px; }

  [class*="column"] + [class*="column"]:last-child { float: none; }
  [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }

  /* Offsets */
  .row .offset-1    { margin-left: 0%; }
  .row .offset-2    { margin-left: 0%; }
  .row .offset-3    { margin-left: 0%; }
  .row .offset-4    { margin-left: 0%; }
  .row .offset-5    { margin-left: 0%; }
  .row .offset-6    { margin-left: 0%; }
  .row .offset-7    { margin-left: 0%; }
  .row .offset-8    { margin-left: 0%; }
  .row .offset-9    { margin-left: 0%; }
  .row .offset-10   { margin-left: 0%; }
  .row .offset-11   { margin-left: 0%; }

}

/* mobile narrow

*/

@media only screen and (max-width: 480px) { 

  .row { width: auto; }

}

/* larger screens

*/

@media screen and (min-width: 1200px) { 

  .wide .row { max-width: 1180px; }

}

/* ------------------------------------------------------------------ */ /* e. Others /* ------------------------------------------------------------------ */

/* 1. Clearing 

   (http://nicolasgallagher.com/micro-clearfix-hack/
*/

.cf:before, .cf:after { 

   content: " ";
   display: table;

} .cf:after { 

   clear: both;

}

/* 2. Misc -------------------------------------------------------- */

.remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 12px !important; } .add-bottom { margin-bottom: 24px !important; } .no-border { border: none; }

.text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .pull-left { float: left !important; } .pull-right { float: right !important; } .align-center { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }