@import "editor.css";

p
{	
    color: #f2f2f2;
}

/****************************************** layout ***************************************/

#wrap {
    width: 931px;
    margin: 0 auto;
}

#main {

}

#mainWrap {
    min-height:600px;
      height:auto !important;
      height:600px;
}

#logo {
    display: block;
    width: 246px;
    height: 60px;
    margin: 9px 0 19px 2px;
    float: left;
}
/************************* language *********************/

#languageBox {
    float: right;
    width: 237px;
    position: relative;
    background: url('/assets/images/global/langLeft.gif') left top no-repeat;
    padding: 0 0 0 27px;
}

#languageBoxInner {
    background: url('/assets/images/global/langRight.gif') right top no-repeat;
    height: 36px;
}

#cChoose {
    position: absolute;
    top: 6px;
    left: 27px;
}

#cSub {
    position: absolute;
    top: 1px;
    left: 120px;
}

#languageBox select {
    width: 117px;
}

#languageBox form {
    position: absolute;
    top: 3px;
    left: 92px;
    
}

#funky {
    width: 117px;
    position: absolute;
    top: 3px;
    left: 94px;
    padding: 0 0 3px 0;
    background: url('/assets/images/global/langBottom.gif') left bottom no-repeat;
}

#funkyInner {
    background: url('/assets/images/global/langTop.gif') left top no-repeat;

}

#funkyInner ul {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    width: 93px;
    float: left;
    padding: 3px 0 0px 7px;
}
#funkyInner ul li {
    margin: 0 0 3px 0;
    padding: 0 0px 0 22px;
    background-repeat: no-repeat;
    background-position: 0px 3px;    
    line-height: normal;
}

#funkyInner ul li.on {
    cursor: pointer;
}

#funkyInner ul li.on a:hover {
    text-decoration: none;
}

#funkyInner ul a {
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
}

#funkyInner ul a:hover {
    text-decoration: underline;
}

#funkyCont {
    display: block;
    width: 9px;
    height: 9px;
    float: right;
    margin: 8px 4px 0 0 ;
}

/************************* nav *********************/

#nav ul {
    border: none;
    min-height:80px;
      height:auto !important;
      height:80px;
      text-align: left;
}

#nav li {
    display: inline;
    background: none;
    margin: 0 10px 0px 0;
    padding: 0;
}

#nav li a {
    font-size: 13px;
}

/************************* sub nav *********************/

/* This is messier than it needs to be (stucturally) because of IE */

#right ul {
    border-left: 1px solid #646464;
    border-right: 1px solid #646464;
    border-bottom: 1px solid #646464;
    padding: 0;
    margin: 0;
    border-top: none;
}

#right ul li {
    width: 258px;
    margin: 0;
    line-height: normal;
    padding: 0;
    background: none;
}

#right ul li a{
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #acacac;
    padding: 12px 0 9px 19px;
    background: url('/assets/images/global/subNavBg.gif') 0px 0px no-repeat;
}

#right ul li a:hover {
    background: url('/assets/images/global/subNavBg.gif') -258px 0px no-repeat;
    color: #fff;
    text-decoration: none;
}

#right ul li.on a {
    background: url('/assets/images/global/subNavBg.gif') -516px 0px no-repeat;
    color: #fff;
}

/**************** sub nav *************/

#right ul li.sub  div{
    background: url('/assets/images/global/subNavOpenTop.gif') left top no-repeat;
}

#right ul li.sub ul {
    background: url('/assets/images/global/subNavOpenBottom.gif') left bottom no-repeat;
    border: none;
}

#right ul li.sub a {
    background: url('/assets/images/global/subNavArrows.gif') -0px 16px no-repeat;;
}

#right ul li.sub a:hover {
    background: url('/assets/images/global/subNavArrows.gif') -258px 16px no-repeat;;
}

#right ul li.sub ul li a:hover {
    background: url('/assets/images/global/subNavArrows.gif') -1032px 12px no-repeat;;
    
}

#right ul li.sub a.on {
    background: url('/assets/images/global/subNavArrows.gif') -516px 16px no-repeat;
    color: #fff;
}

#right ul li.sub ul li a.on {
    background-position: -516px 12px;
}

#right ul li.sub ul li a {
    padding: 8px 0 5px 19px;
    background-position: -774px 12px;
}


/************************* footer *********************/

#footer {
    padding: 20px 0 0;
    background: url('/assets/images/global/footer.gif') 0px 20px repeat-x;
    clear: both;
}


#footerInner {
    width: 931px;
    margin: 0 auto;
    min-height:74px;
      height:auto !important;
      height:74px;
      
}

#footerInner ul {
    width: 562px;
    float: left;
    padding: 10px 0 0;
    border: none;
}

#footerInner ul li {
    display: inline;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    padding: 0 5px 0 0;
    background: none;
}

#footerInner ul li a {
    color: #fff;
}

#footer li a:hover {
    text-decoration: underline;
}

#footer li.first {
    padding: 0 20px 0 0;
}

#footer a {
    text-decoration: none;
    
}

#footer a:hover span {
    color: #f37022;
}

#footerInner div {
    width: 268px;
    float: right;
    padding: 8px 1px 0 0;
    text-align: right;
}

#footerInner img {
    padding: 0 0 10px 0;
}

#footerInner div a {
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
}

/**************** crumbs *************/

#crumbs {
    background: url('/assets/images/global/crumbsBg.gif') left top no-repeat;
    height: 30px;
    padding: 1px;
    margin: 0 0 20px 0;
    border: none;
}

#crumbs li {
    display: block;
    float: left;
    height: 25px;
    padding: 5px 19px 0 10px;
    background: url('/assets/images/global/crumbsDivide.gif') right top no-repeat;
}

#crumbs li a {
    text-transform: uppercase;
    font-size: 13px;
    color: #939393;
}

#crumbs li a:hover {
    color: #fff;
}

#crumbs li.last {
    background: none;
}

#crumbs li.last a {
    color: #fff;
}

/**************** left col *************/

#left {
    background: url('/assets/images/global/contLeftTop.jpg') left top no-repeat;
    width: 654px;
    float: left;
}

#leftInner {
    background: url('/assets/images/global/contLeftBottom.gif') left bottom no-repeat;
    min-height:480px;
      height:auto !important;
      height:480px;
    padding: 15px;
}

/**************** right col *************/

#right {
    width: 260px;
    float: right;
}


/************************* background *********************/

#innerBlank {
    background: #000 url('/assets/images/backgrounds/innerBlank.jpg') center top no-repeat;
}

#comingSoon {
    background: #000 url('/assets/images/backgrounds/comingSoonHome2011.jpg') center top no-repeat;
}

#fadedSurfer {
    background: #000 url('/assets/images/backgrounds/fadedSurfer.jpg') center top no-repeat;
    
}


/****************************************** unique ***************************************/

/************************* home *********************/

#homeLeft {
    width: 694px;
    padding: 1px 0 0;
    float: left;
}

#hButtons {
    width: 610px;
    height: 115px;
    margin: 245px 0 10px 70px;
    position: relative;
}

#hBoards {
	position: absolute;
	top: 10px;
	right: 0px;
}

#hPerf, #hLong,#hFun,  #hKitesurf {
    text-indent: -99999px;
    position: absolute;
    display: block;
    height: 24px;
    background-image: url('/assets/images/home/words.gif');
}

#hPerf {
    left: 348px;
    top: 10px;
    width: 237px;
    background-position: 0px 0px;
}

#hPerf:hover {
    background-position: 0px 24px;
}

#hFun {
    left: 525px;
    top: 34px;
    width: 60px;
    background-position: -237px 0px;
}

#hFun:hover {
    background-position: -237px 24px;
}

#hLong {
    left: 502px;
    top: 58px;
    width: 84px;
    background-position: -298px 0px;
}

#hLong:hover {
    background-position: -298px 24px;
}


#hKitesurf {
    top: 82px;
    left: 438px;
    width: 149px;
    background-position: -382px 0px;
}

#hKitesurf:hover {
    background-position: -382px 24px;
    
}

#ads {
    background: url('/assets/images/global/whiteDot.gif') left top repeat-x;
    margin: 0px 0 0;
    padding: 8px 0 0 1px;
}

#ads div {
    width: 226px;
    height: 160px;
    float: left;
    margin: 0 7px 0 0;
}

#ads #hThree {
    margin: 0;
}


#homeRight {
    width: 230px;
    float: left;
    padding: 0 0 0 6px;
}

.hRInner {
    padding: 0 6px;
}

#homeRight h2 {
    font-size: 13px;
    padding: 3px 0px 7px 4px;
    background: url('/assets/images/home/logoSmall.gif') right top no-repeat;
    margin: 0 0 25px 0;
}

.nItem {
    font-size: 11px;
    color: #fff;
    display: block;
    padding: 0 6px 10px 6px;
    border-bottom: 1px solid #293436;
    margin: 0 0 10px 0;
}

