*
* @class .a-cursor
*/
.a-cursor {
cursor: pointer;
}
a,
.a {
cursor: pointer;
}
/**
* Use `.alert-sm` on an `.alert` to make it smaller.
*
* __HTML Example:__
*
*
*
* OPRIS is on fire.
*
*
* __JavaScript Example:__
*
* addAlert({
* text: 'OPRIS is on fire.',
* type: 'danger',
* element: '#alerts',
* 'class': 'alert-sm'
* });
*
* @class .alert-sm
*/
.alert-sm {
margin-bottom: 12px;
padding: 6px 12px;
}
/**
* Use `.b` to make the text in an element bold.
*
* __Example:__
*
*
* Location
*
*
* @class .b
*/
.b {
font-weight: bold;
}
/**
* Use `.block` to display an element as a block element
* (as if it were a `
*
* @class .block
*/
.block {
display: block;
}
/**
* Use `.block-xs` to display an element as a block element
* (as if it were a `
` or `
`) on extra small screens.
*
* __Example:__
*
*
* This looks like a div on extra small screens,
* and it looks like an li on small, medium, and large screens.
*
*
* @class .block-xs
* @extends .block
*/
@media (max-width: 767px) {
.block-xs {
display: block;
}
}
/**
* Use `.block-sm` to display an element as a block element
* (as if it were a `
` or `
`) on small, medium, and large screens.
*
* __Example:__
*
*
* This looks like an li on extra small screens,
* and it looks like a div on small, medium, and large screens.
*
*
* @class .block-sm
* @extends .block
*/
@media (min-width: 768px) {
.block-sm {
display: block;
}
}
/**
* Use `.block-md` to display an element as a block element
* (as if it were a `
` or `
`) on medium and large screens.
*
* __Example:__
*
*
* This looks like an li on extra small and small screens,
* and it looks like a div on medium and large screens.
*
*
* @class .block-md
* @extends .block
*/
@media (min-width: 924px) {
.block-md {
display: block;
}
}
/**
* Use `.block-lg` to display an element as a block element
* (as if it were a `
` or `
`) large screens.
*
* __Example:__
*
*
* This looks like an li on extra small, small, and medium screens,
* and it looks like a div on large screens.
*
*
* @class .block-lg
* @extends .block
*/
@media (min-width: 1080px) {
.block-lg {
display: block;
}
}
/**
* Use `.inline` to display an element as an inline element
* (as if it were a ``).
*
* __Example:__
*
*
* This looks like a span.
*
*
* @class .inline
*/
.inline {
display: inline;
}
/**
* Use `.inline-xs` to display an element as an inline element
* (as if it were a ``) on extra small screens.
*
* __Example:__
*
*
* This looks like a span on extra small screens,
* and it looks like an div on small, medium, and large screens.
*
*
* @class .inline-xs
* @extends .inline
*/
@media (max-width: 767px) {
.inline-xs {
display: inline;
}
}
/**
* Use `.inline-sm` to display an element as an inline element
* (as if it were a ``) on small, medium, and large screens.
*
* __Example:__
*
*
* This looks like a div on extra small screens,
* and it looks like a span on small, medium, and large screens.
*
*
* @class .inline-sm
* @extends .inline
*/
@media (min-width: 768px) {
.inline-sm {
display: inline;
}
}
/**
* Use `.inline-md` to display an element as an inline element
* (as if it were a ``) on medium and large screens.
*
* __Example:__
*
*
* This looks like a div on extra small and small screens,
* and it looks like a span on medium and large screens.
*
*
* @class .inline-md
* @extends .inline
*/
@media (min-width: 924px) {
.inline-md {
display: inline;
}
}
/**
* Use `.inline-lg` to display an element as an inline element
* (as if it were a ``) large screens.
*
* __Example:__
*
*
* This looks like a div on extra small, small, and medium screens,
* and it looks like a span on large screens.
*
*
* @class .inline-lg
* @extends .inline
*/
@media (min-width: 1080px) {
.inline-lg {
display: inline;
}
}
/**
* Use `.inline-block` to display an element as an inline block element.
*
* __Example 1:__
*
*
* Links stay together
*
* |
*
* and lines break between
*
*
* __Example 2:__
*
*
* This displays as an inline block.
*
*
* @class .inline-block
*/
.inline-block {
display: inline-block;
}
/**
* Use `.inline-block-xs` to display an element as an inline block element
* on extra small screens.
*
* __Example:__
*
*
* This displays as an inline block on extra small screens,
* and it looks like an li on small, medium, and large screens.
*
*
* @class .inline-block-xs
* @extends .inline-block
*/
@media (max-width: 767px) {
.inline-block-xs {
display: inline-block;
}
}
/**
* Use `.inline-block-sm` to display an element as an inline block element
* on small, medium, and large screens.
*
* __Example:__
*
*
* This looks like an li on extra small screens,
* and it displays as an inline block on small, medium, and large screens.
*
*
* @class .inline-block-sm
* @extends .inline-block
*/
@media (min-width: 768px) {
.inline-block-sm {
display: inline-block;
}
}
/**
* Use `.inline-block-md` to display an element as an inline block element
* on medium and large screens.
*
* __Example:__
*
*
* This looks like an li on extra small and small screens,
* and it displays as an inline block on medium and large screens.
*
*
* @class .inline-block-md
* @extends .inline-block
*/
@media (min-width: 924px) {
.inline-block-md {
display: inline-block;
}
}
/**
* Use `.inline-block-lg` to display an element as an inline block element
* large screens.
*
* __Example:__
*
*
* This looks like an li on extra small, small, and medium screens,
* and it displays as an inline block on large screens.
*
*
* @class .inline-block-lg
* @extends .inline-block
*/
@media (min-width: 1080px) {
.inline-block-lg {
display: inline-block;
}
}
/**
* Use `.break-word` to break lines, where necessary, in the middle of words.
*
* __Example:__
*
*
* supercalifragilisticexpialidocious
*
*
* @class .break-word
*/
.break-word {
word-wrap: break-word;
}
/**
* Use one of the following classes to change the width
* of a label (`
*
* @class .first-child
*/
.first-child {
margin-top: 0;
}
/**
* Use `.last-child` to remove the whitespace below an element.
*
* __Example:__
*
*
*
* First Paragraph
*
*
* Last Paragraph
*
*
*
* @class .last-child
*/
.last-child,
.table-scroll-x.last-child {
margin-bottom: 0;
}
/**
* Use `.last-child-sm` to remove the whitespace below an element
* on small, medium, and large screens.
*
* __Example:__
*
*
*
* @class .last-child-sm
* @extends .last-child
*/
@media (min-width: 768px) {
.last-child-sm {
margin-bottom: 0;
}
}
/**
* Use `.strip-first-child-margin` to remove the whitespace above
* the first child in an element.
*
* __Example:__
*
*
* #pageContent.page_content#
*
*
* @class .strip-first-child-margin
* @extends .first-child
*/
.strip-first-child-margin > :first-child {
margin-top: 0;
}
/**
* Use `.strip-last-child-margin` to remove the whitespace below
* the last child in an element.
*
* __Example:__
*
*
* #pageContent.page_content#
*
*
* @class .strip-last-child-margin
* @extends .last-child
*/
.strip-last-child-margin > :last-child {
margin-bottom: 0;
}
/**
* Use `.form-group-last` to put the margin above a `.form-group`, instead of below it.
*
* __Example:__
*
*
*
*
*
* @class .form-group-last
*/
.form-group-last {
margin-bottom: 0;
margin-top: 15px;
}
/**
* Use `.margin-on-top` to put the margin above an element, instead of below it.
*
* On a `.form-group`, use `.form-group-last` instead.
*
* __HTML Example:__
*
*
* ...
*
*
* __JavaScript Example:__
*
* addAlert({
* text: 'Coupon Applied',
* type: 'success',
* element: '#couponValid',
* 'class': 'alert-sm margin-on-top',
* seconds: 2
* });
*
* @class .margin-on-top
*/
.margin-on-top {
margin-bottom: 0;
margin-top: 24px;
}
p.margin-on-top,
ul.margin-on-top,
.margin-on-top.alert-sm {
margin-top: 12px;
}
.margin-on-top.table-scroll-x {
margin-bottom: 0;
}
.input-group .btn {
height: 38px;
}
.input-group-lg .btn {
height: 52px;
}
.input-group-sm .btn {
height: 34px;
}
.ng-cloak {
display: none !important;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.x-ng-cloak {
display: none !important;
}
.panel-collapsed > :not(.panel-heading) {
display: none;
}
.panel-collapse-caret {
margin-right: 0.4em;
}
@media print {
.panel-print-uncollapsed > .panel-heading .panel-collapse-caret {
display: none;
}
.panel-print-uncollapsed > :not(.panel-heading) {
display: block;
}
.panel-print-uncollapsed > table:not(.panel-heading) {
display: table;
}
}
/**
* Use `.pull-left-xs` to float an element to the left on extra small screens.
*
* @class .pull-left-xs
*/
@media (max-width: 767px) {
.pull-left-xs {
float: left;
}
}
/**
* Use `.pull-left-sm` to float an element to the left on small, medium, and large screens.
*
* @class .pull-left-sm
*/
@media (min-width: 768px) {
.pull-left-sm {
float: left;
}
}
/**
* Use `.pull-left-md` to float an element to the left on medium and large screens.
*
* @class .pull-left-md
*/
@media (min-width: 924px) {
.pull-left-md {
float: left;
}
}
/**
* Use `.pull-left-lg` to float an element to the left on large screens.
*
* @class .pull-left-lg
*/
@media (min-width: 1080px) {
.pull-left-lg {
float: left;
}
}
/**
* Use `.pull-right-xs` to float an element to the right on extra small screens.
*
* @class .pull-right-xs
*/
@media (max-width: 767px) {
.pull-right-xs {
float: right;
}
}
/**
* Use `.pull-right-sm` to float an element to the right on small, medium, and large screens.
*
* @class .pull-right-sm
*/
@media (min-width: 768px) {
.pull-right-sm {
float: right;
}
}
/**
* Use `.pull-right-md` to float an element to the right on medium and large screens.
*
* @class .pull-right-md
*/
@media (min-width: 924px) {
.pull-right-md {
float: right;
}
}
/**
* Use `.pull-right-lg` to float an element to the right on large screens.
*
* @class .pull-right-lg
*/
@media (min-width: 1080px) {
.pull-right-lg {
float: right;
}
}
/**
* Use `.red-star` to make a red asterisk, indicating something is required.
*
* __Example:__
*
*
` to enable horizontal scrolling
* when the content width exceeds the screen width.
*
* For tables, use `class="table-responsive table-responsive-wrap"`.
*
* __Example:__
*
*
*
*
*
* @class .scroll-x
*/
.scroll-x {
overflow-x: auto;
overflow-y: hidden;
}
@media print {
.scroll-x {
overflow-x: visible;
}
}
.table-scroll-x {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 24px;
}
@media print {
.table-scroll-x {
overflow-x: visible;
}
}
.table-scroll-x > .table {
margin-bottom: 0;
}
/**
* Use `.show-newlines` to show whitespace (including newlines) in an element.
*
* Avoid putting whitespace between the content and the enclosing tags.
*
* __Example:__
*
*
*
* @class .show-newlines
*/
.show-newlines {
white-space: pre-wrap;
}
/**
* Use `.space-left` to add a space to the left of an element.
*
* For more spaces, use `.space-left-2` or `.space-left-4`.
*
* __Example:__
*
*
* Add Item
*
*
* @class .space-left
*/
.space-left {
margin-left: 0.2em;
}
.space-left-2 {
margin-left: 0.4em;
}
.space-left-4 {
margin-left: 0.8em;
}
/**
* Use `.space-right` to add a space to the right of an element.
*
* For more spaces, use `.space-right-2` or `.space-right-4`.
*
* __Example:__
*
*
* Add Item
*
*
* @class .space-right
*/
.space-right {
margin-right: 0.2em;
}
.space-right-2 {
margin-right: 0.4em;
}
.space-right-4 {
margin-right: 0.8em;
}
/**
* Use `.table-responsive-wrap` to allow newlines to wrap inside a `.table-responsive`.
*
* __Example:__
*
*
*
* ...
*
*
*
* @class .table-responsive-wrap
*/
@media screen and (max-width: 767px) {
.table-responsive-wrap > .table > thead > tr > th,
.table-responsive-wrap > .table > tbody > tr > th,
.table-responsive-wrap > .table > tfoot > tr > th,
.table-responsive-wrap > .table > thead > tr > td,
.table-responsive-wrap > .table > tbody > tr > td,
.table-responsive-wrap > .table > tfoot > tr > td {
white-space: normal;
}
}
/**
* Use `.text-decoration-none` to prevent underlines on `:hover`.
*
* __Example:__
*
*
* Park Store
*
*
* @class .text-decoration-none
*/
.text-decoration-none,
.text-decoration-none:hover,
.text-decoration-none:focus {
text-decoration: none;
}
@media (min-width: 768px) {
/**
* Use `.text-left-sm` to left align text on small, medium, and large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-left-sm
*/
.text-left-sm {
text-align: left;
}
/**
* Use `.text-center-sm` to center align text on small, medium, and large screens.
*
* __Example:__
*
*
* ...
*
*
* @class .text-center-sm
*/
.text-center-sm {
text-align: center;
}
/**
* Use `.text-right-sm` to right align text on small, medium, and large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-right-sm
*/
.text-right-sm {
text-align: right;
}
}
@media (min-width: 924px) {
/**
* Use `.text-left-md` to left align text on medium and large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-left-md
*/
.text-left-md {
text-align: left;
}
/**
* Use `.text-center-md` to center align text on medium and large screens.
*
* __Example:__
*
*
* ...
*
*
* @class .text-center-md
*/
.text-center-md {
text-align: center;
}
/**
* Use `.text-right-md` to right align text on medium and large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-right-md
*/
.text-right-md {
text-align: right;
}
}
@media (min-width: 1080px) {
/**
* Use `.text-left-lg` to left align text on large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-left-lg
*/
.text-left-lg {
text-align: left;
}
/**
* Use `.text-center-lg` to center align text on large screens.
*
* __Example:__
*
*
* ...
*
*
* @class .text-center-lg
*/
.text-center-lg {
text-align: center;
}
/**
* Use `.text-right-lg` to right align text on large screens.
*
* __Example:__
*
*
*
* Awesome
*
*
* Sauce
*
*
*
* @class .text-right-lg
*/
.text-right-lg {
text-align: right;
}
}
#ui-datepicker-div {
z-index: 1051 !important;
}
/**
* Generic classes used by oregonstateparks.org and store.oregonstateparks.org.
*
* @module CSS
* @submodule public-site-classes.less
*/
/**
* Use `.bg-panel` or `.bg-white` to change the background color of an element.
*
* This can be the body class in a WYSIWYG editor.
*
* __Example:__
*
*
*
* @class .bg-panel
* @class .bg-white
*/
.bg-panel {
background-color: #ffffff;
}
.bg-white {
background-color: white;
}
/**
* Use `.checkbox-right` to align the text in a `.checkbox` to the right.
*
* __Example:__
*
*
*
*
*
* @class .checkbox-right
*/
.checkbox-right {
text-align: right;
}
.checkbox-right input[type="checkbox"] {
margin-left: 0;
right: 0;
}
.checkbox-right label {
padding-left: 0;
padding-right: 20px;
}
/**
* Use `.checkbox-right-sm` to align the text in a `.checkbox` to the right
* on small, medium, and large screens.
*
* __Example:__
*
*
*
*
*
* @class .checkbox-right-sm
* @extends .checkbox-right
*/
@media (min-width: 768px) {
.checkbox-right-sm {
text-align: right;
}
.checkbox-right-sm input[type="checkbox"] {
margin-left: 0;
right: 0;
}
.checkbox-right-sm label {
padding-left: 0;
padding-right: 20px;
}
}
/**
* Use `.ckeditor-fixes` to fix common CSS issues caused by ckeditor:
* * Prevent floated elements from extending past the bottom of the page.
* * Prevent images, iframes, and tables from taking up more than the width of their parent.
*
* @class .ckeditor-fixes
*/
.ckeditor-fixes {
overflow: hidden;
}
.ckeditor-fixes img {
max-width: 100%;
height: auto !important;
}
@media (max-width: 767px) {
.ckeditor-fixes iframe,
.ckeditor-fixes table {
width: 100% !important;
}
}
@media (min-width: 768px) {
.ckeditor-fixes iframe,
.ckeditor-fixes table {
max-width: 680px;
}
}
@media (min-width: 924px) {
.ckeditor-fixes iframe,
.ckeditor-fixes table {
max-width: 832px;
}
}
@media (min-width: 1080px) {
.ckeditor-fixes iframe,
.ckeditor-fixes table {
max-width: 984px;
}
}
/**
* Use `.fw` to take up the full width of the screen.
*
* @class .fw
*/
.fw {
border-left: 0;
border-right: 0;
border-radius: 0;
margin-left: -20px;
margin-right: -20px;
}
.fw > .list-group-item {
border-left: 0;
border-right: 0;
}
.fw > .list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.fw > .list-group-item:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.fw > .table-bordered {
border-left: 0;
border-right: 0;
}
.fw > .table-bordered th:first-child,
.fw > .table-bordered td:first-child {
border-left: 0;
}
.fw > .table-bordered th:last-child,
.fw > .table-bordered td:last-child {
border-right: 0;
}
/**
* Use `.fw-xs` to take up the full width of the screen
* on extra small screens.
*
* __Example:__
*
*