/* * Primary Content and Structure CSS * * Author: Jeremy Bechtold (reflowed) */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> FONTS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Fjalla One is condensed bold sans serif Use 400 weight in regular only Alegreya Sans is regular sans serif Use 300/500 weight Alegreya Sans SC is small caps sans serif Use 100/400/700 weight */ .cond,h1 /* CONDENSED */ { font-family: "Fjalla One","Arial Condensed",Arial,sans-serif; font-style: normal; } .sans,body,form,input,textarea,select,p /* SANS REG */ { font-family: "Alegreya Sans",Trebuchet,"Lucida Grand","Lucida Sans",Arial,sans-serif; font-style: normal; font-weight: 300; } .sanssc,.sc,h2,h3,h4,nav a,footer,footer *,.dotsub dd.hx,.dotsub a,#prel li p,#pcats a,#psubs a,#plist a,.pnum,#bpdir p /* SANS SC */ { font-family: "Alegreya Sans SC",Trebuchet,"Lucida Grand","Lucida Sans",Arial,sans-serif; font-style: normal; font-weight: 100; letter-spacing: 1px; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> GLOBALS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ * { margin: 0; padding: 0; } body { text-align: center; color: #00ff44; font-size: 17px; font-weight: 400; line-height: 1.35em; } form,input,select,textarea { margin: 0px; padding: 0px; } a,img,table,td,th,fieldset { border: 0; } div,ul,ol,dl,li { width: auto; } li { list-style: none; } th { font-weight: bold; } td { vertical-align: top; } br { line-height: inherit; } p { font-weight: normal; color: #fff; } p * { font-size: 100%; } a,a:active,a:visited { text-decoration: none; color: #f60; } a:hover { text-decoration: underline; } small,.small { font-size: 80% !important; } em,i,.em,.i { font-style: italic; font-weight: normal; } strong,b,.strong,.b { font-style: normal; font-weight: 500; } strong em,strong i,strong .em,strong .i,.strong em,.strong i,.strong .em,.strong .i, b em,b i,b .em,b .i,.b em,.b i,.b .em,.b .i, em strong,em b,em .strong,em .b,.em strong,.em b,.em .strong,.em .b, i strong,i b,i .strong,i .b,.i strong,.i b,.i .strong,.i .b { font-style: italic; font-weight: 500; } .nowrap { white-space: nowrap; } .inline { display: inline; } .block { display: block; } .lcase { text-transform: lowercase; } .ucase { text-transform: uppercase; } .capcase { text-transform: capitalize; } .clearl { clear: left; } .clearr { clear: right; } .clearb { clear: both; } .clearself,ul,dl,div { overflow: auto; } .pp_pic_holder div { overflow: visible; } /* fixes scrollbars from prettyphoto with rule on line above */ .nolink { cursor: default; } .fll { float: left; } .flr { float: right; } .attn { color: #f39 !important; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; } /* HTML5 fix for IE */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> CONTAINERS & PRIMARIES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ body { background: #000 url(/assets/images/bg-body-beading.jpg) repeat-y center top; } #main { text-align: left; } .wrap { position: relative; margin: 0 auto; width: 990px; padding-bottom: 200px; } /* overflow:auto above fixes any necessary floats within */ /* JS-created wrappers to hold extra bg images -- see footer include */ .bghead { background: url(/assets/images/bg-header-basketball.jpg) no-repeat center top; } /* section-specific images set at bottom of doc */ .bgfoot { background: url(/assets/images/bg-footer-bbal-ball.png) no-repeat center bottom; } /* ditto ^^ */ .bgwrap1 { background: url(/assets/images/bg-diagrams-top-l.png) no-repeat 8% 150px; } .bgwrap2 { background: url(/assets/images/bg-diagrams-top-r.png) no-repeat 90% 125px; } .bgwrap3 { background: url(/assets/images/bg-diagrams-bot-l.png) no-repeat 10% 600px; } .bgwrap4 { background: url(/assets/images/bg-diagrams-bot-r.png) no-repeat 94% 750px; position: relative; } header { position: relative; margin-top: 15px; } #logo { position: absolute; top: 0; left: 0px; padding: 0; line-height: 0; } #logo img { position: absolute; clip: rect(0px,236px,100px,0px); } nav { position: relative; margin-left: 270px; text-align: left; height: 150px; } #content { position: relative; padding: 10px 10px 50px 10px; background: #000; background: rgba(0,0,0,0.5); } footer { position: absolute; width: 100%; bottom: 10px; padding: 10px 0; text-align: center; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> MAIN NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ nav ul,nav li { margin: 0; list-style: none; list-style-image: none; } nav ul { position: absolute; width: 720px; margin: 0; overflow: visible; } nav ul li { display: block; position: relative; float: left;/* width: 145px; */ padding: 0; } nav ul li a { display: block; text-align: center; line-height: 110px; height: 133px; width: 145px; color: #f60; /* font-weight: 400; */ } nav ul li a:hover { color: #fff; text-decoration: none; } nav ul ul { display: none; position: absolute; z-index: 101; left: -30px; top: 120px; width: 197px; padding: 4px 5px 5px 5px; } nav ul ul li a { line-height: 20px; padding: 6px 4px; height: auto; margin-top: 1px; width: 189px; } nav ul li:hover ul { display: block; } nav ul li:hover a { color: #fff; } nav ul li:hover ul a { background: #222; background-image: none; } nav ul li li a:hover { background: #000; color: #f60; font-weight: 400; } /* --- NAV fixes top and left in browsers other than IE that position to the top right of the parent li,not bottom left --- */ /* nav li > ul { top: auto; left: auto; } */ nav a:visited { color: #f60; } nav a.nope { color: #f60; cursor: default; } nav a.nope:hover { color: #fff; cursor: default; } /* --- NAV imagery and alignment/size assignments --- */ nav ul { background: url(/assets/images/bg-nav-main-shorter.png) no-repeat left top; } nav ul li:hover a { background: url(/assets/images/bg-nav-hover.png) no-repeat center top; } nav ul ul { background-image: none; background: #000; } nav li { margin-left: 5px; } nav li+li { margin-left: 40px; } nav li+li+li { margin-left: 41px; } nav li+li+li+li { margin-left: 40px; } nav li ul li,nav li ul li+li { margin-left: 0; } nav li a { font-size: 25px; letter-spacing: 1.75px; text-decoration: none; } nav li li a { font-size: 16px; } /* --- TWO COL TWEAKS --- */ nav div { position: absolute; display: none; z-index: 101; top: 120px; left: -140px; padding: 4px 5px 5px 5px; width: 414px; height: auto; } nav div ul { position: relative; top: 0; left: 0; float: left; display: block; } nav li:hover div { display: block; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> FOOTER / NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ footer /* basics above */ { color: #fff; font-size: 16px; background: #222; background: rgba(0,0,0,.45); } footer address { color: #fff; margin-bottom: 20px; } footer li { display: inline-block; } footer a,footer a:link, footer a:visited { color: #fff; text-decoration: none; } footer a:hover { color: #f60; } footer p#copyright { position: absolute; bottom: 10px; right: 10px; font-size: 12px; line-height: 12px; font-weight: 100; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> CONTENT TEXT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ h1,h2,h3,h4,h5,h6 { line-height: 1.15em; clear: both; text-align: left; color: #ff8800; } /* <--- default color to force re-assignment */ h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { font-size: 100%; } h1,.h1 { font-size: 42px; margin: 25px 0 35px 0; color: #fff; text-align: center; line-height: 1.25em; } h2,.h2 { font-size: 32px; margin: 0 0 15px 0; color: #f60; text-transform: none; font-weight: 400; line-height: 1.05em; } h3,.h3 { font-size: 20px; margin: 25px 0 5px 0; color: #f60; text-transform: uppercase; font-weight: 400; } h4,.h4 { font-size: 16px; margin: 25px 0 0 0; color: #f60; text-transform: uppercase; font-weight: 700; } h5,.h5 { font-size: 14px; margin: 15px 0 0 0; color: #f60; text-transform: uppercase; font-weight: 700; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> FLOATS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .left25 { float: left; width: 25%; } .left30 { float: left; width: 30%; } .left33 { float: left; width: 33%; } .left35 { float: left; width: 35%; } .left40 { float: left; width: 40%; } .left49 { float: left; width: 49%; } .left50 { float: left; width: 50%; } .left60 { float: left; width: 60%; } .left65 { float: left; width: 65%; } .left70 { float: left; width: 70%; } .left75 { float: left; width: 75%; } .right25 { float: right; width: 25%; } .right30 { float: right; width: 30%; } .right33 { float: right; width: 33%; } .right35 { float: right; width: 35%; } .right40 { float: right; width: 40%; } .right49 { float: right; width: 49%; } .right50 { float: right; width: 50%; } .right60 { float: right; width: 60%; } .right65 { float: right; width: 65%; } .right70 { float: right; width: 70%; } .right75 { float: right; width: 75%; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> PER PAGE CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* product detail */ /* #pimgs { background: #000; background: rgba(0,0,0,.5); } */ .pimglarge { overflow: hidden; background: #111; background: rgba(255,255,255,.08);/* background: rgba(0,0,0,.25);*/ padding: 15px 0; } .pimglarge img { margin: 0 auto; } .pimgthumb { overflow: hidden; background: #111; background: rgba(255,255,255,.08);/* background: rgba(0,0,0,.25);*/ width: 90%; margin: 0 auto; border: 1px solid #555; border-width: 0 1px; padding: 5px 0; } /* .pimgthumb div.slick-list { overflow: visible; } */ .pimgthumb div.slick-list div { padding: 11px; } /* .pimgthumb div.slick-track { overflow: visible; } */ /* #pdets { outline: 1px dotted #f00; } #pdets li { color: #fff; list-style: inside disc; } */ .desc { font-size: 18px; } .pfeats { margin: 20px 0; color: #fff; font-size: 16px; } .pfeats li { margin-bottom: 8px; list-style: none; } .pfeats strong { width: 6em; display: inline-block; color: #ccc; } .ytvid { position: relative; display: inline-block; margin: 25px 0; font-size: 0; line-height: 0; } .ytvid img { position: relative; } .ytvid img.play { position: absolute; z-index: 800; left: 50%; top: 16px; margin-left: -20px; /* margin-top: -20px; */ } .pfiles { font-size: 16px; position: relative; color: #ccc; } .pfiles dt { position: absolute; width: 5.99em; } .pfiles dd { color: #fff; float: left; margin-left: 6em; display: block; margin-bottom: 8px; width: 23.5em; } .pfiles dd a { display: inline-block; } .pfiles a[href=""] { color: #f39 !important; } /* highlights any links in the files dowload list without a proper file linked */ #prel { padding-top: 40px; } #prel ul { margin: 10px 0; overflow: auto; } #prel li { position: relative; width: 19.75%; height: 195px; display: inline-block; margin: 0; text-align: center; } #prel a { display: block; } #prel li p { position: absolute; bottom: 80px; left: 7px; width: 160px; background: #555; padding: 10px; display: none; font-weight: 100; border: 1px solid #222; } #prel li:hover p { display: block; } /* product cats/subcats & prod listing page */ #pcats,#psubs,#plist { margin: 50px; position: relative; } #pcats li,#psubs li,#plist dl,#plist ul li { margin: 10px; background: #333;/* background: rgba(255,255,255,.10); */ background: rgba(0,0,0,.45); text-align: center; } #pcats a,#psubs a { display: block; padding: 10px; color: #f60; font-size: 16px; line-height: 1.35em; } #pcats strong,#psubs a { display: block; font-size: 32px; font-weight: 100; } #pcats li:hover,#psubs li:hover,#plist dl:hover { background: rgba(0,0,0,.65); } #pcats li:hover a,#psubs li:hover a { color: #fff; } #plist,#plist a { color: #fff; display: block; position: relative; } #plist a:hover { color: #f60; } /* #plist dl { position: relative; min-height: 75px; padding: 10px; } .ptit { margin-left: 90px; text-align: left; font-size: 32px; line-height: .95em; } .pimg { position: absolute; top: 10px; left: 10px; } .pdls { position: absolute; top: 6px; right: 10px; width: 5.5em; } .pdls a { display: block; text-align: right; font-size: 16px; line-height: 20px; } */ #plist ul .pldl { position: relative; display: block; text-align: left; overflow: auto; } #plist ul .ptit { padding: 10px 100px 10px 95px; margin: 0; min-height: 75px; text-align: left; font-size: 32px; line-height: .95em; } #plist ul .ptit img { position: absolute; top: 10px; left: 10px; } #plist ul .pdls { position: absolute; top: 6px; right: 10px; width: 5.5em; } #plist ul .pdls a { display: block; text-align: right; font-size: 16px; line-height: 20px; } /* galleries */ /* #gals { outline: 1px dotted blue; } #gals ul { outline: 1px dotted #fff; } */ #gals li { margin-bottom: 20px; float: left; width: 20%; text-align: center; } #gals li:nth-child(5n+1) { clear: left; } #gals li a { display: block; text-align: center; } /* #gals li img { width: 90%; } */ /* #gals li em { display: block; font-style: normal; text-transform: uppercase; margin: 10px; text-align: center; } */ #ytembed { text-align: center; margin: 50px auto; } #galstxt { width: 80%; margin: 30px auto; } #galstxt p { margin-bottom: 1em; } /* about us */ .abfeature { padding: 10px; background: #f60; text-align: center; } .abfeature p { font-size: 14px; color: #000; text-align: left; } .abfeature img { margin: 35px auto 10px auto; } .abfeature a { color: #000; font-weight: 500; font-style: italic; } /* --- contact page and forms --- */ /* .contfeature { outline: 1px dotted red; } */ .cfeat { margin-top: 50px; padding: 10px 20px; background: #222; background: rgba(255,102,0,0.10); } .cfeat h2 { color: #fff; font-size: 18px; } .cfeat em { text-transform: capitalize; } .cfeat address { color: #fff; padding: 10px 0; font-style: normal; } /* #azform { outline: 1px dotted #fff; } */ #azform fieldset { margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #222; border-bottom-color: rgba(255, 255, 255, 0.15); } #azform li { position: relative; margin-top: 30px; height: 40px; overflow: visible; } #azform label { position: absolute; top: -17px; left: 5px; color: #fff; } #azform input, #azform select, #azform textarea { width: 90%; font-size: 18px; line-height: 18px; padding: 4px; border: 1px solid #000; background: #ddd; background: rgba(255,255,255,.45); } #azform li.wtext { height: 11.5em; } #azform li.wtext textarea { width: 95%; } #azform fieldset#fsub { border: 0; text-align: center; width: 80%; } #azform fieldset#fsub input { width: 25%; } /* #tcform { padding: 20px 0; } #tcform > p { color: #be1e2d; font-size: 16px; } form fieldset { margin: 40px 0; border-bottom: 1px solid #1c75bc; } form dl { position: relative; overflow: auto; } form dt,form label,.fnote { text-transform: uppercase; color: #036; } form dt { color: #1c75bc; border-bottom: 1px solid #1c75bc; margin-bottom: 30px; line-height: 100%; } form dd { height: 45px; position: relative; margin-bottom: 40px; } form dd input,form dd textarea { border: none; padding: 0 5px; background: #fff; color: #1c75bc; font-size: 16px; } form dd.left33 input { width: 90%; height: 45px; line-height: 45px; } form textarea { width: 90%; height: 6em; } .textarea { height: 7em; position: relative; } form label { position: absolute; top: -15px; left: 5px; } .fnote { margin-bottom: .25em; color: #036; } form li { position: relative; float: left; width: 20%; } form li label { position: absolute; top: auto; left: 20px; } .button { height: 45px; line-height: 45px; width: 230px; color: #fff; font-weight: 600; font-size: 18px; border: none; display: block; text-decoration: none; text-transform: uppercase; text-align: center; } .button:hover { background-position-y: bottom; line-height: 48px; text-decoration: none; } .addk { height: 7em; position: relative; } .addk a { background: #1c75bc url("/assets/images/bg-button-sprite-blue.png") repeat-x top left; } .addk a:visited { color: #fff; } .submit { background: #7da826 url("/assets/images/bg-button-sprite-green.png") repeat-x top left; } .error p { color: #be1e2d; position: relative; } .error input { border: 1px solid #be1e2d; } .error textarea { border: 1px solid #be1e2d; } .error strong { color: #be1e2d; font-weight: 600; font-size: 13px; line-height: 13px; display: block; position: absolute; right: 15%; bottom: -2px; z-index: 99; } */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> HOME CONTENT / EXCEPTIONS - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #home #main { overflow: visible; } #home #logo img { clip: rect(0px,236px,134px,0px); } #home #content { background: none; padding: 0 0 50px 0; min-height: 980px; overflow: visible; } #blueprint { position: absolute; top: 300px; left: 10px; width: 970px; height: 720px; overflow: visible; } #blueprint ul { position: absolute; width: 970px; height: 720px; background: url(/assets/images/blueprint.jpg) no-repeat left top; overflow: visible; } #blueprint li { position: absolute; width: 23px; height: 20px; } /* #blueprint li img { position: relative; z-index: 1; } */ #blueprint dl.dotsub { position: absolute; z-index: 10; top: -5px; left: 24px; display: none; padding: 10px 10px 10px 20px; overflow: visible; background: #333; background: rgba(0,0,0,.75); border: 1px solid #222; font-size: 14px; width: 186px; } #blueprint li:hover dl { display: block; } .dotsub dt { position: absolute; background: #222; width: 8px; height: 8px; left: -5px; top: 14px; border-top: 1px solid #222; border-left: 1px solid #222; } /* CSS3 below... */ .dotsub a { color: #fff; line-height: 0.95em; margin-bottom: 8px; display: block; } .dotsub dd.hx { color: #fff; line-height: 0.95em; margin-bottom: 8px; display: block; text-transform: uppercase; font-weight: 400; } #blueprint #bpdir { position: absolute; z-index: 1000; top: 60px; left: 60px; width: 290px; letter-spacing: 1px; font-weight: 100; font-size: 16px; padding: 10px; overflow: visible; background: #333; background: rgba(0,0,0,.75); border: 1px solid #222; } /* transition functions below in css3 */ #homegal { position: absolute; top: 0; left: 50%; margin-left: -480px; } /* moved to center then backward half the width */ #maingal { position: absolute; z-index: 75; width: 960px; height: 290px; background: #555; } #maingal img { width: 958px; border: 1px solid #222; } .stacks { position: absolute; z-index: 50; width: 960px; height: 290px; border: 1px solid #222; background: #333; } .s1 { top: -3px; left: -4px; transform: rotate(-1deg); } .s2 { top: 2px; left: 2px; transform: rotate(-1deg); } .s3 { top: 4px; left: -1px; transform: rotate(1deg); } .s4 { top: 2px; left: 2px; transform: rotate(.95deg); } .s5 { top: 3px; left: 4px; transform: rotate(-.25deg); } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> CSS3,ETC - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .brad50px { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-clip: padding-box; /* keep color from leaking out */ } .brad18px { -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; background-clip: padding-box; /* keep color from leaking out */ } .brad10px { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-clip: padding-box; /* keep color from leaking out */ } .brad8px,#homegal dt,#homegal img,#homegal dd,#pcats li,#psubs li,#plist dl,#plist ul li,.cfeat,.pimglarge,.pimgthumb,.ytvid img { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-clip: padding-box; /* keep color from leaking out */ } .brad5px,#content,input,textarea,button,.button,nav ul ul,#blueprint dl,#prel li p,#bpdir { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-clip: padding-box; /* keep color from leaking out */ } .brad3px,nav ul ul a,.pimglarge img,.pimgthumb img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* keep color from leaking out */ } .shadowlt,nav ul ul,#homegal dt,#homegal dd,.s1,.s2,.s3,.s4,.s5,#blueprint dl,#prel li p { -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.35); /* Android 2.3+,iOS 4.0.2-4.2,Safari 3-4 */ box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.35); /* Chrome 6+,Firefox 4+,IE 9+,iOS 5+,Opera 10.50+ */ } .shadowdk,#blueprint,#pcats li,#psubs li,#plist dl,#gals img { box-shadow: 0px 0px 15px black; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.85); /* Android 2.3+,iOS 4.0.2-4.2,Safari 3-4 */ box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.85); /* Chrome 6+,Firefox 4+,IE 9+,iOS 5+,Opera 10.50+ */ } .shadowf60,#pcats li:hover,#psubs li:hover,#plist dl:hover,#plist ul li:hover,.slick-center img { box-shadow: 0px 0px 15px #f60; -webkit-box-shadow: 0px 0px 15px 0px rgba(205,102,0,.85); /* Android 2.3+,iOS 4.0.2-4.2,Safari 3-4 */ box-shadow: 0px 0px 15px 0px rgba(205,102,0,.85); /* Chrome 6+,Firefox 4+,IE 9+,iOS 5+,Opera 10.50+ */ } .shadowtxt,h1 { text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.35); } .rotatememinus3,#blueprint { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .rotatemeplus3,#blueprint dl { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } .dotsub dt /* little arrow on tooltip */{ -webkit-transform: rotate(-45deg); -webkit-border-radius: 5px 0 100% 0; -moz-transform: rotate(-45deg); -moz-border-radius: 5px 0 100% 0; -o-transform: rotate(-45deg); border-radius: 5px 0 100% 0; background-clip: padding-box; /* keep color from leaking out */ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #blueprint #bpdir { opacity: 1.0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #blueprint:hover #bpdir { opacity: .45; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* !>>> ALL ELSE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* section-specific bg images in header and footer */ .bg_badminton .bghead { background-image: url(/assets/images/bg-header-badminton.jpg); } .bg_baseball-softball .bghead { background-image: url(/assets/images/bg-header-baseball.jpg); } .bg_basketball .bghead { background-image: url(/assets/images/bg-header-basketball.jpg); } .bg_bike-rack .bghead { background-image: url(/assets/images/bg-header-bikerack.jpg); } /* .bg_gym-floor-sleeve .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ .bg_football .bghead { background-image: url(/assets/images/bg-header-football.jpg); } /* .bg_gym-divider-curtain-main .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ /* .bg_gym-equipment .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ /* .bg_gym-sports .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ /* .bg_outdoor-bench .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ .bg_soccer .bghead { background-image: url(/assets/images/bg-header-soccer.jpg); } .bg_tennis .bghead { background-image: url(/assets/images/bg-header-tennis.jpg); } .bg_tetherball .bghead { background-image: url(/assets/images/bg-header-tetherball.jpg); } .bg_volleyball .bghead { background-image: url(/assets/images/bg-header-volleyball.jpg); } /* .bg_wall-padding .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ /* .bg_additional-information .bghead { background-image: url(/assets/images/bg-header-.jpg); } */ .bg_badminton .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_baseball-softball .bgfoot { background-image: url(/assets/images/bg-footer-turf.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_basketball .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_bike-rack .bgfoot { background-image: url(/assets/images/bg-footer-concrete.png); background-repeat: repeat-x; } .bg_gym-floor-sleeve .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_football .bgfoot { background-image: url(/assets/images/bg-footer-turf.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_gym-divider-curtain-main .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_gym-equipment .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_gym-sports .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_outdoor-bench .bgfoot { background-image: url(/assets/images/bg-footer-concrete.png); background-repeat: repeat-x; } .bg_soccer .bgfoot { background-image: url(/assets/images/bg-footer-turf.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } .bg_tennis .bgfoot { background-image: url(/assets/images/bg-footer-concrete.png); background-repeat: repeat-x; } .bg_tetherball .bgfoot { background-image: url(/assets/images/bg-footer-concrete.png); background-repeat: repeat-x; } .bg_volleyball .bgfoot { background-image: url(/assets/images/bg-footer-wood.png); background-repeat: repeat-x; /*background-position-y: 125%;*/ } /* .bg_wall-padding .bgfoot { background-image: url(/assets/images/bg-footer-.png); } */ /* .bg_additional-information .bgfoot { background-image: url(/assets/images/bg-footer-.png); } */ .hint/*,#blueprint li:nth-child(9) img */ { outline: 10px solid rgba(255,75,255,0.5); }