.nItem:hover {
    text-decoration: none;
    background: url('/assets/images/home/arrow.gif') right top no-repeat;
}

.nItem span {
    color: #9a9a9a;
    display: block;
    margin: 0 0 1px 0;
    font-size: 10px;
}

.hArrowLink {
    display: block;
    float: right;
    background: url('/assets/images/home/tri.gif') 100% 4px no-repeat;
    font-size: 11px;
    color: #fff;
    padding: 0 10px 0 0;
}

.hArrowLink:hover {
    text-decoration: underline;
}

#hAbout {
    clear: both;
    padding: 4px;
}

#hAbout h3 {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

#hAbout p {
    font-size: 11px;
    line-height: normal;
}

#hReadMore {
    background: url('/assets/images/home/readMoreBg.gif') left top no-repeat;
    display: block;
    width: 116px;
    height: 17px;
    color: #fff;
    font-size: 11px;
    padding: 4px 0 0 5px;
}

#hReadMore:hover {
    text-decoration: none;
    background-position: left bottom;
}
/************************* news page *********************/

#newsMain {
    clear: both;
    width: 925px;
    background: url('/assets/images/news/bottomRightCorner.gif') right bottom no-repeat;
}

#newsMainInner {
    min-height:500px;
      height:auto !important;
      height:500px;
    background: url('/assets/images/news/topRightCorner.gif') right top no-repeat;
}

#nLeft {
    width: 224px;
    float: left;
}

#nLeft ul {
    margin: 0;
    padding: 0;
    border: none;
}

#nLeft ul li {
    display: block;
    background: none;
    margin: 0 0 1px 0;
    padding: 0;
}

#nLeft ul li.last {
    margin: 0;
}

#nLeft ul li a {
    display: block;
    background: url('/assets/images/news/buttonBg.gif') left top no-repeat;
    font-size: 12px;
    color: #000;
}

#nLeft ul li a:hover {
    background: url('/assets/images/news/buttonBg.gif') right top no-repeat;
}

#nLeft ul li a:hover span {
    background: url('/assets/images/news/blackArrow.gif') 97% 50% no-repeat;    
}

#nLeft ul li.on a {
    background-image: none;
    background-color: #fff;
}

#nLeft ul li.on a span {
    background: url('/assets/images/news/blackArrow.gif') 97% 50% no-repeat;    
    
}


#nLeft ul li a span {
    display: block;
    background: url('/assets/images/news/greyArrow.gif') 97% 50% no-repeat;
    padding: 6px 10px 6px 6px;
}

#nRight {
    float: right;
    width: 668px;
    padding: 7px 25px 7px 7px;
}

#nRight p {
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #444444;
    line-height: 16px;
}

#nRight p img {
    float: left;
    margin: 0 7px 7px 0;
    border: 1px solid #989898;
}

#nRight h2 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: #262626;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 10px 0;
    background: none;
}

#nRight h2 span {
    padding: 0 15px 0 0;
    color: #b1b1b1;
}


/************************* board chooser *********************/

.chooser h1 {
    width: 308px;
    float: left;
}

#boardNav {
    width: 595px;
    float: right;
    text-align: right;
    padding: 0 0 20px 0;
}

#boardNav select {
    margin: 0 0 10px 0;
}


#boards {
    clear: both;
    background: url('/assets/images/global/dotGrey.gif') left top repeat-x;
    padding: 13px 0 0 19px;
}

#boards a {
    display: block;
    width: 207px;
    height: 256px;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    padding: 14px 0 0 14px;
    background-repeat: no-repeat;
    background-position: left top;
    margin: 0 1px 1px 0;
    float: left;
}

#boards a:hover {
    text-decoration: none;
    background-position: right top;
}

/************************* product viewer *********************/

#prod {
    width: 930px;
    background: url('/assets/images/htmlViewer/boxBottom.gif') left bottom no-repeat;
    padding: 0 0 13px 0;
}

#prodInner {
    min-height:400px;
      height:auto !important;
      height:400px;
    background: url('/assets/images/htmlViewer/boxTop.gif') left top no-repeat;
    position: relative;  
    padding: 20px 10px 0 22px;
}

#cross {
    position: absolute;
    left: 908px;
    top: -6px;
}

#pTLeft {
    width: 161px;
    float: left;
}

#pTMiddle {
    width: 566px;
    float: left;
    padding: 55px 0 0;
    text-align: center;
    
}

#pTMiddle img {
    padding: 0 0 20px 0;
}

#pTRight {
    width: 153px;
    float: left;
    text-align: right;
    padding: 15px 0 0;
}

