/****************************************************************************
																			*
	VVV     VVVCCCCCCC														*
	 VVV   VVVCCCCCCCC					Copyright(C) 2010 Vonk Creative	<-	*
	  VVV VVVCC							Ben Denhartog DBA Vonk Creative <-	*
   	   VVVVVCCCCCCCCCC					Contact: ben@vonkcreative.com	<-	*
 	    VVVCCCCCCCCCCC														*
																			*
																			*
You can look, but please, don't steal this code.							*
The gnargles might get you.*												*
																			*
*: Gnargles are very dangerous, fake animals.								*
																			*
																			*
See bottom for additional information.										*
																			*
****************************************************************************/
/****************************************************************************
COLORS USED

Yellow-		Main: #ffc300
Red-		Main: #a80000
Dark gray-	Main: #353535
			CSS shadows: #151515

****************************************************************************/

/* Reset used objects
-----------------------------------------------*/
html, body, img, div, ul, h1, h2, h3, p, br, dd{ margin: 0; padding: 0; border: 0;
}

html,body{
	height: 100%; width: 100%;
}

a{
	text-decoration: none;
}

/* General -> Style for global objects
-----------------------------------------------*/
body{
	background-color: #ffffff;
	font-family: "Verdana", "Helvetica", Sans-Serif;
}

ul, li{
	list-style-type: none;
}

input:focus{
	outline: 0;
}

		
/* General -> Style for global page elements
-----------------------------------------------*/
#afterLoad{
	display: none;
	visibility: hidden;
	width: 1px;
	height: 1px;
}

#mastheadWrap{
	width: 900px; height: 100px;
	margin: auto;
	background: url('../img/mastheadBg.png') 0 0 repeat-x;
	padding-bottom: 8px;
	border-bottom: 1px solid #ddd;
}
	#innerWrap1{
		width: 900px; height: 80px;
		margin: auto; margin-top: 0; margin-bottom: 0;
	}
	#masthead{
		width: 161px; height: 100px;
		display: block;
		margin-left: 10px;
		float: left;
		background: url('../img/mastheadLogo.png') 0 0 no-repeat;
	}
	#masttitle{
		margin:-5px 0 0 50px; float:left; font-size:16pt;
	}
#membershipLinks{
	width: 880px;
	margin: auto; margin-top: 0; margin-bottom: 0;
	padding: 5px 10px 5px 10px;
	text-align: right;
	font-size: 10pt;
}
	#membershipLinks a{
		display: inline-block;
		padding: 2px;
		font-weight: bold;
		font-size: 9pt;
		color: #000;
		text-transform: uppercase;
	}
	#membershipLinks a:hover{
		text-decoration: underline;
	}

#contentWrap{
	width: 900px;
	margin: auto;
	padding: 30px 0 10px 0;
	display: block;
}


/* Page -> Home page
-----------------------------------------------*/
#headlineWrap{
	width: 840px;
	display: block;
	margin: auto; margin-top: 0; margin-bottom: 0;
	font-size: 22pt;
	text-align: justify;
}
	#headlineWrap h1{
		color: #ffc300;
		display: inline;
		font-weight: bold;
		font-size: 24pt;
	}
	#headline{
		xwidth: 500px;
		padding: 15px;
		background-color: #353535;
		color: #fff;
		text-align: center;
		margin: auto; margin-bottom: 30px;
		-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
		-webkit-box-shadow: 2px 2px 3px #151515; -moz-box-shadow: 2px 2px 3px #151515; box-shadow: 2px 2px 3px #151515;
		text-shadow: 1px 1px 2px #181818;
		xtext-transform: uppercase;
	}
	#subhead{
		width: 820px;
		text-align: center;
		font-size: 12pt;
		display: inline-block;
		margin: 0 0 30px 0;
		xfont-weight: bold;
		background-color: #c0c0c0;
		padding: 10px;
		-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
		-webkit-box-shadow: 2px 2px 3px #151515; -moz-box-shadow: 2px 2px 3px #151515; box-shadow: 2px 2px 3px #151515;
		text-shadow: 1px 1px 1px #333333;
	}
	#subhead .text-24{
		font-size: 18pt;
		font-weight:normal;
	}
	#subhead .text-14{
		font-size: 14pt;
		xfont-weight:bold;
	}

