*,*:before,*:after { box-sizing: border-box; } body { margin: 0px; font-size: 14px } img { border: 0px; max-width: 100%; vertical-align: top } p { margin: 1em 0px; letter-spacing:0.5px; } p:first-child { margin-top: 0px } p:last-child { margin-bottom: 0px } form, ul, li {margin: 0px;} iframe { vertical-align: top; max-width: 100% } table { border: 0px; border-spacing: 0px; } a:link, a:visited, a:active, a:focus { text-decoration: none; color: #000 } a:hover { color: #1670b8; text-decoration: none } h1, h2, h3 { margin: 20px 0px 10px 0px; font-weight: 700; line-height: normal } h4, h5, h6 { margin: 0px; font-weight: 400; line-height: 1.3em } h1 { font-size: 42px } h2 { font-size: 32px } h3 { font-size: 28px } h4 { font-size: 24px } h5 { font-size: 18px } h6 { font-size: 12px } h3.SectionHeader { font-size: 32px; margin-top: 20px; margin-bottom: 20px } h4.Title { margin: 10px 0px } .row { margin-bottom: 0px; } h1:first-child, h2:first-child, h3:first-child { margin-top: 0px } h1:last-child, h2:last-child, h3:last-child { margin-bottom: 0px } .clr { clear: both } /* Area and section ===============================================================================*/ #outpage { position: relative; z-index: 0 } #HeaderArea > div:after, #FooterArea > div:after, #main > div > div:after, .list-sections:after { content: ""; clear: both; display: block } #HeaderArea { position: relative; z-index: 1000 } #main > div { position: relative; z-index: 100 } #FooterArea { position: relative; z-index: 10 } .HeaderContentSections, .HeaderSections, .MainContentSections, .FooterSections { max-width: 1200px; margin: auto } /*-- Class for wrapper -- */ .FullWidth { max-width: 100%; } .MaxWidth { max-width: 1200px; margin: auto } .list-sections { font-size: 0px } .section-item { font-size: 14px } .section-item.MaxWidth { max-width: 100% } .section-item.MaxWidth > * { max-width: 1200px; margin-left: auto; margin-right: auto } .Lock { position: relative } .shc .SectionHeader { text-align: center } .Float { position: absolute; margin: auto; z-index: 20; max-width: 1200px; height: 25%; left: 0px; right: 0px; top: 0px; bottom: 0px; } .Float.SearchArea { height: 40px } .HeaderFullWidth { max-width: none } .HeaderFullWidth .SectionHeader+div, .HeaderFullWidth .Ingress, .HeaderFullWidth .Body { max-width: 1200px; margin: auto } /*-- Section and Article size ===============================================================================*/ .Column { float: left } .Column.Right { float: right } .Column.s1-2 { width: 50% } .Column.s1-3 { width: 33.3333% } .Column.s2-3 { width: 66.6667% } .Column.s1-3:nth-of-type(3n+2) { width: 33.3334% } .Column.s1-4 { width: 25% } .Column.s3-4 { width: 75% } .Column.s1-5 { width: 20% } .Column.s2-5 { width: 40% } .Column.s3-5 { width: 60% } .Column.s4-5 { width: 80% } .Column.s1-2.Margin { width: 49% } .Column.s1-4.Margin { width: 23.5% } .Column.s3-4.Margin { width: 74.5% } .Column.s2-3.Margin:nth-of-type(n) { width: 66% } .Column.s1-3.Margin:nth-of-type(n) { width: 32%; } .Column.s1-2.MarginN { width: 48.5% } .Column.s2-3.MarginN:nth-of-type(n) { width: 60.3337% } .Column.s1-3.MarginN:nth-of-type(n) { width: 30.3333%; } .Column.Margin:nth-of-type(n) { margin-left: 2% } .Column.MarginN:nth-of-type(n) { margin-left: 3% } .Column.Margin:nth-of-type(n):first-child, .Column.MarginN:nth-of-type(n):first-child { margin-left: 0px } /* ArticleWithSetting Items ===============================================================================*/ .listArticle:after { content: ""; display: block; clear: both } .listArticle > .Items { display: inline-block; vertical-align: top; width: 100% } /*-- Item width --*/ .listArticle > .Two.Items { width: 50%; } .listArticle > .Three.Items { width: calc(100% / 3); } .listArticle > .Four.Items { width: 25%; } .listArticle > .Five.Items { width: 20%; } /*-- Item width with margin --*/ .listArticle > .Items.Margin { margin-left: 2% } .listArticle > .Items.MarginN { margin-left: 3% } .listArticle > .Two.Items.Margin { width: 49% } .listArticle > .Two.Items.MarginN { width: 48.5% } .listArticle > .Three.Items.Margin { width: 32% } .listArticle > .Three.Items.MarginN { width: calc(94% / 3); } .listArticle > .Four.Items.Margin { width: 23.5%; } .listArticle > .Four.Items.MarginN { width: 22.75%; } .listArticle > .Five.Items.Margin { width: 18.4%; } .listArticle > .Two.Items.Margin:nth-of-type(2n+1), .listArticle > .Two.Items.MarginN:nth-of-type(2n+1), .listArticle > .Three.Items.Margin:nth-of-type(3n+1), .listArticle > .Three.Items.MarginN:nth-of-type(3n+1), .listArticle > .Four.Items.Margin:nth-of-type(4n+1), .listArticle > .Four.Items.MarginN:nth-of-type(4n+1), .listArticle > .Five.Items.Margin:nth-of-type(5n+1) { margin-left: 0px } .listArticle > .Two.Items.Margin:nth-of-type(n+3), .listArticle > .Three.Items.Margin:nth-of-type(n+4), .listArticle > .Four.Items.Margin:nth-of-type(n+5), .listArticle > .Five.Items.Margin:nth-of-type(n+6) { margin-top: 20px } .listArticle > .Two.Items.MarginN:nth-of-type(n+3), .listArticle > .Three.Items.MarginN:nth-of-type(n+4), .listArticle > .Four.Items.MarginN:nth-of-type(n+5), .listArticle > .Five.Items.MarginN:nth-of-type(n+6) { margin-top: 36px } /* ArticleWithSettingSection Items ===============================================================================*/ .ArticleItemList:after { content: ""; display: block; clear: both } .ArticleItemList > .Items { display: inline-block; vertical-align: top; width: 100% } /*-- Item width --*/ .ArticleItemList > .Two.Items { width: 50%; } .ArticleItemList > .Three.Items { width: calc(100% / 3); } .ArticleItemList > .Four.Items { width: 25%; } .ArticleItemList > .Five.Items { width: 20%; } /*-- Item width with margin --*/ .ArticleItemList > .Items.Margin { margin-left: 2% } .ArticleItemList > .Items.MarginN { margin-left: 3% } .ArticleItemList > .Two.Items.Margin { width: 49% } .ArticleItemList > .Two.Items.MarginN { width: 48.5% } .ArticleItemList > .Three.Items.Margin { width: 32% } .ArticleItemList > .Three.Items.MarginN { width: calc(94% / 3); } .ArticleItemList > .Four.Items.Margin { width: 23.5%; } .ArticleItemList > .Four.Items.MarginN { width: 22.75%; } .ArticleItemList > .Five.Items.Margin { width: 18.4%; } .ArticleItemList > .Two.Items.Margin:nth-of-type(2n+1), .ArticleItemList > .Two.Items.MarginN:nth-of-type(2n+1), .ArticleItemList > .Three.Items.Margin:nth-of-type(3n+1), .ArticleItemList > .Three.Items.MarginN:nth-of-type(3n+1), .ArticleItemList > .Four.Items.Margin:nth-of-type(4n+1), .ArticleItemList > .Four.Items.MarginN:nth-of-type(4n+1), .ArticleItemList > .Five.Items.Margin:nth-of-type(5n+1) { margin-left: 0px } .ArticleItemList > .Two.Items.Margin:nth-of-type(n+3), .ArticleItemList > .Three.Items.Margin:nth-of-type(n+4), .ArticleItemList > .Four.Items.Margin:nth-of-type(n+5), .ArticleItemList > .Five.Items.Margin:nth-of-type(n+6) { margin-top: 20px } .ArticleItemList > .Two.Items.MarginN:nth-of-type(n+3), .ArticleItemList > .Three.Items.MarginN:nth-of-type(n+4), .ArticleItemList > .Four.Items.MarginN:nth-of-type(n+5), .ArticleItemList > .Five.Items.MarginN:nth-of-type(n+6) { margin-top: 36px } /* Square Contents -----------------------------------------------------------*/ .Square { float: left; position: relative; overflow: hidden; z-index: 1; width: 100% } .Square > div > img:first-child, .Square > div > a:first-child, .Square .Title, .Square .Ingress { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px } .Square:before { content: ""; display: block; padding-top: 100%; background: #fff } .Square.Three { width: 33.3333% } .Square.Four { width: 25% } .Square.Half:before { padding-top: 50% } .Square.Half .column { float: left; margin: 0px; width: 50%; position: relative; height: 100%;z-index: 2 } .Square.Half .column.right { float: right } .Square.Half .under { z-index: 1 } /*-- Set --*/ .Square.Set .Title { bottom: 50%; top: auto; height: auto; } .Square.Set .Ingress { top: 50%; height: auto; } /*-- Set Half --*/ .Square.Half.Set > div > img:first-child, .Square.Half.Set > div > a:first-child { width: 50%; right: 0px; left: auto; overflow: hidden } .Square.Half.Set > div > a:first-child img { position: absolute; max-width: none; max-height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .Square.Half.Set .Title { width: 50%; bottom: 50%; top: auto; height: auto; } .Square.Half.Set .Ingress { width: 50%; top: 50%; height: auto; } /*-- Set Half Left --*/ .Square.Half.Set.Left > div > img:first-child, .Square.Half.Set.Left > div > a:first-child { left: 0px; } .Square.Half.Set.Left .Title, .Square.Half.Set.Left .Ingress { right: 0px; left: auto } /*-- Set Half Switch Right--*/ .Square.Half.Set.Switch:nth-of-type(2n+2) > div > img:first-child, .Square.Half.Set.Switch:nth-of-type(2n+2) > div > a:first-child { left: 0px; } .Square.Half.Set.Switch:nth-of-type(2n+2) .Title, .Square.Half.Set.Switch:nth-of-type(2n+2) .Ingress { right: 0px; left: auto } /*-- Set Half Switch Left--*/ .Square.Half.Set.Left.Switch:nth-of-type(2n+2) > div > img:first-child, .Square.Half.Set.Left.Switch:nth-of-type(2n+2) > div > a:first-child { right: 0px; left: auto } .Square.Half.Set.Left.Switch:nth-of-type(2n+2) .Title, .Square.Half.Set.Left.Switch:nth-of-type(2n+2) .Ingress { left: 0px; } /* list contents -----------------------------------------------------------*/ .listArticle .List { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1) } .listArticle .List:last-child { margin-bottom: 0px; padding-bottom: 0px; border: 0px } .listArticle .List > div:after { display: block; content: ""; clear: both; } .listArticle .List > div > img:first-child { float: left; max-width: 30%; margin-right: 20px } .listArticle .List > div > a:first-child { float: left; width: 30%; margin-right: 20px } .listArticle .List > div > a.readmore { margin-top: 4px; display: inline-block } .listArticle .List .Title { margin-top: 0px } .listArticle .List.PageWidth { border: 0px; margin-top: 0px; padding-bottom: 0px } .listArticle .List.PageWidth:nth-of-type(n+3) { border-top: 1px solid #ededed; padding-top: 20px } /* list contents -----------------------------------------------------------*/ .ArticleItemList .List { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1) } .ArticleItemList .List:last-child { margin-bottom: 0px; padding-bottom: 0px; border: 0px } .ArticleItemList .List > div:after { display: block; content: ""; clear: both; } .ArticleItemList .List > .ImageCover { float: left; width: 30%; margin-right: 20px } .ArticleItemList .List > div > a.readmore { margin-top: 4px; display: inline-block } /* list contents -----------------------------------------------------------*/ .List .listArticle { margin-bottom: 20px; padding-bottom: 20px; } .List .listArticle > div:last-child { margin-bottom: 0px; padding-bottom: 0px; border: 0px } .List .listArticle > div > div:after { display: block; content: ""; clear: both; } .List .listArticle > div > div > img:first-child { float: left; max-width: 30%; margin-right: 20px } .List .listArticle > div > div > a:first-child { float: left; width: 30%; margin-right: 20px } .List .listArticle > div > div > a.readmore { margin-top: 4px; display: inline-block } .List .listArticle > div .Title { margin-top: 0px } .List .listArticle > div.PageWidth { border: 0px; margin-top: 0px; padding-bottom: 0px } .List .listArticle > div.PageWidth:nth-of-type(n+3) { border-top: 1px solid #ededed; padding-top: 20px } /* Img crop -----------------------------------------------------------*/ .listArticle .ImgCrop > div { position: relative; } .listArticle .ImgCrop > div > a:first-child { overflow: hidden; background: #efefef; z-index: 1; position: relative; display: block; } .listArticle .ImgCrop div > a:first-child img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; overflow: hidden; } .listArticle .ImgCrop div > a:first-child.Hor img { max-width: none; max-height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .listArticle .ImgCrop.s1-1 > div > a:first-child { padding-top: 100%; } .listArticle .ImgCrop.s4-3 > div > a:first-child { padding-top: 75%; } .listArticle .ImgCrop.s16-9 > div > a:first-child { padding-top: 56.25%; } .listArticle .ImgCrop.s16-10 > div > a:first-child { padding-top: 63%; } .listArticle .List.ImgCrop.s1-1 > div > a:first-child { padding-top: 30%; } .listArticle .List.ImgCrop.s4-3 > div > a:first-child { padding-top: 23%; } .listArticle .List.ImgCrop.s16-9 > div > a:first-child { padding-top: 17%; } .listArticle .List.ImgCrop.s16-10 > div > a:first-child { padding-top: 19%; } .listArticle .Square.ImgCrop > div { position: static } .listArticle .Square.ImgCrop > div > a:first-child { position: absolute; width: 300%; left: -100%; bottom: 0px; margin: auto; z-index: 0 } .listArticle .Square.ImgCrop > div > a:first-child img { max-width: none; max-height: 100% } /* Title Float -----------------------------------------------------------*/ .TitleFloat .listArticle > div > div { position: relative } .TitleFloat .listArticle .Title { margin: 0px; position: absolute; bottom: 0px; z-index: 1; width: 100% } .TitleFloat .listArticle .Title a { text-align: center; display: block; padding: 15% 15px 5%; background-image: -webkit-linear-gradient(to top, #2F96D0 0%, #275998 0%); background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); color: #fff } /* SocialIcons -----------------------------------------------------------*/ .SocialIcons { text-align: center; padding: 50px 0px 20px 0px } .SocialIcons p { width: 80px; display: inline-block; margin: 0px 6px; position: relative; vertical-align: top } .SocialIcons p a { display: block; width: 100%; padding-top: 100%; position: relative; } .SocialIcons p img { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius:50%; padding:15px; background:#f2f2f2; transition:0.3s; } .SocialIcons p img:hover{ background:#ddd; padding:5px; } .SocialIcons a[href^="https://twitter.com"] img, .SocialIcons a[href^="https://www.twitter.com"] img { background: rgba(29,202,255,0.8) } .SocialIcons a[href^="https://twitter.com"] img:hover, .SocialIcons a[href^="https://www.twitter.com"] img:hover { background:#009fe4} .SocialIcons a[href^="https://facebook.com"] img, .SocialIcons a[href^="https://www.facebook.com"] img { background:#3b5998} .SocialIcons a[href^="https://facebook.com"] img:hover, .SocialIcons a[href^="https://www.facebook.com"] img:hover { background:#253c76} .SocialIcons a[href^="https://linkedin.com"] img, .SocialIcons a[href^="https://www.linkedin.com"] img { background: rgba(0,123,181,0.8) } .SocialIcons a[href^="https://linkedin.com"] img:hover, .SocialIcons a[href^="https://www.linkedin.com"] img:hover { background: rgba(0,123,181,1) } .SocialIcons a[href^="https://youtube.com"] img, .SocialIcons a[href^="https://www.youtube.com"] img { background:#bb0000 } .SocialIcons a[href^="https://youtube.com"] img:hover, .SocialIcons a[href^="https://www.youtube.com"] img:hover { background:#a50000 } .SocialIcons a[href^="https://instagram.com"] img, .SocialIcons a[href^="https://www.instagram.com"] img { background: #ee583f ; } .SocialIcons a[href^="https://instagram.com"] img:hover, .SocialIcons a[href^="https://www.instagram.com"] img:hover { background: #bd3381 } .SocialIcons a[href^="https://plus.google.com"] img { background:#dd4b39 } .SocialIcons a[href^="https://plus.google.com"] img:hover{ background:#cc4030} /*-- FitIcon --*/ .SocialIcons.FitIcon p a { border-radius: 50%; overflow: hidden; transition: all 0.2s } .SocialIcons.FitIcon p a img { padding: 0px; width: 32px; right: 0px; margin: auto } .SocialIcons.FitIcon img,.SocialIcons.IconFit img:hover { background: none !important } .SocialIcons.FitIcon .tw { background: #55acee } .SocialIcons.FitIcon .tw:hover { background:#009fe4 } .SocialIcons.FitIcon .fb { background:#3b5998} .SocialIcons.FitIcon .fb:hover { background:#253c76} .SocialIcons.FitIcon .in { background: rgba(0,123,181,0.8) } .SocialIcons.FitIcon .in:hover { background: rgba(0,123,181,1) } .SocialIcons.FitIcon .yt img { background:#bb0000 } .SocialIcons.FitIcon .yt:hover { background:#a50000 } .SocialIcons.FitIcon .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); } .SocialIcons.FitIcon .ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); } .SocialIcons.FitIcon .gp img { background:#dd4b39 } .SocialIcons.FitIcon .gp:hover{ background:#cc4030} /* Copyright -----------------------------------------------------------*/ .Copyright .Ingress { padding: 30px 0px 30px 0px; text-align: center } .Copyright .listArticle { max-width: 1200px; margin: auto } /* Full Article and Article detail -----------------------------------------------------------*/ .ArticleDetails, .fullArticleItem { max-width: 1200px; margin: auto } .listArticle .Items .Ingress ul, .listArticle .Items .Body ul { white-space: normal } .listArticle .Body ul,.listArticle .Body ol { padding-left: 20px } .ArticleDetails li, .fullArticleItem li, .listArticle .Ingress li, .listArticle .Body li { text-align: left; line-height: inherit; padding: 4px 0px } .SectionArticles { max-width: 1200px; margin: auto } /* Read Article -----------------------------------------------------------*/ .PageArticleIndex .ArticleDetails, .MainContentSectionsWrapper:first-child:last-child .FullArticleBody, .listArticle .Body { padding-bottom: 40px } .PageArticleIndex .ArticleDetails .ArticleBody:after, .FullArticleBody:after, .listArticle .Body:after { content: ""; display: block; clear: both } .PageArticleIndex .ArticleDetails .ShareLink { line-height: 40px } /* .TagCloud ------------------------------------------------------------*/ .TagCloudWrapper { margin-top: 20px } .TagCloud > .TagCloud { margin-top: 40px; border-top: 1px dashed #ededed; padding-top: 20px } .TagCloudTitle { display: block; font-weight: bold; text-transform: uppercase; font-size: 115% } .TagCloudList { display: block } .TagCloudList > span { display: inline-block; vertical-align: top; background: #666; padding: 4px 8px; margin-top: 8px; border-radius: 2px; transition: all 0.2s } .TagCloudList > span:hover { background: #000 } .TagCloudList > span a { color: #fff } /* Default Form (Update 03/07/15) ---------------------------------------*/ input[type="text"], input[type="tel"], input[type="password"], input[type="email"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; padding: 0px 0px 0px 8px; font-family: inherit; font-size: inherit; min-height: 40px; line-height: 38px; border-radius: 2px; margin-bottom: 0px; border: 1px solid #ccc; } select > option:first-child { height: 36px } textarea { min-height: 120px } .input-validation-error { margin: 0px } #captcha { width: 180px; margin-bottom: 0px } .ui-button .ui-button-text { line-height: 40px; padding: 0px; display: block; font-size: inherit; } .ui-button .ui-button-text img { display: none } .btn,a.btn, .button, a.ui-button, .ui-button, .make-button, a.make-button, .CheckoutButton, .ShoppingCartButton a.checkOut, .AddPropertyConfirmLink, a.ShoppingCartLink, a.Printbutton, a.ContinueShoppingButton, .LoginToSeePrice > a, a.LinkToPropertyDetail, .AllDetails a, .MoreDetails a, button, input[type="submit"], input[type="reset"], input[type="button"], .ui-dialog .ui-dialog-buttonset button, .PropertyMoreDetailsLink.ui-button, .CheckAvailableUnitsLink a, .RemoveWishList .RemoveWishListLink, .AddToWishList .AddToWishListLink, a.CategoryItemSlideShowAllLink, .ShoppingCartButton a.saveAsDraft, .PageMyAccountEditForumUserSetting #ContentArea form+div a { display: inline-block; background-color: #333; background-image: none; background-position: center center; background-repeat: no-repeat; color: #fff; font-size: inherit; font-family: inherit; font-weight: 700; line-height: 40px; height: 40px; border: 0px; letter-spacing: 1px; margin: 0px; padding: 0px 20px; text-shadow: none; border-radius: 2px; outline: none; transition: all 0.2s; cursor: pointer } .btn:hover,a.btn:hover, .button:hover, .ui-button:hover, .make-button:hover, a.make-button:hover, .CheckoutButton:hover, .ShoppingCartButton a.checkOut:hover, .AddPropertyConfirmLink:hover, a.ShoppingCartLink:hover, a.Printbutton:hover,a.ContinueShoppingButton:hover,.LoginToSeePrice > a:hover, a.LinkToPropertyDetail:hover, .AllDetails a:hover, .MoreDetails a:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .ui-dialog .ui-dialog-buttonset button:hover, .PropertyMoreDetailsLink.ui-button:hover, .CheckAvailableUnitsLink a:hover, .RemoveWishList .RemoveWishListLink:hover, .AddToWishList .AddToWishListLink:hover, a.CategoryItemSlideShowAllLink:hover, .ShoppingCartButton a.saveAsDraft:hover, .PageMyAccountEditForumUserSetting #ContentArea form+div a:hover { border: 0px; color: #fff; background-color: #000; background-image: inherit; background-position: center center; background-repeat: no-repeat; } .btn:active,a.btn:active, .button:active, .ui-button:active, .make-button:active, a.make-button:active, .CheckoutButton:active, .ShoppingCartButton a.checkOut:active, .AddPropertyConfirmLink:active, a.ShoppingCartLink:active, a.Printbutton:active,a.ContinueShoppingButton:active,.LoginToSeePrice > a:active, a.LinkToPropertyDetail:active, .AllDetails a:active, .MoreDetails a:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, .ui-dialog .ui-dialog-buttonset button:active, .PropertyMoreDetailsLink.active, .CheckAvailableUnitsLink a:active, .RemoveWishList .RemoveWishListLink:active, .AddToWishList .AddToWishListLink:active, a.CategoryItemSlideShowAllLink:active, .ShoppingCartButton a.saveAsDraft:active, .PageMyAccountEditForumUserSetting #ContentArea form+div a:active { border: 0px; background-color: #000; background-image: inherit; background-position: center center; background-repeat: no-repeat; } label.ui-button { background-color: #f2f2f2; padding: 0px; } label.ui-button.ui-state-active { background-color: #666 } button.ui-datepicker-trigger { position: absolute; right: 0px; bottom: 0px; background-image: url(/Content/Archive/406/calendar-190781.png); background-repeat: no-repeat; background-position: center center } button.ui-datepicker-trigger:hover { background-image: url(/Content/Archive/406/calendar-190781.png); background-position: center center } button.ui-datepicker-trigger:active { background-image: url(/Content/Archive/406/calendar-190781.png); background-position: center center } button.ui-datepicker-trigger img { display: none } a.btn-success, input.btn-success { background-color: #5cb85c } a.btn-warning { background-color: #f0ad4e; } a.btn-success:hover,input.btn-success:hover { background: #449D44 } a.btn-warning:hover { background: #EC971F } .btn.btnback,.btn.btnback:hover,.btn.btnback:active { padding-left: 46px; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: left 4px top -360px; background-repeat: no-repeat; } .btn-close,.btn-close:hover,.btn-close:active { padding-right: 46px; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: right 4px top -80px; background-repeat: no-repeat; } fieldset > legend { font-size: 24px; color: #000; margin-bottom: 20px } form label, .editor-label label { display: inline; font-size: inherit; font-weight: 500 } span.required, .RequiredSymbol,.error { color: #ff0000; font-family: calibri } .field-validation-valid { color: #ff0000 } .field-validation-error { color: red; display: block; margin-bottom: 20px } .CustomFormLabel { display: block } .editor-label a { display: inline-block } .ui-selectmenu-menu-dropdown { box-sizing: border-box } /*-- CustomForm --*/ .CustomFormField { margin-bottom: 15px; position: relative } .form-group { margin-bottom: 15px } /*Menu ===============================================================================*/ .MenuVerticalDropdown { width: 100%; clear: both } .topnav { text-align: center; font-size: 0px; margin-left: 0px; padding-left: 0px } /*<-- Change position of menu*/ .topnav > li { display: inline-block; position: relative; vertical-align: top; line-height: normal } /*<-- Change line-height and height*/ .topnav a { /*<-- Style up this*/ font-size:14px; font-weight: normal; color: #666; padding:0px 20px; display: block; line-height: 50px; } .topnav .VerticalDropDownMenu_active > a { background: #000; color: #fff; } .topnav > li:hover > a { background: #000; color: #fff; } /*-- Submenu --*/ .subnav { display: none; margin: 0px; padding: 0px; position: absolute; z-index: 11; min-width: 100%; background: #000; text-align: left; list-style: none } /*<-- Style up this*/ .subnav li {margin: 0px;white-space: nowrap;position: relative;} .subnav a { line-height: 40px; text-align: left; color: #fff } .subnav a:hover { color: #fff; background: #0d1f39 } /*-- Third menu --*/ .subnav2 { display: none !important; position: absolute; left: 100%; top: 0px; margin: 0px; background:#000; padding: 0px; list-style: none } .subHover .subnav2 { display: block !important } /*-- ShowAll --*/ .ShowAllThird .topnav > li { position: static } .ShowAllThird .subnav { width: auto; min-width: auto } .ShowAllThird .subnav > li { display: inline-block; vertical-align: top } .ShowAllThird .subnav2 { display: block !important; position: relative; left: 0px; height: auto !important} /* List menu ===============================================================================*/ .menu_list { margin: 0px; padding: 0px; list-style: none } /* Main menu level 3 ===============================================================================*/ .ResponsiveMenuWrapper ul { margin: 0px } .ResponsiveMenu { text-align: center; font-size: 0px; margin-left: 0px; padding-left: 0px } .ResponsiveMenu li { float: none !important; margin: 0px } .ResponsiveMenu > li { display: inline-block; position: relative; vertical-align: top; line-height: normal } .ResponsiveMenu a { /*<-- Style up this*/ font-size:14px; font-weight: normal; color: #666; text-align: left; padding:0px 20px; display: block; line-height: 50px; transition: all 0.2s } .ResponsiveMenu .ResponsiveMenuItem.Active > a, .ResponsiveMenu > .ResponsiveMenuItem > a.Clicked { background: #000; color: #fff; } /*-- Level 2 --*/ .ResponsiveSubMenu { position: absolute; width: auto; margin-left: 0px; padding-left: 0px; background: #000; } .ResponsiveSubMenu li { display: block; } .ResponsiveSubMenu a { line-height: 40px; color: #fff; white-space: nowrap; } .ResponsiveSubMenu a.Clicked { background: #000; color: #fff; } /*-- Level 3 --*/ .ResponsiveSubMenuLev2 { position: absolute; left: 100%; margin-left: 0px; padding-left: 0px; top: 0px; background: #000; min-height: 100%; min-width: 100%; transition: all 0.5s } .ResponsiveSubMenuLev2 a:hover { background: #000; color: #fff; } /* ShowAll ---------------------------------------*/ .ShowAll .ResponsiveMenu > li { position: static } .ShowAll .ResponsiveSubMenu { width: auto; } .ShowAll .ResponsiveSubMenu > li { display: inline-block; vertical-align: top } .ShowAll .ResponsiveSubMenu > li > a { cursor: default !important } .ShowAll .ResponsiveSubMenu > li > a:hover { background: none } .ShowAll .ResponsiveSubMenu a.Clicked { background: none; color: #fff; } .ShowAll .ResponsiveSubMenuLev2 { display: block !important; position: static } /* Menu Account ===============================================================================*/ .MenuAccount .menu_list, .Inline .menu_list { font-size: 0px; margin: 0px } .MenuAccount .menu_list > li, .Inline .menu_list > li { display: inline-block; font-size: 14px; vertical-align: top; line-height: inherit } .MenuAccount .menu_list > li+li, .Inline .menu_list > li+li { padding-left: 10px } /* Menu Language ===============================================================================*/ .LanguagePanel { position: relative; text-transform: capitalize; display: inline-block; vertical-align: top } .LanguagePanel a { padding: 0px 20px 0px 50px; display: block; background-repeat: no-repeat; background-position: left 10px center } .LanguagePanelOption { position: absolute; min-width: 100%; right: 0px; background:#fff } .LanguagePanel a.LanguageLinkth { background-image: url(/Content/Archive/406/th-305558.png) } .LanguagePanel a.LanguageLinkde { background-image: url(/Content/Archive/406/de-243679.png) } .LanguagePanel a.LanguageLinkes { background-image: url(/Content/Archive/406/es-114640.gif) } .LanguagePanel a.LanguageLinkzh { background-image: url(/Content/Archive/406/zh-305559.png) } .LanguagePanel a.LanguageLinkda { background-image: url(/Content/Archive/406/da-242216.png) } .LanguagePanel a.LanguageLinkno { background-image: url(/Content/Archive/406/no-242218.png) } .LanguagePanel a.LanguageLinken { background-image: url(/Content/Archive/406/en-242217.png) } .LanguagePanel a.LanguageLinksv { background-image: url(/Content/Archive/406/sv-242219.png) } .LanguagePanel a.LanguageLinkru { background-image: url(/Content/Archive/406/ru-257691.png) } .LanguagePanel a.LanguageLinkmn { background-image: url(/Content/Archive/406/mn-305482.png) } .LanguagePanel a.LanguageLinkfi { background-image: url(/Content/Archive/406/fi-308093.png) } .LanguagePanel a.LanguageLinkit { background-image: url(/Content/Archive/406/it-243676.png) } .LanguagePanel a.LanguageLinkfr { background-image: url(/Content/Archive/406/fr-243678.png) } .LanguagePanel a.LanguageLinknl { background-image: url(/Content/Archive/406/nl-243675.png) } .ShowAll .LanguagePanel a { display: inline-block; padding-right: 0px; vertical-align: top } .ShowAll .LanguagePanelOption { display: inline-block !important; vertical-align: top; width: auto; min-width: 0px; position: static; border: 0px; background: none } .ShowAll .LanguagePanelOption a { margin-left: 10px } .FlagOnly { font-size: 0px } .FlagOnly .LanguagePanel a { height: 20px; padding-left: 30px; padding-right: 0px; background-position: center center } /* ScrollUp update 04/01/2016 ===============================================================================*/ .ScrollUp { position: fixed; display: none; cursor: pointer; border-radius: 50%; right: 20px; bottom: 20px; height: 60px; width: 60px; padding: 30px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); font-size: 0px; background-color: rgba(0,0,0,0.15); transition: background 0.2s } .ScrollUp:hover { background-color: rgba(0,0,0,0.3) } .ScrollUp:before, .ScrollUp:after { content: ""; display: block; position: absolute; left: 38%; top: 38%; background: #000 } .ScrollUp:before { width: 6%; height: 30%; } .ScrollUp:after { width: 30%; height: 6%; } /*Contact Page update 04/01/2016 ===============================================================================*/ .FormPage { max-width: 1200px; margin: auto } .FormPage:after { content: ""; display: block; clear: both } .FormPage .formDesc { padding-top: 20px; float: left; width: 46% } .FormPage form { margin: 20px 0px; padding: 15px; float: right; width: 50%; border: 1px solid #ededed; border-radius: 4px; background: #fff } .FormPage .editor-wrapper { padding: 10px 0px; overflow: hidden; border-bottom: 1px solid #ededed } .FormPage .editor-label { float: left; width: 30%; line-height: 40px; } .FormPage .editor-field { float: left; width: 70% } .FormPage #editorWrapperCaptcha.editor-wrapper, p.ContactFormSend { margin-bottom: 0px; } .FormPage #editorWrapperCaptcha.editor-wrapper, .FormPage .ContactFormSend { margin-top: 0px; padding-left: 30% } .FormPage .ContactFormSend { margin-top: 20px } /*-- Confirm sent mail --*/ .FormPage .formConfirm { background: url(/Content/Archive/406/icon-thank-115443.png) top 40px center no-repeat; padding: 124px 0px 80px 0px; text-align: center } /*-- Mobile --*/ .m .FormPage #editorWrapperCaptcha.editor-wrapper, .m .FormPage .ContactFormSend { margin-top: 0px; padding-left: 0% } /* Search update 05/04/2016 ===============================================================================*/ .SearchButton { position: absolute; top: 0px; right: 0px; width: 40px; height: 40px } .SearchAjaxResult { width: calc(100% - 40px) !important; margin-top: 0px !important; } .SearchAjaxResult > div:last-child { border-bottom: 1px solid #bdc3c7 !important } .Search .SearchButton,.Search .SearchButton:hover { font-size: 0px; border-radius: 0px; background-image: url(/Content/Archive/406/search-96807.png); background-size: 28px; } .SearchResult { max-width: 1200px; margin-left: auto; margin-right: auto } .SearchResult { padding-left: 15px; padding-right: 15px; } .SearchResultItem { border-bottom: 1px solid #ededed; padding-bottom: 20px } .SearchResult .productListItem, .mt .SearchResult .productListItem { margin-left: 0px; width: 100%; border-bottom: 1px solid #ededed; padding-bottom: 20px } .SearchResult .productListItem .productListImage { float: left; width: 20%; padding-top: 20% } /* Search product ===============================================================================*/ .search-suggestion-area { position: relative; } .PageSearchResult .search-suggestion { position: relative } /*-- Search button --*/ .search-suggestion > a, .search-suggestion > a:before, .search-suggestion > a:after { content: ""; position: absolute; display: block; } .search-suggestion > a { top: 1px; right: 1px; border-radius: 0px; font-size: 0px !important; height: 38px; width: 38px; margin: 0px !important; } .search-suggestion > a:before { width: 39%; height: 39%; border: 2px solid #fff; /*<-- o color --*/ border-radius: 50%; top: 24%; right: 24%; } .search-suggestion > a:after { width: 26%; height: 5%; background: #fff; /*<-- o color --*/ border-radius: 0px; bottom: 23.5%; left: 26%; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 0% 50%; transform: rotate(-45deg); transform-origin: 0% 50%; } .search-suggestion > a:hover { background: none !important } .search-suggestion > a { background: #ccc } .search-suggestion > a:before { border-color: #808080 } .search-suggestion > a:after { background: #808080 } /*-- Search result --*/ .search-result-area { max-width: 1200px; margin: auto } .search-suggestion-result > div:nth-of-type(2) { padding: 10px } .search-suggestion-result { background: #fff; box-shadow: 0px 2px 6px rgba(0,0,0,0.2); border: 0px solid rgba(0,0,0,0.1); margin-top: 6px; position: absolute; width: 100%; z-index: 1 } .search-suggestion-result h3 { margin: 0px; font-size: 18px; padding: 0px 10px; line-height: 40px; background: #F25822; color: #fff; font-weight: 300 } .search-suggestion-result .close { position: absolute; top: 0px; right: 0px; opacity: 1 } .search-suggestion-result .close .btn { border-radius: 0px } .search-suggestion-result h4 { margin: 0px; font-size: 14px; font-weight: 600; padding: 6px 0px } .search-suggestion-result > .search-app-result-list { display: table-cell; width: 10%; font-size: 14px; vertical-align: top; padding: 4px 10px; box-sizing: border-box; border-right: 1px solid #efefef } /*-- Search footer --*/ .search-app-result-footer { padding: 4px 10px; background: #DCDDDF } .search-suggestion-result .search-app-result-list { padding-bottom: 10px } .search-app-result-list > .search-app-result-list { border-bottom: 1px solid #efefef } /* Article Slide ===============================================================================*/ .flexslider { border: 0px; box-shadow: none; margin: 0px; position: relative; background: none } .flexslider ul { padding: 0px; margin-top: 0px; margin-bottom: 0px } .flexslider .slides img { width: 100%; display: block; } /*slide bullet update 2015.09.09 --------------------------------------*/ .flex-control-nav { position: absolute; text-align: center; z-index: 50; display: block; width: 100%; bottom: 20px; padding: 0px } .flex-control-nav li { vertical-align: middle; margin: 0 6px; display: inline-block; } .flex-control-nav a { width: 10px; height: 10px; display: block; background:rgba(0,0,0,0.3); border-radius: 50%; box-shadow: none; vertical-align: middle; text-indent: -9999px; cursor: pointer; } .flex-control-nav a.flex-active { width:20px; height:20px; background: #F15A29; } /*-- NoBullet --*/ .NoBullet .flex-control-nav { display: none } /*slide arrow direction 2016.05.04 --------------------------------------*/ .flex-direction-nav li { height: 0px; list-style: none } .flex-direction-nav a { position: absolute; display: block; height: 50px; width: 50px; top: 0px; bottom: 0px; margin: auto; background: rgba(0,0,0,0.3); border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 50; text-indent: -9999px; } /* image and position here*/ .flex-direction-nav .flex-prev { left: 0px } .flex-direction-nav .flex-next { right: 0px } .flexslider:hover .flex-prev { left: 4%; } .flexslider:hover .flex-next { right: 4%; } .flex-direction-nav a:before { content: ""; display: block; position: absolute; border-left: 5px solid #fff; border-top: 5px solid #fff; width: 36%; height: 36%; left:0px; right: 0px; top: 0%; bottom: 0%; margin: auto; -webkit-transition: all 0.2s; transition: all 0.2s } .flex-direction-nav .flex-prev:before { -webkit-transform: rotateZ(-45deg) translate(12%, 12%); transform: rotateZ(-45deg) translate(12%, 12%) } .flex-direction-nav .flex-next:before { -webkit-transform: rotateZ(135deg) translate(12%, 12%); transform: rotateZ(135deg) translate(12%, 12%) } .flex-direction-nav a:hover:before { border-color: #fff } .flex-direction-nav a:hover { background: #000 } .SlideWidth .flex-direction-nav { max-width: 1200px; width: 100%; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; position: absolute } .SlideWidth .flexslider:hover .flex-prev { left: -16px } .SlideWidth .flexslider:hover .flex-next { right: -16px } /*Text in slide --------------------------------------*/ .Flexslider .flex-viewport li { position: relative } .Flexslider .text { position: absolute; z-index: 1; height: 50%; width: 50%; margin: auto; left: 0px ; right: 0px; top: 0px; bottom: 0px } .Flexslider a.btn { margin-top: 20px } /*-- Arrow Always show --*/ .ArrowAlwaysShow .flex-direction-nav a { opacity: 1 } /*-- Only Arrow --*/ .OnlyArrow .flexslider .flex-prev, .OnlyArrow .flexslider:hover .flex-prev { left: -16px; } .OnlyArrow .flexslider .flex-next, .OnlyArrow .flexslider:hover .flex-next { right: -16px; } /*-- slide arrow1 direction --*/ .ArrowStyle1 .flex-direction-nav a { background: none !important } .ArrowStyle1 .flex-direction-nav a:before { width: 68%; height: 68%; } .ArrowStyle1 .flex-direction-nav a:hover:before { border-color: #000 } .ArrowStyle1 .flex-direction-nav .flex-prev:before { -webkit-transform: rotateZ(-45deg) translate(32%, 32%); transform: rotateZ(-45deg) translate(32%, 32%) } .ArrowStyle1 .flex-direction-nav .flex-next:before { -webkit-transform: rotateZ(135deg) translate(32%, 32%); transform: rotateZ(135deg) translate(32%, 32%) } /*-- slide arrow2 direction --*/ .ArrowStyle2 .flex-direction-nav a { width: 25px; background: none !important; border-radius: 0px } .ArrowStyle2 .flex-direction-nav a:before { width: 34px; height: 34px; border-width: 10px } .ArrowStyle2 .flex-direction-nav a:hover:before { border-color: #000 } .ArrowStyle2 .flex-direction-nav .flex-prev:before { -webkit-transform: rotateZ(-45deg) translate(18%, 18%); transform: rotateZ(-45deg) translate(18%, 18%) } .ArrowStyle2 .flex-direction-nav .flex-next:before { -webkit-transform: rotateZ(0deg) translate(18%, 18%); transform: rotateZ(135deg) translate(18%, 18%); left: auto; } /* Nivoslide ===============================================================================*/ .slider-wrapper { position: relative } .slider-wrapper .nivoSlider { margin: 0px !important; box-shadow: none !important; z-index: 1 } /*-- bullet direction --*/ .slider-wrapper.theme-default .nivo-controlNav { position: absolute; bottom: 0px; left: 0px; width: 100%; z-index: 1 } .slider-wrapper.theme-default .nivo-controlNav a { display: inline-block; width: 12px; height: 12px; background: #ccc; border-radius: 50%; vertical-align: middle; margin: 0px 4px } .slider-wrapper.theme-default .nivo-controlNav a.active { width: 18px; height: 18px; background: #000 } /*-- slide arrow direction --*/ .nivo-directionNav a { height: 25px !important; width: 50px !important; top: 0px !important; bottom: 0px !important; margin: auto; background: none !important; overflow: hidden; } .nivo-prevNav { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .nivo-nextNav { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .nivo-prevNav:before, .nivo-prevNav:after,.nivo-nextNav:before, .nivo-nextNav:after { content: ""; display: block; position: absolute; background: #fff; top: 0px; width: 72%; height: 10px; -webkit-transition: all 0.2s; transition: all 0.2s; } .nivo-prevNav:before, .nivo-nextNav:before { margin: auto; right: 50%; transform-origin: 100% 0%; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } .nivo-prevNav:after, .nivo-nextNav:after { margin: auto; left: 50%; transform-origin: 0% 0%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .nivo-prevNav:hover:before, .nivo-prevNav:hover:after,.nivo-nextNav:hover:before, .nivo-nextNav:hover:after { background: #000 } /*-- Arrow style cicle --*/ .ArrowCircle .nivo-directionNav a { position: absolute; display: block; height: 60px !important; width: 60px !important; top: 0px; bottom: 0px; margin: auto; background: rgba(0,0,0,0.3) !important; border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 50; text-indent: -9999px; } .ArrowCircle .nivo-prevNav:after, .ArrowCircle .nivo-nextNav:after {display: none } .ArrowCircle .nivo-prevNav:before, .ArrowCircle .nivo-nextNav:before { border-right: 2px solid #fff; border-top: 2px solid #fff; border-radius: 0px 1px 0px 0px; background: none; width: 30%; height: 30%; top: 0px; bottom: 5%; } /*-- Arrow style cicle small arrow--*/ .ArrowCircleS .nivo-directionNav a { position: absolute; display: block; height: 60px !important; width: 60px !important; top: 0px; bottom: 0px; margin: auto; background: rgba(0,0,0,0.3) !important; border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 50; text-indent: -9999px; } .ArrowCircleS .nivo-prevNav:before, .ArrowCircleS .nivo-prevNav:after, .ArrowCircleS .nivo-nextNav:before, .ArrowCircleS .nivo-nextNav:after { height: 2px; width: 20%; top: 40% } .ArrowCircleS .nivo-directionNav a:hover { background: rgba(0,0,0,0.8) !important; } .ArrowCircleS .nivo-prevNav:hover:before,.ArrowCircleS .nivo-prevNav:hover:after,.ArrowCircleS .nivo-nextNav:hover:before,.ArrowCircleS .nivo-nextNav:hover:after { background: #fff } /* Caption Float ---------------------------------------*/ .CaptionSet.Center .nivo-caption { top: 0px; bottom: 0px; right: 0px; left: 0px; margin: auto; height:160px; max-width:300px; padding:40px 20px !important; background: rgba(0,0,0,0.4) !important; text-align: center; opacity: 1 !important; } /* OwlSlider ===============================================================================*/ .owl-nav { margin: 0px !important } .owl-nav > button { position: absolute; bottom: 40px; margin: auto !important; top: 0px; background: rgba(0,0,0,0.4) !important; opacity: 0; width: 40px; left: 0px; border-radius: 50% !important } .owl-nav > button span { display: none } .owl-nav > button.owl-next { left: auto;right: 0px } .owl-carousel:hover .owl-nav > button { opacity: 1 } .owl-carousel:hover .owl-nav > button:hover { background: rgba(0,0,0,0.8) !important } .owl-carousel:hover button.owl-prev { left: 20px } .owl-carousel:hover button.owl-next { right: 20px } .owl-prev { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .owl-next { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .owl-prev:before, .owl-prev:after,.owl-next:before, .owl-next:after { content: ""; display: block; position: absolute; background: #fff; top: 30%; width: 38%; height: 2px; -webkit-transition: all 0.2s; transition: all 0.2s; } .owl-prev:before, .owl-next:before { margin: auto; right: 51%; transform-origin: 100% 0%; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } .owl-prev:after, .owl-next:after { margin: auto; left: 50%; transform-origin: 0% 0%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } /*-- Nav --*/ .owl-carousel.owl-theme .owl-dots .owl-dot { vertical-align: top; height: 60px } .owl-carousel.owl-theme .owl-dots .owl-dot.active span { width: 18px; height: 18px; } .owl-carousel.owl-theme .owl-dots .owl-dot span { width: 12px; height: 12px; } .mt .owl-theme .owl-dots .owl-dot { width: auto } .mt .owl-nav { display: none } /* Register form ===============================================================================*/ .Register { max-width: 768px; margin: 0px auto; padding: 40px 15px } .Register .AccountType { margin-bottom: 20px } .Register .AccountType label { display: inline-block } .Register h2.PersonControl,.Register h2.CompanyContorl,.Register h2.CompanyControl { font-size: 28px; margin-bottom: 20px } .Register input { display: inline-block; margin-right: 12px; margin-bottom: 0px; box-sizing: border-box } /*-- validate --*/ .Register .RequiredSymbol { font-size: 16px } .Register .field-validation-error { color: #B28E2F; font-size: 13px; font-style: italic; display: inline-block; width: 300px; vertical-align: middle } /*-- Username --*/ .Register .Message.UserTaken { color: #f00; font-weight: 700; } .Register .Message.UserAvailable { color: #2e2f84; font-weight: 700; } /*-- Style box --*/ .Register .control-label, .Register .conrol-label { margin-bottom: 4px; display: inline-block; width: 200px; font-size: 16px; font-weight:400 } .Register .control-group .controls { display: inline-block; width: 300px } .Register .UserContorl, .Register .UserControl, .Register div.CompanyContorl, .Register div.CompanyControl, .Register div.PersonControl { padding: 15px 0px; border-bottom: 1px solid #f2f2f2 } .Register div.control-group.Captcha { padding-top: 20px } .Register .CustomFormCaptcha, .Register .RegisterButton { margin: 15px 0px 15px 204px; } body:not(.m) .Register .RegisterButton > * { width: auto } #socialLoginList{ margin:0px 0 20px; padding-bottom: 20px; border-bottom: 1px solid #e4e4e4; text-align: center } .btn.FacebookLoginButton { background:#3b5998; } .btn.FacebookLoginButton:hover { background: #2b4886; } .btn.GoogleLoginButton { background:#da4835; } .btn.GoogleLoginButton:hover { background: #c33725; } .m .btn.GoogleLoginButton { margin-top: 8px } /* Regist area for module ===============================================================================*/ .LogOnUserControl, .MyAccount { text-align: center } .LogOnPanel, .LogOnForm { margin: auto; max-width: 380px; padding:20px } .LogOnUserControl .LogOnPanel form { text-align: left } .MyAccount, .UserProfile, #OrderList, .OrderDetailLayout { max-width: 1200px; margin: auto } /*-- Login --*/ .LogOnForm input { margin-top: 8px } .LogOnForm .LogOnFormAction { margin-top: 12px } .LogOnForm .LogOnFormAction .Submit {margin-right: 12px } #logonPanel fieldset { margin: 0px; } #registerPanel { max-width: 280px; margin: auto } #registerPanel legend { display: none } #registerPanel .ui-button { width: 100%; margin-top: 6px !important; text-align: center } /* Reset password ---------------------------------------*/ .ResetPasswordForm { width: 100%; max-width: 738px } .ResetPasswordForm .FormControl { margin-top: 12px; max-width: 320px } .ResetPasswordForm .LogOnFormAction { margin-top: 20px; } .ResetPasswordForm .LogOnFormAction button { width: auto } /* Account ---------------------------------------*/ .MyAccount:after { content: ""; display: block; clear: both } .MyAccount .QuickFuction { margin-top: 20px; text-align: center } .MyAccount .ModuleFunction { float: none; margin: 0px; width: 180px; display: inline-block } .MyAccount .ModuleFunction:hover { margin: 0px } .QuickFuction #ProfileFunction img, .QuickFuction #WebShopFuction img, .QuickFuction #AccommodationFuction img, .QuickFuction #ForumFunction img { display: none } .MyAccount { text-align: center; padding-bottom: 40px; } .QuickFuction > div { float: none; display: inline-block } .QuickFuction > div > a:first-child { display: block; width: 120px; height: 120px; margin: 20px auto; border-radius: 50%; overflow: hidden; background-color: #000; background-repeat: no-repeat; background-position: center center; transition: all 0.2s } .QuickFuction > div > a:hover:first-child { background-color: #FFaa00 } .QuickFuction > div > a:active:first-child { background-color: #e58220; } .QuickFuction #ClassifiedFuction img { display: none } .QuickFuction #ClassifiedFuction > a:first-child { background-image: url(/content/ClassifiedIcon.png) } .QuickFuction #ProfileFunction > a:first-child { background-image: url(/Content/Archive/406/icon-admin-252099.png) } .QuickFuction #ForumFunction > a:first-child { background-image: url(/Content/Archive/406/Forum-254083.png) } .QuickFuction #WebShopFuction > a:first-child { background-image: url(/Content/Archive/406/ic3-114164.png) } .QuickFuction #AccommodationFuction > a:first-child { background-image: url(/Content/Archive/406/icon-admin2-252100.png) } .ModuleFunction:hover { margin-top: 15px } /* Profile ===============================================================================*/ .UserPhoto #downloadableUserPhotoArea {z-index: 1;position: relative;display: block;height: 220px; width: 220px; overflow: hidden; border-radius: 50px;} .UserPhoto #downloadableUserPhotoArea:after { content: ""; position: absolute; } .UserPhoto #downloadableUserPhotoArea img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; cursor: pointer; z-index: 1; border-radius: 50%; } .UserPhoto #downloadableUserPhotoArea.Hor img { max-width: none; max-height: 100%; height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .UserProfile .UserPhoto { position: absolute; left: 0%; right: 0px; margin: auto;top: 0px;width: 220px; height: 220px; text-align: center; padding: 0%; border-radius: 50%; overflow: hidden } /*-- Area --*/ .UserProfile .ui-tabs-nav { padding: 0px; background: none; border: 0px; text-align: center } .UserProfile .ui-tabs-nav .ui-state-default { margin: 0px; border: 0px; top: 0px; float: none; display: inline-block; background: none } .UserProfile .ui-tabs-nav .ui-state-default a { display: block; float: none; padding } .UserProfile .ui-tabs-nav .ui-state-default+.ui-state-default { margin-left: 2% } .UserProfile .ui-tabs-nav .ui-state-default.ui-state-active a { color: #212121 } .UserProfile .ui-tabs-nav .ui-state-default a:before { content: ""; display: block; width: 96px; height: 96px; margin: auto; background: #fff; margin-bottom: 14px; border-radius: 50%; background: url(/Content/Archive/406/icon-profile-3-225918.png) no-repeat center center #B4B5B9; } .UserProfile .ui-tabs-nav .ui-state-default#TabChangePassword a:before { background-image: url(/Content/Archive/406/icon-profile-1-225920.png) } .UserProfile .ui-tabs-nav .ui-state-default a[href="#tabCategory"]:before { background-image: url(/Content/Archive/406/icon-catagory-254084.png) } .UserProfile .ui-tabs-nav .ui-state-default#TabBillingAddress a:before { background-image: url(/Content/Archive/406/icon-profile-2-225919.png) } .UserProfile .ui-tabs-nav .ui-state-default#TabShippingAddress a:before { background-image: url(/Content/Archive/406/icon-profile-2-225919.png) } .UserProfile .ui-tabs-nav .ui-state-default.ui-state-active a:before { background-color: #212121 } .UserProfile.CompanyProfile .ui-tabs-nav .ui-state-default#TabGeneralInformation a:before { background-image: url(/Content/Archive/406/company-254069.png) } /*-- Area --*/ .UserProfile > #tabs { position: relative; padding: 250px 0% 0px 0%; border: 0px } .UserProfile > #tabs > div { padding-left: 0px; padding-right: 0px } .UserProfile > #tabs > div:nth-of-type(1) { border-top: 1px solid #ededed; padding-top: 20px } .UserProfile > #tabs > div form > div:nth-of-type(n+2) { margin-top: 10px } .UserProfile > #tabs > div form .editor-wrapper:after, #ChangePasswordForm div:nth-of-type(n+1):after { content: ""; display: block; clear: BOTH } .UserProfile > #tabs > div form > div .editor-label, #ChangePasswordForm div:nth-of-type(n+1) label { float: left; width: 25%; line-height: 40px } .UserProfile > #tabs > div form > div .editor-field, #ChangePasswordForm div:nth-of-type(n+1) div { float: left; width: 75% } .UserProfile > #tabs > div form > div label { display: block; font-weight: bold; line-height: 40px; height: 40px } .UserProfile > #tabs > div form > p { margin: 0px } .UserProfile *[type="submit"] { margin: auto; display: block; margin-top: 20px } .UserProfile > #tabs > #GeneralInformation, .UserProfile > #tabs > #tabCategory, .UserProfile > #tabs > #BillingAddress, .UserProfile > #tabs > #ShippingAddress, .UserProfile > #tabs > #ChangePassword { max-width: 720px; margin: 40px auto } /* Regist category ---------------------------------------*/ .AdditionalContactInformation { max-width: 1200px; margin: 40px auto; } .AdditionalContactInformation h2 { margin-bottom: 8px } .AdditionalContactInformationDescription { margin: 8px 0px 20px 0px } .RegistrationCustomerCategoryForm { position: relative; font-size: 0px; } .RegistrationCustomerCategoryForm:before, .RegistrationCustomerCategoryForm:after { content: ""; position: absolute; height: calc(100% - 100px); top: 0px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .RegistrationCustomerCategoryForm:before { left: 400px; width: 400px } .RegistrationCustomerCategoryForm:after { left: 0px; width: 100%; border-radius: 4px; border: 1px solid #ddd; } .RegistrationCustomerCategoryForm > * { font-size: 14px; } .RegistrationCustomerCategoryForm > div:nth-of-type(n) { display: inline-block; width: 400px; vertical-align: top; padding: 20px; position: relative; margin: 0px !important; z-index: 1 } .RegistrationCustomerCategoryForm > div:nth-of-type(3n+4):before { content: ""; position: absolute; width: 1200px; top: 0px; border-top: 1px solid #ddd; left: 0px } .RegistrationCustomerCategoryForm > div:last-child { display: block; z-index: 1; width: 100%; text-align: center } .RegistrationCustomerCategoryForm > div:last-child button { margin-top: 20px } .RegistrationCustomerCategoryForm > div strong { display: inline-block; margin-bottom: 8px; font-weight: bold; font-size: 16px; } .RegistrationCustomerCategoryForm > div label { font-weight: normal !important; display: inline !important; line-height: normal !important } /*-- user profile --*/ .UserProfile .AdditionalContactInformation { border: 1px solid #ddd; padding: 20px; margin: 0px; border-radius: 4px } .UserProfile .AdditionalContactInformation > div { line-height: 32px; border-bottom: 1px solid #ddd } .UserProfile .AdditionalContactInformation > a { margin-top: 20px; } /* Order ---------------------------------------*/ .Orders { max-width: 1200px; margin: auto } .Orders .FiltersForm { font-size: 0px; padding-right: 112px; position: relative } .Orders .FiltersForm > div { font-size: 14px; width: calc(18.4%); display: inline-block; vertical-align: top } .Orders .FiltersForm > div+div { margin-left: 2% } .Orders .FiltersForm > .filbydate { width: 38.8%; font-size: 0px; } .Orders .FiltersForm > .filbydate > div { width: 48%; float: left } .Orders .dateto { margin-left: 4% } .Orders .fildate { background: url(/Content/Archive/406/calendar-226613.png) no-repeat right 2px center; font-size: 14px } .Orders .ui-datepicker-trigger { display: none } .Orders .btnSearch { position: absolute; top: 0px; right: 0px } .MyOrderListItem { margin-top: 20px } .TableOrders { width: 100%; border: 1px solid #ededed; line-height: 40px; border-radius: 4px } .TableOrders thead, .TableOrders tbody tr:nth-of-type(2n+2) { background: #f7f7f7 } .TableOrders tbody tr+tr td { border-top: 1px solid #efefef } .TableOrders tbody td { border-left: 1px solid #efefef; text-align: center } .TableOrders tbody td:first-child { border-left: 0px } #OrderList > h3 { text-align: center; margin-bottom: 20px } #OrderList > table { width: 100%; ; border-top: 1px solid #f7f7f7; ; border-left: 1px solid #f7f7f7 } #OrderList > table th { text-align: center; font-weight: 700; background: #efefef; line-height: 36px; border-bottom: 1px solid #f7f7f7; border-right: 1px solid #f7f7f7 } #OrderList > table td { line-height: 36px; border-bottom: 1px solid #f7f7f7; border-right: 1px solid #f7f7f7; padding: 0px 12px } #OrderList > div { margin-top: 6px; text-align: center } /* OrderDetail ---------------------------------------*/ .OrderDetailLayout { border: 1px solid #ededed; padding: 0px } .OrderDetailLayout > h2 { margin-bottom: 20px; background: #f7f7f7; padding: 10px 20px; text-align: right } .OrderDetailLayout h3 { text-align: center; margin-bottom: 20px } .Shipping-CustomerName { font-size: 24px; margin: 0px; text-transform: uppercase; text-align: center } /*-- Box --*/ .OrderDetailLayout-Content > div { margin: 40px 20px; border-bottom: 1px solid #f7f7f7 } .ShippingAndPaymentLayout-Content > div { padding-top: 40px; } .OrderDetailLayout .Head-Title,.OrderDetailLayout .Detail { display: inline-block; width: 50%; vertical-align: top; line-height: 36px; padding: 0px 12px } .Information-Item, .Information-list-item { font-size: 0px } .Information-Item:nth-of-type(2n+0), .Information-list-item:nth-of-type(2n+0) { background: #f9f9f9 } .Information-Item > div, .Information-list-item > div { font-size: 14px } /*-- 1 Address --*/ .ShippingAddressLayout, .BillingAddressLayout { display: inline-block; width: 49%; vertical-align: top } /*-- 3 listItem --*/ .ShippingOrderContent-Content .Information-Item { padding: 20px 0px; background: none } .ProductVariantName { font-size: 18px; line-height: 40px; border-bottom: 1px solid #f9f9f9 } .ShippingOrderContent .Information-Item { border-top: 1px solid #f7f7f7 } .ImageProductVariant, .ProductVariantDetail { width: 50%; display: inline-block; vertical-align: top } /* Edit Forum User ===============================================================================*/ .PageMyAccountEditForumUserSetting #ContentArea > div > * { max-width: 1200px; margin: auto } .PageMyAccountEditForumUserSetting #ContentArea fieldset { border: 0px; margin: 0px; padding: 20px 0px; } .PageMyAccountEditForumUserSetting #ContentArea fieldset > p:last-child { margin-left: 23.5% } .PageMyAccountEditForumUserSetting #ContentArea fieldset .editor-wrapper > div { float: left; width: 23.5%; line-height: 40px; } .PageMyAccountEditForumUserSetting #ContentArea fieldset .editor-wrapper:after { content: ""; display: block; clear: both } .PageMyAccountEditForumUserSetting #ContentArea form+div { border-top: 1px solid #ddd; padding-top: 20px } /* Booking List ===============================================================================*/ .PageBookingsMyBookingList #ContentArea > div > * { max-width: 1200px; margin: auto } .tablemybokinglist { width: 100%; border: 1px solid #ededed } .tablemybokinglist th,.tablemybokinglist td { padding: 8px 12px; } .tablemybokinglist thead { background: #efefef } .tablemybokinglist td+td { border-left: 1px solid #ededed } .tablemybokinglist tr+tr td { border-top: 1px solid #ededed } .tablemybokinglist td .btn { height: 32px; line-height: 32px } .tablemybokinglist td:nth-child(1) { width: 13% } .tablemybokinglist td:nth-child(2) { width: 17.4% } .tablemybokinglist td:nth-child(3) { width: 17.4% } .tablemybokinglist td:nth-child(4) { width: 17.4% } .tablemybokinglist td:nth-child(5) { width: 17.4% } .tablemybokinglist td:nth-child(6) { width: 17.4% } /* Content ---------------------------------------*/ .PageBookingsEditMyBooking #ContentArea > div { max-width: 1200px; margin: auto; text-align: center } .PageBookingsEditMyBooking #ContentArea h2 { text-align: left } .PageBookingsEditMyBooking #ContentArea #tabs { text-align: left } .PageBookingsEditMyBooking #ContentArea table { border: 1px solid #ccc; border-radius: 4px; overflow: hidden } .PageBookingsEditMyBooking #ContentArea table th, .PageBookingsEditMyBooking #ContentArea table td { padding: 8px 12px; } .PageBookingsEditMyBooking #ContentArea tbody th+th, .PageBookingsEditMyBooking #ContentArea tbody td+td { border-left: 1px solid #ccc } .PageBookingsEditMyBooking #ContentArea tbody tr+tr th, .PageBookingsEditMyBooking #ContentArea tbody tr+tr td { border-top: 1px solid #ccc } .PageBookingsEditMyBooking #ContentArea thead { background: #f7f7f7; border-radius: 5px 5px 0px 0px } .PageBookingsEditMyBooking #ContentArea thead tr:last-child > * { border-bottom: 1px solid #ccc } /* Additional Item ---------------------------------------*/ .PageBookingsEditMyBooking .AdditionalItemList { padding-left: 0px; font-size: 14px } .PageBookingsEditMyBooking .AdditionalItemGroups+.AdditionalItemGroups { margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px } .PageBookingsEditMyBooking .TotalSpan { margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px; font-size: 24px } .PageBookingsEditMyBooking .AdditionalItemGroups h3 { font-size: 14px; line-height: 1; margin: 0px 0px 4px 0px } .PageBookingsEditMyBooking .AdditionalItemGroups input { width:80px; display: inline-block; margin-right: 12px } .PageBookingsEditMyBooking .AdditionalItemGroups li+li { margin-top: 8px } /* Button ---------------------------------------*/ .PageBookingsEditMyBooking .editbookingMenu { margin-top: 12px; float: none !important; padding-right: 0px !important; display: inline-block } .PageBookingsEditMyBooking .cancelBookingbtn { text-align: center; margin-top: 12px; display: inline-block } .PageBookingsEditMyBooking .backtolistbtn { margin-top: 12px; text-align: left } .PageBookingsEditMyBooking .backtolistbtn a:before { content: ""; display: block; width: 8px; height: 8px; display: inline-block; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 12px } .PageBookingsEditMyBooking .backtolistbtn a { background-color: #323232 } .PageBookingsEditMyBooking .backtolistbtn a:hover { background-color: #111 } /* Booking List ===============================================================================*/ .PageBookingsEditMyBookingDetail #ContentArea > div { max-width: 1200px; margin: auto } .PageBookingsEditMyBookingDetail #ContentArea table { border: 1px solid #ccc; border-radius: 4px; overflow: hidden } .PageBookingsEditMyBookingDetail #ContentArea table th, .PageBookingsEditMyBookingDetail #ContentArea table td { padding: 8px 12px; position: relative } .PageBookingsEditMyBookingDetail #ContentArea tbody th+th, .PageBookingsEditMyBookingDetail #ContentArea tbody td+td { border-left: 1px solid #ccc } .PageBookingsEditMyBookingDetail #ContentArea tbody tr+tr th, .PageBookingsEditMyBookingDetail #ContentArea tbody tr+tr td { border-top: 1px solid #ccc } .PageBookingsEditMyBookingDetail #ContentArea thead { background: #f7f7f7; border-radius: 5px 5px 0px 0px } .PageBookingsEditMyBookingDetail #ContentArea thead tr:last-child > * { border-bottom: 1px solid #ccc } .PageBookingsEditMyBookingDetail #ContentArea form .control-menu { margin-top: 20px } .PageBookingsEditMyBookingDetail #ContentArea form .control-menu input { float: right } .PageBookingsEditMyBookingDetail #ContentArea form .control-menu a { background-color: #323232 } .PageBookingsEditMyBookingDetail #ContentArea form .control-menu a:hover { background-color: #111 } .PageBookingsEditMyBookingDetail #ContentArea form .control-menu a:before { content: ""; display: block; width: 8px; height: 8px; display: inline-block; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 12px } .PageBookingsEditMyBookingDetail #ContentArea table td .ui-datepicker-trigger { bottom: auto; right: 12px; top: 8px; } .PageBookingsEditMyBookingDetail #ContentArea table td #checkAvailability { margin-top: 8px } /* Account Transaction ===============================================================================*/ .AccountTransactionPanel { max-width: 1200px; margin: auto; } .AccountTransactionPanel h3 { margin: 20px 0px } .AccountTransactionPanel table { width: 100%; border: 1px solid #ededed } .AccountTransactionPanel thead { background: #f7f7f7; text-align: center } .AccountTransactionPanel th, .AccountTransactionPanel td { padding: 0px 8px; line-height: 40px } .AccountTransactionPanel th+th, .AccountTransactionPanel td+td { border-left: 1px solid #ededed } .AccountTransactionPanel tbody tr+tr td { border-top: 1px solid #ededed } .AccountTransactionPanel tfoot th { border-top: 1px solid #ededed; font-size: 16px; font-weight: bold } .m .AccountTransactionPanel table { border: 0px } .m .AccountTransactionPanel tr, .m .AccountTransactionPanel th, .m .AccountTransactionPanel td { border-left: 0px; display: block; padding: 0px; line-height: 1.5; } .m .AccountTransactionPanel thead { display: none } .m .AccountTransactionPanel tbody td:before { content: attr(data-header) " "; font-weight: bold } .m .AccountTransactionPanel tbody tr+tr { padding-top: 20px; border-top: 1px solid #ededed; margin-top: 20px } .m .AccountTransactionPanel tfoot { display: block; padding-top: 20px; border-top: 1px solid #ededed; margin-top: 20px } .m .AccountTransactionPanel tfoot th { border: 0px; font-size: 18px } /* User panel ===============================================================================*/ .TopUserAccount { text-align: right; width: 200px; } .TopUserAccount .UserPhoto { text-align: left; display: inline-block; position: relative; border-radius: 3px; height: 40px } .TopUserAccount .UserPhoto:after { display: block; content: ""; clear: both } .TopUserAccount .dropdown { line-height: 38px; margin-right: 14px; margin-left: 10px; display: inline-block; text-overflow: ellipsis; width: 136px; white-space: nowrap; overflow: hidden; position: static } .TopUserAccount .dropdown:after { content: ""; position: absolute; width: 6px; height: 6px; border-top: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc; margin: auto; right: 2px; bottom: 0px; top: 0px; -webkit-transform: rotateZ(45deg) translate(0%, 0%); transform: rotateZ(45deg) translate(-20%, -20%); } .TopUserAccount .dropdown:hover:after { border-right-color: #000; border-bottom-color: #000; } .TopUserAccount .UserPhoto.open .dropdown:after { border-right-color: #00ACDD; border-bottom-color: #00ACDD; } /* Login ---------------------------------------*/ .TopUserAccount .LogOnUserAccount { height: 0px; overflow: hidden; transition: all 0.2s; position: absolute; top: calc(100% + 10px); width: 270px; right: 0px; z-index: 1; box-shadow: 0px 0px 12px rgba(0,0,0,0.2) } .TopUserAccount .LogOnUserAccount .LogOnArea { padding:10px; position: relative; z-index: 1; background: #fff; border-radius: 3px; } .TopUserAccount .LogOnUserAccount.open { height: 258px; overflow: visible; } .TopUserAccount .LogOnUserAccount.open:before { content: ""; position: absolute; width: 8px; height: 8px; background: #fff; left: 60%; right: 0%; margin: auto; top: -4px; transform: rotate(45deg); box-shadow: 0px 0px 12px rgba(0,0,0,0.2) } .TopUserAccount .LogOnUserAccount .LogOnLabel { font-weight: bold; margin-bottom: 4px; line-height: 20px; } .TopUserAccount .LogOnUserAccount .LogOnLabel:nth-of-type(n+2) { margin-top: 10px } .TopUserAccount .LogOnUserAccount .LogOnButton > input { width: 100%; margin-top: 10px } .TopUserAccount .LogOnUserAccount .LogOnForgotPassword { line-height: 20px; text-align: center; padding-top: 10px } /* Menu ---------------------------------------*/ .TopUserAccount .UserPhotoArea { width: 40px; float: left; border-radius: 50%; overflow: hidden; position: relative; display: block; padding-top: 40px; overflow: hidden; background: #efefef; } .TopUserAccount .UserPhotoArea img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; overflow: hidden; } .TopUserAccount .UserPhotoArea.Hor img { max-width: none; max-height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .TopUserAccount .dropdown-menu { right: 0px; width: auto; min-width: 200px; float: none; left: auto; top: calc(100% + 10px); padding: 0px 0px 10px 0px; border-radius: 3px } .TopUserAccount .dropdown-menu li { background: #fff; position: relative } .TopUserAccount .dropdown-menu li:first-child { border-radius: 3px 3px 0px 0px; overflow: hidden } .TopUserAccount .dropdown-menu li:last-child { border-radius: 0px 0px 3px 3px; overflow: hidden } .TopUserAccount .dropdown-menu li a { display: block; line-height: 30px; padding: 0px 8px 0px 44px; background: url(/Content/Archive/406/dashboard-225914.png) no-repeat left 8px top } .TopUserAccount .dropdown-menu li a:hover { background-color: #f7f7f7; color: #000 } .TopUserAccount .dropdown-menu .iconProfile a { background-position: left 8px top -30px } .TopUserAccount .dropdown-menu .icon a { background-position: left 8px top -60px } .TopUserAccount .dropdown-menu:before { content: ""; position: absolute; width: 8px; height: 8px; background: #fff; left: 0; right: 0px; margin: auto; top: -4px; transform: rotate(45deg); border: 1px solid rgba(0,0,0,.2) } .TopUserAccount .dropdown-menu .iconDashboard:first-child { padding-top: 10px } .TopUserAccount .dropdown-menu .iconUserSignIn { padding: 10px; border-bottom: 1px solid #e0e0e0; background: #f9f9f9; margin-bottom: 10px } .TopUserAccount .dropdown-menu .iconUserSignIn #display-text { font-weight: bold } .TopUserAccount .dropdown-menu .iconUserSignIn .display-email { font-size: 13px; color: #808080 } .TopUserAccount .dropdown-menu .iconUserSignIn .display-icon { background: url(/Content/Archive/406/account-type-305023.png); width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-left: 2px } .TopUserAccount .dropdown-menu .iconUserSignIn .display-icon.PhoneIcon { background-position: center top -18px } .TopUserAccount .dropdown-menu .iconUserSignIn .display-icon.FacebookIcon { background-position: center top -36px } .TopUserAccount .dropdown-menu .iconUserSignIn .display-icon.GmailIcon { background-position: center top -54px } /* Paging ===============================================================================*/ .Paging, .search-result-paging { position: relative; padding: 40px 0px 0px 0px; margin: 0px 15px; text-align: center; font-size: 14px } .m input.PageButton[type="submit"], input.PageButton[type="submit"], .PageButton, .btn-gotopage { width: 32px; padding: 0px; line-height: 30px; height: 32px; background: #fff; margin: 10px 4px 0px 4px; border: 1px solid #ccc; display: inline-block; color: #ccc; border-radius: 2px; vertical-align: top; font-weight: normal; } input.PageButton[type="submit"]:hover { background: #fff; } input.PageButton[type="submit"].active, .PageButton.PageButtonActive, .PageButtonActive { background: #ccc; border: 0px; color: #fff } input.PageButton[type="submit"].PageStep, .PageButton.FirstPage, .PageButton.LastPage { width: auto; border: 0px; background: none } .PageButton.PreviousPage,.PageButton.btn-preview,.PageButton.btn-preview-disabled, .PageButton.NextPage,.PageButton.btn-next,.PageButton.btn-next-disabled { position: relative; top: 0px; min-height: 0px; width: 32px;height: 32px; border: 0px;background: #fff; overflow: hidden; font-size: 0px; overflow: hidden } .PageButton.PreviousPage:after,.PageButton.btn-preview:after,.PageButton.btn-preview-disabled:after, .PageButton.NextPage:after,.PageButton.btn-next:after,.PageButton.btn-next-disabled:after { content: ""; display: block; position: absolute; border-top: 3px solid #ccc; border-left: 3px solid #ccc; border-bottom: 3px solid transparent; border-right: 3px solid transparent; width: 12px; height: 12px; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto } .PageButton.PreviousPage:after,.PageButton.btn-preview:after,.PageButton.btn-preview-disabled:after { left: 0px; transform: rotate(-45deg) } .PageButton.NextPage:after,.PageButton.btn-next:after,.PageButton.btn-next-disabled:after { right: 0px; transform: rotate(135deg) } /* Youtube resize ===============================================================================*/ .ytSize { position: relative; } .ytSize > * { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px } .ytSize > * > iframe { width: 100%; height: 100% } .ytSize.s16-9 { padding-top: 56.25%; } /* Gallery listItem ===============================================================================*/ .GallerySet .listGalleries ul { padding: 0px; list-style: none; font-size: 0px } .GallerySet .listGalleries li { display: inline-block; font-size: 14px; vertical-align: top; overflow: hidden; transition: all 0.2s } /*-- default --*/ .GallerySet .listGalleries li { width: 23.5%; margin-left: 2%; display: inline-block; font-size: 14px; margin-bottom: 20px;vertical-align: top } .GallerySet .listGalleries li:nth-of-type(4n+1) { margin-left: 0px } /*-- Three columns --*/ .GallerySet.Three .listGalleries li { width: 32%; } .GallerySet.Three .listGalleries li:nth-of-type(4n+1) { margin-left: 2% } .GallerySet.Three .listGalleries li:nth-of-type(3n+1) { margin-left: 0px } /*-- Five columns --*/ .GallerySet.Five .listGalleries li { width: 18.4%; } .GallerySet.Five .listGalleries li:nth-of-type(4n+1) { margin-left: 2% } .GallerySet.Five .listGalleries li:nth-of-type(5n+1) { margin-left: 0px } /*-- Six columns --*/ .GallerySet.Six .listGalleries li { width: 15%; } .GallerySet.Six .listGalleries li:nth-of-type(4n+1) { margin-left: 2% } .GallerySet.Six .listGalleries li:nth-of-type(6n+1) { margin-left: 0px } /*-- No margin --*/ .GallerySet.NoMargin .listGalleries li, .GallerySet.Three.NoMargin .listGalleries li, .GallerySet.Five.NoMargin .listGalleries li, .GallerySet.Six.NoMargin .listGalleries li { margin: 0px; width: 25% } .GallerySet.Three.NoMargin .listGalleries li { width: 33.3333%; } .GallerySet.Five.NoMargin .listGalleries li { width: 20%; } .GallerySet.Six.NoMargin .listGalleries li { width: 16.6666%; } /*-- Images --*/ .GallerySet .ImageItem { position: relative; padding-top: 100%; background: #ededed } .GallerySet .ImageItem img { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; } .GallerySet .ImageItem.Hor img { max-width: none; height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .GallerySet.ImageCrop .ImageItem { padding-top: 0px; background: initial } /*-- Effect Opacity --*/ .GallerySet.OTW li:hover { opacity:0.75; } /* Gallery Style ===============================================================================*/ .GalleryStyle .SectionHeader+.GalleryDetails > h2:first-child { font-size: 24px; margin-bottom: 24px; font-weight: normal } .GalleryStyle img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; z-index: -2 } .GalleryStyle li a { font-size: 0px; position: relative; overflow: hidden; background: #efefef; z-index: 1; display: block; } .GalleryStyle .Imagetitle, .GalleryStyle li a:after { position: absolute; color: #fff; bottom: 0px; width: 100%; text-align: center; line-height: 1.3; padding: 8px; font-weight: bold; font-size: 18px; z-index: 2 } .GalleryStyle li a:after { content: attr(title); } /* Gallery listItem ---------------------------------------*/ .GalleryStyle .listGalleries ul, .GalleryStyle .GalleryDetails ul { padding-left: 0px; font-size: 0px } /*-- default --*/ .GalleryStyle .listGalleries li, .GalleryStyle .GalleryDetails li { width: 23.5%; margin-left: 2%; display: inline-block; font-size: 14px; margin-bottom: 20px;vertical-align: top; position: relative } .GalleryStyle .listGalleries li:nth-of-type(4n+1), .GalleryStyle .GalleryDetails li:nth-of-type(4n+1) { margin-left: 0px } /*-- Three columns --*/ .GalleryStyle.Three .listGalleries li, .GalleryStyle .GalleryDetails.Three li { width: 32%; } .GalleryStyle.Three .listGalleries li:nth-of-type(4n+1), .GalleryStyle.Three .GalleryDetails li:nth-of-type(4n+1) { margin-left: 2% } .GalleryStyle.Three .listGalleries li:nth-of-type(3n+1), .GalleryStyle.Three .GalleryDetails li:nth-of-type(3n+1) { margin-left: 0px } /*-- Five columns --*/ .GalleryStyle.Five .listGalleries li, .GalleryStyle.Five .GalleryDetails li { width: 18.4%; } .GalleryStyle.Five .listGalleries li:nth-of-type(4n+1), .GalleryStyle.Five .GalleryDetails li:nth-of-type(4n+1) { margin-left: 2% } .GalleryStyle.Five .listGalleries li:nth-of-type(5n+1), .GalleryStyle.Five .GalleryDetails li:nth-of-type(5n+1) { margin-left: 0px } /*-- Six columns --*/ .GalleryStyle.Six .listGalleries li, .GalleryStyle.Six .GalleryDetails li { width: 15%; } .GalleryStyle.Six .listGalleries li:nth-of-type(5n+1), .GalleryStyle.Six .GalleryDetails li:nth-of-type(4n+1) { margin-left: 2% } .GalleryStyle.Six .listGalleries li:nth-of-type(6n+1), .GalleryStyle.Six .GalleryDetails li:nth-of-type(6n+1) { margin-left: 0px } .mt .GalleryDetails { padding: 0px 15px } .mt .GalleryStyle .GalleryDetails li:nth-of-type(n), .mt .GalleryStyle .listGalleries li:nth-of-type(n) { width: 32%; margin-left: 2%; display: inline-block } .mt .GalleryStyle .GalleryDetails li:nth-of-type(3n+1), .mt .GalleryStyle .listGalleries li:nth-of-type(3n+1) { margin-left: 0px } .mt.m .GalleryStyle .listGalleries > ul > li:nth-of-type(n) { width: 100%; margin-left: 0%; display: inline-block } /*-- No margin --*/ .GalleryStyle.NoMargin .listGalleries li, .GalleryStyle.Three.NoMargin .listGalleries li, .GalleryStyle.Five.NoMargin .listGalleries li, .GalleryStyle.Six.NoMargin .listGalleries li, .GalleryStyle.NoMargin .GalleryDetails li, .GalleryStyle.Three.NoMargin .GalleryDetails li, .GalleryStyle.Five.NoMargin .GalleryDetails li, .GalleryStyle.Six.NoMargin .GalleryDetails li { margin: 0px; width: 25% } .GalleryStyle.Three.NoMargin .listGalleries li, .GalleryStyle.Three.NoMargin .GalleryDetails li { width: 33.3333%; } .GalleryStyle.Five.NoMargin .listGalleries li, .GalleryStyle.Five.NoMargin .GalleryDetails li { width: 20%; } .GalleryStyle.Six.NoMargin .listGalleries li, .GalleryStyle.Six.NoMargin .GalleryDetails li { width: 16.6666%; } /*-- Effect Opacity --*/ .GalleryStyle.OTW li:hover { opacity:0.75; } /*-- Shadow style --*/ .GalleryStyle li a:before { content: ""; position: absolute; width: 100%; height: 50%; left: 0px; bottom: 0px; z-index: -1; background: rgba(0,0,0,0.8); background: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.8)); background: -o-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.8)); background: -moz-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.8)); background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.8)); transition: all 0.2s } .GalleryStyle li a:before { height: 0px; transition: all 0.5s } .GalleryStyle li a:after { opacity: 0; bottom: -60px; transition: all 0.5s } .GalleryStyle li:hover a:before { height: 200% } .GalleryStyle li:hover a:after { opacity: 1; bottom: 0px; } /* Enlarge avoid mobile problem ---------------------------------------*/ #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-caption h4 {margin: 10px 0px; font-size:14px; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em } /* Enlarge ---------------------------------------*/ #jquery-overlay { z-index: 1001 !important } #jquery-lightbox { z-index: 1002 !important; padding: 0px 15px } #lightbox-container-image-box, #lightbox-container-image-data-box { max-width: 100% !important; height: auto !important; box-sizing: content-box } #lightbox-nav-btnPrev, #lightbox-nav-btnNext { height: 100% !important } .m #lightbox-container-image-data-box { box-sizing: border-box } /* Custom form ---------------------------------------*/ .CustomFormInput.Radiobutton { line-height: 40px } .CustomFormInput.Radiobutton label { margin-left: 12px } .CustomFormInput.Radiobutton label:first-child { margin-left: 0px } .ThankYouCustomform { margin: 20px 0px } /* Contact us dialog box ===============================================================================*/ .ui-dialog { box-shadow: 0px 0px 24px rgba(0,0,0,0.2); padding: 0px; border: 0px; margin: 0px 15px; height: auto !important; z-index: 1000; font-size: inherit } .ContactUsDialog { max-width: 700px; width: calc(100% - 30px) !important; } /* Title ---------------------------------------*/ .ui-dialog .ui-dialog-titlebar { border-radius: 4px 4px 0px 0px; border: 0px; padding: 0px 15px; line-height: 50px } .ui-dialog .ui-dialog-titlebar .ui-dialog-title { margin: 0px } /* Close button ---------------------------------------*/ .ui-dialog .ui-icon-closethick { background: none; position: relative; margin: 0px !important } .ui-dialog .ui-dialog-titlebar-close { padding: 0px; background: none } .ui-dialog .ui-state-hover, .ui-dialog .ui-state-focus { background: none; border: 0px } .ui-dialog .ui-icon-closethick:before, .ui-dialog .ui-icon-closethick:after, .mt .ui-dialog .ui-dialog-titlebar-close:before, .mt .ui-dialog .ui-dialog-titlebar-close:after { content: ""; position: absolute; margin: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; transform: rotate(45deg); -webkit-transform: rotate(45deg) } .ui-dialog .ui-icon-closethick:before, .mt .ui-dialog .ui-dialog-titlebar-close:before { width: 2px; height: 100%; background: #fff } .ui-dialog .ui-icon-closethick:after, .mt .ui-dialog .ui-dialog-titlebar-close:after { width: 100%; height: 2px; background: #fff } .ui-dialog .ui-icon-closethick:hover:before, .mt .ui-dialog .ui-dialog-titlebar-close:before, .ui-dialog .ui-icon-closethick:hover:after, .mt .ui-dialog .ui-dialog-titlebar-close:after { background: #000 } /* Content Box ---------------------------------------*/ .ui-dialog .ui-dialog-content { padding: 0px 15px !important; min-width: auto !important } .ui-dialog .ui-dialog-content .formDesc { padding: 0px } .ui-dialog .ui-dialog-content .formDesc > *:first-child { margin-top: 30px } .ui-dialog .ui-dialog-content .formDesc > *:last-child { margin-bottom: 30px } .ui-dialog .ui-dialog-content form { padding: 30px 0px; position: relative } .ui-dialog .ui-dialog-content form:before { content: ""; position: absolute; width: 100%; border-top: 1px solid #ededed; top: -1px } .ui-dialog .ui-dialog-content .divright { clear: both; float: none !important; width: 100% !important } .ui-dialog .ui-dialog-content .divleft { float: none !important; width: 100% !important; position: relative } .ui-dialog .editor-label { line-height: 28px; margin: 0px !important; font-size: 16px } /* General ---------------------------------------*/ .ui-dialog .divleft .editor-label { position: absolute; top: 0px; width: 32% !important } .ui-dialog .divleft .editor-label:nth-child(1) { left: 0% } .ui-dialog .divleft .editor-label:nth-child(3) { left: 34% } .ui-dialog .divleft .editor-label:nth-child(5) { left: 68% } .ui-dialog .divleft .editor-label:nth-child(7) { position: static; clear: both; padding-top: 12px } .ui-dialog .divleft .editor-field { width: 32%; padding-top: 28px; float: left; margin-right: 2% } .ui-dialog .divleft div:nth-of-type(n+7) { width: 100%; } .ui-dialog .divleft .editor-field:nth-of-type(n+6) { margin: 0px } .ui-dialog .divleft .editor-field:nth-of-type(n+7) { padding: 0px } /* Message and captcha ---------------------------------------*/ .divright .editor-label { padding-top: 12px } /* Button panel ---------------------------------------*/ .ui-dialog .ui-dialog-buttonpane {margin: 0px;border: 0px;background: #f7f7f7;text-align: center;padding: 0px;line-height: 50px;padding-top: 10px;} .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; display: inline-block } .ui-dialog .ui-dialog-buttonset button { margin: 0px 4px; vertical-align: top } /*FAQ ===============================================================================*/ #faqList > ul > li { border-top:solid 1px #ededed; overflow: hidden } #faqList > ul { margin:0; padding:0; list-style:none; } #faqList .linkAnswer { overflow: hidden; display: block; padding:20px 0px 20px 0; } #faqList .linkAnswer span { font-size: 24px; } #faqList .linkAnswer span:last-child { width:30px; height:30px; position: relative; float:right; margin-right: 0px } #faqList .linkAnswer span:last-child:before { content: ""; position: absolute; width: 40%; height: 40%; border-right: 2px solid #333; border-bottom: 2px solid #333; margin: auto; left: 0px; right: 0px; bottom: 0px; top: 0px; } span.LinkAnswerPlus:before { -webkit-transform: rotateZ(45deg) translate(0%, 0%); transform: rotateZ(45deg) translate(-20%, -20%) } span.LinkAnswerMinus:before { -webkit-transform: rotateZ(-135deg) translate(0%, 0%); transform: rotateZ(-135deg) translate(-20%, -20%) } #faqList .faqAnswer { padding-bottom:10px } .faqAnswer p {margin-bottom:20px} /* Category with contents ===============================================================================*/ #ContentArea .CategoryAccordianMenu { padding: 0px; list-style: none; } #ContentArea .CategoryAccordianMenuItem { padding: 0px } #ContentArea .CategoryAccordianMenuItem+.CategoryAccordianMenuItem { border-top: 1px solid rgba(0,0,0,0.1); } #ContentArea .CategoryAccordianMenuItem a { display: block; padding: 0px 20px } #ContentArea .CategoryAccordianMenuItem a:hover { background: rgba(0,0,0,0.15); } #ContentArea .CategoryAccordianMenuItem a.ActiveCategory { background: rgba(0,0,0,0.1) } /* Image Crop (Need script) ===============================================================================*/ .ImageCrop .Crop { position: relative; overflow: hidden; background: #efefef; z-index: 1; display: block; padding-top: 100% } .ImageCrop .Crop img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } .ImageCrop .Crop.Hor img { max-width: none; height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ImageCrop.r4-3 .Crop { padding-top: 75% } .ImageCrop.r4-5 .Crop { padding-top: 125% } .ImageCrop.r16-9 .Crop { padding-top: 56.25% } .ImageCrop.r16-10 .Crop { padding-top: 62.5% } .ImageCrop.List .Crop { padding-top: 30% } .ImageCrop.List.r4-3 .Crop { padding-top: 22.5% } .ImageCrop.List.r16-9 .Crop { padding-top: 16.8% } .ImageCrop.List.r16-10 .Crop { padding-top: 18.9% } /*-- List in listArticle --*/ .ImageCrop .List .Crop { padding-top: 30% } .ImageCrop.r4-3 .List .Crop { padding-top: 22.5% } .ImageCrop.r16-9 .List .Crop { padding-top: 16.8% } .ImageCrop.r16-10 .List .Crop { padding-top: 18.9% } /* Ribbon ===============================================================================*/ .HotPropertyRibbonWrapper[style="display: none"] { display: block !important } .FeaturedPropertyRibbonWrapper[style="display: none"] { display: block !important } .HotPropertyRibbon:after { content: "HOT" } .FeaturedPropertyRibbon:after { content: "Featured" } .FeaturedPropertyRibbonWrapper, .PropertyRibbonWrapper, .HotPropertyRibbonWrapper, .ResalePropertyRibbonWrapper,.ReservedPropertyRibbonWrapper, .ProductRibbonWrapper, .RibbonWrapper, .ReplyWrapper, .NewCompanyRibbonWrapper { /* ribbon size */ width: 113px; height: 24px; position: absolute; z-index: 2; top: -27px; } .PropertyRibbonWrapper, .FeaturedPropertyRibbonWrapper, .HotPropertyRibbonWrapper, .ProductRibbonWrapper, .RibbonWrapper, .ReplyWrapper, .NewCompanyRibbonWrapper { /* position of resale and sold */ left: -36px; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(45deg); transform: rotate(-45deg); } .ReservedPropertyRibbonWrapper, .ResalePropertyRibbonWrapper { /* position of reserved */ right: -36px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } .FeaturedPropertyRibbon, .PropertyRibbon, .HotPropertyRibbon, .ResalePropertyRibbon, .ReservedPropertyRibbon, .ProductRibbon, .RibbonText, .ReplyText,.NewCompanyRibbon { /* ribbon text */ text-align: center; position: absolute; line-height: 24px; left: 0px; right: 0px; margin: auto; top: 0px; width: 113px; z-index: 1; color: #fff; font-size: 14px; } .FeaturedPropertyRibbon:before, .PropertyRibbon:before, .HotPropertyRibbon:before, .ResalePropertyRibbon:before, .ReservedPropertyRibbon:before, .ProductRibbon:before, .RibbonText:before, .ReplyText:before,.NewCompanyRibbon:before { /* ribbon size background */ box-sizing: border-box; content: ""; display: block; position: absolute; left: 0px; top: 0px; width: 100%; border-bottom: 24px solid #000; border-left: 24px solid transparent; border-right: 24px solid transparent; z-index: -1; } /*-- Corner size --*/ .ReplyWrapper:before, .ReplyWrapper:after, .RibbonWrapper:before, .RibbonWrapper:after, .FeaturedPropertyRibbonWrapper:before, .FeaturedPropertyRibbonWrapper:after, .HotPropertyRibbonWrapper:before, .HotPropertyRibbonWrapper:after, .PropertyRibbonWrapper:before, .PropertyRibbonWrapper:after, .ResalePropertyRibbonWrapper:before, .ResalePropertyRibbonWrapper:after, .ReservedPropertyRibbonWrapper:before, .ReservedPropertyRibbonWrapper:after, .ProductRibbonWrapper:before, .ProductRibbonWrapper:after, .NewCompanyRibbonWrapper:before, .NewCompanyRibbonWrapper:after { content: ""; display: block; position: absolute; top: 24px; height: 4px; width: 4px; } /* rotate corner size*/ /*-- Corner left rotate --*/ .ReplyWrapper:before, .RibbonWrapper:before, .FeaturedPropertyRibbonWrapper:before, .HotPropertyRibbonWrapper:before, .PropertyRibbonWrapper:before, .ResalePropertyRibbonWrapper:before, .ReservedPropertyRibbonWrapper:before, .ProductRibbonWrapper:before, .NewCompanyRibbonWrapper:before { left: 0px; -webkit-transform: skewY(-45deg); transform: skewY(-45deg); transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; } /* rotate corner left */ /*-- Corner right rotate --*/ .ReplyWrapper:after, .RibbonWrapper:after, .FeaturedPropertyRibbonWrapper:after, .HotPropertyRibbonWrapper:after, .PropertyRibbonWrapper:after, .ResalePropertyRibbonWrapper:after, .ReservedPropertyRibbonWrapper:after, .ProductRibbonWrapper:after, .NewCompanyRibbonWrapper:after { right: 0px; -webkit-transform: skewY(45deg); transform: skewY(45deg); transform-origin: 100% 100% !important; -webkit-transform-origin: 100% 100%; } /* rotate corner right */ /*-- color of corner --*/ .ReplyWrapper:before, .ReplyWrapper:after, .RibbonWrapper:before, .RibbonWrapper:after, .FeaturedPropertyRibbonWrapper:before, .FeaturedPropertyRibbonWrapper:after, .HotPropertyRibbonWrapper:before, .HotPropertyRibbonWrapper:after, .PropertyRibbonWrapper:before, .PropertyRibbonWrapper:after, .ResalePropertyRibbonWrapper:before, .ResalePropertyRibbonWrapper:after, .ReservedPropertyRibbonWrapper:before, .ReservedPropertyRibbonWrapper:after, .ProductRibbonWrapper:before, .ProductRibbonWrapper:after, .NewCompanyRibbonWrapper:before, .NewCompanyRibbonWrapper:after { background: rgba(0,0,0,0.8);} /*-- Ribbon Color --*/ .ReplyText:before { border-bottom-color: #06c } .RibbonText:before { border-bottom-color: #06c } .FeaturedPropertyRibbon:before { border-bottom-color: #FF6D00 } .HotPropertyRibbon:before { border-bottom-color: #f00; } .PropertyRibbon:before { border-bottom-color: #06c } .ResalePropertyRibbon:before { border-bottom-color: #5EA22B } /* color of resale*/ .ReservedPropertyRibbon:before { border-bottom-color: #3a0 } /* color of reserved*/ .SoldPropertyRibbon:before { border-bottom-color: #fbfbfb } /* color of sold*/ .ProductRibbon:before { border-bottom-color: #FF6D00 } .NewCompanyRibbon:before { border-bottom-color: #06c } /*-- Ribbon Text Color --*/ .SoldPropertyRibbon { color: #f00 } /* color of sold*/ /*-- Hide ribbon in section --*/ .HotPropertiesSection .HotPropertyRibbonWrapper,.HotPropertiesSection .FeaturedPropertyRibbonWrapper { display: none !important } .PropertiesFeatured .FeaturedPropertyRibbonWrapper, .PropertiesFeatured .HotPropertyRibbonWrapper { display: none !important } /*-- sold tag --*/ .SoldPropertyRibbonWrapper { position: absolute; z-index: 2; margin: auto; top: 17%; left: 0px; right: 0px; width: 60%; text-align: center; border: 5px solid rgba(218,37,28,0.8); height: 55px; border-radius: 5px; font-weight: 900; font-size: 32px; text-transform: uppercase; transform: rotate(-20deg) } .SoldPropertyRibbon { color: rgba(218,37,28,0.8); line-height: normal} /* RibbonStyle No1 ===============================================================================*/ .RibbonStyle.No1 .RibbonWrapper, .RibbonStyle.No1 .FeaturedPropertyRibbonWrapper, .RibbonStyle.No1 .PropertyRibbonWrapper, .RibbonStyle.No1 .HotPropertyRibbonWrapper, .RibbonStyle.No1 .ResalePropertyRibbonWrapper, .RibbonStyle.No1 .ReservedPropertyRibbonWrapper, .RibbonStyle.No1 .ProductRibbonWrapper { -webkit-transform: rotate(0deg); transform: rotate(0deg); top: 10px; width: 100px; height: 100px } .RibbonStyle.No1 .RibbonWrapper, .RibbonStyle.No1 .PropertyRibbonWrapper, .RibbonStyle.No1 .FeaturedPropertyRibbonWrapper, .RibbonStyle.No1 .HotPropertyRibbonWrapper, .RibbonStyle.No1 .ProductRibbonWrapper { left: 0px; } .RibbonStyle.No1 .ReservedPropertyRibbonWrapper, .RibbonStyle.No1 .ResalePropertyRibbonWrapper { right: 0px; } /*-- color of corner --*/ .RibbonStyle.No1 .RibbonWrapper:before, .RibbonStyle.No1 .RibbonWrapper:after, .RibbonStyle.No1 .FeaturedPropertyRibbonWrapper:before, .RibbonStyle.No1 .FeaturedPropertyRibbonWrapper:after, .RibbonStyle.No1 .HotPropertyRibbonWrapper:before, .RibbonStyle.No1 .HotPropertyRibbonWrapper:after, .RibbonStyle.No1 .PropertyRibbonWrapper:before, .RibbonStyle.No1 .PropertyRibbonWrapper:after, .RibbonStyle.No1 .ResalePropertyRibbonWrapper:before, .RibbonStyle.No1 .ResalePropertyRibbonWrapper:after, .RibbonStyle.No1 .ReservedPropertyRibbonWrapper:before, .RibbonStyle.No1 .ReservedPropertyRibbonWrapper:after, .RibbonStyle.No1 .ProductRibbonWrapper:before, .RibbonStyle.No1 .ProductRibbonWrapper:after { display: none } .RibbonStyle.No1 .RibbonText:before, .RibbonStyle.No1 .FeaturedPropertyRibbon:before, .RibbonStyle.No1 .PropertyRibbon:before, .RibbonStyle.No1 .HotPropertyRibbon:before, .RibbonStyle.No1 .ResalePropertyRibbon:before, .RibbonStyle.No1 .ReservedPropertyRibbon:before, .RibbonStyle.No1 .ProductRibbon:before { display: none } .RibbonStyle.No1 .RibbonText, .RibbonStyle.No1 .FeaturedPropertyRibbon, .RibbonStyle.No1 .PropertyRibbon, .RibbonStyle.No1 .HotPropertyRibbon, .RibbonStyle.No1 .ResalePropertyRibbon, .RibbonStyle.No1 .ReservedPropertyRibbon, .RibbonStyle.No1 .ProductRibbon { height: 80%; width: 80%; line-height: 80px; border-radius: 50%; } /*-- Ribbon Color --*/ .RibbonStyle.No1 .RibbonText { background: #06c } .RibbonStyle.No1 .FeaturedPropertyRibbon { background: #FF6D00 } .RibbonStyle.No1 .PropertyRibbon { background: #06c } .RibbonStyle.No1 .HotPropertyRibbon { background: #f00 } .RibbonStyle.No1 .ResalePropertyRibbon { background: #5EA22B } .RibbonStyle.No1 .ReservedPropertyRibbon { background: #3a0 } .RibbonStyle.No1 .SoldPropertyRibbon { background: #fbfbfb } .RibbonStyle.No1 .ProductRibbon { background: #FF6D00 } /* RibbonStyle No1 ===============================================================================*/ .RibbonStyle.No2 .RibbonWrapper, .RibbonStyle.No2 .FeaturedPropertyRibbonWrapper, .RibbonStyle.No2 .PropertyRibbonWrapper, .RibbonStyle.No2 .HotPropertyRibbonWrapper, .RibbonStyle.No2 .ResalePropertyRibbonWrapper, .RibbonStyle.No2 .ReservedPropertyRibbonWrapper, .RibbonStyle.No2 .ProductRibbonWrapper { -webkit-transform: rotate(0deg); transform: rotate(0deg); top: 12px; width: auto; } .RibbonStyle.No2 .RibbonWrapper, .RibbonStyle.No2 .PropertyRibbonWrapper, .RibbonStyle.No2 .FeaturedPropertyRibbonWrapper, .RibbonStyle.No2 .HotPropertyRibbonWrapper, .RibbonStyle.No2 .ProductRibbonWrapper { left: 12px; } .RibbonStyle.No2 .ReservedPropertyRibbonWrapper, .RibbonStyle.No2 .ResalePropertyRibbonWrapper { right: 12px; } /*-- color of corner --*/ .RibbonStyle.No2 .RibbonWrapper:before, .RibbonStyle.No2 .RibbonWrapper:after, .RibbonStyle.No2 .FeaturedPropertyRibbonWrapper:before, .RibbonStyle.No2 .FeaturedPropertyRibbonWrapper:after, .RibbonStyle.No2 .HotPropertyRibbonWrapper:before, .RibbonStyle.No2 .HotPropertyRibbonWrapper:after, .RibbonStyle.No2 .PropertyRibbonWrapper:before, .RibbonStyle.No2 .PropertyRibbonWrapper:after, .RibbonStyle.No2 .ResalePropertyRibbonWrapper:before, .RibbonStyle.No2 .ResalePropertyRibbonWrapper:after, .RibbonStyle.No2 .ReservedPropertyRibbonWrapper:before, .RibbonStyle.No2 .ReservedPropertyRibbonWrapper:after, .RibbonStyle.No2 .ProductRibbonWrapper:before, .RibbonStyle.No2 .ProductRibbonWrapper:after { display: none } .RibbonStyle.No2 .RibbonText:before, .RibbonStyle.No2 .FeaturedPropertyRibbon:before, .RibbonStyle.No2 .PropertyRibbon:before, .RibbonStyle.No2 .HotPropertyRibbon:before, .RibbonStyle.No2 .ResalePropertyRibbon:before, .RibbonStyle.No2 .ReservedPropertyRibbon:before, .RibbonStyle.No2 .ProductRibbon:before { display: none } .RibbonStyle.No2 .RibbonText, .RibbonStyle.No2 .FeaturedPropertyRibbon, .RibbonStyle.No2 .PropertyRibbon, .RibbonStyle.No2 .HotPropertyRibbon, .RibbonStyle.No2 .ResalePropertyRibbon, .RibbonStyle.No2 .ReservedPropertyRibbon, .RibbonStyle.No2 .ProductRibbon { width: auto; position: relative; padding: 0px 12px } /*-- Ribbon Color --*/ .RibbonStyle.No2 .RibbonText { background: #06c } .RibbonStyle.No2 .FeaturedPropertyRibbon { background: #FF6D00 } .RibbonStyle.No2 .PropertyRibbon { background: #06c } .RibbonStyle.No2 .HotPropertyRibbon { background: #f00 } .RibbonStyle.No2 .ResalePropertyRibbon { background: #5EA22B } .RibbonStyle.No2 .ReservedPropertyRibbon { background: #3a0 } .RibbonStyle.No2 .SoldPropertyRibbon { background: #fbfbfb } .RibbonStyle.No2 .ProductRibbon { background: #FF6D00 } /* RibbonStyle No2 ===============================================================================*/ .RibbonStyle2 .RibbonWrapper, .RibbonStyle2 .FeaturedPropertyRibbonWrapper, .RibbonStyle2 .PropertyRibbonWrapper, .RibbonStyle2 .HotPropertyRibbonWrapper, .RibbonStyle2 .ResalePropertyRibbonWrapper, .RibbonStyle2 .ReservedPropertyRibbonWrapper, .RibbonStyle2 .ProductRibbonWrapper { -webkit-transform: rotate(0deg); transform: rotate(0deg); top: 12px; width: auto; } .RibbonStyle2 .RibbonWrapper, .RibbonStyle2 .PropertyRibbonWrapper, .RibbonStyle2 .FeaturedPropertyRibbonWrapper, .RibbonStyle2 .HotPropertyRibbonWrapper, .RibbonStyle2 .ProductRibbonWrapper { left: 12px; } .RibbonStyle2 .ReservedPropertyRibbonWrapper, .RibbonStyle2 .ResalePropertyRibbonWrapper { right: 12px; } /*-- color of corner --*/ .RibbonStyle2 .RibbonWrapper:before, .RibbonStyle2 .RibbonWrapper:after, .RibbonStyle2 .FeaturedPropertyRibbonWrapper:before, .RibbonStyle2 .FeaturedPropertyRibbonWrapper:after, .RibbonStyle2 .HotPropertyRibbonWrapper:before, .RibbonStyle2 .HotPropertyRibbonWrapper:after, .RibbonStyle2 .PropertyRibbonWrapper:before, .RibbonStyle2 .PropertyRibbonWrapper:after, .RibbonStyle2 .ResalePropertyRibbonWrapper:before, .RibbonStyle2 .ResalePropertyRibbonWrapper:after, .RibbonStyle2 .ReservedPropertyRibbonWrapper:before, .RibbonStyle2 .ReservedPropertyRibbonWrapper:after, .RibbonStyle2 .ProductRibbonWrapper:before, .RibbonStyle2 .ProductRibbonWrapper:after { display: none } .RibbonStyle2 .RibbonText:before, .RibbonStyle2 .FeaturedPropertyRibbon:before, .RibbonStyle2 .PropertyRibbon:before, .RibbonStyle2 .HotPropertyRibbon:before, .RibbonStyle2 .ResalePropertyRibbon:before, .RibbonStyle2 .ReservedPropertyRibbon:before, .RibbonStyle2 .ProductRibbon:before { display: none } .RibbonStyle2 .RibbonText, .RibbonStyle2 .FeaturedPropertyRibbon, .RibbonStyle2 .PropertyRibbon, .RibbonStyle2 .HotPropertyRibbon, .RibbonStyle2 .ResalePropertyRibbon, .RibbonStyle2 .ReservedPropertyRibbon, .RibbonStyle2 .ProductRibbon { width: auto; position: relative; padding: 0px 12px } /*-- Ribbon Color --*/ .RibbonStyle2 .RibbonText { background: #06c } .RibbonStyle2 .FeaturedPropertyRibbon { background: #FF6D00 } .RibbonStyle2 .PropertyRibbon { background: #06c } .RibbonStyle2 .HotPropertyRibbon { background: #f00 } .RibbonStyle2 .ResalePropertyRibbon { background: #5EA22B } .RibbonStyle2 .ReservedPropertyRibbon { background: #3a0 } .RibbonStyle2 .SoldPropertyRibbon { background: #fbfbfb } .RibbonStyle2 .ProductRibbon { background: #FF6D00 } .AffiliatePanel { max-width: 1200px; margin: auto; text-align: center; overflow: hidden; background:#fff; line-height: 40px; font-size: 18px; font-weight: bold } .AffiliatePanel .backtolist { text-align: left } .AffiliatePanel button { margin-bottom: 20px; max-width: 100%; margin: 0px auto 20px; display: block;white-space: nowrap } .AffiliatePanel input { max-width: 74.5%; margin-left: 10p } /* Category and product page ===============================================================================*/ .CategorySide #main, .PageCategoryShowNoSub #main { text-align: center; font-size: 0px } .CategorySide #main > div, .PageCategoryShowNoSub #main > div { font-size: 14px } .CategorySide #RightArea, .PageCategoryShowNoSub #RightArea { display: inline-block; width: calc((1200px / 100) * 25); padding-right: 20px; vertical-align: top; text-align: left } .CategorySide #ContentArea, .PageCategoryShowNoSub #ContentArea { display: inline-block; width: calc((1200px / 100) * 75); text-align: left} .CategorySide #AsideArea, .PageCategoryShowNoSub #AsideArea { clear: both } .mt .CategorySide #RightArea, .mt .PageCategoryShowNoSub #RightArea, .mt .CategorySide #ContentArea, .mt .PageCategoryShowNoSub #ContentArea { float: none; width: 100%; padding-right: 0px } /* Category Device button ---------------------------------------*/ .mt #RightArea .MtButton .SectionHeader { line-height: 40px; color: #fff; font-size: 18px; background: #127CBA; border-radius: 4px; text-align: center; font-weight: 400; margin: 20px 15px 0px 15px; position: relative } .mt #RightArea .MtButton .SectionHeader.active { border-radius: 4px 4px 0px 0px; } .mt #RightArea .MtButton .SectionHeader:after { content: ""; position: absolute; width: 8px; height: 8px; right: 20px; top: 0px; bottom: 0px; margin: auto; border: 2px solid #efefef; border-bottom: 0px; border-left: 0px; transform: rotate(135deg); } .mt #RightArea .MtButton .SectionHeader.active:after { content: ""; position: absolute; width: 8px; height: 8px; right: 20px; top: 0px; bottom: 0px; margin: auto; border: 2px solid #efefef; border-bottom: 0px; border-left: 0px; transform: rotate(-45deg); } /* Category 3 level 22/10/2015 ---------------------------------------*/ .CategorySide #RightArea .SectionHeader, .PageCategoryShowNoSub #RightArea .SectionHeader { padding-left: 20px; padding-right: 20px } .SubCategory1:last-child { border-bottom: 0px solid } .CategoryAccordianClickableMainSection { margin-bottom: 20px; padding-bottom: 20px } .CategoryAccordianMenu { padding: 0px 20px } .CategoryAccordianMenu ul { margin: 0px -20px; padding: 0px 20px } .CategoryAccordianMenu li { position: relative; margin: 0px; list-style: none } .CategoryAccordianMenu .MoreCategory { font-family: 'Arial'; float: right; width: 24px; line-height: 24px; text-align: center; cursor: pointer; margin-top: 6px; font-size: 18px; color: #000; transition: all 0.2s } .CategoryAccordianMenu ul ul .MoreCategory { margin-top: 3px; } .CategoryAccordianMenu a { z-index: 2; position: relative; transition: all 0.2s; } .SubCategoryAccordianMenu ul a { padding-left: 20px } .SubCategoryAccordianMenu ul ul a { padding-left: 40px } /*-- font-size --*/ .CategoryAccordianMenu > li > a { font-size: 16px; line-height: 36px; } .CategoryAccordianMenu > li > ul > li > a { font-size: 16px; line-height: 36px; } .CategoryAccordianMenu > li > ul > li > ul a { font-size: 14px; line-height: 30px; } /*-- background active --*/ .CategoryAccordianMenu > li > ul:before { background: #ddd; } .CategoryAccordianMenu > li > ul > li > ul:before { background: #efefef; } /* Category Style No1 ===============================================================================*/ .CategoryStyle.No1 { background: #666 } .CategoryStyle.No1 .SectionHeader { padding: 20px 20px 10px 20px; margin: 0px; font-size: 18px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5) } .CategoryStyle.No1 a, .CategoryStyle.No1 .MoreCategory { color: #fff } .CategoryStyle.No1 a:hover, .CategoryStyle.No1 .MoreCategory:hover { color: #ff0 } .CategoryStyle.No1 .ActiveCategory > a { font-weight: bold } .CategoryStyle.No1 .CategoryAccordianMenu ul { background: rgba(0,0,0,.2); } .CategoryStyle.No1 .CategoryAccordianMenuItem { border-bottom: 1px solid rgba(0,0,0,0.1) } .CategoryStyle.No1 .CategoryAccordianMenuItem:last-child { border: 0px } .CategoryStyle.No1 .SubCategoryAccordianMenu { padding-left: 35px } .CategoryStyle.No1 .SubCategoryAccordianMenu3 { margin-left: -35px; padding-left: 55px } .CategoryStyle.No1 .SubCategoryAccordianMenu4 { margin-left: -55px; padding-left: 70px } .CategoryStyle.No1 .SubCategoryAccordianMenu3 a { padding: 0px; } .mt #RightArea .CategoryStyle.No1.MtButton .SectionHeader { padding: 0px; line-height: 50px} /* NoBox ---------------------------------------*/ #RightArea .NoBox .SectionHeader { padding-left: 0px } .NoBox .CategoryAccordianMenu .ActiveSubCategory > a { font-weight: bold } .NoBox .CategoryAccordianMenu { padding: 0px } .NoBox .CategoryAccordianMenu ul { margin: 0px; padding-right: 0px } .NoBox .CategoryAccordianMenu li { overflow: hidden } .NoBox .CategoryAccordianMenu a { padding-left: 0px } .NoBox .SubCategoryAccordianMenu4:before, .NoBox .SubCategoryAccordianMenu3:before, .NoBox .SubCategoryAccordianMenu:before { content: ""; position: absolute; width: 100%; height: 1px; top: 0px; left: 0px;background: #ededed } .NoBox .SubCategoryAccordianMenu4:after, .NoBox .SubCategoryAccordianMenu3:after, .NoBox .SubCategoryAccordianMenu:after { content: ""; position: absolute; width: 100%; height: 1px;bottom: 0px; left: 0px;background: #ededed } /* category for mobile ---------------------------------------*/ .mt .CategoryAccordianClickableMainSection { z-index: 10; margin: 0px; position: relative; padding: 0px } .mt .CategoryAccordianMenu { margin: 0px 15px; width: calc(100% - 30px); background: #fff; position: absolute; overflow: hidden; height: 0px; transition: all 0.2s } .mt .CategoryAccordianMenu.active { height: auto; border: 1px solid #dbdbdb } .mt .CategoryStyle .CategoryAccordianClickableMainSection { z-index: 10; margin: 0px; position: relative; padding: 0px; margin: 0px 15px; width: calc(100% - 30px); position: absolute; overflow: hidden; height: 0px } .mt .CategoryStyle .CategoryAccordianClickableMainSection.active { height: auto; border: 1px solid #dbdbdb } .mt .CategoryStyle .CategoryAccordianClickableMainSection .CategoryAccordianMenu { position: static; height: auto; margin: 0px; width: 100% } /*-- when active --*/ .mt .CategoryAccordianMenu.active li.ActiveCategory { position: relative } .mt .RightContentSections h3.SectionHeader.active { background: #000; color: #fff } /* Document ===============================================================================*/ .PageDocumentLatest .ContentAreaPanel { max-width: 1200px; margin: auto } .PageDocumentLatest .CategoryAccordianClickableMainSection { float: left; width: 23.5%; margin-top: 20px; } .PageDocumentLatest .CategoryContentsArea { float: right; width: 74.5%; } /* Category ---------------------------------------*/ .PageDocumentLatest .CategoryAccordianClickableMainSection ul { padding: 0px; } .PageDocumentLatest .CategoryAccordianClickableMainSection ul li { list-style: none; margin: 0px; background: #f7f7f7; line-height: 40px; } /* Search ---------------------------------------*/ .CategoryPanel { position: relative; padding-bottom: 20px } .SearchDocumentForm { margin-right: 0px; width: calc(100% - 48px) } .SearchDocumentForm:after { content: ""; display: block; clear: both } .SearchDocumentForm > input { float: left; width: calc(55% - 120px);margin-top: 20px; margin-right: 1%; } .SearchDocumentForm > div { float: left; width: 21%; margin-right: 1%; position: relative } .SearchDocumentForm label { height: 20px; display: block; vertical-align: top; font-weight: bold; margin: 0px; line-height: 20px; text-align: left } .SearchDocumentForm > a.btn { position: absolute; right: 0px; top: 20px; width: 40px; text-align: center; font-size: 0px; background: url(/Content/Archive/406/refresh-36-g-254231.png) no-repeat center center rgba(0,0,0,0.1); background-size: 24px } .SearchDocumentForm > a.btn:hover { background-color: rgba(0,0,0,0.2)} .SearchDocumentForm > button { margin-top: 20px; width: 120px; } /* Change list style ---------------------------------------*/ .ChangeItemsStyle { text-align: right; padding: 10px 0px; border-top: 1px solid #ededed; } .ChangeItemsStyle .SetLayoutButton { display: inline-block; height: 40px; width: 40px; position: relative; padding: 0px 4px; cursor: pointer; font-size: 0px; background: none } .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:before, .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:after { border-top: 3px solid; border-bottom: 3px solid; height: 9px; width: 70%; left: 0px; right: 0px; } .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:before { bottom: calc(50% + 1.5px); } .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:after { top: calc(50% + 1.5px); } .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:before, .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:after { border-top: 9px solid; border-bottom: 9px solid; height: 21px; width: 28%; ; bottom: 0px; top: 0px; } .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:before, .ChangeItemsStyle .SetLayoutButton[data-layout="List"]:after, .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:before, .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:after { content: ""; position: absolute; margin: auto; border-color: #ddd } .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:before { right: calc(50% + 1.5px); } .ChangeItemsStyle .SetLayoutButton[data-layout="Grid"]:after { left: calc(50% + 1.5px); } .ChangeItemsStyle .SetLayoutButton:hover:before, .ChangeItemsStyle .SetLayoutButton:hover:after { border-color: #999; transition: all 0.2s } .ChangeItemsStyle .SetLayoutButton.Active:before, .ChangeItemsStyle .SetLayoutButton.Active:after { border-color: #000 } /* List Items ---------------------------------------*/ .PageDocumentLatest .CategoryContentsItemList .Loading { width: 48px; height: 48px; margin: 40px auto; background: url(/Content/loading.gif) no-repeat center center } .PageDocumentLatest .FileArchiveList { font-size: 0px } .PageDocumentLatest .FileArchiveList > * { font-size: 14px } .PageDocumentLatest .FileArchiveListItem { position: relative; } .PageDocumentLatest .FileArchiveListItem+.FileArchiveListItem { margin-top: 20px; padding-top: 20px; border-top: 1px solid #efefef; } .PageDocumentLatest .FileArchiveListItem:after { content: ""; display: block; clear: both } .PageDocumentLatest .FileArchiveListItemActions { float: left; width: 15% } .PageDocumentLatest .FileArchiveListItemActions img { padding: 30px } .PageDocumentLatest .FileArchiveListItemIcon { background: #f7f7f7 } .PageDocumentLatest .FileArchiveListItemDownload { position: absolute; right: 20px; top: 0px; bottom: 0px; margin: auto; height: 40px; } .PageDocumentLatest .FileArchiveListItem+.FileArchiveListItem .FileArchiveListItemDownload { top: 20px } .PageDocumentLatest .FileArchiveListItemDownload a+a { margin-left: 4px; line-height: 40px; background-position: center top 5px } .PageDocumentLatest .FileArchiveListItemDownload a { font-size: 0px; width: 40px; height: 40px; background: url(/Content/Archive/406/icon-download-view-254192.png) rgba(0,0,0,0.1) no-repeat center bottom 5px; display: inline-block; vertical-align: top; border-radius: 50%; } .PageDocumentLatest .FileArchiveListItemDownload a:hover { background-color: rgba(0,0,0,0.2) } .PageDocumentLatest .FileArchiveListItemTitle { margin-top: 16px; font-weight: bold } .PageDocumentLatest .FileArchiveListItemDetails { float: right; width: 85%; padding-right: 20%; padding-left: 20px } .PageDocumentLatest .FileArchiveListItemExtension { float: right; width: 85%; padding-right: 20%; padding-left: 20px } .PageDocumentLatest .FileArchiveListItemDescription { margin: 8px 0px } .PageDocumentLatest .FileArchiveListItemExtension > div { margin-top: 4px; line-height: 1; font-size: 13px } .PageDocumentLatest .FileArchiveListItemExtension label { font-weight: bold; display: inline-block; vertical-align: top } .PageDocumentLatest .FileArchiveListItemExtension h6 { margin-left: 4px; display: inline-block; vertical-align: top } /*-- Grid --*/ .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem { display: inline-block; width: 23.5%; vertical-align: top; border: 0px; margin: 0px 0px 0px 2%; padding: 0px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:nth-of-type(4n+1) { margin-left: 0px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:nth-of-type(n+5) { margin-top: 40px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemActions, .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemDetails, .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemExtension { float: none; width: 100%; position: relative } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemDetails, .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemExtension { padding: 0px 10px 0px 10px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemExtension { line-height: 1.3 } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemExtension h6+h6 { margin-left: 0px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemActions img { max-width: 120px; margin: auto; display: block; transition: all 0.2s; position: relative; left: 0px; right: 0px; } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:hover .FileArchiveListItemActions img { transform: translate(40%) } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemDownload { opacity: 0; transition: all 0.2s; right: 47%; text-align: center; top: 0px } .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:hover .FileArchiveListItemDownload { opacity: 1; } /* Mobile friendly ---------------------------------------*/ .mt .PageDocumentLatest .CategoryAccordianClickableMainSection { float: none; width: 100%; margin-top: 0px } .mt #ContentArea .CategoryAccordianMenu { height: auto; position: relative } .mt #ContentArea .CategoryContentsArea { width: 100%; float: none; padding: 0px 15px } .mt .SearchDocumentForm > a.btn { font-size: 0px } .mt .PageDocumentLatest .FileArchiveList .FileArchiveListItemActions img { max-width: 120px } .t .PageDocumentLatest .FileArchiveList .FileArchiveListItemActions img { display:block; margin: auto } /*-- tablet --*/ .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemActions img {display: initial;} .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItemActions { position: relative } .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem .FileArchiveListItemDownload { top: 0px; right: 20px; opacity: 1 } .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem+.FileArchiveListItem .FileArchiveListItemDownload a+a { margin-left: 12px } @media only screen and (max-width: 959px) { .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem { width: 32%; margin-left: 2%; margin-top: 0px } .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:nth-of-type(3n+1) { margin-left: 0px; } .t .PageDocumentLatest .FileArchiveList.Grid .FileArchiveListItem:nth-of-type(n+4) { margin-top: 40px } } /*-- Mobile --*/ @media only screen and (max-width: 767px) { .m .SearchDocumentForm > * { width: 100%; float: none; margin: 12px 0px 0px 0px } .m .SearchDocumentForm { width: 100% } .m .PageDocumentLatest .FileArchiveList .FileArchiveListItem { width: 100%; margin-left: 0%; margin-top: 0px } .m .PageDocumentLatest .FileArchiveList .FileArchiveListItem+.FileArchiveListItem { margin-top: 40px } .m .PageDocumentLatest .FileArchiveList .FileArchiveListItem > div { width: 100%; float: none } .m .PageDocumentLatest .FileArchiveList .FileArchiveListItemActions { position: relative } .m .PageDocumentLatest .FileArchiveListItem .FileArchiveListItemDownload { top: 0px } .m .ChangeItemsStyle { display: none } .m .SearchDocumentForm > a.btn { position: static; font-size: 16px; background-position: left 12px center; } } /* Company ===============================================================================*/ .CompanyList { border-top: 2px solid #ddd } .CompanyItem { margin-top: 20px; border-bottom: 1px solid #ddd; padding-bottom: 12px; position: relative } .CompanyItem:after { content: ""; display: block; clear: both } .CompanyItem .CompanyLeftItem { float: right; width: 25%; text-align: center; min-height: 21px } .CompanyItem .CompanyRightItem:after { content: ""; display: block; clear: both } .CompanyItem .CompanyRightItem { float: left; width: 75% } .CompanyRightItem .CompanyTitle { float: left; width: 40%; } .CompanyRightItem .CompanyTitle h3 { font-size: 18px; font-weight: 400 } .CompanyRightItem .CompanyTitle h3 a { color: #207EA9 } .CompanyRightItem .CompanyInfo { float: left; width: 60% } .CompanyRightItem .CompanyInfo > div+div { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e4e4e4 } .CompanyRightItem .CompanyInfo > div:after { content: ""; display: block; clear: both } .CompanyRightItem .CompanyInfo .label { float: left; width: 25%; font-weight: 600; text-align: left; font-size: inherit; line-height: 1.5 } .CompanyRightItem .CompanyInfo .value { float: left; width: 75%; line-height: 1.5 } .m .CompanyItem .CompanyRightItem, .m .CompanyRightItem .CompanyTitle, .m .CompanyRightItem .CompanyInfo { float: none; width: 100% } .m .CompanyRightItem .CompanyTitle { margin-bottom: 12px } /* Company detail ---------------------------------------*/ .CompanyDetails .CompanyAddress {width: 48% } .CompanyDetails .CompanyAddress .AddressLabel { font-weight: bold } .CompanyDetails .CompanyDescription .label { float: left; width: 25%; font-weight: 600; text-align: left; font-size: inherit; line-height:3} .CompanyDetails .CompanyDescription .value { float: left; width: 75%; line-height:3} .CompanyDetails .CompanyDescription li+li { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e4e4e4 } .CompanyDetails .CompanyDescription li:after { content: ""; display: block; clear: both } .CompanyDetails .CompanyMap { padding-top: 20; clear: both } .CompanyDetails .CompanyLogo {margin:40px 0 20px 0} /* Classified ===============================================================================*/ .PageClassifiedIndex #ContentArea > div, .PageClassifiedClassifiedSite #ContentArea > div, .PageClassifiedCreate #ContentArea > div, .PageClassifiedEdit #ContentArea > div, .ClassifiedDetails { max-width: 1200px; margin: auto } /* Dashboard Classified List ---------------------------------------*/ .ClassifiedList table {border: 1px solid #ccc;border-radius: 4px; width: 100%;} .ClassifiedList table th, .ClassifiedList table td { padding: 8px 12px; } .ClassifiedList tbody th+th, .ClassifiedList tbody td+td { border-left: 1px solid #ccc } .ClassifiedList tbody tr+tr th, .ClassifiedList tbody tr+tr td { border-top: 1px solid #ccc } .ClassifiedList thead { background: #f7f7f7; border-radius: 5px 5px 0px 0px } .ClassifiedList thead tr:last-child > * { border-bottom: 1px solid #ccc } .ClassifiedList thead th:last-child { display: none } .ClassifiedList td .btn { height: 24px; line-height: 24px } .ClassifiedList+div { margin-top: 12px; } .ClassifiedList+div a:before { content: ""; display: block; width: 8px; height: 8px; display: inline-block; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 12px } .ClassifiedList+div a { background-color: #323232 } .ClassifiedList+div a.ui-button span { display: inline-block } .ClassifiedList+div a:hover { background-color: #111 } .mt .PageClassifiedIndex #ContentArea h2, .mt .PageClassifiedIndex .ClassifiedList+div { padding-left: 15px; padding-right: 15px } .m .PageClassifiedIndex .ClassifiedList td .btn { background-image: url(/Content/Archive/406/edit-255397.png); background-size: 24px; font-size: 0px; height: 40px; padding: 0px; width: 40px } .m .PageClassifiedIndex .ClassifiedList thead { display: none } .m .PageClassifiedIndex .ClassifiedList td { display: block; width: 100%; border: 0px; padding: 0px;padding-right: 48px } .m .PageClassifiedIndex .ClassifiedList tr { display: block; width: 100%; border: 0px; position: relative } .m .PageClassifiedIndex .ClassifiedList tr+tr { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed } .m .PageClassifiedIndex .ClassifiedList td:first-child { position: absolute; right: 0px; padding: 0px; width: auto; } .m .PageClassifiedIndex .ClassifiedList td:nth-child(2) { font-weight: bold } /* Dashboard Classified Site ---------------------------------------*/ .ClassifiedSite+div { margin-top: 12px; } .ClassifiedSite table { border: 1px solid #ccc; border-radius: 4px; width: 100% } .ClassifiedSite table th, .ClassifiedSite table td { padding: 8px 12px; } .ClassifiedSite thead tr:nth-last-of-type(2) th {padding-bottom: 0px } .ClassifiedSite tbody th+th, .ClassifiedSite tbody td+td { border-left: 1px solid #ccc } .ClassifiedSite tbody tr+tr th, .ClassifiedSite tbody tr+tr td { border-top: 1px solid #ccc } .ClassifiedSite thead { background: #f7f7f7; border-radius: 5px 5px 0px 0px } .ClassifiedSite thead tr:last-child > * { border-bottom: 1px solid #ccc; font-weight: bold } .ClassifiedSite thead tr:first-child th:first-child { text-align: left } .ClassifiedSite tr:last-child th:first-child { width: 20% } .ClassifiedSite table .btn { height: 32px; line-height: 32px } .ClassifiedSite th .btn { background-color: #690 } .ClassifiedSite th .btn:hover { background-color: #76b100 } .ClassifiedSite th .btn:active { background-color: #360 } .ClassifiedSite tbody .btn { background-color: #036 } .ClassifiedSite tbody .btn:hover { background-color: #014182 } .ClassifiedSite tbody .btn:active { background-color: #00254a } .ClassifiedSite+div a:before { content: ""; display: block; width: 8px; height: 8px; display: inline-block; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 12px } .ClassifiedSite+div a { background-color: #323232 } .ClassifiedSite+div a.ui-button span { display: inline-block } .ClassifiedSite+div a:hover { background-color: #111 } .mt .PageClassifiedClassifiedSite #ContentArea h2, .mt .PageClassifiedClassifiedSite .ClassifiedSite, .mt .PageClassifiedClassifiedSite .ClassifiedSite+div { padding-left: 15px; padding-right: 15px } .m .ClassifiedSite td .btn { background-image: url(/Content/Archive/406/edit-255397.png); background-size: 24px; font-size: 0px; height: 40px; padding: 0px; width: 40px } .m .ClassifiedSite thead { background: none } .m .ClassifiedSite tr th:nth-of-type(n), .m .ClassifiedSite td { display: block; width: 100%; border: 0px; padding: 0px; } .m .ClassifiedSite td:last-child { text-align: left !important } .m .ClassifiedSite tr { display: block; width: 100%; border: 0px; position: relative } .m .ClassifiedSite tr th:nth-of-type(n)+th { display: none } .m .ClassifiedSite tr { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed } .m .ClassifiedSite td:first-child { position: absolute; right: 0px; padding: 0px; width: auto; } .m .ClassifiedSite td:nth-child(2) { font-weight: bold } /* Dashboard Create ---------------------------------------*/ .ManageClassified .editor-wrapper { margin-top: 12px; position: relative } .ManageClassified .editor-wrapper:after { content: ""; display: block; clear: both } .ManageClassified .editor-wrapper label { float: left; width: 15%; padding-top: 8px; font-weight: bold; text-align: right } .ManageClassified .editor-wrapper .editor-controls { float: right; width: 83% } .ManageClassified .RequiredSymbol { margin-left: 4px } .ManageClassified .editor-wrapper.required { width: 50% } .ManageClassified .editor-wrapper.required label { width: 30% } .ManageClassified .editor-wrapper.required .editor-controls { width: 66% } .ManageClassified .editor-wrapper.required:nth-of-type(n+4) { float: left; width: 50% } .ManageClassified .editor-wrapper.required+.required+*+*+div:not(.required) { padding-top: 40px; float: left; width: 50%; clear: both } .ManageClassified .editor-wrapper.required+.required+*+*+div+*+*+div:not(.required) { padding-top: 40px; float: left; width: 50% } .ManageClassified div.editor-wrapper:nth-of-type(3) { position: relative } /*-- Description --*/ .ManageClassified div.editor-wrapper:not(.required):nth-of-type(n+4) { padding-top: 40px; float: left; width: 50%; } .ManageClassified div.editor-wrapper:not(.required):nth-of-type(n+4) label { width: 30% } .ManageClassified div.editor-wrapper:not(.required):nth-of-type(n+4) .editor-controls { width: 66% } .ManageClassified div.editor-wrapper:not(.required):nth-of-type(n+6) { padding-top: 0px } /*-- Map --*/ .ManageClassified div.editor-wrapper:not(.required):nth-last-of-type(2) { display: block; clear: both; width: 100%; float: none; padding-top: 52px } .ManageClassified div.editor-wrapper:not(.required):nth-last-of-type(2) label { width: 15% } .ManageClassified div.editor-wrapper:not(.required):nth-last-of-type(2) .editor-controls { width: 83% } .ManageClassified div.editor-wrapper:not(.required):nth-last-of-type(2) > .editor-controls > div:nth-child(4) { font-weight: bold } .ManageClassified div.editor-wrapper:not(.required):nth-last-of-type(2) > .editor-controls > div:nth-child(4) input { width: auto; display: inline-block; margin-right: 12px; margin-left: 6px } /*-- Save --*/ .ManageClassified .editor-actions { padding-left: 17%; margin-top: 20px } .PageClassifiedCreate #ContentArea h2, .PageClassifiedCreate .ManageClassified { padding-left: 15px; padding-right: 15px } .m .ManageClassified .editor-actions, .m .ManageClassified .editor-wrapper .editor-controls, .m .ManageClassified .editor-wrapper label { float: none; width: 100%; padding-left: 0 } .m input[type=file] { width: 100% } .m .ManageClassified .editor-actions > p { text-align: center } .m .ManageClassified .editor-actions > p * { display: inline-block; padding: 0px 20px; width: auto } .m .ManageClassified .editor-actions > p input { background-color: #690 } .m .ManageClassified .editor-actions > p input:hover { background-color: #76b100 } /* Classified List ---------------------------------------*/ .ClassifiedListItem:after { content: ""; display: block; clear: both; } .ClassifiedListImage { float:left; width:22%; } .ClassifiedListDescription { float:right; width:76%; } .ClassifiedListItem+.ClassifiedListItem { margin-top: 20px; padding-top:20px; border-top:1px solid #ededed; } .ClassifiedList .ClassifiedListDescription h3 { font-size: 18px; line-height: 1.3 } .mt .ClassifiedList { padding-left: 15px; padding-right: 15px; } .m .ClassifiedListImage { float: none; width: 100%; } .m .ClassifiedListDescription { float: none; width: 100%; margin-top: 20px } /* Detail ---------------------------------------*/ .mt .ClassifiedDetail { padding: 0px 15px } .ClassifiedDetail:after { content: ""; display: block; clear: both } .ClassifiedMainDetail { float: left; width: 74.5% } .ClassifiedSubDetail { float: right; width: 165px; text-align: center } .m .ClassifiedMainDetail { float: none; width: 100% } .m .ClassifiedSubDetail { float: none; width: 100%; margin-top: 20px; text-align: center } .ClassifiedDetailsTitle { margin: 0px; padding: 0px; border: 0px } .ClassifiedDetailsGroup:after { display: block; content: ""; clear: both } .ClassifiedDetailsGroup+.ClassifiedDetailsGroup { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed } .ClassifiedDetailsLabel { float: left; width: 23.5%; font-size: 16px; line-height: 1.3; margin: 0px } .t .ClassifiedDetailsLabel { font-size: 16px } .ClassifiedDetailsValue { float: right; width: 74.5%; line-height: 1.3 } .m .ClassifiedDetailsLabel { float: none; width: 100%; margin-bottom: 10px; } .m .ClassifiedDetailsValue { float: none; width: 100% } .ClassifiedDetailsTitle > h2 { text-align: center; padding: 0px 0px 20px 0px; margin-bottom: 0px; line-height: 1.3 } .t .ClassifiedDetailsTitle > h2 { padding-left: 15px; padding-right: 15px; } .ClassifiedDetailsTitle .page-subtitle { padding-bottom: 45px; border-bottom: 1px solid #ccc; margin-bottom: 60px; text-align: center } .ClassifiedDetailsTitle .page-subtitle ul { padding: 0px } .ClassifiedDetailsTitle .page-subtitle li { font-size: 14px;display: inline-block; vertical-align: top; padding: 0px 12px; line-height: 24px; text-transform: capitalize } .ClassifiedDetailsTitle .page-subtitle li+li+li { border-left: 1px solid #ededed } .ClassifiedDetailsTitle .page-subtitle li.job-location { background: url(/Content/Archive/465/location-226845.png) no-repeat top 5px left 12px; padding-left: 36px; background-size: 10px;text-transform: capitalize } .ClassifiedDetailsTitle .page-subtitle li.job-date-posted { background: url(/Content/Archive/465/date-226846.png) no-repeat top 5px left 12px; padding-left: 36px; text-transform: capitalize } .ClassifiedDetailsTitle .page-subtitle li.job-type { display: inline-block; color: #fff; background: #111; padding: 3px 10px; font-size: 12px; font-weight: bold; font-family: 'Montserrat', sans-serif; line-height: normal; border-radius: 4px; text-align: center; text-transform: capitalize } .ClassifiedDetailsImage img { display: block; border: 1px solid #ededed; margin: auto; padding: 6px; } .ClassifiedDetailsMoreJobs a { margin-top: 20px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; line-height: 48px; text-align: left; display: block; background: url(/COntent/Archive/465/company-icon-228525.png) no-repeat left center; padding-left: 24px; } .ClassifiedDetailsMoreJobs a:hover { color: #c4161c; text-decoration: none } .ClassifiedDetailsType { display: block; color: #fff; background: #323232; padding: 3px 10px; font-size: 12px; font-weight: bold; line-height: normal; border-radius: 4px; text-align: center; margin-top: 20px; text-transform: capitalize } .ClassifiedDetailsLink a { display: block; height: 40px; line-height: 40px; color: #fff; text-transform: uppercase; background-color: #111; border-radius: 4px; margin-top: 20px; cursor: pointer; text-decoration: none } .ClassifiedDetailsLink a:hover { color: #fff; text-decoration: none } /* Gift Certificate ===============================================================================*/ .PageGiftCertificateIndex #ContentArea > div, .PageGiftCertificateGiftCards #ContentArea > div, .PageGiftCertificateCheckOut #ContentArea > div, .PageGiftCertificateConfirmation #ContentArea > div { max-width: 1200px; margin: auto } /*-- button FB and mail --*/ .btn.sharefb:before, .btn.InviteByEmail:before { content: attr(title) } .btn.sharefb, .btn.InviteByEmail { height: 32px; line-height: 33px; font-size: 13px; padding: 0px 12px; vertical-align: top; font-weight: normal; font-size: 12px } .btn.sharefb { background-color: #4267b2; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: left 0px top -27px; padding-left: 30px; text-align: left; background-size: 28px; } .btn.sharefb:hover { background-color: #29487d } .btn.InviteByEmail { background-color: #C12026; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: left 4px top 0px; padding-left: 38px; text-align: left; background-size: 32px; } .btn.InviteByEmail:hover { background-color: #9e1a1f; } /*-- Popup --*/ .page[class^="page PageGiftCertificate"] #HeaderArea { z-index: 3 } .page[class^="page PageGiftCertificate"] #myModal { position: fixed; top: 0px; left: 0px; z-index: 4; bottom: auto; height: 100%; margin: 0px; width: 100%; background: rgba(0,0,0,0.5); transition: all 0.2s; display: none } .page[class^="page PageGiftCertificate"] .modal-content { position: absolute; width: 300px; height: 200px; margin: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0px 3px 2px rgba(0,0,0,0.1) } .page[class^="page PageGiftCertificate"] .modal-header { padding: 10px; background: #ccc } .page[class^="page PageGiftCertificate"] .modal-body { padding: 15px; } .page[class^="page PageGiftCertificate"] .modal-body input { text-align: left !important } .page[class^="page PageGiftCertificate"] .modal-body input.btn { background-color: #690; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: right 4px top 0px; padding-right: 50px; padding text-align: left; width: 100%; } .page[class^="page PageGiftCertificate"] .modal-body input.btn:hover { background-color: #360; } .page[class^="page PageGiftCertificate"] .modal-footer { padding: 10px; background: #f7f7f7; position: absolute; bottom: 0px; width: 100%; text-align: right } /* Product Items ---------------------------------------*/ .PageGiftCertificateIndex .ProductItem { font-size: 0px } .PageGiftCertificateIndex .ProductItem > div { width: 23.5%; display: inline-block; vertical-align: top; font-size: 14px; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0px 3px 2px rgba(0,0,0,0.1); margin-left: 2% } .PageGiftCertificateIndex .ProductItem > div:nth-of-type(4n+1) { margin-left: 0% } .PageGiftCertificateIndex .ProductItem > div > div:first-child a { display: block; position: relative; overflow: hidden } .PageGiftCertificateIndex .ProductItem > div > div:first-child a:after { content: attr(data-label); position: absolute; color: #fff; bottom: -10px; padding: 40px 15px 8px 15px; background: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8)); background: -webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8)); width: 100%; opacity: 0; transition: all 0.2s } .PageGiftCertificateIndex .ProductItem > div:hover > div:first-child a:after { opacity: 1; bottom: 0px; } .PageGiftCertificateIndex .ProductItem > div > div:nth-child(2) { padding: 15px 15px 0px 15px; font-weight: bold; margin-bottom: 12px; line-height: 1.3 } .PageGiftCertificateIndex .ProductItem > div > div:last-child { padding: 0px 15px 10px 15px; margin-top: 12px } /* Gift Card ---------------------------------------*/ .Giftcard .product { text-align: center; line-height: 1.3 } .Giftcard .product > div:first-child { font-size: 36px; font-weight: bold } .Giftcard .product > div:nth-child(2) { font-size: 24px; margin-bottom: 12px } /*-- items --*/ .Giftcard .ProductVariantList { margin-top: 40px; font-size: 0px; } .Giftcard .ProductVariantItem { display: inline-block; width: 30%; font-size: 14px; text-align: center; padding-bottom: 38px; margin-left: 5%; vertical-align: top; position: relative } .Giftcard .ProductVariantItem:nth-of-type(3n+1) { margin-left: 0%; } .Giftcard .ProductVariantItem .giftCertificate_name { font-size: 24px; font-weight: bold; margin-top: 40px; margin-bottom: 6px; line-height: 1.3; padding: 0px 15px } .Giftcard .ProductVariantItem .giftCertificate_description { padding: 0px 15px } .Giftcard .ProductVariantItem .giftcertificate_condition { margin-top: 20px; padding: 0px 15px } .Giftcard .ProductVariantItem .giftcertificate_condition label { font-weight: bold; font-size: 16px } .Giftcard .ProductVariantItem .giftCertificate_price { font-size: 32px; font-weight: bold; line-height: 80px; } .Giftcard .ProductVariantItem .giftCertificate_image { display: block; position: relative; overflow: hidden } .Giftcard .ProductVariantItem .giftCertificate_image:after { content: attr(data-label); position: absolute; color: #fff; bottom: -10px; padding: 40px 15px 8px 15px; background: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8)); background: -webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8)); width: 100%; opacity: 0; left: 0px; transition: all 0.2s } .Giftcard .ProductVariantItem:hover .giftCertificate_image:after { opacity: 1; bottom: 0px; } /* Only 1 item ---------------------------------------*/ .Giftcard .ProductVariantItem:only-child { background: #fff; width: 100%; padding: 20px; text-align: left } .Giftcard .ProductVariantItem:only-child:before { content: ""; position: absolute; left: 0px; height: 100%; background: rgba(0,0,0,0.05); width: calc(((100% - 40px) / 100) * 30 + 40px); top: 0px; } .Giftcard .ProductVariantItem:only-child a:hover { color: inherit } .Giftcard .ProductVariantItem:only-child a > div:first-child { float: left; width: 30%; text-align: center } .Giftcard .ProductVariantItem:only-child a > div:first-child+div { margin-top: 0px } .Giftcard .ProductVariantItem:only-child a > div+div { padding: 0px; padding-left: calc(30% + 40px) } .Giftcard .ProductVariantItem:only-child a > .giftCertificate_price { padding-left: calc(30% + 40px); width: auto; line-height: normal; margin-top: 20px; margin-left: 0px } .Giftcard .ProductVariantItem:only-child a .giftCertificate_price { line-height: 1.3 } .Giftcard .ProductVariantItem:only-child .giftcertificate_condition label { display: block; border-bottom: 1px solid #ededed; padding-bottom: 8px; margin-bottom: 12px } .Giftcard .ProductVariantItem:only-child .giftCertificate_pricedescription { position: absolute; right: 20px; bottom: 20px; width: auto; margin-top: 20px; } .Giftcard .ProductVariantItem:only-child .giftCertificate_pricedescription > div { line-height: 40px; background: #000; color: #fff; padding: 0px 20px;; border-radius: 4px; font-weight: bold } /* Gift Card Detail ---------------------------------------*/ .showProduct { text-align: center; float: left; width: 49% } .showProduct .ProductVariantList { display: inline-block; width: 60%; font-size: 14px; text-align: center; box-shadow: 0px 0px 12px rgba(0,0,0,0.5) } .showProduct .ProductVariantList > div > div:nth-child(2) { font-size: 22px; font-weight: bold; margin-top: 40px; margin-bottom: 6px; line-height: 1; padding: 0px 15px } .showProduct .ProductVariantList > div > div:nth-child(3) { padding-left: 15px; padding-right: 15px } .showProduct .ProductVariantList > div > div:nth-child(4) { margin-top: 20px } .showProduct .ProductVariantList > div > div:nth-child(4) label { display: block; border-bottom: 1px solid #ededed; padding-bottom: 8px; margin-bottom: 12px; font-weight: bold } .showProduct .ProductVariantList > div > div:nth-child(4) > div { padding-left: 15px; padding-right: 15px } .showProduct .ProductVariantList > div > div:nth-child(5) { font-size: 32px; font-weight: bold; line-height: 80px; } /*-- Checkout --*/ .checkout { float: right; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; padding: 20px; width: 49%; min-height: 550px } .checkout .content-tabs { border-bottom: 1px solid #ddd; height: 40px; padding-left: 0px } .checkout .content-tabs > li { float: left; width: 30%; text-align: center; padding-top: 0px; line-height: 39px; background: url(/Content/Archive/406/complete-255861.png) left 8px center no-repeat; position: relative; background-size: 24px; list-style: none } .checkout .content-tabs > li.active { background: #fff; border: 1px solid #ddd; border-bottom: 0px; border-radius: 4px 4px 0px 0px } .checkout .content-tabs > li:last-child, .checkout .content-tabs > li.active+li { background: #fff } .checkout .content-tabs:after { content: ""; display: block; clear: both } .checkout .tab { display: none; padding: 20px 0px } .checkout .tab.active { display: block } .checkout form .form-group:last-child:after { content: ""; display: block; clear: both } .checkout form .form-group:last-child input:last-child { float: right; padding-right: 46px; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: right 4px top -120px; background-repeat: no-repeat } /*-- Confirm --*/ .checkout #confirm { text-align: center; } .checkout #confirm > div:nth-child(2) { font-size: 24px; margin: 40px 0px } .checkout #confirm > div:nth-child(2) strong { display: block; font-size: 36px } .checkout #confirm > div:nth-child(4) { margin-top: 20px } /* Confirm (from email) ---------------------------------------*/ .ConfirmPage:after { content: ""; display: block; clear: both } .ConfirmPage .ProductVariantList { float: left; width: 32%; font-size: 14px; text-align: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden } .ConfirmPage .ProductVariantList > div > div:nth-child(2) { font-size: 22px; font-weight: bold; margin-top: 40px; margin-bottom: 6px; line-height: 1; padding: 0px 15px } .ConfirmPage .ProductVariantList > div > div:nth-child(4) { margin-top: 20px } .ConfirmPage .ProductVariantList > div > div:nth-child(5) { font-size: 32px; font-weight: bold; line-height: 80px; } /*-- form --*/ .ConfirmPage .content { float: right; width: 66%;background: #fff;border: 1px solid #ccc;max-height: 100%;padding: 20px;border-radius: 4px; } .ConfirmPage .content #giver .form-group:nth-of-type(n+2) { display: inline-block; width: 49%; margin-left: calc(2% - 5px) } .ConfirmPage .content #giver .form-group:nth-of-type(2n+2) { margin-left: 0% } .ConfirmPage .content #confirm { text-align: center } .ConfirmPage .content #confirm div:not(.logo) { margin: 20px 0px; font-size: 24px; } .ConfirmPage .content #confirm .logo { background: url(/Content/Archive/406/complete-255861.png) center top no-repeat; height: 72px } .ConfirmPage form .form-group:last-child input { padding-right: 50px; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: right 4px top -120px; background-repeat: no-repeat } /*-- already confirm --*/ .Isconfirm { border: 1px solid rgba(0,0,0,0.2); background: #fff; border-radius: 4px; text-align: center; padding: 20px; color: #808080; font-size: 16px; box-shadow: 0px 2px 2px rgba(0,0,0,0.05) } .Isconfirm > div:nth-child(2) { font-size: 24px; margin: 12px 0px; font-weight: bold } /* Mobile =======================================*/ .mt .PageGiftCertificateIndex #ContentArea > div, .mt .PageGiftCertificateGiftCards #ContentArea > div, .mt .PageGiftCertificateCheckOut #ContentArea > div, .mt .PageGiftCertificateConfirmation #ContentArea > div { padding: 0px 15px } .t .PageGiftCertificateIndex .ProductItem > div { width: 32%; font-size: 16px } .t .PageGiftCertificateIndex .ProductItem > div:nth-of-type(4n+1) { margin-left: 0% } /* Accommodation Rent Room ===============================================================================*/ /* Building List ---------------------------------------*/ /* Building Detail ---------------------------------------*/ /* Room Type ---------------------------------------*/ /* Booking search ===============================================================================*/ div[ng-controller="SearchController"] { background: rgba(255,255,255,0.9); padding: 10px 20px 20px 20px; border-radius: 4px } div[ng-controller="SearchController"]:after { content: ""; display: block; clear: both } div[ng-controller="SearchController"] .form-group { margin-bottom: 0px } div[ng-controller="SearchController"] .row > .col-md-12 { font-size: 0px; float: left; vertical-align: top } div[ng-controller="SearchController"] .row > .col-md-12 > * { font-size: 14px } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(1) { width: calc(100% - 132px) } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(1) .col-md-4 { width: 61%; display: inline-block; vertical-align: top } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(1) .col-md-4+.col-md-4 { width: 19.5%; padding-left: 12px } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(1) option { height: 36px } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(2) { width: 132px; padding: 0px 0px 0px 12px } div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(1) .col-md-4:nth-child(1) input { background: url(/Content/Archive/406/icon-b40px-256836.png) right 0px top -201px no-repeat #fff; } div[ng-controller="SearchController"] button { margin-top: 22px; width: 100%; padding: 0px 0px 0px 20px } div[ng-controller="SearchController"] button:after { content: ""; display: inline-block; float: right; margin: 4px; height: 32px; padding-right: 32px; vertical-align: middle; background-image: url(/Content/Archive/406/icon-w40px-255860.png); background-position: right 0px top -416px; background-repeat: no-repeat; background-size: 32px } /*-- Text on celendar --*/ .calendar { position: relative } .calendar.left:after, .calendar.right:after { position: absolute; left: 8px; top: -8px; background: #fff; padding: 0px 4px; font-size: 12px } html[lang="no"] .calendar.left:after { content: "Innsjekk" } html[lang="no"] .calendar.right:after { content: "Utsjekk" } html[lang="en"] .calendar.left:after { content: "Check-in" } html[lang="en"] .calendar.right:after { content: "Check-out" } /*-- Celendar detail --*/ .daterangepicker th { color: #000 } .daterangepicker td, .daterangepicker th { height: 26px !important } .daterangepicker .calendar { max-width: 305px !important } .daterangepicker .calendar th, .daterangepicker .calendar td { width: 42px !important } .prev.available, .next.available { text-align: center } .prev.available > i, .next.available > i { display: inline-block; border-top: 3px solid #dbdbdb; width: 8px; height: 8px; } .prev.available > i { border-left: 3px solid #dbdbdb; transform: rotate(-45deg) } .next.available > i { border-right: 3px solid #dbdbdb; transform: rotate(45deg) } /* Building List ===============================================================================*/ .BuildingListSection { max-width: 1200px; margin: auto; } .BuildingList { padding-top: 20px; font-size: 0% } .BuildingRow { width: calc((100% - 108px) / 4); display: inline-block; margin-left: 3%; vertical-align: top; position: relative; background:#f7f7f7; overflow: hidden} .BuildingRow .img-block.BuildingImg img:first-child { position: absolute; max-width: none; height: 100%; left: 50%; transform: translate(-50%) } .BuildingRow:nth-of-type(4n+1) { margin-left: 0px } .BuildingRow:nth-of-type(n+5) { margin-top: 40px } .BuildingRow .BuildingImg:before { content: ""; width: 100%; padding-top: 100%; display: block; } .BuildingRow .BuildingImg img { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; right: 0px; margin: auto } .BuildingRow h4 { position: absolute; bottom: 0px; width: 100%; font-size: 20px; text-align: center; color:#fff; padding-top: 48px; padding-bottom: 12px; background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); background: -webkit-linear-gradient(,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); } /* Roomtype List search ===============================================================================*/ .PageHotelHotelResult { padding-right: 33% } .PageHotelHotelResult #HeaderArea { position: fixed; width: 100% } .PageHotelHotelResult div[ng-controller="SearchController"] { position: fixed; z-index: 12; top: 80px; width: 67%; box-shadow: 0px 0px 12px rgba(0,0,0,0.2); padding-bottom: 15px } .PageHotelHotelResult #ContentArea { padding-top: calc(80px + 88px); min-height: calc(100vh) } div[ng-controller="ResultController"] > .row > .col-md-6:nth-child(2) { position: fixed; right: 0px; width: 33%; height: calc(100% - 80px);top: 80px } div[ng-controller="ResultController"] .col-md-6 #map { height: 100% !important } /* Result List ---------------------------------------*/ div[ng-controller="ResultController"] .search-result-text { line-height: 40px; padding: 0px 20px; border-bottom: 1px solid rgba(0,0,0,0.1); font-weight: bold } div[ng-controller="ResultController"] h5[ng-hide="count != 0"] {position: absolute; height: 40px; top: 0px; width: 100%; text-align: center;bottom: 0px; margin: auto; line-height: 40px; padding: 0px 3%; } div[ng-controller="ResultController"] img[ng-show="!loadingStateMain"] { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; height: 60px; width: 60px; margin: auto; z-index: 1 } /*-- List hotel --*/ #contenList { font-size: 0px; overflow: hidden } #contenList > div { display: inline-block; vertical-align: top; width: calc((100% - 120px) / 3); font-size: 14px; margin-left: 40px; margin-top: 20px; margin-bottom: 10px; position: relative; transform: translate(-20px); -webkit-transform: translate(-20px) } #contenList .img-block { width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; margin-bottom: 8px } #contenList .img-block img { position: absolute; top: 0px; left: 0px; } #contenList .img-block:after { content: ""; position: absolute; top: 0px; padding-top: 56.25%; width: 100%; background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.7)); background: -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.7)); } #contenList .caption h4 { font-size: 14px; margin: 0px; font-weight: bold } #contenList .price-building { font-size: 110%; line-height: 1.3; color: #fff; font-weight: bold; position: absolute; top: 0px; left: 15px; padding-top: calc(56.25% - 30px); width: calc(100% - 15px) } /* Map ---------------------------------------*/ div[ng-controller="ResultController"] .col-md-6 #map .label_content { font-size: 14px; font-weight: bold; padding: 4px 6px; box-shadow: 0px 0px 6px rgba(0,0,0,0.2); background: #9E1D21 } div[ng-controller="ResultController"] .col-md-6 #map .label_content:after { border: 0px; background: #9E1D21; width: 10px; height: 10px; left: calc(50% - 5px); top: 23px; transform: rotate(45deg); margin: 0px } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw { left: 0px !important; top: 0px !important; width: 280px !important; } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw > div:first-child { max-width: 100% !important; display: block !important } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw img { max-width: 100% } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw .caption { padding: 16px 0px 0px 12px; display: inline-block; float: left } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw .caption h4 { font-size: 14px } div[ng-controller="ResultController"] .col-md-6 #map .gm-style-iw .price-building { padding: 16px 12px 0px 0px; display: inline-block; float: right; color: #9E1D21; font-weight: bold } div[ng-controller="ResultController"] .col-md-6 #map .gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div { width: 280px !important; transform: translateX(26px) } div[ng-controller="ResultController"] .col-md-6 #map .gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div > div:first-child, div[ng-controller="ResultController"] .col-md-6 #map .gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div > div > div:nth-child(2), div[ng-controller="ResultController"] .col-md-6 #map .gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div > div > div:nth-child(4) { width: 100% !important; left: 0px !important; top: 0px !important } div[ng-controller="ResultController"] .col-md-6 #map .gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div > div > div:nth-child(3) { transform: translateX(-26px) } /* Booking detail ===============================================================================*/ div[ng-controller="DetailController"] { max-width: 1200px; margin: 0px auto; position: relative; padding-bottom: 40px } div[ng-controller="DetailController"] .row > div:first-child { width: 67%; float: left } div[ng-controller="DetailController"] .my-gallery { width: 1200px } div[ng-controller="DetailController"] .my-gallery:after { content: ""; display: block; clear: both } div[ng-controller="DetailController"] .main-img { float: left; width: 57%; margin: 0px; margin-right: 1%; background: #dbdbdb; position: relative; overflow: hidden } div[ng-controller="DetailController"] .main-img:before { content: ""; width: 100%; padding-top: 63%; display: block } div[ng-controller="DetailController"] .main-img img { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto } div[ng-controller="DetailController"] .sub-img {float: left;width: 20%;margin: 50px 0px 0px 1%;overflow: hidden;position: relative; cursor: pointer;} div[ng-controller="DetailController"] .sub-img:before { content: ""; width: 100%; display: block } div[ng-controller="DetailController"] .sub-img a:before { content: ""; width: 100%; padding-top: 63%; display: block } div[ng-controller="DetailController"] .sub-img img { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto } div[ng-controller="DetailController"] .sub-img.sub-img { margin-top: 280px } div[ng-controller="DetailController"] .sub-img+text { display: block; clear: both; padding-top: 20px } div[ng-controller="DetailController"] #map { position: absolute !important; top: 0px; right: 0px; width: 41% !important; height: auto !important } div[ng-controller="DetailController"] #map:before { content: ""; width: 100%; padding-top: 53%; display: block; background: #000 } div[ng-controller="DetailController"] text[ng-bind-html="detail"] { margin: 20px 0px; display: block } div[ng-controller="DetailController"] text[ng-bind-html="Description"] { margin: 20px 0px; display: block; line-height: 1.3 } div[ng-controller="DetailController"] .room-subdetail img { display: none } div[ng-controller="DetailController"] .room-subdetail > .room-section { display: inline-block; width: 25% } div[ng-controller="DetailController"] .room-subdetail text[ng-bind="NumberOfBeds"]:before { content: ""; display: inline-block; height: 39px; width: 42px; margin-right: 12px; vertical-align: middle; background: url(/Content/Archive/467/bed-icon-252927.png) center center no-repeat } div[ng-controller="DetailController"] .room-subdetail text[ng-bind="RoomSize"]:before { content: ""; display: inline-block; height: 39px; width: 42px; margin-right: 12px; vertical-align: middle; background: url(/Content/Archive/467/room-icon-252928.png) center center no-repeat } /* more photo ---------------------------------------*/ div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]) a:before { z-index: 1; background: rgba(158,29,33,0.65); position: relative } div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):before, div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):after { position: absolute; width: 100%; top: 50%; text-align: center; color: #fff; font-size: 24px; font-weight: 400; z-index: 2; line-height: 1.3 } div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):after { background: none; top: auto; bottom: 50%; } div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):hover:before, div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):hover:after { text-decoration: underline } /*-- text --*/ html[lang="no"] div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):after { content: "Se mer"; } html[lang="no"] div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):before { content: attr(data-more) " Bilder"; } html[lang="en"] div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):after { content: "See more"; } html[lang="en"] div[ng-controller="DetailController"] .sub-img[data-more]:not([data-more="0"]):not([data-more=""]):before { content: attr(data-more) " Photo"; } /* Tabs ---------------------------------------*/ div[ng-controller="DetailController"] .nav-tabs { padding: 0px 0px 0px 5px; border-bottom: 1px solid #dbdbdb; height: 40px; } div[ng-controller="DetailController"] .nav-tabs > li { display: inline-block; border: 1px solid #dbdbdb; border-bottom: 0px; border-radius: 4px 4px 0px 0px; background: rgba(0,0,0,0.05); vertical-align: top } div[ng-controller="DetailController"] .nav-tabs > li.active { border-bottom: 1px solid #fff; background: #fff } div[ng-controller="DetailController"] .nav-tabs > li a { display: block; padding: 0px 20px; line-height: 38px } /* Building ---------------------------------------*/ .building-section .building-item { padding: 10px; border: 1px solid #dbdbdb; border-radius: 3px } .building-section .building-item+.building-item { margin-top: 20px } .building-section .building-item h5 { line-height: 40px } .building-section .building-item:after { content: ""; clear: both; display: block; } .building-section .building-item .building-img { float: left; width :32% } .building-section .building-item .building-detail { float: right; width: 66%; text-align: right } .building-section .building-item .building-detail h5 { text-align: left } .building-section .building-item .building-detail p { margin: 4px 0px 0px 0px } .building-section .building-item .building-detail .building-full-detail { padding-bottom: 20px; line-height: 1.5; text-align: left } .building-section .building-item .building-detail .building-full-detail ul { padding-left: 20px; margin: 1em 0px } .building-section .building-item .building-detail label { display: inline-block; margin-right: 8px; font-weight: bold } .building-section .building-item .building-detail label+.form-group { display: inline-block; margin: 0px } .building-section .building-item .building-detail label+.form-group+div, .building-section .building-item .building-detail label+.form-group+div+div { display: inline-block } .building-section .building-item .building-detail .callmodal-button { margin-top: 12px } .building-section .building-item button[disabled="disabled"], .building-section .building-item button[disabled="disabled"]:hover { background: #dbdbdb; cursor: default } /* roomtype ---------------------------------------*/ div[ng-repeat="row in roomTypeList"] { border: 1px solid #dbdbdb } div[ng-repeat="row in roomTypeList"] { margin-top: 20px } div[ng-repeat="row in roomTypeList"] .panel-heading {line-height: 40px; padding: 0px 12px; border-bottom: 1px solid #dbdbdb; font-weight: 500; color: #9E1D21; font-size: 18px } /*-- roomtype detail --*/ div[ng-repeat="row in roomTypeList"] .panel-body { position: relative } div[ng-repeat="row in roomTypeList"] .panel-body > div { float: left } div[ng-repeat="row in roomTypeList"] .panel-body:before { content: ""; position: absolute; height: 100%; width: 19%; top: 0px; left: 62%; border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb } div[ng-repeat="row in roomTypeList"] .panel-body:after { content: ""; clear: both; display: block } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(1) { width: 24%; padding: 12px } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(1) > div { margin-top: 0px; color: #9E1D21; font-weight: 500 } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(1) > div:nth-of-type(1) { margin-top: 12px } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(1) > div small { color: #808080; font-weight: normal } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(2) { width: 38%; padding: 12px } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(3) { width: 19%; padding: 12px; text-align: center; color: #000; font-weight: 500 } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(3) .guest-icon > div { display: inline-block; padding: 20px 0px 8px 0px } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(4) { width: 19%; padding: 12px; } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(4) label { float: left; line-height: 32px; margin-top: 12px; font-weight: bold; color: #000 } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(4) div { font-size: 16px; text-align: center; color:#000 } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(4) div.form-group { float: right; margin-top: 12px; width: 40%; margin-bottom: 8px } div[ng-repeat="row in roomTypeList"] .panel-body > div:nth-child(4) div > select { min-height: 32px; } div[ng-repeat="row in roomTypeList"] button { height: 32px; line-height: 32px } div[ng-repeat="row in roomTypeList"] button[disabled="disabled"], div[ng-repeat="row in roomTypeList"] button[disabled="disabled"]:hover { background: #dbdbdb; cursor: default; } /* Search ---------------------------------------*/ div[ng-controller="DetailController"] .row > div:last-child {margin-top: 39%;float: right;width: calc(((1200px / 100) * 33) - 24px);border: 1px solid #ccc;padding: 15px;background: rgba(255,255,255,0.95);} div[ng-controller="DetailController"] .row > div:last-child label { display: inline-block; margin-bottom: 4px; font-weight: 600 } div[ng-controller="DetailController"] .row > div:last-child .form-group+.form-group { margin-top: 0px } div[ng-controller="DetailController"] .row > div:last-child > .form-group > button { width: 100%; background: #565656 } div[ng-controller="DetailController"] .row > div:last-child > .form-group > button:hover { background: #000 } div[ng-controller="DetailController"] .row > div:last-child > .form-group:nth-of-type(2) { float: left; width: 48% } div[ng-controller="DetailController"] .row > div:last-child > .form-group:nth-of-type(3) { float: right; width: 48% } div[ng-controller="DetailController"] .row > div:last-child > .form-group:nth-of-type(4) { clear: both } div[ng-controller="DetailController"] .row > div:last-child #rangeInput { background: url(/Content/Archive/406/icon-b40px-256836.png) right 0px top -201px no-repeat #fff; } div[ng-controller="DetailController"] .row > div:last-child .sumarize-section { margin-top: 40px } div[ng-controller="DetailController"] .row > div:last-child .sumarize-section .select-type {font-weight: bold; line-height: 32px } div[ng-controller="DetailController"] .row > div:last-child .sumarize-section > .sumation-cost { border-top: 1px solid #ededed } div[ng-controller="DetailController"] .row > div:last-child .sumarize-section > .sumation-cost .pull-left { margin-left: 0px; float: left; line-height: 40px } div[ng-controller="DetailController"] .row > div:last-child .sumarize-section > .sumation-cost .pull-right { margin-right: 0px; float: right; line-height: 40px } div[ng-controller="DetailController"] .row > div:last-child .LogOnPanel { padding: 20px 0px; border-top: 1px solid #dbdbdb; margin-top: 40px; max-width: 100% } div[ng-controller="DetailController"] .row > div:last-child #registerPanel fieldset { border: 0px; margin: 0px; padding: 0px; } div[ng-controller="DetailController"] .row > div:last-child #registerPanel button { margin: 0px !important; background: #3b3b3b } div[ng-controller="DetailController"] .row > div:last-child #registerPanel button:hover { background: #212121 } div[ng-controller="DetailController"] .row > div:last-child #registerPanel button:active { background: #101010 } /* Booking ===============================================================================*/ .booking-controller { max-width: 1200px; margin: auto; padding-bottom: 40px } .booking-controller:after { content: ""; clear: both; display: block; } .booking-controller label { font-weight: 500 } .booking-controller > div { margin-top: 20px; padding: 20px; background: #fbfbfb } .booking-controller .building-section { width: 60%; float: left; border: 1px solid #f2f2f2; border-radius: 3px; overflow: hidden; margin-top: 20px } .booking-controller .building-section .building-img { float: left; width :32% } .booking-controller .building-section .building-detail { float: right; width: 66%; } .booking-controller .building-section .building-detail p { margin: 4px 0px 0px 0px } .booking-controller .building-section .building-detail label { width: 35%; font-weight: 500; display: inline-block; vertical-align: top } .booking-controller .building-section .building-detail span { width: 60%; display: inline-block; vertical-align: top } /* Form ---------------------------------------*/ .booking-controller .customer-section { width: 60%; float: left; border: 1px solid #f2f2f2; border-radius: 3px; overflow: hidden; margin-top: 20px } .booking-controller .customer-section > div { margin-bottom: 12px } .booking-controller .customer-section label { display: block; margin-bottom: 4px; font-weight: 500 } .booking-controller .customer-section .form-firstname, .customer-section .form-email { width: 49%; float: left; margin-bottom: 12px } .booking-controller .customer-section .form-lastname, .customer-section .form-phone { width: 49%; float: right; margin-bottom: 12px } .booking-controller .customer-section .form-phone+div { clear: both; margin-bottom: 12px } .booking-controller .customer-section .btn-continue { text-align: right } /* Roomtype ---------------------------------------*/ .booking-controller .roomtype-section { float: right; width: 38%; border: 1px solid #ccc; border-radius: 3px } .booking-controller .roomtype-section:after { content: ""; clear: both; display: block; } .booking-controller .roomtype-section h5 { margin-bottom: 12px } .booking-controller .roomtype-img { float: left; width :32% } .booking-controller .roomtype-detail { float :right; width: 66% } .booking-controller .roomtype-detail ul { padding-left: 24px } /* Payment section ---------------------------------------*/ .booking-controller .payment-section { float: right; width: 38%; background: #fff; border-radius: 3px; padding: 0px } .booking-controller .payment-section > div { border: 1px solid #ccc; border-radius: 4px } .booking-controller .payment-section > div+div { margin-top: 20px } .booking-controller .payment-section .payment-title { display: block; padding: 8px 20px; border-bottom: 1px solid #ccc; background: #fbfbfb; border-radius: 4px 4px 0px 0px; font-weight: 600; font-size: 15px } /*-- addition --*/ .booking-controller .payment-section .additional-item-group.ng-scope { padding: 10px 20px; } .booking-controller .payment-section .additional-item-group+.additional-item-group { border-top: 1px solid #ccc; } .booking-controller .payment-section .group-item-description {display: inline-block;margin-bottom: 4px;} .booking-controller .payment-section .additional-item+.additional-item { border-top: 1px solid #ededed; padding-top: 4px; margin-top: 4px } .booking-controller .payment-section .additional-item-name > * { display: inline; width: auto; float: left; line-height: 28px } .booking-controller .payment-section .additional-item-name > *:first-child { margin: 6px 6px 4px 0px } .booking-controller .payment-section .additional-item-name label { width: 45.5% } .booking-controller .payment-section .additional-item-name:after { clear: both; content: ""; display: block } .booking-controller .payment-section .additional-item-price { float: left } .booking-controller .payment-section .additional-item-name label { font-weight: normal } .booking-controller .payment-section .item-service { float: right; min-height: 28px; height: 28px; margin-right: 8px; margin-left: 24px;} .booking-controller .payment-section .additional-item-description { display:block; margin-top: 0px; line-height: 1.3; clear: both; color: #a0a0a0 } /*-- Method --*/ .booking-controller .method-section .payment { padding: 8px 15px } /*-- Rate --*/ .booking-controller .rate-section { border: 1px solid #ccc; background: #fff; border-radius: 3px; padding: 0px } .booking-controller .rate-section p { margin: 0px; padding: 0px 20px } .booking-controller .rate-section p:first-child { padding-top: 12px } .booking-controller .rate-section p:nth-last-of-type(2) { padding-bottom: 12px } .booking-controller .rate-section p:last-child { margin: 0px; border-top: 1px solid #ccc; padding: 12px 20px; font-size: 18px; color: #C5161D; font-weight: 600 } .booking-controller .rate-section label { display: inline-block; width: 50%; } .booking-controller .rate-section p:last-child label { font-weight: 600 } /* Booking Summary ===============================================================================*/ .PageHotelBookingSummary #ContentArea h2 { text-align: center; font-size: 28px } .PageHotelBookingSummary #ContentArea > div { max-width: 738px; margin: auto; margin-bottom: 40px; } .PageHotelBookingSummary #ContentArea .DetailStatusBooking { font-weight: bold; margin-bottom: 20px; color: #808080; font-size: 48px; text-align: center } .PageHotelBookingSummary #ContentArea table { width: 100%; border: 1px solid #ededed; text-align: left } .PageHotelBookingSummary #ContentArea td { width: 25%; padding: 8px 12px } .PageHotelBookingSummary #ContentArea td:nth-child(2) { width: 70%; border-left: 1px solid #ededed } .PageHotelBookingSummary #ContentArea tr+tr td { border-top: 1px solid #ededed } .PageHotelBookingSummary .BookingDetail { text-align: center } .PageHotelBookingSummary .BookingDetail .booking-title { padding-bottom: 40px;border-bottom: 4px solid #f7f7f7 } .PageHotelBookingSummary .BookingDetail .booking-title .booking-text { margin: 20px 0px; color: #808080 } .PageHotelBookingSummary .BookingDetail .booking-main { margin-top: 60px } .PageHotelBookingSummary .BookingDetail .booking-main h2.booking-building { margin: 0px } .PageHotelBookingSummary .BookingDetail .booking-main .booking-roomtype { margin: 0px; font-weight: 300; font-size: 24px } .PageHotelBookingSummary .BookingDetail .booking-image img { margin-top: 20px } .PageHotelBookingSummary .BookingDetail .booking-summary { margin: 20px auto } .PageHotelBookingSummary .BookingDetail .booking-summary-item:after { content: ""; display: block; clear: both } .PageHotelBookingSummary .BookingDetail .booking-summary-item+.booking-summary-item { border-top: 1px solid #ededed } .PageHotelBookingSummary .BookingDetail .booking-summary-item span:first-child { float: left; width: 35%; text-align: left; padding: 8px 12px } .PageHotelBookingSummary .BookingDetail .booking-summary-item span:last-child { float: left; width: 65%; text-align: right; padding: 8px 12px } .PageHotelBookingSummary .BookingDetail .booking-detail-note .float-left { display: block; margin-top: 8px; font-weight: 600; color: #000 } .PageHotelBookingSummary .booking-total { background: #f7f7f7;padding: 8px 12px; margin-top: 40px } .PageHotelBookingSummary .booking-total > div { padding: 8px 0px } .PageHotelBookingSummary .booking-total > div:after { content: ""; display: block; clear: both } .PageHotelBookingSummary .booking-total > div+div { border-top: 1px solid #ededed } .PageHotelBookingSummary .booking-total span:first-child { width: 65%; float: Left; padding: 0px 12px; text-align: left; color: #000 } .PageHotelBookingSummary .booking-total span:nth-child(2) { width: 65%; float: Left; padding: 0px 12px 0px 12px; text-align: left} .PageHotelBookingSummary .booking-total span:last-child { width: 35%; float: Left; padding: 0px 12px; text-align: right; color: #000 } .PageHotelBookingSummary .booking-total .total-order-total { font-weight: bold; color: #000; font-size: 20px } .PageHotelBookingSummary .DetailStatusBooking span { color: #9E1D21 } /* Mobile ===============================================================================*/ .t div[ng-controller="SearchController"] { margin: 0px 15px; padding: 10px 15px 15px 15px } .t div[ng-controller="SearchController"] .row { margin: 0px } .t div[ng-controller="SearchController"] .row > .col-md-12 > * { font-size: 16px } .t div[ng-controller="SearchController"] .row .col-md-12, .t div[ng-controller="SearchController"] .row .col-md-4 { padding: 0px } .t div[ng-controller="SearchController"] .row > .col-md-12:nth-of-type(2) { padding-left: 12px } .TitleFloat .listArticle > div > div { position: relative } .TitleFloat .listArticle .Title { margin: 0px; position: absolute; bottom: 0px; z-index: 1; width: 100% } .TitleFloat .listArticle .Title a { text-align: center; display: block; padding: 15% 15px 5%; background-image: -webkit-linear-gradient(to top, #2F96D0 0%, #275998 0%); background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); color: #fff } .TitleOverImage .listArticle > div > div { position: relative } .TitleOverImage .listArticle > div > div > a:first-child { position: absolute; } .TitleOverImage .listArticle .Title { display: table; height: 450px; width: 100%; position: absolute; top: 0px; z-index: 100; margin: 0px } .TitleOverImage .listArticle .Title a { text-align: center; display: table-cell; vertical-align: middle; padding: 15% 15px 5%; background-image: -webkit-linear-gradient(to top, #2F96D0 0%, #275998 0%); background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); color: #fff } /* Article List ===============================================================================*/ .ImageCover > * { overflow: hidden; display: block } .ImageCover .image, .ImageCover span[style="background: url(/Content/no-image.jpg)"] { padding-top: 100%; display: block; background-size: cover !important; background-position: center center !important } .CoverZoom .ImageCover .image { transform: scale(1); transition: all 0.2s } .CoverZoom .ImageCover .image:hover { transform: scale(1.2) } .r4-3 .ImageCover .image,.r4-3 .ImageCover span[style="background: url(/Content/no-image.jpg)"] { padding-top: 75% } .r4-5 .ImageCover .image,.r4-5 .ImageCover span[style="background: url(/Content/no-image.jpg)"] { padding-top: 125% } .r16-9 .ImageCover .image,.r16-9 .ImageCover span[style="background: url(/Content/no-image.jpg)"] { padding-top: 56.25% } .r16-10 .ImageCover .image,.r16-10 .ImageCover span[style="background: url(/Content/no-image.jpg)"] { padding-top: 62.5% } /* Category List ===============================================================================*/ .CategoryBreadcrumb { border-bottom: 1px solid #e4e4e4; line-height: 40px } .CategoryBreadcrumb > *:after { content: "/"; display: inline-block; margin: 0px 4px 0px 8px } .CategoryBreadcrumb > *:last-child:after, .CategoryBreadcrumb > *:nth-last-of-type(1):after { display: none } .CategoryTitle > h1 { margin: 20px 0px } .CategoryList { margin-top: 10px } .CategoryList .CategoryItem { display: inline-block } .CategoryList .CategoryItem a { display: block; background: #ccc; border-radius: 3px; padding: 3px 8px; color: #fff } .CategoryList .CategoryItem a:hover { background: #000 } .CategoryModuleItemList { margin-top: 20px } /* Company list ---------------------------------------*/ .CategoryModuleItemList .CompanyImage { float: left; margin-right: 20px; max-width: 40% } .CategoryModuleItemList .CompanyTitle h4 { margin-bottom: 8px; font-size: 24px } .CategoryModuleItemList .CompanyInfo ul { list-style: none; padding: 0 } .CategoryModuleItemList .CompanyInfo .label { font-weight: bold } .CategoryModuleItemList .Address { margin: 10px 0px } .CompanyCategories ul { padding: 0px } .CompanyCategories li { display: inline-block } .CompanyDetails .CompanyCategories li+li { margin-left: 4px } .CompanyCategories a { display: block; background: #ccc; border-radius: 3px; padding: 3px 8px; color: #fff } .CompanyCategories a:hover { background: #000 } /* Company Details ---------------------------------------*/ .CompanyImages { margin-bottom: 40px } .CompanyImages .CompanyMainImage_Wrapper { position:relative; } .CompanyImages .CompanyMainImages { text-align:center; } .CompanyImages .CompanyMainImages img { display:none; vertical-align:middle; } .CompanyImages .CompanyMainImageCaption { display:none; position:absolute; background:Black; color:White; text-align:left; line-height:20px; } .CompanyImages .CompanyMainImageCaption > span { display:block; padding:10px; } .CompanyImages .CompanyImageLoading { background:url(/Content/ajax-loader.gif); background-repeat:no-repeat; background-position:center; } .CompanyImages .Prev a, .CompanyImages .Next a { position: absolute; display: block; height: 60px !important; width: 60px !important; top: 0px; bottom: 0px; margin: auto; background: rgba(0,0,0,0.5) !important; border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 50; text-indent: -9999px; } .CompanyImages .Prev a { position:absolute; left:15px; -webkit-transform: rotateZ(0deg); transform: rotateZ(-135deg); } .CompanyImages .Next a { position:absolute; right:15px; -webkit-transform: rotateZ(0deg); transform: rotateZ(45deg); } .CompanyImages .Prev a:before, .CompanyImages .Next a:before { content: ""; display: block; position: absolute; -webkit-transition: all 0.2s; transition: all 0.2s; border-right: 2px solid #fff; border-top: 2px solid #fff; border-radius: 0px 1px 0px 0px; height: 20%; width: 20%; top: 52%; left: 48%; transform: translate(-50%,-50%) } .CompanyImages .Prev a:hover:before, .CompanyImages .Next a:hover:before { border-color: #fff } .CompanyImages .Prev a:hover, .CompanyImages .Next a:hover { background: rgba(0,0,0,0.8) !important; } /*-- carousel --*/ .CompanyImages .es-carousel-wrapper, .CompanyImages .es-carousel { background: none; padding: 0px } .CompanyImages .es-carousel-wrapper { border-top: 1px solid #e4e4e4; margin-top: 20px; padding-top: 20px; border-radius: 0px }