#pTRight h1 {
    width: normal;
}

#prod h3 {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px 0;
}

#legend {
    padding: 10px 0;
}

#pTLeft {
    padding: 13px 0 0;
}
#prodLogos {
    clear: both;
    padding: 10px 0 0;
    margin: 0 0 20px 0;
}

#prodLogos img{
    padding: 0 10px 0 0;
}

#prodSpec h2 {
    font-size: 18px;
    margin: 0 0 28px 0;
}

#specLeft {
    width: 404px;
    float: left;
}

#specRight {
    width: 389px;
    float: left;
    padding: 0 0 0 50px;
}

/************************* gallery *********************/


#gallery a {
    float: left;
    width: 137px;
    height: 130px;
    border: 1px solid #fff;
    position: relative;
    margin: 0 17px 17px 0;
}

#gallery a img {
    position: absolute;
    left: 0px;
    top: 0px;
}

.thumbOverlay {
    display: none;
}

#gallery a:hover .thumbOverlay {
    display: inline;
}

/************************* categories *********************/

#cat {
    border: none;
    margin: 0;
    padding: 0;
}

#cat li {
    float: left;
    background: none;
    margin: 0;
    padding: 0;
    width: 309px;
    height: 207px;
    text-indent: -99999px;
    margin: 0 1px 1px 0;
}

#cat a {
    display: block;
    width: 309px;
    height: 207px;
}

.cHolder {
    width: 309px;
    height: 207px;
    background: url('/assets/images/cat/bg.png') left top repeat;
}

#cPerf {
    background: url('/assets/images/cat/panels.jpg') left top no-repeat;
}

#cPerf:hover {
    background-position: right top;
}

#cFun {
    background: url('/assets/images/cat/panels.jpg') 0px -207px no-repeat;
}

#cFun:hover {
    background-position: 100% -207px;
}    

#cLong {
    background: url('/assets/images/cat/panels.jpg') 0px -414px no-repeat;
}

#cLong:hover {
    background-position: 100% -414px;
}

#cKite {
    background: url('/assets/images/cat/panels.jpg') 0px -621px no-repeat;
}

#cKite:hover {
    background-position: 100% -621px;
}

#cat #cAcc {
    background: url('/assets/images/cat/panels.jpg') 0px -828px no-repeat;
}

/************************* tech pages *********************/

#techNav {
    margin: 0;
    padding: 0;
    border: none    ;
}

#techNav li {
    float: left;
    background: none;
    margin: 0;
    padding: 0;
}

#techNav li a {
    display: block;
    width: 198px;
    height: 123px;
    text-indent: -99999px;
    background-image: url('/assets/images/tech/tech-buttons.jpg');
    background-repeat: no-repeat;
    margin: 0 10px 0 0;
}

#tCustom a {
    background-position: 0px 0px;
}

#tCustom a:hover {
    background-position: -198px 0px;
}


#tSurflite a {
    background-position: 0px -123px;
}

#tSurflite a:hover {
    background-position: -198px -123px;
}


#tElite a {
    background-position: 0px -246px;
    margin: 0;
}

#tElite a:hover {
    background-position: -198px -246px;
}

#leftInner #techTitle {
    width: 625px;
    height: 55px;
    background: url('/assets/images/tech/techBgTop.gif') left top no-repeat;
    margin: 0 0 20px 0;
    padding: 6px 0 0;
    text-align: center;
}

/************************* distributors *********************/


#dist td {
    border:1px dotted #5f6062;
    background: none;
    margin: 0;
    padding: 0;
	height: 181px;
	padding:13px;
	width: 33%;
}

#dist h3 {
    font-size: 20px;
    margin: 0 0 6px 0;
}

#dist a {
    color: #fff;
}

#dist h3 img {
    padding: 0 10px 0 0 ;
}

#dist p.phone,#dist p.email {
	margin:5px 0;
	padding: 0 0 0 27px;
}

.phone {
    background: url('/assets/images/global/phoneIcon.gif') 0px 2px no-repeat;
}

.email {
    background: url('/assets/images/global/emailIcon.gif') 0px 5px no-repeat;
}


/************************* links *********************/

.link {
    background: url('/assets/images/home/dot.gif') left bottom repeat-x;
    clear: both;
    padding: 0 0 1px 0;
    margin: 0 0 18px 0;
}

.link a {
    font-size: 11px;
    color: #bdbdbd;
}

.link h3 {
    margin: 0 0 3px 0;
}

.link h3 a {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.link p {
    padding: 10px 0 0;
}