info/php-the-right-way
1
0
Fork 0
mirror of https://github.com/codeguy/php-the-right-way.git synced 2025-08-06 05:57:26 +02:00
Code Issues Projects Releases Wiki Activity

Add new UI files

Browse Source
This commit is contained in:
=
2012-07-09 12:08:25 -04:00
parent 698d11bb4c
commit 4123062047
20 changed files with 2087 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
_layouts/default.html
View File

@@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>PHP: The Right Way</title> <title>{% if page.title %}{{ page.title }} - {% endif %}PHP: The Right Way</title>
<meta name="description" content="An easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative PHP tutorials around the Web"/> <meta name="description" content="{{ page.description }}"/>
<meta name="robots" content="index,follow,archive"/> <meta name="robots" content="index,follow,archive"/>
<meta property="og:image" content="http://www.phptherightway.com/images/og-logo.png"/> <meta property="og:image" content="http://www.phptherightway.com/images/og-logo.png"/>
<meta property="og:title" content="PHP: The Right Way"/> <meta property="og:title" content="PHP: The Right Way"/>
@@ -12,7 +12,7 @@
<meta property="og:site_name" content="PHP: The Right Way"/> <meta property="og:site_name" content="PHP: The Right Way"/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif"/> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif"/>
<link rel="stylesheet" href="/styles.css"/> <link rel="stylesheet" href="/styles/all.css"/>
<link rel="icon" href="/images/favicon.png" type="image/png"/> <link rel="icon" href="/images/favicon.png" type="image/png"/>
<script> <script>
var _gaq = _gaq || []; var _gaq = _gaq || [];
@@ -26,35 +26,37 @@
</script> </script>
</head> </head>
<body> <body>
<header class="site-header"> <nav class="site-navigation">
<div class="site-title"><a href="/">PHP</a></div> <ul>
<div class="site-slogan">The Right Way.</div> <li><a href="/index.html#introduction">Introduction</a></li>
<nav> <li><a href="/index.html#code_style_guide">Code Style Guide</a></li>
<ul class="toc"> <li><a href="/index.html#namespaces">Namespaces</a></li>
<li><a href="#introduction">Introduction</a></li> <li><a href="/index.html#input_filtering">Input Filtering</a></li>
<li><a href="#code_style_guide">Code Style Guide</a></li> <li><a href="/index.html#databases_and_pdo">Databases and PDO</a></li>
<li><a href="#namespaces">Namespaces</a></li> <li><a href="/index.html#password_hashing_with_bcrypt">Password Hashing with Bcrypt</a></li>
<li><a href="#input_filtering">Input Filtering</a></li> <li><a href="/index.html#dependency_management">Dependency Management</a></li>
<li><a href="#databases_and_pdo">Databases and PDO</a></li> <li><a href="/index.html#web_application_security">Web Application Security</a></li>
<li><a href="#password_hashing_with_bcrypt">Password Hashing with Bcrypt</a></li> <li><a href="/index.html#command_line_interface">Command Line Interface</a></li>
<li><a href="#dependency_management">Dependency Management</a></li> <li><a href="/index.html#popular_frameworks">Popular Frameworks</a></li>
<li><a href="#web_application_security">Web Application Security</a></li> <li><a href="/index.html#links_and_resources">Links &amp; Resources</a></li>
<li><a href="#command_line_interface">Command Line Interface</a></li> </ul>
<li><a href="#popular_frameworks">Popular Frameworks</a></li> </nav>
<li><a href="#links_and_resources">Links &amp; Resources</a></li>
</ul>
</nav>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.phptherightway.com/" data-size="large" data-hashtags="php">Tweet</a>
</header>
<div class="site-content"> <div class="site-content">
<header class="site-header">
<hgroup>
<h1 class="site-title"><a href="/">PHP</a></h1>
<h2 class="site-slogan">The Right Way.</h2>
</hgroup>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.phptherightway.com/" data-size="large" data-hashtags="php">Tweet</a>
</header>
{{ content }} {{ content }}
<footer class="site-footer">
<p>Created and maintained by <a href="http://twitter.com/codeguy">Josh Lockhart</a>. Favicon from <a href="http://pictos.cc/">Pictos</a>.</p>
<small>Sponsored by <a href="http://www.newmediacampaigns.com"><img src="images/nmc-logo.gif" alt="New Media Campaigns"/></a></small>
</footer>
</div> </div>
<footer class="site-footer">
<small>Created and maintained by <a href="http://twitter.com/codeguy">Josh Lockhart</a>. Favicon from <a href="http://pictos.cc/">Pictos</a>.</small>
</footer>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body> </body>
</html> </html>

18
banners.md
View File

@@ -1,5 +1,5 @@
--- ---
layout: blank layout: default
title: Website Banners title: Website Banners
description: "Spread the word! Use these banner to let new PHP programmers know about PHP: The Right Way" description: "Spread the word! Use these banner to let new PHP programmers know about PHP: The Right Way"
--- ---
@@ -10,7 +10,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Button 1 (120x90) ## Button 1 (120x90)
<img src="/images/banners/btn1-120x90.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/btn1-120x90.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/btn1-120x90.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/btn1-120x90.png" alt="PHP: The Right Way"/>
@@ -18,7 +18,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Button 2 (120x60) ## Button 2 (120x60)
<img src="/images/banners/btn2-120x60.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/btn2-120x60.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/btn2-120x60.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/btn2-120x60.png" alt="PHP: The Right Way"/>
@@ -26,7 +26,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Leaderboard (728x90) ## Leaderboard (728x90)
<img src="/images/banners/leaderboard-728x90.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/leaderboard-728x90.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/leaderboard-728x90.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/leaderboard-728x90.png" alt="PHP: The Right Way"/>
@@ -34,7 +34,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Large Rectangle (386x280) ## Large Rectangle (386x280)
<img src="/images/banners/lg-rect-386x280.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/lg-rect-386x280.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/lg-rect-386x280.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/lg-rect-386x280.png" alt="PHP: The Right Way"/>
@@ -42,7 +42,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Medium Rectangle (300x250) ## Medium Rectangle (300x250)
<img src="/images/banners/med-rect-300x250.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/med-rect-300x250.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/med-rect-300x250.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/med-rect-300x250.png" alt="PHP: The Right Way"/>
@@ -50,7 +50,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Rectangle (180x150) ## Rectangle (180x150)
<img src="/images/banners/rect-180x150.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/rect-180x150.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/rect-180x150.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/rect-180x150.png" alt="PHP: The Right Way"/>
@@ -58,7 +58,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Square Button (125x125) ## Square Button (125x125)
<img src="/images/banners/sq-btn-125x125.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/sq-btn-125x125.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/sq-btn-125x125.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/sq-btn-125x125.png" alt="PHP: The Right Way"/>
@@ -66,7 +66,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers
## Vertical Rectangle (240x400) ## Vertical Rectangle (240x400)
<img src="/images/banners/vert-rect-240x400.png" alt="PHP: The Right Way"/> <p><img src="/images/banners/vert-rect-240x400.png" alt="PHP: The Right Way"/></p>
<a href="http://www.phptherightway.com"> <a href="http://www.phptherightway.com">
<img src="http://www.phptherightway.com/images/banners/vert-rect-240x400.png" alt="PHP: The Right Way"/> <img src="http://www.phptherightway.com/images/banners/vert-rect-240x400.png" alt="PHP: The Right Way"/>

BIN
images/nmc-logo.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 B

271
styles/all.css Normal file
View File

