/* CSS Document */
/* Author: Michael Hargis and freeyourdesign.com*/
/* each group of CSS corresponds to the image name */
body
{
	background: #555;
}

.textInput1
{
	border: 1px solid #ff0000;
	background: #555555;
	color: #ffffff;	
	font-size: 1.1em;
	margin-bottom: 10px;
}


/********** GRUNGE1 **************/
.holderGrunge1
{
	width: 180px;
	height: 25px;
	border: 1px solid #000000;
	background: url(pngs/grunge1.png);
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_grunge1
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000;
	font-size: 1.1em;
	margin-top: 0px;
	margin-left: 5px;
}


/********** GRUNGEBRD ***********/
.holderGrungebrd
{
	width: 180px;
	height: 25px;
	background: url(pngs/grungebrd.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_grungebrd
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000;
	font-size: 1.1em;
	margin-top: 0px;
	margin-left: 5px;
}

/********** GRADIENT1 ***********/
.holderGradient1
{
	width: 182px;
	height: 27px;
	background: url(pngs/gradient1.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_gradient1
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000000;
	margin-top: 5px;
	margin-left: 5px;
}

/********** ROUNDGRN ***********/
.holderRoundgrn
{
	width: 180px;
	height: 25px;
	background: url(pngs/roundgrn.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_roundgrn
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000000;
	margin-top: 5px;
	margin-left: 5px;
}

/********** GEARS ***********/
.holderGears
{
	width: 269px;
	height: 121px;
	background: url(pngs/gears.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_gears
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #000000;
	margin-top: 47px;
	margin-left: 45px;
}

/********** SPLATTERGRAY ***********/
.holdersplatterGray
{
	width: 180px;
	height: 140px;
	background: url(pngs/splattergray.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_splattergray
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #aaaaaa;
	margin-top: 60px;
	margin-left: 5px;
}

/********** SPLATTERGRN ***********/
.holderSplatterGrn
{
	width: 180px;
	height: 140px;
	background: url(pngs/splattergrn.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_splattergrn
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #555555;
	margin-top: 60px;
	margin-left: 5px;
}

/********** BURST ***********/
.holderBurst
{
	width: 181px;
	height: 147px;
	background: url(pngs/burst.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_burst
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #555555;
	margin-top: 58px;
	margin-left: 5px;
}

/********** GRUNGEGRN ***********/
.holderGrungegrn
{
	width: 179px;
	height: 24px;
	background: url(pngs/grungegrn.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_grungegrn
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #fff;
	margin-top: 0px;
	margin-left: 5px;
}

/********** RETRO ***********/
.holderRetro
{
	width: 203px;
	height: 82px;
	background: url(pngs/retro.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_retro
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #000;
	margin-top: 30px;
	margin-left: 20px;
}

/********** SPEECH ***********/
.holderSpeech
{
	width: 180px;
	height: 34px;
	background: url(pngs/speechblu.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_speech
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #555555;
	margin-top: 0px;
	margin-left: 5px;
}

/********** SPEECH ***********/
.holderSpeechcloud
{
	width: 207px;
	height: 81px;
	background: url(pngs/speechcloud.png) no-repeat;
	margin-bottom: 10px;
	/*float: left;*/ /*if you want them side by side use float left
						you will need to add margin-right: as well*/
}

.tf_speechcloud
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	font-size: 1.1em;
	color: #555555;
	margin-top: 28px;
	margin-left: 20px;
}

/* just extra formatting */
.leftForm
{
	float: left;
	margin-right: 20px;
}