@charset "utf-8";

/* LAYOUT
---------------------------------- */
html {
	height:100%;
	background:url(../img/bg_body.jpg) #000C1A center top no-repeat;
}
body {
	text-align:center;
	cursor:default;
	font-family:"Trebuchet MS",Verdana,Arial,Sans-serif;
	font-size:13px;
	color:#bbb;
	line-height:17px;
}
body, #header, #content, #footer {margin:0; padding:0;}

#container {
	text-align:left;
	width:960px;
	margin:0 auto;
	overflow:hidden;
}
#header {
	float:left;
	width:960px;
	height:200px;
	position:relative;
}
#content {
	float:left;
	width:960px;
	height:auto;
	background:url(../img/bg_content.png) 0 0 repeat-y;
}
#footer {
	float:left;
	width:960px;
	height:150px;
	background:url(../img/bg_footer.png) 0 0 no-repeat;
}
#endcap {
	float:left;
	width:960px;
	height:auto;
	margin-bottom:25px;
	padding:10px 0;
	background:url(../img/bg_endcap.png) left bottom no-repeat;
}
.noshow {display:none;}
a {
	outline:none;
	font-family: "Trebuchet MS", Verdana, Arial, Sans-serif;
}
img {border-style:none;}
.clear {clear:both;}

/* HEADER
---------------------------------- */
#gotobtn {
	position:absolute;
	top:24px;
	left:0;
	padding:0;
	width:98px;
	height:55px;
}
#gotobtn a {
	display:block;
	margin:0;
	padding:0;
	width:98px;
	height:55px;
}
.surf {background:url(../img/btn_gotosurf.png) 0 0 no-repeat;}
#logo {
	float:left;
	display:block;
	margin:0;
	padding:0;
	width:960px;
	height:103px;
}
#logo a {
	float:left;
	display:inline;
	margin:23px 0 0 150px;
	padding:0;
	width:660px;
	height:80px;
	background:url(../img/bg_logo-sup.png) 0 0 no-repeat;
}
#nav {
	float:left;
	display:inline;
	position:relative;
	width:960px;
	height:49px;
	padding:0;
	margin:0;
	background:url(../img/bg_nav.png) 0 0 no-repeat;
	z-index:3;
}
#storebutton {
	position:absolute;
	top:62px;
	right:11px;
	width:138px;
	height:49px;
	background:url(../img/storebuttonback.png) 0 0 no-repeat;
	z-index:1000;
}
#storebutton a {
	display:block;
	margin:15px 0 0 21px;
	padding:0;
	width:96px;
	height:34px;
	text-decoration:none;
	background:url(../img/storebutton.png) 0 0 no-repeat;
}
#storebutton a:hover {border:0; background-position:-96px 0;}

/* NAVIGATION
---------------------------------- */

/* Main Menu ---------------------------------- */
.sf-menu {
	float:left;
	display:inline;
	position:relative;
	list-style:none;
	width:auto;
	height:41px;
	margin:0 0 0 24px;
	padding:8px 0 0 0;
}
.sf-menu li {
	float:left;
	display:inline;
	height:41px;
	position:relative;
	margin:0;
	padding:0;
	background:url(../img/sprite_nav-e.png) no-repeat;
}
.sf-menu li a {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	height:41px;
	text-decoration:none;
}
.sf-menu li.home, .sf-menu li.home a {width:77px;}
.sf-menu li.about, .sf-menu li.about a {width:82px;}
.sf-menu li.tech, .sf-menu li.tech a {width:71px;}
.sf-menu li.boards, .sf-menu li.boards a {width:104px;}
.sf-menu li.paddles, .sf-menu li.paddles a {width:110px;}
.sf-menu li.accessories, .sf-menu li.accessories a {width:134px;}
.sf-menu li.team, .sf-menu li.team a {width:76px;}
.sf-menu li.video, .sf-menu li.video a {width:77px;}
.sf-menu li.news, .sf-menu li.news a {width:79px;}
.sf-menu li.contact, .sf-menu li.contact a {width:102px;}

.sf-menu li:hover {visibility:inherit;} /* fixes IE7 'sticky bug' */
.sf-menu li a:hover, .sf-menu ul li a:hover {border:0}

.sf-menu li.home {background-position:0 0;}
.sf-menu li.home:hover {background-position:0 -41px;}
.sf-menu li.about {background-position:-77px 0;}
.sf-menu li.about:hover {background-position:-77px -41px;}
.sf-menu li.tech {background-position:-159px 0;}
.sf-menu li.tech:hover {background-position:-159px -41px;}
.sf-menu li.boards {background-position:-230px 0;}
.sf-menu li.boards:hover {background-position:-230px -41px;}
.sf-menu li.paddles {background-position:-334px 0;}
.sf-menu li.paddles:hover {background-position:-334px -41px;}
.sf-menu li.accessories {background-position:-444px 0;}
.sf-menu li.accessories:hover {background-position:-444px -41px;}
.sf-menu li.team {background-position:-578px 0;}
.sf-menu li.team:hover {background-position:-578px -41px;}
.sf-menu li.video {background-position:-654px 0;}
.sf-menu li.video:hover {background-position:-654px -41px;}
.sf-menu li.news {background-position:-731px 0;}
.sf-menu li.news:hover {background-position:-731px -41px;}
.sf-menu li.contact {background-position:-810px 0;}
.sf-menu li.contact:hover {background-position:-810px -41px;}

/* Sub Menu ---------------------------------- */

.sf-menu ul {
	position:absolute;
	top:41px;
	display:none;
	padding:0;
	margin:0;
	width:353px;
	left:-10px;
}
.sf-menu li:hover ul {
	left:-10px;
	top:41px; /* match top ul list item height */
	z-index:99;
	/*display:block;*/
}
.sf-menu ul.boardmenu {
	background:url(../img/bg_child-a.png) no-repeat;
	height:218px;
}
.sf-menu ul.paddlemenu {
	background:url(../img/bg_child-b.png) no-repeat;
	height:74px;
	width:188px !important;
}
.sf-menu ul li {
	float:left;
	display:inline;
	margin:0 1px 0 0;
	padding:0;
	width:164px;
	height:48px;
	background: none;
}
.sf-menu ul li.l-1 {margin:9px 1px 0 12px;}
.sf-menu ul li.r-1 {margin:9px 1px 0 0;}
.sf-menu ul li.l-2, .sf-menu ul li.l-3, .sf-menu ul li.l-4 {margin:0 1px 0 12px;}

.sf-menu ul li a {
	text-decoration:none;
	width:164px !important;
	height:48px;
}
.sf-menu ul li a, .sf-menu ul li a span {
	display:block;
	margin:0;
	text-indent:-9999px;
	background:url(../img/sprite_dmnav.png) no-repeat;
}
.sf-menu ul li a span {
	height:48px;
	width:100%;
	z-index:100;
}
.submargins {
	display:block;
	margin:9px 0 0 12px;
	width:330px;
	height:144px;
}
.sf-menu ul li a, .sf-menu ul li a:hover {border:none !important;}

.sf-menu ul li a.bws {background-position:0 0;}
.sf-menu ul li a.bws span {background-position:0 -48px;}
.sf-menu ul li a.mm {background-position:-164px 0;}
.sf-menu ul li a.mm span {background-position:-164px -48px;}
/*
.sf-menu ul li a.c4 {background-position:-328px 0;}
.sf-menu ul li a.c4 span {background-position:-328px -48px;}
*/
.sf-menu ul li a.psh {background-position:-492px 0;}
.sf-menu ul li a.psh span {background-position:-492px -48px;}
.sf-menu ul li a.dpang {background-position:-656px 0;}
.sf-menu ul li a.dpang span {background-position:-656px -48px;}
.sf-menu ul li a.rusty {background-position:-820px 0;}
.sf-menu ul li a.rusty span {background-position:-820px -48px;}
.sf-menu ul li a.ohana {background-position:-984px 0;}
.sf-menu ul li a.ohana span {background-position:-984px -48px;}
.sf-menu ul li a.badfish {background-position:-1148px 0;}
.sf-menu ul li a.badfish span {background-position:-1148px -48px;}
.sf-menu ul li a.infinity {background-position:-328px 0;}
.sf-menu ul li a.infinity span {background-position:-328px -48px;}

