/*
	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 no-repeat;
}

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: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;
}

.megamenu a#locationMapGrandRiver:hover {
	background: url(images/locationMaps.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;
}

.megamenu a#locationMapUtica:hover {
	background: url(images/locationMaps.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%;
		min-height: 849px;
		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 {
			position: relative;
			margin: 10px 24px 0;
			height: 68px;
			background: #1449ae url('images/bg-nav.gif') no-repeat;
		}

		#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: 890px;
			margin: 0 auto;
			padding: 20px 0;
			font-size: 10px;
			color: #999;
			line-height: 1.2em;
			text-align: center;
			border-top: 1px #aaa solid;
		}

	#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;
	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;
	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) 
}