/* ------------- CSS Reset ----------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1em;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} html, body { height: 100%; width: 100%; padding: 0; margin: 0; font-family: 'Open Sans Condensed', Arial, serif; font-size: 15px; color: #000;} strong { font-weight: bold;} a, a:visited, a:active { color: #d00700;text-decoration: none;} a:hover {text-decoration: underline;} h1, h2, h3 {font-family: 'Open Sans';} h1 {font-size: 2.2em; font-weight: bolder; font-style: italic; color: #d00700; line-height: 1.1em; margin-bottom: 20px;} h2 {font-size: 1.3em;} h3 {font-size: 1.3em;} th {text-align: left;} #basket {background: #eb1701 url('/img/basket.gif') 0px 3px no-repeat; background-size: 66px 36px; width: 66px; height: 44px; position: fixed; right: 0px; top: 86px; z-index: 100;} /* ------------- Misc ----------------- */ .hidden { display: none;} .Clear { clear: both;} .White { color: #fff;} .black {color: #000} .red {color: #d00700} .right {text-align: right;} .grayCircle { /* fallback */ background-color: #8A8A8A; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#B8B8B8), to(#8A8A8A)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #B8B8B8, #8A8A8A); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #B8B8B8, #8A8A8A); /* IE 10 */ background: -ms-radial-gradient(circle, #B8B8B8, #8A8A8A); } .Content {position: relative; width: 980px; margin: 0px auto;} .fullPage .Content {height: 100%; min-height: 800px;} .fullPage {position: relative;padding: 0px; margin: 0; height: 100%; min-height: 800px; } .fullPageContent {position: absolute;} .shortPage {position: relative; padding: 100px 0px 50px 0px; clear: both;} .shortPageContent {position: relative;} a.FPStyleBtn {color: #fff; background: #d00700; padding: 8px 15px 8px 15px; margin: 0 15px 25px 0px; font-weight: bold;} a.FPStyleBtn:hover {background: #000; text-decoration: none;} /* ------------- Logo ----------------- */ #LogoWrap {position: relative; width: 980px; margin: 0px auto; z-index: 200; } #Logo {position: fixed; top: 10px; z-index: 100; width: 90px; height: 60px; margin-left: 22px; text-indent:-999px; font-size: 0; background: url('/img/laufLogos.png') 0px -120px no-repeat; } #LaufFooter {min-height: 800px; background: #252525; color: #fff;} /* ------------- Menus ----------------- */ #TopWrap {position: fixed; top: 0px; width: 100%; height: 80px; background: #fff; opacity:0.90; filter:alpha(opacity=90);text-align: center;z-index: 100; border-bottom: 1px solid #d00700;} #MobileMenu, #MobileMenuContent { display: none; } #TopMenu {margin: 0px auto; width: 980px; text-align: right;} #TopMenu ul {float: right; margin-right: 100px;} #TopMenu ul li {display: inline; float: left; padding: 9px 0px 3px 0px; margin: 6px 0px 0px 0px; font-size: 1.2em; font-weight: bold; color: #333;} #TopMenu ul li a {color: #000; text-decoration: none; padding: 8px 12px; margin: 0px; display: block; } #TopMenu ul li:last-child { border-right: none;} #TopMenu ul li.On {color: #d00700;} #TopMenu ul li:hover a, #TopMenu ul li.On a { color: #d00700;} #SubMenuWrap {position: fixed; top: 45px; width: 100%; text-align: center; z-index: 120;} #SubMenu {margin: 5px auto 0px auto; width: 980px; text-align: right; height: 36px;} #SubMenu ul { float: right; padding: 0px; height: 36px; margin-right: 96px;} #SubMenu ul li {display: inline; float: left; margin: 5px 0px 0px 0px; font-size: 1.1em; padding-bottom: 11px;} #SubMenu ul li a {color: #000; padding: 8px 15px;} #SubMenu ul li a:hover {text-decoration: none;color: #d00700; } #SubMenu ul li.On { border-bottom: 4px solid #d00700;} #SubMenu ul li.On a {color: #d00700;} #ProductMenu {display: none; margin: 0px auto; width: 980px; background: #fff; margin-top: 80px; border-top: 1px solid #cc1c22; border-bottom: 6px solid #cc1c22; z-index: 200;} #ProductMenu .productMenuItem { float: left; width: 250px; text-align: right; padding: 20px 35px;} #ProductMenu .productMenuItem .img {background: url('/media/13655/productmenu.png') 0px 0px no-repeat; width: 63px; height: 172px; position: absolute; margin-left: 10px;} #ProductMenu .productMenuItem h2 {font-weight: bold; margin-top: 20px;} #ProductMenu .productMenuItem p { margin: 15px 0px 30px 0; padding-left: 70px; font-size: 1.2em; line-height: 1.5em; } #ProductMenu .productMenuItem p a {color: #000;} #ProductMenu .productMenuItem p a:hover {color: #cc1c22;} #ProductMenu .productMenuItem a.FPStyleBtn {color: #fff; margin-right: 0;} #ProductMenu .productMenuItem:hover a.FPStyleBtn {color: #fff;} #ProductMenu .productMenuItem a:hover {text-decoration: none;} #ProductMenu .productMenuLTR .img {} #ProductMenu .productMenuLTRB .img {background-position: -63px 0;} #ProductMenu .productMenuCarbonara .img {background-position: -126px 0;} #ProductMenu .productMenuStore .img {background-position: -126px 0;} #ProductMenu .productMenuStore p {padding-left: 80px;} #ProductMenu .btnWrap {font-size: 1.2em; margin-bottom: 10px;} #SocialMenu {margin: 0px auto; width: 980px; text-align: right; position: relative; } #SocialMenu ul {float: right; margin-top: 10px; position: absolute; right: 0px;} #SocialMenu ul li {display: inline; float: left; height: 25px; width: 25px; margin-left: 2px;} #SocialMenu a {display: inline-block; height: 30px; width: 30px; text-indent:-999px; font-size: 0;} #SocialFacebook {background: url('/img/icons.png') -30px -90px no-repeat;} #SocialTwitter {background: url('/img/icons.png') -30px -120px no-repeat;} #SocialInstagram {background: url('/img/icons.png') -30px -150px no-repeat;} /* .FPStyle #TopMenu, .BuyStyle #TopMenu, .PressStyle #TopMenu {padding-top: 10px} */ .FPStyle #SubMenuWrap {display: none;} .screenDirection {position: absolute; left: 50%; bottom: 0%; margin-bottom: 150px;} .screenDirection a {position: absolute; display: inline-block; height: 30px; width: 30px; text-indent:-999px; font-size: 0; background: url('/img/arrows.png') -30px -30px no-repeat;} .screenDirection a.Up {background-position: 0px -30px;} .screenDirection a.Down {margin-top: 40px; background-position: -30px -30px;} /* ------------- Front Page Fillers ----------------- */ #FillLaufCarbonara .fullPageContent {top: 150px; left: 0px; width:auto; position: absolute; padding: 12px 20px; text-align: left; background: #fff; opacity:0.80; filter:alpha(opacity=80);} #FillLaufTrBoost .fullPageContent {top: 180px; right: 0px; width:auto; position: absolute; padding: 15px 20px; text-align: left; background: #fff; opacity:0.80; filter:alpha(opacity=80); } #FillAdventure .fullPageContent { top: 150px; left: 0px; width:490px; position: absolute; padding: 15px 15px; text-align: left; background: #fff; opacity:0.80; filter:alpha(opacity=80);} #FillSoren .fullPageContent { top: 150px; left: 0px; width: 450px; background: #fff; padding: 15px 20px; opacity:0.80; filter:alpha(opacity=80)} #FpFork {position: relative; background-size: cover; width: 400px; float: left; height: 100%; min-height: 800px; top: 50px; left: 40px;} #FillLaufCarbonara h2, #FillLaufTrBoost h2, #FillAdventure h2, #FillSoren h2 {color: #000; font-weight: bold; font-size: 2.5em; line-height: 1.1em; margin-bottom: 20px; } #FillLaufCarbonara h3, #FillLaufTrBoost h3, #FillAdventure h3, #FillSoren h3 {color: #d00700; font-weight: bold; font-size: 1.8em; line-height: 1.1em; font-style: italic; } #FillLaufCarbonara p, #FillLaufTrBoost p, #FillAdventure p, #FillSoren p {padding: 8px 0px 8px 0px; text-align: left; line-height: 1.1em; font-size: 1.3em; margin-bottom: 10px; } #FillLaufCarbonara p:last-child, #FillLaufTrBoost p:last-child, #FillAdventure p:last-child, #FillSoren p:last-child {margin-top: 30px;} /* -------------- LTR Full Pages -------------- */ #LTRIntro .fullPageContent { top: 160px; left: 0px; text-align: right; width: 430px; background: #000; opacity:0.80; filter:alpha(opacity=80); padding: 20px 30px; color: #fff;} #LTRIntro h1 { font-size: 3em; line-height: 1em; font-weight: bold; margin-bottom: 0px;} #LTRIntro h2 { font-size: 2.5em; line-height: 1.3em; font-weight: normal; font-style: italic; color: #d00700; text-transform: uppercase;} #LTRIntro p {font-size: 1.3em; line-height: 1.5em;} #LTRSpecs .fullPageContent { top: 150px; left: 0; width: 600px;} #LTRSpecs dt { float: left; clear: both; font-weight: bold; font-size: 1.3em; line-height: 1.1em; padding: 6px 0px; width: 190px; text-align: right;font-style: italic;color: #d00700;} #LTRSpecs dd { margin-left: 200px; font-size: 1.3em; line-height: 1.1em; padding: 6px 0px; font-style: italic;} #ParallaxSpecs {position: relative; background-size: cover; width: 400px; float: right; height: 100%; min-height: 800px; top: 50px; right: 20px;} #LTRFeatures .fullPageContent { top: 80px; right: 0px; width: 800px; padding: 20px 10px; background: #fff; opacity:0.90; filter:alpha(opacity=90);} #LTRFeatures dl {margin: 0px 30px 0px 110px;} #LTRFeatures dl dt { font-weight: bold; font-size: 1.2em; line-height: 1.3em; padding: 5px 0px; color: #d00700; clear: both;} #LTRFeatures dl dd { font-size: 1.1em; line-height: 1.5em; padding: 0px; margin: 0px 0px 30px 0px;} #LTRFeatures img { width: 80px; position: absolute; margin: -20px 0px 0px -100px;} #LTRColors .fullPageContent {top: 60px; right: 0px; width: 800px; padding: 70px 10px; } #LTRColorPicker {width: 240px; position: absolute; left: 50%; margin-left: -360px;} #LTRColorPicker h2 {font-size: 1em; line-height: 1.5em; text-align: right; padding-right: 80px; color: #999; } #LTRiFrame360 {width: 440px; position: absolute; left: 50%; margin-left: -100px;} #RipMe360 {z-index: 200px; position:absolute; top:20px;left:150px; width: 180px; height: 45px; background: url('/img/RipMe360.png') 0% 0% no-repeat; } ul.ColorPicker { margin: 0px;} ul.ColorPicker a {color: #000;} ul.ColorPicker a:hover {color: #d00700; text-decoration: none;} ul.ColorPicker li.On a {color: #d00700;} ul.ColorPicker li { padding: 10px 10px 0px 0px; margin: 0px 4px; cursor: pointer; font-size: 1em; clear: both; font-size: 1.3em; text-align: right;} ul.ColorPicker li .colorImg { float: right; background-position: 0px 0px; width: 51px; height: 35px; background: url('/img/color360.png') no-repeat; margin: -10px 0px 6px 10px;} #cpCarbonRed .colorImg, #cpBoostCarbonRed .colorImg { background-position: 5px 0px; } #cpCarbonOrange .colorImg, #cpBoostCarbonOrange .colorImg {background-position: 5px -35px; } #cpCarbonGreen .colorImg, #cpBoostCarbonGreen .colorImg {background-position: 5px -70px; } #cpCarbonBlue .colorImg, #cpBoostCarbonBlue .colorImg { background-position: 5px -105px;} #cpCarbonWhite .colorImg, #cpBoostCarbonWhite .colorImg {background-position: 5px -140px; } #cpFullWhite .colorImg {background-position: 5px -175px; } #cpFullRed .colorImg {background-position: 5px -210px; } #cpNakedGlossy .colorImg {background-position: 5px -245px;} #cpNakedMatte .colorImg, #cpBoostNakedMatte .colorImg {background-position: 5px -280px;} #cpCarbonRed:hover .colorImg, #cpCarbonRed.On .colorImg, #cpBoostCarbonRed:hover .colorImg, #cpBoostCarbonRed.On .colorImg { background-position: -48px 0px; } #cpCarbonOrange:hover .colorImg, #cpCarbonOrange.On .colorImg, #cpBoostCarbonOrange:hover .colorImg, #cpBoostCarbonOrange.On .colorImg {background-position: -48px -35px; } #cpCarbonGreen:hover .colorImg, #cpCarbonGreen.On .colorImg, #cpBoostCarbonGreen:hover .colorImg, #cpBoostCarbonGreen.On .colorImg {background-position: -48px -70px; } #cpCarbonBlue:hover .colorImg, #cpCarbonBlue.On .colorImg, #cpBoostCarbonBlue:hover .colorImg, #cpBoostCarbonBlue.On .colorImg {background-position: -48px -105px;} #cpCarbonWhite:hover .colorImg, #cpCarbonWhite.On .colorImg, #cpBoostCarbonWhite:hover .colorImg, #cpBoostCarbonWhite.On .colorImg {background-position: -48px -140px; } #cpFullWhite:hover .colorImg, #cpFullWhite.On .colorImg {background-position: -48px -175px; } #cpFullRed:hover .colorImg, #cpFullRed.On .colorImg {background-position: -48px -210px; } #cpNakedGlossy:hover .colorImg, #cpNakedGlossy.On .colorImg {background-position: -48px -245px;} #cpNakedMatte:hover .colorImg, #cpNakedMatte.On .colorImg, #cpBoostNakedMatte:hover .colorImg, #cpBoostNakedMatte.On .colorImg {background-position: -48px -280px;} #LTRReviews .fullPageContent { top: 120px; right: 35px; width: 900px; } .review {font-size: 1em; line-height: 1.5em;border: 1px solid #d00700;margin-right: 10px; padding: 0px; min-height: 500px; background: #fff; opacity:0.90; filter:alpha(opacity=90);position: relative;} .review h2 {color: #d00700; font-size: 1.5em; padding: 20px 15px 10px 15px;} .reviewTxt p {font-size: 1.2em; line-height: 1.3em; padding: 0px 15px 10px 15px; font-style: italic;} .reviewFooterTxt p {font-size: 1em; line-height: 1.3em; padding: 0px 15px 10px 15px; color: #555;} .reviewLink {position: absolute; bottom: 0px; left: 0px; width: 100%; background: #d00700; } .reviewLink a { display: block; color: #fff; margin: 5px 15px; text-transform: uppercase;} .reviewImg img {padding: 10px 15px 20px 15px; } .slick-prev:before, .slick-next:before {color: #d00700; font-size: 40px;} .slick-prev, .slick-next {width: 40px; height: 40px; } .slick-prev {left: -45px;} .slick-next {right: -35px;} ul.listWrapperMenu { border-bottom: 1px solid #d00700; height: 34px; margin-bottom: 20px; line-height: 2em;} ul.listWrapperMenu li {display: inline; color: #fff; font-size: 1.2em; background: #d00700; border: 1px solid #d00700; padding: 6px 10px 7px 10px; margin: 2px; font-weight: bold;} ul.listWrapperMenu li:hover {color: #d00700; cursor: pointer; background: #fff;} ul.listWrapperMenu li:first-child {margin-left: 80px} ul.listWrapperMenu li.On {border-bottom: 1px solid #fff; background: #fff; color: #d00700} #LTRGallery {} #LTRGallery .fullPageContent { top: 120px; left: 0px; width: 100%;} .LaufAlbum div {margin: 0px;padding: 0px; float:left;margin-bottom: -2px;} .LaufAlbum a {display: block; margin: 0; padding: 0;} .LaufAlbum img {background: #fff;} /* -------------- Carbonara -------------- */ #CarbonaraIntro .fullPageContent { top: 160px; left: 0px; text-align: left; width: 400px; background: #000; color: #fff; opacity:0.80; filter:alpha(opacity=80); padding: 20px 30px;} #CarbonaraIntro h1 { font-size: 3em; line-height: 1em; font-weight: bold; margin-bottom: 0;} #CarbonaraIntro h2 { font-size: 2.5em; line-height: 1.3em; font-weight: normal; font-style: italic; color: #d00700; text-transform: uppercase;} #CarbonaraIntro p {font-size: 1.3em; line-height: 1.5em;} #cpCarbonaraFullWhiteGlossy .colorImg {background-position: 4px -315px;} #cpCarbonaraNakedMatte .colorImg {background-position: 4px -350px;} #cpCarbonaraTangerineMatte .colorImg {background-position: 4px -385px;} #cpCarbonaraFullWhiteGlossy:hover .colorImg, #cpCarbonaraFullWhiteGlossy.On .colorImg {background-position: -48px -315px;} #cpCarbonaraNakedMatte:hover .colorImg, #cpCarbonaraNakedMatte.On .colorImg {background-position: -48px -350px;} #cpCarbonaraTangerineMatte:hover .colorImg, #cpCarbonaraTangerineMatte.On .colorImg {background-position: -48px -385px;} /* -------------- Grit -------------- */ #GritIntro .fullPageContent { top: 140px; right: 0px; text-align: right; width: 505px; background: #000; color: #fff; opacity:0.80; filter:alpha(opacity=80); padding: 20px 20px;} #GritIntro h1 { font-size: 2.8em; line-height: 1em; font-weight: bold; margin-bottom: 0;} #GritIntro h2 { font-size: 2.0em; line-height: 1.3em; font-weight: normal; font-style: italic; color: #d00700; text-transform: uppercase;} #GritIntro p {font-size: 1.3em; line-height: 1.4em;} /* -------------- Buy Full Pages -------------- */ #OnlineStore {min-height: 550px; border-bottom: 4px solid #d00700;} #OnlineStore .shortPageContent {top: 160px; left: 0px; width:500px; padding: 20px 30px; color: #fff; background: #fff; opacity:0.80; filter:alpha(opacity=80); } #OnlineStore h2 { margin-bottom: 5px; font-weight: bold; color: #000;} #OnlineStore p { margin-bottom: 15px; line-height: 1.5em; font-size: 1.2em; margin: 30px 0;} .distributorWrap { margin-bottom: 20px; } .distributorWrap table {width: 100%; } .distributorWrap table tr { margin: 2px; padding: 0px;} .distributorWrap table tr th {font-weight: bold; border-bottom: 1px solid #000; padding: 5px; text-align: left;} .distributorWrap table tr td {border-bottom: 1px solid #999; padding: 5px;} .distributorWrap table tr:hover {background: #ccc;} .distributor {float: left; padding: 10px; margin-right: 20px;} .distributor:last-child {margin-right: 0px;} .distributor h2 { margin: 10px 0px; font-weight: bold; font-size: 1.3em; padding: 3px 0px;} .distributor p { margin: 5px 0px; line-height: 1.5em;} /* -------------- Lauf Love -------------- */ .instagram-placeholder {margin: 0px;padding:0px; float:left; margin-bottom: -2px;} .instagram-placeholder a {display: block; margin: 0; padding: 0;} .instagram-placeholder img {background: #fff;width: 150px; height: 150px; } .LaufInstagramTxt {margin: 20px 0;} .LaufInstagramTxt h2 {margin: 20px 0;font-size: 1.5em; line-height: 1em; font-weight: bold;} .LaufInstagramTxt p {margin: 20px 0; font-size: 1.2em; line-height: 1em;} .youtubeVideo { margin: 0 30px 30px 0; float: left;} /* -------------- Support Pages -------------- */ #CompanyContact {min-height: 500px; border-bottom: 4px solid #d00700;} #CompanyContact .shortPageContent {top: 10px; left: 0px; width:600px; padding: 20px 30px; color: #fff; background: #000; opacity:0.80; filter:alpha(opacity=80); } #CompanyContact h2 { margin-bottom: 5px; font-weight: bold;} #CompanyContact p { margin-bottom: 15px; line-height: 1.5em; font-size: 1.2em;} #CompanyContact a {color: #fff; font-weight: bold;} #CompanyFaq dl {margin-top: 20px;} #CompanyFaq dt { margin: 0px; font-size: 1.5em; line-height: 1em; font-weight: bold; padding: 0; color: #d00700;} #CompanyFaq dd { margin-bottom: 15px; font-size: 1.2em; line-height: 1.5em; padding: 5px 0; color: #000;} #ConsumerSupport .fullPageContent {top: 120px; left: 100px; width: 900px; } .LaufPressPackage {position: relative; float: left; width: 250px; border: 1px solid #d00700; margin: 0 50px 50px 0; padding: 0px; background: #fff;} .LaufPressPackage img {margin-bottom:30px;} .pressFooter {position: absolute; bottom: 0px; left: 0px; width: 100%; background: #fff; border-top: 1px solid #d00700;} .pressFooter a { display: block; color: #d00700; margin: 10px 15px; text-transform: uppercase;} .LaufPressPackage:hover .pressFooter {background: #d00700;} .LaufPressPackage:hover .pressFooter a {color: #fff;} #WarrantyCrash {background: #ccc;} #WarrantyCrash dl {margin-top: 20px;} #WarrantyCrash dt { margin: 0px; font-size: 1.5em; line-height: 1em; font-weight: bold; padding: 0; color: #d00700;} #WarrantyCrash dd { margin-bottom: 15px; font-size: 1.2em; line-height: 1.5em; padding: 5px 0; color: #000;} #PressOverview .fullPageContent {top: 120px; left: 100px; width: 900px; } .LaufPressPackage {position: relative; float: left; width: 250px; border: 1px solid #d00700; margin: 0 50px 50px 0; padding: 0px; background: #fff;} .LaufPressPackage img {margin-bottom:30px;} .pressFooter {position: absolute; bottom: 0px; left: 0px; width: 100%; background: #fff; border-top: 1px solid #d00700;} .pressFooter a { display: block; color: #d00700; margin: 10px 15px; text-transform: uppercase;} .LaufPressPackage:hover .pressFooter {background: #d00700;} .LaufPressPackage:hover .pressFooter a {color: #fff;} /* -------------- Company Full Pages -------------- */ #CompanyStory {min-height: 620px; border-bottom: 4px solid #d00700;} #CompanyStory .shortPageContent {top: 30px; right: 0px; color: #fff; padding: 30px; background: #000; opacity:0.80; filter:alpha(opacity=80);} #CompanyStory h2 { margin: 10px 0 5px 0; font-weight: bold;} #CompanyStory p { margin-bottom: 15px; line-height: 1.5em; font-size: 1.2em;} #CompanyCrew .fullPageContent { left: 0px; position: relative; padding: 0px; text-align: left;} .empCard {float: left; width: 180px; margin-right: 50px; margin-bottom: 50px;} .empCard img {border: 1px solid #111;} .empCard:last-child {margin-right: 0px;} .empCard h2 { margin: 10px 0px 0px 0px; font-weight: bold; font-size: 1em; color: #000; border-bottom: 1px solid #999; padding: 3px 0px 6px 0px;} .empCard h3 { margin: 10px 0px 0px 0px; font-weight: bold;font-size: .9em; } .empCard p { margin: 5px 0px; line-height: 1.3em;} .empCard p.title {font-style: italic;} .empCard p.email {} .empCard-modal {display: none} .empCard-popup-block{background:#FFF;padding:20px 30px;text-align:left;max-width:600px;margin:40px auto;position:relative; min-height: 250px; font-size: 1.1em; line-height: 1.5em;} .empCard-popup-block img {float: left; margin: 0px 20px 20px 0px} .empCard-popup-block h2 {margin: 0px 0px 10px 200px; padding: 3px 0px; font-weight: bold; border-bottom: 1px solid #ccc;} .empCard-popup-block h3 {margin: 20px 0px 10px 200px; font-weight: bold;} .empCard-popup-block p {margin: 0px 0px 10px 200px; } .empCard-popup-block p.title {margin-bottom: 0px; } #ReviewsMedia .fullPageContent { top: 120px; right: 35px; width: 900px; } #ReviewsRiders .fullPageContent {top: 120px; right: 35px; width: 900px; } /* ----------------------------------------------- */ /* Responsive Web Design Specials */ /* ----------------------------------------------- Version A - Upphaflegi vefurinn (hér að ofan) -- 1080px í width (2x40 pixela í l/r margin) ------------------------------------ Version B <=1080 -- 840px í width (með 2x20 pixela í l/r margin) * 1024 x 768px iPad Landscape * 1024 x 600px Kindle Landscape * Vafrar minni en 1024 pixelar ------------------------------------ Version C <=840 -- 580px í width * 600 x 1024px Kindle Portrait * 768 x 1024px iPad portrait * Vafrar minni en 820 pixelar ------------------------------------ Version D <=580 -- 450px í width * 480 x 320 iPhone Landscape * 515 x 295 Nicer Android landscape ------------------------------------ Version E <=450 -- 300px í width * 320 x 480 iPhone * 320 x 240 Crappy Android Portrait ------------------------------------ Version F <=300 - L (Komin) -- 220px í width * 240 x 320 Crappy Android portrait * 295 x 515 Nicer Android portrait 295 by 515 ------------------------------------ */ @media only screen and (max-width : 980px) { /* Style Version B : LargePad : 700 pixel fixed */ #TopMenu, #SubMenu, #SocialMenu, #ProductMenu, #LogoWrap, .Content, #LTRFeatures .fullPageContent, #LTRGallery .fullPageContent, #DirectBuy .fullPageContent, #DirectBuyCarbonara .fullPageContent, #CompanyCrew .fullPageContent, #CompanyDistributors .fullPageContent {width: 740px;} #LTRReviews .fullPageContent, #ReviewsMedia .fullPageContent, #ReviewsRiders .fullPageContent, #LTRColors .fullPageContent {width: 640px;} #TopMenu ul {margin-right: 80px;} #TopMenu ul li a {padding: 8px;} #TopMenu ul li.On {padding-top: 8px} #SubMenu ul {margin-right: 74px;} #SubMenu ul li a {padding: 8px 10px;} #ProductMenu .productMenuItem {width: 200px; padding: 20px 20px;} #ProductMenu .productMenuItem p { font-size: 1.1em; } .review {min-height: 40px;} .reviewFooterTxt p {margin-bottom: 30px;} #FillLaufCarbonara .fullPageContent {top: 120px;} #FillLaufTrBoost .fullPageContent {} #FillAdventure .fullPageContent {width:480px; } #FillSoren .fullPageContent { width: 420px; top: 120px} #FillLaufCarbonara h2, #FillLaufTrBoost h2, #FillAdventure h2, #FillSoren h2 {font-size: 2.3em; } #FillLaufCarbonara h3, #FillLaufTrBoost h3, #FillAdventure h3, #FillSoren h3 {font-size: 1.5em; } #FillLaufCarbonara p, #FillLaufTrBoost p, #FillAdventure p, #FillSoren p {font-size: 1.1em; } #FpFork {left: 0px; width: 300px;} #ParallaxSpecs {right: 0px; width: 300px;} #LTRSpecs .fullPageContent {width: 500px;} #LTRGallery .fullPageContent {right: 0px;} .LaufAlbum a img {margin: 2px 0px;} .BuyLeft,.BuyRight {float: none; width: 570px; margin-left: 170px;} .BuyLeft { margin-bottom: 40px; border-bottom: 1px solid #66CD00;} .youtubeVideo { float: none; margin-left: 200px;} #CompanyCrew .fullPageContent {width: 620px; left: 100px; top: 90px;} .staffDetail {display: none;} .empCard {margin-top: 20px; margin-right: 5px;} #CompanyStory .shortPageContent {width: 680px;} #CompanyDistributors .fullPageContent {left: 0px;} .empCard-modal, .empCard-popup-block {display: block;} #WorldMap {margin-left: 0px;} #LeadvilleSpecs .fullPageContent { top: 130px; width: 740px;} #LeadvilleSpecs dl {width: 420px;} #LeadvilleSpecs #LTRiFrame360 {width: 340px; left: 400px;} /* ListWrapperMenu */ ul.listWrapperMenu { line-height: 2em; height: 32px;} ul.listWrapperMenu li {font-size: 1.1em; padding: 6px 10px; margin: 2px; } ul.listWrapperMenu li:first-child {margin-left: 10px} } @media only screen and (max-width : 740px) { /* Style Version C : Pads & Stuff */ #TopMenu, #SubMenu, #SocialMenu, #LogoWrap, #ProductMenu, .Content, #LTRFeatures .fullPageContent, #LTRGallery .fullPageContent, #DirectBuy .fullPageContent,#DirectBuyCarbonara .fullPageContent, #CompanyCrew .fullPageContent, #CompanyDistributors .fullPageContent {width: 580px;} #LTRReviews .fullPageContent, #ReviewsMedia .fullPageContent, #ReviewsRiders .fullPageContent {width: 480px;} .FPStyle #TopMenu, .BuyStyle #TopMenu, .PressStyle #TopMenu {padding-top: 0px} #Logo {margin-left: 0px;} #SocialMenu ul {margin-top: 0px; top: -3px;} #TopMenu ul {margin-right: 0px; margin-top: 14px;} #TopMenu ul li {font-size: 1.1em;} #TopMenu ul li:last-child a {padding-right: 0px;} #TopMenu ul li.On {padding-top: 9px;} #SubMenuWrap {top: 50px;} #SubMenu ul {margin-right: 0px;} #SubMenu ul li {font-size: 1em; padding-bottom: 6px;} #SubMenu ul li a {padding: 8px 10px;} #SubMenu ul li:last-child a {padding-right: 0px;} #ProductMenu .productMenuItem {width: 165px; padding: 20px 12px;} #ProductMenu .productMenuItem .img {margin-left: 0px;} #ProductMenu .productMenuItem h2 { font-size: 1.1em; } #ProductMenu .productMenuItem p { font-size: 1em; padding-left: 50px; } #ProductMenu .productMenuItem p a {padding-bottom: 5px;} /* FP */ #FillLaufCarbonara .fullPageContent {top: 100px;} #FillLaufTrBoost .fullPageContent {top: 100px} #FillAdventure .fullPageContent {width:auto; top: 100px} #FillSoren .fullPageContent { width: auto; top: 100px} #FillLaufCarbonara h2, #FillLaufTrBoost h2, #FillAdventure h2, #FillSoren h2 {font-size: 2.1em; } #FillLaufCarbonara h3, #FillLaufTrBoost h3, #FillAdventure h3, #FillSoren h3 {font-size: 1.3em; } #FillLaufCarbonara p, #FillLaufTrBoost p, #FillAdventure p, #FillSoren p {font-size: 1.1em; } #FpFork {left: 0px; width: 300px;} #ParallaxSpecs {display: none;} .FPStyle .fullPage, .FPStyle .Content {min-height: 400px} .screenDirection {margin-top: 90px;} #LTRSpecs .fullPageContent {top: 100px; width: 480px;} #LTRSpecs dt, #LTRSpecs dd {font-size: 1.1em; line-height: 1.3em; padding: 4px 0px} #LTRColors .fullPageContent {top: 40px; left: 0; width: 500px;} #LTRiFrame360 {width: 300px; margin-left: 10px;} #LTRiFrame360 iframe {width: 300px;} #LTRColorPicker {margin-left: -300px;} #RipMe360 {top: 30px; left: 0px;} .BuyLeft, .BuyRight {margin-left: 0px; width: 100%;} .LaufLoveStyle .fullPageContent {left: 0px;} .youtubeVideo {margin-left: 130px; margin-top: 0px;} #CompanyCrew .fullPageContent {left: 0px;} .empCard { margin-right: 10px;} #CompanyStory .shortPageContent{left: 0px; width: 520px;} #CompanyFaq .fullPageContent{left: 0px; } #CompanyDistributors img {max-width: 580px;} .distributorWrap {top: 270px;} .distributor {margin-right: 10px; width: auto; padding: 5px; font-size: .9em;} .distributor:last-child {padding-right: 0px; margin-right: 0px; } #PressOverview.fullPage {min-height: 1100px;} #CompanyCrew.fullPage {min-height: 1000px;} #CompanyStory.fullPage {min-height: 1000px;} #CompanyFaq.fullPage {min-height: 1200px;} #CompanyDistributors img {width: 280px;} #CompanyDistributors.fullPage {min-height: 2500px;} #CompanyContact .shortPageContent {width: 480px; left: 0px} .LaufPressPackage {margin-right: 20px;} /* ListWrapperMenu */ ul.listWrapperMenu { height: 32px;} ul.listWrapperMenu li {font-size: 1em; padding: 6px 8px 7px 8px; margin: 2px; } } @media only screen and (max-width : 580px) { /* Style Version D : LargeMobileLandscape */ html, body {font-size: 14px;} #basket {display: none;} #TopMenu, #SubMenu, #SocialMenu, #ProductMenu, #LogoWrap, .Content, #LTRFeatures .fullPageContent, #LTRGallery .fullPageContent, #DirectBuy .fullPageContent, #DirectBuyCarbonara .fullPageContent, #CompanyCrew .fullPageContent, #CompanyDistributors .fullPageContent, #LTRSpecs .fullPageContent {width: 100%;} #LTRReviews .fullPageContent, #ReviewsMedia .fullPageContent, #ReviewsRiders .fullPageContent {width: 100%;} #TopMenu, #SubMenu, #ProductMenu {display: none; } #SocialMenu {position: absolute; top: 5px; right: 50px;} #MobileMenu {display: block; width: 100%; margin: 0px auto; position: relative;} #MobileMenuTrigger {position: absolute; top: 10px; right: 15px; cursor: pointer;} #MobileMenuContent {position: absolute; top: 41px; margin: 0px; padding: 0px; width: 100%;} #MobileMenuContent li { border-bottom: 1px solid #fff; font-weight: bold; background: #d00700; text-align: left; padding: 5px 13px;} #MobileMenuContent li a {color: #fff; display: block; font-size: 1.1em; line-height: 1.3em;} #MobileMenuContent li.On { background: #fff;} #MobileMenuContent li.On a {color: #d00700;} #MobileMenuContent li ul { display: block;} #MobileMenuContent li ul li {display: inline-block; background: transparent !important; border-bottom: none; font-size: .9em; padding: 3px 5px 3px 0px; font-weight: normal;} #MobileMenuContent li ul li a {color: #fff;} #Logo {margin-top: 0px; top: 5px; margin-left: 10px;width: 45px; height: 30px; background-position: -100px -60px} #TopWrap, .FPStyle #TopWrap, .BuyStyle #TopWrap, .PressStyle #TopWrap {height: 40px;} .FPStyle #basket {top: 60px;} #SubMenu ul li a {padding: 6px 7px;} #TopMenu ul li a {padding: 6px 7px; font-weight: normal;} #TopMenu ul li.On a {font-weight: bold;} #ProductMenu {height: 180px;} #ProductMenu .productMenuItem {width: 130px; padding: 10px 6px;} #ProductMenu .productMenuItem .img {display: none;} #ProductMenu .productMenuItem h2 { font-size: 1.1em; } #ProductMenu .productMenuItem p { font-size: 1em; padding-left: 0px; } #ProductMenu .productMenuItem p a {padding-bottom: 5px;} /* FP */ #FillLaufCarbonara .fullPageContent, #FillLaufTrBoost .fullPageContent, #FillAdventure .fullPageContent, #FillSoren .fullPageContent { top: 60px; padding: 15px 20px; margin: 0px 10px;} #FillLaufCarbonara h2, #FillLaufTrBoost h2, #FillAdventure h2, #FillSoren h2 {font-size: 2em;} #FillLaufCarbonara p:last-child, #FillLaufTrBoost p:last-child, #FillAdventure p:last-child, #FillSoren p:last-child {margin-top: 20px;} a.FPStyleBtn {margin-right: 12px;} #FpFork {display: none;} #LTRIntro .fullPageContent, #CarbonaraIntro .fullPageContent, #LTRSpecs .fullPageContent, #LTRFeatures .fullPageContent, #LTRColors .fullPageContent, #LTRReviews .fullPageContent, #LTRGallery .fullPageContent, #GritIntro .fullPageContent {top: 60px; width: auto; left: 0; margin: 0 10px; padding: 15px 10px; } #LTRSpecs .fullPageContent { padding: 15px 0px;} .LTRStyle .fullPage, .LTRStyle .Content {min-height: 700px} #LTRIntro h1, #LTRBoostIntro h1, #CarbonaraIntro h1, #GritIntro h1 { font-size: 3em; margin-bottom: 6px;} #LTRIntro h2, #LTRBoostIntro h2, #CarbonaraIntro h2, #GritIntro h2 { font-size: 2.2em;} #LTRIntro p, #LTRBoostIntro p, #CarbonaraIntro p, #GritIntro p { font-size: 1.3em;} #LTRSpecs dt {width: 130px;} #LTRSpecs dd {margin-left: 140px;} #LTRFeatures {min-height: 1500px;} #LTRFeatures .fullPageContent {top: 40px;} #LTRFeatures dl {margin: 0px;} #LTRFeatures dl dd {margin-bottom: 20px;} #LTRFeatures img {float: right;position: relative;margin: 0px 0px 10px 10px;} #LTRiFrame360 {left: 180px;} #LTRiFrame360, #LTRiFrame360 iframe {width: 260px;} #LTRColorPicker {width: 170px; margin-left: -220px; } ul.ColorPicker li {font-size: 1em;} #RipMe360 {left: 40px;} #LTRGallery img {width: 150px;} #DirectBuy .fullPageContent, #DirectBuyCarbonara .fullPageContent {top: 70px;} #Buy360Color { width: 170px; padding: 0px;} #RipMe360Buy {right: 20px;} #iFrame360Buy {margin-left: 180px; width: 280px;} #iFrame360Buy iframe {width: 280px;} #PressOverview .fullPageContent {margin-left: 0px; width: 450px; top: 70px;} .LaufPressPackage {width: 200px; margin: 10px;} .LaufPressPackage img {width: 200px} .youtubeVideo {margin: 0 0 20px 0;} .youtubeVideo iframe {width: 100%;} #CompanyContact .shortPageContent {width: auto; left: 0px; top: 0;} .empCard {margin: 20px 20px 10px 20px;} .empCard img {display: none;} #OnlineStore .shortPageContent, #CompanyStory .shortPageContent {width: auto; left: 0px; top: 0px; margin: 0 10px} #CompanyStory.fullPage , #CompanyStory .Content {min-height: 950px;} #CompanyFaq .fullPageContent {left: 0px; top: 100px;} #CompanyFaq.fullPage , #CompanyFaq .Content {min-height: 1500px;} #WorldMap {display: none;} .distributorWrap table tr { clear: both; float: none; border-bottom: 1px solid #eee; margin-bottom: 20px;} .distributorWrap table tr th {display: none;} .distributorWrap table tr td {float: left; clear: both; border: none; padding: 2px 10px;} .distributorWrap table tr td:first-child {margin-top: 10px; font-weight: bold;} .distributorWrap table tr td:last-child {margin-bottom: 10px;} .shortPage {padding-top: 70px;} .shortPageContent {margin: 0 10px;} /* ListWrapperMenu */ ul.listWrapperMenu { height: 30px;} ul.listWrapperMenu li {font-size: 1em; padding: 6px 6px 7px 6px; margin: 0px 2px; } } @media only screen and (max-width : 450px) { #LTRColorPicker {width: 50px; font-size: 0px; margin-left: -160px; } #LTRColors.fullPage {min-height: 670px;} #LTRColors .fullPageContent {min-width: 320px;} #LTRiFrame360 {left: 80px;} #LTRiFrame360, #LTRiFrame360 iframe {width: 225px;} .reviewImg img {width: 90%;} .slider button {display: none;} } /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */