/*

	Theme Name: Rainbow Recreation

	Theme URI: 

	Description: 

	Version: 

	Author: 

	Author URI: 

*/

/* LAST UPDATED 03.01.2010 */

/*

	Table of Contents

	I.    DEFAULTS

	II.   NAVIGATION

	III.  STRUCTURE & TYPOGRAPHY

	IV.   TABLES

	V.    FORMS

	VI.   HEADINGS

	VII.  COMMENTS

1

*/

/* -----------------------------------------------------------

		I. DEFAULTS

----------------------------------------------------------- */

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 1.4em;
	/*background: #fff url('images/bg.jpg') top center repeat;*/

	background: #002800 url('images/bg-greengrass.jpg') top center repeat-x;
}
p {
	margin: 0;
	padding: 5px 0 16px 0;
}
a {
	color: #539941;
	text-decoration: underline;
}
a:hover {
	color: #000;
}
a img {
	border: 0;
}
img.border {
	border: 1px #000 solid;
}
img.alignright {
	float: right;
	margin: 2px 0 2px 14px;
}
img.alignleft {
	float: left;
	margin: 2px 14px 2px 0;
}
.right {
	text-align: right;
	padding-bottom: 8px;
}
ul {
	margin: 0;
	padding: 0 0 8px 20px;
}
#mainContent ul {
	list-style: none;
}
#mainContent li {
	padding: 0 0 6px 22px;
	background: url('images/bulleted.png') 0 1px no-repeat;
}
#mainContent li ul {
	padding: 2px 0 3px 18px;
}
#mainContent li ul li {
	padding: 5px 0 3px 4px;
	background: none;
	list-style-type: circle;
}
#mainContent li.answer {
	padding: 10px 0 20px 42px;
	background: none;
}
#mainContent ol li {
	background: none;
}
/* -----------------------------------------------------------

		II. NAVIGATION

----------------------------------------------------------- */

#nav ul {
	list-style: none;
	padding: 0;
	display: table;
	margin: 0 auto; /* center align list */
}
#footerMenu {
	text-align: center;
}
#footer ul {
	line-height: 1.1em;
	margin-bottom: 10px;
	font-size: 12px;
}
#nav li {
	float: left;
	padding: 7px 12px 0;
	background: url('images/bg-navDivider.gif') 100% 50% no-repeat;
}
#footer li {
	padding: 7px 12px 0;
	background: url('images/bg-navDivider.gif') 100% 50% no-repeat;
}
#footer li {
	padding: 0 5px;
	background: none;
	border-right: 1px #aaa solid;
	display: inline;
	position: relative;
}
#footer li.last {
	border-right: none;
}
#nav li#nav-contact {
	background: none;
}
#footer li.last {
	border-right: 0;
}
#nav li a {
	display: inline-block;
	height: 59px;
	line-height: 50px;
	padding: 0 20px;
	font-family: "Trebuchet MS", Georgia, Times, Serif;
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#footer a {
	color: #888;
}
#nav li a:hover, #nav li.current a {
	color: #154aae;
	background: #f7f7f7 url('images/bg-navLine.gif') 50% 90% no-repeat;
}
#nav li a.home:hover, #nav li.current a.home {
	color: #f7f7f7;
	background: url(images/underline.gif) no-repeat 8px 40px;
}
#footer a:hover {
	color: #000;
}
.megamenu {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	margin-left: 4px;
	padding: 0 8px 9px;
	width: 521px;
	height: 273px;
	z-index: 100;
	background: url('images/bg-megaMenu-trans.png') no-repeat;
}
.megamenu .smaller {
	font-size: 0.8em;
	line-height: 1.2em;
	padding: 5px 0 0 6px;
}
.megamenu .column {
	float: left;
	padding: 10px 0 0 20px;
	width: 220px;
	margin-right: 15px;
	background: #f7f7f7;
}
.megamenu .partyPhoto {
	float: left;
	padding: 10px 0 0 20px;
	width: 170px;
	margin-right: 15px;
	background: #f7f7f7;
}
.megamenu .partyInfo {
	float: left;
	padding: 10px 0 0 10px;
	width: 270px;
	margin-right: 15px;
	background: #f7f7f7;
}
.megamenu .partyInfo p {
	padding: 15px 0;
}
.megamenu .partyPhoto img {
	margin-top: 10px;
}
.megamenu .partyPhoto a {
	font-size: 0.8em;
	margin-left: 8px;
	color: #154aae;
}
.megamenu .partyPhoto a:hover {
	color: #000;
}
.megamenu .column {
	float: left;
	padding: 10px 0 0 20px;
	width: 220px;
	margin-right: 15px;
	background: #f7f7f7;
}
.megamenu .column a {
	font-size: 0.7em;
}
.megamenu .column ul, .megamenu .partyInfo ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.megamenu .column ul li, .megamenu .partyInfo ul li {
	margin-bottom: 8px;
	padding-bottom: 8px;
	background: url('images/bg-megaNavLi.gif') bottom left no-repeat;
}
.megamenu .column ul li.last, .megamenu .partyInfo ul li.last {
	margin-bottom: 0;
	padding-bottom: 0;
	background: none;
}
.megamenu .column ul li a {
	display: block;
	padding-top: 7px;
	height: 54px;
	font-size: 15px;
	line-height: 1.2em;
	padding-left: 74px;
	color: #154aae;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
.megamenu .partyInfo ul li a, .megamenu a.bigLink {
	padding: 0 0 0 18px;
	font-size: 15px;
	line-height: 1.2em;
	color: #154aae;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	background: url(images/arrow.gif) no-repeat 2px 3px;
}
.megamenu a.bigLink {
	margin: 6px 0 6px 3px;
	display: block;
	font-size: 15px;
	line-height: 1.2em;
	color: #154aae;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
.megamenu .column ul li a.residentialIcon {
	background: url('images/iconResidential.jpg') top left no-repeat;
}
.megamenu .column ul li a.commercialIcon {
	background: url('images/iconCommercial.jpg') top left no-repeat;
}
.megamenu .column ul li a.playSurfacesIcon {
	background: url('images/iconPlaySurfaces.jpg') top left no-repeat;
}
.megamenu .column ul li a.basketballIcon {
	background: url('images/iconBasketball.jpg') top left no-repeat;
}
.megamenu .column ul li a.trampolineIcon {
	background: url('images/iconTrampoline.jpg') top left no-repeat;
}
.megamenu .column ul li a.playHousesIcon {
	background: url('images/iconPlayHouses.jpg') top left no-repeat;
}
.megamenu .column ul li a.gTrainerIcon {
	background: url('images/iconGTrainer.jpg') top left no-repeat;
}
.megamenu .column ul li a:hover, .megamenu .partyInfo ul li a:hover {
	color: #000;
}
.specialOffers {
	position: absolute;
	top: 242px;
	left: 30px;
	display: block;
	height: 29px;
	line-height: 29px;
	padding-left: 35px;
	font-size: 15px;
	color: #154aae;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	background: url('images/button-next.gif') top left no-repeat;
}
.megamenu #emailWrapper {
	position: absolute;
	top: 232px;
	left: 10px;
	width: 510px;
	height: 48px;
}
.megamenu #emailWrapper #emailField {
	width: 270px;
	float: left;
	height: 25px;
	margin-top: -6px;
}
.megamenu a#locationMapGrandRiver {
	display: block;
	width: 165px;
	height: 197px;
	text-indent: -9999px;
	margin: 5px 0 0 40px;
	/*background: url(images/locationMaps.gif) no-repeat 0 0;*/

	background: url(images/locationMapsNEW.gif) no-repeat 0 0;
}
.megamenu a#locationMapGrandRiver:hover {
	/*background: url(images/locationMaps.gif) no-repeat 0 -197px;*/

	background: url(images/locationMapsNEW.gif) no-repeat 0 -197px;
}
.megamenu a#locationMapUtica {
	display: block;
	width: 165px;
	height: 197px;
	text-indent: -9999px;
	margin: 5px 0 0 6px;
	/*background: url(images/locationMaps.gif) no-repeat -165px 0;*/

	background: url(images/locationMapsNEW.gif) no-repeat -165px 0;
}
.megamenu a#locationMapUtica:hover {
	/*background: url(images/locationMaps.gif) no-repeat  -165px -197px;*/

	background: url(images/locationMapsNEW.gif) no-repeat -165px -197px;
}
/* -----------------------------------------------------------

		III. STRUCTURE & TYPOGRAPHY

----------------------------------------------------------- */



