/* ========================================================================== Custom styles ========================================================================== */ html { font: normal 14px / 20px Arial, sans-serif; overflow-y: scroll; background: #ffffff; color: #333333; } .invert a { color: #fff; text-decoration: none; font-weight: bold; } .invert a:hover { color: #4abbbd; text-decoration: none; } /* ========================================================================== Font imports (minified) DINRegular, DINBold, Thirsty ========================================================================== */ @font-face { font-family: 'colaborate-regularregular'; src: url('fonts/colaborate/ColabReg-webfont.eot'); src: url('fonts/colaborate/ColabReg-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/colaborate/ColabReg-webfont.woff') format('woff'), url('fonts/colaborate/ColabReg-webfont.ttf') format('truetype'), url('fonts/colaborate/ColabReg-webfont.svg#colaborate-regularregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'colaborate-boldregular'; src: url('fonts/colaborate/ColabBol-webfont.eot'); src: url('fonts/colaborate/ColabBol-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/colaborate/ColabBol-webfont.woff') format('woff'), url('fonts/colaborate/ColabBol-webfont.ttf') format('truetype'), url('fonts/colaborate/ColabBol-webfont.svg#colaborate-boldregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'colaborate-thinregular'; src: url('fonts/colaborate/ColabThi-webfont.eot'); src: url('fonts/colaborate/ColabThi-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/colaborate/ColabThi-webfont.woff') format('woff'), url('fonts/colaborate/ColabThi-webfont.ttf') format('truetype'), url('fonts/colaborate/ColabThi-webfont.svg#colaborate-thinregular') format('svg'); font-weight: normal; font-style: normal; } @font-face{font-family:"DINRegular";src:url(fonts/din-regular-webfont.eot);src:url(fonts/din-regular-webfont.eot?#iefix) format("embedded-opentype"),url(fonts/din-regular-webfont.woff) format("woff"),url(fonts/din-regular-webfont.ttf) format("truetype"),url(fonts/din-regular-webfont.svg#webfontfLFgafto) format("svg")}@font-face{font-family:"DINBold";src:url(fonts/din-bold-webfont.eot);src:url(fonts/din-bold-webfont.eot?#iefix) format("embedded-opentype"),url(fonts/din-bold-webfont.woff) format("woff"),url(fonts/din-bold-webfont.ttf) format("truetype"),url(fonts/din-bold-webfont.svg#webfontNVxOgUMj) format("svg")} @font-face{font-family:"Thirsty";src:url(fonts/thirstyscriptmedium.eot);src:url(fonts/thirstyscriptmedium.eot?#iefix) format("embedded-opentype"),url(fonts/thirstyscriptmedium.woff) format("woff"),url(fonts/thirstyscriptmedium.ttf) format("truetype"),url(fonts/thirstyscriptmedium.svg#webfont) format("svg")} .uk-icon-etsy { font-family:Georgia, "Times New Roman", Times, serif; font-size:15px; background-color: #656464; color: #fff; border-radius: 3px; padding: 2px 0 0 0; margin-right: 2px; display: inline-block; width: 18px; height: 18px; text-align: center; box-sizing:border-box; } /* ========================================================================== Content Styles ========================================================================== */ a { color: #e94b5e; text-decoration: underline; } a:hover { color: #4abbbd; text-decoration: none; } a.uk-close, .uk-button a, #header a { text-decoration: none; } .content .leadin { font-family: 'colaborate-boldregular'; font-size: 1.286em; } .content .fancy { font-family: 'Thirsty'; font-size: 1.429em; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { font-family: "colaborate-boldregular", Arial, sans-serif; color: #000; } .content h1 { font-family: "colaborate-boldregular", Arial, sans-serif; font-size: 36px; line-height: 42px; } .content h2 { font-size: 24px; line-height: 30px; } .content h3 { font-size: 18px; line-height: 24px; } .content h4 { font-size: 16px; line-height: 22px; } .content h5 { font-size: 14px; line-height: 20px; } .content h6 { font-size: 12px; line-height: 18px; } .content h1 strong, .content h2 strong, .content h3 strong, .content h4 strong, .content h5 strong, .content h6 strong { font-weight: normal; } .content .small-heading, #account .small-heading { color: #999999; font: 88%/1.4em "colaborate-regularregular", "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; letter-spacing: 0.2em; margin: 1.5em 0 0.75em; text-transform: uppercase; } #account .small-heading { letter-spacing:0.1em; margin: 0; } #account .small-heading a { color: #000; } #account .small-heading a:hover { color: inherit; } ul.hmenu, ul.collapsed, ol.collapsed { list-style-type:none; padding-left: 0; } .hmenu li { display: block; float: left; } /* ========================================================================== Form overrides ========================================================================== */ fieldset { border: 0; margin: 0; padding: 0; } .Actions { margin-top: 15px; } .uk-form { max-width: 600px; } .uk-form-horizontal input.text { width: 100%; max-width: 1000px; } .uk-form-horizontal select.dropdown { } .holder-required label:after {content: ' *'; } /* ========================================================================== Layout ========================================================================== */ #holder { padding: 0 5px !important; margin-top: 5px; } #header { width: 100%; position: relative; padding-bottom: 20px; } #logo { max-width: 200px; line-height: 90px; } #header .social { width: 100%; margin-top: 65px; } #header .social li { width: 12.5%; max-width: 70px; float: left; text-align: right;} #header .social img { width: 100%; height: auto; max-width: 64px; opacity: 0.3; } #header .social a:hover img {opacity: 1; } #header #searchform { padding: 5px 0; } #account { position: absolute; top: 0; right: 0; min-width: 380px; } #navigation { margin-top: 3px; } #searchform, #searchformnav { text-align: right; } #searchformnav .uk-form { max-width: none; } #SearchResults iframe { display: none; } #main { margin-top: 20px; min-height: 200px; } #main .blocks img, #main .buttons img { width: 100%; height: auto; } #blocks {margin-top: 20px; } @media (max-width: 767px) { #header .social { margin-top: 10px; } #header .social li { width: 25%; } #main { padding: 0 10px; } } @media (min-width: 768px) { .sidebar-left { padding-right: 10px; } .has-leftsidebar #main { background: url(../images/bg-stitch.png) repeat-y 19% 0; } } #footer { background: #000; padding: 20px; min-height: 100px; margin: 30px 0; color: #fff;font-size: 85.71%; line-height: 120%; } #footer .tagline { padding-top: 10px; clear: both;} #copyright { } .profilelist a { text-decoration: none; } .profilelist span { display: block; position: relative; text-align: center; } .profilelist span.businessname { font-size: 92.9%; line-height: 100%; padding: 5px 0 6px 0; min-height: 40px; } .profileimage img { width: 100%; height: auto; } .profileimage img.foreground { position: absolute; top: 0; left: 0; pointer-events: none; display: none; } .profileimage img.default { opacity: 0.25 } .profileimage #images-large { position: relative; } .profilelist .profileimage::after {} .profileimage #images-large::after { content: ""; display:block; width: 100%; height: 100%; background: url(../images/fg-profile.png) no-repeat 0 0; background-size: contain; position: absolute; top: 0; left: 0; } .slidesthumbs, .profilethumbs { margin-top: 20px; } .slidesimage img, .slidesthumbs img, .profilethumbs img { padding: 4%; border: 1px solid #eeeeee; } .slidesimage img { padding: 4px; } .googlemap { max-width: 100%; border: 4px solid #CCC; margin-top: 20px; } /* ========================================================================== Slideshow ========================================================================== */ .uk-slidenav { text-decoration: none !important; } #slideshow .caption { position: absolute; top:5px; left: 0; width: 100%; text-align: center; font-size: 110%; } #slideshow a:hover .caption { color: inherit; } #slideshow .uk-slideshow li > a { display: block; width: 100%; height: auto; } #slideshow li img { width: 100%; height: auto; } /* ========================================================================== Navigation (default settings) ========================================================================== */ ul.nav { font-family: 'colaborate-regularregular', Arial; font-size:1.2em; } ul.nav,ul.nav li,ul.nav ul{margin:0;padding:0;list-style-type:none} ul.nav ul{opacity:0;position:absolute;visibility:hidden;z-index: 980;-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;} ul.nav > li > a{z-index:950; } ul.nav > li{z-index:960} ul.nav li{position:relative;display:block;float:left} ul.nav li.right { float: right; } ul.nav a{text-align:center;display:block} ul.nav ul a{text-align:left} ul.nav li.hover > ul, ul.nav li:hover > ul{opacity:1;visibility:visible;} ul.nav ul ul{z-index:970;top:1px;left:94%; -webkit-box-shadow: -1px -1px 3px 0 rgba(50, 50, 50, 0.2); -moz-box-shadow: -1px -1px 3px 0 rgba(50, 50, 50, 0.2); box-shadow: -1px -1px 3px 0 rgba(50, 50, 50, 0.2); } ul.nav ul a{white-space:nowrap} ul.nav ul li{width:100%;white-space:nowrap;float:none} ul.nav > li:nth-last-child(-n+2) > ul { right: 0; left: auto; } ul.nav > li:nth-last-child(-n+1) ul ul { left:auto; right:98%;top:0;} /* Custom nav styles */ ul.nav { text-transform: uppercase; } ul.nav ul { text-transform: none; } li.parent {position: relative;} ul.nav ul i { padding-top: 3px; } ul.nav a { padding: 4px 5px; text-decoration: none; color: #000; } ul.nav > li { background: url(../images/bg-button-off.png) no-repeat right center; } ul.nav > li.section > a, ul.nav > li:hover > a, ul.nav > li.current > a, ul.nav > li > a:hover { color: #4abbbd; background: url(../images/bg-button-on.png) no-repeat right center; } ul.nav > li > a { padding-right: 23px; } ul.nav > li.search > a:hover, ul.nav > li.search { background: none;} ul.nav > li.search > a { padding-right: 0;} ul.nav > li.section > a, ul.nav > li:hover > a { color: #4abbbd; } ul.nav ul li.current > a, ul.nav ul a:hover { background-color: #e94b5e; color: #fff } ul.nav ul a { padding: 5px 10px; min-width: 200px; background-color: #4abbbd; color: #fff; border: 1px solid #fff; border-top: none; } ul.nav ul { border-top: 1px solid #fff; } @media (max-width: 1219px) { ul.nav > li:nth-last-child(-n+2) ul ul { left:auto; right:98%;top:0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; top: -1px; } } @media (min-width: 960px) and (max-width: 1219px) { ul.nav { font-size:1.1425em; } ul.nav > li > a { padding-right: 0; padding-left: 8px; } ul.nav > li > a > span { padding-right: 7px; border-right: 1px dashed #7864a5} ul.nav > li:last-child > a > span { padding-right: 0; border: none; } ul.nav > li , ul.nav > li.section > a, ul.nav > li:hover > a, ul.nav > li.current > a, ul.nav > li > a:hover { background: none; } } /* less than Desktops & tablets landscape */ @media (min-width: 769px) and (max-width: 959px) { ul.nav > li.section > a, ul.nav > li:hover > a, ul.nav > li.current > a, ul.nav > li > a:hover { background: none !important; } ul.nav > li > a { padding-left: 0; padding-right: 16px; } } /* Off Canvas Nav */ #nav-offcanvas ul ul > li a { padding: 8px 15px; } .toggle-link { color: #cccccc; cursor: pointer; display: none; font-size: 16px; padding: 10px; position: absolute; right: 0; top: 0;} .js .toggle-link {display: block; } .js ul.closed { display: none; } #nav-offcanvas li.section > .toggle-link.closed:before, .toggle-link:before { content: "\f056"; } #nav-offcanvas li.section > .toggle-link:before, .toggle-link.closed:before { content: "\f055"; } #nav-offcanvas li.section > a { background-color: #404040 } #nav-offcanvas li.current > a { color: #F8DF77; } .footer-nav { text-transform: lowercase; margin: 0; padding: 0; list-style-type: none; } .footer-nav li {display:block; float:left; padding: 0; margin: 0 5px 8px 0; border-right: 1px dashed #BDD49E; } .footer-nav li a { padding-right: 5px; } .footer-nav li:first-child a { padding-left: 0; } .footer-nav li:last-child { border: none; } /* ========================================================================== Media Queries for Responsive Design. ========================================================================== */ /* Phone and bigger */ @media (min-width: 460px) { #holder { padding: 0 25px !important; margin-top: 10px; } #logo { line-height: normal; max-width: 350px; } } /* Tablet and bigger */ @media (min-width: 768px) { #holder { padding: 0 35px !important; } #logo { line-height: normal; max-width: 350px; } } /* Desktop and bigger */ @media (min-width: 960px) { } /* Large screen and bigger */ @media (min-width: 1220px) { } /* desktop and less*/ @media (max-width: 1219px) { } /* ========================================================================== Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== Print styles. ========================================================================== */ @media print { .noprint { display: none !important; } #header .uk-grid > * { float: none !important; } #main { margin: 0; padding: 0; } .mainbar { width: 100% !important; left: 0; float: none !important; } * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } pre, blockquote { border: 1px solid #999; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }