/* Column code based on http://www.columnal.com/ and http://lessframework.com/ */ /*------------------------------------------------------------------ 1. CORE ------------------------------------------------------------------*/ .container {padding-left: 10px; padding-right: 10px;} .row {clear: both; width: 100%; max-width: 940px; margin: 0 auto; overflow: hidden;} .col_1, .col_2, .col_3, .col_4, .col_5, .col_5b, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12, .col_13, .col_14, .col_15, .col_two, .col_three, .col_four, .gallery_col_two, .gallery_col_three, .gallery_col_four {float: left; margin-right:2.128%; position: relative;} .col_1 {width: 4.255%;} .col_2 {width: 10.638%;} .col_3 {width: 17.021%;} .col_4 {width: 23.5%;} .col_5 {width: 29.787%;} .col_5b {width: 31.914%;} .col_6 {width: 36.17%;} .col_7 {width: 42.553%;} .col_8 {width: 48.936%;} .col_9 {width: 55.319%;} .col_10 {width: 61.702%;} .col_11 {width: 68.085%;} .col_12 {width: 74%;} .col_13 {width: 80.851%;} .col_14 {width: 87.234%;} .col_15 {width: 93.617%;} .col_16 {clear: both; width: 100%; float: left;} .col_1-3_wrap { padding: 0 5%; clear:both;} .col_1-3 {float: left; margin-right: 5%; position: relative; width:30%;} .last, .omega {margin-right: 0 !important;} img, object, embed {max-width: 100%;} .col_16 .col_two, .col_12 .col_two { width: 46%; margin-right: 4%;} .col_16 .col_three, .col_12 .col_three { width: 29%; margin-right: 4%;} .col_16 .col_four, .col_12 .col_four { width: 21%; margin-right: 4%;} .gallery_col_two, .gallery_col_three, .gallery_col_four { margin-right: 2.22%; margin-bottom:1.375em;} .gallery_col_two { width: 48.89%; } .gallery_col_three { width: 31.8533%; } .gallery_col_four { width: 23.335%; } /*.gallery_col_three { width: 31.333%; margin: 1%; }*/ /*----------------------------------------- Prefix and suffix ( horizontal spacing ) -----------------------------------------*/ /* Spacing before column */ .pre_1 {padding-left: 6.383%;} .pre_2 {padding-left: 12.766%;} .pre_3 {padding-left: 19.149%;} .pre_4 {padding-left: 25.532%;} .pre_5 {padding-left: 31.915%;} .pre_6 {padding-left: 38.298%;} .pre_7 {padding-left: 44.681%;} .pre_8 {padding-left: 51.064%;} .pre_9 {padding-left: 57.447%;} .pre_10 {padding-left: 63.83%;} .pre_11 {padding-left: 70.213%;} .pre_12 {padding-left: 76.596%;} .pre_13 {padding-left: 82.979%;} .pre_14 {padding-left: 89.362%;} .pre_15 {padding-left: 95.745%;} /* Spacing after column */ .suf_1 {padding-right: 6.383%;} .suf_2 {padding-right: 12.766%;} .suf_3 {padding-right: 19.149%;} .suf_4 {padding-right: 25.532%;} .suf_5 {padding-right: 31.915%;} .suf_6 {padding-right: 38.298%;} .suf_7 {padding-right: 44.681%;} .suf_8 {padding-right: 51.064%;} .suf_9 {padding-right: 57.447%;} .suf_10 {padding-right: 63.83%;} .suf_11 {padding-right: 70.213%;} .suf_12 {padding-right: 76.596%;} .suf_13 {padding-right: 82.979%;} .suf_14 {padding-right: 89.362%;} .suf_15 {padding-right: 95.745%;} /*----------------------------------------- Utility -----------------------------------------*/ .clear {clear:both !important;} .clearleft {clear:left !important;} .clearright {clear:right !important;} .textcenter {text-align:center;} .textright {text-align:right;} .textleft {text-align:left;} /* this will insert a pseduo element clears floats for an element containing floated content .selfclear:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}*/ .mobile-only {display: none;} /* Clearing */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clear:before, .clear:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }*/ /*------------------------------------------------------------------ Mobile ------------------------------------------------------------------*/ @media handheld, only screen and (max-width: 767px) { .body, .container { width: 100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } /* kill prefixes and suffixes, otherwise 1-column version breaks */ .pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11, .pre_12, .pre_13, .pre_14, .pre_15, .pre_16 {padding-left: 0;} .suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11, .suf_12, .suf_13, .suf_14, .suf_15, .suf_16 {padding-right: 0;} /* cssgrid.net - mobile presets */ .col_1, .col_2, .col_3, .col_4, .col_5, .col_5b, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12, .col_13, .col_14, .col_15, .col_16, .col_two, .col_three, .col_four { clear: both; float: none; margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; width: auto; width: -moz-available; } .col_1-3_wrap .col_1-3 { width: 100%; margin-right:0; } .col_16 .col_two , .col_12 .col_two, .col_16 .col_three , .col_12 .col_three, .col_16 .col_four , .col_12 .col_four { padding-left: 0; padding-right: 0; width: 100%; } .gallery_col_two, .gallery_col_three, .gallery_col_four { padding-left: 0; padding-right: 0; width: 50%; margin: 0;} /* .reverse {padding-top: 1em; margin-bottom: 1em;} */ /* Columnal content control - use on any elements to show/hide content on mobile */ .mobile-hide {display: none !important;} .mobile-only {display: block;} } /* TipTip CSS - Version 1.2 */ #tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; } #tiptip_holder.tip_top { padding-bottom: 5px; } #tiptip_holder.tip_bottom { padding-top: 5px; } #tiptip_holder.tip_right { padding-left: 5px; } #tiptip_holder.tip_left { padding-right: 5px; } #tiptip_content { font-size: 12px; color: #fff; text-shadow: 0 0 1px #000; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.25); background-color: rgb(25,25,25); background-color: rgba(25,25,25,0.92); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); } #tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; } #tiptip_holder.tip_top #tiptip_arrow { border-top-color: #fff; border-top-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #fff; border-bottom-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_right #tiptip_arrow { border-right-color: #fff; border-right-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_left #tiptip_arrow { border-left-color: #fff; border-left-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); } /* Webkit Hacks */ @media screen and (-webkit-min-device-pixel-ratio:0) { #tiptip_content { padding: 4px 8px 5px 8px; background-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color: rgba(20,20,20,0.92); } } /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{ background: #FFF;} #colorbox{} #cboxContent{margin-top:32px; overflow:visible;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{ background:#CCC; padding:1px; } #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#000;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../img/colorbox/controls.png) no-repeat 0 0;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious:hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext:hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose:hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}