#wrap {
	position: relative;
	margin: 0 auto;
	width: 988px;
}
#header, #content, #nav, #slider, #sliderNav {
	overflow: hidden;
}
#header {
	margin: 0 14px 4px;
	padding: 40px 0 0 0;
	height: 82px;
	font-size: 24px;
	text-align: right;
}
#header img {
	vertical-align: middle;
}
#content {
	width: 100%;
	/*background: transparent url('images/bg-content-trans.png') top center no-repeat;*/

		overflow: hidden;
}
body.home #content { /*background: transparent url('images/bg-content-home-trans.png') top center no-repeat;*/
}
#nav_div {
	background: transparent url('images/bg-content-trans.png') top center no-repeat;
	padding:10px 24px 0;
}
#nav {
	position: relative;
	/*margin: 10px 24px 0;*/

			height: 68px;
	background: #1449ae url('images/bg-nav.gif') no-repeat;
}
#sliderWrap {
	background: transparent url('images/new-bg-slider.png') bottom center no-repeat;
}
#mainContent_div {
	background: transparent url('images/new-bg-maincontent-div.png') center repeat-y;
	overflow: hidden;
}
#mainContent {
	float: left;
	width: 605px;
	padding: 20px 0 0 50px;
}
.col {
	float: left;
	width: 280px;
}
.border {
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px #ccc solid;
}
.signUp {
	margin-bottom: 16px;
	padding: 8px 15px 15px 25px;
	background-color: #dae3f3;
}
.menuSignUp {
	margin-bottom: 16px;
	padding: 14px 25px 20px;
}
#sidebar {
	float: right;
	width: 268px;
	padding: 20px 45px 0 0;
}
#footer {
	clear: both;
	width: 988px;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 10px;
	color: #999;
	line-height: 1.2em;
	text-align: center;
	/*border-top: 1px #aaa solid;*/

			background: url('images/new-bg-footer.png') bottom center no-repeat;
}
#logo {
	position: absolute;
	top: -4px;
	left: 24px;
	width: 237px;
	height: 191px;
}
/* -----------------------------------------------------------

		IV. TABLES

----------------------------------------------------------- */



table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 7px;
}
table table {
	margin-bottom: 0;
}
td {
	vertical-align: top;
	padding: 0 7px 7px 0;
}
/* -----------------------------------------------------------

		V. FORMS

----------------------------------------------------------- */



input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
#header input, .signUp input, .signUp input, .menuSignUp input {
	vertical-align: middle;
}
.textBox {
	margin-left: 5px;
	padding: 5px 7px;
	width: 197px;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	color: #444;
	border: 0;
	background: url('images/textBox-trans.png') no-repeat;
}
.megaMenuSignUp {
	width: 227px;
	height: 35px;
	float: right;
	margin: 6px 20px 0 0;
	background: url(images/megaFormBg.gif) no-repeat 0 0;
}
#megaTextbox {
	width: 161px;
	height: 25px;
	padding: 5px 7px;
	border: 0;
	background: none;
	font-size: 12px;
	color: #444;
}
#megaSubmit {
	width: 45px;
	height: 35px;
	border: 0;
	background: none;
}
.megamenu #emailWrapper #emailInfo {
	float: left;
	width: 240px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #154aae;
	font-weight: bold;
	text-align:right;
	text-transform: uppercase;
	font-family: 1em;
	line-height: 1.2em;
	padding: 3px 0 0 0;
}
.signUp .textBox, .menuSignUp .textBox {
	margin-left: 0;
	width: 146px;
	background: url('images/textBoxShort-trans.png') no-repeat;
}
/* -----------------------------------------------------------

		VI. HEADINGS

----------------------------------------------------------- */



