/**

This stylesheet controls the look and feel of the Mech RC site. All the styles are grouped by the area of the site in which they sit. Standard HTML tags are provided first and then the classes after.

**/

html
{
	height:100%;

}

body
{
	height:100%;
	
	margin:0px;
	padding:0px;
	
	font-family:tahoma;
	font-size:1em;
	
	background-color:#ffffff;
	background-image:url(images/mainBG.gif);
	background-position:top left;
	color:#777777;
}

td
{
	vertical-align:top;
}


h1
{
	font-weight:normal;
	color:#c8c8c8;
}

a
{
	color:#e40202;
	text-decoration:none;
}
a:hover
{
	color:#780E0E;
}

/*

Site specfic classes. Generally, the flow is from top to bottom.

*/

.mainContainer
{
	width:800px;
}

/* This container holds the header graphic composition. */
.headerContainer
{
	background-image:url(images/header.jpg);
	background-repeat:no-repeat;
	background-position:top left;

	width:100%;
	height:178px;
	
}

/* controls the position of the image */
.logoImage
{
	margin-top:30px;
}

/* Holds the main menu that runs horizontally under the header */
.menuContainer
{
	background-image:url(images/menuBG.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	height:27px;
	font-size:80%;
	font-weight:normal;
}

.contentContainer
{
	background-color:#ffffff;
	background-image:url(images/contentBG.gif);
	background-repeat:repeat-y;
	background-position:top left;
}

/* Holds the three column table that then holds all the content divs */
.threeColumnTable
{
	width:100%;

}

.threeColumnTableLeft
{
	width:200px;
}

.threeColumnTableMiddle
{
}

.threeColumnTableRight
{
	width:200px;
}


/* Holds the left hand column of the three-column layout. */
.leftColumn
{
	background-image:url(images/sidebarBG.gif);
	background-repeat:repeat-y;
	background-position:top left;
	
	width:162px;
	text-align:center;	
	font-size:75%;
	font-weight:normal;
	color:#ffffff;
	
	margin-top:25px;
}


/* Holds the middle column of the three-column layout. */
.middleColumn
{
	margin-top:32px;
}

.rightcolumn
{
	background-image:url(images/sidebarBG.gif);
	background-repeat:repeat-y;
	background-position:top left;
	
	width:162px;
	text-align:center;	
	font-size:75%;
	font-weight:normal;
	color:#ffffff;
	
    margin-top:25px;
}

.columnInner
{
	padding-left:19px;
	padding-right:19px;
	
}

/* Menu classes */

.menuAlignCenter
{

}

.menuButton
{
	background-color:#777;
	margin:2px;
	float:left;
}

/* Left side feature items */ 
.featureItem
{
	margin-bottom:10px;
}

/* The image of the top image */
.featuresHead
{
	margin-bottom:4px;
}

/* Right side items */
.rightItem
{
	width:100px;
	
	margin:3px;
	
}

/* The products title image in the right column */
.productsTitle
{
	margin-bottom:4px;
}

.footer
{
	background-image:url(images/footerBG.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	
	text-align:center;
	font-size:60%;
	color:#f0f0f0;
	
	height:178px;
}

.sidebarEnd
{
    vertical-align: bottom;
}
.showcase
{
	background-image:url(images/showcaseBG.gif);
	background-repeat:no-repeat;
	background-position:top left;

	text-align:center;
	font-size:100%;
	color:#f0f0f0;

	width:396px;
	height:325px;
	margin-top:14px;
	margin-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	/* padding:2px; */
}


.showcaseButtonOff
{
	background-color:#898989;
	width:26px;
	height:23px;
	color:#4E48BF;
	margin:1px;
	float:left;
	padding-top:2px;
	font-weight:bold;
	cursor:pointer;
}

.showcaseButtonOn
{
	background-color:#d3d3d3;
	width:26px;
	height:23px;
	color:#4E48BF;
	margin:1px;
	float:left;
	padding-top:2px;
	font-weight:bold;
	cursor:pointer;
}

.newsTitle
{
	margin-top:12px;
	margin-bottom:4px;
}

.showcaseItemOff
{
	display:none;
}

.showcaseItemOn
{
	display:block;
}

.showcaseItemOff img
{
	margin-top:20px;
	margin-bottom:10px;
}

.showcaseItemOn img
{
	margin-top:20px;
	margin-bottom:10px;
}

.contentPane
{
	text-align:left;
	padding:20px;
	padding-top:1px;
}

.morediv
{
	float:right;
}

.morediv a
{
	float:right;
}


/**Menu Stuff**/

.chromestyle
{
	width: 99%;
	font-weight: bold;
}

.chromestyle:after
{ /*Add margin between menu and rest of content in Firefox*/
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.chromestyle ul
{
	margin: 0;
	text-align: center; /*set value to "left", "center", or "right"*/
	padding-top:4px;
}

.chromestyle ul li
{
	display: inline;
	margin-left:4px;
	margin-right:4px;
}

.chromestyle ul li a
{
	color: #eeeeee;
	margin: 0;
	margin-top:4px;
	text-decoration: none;
}

.chromestyle ul li a:hover
{
	color: #fafafa;
}

.chromestyle ul li a[rel]:after
{ /*HTML to indicate drop down link*/
	content: " v";
	/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv
{
	position:absolute;
	top: 0;
	margin-top:6px;
	border: 1px solid #050000; /*THEME CHANGE HERE*/
	border-bottom-width: 0;
	font:normal 12px Verdana;
	line-height:18px;
	z-index:100;
	background-color: #0080ff;
	width: 200px;
	color:#fff;
	visibility: hidden;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a
{
	width: auto;
	display: block;
	text-indent: 3px;
	border-bottom: 1px solid #000; /*THEME CHANGE HERE*/
	padding: 2px 0;
	text-decoration: none;
	color: #f6f6f6;
}

* html .dropmenudiv a
{ /*IE only hack*/
	width: 100%;
}

.dropmenudiv a:hover
{ /*THEME CHANGE HERE*/
	background-color: #0090ff;
}