From 4123062047e00c7d683f739d91a04fd3b32b3a8c Mon Sep 17 00:00:00 2001 From: = Date: Mon, 9 Jul 2012 12:08:25 -0400 Subject: [PATCH] Add new UI files --- _layouts/default.html | 56 ++--- banners.md | 18 +- images/nmc-logo.gif | Bin 0 -> 93 bytes styles/all.css | 271 ++++++++++++++++++++++++ styles/all.less | 17 ++ styles/base/all.less | 8 + styles/base/bars-buttons.less | 240 +++++++++++++++++++++ styles/base/buttons.less | 97 +++++++++ styles/base/grid.less | 231 ++++++++++++++++++++ styles/base/idioms.less | 94 +++++++++ styles/base/prefixer.less | 328 ++++++++++++++++++++++++++++ styles/base/reset.less | 102 +++++++++ styles/base/spacing.less | 131 ++++++++++++ styles/base/typography.less | 352 +++++++++++++++++++++++++++++++ styles/base/variables.less | 52 +++++ styles/site/site-content.less | 17 ++ styles/site/site-footer.less | 12 ++ styles/site/site-header.less | 16 ++ styles/site/site-navigation.less | 35 +++ styles/site/variables.less | 46 ++++ 20 files changed, 2087 insertions(+), 36 deletions(-) create mode 100755 images/nmc-logo.gif create mode 100644 styles/all.css create mode 100644 styles/all.less create mode 100644 styles/base/all.less create mode 100644 styles/base/bars-buttons.less create mode 100644 styles/base/buttons.less create mode 100644 styles/base/grid.less create mode 100644 styles/base/idioms.less create mode 100644 styles/base/prefixer.less create mode 100644 styles/base/reset.less create mode 100644 styles/base/spacing.less create mode 100644 styles/base/typography.less create mode 100644 styles/base/variables.less create mode 100644 styles/site/site-content.less create mode 100644 styles/site/site-footer.less create mode 100644 styles/site/site-header.less create mode 100644 styles/site/site-navigation.less create mode 100644 styles/site/variables.less diff --git a/_layouts/default.html b/_layouts/default.html index 870c588..e5e4231 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,8 +2,8 @@ - PHP: The Right Way - + {% if page.title %}{{ page.title }} - {% endif %}PHP: The Right Way + @@ -12,7 +12,7 @@ - + -
-
PHP
-
The Right Way.
- - -
+
+
+
+

PHP

+

The Right Way.

+
+ +
{{ content }} +
- - diff --git a/banners.md b/banners.md index ed55356..20ead19 100644 --- a/banners.md +++ b/banners.md @@ -1,5 +1,5 @@ --- -layout: blank +layout: default title: Website Banners 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) -PHP: The Right Way +

PHP: The Right Way

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) -PHP: The Right Way +

PHP: The Right Way

 PHP: The Right Way @@ -26,7 +26,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers ## Leaderboard (728x90) -PHP: The Right Way +

PHP: The Right Way

 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) -PHP: The Right Way +

PHP: The Right Way

 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) -PHP: The Right Way +

PHP: The Right Way

 PHP: The Right Way @@ -50,7 +50,7 @@ Spread the word with _PHP: The Right Way_ banner images! Show new PHP developers ## Rectangle (180x150) -PHP: The Right Way +

PHP: The Right Way

 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) -PHP: The Right Way +

PHP: The Right Way

 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) -PHP: The Right Way +

PHP: The Right Way

 PHP: The Right Way diff --git a/images/nmc-logo.gif b/images/nmc-logo.gif new file mode 100755 index 0000000000000000000000000000000000000000..88214f2385221c5d39e3c0d1d3a1db95d4ba986d GIT binary patch literal 93 zcmZ?wbhEHb6krfwn8?hqXup*}(XM4HRx>a#DE?$&WME)s&;hc6vH}baOnPV1n73C= x3YyI>d-795_+{BjsdURU=cMPt>(aFLy=^~d_{MDMuZJeLPcnM%_hn?T1_0MDA4>oL literal 0 HcmV?d00001 diff --git a/styles/all.css b/styles/all.css new file mode 100644 index 0000000..542cd0a --- /dev/null +++ b/styles/all.css @@ -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;} diff --git a/styles/all.less b/styles/all.less new file mode 100644 index 0000000..5af238f --- /dev/null +++ b/styles/all.less @@ -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"; diff --git a/styles/base/all.less b/styles/base/all.less new file mode 100644 index 0000000..3974eb3 --- /dev/null +++ b/styles/base/all.less @@ -0,0 +1,8 @@ +@import "reset"; +@import "prefixer"; +@import "spacing"; +@import "typography"; +@import "idioms"; +@import "grid"; +@import "bars-buttons"; +@import "buttons"; \ No newline at end of file diff --git a/styles/base/bars-buttons.less b/styles/base/bars-buttons.less new file mode 100644 index 0000000..7f4f716 --- /dev/null +++ b/styles/base/bars-buttons.less @@ -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); } \ No newline at end of file diff --git a/styles/base/buttons.less b/styles/base/buttons.less new file mode 100644 index 0000000..d203dc4 --- /dev/null +++ b/styles/base/buttons.less @@ -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; +} \ No newline at end of file diff --git a/styles/base/grid.less b/styles/base/grid.less new file mode 100644 index 0000000..21aa295 --- /dev/null +++ b/styles/base/grid.less @@ -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); + } + +} diff --git a/styles/base/idioms.less b/styles/base/idioms.less new file mode 100644 index 0000000..bd1b54e --- /dev/null +++ b/styles/base/idioms.less @@ -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; + } +} diff --git a/styles/base/prefixer.less b/styles/base/prefixer.less new file mode 100644 index 0000000..d7ebac5 --- /dev/null +++ b/styles/base/prefixer.less @@ -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; +} \ No newline at end of file diff --git a/styles/base/reset.less b/styles/base/reset.less new file mode 100644 index 0000000..7a14f3b --- /dev/null +++ b/styles/base/reset.less @@ -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; +} \ No newline at end of file diff --git a/styles/base/spacing.less b/styles/base/spacing.less new file mode 100644 index 0000000..9ebff3c --- /dev/null +++ b/styles/base/spacing.less @@ -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; +} \ No newline at end of file diff --git a/styles/base/typography.less b/styles/base/typography.less new file mode 100644 index 0000000..96d6087 --- /dev/null +++ b/styles/base/typography.less @@ -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; +} diff --git a/styles/base/variables.less b/styles/base/variables.less new file mode 100644 index 0000000..2e6a597 --- /dev/null +++ b/styles/base/variables.less @@ -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"; \ No newline at end of file diff --git a/styles/site/site-content.less b/styles/site/site-content.less new file mode 100644 index 0000000..8176023 --- /dev/null +++ b/styles/site/site-content.less @@ -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; +} diff --git a/styles/site/site-footer.less b/styles/site/site-footer.less new file mode 100644 index 0000000..0e98678 --- /dev/null +++ b/styles/site/site-footer.less @@ -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; +} diff --git a/styles/site/site-header.less b/styles/site/site-header.less new file mode 100644 index 0000000..ad135da --- /dev/null +++ b/styles/site/site-header.less @@ -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; +} diff --git a/styles/site/site-navigation.less b/styles/site/site-navigation.less new file mode 100644 index 0000000..83d77cc --- /dev/null +++ b/styles/site/site-navigation.less @@ -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; + } +} diff --git a/styles/site/variables.less b/styles/site/variables.less new file mode 100644 index 0000000..3d13967 --- /dev/null +++ b/styles/site/variables.less @@ -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;