/* Secondary Nav w/ Social and Subscribe ---------------------------------- */

#subnav {
	float:left;
	display:inline;
	width:960px;
	height:48px;
	padding:0;
	margin:0;
	background:url(../img/bg_subnav.png) 0 0 no-repeat;
	overflow:visible;
}
#social {
	float:left;
	display:inline;
	width:auto;
	height:40px;
	list-style:none;
	padding:0;
	margin:0 0 0 221px;
}
#social li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
	width:40px;
	height:40px;
}
#social li a {
	display:block;
	margin:0;
	padding:0;
	width:40px;
	height:40px;
	background:url(../img/sprite_social.png) no-repeat;
}
#social li#rss a {background-position:0 0;}
#social li#rss a:hover {background-position:0 -40px;}
#social li#facebook a {background-position:-40px 0;}
#social li#facebook a:hover {background-position:-40px -40px;}
#social li#twitter a {background-position:-80px 0;}
#social li#twitter a:hover {background-position:-80px -40px;}
#social li#myspace a {background-position:-120px 0;}
#social li#myspace a:hover {background-position:-120px -40px;}
#social li#vimeo a {background-position:-160px 0;}
#social li#vimeo a:hover {background-position:-160px -40px;}
#social li#youtube a {background-position:-200px 0;}
#social li#youtube a:hover {background-position:-200px -40px;}
#social li#supconnect a {background-position:-240px 0;}
#social li#supconnect a:hover {background-position:-240px -40px;}

/* Subscribe Form ---------------------------------- */

#subscribe {
    float:left;
	display:inline;
    width:230px;
    height:24px;
    margin:8px 0 0 235px;
    padding:0;
    background:url(../img/bg_subscribe.png) 0 0 no-repeat;
}
.form {
    width:230px;
    margin:0;
    padding:0;
}
.form input {
	font-size:12px;
	font-family:"Trebuchet MS",Verdana,Arial,Sans-serif;
}
.form input.text {
	float:left;
	width:146px;
	color:#555;
	border:none !important;
	background:none !important;
	outline:none !important;
	margin:3px 0 0 6px;
	padding:0;
	line-height:18px;
}
.form input.text.active {
	color:#EFB900 !important;
}
.form input.go {
    float:right;
    width:63px;
    height:24px;
    margin:0;
    padding:0;
    background:url(../img/bg_submit.png) 0 0 no-repeat;
    border:none !important;
}
.form input.go:hover {background-position:-63px 0;}
#signup-response {position:relative;}
#signup-response p {
	margin:0;
	padding:5px;
	width:330px;
	background:#0c0c0c;
	border-right:1px solid #383838;
	border-bottom:1px solid #383838;
	border-left:1px solid #383838;	
	position:absolute;
	top:40px;
	left:-114px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
	text-align:center;
}
#signup-error {color:#f66;}
#signup-success {color:#fbc400;}



/* CONTENT
---------------------------------- */

/* Home Page Boxes ---------------------------------- */

