/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

Some CSS Help:
==============

Check out the CSS Box Model here: http://www.how-to-build-websites.com/images/cssBoxModel.gif
(also read the blurb about block and inline elements)

Check out a big IE annoyance with the box model here: http://www.maxdesign.com.au/presentation/workshop/slide48.htm
(the best way around this is probably to just never use padding when you care about the exact width of something.  instead, nest the content in another element (div usually) and give it a margin)

A nice demonstration and explanation of positioning: http://www.quirksmode.org/css/position.html

A series of lengthy, but REALLY nice tutorials on floats: http://css.maxdesign.com.au/floatutorial/

Most confusing thing: For the padding attributes below that I explain with "if this isn't here then margins do strange things," the issue is with margins that touch each other.  For example, if you have an element with no border or padding and you nest another element inside it that completely fills it, then the margins of the two elements are touching.  For some reason, CSS feels the need to collapse these two margins into one, which really messes things up.  By giving a padding or border to the parent element, it creates space between the parent and child margins.

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
body {
	margin: 0em auto;
	padding: 0 0 0 1px;
/*background: url('http://gtmsportswear.com/gtm/images/newright/fuzz1.gif') top right repeat-y;*/
 }
div#fuzz_right{
	margin: 0px;
	padding: 0 8px 0 0;
	background: url('http://gtmsportswear.com/gtm/images/newright/fuzz1.gif') top right repeat-y;
 }
div#fuzz_left{
	margin: 0px;
	padding: 0 0 0 8px;
	background: url('http://gtmsportswear.com/gtm/images/newright/fuzz_left.gif') top left repeat-y;
 }
 

div#header_main { /* the mesh area */
	height: 70px; /* exact height of mesh area.  main purpose of this element is to ensure vertical sizing is correct. */
	overflow: hidden; /* if something goes wrong (positioning), the header won't budge. */
	position: relative; /* important so the menu (absolutely positioned) is positioned relative to this element */
}

div#header_main_left { /* left side of the mesh part */
	float: left; /* floats are weird, but necessary to get two block-elements (like divs) side-by-side */
	margin-top: 5px; /* space slightly out from #header_main to avoid rounded edges of background */
	margin-left: 10px; /* ditto */
}

div#header_main_right { /* right side of the mesh part */
	float: right; /* see #header_main_left */
	margin-top: 6px; /* see #header_main_left */
	margin-right: 10px;
	text-align: center;
}

a#shopCartLink { /* a box covering the blue checkout area embedded in the background image */
	display: block; /* so we can give an <a> tag dimensions */
	height: 41px; /* height of the checkout thing */
	width: 90px; /* width of the checkout thing */
	margin-bottom: 2px; /* creates some space above text */
}

a#basketQty { /* the link underneath the blue checkout area */
	font-size: 12px;
	color: white;
}

div#header_bar { /* the blue bar */
	height: 31px; /* exact height of the blue bar */
	overflow: hidden; /* if something goes wrong (positioning), the header won't budge. */
	clear: both; /* ensures this is moved underneath the above floats */
}

div#header_bar_left { /* left side of the blue bar */
	float: left; /* see #header_main_left */
	margin-top: 2px;
	margin-left: 10px;
}

div#header_bar_right { /* right side of the blue bar */
	float: right; /* see #header_main_left */
	margin-top: 2px;
	margin-right: 10px;
}

ul#top_nav_links {
	font-size: 13px;
	list-style: none; /* no bullets */
	position: absolute; /* means "relative to first parent with position: relative" ... in this case #header_main */
	bottom: 0px; /* bottom of menu aligned to bottom of #header_main */
	left: 150px; /* the width of the logo.  left side of menu relative to left side of #header_main */
	margin: 0 0 5px 30px; /* left side offset from logo, bottom offset from bottom edge of mesh area */
	padding: 0; /* get rid of default padding for lists */
}

ul#top_nav_links li {
	line-height: 35px; /* makes room for background image while keeping text aligned vertically in middle */
	float: left; /* place the list items side-by-side */
	padding: 0 8px; /* horizontal spacing (if this was margin, the background would be cut off) */
}

