body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; min-width: 320px; letter-spacing: 1px; margin: 0; background-color: white; /* This will be applied to the ENTIRE WEBSITE BACKGROUND */ } /* CHANGE BACKGROUND COLOUR ON SPECIFIC PAGES */ /* An individual class can be found around Line 18 on each page */ /* It looks like this: */ /* Then you can set like "body.worksbyseries-page.macuto-cannes {background-color: #888; } */ /* No space between worksbyseries-page AND macuto-cannes for css. It should be "worksbyseries-page.macuto-cannes" with dot */ body.siteprivate-page. { background-color: ; } /* main content */ #content { clear: both; padding-top: 10px; height: auto; } .home #content{ clear: both; height: 825px; overflow: hidden; position: relative; } .home #content .scrollable { overflow-x: scroll; overflow-y: hidden; padding-top: 30px; height: 795px; width: 100%; position: absolute; left: 0; } .home #content .scrollable::-webkit-scrollbar { display: none; } /* pages under category*/ #textbox { margin: 60px 20px 20px 20px; border-top: solid 3px black; padding-top: 20px; padding-bottom: 20px; } .text { line-height: 18px; float: left; width: 620px; box-sizing: border-box; margin: 0 auto; } body.artall .text { width: 640px; } .gallery { float: right; width: 50%; padding-top: 2px; } .clear { clear: both; } /* slash for caption */ .white { color: white; } /* readmore text */ .more { display: none; .no-js & { display: block; } } .active { display: block; } .no-js .read-more { display: none; } /* a */ a:link { color: black; text-decoration: none; } a:visited { color: black; } a:hover { color: black; border-bottom: 2px solid black; margin-bottom:1px; text-decoration: none; } a:active { color: black; } /* headers */ h1 { font-size: 22px; margin: 0 0 5px 0; } h2 { font-size: 17px; margin: 0; padding-bottom: 5px; } h3 { font-size: 14px; font-weight: bold; margin: 0; padding-bottom: 5px; } h4 { font-size: 12px; font-weight: bold; margin: 0; padding-bottom: 5px; } hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0px; border-width: 1px; border-style: solid; width: 5px; } /* logo */ .logo { width: 163px; height:40px; padding-bottom: 5px; } .logo a { text-decoration: none; border-bottom: none; } .logo:hover { } @media all and (max-width: 600px) { .logo { margin-left: auto; margin-right: auto; } } /* images */ img { max-width:100%; height: auto; padding-bottom: 10px; padding-right: 5px; } .gallery img { margin: auto; display: block; opacity: 0.5; } .mobile-gallery img { padding-bottom: 5px; padding-top: 5px; } /* home fixed images */ .homeimg { height: auto; position: absolute; } .homeimg a{ display: block; } .homeimg:hover { opacity: 0.5; } .homeimg:hover a { border-bottom: none; } .homeimg#image-one { left: 1000px; top: 380px; width: 525px; } .homeimg#image-two { left: 233px; top: 365px; width: 525px; } .homeimg#image-three { left: 955px; top: 5px; width: 525px; } .homeimg#image-four { left: 290px; top: 5px; width: 525px; } /* master tooltip - hover over the image and title shows up */ .tooltip { display:none; position:absolute; padding:5px; font-weight: bold; } .mobile-gallery { display: none; } .mobile-gallery li { list-style: none; } .mobile-gallery p { text-align: center ; font-size: 12px; margin-top: 0; margin-bottom: 30px; } @media all and (max-width: 600px) { .text, .active, body.artall .text { float: none; width: 100%; padding-right: 5px; } .gallery { float: none; width: 100%; } .homeimg#image-one, .homeimg#image-two, .homeimg#image-three, .homeimg#image-four, { width:100%; height: auto; padding-bottom: 10px; padding-right: 5px; position: static !important; } .homeimg img { display:block; margin-left: auto; margin-right: auto; /* -webkit-transform: scale(0.8); /* Saf3.1+, Chrome -moz-transform: scale(0.8); /* FF3.5+ -ms-transform: scale(0.8); /* IE9 -o-transform: scale(0.8); /* Opera 10.5+ transform: scale(0.8); */ } .home #content{ clear: both; padding-top: 30px; height: auto; } .home #content .scrollable { position: absolute; clear: both; padding-top: 30px; height: auto; } .mobile-gallery { display: block; } .bxslider, .bx-wrapper, bx-viewport { display: none; } } /* bxslider */ .bxslider { /* Hide bx slider until it has loaded by doing $(".bxslider").show() */ display: none; /* Seems to fix the jumping issue */ padding: 0; margin: 0; } .bx-wrapper a:hover { border: none; } ul.bxslider { list-style: none; margin-top: 0px; } ul.bxslider p { text-align: center; margin-top: 0px; } ul.bxslider img { max-height: 800px; width:auto; } /* navigation top & footer */ .nav-container { z-index: 10000; left: 0; right: 0; top: 0; background-color: none; padding-left: 20px; } ol { } ul.nav { list-style-type: none; margin: 0; padding: 0; } ul.nav li { float: left; } ul.nav li a { color: black; text-decoration: none; } ul.nav li a:hover { text-decoration: none; } /* twitter */ .twitter { /* float:right;*/ clear: right; right: 20px; margin-top: -14px; margin-bottom: 20px; padding-right: 10px; width: auto; height: auto; border: none; } a.expand.customisable-highlight { display: none !important; } @media all and (max-width: 600px) { .twitter { float:none; clear: both; margin-left: auto; margin-right: auto; }