#featureLabel{
	width: 560px; height: 40px;
	display: inline-block;
	background: url('../img/featureLabel.png') 0 0 no-repeat;
}
#featureWrap{
	width: 880px;
	clear: both;
	display: inline-block;
	padding: 10px;
	background-color: #353535;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	margin: 0 0 30px 0;
	-webkit-box-shadow: 1px 1px 3px #151515; -moz-box-shadow: 1px 1px 3px #151515; box-shadow: 1px 1px 3px #151515;
}
	#video{
		display: inline-block;
		width: 560px; height: 340px;
		float: left;
		background-color: #000;
		color: #ddd;
		padding: 10px;
		-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	}
	#ftSectional{
		display: inline-block;
		float: left;
		width: 280px; height: 250px;
		margin-left: 20px;
		color: #ededed;
		text-shadow: 1px 1px 2px #181818;
	}
		#ftSectional h1{
			font-size: 18pt;
			text-align: left;
			text-transform: uppercase;
			color: #ffc300;
			display: block;
		}
		#ftSectional h2{
			font-size: 10pt;
			text-transform: uppercase;
			color: #dedede;
			display: block;
			text-align: center;
			font-style: italic;
		}
		#ftSectional form{
			display: inline-block;
			padding: 40px 0 20px 0;
			line-height: 30px;
		}
			#ftSectional form label{
				clear: left;
				display: inline-block;
				float: left;
				width: 60px;
				padding-right: 10px;
				text-align: right;
			}
			#ftSectional form input{
				float: left;
				height: 20px;
				width: 197px;
				margin-bottom: 20px;
				border: 2px solid #fff;
				-webkit-transition: border-color .6s ease;
				-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
			}
				#ftSectional form input:focus{
					border-color: #ffc300;
				}
			#ftSectional .button{
				display: block;
				width: 100%; height: 80px;
				margin: auto;
				text-align: right;
				border: 0;
				background: none;
				cursor: pointer;
				font-size: 16pt;
				color: #ffc300;
				-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
			}
				#ftSectional .button:hover{
					background: #ffc300;
					color: #353535;
					-webkit-box-shadow: 1px 1px 6px #151515; -moz-box-shadow: 1px 1px 6px #151515;
				}

#sectionalsWrap{
	clear: both;
	display: inline-block;
	margin:0 0 40px;
	padding-left:20px;
}
	#sectional{
		width: 180px; height: 275px;
		display: inline-block;
		float: left;
		margin-right: 20px;
		padding: 10px;
		font-size: 10pt;
		background:url('../img/sectionalBg.png') 0 0 no-repeat;
		border: 1px solid #ffc300;
		-webkit-box-shadow: 2px 2px 4px #c4c4c4; -moz-box-shadow: 2px 2px 4px #c4c4c4; box-shadow: 2px 2px 4px #c4c4c4;
		-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	}
		#sectional.nomar{
			margin-right: 0;
		}
		#sectional h1{
			font-size: 11pt;
			color: #c72427;
			text-shadow: 1px 1px 2px #dcdcdc;
		}
		#sectional form{
			width: 100%;
			display: block;
			margin-top: 10px;
			margin-bottom: 10px;
		}
			#sectional form label{
				display: inline-block;
				width: 50px;
				margin-top: 5px;
			}
			#sectional form input{
				display: inline-block;
				width: 110px;
				border-radius: 5px;
				padding: 5px;
				border: 2px solid #ffc300;
				-webkit-box-shadow: 1px 1px 3px #c0c0c0; -moz-box-shadow: 1px 1px 3px #c0c0c0; box-shadow: 1px 1px 3px #c0c0c0;
			}
			#sectional form input.button{
				width: 100%; height: 40px;
				display: block;
				margin-top: 10px;
				border: 3px solid #a80000;
				line-height: 20px;
				cursor: pointer;
				background: #ffc300;
				-webkit-box-shadow: 1px 1px 3px #151515; -moz-box-shadow: 1px 1px 3px #151515; box-shadow: 1px 1px 3px #151515;
				-webkit-transition: border-color .5s ease;
			}
				#sectional form input.button:hover{
					border-color: #ffc300;
				}
				
			#sectional #starryNew{
				width: 80px; height: 80px;
				display: inline-block;
				position: relative;
				top: -40px; left: -30px;
				background-image: url('../img/starry_new.png');
			}
				#sectional h3{
					width: 100%;
					display: inline-block;
					position: relative;
					top: -40px; left: 0;
					text-align: center;
					text-transform: uppercase;
					font-size: 16pt;
					text-shadow: 1px 1px 3px #c0c0c0;
				}
					#sectional h3 p{
						color: #a80000;
						font-style: italic;
					}
					#sectional a.hreee{
						display: block;
						margin: 0;
						padding: 0;
						font-size: 10pt;
						color: #a80000;
					}
				#sectional span.smallPrint{
					display: block;
					position: relative;
					top: -30px;
					text-align: left;
					font-style: italic;
					font-size: 9pt;
				}
			#sectional #starryEasy{
				width: 120px; height: 120px;
				display: inline-block;
				position: relative;
				top: -50px; left: 100px;
				background-image: url('../img/starry_easy.png');
			}
		#sectional #icons{
			display: block;
			margin-top: 50px;
			text-align: center;
		}
		#sectional #icons a{
			padding: 5px;
			margin: 0;
		}
			#sectional #icons a:hover{
				opacity: 0.8;
				filter: alpha(opacity = 80);
			}
		#sectional a.bloglink{
			display: block;
			text-align: center;
			color: #a80000;
			font-weight: bold;
			margin-top: 70px;
			padding: 10px 0;
			text-transform: capitalize;
			-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
		}
			#sectional a.bloglink:hover{
				background-color: #ffc300;
			}
		#sectional img.alf{
			width: 110px;
			display: block;
			margin: auto; margin-top: 5px; margin-bottom: 25px;
			-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
			-webkit-box-shadow: 1px 1px 2px #c0c0c0; -moz-box-shadow: 1px 1px 2px #c0c0c0; box-shadow: 1px 1px 2px #c0c0c0;
		}