ul#top_nav_links li:hover {	background-image: url('http://gtmsportswear.com/gtm/images/newright/button_back.gif'); } /* keep? */

ul#top_nav_links a {
	color: white;
	font-weight: bold;
}

div#products {
	background-color: #4d4d4d;
	background-image: url('http://gtmsportswear.com/gtm/images/newright/pb.gif');
	background-repeat: no-repeat;
	overflow:visible;
	font:Geneva, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:center;
}

td.side_menu_rt { /* contains right side */
	/*background-color: #666666; /* changed to white */
	border: 0; /* for some reason, there is a default border on this cell */
	border-bottom: 3px  solid #666666;
	background:#000000;
}

td.side_menu_rt_solid{ /* contains right side */
	/*background-color: #666666; /* changed to white */
	background-color:#000000;
 	padding:0em;margin:0em;
	text-align:center;
	width:176px;
}
td.side_menu_lt { /* contains right side */
	/*background-color: #666666; /* changed to white */
	background-image: url('http://gtmsportswear.com/gtm/images/newright/left_back_solid.jpg');
	background-repeat: repeat-y;
	border: 0; /* for some reason, there is a default border on this cell */
	border-bottom: 0px  solid #666666;
	width:106px;
	text-align:center;
}


td.side_menu_rt_fuzz { /* contains right side */
	/*background-color: #666666; /* changed to white */
	padding: 0 8px 0 0;
	background: url('http://gtmsportswear.com/gtm/images/newright/fuzz1.gif') top right repeat-y;
	border: 0; /* for some reason, there is a default border on this cell */
}


div#right_container { /* contains entire right side */
	text-align: center;
	background-color: white;
	width: 170px;
	border-left: 3px solid #000000;
	border-right: 3px solid #666666;
	border-top:19px solid #666666;
}
div#left_container { /* contains entire right side */
	text-align: center;
	background-color: white;
	width: 106px;
	border-left: 0px solid #000000;
	border-right: 0px solid #000000;
	border-top:0px solid #000000;
	
}


div#top_search form {
	padding:.1em;
	margin:.1em;
	background-color:#000000;
}
div#right_container_solid div#win250 { /* left nav menus */
	padding: 0 0 .25em 0; /* clockwise: top right bottom left.  Want bottom padding to push border away from last link */
	text-align:center;
}
div#right_container_solid div#inc5000 { /* left nav menus */
	padding: 2.5em 0 1em 0;
	text-align:center;
	margin:0em;
}
div#feedback { 
	padding-top:2px;
	padding-bottom: 2px; /* if this isn't here, the top margin of div#win250 does strange things */
	background-color: transparent;
}

div#freeShipping { 
	padding-top:2px;
	padding-bottom: 2px; /* if this isn't here, the top margin of div#win250 does strange things */
	background-color: transparent;
}

div#signUp{ 
	padding-top:2px;
	padding-bottom: 2px; 
	background-color: transparent;	
}
div#left_search{ 
	padding-top:2px;
	padding-bottom: 2px; 
	background-color: transparent;	
}
div#left_bottom{ 
	padding-top:2px;
	padding-bottom: 2px; 
	background-color: transparent;	
	background-image: url('http://gtmsportswear.com/gtm/images/newright/left_back_solid.jpg');
	background-repeat: repeat-y;
}
div#left_design_online{ 
	padding-top:2px;
	padding-bottom: 2px; 
	background-color: transparent;	
}
div#products_menu{ 
	padding-top:2px;
	padding-bottom: 2px; 
	background-color: transparent;	
}
div#submitphoto { 
	text-align:left;
	padding-bottom: 2px;
	background-color: #ffffff;
	
}
div#submitphoto input#fileToUpload {
	width: 162px;
}


input.layout_textBox {
	font-size: 10px;
} /* search and email address text boxes */

.goButton {
	vertical-align: middle;
} /* button for search and email address text boxes */


/*attempt to replicate upload box at http://inkspot.customink.com/iotw/?loc=side this is what Nikki wants */