/* ---------- Desi Fontaine ---------- */ /* Good ol' clearfix */ .cf:before,.cf:after, .MainImage:before, .MainImage:after { content: " "; display: table; } .cf:after, .MainImage:after { clear: both; } .cf, .MainImage { *zoom: 1; } /* For IE 6/7 only */ html, body { margin:0; padding:0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { margin:0; padding:0; } body { font-family:helvetica,tahoma,sans-serif; font-size:14px; color:#999999; line-height:20px; background:#1A1A18; } form { } form, div, table, td { margin:0; padding:0; } a { color:#7FBFFF; } a:visited { color:#7FBFFF; } a:hover { color:white; } a img { border:none; outline:none; } p, ul { padding:10px 0; margin:0; } ul li { margin:0 0 0 15px; } h1 { padding:10px 0; margin:20px 0 0px 0; font-weight:normal; font-family:'Times New Roman',Times,serif; font-style:normal; font-size:36px; line-height:40px; color:white; } h2 { padding:10px 0; margin:20px 0 0px 0; font-weight:normal; font-family:'Times New Roman',Times,serif; font-style:normal; font-size:20px; line-height:20px; color:white; } h3 { padding:10px 0; margin:0 0 -20px 0; font-weight:normal; font-family:'Times New Roman',Times,serif; font-style:normal; font-size:16px; line-height:20px; color:white; } h1 em { display:block; line-height:20px; font-size:14px; font-weight:normal; font-style:normal; margin:4px 0 4px 0; font-family:helvetica,tahoma,sans-serif; } h2 a { display:block; padding:20px; background:#1A1A18; text-decoration:none; color:white; } h2 a:visited { color:white; } h2 a:hover { color:#7FBFFF; } h2 a em { display:block; line-height:20px; font-size:12px; font-weight:normal; font-style:normal; margin:0; font-family:helvetica,tahoma,sans-serif; } strong { font-weight:normal; color:white; } em { font-style:italic; } blockquote { padding:0 20px; margin:0; font-style:italic; } p.image { padding:0; margin:10px 0 20px 20px; float:right; clear:right; } p.image img { border:10px solid #1A1A18; } a.Button { display:block; padding:7px 25px; float:left; font-weight:bold; color:#1A1A18; background:#7FBFFF; border-radius:4px; box-shadow:0 0 5px black; -moz-border-radius:4px; -webkit-border-radius:4px; text-decoration:none; } a:visited.Button { color:#1A1A18; } a:hover.Button { background-color:#B7DBFF; } img { max-width: 100%; height: auto!important; } /* ------------------------------------------------------------------ Main Elements */ #Wrapper { background:#2D2E2C url('pictures/gs_webgraphics/bgtexture.png'); } #Container { } #PageHeader { } #PageHeaderBottom { clear:both; } #PageHeader, #Footer, .mobile-header { background:#1A1A18; } #MainArea { padding:0; } #MainAreaBottom { clear:both; } #MainAreaTop { } #PageContent { } #PageText { clear:both; width: 100%; max-width: 940px; } #MainArea #MainImage { width: 100%; max-width: 1080px; } #MainArea img#MainImage_TheImage { margin: 0 0 0 -40px; border: 20px solid #1A1A18; box-sizing: content-box; } #MainArea #MainImage .Caption { display:none; } #MainImage table td { border:0; } body.NOIMAGE #MainArea #MainImage { display:none; } body.NOIMAGE #MainArea #ScrollingGallery { display:none; } /* ------------------------------------------------------------------ Nav */ /*mobile-nav*/ .mobile-header { padding: 0 10px; } .mobile-menu { text-transform:lowercase; text-decoration:none; font-size:14px; float: left; padding: 10px 0; } .menu-click { display: inline-block; vertical-align: middle; text-align: left; padding: 0; text-decoration: none!important; color:#808080; } .hamburger { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } .menu-text { display: inline-block; } .hb-bar { display: block; height: 2px; background: #fff; width: 20px; position: relative; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; opacity: 0.4; } .hb-bar + .hb-bar { margin-top: 6px; } .hb-bar { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); top: 0; } .hb-bar:nth-child(2n) { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .hb-bar:nth-child(3n) { opacity: 0.4; } .push .hb-bar { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 8px; } .push .hb-bar:nth-child(2n) { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); top: 0; } .push .hb-bar:nth-child(3n) { opacity: 0; } .mobile-contact { float: right; margin: 0; padding: 0; opacity: 0.5; font-size: 0; } .mobile-contact li, .mobile-contact li a { display: inline-block; vertical-align: middle; text-align: center; margin: 0; } .mobile-contact li { border-right: 1px solid #eee; width: 60px; height: 46px; line-height: auto; padding: 10px 0; } .mobile-contact li:first-child { border-left: 1px solid #eee; } .mobile-contact li span { opacity: 0.5; display: inline-block; vertical-align: middle; margin: 0 auto; width: 26px; height: 17px; background: url('pictures/gs_webgraphics/mobile-icons.png') no-repeat 0 -2px; } .mobile-contact li.mobile span { background-position: -28px 0; width: 15px; height: 21px; } .mobile-contact li.email span { background-position: -46px -3px; width: 24px; height: 15px; } .mobile-contact li.Facebook { margin-left: 10px; } .mobile-contact li.social { border: none; width: 30px; } .mobile-contact li.social img { display: inline-block; vertical-align: middle; } .ie7 .mobile-contact li { float: left; } /* Main nav */ #PageHeader { padding:0 50px; margin:0; overflow:visible; } #PageHeader .PageMenu { background: #1A1A18; width: 280px; position: fixed; top: 0; left: -281px; z-index: 999999; padding: 0 10px; height: 100%; } .ie7 #PageHeader .PageMenu { left: -300px; } #PageHeader .PageMenu .Alignment { height: 100%; overflow: auto; } #PageHeader .PageMenu .MenuItem { display: block; border-bottom: 1px solid #333; } #PageHeader .MenuItem a { display:block; margin:0; padding:20px 0; color:#808080; text-transform:lowercase; text-decoration:none; font-size:14px; } #PageHeader .MenuItem a:hover { color:white; } body.CONTACT #PageHeader .PageMenu .MenuItem.aid_CONTACT a, body.NEWS #PageHeader .PageMenu .MenuItem.aid_NEWS a, body.COURSES #PageHeader .PageMenu .MenuItem.aid_COURSES a, body.WEDDINGS #PageHeader .PageMenu .MenuItem.aid_WEDDINGS a, body.PORTRAITS #PageHeader .PageMenu .MenuItem.aid_PORTRAITURE a, #Wrapper #PageHeader .PageMenu .MenuItem a.Selected { color:white; } body { left: 0; } body, #PageHeader .PageMenu { transition: left 0.5s ease; } body.push #PageHeader .PageMenu { left: 0px; } body.push { position: fixed; left: 280px; width: 100%; transition: left 0.5s ease; } .ie7 body.push { position: absolute; left: 300px; } /* ------------------------------------------------------------------ Header */ #Header { position:relative; } #LogoWrapper { padding: 10px; } .contactDetails { display: none; } #HeaderContact a { color:#999999; text-decoration:none; } #HeaderContact a:hover { color:white; } /* ------------------------------------------------------------------ Footer */ #PageFooter { display:none; } #Footer { padding:10px; margin:0; overflow:auto; font-size:11px; line-height:15px; color:#4D4D4D; } #Footer a { color:inherit; text-decoration:none; } #Footer a:hover { color:white; } #Footer strong { color:#999999; } #Footer .Contact { font-size:12px; } /* ------------------------------------------------------------------ PageContent */ /* Default */ #MainArea #PageContent { padding:0 0 10px 0; } #MainArea #PageContent .Content { padding:10px; } #MainArea #PageContent .Content.C { clear:both; } /* alt */ body.ALT #PageText { width:auto; } body.ALT #MainArea #PageContent .Content.B { display:none; } body.ALT #MainArea #PageContent .Content.C { display:none; } /* ------------------------------------------------------------------ Scrolling Galleries */ #ScrollingGallery { width:100%; background:#1A1A18; overflow:hidden; visibility: hidden; opacity: 0; max-height: 590px; } #ScrollingGallery.show { visibility: visible; opacity: 1; transition: all 3s ease; } /*#ScrollingGallery .scrollWrapper { width:100%; height:100%; position:relative; overflow:hidden; } #ScrollingGallery .scrollableArea { width:auto; height:100%; padding:0 10px; position:relative; margin:0 -20px; } #ScrollingGallery .GalleryFrame { padding:20px 10px; float:left; } #ScrollingGallery .GalleryFrame p { display:none; } .scrollingHotSpotLeft { width:100px; height:100%; position:absolute; z-index:200; left:0; background:url('pictures/gs_webgraphics/none.jpg'); cursor: url('pictures/gs_webgraphics/cursor_alpha_left.png'), url('pictures/gs_webgraphics/cursor_bin_left.cur'), w-resize; } .scrollingHotSpotRight { width:100px; height:100%; position:absolute; z-index:200; right:0; background:url('pictures/gs_webgraphics/none.jpg'); cursor: url('pictures/gs_webgraphics/cursor_alpha_right.png'), url('pictures/gs_webgraphics/cursor_bin_right.cur'), w-resize; } .scrollingHotSpotLeftVisible { background:url('pictures/gs_webgraphics/scrollnav_left.png') center left no-repeat; display:block !important; } .scrollingHotSpotRightVisible { background:url('pictures/gs_webgraphics/scrollnav_right.png') center right no-repeat; } #ScrollingGallery #GalleryInstructions { width:200px; line-height:20px; padding:10px 0; margin:0 0 0 -100px; position:absolute; bottom:30px; left:50%; z-index:9999; text-align:center; background:#1A1A18; color:white; } */ /* Slider */ #ScrollingGallery .scrollableArea { } #ScrollingGallery .GalleryFrame { float: left; margin: 10px 5px; } #ScrollingGallery .GalleryFrame p { display:none; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-loading .slick-list, .scrolling { background: #fff url('_/images/loader.gif') center center no-repeat; } .scrolling .GalleryFrame { opacity: 0; position: absolute; top: 0; left: 0; } .scrolling.slick-initialized { background: none; } .scrolling.slick-initialized .GalleryFrame { opacity: 1; position: relative; transition: opacity 0.2s ease-in; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Arrows */ .slick-prev, .slick-next { position: absolute; z-index: 99999; display: block; width: 80px; height: 80px; padding: 0; top: 46%; margin-top: -10px\9; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: rgba(0, 0, 0, 0.7); border-radius: 50%; box-shadow: 0px 0px 3.4px 0.6px rgba(0, 0, 0, 0.1); } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { opacity: 0.5; font-size: 20px; font-weight: 300; line-height: 1; opacity: .9; color: #808080; position: absolute; top: 50%; margin-top: -10px\9; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -45px; } [dir='rtl'] .slick-prev { right: 5px; left: auto; } .slick-prev:before { content: '\00ab'; right: 15px; } [dir='rtl'] .slick-prev:before { content: '\00ab'; } .slick-next { right: -45px; } [dir='rtl'] .slick-next { right: auto; left: 5px; } .slick-next:before { content: '\00bb'; left: 15px; } [dir='rtl'] .slick-next:before { content: '\00bb'; } /* ------------------------------------------------------------------ AlbumList */ .B #QuickAlbumList { margin:-20px 0 -20px 0; clear:both; overflow:auto; } .B #QuickAlbumList .Row { cursor:pointer; float:left; clear:left; } .B #QuickAlbumList .Row .ThumbTable, .B #QuickAlbumList .Row .Description, .B #QuickAlbumList .Row .Button { display:none; } .B #QuickAlbumList .Row .Title { color:#7FBFFF; text-decoration:underline; } .B #QuickAlbumList .Row:hover .Title { color:white; } .B #QuickAlbumList .Row.Selected .Title { color:white; text-decoration:none; } /* ------------------------------------------------------------------ AlbumList */ .A #QuickAlbumList { margin:-40px 0 -20px 0; clear:both; overflow:auto; } .A #QuickAlbumList .Row { padding:0; margin:40px 0; cursor:pointer; clear:both; overflow:auto; } .A #QuickAlbumList .Row .ThumbTable { float:left; margin:0 20px 0 0; } .A #QuickAlbumList .Row .ThumbTable img { border:10px solid #1A1A18; } .A #QuickAlbumList .Row .Title { padding:0 0 10px 0; font-family:'Times New Roman',Times,serif; font-style:normal; font-size:20px; line-height:20px; color:white; } .A #QuickAlbumList .Row .Description { } .A #QuickAlbumList .Row .Button { text-decoration:underline; color:#7FBFFF; } .A #QuickAlbumList .Row:hover .Button { color:white; } /* ------------------------------------------------------------------ Contact form */ #QuickContact { margin:-15px 0 0 0; padding:0 0 40px 0; overflow:visible; } #QuickContact ul li a { text-decoration:none; } #QuickContact ul { list-style:none; padding:0; margin:0; } #QuickContact li { list-style:none; padding:0; margin:0; } #QuickForm { padding:0; margin:0; } #QuickContact .Row { padding:5px 0; margin:0; } #QuickContact span { display:block; font-size:12px; margin:0; cursor:text; } #QuickContact input, #QuickContact textarea { display:block; font-size:14px; font-family:courier,mono; width:320px; max-width: 100%; padding:7px; } #QuickContact textarea { height:120px; } #QuickContact .Footer { margin:15px 1px; clear:both; overflow:visible; } #QuickContact .Footer a { display:block; padding:7px 25px; float:left; font-weight:bold; color:#1A1A18; background:#7FBFFF; border-radius:4px; box-shadow:0 0 5px black; } #QuickContact .Footer a { -moz-border-radius:4px; -webkit-border-radius:4px; } #QuickContact .Footer a:hover { background:#B7DBFF; } /* ------------------------------------------------------------------ Map */ #MainArea #Map { position:relative; float:left; } #MainArea #Map iframe { border:20px solid #1A1A18; border-left:none; } #MainArea #Map #MapLink { display:block; padding:5px 7px; position:absolute; right:15px; bottom:20px; background:#1A1A18; } /* ------------------------------------------------------------------ Client Login */ #AlbumLogin { overflow:auto; padding:10px 0; } #AlbumLogin div { float:left; line-height:30px; } #AlbumLogin .Row.UserID { display:none; } #AlbumLogin .Row.Password { display:none; } #AlbumLogin .Row.AlbumID .Label { display:none; } #AlbumLogin .Row.AlbumID .Field { } #AlbumLogin .Row.AlbumID .Field input { padding:5px; } #AlbumLogin .Button { margin:0 0 0 10px; padding:5px 15px; font-weight:bold; text-decoration:none; color:#1A1A18; background:#7FBFFF; border-radius:4px; box-shadow:0 0 5px black; } #AlbumLogin .Button { -moz-border-radius:4px; -webkit-border-radius:4px; } #AlbumLogin .Button:hover { background:#B7DBFF; } /* ------------------------------------------------------------------ Album Image List & Pagination */ #MainArea #ImageList { max-width:960px; padding:0; } #MainArea #ImageList #Images { } #MainArea #ImageList .Item { width:48%; height: 180px; float:left; position:relative; background: #1A1A18; padding: 10px; margin: 1%; } #MainArea #ImageList .Item .Thumbnail { margin: 0px auto; display: block; } #MainArea #ImageList .Item .Caption { display:block; width:100%; padding:0; font-size:10px; text-align:center; } .ie7 #MainArea #ImageList .Item { width: 45%; } #MainArea #ImageList .Item .LightBox, #MainArea #ImageList .Item .LightBox a, #MainArea #ImageList .Item .LightBox input { display:none; } #MainArea #ImageList .Image, #MainArea #ImageList img { display:block; margin: 0px auto; } #MainArea #ImageList img { border:8px solid #222; margin-bottom: 5px; } #MainArea #ImageList .Footer { clear:both; } /* Pagination */ /* Paging */ #ImageList .Pager { width: 100%; max-width: 960px; margin: 4% auto; padding: 0 10px; clear: both; position: relative; } #ImageList .Pager .Button { } #ImageList .Pager .Button a { color: #7fbfff; text-decoration: none; display: block; cursor: pointer; } #ImageList .Pager .Button a:hover { color: #fff;} #ImageList .Pager .Button.Next, #ImageList .Pager .Button.Previous { position: absolute; top: 0; left: 0; } #ImageList .Pager .Button.Next { right: 0; left: auto; } /* Pagelinks */ #ImageList .Pager .Pages { width: 100%; float: left; margin: 60px 0 0 0; padding: 5px 0; *display: none; } #ImageList .Pager .Pages ul { list-style: none; padding: 0; margin: 0; text-align: center; } #ImageList .Pager .Pages ul li { display: inline-block; } /* Heading */ #ImageList .Pager .Pages ul li a { display: none; } /* Links */ #ImageList .Pager .Pages ul ul li { display: inline-block; padding: 5px; margin: 0 5px 2px 5px; } #ImageList .Pager .Pages ul ul li a{ display: inline; z-index: 99998; color: #7fbfff; float: left; font-size: 11px; padding: 0; border: none; border-bottom: 1px solid transparent text-decoration: none; background: none; position: relative; } #ImageList .Pager .Pages ul ul li a:empty { display: none; } /* bugfix */ #ImageList .Pager .Pages ul ul a:hover { cursor: pointer; color: #fff; } #ImageList .Pager .Pages ul ul a.Selected { cursor: default; color: #fff; font-weight: bold; border-bottom: 1px solid #7fbfff; } #ImageList .Pager .Pages ul ul a.Selected:hover { color: #8AC456; } li.Button:hover, #ImageList .Pager .Button:hover, #ImageList .Pager .Pages ul ul a:hover { background: none; } #ImageList .Pager .Pages ul ul li:nth-child(2) { margin-left: 0; padding-left: 0; } /* ------------------------------------------------------------------ Image Popup Window */ .PopupBody { background:#2D2E2C url('pictures/gs_webgraphics/bgtexture.png'); } #PopupWindow .ImageControls { width:100%; height:40px; margin: 40px 0 0 0; } #PopupWindow .ImageControls .Previous, #PopupWindow .ImageControls .Next { clear: none!important; } #PopupWindow .ImageControls .Previous:after, #PopupWindow .ImageControls .Next:after { content: ""; padding: 0; } #PopupWindow .ImageControls .Previous { float:left; } #PopupWindow .ImageControls .Next { float:right; } #PopupWindow a[disabled] { display:none; } #PopupWindow .CaptionBottom { font-size: 14px; font-style: italic; font-weight: 300; color: #ccc; position: absolute; top: 20px; right: 20px; } .ImageFilter { text-align: center; margin: 10px 0; } .ImageFilter img { margin: 0 15px 0 0; } .ImageFilter:before { content: "Choose Image Colour:"; padding-right: 10px; text-transform: uppercase; display: inline-block; vertical-align: middle; } #PopupWindow, .Copyright { border: none!important; } #PopupWindow .MainImage { padding: 0 20px; border-bottom: 0; clear: both; margin: 0 auto; } #PopupWindow .MainImage #MainImage_TheImage { margin: 20px auto; border: 8px solid #1A1A18; } /* ------------------------------------------------------------------ Add to basket popup */ /*#MetaData span.Button { display:block; padding:7px 25px; float:left; font-weight:bold; color:#1A1A18; background:#7FBFFF; border-radius:4px; box-shadow:0 0 5px black; cursor:pointer;} #MetaData span.Button { -moz-border-radius:4px; -webkit-border-radius:4px; } #MetaData span.Button:hover { background:#B7DBFF; } .MetaData { float:left; text-align:left; background:#1A1A18; padding:5px; font-size:14px; border:3px solid #1A1A18; } .MetaData .MetaDataTitle { font-size:14px; text-align:left; line-height:25px; color:white; font-weight:bold; } .MetaData .MetaDataField { font-size:14px; color:#999999; line-height:25px; } .MetaData .MetaDataFieldOver { font-size:14px; cursor:pointer; color:white; line-height:25px; } .MetaData .MetaDataHeading { font-size:14px; color:#999999; line-height:25px; } .MetaData .MetaDataCommand { font-size:14px; text-align:right; color:#999999; line-height:25px; } .MetaData .MetaDataCommandOver { font-size:14px; cursor:pointer; color:white; text-align:right; line-height:25px; } .MetaData .MetaDataBasket { font-size:14px; color:#999999; line-height:25px; } .MetaData .MetaDataBasketOver { font-size:14px; color:white; line-height:25px; } */ #MetaData {width:240px; margin: 2rem 2rem 0 2rem; } #MetaData span.Button { display:block; padding:7px 25px; float: left; clear: left; font-weight:bold; color:#1A1A18; background:#7FBFFF; border-radius:4px; box-shadow:0 0 5px black; cursor:pointer;} #MetaData span.Button { -moz-border-radius:4px; -webkit-border-radius:4px; } #MetaData span.Button:hover { background:#B7DBFF; } .MetaData { position:fixed; top:75px; left:2rem; text-align:left; background:#fff; padding:5px; font-size:14px; border:2px solid #fff; width:280px!important; max-width: 90%; cursor:pointer; } .MetaData .MetaDataTitle { display:none; font-size:11px; font-weight:bold; font-size:14px; text-align:left; line-height:35px; color:#222; padding:5px; background: #7fbfff;} .MetaData .MetaDataHeading { color:#fff; padding:4px; background:#7fbfff; } .MetaData .MetaDataField, .MetaData .MetaDataFieldOver, .MetaData .MetaDataCommand, .MetaData .MetaDataCommandOver { color:#333; padding: 10px 0; border-bottom: 1px solid #eee; } .MetaData .MetaDataFieldOver, .MetaData .MetaDataCommandOver { cursor:pointer; color:#7fbfff; } .MetaData .MetaDataCommandOver { background: url('pictures/gs_webgraphics/basket.png') no-repeat 90% center; } .MetaData .MetaDataBasket, .MetaData .MetaDataBasketOver {font-size:14px; color: #000; line-height:25px; padding: 10px 0; } .MetaData .MetaDataBasketOver { color:#7fbfff; background: none; } #PopupWindow #MainImage_imgTable .MetaData .MetaDataField td, #PopupWindow #MainImage_imgTable .MetaData .MetaDataFieldOver td { width: 100%; display: block; } #PopupWindow #MainImage_imgTable .MetaData .MetaDataTitle, #PopupWindow #MainImage_imgTable .MetaData .MetaDataHeading { width: 100%; } #PopupWindow #MainImage_imgTable #MainImage_TheImage { max-width: 100%!important; height: auto!important; } .MetaData nobr { white-space: pre-wrap!important; } .MainImage .Image { max-width: 100%; width: auto; height: auto!important; display: block; } /* ------------------------------------------------------------------ Shopping Cart */ body.BASKET .Content.B { text-align: center; } body.BASKET .Content.B table { margin: 0px auto; } #ShoppingCart { width: 100%; padding: 0 10px; position: relative; margin-bottom: 50px; clear: both; max-width: 960px; margin: 0px; color: #fff; } #ShoppingCart .List { width: 100%; clear: both; overflow: auto; } #ShoppingCart .List table { display: table; width: 100%; } #ShoppingCart .Header { display: none; } #ShoppingCart .Row { padding: 20px; margin: 0; background: none; background: #1A1A18; margin-bottom: 10px; } #ShoppingCart .Header .Thumbnail, #ShoppingCart .Header .Product { display: none; } #ShoppingCart .Row .Thumbnail, #ShoppingCart .Row .Option, #ShoppingCart .Row .Price, #ShoppingCart .Row .Quantity, #ShoppingCart .Row .Total, #ShoppingCart .Row .Remove, #ShoppingCart .Row .Product { float: none; width: 95%; text-align: left; padding-left: 5%; } #ShoppingCart .Row .Thumbnail { display: block; width: 90%; padding-top: 10px; } #ShoppingCart .Row .Thumbnail img { border: 8px solid #222; } #ShoppingCart .Row .Product { display: none!important; } #ShoppingCart .Row .Price:before, #ShoppingCart .Row .Quantity:before, #ShoppingCart .Row .Total:before, #ShoppingCart .Row .Remove:before, #ShoppingCart .Row .Product:before, #ShoppingCart .Row .Option:before { padding-right: 10px; font-size: 12px; display: inline-block; width: 60px; text-transform: lowercase; color: #808080; } #ShoppingCart .Header .Remove { float: left; margin-top: 5px; width: 14px; height: 25px; overflow: hidden; text-indent: -9999px; background: url(pictures/gs_webgraphics/delete.png) no-repeat bottom right; } #ShoppingCart .Row .Price:before {content: "Price:"; } #ShoppingCart .Row .Quantity:before {content: "Quantity:"; } #ShoppingCart .Row .Total:before {content: "Total:"; } #ShoppingCart .Row .Remove:before {content: "Delete:"; } #ShoppingCart .Row .Product:before {content: "Image Number:"; } #ShoppingCart .Row .Option:before {content: "Option:"; } #ShoppingCart .Message { float: left; margin: 10px 0; } #ShoppingCart .Footer { float: left; clear: both; margin-top: 5px; width: 100%; } #ShoppingCart .Footer .Total:before { content: "Total:"; padding-right: 10px; font-weight: normal; font-size: 16px; font-size: 1rem; } #ShoppingCart .Footer .Total { width: 100%; margin: 0; padding: 2rem 0; font-size: 26px; font-weight: bold; text-align: right; color: #7fbfff; border-top: 1px solid rgba(0, 0, 0, 0.2); } #ShoppingCart .Footer .Button { float: right; margin: 10px 0 2rem 10px; clear: none; font-size: 0.9em; } .BasketImage { max-width: 100%; width: auto; height: auto; } .Thumbnail tbody, .Thumbnail table, .Thumbnail tr, .Thumbnail td { display: block; width: 100%; } .Thumbnail td img { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ */ /* Facebook and Twitter Icons */ ul.social-media { margin: 0; padding: 10px 0 0 0; } .social-media li { list-style: none; margin: 0; display: inline-block; } #Facebook, #Twitter {width:24px; float:left; margin:10px 10px 0 0;} #Facebook img, #Twitter img { display: block; } .Contact a img {margin:0 5px;} #ExtraFooter { padding:5px 50px; font-size:12px; } /* -------------------------------------------------------------------------------- */ /* No Script*/ /*-------------------------------------------------------------------------------*/ #NoScript, .chromeframe { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99999999; background: #000; text-align: center; } #NoScript p, .chromeframe p { color: #fff; padding: 10px; max-width: 950px; margin: 0px auto; font-size: 16px; } #NoScript a, .chromeframe a { text-decoration: underline; } /* ------------------------------------------------------------------ Media Queries*/ .slick-slide img { max-height: 200px; width: auto; } .ie8 .slick-slide img, .ie7 .slick-slide img { max-height: 590px; width: auto; } @media screen and (max-width: 320px) { .mobile-header { padding: 0; } .mobile-menu { float: none; width: 1005; text-align: center; border-bottom: 1px solid #888; } .mobile-contact { float: none; text-align: center; } body.push .mobile-menu { text-align: left; } } @media screen and (max-width: 480px) { #Footer span.facebook { display: block; padding: 5px 0; } p.image { float: none; display: block; margin: 0px auto; } } @media only screen and (min-width: 480px) { .slick-slide img { max-height: 300px; width: auto; } } @media screen and (min-width: 580px) { #MainArea #ImageList .Item { width: 31%; } /*Shopping Cart*/ #ShoppingCart .Header { display: block; width: 100%; padding: 0; margin: 0 0 10px 0; height: 40px; clear: both; text-align: left; background: #1A1A18; color: #808080; text-transform: lowercase; font-weight: normal; } #ShoppingCart .Header .Option { float:left; width:27%; margin-left:25.5%; } #ShoppingCart .Header .Price, #ShoppingCart .Header .Quantity, #ShoppingCart .Header .Total { float:left; width:13.3%; } #ShoppingCart .Header .Price, #ShoppingCart .Header .Total { width: 14%; } #ShoppingCart .Header .Option, #ShoppingCart .Header .Price, #ShoppingCart .Header .Quantity, #ShoppingCart .Header .Total, #ShoppingCart .Message { font-size:14px; line-height:40px; } #ShoppingCart .Message { color: #888; } #ShoppingCart .Row { width:100%; float:left; clear:both; padding:1%; overflow:hidden; position: relative; padding-bottom: 50px; } #ShoppingCart .Row .Thumbnail img { display: block; max-width: 100%; height:auto; width: 100px\0;} #ShoppingCart .Row .Thumbnail { float:left; text-align:center; width:20%; margin-right: 5%; } #ShoppingCart .Row .Option { float:left; width:27.5%; padding:5px 0 0 0; font-size:16px; } #ShoppingCart .Row .Product, #ShoppingCart .Row .Price, #ShoppingCart .Row .Quantity, #ShoppingCart .Row .Total { float:left; text-align:left; width:11%; padding:0; padding-top:5px; margin-right: 3%; } #ShoppingCart .Row .Total { width: 10%;} #ShoppingCart .Row .Remove { float:left; text-align:center; width:25px; padding: 0; padding-top:6px; } #ShoppingCart .Row .Quantity input { text-align:right; width:45px; } #ShoppingCart .Row .Product { width: 16%; padding: 0; position: absolute; bottom: 10px; left: 50px; text-align: center; } #ShoppingCart .Row .Price:before, #ShoppingCart .Row .Quantity:before, #ShoppingCart .Row .Option:before, #ShoppingCart .Row .Total:before, #ShoppingCart .Row .Remove:before, #ShoppingCart .Row .Product:before {content:""; padding: 0; width: 0; } #ShoppingCart .Footer .Total { padding-top: 40px; } #ShoppingCart .Footer .Button { margin: 40px 0 2rem 40px; } } @media only screen and (min-width: 680px) { .slick-slide img { max-height: 400px; } } @media screen and (min-width: 760px) { #MainArea #ImageList .Item { width: 23%; } .slick-slide img { max-height: 500px; } } @media screen and (min-width: 960px) { .header, #Footer { padding:0 50px; } #Footer { padding: 30px 50px; } #LogoLink { display: block; margin: 40px 0; float: left; } .slick-slide img { max-height: 590px; } /* Default */ #MainArea #PageContent { padding:0 0 40px 0; } #MainArea #PageContent .Content { float:right; } #MainArea #PageContent .Content.A { width:70%; padding:0 25px; } #MainArea #PageContent .Content.B { width:30%; padding:10px 50px; } #MainArea #PageContent .Content.C { clear:both; } h2 a { margin:-20px; } /* alt */ body.ALT #PageText { width:auto; float:left; } body.ALT #MainArea { max-width: 960px; } body.ALT #MainArea #PageContent { float:left; width:30%; } body.ALT #MainArea #PageContent .Content { float:left; width: 100%; } body.ALT #MainArea #PageContent .Content.A { padding:10px 50px; } body.ALT #MainArea #PageContent .Content.B { display:none; } body.ALT #MainArea #PageContent .Content.C { display:none; } #MainArea #ImageList, #MainArea #ShoppingCart { width: 70%; float: left; clear: none; } #MainArea #ShoppingCart { margin-top: 45px; } #Footer .Contact { float:left; font-size:12px; } #Footer .CopyCredits { float:right; } } @media screen and (min-width: 1100px) { .contactDetails { display: block; float: left; padding: 40px 80px; } .mobile-contact { display: none; } } @media screen and (min-width: 1300px) { /* Main nav */ .mobile-header { display: none; } #PageHeader { margin:0; overflow: visible; padding: 0 30px; } #PageHeader .PageMenu { width: 100%; position: static; top: auto; left: auto; z-index: 999999; height: auto; } #PageHeader .PageMenu .Alignment { height: auto; overflow: visible; } #PageHeader .PageMenu .MenuItem { float:left; padding:0 10px; position:relative; border: none; } #PageHeader .MenuItem a { display:block; margin:0; padding:10px; text-decoration:none; } /*#PageHeader .PageMenu .MenuItem.First, #PageHeader .PageMenu .MenuItem.First a { padding-left: 0; }*/ /* Sub menus */ #PageHeader .PageMenu .SubMenu { display:none; margin:0; padding:0; position:absolute; top:40px; z-index:500; } #PageHeader .PageMenu .MenuItem:hover .SubMenu { display:block; } #PageHeader .PageMenu .MenuItem:hover a { color:white; } #PageHeader .PageMenu .SubMenu ul { margin:0; padding:0 0 5px 0; list-style:none; background:#1A1A18; } #PageHeader .PageMenu .SubMenu li { margin:0; padding:0; } #PageHeader .PageMenu .SubMenu a { color:#999999 !important; white-space:nowrap; padding:0px 10px !important; line-height:25px; font-size:12px; } #PageHeader .PageMenu .SubMenu a:hover { color:white !important; } #PageHeader .PageMenu .SubMenu a.SubSelected { color:white !important; } } // from System Meta Data