/* CSS Document */

/* CSS Reset - This takes away all various browser defaults for certain elements so we may start styling from scratch everywhere (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus {outline: 0;}
body {
	line-height: 1.1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}

table {/* tables still need 'cellspacing=0' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}
/* End CSS Reset */


/* Main Container and Sections, Layout Only */
body {
	margin: 0 auto;
	text-align: center;
	}
#container {
	width: 800px;
	margin: 0 auto;
	text-align: left;
	background: #000;
	}
#header {
	background: #000;
	}
body.one_column #body {
	padding: 20px;
	width: 780px;
	}
body.two_column #sideColumn {
	padding: 10px;
	width: 131px;
	}
body.two_column #body {
	padding: 10px;
	width: 629px;
	}
body.homepage #body {
	padding: 10px 0;
	width: 780px;
	}
body.main_page #body {
	background: #000;
	color: #fff;
	}
body.content_page #body {
	background: #f8f6e1;
	color: #373737;
	}

td#body { /* This gives the td#body cell located on every page a (minimum) height of 500pc, which should stretch with more content. This whole property might be removed as the site grows in content and has not problem covering 500px naturally */
	height: 500px;
	overflow: visible;
	}
/* End Main Container and Sections, Layout Only */


/* Begin Typography, Colors, and basic Layout for text elements */
body {
	font: 11px Helvetica, Arial, sans-serif;
	}
a, a:link, a:visited {
	color: #e9c28a;
	font-weight: bold;
	text-decoration: none;
	}
a:hover, a:active {
	color: #a67956;
	text-decoration: none;
	}
body.content_page #body a, body.content_page #body a:visited {
	color: #000;
	}
body.content_page #body a:hover, body.content_page #body a:active {
	color: #333;
	}

#body p {
	margin: 18px 0;
	line-height: 13pt;
	}
#body h1 {
	font-size: 1.5em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	} 
#body h2 {
	font-size: 1.5em;
	margin: 20px 0 -10px 0;
	}
#body h3 {
	font-size: 1.3em;
	font-weight: bold;
	}
#body h4 {
	font-size: 1.1em;
	font-weight: bold;
	}
#body ul, #body ol {
	margin: 5px;
	}
#body ul li {
	list-style-type: disc;
	margin: 0 10px 10px 15px;
	line-height: 14px;
	}
#body ol li {
	list-style-type: decimal;
	margin: 0 10px 10px 15px;
	}
em {
	font-style: italic;
	}
strong, b, .bold {
	font-weight: bold;
	}
.caption {
	font-size: .9em;
	color: #ccc;
	}
.red {
	color: #ff0000;
	}
.show {display: block;}
.hide {display: none;}	
body.content_page #body .caption {
	color: #444;
	}
body.content_page #body label {
	font-weight: bold;
	margin: 6px 0;
	float: left;
	}
body.content_page #body input[type=text], body.content_page #body select {
	height: 14px;
	padding: 3px;
	font-size: .9em;
	border: 1px solid #c1956b;
	margin: 0 0 6px 10px; 
}
body.content_page #body select {
	height: 20px;
	margin: 0 0 7px 80px;
	display: block;
}
body.content_page #body textarea {
	height: 50px;
	padding: 3px;
	font-size: .9em;
	border: 1px solid #c1956b;
	margin: 0 0 3px 10px; 
}
input.leftmargin {
	margin: 15px 0 0 80px;
	}
/* End Typography and Colors */


/* Begin Images */
#body.main_page #body img, #body.main_page #body img a {
	text-decoration: none;
	border: 0;
	}
#body.main_page #body img.border, #body.main_page #body img.border a {
	border: 1px solid #000;
	}
img.center, a img.center:hover {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	text-align: center;
	}
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-weight: bold;
	}	
img.alignright {
	display: inline;
	margin: 0px 15px 15px;
	}
img.alignleft {
	margin: 0 20px 20px 20px;
	display: inline;
	}
.alignright {
	float: right;
	}	
.alignleft {
	float: left;
	}
/* End Images */


/* Container and Header Styles, micro-styles located inside of each container and container elements (if different that defined in the generic *Typography and Colors* section above */
#container {
	color: #fff;
	}
#header {
	height: 180px;
	}
td#logo {
	width: 170px;
	text-align: center;
	}
td#logo h1 a {
	margin: 5px 0 0 35px;
	display: block;
	width: 82px;
	height: 145px;
	text-indent: -999px;
	background: url(../images/toca_logo.png) no-repeat;
	}
td#banner {
	margin: 0 0 0 100px;
	border: 0;
	background: url(../flash/banners/5thann.jpg) no-repeat;
	} 
#flashPlayer {
	margin: 0 0 0 0px;
	float: right;
	}
#eBlast_signup {
	display: block;
	background: url(../images/bg_eBlast_signup.png) top center no-repeat;
	border-left: 1px solid #a2845e;
	width: 140px;
	height: 90px;
	padding: 60px 5px 5px 5px;
	color: #c1956b;
	}
#eBlast_signup label {
	font-weight: bold;
	}
#eBlast_signup input.emailfield {
	width: 80px;
	height: 14px;
	padding: 3px;
	font-size: .9em;
	border: 0;
	margin: -18px 0 13px 45px;
	}
#eBlast_signup .emailsubmit {
	margin: -5px 0 0 45px;
	width: 60px;
	background: #c1956b;
	border: 0;
	}