#showbox {
	float:left;
	display:inline;
	width:942px;
	height:422px;
	margin:0 9px;
	padding:0;
	background:url(../img/bg_gradtop.png) #fff top left repeat-x;
}
#showbox-flash {
	float:left;
	display:inline;
	width:940px;
	height:422px;
	margin:0 1px;
	padding:0;
}
#showboxnew {
	float:left;
	display:inline;
	position:relative;
	width:942px;
	height:350px;
	margin:0 9px;
	padding:0;
	text-align:center;
	background:url(../img/bg_gradtop.png) #fff top left repeat-x;
}
#showboxnew-flash {
	float:left;
	display:inline;
	width:940px;
	height:350px;
	margin:0 1px;
	padding:0;
}
#showbox-fader {
	float:left;
	display:inline;
	width:940px;
	height:350px;
	margin:0 1px;
	padding:0;
	z-index:1;
}
#showbox-fader img {
	margin:0 !important;
	padding:0 !important;
	width: 940px !important;
	height: 350px !important;
}
#showbox-nav {
	position:absolute;
	top:-1px;
	right:15px;
	z-index:100;
	padding:0px 7px 5px 4px;
	background:url(../img/yellowback.png) 0 0 repeat;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border:1px solid #ffbb00;
	border-top:none !important;
}
#showbox-nav a {
	display:block;
	float:left;
	margin:0 0 0 3px;
	padding:0;
	text-indent:-9999px;
	width:12px;
	height:12px;
	background:url(../img/dot.png) 0 0 no-repeat;
	text-decoration:none;
}
#showbox-nav a:hover, #showbox-nav a.activeSlide {
	background:url(../img/doton.png) 0 0 repeat;
}
#featured {
	float:left;
	display:inline;
	width:942px;
	height:250px;
	margin:0 9px;
	padding:0;
	background:url(../img/bg_gradbottom.png) #fff bottom left repeat-x;
}
#featured-in {
	float:left;
	display:inline;
	width:940px;
	height:250px;
	margin:0 1px;
	padding:0;
	background:url(../img/bg_featured.png) top left no-repeat;
}
#featbanner {
	float:left;
	display:inline;
	width:942px;
	height:48px;
	margin:0 9px;
	padding:0;
	background:url(../img/bg_featbanner.png) 0 0 no-repeat;
}
#featbanner a {
	display:block;
	margin:0;
	padding:0;
	width:942px;
	height:48px;
	font-family: "Trebuchet MS", Verdana, Arial, Sans-serif;
}
#featurenew {
	float:left;
	display:inline;
	width:942px;
	height:427px;
	margin:0 9px;
	padding:0;
	background:url(../img/bg_gradbottom.png) #fff bottom left repeat-x;
}
#featurenew-in {
	float:left;
	display:inline;
	width:940px;
	height:427px;
	margin:0 1px;
	padding:0;
}
#fnew1, #fnew2 {float:left; display:inline; width:470px; height:421px; margin:0; padding:0;}
#fnew1 {background:url(../img/bg_featvid.png) 0 0 no-repeat;}
#fnew1 p {padding:0 15px 0 20px;}
.fvidbox {
	border:1px solid #fbc400;
	margin:65px 0 0 20px;
}

#f1, #f2, #f3 {float:left; display:inline; height:250px; margin:0; padding:0;}
#f1, #f3 {width:313px; background:url(../img/fsep.png) no-repeat;}
#f1 {background-position:right top;}
#f3 {background-position:left top;}
#f2 {width:314px;}

#f1 h2, #f3 h2 {width:270px;}
#f2 h2 {width:274px;} 
#f1 h2, #f2 h2, #f3 h2 {display:block; height:10px; background:url(../img/sprite_h2.png) no-repeat;}
#f1 h2 {margin:20px 0 15px 0;}
#f2 h2, #f3 h2 {margin:20px 0;}
#f1 h2 {margin-left:21px; background-position:0 0;}
#f2 h2 {margin-left:20px; background-position:0 -10px;}
#f3 h2 {margin-left:21px; background-position:0 -20px;}
h2.hide {text-indent:-9999px;}

