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

    The Marcom Group, Incorporated
    Stylesheet for http://www.metrorecord.com/

    1. General HTML elements
    2. General classes
    3. General structure
		  1. Header
		  2. Navigation
		  3. Subnav Box
		  4. Content	
		  5. Footer
	4. Specific structure and Classes	 

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

/* ----------------------------------------------------------------------------
	General HTML elements
---------------------------------------------------------------------------- */
*
		{
		margin: 0px;
		padding: 0px;
		}

html
		{
		height: 100%;
		}
		
body
		{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		background: url(http://www.metrorecord.com/images/body_background.gif) top left;
		font-family: verdana, arial, tahoma, georgia;
		font-size: 10px;
		font-size: 100.01%; /* [1] */
		line-height: 18px;	
		font-weight: normal;
		color: #000;
		}
		
form
		{
		margin: 0px;
		padding: 0px;
		}
		
input, select, textarea
		{
		margin: 0px;
		padding: 0px;
		font-family: verdana, arial, tahoma, georgia;
		font-size: 10px;
		font-size: 100.01%; /* [1] */
		line-height: 18px;	
		font-weight: normal;
		color: #000;
		background: #f5f5f5;
		border: 1px solid #666666;
		}

/* ----------------------------------------------------------------------------
	General structure
---------------------------------------------------------------------------- */
		
#wrapper		
		{
		z-index: -1;
		width: 100%;
		height: 100%;
		min-height: 100%;
		margin: 0px;
		padding: 0px;					
		background: url(http://www.metrorecord.com/images/wrapper_background.gif) top left repeat-x;		
		}		
		
		
html>body #container
		{
		z-index: 1;
		position: relative;		
		width: 750px;			
		min-height: 100%;
		margin: 0px auto 0px auto;
		padding: 0px;
		background: url(http://www.metrorecord.com/images/main_bg.png) top left repeat-y;		
		}	
#main
		{
		z-index: 2;
		position: relative;		
		min-height: 100%;
		width: 738px;
		margin: -13px auto 0px auto;
		padding: 0px;
		background: url(http://www.metrorecord.com/images/main_bg.jpg) top left no-repeat;		
		}
		
* html #main
		{
		height: 100%;
		}
		
/* ----------------------------------------------------------------------------
	Header
---------------------------------------------------------------------------- */
#top
		{
		z-index: 3;
		position: relative;
		width: 738px;
		height: 100px;		
		margin: 0px;
		padding: 0px;
		background: transparent;
		}

html>body #logo
		{
		position: absolute;
		left: 0px;
		top: 5px;
		width: 149px;
		height: 68px;
		margin: 15px 0px 0px 25px;
		padding: 0px;
		background: url(http://www.metrorecord.com/images/metro_logo.png) top left no-repeat;		
		}
		
html>body #naid
		{
		position: absolute;
		left: 650px;
		top: 5px;
		width: 37px;
		height: 75px;
		margin: 15px 0px 0px 0px;
		padding: 0px;
		background: url(http://www.metrorecord.com/images/naid.png) top left no-repeat;		
		}
		
#content_area		
		{
		z-index: 5;
		position: relative;		
		width: 738px;
		min-height: 100%;
		padding: 0px;
		margin: 50px 0px 0px 0px;
		background: transparent;
		}	
		
* html #content_area
		{
		height: auto;
		}
		
#left_col
		{
		float: left;
		padding-bottom: 10px;
		display: block;
		overflow: visible;
		width: 200px;
		min-height: 100%;
		margin: 0px 0px 0px 0px;
		background: transparent;
		}

#facebook_box
		{
		padding-left: 7px;
		padding-bottom: 30px;
		}		
		
* html #left_col
		{
		height: 100%;
		}
		
#right_col
		{
		position: relative;
		float: left;
		display: block;
		overflow: hidden;
		width: 500px;
		min-height: 550px;
		margin: 0px auto 0px 15px;
		background: #fff url(http://www.metrorecord.com/images/content_bg.jpg) top left no-repeat;
		border: 1px solid #000;
		}
		
* html #right_col
		{
		height: 100%;
		}
		
#masthead {
	width: 457px;
	height: 336px;
	margin-left: 35px;

}

#harddrive_shredding {
	width: 457px;
	height: 306px;
	display: block;
	text-indent: -9999px;
	
}

/* ----------------------------------------------------------------------------
	Navigation
---------------------------------------------------------------------------- */

#nav
		{
		position: relative;
		width: 175px;
		height: auto;
		margin: 0px;
		padding: 0px;
		background: transparent;
		}
		
.button
		{
		width: 165px;
		height: 60px;
		margin: 10px auto 0px 25px;
		padding: 0px;
		text-align: center;
		background: url(http://www.metrorecord.com/images/button.gif) top left no-repeat;				
		}
		
.button a
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: normal;
		font-size: 14px;
		line-height: 62px;
		text-transform: uppercase;	
		text-decoration: none;
		color: #402B62;
		margin: 0px 0px 0px 0px;
		padding: 0px;		
		}

/* ----------------------------------------------------------------------------
	Content
---------------------------------------------------------------------------- */			

#content
		{
		width: 450px;
		min-height: 550px;
		padding: 0px;
		margin: 100px auto 15px auto;
		background: transparent;
		}
		
* html #content
		{
		height: 100%;
		}
		
#content h1
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: bold;
		font-size: 14px;
		line-height: 14px;	
		color: #402B62;
		text-decoration: none;
		margin: 10px 0px 5px 0px;
		padding: 2px;	
		border-bottom: 1px solid #402B62;
		}
		
#content p, #right_col p
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: normal;
		font-size: 12px;
		line-height: 18px;	
		color: #666666;
		text-decoration: none;
		margin: 2px 0px 0px 0px;
		padding: 3px;	
		}
		
#content ul
		{
		list-style: square;
		margin: 5px 0px 0px 25px;
		padding: 3px;	
		}
		
#content li
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: normal;
		font-size: 12px;
		line-height: 18px;	
		color: #666666;
		text-decoration: none;
		}
		
#content a, #right_col a
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: bold;
		font-size: 12px;
		line-height: 14px;	
		color: #666666;
		text-decoration: none;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		}		
		
/* ----------------------------------------------------------------------------
	Footer
---------------------------------------------------------------------------- */
#holder
		{
		width: 750px;
		height: 20px;
		margin: 0px auto 0px auto;
		padding: 0px;
		}
		
#copyright		
		{
		z-index: 15;
		position: relative;		
		text-align: center;
		width: 738px;
		height: 20px;
		padding: 0px;
		margin: 0px auto;
		background: #5E3128;	
		}
		
* html #holder		
		{
		margin: -1.25em auto 0px auto;	
		}
		
html>body #holder
		{
		margin: -1.25em auto 0px auto;	
		}
		
#copyright p
		{
		font-family: verdana, arial, tahoma, georgia;
		font-weight: normal;
		font-size: 9px;
		line-height: 14px;	
		color: #fff;
		text-decoration: none;
		margin: 0px 0px 0px 35px;
		padding: 1px;	
		}

/* ----------------------------------------------------------------------------
	General classes
---------------------------------------------------------------------------- */

.clear
		{
		clear: left;
		overflow: visible;
		display: block;
		height: 10px;
		margin-bottom: -1px;
		font-size: 1px;
		line-height: 1px;
		}
		
.spacer			
		{
		margin: 0px;
		padding: 0px;
		padding-left: 5px;
		}
		
/* ----------------------------------------------------------------------------
	Specific structure and Classes
---------------------------------------------------------------------------- */

/* EOF */