UNPKG

generator-gsndnn

Version:

Scaffolds DNN extensions, including Modules (Webforms, SPA, and MVC), Persona Bar, Skin Object, Library, Scheduler, and Hotcakes Commerce projects (based on the generator built by Matt Rutledge).

1,210 lines (1,196 loc) 34.5 kB
/*! * Custom metro-inspired theme for Bootstrap v3.0.0 * * Copyright 2013 Scott Dorman * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world by @sdorman. */ /* * Boxed content * */ .boxed-content { text-align: center; margin-bottom: 35px; } .boxed-content > span.icon { font-size: 8em; color: #406da4; } .boxed-content .boxed-content-title { font-size: 22px; font-weight: 700; text-transform: uppercase; } .boxed-content.left-aligned, .boxed-content.left-boxed-icon { text-align: left; } .boxed-content.left-aligned span.icon, .boxed-content.left-boxed-icon span.icon { float: left; margin-right: 10px; font-size: 2em; } .boxed-content.left-aligned .boxed-content-title, .boxed-content.left-boxed-icon .boxed-content-title { margin-bottom: 10px; line-height: 28px; font-weight: normal; } .boxed-content.left-aligned.well .boxed-content-title, .boxed-content.left-boxed-icon.well .boxed-content-title { margin-top: 0; } .boxed-content.left-boxed-icon span.icon { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 10px; width: 60px; height: 60px; background: #406da4; color: white; text-align: center; line-height: 40px; } .boxed-content.left-boxed-icon .boxed-content-title, .boxed-content.left-boxed-icon p { padding-left: 80px; } .number-box { text-align: center; } .number-box p { font-size: 28px; font-weight: 300; line-height: 1.3; margin-bottom: 0; text-transform: uppercase; } .number-box p span { font-size: 0.5em; } .number-box.number-box-lg p { font-size: 4em; } .number-box.number-box-vertical { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; } .number-box.number-box-vertical span.icon { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; width: 60px; margin-bottom: 5px; font-size: 36px; } .number-box.number-box-vertical p span { display: block; } @media screen and (max-width: 768px) { .number-box.number-box-vertical { margin-bottom: 30px; } } .number-box.number-box-horizontal span.icon { font-size: 30px; line-height: 1.2; } @media screen { } @media screen and (max-width: 768px) { .number-box.number-box-horizontal span.icon { float: none !important; } } @media screen and (max-width: 480px) { .number-box.number-box-horizontal span.icon { float: none !important; display: block; margin-bottom: 10px; margin-right: 0; } } .number-box.number-box-horizontal p { padding-left: 40px; line-height: 1; text-align: left; } @media screen { } @media screen and (max-width: 768px) { .number-box.number-box-horizontal p { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding-left: 0; } } @media screen and (max-wdith: 480px) { .number-box.number-box-horizontal p { text-align: center; } } .number-box.number-box-horizontal p span { display: block; margin-top: 5px; } @media screen and (max-width: 768px) { .number-box.number-box-horizontal { margin-top: 30px; margin-bottom: 30px; text-align: center; } } .date-box { padding: 7px 0; width: 60px; background: rgba(0, 0, 0, 0.6); color: white; font-weight: 300; } .date-box .date-box-month, .date-box .date-box-year { display: block; text-align: center; font-size: 11px; line-height: 1.3; text-transform: uppercase; } .date-box .date-box-day { display: block; text-align: center; font-size: 20px; line-height: 1.3; text-transform: uppercase; } /* * Buttons * * Alternative button styles. * Requires a base btn class. */ .btn-default.btn-striped, .btn-primary.btn-striped, .btn-success.btn-striped, .btn-info.btn-striped, .btn-warning.btn-striped, .btn-danger.btn-striped { color: #333333; background-color: white; border-right: 1px solid #cccccc; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left-width: 3px; } .btn-default.btn-striped:focus, .btn-primary.btn-striped:focus, .btn-success.btn-striped:focus, .btn-info.btn-striped:focus, .btn-warning.btn-striped:focus, .btn-danger.btn-striped:focus, .btn-default.btn-striped.focus, .btn-primary.btn-striped.focus, .btn-success.btn-striped.focus, .btn-info.btn-striped.focus, .btn-warning.btn-striped.focus, .btn-danger.btn-striped.focus { color: #333333; background-color: #e6e6e6; border-right: 1px solid #adadad; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .btn-default.btn-striped:hover, .btn-primary.btn-striped:hover, .btn-success.btn-striped:hover, .btn-info.btn-striped:hover, .btn-warning.btn-striped:hover, .btn-danger.btn-striped:hover { color: #333333; background-color: #e6e6e6; border-right: 1px solid #adadad; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .btn-default.btn-striped:active, .btn-primary.btn-striped:active, .btn-success.btn-striped:active, .btn-info.btn-striped:active, .btn-warning.btn-striped:active, .btn-danger.btn-striped:active, .btn-default.btn-striped.active, .btn-primary.btn-striped.active, .btn-success.btn-striped.active, .btn-info.btn-striped.active, .btn-warning.btn-striped.active, .btn-danger.btn-striped.active, .open > .dropdown-toggle.btn-default.btn-striped, .open > .dropdown-toggle.btn-primary.btn-striped, .open > .dropdown-toggle.btn-success.btn-striped, .open > .dropdown-toggle.btn-info.btn-striped, .open > .dropdown-toggle.btn-warning.btn-striped, .open > .dropdown-toggle.btn-danger.btn-striped { color: #333333; background-color: #e6e6e6; border-right: 1px solid #adadad; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .btn-default.btn-striped:active:hover, .btn-primary.btn-striped:active:hover, .btn-success.btn-striped:active:hover, .btn-info.btn-striped:active:hover, .btn-warning.btn-striped:active:hover, .btn-danger.btn-striped:active:hover, .btn-default.btn-striped.active:hover, .btn-primary.btn-striped.active:hover, .btn-success.btn-striped.active:hover, .btn-info.btn-striped.active:hover, .btn-warning.btn-striped.active:hover, .btn-danger.btn-striped.active:hover, .open > .dropdown-toggle.btn-default.btn-striped:hover, .open > .dropdown-toggle.btn-primary.btn-striped:hover, .open > .dropdown-toggle.btn-success.btn-striped:hover, .open > .dropdown-toggle.btn-info.btn-striped:hover, .open > .dropdown-toggle.btn-warning.btn-striped:hover, .open > .dropdown-toggle.btn-danger.btn-striped:hover, .btn-default.btn-striped:active:focus, .btn-primary.btn-striped:active:focus, .btn-success.btn-striped:active:focus, .btn-info.btn-striped:active:focus, .btn-warning.btn-striped:active:focus, .btn-danger.btn-striped:active:focus, .btn-default.btn-striped.active:focus, .btn-primary.btn-striped.active:focus, .btn-success.btn-striped.active:focus, .btn-info.btn-striped.active:focus, .btn-warning.btn-striped.active:focus, .btn-danger.btn-striped.active:focus, .open > .dropdown-toggle.btn-default.btn-striped:focus, .open > .dropdown-toggle.btn-primary.btn-striped:focus, .open > .dropdown-toggle.btn-success.btn-striped:focus, .open > .dropdown-toggle.btn-info.btn-striped:focus, .open > .dropdown-toggle.btn-warning.btn-striped:focus, .open > .dropdown-toggle.btn-danger.btn-striped:focus, .btn-default.btn-striped:active.focus, .btn-primary.btn-striped:active.focus, .btn-success.btn-striped:active.focus, .btn-info.btn-striped:active.focus, .btn-warning.btn-striped:active.focus, .btn-danger.btn-striped:active.focus, .btn-default.btn-striped.active.focus, .btn-primary.btn-striped.active.focus, .btn-success.btn-striped.active.focus, .btn-info.btn-striped.active.focus, .btn-warning.btn-striped.active.focus, .btn-danger.btn-striped.active.focus, .open > .dropdown-toggle.btn-default.btn-striped.focus, .open > .dropdown-toggle.btn-primary.btn-striped.focus, .open > .dropdown-toggle.btn-success.btn-striped.focus, .open > .dropdown-toggle.btn-info.btn-striped.focus, .open > .dropdown-toggle.btn-warning.btn-striped.focus, .open > .dropdown-toggle.btn-danger.btn-striped.focus { color: #333333; background-color: #e6e6e6; border-right: 1px solid #adadad; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .btn-default.btn-striped.disabled, .btn-primary.btn-striped.disabled, .btn-success.btn-striped.disabled, .btn-info.btn-striped.disabled, .btn-warning.btn-striped.disabled, .btn-danger.btn-striped.disabled, .btn-default.btn-striped[disabled], .btn-primary.btn-striped[disabled], .btn-success.btn-striped[disabled], .btn-info.btn-striped[disabled], .btn-warning.btn-striped[disabled], .btn-danger.btn-striped[disabled], fieldset[disabled] .btn-default.btn-striped, fieldset[disabled] .btn-primary.btn-striped, fieldset[disabled] .btn-success.btn-striped, fieldset[disabled] .btn-info.btn-striped, fieldset[disabled] .btn-warning.btn-striped, fieldset[disabled] .btn-danger.btn-striped, .btn-default.btn-striped.disabled:hover, .btn-primary.btn-striped.disabled:hover, .btn-success.btn-striped.disabled:hover, .btn-info.btn-striped.disabled:hover, .btn-warning.btn-striped.disabled:hover, .btn-danger.btn-striped.disabled:hover, .btn-default.btn-striped[disabled]:hover, .btn-primary.btn-striped[disabled]:hover, .btn-success.btn-striped[disabled]:hover, .btn-info.btn-striped[disabled]:hover, .btn-warning.btn-striped[disabled]:hover, .btn-danger.btn-striped[disabled]:hover, fieldset[disabled] .btn-default.btn-striped:hover, fieldset[disabled] .btn-primary.btn-striped:hover, fieldset[disabled] .btn-success.btn-striped:hover, fieldset[disabled] .btn-info.btn-striped:hover, fieldset[disabled] .btn-warning.btn-striped:hover, fieldset[disabled] .btn-danger.btn-striped:hover, .btn-default.btn-striped.disabled:focus, .btn-primary.btn-striped.disabled:focus, .btn-success.btn-striped.disabled:focus, .btn-info.btn-striped.disabled:focus, .btn-warning.btn-striped.disabled:focus, .btn-danger.btn-striped.disabled:focus, .btn-default.btn-striped[disabled]:focus, .btn-primary.btn-striped[disabled]:focus, .btn-success.btn-striped[disabled]:focus, .btn-info.btn-striped[disabled]:focus, .btn-warning.btn-striped[disabled]:focus, .btn-danger.btn-striped[disabled]:focus, fieldset[disabled] .btn-default.btn-striped:focus, fieldset[disabled] .btn-primary.btn-striped:focus, fieldset[disabled] .btn-success.btn-striped:focus, fieldset[disabled] .btn-info.btn-striped:focus, fieldset[disabled] .btn-warning.btn-striped:focus, fieldset[disabled] .btn-danger.btn-striped:focus, .btn-default.btn-striped.disabled.focus, .btn-primary.btn-striped.disabled.focus, .btn-success.btn-striped.disabled.focus, .btn-info.btn-striped.disabled.focus, .btn-warning.btn-striped.disabled.focus, .btn-danger.btn-striped.disabled.focus, .btn-default.btn-striped[disabled].focus, .btn-primary.btn-striped[disabled].focus, .btn-success.btn-striped[disabled].focus, .btn-info.btn-striped[disabled].focus, .btn-warning.btn-striped[disabled].focus, .btn-danger.btn-striped[disabled].focus, fieldset[disabled] .btn-default.btn-striped.focus, fieldset[disabled] .btn-primary.btn-striped.focus, fieldset[disabled] .btn-success.btn-striped.focus, fieldset[disabled] .btn-info.btn-striped.focus, fieldset[disabled] .btn-warning.btn-striped.focus, fieldset[disabled] .btn-danger.btn-striped.focus, .btn-default.btn-striped.disabled:active, .btn-primary.btn-striped.disabled:active, .btn-success.btn-striped.disabled:active, .btn-info.btn-striped.disabled:active, .btn-warning.btn-striped.disabled:active, .btn-danger.btn-striped.disabled:active, .btn-default.btn-striped[disabled]:active, .btn-primary.btn-striped[disabled]:active, .btn-success.btn-striped[disabled]:active, .btn-info.btn-striped[disabled]:active, .btn-warning.btn-striped[disabled]:active, .btn-danger.btn-striped[disabled]:active, fieldset[disabled] .btn-default.btn-striped:active, fieldset[disabled] .btn-primary.btn-striped:active, fieldset[disabled] .btn-success.btn-striped:active, fieldset[disabled] .btn-info.btn-striped:active, fieldset[disabled] .btn-warning.btn-striped:active, fieldset[disabled] .btn-danger.btn-striped:active, .btn-default.btn-striped.disabled.active, .btn-primary.btn-striped.disabled.active, .btn-success.btn-striped.disabled.active, .btn-info.btn-striped.disabled.active, .btn-warning.btn-striped.disabled.active, .btn-danger.btn-striped.disabled.active, .btn-default.btn-striped[disabled].active, .btn-primary.btn-striped[disabled].active, .btn-success.btn-striped[disabled].active, .btn-info.btn-striped[disabled].active, .btn-warning.btn-striped[disabled].active, .btn-danger.btn-striped[disabled].active, fieldset[disabled] .btn-default.btn-striped.active, fieldset[disabled] .btn-primary.btn-striped.active, fieldset[disabled] .btn-success.btn-striped.active, fieldset[disabled] .btn-info.btn-striped.active, fieldset[disabled] .btn-warning.btn-striped.active, fieldset[disabled] .btn-danger.btn-striped.active { color: #333333; background-color: white; border-right: 1px solid #cccccc; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .btn-default.btn-outline, .btn-primary.btn-outline, .btn-success.btn-outline, .btn-info.btn-outline, .btn-warning.btn-outline, .btn-danger.btn-outline { color: #333333; background-color: white; } .btn-default.btn-outline:focus, .btn-primary.btn-outline:focus, .btn-success.btn-outline:focus, .btn-info.btn-outline:focus, .btn-warning.btn-outline:focus, .btn-danger.btn-outline:focus, .btn-default.btn-outline.focus, .btn-primary.btn-outline.focus, .btn-success.btn-outline.focus, .btn-info.btn-outline.focus, .btn-warning.btn-outline.focus, .btn-danger.btn-outline.focus { color: #333333; background-color: #e6e6e6; } .btn-default.btn-outline:hover, .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #333333; background-color: #e6e6e6; } .btn-default.btn-outline:active, .btn-primary.btn-outline:active, .btn-success.btn-outline:active, .btn-info.btn-outline:active, .btn-warning.btn-outline:active, .btn-danger.btn-outline:active, .btn-default.btn-outline.active, .btn-primary.btn-outline.active, .btn-success.btn-outline.active, .btn-info.btn-outline.active, .btn-warning.btn-outline.active, .btn-danger.btn-outline.active, .open > .dropdown-toggle.btn-default.btn-outline, .open > .dropdown-toggle.btn-primary.btn-outline, .open > .dropdown-toggle.btn-success.btn-outline, .open > .dropdown-toggle.btn-info.btn-outline, .open > .dropdown-toggle.btn-warning.btn-outline, .open > .dropdown-toggle.btn-danger.btn-outline { color: #333333; background-color: #e6e6e6; } .btn-default.btn-outline:active:hover, .btn-primary.btn-outline:active:hover, .btn-success.btn-outline:active:hover, .btn-info.btn-outline:active:hover, .btn-warning.btn-outline:active:hover, .btn-danger.btn-outline:active:hover, .btn-default.btn-outline.active:hover, .btn-primary.btn-outline.active:hover, .btn-success.btn-outline.active:hover, .btn-info.btn-outline.active:hover, .btn-warning.btn-outline.active:hover, .btn-danger.btn-outline.active:hover, .open > .dropdown-toggle.btn-default.btn-outline:hover, .open > .dropdown-toggle.btn-primary.btn-outline:hover, .open > .dropdown-toggle.btn-success.btn-outline:hover, .open > .dropdown-toggle.btn-info.btn-outline:hover, .open > .dropdown-toggle.btn-warning.btn-outline:hover, .open > .dropdown-toggle.btn-danger.btn-outline:hover, .btn-default.btn-outline:active:focus, .btn-primary.btn-outline:active:focus, .btn-success.btn-outline:active:focus, .btn-info.btn-outline:active:focus, .btn-warning.btn-outline:active:focus, .btn-danger.btn-outline:active:focus, .btn-default.btn-outline.active:focus, .btn-primary.btn-outline.active:focus, .btn-success.btn-outline.active:focus, .btn-info.btn-outline.active:focus, .btn-warning.btn-outline.active:focus, .btn-danger.btn-outline.active:focus, .open > .dropdown-toggle.btn-default.btn-outline:focus, .open > .dropdown-toggle.btn-primary.btn-outline:focus, .open > .dropdown-toggle.btn-success.btn-outline:focus, .open > .dropdown-toggle.btn-info.btn-outline:focus, .open > .dropdown-toggle.btn-warning.btn-outline:focus, .open > .dropdown-toggle.btn-danger.btn-outline:focus, .btn-default.btn-outline:active.focus, .btn-primary.btn-outline:active.focus, .btn-success.btn-outline:active.focus, .btn-info.btn-outline:active.focus, .btn-warning.btn-outline:active.focus, .btn-danger.btn-outline:active.focus, .btn-default.btn-outline.active.focus, .btn-primary.btn-outline.active.focus, .btn-success.btn-outline.active.focus, .btn-info.btn-outline.active.focus, .btn-warning.btn-outline.active.focus, .btn-danger.btn-outline.active.focus, .open > .dropdown-toggle.btn-default.btn-outline.focus, .open > .dropdown-toggle.btn-primary.btn-outline.focus, .open > .dropdown-toggle.btn-success.btn-outline.focus, .open > .dropdown-toggle.btn-info.btn-outline.focus, .open > .dropdown-toggle.btn-warning.btn-outline.focus, .open > .dropdown-toggle.btn-danger.btn-outline.focus { color: #333333; background-color: #e6e6e6; } .btn-default.btn-outline.disabled, .btn-primary.btn-outline.disabled, .btn-success.btn-outline.disabled, .btn-info.btn-outline.disabled, .btn-warning.btn-outline.disabled, .btn-danger.btn-outline.disabled, .btn-default.btn-outline[disabled], .btn-primary.btn-outline[disabled], .btn-success.btn-outline[disabled], .btn-info.btn-outline[disabled], .btn-warning.btn-outline[disabled], .btn-danger.btn-outline[disabled], fieldset[disabled] .btn-default.btn-outline, fieldset[disabled] .btn-primary.btn-outline, fieldset[disabled] .btn-success.btn-outline, fieldset[disabled] .btn-info.btn-outline, fieldset[disabled] .btn-warning.btn-outline, fieldset[disabled] .btn-danger.btn-outline, .btn-default.btn-outline.disabled:hover, .btn-primary.btn-outline.disabled:hover, .btn-success.btn-outline.disabled:hover, .btn-info.btn-outline.disabled:hover, .btn-warning.btn-outline.disabled:hover, .btn-danger.btn-outline.disabled:hover, .btn-default.btn-outline[disabled]:hover, .btn-primary.btn-outline[disabled]:hover, .btn-success.btn-outline[disabled]:hover, .btn-info.btn-outline[disabled]:hover, .btn-warning.btn-outline[disabled]:hover, .btn-danger.btn-outline[disabled]:hover, fieldset[disabled] .btn-default.btn-outline:hover, fieldset[disabled] .btn-primary.btn-outline:hover, fieldset[disabled] .btn-success.btn-outline:hover, fieldset[disabled] .btn-info.btn-outline:hover, fieldset[disabled] .btn-warning.btn-outline:hover, fieldset[disabled] .btn-danger.btn-outline:hover, .btn-default.btn-outline.disabled:focus, .btn-primary.btn-outline.disabled:focus, .btn-success.btn-outline.disabled:focus, .btn-info.btn-outline.disabled:focus, .btn-warning.btn-outline.disabled:focus, .btn-danger.btn-outline.disabled:focus, .btn-default.btn-outline[disabled]:focus, .btn-primary.btn-outline[disabled]:focus, .btn-success.btn-outline[disabled]:focus, .btn-info.btn-outline[disabled]:focus, .btn-warning.btn-outline[disabled]:focus, .btn-danger.btn-outline[disabled]:focus, fieldset[disabled] .btn-default.btn-outline:focus, fieldset[disabled] .btn-primary.btn-outline:focus, fieldset[disabled] .btn-success.btn-outline:focus, fieldset[disabled] .btn-info.btn-outline:focus, fieldset[disabled] .btn-warning.btn-outline:focus, fieldset[disabled] .btn-danger.btn-outline:focus, .btn-default.btn-outline.disabled.focus, .btn-primary.btn-outline.disabled.focus, .btn-success.btn-outline.disabled.focus, .btn-info.btn-outline.disabled.focus, .btn-warning.btn-outline.disabled.focus, .btn-danger.btn-outline.disabled.focus, .btn-default.btn-outline[disabled].focus, .btn-primary.btn-outline[disabled].focus, .btn-success.btn-outline[disabled].focus, .btn-info.btn-outline[disabled].focus, .btn-warning.btn-outline[disabled].focus, .btn-danger.btn-outline[disabled].focus, fieldset[disabled] .btn-default.btn-outline.focus, fieldset[disabled] .btn-primary.btn-outline.focus, fieldset[disabled] .btn-success.btn-outline.focus, fieldset[disabled] .btn-info.btn-outline.focus, fieldset[disabled] .btn-warning.btn-outline.focus, fieldset[disabled] .btn-danger.btn-outline.focus, .btn-default.btn-outline.disabled:active, .btn-primary.btn-outline.disabled:active, .btn-success.btn-outline.disabled:active, .btn-info.btn-outline.disabled:active, .btn-warning.btn-outline.disabled:active, .btn-danger.btn-outline.disabled:active, .btn-default.btn-outline[disabled]:active, .btn-primary.btn-outline[disabled]:active, .btn-success.btn-outline[disabled]:active, .btn-info.btn-outline[disabled]:active, .btn-warning.btn-outline[disabled]:active, .btn-danger.btn-outline[disabled]:active, fieldset[disabled] .btn-default.btn-outline:active, fieldset[disabled] .btn-primary.btn-outline:active, fieldset[disabled] .btn-success.btn-outline:active, fieldset[disabled] .btn-info.btn-outline:active, fieldset[disabled] .btn-warning.btn-outline:active, fieldset[disabled] .btn-danger.btn-outline:active, .btn-default.btn-outline.disabled.active, .btn-primary.btn-outline.disabled.active, .btn-success.btn-outline.disabled.active, .btn-info.btn-outline.disabled.active, .btn-warning.btn-outline.disabled.active, .btn-danger.btn-outline.disabled.active, .btn-default.btn-outline[disabled].active, .btn-primary.btn-outline[disabled].active, .btn-success.btn-outline[disabled].active, .btn-info.btn-outline[disabled].active, .btn-warning.btn-outline[disabled].active, .btn-danger.btn-outline[disabled].active, fieldset[disabled] .btn-default.btn-outline.active, fieldset[disabled] .btn-primary.btn-outline.active, fieldset[disabled] .btn-success.btn-outline.active, fieldset[disabled] .btn-info.btn-outline.active, fieldset[disabled] .btn-warning.btn-outline.active, fieldset[disabled] .btn-danger.btn-outline.active { color: #333333; background-color: white; } /* * Alerts * * An alternative alert format, with either a left or right border. * Requires a base alert class. */ .alert.alert-striped-left { border-left: 5px solid; } .alert.alert-striped-right { border-right: 5px solid; } /* * Callouts * * Not quite alerts, but custom and helpful notes. * Requires a base and modifier class. */ .callout { padding: 20px; margin: 20px 0; border: 1px solid #eeeeee; border-radius: 0; } .callout h4 { margin-top: 0; margin-bottom: 5px; } .callout p:last-child { margin-bottom: 0; } .callout + .callout { margin-top: -5px; } .callout-primary { border-left-color: #286090; border-left-width: 5px; } .callout-primary.callout-striped-right { border-left-color: #eeeeee; border-left-width: 1px; border-right-color: #286090; border-right-width: 5px; } .callout-primary h4 { color: #286090; } .callout-success { border-left-color: #449d44; border-left-width: 5px; } .callout-success.callout-striped-right { border-left-color: #eeeeee; border-left-width: 1px; border-right-color: #449d44; border-right-width: 5px; } .callout-success h4 { color: #449d44; } .callout-info { border-left-color: #31b0d5; border-left-width: 5px; } .callout-info.callout-striped-right { border-left-color: #eeeeee; border-left-width: 1px; border-right-color: #31b0d5; border-right-width: 5px; } .callout-info h4 { color: #31b0d5; } .callout-warning { border-left-color: #ec971f; border-left-width: 5px; } .callout-warning.callout-striped-right { border-left-color: #eeeeee; border-left-width: 1px; border-right-color: #ec971f; border-right-width: 5px; } .callout-warning h4 { color: #ec971f; } .callout-danger { border-left-color: #c9302c; border-left-width: 5px; } .callout-danger.callout-striped-right { border-left-color: #eeeeee; border-left-width: 1px; border-right-color: #c9302c; border-right-width: 5px; } .callout-danger h4 { color: #c9302c; } /* * Social icons * * Social icons turns list items into inline-block with custom hover effects * and backgrounds. */ .list-social-icons { padding-left: 0; list-style: none; } .list-social-icons > li { display: inline-block; padding-left: 0; padding-right: 0; margin-left: 3px; margin-right: 3px; text-align: center; opacity: 0.4; background: #222222; } .list-social-icons > li:first-child { margin-left: 0; } .list-social-icons > li:last-child { margin-right: 0; } .list-social-icons > li:hover { opacity: 1; -moz-transition: 0.1s; -o-transition: 0.1s; -webkit-transition: 0.1s; transition: 0.1s; } .list-social-icons > li a { color: white; display: block; width: 40px; height: 40px; font-size: 32px; line-height: 40px; } .list-social-icons > li a:after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } .list-social-icons > li a:hover { text-decoration: none; } .list-social-icons > li a.rss { background: #f26522; } .list-social-icons > li a.rss:after { content: "\f09e"; } .list-social-icons > li a.facebook { background: #3b5998; } .list-social-icons > li a.facebook:after { content: "\f09a"; } .list-social-icons > li a.twitter { background: #55acee; } .list-social-icons > li a.twitter:after { content: "\f099"; } .list-social-icons > li a.plus { background: #dd4b39; } .list-social-icons > li a.plus:after { content: "\f0d5"; } .list-social-icons > li a.vk { background: #567ca4; } .list-social-icons > li a.vk:after { content: "\f189"; } .list-social-icons > li a.pinterest { background: #bd081c; } .list-social-icons > li a.pinterest:after { content: "\f0d2"; } .list-social-icons > li a.vimeo { background: #1ab7ea; } .list-social-icons > li a.vimeo:after { content: "\f194"; } .list-social-icons > li a.github { background: #657e8c; } .list-social-icons > li a.github:after { content: "\f113"; } .list-social-icons > li a.linkedin { background: #0077b5; } .list-social-icons > li a.linkedin:after { content: "\f0e1"; } .list-social-icons > li a.dropbox { background: #007ee5; } .list-social-icons > li a.dropbox:after { content: "\f16b"; } .list-social-icons-sm > li a { width: 20px; height: 20px; font-size: 16px; line-height: 20px; } .list-social-icons-lg > li a { width: 80px; height: 80px; font-size: 64px; line-height: 80px; } .list-social-icons-xl > li a { width: 120px; height: 120px; font-size: 96px; line-height: 120px; } .list-social-icons-bright > li { opacity: 1; } .list-social-icons-dim > li { opacity: 0.4; } .list-social-icons-dim > li:hover { opacity: 0.4; } /* * Pricing plans * * Responsive pricing plans, similar in structure to panels. */ .pricing-plans, .pricing-plan-single { text-align: center; } .pricing-plan-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid #cccccc; text-align: center; } .pricing-plan-body ul { padding-left: 0; list-style: none; margin-bottom: 30px; margin-top: 10px; text-align: left; } .pricing-plan-body ul > li { margin-bottom: 10px; } @media screen and (max-width: 480px) { .pricing-plan-body ul { text-align: center; } } .pricing-plans .pricing-plan-heading { margin-bottom: 50px; border-bottom: 1px solid #cccccc; } .pricing-plans .pricing-plan { padding: 50px 15px; margin: 0 10px 30px 10px; border: 1px solid #cccccc; border-radius: 0; } .pricing-plans .pricing-plan-price { display: block; line-height: 2.3; font-size: 42px; font-weight: 700; } .pricing-plans .pricing-plan-price small { font-size: 20px; font-weight: normal; } .pricing-plans .pricing-plan-price small:before { content: "/\00a0"; padding: 0; color: #cccccc; } .pricing-plans .pricing-plan-price sup { font-size: 20px; } .pricing-plans .pricing-plan-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .pricing-plans .pricing-plan-title .icon { display: block; width: 100px; height: 100px; margin: 0 auto; margin-bottom: 15px; font-size: 48px; background: #cccccc; } .pricing-plans .pricing-plan-title .icon:before { line-height: 100px; } @media screen and (max-width: 992px) { .pricing-plans .pricing-plan { margin-left: 0; margin-right: 0; padding: 50px 5px 30px 5px; } } @media screen and (max-width: 768px) { .pricing-plans .pricing-plan { top: -2em; right: 0; } } .pricing-plan-single .pricing-plan-heading { margin-bottom: 0; border-bottom: 1px solid #cccccc; } .pricing-plan-single .pricing-plan { width: 80%; margin: 40px auto; padding: 30px; border-bottom: 1px solid #cccccc; } .pricing-plan-single .pricing-plan-price { display: block; line-height: 2.3; font-size: 84px; font-weight: 700; } .pricing-plan-single .pricing-plan-price small { font-size: 40px; font-weight: normal; } .pricing-plan-single .pricing-plan-price small:before { content: "/\00a0"; padding: 0; color: #cccccc; } .pricing-plan-single .pricing-plan-price sup { font-size: 40px; } @media screen and (max-width: 768px) { .pricing-plan-single .pricing-plan { width: 100%; } } /* * Boxed content * * An alternative formatting for blockquotes to be used as testimonials. */ blockquote.testimonial footer { padding-top: 20px; } blockquote.testimonial footer:before { content: none; } blockquote.testimonial footer cite { font-weight: 700; } /* * Tabs * * An alternative formatting for tabs that provides a cleaner, more modern style. */ .nav-tabs-pivot > li > a, .nav-justified.nav-tabs-pivot > li > a { color: #707070; } .nav-tabs-pivot > li > a:hover, .nav-justified.nav-tabs-pivot > li > a:hover, .nav-tabs-pivot > li > a:focus, .nav-justified.nav-tabs-pivot > li > a:focus { color: #4a4a4a; background-color: transparent; border-color: transparent; border-bottom-color: #406da4; } .nav-tabs-pivot > li.active > a, .nav-justified.nav-tabs-pivot > li.active > a { border-color: transparent; border-bottom-color: #406da4; } .nav-tabs-pivot > li.active > a:hover, .nav-justified.nav-tabs-pivot > li.active > a:hover, .nav-tabs-pivot > li.active > a:focus, .nav-justified.nav-tabs-pivot > li.active > a:focus { color: #4a4a4a; background-color: transparent; border-color: transparent; border-bottom-color: #406da4; } /* * Form inputs * * Additional formatting for form inputs, including a switch (toggle) style for checkboxes and radio buttons. * Requires a base and modifier class. */ .switch-input { display: block; position: relative; line-height: 1; margin-bottom: 4px; padding: 10px 60px 0 0; cursor: pointer; } .switch-input input { position: absolute; left: -9999px; } .switch-input input:checked + i { border-color: #cccccc; } .switch-input input:checked + i:before { right: 33px; } .switch-input input:checked + i:after { content: attr(data-swon-text); text-align: right; color: #777777; } .switch-input.disabled i { cursor: not-allowed; } .switch-input.disabled i:before { background-color: #eeeeee; } .switch-input i { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; content: ''; display: block; position: absolute; top: 6px; right: 0; width: 50px; height: 20px; border: 1px solid #cccccc; background: white; font-style: normal; } .switch-input i:before { border-radius: 0; -moz-transition-property: right; -o-transition-property: right; -webkit-transition-property: right; transition-property: right; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; content: ''; display: block; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; background-color: #406da4; } .switch-input i:after { content: attr(data-swoff-text); position: absolute; top: 2px; right: 8px; left: 8px; font-weight: 700; font-size: 10px; line-height: 15px; color: #aaaaaa; } .switch { text-align: center; } /* * Lists * * Customized to display numeric (ordered) lists. */ .list-numeric { counter-reset: li; padding-left: 0; margin-left: 14px; } .list-numeric > li { padding: 4px 12px; position: relative; list-style: none; } .list-numeric > li:before { content: counter(li); counter-increment: li; font-size: 14px; color: white; background-color: #337ab7; width: 20px; height: 20px; border-radius: 0; text-align: center; vertical-align: middle; position: absolute; left: -14px; } .list-sequence { margin: 0 0 0 4px; padding: 0; list-style-type: none; counter-reset: li; } .list-sequence > li { border-left: 1px #777777 solid; position: relative; padding: 0 14px; margin: 14px; vertical-align: top; } .list-sequence > li:before { position: absolute; content: counter(li); counter-increment: li; font-size: 32px; color: #777777; left: 0; top: 0; margin-left: -32px; }