#f3 p {
	float:left;
	display:inline;
	margin:12px 27px 0 28px;
	padding:0;
	width:258px;
}
#f3 p a:link, #f3 p a:visited { color:#fdb202; text-decoration:none; font-weight:bold; }
#f3 p a:hover, #f3 p a:active { color:#fff; text-decoration:underline; }
#fboardpic {
	float:left;
	display:inline;
	margin:0 0 0 30px;
	padding:0;
	width:254px;
	height:100px;
	background:url(../img/featboard.jpg) 0 0 no-repeat;
}
#fboardpic a {
	display:block;
	margin:0;
	padding:0;
	width:254px;
	height:100px;
	background:url(../img/fb-overlay.png) 0 0 no-repeat;
}
#fboardpic a:hover {
	background-position:-254px 0;;
}
.newsitem {
	float:left;
	display:inline;
	margin:0 21px 7px 20px;
	padding:0;
	width:270px;
}
.newsitem a:link, .newsitem a:visited {
	display:block;
	margin:0;
	padding:4px 10px;
	text-decoration:none;
	color:#bbb;
}
.newsitem a:hover, .newsitem a:active {
	padding:3px 9px;
	border:1px solid #202020;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background:url(../img/bg_read.png) #000 right top no-repeat;
	color:#fdb202;
}
#morenews {
	float:left;
	display:inline;
	margin:0 0 0 28px;
	padding:0;
	width:104px;
	height:27px;
}
#morenews a {
	display:block;
	margin:0;
	padding:0;
	width:104px;
	height:27px;
	background:url(../img/btn_morenews.png) 0 0 no-repeat;
}
#morenews a:hover {
	background-position:-104px 0;
}
#f2 p {
	margin:0 30px 10px 30px;
	padding:0;
	font-weight:bold;
	color:#fff;
	font-size:14px;
	text-transform:uppercase;
}
#f2 p a:link, #f2 p a:visited {
	display:block;
	padding:0 0 0 50px;
	color:#fff;
	text-decoration:none;
}
#f2 p a.vimeo:hover, #f2 p a.vimeo:active {color:#4fb9d5;}
#f2 p a.youtube:hover, #f2 p a.youtube:active {color:#ff3333;}
.vimeo {background:url(../img/vimeo.png) 0 0 no-repeat;}
.youtube {background:url(../img/youtube.png) 0 0 no-repeat;}
#vidbox {
	float:left;
	display:inline;
	margin:0 0 0 30px;
	padding:0;
	width:254px;
	height:135px;
	background:url(../img/vidcap.jpg) 0 0 no-repeat;
}
#vidbox a {
	display:block;
	margin:0;
	padding:0;
	width:254px;
	height:135px;
	background:url(../img/vc-overlay.png) 0 0 no-repeat;
}
#vidbox a:hover {background-position:-254px 0;}
#upload {
	float:left;
	display:inline;
	margin:10px 0 0 42px;
	padding:0;
	width:207px;
	height:76px;
}
#upload a {
	display:block;
	margin:0;
	padding:0;
	width:207px;
	height:76px;
	background:url(../img/btn_upload.png) 0 0 no-repeat;
}
#upload a:hover {
	background-position:-207px 0;
}
.bcaps {font-weight:bold; color:#fff; font-size:14px;}

/* Interior Pages ---------------------------------- */

#mainbox-top {
	float:left;
	display:inline;
	width:942px;
	height:auto;
	margin:0 9px;
	padding:0;
	background:url(../img/bg_gradtop.png) #fff top left repeat-x;
}
#mainbox-bottom {
	float:left;
	display:inline;
	width:942px;
	height:auto;
	margin:0;
	padding:0;
	background:url(../img/bg_gradbottom.png) transparent bottom left repeat-x;
}
#mainbox-in {
	float:left;
	display:inline;
	width:940px;
	height:auto;
	margin:0 1px;
	padding:0 0 20px 0;
	background-color:#252525;
	border-top:1px solid #666;
	border-bottom:1px solid #111;
}
#mainbox-in p {
}
#mainbox-in h1 {
}

/* FOOTER
---------------------------------- */
#fl-a {margin-left:9px;}
#fl-b {margin-left:2px;}
#fl-a,#fl-b {
	float:left;
	display:inline;
	width:155px;
	height:125px;
	list-style:none;
	padding:0;
	margin-top:12px;
}
#fl-a li, #fl-b li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
	width:155px;
	height:25px;
}
#fl-a li a, #fl-b li a {
	display:block;
	margin:0;
	padding:0;
	height:25px;
	background:url(../img/sprite_flnav.png) no-repeat;
}
#fl-a li a:hover, #fl-b li a:hover {border:0}

#fl-a li#fl-home a {background-position:0 0;}
#fl-a li#fl-home a:hover {background-position:-155px 0;}
#fl-a li#fl-tech a {background-position:0 -25px;}
#fl-a li#fl-tech a:hover {background-position:-155px -25px;}
#fl-a li#fl-paddles a {background-position:0 -50px;}
#fl-a li#fl-paddles a:hover {background-position:-155px -50px;}
#fl-a li#fl-team a {background-position:0 -75px;}
#fl-a li#fl-team a:hover {background-position:-155px -75px;}
#fl-a li#fl-news a {background-position:0 -100px;}
#fl-a li#fl-news a:hover {background-position:-155px -100px;}

#fl-b li#fl-about a {background-position:0 -125px;}
#fl-b li#fl-about a:hover {background-position:-155px -125px;}
#fl-b li#fl-boards a {background-position:0 -150px;}
#fl-b li#fl-boards a:hover {background-position:-155px -150px;}
#fl-b li#fl-accessories a {background-position:0 -175px;}
#fl-b li#fl-accessories a:hover {background-position:-155px -175px;}
#fl-b li#fl-video a {background-position:0 -200px;}
#fl-b li#fl-video a:hover {background-position:-155px -200px;}
#fl-b li#fl-contact a {background-position:0 -225px;}
#fl-b li#fl-contact a:hover {background-position:-155px -225px;}

/* Boards Pop-Up ---------------------------------- */
.bubbleInfo {
    position:relative;
}
ul.popup {
    position:absolute;
    display:none;
	list-style:none;
	margin:0;
	padding:4px 0;
	background:url(../img/black90.png) repeat !important;
	border:1px solid #FDB202;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px;
	z-index:2;
}
ul.popup li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
	width:140px !important;
	height:auto !important;
}
ul.popup li a {
	display:block;
	margin:0;
	padding:4px 10px !important;
	height:auto !important;	
	color:#fff;
	background:none !important;
	text-decoration:none;
	font-weight:bold;
	font-size:14px;
}
ul.popup a:hover {
	color:#FDB202;
	background:none !important;
}

/* Footer BIG LINKS ---------------------------------- */
#fl-c {
	float:left;
	display:inline;
	width:209px;
	height:108px;
	list-style:none;
	padding:0;
	margin:19px 0 0 31px;
}
#fl-c li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
	height:36px;
}
#fl-c li a {
	display:block;
	margin:0;
	padding:0;
	height:36px;
	background:url(../img/sprite_flbigs.png) no-repeat;
}
#fl-c li a:hover {border:0}
#fl-c li#dist, #fl-c li#dist a {width:198px;}
#fl-c li#sloc, #fl-c li#sloc a {width:209px;}
#fl-c li#supt, #fl-c li#supt a {width:141px;}

#fl-c li#dist a {background-position:0 0;}
#fl-c li#dist a:hover {background-position:-198px 0;}
#fl-c li#sloc a {background-position:0 -36px;}
#fl-c li#sloc a:hover {background-position:-209px -36px;}
#fl-c li#supt a {background-position:0 -72px;}
#fl-c li#supt a:hover {background-position:-141px -72px;}

#tagline {
	float:left;
	display:inline;
	width:284px;
	height:125px;
	margin:12px 0 0 78px;
	padding:0;
}
#tagline.tga {background:url(../img/tagline-a.png) no-repeat;}
/*  Various tagline images can be specified here.
	The applicable class needs to be inserted into the html.
	Use the following syntax: #tagline.class where class = tga, tgb, tgc, etc. */

#endcap p {
	text-align:left;
	margin:0;
	padding:2px 20px;
	font-size:11px;
	color:#999;
}
.dedev {
	float: right !important;
	text-align: right;
}
.dedev a {
	color: #999;
	text-decoration: none;
	line-height: 12px;
	padding: 0 0 0 25px;
	background:url(../img/wdcicon.png) 0 0 no-repeat;
}
.dedev a:hover {
	color: #FBC400;
	background-position:0 -14px;
}