@@ -0,0 +1,271 @@
html,body,div,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,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
.ptn,.pvn,.pan{padding-top:0px !important;}
.pth,.pvh,.pah{padding-top:10px !important;}
.pts,.pvs,.pas{padding-top:20px !important;}
.ptd,.pvd,.pad{padding-top:40px !important;}
.prn,.phn,.pan{padding-right:0px !important;}
.prh,.phh,.pah{padding-right:10px !important;}
.prs,.phs,.pas{padding-right:20px !important;}
.prd,.phd,.pad{padding-right:40px !important;}
.pbn,.pvn,.pan{padding-bottom:0px !important;}
.pbh,.pvh,.pah{padding-bottom:10px !important;}
.pbs,.pvs,.pas{padding-bottom:20px !important;}
.pbd,.pvd,.pad{padding-bottom:40px !important;}
.pln,.phn,.pan{padding-left:0px !important;}
.plh,.phh,.pah{padding-left:10px !important;}
.pls,.phs,.pas{padding-left:20px !important;}
.pld,.phd,.pad{padding-left:40px !important;}
.mtn,.mvn,.man{margin-top:0px !important;}
.mth,.mvh,.mah{margin-top:10px !important;}
.mts,.mvs,.mas{margin-top:20px !important;}
.mtd,.mvd,.mad{margin-top:40px !important;}
.mrn,.mhn,.man{margin-right:0px !important;}
.mrh,.mhh,.mah{margin-right:10px !important;}
.mrs,.mhs,.mas{margin-right:20px !important;}
.mrd,.mhd,.mad{margin-right:40px !important;}
.mbn,.mvn,.man{margin-bottom:0px !important;}
.mbh,.mvh,.mah{margin-bottom:10px !important;}
.mbs,.mvs,.mas{margin-bottom:20px !important;}
.mbd,.mvd,.mad{margin-bottom:40px !important;}
.mln,.mhn,.man{margin-left:0px !important;}
.mlh,.mhh,.mah{margin-left:10px !important;}
.mls,.mhs,.mas{margin-left:20px !important;}
.mld,.mhd,.mad{margin-left:40px !important;}
.lhh{line-height:10px !important;}
.lhs{line-height:20px !important;}
.lhd{line-height:40px !important;}
.lhn{line-height:0px !important;}
html,body{font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;color:#666666;font-size:14px;line-height:20px !important;}
h1,h2,h3,h4,h5,h6,ul,ol,dl,p,blockquote,table,form,pre{margin-bottom:20px !important;}
.all-headers{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;}
h1,.alpha{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:35px;line-height:40px !important;}
h2,.beta{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:24.5px;line-height:40px !important;}
h3,.gamma{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:21px;line-height:40px !important;}
h4,.delta{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:21px;line-height:40px !important;margin-bottom:0px !important;}
h5,.epsilon{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:16.8px;line-height:20px !important;margin-bottom:0px !important;}
h6,.zeta{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:14px;line-height:20px !important;margin-bottom:0px !important;}
.giga{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:84px;line-height:80px;}
.mega{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:70px;line-height:60px;}
.kilo{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:56px;line-height:60px;}
.milli{color:#111111;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;font-weight:bold;font-size:11.200000000000001px;}
a{color:#000000;}
a:link{text-decoration:underline;}
a:hover{text-decoration:none;}
small{font-size:80%;}
sup,sub{font-size:80%;line-height:0px !important;}
sup{vertical-align:super;}
sub{vertical-align:sub;}
.lead{color:#333333;font-size:16px;}
blockquote{border-left:5px solid rgba(0, 0, 0, 0.1);margin-right:20px !important;margin-left:20px !important;padding-left:20px !important;color:#333333;font-size:16px;}blockquote :last-child{margin-bottom:0px !important;}
blockquote small{color:rgba(0, 0, 0, 0.5);font-size:14px;font-style:normal;}
pre,code,kbd{background:#F8F8F8;border:1px solid #EAEAEA;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin:0 2px;padding:0 5px;font-family:Consolas,"Courier New",Courier,mono;font-size:12.6px;color:#666666;word-wrap:break-word;}
pre{margin-right:20px !important;margin-left:20px !important;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;}pre code{border:none;margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;}
a code{background:none;border:none;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;}
strong{font-weight:bold;}
em{font-style:italic;}
ol,ul,dl{margin-left:20px !important;padding-left:20px !important;}ol ol,ul ol,dl ol,ol ul,ul ul,dl ul{margin-bottom:0px !important;}
dt{font-weight:bold;}
dd{margin-left:20px !important;}
.table{border-collapse:collapse;border-spacing:0;width:100%;}
.table th,.table td{border-top:1px solid rgba(0, 0, 0, 0.1);padding:8px;text-align:left;}
.table thead th{vertical-align:bottom;font-weight:bold;}
.table thead tr:first-child th{border-top:none;}
.table-bordered{border:1px solid rgba(0, 0, 0, 0.1);border-collapse:separate;border-left:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.table-bordered th,.table-bordered td{border-left:1px solid rgba(0, 0, 0, 0.1);}
.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.table-striped tbody tr:nth-child(odd) td{background:rgba(0, 0, 0, 0.04);}
.alert{background:#FCF8E3;border:1px solid #FBEED5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-bottom:20px !important;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;color:#C09853;}
.alert-success{background:#FCF8E3;border:1px solid #FBEED5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-bottom:20px !important;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;color:#C09853;background-color:#DFF0D8;border-color:#D6E9C6;color:#468847;}
.alert-error{background:#FCF8E3;border:1px solid #FBEED5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-bottom:20px !important;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;color:#C09853;background-color:#F2DEDE;border-color:#EED3D7;color:#B94A48;}
.alert-info{background:#FCF8E3;border:1px solid #FBEED5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-bottom:20px !important;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;color:#C09853;background-color:#D9EDF7;border-color:#BCE8F1;color:#3A87AD;}
label{display:block;font-weight:bold;}label .req{color:#000000;font-weight:bold;}
input.text,textarea,select,.radio-group,.checkbox-group{margin-bottom:20px !important;}
input.text,textarea{border:none;margin:0;padding:0;-webkit-appearance:none;background:#EEE;border:1px solid #CCC;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 3px;-moz-box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 3px;box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 3px;height:30px;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;width:100%;}
textarea{height:120px;}
select{min-width:30%;}
.checkbox-group label,.radio-group label{font-weight:normal;}
.error{background-color:#F2DEDE !important;border-color:red !important;outline-color:red !important;color:red !important;}
.no-text,.text-replace{overflow:hidden;text-indent:100%;white-space:nowrap;}
.no-list{list-style:none;margin:0;padding:0;}
.no-form{border:none;margin:0;padding:0;-webkit-appearance:none;}
.full-size{height:100%;width:100%;}
.absolute-default{position:absolute;left:0;top:0;}
.absolute-fullsize{position:absolute;left:0;top:0;height:100%;width:100%;}
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.grid-fixed,.grid-fluid{*zoom:1;}.grid-fixed:before,.grid-fluid:before,.grid-fixed:after,.grid-fluid:after{content:"";display:table;}
.grid-fixed:after,.grid-fluid:after{clear:both;}
.grid-fixed .row,.grid-fluid .row{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;margin:0 auto;*zoom:1;}.grid-fixed .row:before,.grid-fluid .row:before,.grid-fixed .row:after,.grid-fluid .row:after{content:"";display:table;}
.grid-fixed .row:after,.grid-fluid .row:after{clear:both;}
.grid-fixed .row .center,.grid-fluid .row .center,.grid-fixed .row .center:last-child,.grid-fluid .row .center:last-child{float:none;display:block;margin:0 auto;}
.grid-fixed{width:940px;}.grid-fixed .col12{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:940px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col12:first-child{margin-left:0;}
.grid-fixed .col12:last-child{float:right;}
.grid-fixed .col11{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:860px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col11:first-child{margin-left:0;}
.grid-fixed .col11:last-child{float:right;}
.grid-fixed .col10{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:780px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col10:first-child{margin-left:0;}
.grid-fixed .col10:last-child{float:right;}
.grid-fixed .col9{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:700px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col9:first-child{margin-left:0;}
.grid-fixed .col9:last-child{float:right;}
.grid-fixed .col8{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:620px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col8:first-child{margin-left:0;}
.grid-fixed .col8:last-child{float:right;}
.grid-fixed .col7{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:540px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col7:first-child{margin-left:0;}
.grid-fixed .col7:last-child{float:right;}
.grid-fixed .col6{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:460px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col6:first-child{margin-left:0;}
.grid-fixed .col6:last-child{float:right;}
.grid-fixed .col5{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:380px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col5:first-child{margin-left:0;}
.grid-fixed .col5:last-child{float:right;}
.grid-fixed .col4{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:300px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col4:first-child{margin-left:0;}
.grid-fixed .col4:last-child{float:right;}
.grid-fixed .col3{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:220px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col3:first-child{margin-left:0;}
.grid-fixed .col3:last-child{float:right;}
.grid-fixed .col2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:140px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col2:first-child{margin-left:0;}
.grid-fixed .col2:last-child{float:right;}
.grid-fixed .col1{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:60px;margin-left:20px;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .col1:first-child{margin-left:0;}
.grid-fixed .col1:last-child{float:right;}
.grid-fixed .offset11{margin-left:900px;}
.grid-fixed .offset10{margin-left:820px;}
.grid-fixed .offset9{margin-left:740px;}
.grid-fixed .offset8{margin-left:660px;}
.grid-fixed .offset7{margin-left:580px;}
.grid-fixed .offset6{margin-left:500px;}
.grid-fixed .offset5{margin-left:420px;}
.grid-fixed .offset4{margin-left:340px;}
.grid-fixed .offset3{margin-left:260px;}
.grid-fixed .offset2{margin-left:180px;}
.grid-fixed .offset1{margin-left:100px;}
.grid-fixed .push11{left:880px;}
.grid-fixed .push10{left:800px;}
.grid-fixed .push9{left:720px;}
.grid-fixed .push8{left:640px;}
.grid-fixed .push7{left:560px;}
.grid-fixed .push6{left:480px;}
.grid-fixed .push5{left:400px;}
.grid-fixed .push4{left:320px;}
.grid-fixed .push3{left:240px;}
.grid-fixed .push2{left:160px;}
.grid-fixed .push1{left:80px;}
.grid-fixed .pull11{right:880px;}
.grid-fixed .pull10{right:800px;}
.grid-fixed .pull9{right:720px;}
.grid-fixed .pull8{right:640px;}
.grid-fixed .pull7{right:560px;}
.grid-fixed .pull6{right:480px;}
.grid-fixed .pull5{right:400px;}
.grid-fixed .pull4{right:320px;}
.grid-fixed .pull3{right:240px;}
.grid-fixed .pull2{right:160px;}
.grid-fixed .pull1{right:80px;}
.grid-fluid{width:100%;}.grid-fluid .col12{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col12:first-child{margin-left:0;}
.grid-fluid .col12:last-child{float:right;}
.grid-fluid .col11{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:91.3%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col11:first-child{margin-left:0;}
.grid-fluid .col11:last-child{float:right;}
.grid-fluid .col10{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:82.6%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col10:first-child{margin-left:0;}
.grid-fluid .col10:last-child{float:right;}
.grid-fluid .col9{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:73.9%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col9:first-child{margin-left:0;}
.grid-fluid .col9:last-child{float:right;}
.grid-fluid .col8{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:65.2%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col8:first-child{margin-left:0;}
.grid-fluid .col8:last-child{float:right;}
.grid-fluid .col7{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:56.5%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col7:first-child{margin-left:0;}
.grid-fluid .col7:last-child{float:right;}
.grid-fluid .col6{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:47.8%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col6:first-child{margin-left:0;}
.grid-fluid .col6:last-child{float:right;}
.grid-fluid .col5{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:39.1%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col5:first-child{margin-left:0;}
.grid-fluid .col5:last-child{float:right;}
.grid-fluid .col4{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:30.4%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col4:first-child{margin-left:0;}
.grid-fluid .col4:last-child{float:right;}
.grid-fluid .col3{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:21.7%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col3:first-child{margin-left:0;}
.grid-fluid .col3:last-child{float:right;}
.grid-fluid .col2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:13%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col2:first-child{margin-left:0;}
.grid-fluid .col2:last-child{float:right;}
.grid-fluid .col1{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:4.3%;margin-left:4.4%;position:relative;display:inline;float:left;min-height:1px;}.grid-fluid .col1:first-child{margin-left:0;}
.grid-fluid .col1:last-child{float:right;}
.grid-fluid .offset11{margin-left:100.1%;}
.grid-fluid .offset10{margin-left:91.4%;}
.grid-fluid .offset9{margin-left:82.69999999999999%;}
.grid-fluid .offset8{margin-left:74%;}
.grid-fluid .offset7{margin-left:65.3%;}
.grid-fluid .offset6{margin-left:56.6%;}
.grid-fluid .offset5{margin-left:47.900000000000006%;}
.grid-fluid .offset4{margin-left:39.2%;}
.grid-fluid .offset3{margin-left:30.5%;}
.grid-fluid .offset2{margin-left:21.8%;}
.grid-fluid .offset1{margin-left:13.100000000000001%;}
.grid-fluid .push11{left:95.69999999999999%;}
.grid-fluid .push10{left:87%;}
.grid-fluid .push9{left:78.3%;}
.grid-fluid .push8{left:69.6%;}
.grid-fluid .push7{left:60.89999999999999%;}
.grid-fluid .push6{left:52.199999999999996%;}
.grid-fluid .push5{left:43.5%;}
.grid-fluid .push4{left:34.8%;}
.grid-fluid .push3{left:26.099999999999998%;}
.grid-fluid .push2{left:17.4%;}
.grid-fluid .push1{left:8.7%;}
.grid-fluid .pull11{right:95.69999999999999%;}
.grid-fluid .pull10{right:87%;}
.grid-fluid .pull9{right:78.3%;}
.grid-fluid .pull8{right:69.6%;}
.grid-fluid .pull7{right:60.89999999999999%;}
.grid-fluid .pull6{right:52.199999999999996%;}
.grid-fluid .pull5{right:43.5%;}
.grid-fluid .pull4{right:34.8%;}
.grid-fluid .pull3{right:26.099999999999998%;}
.grid-fluid .pull2{right:17.4%;}
.grid-fluid .pull1{right:8.7%;}
@media all and (max-width:480px){.grid-fixed .col12{width:100%;margin:0;left:0;right:0;} .grid-fixed .col11{width:100%;margin:0;left:0;right:0;} .grid-fixed .col10{width:100%;margin:0;left:0;right:0;} .grid-fixed .col9{width:100%;margin:0;left:0;right:0;} .grid-fixed .col8{width:100%;margin:0;left:0;right:0;} .grid-fixed .col7{width:100%;margin:0;left:0;right:0;} .grid-fixed .col6{width:100%;margin:0;left:0;right:0;} .grid-fixed .col5{width:100%;margin:0;left:0;right:0;} .grid-fixed .col4{width:100%;margin:0;left:0;right:0;} .grid-fixed .col3{width:100%;margin:0;left:0;right:0;} .grid-fixed .col2{width:100%;margin:0;left:0;right:0;} .grid-fixed .col1{width:100%;margin:0;left:0;right:0;} .grid-fluid .col12{width:100%;margin:0;left:0;right:0;} .grid-fluid .col11{width:100%;margin:0;left:0;right:0;} .grid-fluid .col10{width:100%;margin:0;left:0;right:0;} .grid-fluid .col9{width:100%;margin:0;left:0;right:0;} .grid-fluid .col8{width:100%;margin:0;left:0;right:0;} .grid-fluid .col7{width:100%;margin:0;left:0;right:0;} .grid-fluid .col6{width:100%;margin:0;left:0;right:0;} .grid-fluid .col5{width:100%;margin:0;left:0;right:0;} .grid-fluid .col4{width:100%;margin:0;left:0;right:0;} .grid-fluid .col3{width:100%;margin:0;left:0;right:0;} .grid-fluid .col2{width:100%;margin:0;left:0;right:0;} .grid-fluid .col1{width:100%;margin:0;left:0;right:0;} .grid-fixed,.grid-fluid{width:100%;}.grid-fixed .m-col4,.grid-fluid .m-col4{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:99.9998%;margin-left:6.6666%;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .m-col4:first-child,.grid-fluid .m-col4:first-child{margin-left:0;} .grid-fixed .m-col4:last-child,.grid-fluid .m-col4:last-child{float:right;} .grid-fixed .m-col3,.grid-fluid .m-col3{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:73.3332%;margin-left:6.6666%;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .m-col3:first-child,.grid-fluid .m-col3:first-child{margin-left:0;} .grid-fixed .m-col3:last-child,.grid-fluid .m-col3:last-child{float:right;} .grid-fixed .m-col2,.grid-fluid .m-col2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:46.6666%;margin-left:6.6666%;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .m-col2:first-child,.grid-fluid .m-col2:first-child{margin-left:0;} .grid-fixed .m-col2:last-child,.grid-fluid .m-col2:last-child{float:right;} .grid-fixed .m-col1,.grid-fluid .m-col1{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:20%;margin-left:6.6666%;position:relative;display:inline;float:left;min-height:1px;}.grid-fixed .m-col1:first-child,.grid-fluid .m-col1:first-child{margin-left:0;} .grid-fixed .m-col1:last-child,.grid-fluid .m-col1:last-child{float:right;} .grid-fixed .m-offset3,.grid-fluid .m-offset3{margin-left:86.6664%;} .grid-fixed .m-offset2,.grid-fluid .m-offset2{margin-left:59.9998%;} .grid-fixed .m-offset1,.grid-fluid .m-offset1{margin-left:33.3332%;} .grid-fixed .m-push3,.grid-fluid .m-push3{left:79.9998%;} .grid-fixed .m-push2,.grid-fluid .m-push2{left:53.3332%;} .grid-fixed .m-push1,.grid-fluid .m-push1{left:26.6666%;} .grid-fixed .m-pull3,.grid-fluid .m-pull3{right:79.9998%;} .grid-fixed .m-pull2,.grid-fluid .m-pull2{right:53.3332%;} .grid-fixed .m-pull1,.grid-fluid .m-pull1{right:26.6666%;}}.btn-half{height:20px !important;padding-bottom:0 !important;padding-top:0 !important;line-height:18px;font-size:0.8em;}
.btn-single{height:30px !important;padding-bottom:0 !important;padding-top:0 !important;line-height:27px;font-size:1em;}
.btn-double{height:40px !important;padding-bottom:0 !important;padding-top:0 !important;line-height:36px;font-size:1.1em;}
.btn-minimal{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background:#eeeeee;border:1px solid #c8c8c8;-webkit-box-shadow:inset 0 0 1px 1px #ffffff;-moz-box-shadow:inset 0 0 1px 1px #ffffff;box-shadow:inset 0 0 1px 1px #ffffff;color:#333;text-shadow:0 1px 0 #fff;}
.btn-minimal:hover{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background:#e1e1e1;border:1px solid #bbbbbb;-webkit-box-shadow:inset 0 0 1px 1px #ffffff;-moz-box-shadow:inset 0 0 1px 1px #ffffff;box-shadow:inset 0 0 1px 1px #ffffff;color:#333;text-shadow:0 1px 0 #fff;text-decoration:none;}
.btn-minimal:active{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background:#d4d4d4;border:1px solid #aeaeae;-webkit-box-shadow:inset 0 0 1px 1px #fbfbfb;-moz-box-shadow:inset 0 0 1px 1px #fbfbfb;box-shadow:inset 0 0 1px 1px #fbfbfb;color:#333;text-shadow:0 1px 0 #fff;text-decoration:none;}
.btn-clean{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#eeeeee;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100% #d5d5d5));background-image:-webkit-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-moz-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-ms-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-o-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:linear-gradient(top, #ffffff 0%, #d5d5d5 100%);border:1px solid #c8c8c8;color:#333;text-shadow:0 1px 0 #fff;}
.btn-clean:hover{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#e1e1e1;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100% #c8c8c8));background-image:-webkit-linear-gradient(top, #fbfbfb 0%, #c8c8c8 100%);background-image:-moz-linear-gradient(top, #fbfbfb 0%, #c8c8c8 100%);background-image:-ms-linear-gradient(top, #fbfbfb 0%, #c8c8c8 100%);background-image:-o-linear-gradient(top, #fbfbfb 0%, #c8c8c8 100%);background-image:linear-gradient(top, #fbfbfb 0%, #c8c8c8 100%);border:1px solid #bbbbbb;color:#333;text-shadow:0 1px 0 #fff;text-decoration:none;}
.btn-clean:active{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#d4d4d4;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100% #bbbbbb));background-image:-webkit-linear-gradient(top, #eeeeee 0%, #bbbbbb 100%);background-image:-moz-linear-gradient(top, #eeeeee 0%, #bbbbbb 100%);background-image:-ms-linear-gradient(top, #eeeeee 0%, #bbbbbb 100%);background-image:-o-linear-gradient(top, #eeeeee 0%, #bbbbbb 100%);background-image:linear-gradient(top, #eeeeee 0%, #bbbbbb 100%);border:1px solid #aeaeae;color:#333;text-shadow:0 1px 0 #fff;text-decoration:none;}
.btn-soft{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#6c84ab;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c92b4), color-stop(100% #5c77a1));background-image:-webkit-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-moz-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-ms-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-o-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:linear-gradient(top, #7c92b4 0%, #5c77a1 100%);border:1px solid #405371;-webkit-box-shadow:inset 0 2px 1px -1px #9dadc7;-moz-box-shadow:inset 0 2px 1px -1px #9dadc7;box-shadow:inset 0 2px 1px -1px #9dadc7;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);}
.btn-soft:hover{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#5c77a1;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6c84ab), color-stop(100% #536b91));background-image:-webkit-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-moz-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-ms-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-o-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:linear-gradient(top, #6c84ab 0%, #536b91 100%);border:1px solid #374760;-webkit-box-shadow:inset 0 2px 1px -1px #8c9fbe;-moz-box-shadow:inset 0 2px 1px -1px #8c9fbe;box-shadow:inset 0 2px 1px -1px #8c9fbe;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);text-decoration:none;}
.btn-soft:active{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#536b91;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c77a1), color-stop(100% #4a5f81));background-image:-webkit-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-moz-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-ms-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-o-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:linear-gradient(top, #5c77a1 0%, #4a5f81 100%);border:1px solid #2e3b50;-webkit-box-shadow:inset 0 2px 1px -1px #7c92b4;-moz-box-shadow:inset 0 2px 1px -1px #7c92b4;box-shadow:inset 0 2px 1px -1px #7c92b4;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);text-decoration:none;}
.btn-pill{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#6c84ab;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c92b4), color-stop(100% #5c77a1));background-image:-webkit-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-moz-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-ms-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-o-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:linear-gradient(top, #7c92b4 0%, #5c77a1 100%);border:1px solid #405371;-webkit-box-shadow:inset 0 2px 1px -1px #9dadc7;-moz-box-shadow:inset 0 2px 1px -1px #9dadc7;box-shadow:inset 0 2px 1px -1px #9dadc7;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);}
.btn-pill:hover{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#5c77a1;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6c84ab), color-stop(100% #536b91));background-image:-webkit-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-moz-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-ms-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:-o-linear-gradient(top, #6c84ab 0%, #536b91 100%);background-image:linear-gradient(top, #6c84ab 0%, #536b91 100%);border:1px solid #374760;-webkit-box-shadow:inset 0 2px 1px -1px #8c9fbe;-moz-box-shadow:inset 0 2px 1px -1px #8c9fbe;box-shadow:inset 0 2px 1px -1px #8c9fbe;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);text-decoration:none;}
.btn-pill:active{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#536b91;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c77a1), color-stop(100% #4a5f81));background-image:-webkit-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-moz-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-ms-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:-o-linear-gradient(top, #5c77a1 0%, #4a5f81 100%);background-image:linear-gradient(top, #5c77a1 0%, #4a5f81 100%);border:1px solid #2e3b50;-webkit-box-shadow:inset 0 2px 1px -1px #7c92b4;-moz-box-shadow:inset 0 2px 1px -1px #7c92b4;box-shadow:inset 0 2px 1px -1px #7c92b4;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);text-decoration:none;}
.btn-gloss{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#172d6e;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8195d0), color-stop(50% #586793), color-stop(50% #3b4c7d), color-stop(100% #44568e));background-image:-webkit-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-moz-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-ms-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-o-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);border:1px solid #0a132f;-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);}
.btn-gloss:hover{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#132459;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f85c9), color-stop(50% #4e5c83), color-stop(50% #33416b), color-stop(100% #3b4c7d));background-image:-webkit-linear-gradient(top, #6f85c9 0%, #4e5c83 50%, #33416b 50%, #3b4c7d 100%);background-image:-moz-linear-gradient(top, #6f85c9 0%, #4e5c83 50%, #33416b 50%, #3b4c7d 100%);background-image:-ms-linear-gradient(top, #6f85c9 0%, #4e5c83 50%, #33416b 50%, #3b4c7d 100%);background-image:-o-linear-gradient(top, #6f85c9 0%, #4e5c83 50%, #33416b 50%, #3b4c7d 100%);background-image:linear-gradient(top, #6f85c9 0%, #4e5c83 50%, #33416b 50%, #3b4c7d 100%);border:1px solid #050a1a;-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);text-decoration:none;}
.btn-gloss:active{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#0e1c44;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c76c2), color-stop(50% #455073), color-stop(50% #2b375a), color-stop(100% #33416b));background-image:-webkit-linear-gradient(top, #5c76c2 0%, #455073 50%, #2b375a 50%, #33416b 100%);background-image:-moz-linear-gradient(top, #5c76c2 0%, #455073 50%, #2b375a 50%, #33416b 100%);background-image:-ms-linear-gradient(top, #5c76c2 0%, #455073 50%, #2b375a 50%, #33416b 100%);background-image:-o-linear-gradient(top, #5c76c2 0%, #455073 50%, #2b375a 50%, #33416b 100%);background-image:linear-gradient(top, #5c76c2 0%, #455073 50%, #2b375a 50%, #33416b 100%);border:1px solid #010205;-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.3);text-decoration:none;-webkit-box-shadow:inset 0 0 5px 0 rgba(0, 0, 0, 0.3);-moz-box-shadow:inset 0 0 5px 0 rgba(0, 0, 0, 0.3);box-shadow:inset 0 0 5px 0 rgba(0, 0, 0, 0.3);}
.bar-minimal{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background:#eeeeee;border:1px solid #c8c8c8;-webkit-box-shadow:inset 0 0 1px 1px #ffffff;-moz-box-shadow:inset 0 0 1px 1px #ffffff;box-shadow:inset 0 0 1px 1px #ffffff;color:#333;text-shadow:0 1px 0 #fff;display:block;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;}
.bar-clean{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#eeeeee;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100% #d5d5d5));background-image:-webkit-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-moz-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-ms-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:-o-linear-gradient(top, #ffffff 0%, #d5d5d5 100%);background-image:linear-gradient(top, #ffffff 0%, #d5d5d5 100%);border:1px solid #c8c8c8;color:#333;text-shadow:0 1px 0 #fff;display:block;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;}
.bar-soft{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#6c84ab;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c92b4), color-stop(100% #5c77a1));background-image:-webkit-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-moz-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-ms-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-o-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:linear-gradient(top, #7c92b4 0%, #5c77a1 100%);border:1px solid #405371;-webkit-box-shadow:inset 0 2px 1px -1px #9dadc7;-moz-box-shadow:inset 0 2px 1px -1px #9dadc7;box-shadow:inset 0 2px 1px -1px #9dadc7;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);display:block;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;}
.bar-pill{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#6c84ab;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c92b4), color-stop(100% #5c77a1));background-image:-webkit-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-moz-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-ms-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:-o-linear-gradient(top, #7c92b4 0%, #5c77a1 100%);background-image:linear-gradient(top, #7c92b4 0%, #5c77a1 100%);border:1px solid #405371;-webkit-box-shadow:inset 0 2px 1px -1px #9dadc7;-moz-box-shadow:inset 0 2px 1px -1px #9dadc7;box-shadow:inset 0 2px 1px -1px #9dadc7;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);display:block;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;}
.bar-gloss{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;padding-right:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;background-color:#172d6e;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8195d0), color-stop(50% #586793), color-stop(50% #3b4c7d), color-stop(100% #44568e));background-image:-webkit-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-moz-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-ms-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:-o-linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);background-image:linear-gradient(top, #8195d0 0%, #586793 50%, #3b4c7d 50%, #44568e 100%);border:1px solid #0a132f;-webkit-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.5);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);display:block;padding-top:10px !important;padding-right:10px !important;padding-bottom:10px !important;padding-left:10px !important;text-align:center;font-weight:bold;}
.btn{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;}.btn:hover{background-position:0 -15px;}
.btn-primary,.btn-info,.btn-success,.btn-warning,.btn-danger{color:#FFF !important;text-shadow:rgba(0, 0, 0, 0.25) 0 -1px 0 !important;}
.btn-primary{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;background-color:#0055cc;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #006aff), color-stop(100% #0055cc));background-image:-webkit-linear-gradient(top, #006aff 0%, #0055cc 100%);background-image:-moz-linear-gradient(top, #006aff 0%, #0055cc 100%);background-image:-ms-linear-gradient(top, #006aff 0%, #0055cc 100%);background-image:-o-linear-gradient(top, #006aff 0%, #0055cc 100%);background-image:linear-gradient(top, #006aff 0%, #0055cc 100%);}.btn-primary:hover{background-position:0 -15px;}
.btn-info{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;background-color:#2f96b4;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #47b0cf), color-stop(100% #2f96b4));background-image:-webkit-linear-gradient(top, #47b0cf 0%, #2f96b4 100%);background-image:-moz-linear-gradient(top, #47b0cf 0%, #2f96b4 100%);background-image:-ms-linear-gradient(top, #47b0cf 0%, #2f96b4 100%);background-image:-o-linear-gradient(top, #47b0cf 0%, #2f96b4 100%);background-image:linear-gradient(top, #47b0cf 0%, #2f96b4 100%);}.btn-info:hover{background-position:0 -15px;}
.btn-success{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;background-color:#51a351;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6fb86f), color-stop(100% #51a351));background-image:-webkit-linear-gradient(top, #6fb86f 0%, #51a351 100%);background-image:-moz-linear-gradient(top, #6fb86f 0%, #51a351 100%);background-image:-ms-linear-gradient(top, #6fb86f 0%, #51a351 100%);background-image:-o-linear-gradient(top, #6fb86f 0%, #51a351 100%);background-image:linear-gradient(top, #6fb86f 0%, #51a351 100%);}.btn-success:hover{background-position:0 -15px;}
.btn-warning{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;background-color:#faa732;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbbc64), color-stop(100% #faa732));background-image:-webkit-linear-gradient(top, #fbbc64 0%, #faa732 100%);background-image:-moz-linear-gradient(top, #fbbc64 0%, #faa732 100%);background-image:-ms-linear-gradient(top, #fbbc64 0%, #faa732 100%);background-image:-o-linear-gradient(top, #fbbc64 0%, #faa732 100%);background-image:linear-gradient(top, #fbbc64 0%, #faa732 100%);}.btn-warning:hover{background-position:0 -15px;}
.btn-danger{height:30px;font-size:15px;line-height:30px;background-clip:border-box !important;background-repeat:repeat-x;border:1px solid rgba(0, 0, 0, 0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;display:inline-block;background-color:#dddddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100% #dddddd));background-image:-webkit-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-moz-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-ms-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:-o-linear-gradient(top, #f7f7f7 0%, #dddddd 100%);background-image:linear-gradient(top, #f7f7f7 0%, #dddddd 100%);padding-right:10px !important;padding-left:10px !important;padding-top:0px !important;padding-bottom:0px !important;-webkit-transition:background-position linear 0.1s;-moz-transition:background-position linear 0.1s;-o-transition:background-position linear 0.1s;transition:background-position linear 0.1s;vertical-align:middle;color:#333;font-family:"Droid Serif",Georgia,"Times New Roman",Times,serif;text-decoration:none !important;text-shadow:rgba(255, 255, 255, 0.75) 0 1px 0;background-color:#bd362f;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3534c), color-stop(100% #bd362f));background-image:-webkit-linear-gradient(top, #d3534c 0%, #bd362f 100%);background-image:-moz-linear-gradient(top, #d3534c 0%, #bd362f 100%);background-image:-ms-linear-gradient(top, #d3534c 0%, #bd362f 100%);background-image:-o-linear-gradient(top, #d3534c 0%, #bd362f 100%);background-image:linear-gradient(top, #d3534c 0%, #bd362f 100%);}.btn-danger:hover{background-position:0 -15px;}
.btn-h,.btn-half{height:20px;font-size:12px;line-height:20px;}
.btn-s,.btn-single{height:30px;font-size:15px;line-height:30px;}
.btn-d,.btn-double{height:40px;font-size:20px;line-height:40px;}
.site-header{text-align:center;}
.site-title{margin-bottom:0px !important;font-family:'Alfa Slab One';font-size:80px;line-height:100px !important;}.site-title a{text-decoration:none;}
.site-slogan{font-weight:normal;}
.site-navigation{background:#EEE;-webkit-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;-moz-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;padding-top:20px !important;padding-right:20px !important;padding-bottom:20px !important;padding-left:20px !important;position:fixed;top:0;bottom:0;overflow:auto;width:240px;}
.site-navigation ul{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;list-style:none;margin:0;padding:0;font-size:16px;}
.site-navigation>ul>li{margin-bottom:20px !important;}
.site-navigation a{text-decoration:underline;}.site-navigation a:hover{text-decoration:none;}
.site-navigation ul ul{margin-left:20px !important;padding-top:10px !important;font-size:12px;}.site-navigation ul ul a{text-decoration:none;}
.site-content{padding:20px 40px 40px 320px;}.site-content h1{clear:both;}
.top{background:#333;display:inline-block;float:right;margin-right:-40px;padding:4px 8px;color:#FFF;font-size:12px;text-decoration:none !important;}
.site-footer{clear:both;padding-top:40px !important;font-size:13px;text-align:center;}
.site-footer img{margin-left:2px;position:relative;top:-2px;vertical-align:middle;}

17
styles/all.less Normal file
View File

@@ -0,0 +1,17 @@
/* ==========================================================================
NMC Bootstrap
This LESS file imports all other LESS files. You should compile
and minify this file before site launch.
========================================================================== */
/* Import NMC bootstrap */
@import "base/all";
/* Import site-specific styles */
@import "site/site-header.less";
@import "site/site-navigation.less";
@import "site/site-content.less";
@import "site/site-footer.less";

8
styles/base/all.less Normal file
View File

@@ -0,0 +1,8 @@
@import "reset";
@import "prefixer";
@import "spacing";
@import "typography";
@import "idioms";
@import "grid";
@import "bars-buttons";
@import "buttons";

240
styles/base/bars-buttons.less Normal file
View File

@@ -0,0 +1,240 @@
.button() {
.border-box;
cursor: pointer;
display: inline-block;
.phh;
text-align: center;
font-weight: bold;
}
.button-hover(){
text-decoration: none;
}
.bar() {
display: block;
.pah;
text-align: center;
font-weight: bold;
}
/* Sizes */
.btn-size(@scale){
height: @baseline * @scale !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
line-height: @baseline * (@scale * 0.9);
}
.btn-half{
.btn-size(1);
font-size: 0.8em;
}
.btn-single{
.btn-size(1.5);
font-size: 1em;
}
.btn-double{
.btn-size(2);
font-size: 1.1em;
}
/* Shapes */
.bb-shape-square() {
.border-radius(0);
}
.bb-shape-rounded(@rad:3px) {
.border-radius(@rad);
}
.bb-shape-round() {
.border-radius(@baseline);
}
/* Text */
.bb-text-dark(){
color: #333;
text-shadow: 0 1px 0 #fff;
}
.bb-text-light(){
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
.bb-text-color(@color){
}
/* Color */
.bb-color-plain(@color){
background: @color;
}
.bb-color-gradient(@color){
.gradient(@color,lighten(@color,10%),darken(@color,10%));
}
.bb-color-soft(@color){
.gradient(@color,lighten(@color,5%),darken(@color,5%));
}
.bb-color-gloss(@color){
@topStart: desaturate(lighten(@color,40%),20%);
@topStop: desaturate(lighten(@color,20%),40%);
@bottomStart: desaturate(lighten(@color,10%),30%);
@bottomStop: desaturate(lighten(@color,15%),30%);
.linear-gradient-top(@color,@topStart,0%,@topStop,50%,@bottomStart,50%,@bottomStop,100%);
}
/* Border */
.bb-border-noborder(){
border: none;
}
.bb-border-plain(@color){
border: 1px solid darken(@color,10%);
}
.bb-border-contrast(@color){
border: 1px solid darken(@color,15%);
.box-shadow(inset 0 0 1px 1px lighten(@color,15%));
}
.bb-border-meta(@color){
border: 1px solid darken(@color,15%);
.box-shadow(inset 0 2px 1px -1px lighten(@color,20%));
}
/* Minimal */
.button-minimal(@color) {
.button();
.bb-shape-rounded();
.bb-color-plain(@color);
.bb-border-contrast(@color);
.bb-text-dark();
}
.button-minimal-hover(@color){
.button-minimal(darken(@color,5%));
.button-hover();
}
.button-minimal-active(@color){
.button-minimal-hover(darken(@color,5%));
}
.bar-minimal(@color) {
.button-minimal(@color);
.bar();
}
/* Clean */
.button-clean(@color) {
.button();
.bb-shape-rounded();
.bb-color-gradient(@color);
.bb-border-plain(darken(@color,5%));
.bb-text-dark();
}
.button-clean-hover(@color){
.button-clean(darken(@color,5%));
.button-hover();
}
.button-clean-active(@color){
.button-clean-hover(darken(@color,5%));
}
.bar-clean(@color){
.button-clean(@color);
.bar();
}
/* Soft */
.button-soft(@color) {
.button();
.bb-shape-rounded();
.bb-color-soft(@color);
.bb-border-meta(darken(@color,5%));
.bb-text-light();
}
.button-soft-hover(@color){
.button-soft(darken(@color,5%));
.button-hover();
}
.button-soft-active(@color){
.button-soft-hover(darken(@color,5%));
}
.bar-soft(@color){
.button-soft(@color);
.bar();
}
/* Pill */
.button-pill(@color) {
.button();
.bb-shape-round();
.bb-color-soft(@color);
.bb-border-meta(darken(@color,5%));
.bb-text-light();
}
.button-pill-hover(@color){
.button-pill(darken(@color,5%));
.button-hover();
}
.button-pill-active(@color){
.button-pill-hover(darken(@color,5%));
}
.bar-pill(@color){
.button-pill(@color);
.bar();
}
/* Gloss */
.button-gloss(@color) {
.button();
.bb-shape-rounded(5px);
.bb-color-gloss(@color);
.bb-border-plain(darken(@color,5%));
.box-shadow(inset 0 1px 0 0 rgba(255,255,255,.5));
.bb-text-light();
}
.button-gloss-hover(@color){
.button-gloss(darken(@color,5%));
.box-shadow(inset 0 1px 0 0 rgba(255,255,255,.3));
.button-hover();
}
.button-gloss-active(@color){
.button-gloss-hover(darken(@color,5%));
.box-shadow(inset 0 0 5px 0 rgba(0,0,0,.3));
}
.bar-gloss(@color){
.button-gloss(@color);
.bar();
}
@btn-minimal-color: #eee;
.btn-minimal { .button-minimal(@btn-minimal-color); }
.btn-minimal:hover { .button-minimal-hover(@btn-minimal-color); }
.btn-minimal:active { .button-minimal-active(@btn-minimal-color); }
@btn-clean-color: #eee;
.btn-clean { .button-clean(@btn-clean-color); }
.btn-clean:hover { .button-clean-hover(@btn-clean-color); }
.btn-clean:active { .button-clean-active(@btn-clean-color); }
@btn-soft-color: #6C84AB;
.btn-soft { .button-soft(@btn-soft-color); }
.btn-soft:hover { .button-soft-hover(@btn-soft-color); }
.btn-soft:active { .button-soft-active(@btn-soft-color); }
@btn-pill-color: #6C84AB;
.btn-pill { .button-pill(@btn-pill-color); }
.btn-pill:hover { .button-pill-hover(@btn-pill-color); }
.btn-pill:active { .button-pill-active(@btn-pill-color); }
@btn-gloss-color: #172D6E;
.btn-gloss { .button-gloss(@btn-gloss-color); }
.btn-gloss:hover { .button-gloss-hover(@btn-gloss-color); }
.btn-gloss:active { .button-gloss-active(@btn-gloss-color); }
.bar-minimal { .bar-minimal(@btn-minimal-color); }
.bar-clean { .bar-clean(@btn-clean-color); }
.bar-soft { .bar-soft(@btn-soft-color); }
.bar-pill { .bar-pill(@btn-pill-color); }
.bar-gloss { .bar-gloss(@btn-gloss-color); }

97
styles/base/buttons.less Normal file
View File

@@ -0,0 +1,97 @@
/* ==========================================================================
Settings
========================================================================== */
@import 'variables.less';
/*
@baseline: @baseline;
@button-color: @button-color;
@button-primary-color: @button-primary-color;
@button-info-color: @button-info-color;
@button-success-color: @button-success-color;
@button-warning-color: @button-warning-color;
@button-danger-color: @button-danger-color;
*/
/* ==========================================================================
Default
========================================================================== */
.btn{
.btn-s;
background-clip: border-box !important;
background-repeat: repeat-x;
border: 1px solid rgba(0, 0, 0, 0.25);
.border-box;
.border-radius(4px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
display: inline-block;
.gradient(@button-color, lighten(@button-color, 10%), @button-color);
.phh;
.pvn;
.transition(background-position linear 0.1s);
vertical-align: middle;
color: #333;
font-family: @body-font-family;
text-decoration: none !important;
text-shadow: rgba(255,255,255,0.75) 0 1px 0;
&:hover{
background-position: 0 -15px;
}
}
/* ==========================================================================
Styles
========================================================================== */
.btn-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger{
color: #FFF !important;
text-shadow: rgba(0,0,0,0.25) 0 -1px 0 !important;
}
.btn-primary{
.btn;
.gradient(@button-primary-color, lighten(@button-primary-color, 10%), @button-primary-color);
}
.btn-info{
.btn;
.gradient(@button-info-color, lighten(@button-info-color, 10%), @button-info-color);
}
.btn-success{
.btn;
.gradient(@button-success-color, lighten(@button-success-color, 10%), @button-success-color);
}
.btn-warning{
.btn;
.gradient(@button-warning-color, lighten(@button-warning-color, 10%), @button-warning-color);
}
.btn-danger{
.btn;
.gradient(@button-danger-color, lighten(@button-danger-color, 10%), @button-danger-color);
}
/* ==========================================================================
Sizes (Half = h, Single = s, Double = d)
========================================================================== */
.btn-h, .btn-half{
height: @baseline;
font-size: @baseline * 0.6;
line-height: @baseline;
}
.btn-s, .btn-single{
height: @baseline * 1.5;
font-size: @baseline * 0.75;
line-height: @baseline * 1.5;
}
.btn-d, .btn-double{
height: @baseline * 2;
font-size: @baseline;
line-height: @baseline * 2;
}

231
styles/base/grid.less Normal file
View File

@@ -0,0 +1,231 @@
/**
* Hybrid Grid Sytem
*
* Blend of the Semantic Grid System and Zurb Foundation with a little Twitter Bootstrap
*/
/* Settings */
@import 'variables.less';
/*
@fixed-column-width: 40px;
@fixed-gutter-width: 20px;
@fixed-columns: 12;
@fluid-column-width: 4.3%;
@fluid-gutter-width: 4.4%;
@fluid-columns: 12;
@mobile-break-width: 480px;
@mobile-column-width: 8.6%;
@mobile-gutter-width: 8.8%;
@mobile-columns: 6;
*/
/* Grid */
#grid {
.cols(@cols,@width,@gutter){
.border-box();
width: ((@cols * @width) + ((@cols - 1) * @gutter));
margin-left: @gutter;
position: relative;
display: inline;
float: left;
min-height: 1px;
&:first-child {
margin-left: 0;
}
&:last-child {
float: right;
}
}
}
.grid-fixed,.grid-fluid {
.clearfix;
.row {
.border-box();
display: block;
width: 100%;
margin: 0 auto;
.clearfix;
.center,.center:last-child {
float: none;
display: block;
margin: 0 auto;
}
}
}
.grid-fixed {
@total-width: (@fixed-column-width*@fixed-columns) + (@fixed-gutter-width*(@fixed-columns - 1));
@column-width: @fixed-column-width;
@gutter-width: @fixed-gutter-width;
@columns: @fixed-columns;
width: @total-width;
/* This is duplicated in both classes. Unavoidable. */
.colX (@index) when (@index > 0) {
(~".col@{index}") {
#grid > .cols(@index,@column-width,@gutter-width);
}
.colX(@index - 1);
}
.colX (0) {}
.colX(@columns);
.offsetX (@index) when (@index > 0) {
(~".offset@{index}") {
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
}
.offsetX(@index - 1);
}
.offsetX (0) {}
.offsetX(@columns - 1);
.pushX (@index) when (@index > 0) {
(~".push@{index}") {
left: @index * (@column-width + @gutter-width);
}
.pushX(@index - 1);
}
.pushX (0) {}
.pushX(@columns - 1);
.pullX (@index) when (@index > 0) {
(~".pull@{index}") {
right: @index * (@column-width + @gutter-width);
}
.pullX(@index - 1);
}
.pullX (0) {}
.pullX(@columns - 1);
}
.grid-fluid {
@total-width: 100%;
@column-width: @fluid-column-width;
@gutter-width: @fluid-gutter-width;
@columns: @fluid-columns;
width: @total-width;
/* This is duplicated in both classes. Unavoidable. */
.colX (@index) when (@index > 0) {
(~".col@{index}") {
#grid > .cols(@index,@column-width,@gutter-width);
}
.colX(@index - 1);
}
.colX (0) {}
.colX(@columns);
.offsetX (@index) when (@index > 0) {
(~".offset@{index}") {
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
}
.offsetX(@index - 1);
}
.offsetX (0) {}
.offsetX(@columns - 1);
.pushX (@index) when (@index > 0) {
(~".push@{index}") {
left: @index * (@column-width + @gutter-width);
}
.pushX(@index - 1);
}
.pushX (0) {}
.pushX(@columns - 1);
.pullX (@index) when (@index > 0) {
(~".pull@{index}") {
right: @index * (@column-width + @gutter-width);
}
.pullX(@index - 1);
}
.pullX (0) {}
.pullX(@columns - 1);
}
@media all and (max-width: @mobile-break-width) {
// Reset all columns to full width
.grid-fixed {
.colX (@index) when (@index > 0) {
(~".col@{index}") {
width: 100%;
margin: 0;
left: 0;
right: 0;
}
.colX(@index - 1);
}
.colX (0) {}
.colX(@fixed-columns);
}
.grid-fluid {
.colX (@index) when (@index > 0) {
(~".col@{index}") {
width: 100%;
margin: 0;
left: 0;
right: 0;
}
.colX(@index - 1);
}
.colX (0) {}
.colX(@fluid-columns);
}
.grid-fixed, .grid-fluid {
@total-width: 100%;
@column-width: @mobile-column-width;
@gutter-width: @mobile-gutter-width;
@columns: @mobile-columns;
width: @total-width;
.m-colX (@index) when (@index > 0) {
(~".m-col@{index}") {
#grid > .cols(@index,@column-width,@gutter-width);
}
.m-colX(@index - 1);
}
.m-colX (0) {}
.m-colX(@mobile-columns);
.m-offsetX (@index) when (@index > 0) {
(~".m-offset@{index}") {
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
}
.m-offsetX(@index - 1);
}
.m-offsetX (0) {}
.m-offsetX(@columns - 1);
.m-pushX (@index) when (@index > 0) {
(~".m-push@{index}") {
left: @index * (@column-width + @gutter-width);
}
.m-pushX(@index - 1);
}
.m-pushX (0) {}
.m-pushX(@columns - 1);
.m-pullX (@index) when (@index > 0) {
(~".m-pull@{index}") {
right: @index * (@column-width + @gutter-width);
}
.m-pullX(@index - 1);
}
.m-pullX (0) {}
.m-pullX(@columns - 1);
}
}

94
styles/base/idioms.less Normal file
View File

@@ -0,0 +1,94 @@
/**
* New Media Campaigns Idioms
*
* These are common patterns we use in all of our
* projects. They are consolidated here to keep code DRY.
*
* Listing
* * .no-text, .text-replace
* * .no-list
* * .no-form
* * .fixed-width(@width)
* * .column-width(@width)
* * .column-left(@width)
* * .column-right(@width)
* * .full-size
* * .absolute-default
* * .absolute-fullsize
* * .clearfix
*/
/* Hides text when using image replacement */
.no-text, .text-replace{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/* Removes bullets, margin, and padding from list */
.no-list{
list-style: none;
margin: 0;
padding: 0;
}
/* Removes webkit styling from form element */
.no-form{
border: none;
margin: 0;
padding: 0;
-webkit-appearance: none;
}
/* Center a fixed width container */
.fixed-width(@width) {
margin: 0 auto;
width: @width;
}
/* Adds left or right columns (e.g. content and sidebar) */
.column-width(@width){
display: inline;
width: @width;
}
.column-left(@width){
.column-width(@width);
float: left;
}
.column-right(@width){
.column-width(@width);
float: right;
}
/* Set width and height of element to that of its parent */
.full-size{
height: 100%;
width: 100%;
}
/* Position element absolutely to 0,0 */
.absolute-default{
position: absolute;
left: 0;
top: 0;
}
/* Position element absolutely and set its width and height to that of its parent (useful for slideshows) */
.absolute-fullsize{
.absolute-default;
.full-size;
}
/* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}

328
styles/base/prefixer.less Normal file
View File

@@ -0,0 +1,328 @@
/*---------------------------------------------------
LESS Prefixer
---------------------------------------------------
All of the CSS3 fun, none of the prefixes!
As a rule, you can use the CSS properties you
would expect just by adding a '.':
box-shadow => .box-shadow(@args)
Also, when shorthand is available, arguments are
not parameterized. Learn CSS, not LESS Prefixer.
-------------------------------------------------
TABLE OF CONTENTS
(*) denotes a syntax-sugar helper
-------------------------------------------------
.animation(@args)
.animation-delay(@delay)
.animation-direction(@direction)
.animation-duration(@duration)
.animation-iteration-count(@count)
.animation-name(@name)
.animation-play-state(@state)
.animation-timing-function(@function)
.background-size(@args)
.border-radius(@args)
.box-shadow(@args)
.inner-shadow(@args) *
.box-sizing(@args)
.border-box() *
.content-box() *
.columns(@args)
.column-count(@count)
.column-gap(@gap)
.column-rule(@args)
.column-width(@width)
.gradient(@default,@start,@stop) *
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
.opacity(@factor)
.transform(@args)
.rotate(@deg)
.scale(@factor)
.translate(@x,@y)
.translate3d(@x,@y,@z)
.translateHardware(@x,@y) *
.text-shadow(@args)
.transition(@args)
.transition-delay(@delay)
.transition-duration(@duration)
.transition-property(@property)
.transition-timing-function(@function)
Credit to LESS Elements for the motivation and
to CSS3Please.com for implementation.
Copyright (c) 2012 Joel Sutherland
MIT Licensed:
http://www.opensource.org/licenses/mit-license.php
-----------------------------------------------------*/
/* Animation */
.animation(@args) {
-webkit-animation: @args;
-moz-animation: @args;
-ms-animation: @args;
-o-animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-moz-animation-direction: @direction;
-ms-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-moz-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
-ms-animation-name: @name;
-o-animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
-moz-animation-play-state: @state;
-ms-animation-play-state: @state;
-o-animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
-ms-animation-timing-function: @function;
-o-animation-timing-function: @function;
}
/* Background Size */
.background-size(@args) {
-webkit-background-size: @args;
-moz-background-size: @args;
background-size: @args;
}
/* Border Radius */
.border-radius(@args) {
-webkit-border-radius: @args;
-moz-border-radius: @args;
border-radius: @args;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
/* Box Shadows */
.box-shadow(@args) {
-webkit-box-shadow: @args;
-moz-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
}
/* Box Sizing */
.box-sizing(@args){
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
}
/* Columns */
.columns(@args){
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width){
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
.column-rule(@args){
-webkit-column-rule: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}
/* Gradients */
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
/* Opacity */
.opacity(@factor){
opacity: @factor;
@iefactor: @factor*100;
filter: alpha(opacity=@iefactor);
}
/* Text Shadow */
.text-shadow(@args){
text-shadow: @args;
}
/* Transforms */
.transform(@args) {
-webkit-transform: @args;
-moz-transform: @args;
-ms-transform: @args;
-o-transform: @args;
transform: @args;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y){
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-moz-transform: translate3d(@x,@y,0);
}
/* Transitions */
.transition(@args:200ms) {
-webkit-transition: @args;
-moz-transition: @args;
-o-transition: @args;
transition: @args;
}
.transition-delay(@delay:0) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
-webkit-transition-duration: @duration;
-moz-transition-duration: @duration;
-o-transition-duration: @duration;
transition-duration: @duration;
}
.transition-property(@property:all) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-o-transition-property: @property;
transition-property: @property;
}
.transition-timing-function(@function:ease) {
-webkit-transition-timing-function: @function;
-moz-transition-timing-function: @function;
-o-transition-timing-function: @function;
transition-timing-function: @function;
}

102
styles/base/reset.less Normal file
View File

@@ -0,0 +1,102 @@
/**
* html5doctor.com Reset Stylesheet
* v1.6.1
* Last Updated: 2010-09-17
* Author: Richard Clark - http://richclarkdesign.com
* Twitter: @rich_clark
*/
html, body, div, 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, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

131
styles/base/spacing.less Normal file
View File

@@ -0,0 +1,131 @@
/**
* Spacing
*
* This LESS file defines margins and paddings for block-level
* elements. Helper classes are included for use elsewhere
* in site styles.
*/
/* Settings */
@import 'variables.less';
/*
@baseline: @baseline;
*/
/**
* Spacing
* p, m, lh = padding, margin, line-height
* a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
* n, h, s, d = none(0px), half(@baseline / 2), single(@baseline), double(@baseline * 2), none(0px)
*/
.ptn, .pvn, .pan{
padding-top: 0px !important
}
.pth, .pvh, .pah{
padding-top: @baseline / 2 !important
}
.pts, .pvs, .pas{
padding-top: @baseline !important
}
.ptd, .pvd, .pad{
padding-top: @baseline * 2 !important
}
.prn, .phn, .pan{
padding-right: 0px !important
}
.prh, .phh, .pah{
padding-right: @baseline / 2 !important
}
.prs, .phs, .pas{
padding-right: @baseline !important
}
.prd, .phd, .pad{
padding-right: @baseline * 2 !important
}
.pbn, .pvn, .pan{
padding-bottom: 0px !important
}
.pbh, .pvh, .pah{
padding-bottom: @baseline / 2 !important
}
.pbs, .pvs, .pas{
padding-bottom: @baseline !important
}
.pbd, .pvd, .pad{
padding-bottom: @baseline * 2 !important
}
.pln, .phn, .pan{
padding-left: 0px !important
}
.plh, .phh, .pah{
padding-left: @baseline / 2 !important
}
.pls, .phs, .pas{
padding-left: @baseline !important
}
.pld, .phd, .pad{
padding-left: @baseline * 2 !important
}
.mtn, .mvn, .man{
margin-top: 0px !important
}
.mth, .mvh, .mah{
margin-top: @baseline / 2 !important
}
.mts, .mvs, .mas{
margin-top: @baseline !important
}
.mtd, .mvd, .mad{
margin-top: @baseline * 2 !important
}
.mrn, .mhn, .man{
margin-right: 0px !important
}
.mrh, .mhh, .mah{
margin-right: @baseline / 2 !important
}
.mrs, .mhs, .mas{
margin-right: @baseline !important
}
.mrd, .mhd, .mad{
margin-right: @baseline * 2 !important
}
.mbn, .mvn, .man{
margin-bottom: 0px !important
}
.mbh, .mvh, .mah{
margin-bottom: @baseline / 2 !important
}
.mbs, .mvs, .mas{
margin-bottom: @baseline !important
}
.mbd, .mvd, .mad{
margin-bottom: @baseline * 2 !important
}
.mln, .mhn, .man{
margin-left: 0px !important
}
.mlh, .mhh, .mah{
margin-left: @baseline / 2 !important
}
.mls, .mhs, .mas{
margin-left: @baseline !important
}
.mld, .mhd, .mad{
margin-left: @baseline * 2 !important
}
.lhh {
line-height: @baseline / 2 !important;
}
.lhs {
line-height: @baseline !important;
}
.lhd {
line-height: @baseline * 2 !important;
}
.lhn {
line-height: 0px !important;
}

352
styles/base/typography.less Normal file
View File

@@ -0,0 +1,352 @@
/**
* Name Here
*
* @version 1.0
* @package Name Here
* @author New Media Campaigns
* @copyright 2012 New Media Campaigns
* @link http://www.newmediacampaigns.com
*
* Copyright (c) 2012 New Media Campaigns
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is furnished
* to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* Typography
*
* This LESS file defines the baseline, color, font-size, and other typographical
* styles for text elements.
*/
/* Settings */
@import 'variables.less';
/*
@baseline: @baseline;
@body-color: @body-color;
@body-font-family: @body-font-family;
@body-font-size: @body-font-size;
@body-accent-color: @body-accent-color;
@header-color: @header-clor;
@header-font-family: @header-font-family;
@header-font-weight: @header-font-weight;
*/
/* Base */
html, body {
font-family: @body-font-family;
color: @body-color;
font-size: @body-font-size;
.lhs;
}
/* Block-level */
h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, table, form, pre{
.mbs;
}
/* Headers */
.all-headers{
color: @header-color;
font-family: @header-font-family;
font-weight: @header-font-weight;
}
h1, .alpha{
.all-headers;
font-size: @body-font-size * 2.5;
.lhd;
}
h2, .beta{
.all-headers;
font-size: @body-font-size * 1.75;
.lhd;
}
h3, .gamma{
.all-headers;
font-size: @body-font-size * 1.5;
.lhd;
}
h4, .delta{
.all-headers;
font-size: @body-font-size * 1.5;
.lhd;
.mbn;
}
h5, .epsilon{
.all-headers;
font-size: @body-font-size * 1.2;
.lhs;
.mbn
}
h6, .zeta{
.all-headers;
font-size: @body-font-size * 1;
.lhs;
.mbn;
}
/* Headers (above scale) */
.giga{
.all-headers;
font-size: @body-font-size * 6;
line-height: @baseline * 4;
}
.mega{
.all-headers;
font-size: @body-font-size * 5;
line-height: @baseline * 3;
}
.kilo{
.all-headers;
font-size: @body-font-size * 4;
line-height: @baseline * 3;
}
/* Headers (below scale) */
.milli{
.all-headers;
font-size: @body-font-size * 0.8;
}
/* Text */
a{
color: @body-accent-color;
}
a:link{
text-decoration: underline;
}
a:visited{
}
a:hover{
text-decoration: none;
}
a:active{
}
a:focus{
}
small {
font-size: 80%;
}
sup, sub {
font-size: 80%;
.lhn;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
.lead{
color: darken(@body-color, 20%);
font-size: @baseline * 0.8;
}
blockquote{
border-left: 5px solid fade(#000, 10%);
.mhs;
.pls;
color: darken(@body-color, 20%);
font-size: @baseline * 0.8;
:last-child{
.mbn;
}
small{
color: fade(#000, 50%);
font-size: @baseline * 0.7;
font-style: normal;
}
}
pre, code, kbd{
background: #F8F8F8;
border: 1px solid #EAEAEA;
.border-radius(3px);
margin: 0 2px;
padding: 0 5px;
font-family: Consolas, "Courier New", Courier, mono;
font-size: @body-font-size * 0.9;
color: @body-color;
word-wrap: break-word;
}
pre{
.mhs;
.pah;
code{
border: none;
.man;
.pan;
}
}
a code{
background: none;
border: none;
.pan;
.man;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
ol, ul, dl{
.mls;
.pls;
ol,ul {
.mbn;
}
}
dt{
font-weight: bold;
}
dd{
.mls;
}
.table{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.table th, .table td{
border-top: 1px solid fade(#000, 10%);
padding: 8px;
text-align: left;
}
.table thead th{
vertical-align: bottom;
font-weight: bold;
}
.table thead tr:first-child th{
border-top: none;
}
.table-bordered{
border: 1px solid fade(#000, 10%);
border-collapse: separate;
border-left: none;
.border-radius(4px);
th, td{
border-left: 1px solid fade(#000, 10%);
}
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child{
.border-radius(0 0 0 4px);
}
}
.table-striped{
tbody tr:nth-child(odd) td{
background: fade(@body-accent-color, 4%);
}
}
/* ==========================================================================
Alerts
========================================================================== */
.alert{
background: #FCF8E3;
border: 1px solid #FBEED5;
.border-radius(4px);
.mbs;
.pah;
color: #C09853;
}
.alert-success{
.alert;
background-color: #DFF0D8;
border-color: #D6E9C6;
color: #468847;
}
.alert-error{
.alert;
background-color: #F2DEDE;
border-color: #EED3D7;
color: #B94A48;
}
.alert-info{
.alert;
background-color: #D9EDF7;
border-color: #BCE8F1;
color: #3A87AD;
}
/* ==========================================================================
Forms
========================================================================== */
label{
display: block;
font-weight: bold;
.req{
color: @body-accent-color;
font-weight: bold;
}
}
input.text,
textarea,
select,
.radio-group,
.checkbox-group{
.mbs;
}
input.text, textarea{
.no-form;
background: #EEE;
border: 1px solid #CCC;
.border-box;
.border-radius(4px);
.inner-shadow(fade(#000, 10%) 0 1px 3px);
height: @baseline * 1.5;
.pah;
width: 100%;
}
textarea{
height: @baseline * 6;
}
select{
min-width: 30%;
}
.checkbox-group label,
.radio-group label{
font-weight: normal;
}
.error{
background-color: #F2DEDE !important;
border-color: red !important;
outline-color: red !important;
color: red !important;
}

52
styles/base/variables.less Normal file
View File

@@ -0,0 +1,52 @@
/* ==========================================================================
Spacing
========================================================================== */
@baseline: 20px;
/* ==========================================================================
Typography
========================================================================== */
@body-color: #555;
@body-font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
@body-font-size: 14px;
@body-accent-color: #f00;
@header-color: #000;
@header-font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
@header-font-weight: bold;
/* ==========================================================================
Grid
========================================================================== */
@fixed-column-width: 40px;
@fixed-gutter-width: 20px;
@fixed-columns: 12;
@fluid-column-width: 4.3%;
@fluid-gutter-width: 4.4%;
@fluid-columns: 12;
@mobile-break-width: 480px;
@mobile-column-width: 20%;
@mobile-gutter-width: 6.6666%;
@mobile-columns: 4;
/* ==========================================================================
Buttons
========================================================================== */
@button-color: #DDD;
@button-primary-color: #0055CC;
@button-info-color: #2F96B4;
@button-success-color: #51A351;
@button-warning-color: #FAA732;
@button-danger-color: #BD362F;
/* ==========================================================================
Site Variables
========================================================================== */
@import "../site/variables";

17
styles/site/site-content.less Normal file
View File

@@ -0,0 +1,17 @@
.site-content{
padding: 20px 40px 40px 320px;
h1{
clear: both;
}
}
.top{
background: #333;
display: inline-block;
float: right;
margin-right: -40px;
padding: 4px 8px;
color: #FFF;
font-size: 12px;
text-decoration: none !important;
}

12
styles/site/site-footer.less Normal file
View File

@@ -0,0 +1,12 @@
.site-footer{
clear: both;
.ptd;
font-size: 13px;
text-align: center;
}
.site-footer img{
margin-left: 2px;
position: relative;
top: -2px;
vertical-align: middle;
}

16
styles/site/site-header.less Normal file
View File

@@ -0,0 +1,16 @@
.site-header{
text-align: center;
}
.site-title{
.mbn;
font-family: 'Alfa Slab One';
font-size: @baseline * 4;
line-height: @baseline * 5 !important;
a{
text-decoration: none;
}
}
.site-slogan{
font-weight: normal;
}

35
styles/site/site-navigation.less Normal file
View File

@@ -0,0 +1,35 @@
.site-navigation{
background: #EEE;
.inner-shadow(fade(#000, 7%) 0 0 40px);
.pas;
position: fixed;
top: 0;
bottom: 0;
overflow: auto;
width: 240px;
}
.site-navigation ul{
.man;
.pan;
.no-list;
font-size: 16px;
}
.site-navigation > ul > li{
.mbs;
}
.site-navigation a{
text-decoration: underline;
&:hover{
text-decoration: none;
}
}
.site-navigation ul ul{
.mls;
.pth;
font-size: 12px;
a{
text-decoration: none;
}
}

46
styles/site/variables.less Normal file
View File

@@ -0,0 +1,46 @@
/* ==========================================================================
Spacing
========================================================================== */
@baseline: 20px;
/* ==========================================================================
Typography
========================================================================== */
@body-color: #666;
@body-font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
@body-font-size: 14px;
@body-accent-color: #000;
@header-color: #111;
@header-font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
@header-font-weight: bold;
/* ==========================================================================
Grid
========================================================================== */
@fixed-column-width: 60px;
@fixed-gutter-width: 20px;
@fixed-columns: 12;
@fluid-column-width: 4.3%;
@fluid-gutter-width: 4.4%;
@fluid-columns: 12;
@mobile-break-width: 480px;
@mobile-column-width: 20%;
@mobile-gutter-width: 6.6666%;
@mobile-columns: 4;
/* ==========================================================================
Buttons
========================================================================== */
@button-color: #DDD;
@button-primary-color: #0055CC;
@button-info-color: #2F96B4;
@button-success-color: #51A351;
@button-warning-color: #FAA732;
@button-danger-color: #BD362F;