h1, h2, h3, h4 {
	font-family: "Trebuchet MS", Georgia, Times, Serif;
	font-weight: normal;
	line-height: 1.2em;
	margin: 0;
	padding: 0 0 8px 0;
}
#faq h3 {
	margin: 15px 0;
}
h1 a, h2 a, h3 a, h4 a {
	text-decoration: none;
}
h1 {
	font-size: 34px;
	color: #154aae;
}
.col h1 {
	font-weight: bold;
}
h2 {
	margin-top: 10px;
	font-size: 24px;
	color: #539941;
}
h2 a, h2 a:visited {
	color: #539941;
	text-decoration: underline;
}
h2 a:hover {
	text-decoration: none;
}
.col h2, #sidebar h2 {
	color: #154aae;
}
.col h2.paddTop {
	padding-top: 7px;
}
h3 {
	font-size: 18px;
	line-height: 1.2em;
}
h4 {
	font-size: 16px;
}
/* -----------------------------------------------------------

		VII. COMMENTS

----------------------------------------------------------- */



#comment-area {
	clear: both;
	padding-top: 7px;
}
#comment-area ul, #comment-area ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
#comment-area ol ul {
	margin-left: 45px;
}
#comment-area .commentlist li {
	margin: 5px 0;
	padding: 5px 0;
	list-style: none;
}
#comment-area .commentlist li li {
	margin: 5px 0 0;
	padding: 5px 0 0;
}
.comment-author {
	font-weight: bold;
}
cite {
	font-style: normal;
}
#commentform input {
	margin: 5px 0 0;
}
#commentform {
	margin: 5px 0 0 0;
}
#commentform textarea {
	width: 974px;
}
#respond:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#commentform #submit {
	margin: 0 0 5px auto;
	padding: 0;
	float: right;
}
.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}
.commentmetadata {
	margin: 0;
	display: block;
}
.productList {
	width: 100%;
	margin: 0 0 10px 0;
	padding-top: 15px;
	background: url(images/horizontalBlueDots.png) repeat-x 0 0;
}
.productList .buttonMore {
	margin-top: -25px;
}
.productPhoto, .productPhoto a {
	padding: 5px;
	background: #fff;
	border: solid 1px #B7B7B7;
	margin: 0 35px 0 0;
}
.productPhoto img a:hover {
	background: #144AAD;
}
.clear {
	clear:both;
}
a.googleMap {
	display: block;
	height: 29px;
	width: 156px;
	background: url(images/buttonClickForGoogleMap.gif) no-repeat 0 0;
	text-indent: -9999em;
	margin: 15px 0 0 0;
}
a.reserve {
	display: block;
	height: 49px;
	width: 326px;
	background: url(images/buttonReserveYourParty.gif) no-repeat 0 0;
	text-indent: -9999em;
	margin: 20px auto 0 auto;
}
a.newHudsonLocation {
	display:block;
	background: url(images/buttonNewHudson.png) no-repeat 0 0;
	width: 318px;
	height: 59px;
	text-indent: -9999em;
	margin: -24px auto 15px auto;
}
a.newHudsonMap {
	display:block;
	/*background: url(images/contact-image-newhudson.png) no-repeat 0 0;*/

	background: url(images/contact-image-newhudson-new.png) no-repeat 0 0;
	width: 165px;
	height: 151px;
	text-indent: -9999em;
	margin: 0 auto;
}
a.uticaMap {
	display:block;
	/*background: url(images/contact-image-utica.png) no-repeat 0 0;*/

	background: url(images/contact-image-utica-new.png) no-repeat 0 0;
	width: 165px;
	height: 151px;
	text-indent: -9999em;
	margin: 0 auto;
}
a.uticaLocation {
	display:block;
	background: url(images/buttonUtica.gif) no-repeat 0 0;
	width: 288px;
	height: 49px;
	text-indent: -9999em;
	margin: -14px auto 0 auto;
 margin-right:
}
a.otherLocation {
	display:block;
	background: url(images/buttonOtherLocations.gif) no-repeat 0 0;
	width: 288px;
	height: 49px;
	text-indent: -9999em;
	margin: 15px auto 0 auto;
}
.blueBox {
	margin: 0 auto 16px auto;
	padding: 8px 15px 15px 25px;
	background-color: #dae3f3;
	width: 500px;
	text-align: center;
}
.blueBox h2 {
	color: #154aae;
}
 Replacing Form Buttons with Images  Printer-friendly version  Syndicate content  Podcast  Submitted by Corey Lafferty on 10 November 2009  in  * User Experience and Design  So you want to use CSS to style a form button to appear as an image, similar to the way you would with any anchor link (using background-image). While the process is very similar, there are a few odd behaviors that form buttons exhibit that anchor links do not (particularly when viewed in IE6) that require a little extra CSS tom-foolery to get around.  We start with a normal form button that, without any css, looks like what you see above, generated from this html.  <input id="stayConnected" type="submit"/>  And what we want to end up with is a nifty little square with an arrow in it, like you see in the above image.  Using the traditional background-image replacement technique would lead to the following CSS.  input#stayConnected {
 background: url(images/button_submit.png) no-repeat 0 0;
 display: block;
 height: 25px;
 text-indent: -9999px;
 width: 28px;
}
input#sendButton {
	background: url(images/buttonSend.gif) no-repeat 0 0;
	border: 0;
	cursor: pointer;
	display: block;
	height: 29px;
	line-height: 0;
	text-indent: -9999px;
	width: 84px;
	margin: 0 auto;
}
.question {
	font-weight: bold;
	cursor: pointer;
}
td {
	padding: 10px;
}
a {
	outline: none;
}
td.packageTable {
	padding: 15px;
	vertical-align: top;
}
.packageTable h3 {
	margin-top: 20px;
	font-size: 1.6em;
}
.packageTable img {
	float: right;
}
a.learnMore {
	display: block;
	text-indent: -9999em;
	width: 136px;
	height: 29px;
	background: url(images/button-learn-more.gif)
}
.productlist {
	margin-bottom:10px;
}
.productlist h2 {
	margin-top:0;
	line-height:0;
	padding-top:0;
	margin-bottom:15px;
}
table.table-pr {
	text-align:center;
}
/* Gallery Item Area */

