/* Grid
-------------------------- */
.ocm-container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.ocm-col,
.ocm-cols {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
@media (min-width: 400px) {
.ocm-container {
width: 85%;
padding: 0; }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.ocm-container {
width: 80%; }
.ocm-col,
.ocm-cols {
margin-left: 4%; }
.ocm-col:first-child,
.ocm-cols:first-child {
margin-left: 0; }
.one.ocm-col,
.one.ocm-cols { width: 4.66666666667%; }
.two.ocm-cols { width: 13.3333333333%; }
.three.ocm-cols { width: 22%; }
.four.ocm-cols { width: 30.6666666667%; }
.five.ocm-cols { width: 39.3333333333%; }
.six.ocm-cols { width: 48%; }
.seven.ocm-cols { width: 56.6666666667%; }
.eight.ocm-cols { width: 65.3333333333%; }
.nine.ocm-cols { width: 74.0%; }
.ten.ocm-cols { width: 82.6666666667%; }
.eleven.ocm-cols { width: 91.3333333333%; }
.twelve.ocm-cols { width: 100%; margin-left: 0; }
.one-third.ocm-col { width: 30.6666666667%; }
.two-thirds.ocm-col { width: 65.3333333333%; }
.one-half.ocm-col { width: 48%; }
/* Offsets */
.offset-by-one.ocm-col,
.offset-by-one.ocm-cols { margin-left: 8.66666666667%; }
.offset-by-two.ocm-col,
.offset-by-two.ocm-cols { margin-left: 17.3333333333%; }
.offset-by-three.ocm-col,
.offset-by-three.ocm-cols { margin-left: 26%; }
.offset-by-four.ocm-col,
.offset-by-four.ocm-cols { margin-left: 34.6666666667%; }
.offset-by-five.ocm-col,
.offset-by-five.ocm-cols { margin-left: 43.3333333333%; }
.offset-by-six.ocm-col,
.offset-by-six.ocm-cols { margin-left: 52%; }
.offset-by-seven.ocm-col,
.offset-by-seven.ocm-cols { margin-left: 60.6666666667%; }
.offset-by-eight.ocm-col,
.offset-by-eight.ocm-cols { margin-left: 69.3333333333%; }
.offset-by-nine.ocm-col,
.offset-by-nine.ocm-cols { margin-left: 78.0%; }
.offset-by-ten.ocm-col,
.offset-by-ten.ocm-cols { margin-left: 86.6666666667%; }
.offset-by-eleven.ocm-col,
.offset-by-eleven.ocm-cols { margin-left: 95.3333333333%; }
.offset-by-one-third.ocm-col,
.offset-by-one-third.ocm-cols { margin-left: 34.6666666667%; }
.offset-by-two-thirds.ocm-col,
.offset-by-two-thirds.ocm-cols { margin-left: 69.3333333333%; }
.offset-by-one-half.ocm-col,
.offset-by-one-half.ocm-cols { margin-left: 52%; }
}
/* Tables
-------------------------- */
.ocm-main th,
.ocm-main td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }
.ocm-main th:first-child,
.ocm-main td:first-child {
padding-left: 0; }
.ocm-main th:last-child,
.ocm-main td:last-child {
padding-right: 0; }
/* Utilities
-------------------------- */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Clearing
-------------------------- */
/* Self Clearing Goodness */
.ocm-container:after,
.ocm-row:after,
.u-cf {
content: "";
display: table;
clear: both; }
.wrapword {
display: block;
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal; }
/* OCM Specific styles
-------------------------- */
textarea, input, select {max-width:100%;}
textarea {width:100%;min-height:200px;}
.ocm-details, .ocm-form-table, .ocm-form-table2 {width:100%;margin-bottom:20px;}
.ocm-details, .ocm-details tbody, .ocm-details tr, .ocm-details td , .ocm-form-table td, .ocm-form-table tr, .ocm-form-table, .ocm-form-table tbody {display:block;padding-left:0;padding-right:0;}
.ocm-form-table, .ocm-form-table tbody {max-width:100%;}
.ocm-details td.det_ttop, .ocm-form-table td.first-col {border:none;}
.ocm-actions {margin-bottom:20px;}
.ocm-form-table.no-borders, .ocm-form-table.no-borders td {border:none;}
.ocm-buttons {margin-top:20px;}
.center-text {text-align:center;}
#ImageLink img {max-width:100%;width:auto;max-height:200px;height:auto;}
.thumbnail-wrap {margin-top:5px;}
.thumbnail-wrap img {max-width:97px;width:auto;max-height:73px;height:73px;}
.mejs-player {max-width:100%;width:640px;max-height:360px;height:auto;}
/* Media Queries
-------------------------- */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
.ocm-form-table tr {display:table-row;}
.ocm-form-table td {display:table-cell;}
.ocm-form-table.align-top td {vertical-align:top;}
.ocm-form-table td.first-col {border-bottom: 1px solid #E1E1E1;width:30%;}
.ocm-form-table {display:table;}
.ocm-form-table tbody {display:table-row-group;}
.ocm-form-table td {padding:12px 15px;}
.ocm-form-table td:first-child {padding-left:0px;}
.ocm-form-table td:last-child {padding-right:0px;}
}
/* Larger than tablet */
@media (min-width: 750px) {
.ocm-details {display:table;}
.ocm-details tbody {display:table-row-group;}
.ocm-details tr {display:table-row;}
.ocm-details td {display:table-cell;}
.ocm-details .align-top td {vertical-align:top;}
.ocm-details .align-bottom td {vertical-align:bottom;}
.ocm-details td.det_ttop {width:38%;border-bottom: 1px solid #E1E1E1;}
.ocm-details td {padding:12px 15px;}
.ocm-details td:first-child {padding-left:0px;}
.ocm-details td:last-child {padding-right:0px;}
}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}