/* --------------------------------------------------
Global ZURB Styles
--------------------------------------------------
ZURBcolors
--------------------------------------------------
Green: #a5c941 Red: #ff3700
Med Green: #769926 Med Red: #e33100
Drk Green: #91ad52 Drk Red: #872300
Blue: #73cacf Orange: #ff6908
Med Blue: #2daebf Med Orange: #ff5c00
Drk Blue: #007d9a Drk Orange: #d45500
Magenta: #c9025c Yellow: #ffb515
Med Magenta: #a9014b Med Yellow: #fc9200
Drk Magenta: #630030 Drk Yellow: #d17200
--------------------------------------------------
Global Reset
-------------------------------------------------- */
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
/* --------------------------------------------------
Make it a ZURBody
-------------------------------------------------- */
body { background: #fff; font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif; font-size: 13px; line-height: 18px; color: #555; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.chrome, body.safari { text-shadow: rgba(0,0,0,0.1) 0px 0px 1px; }
/* --------------------------------------------------
Links
-------------------------------------------------- */
a { color: #2daebf; text-decoration: underline; outline: 0; line-height: inherit; }
a:hover { color: #007d9a; }
a.muted { color: #777; }
a.muted:hover { color: #555; }
h1 a, h2 a, h3 a { color: #333; text-decoration: none; font-weight: bold; }
h4 a, h5 a { text-decoration: none; line-height: inherit; font-weight: bold; }
h3 a:hover { color: auto; }
h4 a:hover, h5 a:hover { text-decoration: underline; }
p a { line-height: inherit; }
/* More Links (Can be applied to a <ul> or a <p>) */
.more-link { width: 100%; height: 27px; margin: 0 0 18px; }
.more-link a { background: #eee; display: inline; float: left; padding: 4px 15px; text-decoration: none; -webkit-border-radius: 13px; -moz-border-radius: 13px; -webkit-transition: all 0.1s ease-out; }
.more-link.green a { background: #f1f6ce; color: #95a105 !important; }
.more-link.green a:hover { background: #95a105; }
.more-link.blue a { background: #f1fafa; color: #2daebf !important; }
.more-link.blue a:hover { background: #73cacf; }
.more-link.magenta a { background: #f9e5ee; color: #a9014b !important; }
.more-link.magenta a:hover { background: #c9025c; }
.more-link.red a { background: #ffebe5; color: #e33100 !important; }
.more-link.red a:hover { background: #ff3700; }
.more-link.orange a { background: #fff0e6; color: #ff5c00 !important; }
.more-link.orange a:hover { background: #ff6908; }
.more-link.orangellow a { background: #fff7e7; color: #fc9200 !important; }
.more-link.orangellow a:hover { background: #ffb515; }
.more-link a:hover { color: #fff !important; }
ul.more-link { list-style: none; }
ul.more-link li { display: inline; }
ul.more-link li.next a { float: right !important; }
/* --------------------------------------------------
Typography
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: #333; font-weight: bold; }
h1, h2, h3 { letter-spacing: -1px; }
h1 { font-size: 45px; line-height: 1; margin: 0 0 9px; }
h2 { font-size: 30px; line-height: 1.2; margin: 9px 0; }
h3 { font-size: 24px; line-height: 1; margin: 3px 0 9px; }
h4 { font-size: 18px; line-height: 1.2; margin: 0; }
h5 { font-size: 14px; line-height: 18px; }
h6 { font-size: 13px; line-height: 18px; }
p { line-height: 18px; margin: 0 0 18px; }
p img { margin: 0; }
p.lead { font-size: 18px; line-height: 24px; margin: 0 0 18px; color: #777; }
small { font-size: 90%; line-height: inherit; color: #777; font-weight: normal; }
/* Blockquotes (props to @paulrobertlloyd for inspiration) -------------------- */
/* Original blockquote styles
blockquote, blockquote p { font-size: 14px; line-height: 20px; color: #777; }
blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote.solid { background: #f5f5f5; }
blockquote p { margin: 0; padding: 0 0 9px; }
blockquote h5 { margin: 0; }
blockquote cite { display: block; padding: 0 0 9px 6px; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited { color: #555; }
blockquote cite a:hover { color: #555; text-decoration: none; }
*/
blockquote, blockquote p { font-size: 16px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 18px 1px; padding-left: 15px; border-left: 1px solid #ccc; }
blockquote.left { float: left; margin-right: 20px; }
blockquote.right { float: right; margin-left: 20px; }
blockquote p { margin: 0; padding: 0 0 9px; }
blockquote h5 { margin: 0; }
blockquote cite { display: block; padding: 0 0 9px; font-size: 13px; color: #999; }
/*
blockquote cite:before { content: "\2014 \0020"; }
*/
blockquote cite a, blockquote cite a:visited { color: #555; }
blockquote cite a:hover { color: #555; text-decoration: none; }
blockquote.black p { color: #333; }
blockquote.green p { color: #b8d30b; }
blockquote.blue p { color: #007d9a; }
blockquote.magenta p { color: #630030; }
blockquote.red p { color: #872300; }
blockquote.orange p { color: #d45500; }
blockquote.yellow p { color: #d17200; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 17px 0 18px; height: 0; }
body.ie6 hr { margin: 8px 0 9px; }
code, pre { font: 12px/18px "Monaco", "Courier New", "Courier", monospace; color: #e33100; }
address { color: #333; line-height: 18px; margin: 0 0 18px; }
abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
abbr { text-transform: none; }
/* --------------------------------------------------
Lists
-------------------------------------------------- */
ul, ol { margin-bottom: 18px; }
ul { list-style: none outside; }
ol, ul.square, ul.circle, ul.disc { margin-left: 24px; }
ol { list-style: decimal; 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-left: 30px; margin-top: 4px; margin-bottom: 5px; }
li { line-height: 18px; }
dt { line-height: 18px; font-weight: bold; color: #333; }
dd { margin: 0 0 18px; line-height: 18px; }
/* Recent Updates -------------------- */
ul.recent li { margin: 0 0 12px; line-height: 15px; }
ul.recent li h5 { font-size: 13px; line-height: 15px; }
ul.recent li h5 a { font-weight: bold; }
ul.recent li small, ul.recent li small a { color: #999 !important; }
ul.recent li small a:hover { color: #555 !important; }
ul.recent li small span { padding: 0 3px; color: #ccc; font-size: 100%; }
/* Recent comments */
ul.recent.comments li { color: #999; }
/* Recent photos */
ul.photos { margin: 9px 0 18px -10px; }
ul.photos li { display: inline; }
ul.photos a { display: inline; float: left; margin: 0 0 9px 10px; line-height: 1; text-decoration: none; }
ul.photos img { display: block; margin: 0 0 5px; padding: 4px; border: 1px solid #ccc; border-color: rgba(0,0,0,.25); -moz-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-transition: all 0.15s ease-out; }
ul.photos a:hover img { border-color: #999; border-color: rgba(0, 182, 222, .5);
-moz-box-shadow: 0 0 9px rgba(0,182,222,.5);
-webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
ul.photos li h5 { font-size: 14px; }
ul.photos.small { margin-left: -15px; }
ul.photos.small a { margin: 0 0 14px 15px; }
ul.photos.medium, ul.photos.large { margin-left: -20px; }
ul.photos.medium a, ul.photos.large a { margin: 0 0 18px 20px; }
ul.photos.medium img { width: 90px; height: 90px; }
ul.photos.large img { width: 162px; height: 162px; }
ul.photos.xlarge img { width: 210px; height: 210px; }
/* Awesome Rounded White Border Images ------- */
a.awesome.image img, img.awesome.image, ul.awesome.images img, div.awesome.image { display: inline; position: relative; margin: 0 0 5px; padding: 4px; border: 1px solid #ccc; border-color: rgba(0,0,0,.25); -moz-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-transition: all 0.15s ease-out; }
ul.images.awesome { margin-left: -20px; margin-bottom: 0; padding-top: 9px; margin-top: -9px; }
ul.images.awesome li { float: left; margin: 0 0 0 20px; position: relative; }
ul.images.awesome img { height: auto; margin-bottom: 9px; background: #fff; }
ul.images.awesome a { margin: 0; float: none; height: auto; }
ul.images.awesome a:hover img { border-color: rgba(0,182,222,.5); -moz-box-shadow: 0 0 9px rgba(0,182,222,.5); -webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
ul.images.awesome a h4 { color: #007d9a; -webkit-transition: all 0.15s ease-out; }
ul.images.awesome a:hover h4 { color: #2daebf; }
ul.images.awesome a.button { float: none; margin: 0 5px 0 0; display: inline-block; }
ul.images.awesome p { margin-bottom: 9px; }
ul.images.awesome.micro li { width: 100px; overflow: hidden;}
ul.images.awesome.micro li img { width: 90px; }
ul.images.awesome.mini li { width: 160px; overflow: hidden;}
ul.images.awesome.mini li img { width: 150px; }
ul.images.awesome.regular li { width: 220px; overflow: hidden;}
ul.images.awesome.regular li img { width: 210px; }
ul.images.awesome.grande li { width: 340px; overflow: hidden;}
ul.images.awesome.grande li img { width: 330px; }
ul.images.awesome li ul { margin: 0; }
ul.images.awesome li li { width: auto; float: none; height: auto; margin: 0; display: block; }
ul.images.awesome li li a { line-height: 20px; }
a.image.awesome img:hover { border-color: rgba(0,182,222,.5); -moz-box-shadow: 0 0 9px rgba(0,182,222,.5); -webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
/* --------------------------------------------------
Tabs
-------------------------------------------------- */
ul.tab-nav { height: 30px; border-bottom: 1px solid #ddd; }
ul.tab-nav li { display: inline; }
ul.tab-nav a { display: inline; float: left; margin-top: 2px; margin-right: 1px; padding: 5px 11px; font-size: 12px; font-weight: bold; color: #555; background: #eee; -moz-border-radius: 3px 3px 0 0; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; }
ul.tab-nav li.current a { background: #fff; margin-top: 0; padding: 6px 12px; color: #333; border: 1px solid #ccc; border-bottom: 0; }
div.simple-sub-nav ul { float: left; width: 100%; border-top: 2px solid #eee; padding-bottom: 30px; margin-top: -33px; }
div.simple-sub-nav li { float: left; font-size: 17px; font-weight: bold; border-top: 5px solid #fff; padding: 5px 18px 5px 2px; margin-right: 5px; }
div.simple-sub-nav li a { text-decoration: none; color: #868686; }
div.simple-sub-nav li a:hover { color: #a9014b; }
div.simple-sub-nav li.current { border-top: 5px solid #a9014b; }
div.simple-sub-nav li.current a { color: #3b3b3b; }
/* Code Lists -------------------- */
ol.code { background: #333; border: 0; margin: 0 0 18px; padding: 18px; list-style: none; }
ol.code li { color: #fff; margin: 0; line-height: 18px; padding: 0; font-family: "Consolas", "Courier New", Monaco, Courier, monospace; }
ol.code li code { font-family: "Consolas", "Courier New", Monaco, Courier, monospace; font-size: 12px; line-height: inherit; color: inherit; }
ol.code .indent-1 { padding-left: 2em; }
ol.code .indent-2 { padding-left: 4em; }
ol.code .indent-3 { padding-left: 6em; }
ol.code li.selector { color: #39c; }
ol.code li.property { color: #f63; padding: 0 0 0 2em; }
ol.code li.property span.value, ol.code .class { color: #9c3; }
ol.code li.punctuate,
ol.code li.selector span.punctuate,
ol.code li.property span.punctuate { color: #999; }
/* Awesome Rounded White Border Images ------- */
a.awesome.photo img, img.awesome.photo { display: inline; position: relative; margin: 0 0 5px; padding: 4px; border: 1px solid #ccc; border-color: rgba(0,0,0,.25); -moz-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15); -webkit-transition: all 0.15s ease-out; }
ul.photos.awesome { margin-left: -20px; margin-bottom: 0; padding-top: 9px; margin-top: -9px; }
ul.photos.awesome li { float: left; margin: 0 0 0 20px; position: relative; }
ul.photos.awesome img { height: auto; margin-bottom: 9px; background: #fff; }
ul.photos.awesome a { margin: 0; float: none; height: auto; }
ul.photos.awesome a:hover img { border-color: rgba(0,182,222,.5); -moz-box-shadow: 0 0 9px rgba(0,182,222,.5); -webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
ul.photos.awesome a h4 { color: #007d9a; -webkit-transition: all 0.15s ease-out; }
ul.photos.awesome a:hover h4 { color: #2daebf; }
ul.photos.awesome a.button { float: none; margin: 0 5px 0 0; display: inline-block; }
ul.photos.awesome p { margin-bottom: 9px; }
ul.photos.awesome.micro li { width: 100px; overflow: hidden;}
ul.photos.awesome.micro li img { width: 90px; }
ul.photos.awesome.mini li { width: 160px; overflow: hidden;}
ul.photos.awesome.mini li img { width: 150px; }
ul.photos.awesome.regular li { width: 220px; overflow: hidden;}
ul.photos.awesome.regular li img { width: 210px; }
ul.photos.awesome.grande li { width: 340px; overflow: hidden;}
ul.photos.awesome.grande li img { width: 330px; }
ul.photos.awesome li ul { margin: 0; }
ul.photos.awesome li li { width: auto; float: none; height: auto; margin: 0; display: block; }
ul.photos.awesome li li a { line-height: 20px; }
a.photo.awesome img:hover { border-color: rgba(0,182,222,.5); -moz-box-shadow: 0 0 9px rgba(0,182,222,.5); -webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
/* @group Tables
-------------------------------------------------- */
table { background: #fff; width: 100%; margin: 0 0 18px; border: solid #ddd; border-width: 0 1px 1px 0; border-collapse: separate; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
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; border-left: 1px solid #ddd; border-right: 1px solid #fff; vertical-align: top; }
/* Get fancy with rounded corners */
table thead tr th:first-child { -webkit-border-top-left-radius: 5px; -moz-border-radius: 3px 0 0 0; }
table thead tr th:last-child { -webkit-border-top-right-radius: 5px; -moz-border-radius: 0 3px 0 0; }
table tbody tr:last-child td:first-child { -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 0 0 0 3px; }
table tbody tr:last-child td:last-child { -webkit-border-bottom-right-radius: 5px; -moz-border-radius: 0 0 3px 0; }
/* Style the tables a bit lighter */
table.alt { border-width: 1px 1px 1px 0; }
table.alt thead { background: #f5f5f5; }
table.alt thead tr th { color: #222; border-left: 1px solid #ddd; border-right: 1px solid #fff; }
/* @end */
/* @group Forms
-------------------------------------------------- */
form { margin: 0 0 18px; }
fieldset { }
label { display: block; font-size: 13px; font-weight: bold; line-height: 18px; cursor: pointer; }
button, input.input-text, input.password, input.button, textarea, select { font-family: Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif; font-size: 12px; }
input.input-text, input.password, textarea { display: block; background: #fff url(/playground/images/forms/input-bg.png) no-repeat 0 0; width: ; margin: 0 0 10px; padding: 3px 5px; border: 1px solid #bbb; -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-box-shadow: 0 1px 1px #fff; font: 13px/18px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif; color: #777; }
form select:focus, form input.input-text:focus, form textarea:focus { outline: none; }
form input.input-text:focus, form textarea:focus { border-color: #999; color: #333; padding: 2px 4px; border: 2px solid #2daebf; }
form input.input-text.error, form textarea.error { color: #e33100; padding: 2px 4px; border: 2px solid #e33100; }
textarea { width: 272px; }
span.wrap { background: #eee; display: inline-block; margin: 0 0 14px; padding: 3px; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
span.wrap input, span.wrap textarea, span.wrap small, span.wrap p { display: inline; vertical-align: top; margin-bottom: 0; }
span.wrap small { font-size: 12px; color: #666; line-height: 18px; padding: 3px 10px 0 2px; position: relative; top: 4px; }
/* IE6 Sucks */
body.ie6 input.input-text, body.ie6 input.password, body.ie6 textarea { background-image: url(/playground/images/forms/input-bg.gif); padding: 5px 5px 6px; }
/* Firefox 3.5 Sucks */
body.ff3 input.input-text { padding: 4px 5px; }
body.ff3 input.input-text:focus { padding: 3px 4px; }
/* Text input and textarea sizes */
input.mini, textarea.mini { width: 90px; }
input.small, textarea.small { width: 120px; }
input.medium, textarea.medium { width: 330px; }
input.large, textarea.large { width: 570px; }
input.fluid, textarea.fluid { width: 700px; }
/* Text input and textarea sizes for stuff in the span wraps */
span.wrap input.mini, span.wrap textarea.mini { width: 90px; }
span.wrap input.small, span.wrap textarea.small { width: 120px; }
span.wrap input.medium, span.wrap textarea.medium { width: 324px; }
span.wrap input.large, span.wrap textarea.large { width: 564px; }
span.wrap input.fluid, span.wrap textarea.fluid { width: 680px; }
/* Sets of checkboxes and radio buttons */
ul.options { margin-bottom: 18px; }
ul.options li { padding: 0 0 3px; }
ul.options li label { font-size: 13px; font-weight: normal; }
ul.options li input.radio,
ul.options li input.checkbox { }
/* Inline options */
ul.options.inline { }
ul.options.inline li { display: inline; padding-right: 8px; }
ul.options.inline li.label { font-weight: bold; background: none; color: #333; text-transform: none; padding: 0; display: inline; font-size: 13px; }
ul.options.inline label { display: inline; }
/* Actions (buttons and links) at the bottom of forms) */
fieldset.actions { margin: 9px 0 0; padding: 12px 0 13px; text-align: right; border-top: 1px solid #ddd; }
fieldset.actions * { display: inline-block; }
/* Super Awesome Brand New Mega Cool Inline Labels */
label.inlined { padding-left: 7px; font-weight: normal; font-size: 16px; opacity: 0.75; -webkit-transition: color 0.15s linear; position: relative; z-index: 100; }
label.inlined + input.input-text { margin-top: -24px; background-color: transparent; }
label.inlined.focus { color: #bbb; }
label.inlined.has-text { color: #fff; -webkit-transition-duration: 0.0s; }
/* @end */
/* @group ZURButtons
-------------------------------------------------- */
.button { background: #222 url(/playground/images/overlay-button.png) repeat-x 0 0; display: inline-block; padding: 5px 15px 6px; color: #fff !important; font-size: 13px; font-weight: bold; line-height: 1; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; overflow: visible; width: auto; }
button::-moz-focus-inner { border: 0; padding: 0; }
.button:hover { background-color: #111; color: #fff; }
.button:active { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); }
/* Small Buttons */
.small.button { font-size: 11px; }
/* Large Buttons */
.large.button { font-size: 14px; padding: 8px 19px 9px; }
/* Colors for our beloved buttons */
.green.button { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.blue.button { background-color: #2daebf; }
.blue.button:hover { background-color: #007d9a; }
.red.button { background-color: #e33100; }
.red.button:hover { background-color: #872300; }
.magenta.button{ background-color: #a9014b; }
.magenta.button:hover { background-color: #630030; }
.orange.button { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.orangellow.button { background-color: #ffb515; }
.orangellow.button:hover { background-color: #fc9200; }
.white.button { background-color: #fff; border: 1px solid #ccc; color: #666 !important; font-weight: normal; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.white.button:hover { background-color: #eee; }
/*Strike button*/
.strike.button {background-color: #4ADFC1}
.strike.button:hover {background-color: #39ceb0}
/* Secondary buttons (perfect for Cancels or other secondary actions */
.secondary.button { background: #fff url(/playground/images/gradients/36px-black.png) repeat-x 0 0; color: #555 !important; text-shadow: 0 1px 1px rgba(255,255,255,0.5); border: 1px solid #bbb; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.secondary.button:hover { background-color: #eee; color: #444 !important; border-color: #999; }
/* Make the buttons super awesomer */
.super.button { background-image: url(/playground/images/super-button-overlay.png); font-size: 13px; padding: 0; border: 1px solid rgba(0,0,0,.25); -webkit-border-radius: 15px; -moz-border-radius: 15px; }
.super.button span { display: block; padding: 4px 15px 6px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-top: 1px solid rgba(255,255,255,.2); line-height: 1; }
.small.super.button { font-size: 11px; -webkit-border-radius: 12px; -moz-border-radius: 12px; }
.small.super.button span { padding: 2px 12px 6px; -webkit-border-radius: 11px; -moz-border-radius: 11px; }
.small.white.super.button span { padding: 3px 12px 5px; }
.large.super.button { background-position: left bottom; -webkit-border-radius: 18px; -moz-border-radius: 18px; }
.large.super.button span { font-size: 14px; padding: 7px 20px 9px; -webkit-border-radius: 17px; -moz-border-radius: 17px; }
/* @group Structure
-------------------------------------------------- */
/* Container ------------------------------------- */
div#container, div.container { position: relative; width: 980px; margin: 0 auto; padding: 0; }
body.ie8 div#container { position: static; }
/* Header ---------------------------------------- */
div#header { position: relative; height: 54px; margin: 0 auto 36px; }
/* ZURB logo image */
div#header img { display: block; float: left; margin: 25px 0 0; }
/* Text in the header on the top left */
div#header h3 { float: left; font-size: 24px; line-height: 1; margin: 0; position: absolute; top: 21px; left: 0; letter-spacing: -1px; }
div#header h3 a, div#header h3 a:visited { font-weight: bold; }
div#header h3 a:hover { color: #777; }
/* @end */
/* @group Navigation
-------------------------------------------------- */
ul.tabs { float: right; margin: 0; }
ul.tabs li { display: block; float: left; line-height: 1; }
ul.tabs li a { display: block; font-weight: bold; width: 90px; margin: 9px 0 0 -1px; padding: 18px 5px 11px 15px; border-left: 1px solid #eee; text-decoration: none; color: #333; cursor: pointer; }
ul.tabs li a:hover, ul.tabs li.current a { background: #b8d30b; color: #fff; border: 0; margin: 0; padding-top: 27px; text-shadow: 0 -1px 1px rgba(0,0,0,.25); -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius: 0 0 3px 3px; position: relative; z-index: 2; }
ul.tabs li span { display: block; font-size: 16px; line-height: 1; font-weight: bold; }
/* Hover colors for each main ZURB section */
ul.tabs li a.home:hover { background: #b8d30b; }
ul.tabs li a.talent:hover { background: #a9014b; }
ul.tabs li a.work:hover { background: #2daebf; }
ul.tabs li a.blog:hover { background: #ff6908; }
ul.tabs li a.contact:hover { background: #fc9200; }
/* Shortened tabs for within apps (dashboard) */
ul.tabs.short li a { padding: 9px 5px 13px 15px; }
ul.tabs.short li a:hover,
ul.tabs.short li.current a{ padding: 18px 5px 13px 15px; }
ul.tabs.short li span { font-size: 14px; }
/* Pill Nav */
ul.pill-nav { list-style: none; height: 26px; margin: 0; float: right; }
ul.pill-nav li { display: inline; }
ul.pill-nav li a { font-weight: normal; padding: 4px 10px 4px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-decoration: none; }
ul.pill-nav li a:hover { background-color: #eee; color: #666; }
ul.pill-nav li a.current, ul.pill-nav li.current a { background: #2daebf; color: #fff; font-weight: bold; cursor: text; }
ul.pill-nav li a.unviewed { font-weight: bold; }
/* @end */
/* @group Admin Header
-------------------------------------------------- */
div#ZURBar { background: #222; height: 36px; width: 100%; }
div#ZURBar h6 { display: inline; padding: 0; font-size: 18px; }
div#ZURBar h6 a { float: left; display: block; margin: 0 10px; line-height: 1; color: #fff; text-decoration: none; background: #a5c941; }
div#ZURBar h6 a:hover { }
/* Revamped navigation elements */
ul.nav { float: left; margin: 0; padding: 0; list-style: none; position: relative; }
ul.nav li { display: inline; color: #999; line-height: 1; }
ul.nav li a span { display: inline; font-weight: normal; opacity: .75; line-height: .9; }
ul.nav li a,
ul.nav li.faux-link { float: left; display: inline; width: auto; text-decoration: none; text-shadow: 0 -1px 1px #222; line-height: 1; }
ul.nav li a { padding: 0 15px; height: 36px; line-height: 36px; font-weight: bold; color: #fff; }
ul.nav li a:hover { color: #fff; text-decoration: underline; }
ul.nav li.faux-link a:hover { text-decoration: underline; color: #fff; }
ul.nav li.faux-link { font-weight: normal; color: #777; height: 36px; line-height: 36px; padding: 0 10px; }
ul.nav li.faux-link a { display: inline; float: none; padding: 0; height: auto; line-height: 1; }
ul.nav li.faux-link a:hover { background: none; }
ul.nav li.faux-link small,
ul.nav li.faux-link small a { font-weight: normal; color: #999; }
ul.nav li.search { padding: 0 10px; }
ul.nav li.search form { line-height: ; }
ul.nav li.search form input { margin: 7px 0 0; color: #777; }
ul.user.nav li.current a { background: #000; }
/* User and account links in top right */
ul.account.nav { position: absolute; top: 0; right: 10px; }
ul.account.nav a { font-weight: normal; }
ul.nav li.menu { position: relative; float: left; }
ul.nav li.menu a { display: block; float: none; }
ul.nav li.menu a img.arrow { vertical-align: middle; position: relative; top: -1px; opacity: .5; margin-left: 3px; }
ul.nav li.menu a:hover { text-decoration: none; background: #333; }
/* Level 1 Flyouts */
ul.nav li.menu ul { background: #333; background: #333 -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222)); width: 190px; margin: 0; padding: 5px 0; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius: 0 0 5px 5px; -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.25); -moz-box-shadow: 0 5px 15px rgba(0,0,0,.25); position: absolute; top: 36px; left: -999em; z-index: 5000; }
ul.nav li.menu ul li { display: block; position: relative; }
ul.nav li.menu ul li.divider { margin: 4px 1px; border-bottom: 1px solid #222; border-bottom-color: rgba(255,255,255,.05); border-top: 1px solid #000; border-top-color: rgba(0,0,0,.5); }
ul.nav li.menu ul li a { float: none; display: block; height: auto; padding: 2px 15px 3px; line-height: 18px; font-weight: normal; }
ul.nav li.menu ul li.secondary a { color: #999; }
ul.nav li.menu ul li a:hover { background: #b8d30b; background: #b8d30b -webkit-gradient(linear, 0 0, 0 100%, from(#b8d30b), to(#9ec106)); font-weight: bold; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,.25); }
/* Level 2 Flyouts */
ul.nav li.menu ul li ul { position: absolute; top: 0; left: 0; margin-left: 190px; display: none; -webkit-border-top-right-radius: 5px; -moz-border-radius: 0 5px 5px 5px; }
ul.nav li.menu ul li:hover ul { display: block; }
ul.nav li.menu:hover { background: #333; }
ul.nav li.menu:hover ul { left: auto; }
ul.nav li.menu:hover img.arrow { opacity: 1; }
ul.nav li.menu ul li.zurbword { padding: 2px 15px; font-weight: bold; color: #fff; line-height: 18px; }
/* ZURBmenu */
ul.nav li#ZURBmenu a { padding: 0 12px; }
ul.nav li#ZURBmenu strong { background-color: #b8d30b; display: block; width: 42px; height: 50px; position: relative; z-index: 5001; }
ul.nav li#ZURBmenu ul { padding-top: 9px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0 0 5px 0; }
ul.nav li#ZURBmenu ul li a { padding: 2px 15px; }
ul.nav li#ZURBmenu:hover strong { background: url(/playground/images/zurb-nub-shell-hover.png) no-repeat 0 0; }
ul.nav li#ZURBmenu:hover strong img { display: none; }
/* @end */
/* --------------------------------------------------
Page & Section Headers
-------------------------------------------------- */
/* Page headers for marketing pages ---------- */
div.page-header { width: 100%; position: relative; margin: 0 0 31px; padding: 36px 0 27px; border-bottom: 2px solid #eee; clear: both; background-position: right bottom; background-repeat: no-repeat; }
div.page-header h1 { display: block; font-size: 81px; line-height: 1; font-weight: bold; letter-spacing: -3px; margin: 0; color: #222; }
div.page-header h2 { margin: 6px 0 0; font-size: 24px; line-height: 1.25; color: #777; font-weight: normal; letter-spacing: 0; }
div.page-header h2 a { text-decoration: underline; font-weight: inherit; line-height: inherit; }
div.page-header h2 a.button { display: inline-block; position: relative; top: -5px; }
div.page-header h1 span,
div.page-header h2 span { display: block; }
div.page-header h1 small,
div.page-header h2 small { font-size: 75%; font-weight: normal; }
/* Sub headers ---------- */
div.sub-header { position: relative; margin: 0 0 18px; padding: 0 0 8px; border-bottom: 1px solid #ddd; }
div.sub-header h3 { color: #222; }
div.sub-header h3 small { color: #777; font-size: 18px; }
div.sub-header ul { margin-bottom: 0; position: absolute; right: 0; bottom: 8px; }
/* New section page headers for (for things like Talent, Work, etc) */
div#sectionHeader { }
/* New secondary page headers for marketing pages and apps */
div#pageHeader { margin: 0 0 27px; }
div#pageHeader h1, div#pageHeader.single-post h3 { font-size: 36px; line-height: 1; letter-spacing: -1px; color: #222; }
div#pageHeader h1 small, div#pageHeader.single-post h3 small { font-size: 18px; font-weight: normal; letter-spacing: 0; color: #999; }
div#pageHeader p { font-size: 14px; color: #999; }
div#pageHeader div.sub-nav { background: #f5f5f5; height: 24px; padding: 8px 10px 7px; border-bottom: 1px solid #eee; overflow: hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
div#pageHeader ul { height: 24px; margin: 0 0 0 -4px; }
div#pageHeader li { display: inline; line-height: 1; }
div#pageHeader li a,
div#pageHeader li.divider { float: left; width: auto; padding: 6px 12px; line-height: 1; }
div#pageHeader li a { margin: 0 0 0 4px; text-decoration: none; -webkit-border-radius: 12px; -moz-border-radius: 12px; font-weight: bold; color: #333; text-shadow: 0 1px 1px #fff; }
div#pageHeader li.divider { color: #ccc; width: 5px; padding: 7px 8px 0 10px; text-shadow: 0 -1px -1px #aaa; }
div#pageHeader li a:hover,
div#pageHeader li.current a { background: #a5c941; margin-top: 0; padding: 4px 12px 6px; color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,.25); border-top: 1px solid rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; }
div#pageHeader ul.options { float: right; margin: 0; padding: 6px 0 0; height: auto; }
div#pageHeader ul.options li a { font-weight: normal; padding: 0; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
div#pageHeader ul.options li a:hover { background: none; color: #555; }
/* Give us a search form */
div#pageHeader li.form { padding-left: 8px; float: left; display: inline; }
div#pageHeader li.form form { margin: 0; }
div#pageHeader li.form form input.input-text { background: #fff url(/playground/images/icons/16px/search.gif) no-repeat 4px center; width: 155px; padding: 3px 12px 3px 21px; color: #777; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-color: #ddd; border-top-color: #ccc; }
/* @group Grid
-------------------------------------------------- */
.column-row, .row { margin: 0 0 18px -20px; }
.column, .columns { float: left; display: inline; margin: 0 0 0 20px; }
/*
#contentMain { width: 600px; }
#contentSec { width: 300px; margin-left: 40px; }
*/
.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
.one { width: 40px; }
.two { width: 100px; }
.three { width: 160px; }
.four { width: 220px; }
.five { width: 280px; }
.six { width: 340px; }
.seven { width: 400px; }
.eight { width: 460px; }
.nine { width: 520px; }
.ten { width: 580px; }
.eleven { width: 640px; }
.twelve { width: 700px; }
.thirteen { width: 760px; }
.fourteen { width: 820px; }
.fifteen { width: 880px; }
.sixteen { width: 940px; }
.one-half { width: 450px; padding-right: 10px; }
.one-third { width: 300px; }
.two-thirds { width: 620px; }
.eleven .column-row { width: 660px; }
.twelve .column-row { width: 720px; }
.offset-by-one-half { margin-left: 50px; }
.offset-by-one { margin-left: 80px; }
.offset-by-two { margin-left: 140px; }
.offset-by-three { margin-left: 200px; }
.offset-by-four { margin-left: 260px; }
.offset-by-five { margin-left: 320px; }
.offset-by-six { margin-left: 380px; }
.offset-by-seven { margin-left: 440px; }
.offset-by-eight { margin-left: 500px; }
.offset-by-nine { margin-left: 560px; }
.offset-by-ten { margin-left: 620px; }
.offset-by-eleven { margin-left: 680px; }
.offset-by-twelve { margin-left: 740px; }
.offset-by-thirteen { margin-left: 800px; }
.offset-by-fourteen { margin-left: 880px; }
.last { margin: 0; }
/* Clear the columns automagically, thanks @kneath */
.column-row:after, .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .column-row, * html .row, * html .clearfix { height: 1%; }
.column-row, .row, .clearfix { display: inline-block; }
.column-row, .row, .clearfix { display: block; }
/* IE6 Problems ---------- */
body.ie .column-row { width: 960px; }
body.ie .eight .column-row { width: 480px; }
body.ie .nine .column-row { width: 540px; }
body.ie .ten .column-row { width: 600px; }
body.ie .eleven .column-row { width: 660px; }
body.ie .twelve .column-row { width: 720px; }
body.ie .thirteen .column-row { width: 780px; }
body.ie .fourteen .column-row { width: 840px; }
body.ie .fifteen .column-row { width: 900px; }
body.ie .two-thirds .column-row { width: 640px; }
/* @end */
/* @group Alerts & Errors
---------------------------------------- */
/* Plain, Simple Alert */
p.warning, p.error, p.success, p.info { margin: 0 0 18px; padding: 9px 15px; -webkit-border-radius: 6px; -moz-border-radius: 6px; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.01); }
p.warning a, p.error a, p.success a, p.info a { color: #fff; font-weight: bold; text-decoration: underline; }
/* Warnings */
p.warning { background-color: #ffb515; }
p.warning small { color: #d17200; }
/* Errors */
p.error { background-color: #df4729; color: #fff; }
p.error strong { color: #fff; }
p.error small { color: #930; }
/* Success */
p.success { background-color: #a5c941; color: #fff; }
p.success strong { color: #fff; }
p.success small { color: #360; }
p.info { background-color: #73cacf; color: #fff; }
p.info small { color: #007d9a; }
/* @end */
/* @group Figures & Images -------------------------------------------- */
div.figure { background: #eee; margin: 0 0 18px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
div.figure img,
div.post div.figure img { display: block; margin: 0; border: 1px solid #ccc; }
div.figure cite { display: block; padding: 8px 10px; font-size: 13px; line-height: 18px; color: #555; }
div.figure cite strong { color: #333; }
div.simple.figure { background: #fff; }
div.simple.figure img { border: 0; }
div.simple.figure cite { padding: 8px 0; color: #777; }
div.simple.figure cite strong { color: #555; }
div.clean.figure img { border: 0; margin: 1px; }
div.floated.figure,
div.right.figure { float: right; margin: 0 0 18px 18px; }
div.left.figure { float: left; margin: 0 18px 18px 0; }
div.large.figure,
body.ie6 div.large { width: 520px; }
div.large.figure img { width: 518px; }
div.medium.figure { width: 340px; }
div.medium.figure img { width: 338px; }
div.small.figure { width: 220px; }
div.small.figure img { width: 218px; }
/* @end */
/* @group Custom Labels
-------------------------------------------------- */
.label { background: #999; display: inline-block; padding: 3px 5px 4px; color: #fff; font-size: 11px; font-weight: bold; text-decoration: none; text-transform: uppercase; line-height: 1; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 0 1px transparent; }
.label:hover { text-decoration: none; color: #fff; }
body.ff2 .label { -moz-border-radius: 0; }
/* ZURB colors */
.green.label { background: #a5c941; text-shadow: 0 0 1px #a5c941; }
.blue.label { background: #2daebf; text-shadow: 0 0 1px #2daebf; }
.magenta.label { background: #a9014b; text-shadow: 0 0 1px #a9014b; }
.red.label { background: #e33100; text-shadow: 0 0 1px #e33100; }
.orange.label { background: #ff5c00; text-shadow: 0 0 1px #ff5c00; }
.yellow.label { background: #fc9200; text-shadow: 0 0 1px #fc9200; }
/* Other Basics */
.label.black { background: #333; text-shadow: 0 0 1px #222; }
.label.white { background: #fff; padding: 0 3px 1px; border: 1px solid #ddd; color: #333; text-shadow: 0 0 1px #fff; }
/* @end */
/* @group Custom Dividers
-------------------------------------------------- */
div.divider { background-repeat: no-repeat; background-position: center top; width: 100%; height: 36px; margin: 18px 0 27px; }
div.notable.divider { background-image: url(/playground/images/dividers/divider-notable.gif); }
div.odditorium.divider { background-image: url(/playground/images/dividers/divider-odditorium.gif); }
div.scrumptious.divider { background-image: url(/playground/images/dividers/divider-scrumptious.gif); }
div.zurb.divider { background-image: url(/playground/images/dividers/divider-zurb.gif); }
/* --------------------------------------------------
Misc
-------------------------------------------------- */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.muted { color: #777; }
/* @group Pagination */
div.pagination { width: 100%; height: 36px; text-align: center; margin: 0 0 36px; padding: 0; font-size: 12px; line-height: 1; }
div.pagination a, div.pagination a:visited { padding: 3px 11px 4px; font-size: 12px; line-height: 1; text-decoration: none; font-weight: bold; border: 1px solid #ddd; text-shadow: 0 1px 1px #fff; -webkit-border-radius: 2px; }
div.pagination a:hover { color: #fff; text-shadow: 0 -1px 1px #007d9a; background: #2daebf; border: 1px solid #007d9a; }
div.pagination .disabled { color: #bbb; border: 0; }
div.pagination .current { padding: 4px 12px 5px; color: #777; font-weight: bold; }
.inactive { color: #777; }
div.pagination .prev_page, div.pagination .next_page { margin: 0 20px 0 20px; }
ul.paginate { width: 100%; height: 27px; margin: 0 0 18px; }
ul.paginate li { display: inline; }
ul.paginate a { background: #f7f6ed; display: inline; float: left; padding: 3px 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-decoration: none; xfont-weight: bold; }
ul.paginate a:hover { background: #818076; color: #fff; }
ul.paginate li.next a { float: right; }
/* @end */
/* @group Avatars */
div.avatar { float: left; margin: -4px 12px 13px 0; }
div.avatar a { }
div.avatar img { display: block; width: 36px; padding: 4px; border: 1px solid #ddd; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
div.avatar a:hover img { border-color: #ccc; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15); }
/* @end */
/* --------------------------------------------------
Wells
-------------------------------------------------- */
div.well { background: #f1f1f1; padding: 17px 19px; margin: 0 0 18px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid #ddd; border-top-color: #ccc; border-bottom-color: #eee; }