#gallery_div {
	float: left;
	width: 888px;
	padding: 20px 50px 0 50px;
}
#gallery {
	float: left;
	width: 888px;
}
#gallery_div h1 {
	float:left
}
#gallery_div .backbtn {
	float:right;
}
#gallery .gallery-item {
	float:left;
	width:184px;
	padding:0;
	margin-right:50px;
	margin-bottom:30px;
	height:170px;
}
#gallery .no-margin {
	margin-right:0;
}
#gallery .gallery-item a.fancybox {
	background:url(images/thumb_bg.png) top center no-repeat;
	width:184px;
	height:128px;
	float:left;
	text-align:center;
	margin-bottom:10px;
	position:relative;
}
#gallery .gallery-item a.fancybox span.badge {
	position:absolute;
	top:-3px;
	right:0px;
}
#gallery .gallery-item a.fancybox span.zoom {
	position:absolute;
	top:0;
	left:0;
}
#gallery .gallery-item a.fancybox img.mythumb {
	margin-top:8px;
	width:168px;
	height:112px;
}
#gallery .gallery-item .links {
	width:180px;
	margin:0 auto;
	padding-bottom:18px;
	border-bottom:1px solid #e9e9e9;
}
#gallery .gallery-item .title {
	margin:0;
	padding:0;
}
#gallery .gallery-item .title {
	font:normal 14px Arial;
	color:#333333;
}
#gallery .gallery-item .no-border {
	border:none;
}
/* 2.3.1 Search Module */

