/* DO NOT CROSS LINK TO THIS FILE - This stylesheet was generated on Fri, 05 Sep 2025 15:37:26 -0700 and its name will change */ /*---------------------------------------------*/ /* Stylesheet: Defaults*/ * {margin: 0px; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box;} html {height: 101%;} a img {border: none; outline: none;} img {border: none; outline: none;} hr { margin-bottom: 30px; margin-top: 30px; border:0px; background-color: #e1d6d1; color: #e1d6d1; height: 5px; } /*--------------- reset browser defaults--------------- */ .main-home { color: #000000; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 0; background: white; } .main-home a { color: #336699; text-decoration: none; } .main-home a:hover { color: #336699;} .main-home b, .main-home strong { color: black; } .main-home h1, .main-home h2.title, .main-home h2.title2 { font-size: 2em; color: #000; font-family: 'Roboto Slab', times, serif; font-weight: normal; margin-bottom: 10px; line-height: normal !important; text-transform: none ;} .main-home h1 a, .main-home h2.title a, .main-home h2.title2 a { color: #000; text-decoration: none !important;} .main-home h2 { font-size: 1.5em; color:#000; font-family: 'Roboto Slab', times, serif; font-weight: normal; font-style: none; text-transform: none; margin-bottom: 10px;} .main-home h2 a { color: #000; text-decoration: none !important;} .main-home h2.underlined { padding-bottom: 5px; border-bottom: solid 1px #cdc0b3; } .main-home h3 { font-size: 1.2em; color: #000; font-family: 'Roboto Slab', times, serif; font-weight: normal; text-transform: none; margin-bottom: 10px;} .main-home h3 a { color: #000; text-decoration: none !important;} .main-home h4 { font-size: 1.1em; color: #000; font-family: 'Roboto Slab', times, serif; font-weight: normal; text-transform: none; margin-bottom: 10px;} .main-home h4 a { color: #000; text-decoration: none !important;} .main-home .kicker { font-family: 'Roboto Slab', times, serif; text-transform: uppercase; color: #999999;} .main-home .small { font-size: .8em; } .main-home .tiny { font-size: .6em; } .main-home p, .main-home ul, .main-home ol, .main-home table { line-height: 20px; margin-bottom: 10px;} .main-home ul {/* list-style-type: none;*/ } .main-home li { line-height: 20px; margin-left: 20px; /*margin-left: 0px; background: url(../pub/photo/bullet.png) 0 6px no-repeat; padding-left: 15px; */} /* extra styles */ .main-home .subtitle { color: #767561; font-family: 'Open Sans', sans-serif; font-weight: normal; text-transform: uppercase;margin-bottom: 10px;} .table-facts { font-size: .9em; border-spacing: 0px; border-collapse: separate;} .table-facts th{ padding: 2px 10px; text-align: left; font-weight: normal; color: #777; background: #ffffff; border-bottom: solid 0px #777; } .table-facts td{ padding: 2px 10px;background: #f5f5f5; } .star-rating-0 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat top left; } /* 224 */ .star-rating-1 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat 0 -44px; } /* 224 */ .star-rating-2 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat 0 -86px; } /* 224 */ .star-rating-3 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat 0 -131px; } /* 224 */ .star-rating-4 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat 0 -176px; } /* 224 */ .star-rating-5 { display: block; width: 95px; height: 22px; background: url(/pub/photo/star-rating.png) no-repeat 0 -220px; } /* 224 */ .ruler { margin-bottom: 15px !important; border: 1px;} .title { font-size: 1.5em; color:#000; font-family: 'Roboto Slab', times, serif; font-weight: normal; font-style:italic; text-transform: uppercase; margin-bottom: 10px; } /* ---------- style super common design items ---------*/ .error-box { color: Red; background-color: #fee; padding: 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .success-box { color: Green; background-color: #efe; padding: 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /*--------------------- custom stuff --------------------------*/ .icon-cam { position: relative;display: block; width: 16px; height: 16px; background: url(/pub/photo/top-icons2.png) no-repeat -48px 0px;} /*.icon-condition { position: relative; display: block; width: 16px; height: 16px; background: url(/pub/photo/top-icons2.png) no-repeat -32px 0px;}*/ .icon-chart { position: relative;display: block; width: 16px; height: 16px; background: url(/pub/photo/top-icons2.png) no-repeat -16px 0px; } /*.icon-weather { position: relative;display: block; width: 16px; height: 16px; background: url(/pub/photo/top-icons2.png) no-repeat 0px 0px; }*/ .icon-condition { position: relative; display: block; width: 16px; height: 16px; background: url(/pub/photo/top-icons2.png) no-repeat -0px 0px;} /*.nws-forecast { list-style-type: none; width: 460px; margin-right: 20px; float: left;}*/ .mm5-data { margin-bottom: 20px !important; } .mm5-data td { width: 20px; white-space: nowrap;} .mm5-dir-none { display: block; width: 16px; height: 16px;} .mm5-dir-w { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(0deg);transform: rotate(0deg);} .mm5-dir-wnw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(22deg);transform: rotate(22deg);} .mm5-dir-nw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(45deg);transform: rotate(45deg);} .mm5-dir-nnw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(67deg);transform: rotate(67deg);} .mm5-dir-n { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(90deg);transform: rotate(90deg);} .mm5-dir-nne { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(113deg);transform: rotate(113deg);} .mm5-dir-ne { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(135deg);transform: rotate(135deg);} .mm5-dir-ene { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(157deg);transform: rotate(157deg);} .mm5-dir-e { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(180deg);transform: rotate(180deg);} .mm5-dir-ese { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(202deg);transform: rotate(202deg);} .mm5-dir-se { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(225deg);transform: rotate(225deg);} .mm5-dir-sse { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(248deg);transform: rotate(248deg);} .mm5-dir-s { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(270deg);transform: rotate(270deg);} .mm5-dir-ssw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(292deg);transform: rotate(292deg);} .mm5-dir-sw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(315deg);transform: rotate(315deg);} .mm5-dir-wsw { display: block; width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png);-webkit-transform: rotate(337deg);transform: rotate(337deg);} .detail-level-1 { } .detail-level-2 { display: none; } .detail-level-2 td, .detail-level-2 a { font-color: #aaa !important; } .ui-data-plus { display: inline-block; width: 22px; height: 22px; background: url(/pub/photo/icon-plus-minus.png) no-repeat -25px 0px; float: right; } .ui-data-less { display: inline-block; width: 22px; height: 22px; background: url(/pub/photo/icon-plus-minus.png) no-repeat 0px 0px; float: right; } .nws-forecast {} .nws-forecast .label { font-weight: bold; display: inline-block; margin-right: 5px; text-transform: capitalize;} .nws-forecast .label::after { content: ":"; } .nws-date-updated, .ndbc-date-updated, .mm5-date-updated , .noaa-date-updated, .nww3-date-updated { font-size: .8em; font-style: italic; color: #777; } .nws-forecast div.synopsis { margin-bottom: 10px; } .nws-forecast div.row-forecast { margin-bottom: 10px; } .nws-forecast .synopsis { background: #FFFCC7; border-radius: 4px; box-sizing: border-box; padding: 20px; padding-bottom: 10px; color: #28231F; border: solid 1px #BBA592; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); text-decoration: lowercase; margin-bottom: 10px; } .mm5-data-section { overflow: hidden; } .mm5-data-section-wrapper { overflow-x: auto; /*width: 100%; overflow-x: auto; */} .mm5-data-wrapper { /*width: 100%; overflow-x: auto; */} .ndbc-wind-section, .ndbc-wave-section, .mm5-data-secttion , .noaa-tide-section{ box-sizing: border-box; margin-bottom: 10px; color: #28231F; padding: 10px; background: #f0f0f0; /*padding: 20px; padding-bottom: 10px; border: solid 1px #BBA592; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); border-radius: 4px; */ } .ndbc-wind, .ndbc-wave, .mm5-data, .noaa-tide, .nww3-wave, .stats { font-size: .9em; border-spacing: 0px; border-collapse: separate; border-bottom: solid 1px black; } .ndbc-wind td, .ndbc-wave td, .ndbc-wind th, .ndbc-wave th, .mm5-data td, .mm5-data th, .noaa-tide td, .noaa-tide th , .nww3-wave td, .nww3-wave th, .stats td, .stats th { text-align: left; padding: 5px;} .ndbc-wind th, .ndbc-wave th, .mm5-data th, .noaa-tide th, .nww3-wave th, .stats th { text-align: left; padding: 2px; border-bottom: solid 1px black;} /* each level is 5 mph. Match the MM5 */ .ndbc-wind .highlight-level-0 .wind { } .ndbc-wind .highlight-level-1 .wind { background: #BFBFFF;} .ndbc-wind .highlight-level-1 .dir { background: #BFBFFF;} .ndbc-wind .highlight-level-2 .wind { background: #BFFFBF;} .ndbc-wind .highlight-level-2 .dir { background: #BFFFBF;} .ndbc-wind .highlight-level-3 .wind { background: #FFCC99;} /* good 15-20 */ .ndbc-wind .highlight-level-3 .dir { background: #FFCC99;} /* good 15-20 */ .ndbc-wind .highlight-level-3 .name { font-weight: bold; } .ndbc-wind .highlight-level-3 .wind { font-weight: bold; } .ndbc-wind .highlight-level-4 .wind { background: #FFFF7F;} /* good 20-25 */ .ndbc-wind .highlight-level-4 .dir { background: #FFFF7F;} /* good 20-25 */ .ndbc-wind .highlight-level-4 .name { font-weight: bold; } .ndbc-wind .highlight-level-4 .wind { font-weight: bold; } .ndbc-wind .highlight-level-5 .wind { background: #FF7F7F;} /* good 25-30 */ .ndbc-wind .highlight-level-5 .dir { background: #FF7F7F;} /* good 25-30 */ .ndbc-wind .highlight-level-5 .name { font-weight: bold; } .ndbc-wind .highlight-level-5 .wind { font-weight: bold; } .ndbc-wind .highlight-level-6 .wind { background: #FFD5B8;} /* strong 30-35 */ .ndbc-wind .highlight-level-6 .dir { background: #FFD5B8;} /* strong 30-35 */ .ndbc-wind .highlight-level-6 .name { font-weight: bold; } .ndbc-wind .highlight-level-6 .wind { font-weight: bold; } .ndbc-wind .highlight-level-7 .wind { background: #7FFF91;} /* strong 35-40 */ .ndbc-wind .highlight-level-7 .dir { background: #7FFF91;} /* strong 35-40 */ .ndbc-wind .highlight-level-7 .wind { font-weight: bold; } .ndbc-wind .highlight-level-8 .wind { background: #AAEFEF;} /* gale 40-45 */ .ndbc-wind .highlight-level-8 .dir { background: #AAEFEF;} /* gale 40-45 */ .ndbc-wind .highlight-level-8 .wind { font-weight: bold; } .ndbc-wind .highlight-level-9 .wind { background: #7791EF;} /* gale 45-50 */ .ndbc-wind .highlight-level-9 .dir { background: #7791EF;} /* gale 45-50 */ .ndbc-wind .highlight-level-9 .wind { font-weight: bold; } .ndbc-wind .highlight-level-10 .wind { background: #EF1616;} /* storm 50+ */ .ndbc-wind .highlight-level-10 .dir { background: #EF1616;} /* storm 50+ */ .ndbc-wind .highlight-level-10 .wind { font-weight: bold; } .ndbc-wave .highlight-level-0 .height { background: #B8ECFF;} /* 0 - 2 ft */ .ndbc-wave .highlight-level-0 .dir { background: #B8ECFF;} /* 0 - 2 ft */ .ndbc-wave .highlight-level-1 .height { background: #BFFFB8;} /* 3 - 6 ft GOOD */ .ndbc-wave .highlight-level-1 .dir { background: #BFFFB8;} /* 3 - 6 ft GOOD */ .ndbc-wave .highlight-level-1 .height { font-weight: bold; } .ndbc-wave .highlight-level-2 .height { background: #FFF17A;} /* 6 - 9 ft GOOD */ .ndbc-wave .highlight-level-2 .dir { background: #FFF17A;} /* 6 - 9 ft GOOD */ .ndbc-wave .highlight-level-2 .height { font-weight: bold; } .ndbc-wave .highlight-level-3 .height { background: #FFBB00;} /* 9 - 12 GOOD */ .ndbc-wave .highlight-level-3 .dir { background: #FFBB00;} /* 9 - 12 GOOD */ .ndbc-wave .highlight-level-3 .height { font-weight: bold; } .ndbc-wave .highlight-level-4 .height { background: #FFAA00;} /* 12 - 15 big */ .ndbc-wave .highlight-level-4 .dir { background: #FFAA00;} /* 12 - 15 big */ .ndbc-wave .highlight-level-4 .height { color: red; } .ndbc-wave .highlight-level-5 .height { background: #FF9900;} /* 15 - 18 huge */ .ndbc-wave .highlight-level-5 .height { background: #dir;} /* 15 - 18 huge */ .ndbc-wave .highlight-level-5 .height { color: red; } .ndbc-wave .highlight-level-6 .height { background: #FF8800;} /* 18 - 20 huge */ .ndbc-wave .highlight-level-6 .height { background: #dir;} /* 18 - 20 huge */ .ndbc-wave .highlight-level-6 .height { color: red; } .ndbc-wave .highlight-level-7 .height { background: #FF7700;} /* huge */ .ndbc-wave .highlight-level-7 .dir { background: #FF7700;} /* huge */ .ndbc-wave .highlight-level-7 .height { color: red; } .ndbc-wave .highlight-level-8 .height { background: #FF6600;} /* huge */ .ndbc-wave .highlight-level-8 .dir { background: #FF6600;} /* huge */ .ndbc-wave .highlight-level-8 .height { color: red; } .ndbc-wave .highlight-level-9 .height { background: #FF5500;} /* huge */ .ndbc-wave .highlight-level-9 .dir { background: #FF5500;} /* huge */ .ndbc-wave .highlight-level-9 .height { color: red; } .ndbc-wave .highlight-level-10 .height { background: #AF7AFF;} /* huge */ .ndbc-wave .highlight-level-10 .dir { background: #AF7AFF;} /* huge */ .ndbc-wave .highlight-level-10 .height { color: red; } .noaa-tide .date1{} .noaa-tide .date2{} .noaa-tide .time{ text-align: right;} .noaa-tide .height {text-align: right; font-weight: bold;} .noaa-tide .height span { font-weight: bold;} /* height in ft */ .noaa-tide .height-H { background: #BFBFFF;} /* high */ .noaa-tide .height-L { } /* low */ .nww3-wave-section { overflow: hidden; } .nww3-wave-section-wrapper { overflow-x: auto; /*width: 100%; overflow-x: auto; */} .nww3-wave .wave-significant { border-bottom: solid 2px black; font-size: 1.2em; } .nww3-wave td.day-start { border-left: solid 1px rgba(0,0,0,.2); } .nww3-wave th, .nww3-wave td { text-align: center; vertical-align: top; width: 25px; white-space: nowrap; padding: 5px;} .nww3-wave .time-am::after { content: "am"; font-size: .7em; padding-left: 1px; font-weight: normal !important;} .nww3-wave .time-pm::after { content: "pm"; font-size: .7em; padding-left: 1px;font-weight: normal !important;} .nww3-wave td { padding: 0 !important; } .nww3-wave .wave-legend { text-align: left !important;} .nww3-wave .wave-height {display: block; padding: 5px; text-align: center; min-width: 30px;} .nww3-wave .wave-height::after { content: "ft"; font-size: .7em; padding-left: 1px;} .nww3-wave .wave-period {display: block; padding: 5px;text-align: center; min-width: 30px;} .nww3-wave .wave-period::after { content: "s"; font-size: .7em; padding-left: 1px;} .nww3-wave .wave-dir {display: block; padding: 5px;text-align: center; min-width: 30px;} .wave-dir-w { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(0deg);transform: rotate(0deg);} .wave-dir-nw { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(45deg);transform: rotate(45deg);} .wave-dir-n { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(90deg);transform: rotate(90deg);} .wave-dir-ne { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(135deg);transform: rotate(135deg);} .wave-dir-e { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(180deg);transform: rotate(180deg);} .wave-dir-se { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(225deg);transform: rotate(225deg);} .wave-dir-s { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(270deg);transform: rotate(270deg);} .wave-dir-sw { display: block; min-width: 16px; height: 16px; background: url(/pub/photo/icon-wind-arrow.png) no-repeat center center;-webkit-transform: rotate(315deg);transform: rotate(315deg);} /* matches height */ .nww3-wave .wave-dir.highlight-level-0 { background: #0066ff;} .nww3-wave .wave-dir.highlight-level-1 { background: #00e0ff;} .nww3-wave .wave-dir.highlight-level-2 { background: #00ffff;} .nww3-wave .wave-dir.highlight-level-3 { background: #00ffcc;} .nww3-wave .wave-dir.highlight-level-4 { background: #00ff99;} .nww3-wave .wave-dir.highlight-level-5 { background: #00ff00; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-6 { background: #99ff00; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-7 { background: #ccff00; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-8 { background: #ffff00; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-9 { background: #ffcc00; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-10 { background: #ff9900; font-weight: bold;} .nww3-wave .wave-dir.highlight-level-11 { background: #ff6600;} .nww3-wave .wave-dir.highlight-level-12 { background: #ff0000;} .nww3-wave .wave-dir.highlight-level-13 { background: #b03060;} .nww3-wave .wave-dir.highlight-level-14 { background: #d02090;} .nww3-wave .wave-dir.highlight-level-15 { background: #ff00ff;} .nww3-wave .wave-height.highlight-level-0 { background: #0066ff;} .nww3-wave .wave-height.highlight-level-1 { background: #00e0ff;} .nww3-wave .wave-height.highlight-level-2 { background: #00ffff;} .nww3-wave .wave-height.highlight-level-3 { background: #00ffcc;} .nww3-wave .wave-height.highlight-level-4 { background: #00ff99;} .nww3-wave .wave-height.highlight-level-5 { background: #00ff00; font-weight: bold;} .nww3-wave .wave-height.highlight-level-6 { background: #99ff00; font-weight: bold;} .nww3-wave .wave-height.highlight-level-7 { background: #ccff00; font-weight: bold;} .nww3-wave .wave-height.highlight-level-8 { background: #ffff00; font-weight: bold;} .nww3-wave .wave-height.highlight-level-9 { background: #ffcc00; font-weight: bold;} .nww3-wave .wave-height.highlight-level-10 { background: #ff9900; font-weight: bold;} .nww3-wave .wave-height.highlight-level-11 { background: #ff6600;} .nww3-wave .wave-height.highlight-level-12 { background: #ff0000;} .nww3-wave .wave-height.highlight-level-13 { background: #b03060;} .nww3-wave .wave-height.highlight-level-14 { background: #d02090;} .nww3-wave .wave-height.highlight-level-15 { background: #ff00ff;} .nww3-wave .wave-period.highlight-level-0 { background: #0000cd;} .nww3-wave .wave-period.highlight-level-1 { background: #0000cd;} .nww3-wave .wave-period.highlight-level-2 { background: #0066ff;} .nww3-wave .wave-period.highlight-level-3 { background: #0066ff;} .nww3-wave .wave-period.highlight-level-4 { background: #00b7ff;} .nww3-wave .wave-period.highlight-level-5 { background: #00b7ff;} .nww3-wave .wave-period.highlight-level-6 { background: #00e0ff;} .nww3-wave .wave-period.highlight-level-7 { background: #00e0ff;} .nww3-wave .wave-period.highlight-level-8 { background: #00ffff;} .nww3-wave .wave-period.highlight-level-9 { background: #00ffcc;} .nww3-wave .wave-period.highlight-level-10 { background: #00ff99;} .nww3-wave .wave-period.highlight-level-11 { background: #00ff00;} .nww3-wave .wave-period.highlight-level-12 { background: #99ff00;} .nww3-wave .wave-period.highlight-level-13 { background: #ccff00;font-weight: bold;} .nww3-wave .wave-period.highlight-level-14 { background: #ffff00;font-weight: bold;} .nww3-wave .wave-period.highlight-level-15 { background: #ffcc00;font-weight: bold;} .nww3-wave .wave-period.highlight-level-16 { background: #ff9900;font-weight: bold;} .nww3-wave .wave-period.highlight-level-17 { background: #ff6600;font-weight: bold;} .nww3-wave .wave-period.highlight-level-18 { background: #ff0000;font-weight: bold;} .nww3-wave .wave-period.highlight-level-19 { background: #b03060;font-weight: bold;} .nww3-wave .wave-period.highlight-level-20 { background: #d02090;font-weight: bold;} .nww3-wave .wave-period.highlight-level-21 { background: #ff00ff;font-weight: bold;} /*---------------------------------------------*/ /* Stylesheet: Layout*/ .main-home { } .main-home .template { background: white;} /* ------------- slices ----------------------*/ .bg-header { } .bg-header .x-cell { position: relative; } .bg-menu { height: 40px; background: #28231F; color: white; position: relative;margin-bottom: 0px !important;} .bg-menu a { color: white /*!important*/; } .bg-focus { } .bg-focus > .x-cell { padding-bottom: 20px;} .bg-slide .inner { padding-top: 0px !important; } .bg-borderless { border: 0px !important; text-align: center; } .bg-lighter { background: #F8E8C2; } .bg-lighter > .x-cell { padding: 20px 0;} .bg-lighter > .x-cell-container { padding: 20px 0;} .bg-light { background: #F8E8C2; } .bg-light > .x-cell { padding: 20px 0;} .bg-light > .x-cell-container { padding: 20px 0;} .bg-light-noresize { } .bg-light-noresize .x-cell { } .bg-clear { } .bg-clear > .x-cell { padding: 20px 0;} .bg-clear > .x-cell-container { padding: 20px 0;} .bg-clear .inner { padding-bottom: 0 !important; } .bg-footer { } .bg-ruler { } .bg-topline { border-top: solid 1px #cdc0b3; padding-top: 20px; margin-top:20px !important; } .bg-bottomline { border-bottom: solid 1px #cdc0b3; padding-bottom: 20px; margin-bottom:20px !important; } .x-block { margin-bottom: 0px; margin-left:auto; margin-right:auto; } .x-block > .x-cell { margin: 0 auto; width: 960px; } .x-block > .x-cell-container {margin: 0 auto; width: 960px; } .x-clear { clear: both; } .content { padding: 0 0px; } .content .x-block { width: 100% !important; } .x-cell > .inner { } .x-cell-container > .inner { padding: 10px;} /*--------- generic templating --------- */ .col-container { margin-bottom: 20px; } .col-single { width: 275px; padding: 5px; } .col-double { width: 660px; padding: 5px; } .col-store { width: 750px; padding: 0px 0;} .col-third { width: 306px; } .col-fifth { width: 175px !important; } .col-half { width: 470px; } .col-half-inner { width: 417px; } .col-single > .inner { } .col-double > .inner { } .col-third > .inner { } .inner-mail { padding: 7px !important;} .col-half > .inner { } .master-col-left { float: left; margin-right: 20px;} .master-col-right { float: right;} .layout-col-left { float: left; margin-right: 20px;} .layout-col-right { float: right; } /* custom advisory layout */ .framed { border: solid 1px #c6c6c6; padding: 10px;} .bubble .inner { padding-top: 0px !important; } .no-right-pad .inner { padding-right: 0px !important; } .no-left-pad .inner { padding-left: 0px !important; } .col-products form { width: 295px; float: left; } .col-products img { width: 100px; height: 150px; } .side-bar { padding-top: 25px !important; } .side-bar .inner { padding-top: 0px !important; } /* ---------------header -------------- */ .bg-header > .x-cell { position: relative; height: 160px; margin: 0 auto; } .bg-header #toplogo { position: absolute; top: 30px; left: 20px; height: 100px; cursor: pointer;} .bg-header #topsearch { position: absolute; top: 20px; right: 0px; } .bg-header #topsearch input[type="textbox"] { padding: 4px 5px; background: none; border: solid 1px #999999; background:url(/pub/photo/search-magnify-glass.png) no-repeat right !important;} .bg-header #topsearch input[type="submit"] { position: absolute; background:url(/pub/photo/search-magnify-glass.png) no-repeat left !important; width:20px !important; top: 2px; right: 0px; } .bg-header #toptext { position: absolute; top: 60px; right: 0px; text-transform: none; } .bg-header #toptext table td { padding: 2px; } .bg-header #toptext table td a { display: block;padding: 2px 5px; background: #f5f5f5; text-align: center; width: 100%; height: 100%;min-width: 65px; } .bg-header #toptext table td a:hover { background: #28231F; color: white; } .bg-header #toplinks { position: absolute; top: 40px; right: 0px; height: 100px; text-transform: uppercase; } .bg-header #topcart { position: absolute; bottom: 0px; right: 10px; text-align: right; padding-left: 30px; padding-right: 10px; line-height: 40px; height: 40px; font-family: 'Roboto Slab', times, serif;} .bg-header #topmenu { position: absolute; bottom: 0; left: 0; width: 100%; border-top: solid 1px #cdc0b3; border-bottom: solid 1px #cdc0b3; height: 40px;} .col-header { background-image:url('../pub/photo/icon-arrow-lv.png'); background-repeat: no-repeat; padding-left: 40px; } .col-header-mail { background-image:url('../pub/photo/icon-mail-lv.png'); background-repeat: no-repeat; padding-left: 40px; } /* -------------- menu ----------------- */ #topmenutext { text-transform: uppercase;} #topmenutext p { } #topmenutext a.navlink {color: black important; padding: 0 15px;} #topmenutext a.navlink:hover, #topmenutext a.navlink.selected { font-color: #333; } /*--------------- home --------------------*/ .home-item { float: left; margin-right: 20px; width: 176px; } /* ------------ Gallery -------------- */ /* gallery */ .gallery a { text-decoration: none; } .gallery a:hover { color: Black; } .gallery ul { list-style-type: none; padding: 0; margin: 0; } .gallery ul li { padding: 0; margin: 0; } .gallery .controls a { padding: 2px; } .gallery .ss-controls {float: left; } .gallery .nav-controls {float: right; } .gallery .navigation li { float: left; margin-right: 2px; margin-bottom: 2px;} .gallery .navigation a { padding: 2px; } .gallery .navigation span { padding: 2px; } .gallery .download { display: none; } .gallery .image-title { font-weight: bold; margin-bottom: 5px; } .gallery .image-desc {} /* ------------ bi-color columns -------------*/ .col-container { } /*-------------- testimonials ---------------*/ .testimonial { color: white !important; padding: 20px; border-radius: 16px;} /*-------------- bottom footer --------------*/ .bg-footer { padding: 20px; background: #BBA592; color: #28231F;} .bg-footer .x-cell {font-size: 1em; } .bg-footer .inner { text-align: left; padding: 0 !important; margin-left:auto; margin-right:auto;} /* not used due to the uncheck 'wrap' box */ .bg-footer h2 { font-size: 1.2em;} .bg-footer a { color: #28231F; } .bg-footer h2, .footer h3, .footer h4 { font-family: 'Roboto Slab', times, serif; font-weight: bold;} .bg-footer p { font-family: 'Roboto Slab', times, serif; font-size: .9em !important; } .bg-footer h3 { font-family: 'Roboto Slab', times, serif; font-weight: bold !important; font-size:1em !important;} #signature { display: none; background-color: none; color: white; margin-bottom: 0; font-size: .8em; margin: 0 auto; color: #FFF; text-align: right; padding: 20px 0; padding-top: 0;} #signature a { color: #FFF !important; } /*---------------------------------------------*/ /* Stylesheet: Store*/ /* shopping cart */ .cart { /*background: url(../pub/photo/cart.png) no-repeat left top;*/ display: inline-block; padding: 4px; min-height: 18px; line-height: 18px; font-size: 1.2em; text-transform: capitalize; color: #35200b !important; } .cart-link { text-transform: uppercase; font-size: 16px; color: #653616;} .cart-link:hover {text-decoration: none;} .cart-items { width: 100%; } .cart-items th { text-align: left; color: #444; font-size: 14px; font-style: italic; padding-bottom: 10px; border-bottom: dotted 1px #ccc;} .cart-items td { padding: 5px 0; } .cart-items td .label { display: inline-block; margin-top: 10px; } .cart-items td.total { color: #000; font-size: 14px; font-style: italic; padding-top: 10px; border-top: dotted 1px #ccc;} .cart-shipping td, .cart-billing td, .cart-payment td, .cart-gift td { padding: 2px 5px; } .checkout td.ui-label { width: 140px; } .ui-cart-readonly { color: #aaa; } .ui-cart-quantity { width: 20px !important; margin-left: 10px;} .price { color: #653616; font-family: 'Roboto Slab', times, serif !important; font-size: 2em; margin-bottom:10px;} .price-crossed { color: #777; font-family: 'Roboto Slab', times, serif !important; font-size: 1.5em; text-decoration:line-through; font-style: italic; margin-bottom:10px;} #ui-cart-shipping-zip { width: 80px; } .vendor { font-size: .9em; text-transform: uppercase;} .soldout { color: red;} .instock { color: green;} .shop-item { width: 210px; margin-bottom: 10px; margin-right: 10px; float: left; } .group-item {} .group-item.selected img {border: solid 1px #336600; } /*---------------------------------------------*/ /* Stylesheet: Menus*/ /* top menu all pages */ .bg-menu .inner { bottom: 0; right: 0; background: none; text-transform: uppercase; position: relative;font-size: 1.2em; font-family: 'Roboto Slab', times, serif; font-weight: normal; } .bg-menu .inner ul, #topmenu ul { list-style-type: none !important; margin: 0;} .bg-menu .inner li, #topmenu li { background: none; margin: 0;} #topmenu { text-transform: uppercase; } #topmenu > li { position: relative; color: white; float: left; line-height: 40px; text-align: left;} #topmenu > li.isfirst { } /* we need to set numeric borders to prevent jquery issues for Ie7. See main.xml */ #topmenu > li.islast { } #topmenu > li.ispadding { padding: 0 5px;} #topmenu > li > a { padding: 0 10px; } #topmenu > li > a.isfirst { } #topmenu > li > a.islast { } #topmenu > li { border-left: solid 1px white; } #topmenu > li.isfirst { border-left: none; } #topmenu > li.islast { } #topmenu a { display:block; color: white; } #topmenu a.selected { border-bottom: none; background-color: #BBA592;color: #28231F !important; } #topmenu a.hover { border-bottom: none; background-color: #BBA592; color: #28231F !important; } /* following is to fix the table layout for IE < 8 */ #topmenu {display:inline-block;} #topmenu > li {display:inline-block;} #topmenu > li > a{ /*height: 48px; line-height:48px; */} /* menu drop down prep */ #topmenu ul { position: absolute; display: none; left: 0; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Sans Serif; font-size: .9em;} * html #topmenu ul { line-height: 0;} /* IE6 "fix" */ #topmenu ul a { zoom: 1; color: white;} /* IE6/7 fix */ #topmenu ul li { float: none; padding: 0px 0px; line-height:40px; min-height:40px; border-bottom: solid 0px #FFF; text-align: left; padding-left: 00px;} #topmenu ul li.isfirst { border-top: solid 0px #FFF; } #topmenu ul li.hover { } #topmenu ul li.selected { } #topmenu ul a.selected { } #topmenu ul ul { top: 0;} /* menu drop down sizing */ #topmenu ul { width: 240px; left: 0px; text-align: left;} #topmenu ul ul { left: 160px; } /* menu drop down positioning */ #topmenu ul > li > a { line-height: 1; line-height: 40px; min-height: 40px; padding-left: 10px;} #topmenu ul { top: @dropdown-top@; border: solid 1px #BBA592; border-top: none; line-height: 1; } /* drop shadows and central background */ #topmenu ul { box-shadow: 0 5px 10px 0px rgba(0,0,0,0.5); } #topmenu ul { background: white; color: #28231F; } #topmenu ul a { color: #28231F; } /*---------------------------------------------*/ /* Stylesheet: Form_Buttons*/ /*---- generic button styling -------*/ input[type="button"], input[type="submit"] { width: 73px; } button, input[type="button"], input[type="submit"], .button { border: 0; color: #fff !important; display: inline-block; background: #003366; font-size: 1em; text-transform: uppercase; font-style: normal; font-family: 'Roboto Slab', times, serif; font-weight: normal; padding: 4px 8px; border-radius: 2px; cursor: pointer; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:hover { background-color: #336699; transition: background-color 100ms; -webkit-transition: background-color 100ms; /* Safari */ } .button-light { color: #336699 !important; background-color: #f5f5f5 !important; } .button-light:hover { color: #fff !important; background-color: #000 !important;} .button-buy { color: white !important; background: -moz-linear-gradient( top, #35200b 0%, #35200a); background: -webkit-gradient( linear, left top, left bottom, from(#35200b), to(#35200a)); } .button a { color: white !important; } .button-dark, .button-tan { padding: 5px 20px; border: none; color: white; text-transform: uppercase; font-size: 1em;font-family: 'Roboto Slab', times, serif; background-color: #003366;} .button-dark, .button-tan { color: white !important; } input[type="textbox"],input[type="text"],input[type="password"] { border: solid 1px #999999;} textarea { border: solid 1px #999999;} /*----- generic style for generated forms -----*/ .ui-form-table { width: 100%; } .ui-form-table td { padding: 2px; } .ui-form-table textarea {font-family: Arial; width: 100%; height: 200px;} .ui-form-table input[type="text"] {width: 80%; } .ui-form-table input[type="textbox"] {width: 80%; } .ui-form-cell-input { width: 100%; } .ui-form-cell-label { padding-right: 10px; } /*.ui-form-checkbox-container { padding-left: 170px; } */ .col-single input[type="text"] {width: 90%; } .col-single input[type="textbox"] {width: 90%; } /*--------- placeholders styling -----------*/ ::-webkit-input-placeholder { text-transform: uppercase; font-size: .8em; font-family: 'Open Sans', sans-serif; color: #999999;} ::-moz-placeholder { text-transform: uppercase; font-size: .8em; font-family: 'Open Sans', sans-serif;color: #999999;} /* firefox 19+ */ :-ms-input-placeholder { text-transform: uppercase; font-size: .8em; font-family: 'Open Sans', sans-serif;color: #999999;} /* ie */ input:-moz-placeholder { text-transform: uppercase; font-size: .8em; font-family: 'Open Sans', sans-serif;color: #999999;} /*---------------------------------------------*/ /* Stylesheet: Editor Styles - styles available for the CMS editor*/ /*************** general *****************/ .text-double-size {font-size: 2em; line-height: 25px !important; margin-bottom: 20px !important; } .readmore { color: #336699 !important; text-transform: uppercase; font-size: .9em; text-align: left;} .readmore a { color: #336699 !important; text-transform: uppercase; text-decoration: none !important;} .ruler { border-top: solid 1px #cdc0b3; margin-bottom: 10px; } .ruler-double { border-top: solid 1px #cdc0b3; padding-bottom: 4px; border-bottom: solid 1px #cdc0b3; margin-bottom: 10px; } .ruler-dot { border-top: dotted 1px #cdc0b3; margin-bottom: 10px; } .date { font-size: .9em; font-style: italic;} .highlight { background-color: yellow; } /********** quotes ****************/ .quote-text:before { /*content: "\00AB";*/ content: "\201C"; margin-right: 6px; font-family: times, serif; font-size: 1.5em; } .quote-text:after { /*content: "\00BB";*/ content: "\201D"; margin-left: 6px; font-family: times, serif; font-size: 1.5em; } .quote-text { font-style: italic; font-size: 1.2em; } .quote-author:before { content: "\2014"; margin-right: 6px; } .quote-author { font-weight: bold; text-align: right; } /*---------------------------------------------*/ /* Stylesheet: slideshow*/ .photo img { display: block; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.7); margin-bottom: 20px;} .photo { } .photo-left { float: left; margin-right: 20px; } .photo-right { float: right; margin-left: 20px; } .photo-round { border-radius: 50%; display: block; width: 225px; height: 225px; background: center; color: white !important; text-shadow: 0 0 5px #000; line-height: 225px; text-transform: uppercase; font-size: 1.8em; text-align: center; font-family: 'Roboto Slab', times, serif; border: solid 10px #eee; box-sizing: border-box;} .photo-round:hover { border: solid 10px #28231F;} /* fix fancy box - match all elements with id containing "fancybox" - it doesn't support the box-sizing: border-box*/ [id|="fancybox"] { box-sizing: content-box !important; } /* images */ .thumb, .ui-photo-list-item {} .thumb, .ui-photo-list-item { margin-bottom: 10px;} .thumb img,.ui-photo-list-item img{ display: block; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.7);} /* slideshow pager */ .slideshow-pager a img { border: solid 2px white; margin-right: 5px; background-color: #fff;} .slideshow-pager a.activeSlide img { border: solid 2px black; background-color: #fff;} /* captions */ .slideshow .caption { font-size: .9em; margin-bottom: 10px; margin-top: -10px; text-align: right;} .ui-photo-caption { font-size: .9em; margin-bottom: 10px; margin-top: -10px;text-align: right;} /*---------------------------------------------*/ /* Stylesheet: Responsive*/ .img-responsive { width: 100%; height: auto; } .img-responsive img { width: 100%; height: auto; } .img-rounded { border-radius: 4px; } .img-circle { border-radius: 50%; } .img-thumbnail { border-radius: 2px; background: white; padding: 4px; box-shadow: 0 0 1px rgba(0,0,0,.2);} .img-placeholder { border: solid 1px #c0c0c0; display: block;} /* large screens */ @media screen and (min-width:768px) { .mobile-hide {display:none;} .responsive-lg {} .responsive-sm {display: none;} #navmobile { display: none; } } /* mobile screens */ @media screen and (max-width:768px) { .responsive-lg {display: none;} .responsive-sm {} a { word-wrap: break-word; } /*.template { min-width: 300px; display: none;}*/ /* fix the header */ .bg-header { height: auto; margin-bottom: 0;} .bg-header > .x-cell{ height: auto !important; } .bg-header #toplogo { position: static !important; width: 160px !important; margin-top: 10px; margin-bottom: 10px; height: auto !important; } .bg-header #toptext { position: static !important; height: auto !important; } .bg-header #topsearch { display: none; } .bg-header #toptext table { width: 100%; } .bg-header #toptext table td a { min-width:0; } /* fix photos */ #template-input-Mmainarticle img { width: 100% !important; height: auto !important; } .photo-left { float: none !important; margin-right: 0 !important;} .photo-right { float: none !important; margin-left: 0 !important;} /* fix forecasts */ .nws-forecast { float: none !important; width: 100% !important; } .home-item { width: 100% !important; float: none !important;} /* and the header nav */ .bg-menu { height: auto !important; } .bg-menu .inner { bottom: 0; padding: 10px;} #topmenu { display: none; } #navmobile { text-align: center; position: relative; } #navmobile select {width: 100%;} .selectcontainer { width: 100%; margin: 0 30px; color: white; background: url(/pub/photo/icon-grip.png) no-repeat right center; padding-right: 26px; } .selectcontainer select { width: 150px; } /* fix focus */ .bg-focus > .x-cell { height: auto !important; } /* generic block and cells reset */ .x-block { padding: 0 10px; width: 100% !important;} .bg-dark, .bg-tan, .bg-light, .bg-clear, .bg-footer { padding: 10px !important; } .x-block > .x-cell { width: 100% !important; padding: 0 !important;} .x-block > .x-cell-container { width: 100% !important; padding: 0 !important;} .master-col-left,.master-col-right,.layout-col-left,.layout-col-right { float: none!important;} .col-single, .col-double, .col-half, .col-third, .col-quarter { width: 100% !important;} /*.inner { padding: 10px 10px !important; } /* 1px prevents bottom margin errors on chrome */ .scale > img { width: 100%; height: auto;} iframe { width: 100%; } /* setup elastic tables */ table.elastic { display: block; } table.elastic > tbody { display: block; } table.elastic > tr, table.elastic > tbody > tr { display: block; } table.elastic > tr > td, table.elastic > tbody > tr > td { display: block; margin: } div.padded-copy { padding: 0 !important; } /*------------ CUSTOM -------------*/ .home-item { float: none !important; margin-right: 0 !important; } /* footer */ .bg-footer .x-cell { padding: 0 10px !important; box-sizing: border-box; -moz-box-sizing: border-box;} .bg-footer table.elastic tbody { display: block;} /* forms */ .split-div { width: 100%;} .ui-form-table input[type="text"] { width: 100%;} .ui-form-table input[type="textbox"] { width: 100%;} .ui-form-table input[type="password"] { width: 100%;} .ui-form-table textarea { width: 100%; height: 200px;} } /*---------------------------------------------*/ /* Stylesheet: Grid for Editor AND Website*/ /* regular grid definition here - must be after above overrides */ /* grid definition 960px - bootstrap style */ *[class*="col-md-"] { float: left; margin: 0 10px; } /* 20px gutter */ .col-md-1 { width: calc(100% / 12 * 1 - 20px); } .col-md-2 { width: calc(100% / 12 * 2 - 20px); } .col-md-3 { width: calc(100% / 12 * 3 - 20px); } .col-md-4 { width: calc(100% / 12 * 4 - 20px); } .col-md-5 { width: calc(100% / 12 * 5 - 20px); } .col-md-6 { width: calc(100% / 12 * 6 - 20px); } .col-md-7 { width: calc(100% / 12 * 7 - 20px); } .col-md-8 { width: calc(100% / 12 * 8 - 20px); } .col-md-9 { width: calc(100% / 12 * 9 - 20px); } .col-md-10 { width: calc(100% / 12 * 10 - 20px); } .col-md-11 { width: calc(100% / 12 * 11 - 20px); } .col-md-12 { width: calc(100% / 12 * 12 - 20px); } *[class*="len-md-"] { padding: 0 10px; } /* 20px gutter, no float */ .len-md-1 { width: calc(100% / 12 * 1 - 20px); } .len-md-2 { width: calc(100% / 12 * 2 - 20px); } .len-md-3 { width: calc(100% / 12 * 3 - 20px); } .len-md-4 { width: calc(100% / 12 * 4 - 20px); } .len-md-5 { width: calc(100% / 12 * 5 - 20px); } .len-md-6 { width: calc(100% / 12 * 6 - 20px); } .len-md-7 { width: calc(100% / 12 * 7 - 20px); } .len-md-8 { width: calc(100% / 12 * 8 - 20px); } .len-md-9 { width: calc(100% / 12 * 9 - 20px); } .len-md-10 { width: calc(100% / 12 * 10 - 20px); } .len-md-11 { width: calc(100% / 12 * 11 - 20px); } .len-md-12 { width: calc(100% / 12 * 12 - 20px); } *[class*="col-xs-"] { float: left; margin: 0 10px; } /* 20px gutter */ .col-xs-1 { width: calc(100% / 12 * 1 - 20px); } .col-xs-2 { width: calc(100% / 12 * 2 - 20px); } .col-xs-3 { width: calc(100% / 12 * 3 - 20px); } .col-xs-4 { width: calc(100% / 12 * 4 - 20px); } .col-xs-5 { width: calc(100% / 12 * 5 - 20px); } .col-xs-6 { width: calc(100% / 12 * 6 - 20px); } .col-xs-7 { width: calc(100% / 12 * 7 - 20px); } .col-xs-8 { width: calc(100% / 12 * 8 - 20px); } .col-xs-9 { width: calc(100% / 12 * 9 - 20px); } .col-xs-10 { width: calc(100% / 12 * 10 - 20px); } .col-xs-11 { width: calc(100% / 12 * 11 - 20px); } .col-xs-12 { width: calc(100% / 12 * 12 - 20px); } .clearfix { margin: 0 !important; } .clearfix::after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0px; clear: both; } /* margin fix when we don't want margins */ .nomargin[class*="col-md-"] { margin: 0 ; } .nomargin.col-md-1 { width: calc(100% / 12 * 1) ; } .nomargin.col-md-2 { width: calc(100% / 12 * 2) ; } .nomargin.col-md-3 { width: calc(100% / 12 * 3) ; } .nomargin.col-md-4 { width: calc(100% / 12 * 4) ; } .nomargin.col-md-5 { width: calc(100% / 12 * 5) ; } .nomargin.col-md-6 { width: calc(100% / 12 * 6) ; } .nomargin.col-md-7 { width: calc(100% / 12 * 7) ; } .nomargin.col-md-8 { width: calc(100% / 12 * 8) ; } .nomargin.col-md-9 { width: calc(100% / 12 * 9) ; } .nomargin.col-md-10 { width: calc(100% / 12 * 10) ; } .nomargin.col-md-11 { width: calc(100% / 12 * 11) ; } .nomargin.col-md-12 { width: calc(100% / 12 * 12) ; } .nomargin[class*="col-xs-"] { margin: 0 ; } .nomargin.col-xs-1 { width: calc(100% / 12 * 1) ; } .nomargin.col-xs-2 { width: calc(100% / 12 * 2) ; } .nomargin.col-xs-3 { width: calc(100% / 12 * 3) ; } .nomargin.col-xs-4 { width: calc(100% / 12 * 4) ; } .nomargin.col-xs-5 { width: calc(100% / 12 * 5) ; } .nomargin.col-xs-6 { width: calc(100% / 12 * 6) ; } .nomargin.col-xs-7 { width: calc(100% / 12 * 7) ; } .nomargin.col-xs-8 { width: calc(100% / 12 * 8) ; } .nomargin.col-xs-9 { width: calc(100% / 12 * 9) ; } .nomargin.col-xs-10 { width: calc(100% / 12 * 10) ; } .nomargin.col-xs-11 { width: calc(100% / 12 * 11) ; } .nomargin.col-xs-12 { width: calc(100% / 12 * 12) ; } /* responsiveness fold */ @media screen and (max-width:768px) { *[class*="col-md-"] { float: none !important; width: calc(100% - 20px) !important; margin: 0 10px !important;} /* keep the margin gutter of 10px on either side */ *[class*="len-md-"] { width: calc(100% - 20px) !important; padding: 0 10px !important;} /* keep the padding gutter of 10px on either side */ /* don't do anything to -xs- columns. They need to keep their sizes */ } /* Bootstrap: Extra small devices Phones (<768px) - col-xs. Horizontal at all times Small devices Tablets (≥768px) - col-sm (LVSYS: same as col-md). Collapsed to start, horizontal above breakpoints Medium devices Desktops (≥992px) - col-md (LVSYS default). Collapsed to start, horizontal above breakpoints Large devices Desktops (≥1200px) - col-lg (LVSYS: same as col-md). Collapsed to start, horizontal above breakpoints http://getbootstrap.com/css/ */ /* mobile screens */ @media screen and (max-width:768px) { *[class*="visible-xs"] {} *[class*="visible-sm"] {display: none !important;} *[class*="visible-md"] {display: none !important;} *[class*="visible-lg"] {display: none !important;} *[class*="hidden-xs"] { display: none !important;} /* lvsys grid */ *[class*="hidden-sm"] {} *[class*="hidden-md"] {} /* lvsys grid */ *[class*="hidden-lg"] {} } /* large screens */ @media screen and (min-width:768px) { *[class*="visible-xs"] {display: none !important;} *[class*="visible-sm"] {} *[class*="visible-md"] {} *[class*="visible-lg"] {} *[class*="hidden-xs"] { } /* lvsys grid */ *[class*="hidden-sm"] {display: none !important;} *[class*="hidden-md"] {display: none !important;} /* lvsys grid */ *[class*="hidden-lg"] {display: none !important;} } /*---------------------------------------------*/ /* Stylesheet: Ratios*/ .ratio-box-1-1 { position: relative; width: 100%; height: 0; padding-top: 100%; box-sizing: border-box;} .ratio-box-1-1 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-1-2 { position: relative; width: 100%; height: 0; padding-top: 200%; box-sizing: border-box;} .ratio-box-1-2 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-2-1 { position: relative; width: 100%; height: 0; padding-top: 50%; box-sizing: border-box;} .ratio-box-2-1 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-4-3 { position: relative; width: 100%; height: 0; padding-top: 75%; box-sizing: border-box;} .ratio-box-4-3 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-16-9 { position: relative; width: 100%; height: 0; padding-top: 56.25%; box-sizing: border-box;} .ratio-box-16-9 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-5-4 { position: relative; width: 100%; height: 0; padding-top: 80%; box-sizing: border-box;} .ratio-box-5-4 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-3-2 { position: relative; width: 100%; height: 0; padding-top: 66%; box-sizing: border-box;} .ratio-box-3-2 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} /* custom ratios */ .ratio-box-1 { position: relative; width: 100%; height: 0; padding-top: 1%; box-sizing: border-box;} .ratio-box-1 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-2 { position: relative; width: 100%; height: 0; padding-top: 2%; box-sizing: border-box;} .ratio-box-2 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-3 { position: relative; width: 100%; height: 0; padding-top: 3%; box-sizing: border-box;} .ratio-box-3 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-4 { position: relative; width: 100%; height: 0; padding-top: 4%; box-sizing: border-box;} .ratio-box-4 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-5 { position: relative; width: 100%; height: 0; padding-top: 5%; box-sizing: border-box;} .ratio-box-5 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-6 { position: relative; width: 100%; height: 0; padding-top: 6%; box-sizing: border-box;} .ratio-box-6 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-7 { position: relative; width: 100%; height: 0; padding-top: 7%; box-sizing: border-box;} .ratio-box-7 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-8 { position: relative; width: 100%; height: 0; padding-top: 8%; box-sizing: border-box;} .ratio-box-8 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-9 { position: relative; width: 100%; height: 0; padding-top: 9%; box-sizing: border-box;} .ratio-box-9 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-10 { position: relative; width: 100%; height: 0; padding-top: 10%; box-sizing: border-box;} .ratio-box-10 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-11 { position: relative; width: 100%; height: 0; padding-top: 11%; box-sizing: border-box;} .ratio-box-11 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-12 { position: relative; width: 100%; height: 0; padding-top: 12%; box-sizing: border-box;} .ratio-box-12 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-13 { position: relative; width: 100%; height: 0; padding-top: 13%; box-sizing: border-box;} .ratio-box-13 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-14 { position: relative; width: 100%; height: 0; padding-top: 14%; box-sizing: border-box;} .ratio-box-14 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-15 { position: relative; width: 100%; height: 0; padding-top: 15%; box-sizing: border-box;} .ratio-box-15 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-16 { position: relative; width: 100%; height: 0; padding-top: 16%; box-sizing: border-box;} .ratio-box-16 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-17 { position: relative; width: 100%; height: 0; padding-top: 17%; box-sizing: border-box;} .ratio-box-17 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-18 { position: relative; width: 100%; height: 0; padding-top: 18%; box-sizing: border-box;} .ratio-box-18 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-19 { position: relative; width: 100%; height: 0; padding-top: 19%; box-sizing: border-box;} .ratio-box-19 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-20 { position: relative; width: 100%; height: 0; padding-top: 20%; box-sizing: border-box;} .ratio-box-20 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-21 { position: relative; width: 100%; height: 0; padding-top: 21%; box-sizing: border-box;} .ratio-box-21 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-22 { position: relative; width: 100%; height: 0; padding-top: 22%; box-sizing: border-box;} .ratio-box-22 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-23 { position: relative; width: 100%; height: 0; padding-top: 23%; box-sizing: border-box;} .ratio-box-23 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-24 { position: relative; width: 100%; height: 0; padding-top: 24%; box-sizing: border-box;} .ratio-box-24 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-25 { position: relative; width: 100%; height: 0; padding-top: 25%; box-sizing: border-box;} .ratio-box-25 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-26 { position: relative; width: 100%; height: 0; padding-top: 26%; box-sizing: border-box;} .ratio-box-26 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-27 { position: relative; width: 100%; height: 0; padding-top: 27%; box-sizing: border-box;} .ratio-box-27 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-28 { position: relative; width: 100%; height: 0; padding-top: 28%; box-sizing: border-box;} .ratio-box-28 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-29 { position: relative; width: 100%; height: 0; padding-top: 29%; box-sizing: border-box;} .ratio-box-29 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-30 { position: relative; width: 100%; height: 0; padding-top: 30%; box-sizing: border-box;} .ratio-box-30 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-31 { position: relative; width: 100%; height: 0; padding-top: 31%; box-sizing: border-box;} .ratio-box-31 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-32 { position: relative; width: 100%; height: 0; padding-top: 32%; box-sizing: border-box;} .ratio-box-32 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-33 { position: relative; width: 100%; height: 0; padding-top: 33%; box-sizing: border-box;} .ratio-box-33 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-34 { position: relative; width: 100%; height: 0; padding-top: 34%; box-sizing: border-box;} .ratio-box-34 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-35 { position: relative; width: 100%; height: 0; padding-top: 35%; box-sizing: border-box;} .ratio-box-35 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-36 { position: relative; width: 100%; height: 0; padding-top: 36%; box-sizing: border-box;} .ratio-box-36 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-37 { position: relative; width: 100%; height: 0; padding-top: 37%; box-sizing: border-box;} .ratio-box-37 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-38 { position: relative; width: 100%; height: 0; padding-top: 38%; box-sizing: border-box;} .ratio-box-38 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-39 { position: relative; width: 100%; height: 0; padding-top: 39%; box-sizing: border-box;} .ratio-box-39 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-40 { position: relative; width: 100%; height: 0; padding-top: 40%; box-sizing: border-box;} .ratio-box-40 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-41 { position: relative; width: 100%; height: 0; padding-top: 41%; box-sizing: border-box;} .ratio-box-41 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-42 { position: relative; width: 100%; height: 0; padding-top: 42%; box-sizing: border-box;} .ratio-box-42 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-43 { position: relative; width: 100%; height: 0; padding-top: 43%; box-sizing: border-box;} .ratio-box-43 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-44 { position: relative; width: 100%; height: 0; padding-top: 44%; box-sizing: border-box;} .ratio-box-44 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-45 { position: relative; width: 100%; height: 0; padding-top: 45%; box-sizing: border-box;} .ratio-box-45 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-46 { position: relative; width: 100%; height: 0; padding-top: 46%; box-sizing: border-box;} .ratio-box-46 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-47 { position: relative; width: 100%; height: 0; padding-top: 47%; box-sizing: border-box;} .ratio-box-47 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-48 { position: relative; width: 100%; height: 0; padding-top: 48%; box-sizing: border-box;} .ratio-box-48 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-49 { position: relative; width: 100%; height: 0; padding-top: 49%; box-sizing: border-box;} .ratio-box-49 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-50 { position: relative; width: 100%; height: 0; padding-top: 50%; box-sizing: border-box;} .ratio-box-50 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-51 { position: relative; width: 100%; height: 0; padding-top: 51%; box-sizing: border-box;} .ratio-box-51 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-52 { position: relative; width: 100%; height: 0; padding-top: 52%; box-sizing: border-box;} .ratio-box-52 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-53 { position: relative; width: 100%; height: 0; padding-top: 53%; box-sizing: border-box;} .ratio-box-53 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-54 { position: relative; width: 100%; height: 0; padding-top: 54%; box-sizing: border-box;} .ratio-box-54 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-55 { position: relative; width: 100%; height: 0; padding-top: 55%; box-sizing: border-box;} .ratio-box-55 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-56 { position: relative; width: 100%; height: 0; padding-top: 56%; box-sizing: border-box;} .ratio-box-56 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-57 { position: relative; width: 100%; height: 0; padding-top: 57%; box-sizing: border-box;} .ratio-box-57 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-58 { position: relative; width: 100%; height: 0; padding-top: 58%; box-sizing: border-box;} .ratio-box-58 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-59 { position: relative; width: 100%; height: 0; padding-top: 59%; box-sizing: border-box;} .ratio-box-59 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-60 { position: relative; width: 100%; height: 0; padding-top: 60%; box-sizing: border-box;} .ratio-box-60 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-61 { position: relative; width: 100%; height: 0; padding-top: 61%; box-sizing: border-box;} .ratio-box-61 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-62 { position: relative; width: 100%; height: 0; padding-top: 62%; box-sizing: border-box;} .ratio-box-62 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-63 { position: relative; width: 100%; height: 0; padding-top: 63%; box-sizing: border-box;} .ratio-box-63 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-64 { position: relative; width: 100%; height: 0; padding-top: 64%; box-sizing: border-box;} .ratio-box-64 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-65 { position: relative; width: 100%; height: 0; padding-top: 65%; box-sizing: border-box;} .ratio-box-65 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-66 { position: relative; width: 100%; height: 0; padding-top: 66%; box-sizing: border-box;} .ratio-box-66 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-67 { position: relative; width: 100%; height: 0; padding-top: 67%; box-sizing: border-box;} .ratio-box-67 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-68 { position: relative; width: 100%; height: 0; padding-top: 68%; box-sizing: border-box;} .ratio-box-68 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-69 { position: relative; width: 100%; height: 0; padding-top: 69%; box-sizing: border-box;} .ratio-box-69 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-70 { position: relative; width: 100%; height: 0; padding-top: 70%; box-sizing: border-box;} .ratio-box-70 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-71 { position: relative; width: 100%; height: 0; padding-top: 71%; box-sizing: border-box;} .ratio-box-71 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-72 { position: relative; width: 100%; height: 0; padding-top: 72%; box-sizing: border-box;} .ratio-box-72 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-73 { position: relative; width: 100%; height: 0; padding-top: 73%; box-sizing: border-box;} .ratio-box-73 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-74 { position: relative; width: 100%; height: 0; padding-top: 74%; box-sizing: border-box;} .ratio-box-74 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-75 { position: relative; width: 100%; height: 0; padding-top: 75%; box-sizing: border-box;} .ratio-box-75 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-76 { position: relative; width: 100%; height: 0; padding-top: 76%; box-sizing: border-box;} .ratio-box-76 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-77 { position: relative; width: 100%; height: 0; padding-top: 77%; box-sizing: border-box;} .ratio-box-77 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-78 { position: relative; width: 100%; height: 0; padding-top: 78%; box-sizing: border-box;} .ratio-box-78 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-79 { position: relative; width: 100%; height: 0; padding-top: 79%; box-sizing: border-box;} .ratio-box-79 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-80 { position: relative; width: 100%; height: 0; padding-top: 80%; box-sizing: border-box;} .ratio-box-80 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-81 { position: relative; width: 100%; height: 0; padding-top: 81%; box-sizing: border-box;} .ratio-box-81 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-82 { position: relative; width: 100%; height: 0; padding-top: 82%; box-sizing: border-box;} .ratio-box-82 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-83 { position: relative; width: 100%; height: 0; padding-top: 83%; box-sizing: border-box;} .ratio-box-83 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-84 { position: relative; width: 100%; height: 0; padding-top: 84%; box-sizing: border-box;} .ratio-box-84 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-85 { position: relative; width: 100%; height: 0; padding-top: 85%; box-sizing: border-box;} .ratio-box-85 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-86 { position: relative; width: 100%; height: 0; padding-top: 86%; box-sizing: border-box;} .ratio-box-86 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-87 { position: relative; width: 100%; height: 0; padding-top: 87%; box-sizing: border-box;} .ratio-box-87 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-88 { position: relative; width: 100%; height: 0; padding-top: 88%; box-sizing: border-box;} .ratio-box-88 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-89 { position: relative; width: 100%; height: 0; padding-top: 89%; box-sizing: border-box;} .ratio-box-89 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-90 { position: relative; width: 100%; height: 0; padding-top: 90%; box-sizing: border-box;} .ratio-box-90 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-91 { position: relative; width: 100%; height: 0; padding-top: 91%; box-sizing: border-box;} .ratio-box-91 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-92 { position: relative; width: 100%; height: 0; padding-top: 92%; box-sizing: border-box;} .ratio-box-92 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-93 { position: relative; width: 100%; height: 0; padding-top: 93%; box-sizing: border-box;} .ratio-box-93 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-94 { position: relative; width: 100%; height: 0; padding-top: 94%; box-sizing: border-box;} .ratio-box-94 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-95 { position: relative; width: 100%; height: 0; padding-top: 95%; box-sizing: border-box;} .ratio-box-95 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-96 { position: relative; width: 100%; height: 0; padding-top: 96%; box-sizing: border-box;} .ratio-box-96 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-97 { position: relative; width: 100%; height: 0; padding-top: 97%; box-sizing: border-box;} .ratio-box-97 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-98 { position: relative; width: 100%; height: 0; padding-top: 98%; box-sizing: border-box;} .ratio-box-98 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-99 { position: relative; width: 100%; height: 0; padding-top: 99%; box-sizing: border-box;} .ratio-box-99 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-100 { position: relative; width: 100%; height: 0; padding-top: 100%; box-sizing: border-box;} .ratio-box-100 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-101 { position: relative; width: 100%; height: 0; padding-top: 101%; box-sizing: border-box;} .ratio-box-101 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-102 { position: relative; width: 100%; height: 0; padding-top: 102%; box-sizing: border-box;} .ratio-box-102 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-103 { position: relative; width: 100%; height: 0; padding-top: 103%; box-sizing: border-box;} .ratio-box-103 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-104 { position: relative; width: 100%; height: 0; padding-top: 104%; box-sizing: border-box;} .ratio-box-104 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-105 { position: relative; width: 100%; height: 0; padding-top: 105%; box-sizing: border-box;} .ratio-box-105 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-106 { position: relative; width: 100%; height: 0; padding-top: 106%; box-sizing: border-box;} .ratio-box-106 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-107 { position: relative; width: 100%; height: 0; padding-top: 107%; box-sizing: border-box;} .ratio-box-107 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-108 { position: relative; width: 100%; height: 0; padding-top: 108%; box-sizing: border-box;} .ratio-box-108 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-109 { position: relative; width: 100%; height: 0; padding-top: 109%; box-sizing: border-box;} .ratio-box-109 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-110 { position: relative; width: 100%; height: 0; padding-top: 110%; box-sizing: border-box;} .ratio-box-110 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-111 { position: relative; width: 100%; height: 0; padding-top: 111%; box-sizing: border-box;} .ratio-box-111 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-112 { position: relative; width: 100%; height: 0; padding-top: 112%; box-sizing: border-box;} .ratio-box-112 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-113 { position: relative; width: 100%; height: 0; padding-top: 113%; box-sizing: border-box;} .ratio-box-113 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-114 { position: relative; width: 100%; height: 0; padding-top: 114%; box-sizing: border-box;} .ratio-box-114 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-115 { position: relative; width: 100%; height: 0; padding-top: 115%; box-sizing: border-box;} .ratio-box-115 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-116 { position: relative; width: 100%; height: 0; padding-top: 116%; box-sizing: border-box;} .ratio-box-116 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-117 { position: relative; width: 100%; height: 0; padding-top: 117%; box-sizing: border-box;} .ratio-box-117 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-118 { position: relative; width: 100%; height: 0; padding-top: 118%; box-sizing: border-box;} .ratio-box-118 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-119 { position: relative; width: 100%; height: 0; padding-top: 119%; box-sizing: border-box;} .ratio-box-119 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-120 { position: relative; width: 100%; height: 0; padding-top: 120%; box-sizing: border-box;} .ratio-box-120 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-121 { position: relative; width: 100%; height: 0; padding-top: 121%; box-sizing: border-box;} .ratio-box-121 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-122 { position: relative; width: 100%; height: 0; padding-top: 122%; box-sizing: border-box;} .ratio-box-122 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-123 { position: relative; width: 100%; height: 0; padding-top: 123%; box-sizing: border-box;} .ratio-box-123 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-124 { position: relative; width: 100%; height: 0; padding-top: 124%; box-sizing: border-box;} .ratio-box-124 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-125 { position: relative; width: 100%; height: 0; padding-top: 125%; box-sizing: border-box;} .ratio-box-125 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-126 { position: relative; width: 100%; height: 0; padding-top: 126%; box-sizing: border-box;} .ratio-box-126 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-127 { position: relative; width: 100%; height: 0; padding-top: 127%; box-sizing: border-box;} .ratio-box-127 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-128 { position: relative; width: 100%; height: 0; padding-top: 128%; box-sizing: border-box;} .ratio-box-128 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-129 { position: relative; width: 100%; height: 0; padding-top: 129%; box-sizing: border-box;} .ratio-box-129 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-130 { position: relative; width: 100%; height: 0; padding-top: 130%; box-sizing: border-box;} .ratio-box-130 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-131 { position: relative; width: 100%; height: 0; padding-top: 131%; box-sizing: border-box;} .ratio-box-131 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-132 { position: relative; width: 100%; height: 0; padding-top: 132%; box-sizing: border-box;} .ratio-box-132 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-133 { position: relative; width: 100%; height: 0; padding-top: 133%; box-sizing: border-box;} .ratio-box-133 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-134 { position: relative; width: 100%; height: 0; padding-top: 134%; box-sizing: border-box;} .ratio-box-134 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-135 { position: relative; width: 100%; height: 0; padding-top: 135%; box-sizing: border-box;} .ratio-box-135 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-136 { position: relative; width: 100%; height: 0; padding-top: 136%; box-sizing: border-box;} .ratio-box-136 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-137 { position: relative; width: 100%; height: 0; padding-top: 137%; box-sizing: border-box;} .ratio-box-137 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-138 { position: relative; width: 100%; height: 0; padding-top: 138%; box-sizing: border-box;} .ratio-box-138 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-139 { position: relative; width: 100%; height: 0; padding-top: 139%; box-sizing: border-box;} .ratio-box-139 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-140 { position: relative; width: 100%; height: 0; padding-top: 140%; box-sizing: border-box;} .ratio-box-140 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-141 { position: relative; width: 100%; height: 0; padding-top: 141%; box-sizing: border-box;} .ratio-box-141 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-142 { position: relative; width: 100%; height: 0; padding-top: 142%; box-sizing: border-box;} .ratio-box-142 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-143 { position: relative; width: 100%; height: 0; padding-top: 143%; box-sizing: border-box;} .ratio-box-143 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-144 { position: relative; width: 100%; height: 0; padding-top: 144%; box-sizing: border-box;} .ratio-box-144 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-145 { position: relative; width: 100%; height: 0; padding-top: 145%; box-sizing: border-box;} .ratio-box-145 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-146 { position: relative; width: 100%; height: 0; padding-top: 146%; box-sizing: border-box;} .ratio-box-146 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-147 { position: relative; width: 100%; height: 0; padding-top: 147%; box-sizing: border-box;} .ratio-box-147 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-148 { position: relative; width: 100%; height: 0; padding-top: 148%; box-sizing: border-box;} .ratio-box-148 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-149 { position: relative; width: 100%; height: 0; padding-top: 149%; box-sizing: border-box;} .ratio-box-149 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-150 { position: relative; width: 100%; height: 0; padding-top: 150%; box-sizing: border-box;} .ratio-box-150 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-151 { position: relative; width: 100%; height: 0; padding-top: 151%; box-sizing: border-box;} .ratio-box-151 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-152 { position: relative; width: 100%; height: 0; padding-top: 152%; box-sizing: border-box;} .ratio-box-152 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-153 { position: relative; width: 100%; height: 0; padding-top: 153%; box-sizing: border-box;} .ratio-box-153 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-154 { position: relative; width: 100%; height: 0; padding-top: 154%; box-sizing: border-box;} .ratio-box-154 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-155 { position: relative; width: 100%; height: 0; padding-top: 155%; box-sizing: border-box;} .ratio-box-155 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-156 { position: relative; width: 100%; height: 0; padding-top: 156%; box-sizing: border-box;} .ratio-box-156 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-157 { position: relative; width: 100%; height: 0; padding-top: 157%; box-sizing: border-box;} .ratio-box-157 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-158 { position: relative; width: 100%; height: 0; padding-top: 158%; box-sizing: border-box;} .ratio-box-158 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-159 { position: relative; width: 100%; height: 0; padding-top: 159%; box-sizing: border-box;} .ratio-box-159 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-160 { position: relative; width: 100%; height: 0; padding-top: 160%; box-sizing: border-box;} .ratio-box-160 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-161 { position: relative; width: 100%; height: 0; padding-top: 161%; box-sizing: border-box;} .ratio-box-161 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-162 { position: relative; width: 100%; height: 0; padding-top: 162%; box-sizing: border-box;} .ratio-box-162 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-163 { position: relative; width: 100%; height: 0; padding-top: 163%; box-sizing: border-box;} .ratio-box-163 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-164 { position: relative; width: 100%; height: 0; padding-top: 164%; box-sizing: border-box;} .ratio-box-164 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-165 { position: relative; width: 100%; height: 0; padding-top: 165%; box-sizing: border-box;} .ratio-box-165 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-166 { position: relative; width: 100%; height: 0; padding-top: 166%; box-sizing: border-box;} .ratio-box-166 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-167 { position: relative; width: 100%; height: 0; padding-top: 167%; box-sizing: border-box;} .ratio-box-167 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-168 { position: relative; width: 100%; height: 0; padding-top: 168%; box-sizing: border-box;} .ratio-box-168 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-169 { position: relative; width: 100%; height: 0; padding-top: 169%; box-sizing: border-box;} .ratio-box-169 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-170 { position: relative; width: 100%; height: 0; padding-top: 170%; box-sizing: border-box;} .ratio-box-170 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-171 { position: relative; width: 100%; height: 0; padding-top: 171%; box-sizing: border-box;} .ratio-box-171 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-172 { position: relative; width: 100%; height: 0; padding-top: 172%; box-sizing: border-box;} .ratio-box-172 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-173 { position: relative; width: 100%; height: 0; padding-top: 173%; box-sizing: border-box;} .ratio-box-173 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-174 { position: relative; width: 100%; height: 0; padding-top: 174%; box-sizing: border-box;} .ratio-box-174 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-175 { position: relative; width: 100%; height: 0; padding-top: 175%; box-sizing: border-box;} .ratio-box-175 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-176 { position: relative; width: 100%; height: 0; padding-top: 176%; box-sizing: border-box;} .ratio-box-176 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-177 { position: relative; width: 100%; height: 0; padding-top: 177%; box-sizing: border-box;} .ratio-box-177 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-178 { position: relative; width: 100%; height: 0; padding-top: 178%; box-sizing: border-box;} .ratio-box-178 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-179 { position: relative; width: 100%; height: 0; padding-top: 179%; box-sizing: border-box;} .ratio-box-179 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-180 { position: relative; width: 100%; height: 0; padding-top: 180%; box-sizing: border-box;} .ratio-box-180 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-181 { position: relative; width: 100%; height: 0; padding-top: 181%; box-sizing: border-box;} .ratio-box-181 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-182 { position: relative; width: 100%; height: 0; padding-top: 182%; box-sizing: border-box;} .ratio-box-182 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-183 { position: relative; width: 100%; height: 0; padding-top: 183%; box-sizing: border-box;} .ratio-box-183 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-184 { position: relative; width: 100%; height: 0; padding-top: 184%; box-sizing: border-box;} .ratio-box-184 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-185 { position: relative; width: 100%; height: 0; padding-top: 185%; box-sizing: border-box;} .ratio-box-185 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-186 { position: relative; width: 100%; height: 0; padding-top: 186%; box-sizing: border-box;} .ratio-box-186 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-187 { position: relative; width: 100%; height: 0; padding-top: 187%; box-sizing: border-box;} .ratio-box-187 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-188 { position: relative; width: 100%; height: 0; padding-top: 188%; box-sizing: border-box;} .ratio-box-188 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-189 { position: relative; width: 100%; height: 0; padding-top: 189%; box-sizing: border-box;} .ratio-box-189 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-190 { position: relative; width: 100%; height: 0; padding-top: 190%; box-sizing: border-box;} .ratio-box-190 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-191 { position: relative; width: 100%; height: 0; padding-top: 191%; box-sizing: border-box;} .ratio-box-191 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-192 { position: relative; width: 100%; height: 0; padding-top: 192%; box-sizing: border-box;} .ratio-box-192 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-193 { position: relative; width: 100%; height: 0; padding-top: 193%; box-sizing: border-box;} .ratio-box-193 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-194 { position: relative; width: 100%; height: 0; padding-top: 194%; box-sizing: border-box;} .ratio-box-194 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-195 { position: relative; width: 100%; height: 0; padding-top: 195%; box-sizing: border-box;} .ratio-box-195 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-196 { position: relative; width: 100%; height: 0; padding-top: 196%; box-sizing: border-box;} .ratio-box-196 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-197 { position: relative; width: 100%; height: 0; padding-top: 197%; box-sizing: border-box;} .ratio-box-197 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-198 { position: relative; width: 100%; height: 0; padding-top: 198%; box-sizing: border-box;} .ratio-box-198 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-199 { position: relative; width: 100%; height: 0; padding-top: 199%; box-sizing: border-box;} .ratio-box-199 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .ratio-box-200 { position: relative; width: 100%; height: 0; padding-top: 200%; box-sizing: border-box;} .ratio-box-200 *:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}