/*
*/
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html { margin:0; padding:0; width:100%; }
body { position:relative; margin:0; padding:0; width:100%; font-family:'Noto Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family:'Rokkitt', serif; margin-bottom:20px; }
h1 { font-size:60px; }
h2 { font-size:48px; }
h3 { font-size:36px; }
h4 { font-size:24px; }
h5 { font-size:18px; }
h6 { font-size:14px; }
p { line-height:200%; }
blockquote { margin:0; padding:40px 50px; border-radius:10px; font-size:26px; background-color:#ccc; }
blockquote.floatright { float:right; margin:0 0 20px 30px; width:40%; }
blockquote div.author { margin:10px 0 0 0; text-align:right; font-style:italic; font-size:20px; }
img { border:0; }
/*
Header
-------------------------------------------------------------------------------- */
header { position:fixed; top:0; width:100%; display:block; padding:0; margin:0; z-index:10; }
div.contact { width:100%; height:45px; background:url(/_images/menu-repeater.png) repeat; }
div.contact ul { list-style:none; height:45px; margin:0; padding:0; text-align:right; }
div.contact li { display:inline-block; height:45px; margin:0 0 0 10px; padding:0; }
div.contact li,
div.contact li a { display:inline-block; font-family:Arial, sans-serif; font-size:12px; color:#808080; text-decoration:none; }
div.contact li.textonly,
div.contact li a { height:30px; padding:15px 10px 0; }
div.contact li:hover,
div.contact li a:hover { color:#fff; }
div.contact li.cart { margin-right:430px; width:150px; background:url(/cart/cart_tab.png) no-repeat left bottom; text-align:left; }
div.contact li.cart a { margin-left:26px; color:#000; }
div.contact li.twitter { position:relative; }
div.contact li.twitter a { position:relative; top:5px; display:block; padding:0; }
div.logo img.logo-icon { position:absolute; left:0px; top:-19px; }
div.logo img.logo-text { position:absolute; left:150px; top:30px; }
div.menu { width:100%; height:105px; background:url(/_images/menu-backdrop.jpg) center top no-repeat; box-shadow:0px 0px 15px black; }
div.menu div.repeater { width:100%; height:105px; background:center 110px no-repeat; }
div.menu nav { float:right; width:550px; height:105px; margin:0; padding:0; text-align:right; }
div.menu nav ul { position:absolute; top:0; right:0; display:block; width:435px; height:105px; list-style:none; margin:0; padding:0; }
div.menu nav li { display:block; float:left; width:145px; height:105px; margin:0; padding:0; }
div.menu nav a { display:block; width:145px; height:60px; padding:45px 0 0 0; margin:0; color:#fff; font-family:'Rokkitt', serif; font-size:24px; text-transform:uppercase; text-decoration:none; text-align:center; text-shadow:0px 0px 5px black; }
div.menu nav a:hover { background-color:rgba(204,0,0,0.5); }
div.menu nav a.hover { background-color:rgba(0,0,0,0.65); }
/*
Footer
-------------------------------------------------------------------------------- */
footer { position:relative; display:block; margin:0; padding:10px 0 30px; color:#ddd; background-color:#444;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #444), color-stop(1, #111) );
background:-moz-linear-gradient( center top, #444 0%, #111 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#111');
}
footer a { color:#999; text-decoration:none; }
footer a:hover { color:#fff; }
footer ul { list-style:none; margin:20px 0 0 0; padding:0; }
footer li { margin:0; padding:0; }
footer li a { display:block; margin:0; padding:10px; border-radius:5px; }
footer li a:hover { background-color:#000; color:#fff; }
footer .mono_logos { float:left; padding:15px 0 0 0; }
footer .map_icon { float:right; }
footer .switchclick { display:block; float:right; width:200px; height:34px; margin:0 40px 0 0; background:url(/_images/switchclick.png) no-repeat left top; text-indent:-9999px; opacity:0.45; }
footer .switchclick:hover { opacity:1; }
footer .copyright { display:inline-block; width:30%; color:#999; font-size:12px; padding:0 0 0 10px; margin:0 3% 0 0; }
footer .copyright img { vertical-align:-5px; margin-right:7px; }
footer .facebook { display:inline-block; color:#999; font-size:12px; }
footer .facebook img { vertical-align:-8px; margin-right:7px; }
footer .twitter { display:inline-block; color:#999; font-size:12px; }
footer .twitter img { vertical-align:-12px; margin-right:9px; }
/*
Flavours
-------------------------------------------------------------------------------- */
.flavours { position:relative; list-style:none; margin:0; padding:20px 0; text-align:center; }
.flavours li { position:relative; display:inline-block; width:50px; height:49px; padding:5px; margin:0; }
.flavours li img { position:absolute; width:50px; height:49px; top:5px; left:5px; }
.flavours li img.color { display:none; opacity:0; }
.flavours li.selected img.mono { display:none; opacity:0; }
.flavours li.selected img.color { display:block; opacity:1; width:100px; height:98px; top:-19px; left:-20px; z-index:10; }
.flavours div.flavour_label { position:absolute; display:none; opacity:0; top:55px; left:-120px; width:300px; padding:4px 0 1px 0; text-align:center; font-size:20px; text-transform:uppercase; font-family:'Rokkitt', serif; text-shadow:0px 0px 5px white; background:url(/_images/flavours/label_wipe.png) no-repeat center -285px; }
/* .flavours li:nth-child(12) div.flavour_label { display:block; } */
.wordmark { height:110px; padding-top:20px; text-align:center; }
/*
Feature
-------------------------------------------------------------------------------- */
div.feature { position:relative; display:block; margin:145px 0 0 0; padding:0; width:100%; height:900px; min-height:900px; background:no-repeat center top; z-index:1; }
div.feature div.shade { width:100%; height:900px; background-image:url(/_images/wallpapers/overlay.png); }
/*
Zippers
-------------------------------------------------------------------------------- */
.feature .zipper { position:absolute; display:block; bottom:0; left:0; width:100%; height:6px; background:url(/_images/zipper-feature.png) repeat-x left top; }
article .zipper { position:absolute; display:block; bottom:-5px; left:0; width:100%; height:5px; background:url(/_images/zipper-content.png) repeat-x left bottom; }
footer .zipper { position:absolute; display:block; top:-6px; left:0; width:100%; height:6px; background:url(/_images/zipper-footer.png) repeat-x left bottom; }
/*
Content
-------------------------------------------------------------------------------- */
article { position:relative; margin:0; padding:0 0 50px 0; background-color:#eee; min-width:980px; }
article .primary { position:relative; margin:0; padding:0; background-color:#ccc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #bbb) );
background:-moz-linear-gradient( center top, #eee 5%, #bbb 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#bbb');
}
article .primary h1 { padding:30px 0 25px; margin:0; text-align:center; }
article .fright { float:right; margin:20px 0 20px 20px; }
/*
Form Controls
-------------------------------------------------------------------------------- */
fieldset { position:relative; display:block; border:0; margin:0 0 15px 0; padding:0 0 0 75px; clear:both; background:url('/_images/label_background.png') no-repeat 0 0; }
legend { position:absolute; width:80px; height:57px; top:0px; left:-20px; text-align:right; margin:0; padding:4px 10px 0 0; font-size:12px; color:#fff; }
label { float:left; cursor:pointer; padding:4px 10px 3px 5px; margin:0px 5px 5px 0px; background-color:#f00;
font-size:12px;
color:#990000;
box-shadow: 0px 0px 3px 1px black;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #f3f3f3), color-stop(1, #7a7b7d) ); /* 333/000 */
background:-moz-linear-gradient( center top, #333 5%, #000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#000');
border-radius:2px;
min-width:84px;
}
fieldset.size label { min-width:40px; }
label span { display:inline-block; width:10px; height:10px; margin:1px 0 0 5px; vertical-align:text-top; background-color:#000; border:1px solid #fff; }
label:last-child { margin-right:0; }
label.selected { color:#fff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #f20129), color-stop(1, #000) );
background:-moz-linear-gradient( center top, #f20129 5%, #000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f33', endColorstr='#000');
}
label input { margin:0 6px 0 0; padding:0; vertical-align:baseline; }
input.addToCart { display:block; width:288px; height:58px; margin:0 auto; border:0; text-align:left; text-indent:22px; font-size:22px; letter-spacing:-1px; color:#fff; background-color:transparent; background:url(/_images/canadia-addtocart.png) no-repeat left top; cursor:pointer; }
.apparel input.addToCart { float:left; clear:left; margin:10px 0 0 100px; }
.flags input.addToCart { position:absolute; top:615px; right:0px; }
/*
Patches
-------------------------------------------------------------------------------- */
.patches { text-align:center; }
.patches .preview { margin:20px auto 0; width:500px; height:254px; background:no-repeat center center; }
.patches form { padding:20px 0; }
.patches div.options { padding:0 0 30px 0; }
.patches div.options label { float:none; }
.patchinfo { color:#fff; }
.patches .disclosure-wrap { position:absolute; width:500px; left:240px; bottom:-80px; }
.patches dl.disclosure.open { background-color:rgba(0, 0, 0, 0.8); padding-bottom:40px; }
/*
Flags
-------------------------------------------------------------------------------- */
.flags {}
.flags .disclosure-wrap { position:absolute; bottom:-600px; right:-40px; width:380px; }
.flags .disclosure { padding-bottom:40px; }
.freeChoice { position:absolute; top:680px; right:0px; }
.freeChoice .note { text-align:center; color:white; text-shadow:0px 0px 5px black; }
.freeChoice input { vertical-align:middle; }
.freeChoice img { vertical-align:middle; }
.freeChoice label { float:none; cursor:pointer; display:inline; width:auto; height:auto; padding:0px; margin:0px; background-color:transparent; box-shadow:none; background:transparent; border-radius:0px; min-width:0; }
/*
Apparel
-------------------------------------------------------------------------------- */
/* div.configuration { position:absolute; width:345px; right:0px; top:10px; } */
/* div.sizechart { display:none; position:absolute; top:125px; right:35px; width:85px; height:60px; } */
label.white span { background-color:#fff; border:1px solid #000; }
label.grey span { background-color:#666; }
label.red span { background-color:#900; }
label.blue span { background-color:#559; }
label.green span { background-color:#0e851d; }
label.gold span { background-color:#e1a50f; }
.apparel {}
.apparel .configuration { position:relative; float:left; padding-top:20px; width:500px; }
.apparel .preview { position:relative; float:right; width:343px; height:600px; margin:0 30px 0 0; }
.apparel .preview .left,
.apparel .preview .right { position:absolute; top:0; left:0; width:343px; height:600px; }
.apparel .preview .left li,
.apparel .preview .right li { position:absolute; top:0; left:0; display:block; width:343px; height:600px; }
.apparel .preview .right { opacity:0; } /* left is default */
.apparel .preview .patch { position:absolute; top:99px; left:115px; width:138px; height:86px; list-style:none; }
.apparel .preview .patch li { opacity:0; position:absolute; top:0; left:0; width:138px; height:86px; margin:0; padding:0; background-repeat:no-repeat; background-position:0px 0px; }
div.roots-logo { position:absolute; top:18px; right:0; width:187px; height:115px; background:url(/apparel/roots-logo.png) no-repeat left top; }
a.size-chart-link { position:relative; display:block; width:100%; height:100%; text-indent:-9999px; z-index:1; }
div.description { color:#fff; padding:15px 20px 0 20px; }
.apparel div.details { position:relative; float:left; width:480px; }
.apparel div.details > ul { position:relative; list-style:none; margin:0; padding:0; }
.apparel div.details > ul > li { position:relative; top:0; display:block; margin:0; padding:0; color:#fff; }
.apparel div.details > ul > li.fz { display:none; }
/*
Home
-------------------------------------------------------------------------------- */
/*
.slider_prev,
.slider_next { position:absolute; top:0; width:200px; height:900px; opacity:0; background-color:rgba(0, 0, 0, 0.2); background-repeat:no-repeat; background-position:center 50px; background-size:50px; }
.slider_prev { left:0; background-image:url('/home/slider-prev.png'); }
.slider_next { right:0; background-image:url('/home/slider-next.png'); }
.slider_prev:hover,
.slider_next:hover { opacity:1; }
*/
/* body.page-home div.feature { height:720px; min-height:720px; } */
/* body.page-home div.shade { height:720px; } */
/* background-repeat:no-repeat !important; background-size:contain !important; background-position:center center !important; */
#lightSlider { width:100%; list-style:none; margin:0; padding:0; }
#lightSlider li { width:100%; margin:0; padding:0; }
.slide_link { display:block; width:100%; text-decoration:none; }
.slide_link img { width:100%; height:auto; }
.slide_message { width:50%; margin:400px auto 0; padding:20px 50px; background-color:rgba(0, 0, 0, 0.75); color:#fff; font-size:24px; box-shadow:0px 0px 5px #000; text-align:center; border-radius:50px; }
.slide_message { background-color:#fff; color:#000; box-shadow:inset 0px 0px 21px black; background-image:url('/_images/wallpapers/overlay.png'); }
.slide_message p { margin:20px 0; line-height:1.2; }
.home .lines { list-style:none; margin:40px 0; padding:0; }
.home .lines li { float:left; display:block; width:440px; height:440px; padding:0; margin:10px 20px 20px; text-align:center; background:no-repeat center center; border-radius:20px; }
.home .lines li a { display:block; width:440px; height:280px; height:280px; padding:160px 0 0 0; }
.home .lines li.heritage { background-image:url(/home/line-photo-heritage.jpg); }
.home .lines li.vintage { background-image:url(/home/line-photo-vintage.jpg); }
.home .lines li.franco { background-image:url(/home/line-photo-franco.jpg); }
.home .lines li.civic { background-image:url(/home/line-photo-civic.jpg); }
/*
Contact
-------------------------------------------------------------------------------- */
.contactus {}
.contactus .details { margin:0px auto; width:600px; text-align:center; font-size:24px; padding:50px 0; }
.contactus .infoAt { display:block; text-align:center; padding:150px 0; font-size:72px; font-weight:bold; color:#fff; text-shadow:0 0 50px #000; text-decoration:none; }
/*
Golf
-------------------------------------------------------------------------------- */
/*
centered JPG version...
.golffeature .showcase { position:relative; width:750px; margin:20px auto 0px; text-align:center; }
.golffeature .showcase > img { position:relative; border-radius:20px; z-index:1; }
.golffeature .showcase h2 { margin:20px 0; }
.golffeature .details { position:relative; top:-30px; margin:0px auto; width:710px; padding-top:40px; text-align:center; }
*/
.golf_feature { position:relative; padding:1px 0 0 0; text-align:center; }
.golf_feature h1 { margin:40px 0; }
.golf_feature img { margin:50px 0; max-width:100%; height:auto; }
.golf_feature .details { margin-top:20px; background-color:rgba(0, 0, 0, 0.45); }
.golf { }
.golf .showcase { position:relative; width:750px; margin:40px auto 150px; text-align:center; }
.golf .showcase:last-child { margin-bottom:50px; }
.golf .showcase .related { position:absolute; top:80px; right:20px; width:140px; text-align:center; }
.golf .showcase .related img { margin:0 0 10px; }
.golf .showcase > img { border-radius:20px; }
.golf .showcase h2 { margin:0; }
.golf .showcase ul { position:absolute; width:800px; left:-25px; bottom:-65px; list-style:none; margin:0; padding:0; }
.golf .showcase li { display:inline-block; margin:0 5px; padding:0; }
.golf .showcase li img { box-shadow:0px 0px 2px black; }
.golf > h2 { text-align:center; }
.golf .details { float:right; margin:10px 0 20px 30px; }
/*
Chairs
-------------------------------------------------------------------------------- */
.chairs { padding:80px 0 0 0; text-align:center; }
.fiftyfifty {}
.left { float:left; width:48%; padding:0 1%; }
.right { float:right; width:48%; padding:0 1%; }
.chairs .photo { min-height:360px; }
input.buyNow { display:block; width:288px; height:58px; margin:0 auto; border:0; text-align:left; text-indent:22px; font-size:22px; letter-spacing:-1px; color:#fff; background-color:transparent; background:url(/_images/canadia-buynow.png) no-repeat left top; cursor:pointer; border:0; text-decoration:none; }
.chairs input.buyNow { margin:30px auto; }
/*
Disclosure
-------------------------------------------------------------------------------- */
dl.disclosure { color:#fff; border-radius:15px; text-align:left; transition:1s ease-in-out; }
dl.disclosure.open { background-color:rgba(0, 0, 0, 0.5); }
dl.disclosure dt { padding:20px; text-align:center; cursor:pointer; }
dl.disclosure dd { margin:0; padding:0 40px; max-height:0; overflow-y:hidden; transition:1s ease-in-out; }
dl.disclosure.open dd { max-height:520px; }
dl.disclosure h2 { margin:0 0 20px; text-align:center; }
dl.disclosure ul { list-style:circle; }
dl.disclosure li {}
/*
Complete
-------------------------------------------------------------------------------- */
.complete { color:#fff; text-align:center; font-size:48px; padding-top:100px; text-shadow: 0px 0px 15px black; }
.complete p { margin-bottom:50px; }
/*
Globals
-------------------------------------------------------------------------------- */
.relative { position:relative; }
.wrap { position:relative; width:980px; margin:0px auto; }
.nobr { white-space:nowrap; }
ul.translate { list-style:none; margin:40px 0 0 0; padding:0; text-align:right; }
ul.translate li { display:inline-block; margin:0; padding:0; }
ul.translate a { padding:10px 20px; border-radius:10px; color:#fff; background-color:#000; background-color:rgba(0,0,153,0.65); text-decoration:none; }
.language-hide { display:none; }
.details { padding:20px; border-radius:10px; color:#fff; background-color:#000; background-color:rgba(0,0,0,0.65); }
.details h2 { font-size:36px; margin:0 0 10px 0; }
.details ul { list-style:circle; }
.notice { margin:0; padding:20px 30px; border-radius:10px; text-align:center; background-color:#c00; color:#fff; }
.fine { font-size:11px; }
.fleft { float:left; }
.fright { float:right; }
.lefthalf { float:left; width:48%; margin-right:4%; }
.righthalf { float:left; width:48%; }
.onethird { float:left; width:30%; margin-right:4%; }
.lastthird { float:left; width:32%; }
.lasttwothirds { float:left; width:62%; margin-right:4%; }
.breaker { clear:both; }
.obj, .objp, .objr { text-align:center; }
.obj, .objp, .objr img { margin:40px 0; }
.objp img { padding:10px; }
.objr img { border-radius:20px; }
.hide { display:none; }
/*
@media only screen and (min-height: 760px) {
header { position:absolute; }
}
*/
ul.slidecontroller { position:absolute; top:0; left:0; width:500px; list-style:none; margin:0; padding:0; }
ul.slidecontroller li { display:block; margin:0; padding:0; width:33.3%; float:left; height:20px; cursor:pointer; }
ul.slidecontroller li:nth-child(1) { border-top-left-radius:10px; }
ul.slidecontroller li:nth-child(3) { border-top-right-radius:10px; }
ul.slidecontroller li:nth-child(1) { background-color:#222; }
ul.slidecontroller li:nth-child(2) { background-color:#333; }
ul.slidecontroller li:nth-child(3) { background-color:#444; }
ul.slidecontroller li:nth-child(4) { background-color:#555; }
ul.slidecontroller li:nth-child(5) { background-color:#666; }
ul.slidecontroller li.selected { background-color:rgba(255,0,0,0.50); }
ul.slides { position:relative; min-height:670px; list-style:none; margin:10px 0 0 0; padding:0; }
ul.slides li { position:absolute; width:100%; display:none; opacity:1; margin:0; padding:0; }
ul.slides li:first-child { display:block; opacity:1; }