#bottomContent{
	display: block;
	clear: both;
	margin-top: 5px;
}
	#bottomContent #longMsg{
		font-size: 10pt;
		font-weight: normal;
		display: inline-block;
		font-weight: bold;
		width: 100%;
		text-align: center;
		line-height: 20px;
		margin:10px 0;
	}
		#bottomContent #longMsg b{
			color: #a80000;
		}
#3boxWrap{
	clear: both;
}	
	.theBox{
		width: 230px; height: 230px;
		margin-right: 15px; margin-top: 20px; margin-bottom: 20px;
		padding: 10px;
		font-size: 10pt;
		background: url('../img/theBoxBg.png') 0 0 no-repeat;
		-webkit-box-shadow: 2px 2px 4px #c0c0c0; -moz-box-shadow: 2px 2px 4px #c0c0c0; box-shadow: 2px 2px 4px #c0c0c0;
		-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
		float:left;
	}
		.theBox-left{
			margin-left: 60px;
		}
		.theBox-right{
			margin-right: 0;
		}
		#3boxWrap .theBox h1{
			font-size: 11pt;
			text-transform: uppercase;
			color: #c72427;
			text-shadow: 1px 1px 2px #dcdcdc;
		}
		.theBox .highlight{
			color: #a80000;
		}

#3iLinks{
	display: block;
	text-align: center;
}
	#3iLinks a{
		display: inline-block;
		cursor: pointer; 
	}
		#3iLinks a:hover img{
			opacity: 0.2;
			filter: alpha(opacity = 80);
		}

#footerWrap{
	clear: both;
	display: block;
	width: 890px;
	margin: auto; margin-top: 10px;
	background-color: #353535;
	padding: 10px;
}
	#footer{
		width: 890px;
		margin: auto; margin-top: 0; margin-bottom: 0;
		text-align: left;
		font-size: 9pt;
		color: #dedede;
	}
	#footerlinks{
		display: block;
		font-size: 9pt;
		color: #dedede;
		margin-bottom: 10px;
	}
		#footerlinks #left{
			display: inline-block;
		}
		#footerlinks #right{
			display: inline-block;
			float: right;
			clear: right;
		}
.black_overlay{
			
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: Black;
			z-index:1001;
			moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
.white_content {
			display: none;
			position: absolute;
			top: 40%;
			left: 20%;
			padding: 16px;
			border: 10px solid #D06E69;
			background-color: white;
			z-index:9001;
			overflow: hidden;
		}
.white_content_visible {
			display: block;
			position: absolute;
			top: 40%;
			left: 20%;
			width: 50%;
			height: 60%;
			padding: 16px;
			border: 10px solid #D06E69;
			background-color: white;
			z-index:1002;
			overflow: hidden;
		}
		
.clear{clear:both;}
/********************************************************
														*
	END STYLESHEET										*
	Project title: 	RipCard Landing Page				*
	Project completion date: Not yet complete (6/27/10)	*
	Website designed and developed by Ben Denhartog		*
														*
	www.vonkcreative.com   |   hello@vonkcreative.com	*
														*
********************************************************/