#navMain {
	height: 24px;
	background: transparent url(../images/bg_mainnav.png) top left repeat-x;
	width: 800px;
	}
#navMain a, #navMain a:visited {
	text-decoration: none;
	color: #000;
	}
#navMain a:hover, #navMain a:active {
	background: url(../images/bg_mainnav_hover.png) top left repeat;
	}
/* Main Nav and Drop Down Styles */
ul#nav {
	width: 599px;
	height: 24px;
  background: url(../images/main_navigation.png) top left no-repeat;
	float: left;
	}
ul#nav li {
	list-style: none;
	float: left;
	top: 0;
	text-indent: -9999px;
	}
ul#nav li, ul#nav li a {
	display: block;
	height: 24px;
	}
#navNews {left: 0; width: 75px;}
#navNews a:hover {background: url(../images/main_navigation.png) 0 -24px no-repeat;}
#navProduct {left: 76px; width: 76px;}
#navProduct a:hover {background: url(../images/main_navigation.png) -75px -24px no-repeat;}
#navbuy {left: 152px; width: 62px;}
#navbuy a:hover {background: url(../images/main_navigation.png) -151px -24px no-repeat;}
#navArtists {left: 214px; width: 70px;}
#navArtists a:hover {background: url(../images/main_navigation.png) -213px -24px no-repeat;}
#navArtistUpdate {left: 284px; width: 89px;}
#navArtistUpdate a:hover {background: url(../images/main_navigation.png) -283px -24px no-repeat;}
#navTips {left: 373px; width: 85px;}
#navTips a:hover {background: url(../images/main_navigation.png) -372px -24px no-repeat;}
#navMedia {left: 458px; width: 71px;}
#navMedia a:hover {background: url(../images/main_navigation.png) -457px -24px no-repeat;}
#navWear {left: 528px; width: 71px;}
#navWear a:hover {background: url(../images/main_navigation.png) -528px -24px no-repeat;}

#nav li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }
#nav li > ul {
	top: auto;
	left: auto;
	}
#nav li:hover ul, li.over ul{
	display: block;
}
#nav li:hover ul li {
	background: #c59b6f;
	float: none;
	background: url("../images/bg_mainnav.png") top left repeat-x;
	text-indent: 0;
	font-size: 11px !important;
	}
#nav li:hover ul li a {
	border-top: #333 solid 1px;
	display: block;
	padding: 7px 8px 7px 8px;
}
#nav li:hover ul li:hover a {
	background: url("../images/bg_mainnav_hover.png") top left repeat-x;
	}
#nav li#navNews:hover ul li a {width: 80px;}
#nav li#navProduct:hover ul li a {width: 80px;}
#nav li#navTips:hover ul li a {width: 110px;}
#nav li#navMedia:hover ul li a {width: 90px;}

/* Main Nav and Drop Down Styles */
#search {
	margin: -2px 0 2px 600px;
	}
#search input.searchfield {
	width: 120px;
	height: 12px;
	padding: 3px;
	font-size: .8em;
	border: 0;
	margin: 3px 0 0 0;
	float: left;
	}
#search input.searchbutton {
	height: 16px;
	margin: 4px 15px 0 0;
	float: right;
	}
/* End Container and Header Styles*/


/* Begin Styles for the sidebar column in two column pages */
#sideColumn {
	color: #000;
	}
#sideColumn h2 {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
	}
#sideColumn ul li {
	margin: 10px 0 10px 15px;
	list-style-type: disc;
	}
#sideColumn ol li {
	margin: 10px 0 10px 18px;
	list-style-type: decimal;
}
#sideColumn li a, #sidecolumn li a:visited {
	color: #000;
	}
#sideColumn li a:hover, #sidecolumn li a:active, #sideColumn li.selected a {
	color: #f8f6e1;
	}
#sideColumn .spacer {
	border-top: 1px solid #000;
	margin: 15px 0;
	clear: both;
	}
/* End Styles for the sidebar column in two column pages */


/* Begin styles for the footer */
ul#footer {
	margin: 15px 0 10px 0;
	font-size: 0.6em;
	text-align: center;
	display: block;
	clear: both;
	border-top: #a67956 1px solid;
	padding-top: 15px;
	}
ul#footer li {
	list-style-type: none;
	display: inline;
	margin: 0 0 0 4px;
	}
ul#footer li a {
	margin: 0 4px 0 0;
	}
/* End styles for the footer */


/* Begin table grid styles (these are used to created the grids for the online catalog) */
body.two_column #body table.grid {
	width: 610px;
}
body.two_column #body table.grid td {
	text-align: center;
}
body.two_column #body table.five_wide td { /* A table five columsn wide */
	padding: 15px 4px;
	width: 122px;
}
body.two_column #body table.grid img {
	display: block;
	margin-bottom: 5px;
	}
/* End table grid styles */


/* Begin misc styles */
#sizer { /* This is for the container of the text-resizer. Rest of the styles for the text resizer are located in text.large.css, text-medium.css, and text-small.css */
	font-size: .9em;
	display: block;
	text-align: right;
	margin: 10px 20px;
	}
.no_line_break {
	white-space: nowrap;
	}
#body ul.MainLinkList {
	margin: 30px 20px;
	}
#body ul.MainLinkList_w_captions li {
	margin-bottom: 15px;
	}
#body ul.MainLinkList a {
	display: block;
	font-size: 1.4em;
	margin-bottom: 3px;
	}
	
/* End misc styles */
#body h6 {
	font-size: 1em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}