#search_div {
	float:left;
	margin-bottom:50px;
	width:884px;
}
#search_div_top {
	float:left;
	width:884px;
	height:11px;
	background:url(images/bg-search-top.png) top center no-repeat;
}
#search_div_bot {
	float:left;
	width:884px;
	height:11px;
	background:url(images/bg-search-bot.png) bottom center no-repeat;
}
#search_div_mid {
	float:left;
	width:884px;
	background:url(images/bg-search-mid.png) center repeat-y;
	position:relative;
	padding-bottom:51px;
}
#search_div_mid input[type=submit] {
	border:none;
	background:url(images/btn-gallery-submit.jpg) center no-repeat;
	width:234px;
	height:51px;
	text-indent:-999999em;
	cursor:pointer;
}
#search_div_mid .radio {
	width:24px;
	height:24px;
	background:url(images/bg-radio.png) top center no-repeat;
	display:inline-block;
}
.search_module {
	text-align:center;
	float:left;
	width:884px;
}
.search_main {
}
#panbut {
	text-align: center;
	width:153px;
	height:51px;
	position: absolute;
	right:-7px;
	bottom:0;
}
#panbut span {
	width:153px;
	height:51px;
	cursor: pointer;
	line-height:51px;
	display:block;
	text-indent:-999999em;
}
#panbut.closed span {
	background:url(images/bg-search-open.png) center right no-repeat;
}
#panbut.open span {
	background:url(images/bg-search-close.png) center right no-repeat;
}
#box-type {
	float:left;
	width:339px;
	background:url(images/label-type.png) top center no-repeat;
	padding:40px 0 0 0;
	margin-left:11px;
	margin-bottom:30px;
}
#backboard-size {
	float:left;
	width:498px;
	background:url(images/label_size.png) top center no-repeat;
	padding:40px 0 0 0;
	margin-left:11px;
	margin-bottom:30px;
}
#box-brand {
	float:right;
	width:513px;
	background:url(images/label-brand.png) top center no-repeat;
	padding:40px 0 0 0;
	margin-right:11px;
	margin-bottom:30px;
}
#box-backboard-brand {
	float:right;
	width:364px;
	background:url(images/label_backboard_brand.png) top center no-repeat;
	padding:40px 0 0 0;
	margin-right:11px;
	margin-bottom:30px;
}
.box-type {
	float:left;
	width:339px;
	background:url(images/bg-type-box.png) top center no-repeat;
	height:175px;
}
.backboard-size {
	float:left;
	width:498px;
	background:url(images/bg_backboard_size.png) top center no-repeat;
	height:226px;
}
.box-brand {
	float:left;
	width:513px;
	background:url(images/bg-brand-box.png) top center no-repeat;
	height:175px;
}
.box-backboard-brand {
	float:left;
	width:364px;
	background:url(images/bg_backboard_brand.png) top center no-repeat;
	height:226px;
}
.type-1 {
	margin:20px 0 0 148px;
	width:30px;
	text-align:center;
	float:left;
}
.type-2 {
	margin:20px 0 0 62px;
	width:30px;
	text-align:center;
	float:left;
}
.type-3 {
	margin:20px 0 0 65px;
	width:30px;
	text-align:center;
	float:left;
}
.type-4 {
	margin:20px 0 0 58px;
	width:30px;
	text-align:center;
	float:left;
}
.type-1 label, .type-2 label, .type-3 label, .type-4 label {
	float:left;
	width:30px;
	height:165px;
	text-indent:-999999em;
}
.brand-1 {
	margin:20px 0 0 30px;
	width:120px;
	text-align:center;
	float:left;
}
.brand-2 {
	margin:20px 0 0 48px;
	width:120px;
	text-align:center;
	float:left;
}
.brand-3 {
	margin:20px 20px 0 0;
	width:120px;
	text-align:center;
	float:right;
}
.brand-1 label, .brand-2 label, .brand-3 label {
	float:left;
	width:120px;
	;
	height:165px;
	text-indent:-999999em;
}