/* CSS Document */ /************************************************* RESET *************************************************/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size: 1em; font-weight: normal; font-style: normal;} ul,ol { list-style: none; } fieldset,img { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } /************************************************* LAYOUT *************************************************/ html, body {font: 12px/18px Arial, Verdana, sans-serif; color:#777; background:#0f0f0f url(../images/bg_body.gif) repeat-x;} #container{width:960px; margin:0 auto; position:relative} #header{height:80px; position:relative; margin-bottom:0} #content-home{position:relative; margin-bottom:0;} #content{position:relative; border-bottom:1px dotted #333} #footer{color:#4f4f4f;} .clear{height:1px; clear:both; font-size:1px; line-height:1px} /************************************************* DEFUALTS *************************************************/ a{text-decoration:none; cursor:pointer; color:#ccc} a:hover{text-decoration:underline;} p{margin-bottom:20px} ul{margin-bottom:20px; list-style:disc inside;} ol{margin-bottom:20px; list-style:decimal inside;} /************************************************* HEADER *************************************************/ #logo{position:absolute; top:20px; left:10px; width:264px; height:97px; background:url(../images/logo.png) no-repeat; z-index:20} #logo a{width:264px; height:97px; display:block; overflow:hidden; text-indent:-9999px} #nav{list-style:none; margin:0; float:right; position:relative; top:50px;} #nav li{display:inline; margin-left:20px;} #nav a{font-weight:bold; font-size:12px; color:#ccc; text-decoration:none; text-transform:uppercase; font-style:oblique} #nav a:hover{color:#fff; text-decoration:none} /************************************************* CONTENT *************************************************/ .main-action{background:#6b6b6b; height:394px; width:930px; background:url(../images/bg_main_action.png) no-repeat; position:absolute; top:0; right:0} #content-inside{background:url(../images/bg_inside.png) no-repeat; padding:50px 30px 0 30px; min-height:500px;} #tech-header{width:930px; height:208px; background:url(../images/tech_graphic.jpg) no-repeat; position:relative; margin-bottom:10px} #tech-header #order-info{position:absolute; top:45px; right:20px} #action-info{float:right; width:467px; height:342px; padding:32px 20px 20px 20px; background:url(../images/mouthguard_half_red.png) no-repeat right 75px; position:relative} #features{position:absolute; bottom:20px; list-style:none; padding:0; margin:0; color:#ccc} #features li{font-style:italic; font-weight:bold; font-size:14px; padding-bottom:5px; margin-bottom:5px} #features #feature1{padding-left:68px; background:url(../images/feature_line.png) no-repeat 41px bottom;} #features #feature2{padding-left:50px; background:url(../images/feature_line.png) no-repeat 24px bottom;} #features #feature3{padding-left:32px; background:url(../images/feature_line.png) no-repeat 8px bottom;} #features #feature4{padding-left:14px; padding-bottom:0; margin-bottom:0} #features li div{background:url(../images/bullet_red.gif) no-repeat 0 7px; padding-left:8px} #order-info{position:absolute; right:20px; bottom:20px} .order-now{display:block; width:158px; height:37px; text-indent:-9999px; overflow:hidden; background:url(../images/button_order1.png) no-repeat 0 0;} .order-now:hover{background-position:0 -37px} #price{width:158px; height:44px; text-indent:-9999px; overflow:hidden; background:url(../images/price1.gif) no-repeat top right; margin-bottom:10px} #tech-half{height:292px; background:url(../images/bg_tech_half.png) no-repeat; padding:20px 15px 0 15px; margin-bottom:20px;} #flexible-groove{width:290px; display:inline; float:right; margin-left:15px; margin-right:15px; position:relative; background:url(../images/flexible_groove.png) no-repeat 0 20px; height:240px} #flexible-groove p{position:absolute; bottom:8px; left:15px; margin-bottom:0; height:36px;} #bite-rim{width:290px; display:inline; float:right; margin-left:15px; position:relative; background:url(../images/bite_rim.png) no-repeat 0 20px; height:240px} #bite-rim p{position:absolute; bottom:8px; left:15px; margin-bottom:0; height:36px;} #mouthguard-front1{position:relative; background:url(../images/mouthguard_double_front.jpg) no-repeat 0 20px; height:212px; margin-bottom:20px} #mouthguard-front2{position:relative; background:url(../images/mouthguard_single_front.jpg) no-repeat 0 20px; height:212px; margin-bottom:20px} #mouthguard-back{position:relative; background:url(../images/mouthguard_single_back.jpg) no-repeat 0 20px; height:212px; top:33px; margin-bottom:20px} #mouthguard-front1 p, #mouthguard-front2 p, #mouthguard-back p{position:absolute; bottom:8px; left:12px; margin-bottom:0; height:36px;} .corner-box{background:url(../images/bg_box_corner.png) no-repeat; padding:20px 20px 0 20px} .corner-box ul li{list-style:none; padding-left:10px; background:url(../images/bullet_red.gif) no-repeat 0 6px; margin-bottom:10px} .corner-box ul{margin-bottom:0} /**** HEADINGS ****/ #heading-sports{background:url(../images/heading_sports.gif) no-repeat top right; text-indent:-9999px; overflow:hidden; height:24px} #heading-hockey{background:url(../images/heading_hockey.gif) no-repeat top right; text-indent:-9999px; overflow:hidden; height:24px} #heading-lacrosse{background:url(../images/heading_lacrosse.gif) no-repeat top right; text-indent:-9999px; overflow:hidden; height:24px} #heading-tech{background:url(../images/heading_tech.gif) no-repeat; text-indent:-9999px; overflow:hidden;} #heading-tech-main{background:url(../images/heading_tech_main.png) no-repeat; text-indent:-9999px; overflow:hidden; height:40px; top:70px; left:20px; position:relative} #heading-double-arch{background:url(../images/heading_doublearch.png) no-repeat; text-indent:-9999px; overflow:hidden; height:13px; margin-bottom:20px} #heading-single-arch{background:url(../images/heading_singlearch.png) no-repeat; text-indent:-9999px; overflow:hidden; height:13px; margin-bottom:20px} #heading-design-for{background:url(../images/heading_design_for.png) no-repeat; text-indent:-9999px; overflow:hidden; height:23px; margin-bottom:20px} #heading-design-with{background:url(../images/heading_design_with.png) no-repeat; text-indent:-9999px; overflow:hidden; height:23px; margin-bottom:20px} #heading-design-to{background:url(../images/heading_design_to.png) no-repeat; text-indent:-9999px; overflow:hidden; height:23px; margin-bottom:20px} #heading-about{background:url(../images/heading_about.png) no-repeat; text-indent:-9999px; overflow:hidden; height:21px; margin-bottom:20px} #heading-terms{background:url(../images/heading_terms.png) no-repeat; text-indent:-9999px; overflow:hidden; height:21px; margin-bottom:20px} #heading-warranty{background:url(../images/heading_warranty.png) no-repeat; text-indent:-9999px; overflow:hidden; height:21px; margin-bottom:20px} #heading-patents{background:url(../images/heading_patents.png) no-repeat; text-indent:-9999px; overflow:hidden; height:21px; margin-bottom:20px} #heading-contact{background:url(../images/heading_contact.png) no-repeat; text-indent:-9999px; overflow:hidden; height:21px; margin-bottom:20px} .design-features h2{background:url(../images/heading_design_features.gif) no-repeat; text-indent:-9999px; overflow:hidden; height:16px; margin-bottom:2px} .doctors h2{background:url(../images/heading_doctors.gif) no-repeat; text-indent:-9999px; overflow:hidden; height:16px; margin-bottom:2px} .stressgard h2{background:url(../images/heading_stressgard.gif) no-repeat; text-indent:-9999px; overflow:hidden; height:16px; margin-bottom:2px} /************************************************* HOMEPAGE *************************************************/ .design-features{display:block; height:126px; width:260px; background:url(../images/bg_design_features.jpg) no-repeat; padding:15px} .doctors{display:block; height:126px; width:260px; padding:15px; background:url(../images/bg_doctors.jpg) no-repeat; padding:15px; position:relative} .stressgard{display:block; height:126px; width:260px; background:url(../images/bg_stressgard.jpg) no-repeat; padding:15px} .design-features:hover, .doctors:hover, .stressgard:hover{text-decoration:none} .design-features p, .doctors p, .stressgard p{color:#999} .doctors #phone{position:absolute; bottom:20px; font-size:14px; font-weight:bold; color:#97a9b9} /************************************************* FOOTER *************************************************/ #copyright{float:right} #nav-foot{list-style:none;} #nav-foot li{display:inline; margin-right:20px} #nav-foot li a{color:#4f4f4f; text-decoration:none;} #nav-foot li a:hover{color:#ccc; text-decoration:none;} /* =Grid >> Global --------------------------------------------------------------------------------*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; margin-left: 15px; margin-right: 15px; margin-bottom:20px } /* =Grid >> Children (Alpha ~ First, Omega ~ Last) --------------------------------------------------------------------------------*/ .first {margin-left: 0;} .last {margin-right: 0;} .none{margin-left:0; margin-right:0;} .right{float:right} .left{float:left} /* =Grid >> 12 Columns --------------------------------------------------------------------------------*/ .grid_1 { width: 50px; } .grid_2 { width: 130px; } .grid_3 { width: 210px; } .grid_4 { width: 290px; } .grid_5 { width: 370px; } .grid_6 { width: 450px; } .grid_7 { width: 530px; } .grid_8 { width: 610px; } .grid_9 { width: 690px; } .grid_10 { width: 770px; } .grid_11 { width: 850px; } .grid_12 { width: 930px; } /* =Prefix Extra Space >> 12 Columns --------------------------------------------------------------------------------*/ .prefix_1 { padding-left: 80px; } .prefix_2 { padding-left: 160px; } .prefix_3 { padding-left: 240px; } .prefix_4 { padding-left: 320px; } .prefix_5 { padding-left: 400px; } .prefix_6 { padding-left: 480px; } .prefix_7 { padding-left: 560px; } .prefix_8 { padding-left: 640px; } .prefix_9 { padding-left: 720px; } .prefix_10 { padding-left: 800px; } .prefix_11 { padding-left: 880px; } /* =Suffix Extra Space >> 12 Columns --------------------------------------------------------------------------------*/ .suffix_1 { padding-right: 80px; } .suffix_2 { padding-right: 160px; } .suffix_3 { padding-right: 240px; } .suffix_4 { padding-right: 320px; } .suffix_5 { padding-right: 400px; } .suffix_6 { padding-right: 480px; } .suffix_7 { padding-right: 560px; } .suffix_8 { padding-right: 640px; } .suffix_9 { padding-right: 720px; } .suffix_10 { padding-right: 800px; } .suffix_11 { padding-right: 880px; } /* `Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ .clearfix:after { clear: both; content:' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } /**********************************/ .sports-scroll{height:394px; background:none; position:relative; margin-bottom:20px; width:678px; overflow:hidden} .sports-scroll .items { width:200000em; position:absolute; } .sports-scroll .items div { float:left; height:394px; width:678px; } #lacrosse-pic{background:url(../images/action_lacrosse.jpg) no-repeat;} #hockey-pic{background:url(../images/action_hockey.jpg) no-repeat;} #football-pic{background:url(../images/action_football.jpg) no-repeat;} #soccer-pic{background:url(../images/action_soccer.jpg) no-repeat;} #basketball-pic{background:url(../images/action_basketball.jpg) no-repeat;} #wrestling-pic{background:url(../images/action_wrestling.jpg) no-repeat;} /**********************************/ div.scrollable { /* required settings */ position:relative; overflow:hidden; width: 678px; height:394px; margin-bottom:20px } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ div.scrollable div.items { /* this cannot be too large */ width:20000em; position:absolute; } /* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ div.scrollable div.items div { float:left; width: 678px; height:394px; } div.navi {width:384px; position:absolute; bottom:20px; left:20px;} div.navi a {width:8px; height:8px; float:left; margin:3px; background:url(../images/navigator.png) 0 0 no-repeat; display:block; font-size:1px; cursor:pointer} div.navi a:hover {background-position:0 -8px;} div.navi a.active {background-position:0 -16px;}