Added beginning stuff to everything, including base.css, ui.css, and really made the grid awesome. Tested it very lightly against all browsers
This commit is contained in:
Dave Gamache
303
css/base.css
303
css/base.css
@ -6,21 +6,19 @@
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
@Reset & Basics
|
||||
@Basic Styles
|
||||
@Typography
|
||||
@Links
|
||||
@Lists
|
||||
@Tabs
|
||||
@Grid
|
||||
@Tables
|
||||
@Misc
|
||||
*/
|
||||
@Media Queries */
|
||||
|
||||
|
||||
/* Reset & Basics (Inspired by E. Meyers)
|
||||
/* @Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
@ -45,30 +43,32 @@
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
|
||||
/* @Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 13px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ;
|
||||
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Typography
|
||||
-------------------------------------------------- */
|
||||
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
|
||||
/* @Typography
|
||||
================================================== */
|
||||
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1 }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: 46px; margin-bottom: 12px;}
|
||||
h2 { font-size: 35px; margin-bottom: 9px; }
|
||||
h3 { font-size: 28px; margin-bottom: 9px; }
|
||||
h4 { font-size: 21px; margin-bottom: 3px; }
|
||||
h5 { font-size: 18px; font-weight: normal; margin-bottom: 3px; }
|
||||
h6 { font-size: 15px; font-weight: normal; }
|
||||
h1 { font-size: 46px; margin-bottom: 4px;}
|
||||
h2 { font-size: 35px; margin-bottom: 2px; }
|
||||
h3 { font-size: 28px; }
|
||||
h4 { font-size: 21px; }
|
||||
h5 { font-size: 18px; }
|
||||
h6 { font-size: 15px; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
.subheader { color: #777; font-weight: 300; margin-bottom: 24px; }
|
||||
|
||||
p { line-height: 17px; margin: 0 0 18px; }
|
||||
p { margin: 0 0 20px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 18px; line-height: 24px; }
|
||||
p.lead { font-size: 21px; line-height: 27px; color: #777; }
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
@ -76,228 +76,95 @@
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; color: #777; }
|
||||
blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote cite { display: block; font-size: 12px; color: #555; }
|
||||
blockquote cite:before { content: "\2014 \0020"; }
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
|
||||
|
||||
abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
|
||||
abbr { text-transform: none; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Links
|
||||
-------------------------------------------------- */
|
||||
a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; }
|
||||
a:hover { color: #11639d; }
|
||||
/* @Links
|
||||
================================================== */
|
||||
a, a:visited { color: #333; font-weight: bold; text-decoration: underline; outline: 0; line-height: inherit; }
|
||||
a:hover, a:focus { color: #000; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Lists
|
||||
-------------------------------------------------- */
|
||||
ul, ol { margin-bottom: 18px; }
|
||||
/* @List
|
||||
================================================== */
|
||||
ul, ol { margin-bottom: 20px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ol ol { margin: 4px 0 5px 30px; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Grid
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Container */
|
||||
div.container { position: relative; width: 1050px; margin: 0 auto; padding: 0; }
|
||||
body.ie8 div.container { position: static; }
|
||||
|
||||
.row { margin: 0 0 18px -30px; width: 1080px; }
|
||||
.column, .columns { float: left; display: inline; margin: 0 0 0 30px; }
|
||||
|
||||
.one { width: 15px; }
|
||||
.two { width: 60px; }
|
||||
.three { width: 105px; }
|
||||
.four { width: 150px; }
|
||||
.five { width: 195px; }
|
||||
.six, .one-fourth { width: 240px; }
|
||||
.seven { width: 285px; }
|
||||
.eight, .one-third { width: 330px; }
|
||||
.nine { width: 375px; }
|
||||
.ten { width: 420px; }
|
||||
.eleven { width: 465px; }
|
||||
.twelve { width: 510px; }
|
||||
.thirteen { width: 555px; }
|
||||
.fourteen { width: 600px; }
|
||||
.fifteen { width: 645px; }
|
||||
.sixteen, .two-thirds { width: 690px; }
|
||||
.seventeen { width: 735px; }
|
||||
.eighteen { width: 780px; }
|
||||
.nineteen { width: 825px; }
|
||||
.twenty { width: 870px; }
|
||||
.twenty-one { width: 915px; }
|
||||
.twenty-two { width: 960px; }
|
||||
.twenty-three { width: 1005px; }
|
||||
.twenty-four { width: 1050px; }
|
||||
|
||||
.offset-by-one { margin-left: 30px; }
|
||||
.offset-by-two { margin-left: 75px; }
|
||||
.offset-by-three { margin-left: 120px; }
|
||||
.offset-by-four { margin-left: 165px; }
|
||||
.offset-by-five { margin-left: 210px; }
|
||||
.offset-by-six { margin-left: 255px; }
|
||||
.offset-by-seven { margin-left: 300px; }
|
||||
.offset-by-eight { margin-left: 345px; }
|
||||
.offset-by-nine { margin-left: 390px; }
|
||||
.offset-by-ten { margin-left: 435px; }
|
||||
.offset-by-eleven { margin-left: 480px; }
|
||||
.offset-by-twelve { margin-left: 525px; }
|
||||
.offset-by-thirteen { margin-left: 570px; }
|
||||
.offset-by-fourteen { margin-left: 615px; }
|
||||
.offset-by-fifteen { margin-left: 660px; }
|
||||
.offset-by-sixteen { margin-left: 705px; }
|
||||
.offset-by-seventeen { margin-left: 750px; }
|
||||
.offset-by-eighteen { margin-left: 795px; }
|
||||
.offset-by-nineteen { margin-left: 840px; }
|
||||
.offset-by-twenty { margin-left: 885px; }
|
||||
.offset-by-twenty-one { margin-left: 930px; }
|
||||
.offset-by-twenty-two { margin-left: 975px; }
|
||||
.offset-by-twenty-three { margin-left: 1020px; }
|
||||
|
||||
.two .row { width: 90px; }
|
||||
.three .row { width: 135px; }
|
||||
.four .row { width: 180px; }
|
||||
.five .row { width: 225px; }
|
||||
.six .row { width: 270px; }
|
||||
.seven .row { width: 315px; }
|
||||
.eight .row { width: 360px; }
|
||||
.nine .row { width: 405px; }
|
||||
.ten .row { width: 450px; }
|
||||
.eleven .row { width: 495px; }
|
||||
.twelve .row { width: 540px; }
|
||||
.thirteen .row { width: 585px; }
|
||||
.fourteen .row { width: 630px; }
|
||||
.fifteen .row { width: 675px; }
|
||||
.sixteen .row { width: 720px; }
|
||||
.seventeen .row { width: 765px; }
|
||||
.eighteen .row { width: 810px; }
|
||||
.nineteen .row { width: 855px; }
|
||||
.twenty .row { width: 900px; }
|
||||
.twenty-one .row { width: 945px; }
|
||||
.twenty-two .row { width: 990px; }
|
||||
.twenty-three .row { width: 1035px; }
|
||||
.twenty-four .row { width: 1080px; }
|
||||
li p { line-height: 21px; }
|
||||
|
||||
|
||||
/* Slim (940/960) Grid */
|
||||
div.container.slim { position: relative; width: 940px; margin: 0 auto; padding: 0; }
|
||||
body.ie8 div.container.slim { position: static; }
|
||||
.slim .row { margin: 0 0 18px -20px; width: 960px; }
|
||||
.slim .column, .slim .columns { float: left; display: inline; margin: 0 0 0 20px; }
|
||||
/* @Grid
|
||||
================================================== */
|
||||
|
||||
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
||||
.columns, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.slim .one { width: 40px; }
|
||||
.slim .two { width: 100px; }
|
||||
.slim .three { width: 160px; }
|
||||
.slim .four { width: 220px; }
|
||||
.slim .five { width: 280px; }
|
||||
.slim .six { width: 340px; }
|
||||
.slim .seven { width: 400px; }
|
||||
.slim .eight { width: 460px; }
|
||||
.slim .nine { width: 520px; }
|
||||
.slim .ten { width: 580px; }
|
||||
.slim .eleven { width: 640px; }
|
||||
.slim .twelve { width: 700px; }
|
||||
.slim .thirteen { width: 760px; }
|
||||
.slim .fourteen { width: 820px; }
|
||||
.slim .fifteen { width: 880px; }
|
||||
.slim .sixteen { width: 940px; }
|
||||
.slim .one-half { width: 420px; padding-right: 10px; }
|
||||
.slim .one-third { width: 300px; }
|
||||
.slim .two-thirds { width: 580px; }
|
||||
.slim .ten .row { width: 600px; }
|
||||
.slim .eleven .row { width: 660px; }
|
||||
.slim .twelve .row { width: 760px; }
|
||||
/* Actual Grid */
|
||||
.container .one.column { width: 40px; }
|
||||
.container .two.columns { width: 100px; }
|
||||
.container .three.columns { width: 160px; }
|
||||
.container .four.columns { width: 220px; }
|
||||
.container .five.columns { width: 280px; }
|
||||
.container .six.columns { width: 340px; }
|
||||
.container .seven.columns { width: 400px; }
|
||||
.container .eight.columns { width: 460px; }
|
||||
.container .nine.columns { width: 520px; }
|
||||
.container .ten.columns { width: 580px; }
|
||||
.container .eleven.columns { width: 640px; }
|
||||
.container .twelve.columns { width: 700px; }
|
||||
.container .thirteen.columns { width: 760px; }
|
||||
.container .fourteen.columns { width: 820px; }
|
||||
.container .fifteen.columns { width: 880px; }
|
||||
.container .sixteen.columns { width: 940px; }
|
||||
|
||||
.slim .offset-by-one-half { margin-left: 50px; }
|
||||
.slim .offset-by-one { margin-left: 80px; }
|
||||
.slim .offset-by-two { margin-left: 140px; }
|
||||
.slim .offset-by-three { margin-left: 200px; }
|
||||
.slim .offset-by-four { margin-left: 260px; }
|
||||
.slim .offset-by-five { margin-left: 320px; }
|
||||
.slim .offset-by-six { margin-left: 380px; }
|
||||
.slim .offset-by-seven { margin-left: 440px; }
|
||||
.slim .offset-by-eight { margin-left: 500px; }
|
||||
.slim .offset-by-nine { margin-left: 560px; }
|
||||
.slim .offset-by-ten { margin-left: 620px; }
|
||||
.slim .offset-by-eleven { margin-left: 680px; }
|
||||
.slim .offset-by-twelve { margin-left: 740px; }
|
||||
.slim .offset-by-thirteen { margin-left: 800px; }
|
||||
.slim .offset-by-fourteen { margin-left: 880px; }
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 60px; }
|
||||
.container .offset-by-two { padding-left: 120px; }
|
||||
.container .offset-by-three { padding-left: 180px; }
|
||||
.container .offset-by-four { padding-left: 240px; }
|
||||
.container .offset-by-five { padding-left: 300px; }
|
||||
.container .offset-by-six { padding-left: 360px; }
|
||||
.container .offset-by-seven { padding-left: 420px; }
|
||||
.container .offset-by-eight { padding-left: 480px; }
|
||||
.container .offset-by-nine { padding-left: 540px; }
|
||||
.container .offset-by-ten { padding-left: 600px; }
|
||||
.container .offset-by-eleven { padding-left: 660px; }
|
||||
.container .offset-by-twelve { padding-left: 720px; }
|
||||
.container .offset-by-thirteen { padding-left: 780px; }
|
||||
.container .offset-by-fourteen { padding-left: 840px; }
|
||||
.container .offset-by-fifteen { padding-left: 900px; }
|
||||
|
||||
.slim .two .row { width: 120px; }
|
||||
.slim .three .row { width: 180px; }
|
||||
.slim .four .row { width: 240px; }
|
||||
.slim .five .row { width: 300px; }
|
||||
.slim .six .row { width: 360px; }
|
||||
.slim .seven .row { width: 420px; }
|
||||
.slim .eight .row { width: 480px; }
|
||||
.slim .nine .row { width: 540px; }
|
||||
.slim .ten .row { width: 600px; }
|
||||
.slim .eleven .row { width: 660px; }
|
||||
.slim .twelve .row { width: 720px; }
|
||||
.slim .thirteen .row { width: 780px; }
|
||||
.slim .fourteen .row { width: 840px; }
|
||||
.slim .fifteen .row { width: 900px; }
|
||||
.slim .sixteen .row { width: 960px; }
|
||||
.slim .one-half .row { width: 480px; }
|
||||
.slim .one-third .row { width: 320px; }
|
||||
.slim .two-thirds .row { width: 600px; }
|
||||
|
||||
|
||||
/* Clear the columns automagically */
|
||||
.row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
* html .row, * html .clearfix { height: 1%; }
|
||||
.row, .clearfix { display: inline-block; }
|
||||
.row, .clearfix { display: block; }
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
.column.omega, .columns.omega { margin-right: 0; }
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Tables
|
||||
-------------------------------------------------- */
|
||||
table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; }
|
||||
|
||||
table thead { background: #555; }
|
||||
table thead tr th,
|
||||
table tbody tr td { font-size: 12px; line-height: 18px; }
|
||||
table thead tr { }
|
||||
table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #fff; }
|
||||
table tbody { }
|
||||
table tbody tr { }
|
||||
table tbody tr.even,
|
||||
table tbody tr.alt { background: #f5f5f5; }
|
||||
body.safari table tbody tr:nth-child(even) { background: #f5f5f5; }
|
||||
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
|
||||
|
||||
/* @Media Queries
|
||||
================================================== */
|
||||
|
||||
/* Style the tables a bit lighter */
|
||||
table.alt { }
|
||||
table.alt thead { background: #f5f5f5; }
|
||||
table.alt thead tr th { color: #222; }
|
||||
table.alt thead tr th:first-child { border-left: none; }
|
||||
table.alt thead tr th:last-child { border-right: none; }
|
||||
/* Mobile portrait and smaller (code for 320px wide)*/
|
||||
@media screen and (max-width: 479px) {}
|
||||
|
||||
/* Mobile Landscape (code for 480px) */
|
||||
@media screen and (min-width: 480px) and (max-width: 767px) {}
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Misc
|
||||
---------------------------------------------------*/
|
||||
.left { float: left; }
|
||||
.right { float: right; }
|
||||
.hide { display: none; }
|
||||
.highlight { background: #ff0; }
|
||||
|
||||
|
||||
|
||||
/* Tablet Portrait (Code for 768px) */
|
||||
@media screen and (max-width: 959px) {}
|
||||
|
||||
258
css/future_mobile_base.css
Normal file
258
css/future_mobile_base.css
Normal file
@ -0,0 +1,258 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
@Reset & Basics
|
||||
@Basic Styles
|
||||
@Typography
|
||||
@Links
|
||||
@Lists
|
||||
@Grid
|
||||
@Tables
|
||||
@Misc
|
||||
*/
|
||||
|
||||
|
||||
/* Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
body {
|
||||
line-height: 1; }
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
|
||||
/* Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 13px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ }
|
||||
|
||||
|
||||
/* Typography
|
||||
================================================== */
|
||||
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: 46px; margin-bottom: 4px;}
|
||||
h2 { font-size: 35px; margin-bottom: 2px; }
|
||||
h3 { font-size: 28px; }
|
||||
h4 { font-size: 21px; }
|
||||
h5 { font-size: 18px; }
|
||||
h6 { font-size: 15px; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
p { margin: 0 0 20px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 18px; line-height: 24px; }
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
small { font-size: 80%; line-height: inherit; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; color: #777; }
|
||||
blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote cite { display: block; font-size: 12px; color: #555; }
|
||||
blockquote cite:before { content: "\2014 \0020"; }
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
================================================== */
|
||||
a, a:visited { color: #d00b47; text-decoration: none; outline: 0; line-height: inherit; }
|
||||
a:hover, a:focus { color: #9d0a37; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* List
|
||||
================================================== */
|
||||
ul, ol { margin-bottom: 20px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
|
||||
|
||||
/* Grid
|
||||
================================================== */
|
||||
|
||||
.container { position: relative; width: 320px; margin: 0 auto; padding: 0; }
|
||||
.columns, .columns { float: left; display: inline; background: #f79421; margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.column.alpha,
|
||||
.columns.alpha {
|
||||
margin: 0; }
|
||||
.column.omega,
|
||||
.columns.omega {
|
||||
margin: 0; }
|
||||
|
||||
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
|
||||
/* Mobile portrait and smaller */
|
||||
.container .one.column,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 300px; }
|
||||
|
||||
|
||||
/* All non-Mobile Portrait */
|
||||
@media screen and (min-width: 480px) {
|
||||
.column.alpha,
|
||||
.columns.alpha {
|
||||
margin-left: 0; }
|
||||
.column.omega,
|
||||
.columns.omega {
|
||||
margin-right: 0; }
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Landscape */
|
||||
@media screen and (min-width: 480px) and (max-width: 767px) {
|
||||
body { background: #333; }
|
||||
.container { width: 480px; }
|
||||
.columns, .columns { margin-left: 8px; margin-right: 8px; }
|
||||
|
||||
.container .one.column { width: 14px; }
|
||||
.container .two.columns { width: 44px; }
|
||||
.container .three.columns { width: 74px; }
|
||||
.container .four.columns { width: 104px; }
|
||||
.container .five.columns { width: 134px; }
|
||||
.container .six.columns { width: 164px; }
|
||||
.container .seven.columns { width: 194px; }
|
||||
.container .eight.columns { width: 224px; }
|
||||
.container .nine.columns { width: 254px; }
|
||||
.container .ten.columns { width: 284px; }
|
||||
.container .eleven.columns { width: 314px; }
|
||||
.container .twelve.columns { width: 344px; }
|
||||
.container .thirteen.columns { width: 374px; }
|
||||
.container .fourteen.columns { width: 404px; }
|
||||
.container .fifteen.columns { width: 434px; }
|
||||
.container .sixteen.columns { width: 464px; }
|
||||
}
|
||||
|
||||
|
||||
/* Tablet Landscape */
|
||||
@media screen and (min-width: 768px) and (max-width: 959px) {
|
||||
.container { width: 768px; }
|
||||
.columns, .columns { margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.container .one.column { width: 28px; }
|
||||
.container .two.columns { width: 76px; }
|
||||
.container .three.columns { width: 124px; }
|
||||
.container .four.columns { width: 172px; }
|
||||
.container .five.columns { width: 220px; }
|
||||
.container .six.columns { width: 268px; }
|
||||
.container .seven.columns { width: 316px; }
|
||||
.container .eight.columns { width: 364px; }
|
||||
.container .nine.columns { width: 412px; }
|
||||
.container .ten.columns { width: 460px; }
|
||||
.container .eleven.columns { width: 508px; }
|
||||
.container .twelve.columns { width: 556px; }
|
||||
.container .thirteen.columns { width: 604px; }
|
||||
.container .fourteen.columns { width: 652px; }
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
}
|
||||
|
||||
/* Standard 960 size */
|
||||
@media screen and (min-width: 960px) {
|
||||
body { background: #333; }
|
||||
.container { width: 960px; }
|
||||
.columns, .columns { margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.container .one.column { width: 40px; }
|
||||
.container .two.columns { width: 100px; }
|
||||
.container .three.columns { width: 160px; }
|
||||
.container .four.columns { width: 220px; }
|
||||
.container .five.columns { width: 280px; }
|
||||
.container .six.columns { width: 340px; }
|
||||
.container .seven.columns { width: 400px; }
|
||||
.container .eight.columns { width: 460px; }
|
||||
.container .nine.columns { width: 520px; }
|
||||
.container .ten.columns { width: 580px; }
|
||||
.container .eleven.columns { width: 640px; }
|
||||
.container .twelve.columns { width: 700px; }
|
||||
.container .thirteen.columns { width: 760px; }
|
||||
.container .fourteen.columns { width: 820px; }
|
||||
.container .fifteen.columns { width: 880px; }
|
||||
.container .sixteen.columns { width: 940px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
*/
|
||||
|
||||
/* TEST STYLES */
|
||||
.sixteen.columns { height: auto; }
|
||||
nav ul { float: right; }
|
||||
nav ul li { float: left; margin-left: 20px; }
|
||||
.slider { width: 100%; height: auto; background: #000; }
|
||||
@ -1,3 +0,0 @@
|
||||
/* This is for all IE specfific style less than IE9 and
|
||||
we make IE 8 render like 7. We hate IE. */
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
/* CSS for jQuery Orbit Plugin 1.2.3
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
|
||||
|
||||
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
|
||||
================================================== */
|
||||
#featured {
|
||||
width: 940px;
|
||||
height: 450px;
|
||||
background: #000 url('orbit/loading.gif') no-repeat center center;
|
||||
overflow: hidden; }
|
||||
#featured>img,
|
||||
#featured>div,
|
||||
#featured>a { display: none; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* CONTAINER
|
||||
================================================== */
|
||||
|
||||
div.orbit-wrapper {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: relative; }
|
||||
|
||||
div.orbit {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
overflow: hidden }
|
||||
|
||||
div.orbit>img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none; }
|
||||
|
||||
div.orbit>a {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 0;
|
||||
display: none; }
|
||||
|
||||
.orbit>div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
|
||||
|
||||
|
||||
/* TIMER
|
||||
================================================== */
|
||||
|
||||
div.timer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
z-index: 1001; }
|
||||
|
||||
span.rotator {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -20px;
|
||||
background: url(orbit/rotator-black.png) no-repeat;
|
||||
z-index: 3; }
|
||||
|
||||
span.mask {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
overflow: hidden; }
|
||||
|
||||
span.rotator.move {
|
||||
left: 0 }
|
||||
|
||||
span.mask.move {
|
||||
width: 40px;
|
||||
left: 0;
|
||||
background: url(orbit/timer-black.png) repeat 0 0; }
|
||||
|
||||
span.pause {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url(orbit/pause-black.png) no-repeat;
|
||||
z-index: 4;
|
||||
opacity: 0; }
|
||||
|
||||
span.pause.active {
|
||||
background: url(orbit/pause-black.png) no-repeat 0 -40px }
|
||||
|
||||
div.timer:hover span.pause,
|
||||
span.pause.active {
|
||||
opacity: 1 }
|
||||
|
||||
|
||||
/* CAPTIONS
|
||||
================================================== */
|
||||
|
||||
.orbit-caption {
|
||||
display: none;
|
||||
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.orbit-wrapper .orbit-caption {
|
||||
background: #000;
|
||||
background: rgba(0,0,0,.6);
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 7px 0;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
|
||||
/* DIRECTIONAL NAV
|
||||
================================================== */
|
||||
|
||||
div.slider-nav {
|
||||
display: block }
|
||||
|
||||
div.slider-nav span {
|
||||
width: 78px;
|
||||
height: 100px;
|
||||
text-indent: -9999px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
cursor: pointer; }
|
||||
|
||||
div.slider-nav span.right {
|
||||
background: url(orbit/right-arrow.png);
|
||||
right: 0; }
|
||||
|
||||
div.slider-nav span.left {
|
||||
background: url(orbit/left-arrow.png);
|
||||
left: 0; }
|
||||
|
||||
/* BULLET NAV
|
||||
================================================== */
|
||||
|
||||
.orbit-bullets {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
list-style: none;
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
padding: 0; }
|
||||
|
||||
.orbit-bullets li {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
text-indent: -9999px;
|
||||
background: url(orbit/bullets.jpg) no-repeat 4px 0;
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
overflow: hidden; }
|
||||
|
||||
.orbit-bullets li.active {
|
||||
color: #222;
|
||||
background-position: -8px 0; }
|
||||
|
||||
.orbit-bullets li.has-thumb {
|
||||
background: none;
|
||||
width: 100px;
|
||||
height: 75px; }
|
||||
|
||||
.orbit-bullets li.active.has-thumb {
|
||||
background-position: 0 0;
|
||||
border-top: 2px solid #000; }
|
||||
248
css/ui.css
248
css/ui.css
@ -1,26 +1,72 @@
|
||||
/* Artfully masterminded by ZURB */
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Table of Contents
|
||||
-----------------------------------------------------
|
||||
:: Buttons
|
||||
:: Notices/Alerts
|
||||
:: Tabs
|
||||
:: Pagination
|
||||
:: Lists
|
||||
:: Panels
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
@Tabs
|
||||
@Buttons */
|
||||
|
||||
|
||||
|
||||
/* @Tabs (activate in app.js)
|
||||
================================================== */
|
||||
ul.tabs {
|
||||
display: block;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
border-bottom: solid 1px #ddd; }
|
||||
ul.tabs li {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
float: left; }
|
||||
ul.tabs li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
height: 29px;
|
||||
padding: 0px 16px;
|
||||
line-height: 30px;
|
||||
border: solid 1px #ddd;
|
||||
margin: 0;
|
||||
background: #eee;
|
||||
font-size: 13px; }
|
||||
ul.tabs li a.active {
|
||||
background: #fff;
|
||||
border-width: 1px 0 0px 0;
|
||||
height: 30px;
|
||||
margin: 0 -1px 0 0;
|
||||
color: #111; }
|
||||
ul.tabs li:first-child a.active {
|
||||
border-width: 1px 0 0 1px; }
|
||||
ul.tabs li:last-child a.active {
|
||||
border-width: 1px 1px 0 0; }
|
||||
|
||||
/* --------------------------------------------------
|
||||
Buttons
|
||||
-------------------------------------------------- */
|
||||
ul.tabs-content { margin: 0; display: block; }
|
||||
ul.tabs-content > li { display:none; }
|
||||
ul.tabs-content > li.active { display: block; }
|
||||
|
||||
/* Sample Markup
|
||||
<ul class="tabs">
|
||||
<li><a class="active" href="#info1"></a></li>
|
||||
<li><a href="#info2"></a></li>
|
||||
</ul>
|
||||
<ul class="tabs-content">
|
||||
<li class="active" id="info1"></li>
|
||||
<li id="info2"></li>
|
||||
</ul> */
|
||||
|
||||
.button {
|
||||
/* @Buttons
|
||||
================================================== */
|
||||
|
||||
a.button {
|
||||
background: #00a6fc;
|
||||
display: inline-block;
|
||||
padding: 9px 34px 11px;
|
||||
@ -33,28 +79,27 @@
|
||||
}
|
||||
|
||||
.button.nice {
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px;
|
||||
background: #00a6fc;
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
|
||||
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%);
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent));
|
||||
background: #00a6fc -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%);
|
||||
background: #00a6fc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent));
|
||||
border: 1px solid #0593dc;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.button.radius {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
border-radius: 3px; }
|
||||
|
||||
.button.round {
|
||||
-moz-border-radius: 1000px;
|
||||
-webkit-border-radius: 1000px;
|
||||
border-radius: 1000px;
|
||||
}
|
||||
-moz-border-radius: 300px;
|
||||
-webkit-border-radius: 300px;
|
||||
border-radius: 300px; }
|
||||
|
||||
.button.full-width {
|
||||
width: 100%;
|
||||
@ -63,146 +108,23 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button.left-align {
|
||||
text-align: left;
|
||||
text-indent: 12px;
|
||||
}
|
||||
|
||||
.button:active {}
|
||||
|
||||
/* Sizes ---------- */
|
||||
.small.button { font-size: 11px; padding: 8px 20px 10px; }
|
||||
.medium.button { font-size: 13px; }
|
||||
.large.button { font-size: 18px; padding: 11px 48px 13px; }
|
||||
|
||||
/* Nice Sizes ---------- */
|
||||
.nice.small.button { background-position: 0 -36px; }
|
||||
.nice.large.button { background-position: 0 -30px; }
|
||||
.small.button { font-size: 11px; padding: 8px 20px 10px; }
|
||||
.medium.button { font-size: 13px; }
|
||||
.large.button { font-size: 18px; padding: 11px 48px 13px; }
|
||||
|
||||
/* Colors ---------- */
|
||||
.blue.button { background-color: #00a6fc; }
|
||||
.red.button { background-color: #e91c21; }
|
||||
.white.button { background-color: #e9e9e9; color: #333; }
|
||||
.charcoal.button { background-color: #141414; }
|
||||
.blue.button { background-color: #00a6fc; }
|
||||
.white.button { background-color: #e9e9e9; color: #333; }
|
||||
.charcoal.button { background-color: #141414; }
|
||||
|
||||
/* Nice Colors ---------- */
|
||||
.nice.blue.button { border: 1px solid #0593dc; }
|
||||
.nice.red.button { border: 1px solid #b90b0b; }
|
||||
.nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; }
|
||||
.nice.charcoal.button { border: 1px solid #000; }
|
||||
.nice.blue.button { border: 1px solid #0593dc; }
|
||||
.nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; }
|
||||
.nice.charcoal.button { border: 1px solid #000; }
|
||||
|
||||
/* Hovers ---------- */
|
||||
.button:hover { background-color: #0192dd; color: #fff; }
|
||||
.blue.button:hover { background-color: #0192dd; }
|
||||
.red.button:hover { background-color: #d01217; }
|
||||
.white.button:hover { background-color: #dadada; color: #333; }
|
||||
.charcoal.button:hover { background-color: #000; }
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Tabs
|
||||
-------------------------------------------------- */
|
||||
dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; }
|
||||
dl.tabs dt { display: block; width: auto; height: 30px; padding: 0px 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; }
|
||||
dl.tabs dt:first-child { padding: 0 9px 0 0px; }
|
||||
dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; }
|
||||
dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0px 9px; line-height: 30px; border: solid 1px #ddd; margin: 0; color: #555; background: #eee; }
|
||||
dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0px 1px; height: 30px; margin: 0 -1px 0 0 }
|
||||
|
||||
.nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; }
|
||||
.nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; color: #555555; background: none; border: none; }
|
||||
.nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; }
|
||||
.nice.tabs dd:first-child a.active { margin-left: 0; }
|
||||
|
||||
ul.tabs-content { margin: 0; display: block; }
|
||||
ul.tabs-content > li { display:none; }
|
||||
ul.tabs-content > li.active { display: block; }
|
||||
|
||||
dl.contained, dl.nice.contained { margin-bottom: 0px; }
|
||||
dl.contained.tabs dd a { padding: 0px 14px; }
|
||||
dl.nice.contained.tabs dd a { padding: 7px 18px 9px; }
|
||||
ul.contained.tabs-content { padding: 0; }
|
||||
ul.contained.tabs-content li { padding: 20px; border: solid 0px #ddd; border-width: 0px 1px 1px 1px; }
|
||||
ul.nice.contained.tabs-content li { border-color: #eee; }
|
||||
|
||||
/* --------------------------------------------------
|
||||
Pagination
|
||||
-------------------------------------------------- */
|
||||
ul.pagination { display: block; height: 24px; margin-left: -5px; }
|
||||
ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; }
|
||||
ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; }
|
||||
ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; }
|
||||
ul.pagination li.unavailable a { cursor: default; color: #999; }
|
||||
ul.pagination li.unavailable:hover a { border-bottom: none; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Lists
|
||||
-------------------------------------------------- */
|
||||
ul.nice, ol.nice { list-style: none; margin: 0; }
|
||||
ul.nice li, ol.nice li { padding-left: 13px; position: relative }
|
||||
ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0px; top: 0px; color: #ccc; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Notices/Alerts
|
||||
---------------------------------------------------*/
|
||||
/* Alerts cannot be closed and notices can */
|
||||
|
||||
.notice, .alert {
|
||||
position: relative;
|
||||
background: #222 url(../images/misc/button-overlay.png) repeat-x bottom;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
|
||||
font-weight: bold;
|
||||
}
|
||||
.notice>span, .alert>span {
|
||||
display: block;
|
||||
padding: 5px 10px 6px;
|
||||
}
|
||||
.notice a.close {
|
||||
font-size: 20px;
|
||||
line-height: .5;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px rbga(0,0,0,.25);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* NOTES
|
||||
|
||||
Close button entity is ×
|
||||
Sample Markup:
|
||||
<div class="notice"><span>
|
||||
This is awesome
|
||||
<a class="close" href="#">×</a>
|
||||
</span></div>
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Panels
|
||||
-------------------------------------------------- */
|
||||
div.panel {
|
||||
padding: 20px 20px 2px 20px;
|
||||
background: #efefef;
|
||||
background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
|
||||
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.button:hover { background-color: #0192dd; color: #fff; }
|
||||
.blue.button:hover { background-color: #0192dd; }
|
||||
.white.button:hover { background-color: #dadada; color: #333; }
|
||||
.charcoal.button:hover { background-color: #000; }
|
||||
Reference in New Issue
Block a user