/*
	global.css
	TM Athletics corporate website

	These rules apply to all pages on the site.
	Each page potentially has its own stylesheet, e.g. index.css, contact.css
	Internet Explorer-specific stylesheets have an _ie suffix, e.g. global_ie.css, index_ie.css
*/


/*====================
page content block
====================*/

#pageWrapOuter
{
	background: #C4C4C4 url("images/bkg_icon_tile_4.jpg") center 30px repeat-x;
}
#content
{
	width: auto;
	margin: 0;
	xborder-bottom: 1px solid aqua;
}
#contentMain
{
	position: relative;

	clear: both;
	xwidth: 940px;	/* 824 + 44 + 72 */
	width: 958px;
	height: 735px;	/* 450px + 285px */
	margin: 0 auto;
	padding: 0;
	padding-top: 6px;
	xpadding-right: 72px;
	xbackground: url("images/home_panel_right.png") right top no-repeat;
	background: none;
	xbackground: yellow;
}
* html #contentMain
{
	height: 700px;
	margin-top: 0;
	background: none;
	filter: none;
}
#contentBottom
{
	display: none;
}
#contentBottom
{
	height: inherit;
	width: inherit;
	margin: inherit;
	padding: inherit;
	background: none;
}
* html #contentBottom
{
	filter: none;
}


/*--------------------
designer link
--------------------*/
div#panelLinkA
{
	float: left;
	margin: 17px 0 0 17px;
}
* html div#panelLinkA
{
	margin-left: 9px;
}
div#panelLinkA a
{
	position: relative;
	width: 489px;
	height: 250px;
	background: url("images/chrome_panel_designer.jpg") left top no-repeat;
}
div#panelLinkA a span
{
	position: absolute;
	bottom: 0;
	right: 60px;
	display: block;
	width: 176px;
	height: 85px;
	background: url("images/chrome_button_designer_letsgo.jpg") left top no-repeat;
}
div#panelLinkA a:hover span
{
	background-position: left -85px;
	cursor: pointer;
}
/*--------------------
pricing link
--------------------*/
div#panelLinkB
{
	float: left;
	margin: 17px 0 0 0;
}
div#panelLinkB a
{
	position: relative;
	width: 314px;
	height: 125px;
	background: url("images/chrome_panel_pricing.jpg") left top no-repeat;
}
div#panelLinkB a span
{
	position: absolute;
	bottom: 0;
	right: 60px;
	display: block;
	width: 70px;
	height: 46px;
	background: url("images/chrome_button_pricing_go.jpg") left top no-repeat;
}
* html div#panelLinkB a span
{
	height: 45px;
}
div#panelLinkB a:hover span
{
	background-position: left -46px;
	cursor: pointer;
}
/*--------------------
sizes link
--------------------*/
div#panelLinkC
{
	float: left;
	margin: 0 0 0 0;
}
div#panelLinkC a
{
	position: relative;
	width: 314px;
	height: 125px;
	background: url("images/chrome_panel_sizes.jpg") left top no-repeat;
}
div#panelLinkC a span
{
	position: absolute;
	bottom: 0;
	right: 60px;
	display: block;
	width: 70px;
	height: 55px;
	background: url("images/chrome_button_sizes_go.jpg") left top no-repeat;
}
* html div#panelLinkC a span
{
	height: 54px;
}
div#panelLinkC a:hover span
{
	background-position: left -55px;
	cursor: pointer;
}






#panelBottom a span span
{
	position: absolute;
	left: -1000em;
	z-index: 50;
}

/*====================
main panel art
====================*/
.panel
{
	margin-bottom: 0;
	padding-bottom: 0;
	xbackground-color: Red;
	xborder: 1px dotted red;
}
.panel a
{
	float: left;
	display: block;
	height: 450px;
	border: none;
	text-decoration: none;
}
.panel a img
{
	border: none;
}
#panel1 a
{
	width: 240px;
}
#panel2 a
{
	width: 137px;
}
#panel3 a
{
	width: 152px;
}
#panel4 a
{
	width: 429px;
}
.panel a img.banner
{
	position: absolute;
	left: -1000;
	z-index: 0;
	top: 370px;
	bottom: 0px;
	width: 445px;
	height: 79px;
}
#panel1 a img.banner
{
	left: 121px;
}
#panel2 a img.banner
{
	left: -119px;
}
#panel3 a img.banner
{
	left: -256px;
}
#panel4 a img.banner
{
	left: -408px;

	z-index: 9;		/* default display */
}
.panel a:hover img.banner
{
	z-index: 10;
}
#panelBottom
{
	clear: left;
	width: 840px;
	height: 285px;
	margin-left: 49px;
	background: url("images/home_panel_bottom.jpg") center top no-repeat;

	xborder: 1px dashed green;
	xbackground-color: Yellow;
	xmargin-top: 0;
	xpadding-top: 0;
}
#panelBottom a
{
	display: block;
	text-decoration: none;
	color: #FFF;
}

