body { margin:0px; padding:0px; font:1em verdana,arial sans-serif; /*behavior:url(main/csshover.htc); */ background-color:#FFFFff; background-image:url(/animate_back/wheels.gif); border-right: auto; border-left: auto; } tr {background-color:#ffffff} a {color:#000000} a img {border:none;} a:hover{text-decoration:none;color:#cc3333;} a:active{color:#339933;} a:visited{text-decoration:none;} p {font-size:.9em;} p span {font-size:1.2em;font-style:oblique;} li span {font-size:1.1em;letter-spacing:.1em;} .yellow_box {background-color:#E9E9E9;padding:6px;font:tahoma} .right_border {border-right:#cccccc 1px solid;padding:8px} .left_border {border-left:#cccccc 1px solid;padding:12px} .SBC {color:#FF3333;font-size:1.1em;font-family:Verdana, Arial, Helvetica, sans-serif} .SBC a link {color:red;font-size:1.em} .SBC a hover {color:white;font-size:1.0 em;letter-spacing:.03em} .fl {float:left;padding:0 4px ;} .ital {font-style:italic} .obl {font-style:oblique; font-size:1.05em} .cntr {text-align:center;align:} .clr {clear:both} .bold {font-weight:bold;} .lft {text-align:left;} .bdr {border:1px solid #33cc33;text-align:left;padding:2px;background-color:#ffffec;} .wd {letter-spacing:.2em;text-align:center;font-size:1.2em} .left {float:left;padding:4px} .right {float:right;padding:4px;} .right {float:right;padding:4px} .cold { font-size: 1.5em; color: #0066FF; font-style: italic; font-weight: bold;} /* tbf header menu bar starts here*-------------------------------------------------------------------------------------------------------------*/ div#logo_box {width:720px;border:1px solid #000000;background-color:#fff;margin-left:0px;margin-bottom:1px} div#menu {width:720px;border-bottom:1px solid #000099; border-top:1px solid #000099;background-color:#33cc33; border-left:1px solid #000099;border-right:1px solid #000099;padding:0;font-size:1em;margin-top:1px;margin-left:0px;margin-bottom:40px;font-family: Verdana, sans-serif;} div#menu ul{margin:0 0 0 30px;}/*indents ul from edge of container*/ div#menu li{float:left;position:relative;background-color:#ffffec;list-style-type:none;border-right:1px solid #000099;} div#menu li:first-child{border-left:1px solid #000099;} /*first vertical line*/ div#menu li:hover{background-color:#ffffff;}/*sets background of the menu items*/ div#menu a{text-decoration:none;color:#0033CC;padding:0 6px;} div#menu a:hover {color:#F33;} * html div#menu ul { float:left; /* makes the ul wrap the li's */ border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */ margin-left:18px; /* IE doubles the given value above - why? */ } * html a {display:block;} .clr {clear:both} /*Rounded green box--------------------------------------------------------------------*/ .bl {background: url(../animate_back/borders/bl.gif) 0 100% no-repeat #33cc33; width:95%} .br {background: url(../animate_back/borders/br.gif) 100% 100% no-repeat} .tl {background: url(../animate_back/borders/tl.gif) 0 0 no-repeat} .tr {background: url(../animate_back/borders/tr.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} /*Rounded gray box--------------------------------------------------------------------------*/ .bl_gry {background: url(../animate_back/borders/bl_gry.gif) 0 100% no-repeat #e9e9e9; width:95%} .br_gry {background: url(../animate_back/borders/br_gry.gif) 100% 100% no-repeat} .tl_gry {background: url(../animate_back/borders/tl_gry.gif) 0 0 no-repeat} .tr_gry {background: url(../animate_back/borders/tr_gry.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} /*rounded yellow box--------------------------------------------------------------------- */ .bl1 {background: url(../animate_back/bl1.gif) 0 100% no-repeat #ffffec; width:95%} .br1 {background: url(../animate_back/borders/br1.gif) 100% 100% no-repeat} .tl1 {background: url(../animate_back/borders/tl1.gif) 0 0 no-repeat} .tr1 {background: url(../animate_back/borders/tr1.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} /*rounded black box */ .bl_blk {background: url(../animate_back/borders/BLK_bl.jpg) 0 100% no-repeat #000000; width:95%} .br_blk {background: url(../animate_back/borders/BLK_br.jpg) 100% 100% no-repeat} .tl_blk {background: url(../animate_back/borders/BLK_tl.jpg) 0 0 no-repeat} .tr_blk {background: url(../animate_back/borders/BLK_tr.jpg) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} /*green round borders-----------------------------------------------------------------*/ .t {background: url(../animate_back/borders/green_dot.gif) 0 0 repeat-x; width:100%} .b {background: url(../animate_back/borders/green_dot.gif) 0 100% repeat-x} .l {background: url(../animate_back/borders/green_dot.gif) 0 0 repeat-y} .r {background: url(../animate_back/borders/green_dot.gif) 100% 0 repeat-y} .bdr_bl {background: url(../animate_back/borders/bl_crv.gif) 0 100% no-repeat} .bdr_br {background: url(../animate_back/borders/br_crv.gif) 100% 100% no-repeat} .bdr_tl {background: url(../animate_back/borders/tl_crv.gif) 0 0 no-repeat} .bdr_tr {background: url(../animate_back/borders/tr_crv.gif) 100% 0 no-repeat; padding:10px} .bdr_tl_gry {background: url(../animate_back/borders/tl_crv_gry.gif) 100% 0 no-repeat; padding:10px} /*red round borders---------------------------------------------------------------------------*/ .red_t {background: url(../animate_back/borders/red_dot.jpg) 0 0 repeat-x; width:100%} .red_b {background: url(../animate_back/borders/red_dot.jpg) 0 100% repeat-x} .red_l {background: url(../animate_back/borders/red_dot.jpg) 0 0 repeat-y} .red_r {background: url(../animate_back/borders/red_dot.jpg) 100% 0 repeat-y} .red_bdr_bl {background: url(../animate_back/borders/bl_R_crv.jpg) 0 100% no-repeat} .red_bdr_br {background: url(../animate_back/borders/br_R_crv.jpg) 100% 100% no-repeat} .red_bdr_tl {background: url(../animate_back/borders/tl_R_crv.jpg) 0 0 no-repeat} .red_bdr_tr {background: url(../animate_back/borders/tr_R_crv.jpg) 100% 0 no-repeat; padding:10px} /*red round borders with light yellow background----------------------------------------------------*/ .red_t {background: url(../animate_back/borders/red_dot.jpg) 0 0 repeat-x; width:90%} .red_b {background: url(../animate_back/borders/red_dot.jpg) 0 100% repeat-x} .red_l {background: url(../animate_back/borders/red_dot.jpg) 0 0 repeat-y} .red_r {background: url(../animate_back/borders/red_dot.jpg) 100% 0 repeat-y} .red_bdr_bl_yb {background: url(../animate_back/borders/bl_R_crv_YB.jpg) 0 100% no-repeat} .red_bdr_br_yb {background: url(../animate_back/borders/br_R_crv_YB.jpg) 100% 100% no-repeat} .red_bdr_tl_yb {background: url(../animate_back/borders/tl_R_crv_YB.jpg) 0 0 no-repeat} .red_bdr_tr_yb {background: url(../animate_back/borders/tr_R_crv_YB.jpg) 100% 0 no-repeat; padding:10px} /* CSS popup windows - ride table,Sunday----------------------------------------------------------------------------------------------------------------------- */ div#links a span {display: none;} div#links a:hover span {display:block; position:absolute; top:40px; left:10px; width:280px; padding: 5px; margin: 10px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;font-weight:inherit; -moz-border-radius: 8px; -webkit-border-radius: 8px; } div#linksR a span {display:none;} div#linksR a:hover span {display:block; position:absolute; top:40px; left:-100px; width:280px; padding: 5px; margin: 10px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;font-weight:inherit; } div#links2 a span {display: none;} div#links2 a:hover span {display:block; position:absolute; top:60px; left:-20px; width:150px; padding: 5px; margin: 10px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;font-weight:inherit; -moz-border-radius: 8px; -webkit-border-radius: 8px; } div#links3 a span {display: none;} div#links3 a:hover span {display:block; position:absolute; top:-10px; right:-400px; width:500px; padding: 5px; margin: -20px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font:12px Tahoma,sans-serif bold; text-align:center;font-weight:inherit; -moz-border-radius: 8px; -webkit-border-radius: 8px; } div#SBCinfo a span {display:none;} div#SBCinfo a:hover span {display:block; position:absolute; top:40px; left:10px; width:600px; padding: 5px; margin: 10px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font: 14px Tahoma, sans-serif; text-align:center;font-weight:bold; -moz-border-radius: 10px; -webkit-border-radius: 10px; } div#rightColumnInfo a span {display:none;} div#rightColumnInfo a:hover span {display:block; position:absolute; top:40px; left:-400px; width:600px; padding: 5px; margin: 1px; z-index: 900;border:solid thin #000000; color: #000; background: #ffffec; font: 14px Tahoma, sans-serif; text-align:left;font-weight:bold; -moz-border-radius: 10px; -webkit-border-radius: 10px; } div#link_rel {position:relative} /* Shadow -------------------------------------------------------------------------------------------*/ .blurshadow { box-shadow: 7px 7px 8px #818181; -webkit-box-shadow: 7px 7px 8px #818181; -moz-box-shadow: 7px 7px 8px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true); } /* .shadow { box-shadow: 5px 5px #818181; -webkit-box-shadow: 5px 5px #818181; -moz-box-shadow: 5px 5px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); } */ .shadow3 { border: 1px solid silver; padding: 1px; position: relative; display:block; background: white; z-index: 100 } .shadow2 { overflow: hidden; position: absolute; filter: alpha(Opacity=15); /* modify to change the shade solidity/opacity, same as below */ opacity: 0.05; /* firefox 1.5 opacity */ -moz-opacity: 0.2; /* mozilla opacity */ -khtml-opacity: 0.1; /* opacity */ z-index: 10 } /* show/hide div----------------------------------------------------------------------------------------------------------------- */ div.quote {margin-left: 25%;padding: 10px;background-color: #FFCF31;border: 1px solid #00009C;width: 440px;} div.quote p {font-size: .8em;margin: 0px 0px 0px 0px;} div#commentForm {display: none;margin: 0px 20px 0px 20px;font-family: Arial, sans-serif;font-size: .8em;} a.commentLink {font-family: Arial, sans-serif;font-size: .9em;} div#mainwrap {width:880px; margin-left:auto; margin-right:auto; margin-top:10px; border:2px solid #33cc33;border-style:ridge; background-color:#FFFFFF;-moz-border-radius: 8px; -webkit-border-radius: 8px;} div#mainwrap2 { width:880px;margin-left:auto;margin-right:auto;margin-top:10px; background-color:#FFFFFF } div#contentarea {width:860px;margin-left:auto;margin-right:auto;margin:6px 0;background-color: #FFFFFF;} /* lh column navigation */ div#nav li {list-style-type:none;margin:5px 5px 20px -30px;} div#col_140_flyer {width:140px; background-color:#Fff; float:left;margin-right:60px;} div#col_140_flyer li {list-style-type:none;margin:5px 10px 20px -14px;} div#col_140 {width:140px;background-color:#fff;background:url(../animate_back/link.gif) repeat-y;float:left} div#ridetable {width:796px; background-color:#Fff;text-align:left;margin:5px 0 0 36px;} div#box {float:left;margin:8px 0 0 0px;width:636px;background-color:#fff;font-size:0.9em;padding:0;margin-left:auto;margin-right:auto;} div#small_box {width:400px;border:1px solid #333;background-color:#ccc;padding:10 4 10 10;margin:4px 0 0 160;text-align:center;} div#small_box ul {margin:20px 0 20 10;} div#small_box li {margin:30px 0 30 20} div#box_FR {margin:8px 0 0 0px; width:640px; background-color:#fff; float:none; font-size:0.9em;padding:0; } div#nav{width:140px; background-color:#fff; float:left;} div#nav li {list-style-type:none;margin:5px 5px 20px -30px;} div#list li {margin:5px 0 15px 0} div#column300 {width:300px; text-align:center;padding:5px;float:left;} div#column360 {width:360px; text-align:left;padding:5px;margin-top:15px} div#column1 {width:440px;background-color:#FFF;float:left;margin:0 0 0 10px;padding:0 0 0 10px;} div#column1 li {list-style-type:square;margin-top:20px} div#column1 ol li {list-style:decimal} div#column2 {width:200px;background-color:#fFF;float:left;margin-left:80px} div#column2 ul li {margin-bottom:10px;font-size:.9em} div#column2 ul {margin-bottom:60px;margin-left:0} div#column3_box {width:720px;border:1px solid #000000;background-color:#33cc33;margin-left:44px} div#column3 {width:260px;float:left;margin-top:10px;text-align:left;} div#column3 h4 a:hover {background-color:#Fff;color:#FF9900} div#column3 li {margin-bottom:10px;} div#footer {width:796px; background-color:#Fff;margin-left:auto;margin-right:auto;text-align:center;margin:20px 0 20px 0;border:none } .clearfloats {clear:both;} /* menu bar starts here------------------------------------------------------------------------------------------------------------*/ div#listmenu { width:90%; float:left; border-bottom:1px solid #000099; border-top:1px solid #000099; background-color:#33cc33; border-left:1px solid #000099; border-right:1px solid #000099; padding:0; font-size:0.8em; margin-top:10px; margin-left:20px; margin-right:auto; font-variant: small-caps; } div#listmenu ul{margin:0 0 0 30px;}/*indents ul from edge of container*/ div#listmenu li{float:left;position:relative;background-color:#ffffec;list-style-type:none;border-right:1px solid #000099;} div#listmenu li:first-child{border-left:1px solid #000099;} /*first vertical line*/ div#listmenu li:hover{background-color:#fff;}/*sets background of the menu items*/ div#listmenu a{text-decoration:none;color:#0033CC;padding:0 6px;} div#listmenu a:hover {color:#F33;} div#scroller {overflow: hidden; white-space: nowrap; width: 40%; padding: 5px; border: 1px solid #ccc;} /* THE HACK ZONE - -----------------------------------------------------------------------------------------------------*/ /* hack for IE (all flavors) so the menu has a vertical line on the left */ * html div#listmenu ul { float:left; /* makes the ul wrap the li's */ border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */ margin-left:18px; /* IE doubles the given value above - why? */ } * html a {display:block;} /* makes IE5 & 5.5 accept the padding on the link */ /* end of hack zone */ /* END OF LIST-BASED MENU */ /* Ride Page formatting---------------------------------------------------*/ div#leftcol {width:220px; background-color:#fff; float:left;margin:0 ;padding:0;} div#leftcol li { left:0;list-style-type:none;border-left:1px solid #33cc99;border-right:1px solid #33cc99; border-bottom:1px solid #33cc99;padding:2px 2px } div#leftcol ul li:first-child{border-top:1px solid #33cc99;} div#leftcol ul {margin:0;} * html div#leftcol ul {border-top:1px solid #33cc99;} /* adds the top border IE6*/ * html div#rightcol ul {border-top:1px solid #33cc99;} /* adds the top border IE6*/ div#rightcol ul li {list-style-type:none;border-left:1px solid #33cc99;border-right:1px solid #33cc33;border-bottom:1px solid #33cc99;padding:2px 2px} div#rightcol ul li:first-child{border-top:1px solid #33cc33;} div#rightcol ul {margin:0px} div#centercol {text-align:left; width:340px; background-color:#ffffec; float:left; margin-right:10; } div#rightcol {width:212px; background-color:#ffF; float:left} div#rightcol ul {text-align:center;} div#rightcol h4 {text-align:center;} div#ridetable {margin-top:10px;font-size:.9em;} div#tuesun {width:140px;border:hidden;padding:0px 0 0 8px;text-align:left ;margin:30px 0 10px 5px;float:left;} div#tuesun ul li {border:none;margin-top:5px;margin-bottom:20px;list-style-image:url(../animate_back/borders/green_square.gif)} div#tuesun ul li:first-child {border-top:none;border-bottom:none;} * html div#tuesun ul {border-top:none;} /*deletes the top border IE6 */ /* EMAIL FORM -----------------------------------------------------------------------------------------------------------------------*/ div#formcontainer {width:454px; margin-left:30px;border:1px solid #33cc33;padding:3px;margin-top:10px;} div#formcontainer form {border-top: 2px solid #CCC; border-bottom: 3px solid #CCC;} /* the top border is visually 1 px thicker because it touches the div.clearfix bordertop */ div#formcontainer div.clearfix {border: 1px solid #CCC; padding:10px 0px; vertical-align:top;} /* adds the line above each section and provides vertical spacing */ div#formcontainer form label {width:180px; float:left;font-size:.9em; color: #003366; margin:0 10px;} /* this is the text label on the left of each input */ /*some extra styles for the checkbox and radio button sets*/ div#formcontainer div.buttongroup {float:left; margin:0px; padding:0px;} /* a container for a groups of buttons - suppresses the clearfix div top border on the divs around the radio buttons/checkboxes */ div#formcontainer div.buttongroup div {margin-bottom:5px; font-size:.75em;} /* wrapper for the INPUT and its text - margin-bottom sets the vertical distance between buttons */ div#formcontainer div.buttongroup input {margin-right:5px;} /* set the distance between button and its label text */ /* postions the submit button by selecting a div with attribute type SUBMIT - IDWIMIE */ div#formcontainer input[type="submit"] {display:block; margin-left:auto; margin-right:10px;} /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */ /* simply add the clearfix class to any containter that must enclose floated elements */ /* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { content: "."; /* the period is placed on the page as the last thing before the div closes */ display: block; /* inline elements don't respond to the clear property */ height: 0; /* ensure the period is not visible */ clear: both; /* make the container clear the period */ visibility: hidden; /* further ensures the period is not visible */ } .clearfix {display: inline-block;} /* a fix for IE Mac */ /* fading popups */ .demoPopup { border: solid 1px #333; font-family: Tahoma; font-size: 12px; display:inherit position:inherit width: 300px; z-index: 60; } .demoPopuptitle { background: blue; color: white; font-weight: bold; height: 15px; padding: 5px; } .demoPopupbody { background: #ddd; padding: 5px; text-align: center; } #demoPopup1 { top: 100px; left: 50px; } #demoPopup2 { top: 100px; left: 400px; } /* fading popups end */