/* Delancey */ /* Reset ------------------------------------------------------------ */ .videoWrapper { box-sizing: border-box; position: absolute; width:100%; padding-bottom: 50.25%; /* 16:9 */ padding-top: 0px; height: 0; margin-top:0px; overflow:hidden } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } html {margin:0px; height:100%} body { background:#646364; height:100%; color: #e6e0d7; font-family:Lato, Arial, helvetica, sans-serif; font-size:12px; margin:0px; font-weight:400; } #wrapper .mainInnerSplash {position:relative; height:100%; margin:0px auto; max-width:1030px; padding-top:0px; padding-bottom:0px; background-color:#848384} #wrapper .mainInnerSplash .mainPaddingSplash {position:relative; margin:0px auto; height:100%; max-width:1030px; transition:all 0.35s ease-in-out; } #wrapper .mainInnerSplash .mainPaddingSplash .border {position:relative; height:100%; border-left:8px solid #848384; border-right:8px solid #848384; margin:0px auto; background-image:url(../images/dot_tile.gif); background-position:center;} #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink {position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-32px; background-image:url(../images/splash_logo.gif); width:390px; height:65px; display:block; background-color:#848384; background-position:center; background-repeat:no-repeat; transition:all 0.35s ease-in-out;} #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink #splashDot {position:absolute; display:block; top:-19px; right: -18px; width: 25px; height: 25px; background: url(../images/splashDot.png) } #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink #splashDot_glow {position:absolute; display:block; top:-19px; right: -18px; width: 25px; height: 25px; background: url(../images/splashDot_glow.png) } #splashInner {position:relative; margin:0px auto; max-width:970px; height: 100%; overflow: hidden} #splashLine {position:absolute; width:1px; top:5%; height: 0; left: 20px; background: #848384;} #splashLink {position:absolute; top:120%; right: 20px; width:25px; height: 25px; } #splashDot2 {position:absolute; display:block; top:0; right: 0; width: 25px; height: 25px; background: url(/site_resources/delanceyv2/images/splashDot.png) } #splashDot2_glow {position:absolute; display:block; top:0; right: 0; width: 25px; height: 25px; background: url(/site_resources/delanceyv2/images/splashDot_glow.png) } #splashLink #splashDot2_tooltip { display:none; } #splashLink:hover #splashDot2_tooltip {cursor:pointer; display:block; position: absolute; top: 20px; right: 20px; width: auto; white-space:nowrap; padding: 5px; background: #e6e1d7; color: #646364; -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);} /* Main wrapper */ #wrapper {width: 100%;margin: 0px auto; height:100% } #wrapper .mainInner {position:relative; margin:0px auto; max-width:1030px; padding-top:0px; padding-bottom:0px; background-color:#848384} #wrapper .mainInner .mainPadding {position:relative; margin:0px auto; max-width:970px; padding:30px; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea {position:relative; height:autopx; margin-top:20px; margin-bottom:20px; font-size:13px; line-height:1.4em; } #wrapper .mainInner .mainPadding .contentArea h1 {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; line-height:65px } #wrapper .mainInner .mainPadding .contentArea h1.welcome {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:75px; transition:all 0.35s ease-in-out; margin:0px; border-top:1px solid #e6e0d7; line-height:85px; padding-top:10px; } #wrapper .mainInner .mainPadding .contentArea h2 {position:relative; font-weight:normal; font-family:Melbourne-Light ,Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px; transition:all 0.35s ease-in-out; margin:0px; margin-bottom:10px; } #wrapper .mainInner .mainPadding .contentArea .columnLeft {position:relative; width:40%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnRight {position:relative; width:40%; float:left; margin-left:5%; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnLeftContact {position:relative; width:60%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnRightContact {position:relative; width:25%; float:right; margin-left:5%; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .mobileTitle {position:relative; display:none; border-bottom:1px solid #e6e0d7; padding-bottom:15px; margin-bottom:15px;} #wrapper .mainInner .mainPadding .contentArea .mobileTitle h1 {position:relative; font-weight:normal; font-family:Melbourne-Light ,Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; line-height:55px; z-index:1;} #wrapper .mainInner .mainPadding .contentArea .deskTopTitle {position:relative; display:block; border-bottom:1px solid #e6e0d7; padding-bottom:15px; margin-bottom:15px; min-height:80px;} #wrapper .mainInner .mainPadding .contentArea .deskTopTitle h1 {position:relative; font-weight:normal; font-family:Melbourne-Light ,Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; padding-right:50%; line-height:55px; z-index:1; } #wrapper .mainInner .mainPadding .contentArea .deskTopTitle span {text-transform:lowercase} #wrapper .mainInner .mainPadding .contentArea .columnLeftPort {position:relative; width:47%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnLeftPort h1 {position:relative; font-weight:normal; font-family:Melbourne-Light ,Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; padding-right:50%; line-height:55px; } #wrapper .mainInner .mainPadding .contentArea .columnRightPort {position:relative; width:47%; float:right; margin-left:5%; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .footer {position:relative; padding-top:0px;} #wrapper .mainInner .mainPadding .footer a.logo {position:relative; display:block; float:right; background-image:url(../images/footer_logo.gif); width:136px; height:22px; margin-bottom:22px;} #wrapper .mainInner .mainPadding .footer .legal {position:relative; border-top:1px solid #e6e0d7; padding-top:10px; text-align:right; font-size:9px; color:#e6e0d7; text-transform:uppercase;} #wrapper .mainInner .mainPadding .footer .legal a {text-decoration:none;} #wrapper .mainInner .mainPadding .footer .legal p {margin:0px;} .fisd {text-transform:lowercase} .communityBreak {background-color:#e6e0d7; color:#646364; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; padding:5px; margin-top:10px; margin-bottom:10px;} /* Gallery */ #galleryContainer {position:relative; } #galleryContainer .imageContainer {padding-bottom:52%;} #galleryContainer .imageContainer .galleryImage {position:absolute; left: 0; top: 0; overflow: hidden; background-position: center;width:100%; height:0; display:block; padding-bottom:50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #galleryContainer .imageContainer .galleryNameContainer {position:absolute; display:block; right: 20px; bottom: 20px; width:150px; height: 0; padding-bottom: 150px; border-radius: 50%; background-color:#E6E0D7; vertical-align: middle; display: table; } #galleryContainer .imageContainer .galleryNameContainer .circleText {position:absolute; display:block; top: 45%; left: 10%; width: 85%; height: 100%; display: table; } #galleryContainer .imageContainer .galleryNameContainer .circleText p {display: table-cell; vertical-align: middle; margin:0px; } #galleryContainer .imageContainer .galleryNameContainer .circleText .circleTextInner {margin-top: -0.5em; color: #333; font-size: 18px; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; display: table;} #galleryContainer .imageContainer .feedbackContainer {position:absolute; width:31%; height:100%; background: rgba(229, 223, 216,1); padding:20px; color:#706e6f; box-sizing: border-box; } #galleryContainer .imageContainer .circle {position:absolute; width:50%; top:-33%; left:-13.9%; height:170%; background-color:#e5dfd8; border-radius: 50%;} #galleryContainer .imageContainer .feedbackContainer .vertical {position:absolute; bottom:0px;} #galleryContainer .imageContainer .feedbackContainer .vertical .title {position:relative; color: #514f50; font-family:Lato, Arial, helvetica, sans-serif; font-size:12px; padding-bottom:0px; font-weight:400; line-height:14px; text-transform:uppercase;} @media screen and (max-width: 766px) { #galleryContainer .imageContainer .feedbackContainer {position:absolute; bottom:0px; width:100%; height:auto; background: rgba(229, 223, 216, 0.8); padding:20px; color:#000000} #galleryContainer .imageContainer .circle {display:none;} #galleryContainer .imageContainer .feedbackContainer .vertical {position:relative; bottom:0px;} } #galleryContainer ul#galleryButtons {position:absolute; top: 5px; left: 10px; list-style:none; padding: 0; margin: 0; } #galleryContainer ul#galleryButtons li{position:relative; float: left; padding:0; margin: 0;} #galleryContainer ul#galleryButtons li a {position: relative; float: left; width: 16px; height: 16px; font-size: 25px; color: #FFFFFF; text-align: center; text-decoration:none } #galleryContainer ul#galleryButtons li a.over {color: #646364; text-decoration:none; } #galleryContainer ul#galleryButtons li a:hover {color: #646364; text-decoration:none; } #galleryContainer #galleryThumbs {position: relative; display:none; right: 0; top: 0px; width: 744px; height: auto; padding-top:20px;} #galleryContainer #galleryThumbs a.out {position: relative; display:block; width: 88px; height: 74px; border: 0px solid #111; float:left; margin-right:3px; margin-bottom:3px;} #galleryContainer #galleryThumbs a.out:hover {border: 0px solid #FFFFFF;} #galleryContainer #galleryThumbs a.out img {} .galleryTab {position:relative; width:33.333333%; float:left;} .galleryTab a {position:relative; width: 100%; display:block; text-align:center; background-color:#646364; padding:7px 0 7px 0;text-decoration:none; transition:all 0.15s ease-in-out; text-transform:uppercase; font-size:11px;} .galleryTab a:hover {background-color:#e6e0d7; color:#646364} .galleryTab a.over {background-color:#e6e0d7; color:#646364} .galleryTab a.over span {display: inline-block; width: 8px; height: 8px; background-color:#646364; border-radius: 50%; margin-right:5px; } #whatGalleryContainer {position:relative; } #whatGalleryContainer .imageContainer {padding-bottom:52.5%; height: 0; background:#646364; overflow: hidden;} #whatGalleryContainer .imageContainer .galleryImage {position:absolute; left: 0; top: 0; height: auto;} #whatGalleryContainer .imageContainer .galleryImage img {width: 100%;} #whatGalleryContainer .imageContainer .whatNameContainer {position:absolute; bottom: 0; left: 0; padding:10px; width:33%; background: #646364 ;font-size:11px; transition:all 0.15s ease-in-out; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box; /* Firefox, other Gecko */box-sizing: border-box; } #whatGalleryContainer .imageContainer .whatNameContainer .whatTitle {text-transform:uppercase;} #whatGalleryContainer .imageContainer .galleryNameContainer {position:absolute; display:block; right: 20px; bottom: 20px; width:150px; height: 0; padding-bottom: 150px; border-radius: 50%; background-color:#E6E0D7; vertical-align: middle; } #whatGalleryContainer .imageContainer .galleryNameContainer .circleText {position:absolute; display:block; top: 50%; left: 10%; width: 80%; height: 0;} #whatGalleryContainer .imageContainer .galleryNameContainer .circleText .circleTextInner {margin-top: -0.5em; color: #333; font-size: 18px; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase} @media screen and (max-width: 766px) { #whatGalleryContainer .imageContainer {height: 120px; overflow: hidden; } #whatGalleryContainer .imageContainer .whatNameContainer {position:relative; width:auto; height: 120px; overflow:auto} #whatGalleryContainer .imageContainer .galleryNameContainer {display:none;} } @media screen and (max-width: 600px) { #whatGalleryContainer .imageContainer {height: 190px; overflow: hidden; } #whatGalleryContainer .imageContainer .whatNameContainer {position:relative; width:auto; height: 190px; overflow:auto} } @media screen and (max-width: 320px) { #whatGalleryContainer .imageContainer {height: 240px; overflow: hidden; } #whatGalleryContainer .imageContainer .whatNameContainer {position:relative; width:auto; height: 240px; overflow:auto} } /* 2015 additions */ /* Grid */ a.gridItem {position:relative; display:block; float:left; width:33.3%; padding-bottom:33.3%; color: #000; text-decoration:none; overflow:hidden; transition:all 0.25s ease-in-out; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; background-color:#e5dfd7} a.noImage {background-image: url(../images/article_blank.jpg) ;} a.gridItem:hover {background-position:0% -100px;} a.gridItem .gridText {position:absolute; display:block; width: 100%; height: 100%; top: 100%; left: 0; background:#e5dfd7; transition:all 0.25s ease-in-out; } a.gridItem:hover .gridText {top: 40%; display:block; width: 100%;} a.gridItem:hover .gridText p {margin: 0;} a.gridItem .gridText .gridTextInner {padding:5%; display:block ; color: #514f50; } a.gridItem .gridText .gridTitleContainer {display: block; margin-bottom: 8px; width:80%; } a.gridItem .gridText .gridTitle {position:relative; color: #514f50; font-family:Lato, Arial, helvetica, sans-serif; font-size:14px; padding-bottom:0px; font-weight:400; line-height:14px; text-transform:uppercase;} a.gridItem .gridText .gridDate {position:relative; display:block; color: #514f50; font-family:Lato, Arial, helvetica, sans-serif; font-size:12px; padding-bottom:10px; font-weight:700; line-height:14px; text-transform:uppercase;} a.gridItem .gridText .downloadIcon {position:absolute; right:20px; top:20px; display:block; width:29px; height:29px; background-image:url(../images/download_icon.gif)} @media screen and (max-width: 850px) { a.gridItem { width:50%; padding-bottom:50%;} } @media screen and (max-width: 566px) { a.gridItem { width:100%; padding-bottom:100%;} } .highlightsContainer {position:relative; width:100%; border-top:1px solid #ffffff; padding-top:20px; box-sizing: border-box; } .highlightsContainer .scrollInner {position:relative; width:100%; display:block; box-sizing: border-box; } .highlightsContainer .scrollInner .scrollArea {position:relative; margin: 0 42px; height:0; padding-bottom: 40%; box-sizing: border-box; overflow: hidden} .highlightsContainer .scrollInner .scrollArea .scroller {position: absolute; width: 1000%; height: 100%; left: 0; top: 0; margin: 0;transition: all 0.5s ease} .highlightsContainer .scrollInner a.leftArrow {position:absolute; left:0px; top:40%; margin-top: -20px; width:40px; height:40px; background-color:#ded7ce; border-radius: 50%; background-image:url(../images/leftArrow.png); } .highlightsContainer .scrollInner a.rightArrow {position:absolute; right:0px; top:40%; margin-top: -20px; width:40px; height:40px; background-color:#ded7ce; border-radius: 50%; background-image:url(../images/rightArrow.png)} .highlightsContainer .assetScroll {position:relative; float:left; width:2.5%; text-decoration:none; display:block; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .highlightsContainer .assetScroll a {text-decoration:none} .highlightsContainer .assetScroll a img {width:100%; height:auto} .highlightsContainer .assetScroll a .text {position:relative; display:block; padding-top:10px; font-size:11px; line-height:15px; text-decoration:none} .highlightsContainer .assetScroll a .text .scrollerDL {position:relative; display:block; float:right; margin-left:20px; width:22px; height:22px; background-image:url(../images/scrollerDL.png); text-decoration:none} @media screen and (max-width: 850px) { .highlightsContainer .scrollInner .scrollArea {padding-bottom: 50%;} .highlightsContainer .assetScroll {width:3.33%; } } @media screen and (max-width: 600px) { .highlightsContainer .scrollInner .scrollArea {padding-bottom: 75%;} .highlightsContainer .assetScroll {width:5%; } } .highlightsContainer2 {position:relative; width:100%;padding-top:20px; box-sizing: border-box; } .highlightsContainer2 .scrollInner {position:relative; width:100%; display:block; box-sizing: border-box; } .highlightsContainer2 .scrollInner .scrollArea {position:relative; margin: 0 42px; height:0; padding-bottom: 45%; box-sizing: border-box; overflow: hidden} .highlightsContainer2 .scrollInner .scrollArea .scroller {position: absolute; width: 1000%; height: 100%; left: 0; top: 0; margin: 0;transition: all 0.5s ease} .highlightsContainer2 .scrollInner a.leftArrow {position:absolute; left:0px; top:43%; margin-top: -20px; width:40px; height:40px; background-color:#ded7ce; border-radius: 50%; background-image:url(../images/leftArrow.png); } .highlightsContainer2 .scrollInner a.rightArrow {position:absolute; right:0px; top:43%; margin-top: -20px; width:40px; height:40px; background-color:#ded7ce; border-radius: 50%; background-image:url(../images/rightArrow.png)} .highlightsContainer2 .assetScroll2 {position:relative; float:left; width:3.33%; text-decoration:none; display:block; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .highlightsContainer2 .assetScroll2 a {display:block; width: 100%; text-decoration:none;} .highlightsContainer2 .assetScroll2 a .img {width:100%; height:0; padding-bottom: 134%; background: #fff;} .highlightsContainer2 .assetScroll2 a .img img {width:100%; height:100%; border: none } .highlightsContainer2 .assetScroll2 a .text {position:relative; display:block; padding-top:10px; font-size:11px; line-height:15px; text-decoration:none} .highlightsContainer2 .assetScroll2 a .text .scrollerDL {position:relative; display:block; float:right; margin-left:20px; width:22px; height:22px; background-image:url(../images/scrollerDL.png); text-decoration:none} @media screen and (max-width: 800px) { .highlightsContainer2 .scrollInner .scrollArea {padding-bottom: 65%;} .highlightsContainer2 .assetScroll2 {width:5%; } } @media screen and (max-width: 450px) { .highlightsContainer2 .scrollInner .scrollArea {padding-bottom: 115%;} .highlightsContainer2 .assetScroll2 {width:10%; } } /* Products / Sections */ .sectionSearch {position:absolute; right:0px; top:120px; width:30%; height:30px; border:1px solid #e6e0d7; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box; /* Firefox, other Gecko */box-sizing: border-box; } a.productGroupLarge {position:relative; width:23%; float:left; height:auto; display:block; margin-right:1.0%; margin-left:1.0%; margin-bottom:2%; transition:all 0.35s ease-in-out; text-decoration:none} a.productGroupLarge .image{position:relative; display:block; margin:0px auto; width:100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:100%; border-radius: 50%; background-color:#CCCCCC; } a.productGroupLarge .image .description {position:absolute; left:-0.3%; top:-0.3%; display:block; margin:0px auto; width:100.5%; padding-bottom:100.5%; border-radius: 50.5%; transition:all 0.10s ease-in-out;} a.productGroupLarge:hover .image .description {} a.productGroupLarge:hover .image .option_560 {background-color:#5cc2ae;} a.productGroupLarge:hover .image .option_561 {background-color:#6d92c3} a.productGroupLarge:hover .image .option_562 {background-color:#e6e0d7; color:#333333} a.productGroupLarge:hover .image .option_563 {background-color:#b56aaa} a.productGroupLarge:hover .image .option_2736 {background-color:#f4f38d; color:#333333} a.productGroupLarge:hover .image .option_default {background-color:#e6e0d7; color:#333333} a.productGroupLarge .image .description .innerText {position:absolute; padding:9%; padding-top:45%; padding-bottom:45%; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px; display:none ; } a.productGroupLarge:hover .image .description .innerText {display:block; } a.productGroupLarge .imageMissing {position:relative; display:block; margin:0px auto; width:100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:100%; border-radius: 50%; background-color:#CCCCCC; } a.productGroupLarge .mobileProductTitles {position:relative; display:none; padding:10px; text-align:center; height:60px; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; text-decoration:none;} .subProductContainer {margin-top:30px;} a.productGroupSmall {position:relative; width:100px; float:left; height:auto; display:block; margin-right:1.0%; margin-left:1.0%; margin-bottom:2%; transition:all 0.35s ease-in-out; text-decoration:none} a.productGroupSmall .image{position:relative; display:block; margin:0px auto; width:100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:100%; border-radius: 50%; background-color:#CCCCCC; } a.productGroupSmall .image .description {position:absolute; left:-0.3%; top:-0.3%; display:block; margin:0px auto; width:100.5%; padding-bottom:100.5%; border-radius: 50.5%; transition:all 0.10s ease-in-out;} a.productGroupSmall:hover .image .description {} a.productGroupSmall:hover .image .option_560 {background-color:#5cc2ae;} a.productGroupSmall:hover .image .option_561 {background-color:#6d92c3} a.productGroupSmall:hover .image .option_562 {background-color:#e6e0d7; color:#333333} a.productGroupSmall:hover .image .option_563 {background-color:#b56aaa} a.productGroupSmall:hover .image .option_2736 {background-color:#f4f38d; color:#333333} a.productGroupSmall:hover .image .option_default {background-color:#e6e0d7; color:#333333} a.productGroupSmall .image .description .innerText {position:absolute; padding:9%; padding-top:25%; padding-bottom:0%; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:13px; display:none ; } a.productGroupSmall:hover .image .description .innerText {display:block; } a.productGroupSmall .imageMissing {position:relative; display:block; margin:0px auto; width:100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:100%; border-radius: 50%; background-color:#CCCCCC; } a.productGroupSmall .mobileProductTitles {position:relative; display:none; padding:10px; text-align:center; height:60px; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; text-decoration:none;} .filtersContainer {position:relative; padding: 0; margin: 0; z-index:1; font-size: 12px; color:#FFF; border-top:1px solid #e6e0d7; padding-bottom:50px; margin-top:30px; } ul.filters {position:relative; display:block; margin: 0; padding: 6px 0 6px 0px; list-style:none; text-transform:uppercase; transition:all 0.35s ease-in-out; } ul.filters li.view {position:relative; padding:0; margin:0; display:inline-block; float:left; margin-left:0%; padding: 2px 12px 4px 0px; } ul.filters li.filterOption {position:relative; padding:0; margin:0; display:inline-block; float:left; margin-left:4%; } ul.filters li.filterOption a .small {font-size:9px; font-weight:normal; color: #999999} ul.filters li.filterOption a:hover { color: #000000;} ul.filters li.filterOption a.over:hover { color: #000000;} ul.filters .filterColour_560 a{display:block; padding: 4px 12px 4px 20px; background:url(../images/filter_on_560.png) 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; transition:all 0.35s ease-in-out;} ul.filters .filterColour_560 a.over{background:url(../images/filter_off_560.png) 0px center no-repeat; } ul.filters .filterColour_561 a{display:block; padding: 4px 12px 4px 20px; background:url(../images/filter_on_561.png) 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; transition:all 0.35s ease-in-out;} ul.filters .filterColour_561 a.over{background:url(../images/filter_off_561.png) 0px center no-repeat; } ul.filters .filterColour_563 a{display:block; padding: 4px 12px 4px 20px; background:url(../images/filter_on_562.png) 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; transition:all 0.35s ease-in-out;} ul.filters .filterColour_563 a.over{background:url(../images/filter_off_562.png) 0px center no-repeat; } ul.filters .filterColour_562 a{display:block; padding: 4px 12px 4px 20px; background:url(../images/filter_on_563.png) 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; transition:all 0.35s ease-in-out;} ul.filters .filterColour_562 a.over{background:url(../images/filter_off_563.png) 0px center no-repeat; } ul.filters .filterColour_2736 a{display:block; padding: 4px 12px 4px 20px; background:url(../images/filter_on_2736.png) 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; transition:all 0.35s ease-in-out;} ul.filters .filterColour_2736 a.over{background:url(../images/filter_off_2736.png) 0px center no-repeat; } .thumbContainer {position:relative; float:left; margin-left:2%; margin-top:2%; width:23.5%;} .thumbContainer img {width:100%; height:auto;} .backLink {position:relative; border-bottom:1px solid #e6e0d7} .backLink a {background-color:#e6e0d7; color:#848384; padding:5px; bottom:5px; display:block; width:140px; font-size:11px; text-transform:uppercase; text-decoration:none} .portfolioBubbleContainer {position:absolute; right:0px; top:0px; width:80px; transition:all 0.10s ease-in-out; z-index:0;} .portfolioBubbleContainer .portfolioBubble {width:80px; height:80px; border-radius: 50%; } .portfolioBubbleContainer .option_560 {background-color:#5cc2ae;} .portfolioBubbleContainer .option_561 {background-color:#6d92c3} .portfolioBubbleContainer .option_562 {background-color:#e6e0d7; color:#333333} .portfolioBubbleContainer .option_563 {background-color:#b56aaa} .portfolioBubbleContainer .option_2736 {background-color:#f4f38d; color:#333333} /* Forms and Contact */ .contactMap {position:relative; width:100%; background-color:#e5e0d7} .contactMap .map {position:relative; width:68%; float:left; left:5%; margin-bottom:9%} .contactMap .map .mapImage {width:100%; height:auto;} .contactMap .map #contactDot {position:absolute; display:block; top:62.6%; left: 61.8%; width: 7.6%; } .contactMap .map #contactDot_glow {position:absolute; display:block; top:62.6%; left: 61.8%; width: 7.6%; } .contactMap .addressContainer {position:absolute; right:18px; bottom:18px; width:25%;} .contactMap .addressContainer .address {position:relative; float:right; bottom:0px; right:0px; background-color:#646364; padding-bottom:65%; width:65%; border-radius: 50%; } .contactMap .addressContainer .address .description {position:absolute; left:-0.3%; top:-0.3%; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; display:block; margin:0px auto; width:100.5%; padding-bottom:100.5%; border-radius: 50.5%; transition:all 0.10s ease-in-out; padding-top:30%; padding-left:14%; font-size:19px; text-transform:uppercase} .contactMap a.googleMaps {position:absolute; left:6.5%; bottom:6.5%; display:block; width:150px; background-color:#646364; padding:5px; text-align:center; text-transform:uppercase; font-size:11px; text-decoration:none} a.travelButton {position:relative; float:right; border:1px solid #e5e0d7; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; color:#848384; text-decoration:none; background-color:#e5e0d7; cursor:pointer; text-transform:uppercase; font-size:11px;} a.travelButton:hover{} a.contactFormButton {position:absolute; top:-45px; right:0px; border:1px solid #e5e0d7; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; color:#848384; text-decoration:none; background-color:#e5e0d7; cursor:pointer; text-transform:uppercase; font-size:11px;} a.contactFormButton:hover{} .captchaContainer {position:relative; background-color:#FFFFFF; border:10px solid #ecebe7;-moz-border-radius: 10px; border-radius: 10px; max-width:300px; } .captchaContainer .innerPad {padding:10px;} .captchaContainer .innerPad .captchaTitle {position:relative; margin-bottom:10px; font-weight:normal; color:#000000} .captchaContainer .innerPad .captchaImage {position:relative; width:100%; min-height:50px; margin-bottom:10px; margin-top:10px;} .captchaContainer .innerPad .captchaImage img {width:100%; height:auto;} #topSearchField {width: 82%; box-sizing: border-box; border:0px solid #d1d1d1; padding:5px; text-transform:uppercase; color:#e6e0d7 } #topSearchButton {position:relative; float:right; width:29px; height:27px; border:0px solid; cursor:pointer; background-image:url(../images/search_button.gif); text-indent:-4000px;} .formContainer {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;; width:48%; float:left} .formContainer div {position:relative; display:block; margin-bottom:10px;} .formContainer div label {text-transform:uppercase;} .formContainer textarea, input[type="text"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; text-transform:uppercase; color:#e6e0d7 } .formContainer textarea, input[type="password"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainer select {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainer textarea, input[type="captcha"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainer textarea, input[type="textArea"] { width: 100%; box-sizing: border-box; height:150px; font-family: Arial, Helvetica, sans-serif ; background-color:#848384} .formContainerRight {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;; width:48%; float:right} .formContainerRight div {position:relative; display:block; margin-bottom:10px;} .formContainerRight div label {text-transform:uppercase;} .formContainerRight textarea, input[type="text"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; text-transform:uppercase; color:#e6e0d7 } .formContainerRight textarea, input[type="password"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainerRight select {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainerRight textarea, input[type="captcha"] {width: 100%; box-sizing: border-box; border:1px solid #d1d1d1; padding:5px; background-color:#848384; } .formContainerRight textarea, input[type="textArea"] { width: 100%; box-sizing: border-box; height:150px; font-family: Arial, Helvetica, sans-serif ; background-color:#848384} .errorText {color:#FF0000; display:block; padding:5px;} .submitButton {position:relative; border:1px solid #cccccc; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; color:#646364; text-decoration:none; background-color:#e6e0d7; cursor:pointer; text-transform:uppercase} .submitButton:hover{} a.searchLoop {position:relative; display:block; margin-bottom:10px; text-decoration:none;} a.searchLoopAlt {position:relative; display:block; margin-bottom:10px; text-decoration:none;} a.searchLoop .searchImage{position:relative; float:left; display:block; margin:0px auto; width:10%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:10%; border-radius: 50%; background-color:#CCCCCC; margin-right:2%; } a.searchLoop .searchText {position:relative; float:left; width:80%; padding-top:2%;} a.searchLoop .searchText strong {display:block; font-size:16px; font-weight:normal} a.searchLoopAlt .searchImage{position:relative; float:left; display:block; margin:0px auto; width:10%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; padding-bottom:10%; border-radius: 50%; background-color:#CCCCCC; margin-right:2%; } a.searchLoopAlt .searchText {position:relative; float:left; width:80%; padding-top:2%;} a.searchLoopAlt .searchText strong {display:block; font-size:16px; font-weight:normal} a.searchLoopNI {position:relative; display:block; margin-bottom:10px; text-decoration:none;} a.searchLoopAltNI {position:relative; display:block; margin-bottom:10px; text-decoration:none;} /* Media Queries */ @media screen and (max-width: 880px) { #wrapper .mainInner .mainPadding {position:relative; margin:0px auto; max-width:970px; padding:10px;} /* Products / Sections */ a.productGroupLarge {position:relative; width:30%; float:left; height:auto; display:block; margin-right:1.0%; margin-left:1.0%; margin-bottom:2%;} a.productGroupLarge .mobileProductTitles {position:relative; display:block; padding:10px; text-align:center; height:60px; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; text-decoration:none;} a.productGroupLarge:hover .image .description {display:none;} } /* Media Queries */ @media screen and (max-width: 768px) { #wrapper .mainInner .mainPadding .contentArea .columnLeft {position:relative; width:45%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnRight {position:relative; width:50%; float:left; margin-left:5%; margin-top:0px; transition:all 0.35s ease-in-out;} .sectionSearch {position:relative; left:0px; bottom:0px; margin:0px; top:0px; width:100%; height:30px; border:1px solid #e6e0d7} .galleryTab {position:relative; width:100%; float:left;} .galleryTab a {position:relative; width: 100%; display:block; text-align:center; background-color:#646364; padding:7px 0 7px 0;text-decoration:none; transition:all 0.15s ease-in-out; text-transform:uppercase; font-size:11px;} .galleryTab a:hover {background-color:#e6e0d7; color:#646364} .galleryTab a.over {background-color:#e6e0d7; color:#646364} .galleryTab a.over span {display: inline-block; width: 8px; height: 8px; background-color:#646364; border-radius: 50%; margin-right:5px;} .formContainer {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;; width:100%; float:left} .formContainerRight {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;; width:100%; float:right} .contactMap .addressContainer .address .description {font-size:15px; text-transform:uppercase; padding-top:25%;} .whatNameContainer {position:absolute; bottom:0; left:0; padding:10px; width:100.00%; background-color:#646364; font-size:11px;} #wrapper .mainInner .mainPadding .contentArea .columnLeftPort {position:relative; width:100%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnLeftPort h1 {position:relative; font-weight:normal; font-family:Melbourne-Light ,Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; } #wrapper .mainInner .mainPadding .contentArea .columnRightPort {position:relative; width:100%; float:right; margin-left:5%; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .mobileTitle {position:relative; display:block} #wrapper .mainInner .mainPadding .contentArea .deskTopTitle {position:relative; display:none} .portfolioBubbleContainer {position:absolute; right:0px; top:auto; bottom:10px; width:80px; transition:all 0.10s ease-in-out; z-index:0;} #galleryContainer .imageContainer .galleryNameContainer {width:100px; height: 0; padding-bottom: 100px; right: 10px; bottom: 10px; } #galleryContainer .imageContainer .galleryNameContainer .circleText .circleTextInner {margin-top: -0.5em; font-size: 12px; line-height: 13px;} } /* Media Queries */ @media screen and (max-width: 520px) { .videoWrapper { box-sizing: border-box; position: absolute; width:100%; padding-bottom: 98%; /* 16:9 */ padding-top: 0px; height: 0; margin-top:0px; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #wrapper .mainInner .mainPadding .contentArea h1.welcome {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:55px; transition:all 0.35s ease-in-out; margin:0px; border-top:1px solid #e6e0d7; line-height:60px; padding-top:10px; } #wrapper .mainInner .mainPadding .contentArea h1 {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:45px; margin:0px; line-height:35px;} #wrapper .mainInner .mainPadding .contentArea .columnLeft {position:relative; width:100%; float:left; transition:all 0.35s ease-in-out;} #wrapper .mainInner .mainPadding .contentArea .columnRight {position:relative; width:100%; float:left; margin-left:0%; margin-top:0px; transition:all 0.35s ease-in-out;} #galleryContainer .imageContainer {height:200px; margin-bottom:10px;} #galleryContainer .imageContainer .galleryImage {height:200px;} #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink {position:absolute; top:50%; left:50%; margin-left:-136px; margin-top:-8px; background-image:url(../images/splash_logo.gif); width:272px; height:40px; display:block; background-color:#848384; background-position:center; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink #splashDot {top:-17px; right: -20px;} #wrapper .mainInnerSplash .mainPaddingSplash .border a.splashLink #splashDot_glow {top:-17px; right: -20px;} #wrapper .mainInner .mainPadding .contentArea h1 {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:30px; margin:0px; } /* Forms and Contact */ .contactMap {position:relative; width:100%; background-color:#e5e0d7; padding-bottom:35%;} .contactMap .map {position:relative; width:100%; float:left; left:0%; margin-bottom:0%} .contactMap .map .mapImage {width:100%; height:auto;} .contactMap .addressContainer {position:absolute; right:18px; bottom:18px; width:45%; } .contactMap .addressContainer .address {position:relative; float:right; bottom:0px; right:0px; background-color:#646364; padding-bottom:65%; width:65%; border-radius: 50%; } .contactMap .addressContainer .address .description {position:absolute; left:-0.3%; top:-0.3%; font-family:Melbourne-Light, Arial, Helvetica, sans-serif; display:block; margin:0px auto; width:100.5%; padding-bottom:100.5%; border-radius: 50.5%; transition:all 0.10s ease-in-out; padding-top:25%; padding-left:14%; font-size:16px; text-transform:uppercase} .contactMap a.googleMaps {position:absolute; left:2%; bottom:6.5%; display:block; width:150px; background-color:#646364; padding:5px; text-align:center; text-transform:uppercase; font-size:11px; text-decoration:none} /* Products / Sections */ a.productGroupLarge {position:relative; width:48%; float:left; height:auto; display:block; margin-right:1.0%; margin-left:1.0%; margin-bottom:2%;} .filtersContainer {position:relative; padding: 0; margin: 0; z-index:1; font-size: 12px; color:#FFF; border-top:0px solid #e6e0d7; padding-bottom:30px; margin-top:0px;} ul.filters {position:relative; display:block; margin: 0; padding: 6px 0 6px 0px; list-style:none; text-transform:uppercase; } ul.filters li.view {display:none; } ul.filters li.filterOption {position:relative; padding:0; margin:0; display:inline-block; float:left; margin-left:0%; width:100%; } ul.filters li.filterOption a .small {font-size:9px; font-weight:normal; color: #999999} ul.filters li.filterOption a:hover { color: #000000;} ul.filters li.filterOption a.over:hover { color: #000000;} ul.filters .filterColour_560 a{display:block; padding: 10px 12px 10px 20px; background:url(../images/filter_on_560.png) #5cc2ae 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal;} ul.filters .filterColour_560 a.over{background-image:none; background-color:#5cc2ae; font-weight:bold; } ul.filters .filterColour_561 a{display:block; padding: 10px 12px 10px 20px; background:url(../images/filter_on_561.png) #6d92c3 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal;} ul.filters .filterColour_561 a.over{background-image:none; background-color:#6d92c3; font-weight:bold; } ul.filters .filterColour_563 a{display:block; padding: 10px 12px 10px 20px; background:url(../images/filter_on_562.png) #b56aaa 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal;} ul.filters .filterColour_563 a.over{background-image:none; background-color:#b56aaa; font-weight:bold; } ul.filters .filterColour_562 a{display:block; padding: 10px 12px 10px 20px; background:url(../images/filter_on_563.png) #e6e0d7 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; color:#666666} ul.filters .filterColour_562 a.over{background-image:none; background-color:#e6e0d7 ; font-weight:bold; } ul.filters .filterColour_2736 a{display:block; padding: 10px 12px 10px 20px; background:url(../images/filter_on_2736.png) #f4f38d 0px center no-repeat; text-decoration:none; font-size:11px; font-weight:normal; color:#666666} ul.filters .filterColour_2736 a.over{background-image:none; background-color:#e6e0d7 ; font-weight:bold; } } /* Media Queries */ @media screen and (max-width: 320px) { #wrapper .mainInner .mainPadding .contentArea h1.welcome {position:relative; font-weight:normal; font-family:DidotLTStd-Italic, Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:35px; transition:all 0.35s ease-in-out; margin:0px; border-top:1px solid #e6e0d7; line-height:40px; padding-top:10px; } .contactMap .addressContainer {display:none; } a.productGroupLarge {position:relative; width:100%; float:left; height:auto; display:block; margin-right:1.0%; margin-left:1.0%; margin-bottom:2%;} } /* Site wide */ @import url("//hello.myfonts.net/count/2a9c1e"); @font-face {font-family: 'DidotLTStd-Italic';src: url('../fonts/webfonts/2A9C1E_0_0.eot');src: url('../fonts/webfonts/2A9C1E_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2A9C1E_0_0.woff') format('woff'),url('../fonts/webfonts/2A9C1E_0_0.ttf') format('truetype');} @import url("//hello.myfonts.net/count/2a9e0c"); @font-face {font-family: 'Melbourne-Light';src: url('../fonts/webfonts/2A9E0C_0_0.eot');src: url('../fonts/webfonts/2A9E0C_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2A9E0C_0_0.woff') format('woff'),url('../fonts/webfonts/2A9E0C_0_0.ttf') format('truetype');} @font-face {font-family: 'Melbourne-Bold';src: url('../fonts/webfonts/2A9E0C_1_0.eot');src: url('../fonts/webfonts/2A9E0C_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2A9E0C_1_0.woff') format('woff'),url('../fonts/webfonts/2A9E0C_1_0.ttf') format('truetype');} @font-face {font-family: 'Melbourne-Regular';src: url('../fonts/webfonts/2A9E0C_2_0.eot');src: url('../fonts/webfonts/2A9E0C_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2A9E0C_2_0.woff') format('woff'),url('../fonts/webfonts/2A9E0C_2_0.ttf') format('truetype');} a {color:#e6e0d7;} a:hover {text-decoration:none;} .globalImage {width: 100%; height:auto;} .clear {clear:both}