/*
#panel4.a { background-image: url("images/home_main_4_a.jpg"); }
#panel4.b { background-image: url("images/home_main_4_b.jpg"); }
#panel4.c { background-image: url("images/home_main_4_c.jpg"); }
#panel4.d { background-image: url("images/home_main_4_d.jpg"); }
#panel4.e { background-image: url("images/home_main_4_e.jpg"); }
#panel4.f { background-image: url("images/home_main_4_f.jpg"); }
#panel4.g { background-image: url("images/home_main_4_g.jpg"); }
#panel4.h { background-image: url("images/home_main_4_h.jpg"); }
#panel4.i { background-image: url("images/home_main_4_i.jpg"); }
#panel4.j { background-image: url("images/home_main_4_j.jpg"); }
#panel4.k { background-image: url("images/home_main_4_k.jpg"); }
#panel4.l { background-image: url("images/home_main_4_l.jpg"); }
#panel4.m { background-image: url("images/home_main_4_m.jpg"); }
#panel4.n { background-image: url("images/home_main_4_n.jpg"); }
#panel4.o { background-image: url("images/home_main_4_o.jpg"); }
#panel4.p { background-image: url("images/home_main_4_p.jpg"); }
#panel4.q { background-image: url("images/home_main_4_q.jpg"); }
#panel4.r { background-image: url("images/home_main_4_r.jpg"); }
#panel4.s { background-image: url("images/home_main_4_s.jpg"); }
#panel4.t { background-image: url("images/home_main_4_t.jpg"); }
#panel4.u { background-image: url("images/home_main_4_u.jpg"); }
#panel4.v { background-image: url("images/home_main_4_v.jpg"); }
#panel4.w { background-image: url("images/home_main_4_w.jpg"); }
#panel4.x { background-image: url("images/home_main_4_x.jpg"); }
#panel4.y { background-image: url("images/home_main_4_y.jpg"); }
#panel4.z { background-image: url("images/home_main_4_z.jpg"); }

#panel1 a span,
#panel2 a span,
#panel3 a span,
#panel4 a span
{
	display: none;

	position: absolute;
	z-index: 0;
	xtop: 360px;
	bottom: 0px;
	width: 446px;
	height: 79px;
	zoom: 1;
}
html body #panel4 a span
{
	/* default display * /
	display: block;

	left: -376px;
	left: -408px;
	background: url("images/banner_main.jpg") left top no-repeat;
}
html body #panel1 a span
{
	right: -327px;
	background: url("images/banner_master.jpg") left top no-repeat;
}
html body #panel2 a span
{
	right: -190px;
	background: url("images/banner_master.jpg") left -79px no-repeat;
}
html body #panel3 a span
{
	right: -70px;
	right: -38px;
	background: url("images/banner_master.jpg") left -158px no-repeat;
}
x#panel1 a span
{
	text-align: left;
}
x#panel2 a span
{
	text-align: center;
}
x#panel3 a span
{
	text-align: right;
}

html body #panel1 a:hover span,
html body #panel2 a:hover span,
html body #panel3 a:hover span,
html body #panel4 a:hover span
{
	display: block;
	z-index: 1000;
}
* html #panel1 a span,
* html #panel2 a span,
* html #panel3 a span,
* html #panel4 a span
{
	xdisplay: none;
}
*/

/*====================
banners
====================*/
#bannerA
{
	position: absolute;
	top: 0;
	left: 300px;
	z-index: 1000;
}
#bannerA a
{
	overflow: hidden;
	display: block;
	width: 326px;
	height: 80px;
}
#bannerA a img
{
	border: none;
}
#bannerA a:hover img
{
	margin-top: -80px;
}